franpcode/create-better-t-stack
1
0
Fork 0
mirror of https://github.com/FranP-code/create-better-t-stack.git synced 2025-10-12 23:52:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

add svelte

Browse Source
This commit is contained in:
Aman Varshney
2025-04-26 08:12:01 +05:30
parent 0e8af094da
commit 8adf020c2a
45 changed files with 1212 additions and 97 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
apps/cli/src/helpers/addons-setup.ts
View File

@@ -13,6 +13,7 @@ export async function setupAddons(config: ProjectConfig) {
const hasReactWebFrontend =
frontend.includes("react-router") || frontend.includes("tanstack-router");
const hasNuxtFrontend = frontend.includes("nuxt");
const hasSvelteFrontend = frontend.includes("svelte");
if (addons.includes("turborepo")) {
await addPackageDependency({
@@ -24,7 +25,10 @@ export async function setupAddons(config: ProjectConfig) {
if (addons.includes("pwa") && hasReactWebFrontend) {
await setupPwa(projectDir, frontend);
}
if (addons.includes("tauri") && (hasReactWebFrontend || hasNuxtFrontend)) {
if (
addons.includes("tauri") &&
(hasReactWebFrontend || hasNuxtFrontend || hasSvelteFrontend)
) {
await setupTauri(config);
}
if (addons.includes("biome")) {
@@ -38,10 +42,17 @@ export async function setupAddons(config: ProjectConfig) {
}
}
export function getWebAppDir(
function getWebAppDir(
projectDir: string,
frontends: ProjectFrontend[],
): string {
if (
frontends.some((f) =>
["react-router", "tanstack-router", "nuxt", "svelte"].includes(f),
)
) {
return path.join(projectDir, "apps/web");
}
return path.join(projectDir, "apps/web");
}

8
apps/cli/src/helpers/api-setup.ts
View File

@@ -13,6 +13,7 @@ export async function setupApi(config: ProjectConfig): Promise<void> {
["tanstack-router", "react-router", "tanstack-start", "next"].includes(f),
);
const hasNuxtWeb = frontend.includes("nuxt");
const hasSvelteWeb = frontend.includes("svelte");
if (api === "orpc") {
await addPackageDependency({
@@ -61,6 +62,13 @@ export async function setupApi(config: ProjectConfig): Promise<void> {
projectDir: webDir,
});
}
} else if (hasSvelteWeb) {
if (api === "orpc") {
await addPackageDependency({
dependencies: ["@orpc/svelte-query", "@orpc/client", "@orpc/server"],
projectDir: webDir,
});
}
}
}

1
apps/cli/src/helpers/auth-setup.ts
View File

@@ -32,6 +32,7 @@ export async function setupAuth(config: ProjectConfig): Promise<void> {
"tanstack-start",
"next",
"nuxt",
"svelte",
].includes(f),
);

106
apps/cli/src/helpers/create-readme.ts
View File

@@ -39,20 +39,34 @@ function generateReadmeContent(options: ProjectConfig): string {
const hasNative = frontend.includes("native");
const hasNext = frontend.includes("next");
const hasTanstackStart = frontend.includes("tanstack-start");
const hasSvelte = frontend.includes("svelte");
const hasNuxt = frontend.includes("nuxt");
const packageManagerRunCmd =
packageManager === "npm" ? "npm run" : packageManager;
let webPort = "3001";
if (hasReactRouter) {
if (hasReactRouter || hasSvelte) {
webPort = "5173";
} else if (hasNext) {
webPort = "3000";
}
return `# ${projectName}
This project was created with [Better-T-Stack](https://github.com/AmanVarshney01/create-better-t-stack), a modern TypeScript stack that combines React, ${hasTanstackRouter ? "TanStack Router" : hasReactRouter ? "React Router" : hasNext ? "Next.js" : hasTanstackStart ? "TanStack Start" : ""}, ${backend[0].toUpperCase() + backend.slice(1)}, tRPC, and more.
This project was created with [Better-T-Stack](https://github.com/AmanVarshney01/create-better-t-stack), a modern TypeScript stack that combines React, ${
hasTanstackRouter
? "TanStack Router"
: hasReactRouter
? "React Router"
: hasNext
? "Next.js"
: hasTanstackStart
? "TanStack Start"
: hasSvelte
? "SvelteKit"
: hasNuxt
? "Nuxt"
: ""
}, ${backend[0].toUpperCase() + backend.slice(1)}, tRPC, and more.
## Features
@@ -75,7 +89,12 @@ ${packageManagerRunCmd} dev
\`\`\`
${
hasTanstackRouter || hasReactRouter || hasNext || hasTanstackStart
hasTanstackRouter ||
hasReactRouter ||
hasNext ||
hasTanstackStart ||
hasSvelte ||
hasNuxt
? `Open [http://localhost:${webPort}](http://localhost:${webPort}) in your browser to see the web application.`
: ""
}
@@ -93,12 +112,53 @@ ${
\`\`\`
${projectName}/
├── apps/
${hasTanstackRouter || hasReactRouter || hasNext || hasTanstackStart ? `│ ├── web/ # Frontend application (${hasTanstackRouter ? "React + TanStack Router" : hasReactRouter ? "React + React Router" : hasNext ? "Next.js" : "React + TanStack Start"})\n` : ""}${hasNative ? "│ ├── native/ # Mobile application (React Native, Expo)\n" : ""}${addons.includes("starlight") ? "│ ├── docs/ # Documentation site (Astro Starlight)\n" : ""}│ └── server/ # Backend API (${backend[0].toUpperCase() + backend.slice(1)}, tRPC)
${
hasTanstackRouter ||
hasReactRouter ||
hasNext ||
hasTanstackStart ||
hasSvelte ||
hasNuxt
? `│ ├── web/ # Frontend application (${
hasTanstackRouter
? "React + TanStack Router"
: hasReactRouter
? "React + React Router"
: hasNext
? "Next.js"
: hasTanstackStart
? "React + TanStack Start"
: hasSvelte
? "SvelteKit"
: hasNuxt
? "Nuxt"
: ""
})\n`
: ""
}${
hasNative
? "│ ├── native/ # Mobile application (React Native, Expo)\n"
: ""
}${
addons.includes("starlight")
? "│ ├── docs/ # Documentation site (Astro Starlight)\n"
: ""
}│ └── server/ # Backend API (${
backend[0].toUpperCase() + backend.slice(1)
}, tRPC)
\`\`\`
## Available Scripts
${generateScriptsList(packageManagerRunCmd, database, orm, auth, hasNative, addons, backend)}
${generateScriptsList(
packageManagerRunCmd,
database,
orm,
auth,
hasNative,
addons,
backend,
)}
`;
}
@@ -116,6 +176,8 @@ function generateFeaturesList(
const hasNative = frontend.includes("native");
const hasNext = frontend.includes("next");
const hasTanstackStart = frontend.includes("tanstack-start");
const hasSvelte = frontend.includes("svelte");
const hasNuxt = frontend.includes("nuxt");
const addonsList = [
"- **TypeScript** - For type safety and improved developer experience",
@@ -133,6 +195,10 @@ function generateFeaturesList(
addonsList.push(
"- **TanStack Start** - SSR framework with TanStack Router",
);
} else if (hasSvelte) {
addonsList.push("- **SvelteKit** - Web framework for building Svelte apps");
} else if (hasNuxt) {
addonsList.push("- **Nuxt** - The Intuitive Vue Framework");
}
if (hasNative) {
@@ -162,8 +228,18 @@ function generateFeaturesList(
if (database !== "none") {
addonsList.push(
`- **${orm === "drizzle" ? "Drizzle" : "Prisma"}** - TypeScript-first ORM`,
`- **${database === "sqlite" ? "SQLite/Turso" : database === "postgres" ? "PostgreSQL" : database === "mysql" ? "MySQL" : "MongoDB"}** - Database engine`,
`- **${
orm === "drizzle" ? "Drizzle" : "Prisma"
}** - TypeScript-first ORM`,
`- **${
database === "sqlite"
? "SQLite/Turso"
: database === "postgres"
? "PostgreSQL"
: database === "mysql"
? "MySQL"
: "MongoDB"
}** - Database engine`,
);
}
@@ -203,7 +279,9 @@ function generateDatabaseSetup(
let setup = "## Database Setup\n\n";
if (database === "sqlite") {
setup += `This project uses SQLite${orm === "drizzle" ? " with Drizzle ORM" : " with Prisma"}.
setup += `This project uses SQLite${
orm === "drizzle" ? " with Drizzle ORM" : " with Prisma"
}.
1. Start the local SQLite database:
\`\`\`bash
@@ -213,13 +291,17 @@ cd apps/server && ${packageManagerRunCmd} db:local
2. Update your \`.env\` file in the \`apps/server\` directory with the appropriate connection details if needed.
`;
} else if (database === "postgres") {
setup += `This project uses PostgreSQL${orm === "drizzle" ? " with Drizzle ORM" : " with Prisma"}.
setup += `This project uses PostgreSQL${
orm === "drizzle" ? " with Drizzle ORM" : " with Prisma"
}.
1. Make sure you have a PostgreSQL database set up.
2. Update your \`apps/server/.env\` file with your PostgreSQL connection details.
`;
} else if (database === "mysql") {
setup += `This project uses MySQL${orm === "drizzle" ? " with Drizzle ORM" : " with Prisma"}.
setup += `This project uses MySQL${
orm === "drizzle" ? " with Drizzle ORM" : " with Prisma"
}.
1. Make sure you have a MySQL database set up.
2. Update your \`apps/server/.env\` file with your MySQL connection details.

8
apps/cli/src/helpers/env-setup.ts
View File

@@ -55,15 +55,17 @@ export async function setupEnvironmentVariables(
const hasTanStackStart = options.frontend.includes("tanstack-start");
const hasNextJs = options.frontend.includes("next");
const hasNuxt = options.frontend.includes("nuxt");
const hasSvelte = options.frontend.includes("svelte");
const hasWebFrontend =
hasReactRouter ||
hasTanStackRouter ||
hasTanStackStart ||
hasNextJs ||
hasNuxt;
hasNuxt ||
hasSvelte;
let corsOrigin = "http://localhost:3001";
if (hasReactRouter) {
if (hasReactRouter || hasSvelte) {
corsOrigin = "http://localhost:5173";
} else if (hasTanStackRouter || hasTanStackStart || hasNextJs || hasNuxt) {
corsOrigin = "http://localhost:3001";
@@ -128,6 +130,8 @@ export async function setupEnvironmentVariables(
envVarName = "NEXT_PUBLIC_SERVER_URL";
} else if (hasNuxt) {
envVarName = "NUXT_PUBLIC_SERVER_URL";
} else if (hasSvelte) {
envVarName = "PUBLIC_SERVER_URL";
}
const clientVars: EnvVariable[] = [

3
apps/cli/src/helpers/examples-setup.ts
View File

@@ -14,11 +14,14 @@ export async function setupExamples(config: ProjectConfig): Promise<void> {
const clientDirExists = await fs.pathExists(clientDir);
const hasNuxt = frontend.includes("nuxt");
const hasSvelte = frontend.includes("svelte");
if (clientDirExists) {
const dependencies: AvailableDependencies[] = ["ai"];
if (hasNuxt) {
dependencies.push("@ai-sdk/vue");
} else if (hasSvelte) {
dependencies.push("@ai-sdk/svelte");
}
await addPackageDependency({
dependencies,

10
apps/cli/src/helpers/post-installation.ts
View File

@@ -39,7 +39,7 @@ export function displayPostInstallInstructions(
const pwaInstructions =
addons?.includes("pwa") &&
(frontend?.includes("react-router") ||
frontend?.includes("tanstack-router")) // Exclude Nuxt from PWA instructions
frontend?.includes("tanstack-router"))
? getPwaInstructions()
: "";
const starlightInstructions = addons?.includes("starlight")
@@ -51,7 +51,7 @@ export function displayPostInstallInstructions(
"react-router",
"next",
"tanstack-start",
"nuxt", // Include Nuxt here
"nuxt",
].includes(f),
);
const hasNative = frontend?.includes("native");
@@ -65,13 +65,13 @@ export function displayPostInstallInstructions(
const hasTanstackRouter = frontend?.includes("tanstack-router");
const hasTanstackStart = frontend?.includes("tanstack-start");
const hasReactRouter = frontend?.includes("react-router");
const hasNuxt = frontend?.includes("nuxt"); // Add Nuxt check
const hasNuxt = frontend?.includes("nuxt");
const hasWebFrontend =
hasTanstackRouter || hasReactRouter || hasTanstackStart || hasNuxt; // Include Nuxt
hasTanstackRouter || hasReactRouter || hasTanstackStart || hasNuxt;
const hasNativeFrontend = frontend?.includes("native");
const hasFrontend = hasWebFrontend || hasNativeFrontend;
const webPort = hasReactRouter ? "5173" : "3001"; // Nuxt uses 3001, same as others
const webPort = hasReactRouter ? "5173" : "3001";
const tazeCommand = getPackageExecutionCommand(packageManager, "taze -r");
consola.box(

12
apps/cli/src/helpers/tauri-setup.ts
View File

@@ -41,14 +41,22 @@ export async function setupTauri(config: ProjectConfig): Promise<void> {
await fs.writeJson(clientPackageJsonPath, packageJson, { spaces: 2 });
}
const hasTanstackRouter = frontend.includes("tanstack-router");
const hasReactRouter = frontend.includes("react-router");
const hasNuxt = frontend.includes("nuxt");
const hasSvelte = frontend.includes("svelte");
const devUrl = hasReactRouter
? "http://localhost:5173"
: "http://localhost:3001";
: hasSvelte
? "http://localhost:5173"
: "http://localhost:3001";
const frontendDist = hasNuxt ? "../.output/public" : "../dist";
const frontendDist = hasNuxt
? "../.output/public"
: hasSvelte
? "../build"
: "../dist";
const tauriArgs = [
"init",

65
apps/cli/src/helpers/template-manager.ts
View File

@@ -31,6 +31,9 @@ async function processAndCopyFiles(
if (path.basename(relativeSrcPath) === "_gitignore") {
relativeDestPath = path.join(path.dirname(relativeSrcPath), ".gitignore");
}
if (path.basename(relativeSrcPath) === "_npmrc") {
relativeDestPath = path.join(path.dirname(relativeSrcPath), ".npmrc");
}
const destPath = path.join(destDir, relativeDestPath);
@@ -64,9 +67,10 @@ export async function setupFrontendTemplates(
["tanstack-router", "react-router", "tanstack-start", "next"].includes(f),
);
const hasNuxtWeb = context.frontend.includes("nuxt");
const hasSvelteWeb = context.frontend.includes("svelte");
const hasNative = context.frontend.includes("native");
if (hasReactWeb || hasNuxtWeb) {
if (hasReactWeb || hasNuxtWeb || hasSvelteWeb) {
const webAppDir = path.join(projectDir, "apps/web");
await fs.ensureDir(webAppDir);
@@ -116,6 +120,25 @@ export async function setupFrontendTemplates(
if (await fs.pathExists(apiWebNuxtDir)) {
await processAndCopyFiles("**/*", apiWebNuxtDir, webAppDir, context);
}
} else if (hasSvelteWeb) {
const svelteBaseDir = path.join(PKG_ROOT, "templates/frontend/svelte");
if (await fs.pathExists(svelteBaseDir)) {
await processAndCopyFiles("**/*", svelteBaseDir, webAppDir, context);
}
if (context.api === "orpc") {
const apiWebSvelteDir = path.join(
PKG_ROOT,
`templates/api/${context.api}/web/svelte`,
);
if (await fs.pathExists(apiWebSvelteDir)) {
await processAndCopyFiles(
"**/*",
apiWebSvelteDir,
webAppDir,
context,
);
}
}
}
}
@@ -255,6 +278,7 @@ export async function setupAuthTemplate(
["tanstack-router", "react-router", "tanstack-start", "next"].includes(f),
);
const hasNuxtWeb = context.frontend.includes("nuxt");
const hasSvelteWeb = context.frontend.includes("svelte");
const hasNative = context.frontend.includes("native");
if (serverAppDirExists) {
@@ -310,7 +334,7 @@ export async function setupAuthTemplate(
}
}
if ((hasReactWeb || hasNuxtWeb) && webAppDirExists) {
if ((hasReactWeb || hasNuxtWeb || hasSvelteWeb) && webAppDirExists) {
if (hasReactWeb) {
const authWebBaseSrc = path.join(
PKG_ROOT,
@@ -343,6 +367,21 @@ export async function setupAuthTemplate(
if (await fs.pathExists(authWebNuxtSrc)) {
await processAndCopyFiles("**/*", authWebNuxtSrc, webAppDir, context);
}
} else if (hasSvelteWeb) {
if (context.api === "orpc") {
const authWebSvelteSrc = path.join(
PKG_ROOT,
"templates/auth/web/svelte",
);
if (await fs.pathExists(authWebSvelteSrc)) {
await processAndCopyFiles(
"**/*",
authWebSvelteSrc,
webAppDir,
context,
);
}
}
}
}
@@ -403,6 +442,7 @@ export async function setupExamplesTemplate(
["tanstack-router", "react-router", "tanstack-start", "next"].includes(f),
);
const hasNuxtWeb = context.frontend.includes("nuxt");
const hasSvelteWeb = context.frontend.includes("svelte");
for (const example of context.examples) {
if (example === "none") continue;
@@ -476,7 +516,6 @@ export async function setupExamplesTemplate(
}
}
} else if (hasNuxtWeb && webAppDirExists) {
// Only copy Nuxt examples if the API is oRPC (as tRPC is not supported)
if (context.api === "orpc") {
const exampleWebNuxtSrc = path.join(exampleBaseDir, "web/nuxt");
if (await fs.pathExists(exampleWebNuxtSrc)) {
@@ -488,14 +527,22 @@ export async function setupExamplesTemplate(
false,
);
} else {
consola.info(
pc.gray(
`Skipping Nuxt web template for example '${example}' (template not found).`,
),
);
}
}
// If API is tRPC, skip Nuxt examples silently as CLI validation prevents this combo.
} else if (hasSvelteWeb && webAppDirExists) {
if (context.api === "orpc") {
const exampleWebSvelteSrc = path.join(exampleBaseDir, "web/svelte");
if (await fs.pathExists(exampleWebSvelteSrc)) {
await processAndCopyFiles(
"**/*",
exampleWebSvelteSrc,
webAppDir,
context,
false,
);
} else {
}
}
}
}
}