@tanstack/create 0.49.1

package/src/frameworks/solid/hosts/netlify/package.json

@@ -0,0 +1,5 @@
+{
+  "devDependencies": {
+    "@netlify/vite-plugin-tanstack-start": "^1.2.3"
+  }
+}

package/src/frameworks/solid/hosts/netlify/small-logo.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 256 226" xmlns="http://www.w3.org/2000/svg" width="256" height="226" preserveAspectRatio="xMidYMid"><path fill="#05BDBA" d="M69.181 188.087h-2.417l-12.065-12.065v-2.417l18.444-18.444h12.778l1.704 1.704v12.778zM54.699 51.628v-2.417l12.065-12.065h2.417L87.625 55.59v12.778l-1.704 1.704H73.143z"/><path fill="#014847" d="M160.906 149.198h-17.552l-1.466-1.466v-41.089c0-7.31-2.873-12.976-11.689-13.174-4.537-.119-9.727 0-15.274.218l-.833.852v53.173l-1.466 1.466H95.074l-1.466-1.466v-70.19l1.466-1.467h39.503c15.354 0 27.795 12.441 27.795 27.795v43.882l-1.466 1.466Z"/><path fill="#05BDBA" d="M71.677 122.889H1.466L0 121.423V103.83l1.466-1.466h70.211l1.466 1.466v17.593zM254.534 122.889h-70.211l-1.466-1.466V103.83l1.466-1.466h70.211L256 103.83v17.593zM117.876 54.124V1.466L119.342 0h17.593l1.466 1.466v52.658l-1.466 1.466h-17.593zM117.876 223.787v-52.658l1.466-1.466h17.593l1.466 1.466v52.658l-1.466 1.465h-17.593z"/></svg>

package/src/frameworks/solid/hosts/nitro/info.json

@@ -0,0 +1,20 @@
+{
+  "name": "Nitro (agnostic)",
+  "description": "Nitro deployment setup",
+  "link": "https://v3.nitro.build/",
+  "phase": "add-on",
+  "modes": ["file-router", "code-router"],
+  "type": "deployment",
+  "category": "deploy",
+  "exclusive": ["deploy"],
+  "color": "#ECDC5A",
+  "tailwind": false,
+  "integrations": [
+    {
+      "type": "vite-plugin",
+      "import": "import { nitro } from 'nitro/vite'",
+      "code": "nitro()"
+    }
+  ],
+  "default": true
+}

package/src/frameworks/solid/hosts/nitro/package.json

@@ -0,0 +1,5 @@
+{
+  "dependencies": {
+    "nitro": "npm:nitro-nightly@latest"
+  }
+}

package/src/frameworks/solid/hosts/nitro/small-logo.svg

