mirror of
https://github.com/FranP-code/create-better-t-stack.git
synced 2025-10-12 23:52:15 +00:00
add solid
This commit is contained in:
@@ -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;
|
||||
|
||||
|
||||
@@ -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");
|
||||
|
||||
@@ -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) {
|
||||
|
||||
@@ -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) {
|
||||
|
||||
@@ -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");
|
||||
|
||||
@@ -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";
|
||||
|
||||
|
||||
@@ -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 {
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user