create-tsrouter-app 0.10.0 → 0.11.0

package/README.md

@@ -10,17 +10,17 @@ To maintain compatability with `create-react-app` you can build a new applicatio
 
 | Command                                                                          | Description                                       |
 | -------------------------------------------------------------------------------- | ------------------------------------------------- |
-| `npx create-tsrouter-app@latest my-app`                                          | Create a new app                                  |
-| `npx create-tsrouter-app@latest my-app --template file-router`                   | Create a new file based app                       |
-| `npx create-tsrouter-app@latest my-app --template typescript`                    | Create a new TypeScript app using the Code Router |
-| `npx create-tsrouter-app@latest my-app --tailwind`                               | Add Tailwind CSS support                          |
-| `npx create-tsrouter-app@latest my-app --framework solid`                        | Create a Solid app                                |
-| `npx create-tsrouter-app@latest my-app --framework solid --template file-router` | Create a Solid app with file-router               |
+| `pnpx create-tsrouter-app@latest my-app`                                          | Create a new app                                  |
+| `pnpx create-tsrouter-app@latest my-app --template file-router`                   | Create a new file based app                       |
+| `pnpx create-tsrouter-app@latest my-app --template typescript`                    | Create a new TypeScript app using the Code Router |
+| `pnpx create-tsrouter-app@latest my-app --tailwind`                               | Add Tailwind CSS support                          |
+| `pnpx create-tsrouter-app@latest my-app --framework solid`                        | Create a Solid app                                |
+| `pnpx create-tsrouter-app@latest my-app --framework solid --template file-router` | Create a Solid app with file-router               |
 
 If you don't specify a project name, the CLI will walk you through an interactive setup process:
 
 ```bash
-npx create-tsrouter-app@latest
+pnpx create-tsrouter-app@latest
 ```
 
 This will start an interactive CLI that guides you through the setup process, allowing you to choose:
@@ -38,7 +38,7 @@ This will start an interactive CLI that guides you through the setup process, al
 You can also use command line flags to specify your preferences directly:
 
 ```bash
-npx create-tsrouter-app@latest my-app --template file-router --tailwind --package-manager pnpm
+pnpx create-tsrouter-app@latest my-app --template file-router --tailwind --package-manager pnpm
 ```
 
 Available options:
@@ -67,7 +67,7 @@ File Based Routing is the default option when using the interactive CLI. The loc
 To explicitly choose File Based Routing, use:
 
 ```bash
-npx create-tsrouter-app@latest my-app --template file-router
+pnpx create-tsrouter-app@latest my-app --template file-router
 ```
 
 ### Code Based Routing
@@ -75,7 +75,7 @@ npx create-tsrouter-app@latest my-app --template file-router
 If you prefer traditional code-based routing, you can select it in the interactive CLI or specify it by using either the `typescript` or `javascript` template:
 
 ```bash
-npx create-tsrouter-app@latest my-app --template typescript
+pnpx create-tsrouter-app@latest my-app --template typescript
 ```
 
 ## Additional Configuration
@@ -109,7 +109,7 @@ Setting this flag to `eslint+prettier` will configure it as your toolchain of ch
 You can enable add-on selection:
 
 ```bash
-npx create-tsrouter-app@latest --add-ons
+pnpx create-tsrouter-app@latest --add-ons
 ```
 
 This will prompt you to select the add-ons you want to enable during application creation.
@@ -117,19 +117,19 @@ This will prompt you to select the add-ons you want to enable during application
 You can enable specific add-ons directly by adding a comma separated list of add-on names to the `--add-ons` flag. For example:
 
 ```bash
-npx create-tsrouter-app@latest my-app --add-ons shadcn,tanstack-query
+pnpx create-tsrouter-app@latest my-app --add-ons shadcn,tanstack-query
 ```
 
 You can get a list of all available add-ons by running:
 
 ```bash
-npx create-tsrouter-app@latest --list-add-ons
+pnpx create-tsrouter-app@latest --list-add-ons
 ```
 
 This will display a list of all available add-ons for React that are compatible with the Code Router.
 
 ```bash
-npx create-tsrouter-app@latest --list-add-ons --framework solid --template file-router
+pnpx create-tsrouter-app@latest --list-add-ons --framework solid --template file-router
 ```
 
 Will get you a list of all available add-ons for Solid that are compatible with the File Router.
