create-tsrouter-app 0.2.0 → 0.3.0-alpha.2

package/dist/index.js

@@ -1,348 +1,3 @@
 #!/usr/bin/env node
-import { copyFile, mkdir, readFile, writeFile } from 'node:fs/promises';
-import { existsSync } from 'node:fs';
-import { resolve } from 'node:path';
-import { fileURLToPath } from 'node:url';
-import { Command, InvalidArgumentError } from 'commander';
-import { cancel, confirm, intro, isCancel, log, outro, select, spinner, text, } from '@clack/prompts';
-import { execa } from 'execa';
-import { render } from 'ejs';
-import { DEFAULT_PACKAGE_MANAGER, SUPPORTED_PACKAGE_MANAGERS, getPackageManager, } from './utils/getPackageManager.js';
-const program = new Command();
-const CODE_ROUTER = 'code-router';
-const FILE_ROUTER = 'file-router';
-function sortObject(obj) {
-    return Object.keys(obj)
-        .sort()
-        .reduce((acc, key) => {
-        acc[key] = obj[key];
-        return acc;
-    }, {});
-}
-function createCopyFile(targetDir) {
-    return async function copyFiles(templateDir, files) {
-        for (const file of files) {
-            const targetFileName = file.replace('.tw', '');
-            await copyFile(resolve(templateDir, file), resolve(targetDir, targetFileName));
-        }
-    };
-}
-function createTemplateFile(projectName, options, targetDir) {
-    return async function templateFile(templateDir, file, targetFileName) {
-        const templateValues = {
-            packageManager: options.packageManager,
-            projectName: projectName,
-            typescript: options.typescript,
-            tailwind: options.tailwind,
-            js: options.typescript ? 'ts' : 'js',
-            jsx: options.typescript ? 'tsx' : 'jsx',
-            fileRouter: options.mode === FILE_ROUTER,
-            codeRouter: options.mode === CODE_ROUTER,
-        };
-        const template = await readFile(resolve(templateDir, file), 'utf-8');
-        const content = render(template, templateValues);
-        const target = targetFileName ?? file.replace('.ejs', '');
-        await writeFile(resolve(targetDir, target), content);
-    };
-}
-async function createPackageJSON(projectName, options, templateDir, routerDir, targetDir) {
-    let packageJSON = JSON.parse(await readFile(resolve(templateDir, 'package.json'), 'utf8'));
-    packageJSON.name = projectName;
-    if (options.typescript) {
-        const tsPackageJSON = JSON.parse(await readFile(resolve(templateDir, 'package.ts.json'), 'utf8'));
-        packageJSON = {
-            ...packageJSON,
-            devDependencies: {
-                ...packageJSON.devDependencies,
-                ...tsPackageJSON.devDependencies,
-            },
-        };
-    }
-    if (options.tailwind) {
-        const twPackageJSON = JSON.parse(await readFile(resolve(templateDir, 'package.tw.json'), 'utf8'));
-        packageJSON = {
-            ...packageJSON,
-            dependencies: {
-                ...packageJSON.dependencies,
-                ...twPackageJSON.dependencies,
-            },
-        };
-    }
-    if (options.mode === FILE_ROUTER) {
-        const frPackageJSON = JSON.parse(await readFile(resolve(routerDir, 'package.fr.json'), 'utf8'));
-        packageJSON = {
-            ...packageJSON,
-            dependencies: {
-                ...packageJSON.dependencies,
-                ...frPackageJSON.dependencies,
-            },
-        };
-    }
-    packageJSON.dependencies = sortObject(packageJSON.dependencies);
-    packageJSON.devDependencies = sortObject(packageJSON.devDependencies);
-    await writeFile(resolve(targetDir, 'package.json'), JSON.stringify(packageJSON, null, 2));
-}
-async function createApp(options) {
-    const templateDirBase = fileURLToPath(new URL('../templates/base', import.meta.url));
-    const templateDirRouter = fileURLToPath(new URL(`../templates/${options.mode}`, import.meta.url));
-    const targetDir = resolve(process.cwd(), options.projectName);
-    if (existsSync(targetDir)) {
-        log.error(`Directory "${options.projectName}" already exists`);
-        return;
-    }
-    const copyFiles = createCopyFile(targetDir);
-    const templateFile = createTemplateFile(options.projectName, options, targetDir);
-    intro(`Creating a new TanStack app in ${targetDir}...`);
-    // Make the root directory
-    await mkdir(targetDir, { recursive: true });
-    // Setup the .vscode directory
-    await mkdir(resolve(targetDir, '.vscode'), { recursive: true });
-    await copyFile(resolve(templateDirBase, '.vscode/settings.json'), resolve(targetDir, '.vscode/settings.json'));
-    // Fill the public directory
-    await mkdir(resolve(targetDir, 'public'), { recursive: true });
-    copyFiles(templateDirBase, [
-        './public/robots.txt',
-        './public/favicon.ico',
-        './public/manifest.json',
-        './public/logo192.png',
-        './public/logo512.png',
-    ]);
-    // Make the src directory
-    await mkdir(resolve(targetDir, 'src'), { recursive: true });
-    if (options.mode === FILE_ROUTER) {
-        await mkdir(resolve(targetDir, 'src/routes'), { recursive: true });
-    }
-    // Copy in Vite and Tailwind config and CSS
-    if (!options.tailwind) {
-        await copyFiles(templateDirBase, ['./src/App.css']);
-    }
-    await templateFile(templateDirBase, './vite.config.js.ejs');
-    await templateFile(templateDirBase, './src/styles.css.ejs');
-    copyFiles(templateDirBase, ['./src/logo.svg']);
-    // Setup the app component. There are four variations, typescript/javascript and tailwind/non-tailwind.
-    if (options.mode === FILE_ROUTER) {
-        copyFiles(templateDirRouter, ['./src/routes/__root.tsx']);
-        await templateFile(templateDirBase, './src/App.tsx.ejs', './src/routes/index.tsx');
-    }
-    else {
-        await templateFile(templateDirBase, './src/App.tsx.ejs', options.typescript ? undefined : './src/App.jsx');
-        await templateFile(templateDirBase, './src/App.test.tsx.ejs', options.typescript ? undefined : './src/App.test.jsx');
-    }
-    // Create the main entry point
-    if (options.typescript) {
-        await templateFile(templateDirRouter, './src/main.tsx.ejs');
-    }
-    else {
-        await templateFile(templateDirRouter, './src/main.tsx.ejs', './src/main.jsx');
-    }
-    // Setup the main, reportWebVitals and index.html files
-    if (options.typescript) {
-        await templateFile(templateDirBase, './src/reportWebVitals.ts.ejs');
-    }
-    else {
-        await templateFile(templateDirBase, './src/reportWebVitals.ts.ejs', './src/reportWebVitals.js');
-    }
-    await templateFile(templateDirBase, './index.html.ejs');
-    // Setup tsconfig
-    if (options.typescript) {
-        await copyFiles(templateDirBase, ['./tsconfig.json']);
-    }
-    // Setup the package.json file, optionally with typescript and tailwind
-    await createPackageJSON(options.projectName, options, templateDirBase, templateDirRouter, targetDir);
-    // Add .gitignore
-    await copyFile(resolve(templateDirBase, 'gitignore'), resolve(targetDir, '.gitignore'));
-    // Create the README.md
-    await templateFile(templateDirBase, 'README.md.ejs');
-    // Install dependencies
-    const s = spinner();
-    s.start(`Installing dependencies via ${options.packageManager}...`);
-    await execa(options.packageManager, ['install'], { cwd: targetDir });
-    s.stop(`Installed dependencies`);
-    if (options.git) {
-        s.start(`Initializing git repository...`);
-        await execa('git', ['init'], { cwd: targetDir });
-        s.stop(`Initialized git repository`);
-    }
-    outro(`Created your new TanStack app in ${targetDir}.
-
-Use the following commands to start your app:
-
-% cd ${options.projectName}
-% ${options.packageManager} start
-
-Please read README.md for more information on testing, styling, adding routes, react-query, etc.
-`);
-}
-// If all CLI options are provided, use them directly
-function normalizeOptions(cliOptions) {
-    if (cliOptions.projectName) {
-        const typescript = cliOptions.template === 'typescript' ||
-            cliOptions.template === 'file-router';
-        return {
-            projectName: cliOptions.projectName,
-            typescript,
-            tailwind: !!cliOptions.tailwind,
-            packageManager: cliOptions.packageManager || DEFAULT_PACKAGE_MANAGER,
-            mode: cliOptions.template === 'file-router' ? FILE_ROUTER : CODE_ROUTER,
-            git: !!cliOptions.git,
-        };
-    }
-}
-async function promptForOptions(cliOptions) {
-    const options = {};
-    if (!cliOptions.projectName) {
-        const value = await text({
-            message: 'What would you like to name your project?',
-            defaultValue: 'my-app',
-            validate(value) {
-                if (!value) {
-                    return 'Please enter a name';
-                }
-            },
-        });
-        if (isCancel(value)) {
-            cancel('Operation cancelled.');
-            process.exit(0);
-        }
-        options.projectName = value;
-    }
-    // Router type selection
-    if (!cliOptions.template) {
-        const routerType = await select({
-            message: 'Select the router type:',
-            options: [
-                {
-                    value: FILE_ROUTER,
-                    label: 'File Router - File-based routing structure',
-                },
-                {
-                    value: CODE_ROUTER,
-                    label: 'Code Router - Traditional code-based routing',
-                },
-            ],
-            initialValue: FILE_ROUTER,
-        });
-        if (isCancel(routerType)) {
-            cancel('Operation cancelled.');
-            process.exit(0);
-        }
-        options.mode = routerType;
-    }
-    else {
-        options.mode = cliOptions.template;
-        if (options.mode === FILE_ROUTER) {
-            options.typescript = true;
-        }
-    }
-    // TypeScript selection (if using Code Router)
-    if (!options.typescript) {
-        if (options.mode === CODE_ROUTER) {
-            const typescriptEnable = await confirm({
-                message: 'Would you like to use TypeScript?',
-                initialValue: true,
-            });
-            if (isCancel(typescriptEnable)) {
-                cancel('Operation cancelled.');
-                process.exit(0);
-            }
-            options.typescript = typescriptEnable;
-        }
-        else {
-            options.typescript = true;
-        }
-    }
-    // Tailwind selection
-    if (cliOptions.tailwind === undefined) {
-        const tailwind = await confirm({
-            message: 'Would you like to use Tailwind CSS?',
-            initialValue: true,
-        });
-        if (isCancel(tailwind)) {
-            cancel('Operation cancelled.');
-            process.exit(0);
-        }
-        options.tailwind = tailwind;
-    }
-    else {
-        options.tailwind = cliOptions.tailwind;
-    }
-    // Package manager selection
-    if (cliOptions.packageManager === undefined) {
-        const detectedPackageManager = getPackageManager();
-        if (!detectedPackageManager) {
-            const pm = await select({
-                message: 'Select package manager:',
-                options: SUPPORTED_PACKAGE_MANAGERS.map((pm) => ({
-                    value: pm,
-                    label: pm,
-                })),
-                initialValue: DEFAULT_PACKAGE_MANAGER,
-            });
-            if (isCancel(pm)) {
-                cancel('Operation cancelled.');
-                process.exit(0);
-            }
-            options.packageManager = pm;
-        }
-        else {
-            options.packageManager = detectedPackageManager;
-        }
-    }
-    else {
-        options.packageManager = cliOptions.packageManager;
-    }
-    // Git selection
-    if (cliOptions.git === undefined) {
-        const git = await confirm({
-            message: 'Would you like to initialize a new git repository?',
-            initialValue: true,
-        });
-        if (isCancel(git)) {
-            cancel('Operation cancelled.');
-            process.exit(0);
-        }
-        options.git = git;
-    }
-    else {
-        options.git = !!cliOptions.git;
-    }
-    return options;
-}
-program
-    .name('create-tsrouter-app')
-    .description('CLI to create a new TanStack application')
-    .argument('[project-name]', 'name of the project')
-    .option('--no-git', 'do not create a git repository')
-    .option('--template <type>', 'project template (typescript, javascript, file-router)', (value) => {
-    if (value !== 'typescript' &&
-        value !== 'javascript' &&
-        value !== 'file-router') {
-        throw new InvalidArgumentError(`Invalid template: ${value}. Only the following are allowed: typescript, javascript, file-router`);
-    }
-    return value;
-})
-    .option(`--package-manager <${SUPPORTED_PACKAGE_MANAGERS.join('|')}>`, `Explicitly tell the CLI to use this package manager`, (value) => {
-    if (!SUPPORTED_PACKAGE_MANAGERS.includes(value)) {
-        throw new InvalidArgumentError(`Invalid package manager: ${value}. Only the following are allowed: ${SUPPORTED_PACKAGE_MANAGERS.join(', ')}`);
-    }
-    return value;
-})
-    .option('--tailwind', 'add Tailwind CSS')
-    .action(async (projectName, options) => {
-    try {
-        const cliOptions = {
-            projectName,
-            ...options,
-        };
-        let finalOptions = normalizeOptions(cliOptions);
-        if (!finalOptions) {
-            finalOptions = await promptForOptions(cliOptions);
-        }
-        await createApp(finalOptions);
-    }
-    catch (error) {
-        log.error(error instanceof Error ? error.message : 'An unknown error occurred');
-        process.exit(1);
-    }
-});
-program.parse();
+import { cli } from './cli.js';
+cli();