@@ -0,0 +1,42 @@
+<!-- nitro logo -->
+<svg width="40" height="40" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <g clip-path="url(#clip0_115_108)">
+    <path fill-rule="evenodd" clip-rule="evenodd"
+      d="M35.2166 7.02016C28.0478 -1.38317 15.4241 -2.38397 7.02077 4.78481C-1.38256 11.9536 -2.38336 24.5773 4.78542 32.9806C11.9542 41.3839 24.5779 42.3847 32.9812 35.216C41.3846 28.0472 42.3854 15.4235 35.2166 7.02016ZM25.2525 17.5175C26.0233 17.5175 26.5155 18.3527 26.1287 19.0194L26.0175 19.2111L18.4696 31.6294C18.3293 31.8602 18.0788 32.001 17.8088 32.001H17.0883C16.5946 32.001 16.2336 31.5349 16.3573 31.0569L18.4054 23.1384C18.5691 22.5053 18.0912 21.888 17.4373 21.888H14.2914C13.6375 21.888 13.1596 21.2708 13.3232 20.6377L16.4137 8.68289C16.5261 8.28056 16.8904 7.99734 17.3081 8.00208C17.3587 8.00266 17.4046 8.0035 17.4427 8.0047L20.6109 8.00465C21.217 8.00436 21.684 8.53896 21.6023 9.13949L21.5828 9.28246L20.3746 16.349C20.2702 16.9598 20.7406 17.5175 21.3603 17.5175H25.2525Z"
+      fill="url(#paint0_diamond_115_108)" />
+    <mask id="mask0_115_108" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0"
+      width="40" height="41">
+      <circle cx="20" cy="20.001" r="20" fill="url(#paint1_diamond_115_108)" />
+    </mask>
+    <g mask="url(#mask0_115_108)">
+      <g filter="url(#filter0_f_115_108)">
+        <path
+          d="M1.11145 13.4267C0.0703174 16.4179 -0.245523 19.6136 0.189923 22.7507C0.62537 25.8879 1.79965 28.8768 3.61611 31.4713C5.43256 34.0659 7.83925 36.192 10.6381 37.6746C13.4369 39.1572 16.5478 39.9538 19.7147 39.999C22.8816 40.0442 26.0139 39.3366 28.8539 37.9345C31.6939 36.5324 34.1602 34.4758 36.05 31.9341C37.9397 29.3924 39.1988 26.4383 39.7236 23.3148C40.2483 20.1914 40.0238 16.9879 39.0684 13.9682L33.2532 15.808C33.9172 17.9068 34.0732 20.1333 33.7085 22.3042C33.3438 24.4751 32.4687 26.5283 31.1552 28.2949C29.8418 30.0615 28.1276 31.4908 26.1537 32.4653C24.1799 33.4399 22.0028 33.9316 19.8017 33.9002C17.6006 33.8688 15.4384 33.3151 13.4932 32.2847C11.5479 31.2543 9.87518 29.7766 8.61269 27.9733C7.35019 26.1699 6.53403 24.0926 6.23138 21.9122C5.92873 19.7317 6.14825 17.5106 6.87187 15.4316L1.11145 13.4267Z"
+          fill="white" />
+      </g>
+    </g>
+  </g>
+  <defs>
+    <filter id="filter0_f_115_108" x="-10" y="3.42667" width="60" height="46.5744"
+      filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+      <feFlood flood-opacity="0" result="BackgroundImageFix" />
+      <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
+      <feGaussianBlur stdDeviation="5" result="effect1_foregroundBlur_115_108" />
+    </filter>
+    <radialGradient id="paint0_diamond_115_108" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse"
+      gradientTransform="translate(4.00069 20.0004) scale(39.0007 397.71)">
+      <stop stop-color="#31B2F3" />
+      <stop offset="0.473958" stop-color="#F27CEC" />
+      <stop offset="1" stop-color="#FD6641" />
+    </radialGradient>
+    <radialGradient id="paint1_diamond_115_108" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse"
+      gradientTransform="translate(4 20.0011) scale(39 397.703)">
+      <stop stop-color="#F27CEC" />
+      <stop offset="0.484375" stop-color="#31B2F3" />
+      <stop offset="1" stop-color="#7D7573" />
+    </radialGradient>
+    <clipPath id="clip0_115_108">
+      <rect width="146" height="40.001" fill="white" />
+    </clipPath>
+  </defs>
+</svg>

package/src/frameworks/solid/hosts/railway/assets/nixpacks.toml

@@ -0,0 +1,8 @@
+[phases.setup]
+nixPkgs = ["nodejs_22"]
+
+[phases.build]
+cmds = ["npm install", "npm run build"]
+
+[start]
+cmd = "npm run start"

package/src/frameworks/solid/hosts/railway/info.json

@@ -0,0 +1,20 @@
+{
+  "name": "Railway",
+  "description": "Railway deployment setup",
+  "link": "https://railway.com/",
+  "phase": "add-on",
+  "modes": ["file-router", "code-router"],
+  "type": "deployment",
+  "category": "deploy",
+  "exclusive": ["deploy"],
+  "color": "#9B4DCA",
+  "priority": 160,
+  "tailwind": false,
+  "integrations": [
+    {
+      "type": "vite-plugin",
+      "import": "import { nitro } from 'nitro/vite'",
+      "code": "nitro()"
+    }
+  ]
+}

package/src/frameworks/solid/hosts/railway/package.json

@@ -0,0 +1,8 @@
+{
+  "scripts": {
+    "start": "node .output/server/index.mjs"
+  },
+  "dependencies": {
+    "nitro": "npm:nitro-nightly@latest"
+  }
+}

package/src/frameworks/solid/index.ts

