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

package/dist/add-ons.js

@@ -0,0 +1,53 @@
+import { readFile } from 'node:fs/promises';
+import { existsSync, readdirSync, statSync } from 'node:fs';
+import { resolve } from 'node:path';
+import { fileURLToPath } from 'node:url';
+function isDirectory(path) {
+    return statSync(path).isDirectory();
+}
+export async function getAllAddOns() {
+    const addOns = [];
+    for (const type of ['add-on', 'example']) {
+        const addOnsBase = fileURLToPath(new URL(`../templates/${type}`, import.meta.url));
+        for (const dir of await readdirSync(addOnsBase).filter((file) => isDirectory(resolve(addOnsBase, file)))) {
+            const filePath = resolve(addOnsBase, dir, 'info.json');
+            const fileContent = await readFile(filePath, 'utf-8');
+            let packageAdditions = {};
+            if (existsSync(resolve(addOnsBase, dir, 'package.json'))) {
+                packageAdditions = JSON.parse(await readFile(resolve(addOnsBase, dir, 'package.json'), 'utf-8'));
+            }
+            let readme;
+            if (existsSync(resolve(addOnsBase, dir, 'README.md'))) {
+                readme = await readFile(resolve(addOnsBase, dir, 'README.md'), 'utf-8');
+            }
+            addOns.push({
+                id: dir,
+                type,
+                ...JSON.parse(fileContent),
+                directory: resolve(addOnsBase, dir),
+                packageAdditions,
+                readme,
+            });
+        }
+    }
+    return addOns;
+}
+// Turn the list of chosen add-on IDs into a final list of add-ons by resolving dependencies
+export async function finalizeAddOns(chosenAddOnIDs) {
+    const finalAddOnIDs = new Set(chosenAddOnIDs);
+    const addOns = await getAllAddOns();
+    for (const addOnID of finalAddOnIDs) {
+        const addOn = addOns.find((a) => a.id === addOnID);
+        if (!addOn) {
+            throw new Error(`Add-on ${addOnID} not found`);
+        }
+        for (const dependsOn of addOn.dependsOn || []) {
+            const dep = addOns.find((a) => a.id === dependsOn);
+            if (!dep) {
+                throw new Error(`Dependency ${dependsOn} not found`);
+            }
+            finalAddOnIDs.add(dep.id);
+        }
+    }
+    return [...finalAddOnIDs].map((id) => addOns.find((a) => a.id === id));
+}

package/dist/cli.js