package/dist/options.js

@@ -0,0 +1,231 @@
+import { cancel, confirm, isCancel, multiselect, select, text, } from '@clack/prompts';
+import { DEFAULT_PACKAGE_MANAGER, SUPPORTED_PACKAGE_MANAGERS, getPackageManager, } from './package-manager.js';
+import { CODE_ROUTER, FILE_ROUTER } from './constants.js';
+import { finalizeAddOns, getAllAddOns } from './add-ons.js';
+// If all CLI options are provided, use them directly
+export function normalizeOptions(cliOptions) {
+    if (cliOptions.projectName) {
+        const typescript = cliOptions.template === 'typescript' ||
+            cliOptions.template === 'file-router';
+        return {
+            projectName: cliOptions.projectName,
+            typescript,
+            tailwind: !!cliOptions.tailwind,
+            packageManager: cliOptions.packageManager || DEFAULT_PACKAGE_MANAGER,
+            mode: cliOptions.template === 'file-router' ? FILE_ROUTER : CODE_ROUTER,
+            git: !!cliOptions.git,
+            addOns: !!cliOptions.addOns,
+            chosenAddOns: [],
+            variableValues: {},
+        };
+    }
+}
+async function collectVariables(variables) {
+    const responses = {};
+    for (const variable of variables) {
+        if (variable.type === 'string') {
+            const response = await text({
+                message: variable.description,
+                initialValue: variable.default,
+            });
+            if (isCancel(response)) {
+                cancel('Operation cancelled.');
+                process.exit(0);
+            }
+            responses[variable.name] = response;
+        }
+        else if (variable.type === 'number') {
+            const response = await text({
+                message: variable.description,
+                initialValue: variable.default.toString(),
+            });
+            if (isCancel(response)) {
+                cancel('Operation cancelled.');
+                process.exit(0);
+            }
+            responses[variable.name] = Number(response);
+        }
+        else {
+            const response = await confirm({
+                message: variable.description,
+                initialValue: variable.default === true,
+            });
+            if (isCancel(response)) {
+                cancel('Operation cancelled.');
+                process.exit(0);
+            }
+            responses[variable.name] = response;
+        }
+    }
+    return responses;
+}
+export async function promptForOptions(cliOptions) {
+    const options = {};
+    if (!cliOptions.projectName) {
+        const value = await text({
+            message: 'What would you like to name your project?',
+            defaultValue: 'my-app',
+            validate(value) {
+                if (!value) {
+                    return 'Please enter a name';
+                }
+            },
+        });
+        if (isCancel(value)) {
+            cancel('Operation cancelled.');
+            process.exit(0);
+        }
+        options.projectName = value;
+    }
+    // Router type selection
+    if (!cliOptions.template) {
+        const routerType = await select({
+            message: 'Select the router type:',
+            options: [
+                {
+                    value: FILE_ROUTER,
+                    label: 'File Router - File-based routing structure',
+                },
+                {
+                    value: CODE_ROUTER,
+                    label: 'Code Router - Traditional code-based routing',
+                },
+            ],
+            initialValue: FILE_ROUTER,
+        });
+        if (isCancel(routerType)) {
+            cancel('Operation cancelled.');
+            process.exit(0);
+        }
+        options.mode = routerType;
+    }
+    else {
+        options.mode = cliOptions.template;
+        if (options.mode === FILE_ROUTER) {
+            options.typescript = true;
+        }
+    }
+    // TypeScript selection (if using Code Router)
+    if (!options.typescript) {
+        if (options.mode === CODE_ROUTER) {
+            const typescriptEnable = await confirm({
+                message: 'Would you like to use TypeScript?',
+                initialValue: true,
+            });
+            if (isCancel(typescriptEnable)) {
+                cancel('Operation cancelled.');
+                process.exit(0);
+            }
+            options.typescript = typescriptEnable;
+        }
+        else {
+            options.typescript = true;
+        }
+    }
+    // Tailwind selection
+    if (cliOptions.tailwind === undefined) {
+        const tailwind = await confirm({
+            message: 'Would you like to use Tailwind CSS?',
+            initialValue: true,
+        });
+        if (isCancel(tailwind)) {
+            cancel('Operation cancelled.');
+            process.exit(0);
+        }
+        options.tailwind = tailwind;
+    }
+    else {
+        options.tailwind = cliOptions.tailwind;
+    }
+    // Package manager selection
+    if (cliOptions.packageManager === undefined) {
+        const detectedPackageManager = getPackageManager();
+        if (!detectedPackageManager) {
+            const pm = await select({
+                message: 'Select package manager:',
+                options: SUPPORTED_PACKAGE_MANAGERS.map((pm) => ({
+                    value: pm,
+                    label: pm,
+                })),
+                initialValue: DEFAULT_PACKAGE_MANAGER,
+            });
+            if (isCancel(pm)) {
+                cancel('Operation cancelled.');
+                process.exit(0);
+            }
+            options.packageManager = pm;
+        }
+        else {
+            options.packageManager = detectedPackageManager;
+        }
+    }
+    else {
+        options.packageManager = cliOptions.packageManager;
+    }
+    // Select any add-ons
+    if (options.mode === FILE_ROUTER && cliOptions.addOns) {
+        const addOns = await getAllAddOns();
+        const selectedAddOns = await multiselect({
+            message: 'What add-ons would you like for your project:',
+            options: addOns
+                .filter((addOn) => addOn.type === 'add-on')
+                .map((addOn) => ({
+                value: addOn.id,
+                label: addOn.name,
+                hint: addOn.description,
+            })),
+            required: false,
+        });
+        if (isCancel(selectedAddOns)) {
+            cancel('Operation cancelled.');
+            process.exit(0);
+        }
+        const selectedExamples = await multiselect({
+            message: 'Would you like any examples?',
+            options: addOns
+                .filter((addOn) => addOn.type === 'example')
+                .map((addOn) => ({
+                value: addOn.id,
+                label: addOn.name,
+                hint: addOn.description,
+            })),
+            required: false,
+        });
+        if (isCancel(selectedExamples)) {
+            cancel('Operation cancelled.');
+            process.exit(0);
+        }
+        options.chosenAddOns = await finalizeAddOns([
+            ...selectedAddOns,
+            ...selectedExamples,
+        ]);
+        options.tailwind = true;
+    }
+    else {
+        options.chosenAddOns = [];
+    }
+    // Collect variables
+    const variables = [];
+    for (const addOn of options.chosenAddOns) {
+        for (const variable of addOn.variables ?? []) {
+            variables.push(variable);
+        }
+    }
+    options.variableValues = await collectVariables(variables);
+    // Git selection
+    if (cliOptions.git === undefined) {
+        const git = await confirm({
+            message: 'Would you like to initialize a new git repository?',
+            initialValue: true,
+        });
+        if (isCancel(git)) {
+            cancel('Operation cancelled.');
+            process.exit(0);
+        }
+        options.git = git;
+    }
+    else {
+        options.git = !!cliOptions.git;
+    }
+    return options;
+}

package/dist/types.js

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-tsrouter-app",
-  "version": "0.2.0",
+  "version": "0.3.0-alpha.2",
   "description": "Tanstack Application Builder",
   "bin": "./dist/index.js",
   "type": "module",
@@ -23,9 +23,11 @@
   "license": "MIT",
   "dependencies": {
     "@clack/prompts": "^0.10.0",
+    "chalk": "^5.4.1",
     "commander": "^13.1.0",
     "ejs": "^3.1.10",
-    "execa": "^9.5.2"
+    "execa": "^9.5.2",
+    "prettier": "^3.5.0"
   },
   "devDependencies": {
     "@tanstack/config": "^0.16.2",
@@ -34,7 +36,6 @@
     "eslint": "^9.20.0",
     "eslint-plugin-react-hooks": "^5.1.0",
     "eslint-plugin-unused-imports": "^4.1.4",
-    "prettier": "^3.5.0",
     "typescript": "^5.6.3"
   },
   "scripts": {}