@@ -139,7 +139,7 @@ Will get you a list of all available add-ons for Solid that are compatible with
 You can launch the `create-tsrouter-app` CLI with the `--mcp` flag to enable MCP support. Use this in your MCP enabled IDE to allow the Agent model to generate TanStack Router applications.
 
 ```bash
-npx create-tsrouter-app@latest --mcp
+pnpx create-tsrouter-app@latest --mcp
 ```
 
 Shown below is the configuration for MCP support in Cursor.

package/dist/index.js

@@ -1,3 +1,6 @@
 #!/usr/bin/env node
-import { cli } from './cli.js';
-cli();
+import { cli } from '@tanstack/cta-engine';
+cli({
+    name: 'create-tsrouter-app',
+    appName: 'TanStack',
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-tsrouter-app",
-  "version": "0.10.0",
+  "version": "0.11.0",
   "description": "Tanstack Application Builder",
   "bin": "./dist/index.js",
   "type": "module",
@@ -22,25 +22,10 @@
   "author": "Jack Herrington <jherr@pobox.com>",
   "license": "MIT",
   "dependencies": {
-    "@clack/prompts": "^0.10.0",
-    "@modelcontextprotocol/sdk": "^1.6.0",
-    "chalk": "^5.4.1",
-    "commander": "^13.1.0",
-    "ejs": "^3.1.10",
-    "execa": "^9.5.2",
-    "express": "^4.21.2",
-    "prettier": "^3.5.0",
-    "vitest": "^3.0.8",
-    "zod": "^3.24.2"
+    "@tanstack/cta-engine": "0.11.0"
   },
   "devDependencies": {
-    "@tanstack/config": "^0.16.2",
-    "@types/ejs": "^3.1.5",
-    "@types/express": "^5.0.0",
     "@types/node": "^22.13.4",
-    "eslint": "^9.20.0",
-    "eslint-plugin-react-hooks": "^5.1.0",
-    "eslint-plugin-unused-imports": "^4.1.4",
     "typescript": "^5.6.3"
   },
   "scripts": {}

package/src/index.ts

@@ -1,4 +1,7 @@
 #!/usr/bin/env node
-import { cli } from './cli.js'
+import { cli } from '@tanstack/cta-engine'
 
-cli()
+cli({
+  name: 'create-tsrouter-app',
+  appName: 'TanStack',
+})

package/.gitattributes

@@ -1,2 +0,0 @@
-# Auto detect text files and perform LF normalization
-* text=auto

package/.github/FUNDING.yml

@@ -1 +0,0 @@
-github: tannerlinsley

package/.github/ISSUE_TEMPLATE/bug_report.yml

@@ -1,94 +0,0 @@
-name: '🐛 Bug report'
-description: Create a report to help us improve
-body:
-  - type: markdown
-    attributes:
-      value: |
-        Thank you for reporting an issue :pray:.
-
-        This issue tracker is for reporting bugs found in `create-tsrouter-app` (https://github.com/tanstack/create-tsrouter-app).
-        If you have a question about how to achieve something and are struggling, please post a question
-        inside of `create-tsrouter-app` Discussions tab: https://github.com/tanstack/create-tsrouter-app/discussions
-
-        Before submitting a new bug/issue, please check the links below to see if there is a solution or question posted there already:
-         - `create-tsrouter-app` Issues tab: https://github.com/tanstack/create-tsrouter-app/issues?q=is%3Aissue+is%3Aopen+sort%3Aupdated-desc
-         - `create-tsrouter-app` closed issues tab: https://github.com/tanstack/create-tsrouter-app/issues?q=is%3Aissue+sort%3Aupdated-desc+is%3Aclosed
-         - `create-tsrouter-app` Discussions tab: https://github.com/tanstack/create-tsrouter-app/discussions
-
-        The more information you fill in, the better the community can help you.
-  - type: dropdown
-    id: project
-    attributes:
-      label: Which project does this relate to?
-      description: If you are unsure, please leave this as "Create Tanstack App".
-      options:
-        - Create Tanstack App
-    validations:
-      required: true
-  - type: textarea
-    id: description
-    attributes:
-      label: Describe the bug
-      description: Provide a clear and concise description of the challenge you are running into.
-    validations:
-      required: true
-  - type: input
-    id: link
-    attributes:
-      label: Your Example Website or App
-      description: |
-        Which website or app were you using when the bug happened?
-        Note:
-        - Please provide a link via our pre-configured Stackblitz project ([file-based routes](https://stackblitz.com/github/tanstack/router/tree/main/examples/react/quickstart-file-based?file=src%2Fmain.tsx)|[code-based routes](https://stackblitz.com/github/tanstack/router/tree/main/examples/react/quickstart?file=src%2Fmain.tsx)) or a link to a repo that can reproduce the issue.
-        - Your bug will may get fixed much faster if we can run your code and it doesn't have dependencies other than the `router` npm package / dependency.
-        - To create a shareable code example you can use Stackblitz. Please no localhost URLs.
-        - Please read these tips for providing a minimal example: https://stackoverflow.com/help/mcve.
-      placeholder: reproduction URL
-    validations:
-      required: true
-  - type: textarea
-    id: steps
-    attributes:
-      label: Steps to Reproduce the Bug or Issue
-      description: Describe the steps we have to take to reproduce the behavior.
-      placeholder: |
-        1. Go to '...'
-        2. Click on '....'
-        3. Scroll down to '....'
-        4. See error
-    validations:
-      required: true
-  - type: textarea
-    id: expected
-    attributes:
-      label: Expected behavior
-      description: Provide a clear and concise description of what you expected to happen.
-      placeholder: |
-        As a user, I expected ___ behavior but i am seeing ___
-    validations:
-      required: true
-  - type: textarea
-    id: screenshots_or_videos
-    attributes:
-      label: Screenshots or Videos
-      description: |
-        If applicable, add screenshots or a video to help explain your problem.
-        For more information on the supported file image/file types and the file size limits, please refer
-        to the following link: https://docs.github.com/en/github/writing-on-github/working-with-advanced-formatting/attaching-files
-      placeholder: |
-        You can drag your video or image files inside of this editor ↓
-  - type: textarea
-    id: platform
-    attributes:
-      label: Platform
-      value: |
-        - OS: [e.g. macOS, Windows, Linux]
-        - Browser: [e.g. Chrome, Safari, Firefox]
-        - Version: [e.g. 91.1]
-    validations:
-      required: true
-  - type: textarea
-    id: additional
-    attributes:
-      label: Additional context
-      description: Add any other context about the problem here.

package/.github/ISSUE_TEMPLATE/config.yml

@@ -1,11 +0,0 @@
-blank_issues_enabled: false
-contact_links:
-  - name: 🤔 Feature Requests & Questions
-    url: https://github.com/tanstack/create-tsrouter-app/discussions
-    about: Please ask and answer questions here.
-  - name: 💬 Community Chat
-    url: https://discord.gg/mQd7egN
-    about: A dedicated discord server hosted by Tanner Linsley
-  - name: 💬 Tanstack Twitter
-    url: https://twitter.com/tan_stack
-    about: Stay up to date with new releases of our libraries

package/.github/workflows/ci.yml

@@ -1,45 +0,0 @@
-name: ci
-
-on:
-  workflow_dispatch:
-    inputs:
-      tag:
-        description: override release tag
-        required: false
-  push:
-    branches: [main, alpha, beta]
-
-concurrency:
-  group: ${{ github.workflow }}-${{ github.event.number || github.ref }}
-  cancel-in-progress: true
-
-permissions:
-  contents: write
-  id-token: write
-
-jobs:
-  test-and-publish:
-    name: Test & Publish
-    if: github.repository_owner == 'TanStack'
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout
-        uses: actions/checkout@v4.2.2
-        with:
-          fetch-depth: 0
-      - name: Setup Tools
-        uses: tanstack/config/.github/setup@main
-      - name: Test
-        run: pnpm test
-      - name: Build
-        run: pnpm build
-      - name: Publish
-        run: |
-          git config --global user.name 'Tanner Linsley'
-          git config --global user.email 'tannerlinsley@users.noreply.github.com'
-          npm config set '//registry.npmjs.org/:_authToken' "${NPM_TOKEN}"
-          pnpm run cipublish
-        env:
-          GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-          NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
-          TAG: ${{ inputs.tag }}

package/.nvmrc

@@ -1 +0,0 @@
-20.17.0

package/.prettierignore

@@ -1,3 +0,0 @@
-dist
-project-template
-node_modules

package/CONTRIBUTING.md

@@ -1,34 +0,0 @@
-# Contributing
-
-- Clone the repo
-  - `gh repo clone TanStack/create-tsrouter-app`
-- Ensure `node` is installed
-  - https://nodejs.org/en/
-- Ensure `pnpm` is installed
-  - https://pnpm.io/installation
-  - Why? We use `pnpm` to manage workspace dependencies. It's easily the best monorepo/workspace experience available as of when this was written.
-- Install dependencies
-  - `pnpm install`
-  - This installs dependencies for all of the packages in the monorepo, even examples!
-  - Dependencies inside of the packages and examples are automatically linked together as local/dynamic dependencies.
-- Run the build
-  - `pnpm build`
-- Build an example app with the builder
-  - `pnpm start app-js`
-- Run the `app-js` app just to make sure it works
-- Make changes to the code
-  - Re-run `pnpm build` and `pnpm start` (in all its configurations) to make sure the changes work
-- Check your work and PR
-
-# Testing combinations
-
-These must all product running applications that can be built (`pnpm build`) and tested (`pnpm test`).
-
-| Command                                                  | Description                                                        |
-| -------------------------------------------------------- | ------------------------------------------------------------------ |
-| `pnpm start app-js`                                      | Creates a JavaScript app                                           |
-| `pnpm start app-ts --template typescript`                | Creates a TypeScript app                                           |
-| `pnpm start app-js-tw --tailwind`                        | Creates a JavaScript app with Tailwind CSS                         |
-| `pnpm start app-ts-tw --template typescript --tailwind`  | Creates a TypeScript app with Tailwind CSS                         |
-| `pnpm start app-fr --template file-router`               | Creates a TypeScript app with File Based Routing                   |
-| `pnpm start app-fr-tw --template file-router --tailwind` | Creates a TypeScript app with File Based Routing with Tailwind CSS |

package/dist/add-ons.js

@@ -1,69 +0,0 @@
-import { readFile } from 'node:fs/promises';
-import { existsSync, readdirSync, statSync } from 'node:fs';
-import { resolve } from 'node:path';
-import { fileURLToPath } from 'node:url';
-import chalk from 'chalk';
-import { DEFAULT_FRAMEWORK } from './constants.js';
-function isDirectory(path) {
-    return statSync(path).isDirectory();
-}
-export async function getAllAddOns(framework, template) {
-    const addOns = [];
-    for (const type of ['add-on', 'example']) {
-        const addOnsBase = fileURLToPath(new URL(`../templates/${framework}/${type}`, import.meta.url));
-        if (!existsSync(addOnsBase)) {
-            continue;
-        }
-        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');
-            const info = JSON.parse(fileContent);
-            if (!info.templates.includes(template)) {
-                continue;
-            }
-            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({
-                ...info,
-                id: dir,
-                type,
-                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(framework, template, chosenAddOnIDs) {
-    const finalAddOnIDs = new Set(chosenAddOnIDs);
-    const addOns = await getAllAddOns(framework, template);
-    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));
-}
-export async function listAddOns(options) {
-    const mode = options.template === 'file-router' ? 'file-router' : 'code-router';
-    const addOns = await getAllAddOns(options.framework || DEFAULT_FRAMEWORK, mode);
-    for (const addOn of addOns) {
-        console.log(`${chalk.bold(addOn.id)}: ${addOn.description}`);
-    }
-}

package/dist/cli.js

@@ -1,89 +0,0 @@
-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';
-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';
-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('--framework <type>', 'project framework (solid, react)', (value) => {
-        if (!SUPPORTED_FRAMEWORKS.includes(value)) {
-            throw new InvalidArgumentError(`Invalid framework: ${value}. Only the following are allowed: ${SUPPORTED_FRAMEWORKS.join(', ')}`);
-        }
-        return value;
-    }, DEFAULT_FRAMEWORK)
-        .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(`--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) => {
-        let addOns = !!value;
-        if (typeof value === 'string') {
-            addOns = value.split(',').map((addon) => addon.trim());
-        }
-        return addOns;
-    })
-        .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 || options.mcpSse) {
-            await runServer(!!options.mcpSse);
-        }
-        else {
-            try {
-                const cliOptions = {
-                    projectName,
-                    ...options,
-                };
-                let finalOptions = await 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, {
-                    environment: createDefaultEnvironment(),
-                });
-            }
-            catch (error) {
-                log.error(error instanceof Error
-                    ? error.message
-                    : 'An unknown error occurred');
-                process.exit(1);
-            }
-        }
-    });
-    program.parse();
-}

package/dist/constants.js

@@ -1,4 +0,0 @@
-export const CODE_ROUTER = 'code-router';
-export const FILE_ROUTER = 'file-router';
-export const SUPPORTED_FRAMEWORKS = ['solid', 'react'];
-export const DEFAULT_FRAMEWORK = 'react';