@@ -0,0 +1,51 @@
+import { Command, InvalidArgumentError } from 'commander';
+import { intro, log } from '@clack/prompts';
+import { createApp } from './create-app.js';
+import { normalizeOptions, promptForOptions } from './options.js';
+import { SUPPORTED_PACKAGE_MANAGERS } from './package-manager.js';
+export function cli() {
+    const program = new Command();
+    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}. The following are allowed: ${SUPPORTED_PACKAGE_MANAGERS.join(', ')}`);
+        }
+        return value;
+    })
+        .option('--tailwind', 'add Tailwind CSS', false)
+        .option('--add-ons', 'pick from a list of available add-ons', false)
+        .action(async (projectName, options) => {
+        try {
+            const cliOptions = {
+                projectName,
+                ...options,
+            };
+            let finalOptions = normalizeOptions(cliOptions);
+            if (finalOptions) {
+                intro(`Creating a new TanStack app in ${projectName}...`);
+            }
+            else {
+                intro("Let's configure your TanStack application");
+                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();
+}

package/dist/constants.js

@@ -0,0 +1,2 @@
+export const CODE_ROUTER = 'code-router';
+export const FILE_ROUTER = 'file-router';

package/dist/create-app.js

@@ -0,0 +1,285 @@
+#!/usr/bin/env node
+import { appendFile, copyFile, mkdir, readFile, writeFile, } from 'node:fs/promises';
+import { existsSync, readdirSync, statSync } from 'node:fs';
+import { basename, dirname, resolve } from 'node:path';
+import { fileURLToPath } from 'node:url';
+import { log, outro, spinner } from '@clack/prompts';
+import { execa } from 'execa';
+import { render } from 'ejs';
+import { format } from 'prettier';
+import chalk from 'chalk';
+import { CODE_ROUTER, FILE_ROUTER } from './constants.js';
+function sortObject(obj) {
+    return Object.keys(obj)
+        .sort()
+        .reduce((acc, key) => {
+        acc[key] = obj[key];
+        return acc;
+    }, {});
+}
+function createCopyFiles(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,
+            addOnEnabled: options.chosenAddOns.reduce((acc, addOn) => {
+                acc[addOn.id] = true;
+                return acc;
+            }, {}),
+            addOns: options.chosenAddOns,
+        };
+        const template = await readFile(resolve(templateDir, file), 'utf-8');
+        let content = render(template, templateValues);
+        const target = targetFileName ?? file.replace('.ejs', '');
+        if (target.endsWith('.ts') || target.endsWith('.tsx')) {
+            content = await format(content, {
+                semi: false,
+                singleQuote: true,
+                trailingComma: 'all',
+                parser: 'typescript',
+            });
+        }
+        await mkdir(dirname(resolve(targetDir, target)), {
+            recursive: true,
+        });
+        await writeFile(resolve(targetDir, target), content);
+    };
+}
+async function createPackageJSON(projectName, options, templateDir, routerDir, targetDir, addOns) {
+    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,
+            },
+        };
+    }
+    for (const addOn of addOns) {
+        packageJSON = {
+            ...packageJSON,
+            dependencies: {
+                ...packageJSON.dependencies,
+                ...addOn.dependencies,
+            },
+            devDependencies: {
+                ...packageJSON.devDependencies,
+                ...addOn.devDependencies,
+            },
+            scripts: {
+                ...packageJSON.scripts,
+                ...addOn.scripts,
+            },
+        };
+    }
+    packageJSON.dependencies = sortObject(packageJSON.dependencies);
+    packageJSON.devDependencies = sortObject(packageJSON.devDependencies);
+    await writeFile(resolve(targetDir, 'package.json'), JSON.stringify(packageJSON, null, 2));
+}
+async function copyFilesRecursively(source, target, copyFile, templateFile) {
+    const sourceStat = statSync(source);
+    if (sourceStat.isDirectory()) {
+        const files = readdirSync(source);
+        for (const file of files) {
+            const sourceChild = resolve(source, file);
+            const targetChild = resolve(target, file);
+            await copyFilesRecursively(sourceChild, targetChild, copyFile, templateFile);
+        }
+    }
+    else {
+        if (source.endsWith('.ejs')) {
+            const targetPath = target.replace('.ejs', '');
+            await mkdir(dirname(targetPath), {
+                recursive: true,
+            });
+            await templateFile(source, targetPath);
+        }
+        else {
+            await mkdir(dirname(target), {
+                recursive: true,
+            });
+            if (source.endsWith('.append')) {
+                await appendFile(target.replace('.append', ''), (await readFile(source)).toString());
+            }
+            else {
+                await copyFile(source, target);
+            }
+        }
+    }
+}
+export 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 = createCopyFiles(targetDir);
+    const templateFile = createTemplateFile(options.projectName, options, targetDir);
+    const isAddOnEnabled = (id) => options.chosenAddOns.find((a) => a.id === id);
+    log.info(`Creating a new TanStack app in '${basename(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 });
+        await mkdir(resolve(targetDir, 'src/components'), { 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) {
+        await templateFile(templateDirRouter, './src/components/Header.tsx.ejs', './src/components/Header.tsx');
+        await templateFile(templateDirRouter, './src/routes/__root.tsx.ejs', './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 (!isAddOnEnabled('start')) {
+        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 (!isAddOnEnabled('start')) {
+        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 templateFile(templateDirBase, './tsconfig.json.ejs', './tsconfig.json');
+    }
+    // Setup the package.json file, optionally with typescript and tailwind
+    await createPackageJSON(options.projectName, options, templateDirBase, templateDirRouter, targetDir, options.chosenAddOns.map((addOn) => addOn.packageAdditions));
+    // Copy all the asset files from the addons
+    const s = spinner();
+    for (const phase of ['setup', 'add-on', 'example']) {
+        for (const addOn of options.chosenAddOns.filter((addOn) => addOn.phase === phase)) {
+            s.start(`Setting up ${addOn.name}...`);
+            const addOnDir = resolve(addOn.directory, 'assets');
+            if (existsSync(addOnDir)) {
+                await copyFilesRecursively(addOnDir, targetDir, copyFile, async (file, targetFileName) => templateFile(addOnDir, file, targetFileName));
+            }
+            if (addOn.command) {
+                await execa(addOn.command.command, addOn.command.args || [], {
+                    cwd: targetDir,
+                });
+            }
+            s.stop(`${addOn.name} setup complete`);
+        }
+    }
+    if (isAddOnEnabled('shadcn')) {
+        const shadcnComponents = new Set();
+        for (const addOn of options.chosenAddOns) {
+            if (addOn.shadcnComponents) {
+                for (const component of addOn.shadcnComponents) {
+                    shadcnComponents.add(component);
+                }
+            }
+        }
+        if (shadcnComponents.size > 0) {
+            s.start(`Installing shadcn components (${Array.from(shadcnComponents).join(', ')})...`);
+            await execa('npx', ['shadcn@canary', 'add', ...shadcnComponents], {
+                cwd: targetDir,
+            });
+            s.stop(`Installed shadcn components`);
+        }
+    }
+    const warnings = [];
+    for (const addOn of options.chosenAddOns) {
+        if (addOn.warning) {
+            warnings.push(addOn.warning);
+        }
+    }
+    // Add .gitignore
+    await copyFile(resolve(templateDirBase, 'gitignore'), resolve(targetDir, '.gitignore'));
+    // Create the README.md
+    await templateFile(templateDirBase, 'README.md.ejs');
+    // Install dependencies
+    s.start(`Installing dependencies via ${options.packageManager}...`);
+    await execa(options.packageManager, ['install'], { cwd: targetDir });
+    s.stop(`Installed dependencies`);
+    if (warnings.length > 0) {
+        log.warn(chalk.red(warnings.join('\n')));
+    }
+    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 '${basename(targetDir)}'.
+
+Use the following commands to start your app:
+% cd ${options.projectName}
+% ${options.packageManager} ${isAddOnEnabled('start') ? 'dev' : 'start'}
+
+Please read README.md for more information on testing, styling, adding routes, react-query, etc.
+`);
+}