@@ -0,0 +1,53 @@
+import { dirname, join } from 'node:path'
+import { fileURLToPath } from 'node:url'
+
+import {
+  registerFramework,
+  scanAddOnDirectories,
+  scanProjectDirectory,
+} from '../../frameworks.js'
+
+import type { FrameworkDefinition } from '../../types.js'
+
+export function createFrameworkDefinition(): FrameworkDefinition {
+  const baseDirectory = dirname(fileURLToPath(import.meta.url))
+
+  const addOns = scanAddOnDirectories([
+    join(baseDirectory, 'add-ons'),
+    join(baseDirectory, 'toolchains'),
+    join(baseDirectory, 'examples'),
+    join(baseDirectory, 'hosts'),
+  ])
+
+  const { files, basePackageJSON, optionalPackages } = scanProjectDirectory(
+    join(baseDirectory, 'project'),
+    join(baseDirectory, 'project/base'),
+  )
+
+  return {
+    id: 'solid',
+    name: 'Solid',
+    description: 'Solid templates for Tanstack Router Applications',
+    version: '0.1.0',
+    base: files,
+    addOns,
+    basePackageJSON,
+    optionalPackages,
+    supportedModes: {
+      'code-router': {
+        displayName: 'Code Router',
+        description: 'TanStack Router using code to define the routes',
+        forceTypescript: true,
+      },
+      'file-router': {
+        displayName: 'File Router',
+        description: 'TanStack Router using files to define the routes',
+        forceTypescript: true,
+      },
+    },
+  }
+}
+
+export function register() {
+  registerFramework(createFrameworkDefinition())
+}

package/src/frameworks/solid/project/base/README.md.ejs

