add solid

This commit is contained in:
Aman Varshney
2025-05-05 09:51:33 +05:30
parent e9f63be765
commit 4f89b8bc15
41 changed files with 1362 additions and 207 deletions

View File

@@ -14,6 +14,7 @@ export async function setupAddons(config: ProjectConfig) {
frontend.includes("react-router") || frontend.includes("tanstack-router");
const hasNuxtFrontend = frontend.includes("nuxt");
const hasSvelteFrontend = frontend.includes("svelte");
const hasSolidFrontend = frontend.includes("solid");
if (addons.includes("turborepo")) {
await addPackageDependency({
@@ -22,12 +23,15 @@ export async function setupAddons(config: ProjectConfig) {
});
}
if (addons.includes("pwa") && hasReactWebFrontend) {
if (addons.includes("pwa") && (hasReactWebFrontend || hasSolidFrontend)) {
await setupPwa(projectDir, frontend);
}
if (
addons.includes("tauri") &&
(hasReactWebFrontend || hasNuxtFrontend || hasSvelteFrontend)
(hasReactWebFrontend ||
hasNuxtFrontend ||
hasSvelteFrontend ||
hasSolidFrontend)
) {
await setupTauri(config);
}
@@ -48,7 +52,9 @@ function getWebAppDir(
): string {
if (
frontends.some((f) =>
["react-router", "tanstack-router", "nuxt", "svelte"].includes(f),
["react-router", "tanstack-router", "nuxt", "svelte", "solid"].includes(
f,
),
)
) {
return path.join(projectDir, "apps/web");
@@ -102,7 +108,7 @@ async function setupHusky(projectDir: string) {
async function setupPwa(projectDir: string, frontends: ProjectFrontend[]) {
const isCompatibleFrontend = frontends.some((f) =>
["react-router", "tanstack-router"].includes(f),
["react-router", "tanstack-router", "solid"].includes(f),
);
if (!isCompatibleFrontend) return;

View File

@@ -18,6 +18,7 @@ export async function setupApi(config: ProjectConfig): Promise<void> {
);
const hasNuxtWeb = frontend.includes("nuxt");
const hasSvelteWeb = frontend.includes("svelte");
const hasSolidWeb = frontend.includes("solid");
if (!isConvex && api !== "none") {
const serverDir = path.join(projectDir, "apps/server");
@@ -85,6 +86,18 @@ export async function setupApi(config: ProjectConfig): Promise<void> {
projectDir: webDir,
});
}
} else if (hasSolidWeb) {
if (api === "orpc") {
await addPackageDependency({
dependencies: [
"@orpc/solid-query",
"@orpc/client",
"@orpc/server",
"@tanstack/solid-query",
],
projectDir: webDir,
});
}
}
}
@@ -114,6 +127,7 @@ export async function setupApi(config: ProjectConfig): Promise<void> {
"next",
"native",
];
const needsSolidQuery = frontend.includes("solid");
const needsReactQuery = frontend.some((f) => reactBasedFrontends.includes(f));
if (needsReactQuery && !isConvex) {
@@ -155,6 +169,26 @@ export async function setupApi(config: ProjectConfig): Promise<void> {
}
}
if (needsSolidQuery && !isConvex) {
const solidQueryDeps: AvailableDependencies[] = ["@tanstack/solid-query"];
const solidQueryDevDeps: AvailableDependencies[] = [
"@tanstack/solid-query-devtools",
];
if (webDirExists) {
const webPkgJsonPath = path.join(webDir, "package.json");
if (await fs.pathExists(webPkgJsonPath)) {
try {
await addPackageDependency({
dependencies: solidQueryDeps,
devDependencies: solidQueryDevDeps,
projectDir: webDir,
});
} catch (error) {}
}
}
}
if (isConvex) {
if (webDirExists) {
const webPkgJsonPath = path.join(webDir, "package.json");

View File

@@ -40,6 +40,7 @@ function generateReadmeContent(options: ProjectConfig): string {
const hasNext = frontend.includes("next");
const hasTanstackStart = frontend.includes("tanstack-start");
const hasSvelte = frontend.includes("svelte");
const hasSolid = frontend.includes("solid");
const hasNuxt = frontend.includes("nuxt");
const packageManagerRunCmd =
@@ -65,7 +66,9 @@ This project was created with [Better-T-Stack](https://github.com/AmanVarshney01
? "SvelteKit"
: hasNuxt
? "Nuxt"
: ""
: hasSolid
? "SolidJS"
: ""
}, ${backend[0].toUpperCase() + backend.slice(1)}, tRPC, and more.
## Features
@@ -94,7 +97,8 @@ ${
hasNext ||
hasTanstackStart ||
hasSvelte ||
hasNuxt
hasNuxt ||
hasSolid
? `Open [http://localhost:${webPort}](http://localhost:${webPort}) in your browser to see the web application.`
: ""
}
@@ -118,7 +122,8 @@ ${
hasNext ||
hasTanstackStart ||
hasSvelte ||
hasNuxt
hasNuxt ||
hasSolid
? `│ ├── web/ # Frontend application (${
hasTanstackRouter
? "React + TanStack Router"
@@ -132,7 +137,9 @@ ${
? "SvelteKit"
: hasNuxt
? "Nuxt"
: ""
: hasSolid
? "SolidJS"
: ""
})\n`
: ""
}${
@@ -178,6 +185,7 @@ function generateFeaturesList(
const hasTanstackStart = frontend.includes("tanstack-start");
const hasSvelte = frontend.includes("svelte");
const hasNuxt = frontend.includes("nuxt");
const hasSolid = frontend.includes("solid");
const addonsList = [
"- **TypeScript** - For type safety and improved developer experience",
@@ -199,6 +207,8 @@ function generateFeaturesList(
addonsList.push("- **SvelteKit** - Web framework for building Svelte apps");
} else if (hasNuxt) {
addonsList.push("- **Nuxt** - The Intuitive Vue Framework");
} else if (hasSolid) {
addonsList.push("- **SolidJS** - Simple and performant reactivity");
}
if (hasNative) {

View File

@@ -74,12 +74,14 @@ export async function setupEnvironmentVariables(
const hasNextJs = frontend.includes("next");
const hasNuxt = frontend.includes("nuxt");
const hasSvelte = frontend.includes("svelte");
const hasSolid = frontend.includes("solid");
const hasWebFrontend =
hasReactRouter ||
hasTanStackRouter ||
hasTanStackStart ||
hasNextJs ||
hasNuxt ||
hasSolid ||
hasSvelte;
if (hasWebFrontend) {

View File

@@ -63,6 +63,7 @@ export function displayPostInstallInstructions(
"tanstack-start",
"nuxt",
"svelte",
"solid",
].includes(f),
);
const hasNative = frontend?.includes("native");
@@ -75,7 +76,7 @@ export function displayPostInstallInstructions(
!isConvex && database !== "none" && orm === "none" ? getNoOrmWarning() : "";
const hasReactRouter = frontend?.includes("react-router");
const hasSvelte = frontend?.includes("svelte");
const hasSvelte = frontend?.includes("svelte"); // Keep separate for port logic
const webPort = hasReactRouter || hasSvelte ? "5173" : "3001";
const tazeCommand = getPackageExecutionCommand(packageManager, "taze -r");

View File

@@ -45,10 +45,10 @@ export async function setupTauri(config: ProjectConfig): Promise<void> {
const hasReactRouter = frontend.includes("react-router");
const hasNuxt = frontend.includes("nuxt");
const hasSvelte = frontend.includes("svelte");
const hasSolid = frontend.includes("solid");
const devUrl = hasReactRouter
? "http://localhost:5173"
: hasSvelte
const devUrl =
hasReactRouter || hasSvelte
? "http://localhost:5173"
: "http://localhost:3001";

View File

@@ -1,7 +1,6 @@
import path from "node:path";
import fs from "fs-extra";
import { globby } from "globby";
import pc from "picocolors";
import { PKG_ROOT } from "../constants";
import type { ProjectConfig } from "../types";
import { processTemplate } from "../utils/template-processor";
@@ -70,10 +69,11 @@ export async function setupFrontendTemplates(
);
const hasNuxtWeb = context.frontend.includes("nuxt");
const hasSvelteWeb = context.frontend.includes("svelte");
const hasSolidWeb = context.frontend.includes("solid");
const hasNative = context.frontend.includes("native");
const isConvex = context.backend === "convex";
if (hasReactWeb || hasNuxtWeb || hasSvelteWeb) {
if (hasReactWeb || hasNuxtWeb || hasSvelteWeb || hasSolidWeb) {
const webAppDir = path.join(projectDir, "apps/web");
await fs.ensureDir(webAppDir);
@@ -105,6 +105,7 @@ export async function setupFrontendTemplates(
);
} else {
}
if (!isConvex && context.api !== "none") {
const apiWebBaseDir = path.join(
PKG_ROOT,
@@ -127,7 +128,8 @@ export async function setupFrontendTemplates(
await processAndCopyFiles("**/*", nuxtBaseDir, webAppDir, context);
} else {
}
if (!isConvex && context.api !== "none") {
if (!isConvex && context.api === "orpc") {
const apiWebNuxtDir = path.join(
PKG_ROOT,
`templates/api/${context.api}/web/nuxt`,
@@ -143,6 +145,7 @@ export async function setupFrontendTemplates(
await processAndCopyFiles("**/*", svelteBaseDir, webAppDir, context);
} else {
}
if (!isConvex && context.api === "orpc") {
const apiWebSvelteDir = path.join(
PKG_ROOT,
@@ -158,6 +161,23 @@ export async function setupFrontendTemplates(
} else {
}
}
} else if (hasSolidWeb) {
const solidBaseDir = path.join(PKG_ROOT, "templates/frontend/solid");
if (await fs.pathExists(solidBaseDir)) {
await processAndCopyFiles("**/*", solidBaseDir, webAppDir, context);
} else {
}
if (!isConvex && context.api === "orpc") {
const apiWebSolidDir = path.join(
PKG_ROOT,
`templates/api/${context.api}/web/solid`,
);
if (await fs.pathExists(apiWebSolidDir)) {
await processAndCopyFiles("**/*", apiWebSolidDir, webAppDir, context);
} else {
}
}
}
}
@@ -323,6 +343,7 @@ export async function setupAuthTemplate(
);
const hasNuxtWeb = context.frontend.includes("nuxt");
const hasSvelteWeb = context.frontend.includes("svelte");
const hasSolidWeb = context.frontend.includes("solid");
const hasNative = context.frontend.includes("native");
if (serverAppDirExists) {
@@ -380,7 +401,10 @@ export async function setupAuthTemplate(
}
}
if ((hasReactWeb || hasNuxtWeb || hasSvelteWeb) && webAppDirExists) {
if (
(hasReactWeb || hasNuxtWeb || hasSvelteWeb || hasSolidWeb) &&
webAppDirExists
) {
if (hasReactWeb) {
const authWebBaseSrc = path.join(
PKG_ROOT,
@@ -390,6 +414,7 @@ export async function setupAuthTemplate(
await processAndCopyFiles("**/*", authWebBaseSrc, webAppDir, context);
} else {
}
const reactFramework = context.frontend.find((f) =>
["tanstack-router", "react-router", "tanstack-start", "next"].includes(
f,
@@ -432,6 +457,19 @@ export async function setupAuthTemplate(
} else {
}
}
} else if (hasSolidWeb) {
if (context.api === "orpc") {
const authWebSolidSrc = path.join(PKG_ROOT, "templates/auth/web/solid");
if (await fs.pathExists(authWebSolidSrc)) {
await processAndCopyFiles(
"**/*",
authWebSolidSrc,
webAppDir,
context,
);
} else {
}
}
}
}
@@ -459,6 +497,7 @@ export async function setupAddonsTemplate(
if (addon === "pwa") {
addonSrcDir = path.join(PKG_ROOT, "templates/addons/pwa/apps/web");
addonDestDir = path.join(projectDir, "apps/web");
if (!(await fs.pathExists(addonDestDir))) {
continue;
}
@@ -475,6 +514,14 @@ export async function setupExamplesTemplate(
projectDir: string,
context: ProjectConfig,
): Promise<void> {
if (
!context.examples ||
context.examples.length === 0 ||
context.examples[0] === "none"
) {
return;
}
const serverAppDir = path.join(projectDir, "apps/server");
const webAppDir = path.join(projectDir, "apps/web");
@@ -486,84 +533,85 @@ export async function setupExamplesTemplate(
);
const hasNuxtWeb = context.frontend.includes("nuxt");
const hasSvelteWeb = context.frontend.includes("svelte");
const hasSolidWeb = context.frontend.includes("solid");
for (const example of context.examples) {
if (
!context.examples ||
context.examples.length === 0 ||
context.examples[0] === "none"
)
continue;
if (example === "none") continue;
const exampleBaseDir = path.join(PKG_ROOT, `templates/examples/${example}`);
if (example === "ai" && context.backend === "next" && serverAppDirExists) {
const aiNextServerSrc = path.join(exampleBaseDir, "server/next");
if (await fs.pathExists(aiNextServerSrc)) {
await processAndCopyFiles(
"**/*",
aiNextServerSrc,
serverAppDir,
context,
false,
);
}
}
if (serverAppDirExists) {
if (serverAppDirExists && context.backend !== "convex") {
const exampleServerSrc = path.join(exampleBaseDir, "server");
if (await fs.pathExists(exampleServerSrc)) {
if (context.backend !== "convex") {
if (context.orm !== "none" && context.database !== "none") {
const exampleOrmBaseSrc = path.join(
exampleServerSrc,
context.orm,
"base",
);
if (await fs.pathExists(exampleOrmBaseSrc)) {
await processAndCopyFiles(
"**/*",
exampleOrmBaseSrc,
serverAppDir,
context,
false,
);
}
const exampleDbSchemaSrc = path.join(
exampleServerSrc,
context.orm,
context.database,
);
if (await fs.pathExists(exampleDbSchemaSrc)) {
await processAndCopyFiles(
"**/*",
exampleDbSchemaSrc,
serverAppDir,
context,
false,
);
}
}
const generalServerFiles = await globby(["*.ts", "*.hbs"], {
cwd: exampleServerSrc,
onlyFiles: true,
deep: 1,
ignore: [`${context.orm}/**`],
});
for (const file of generalServerFiles) {
const srcPath = path.join(exampleServerSrc, file);
const destPath = path.join(serverAppDir, file.replace(".hbs", ""));
if (srcPath.endsWith(".hbs")) {
await processTemplate(srcPath, destPath, context);
} else {
if (example === "ai" && context.backend === "next") {
const aiNextServerSrc = path.join(exampleServerSrc, "next");
if (await fs.pathExists(aiNextServerSrc)) {
await processAndCopyFiles(
"**/*",
aiNextServerSrc,
serverAppDir,
context,
false,
);
}
}
if (context.orm !== "none" && context.database !== "none") {
const exampleOrmBaseSrc = path.join(
exampleServerSrc,
context.orm,
"base",
);
if (await fs.pathExists(exampleOrmBaseSrc)) {
await processAndCopyFiles(
"**/*",
exampleOrmBaseSrc,
serverAppDir,
context,
false,
);
}
const exampleDbSchemaSrc = path.join(
exampleServerSrc,
context.orm,
context.database,
);
if (await fs.pathExists(exampleDbSchemaSrc)) {
await processAndCopyFiles(
"**/*",
exampleDbSchemaSrc,
serverAppDir,
context,
false,
);
}
}
const ignorePatterns = [`${context.orm}/**`];
if (example === "ai" && context.backend === "next") {
ignorePatterns.push("next/**");
}
const generalServerFiles = await globby(["**/*.ts", "**/*.hbs"], {
cwd: exampleServerSrc,
onlyFiles: true,
deep: 1,
ignore: ignorePatterns,
});
for (const file of generalServerFiles) {
const srcPath = path.join(exampleServerSrc, file);
const destPath = path.join(serverAppDir, file.replace(".hbs", ""));
try {
if (srcPath.endsWith(".hbs")) {
await processTemplate(srcPath, destPath, context);
} else {
if (!(await fs.pathExists(destPath))) {
await fs.copy(srcPath, destPath, { overwrite: false });
}
}
}
} catch (error) {}
}
}
@@ -620,6 +668,18 @@ export async function setupExamplesTemplate(
);
} else {
}
} else if (hasSolidWeb) {
const exampleWebSolidSrc = path.join(exampleBaseDir, "web/solid");
if (await fs.pathExists(exampleWebSolidSrc)) {
await processAndCopyFiles(
"**/*",
exampleWebSolidSrc,
webAppDir,
context,
false,
);
} else {
}
}
}
}