create-start-app 0.9.2 → 0.9.4

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/README.md

@@ -2,7 +2,7 @@
 
 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.
+To help accelerate the migration away from `create-react-app` we created the `create-start-app` CLI which is a plug-n-play replacement for CRA.
 
 ## Quick Start
 
@@ -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               |
+| `npx create-start-app@latest my-app`                                          | Create a new app                                  |
+| `npx create-start-app@latest my-app --template file-router`                   | Create a new file based app                       |
+| `npx create-start-app@latest my-app --template typescript`                    | Create a new TypeScript app using the Code Router |
+| `npx create-start-app@latest my-app --tailwind`                               | Add Tailwind CSS support                          |
+| `npx create-start-app@latest my-app --framework solid`                        | Create a Solid app                                |
+| `npx create-start-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
+npx create-start-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
+npx create-start-app@latest my-app --template file-router --tailwind --package-manager pnpm
 ```
 
 Available options:
@@ -56,7 +56,7 @@ When using flags, the CLI will display which options were provided and only prom
 
 What you'll get is a Vite application that uses TanStack Router. All the files will still be in the same place as in CRA, but you'll get a fully functional Router setup under in `app/main.tsx`.
 
-`create-tsrouter-app` is everything you loved about CRA but implemented with modern tools and best practices, on top of the popular TanStack set of libraries. Which includes [@tanstack/react-query](https://tanstack.com/query/latest) and [@tanstack/react-router](https://tanstack.com/router/latest).
+`create-start-app` is everything you loved about CRA but implemented with modern tools and best practices, on top of the popular TanStack set of libraries. Which includes [@tanstack/react-query](https://tanstack.com/query/latest) and [@tanstack/react-router](https://tanstack.com/router/latest).
 
 ## Routing 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
+npx create-start-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
+npx create-start-app@latest my-app --template typescript
 ```
 
 ## Additional Configuration
@@ -107,7 +107,7 @@ Setting this flag to `biome` will configure it as your toolchain of choice, addi
 You can enable add-on selection:
 
 ```bash
-npx create-tsrouter-app@latest --add-ons
+npx create-start-app@latest --add-ons
 ```
 
 This will prompt you to select the add-ons you want to enable during application creation.
@@ -115,29 +115,29 @@ 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
+npx create-start-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
+npx create-start-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
+npx create-start-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.
 
 ## MCP (Model Context Protocol) Support (experimental)
 
-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.
+You can launch the `create-start-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
+npx create-start-app@latest --mcp
 ```
 
 Shown below is the configuration for MCP support in Cursor.

package/dist/create-app.js

@@ -306,7 +306,7 @@ export async function createApp(options, { silent = false, environment, }) {
         }
         if (shadcnComponents.size > 0) {
             s?.start(`Installing shadcn components (${Array.from(shadcnComponents).join(', ')})...`);
-            await environment.execute('npx', ['shadcn@canary', 'add', '--force', ...shadcnComponents], resolve(targetDir));
+            await environment.execute('npx', ['shadcn@canary', 'add', '--silent', '--yes', ...shadcnComponents], resolve(targetDir));
             s?.stop(`Installed additional shadcn components`);
         }
     }

package/dist/options.js

@@ -5,6 +5,15 @@ import { CODE_ROUTER, DEFAULT_FRAMEWORK, FILE_ROUTER } from './constants.js';
 import { finalizeAddOns, getAllAddOns } from './add-ons.js';
 // If all CLI options are provided, use them directly
 export async function normalizeOptions(cliOptions) {
+    // in some cases, if you use windows/powershell, the argument for addons
+    // if sepparated by comma is not really passed as an array, but as a string 
+    // with spaces, We need to normalize this edge case.
+    if (Array.isArray(cliOptions.addOns) && cliOptions.addOns.length === 1) {
+        const parseSeparatedArgs = cliOptions.addOns[0].split(' ');
+        if (parseSeparatedArgs.length > 1) {
+            cliOptions.addOns = parseSeparatedArgs;
+        }
+    }
     if (cliOptions.projectName) {
         let typescript = cliOptions.template === 'typescript' ||
             cliOptions.template === 'file-router' ||

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-start-app",
-  "version": "0.9.2",
+  "version": "0.9.4",
   "description": "Tanstack Application Builder",
   "bin": "./dist/index.js",
   "type": "module",

package/src/create-app.ts

@@ -487,7 +487,7 @@ export async function createApp(
       )
       await environment.execute(
         'npx',
-        ['shadcn@canary', 'add', '--force', ...shadcnComponents],
+        ['shadcn@canary', 'add', '--silent', '--yes', ...shadcnComponents],
         resolve(targetDir),
       )
       s?.stop(`Installed additional shadcn components`)

package/src/options.ts

@@ -23,6 +23,15 @@ import type { CliOptions, Options } from './types.js'
 export async function normalizeOptions(
   cliOptions: CliOptions,
 ): Promise<Required<Options> | undefined> {
+  // in some cases, if you use windows/powershell, the argument for addons
+  // if sepparated by comma is not really passed as an array, but as a string 
+  // with spaces, We need to normalize this edge case.
+  if (Array.isArray(cliOptions.addOns) && cliOptions.addOns.length === 1) {
+      const parseSeparatedArgs = cliOptions.addOns[0].split(' ');
+      if (parseSeparatedArgs.length > 1) {
+          cliOptions.addOns = parseSeparatedArgs;
+      }
+  }
   if (cliOptions.projectName) {
     let typescript =
       cliOptions.template === 'typescript' ||

package/templates/solid/base/README.md.ejs

@@ -154,7 +154,7 @@ export const Route = createRootRoute({
 <% } %>
 The `<TanStackRouterDevtools />` component is not required so you can remove it if you don't want it in your layout.
 
-More information on layouts can be found in the [Layouts documentation](hthttps://tanstack.com/router/latest/docs/framework/solid/guide/routing-concepts#layouts).
+More information on layouts can be found in the [Layouts documentation](https://tanstack.com/router/latest/docs/framework/solid/guide/routing-concepts#layouts).
 
 ## Data Fetching
 

package/tests/cra.test.ts

@@ -1,116 +1,232 @@
-import { expect, test } from 'vitest'
+import { describe, expect, test } from 'vitest'
 
 import { createApp } from '../src/create-app.js'
 import { cleanupOutput, createTestEnvironment } from './test-utilities.js'
 
-test('code router in javascript on npm', async () => {
-  const projectName = 'TEST'
-  const { environment, output } = createTestEnvironment(projectName)
-  await createApp(
-    {
-      addOns: false,
-      framework: 'react',
-      chosenAddOns: [],
-      git: true,
-      mode: 'code-router',
-      packageManager: 'npm',
-      projectName,
-      tailwind: false,
-      toolchain: 'none',
-      typescript: false,
-      variableValues: {},
-    },
-    {
-      silent: true,
-      environment,
-    },
-  )
-  cleanupOutput(output)
-  await expect(JSON.stringify(output, null, 2)).toMatchFileSnapshot(
-    './snapshots/cra/cr-js-npm.json',
-  )
-})
+describe('React Templates', () => {
+  test('code router in javascript on npm', async () => {
+    const projectName = 'TEST'
+    const { environment, output } = createTestEnvironment(projectName)
+    await createApp(
+      {
+        addOns: false,
+        framework: 'react',
+        chosenAddOns: [],
+        git: true,
+        mode: 'code-router',
+        packageManager: 'npm',
+        projectName,
+        tailwind: false,
+        toolchain: 'none',
+        typescript: false,
+        variableValues: {},
+      },
+      {
+        silent: true,
+        environment,
+      },
+    )
+    cleanupOutput(output)
+    await expect(JSON.stringify(output, null, 2)).toMatchFileSnapshot(
+      './snapshots/cra/cr-js-npm.json',
+    )
+  })
 
-test('code router in typescript on npm', async () => {
-  const projectName = 'TEST'
-  const { environment, output } = createTestEnvironment(projectName)
-  await createApp(
-    {
-      addOns: false,
-      framework: 'react',
-      chosenAddOns: [],
-      git: true,
-      mode: 'code-router',
-      packageManager: 'npm',
-      projectName,
-      tailwind: false,
-      toolchain: 'none',
-      typescript: true,
-      variableValues: {},
-    },
-    {
-      silent: true,
-      environment,
-    },
-  )
-  cleanupOutput(output)
-  await expect(JSON.stringify(output, null, 2)).toMatchFileSnapshot(
-    './snapshots/cra/cr-ts-npm.json',
-  )
-})
+  test('code router in typescript on npm', async () => {
+    const projectName = 'TEST'
+    const { environment, output } = createTestEnvironment(projectName)
+    await createApp(
+      {
+        addOns: false,
+        framework: 'react',
+        chosenAddOns: [],
+        git: true,
+        mode: 'code-router',
+        packageManager: 'npm',
+        projectName,
+        tailwind: false,
+        toolchain: 'none',
+        typescript: true,
+        variableValues: {},
+      },
+      {
+        silent: true,
+        environment,
+      },
+    )
+    cleanupOutput(output)
+    await expect(JSON.stringify(output, null, 2)).toMatchFileSnapshot(
+      './snapshots/cra/cr-ts-npm.json',
+    )
+  })
+
+  test('file router on npm', async () => {
+    const projectName = 'TEST'
+    const { environment, output } = createTestEnvironment(projectName)
+    await createApp(
+      {
+        addOns: false,
+        framework: 'react',
+        chosenAddOns: [],
+        git: true,
+        mode: 'file-router',
+        packageManager: 'npm',
+        projectName,
+        tailwind: false,
+        toolchain: 'none',
+        typescript: true,
+        variableValues: {},
+      },
+      {
+        silent: true,
+        environment,
+      },
+    )
+    cleanupOutput(output)
+    await expect(JSON.stringify(output, null, 2)).toMatchFileSnapshot(
+      './snapshots/cra/fr-ts-npm.json',
+    )
+  })
 
-test('file router on npm', async () => {
-  const projectName = 'TEST'
-  const { environment, output } = createTestEnvironment(projectName)
-  await createApp(
-    {
-      addOns: false,
-      framework: 'react',
-      chosenAddOns: [],
-      git: true,
-      mode: 'file-router',
-      packageManager: 'npm',
-      projectName,
-      tailwind: false,
-      toolchain: 'none',
-      typescript: true,
-      variableValues: {},
-    },
-    {
-      silent: true,
-      environment,
-    },
-  )
-  cleanupOutput(output)
-  await expect(JSON.stringify(output, null, 2)).toMatchFileSnapshot(
-    './snapshots/cra/fr-ts-npm.json',
-  )
+  test('file router with tailwind on npm', async () => {
+    const projectName = 'TEST'
+    const { environment, output } = createTestEnvironment(projectName)
+    await createApp(
+      {
+        addOns: false,
+        framework: 'react',
+        chosenAddOns: [],
+        git: true,
+        mode: 'file-router',
+        packageManager: 'npm',
+        projectName,
+        tailwind: true,
+        toolchain: 'none',
+        typescript: true,
+        variableValues: {},
+      },
+      {
+        silent: true,
+        environment,
+      },
+    )
+    cleanupOutput(output)
+    await expect(JSON.stringify(output, null, 2)).toMatchFileSnapshot(
+      './snapshots/cra/fr-ts-tw-npm.json',
+    )
+  })
 })
 
-test('file router with tailwind on npm', async () => {
-  const projectName = 'TEST'
-  const { environment, output } = createTestEnvironment(projectName)
-  await createApp(
-    {
-      addOns: false,
-      framework: 'react',
-      chosenAddOns: [],
-      git: true,
-      mode: 'file-router',
-      packageManager: 'npm',
-      projectName,
-      tailwind: true,
-      toolchain: 'none',
-      typescript: true,
-      variableValues: {},
-    },
-    {
-      silent: true,
-      environment,
-    },
-  )
-  cleanupOutput(output)
-  await expect(JSON.stringify(output, null, 2)).toMatchFileSnapshot(
-    './snapshots/cra/fr-ts-tw-npm.json',
-  )
+describe('Solid Templates', () => {
+  test('code router in javascript on npm', async () => {
+    const projectName = 'TEST'
+    const { environment, output } = createTestEnvironment(projectName)
+    await createApp(
+      {
+        addOns: false,
+        framework: 'solid',
+        chosenAddOns: [],
+        git: true,
+        mode: 'code-router',
+        packageManager: 'npm',
+        projectName,
+        tailwind: false,
+        toolchain: 'none',
+        typescript: false,
+        variableValues: {},
+      },
+      {
+        silent: true,
+        environment,
+      },
+    )
+    cleanupOutput(output)
+    await expect(JSON.stringify(output, null, 2)).toMatchFileSnapshot(
+      './snapshots/cra/solid-cr-js-npm.json',
+    )
+  })
+
+  test('code router in typescript on npm', async () => {
+    const projectName = 'TEST'
+    const { environment, output } = createTestEnvironment(projectName)
+    await createApp(
+      {
+        addOns: false,
+        framework: 'solid',
+        chosenAddOns: [],
+        git: true,
+        mode: 'code-router',
+        packageManager: 'npm',
+        projectName,
+        tailwind: false,
+        toolchain: 'none',
+        typescript: true,
+        variableValues: {},
+      },
+      {
+        silent: true,
+        environment,
+      },
+    )
+    cleanupOutput(output)
+    await expect(JSON.stringify(output, null, 2)).toMatchFileSnapshot(
+      './snapshots/cra/solid-cr-ts-npm.json',
+    )
+  })
+
+  test('file router on npm', async () => {
+    const projectName = 'TEST'
+    const { environment, output } = createTestEnvironment(projectName)
+    await createApp(
+      {
+        addOns: false,
+        framework: 'solid',
+        chosenAddOns: [],
+        git: true,
+        mode: 'file-router',
+        packageManager: 'npm',
+        projectName,
+        tailwind: false,
+        toolchain: 'none',
+        typescript: true,
+        variableValues: {},
+      },
+      {
+        silent: true,
+        environment,
+      },
+    )
+    cleanupOutput(output)
+    await expect(JSON.stringify(output, null, 2)).toMatchFileSnapshot(
+      './snapshots/cra/solid-fr-ts-npm.json',
+    )
+  })
+
+  test('file router with tailwind on npm', async () => {
+    const projectName = 'TEST'
+    const { environment, output } = createTestEnvironment(projectName)
+    await createApp(
+      {
+        addOns: false,
+        framework: 'solid',
+        chosenAddOns: [],
+        git: true,
+        mode: 'file-router',
+        packageManager: 'npm',
+        projectName,
+        tailwind: true,
+        toolchain: 'none',
+        typescript: true,
+        variableValues: {},
+      },
+      {
+        silent: true,
+        environment,
+      },
+    )
+    cleanupOutput(output)
+    await expect(JSON.stringify(output, null, 2)).toMatchFileSnapshot(
+      './snapshots/cra/solid-fr-ts-tw-npm.json',
+    )
+  })
 })

package/tests/snapshots/cra/solid-cr-js-npm.json

@@ -0,0 +1,30 @@
+{
+  "files": {
+    ".gitignore": "node_modules\n.DS_Store\ndist\ndist-ssr\n*.local\n",
+    "/.vscode/settings.json": "{\n  \"files.watcherExclude\": {\n    \"**/routeTree.gen.ts\": true\n  },\n  \"search.exclude\": {\n    \"**/routeTree.gen.ts\": true\n  },\n  \"files.readonlyInclude\": {\n    \"**/routeTree.gen.ts\": true\n  }\n}\n",
+    "/public/manifest.json": "{\n  \"short_name\": \"TanStack App\",\n  \"name\": \"Create TanStack App Sample\",\n  \"icons\": [\n    {\n      \"src\": \"favicon.ico\",\n      \"sizes\": \"64x64 32x32 24x24 16x16\",\n      \"type\": \"image/x-icon\"\n    },\n    {\n      \"src\": \"logo192.png\",\n      \"type\": \"image/png\",\n      \"sizes\": \"192x192\"\n    },\n    {\n      \"src\": \"logo512.png\",\n      \"type\": \"image/png\",\n      \"sizes\": \"512x512\"\n    }\n  ],\n  \"start_url\": \".\",\n  \"display\": \"standalone\",\n  \"theme_color\": \"#000000\",\n  \"background_color\": \"#ffffff\"\n}\n",
+    "/public/robots.txt": "# https://www.robotstxt.org/robotstxt.html\nUser-agent: *\nDisallow:\n",
+    "/src/App.css": "",
+    "/src/App.jsx": "\nimport logo from \"./logo.svg\";\n\n\n\n\n\nfunction App() {\n  return (\n    <main class=\"min-h-screen flex flex-col items-center justify-center bg-[#282c34] text-white text-[calc(10px+2vmin)] text-center\">\n      <img\n        src={logo}\n        class=\"h-[40vmin] pointer-events-none animate-[spin_20s_linear_infinite]\"\n        alt=\"logo\"\n      />\n      <p>\n        Edit <code>src/App.jsx</code> and save to reload.\n      </p>\n      <a\n        class=\"text-[#61dafb] hover:underline\"\n        href=\"https://solidjs.com\"\n        target=\"_blank\"\n        rel=\"noopener noreferrer\"\n      >\n        Learn Solid\n      </a>\n      <a\n        class=\"text-[#61dafb] hover:underline\"\n        href=\"https://tanstack.com\"\n        target=\"_blank\"\n        rel=\"noopener noreferrer\"\n      >\n        Learn TanStack\n      </a>\n    </main>\n  );\n}\n\n\nexport default App;\n\n",
+    "/src/main.jsx": "import {\n  Outlet,\n  RouterProvider,\n  createRootRoute,\n  createRoute,\n  createRouter,\n} from \"@tanstack/solid-router\";\nimport { TanStackRouterDevtools } from \"@tanstack/solid-router-devtools\";\nimport { render } from 'solid-js/web'\n\n\nimport \"./styles.css\";\n\nimport App from \"./App.jsx\";\n\nconst rootRoute = createRootRoute({\n  component: () => (\n    <>\n    \n      \n      <Outlet />\n      <TanStackRouterDevtools />\n      \n      \n      </>\n  ),\n});\n\nconst indexRoute = createRoute({\n  getParentRoute: () => rootRoute,\n  path: \"/\",\n  component: App,\n});\n\nconst routeTree = rootRoute.addChildren([indexRoute]);\n\nconst router = createRouter({\n  routeTree,\n  defaultPreload: \"intent\",\n  scrollRestoration: true,\n});\n\ndeclare module '@tanstack/solid-router' {\n  interface Register {\n    router: typeof router\n  }\n}\n\nfunction MainApp() {\n  return (\n    <>\n      <RouterProvider router={router} />\n    </>\n  )\n}\n\nconst rootElement = document.getElementById('app')\nif(rootElement) {\n  render(() => <MainApp />, rootElement)\n}\n",
+    "/src/styles.css": "@import \"tailwindcss\";\n\nbody {\n  @apply m-0;\n  font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Roboto\", \"Oxygen\",\n    \"Ubuntu\", \"Cantarell\", \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\",\n    sans-serif;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}\n\ncode {\n  font-family: source-code-pro, Menlo, Monaco, Consolas, \"Courier New\",\n    monospace;\n}\n",
+    "README.md": "Welcome to your new TanStack app! \n\n# Getting Started\n\nTo run this application:\n\n```bash\nnpm install\nnpm run start\n```\n\n# Building For Production\n\nTo build this application for production:\n\n```bash\nnpm run build\n```\n\n## Styling\n\nThis project uses [Tailwind CSS](https://tailwindcss.com/) for styling.\n\n\n\n## Routing\nThis project uses [TanStack Router](https://tanstack.com/router). The initial setup is a code based router. Which means that the routes are defined in code (in the `./src/main.jsx` file). If you like you can also use a file based routing setup by following the [File Based Routing](https://tanstack.com/router/latest/docs/framework/solid/guide/file-based-routing) guide.\n\n### Adding A Route\n\nTo add a new route to your application just add another `createRoute` call to the `./src/main.jsx` file. The example below adds a new `/about`route to the root route.\n\n```tsx\nconst aboutRoute = createRoute({\n  getParentRoute: () => rootRoute,\n  path: \"/about\",\n  component: () => <h1>About</h1>,\n});\n```\n\nYou will also need to add the route to the `routeTree` in the `./src/main.jsx` file.\n\n```tsx\nconst routeTree = rootRoute.addChildren([indexRoute, aboutRoute]);\n```\n\nWith this set up you should be able to navigate to `/about` and see the about page.\n\nOf course you don't need to implement the About page in the `main.jsx` file. You can create that component in another file and import it into the `main.jsx` file, then use it in the `component` property of the `createRoute` call, like so:\n\n```tsx\nimport About from \"./components/About.jsx\";\n\nconst aboutRoute = createRoute({\n  getParentRoute: () => rootRoute,\n  path: \"/about\",\n  component: About,\n});\n```\n\nThat is how we have the `App` component set up with the home page.\n\nFor more information on the options you have when you are creating code based routes check out the [Code Based Routing](https://tanstack.com/router/latest/docs/framework/solid/guide/code-based-routing) documentation.\n\nNow that you have two routes you can use a `Link` component to navigate between them.\n\n### Adding Links\n\nTo use SPA (Single Page Application) navigation you will need to import the `Link` component from `@tanstack/solid-router`.\n\n```tsx\nimport { Link } from \"@tanstack/solid-router\";\n```\n\nThen anywhere in your JSX you can use it like so:\n\n```tsx\n<Link to=\"/about\">About</Link>\n```\n\nThis will create a link that will navigate to the `/about` route.\n\nMore information on the `Link` component can be found in the [Link documentation](https://tanstack.com/router/v1/docs/framework/solid/api/router/linkComponent).\n\n### Using A Layout\n\n\nLayouts can be used to wrap the contents of the routes in menus, headers, footers, etc.\n\nThere is already a layout in the `src/main.jsx` file:\n\n```tsx\nconst rootRoute = createRootRoute({\n  component: () => (\n    <>\n      <Outlet />\n      <TanStackRouterDevtools />\n    </>\n  ),\n});\n```\n\nYou can use the Soliid component specified in the `component` property of the `rootRoute` to wrap the contents of the routes. The `<Outlet />` component is used to render the current route within the body of the layout. For example you could add a header to the layout like so:\n\n```tsx\nimport { Link } from \"@tanstack/solid-router\";\n\nconst rootRoute = createRootRoute({\n  component: () => (\n    <>\n      <header>\n        <nav>\n          <Link to=\"/\">Home</Link>\n          <Link to=\"/about\">About</Link>\n        </nav>\n      </header>\n      <Outlet />\n      <TanStackRouterDevtools />\n    </>\n  ),\n});\n```\n\nThe `<TanStackRouterDevtools />` component is not required so you can remove it if you don't want it in your layout.\n\nMore information on layouts can be found in the [Layouts documentation](https://tanstack.com/router/latest/docs/framework/solid/guide/routing-concepts#layouts).\n\n## Data Fetching\n\nThere are multiple ways to fetch data in your application. You can use TanStack Query to fetch data from a server. But you can also use the `loader` functionality built into TanStack Router to load the data for a route before it's rendered.\n\nFor example:\n\n```tsx\nconst peopleRoute = createRoute({\n  getParentRoute: () => rootRoute,\n  path: \"/people\",\n  loader: async () => {\n    const response = await fetch(\"https://swapi.dev/api/people\");\n    return response.json();\n  },\n  component: () => {\n    const data = peopleRoute.useLoaderData();\n    return (\n      <ul>\n        {data.results.map((person) => (\n          <li key={person.name}>{person.name}</li>\n        ))}\n      </ul>\n    );\n  },\n});\n```\n\nLoaders simplify your data fetching logic dramatically. Check out more information in the [Loader documentation](https://tanstack.com/router/latest/docs/framework/solid/guide/data-loading#loader-parameters).\n\n# Demo files\n\nFiles prefixed with `demo` can be safely deleted. They are there to provide a starting point for you to play around with the features you've installed.\n\n# Learn More\n\nYou can learn more about all of the offerings from TanStack in the [TanStack documentation](https://tanstack.com).\n",
+    "index.html": "<!DOCTYPE html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link rel=\"icon\" href=\"/favicon.ico\" />\n    <meta name=\"theme-color\" content=\"#000000\" />\n    <meta\n      name=\"description\"\n      content=\"Web site created using create-tsrouter-app\"\n    />\n    <link rel=\"apple-touch-icon\" href=\"/logo192.png\" />\n    <link rel=\"manifest\" href=\"/manifest.json\" />\n    <title>Create TanStack App - app-ts</title>\n  </head>\n  <body>\n    <div id=\"app\"></div>\n    <script type=\"module\" src=\"/src/main.tsx\"></script>\n  </body>\n</html>\n",
+    "package.json": "{\n  \"name\": \"TEST\",\n  \"private\": true,\n  \"type\": \"module\",\n  \"scripts\": {\n    \"start\": \"vite --port 3000\",\n    \"build\": \"vite build && tsc\",\n    \"serve\": \"vite preview\",\n    \"test\": \"vitest run\"\n  },\n  \"dependencies\": {\n    \"@tanstack/router-plugin\": \"^1.109.2\",\n    \"@tanstack/solid-router\": \"^1.110.0\",\n    \"@tanstack/solid-router-devtools\": \"^1.109.2\",\n    \"solid-js\": \"^1.9.4\"\n  },\n  \"devDependencies\": {\n    \"typescript\": \"^5.7.2\",\n    \"vite\": \"^6.0.11\",\n    \"vite-plugin-solid\": \"^2.11.2\"\n  }\n}",
+    "vite.config.js": "import { defineConfig } from 'vite'\n\nimport solidPlugin from 'vite-plugin-solid'\nimport tailwindcss from '@tailwindcss/vite'\n\n// https://vitejs.dev/config/\nexport default defineConfig({\n  plugins: [\n    solidPlugin(),\n    tailwindcss(),\n  ],\n})\n"
+  },
+  "commands": [
+    {
+      "command": "npm",
+      "args": [
+        "install"
+      ]
+    },
+    {
+      "command": "git",
+      "args": [
+        "init"
+      ]
+    }
+  ]
+}

package/tests/snapshots/cra/solid-cr-ts-npm.json

@@ -0,0 +1,31 @@
+{
+  "files": {
+    ".gitignore": "node_modules\n.DS_Store\ndist\ndist-ssr\n*.local\n",
+    "/.vscode/settings.json": "{\n  \"files.watcherExclude\": {\n    \"**/routeTree.gen.ts\": true\n  },\n  \"search.exclude\": {\n    \"**/routeTree.gen.ts\": true\n  },\n  \"files.readonlyInclude\": {\n    \"**/routeTree.gen.ts\": true\n  }\n}\n",
+    "/public/manifest.json": "{\n  \"short_name\": \"TanStack App\",\n  \"name\": \"Create TanStack App Sample\",\n  \"icons\": [\n    {\n      \"src\": \"favicon.ico\",\n      \"sizes\": \"64x64 32x32 24x24 16x16\",\n      \"type\": \"image/x-icon\"\n    },\n    {\n      \"src\": \"logo192.png\",\n      \"type\": \"image/png\",\n      \"sizes\": \"192x192\"\n    },\n    {\n      \"src\": \"logo512.png\",\n      \"type\": \"image/png\",\n      \"sizes\": \"512x512\"\n    }\n  ],\n  \"start_url\": \".\",\n  \"display\": \"standalone\",\n  \"theme_color\": \"#000000\",\n  \"background_color\": \"#ffffff\"\n}\n",
+    "/public/robots.txt": "# https://www.robotstxt.org/robotstxt.html\nUser-agent: *\nDisallow:\n",
+    "/src/App.css": "",
+    "/src/App.tsx": "import logo from './logo.svg'\n\nfunction App() {\n  return (\n    <main class=\"min-h-screen flex flex-col items-center justify-center bg-[#282c34] text-white text-[calc(10px+2vmin)] text-center\">\n      <img\n        src={logo}\n        class=\"h-[40vmin] pointer-events-none animate-[spin_20s_linear_infinite]\"\n        alt=\"logo\"\n      />\n      <p>\n        Edit <code>src/App.tsx</code> and save to reload.\n      </p>\n      <a\n        class=\"text-[#61dafb] hover:underline\"\n        href=\"https://solidjs.com\"\n        target=\"_blank\"\n        rel=\"noopener noreferrer\"\n      >\n        Learn Solid\n      </a>\n      <a\n        class=\"text-[#61dafb] hover:underline\"\n        href=\"https://tanstack.com\"\n        target=\"_blank\"\n        rel=\"noopener noreferrer\"\n      >\n        Learn TanStack\n      </a>\n    </main>\n  )\n}\n\nexport default App\n",
+    "/src/main.tsx": "import {\n  Outlet,\n  RouterProvider,\n  createRootRoute,\n  createRoute,\n  createRouter,\n} from '@tanstack/solid-router'\nimport { TanStackRouterDevtools } from '@tanstack/solid-router-devtools'\nimport { render } from 'solid-js/web'\n\nimport './styles.css'\n\nimport App from './App.tsx'\n\nconst rootRoute = createRootRoute({\n  component: () => (\n    <>\n      <Outlet />\n      <TanStackRouterDevtools />\n    </>\n  ),\n})\n\nconst indexRoute = createRoute({\n  getParentRoute: () => rootRoute,\n  path: '/',\n  component: App,\n})\n\nconst routeTree = rootRoute.addChildren([indexRoute])\n\nconst router = createRouter({\n  routeTree,\n  defaultPreload: 'intent',\n  scrollRestoration: true,\n})\n\ndeclare module '@tanstack/solid-router' {\n  interface Register {\n    router: typeof router\n  }\n}\n\nfunction MainApp() {\n  return (\n    <>\n      <RouterProvider router={router} />\n    </>\n  )\n}\n\nconst rootElement = document.getElementById('app')\nif (rootElement) {\n  render(() => <MainApp />, rootElement)\n}\n",
+    "/src/styles.css": "@import \"tailwindcss\";\n\nbody {\n  @apply m-0;\n  font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Roboto\", \"Oxygen\",\n    \"Ubuntu\", \"Cantarell\", \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\",\n    sans-serif;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}\n\ncode {\n  font-family: source-code-pro, Menlo, Monaco, Consolas, \"Courier New\",\n    monospace;\n}\n",
+    "README.md": "Welcome to your new TanStack app! \n\n# Getting Started\n\nTo run this application:\n\n```bash\nnpm install\nnpm run start\n```\n\n# Building For Production\n\nTo build this application for production:\n\n```bash\nnpm run build\n```\n\n## Styling\n\nThis project uses [Tailwind CSS](https://tailwindcss.com/) for styling.\n\n\n\n## Routing\nThis project uses [TanStack Router](https://tanstack.com/router). The initial setup is a code based router. Which means that the routes are defined in code (in the `./src/main.tsx` file). If you like you can also use a file based routing setup by following the [File Based Routing](https://tanstack.com/router/latest/docs/framework/solid/guide/file-based-routing) guide.\n\n### Adding A Route\n\nTo add a new route to your application just add another `createRoute` call to the `./src/main.tsx` file. The example below adds a new `/about`route to the root route.\n\n```tsx\nconst aboutRoute = createRoute({\n  getParentRoute: () => rootRoute,\n  path: \"/about\",\n  component: () => <h1>About</h1>,\n});\n```\n\nYou will also need to add the route to the `routeTree` in the `./src/main.tsx` file.\n\n```tsx\nconst routeTree = rootRoute.addChildren([indexRoute, aboutRoute]);\n```\n\nWith this set up you should be able to navigate to `/about` and see the about page.\n\nOf course you don't need to implement the About page in the `main.tsx` file. You can create that component in another file and import it into the `main.tsx` file, then use it in the `component` property of the `createRoute` call, like so:\n\n```tsx\nimport About from \"./components/About.tsx\";\n\nconst aboutRoute = createRoute({\n  getParentRoute: () => rootRoute,\n  path: \"/about\",\n  component: About,\n});\n```\n\nThat is how we have the `App` component set up with the home page.\n\nFor more information on the options you have when you are creating code based routes check out the [Code Based Routing](https://tanstack.com/router/latest/docs/framework/solid/guide/code-based-routing) documentation.\n\nNow that you have two routes you can use a `Link` component to navigate between them.\n\n### Adding Links\n\nTo use SPA (Single Page Application) navigation you will need to import the `Link` component from `@tanstack/solid-router`.\n\n```tsx\nimport { Link } from \"@tanstack/solid-router\";\n```\n\nThen anywhere in your JSX you can use it like so:\n\n```tsx\n<Link to=\"/about\">About</Link>\n```\n\nThis will create a link that will navigate to the `/about` route.\n\nMore information on the `Link` component can be found in the [Link documentation](https://tanstack.com/router/v1/docs/framework/solid/api/router/linkComponent).\n\n### Using A Layout\n\n\nLayouts can be used to wrap the contents of the routes in menus, headers, footers, etc.\n\nThere is already a layout in the `src/main.tsx` file:\n\n```tsx\nconst rootRoute = createRootRoute({\n  component: () => (\n    <>\n      <Outlet />\n      <TanStackRouterDevtools />\n    </>\n  ),\n});\n```\n\nYou can use the Soliid component specified in the `component` property of the `rootRoute` to wrap the contents of the routes. The `<Outlet />` component is used to render the current route within the body of the layout. For example you could add a header to the layout like so:\n\n```tsx\nimport { Link } from \"@tanstack/solid-router\";\n\nconst rootRoute = createRootRoute({\n  component: () => (\n    <>\n      <header>\n        <nav>\n          <Link to=\"/\">Home</Link>\n          <Link to=\"/about\">About</Link>\n        </nav>\n      </header>\n      <Outlet />\n      <TanStackRouterDevtools />\n    </>\n  ),\n});\n```\n\nThe `<TanStackRouterDevtools />` component is not required so you can remove it if you don't want it in your layout.\n\nMore information on layouts can be found in the [Layouts documentation](https://tanstack.com/router/latest/docs/framework/solid/guide/routing-concepts#layouts).\n\n## Data Fetching\n\nThere are multiple ways to fetch data in your application. You can use TanStack Query to fetch data from a server. But you can also use the `loader` functionality built into TanStack Router to load the data for a route before it's rendered.\n\nFor example:\n\n```tsx\nconst peopleRoute = createRoute({\n  getParentRoute: () => rootRoute,\n  path: \"/people\",\n  loader: async () => {\n    const response = await fetch(\"https://swapi.dev/api/people\");\n    return response.json() as Promise<{\n      results: {\n        name: string;\n      }[];\n    }>;\n  },\n  component: () => {\n    const data = peopleRoute.useLoaderData();\n    return (\n      <ul>\n        {data.results.map((person) => (\n          <li key={person.name}>{person.name}</li>\n        ))}\n      </ul>\n    );\n  },\n});\n```\n\nLoaders simplify your data fetching logic dramatically. Check out more information in the [Loader documentation](https://tanstack.com/router/latest/docs/framework/solid/guide/data-loading#loader-parameters).\n\n# Demo files\n\nFiles prefixed with `demo` can be safely deleted. They are there to provide a starting point for you to play around with the features you've installed.\n\n# Learn More\n\nYou can learn more about all of the offerings from TanStack in the [TanStack documentation](https://tanstack.com).\n",
+    "index.html": "<!DOCTYPE html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link rel=\"icon\" href=\"/favicon.ico\" />\n    <meta name=\"theme-color\" content=\"#000000\" />\n    <meta\n      name=\"description\"\n      content=\"Web site created using create-tsrouter-app\"\n    />\n    <link rel=\"apple-touch-icon\" href=\"/logo192.png\" />\n    <link rel=\"manifest\" href=\"/manifest.json\" />\n    <title>Create TanStack App - app-ts</title>\n  </head>\n  <body>\n    <div id=\"app\"></div>\n    <script type=\"module\" src=\"/src/main.tsx\"></script>\n  </body>\n</html>\n",
+    "package.json": "{\n  \"name\": \"TEST\",\n  \"private\": true,\n  \"type\": \"module\",\n  \"scripts\": {\n    \"start\": \"vite --port 3000\",\n    \"build\": \"vite build && tsc\",\n    \"serve\": \"vite preview\",\n    \"test\": \"vitest run\"\n  },\n  \"dependencies\": {\n    \"@tanstack/router-plugin\": \"^1.109.2\",\n    \"@tanstack/solid-router\": \"^1.110.0\",\n    \"@tanstack/solid-router-devtools\": \"^1.109.2\",\n    \"solid-js\": \"^1.9.4\"\n  },\n  \"devDependencies\": {\n    \"typescript\": \"^5.7.2\",\n    \"vite\": \"^6.0.11\",\n    \"vite-plugin-solid\": \"^2.11.2\"\n  }\n}",
+    "tsconfig.json": "{\n  \"include\": [\"**/*.ts\", \"**/*.tsx\"],\n  \"compilerOptions\": {\n    \"target\": \"ES2022\",\n    \"jsx\": \"preserve\",\n    \"jsxImportSource\": \"solid-js\",\n    \"module\": \"ESNext\",\n    \"lib\": [\"ES2022\", \"DOM\", \"DOM.Iterable\"],\n    \"types\": [\"vite/client\"],\n\n    /* Bundler mode */\n    \"moduleResolution\": \"bundler\",\n    \"allowImportingTsExtensions\": true,\n    \"verbatimModuleSyntax\": true,\n    \"noEmit\": true,\n\n    /* Linting */\n    \"skipLibCheck\": true,\n    \"strict\": true,\n    \"noUnusedLocals\": true,\n    \"noUnusedParameters\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"noUncheckedSideEffectImports\": true\n  }\n}\n",
+    "vite.config.js": "import { defineConfig } from 'vite'\n\nimport solidPlugin from 'vite-plugin-solid'\nimport tailwindcss from '@tailwindcss/vite'\n\n// https://vitejs.dev/config/\nexport default defineConfig({\n  plugins: [\n    solidPlugin(),\n    tailwindcss(),\n  ],\n})\n"
+  },
+  "commands": [
+    {
+      "command": "npm",
+      "args": [
+        "install"
+      ]
+    },
+    {
+      "command": "git",
+      "args": [
+        "init"
+      ]
+    }
+  ]
+}

package/tests/snapshots/cra/solid-fr-ts-npm.json

@@ -0,0 +1,32 @@
+{
+  "files": {
+    ".gitignore": "node_modules\n.DS_Store\ndist\ndist-ssr\n*.local\n",
+    "/.vscode/settings.json": "{\n  \"files.watcherExclude\": {\n    \"**/routeTree.gen.ts\": true\n  },\n  \"search.exclude\": {\n    \"**/routeTree.gen.ts\": true\n  },\n  \"files.readonlyInclude\": {\n    \"**/routeTree.gen.ts\": true\n  }\n}\n",
+    "/public/manifest.json": "{\n  \"short_name\": \"TanStack App\",\n  \"name\": \"Create TanStack App Sample\",\n  \"icons\": [\n    {\n      \"src\": \"favicon.ico\",\n      \"sizes\": \"64x64 32x32 24x24 16x16\",\n      \"type\": \"image/x-icon\"\n    },\n    {\n      \"src\": \"logo192.png\",\n      \"type\": \"image/png\",\n      \"sizes\": \"192x192\"\n    },\n    {\n      \"src\": \"logo512.png\",\n      \"type\": \"image/png\",\n      \"sizes\": \"512x512\"\n    }\n  ],\n  \"start_url\": \".\",\n  \"display\": \"standalone\",\n  \"theme_color\": \"#000000\",\n  \"background_color\": \"#ffffff\"\n}\n",
+    "/public/robots.txt": "# https://www.robotstxt.org/robotstxt.html\nUser-agent: *\nDisallow:\n",
+    "/src/App.css": "",
+    "/src/main.tsx": "import { RouterProvider, createRouter } from '@tanstack/solid-router'\nimport { render } from 'solid-js/web'\n\nimport { routeTree } from './routeTree.gen'\nimport './styles.css'\n\nconst router = createRouter({\n  routeTree,\n  defaultPreload: 'intent',\n  scrollRestoration: true,\n  defaultPreloadStaleTime: 0,\n})\n\ndeclare module '@tanstack/solid-router' {\n  interface Register {\n    router: typeof router\n  }\n}\n\nfunction App() {\n  return (\n    <>\n      <RouterProvider router={router} />\n    </>\n  )\n}\n\nconst rootElement = document.getElementById('app')\nif (rootElement) {\n  render(() => <App />, rootElement)\n}\n",
+    "/src/routes/__root.tsx": "import { Outlet, createRootRouteWithContext } from '@tanstack/solid-router'\nimport { TanStackRouterDevtools } from '@tanstack/solid-router-devtools'\n\nexport const Route = createRootRouteWithContext()({\n  component: RootComponent,\n})\n\nfunction RootComponent() {\n  return (\n    <>\n      <Outlet />\n      {/* <TanStackRouterDevtools /> */}\n    </>\n  )\n}\n",
+    "/src/routes/index.tsx": "import { createFileRoute } from '@tanstack/solid-router'\nimport logo from '../logo.svg'\n\nexport const Route = createFileRoute('/')({\n  component: App,\n})\n\nfunction App() {\n  return (\n    <main class=\"min-h-screen flex flex-col items-center justify-center bg-[#282c34] text-white text-[calc(10px+2vmin)] text-center\">\n      <img\n        src={logo}\n        class=\"h-[40vmin] pointer-events-none animate-[spin_20s_linear_infinite]\"\n        alt=\"logo\"\n      />\n      <p>\n        Edit <code>src/routes/index.tsx</code> and save to reload.\n      </p>\n      <a\n        class=\"text-[#61dafb] hover:underline\"\n        href=\"https://solidjs.com\"\n        target=\"_blank\"\n        rel=\"noopener noreferrer\"\n      >\n        Learn Solid\n      </a>\n      <a\n        class=\"text-[#61dafb] hover:underline\"\n        href=\"https://tanstack.com\"\n        target=\"_blank\"\n        rel=\"noopener noreferrer\"\n      >\n        Learn TanStack\n      </a>\n    </main>\n  )\n}\n",
+    "/src/styles.css": "@import \"tailwindcss\";\n\nbody {\n  @apply m-0;\n  font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Roboto\", \"Oxygen\",\n    \"Ubuntu\", \"Cantarell\", \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\",\n    sans-serif;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}\n\ncode {\n  font-family: source-code-pro, Menlo, Monaco, Consolas, \"Courier New\",\n    monospace;\n}\n",
+    "README.md": "Welcome to your new TanStack app! \n\n# Getting Started\n\nTo run this application:\n\n```bash\nnpm install\nnpm run start\n```\n\n# Building For Production\n\nTo build this application for production:\n\n```bash\nnpm run build\n```\n\n## Styling\n\nThis project uses [Tailwind CSS](https://tailwindcss.com/) for styling.\n\n\n\n## Routing\nThis project uses [TanStack Router](https://tanstack.com/router). The initial setup is a file based router. Which means that the routes are managed as fiels in `src/routes`.\n\n### Adding A Route\n\nTo add a new route to your application just add another a new file in the `./src/routes` directory.\n\nTanStack will automatically generate the content of the route file for you.\n\nNow that you have two routes you can use a `Link` component to navigate between them.\n\n### Adding Links\n\nTo use SPA (Single Page Application) navigation you will need to import the `Link` component from `@tanstack/solid-router`.\n\n```tsx\nimport { Link } from \"@tanstack/solid-router\";\n```\n\nThen anywhere in your JSX you can use it like so:\n\n```tsx\n<Link to=\"/about\">About</Link>\n```\n\nThis will create a link that will navigate to the `/about` route.\n\nMore information on the `Link` component can be found in the [Link documentation](https://tanstack.com/router/v1/docs/framework/solid/api/router/linkComponent).\n\n### Using A Layout\n\nIn the File Based Routing setup the layout is located in `src/routes/__root.tsx`. Anything you add to the root route will appear in all the routes. The route content will appear in the JSX where you use the `<Outlet />` component.\n\nHere is an example layout that includes a header:\n\n```tsx\nimport { Outlet, createRootRoute } from '@tanstack/solid-router'\nimport { TanStackRouterDevtools } from '@tanstack/solid-router-devtools'\n\nimport { Link } from \"@tanstack/solid-router\";\n\nexport const Route = createRootRoute({\n  component: () => (\n    <>\n      <header>\n        <nav>\n          <Link to=\"/\">Home</Link>\n          <Link to=\"/about\">About</Link>\n        </nav>\n      </header>\n      <Outlet />\n      <TanStackRouterDevtools />\n    </>\n  ),\n})\n```\n\nThe `<TanStackRouterDevtools />` component is not required so you can remove it if you don't want it in your layout.\n\nMore information on layouts can be found in the [Layouts documentation](https://tanstack.com/router/latest/docs/framework/solid/guide/routing-concepts#layouts).\n\n## Data Fetching\n\nThere are multiple ways to fetch data in your application. You can use TanStack Query to fetch data from a server. But you can also use the `loader` functionality built into TanStack Router to load the data for a route before it's rendered.\n\nFor example:\n\n```tsx\nconst peopleRoute = createRoute({\n  getParentRoute: () => rootRoute,\n  path: \"/people\",\n  loader: async () => {\n    const response = await fetch(\"https://swapi.dev/api/people\");\n    return response.json() as Promise<{\n      results: {\n        name: string;\n      }[];\n    }>;\n  },\n  component: () => {\n    const data = peopleRoute.useLoaderData();\n    return (\n      <ul>\n        {data.results.map((person) => (\n          <li key={person.name}>{person.name}</li>\n        ))}\n      </ul>\n    );\n  },\n});\n```\n\nLoaders simplify your data fetching logic dramatically. Check out more information in the [Loader documentation](https://tanstack.com/router/latest/docs/framework/solid/guide/data-loading#loader-parameters).\n\n# Demo files\n\nFiles prefixed with `demo` can be safely deleted. They are there to provide a starting point for you to play around with the features you've installed.\n\n# Learn More\n\nYou can learn more about all of the offerings from TanStack in the [TanStack documentation](https://tanstack.com).\n",
+    "index.html": "<!DOCTYPE html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link rel=\"icon\" href=\"/favicon.ico\" />\n    <meta name=\"theme-color\" content=\"#000000\" />\n    <meta\n      name=\"description\"\n      content=\"Web site created using create-tsrouter-app\"\n    />\n    <link rel=\"apple-touch-icon\" href=\"/logo192.png\" />\n    <link rel=\"manifest\" href=\"/manifest.json\" />\n    <title>Create TanStack App - app-ts</title>\n  </head>\n  <body>\n    <div id=\"app\"></div>\n    <script type=\"module\" src=\"/src/main.tsx\"></script>\n  </body>\n</html>\n",
+    "package.json": "{\n  \"name\": \"TEST\",\n  \"private\": true,\n  \"type\": \"module\",\n  \"scripts\": {\n    \"start\": \"vite --port 3000\",\n    \"build\": \"vite build && tsc\",\n    \"serve\": \"vite preview\",\n    \"test\": \"vitest run\"\n  },\n  \"dependencies\": {\n    \"@tanstack/router-plugin\": \"^1.109.2\",\n    \"@tanstack/solid-router\": \"^1.110.0\",\n    \"@tanstack/solid-router-devtools\": \"^1.109.2\",\n    \"solid-js\": \"^1.9.4\"\n  },\n  \"devDependencies\": {\n    \"typescript\": \"^5.7.2\",\n    \"vite\": \"^6.0.11\",\n    \"vite-plugin-solid\": \"^2.11.2\"\n  }\n}",
+    "tsconfig.json": "{\n  \"include\": [\"**/*.ts\", \"**/*.tsx\"],\n  \"compilerOptions\": {\n    \"target\": \"ES2022\",\n    \"jsx\": \"preserve\",\n    \"jsxImportSource\": \"solid-js\",\n    \"module\": \"ESNext\",\n    \"lib\": [\"ES2022\", \"DOM\", \"DOM.Iterable\"],\n    \"types\": [\"vite/client\"],\n\n    /* Bundler mode */\n    \"moduleResolution\": \"bundler\",\n    \"allowImportingTsExtensions\": true,\n    \"verbatimModuleSyntax\": true,\n    \"noEmit\": true,\n\n    /* Linting */\n    \"skipLibCheck\": true,\n    \"strict\": true,\n    \"noUnusedLocals\": true,\n    \"noUnusedParameters\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"noUncheckedSideEffectImports\": true\n  }\n}\n",
+    "vite.config.js": "import { defineConfig } from 'vite'\nimport { TanStackRouterVite } from '@tanstack/router-plugin/vite'\nimport solidPlugin from 'vite-plugin-solid'\nimport tailwindcss from '@tailwindcss/vite'\n\n// https://vitejs.dev/config/\nexport default defineConfig({\n  plugins: [\n    TanStackRouterVite({ target: 'solid', autoCodeSplitting: true }),\n    solidPlugin(),\n    tailwindcss(),\n  ],\n})\n"
+  },
+  "commands": [
+    {
+      "command": "npm",
+      "args": [
+        "install"
+      ]
+    },
+    {
+      "command": "git",
+      "args": [
+        "init"
+      ]
+    }
+  ]
+}

package/tests/snapshots/cra/solid-fr-ts-tw-npm.json

@@ -0,0 +1,31 @@
+{
+  "files": {
+    ".gitignore": "node_modules\n.DS_Store\ndist\ndist-ssr\n*.local\n",
+    "/.vscode/settings.json": "{\n  \"files.watcherExclude\": {\n    \"**/routeTree.gen.ts\": true\n  },\n  \"search.exclude\": {\n    \"**/routeTree.gen.ts\": true\n  },\n  \"files.readonlyInclude\": {\n    \"**/routeTree.gen.ts\": true\n  }\n}\n",
+    "/public/manifest.json": "{\n  \"short_name\": \"TanStack App\",\n  \"name\": \"Create TanStack App Sample\",\n  \"icons\": [\n    {\n      \"src\": \"favicon.ico\",\n      \"sizes\": \"64x64 32x32 24x24 16x16\",\n      \"type\": \"image/x-icon\"\n    },\n    {\n      \"src\": \"logo192.png\",\n      \"type\": \"image/png\",\n      \"sizes\": \"192x192\"\n    },\n    {\n      \"src\": \"logo512.png\",\n      \"type\": \"image/png\",\n      \"sizes\": \"512x512\"\n    }\n  ],\n  \"start_url\": \".\",\n  \"display\": \"standalone\",\n  \"theme_color\": \"#000000\",\n  \"background_color\": \"#ffffff\"\n}\n",
+    "/public/robots.txt": "# https://www.robotstxt.org/robotstxt.html\nUser-agent: *\nDisallow:\n",
+    "/src/main.tsx": "import { RouterProvider, createRouter } from '@tanstack/solid-router'\nimport { render } from 'solid-js/web'\n\nimport { routeTree } from './routeTree.gen'\nimport './styles.css'\n\nconst router = createRouter({\n  routeTree,\n  defaultPreload: 'intent',\n  scrollRestoration: true,\n  defaultPreloadStaleTime: 0,\n})\n\ndeclare module '@tanstack/solid-router' {\n  interface Register {\n    router: typeof router\n  }\n}\n\nfunction App() {\n  return (\n    <>\n      <RouterProvider router={router} />\n    </>\n  )\n}\n\nconst rootElement = document.getElementById('app')\nif (rootElement) {\n  render(() => <App />, rootElement)\n}\n",
+    "/src/routes/__root.tsx": "import { Outlet, createRootRouteWithContext } from '@tanstack/solid-router'\nimport { TanStackRouterDevtools } from '@tanstack/solid-router-devtools'\n\nexport const Route = createRootRouteWithContext()({\n  component: RootComponent,\n})\n\nfunction RootComponent() {\n  return (\n    <>\n      <Outlet />\n      {/* <TanStackRouterDevtools /> */}\n    </>\n  )\n}\n",
+    "/src/routes/index.tsx": "import { createFileRoute } from '@tanstack/solid-router'\nimport logo from '../logo.svg'\n\nexport const Route = createFileRoute('/')({\n  component: App,\n})\n\nfunction App() {\n  return (\n    <main class=\"min-h-screen flex flex-col items-center justify-center bg-[#282c34] text-white text-[calc(10px+2vmin)] text-center\">\n      <img\n        src={logo}\n        class=\"h-[40vmin] pointer-events-none animate-[spin_20s_linear_infinite]\"\n        alt=\"logo\"\n      />\n      <p>\n        Edit <code>src/routes/index.tsx</code> and save to reload.\n      </p>\n      <a\n        class=\"text-[#61dafb] hover:underline\"\n        href=\"https://solidjs.com\"\n        target=\"_blank\"\n        rel=\"noopener noreferrer\"\n      >\n        Learn Solid\n      </a>\n      <a\n        class=\"text-[#61dafb] hover:underline\"\n        href=\"https://tanstack.com\"\n        target=\"_blank\"\n        rel=\"noopener noreferrer\"\n      >\n        Learn TanStack\n      </a>\n    </main>\n  )\n}\n",
+    "/src/styles.css": "@import \"tailwindcss\";\n\nbody {\n  @apply m-0;\n  font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Roboto\", \"Oxygen\",\n    \"Ubuntu\", \"Cantarell\", \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\",\n    sans-serif;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}\n\ncode {\n  font-family: source-code-pro, Menlo, Monaco, Consolas, \"Courier New\",\n    monospace;\n}\n",
+    "README.md": "Welcome to your new TanStack app! \n\n# Getting Started\n\nTo run this application:\n\n```bash\nnpm install\nnpm run start\n```\n\n# Building For Production\n\nTo build this application for production:\n\n```bash\nnpm run build\n```\n\n## Styling\n\nThis project uses [Tailwind CSS](https://tailwindcss.com/) for styling.\n\n\n\n## Routing\nThis project uses [TanStack Router](https://tanstack.com/router). The initial setup is a file based router. Which means that the routes are managed as fiels in `src/routes`.\n\n### Adding A Route\n\nTo add a new route to your application just add another a new file in the `./src/routes` directory.\n\nTanStack will automatically generate the content of the route file for you.\n\nNow that you have two routes you can use a `Link` component to navigate between them.\n\n### Adding Links\n\nTo use SPA (Single Page Application) navigation you will need to import the `Link` component from `@tanstack/solid-router`.\n\n```tsx\nimport { Link } from \"@tanstack/solid-router\";\n```\n\nThen anywhere in your JSX you can use it like so:\n\n```tsx\n<Link to=\"/about\">About</Link>\n```\n\nThis will create a link that will navigate to the `/about` route.\n\nMore information on the `Link` component can be found in the [Link documentation](https://tanstack.com/router/v1/docs/framework/solid/api/router/linkComponent).\n\n### Using A Layout\n\nIn the File Based Routing setup the layout is located in `src/routes/__root.tsx`. Anything you add to the root route will appear in all the routes. The route content will appear in the JSX where you use the `<Outlet />` component.\n\nHere is an example layout that includes a header:\n\n```tsx\nimport { Outlet, createRootRoute } from '@tanstack/solid-router'\nimport { TanStackRouterDevtools } from '@tanstack/solid-router-devtools'\n\nimport { Link } from \"@tanstack/solid-router\";\n\nexport const Route = createRootRoute({\n  component: () => (\n    <>\n      <header>\n        <nav>\n          <Link to=\"/\">Home</Link>\n          <Link to=\"/about\">About</Link>\n        </nav>\n      </header>\n      <Outlet />\n      <TanStackRouterDevtools />\n    </>\n  ),\n})\n```\n\nThe `<TanStackRouterDevtools />` component is not required so you can remove it if you don't want it in your layout.\n\nMore information on layouts can be found in the [Layouts documentation](https://tanstack.com/router/latest/docs/framework/solid/guide/routing-concepts#layouts).\n\n## Data Fetching\n\nThere are multiple ways to fetch data in your application. You can use TanStack Query to fetch data from a server. But you can also use the `loader` functionality built into TanStack Router to load the data for a route before it's rendered.\n\nFor example:\n\n```tsx\nconst peopleRoute = createRoute({\n  getParentRoute: () => rootRoute,\n  path: \"/people\",\n  loader: async () => {\n    const response = await fetch(\"https://swapi.dev/api/people\");\n    return response.json() as Promise<{\n      results: {\n        name: string;\n      }[];\n    }>;\n  },\n  component: () => {\n    const data = peopleRoute.useLoaderData();\n    return (\n      <ul>\n        {data.results.map((person) => (\n          <li key={person.name}>{person.name}</li>\n        ))}\n      </ul>\n    );\n  },\n});\n```\n\nLoaders simplify your data fetching logic dramatically. Check out more information in the [Loader documentation](https://tanstack.com/router/latest/docs/framework/solid/guide/data-loading#loader-parameters).\n\n# Demo files\n\nFiles prefixed with `demo` can be safely deleted. They are there to provide a starting point for you to play around with the features you've installed.\n\n# Learn More\n\nYou can learn more about all of the offerings from TanStack in the [TanStack documentation](https://tanstack.com).\n",
+    "index.html": "<!DOCTYPE html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link rel=\"icon\" href=\"/favicon.ico\" />\n    <meta name=\"theme-color\" content=\"#000000\" />\n    <meta\n      name=\"description\"\n      content=\"Web site created using create-tsrouter-app\"\n    />\n    <link rel=\"apple-touch-icon\" href=\"/logo192.png\" />\n    <link rel=\"manifest\" href=\"/manifest.json\" />\n    <title>Create TanStack App - app-ts</title>\n  </head>\n  <body>\n    <div id=\"app\"></div>\n    <script type=\"module\" src=\"/src/main.tsx\"></script>\n  </body>\n</html>\n",
+    "package.json": "{\n  \"name\": \"TEST\",\n  \"private\": true,\n  \"type\": \"module\",\n  \"scripts\": {\n    \"start\": \"vite --port 3000\",\n    \"build\": \"vite build && tsc\",\n    \"serve\": \"vite preview\",\n    \"test\": \"vitest run\"\n  },\n  \"dependencies\": {\n    \"@tailwindcss/vite\": \"^4.0.6\",\n    \"@tanstack/router-plugin\": \"^1.109.2\",\n    \"@tanstack/solid-router\": \"^1.110.0\",\n    \"@tanstack/solid-router-devtools\": \"^1.109.2\",\n    \"solid-js\": \"^1.9.4\",\n    \"tailwindcss\": \"^4.0.6\"\n  },\n  \"devDependencies\": {\n    \"typescript\": \"^5.7.2\",\n    \"vite\": \"^6.0.11\",\n    \"vite-plugin-solid\": \"^2.11.2\"\n  }\n}",
+    "tsconfig.json": "{\n  \"include\": [\"**/*.ts\", \"**/*.tsx\"],\n  \"compilerOptions\": {\n    \"target\": \"ES2022\",\n    \"jsx\": \"preserve\",\n    \"jsxImportSource\": \"solid-js\",\n    \"module\": \"ESNext\",\n    \"lib\": [\"ES2022\", \"DOM\", \"DOM.Iterable\"],\n    \"types\": [\"vite/client\"],\n\n    /* Bundler mode */\n    \"moduleResolution\": \"bundler\",\n    \"allowImportingTsExtensions\": true,\n    \"verbatimModuleSyntax\": true,\n    \"noEmit\": true,\n\n    /* Linting */\n    \"skipLibCheck\": true,\n    \"strict\": true,\n    \"noUnusedLocals\": true,\n    \"noUnusedParameters\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"noUncheckedSideEffectImports\": true\n  }\n}\n",
+    "vite.config.js": "import { defineConfig } from 'vite'\nimport { TanStackRouterVite } from '@tanstack/router-plugin/vite'\nimport solidPlugin from 'vite-plugin-solid'\nimport tailwindcss from '@tailwindcss/vite'\n\n// https://vitejs.dev/config/\nexport default defineConfig({\n  plugins: [\n    TanStackRouterVite({ target: 'solid', autoCodeSplitting: true }),\n    solidPlugin(),\n    tailwindcss(),\n  ],\n})\n"
+  },
+  "commands": [
+    {
+      "command": "npm",
+      "args": [
+        "install"
+      ]
+    },
+    {
+      "command": "git",
+      "args": [
+        "init"
+      ]
+    }
+  ]
+}