@@ -0,0 +1,215 @@
+Welcome to your new TanStack app! 
+
+# Getting Started
+
+To run this application:
+
+```bash
+<%= packageManager %> install
+<%= getPackageManagerRunScript('dev') %>
+```
+
+# Building For Production
+
+To build this application for production:
+
+```bash
+<%= getPackageManagerRunScript('build') %>
+```
+
+## Styling
+
+This project uses [Tailwind CSS](https://tailwindcss.com/) for styling.
+
+<% for(const addon of addOns.filter(addon => addon.readme)) { %>
+<%- addon.readme %>
+<% } %>
+
+## Routing
+<% if (fileRouter) { %>This project uses [TanStack Router](https://tanstack.com/router). The initial setup is a file based router. Which means that the routes are managed as files in `src/routes`.<% } else { %>This 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.<% } %>
+
+### Adding A Route
+<% if (fileRouter) { %>
+To add a new route to your application just add another a new file in the `./src/routes` directory.
+
+TanStack will automatically generate the content of the route file for you.
+<% } else { %>
+To 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.
+
+```tsx
+const aboutRoute = createRoute({
+  getParentRoute: () => rootRoute,
+  path: "/about",
+  component: () => <h1>About</h1>,
+});
+```
+
+You will also need to add the route to the `routeTree` in the `./src/main.<%= jsx %>` file.
+
+```tsx
+const routeTree = rootRoute.addChildren([indexRoute, aboutRoute]);
+```
+
+With this set up you should be able to navigate to `/about` and see the about page.
+
+Of 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:
+
+```tsx
+import About from "./components/About.<%= jsx %>";
+
+const aboutRoute = createRoute({
+  getParentRoute: () => rootRoute,
+  path: "/about",
+  component: About,
+});
+```
+
+That is how we have the `App` component set up with the home page.
+
+For 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.
+<% } %>
+Now that you have two routes you can use a `Link` component to navigate between them.
+
+### Adding Links
+
+To use SPA (Single Page Application) navigation you will need to import the `Link` component from `@tanstack/solid-router`.
+
+```tsx
+import { Link } from "@tanstack/solid-router";
+```
+
+Then anywhere in your JSX you can use it like so:
+
+```tsx
+<Link to="/about">About</Link>
+```
+
+This will create a link that will navigate to the `/about` route.
+
+More information on the `Link` component can be found in the [Link documentation](https://tanstack.com/router/v1/docs/framework/solid/api/router/linkComponent).
+
+### Using A Layout
+
+<% if (codeRouter) { %>
+Layouts can be used to wrap the contents of the routes in menus, headers, footers, etc.
+
+There is already a layout in the `src/main.<%= jsx %>` file:
+
+```tsx
+const rootRoute = createRootRoute({
+  component: () => (
+    <>
+      <Outlet />
+      <TanStackRouterDevtools />
+    </>
+  ),
+});
+```
+
+You 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:
+
+```tsx
+import { Link } from "@tanstack/solid-router";
+
+const rootRoute = createRootRoute({
+  component: () => (
+    <>
+      <header>
+        <nav>
+          <Link to="/">Home</Link>
+          <Link to="/about">About</Link>
+        </nav>
+      </header>
+      <Outlet />
+      <TanStackRouterDevtools />
+    </>
+  ),
+});
+```
+<% } else { %>In 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.
+
+Here is an example layout that includes a header:
+
+```tsx
+import { Outlet, createRootRoute } from '@tanstack/solid-router'
+import { TanStackRouterDevtools } from '@tanstack/solid-router-devtools'
+
+import { Link } from "@tanstack/solid-router";
+
+export const Route = createRootRoute({
+  component: () => (
+    <>
+      <header>
+        <nav>
+          <Link to="/">Home</Link>
+          <Link to="/about">About</Link>
+        </nav>
+      </header>
+      <Outlet />
+      <TanStackRouterDevtools />
+    </>
+  ),
+})
+```
+<% } %>
+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](https://tanstack.com/router/latest/docs/framework/solid/guide/routing-concepts#layouts).
+
+## Data Fetching
+
+There 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.
+
+For example:
+
+```tsx
+const peopleRoute = createRoute({
+  getParentRoute: () => rootRoute,
+  path: "/people",
+  loader: async () => {
+    const response = await fetch("https://swapi.dev/api/people");<% if (typescript) { %>
+    return response.json() as Promise<{
+      results: {
+        name: string;
+      }[];
+    }>;
+<% } else { %>
+    return response.json();
+<% } %>  },
+  component: () => {
+    const data = peopleRoute.useLoaderData();
+    return (
+      <ul>
+        {data.results.map((person) => (
+          <li key={person.name}>{person.name}</li>
+        ))}
+      </ul>
+    );
+  },
+});
+```
+
+Loaders 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).
+
+# Demo files
+
+Files 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.
+
+<% if (addOnEnabled.biome || addOnEnabled.eslint) { %>
+## Linting & Formatting
+<% if (addOnEnabled.biome) { %>
+This project uses [Biome](https://biomejs.dev/) for linting and formatting. The following scripts are available:
+<% } %>
+<% if (addOnEnabled.eslint) { %>
+This project uses [eslint](https://eslint.org/) and [prettier](https://prettier.io/) for linting and formatting. Eslint is configured using [tanstack/eslint-config](https://tanstack.com/config/latest/docs/eslint). The following scripts are available:
+<% } %>
+```bash
+<%= getPackageManagerRunScript('lint') %>
+<%= getPackageManagerRunScript('format') %>
+<%= getPackageManagerRunScript('check') %>
+```
+<% } %>
+
+# Learn More
+
+You can learn more about all of the offerings from TanStack in the [TanStack documentation](https://tanstack.com).

package/src/frameworks/solid/project/base/_dot_cursorrules.append

@@ -0,0 +1,35 @@
+// Solid.js with Tailwind CSS .cursorrules
+
+// Prefer functional components
+
+const preferFunctionalComponents = true;
+
+// Solid.js and Tailwind CSS best practices
+
+const solidjsTailwindBestPractices = [
+"Use createSignal() for reactive state",
+"Implement Tailwind CSS classes for styling",
+"Utilize TypeScript's strict mode",
+"Utilize @apply directive in CSS files for reusable styles",
+"Implement responsive design using Tailwind's responsive classes",
+"Use Tailwind's CSS in /src/styles.css for global styles",
+"Implement dark mode using Tailwind's dark variant",
+];
+
+// Additional instructions
+
+const additionalInstructions = `
+
+1. Use .tsx extension for files with JSX
+2. Implement strict TypeScript checks
+3. Implement proper Tailwind CSS purging for production builds
+4. Utilize TanStack Router for routing when applicable
+5. Use type-safe context with createContext
+6. Implement proper typing for event handlers
+7. Follow TypeScript best practices and naming conventions
+8. Use type assertions sparingly and only when necessary
+9. Use Tailwind's @layer directive for custom styles
+10. Implement utility-first CSS approach
+11. Follow both Solid.js and Tailwind naming conventions
+12. Use JIT (Just-In-Time) mode for faster development
+    `;

package/src/frameworks/solid/project/base/_dot_gitignore

@@ -0,0 +1,9 @@
+node_modules
+.DS_Store
+dist
+dist-ssr
+*.local
+.env
+.nitro
+.tanstack
+.wrangler

package/src/frameworks/solid/project/base/_dot_vscode/settings.json.ejs

@@ -0,0 +1,35 @@
+{
+  "files.watcherExclude": {
+    "**/routeTree.gen.ts": true
+  },
+  "search.exclude": {
+    "**/routeTree.gen.ts": true
+  },
+  "files.readonlyInclude": {
+    "**/routeTree.gen.ts": true
+  }<% if (addOnEnabled.biome) { %>,
+  "[javascript]": {
+    "editor.defaultFormatter": "biomejs.biome"
+  },
+  "[javascriptreact]": {
+    "editor.defaultFormatter": "biomejs.biome"
+  },
+  "[typescript]": {
+    "editor.defaultFormatter": "biomejs.biome"
+  },
+  "[typescriptreact]": {
+    "editor.defaultFormatter": "biomejs.biome"
+  },
+  "[json]": {
+    "editor.defaultFormatter": "biomejs.biome"
+  },
+  "[jsonc]": {
+    "editor.defaultFormatter": "biomejs.biome"
+  },
+  "[css]": {
+    "editor.defaultFormatter": "biomejs.biome"
+  },
+  "editor.codeActionsOnSave": {
+    "source.organizeImports.biome": "explicit"
+  }<% } %>
+}

package/src/frameworks/solid/project/base/index.html.ejs

@@ -0,0 +1,20 @@
+<% if (addOnEnabled['start']) { ignoreFile() } %><!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="icon" href="/favicon.ico" />
+    <meta name="theme-color" content="#000000" />
+    <meta
+      name="description"
+      content="Web site created using create-tsrouter-app"
+    />
+    <link rel="apple-touch-icon" href="/logo192.png" />
+    <link rel="manifest" href="/manifest.json" />
+    <title>Create TanStack App - app-ts</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

package/src/frameworks/solid/project/base/package.json

@@ -0,0 +1,23 @@
+{
+  "name": "app-ts",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite --port 3000",
+    "build": "vite build && tsc",
+    "preview": "vite preview",
+    "test": "vitest run"
+  },
+  "dependencies": {
+    "@tanstack/solid-router": "^1.133.20",
+    "@tanstack/solid-router-devtools": "^1.133.20",
+    "@tanstack/solid-start": "^1.133.20",
+    "solid-js": "^1.9.9"
+  },
+  "devDependencies": {
+    "@tanstack/devtools-vite": "^0.3.11",
+    "vite-plugin-solid": "^2.11.10",
+    "typescript": "^5.7.2",
+    "vite": "^7.1.7"
+  }
+}

package/src/frameworks/solid/project/base/public/manifest.json

@@ -0,0 +1,25 @@
+{
+  "short_name": "TanStack App",
+  "name": "Create TanStack App Sample",
+  "icons": [
+    {
+      "src": "favicon.ico",
+      "sizes": "64x64 32x32 24x24 16x16",
+      "type": "image/x-icon"
+    },
+    {
+      "src": "logo192.png",
+      "type": "image/png",
+      "sizes": "192x192"
+    },
+    {
+      "src": "logo512.png",
+      "type": "image/png",
+      "sizes": "512x512"
+    }
+  ],
+  "start_url": ".",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}

package/src/frameworks/solid/project/base/public/robots.txt

@@ -0,0 +1,3 @@
+# https://www.robotstxt.org/robotstxt.html
+User-agent: *
+Disallow:

package/src/frameworks/solid/project/base/src/App.css.ejs

@@ -0,0 +1,38 @@
+<% if (tailwind) { ignoreFile() } %>.App {
+  text-align: center;
+}
+
+.App-logo {
+  height: 40vmin;
+  pointer-events: none;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .App-logo {
+    animation: App-logo-spin infinite 20s linear;
+  }
+}
+
+.App-header {
+  background-color: #282c34;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  font-size: calc(10px + 2vmin);
+  color: white;
+}
+
+.App-link {
+  color: #61dafb;
+}
+
+@keyframes App-logo-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}

package/src/frameworks/solid/project/base/src/App.tsx.ejs

@@ -0,0 +1,34 @@
+<% if (fileRouter) { ignoreFile() } %>import logo from "./logo.svg";
+
+function App() {
+  return (
+    <main class="min-h-screen flex flex-col items-center justify-center bg-[#282c34] text-white text-[calc(10px+2vmin)] text-center">
+      <img
+        src={logo}
+        class="h-[40vmin] pointer-events-none animate-[spin_20s_linear_infinite]"
+        alt="logo"
+      />
+      <p>
+        Edit <code>src/App.<%= jsx %></code> and save to reload.
+      </p>
+      <a
+        class="text-[#61dafb] hover:underline"
+        href="https://solidjs.com"
+        target="_blank"
+        rel="noopener noreferrer"
+      >
+        Learn Solid
+      </a>
+      <a
+        class="text-[#61dafb] hover:underline"
+        href="https://tanstack.com"
+        target="_blank"
+        rel="noopener noreferrer"
+      >
+        Learn TanStack
+      </a>
+    </main>
+  );
+}
+
+export default App;