feat: update solid start to rc (#173)

Co-authored-by: Jack Herrington <[email protected]>

Author: brenelz

frameworks/solid/add-ons/start/assets/src/router.tsx.ejs

@@ -6,15 +6,15 @@ import { routeTree } from './routeTree.gen'
 import './styles.css'
 
 // Create a new router instance
-export const createRouter = () => {
+export const getRouter = () => {
   const router = createTanstackRouter({
     routeTree,
     scrollRestoration: true,
   })
   return router
 }
 
-const router = createRouter()
+const router = getRouter()
 
 // Register the router instance for type safety
 declare module '@tanstack/solid-router' {

frameworks/solid/add-ons/start/assets/src/routes/demo.start.server-funcs.tsx

@@ -17,7 +17,7 @@ const getCount = createServerFn({
 })
 
 const updateCount = createServerFn({ method: 'POST' })
-  .validator((d: number) => d)
+  .inputValidator((d: number) => d)
   .handler(async ({ data }) => {
     const count = await readCount()
     await fs.promises.writeFile(filePath, `${count + data}`)

frameworks/solid/add-ons/start/assets/vite.config.ts.ejs

@@ -3,6 +3,7 @@ import viteTsConfigPaths from 'vite-tsconfig-paths'<% if (tailwind) { %>
 import tailwindcss from "@tailwindcss/vite"
 <% } %>
 import { tanstackStart } from "@tanstack/solid-start/plugin/vite";
+import solidPlugin from 'vite-plugin-solid'
 
 export default defineConfig({
   plugins: [
@@ -12,5 +13,6 @@ export default defineConfig({
     }),
     <% if (tailwind) { %>tailwindcss(),<% } %>
     tanstackStart(),
+    solidPlugin({ ssr: true }),
   ],
 })

frameworks/solid/add-ons/start/package.json

@@ -5,7 +5,7 @@
     "start": "node .output/server/index.mjs"
   },
   "dependencies": {
-    "@tanstack/solid-start": "1.121.3",
+    "@tanstack/solid-start": "1.132.7",
     "vite": "^7.1.7",
     "vite-tsconfig-paths": "^5.1.4"
   }

frameworks/solid/project/base/package.json

@@ -10,9 +10,9 @@
     "test": "vitest run"
   },
   "dependencies": {
-    "@tanstack/solid-router": "^1.121.3",
-    "@tanstack/solid-router-devtools": "^1.121.3",
-    "@tanstack/router-plugin": "^1.121.3",
+    "@tanstack/solid-router": "^1.132.7",
+    "@tanstack/solid-router-devtools": "^1.132.7",
+    "@tanstack/router-plugin": "^1.132.7",
     "solid-js": "^1.9.4"
   },
   "devDependencies": {

frameworks/solid/tests/snapshots/solid/solid-cr-ts-start-npm.json

@@ -7,15 +7,15 @@
     "/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/components/Header.tsx": "import { Link } from '@tanstack/solid-router'\n\nexport default function Header() {\n  return (\n    <header class=\"p-2 flex gap-2 bg-white text-black justify-between\">\n      <nav class=\"flex flex-row\">\n        <div class=\"px-2 font-bold\">\n          <Link to=\"/\">Home</Link>\n        </div>\n\n        <div class=\"px-2 font-bold\">\n          <Link to=\"/demo/start/server-funcs\">Start - Server Functions</Link>\n        </div>\n      </nav>\n\n      <div></div>\n    </header>\n  )\n}\n",
-    "/src/router.tsx": "import { createRouter as createTanstackRouter } from '@tanstack/solid-router'\n\n// Import the generated route tree\nimport { routeTree } from './routeTree.gen'\n\nimport './styles.css'\n\n// Create a new router instance\nexport const createRouter = () => {\n  const router = createTanstackRouter({\n    routeTree,\n    scrollRestoration: true,\n  })\n  return router\n}\n\nconst router = createRouter()\n\n// Register the router instance for type safety\ndeclare module '@tanstack/solid-router' {\n  interface Register {\n    router: typeof router\n  }\n}\n",
+    "/src/router.tsx": "import { createRouter as createTanstackRouter } from '@tanstack/solid-router'\n\n// Import the generated route tree\nimport { routeTree } from './routeTree.gen'\n\nimport './styles.css'\n\n// Create a new router instance\nexport const getRouter = () => {\n  const router = createTanstackRouter({\n    routeTree,\n    scrollRestoration: true,\n  })\n  return router\n}\n\nconst router = getRouter()\n\n// Register the router instance for type safety\ndeclare module '@tanstack/solid-router' {\n  interface Register {\n    router: typeof router\n  }\n}\n",
     "/src/routes/__root.tsx": "import { Outlet, createRootRouteWithContext } from '@tanstack/solid-router'\nimport { TanStackRouterDevtools } from '@tanstack/solid-router-devtools'\n\nimport Header from '../components/Header'\n\nexport const Route = createRootRouteWithContext()({\n  component: RootComponent,\n})\n\nfunction RootComponent() {\n  return (\n    <>\n      <Header />\n\n      <Outlet />\n      {/* <TanStackRouterDevtools /> */}\n    </>\n  )\n}\n",
-    "/src/routes/demo.start.server-funcs.tsx": "import * as fs from 'fs'\nimport { createFileRoute, useRouter } from '@tanstack/solid-router'\nimport { createServerFn } from '@tanstack/solid-start'\n\nconst filePath = 'count.txt'\n\nasync function readCount() {\n  return parseInt(\n    await fs.promises.readFile(filePath, 'utf-8').catch(() => '0'),\n  )\n}\n\nconst getCount = createServerFn({\n  method: 'GET',\n}).handler(() => {\n  return readCount()\n})\n\nconst updateCount = createServerFn({ method: 'POST' })\n  .validator((d: number) => d)\n  .handler(async ({ data }) => {\n    const count = await readCount()\n    await fs.promises.writeFile(filePath, `${count + data}`)\n  })\n\nexport const Route = createFileRoute('/demo/start/server-funcs')({\n  component: Home,\n  loader: async () => await getCount(),\n})\n\nfunction Home() {\n  const router = useRouter()\n  const state = Route.useLoaderData()\n\n  return (\n    <div class=\"p-4\">\n      <button\n        onClick={() => {\n          updateCount({ data: 1 }).then(() => {\n            router.invalidate()\n          })\n        }}\n        class=\"bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded\"\n      >\n        Add 1 to {state}?\n      </button>\n    </div>\n  )\n}\n",
+    "/src/routes/demo.start.server-funcs.tsx": "import * as fs from 'fs'\nimport { createFileRoute, useRouter } from '@tanstack/solid-router'\nimport { createServerFn } from '@tanstack/solid-start'\n\nconst filePath = 'count.txt'\n\nasync function readCount() {\n  return parseInt(\n    await fs.promises.readFile(filePath, 'utf-8').catch(() => '0'),\n  )\n}\n\nconst getCount = createServerFn({\n  method: 'GET',\n}).handler(() => {\n  return readCount()\n})\n\nconst updateCount = createServerFn({ method: 'POST' })\n  .inputValidator((d: number) => d)\n  .handler(async ({ data }) => {\n    const count = await readCount()\n    await fs.promises.writeFile(filePath, `${count + data}`)\n  })\n\nexport const Route = createFileRoute('/demo/start/server-funcs')({\n  component: Home,\n  loader: async () => await getCount(),\n})\n\nfunction Home() {\n  const router = useRouter()\n  const state = Route.useLoaderData()\n\n  return (\n    <div class=\"p-4\">\n      <button\n        onClick={() => {\n          updateCount({ data: 1 }).then(() => {\n            router.invalidate()\n          })\n        }}\n        class=\"bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded\"\n      >\n        Add 1 to {state}?\n      </button>\n    </div>\n  )\n}\n",
     "/src/routes/index.tsx": "import * as Solid from 'solid-js'\nimport { createFileRoute } from '@tanstack/solid-router'\n\nimport logo from '../logo.svg'\n\nexport const Route = createFileRoute('/')({\n  component: IndexComponent,\n})\n\nfunction IndexComponent() {\n  return (\n    <div class=\"text-center\">\n      <header class=\"min-h-screen flex flex-col items-center justify-center bg-[#282c34] text-white text-[calc(10px+2vmin)]\">\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      </header>\n    </div>\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 files 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\n\n# Learn More\n\nYou can learn more about all of the offerings from TanStack in the [TanStack documentation](https://tanstack.com).\n",
-    "package.json": "{\n  \"name\": \"TEST\",\n  \"private\": true,\n  \"type\": \"module\",\n  \"scripts\": {\n    \"dev\": \"vite dev --port 3000\",\n    \"start\": \"node .output/server/index.mjs\",\n    \"build\": \"vite build\",\n    \"serve\": \"vite preview\",\n    \"test\": \"vitest run\"\n  },\n  \"dependencies\": {\n    \"@tailwindcss/vite\": \"^4.0.6\",\n    \"@tanstack/router-plugin\": \"^1.121.3\",\n    \"@tanstack/solid-router\": \"^1.121.3\",\n    \"@tanstack/solid-router-devtools\": \"^1.121.3\",\n    \"@tanstack/solid-start\": \"1.121.3\",\n    \"solid-js\": \"^1.9.4\",\n    \"tailwindcss\": \"^4.0.6\",\n    \"vite\": \"^7.1.7\",\n    \"vite-tsconfig-paths\": \"^5.1.4\"\n  },\n  \"devDependencies\": {\n    \"typescript\": \"^5.7.2\",\n    \"vite\": \"^7.1.7\",\n    \"vite-plugin-solid\": \"^2.11.2\"\n  }\n}",
+    "package.json": "{\n  \"name\": \"TEST\",\n  \"private\": true,\n  \"type\": \"module\",\n  \"scripts\": {\n    \"dev\": \"vite dev --port 3000\",\n    \"start\": \"node .output/server/index.mjs\",\n    \"build\": \"vite build\",\n    \"serve\": \"vite preview\",\n    \"test\": \"vitest run\"\n  },\n  \"dependencies\": {\n    \"@tailwindcss/vite\": \"^4.0.6\",\n    \"@tanstack/router-plugin\": \"^1.121.3\",\n    \"@tanstack/solid-router\": \"^1.132.7\",\n    \"@tanstack/solid-router-devtools\": \"^1.132.7\",\n    \"@tanstack/solid-start\": \"1.132.7\",\n    \"solid-js\": \"^1.9.4\",\n    \"tailwindcss\": \"^4.0.6\",\n    \"vite\": \"^7\",\n    \"vite-tsconfig-paths\": \"^5.1.4\"\n  },\n  \"devDependencies\": {\n    \"typescript\": \"^5.7.2\",\n    \"vite\": \"^7\",\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.ts": "import { defineConfig } from 'vite'\nimport viteTsConfigPaths from 'vite-tsconfig-paths'\nimport tailwindcss from '@tailwindcss/vite'\n\nimport { tanstackStart } from '@tanstack/solid-start/plugin/vite'\n\nexport default defineConfig({\n  plugins: [\n    // this is the plugin that enables path aliases\n    viteTsConfigPaths({\n      projects: ['./tsconfig.json'],\n    }),\n    tailwindcss(),\n    tanstackStart(),\n  ],\n})\n"
+    "vite.config.ts": "import { defineConfig } from 'vite'\nimport viteTsConfigPaths from 'vite-tsconfig-paths'\nimport tailwindcss from '@tailwindcss/vite'\n\nimport { tanstackStart } from '@tanstack/solid-start/plugin/vite'\nimport solidPlugin from 'vite-plugin-solid'\n\nexport default defineConfig({\n  plugins: [\n    // this is the plugin that enables path aliases\n    viteTsConfigPaths({\n      projects: ['./tsconfig.json'],\n    }),\n    tailwindcss(),\n    tanstackStart(),\n    solidPlugin({ ssr: true }),\n  ],\n})\n"
   },
   "commands": [
     "git init",