create-tsrouter-app 0.5.0-alpha → 0.5.0-alpha.0

package/.github/ISSUE_TEMPLATE/config.yml

@@ -1,7 +1,7 @@
 blank_issues_enabled: false
 contact_links:
   - name: 🤔 Feature Requests & Questions
-    url: https://github.com/tanstack/router/discussions
+    url: https://github.com/tanstack/create-tsrouter-app/discussions
     about: Please ask and answer questions here.
   - name: 💬 Community Chat
     url: https://discord.gg/mQd7egN

package/.github/workflows/ci.yml

@@ -29,6 +29,8 @@ jobs:
           fetch-depth: 0
       - name: Setup Tools
         uses: tanstack/config/.github/setup@main
+      - name: Test
+        run: pnpm test
       - name: Build
         run: pnpm build
       - name: Publish

package/README.md

@@ -1,6 +1,6 @@
 # Create React App for TanStack Router
 
-This CLI applications builds Tanstack Router applications that are the functional equivalent of [Create React App](https://create-react-app.dev/).
+This CLI application builds Tanstack Router applications that are the functional equivalent of [Create React App](https://create-react-app.dev/).
 
 To help accelerate the migration away from `create-react-app` we created the `create-tsrouter-app` CLI which is a plug-n-play replacement for CRA.
 
@@ -30,6 +30,7 @@ This will start an interactive CLI that guides you through the setup process, al
 - TypeScript support
 - Tailwind CSS integration
 - Package manager
+- Toolchain
 - Git initialization
 
 ## Command Line Options
@@ -45,6 +46,7 @@ Available options:
 - `--template <type>`: Choose between `file-router`, `typescript`, or `javascript`
 - `--tailwind`: Enable Tailwind CSS
 - `--package-manager`: Specify your preferred package manager (`npm`, `yarn`, `pnpm`, `bun`, or `deno`)
+- `--toolchain`: Specify your toolchain solution for formatting/linting (`biome`)
 - `--no-git`: Do not initialize a git repository
 - `--add-ons`: Enable add-on selection or specify add-ons to install
 
@@ -94,6 +96,12 @@ Choose your preferred package manager (`npm`, `bun`, `yarn`, `pnpm`, or `deno`)
 
 Extensive documentation on using the TanStack Router, migrating to a File Base Routing approach, as well as integrating [@tanstack/react-query](https://tanstack.com/query/latest) and [@tanstack/store](https://tanstack.com/store/latest) can be found in the generated `README.md` for your project.
 
+### Toolchain
+
+Choose your preferred solution for formatting and linting either through the interactive CLI or using the `--toolchain` flag.
+
+Setting this flag to `biome` will configure it as your toolchain of choice, adding a `biome.json` to the root of the project. Consult the [biome documentation](https://biomejs.dev/guides/getting-started/) for further customization.
+
 ## Add-ons (experimental)
 
 You can enable add-on selection:

package/dist/add.js

@@ -0,0 +1,127 @@
+import { mkdir, readFile, writeFile } from 'node:fs/promises';
+import { existsSync, statSync } from 'node:fs';
+import { basename, dirname, resolve } from 'node:path';
+import chalk from 'chalk';
+import { execa, execaSync } from 'execa';
+import { cancel, confirm, intro, isCancel, log, outro, spinner, } from '@clack/prompts';
+import { CONFIG_FILE } from './constants.js';
+import { createDefaultEnvironment, createMemoryEnvironment, } from './environment.js';
+import { createApp } from './create-app.js';
+import { finalizeAddOns } from './add-ons.js';
+import { sortObject } from './utils.js';
+import { readConfigFile, writeConfigFile } from './config-file.js';
+function isDirectory(path) {
+    return statSync(path).isDirectory();
+}
+async function hasPendingGitChanges() {
+    const status = await execaSync('git', ['status', '--porcelain']);
+    return status.stdout.length > 0;
+}
+async function createOptions(json, addOns) {
+    return {
+        ...json,
+        tailwind: true,
+        chosenAddOns: await finalizeAddOns(json.framework, json.mode, [
+            ...json.existingAddOns,
+            ...addOns,
+        ]),
+    };
+}
+async function runCreateApp(options) {
+    const { environment, output } = createMemoryEnvironment();
+    await createApp(options, {
+        silent: true,
+        environment,
+        cwd: process.cwd(),
+    });
+    return output;
+}
+export async function add(addOns, { silent = false, } = {}) {
+    const persistedOptions = await readConfigFile(process.cwd());
+    if (!persistedOptions) {
+        console.error(`${chalk.red('There is no .cta.json file in your project.')}
+
+This is probably because this was created with an older version of create-tsrouter-app.`);
+        return;
+    }
+    if (!silent) {
+        intro(`Adding ${addOns.join(', ')} to the project...`);
+    }
+    if (await hasPendingGitChanges()) {
+        log.error(`${chalk.red('You have pending git changes.')} Please commit or stash them before adding add-ons.`);
+        return;
+    }
+    const newOptions = await createOptions(persistedOptions, addOns);
+    const output = await runCreateApp(newOptions);
+    const overwrittenFiles = [];
+    const changedFiles = [];
+    const contentMap = new Map();
+    for (const file of Object.keys(output.files)) {
+        const relativeFile = file.replace(process.cwd(), '');
+        if (existsSync(file)) {
+            if (!isDirectory(file)) {
+                const contents = (await readFile(file)).toString();
+                if (['package.json', CONFIG_FILE].includes(basename(file)) ||
+                    contents !== output.files[file]) {
+                    overwrittenFiles.push(relativeFile);
+                    contentMap.set(relativeFile, output.files[file]);
+                }
+            }
+        }
+        else {
+            changedFiles.push(relativeFile);
+            contentMap.set(relativeFile, output.files[file]);
+        }
+    }
+    if (overwrittenFiles.length > 0 && !silent) {
+        log.warn(`${chalk.yellow('The following will be overwritten:')}\n${overwrittenFiles.join('\n')}`);
+        const shouldContinue = await confirm({
+            message: 'Do you want to continue?',
+        });
+        if (isCancel(shouldContinue)) {
+            cancel('Operation cancelled.');
+            process.exit(0);
+        }
+    }
+    for (const file of [...changedFiles, ...overwrittenFiles]) {
+        const targetFile = `.${file}`;
+        const fName = basename(file);
+        const contents = contentMap.get(file);
+        if (fName === 'package.json') {
+            const currentJson = JSON.parse((await readFile(resolve(fName), 'utf-8')).toString());
+            const newJson = JSON.parse(contents);
+            currentJson.scripts = newJson.scripts;
+            currentJson.dependencies = sortObject({
+                ...currentJson.dependencies,
+                ...newJson.dependencies,
+            });
+            currentJson.devDependencies = sortObject({
+                ...currentJson.devDependencies,
+                ...newJson.devDependencies,
+            });
+            await writeFile(targetFile, JSON.stringify(currentJson, null, 2));
+        }
+        else if (fName !== CONFIG_FILE) {
+            await mkdir(resolve(dirname(targetFile)), { recursive: true });
+            await writeFile(resolve(targetFile), contents);
+        }
+    }
+    // Handle commands
+    const originalOutput = await runCreateApp(await createOptions(persistedOptions, []));
+    const originalCommands = new Set(originalOutput.commands.map((c) => [c.command, ...c.args].join(' ')));
+    for (const command of output.commands) {
+        const commandString = [command.command, ...command.args].join(' ');
+        if (!originalCommands.has(commandString)) {
+            await execa(command.command, command.args);
+        }
+    }
+    const realEnvironment = createDefaultEnvironment();
+    writeConfigFile(realEnvironment, process.cwd(), newOptions);
+    const s = silent ? null : spinner();
+    s?.start(`Installing dependencies via ${newOptions.packageManager}...`);
+    await realEnvironment.execute(newOptions.packageManager, ['install'], resolve(process.cwd()));
+    s?.stop(`Installed dependencies`);
+    if (!silent) {
+        outro('Add-ons added successfully!');
+    }
+}

package/dist/cli.js

@@ -3,14 +3,24 @@ 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';
+import { SUPPORTED_TOOLCHAINS } from './toolchain.js';
 import runServer from './mcp.js';
 import { listAddOns } from './add-ons.js';
 import { DEFAULT_FRAMEWORK, SUPPORTED_FRAMEWORKS } from './constants.js';
+import { createDefaultEnvironment } from './environment.js';
+import { add } from './add.js';
 export function cli() {
     const program = new Command();
     program
         .name('create-tsrouter-app')
-        .description('CLI to create a new TanStack application')
+        .description('CLI to create a new TanStack application');
+    program
+        .command('add')
+        .argument('add-on', 'Name of the add-on (or add-ons separated by commas)')
+        .action(async (addOn) => {
+        await add(addOn.split(',').map((addon) => addon.trim()));
+    });
+    program // 104 22
         .argument('[project-name]', 'name of the project')
         .option('--no-git', 'do not create a git repository')
         .option('--framework <type>', 'project framework (solid, react)', (value) => {
@@ -32,6 +42,12 @@ export function cli() {
             throw new InvalidArgumentError(`Invalid package manager: ${value}. The following are allowed: ${SUPPORTED_PACKAGE_MANAGERS.join(', ')}`);
         }
         return value;
+    })
+        .option(`--toolchain <${SUPPORTED_TOOLCHAINS.join('|')}>`, `Explicitly tell the CLI to use this toolchain`, (value) => {
+        if (!SUPPORTED_TOOLCHAINS.includes(value)) {
+            throw new InvalidArgumentError(`Invalid toolchain: ${value}. The following are allowed: ${SUPPORTED_TOOLCHAINS.join(', ')}`);
+        }
+        return value;
     })
         .option('--tailwind', 'add Tailwind CSS', false)
         .option('--add-ons [...add-ons]', 'pick from a list of available add-ons (comma separated list)', (value) => {
@@ -43,12 +59,13 @@ export function cli() {
     })
         .option('--list-add-ons', 'list all available add-ons', false)
         .option('--mcp', 'run the MCP server', false)
+        .option('--mcp-sse', 'run the MCP server in SSE mode', false)
         .action(async (projectName, options) => {
         if (options.listAddOns) {
             await listAddOns(options);
         }
-        else if (options.mcp) {
-            await runServer();
+        else if (options.mcp || options.mcpSse) {
+            await runServer(!!options.mcpSse);
         }
         else {
             try {
@@ -64,7 +81,9 @@ export function cli() {
                     intro("Let's configure your TanStack application");
                     finalOptions = await promptForOptions(cliOptions);
                 }
-                await createApp(finalOptions);
+                await createApp(finalOptions, {
+                    environment: createDefaultEnvironment(),
+                });
             }
             catch (error) {
                 log.error(error instanceof Error

package/dist/config-file.js

@@ -0,0 +1,22 @@
+import { readFile } from 'node:fs/promises';
+import { resolve } from 'node:path';
+import { CONFIG_FILE } from './constants.js';
+export async function writeConfigFile(environment, targetDir, options) {
+    const persistedOptions = {
+        ...options,
+        existingAddOns: options.chosenAddOns.map((addOn) => addOn.id),
+    };
+    delete persistedOptions.addOns;
+    delete persistedOptions.chosenAddOns;
+    await environment.writeFile(resolve(targetDir, CONFIG_FILE), JSON.stringify(persistedOptions, null, 2));
+}
+export async function readConfigFile(targetDir) {
+    try {
+        const configFile = resolve(targetDir, CONFIG_FILE);
+        const config = await readFile(configFile, 'utf8');
+        return JSON.parse(config);
+    }
+    catch {
+        return null;
+    }
+}

package/dist/constants.js

@@ -2,3 +2,4 @@ export const CODE_ROUTER = 'code-router';
 export const FILE_ROUTER = 'file-router';
 export const SUPPORTED_FRAMEWORKS = ['solid', 'react'];
 export const DEFAULT_FRAMEWORK = 'react';
+export const CONFIG_FILE = '.cta.json';