upgrade solid examples (#208)

brenelz · web-flow · commit 6f0d3b99b2a0 · 2025-10-21T15:49:12.000-07:00
diff --git a/frameworks/solid/hosts/cloudflare/assets/wrangler.jsonc b/frameworks/solid/hosts/cloudflare/assets/wrangler.jsonc
@@ -0,0 +1,9 @@
+{
+  "$schema": "node_modules/wrangler/config-schema.json",
+  "name": "tanstack-start-app",
+  "compatibility_date": "2025-09-02",
+  "compatibility_flags": [
+    "nodejs_compat"
+  ],
+  "main": "@tanstack/solid-start/server-entry"
+}
diff --git a/frameworks/solid/hosts/cloudflare/info.json b/frameworks/solid/hosts/cloudflare/info.json
@@ -0,0 +1,16 @@
+{
+  "name": "Cloudflare",
+  "description": "Cloudflare deployment setup",
+  "link": "https://developers.cloudflare.com/workers/vite-plugin/",
+  "phase": "add-on",
+  "modes": ["file-router", "code-router"],
+  "type": "host",
+  "priority": 200,
+  "integrations": [
+    {
+      "type": "vite-plugin",
+      "import": "import { cloudflare } from '@cloudflare/vite-plugin'",
+      "code": "cloudflare({ viteEnvironment: { name: 'ssr' } })"
+    }
+  ]
+}
diff --git a/frameworks/solid/hosts/cloudflare/package.json b/frameworks/solid/hosts/cloudflare/package.json
@@ -0,0 +1,11 @@
+{
+  "scripts": {
+    "deploy": "wrangler deploy"
+  },
+  "dependencies": {
+    "@cloudflare/vite-plugin": "^1.13.8"
+  },
+  "devDependencies": {
+    "wrangler": "^4.40.3"
+  }
+}
diff --git a/frameworks/solid/hosts/cloudflare/small-logo.svg b/frameworks/solid/hosts/cloudflare/small-logo.svg
@@ -0,0 +1 @@
+<svg viewBox="0 0 256 116" xmlns="http://www.w3.org/2000/svg" width="256" height="116" preserveAspectRatio="xMidYMid"><path fill="#FFF" d="m202.357 49.394-5.311-2.124C172.085 103.434 72.786 69.289 66.81 85.997c-.996 11.286 54.227 2.146 93.706 4.059 12.039.583 18.076 9.671 12.964 24.484l10.069.031c11.615-36.209 48.683-17.73 50.232-29.68-2.545-7.857-42.601 0-31.425-35.497Z"/><path fill="#F4811F" d="M176.332 108.348c1.593-5.31 1.062-10.622-1.593-13.809-2.656-3.187-6.374-5.31-11.154-5.842L71.17 87.634c-.531 0-1.062-.53-1.593-.53-.531-.532-.531-1.063 0-1.594.531-1.062 1.062-1.594 2.124-1.594l92.946-1.062c11.154-.53 22.839-9.56 27.087-20.182l5.312-13.809c0-.532.531-1.063 0-1.594C191.203 20.182 166.772 0 138.091 0 111.535 0 88.697 16.995 80.73 40.896c-5.311-3.718-11.684-5.843-19.12-5.31-12.747 1.061-22.838 11.683-24.432 24.43-.531 3.187 0 6.374.532 9.56C16.996 70.107 0 87.103 0 108.348c0 2.124 0 3.718.531 5.842 0 1.063 1.062 1.594 1.594 1.594h170.489c1.062 0 2.125-.53 2.125-1.594l1.593-5.842Z"/><path fill="#FAAD3F" d="M205.544 48.863h-2.656c-.531 0-1.062.53-1.593 1.062l-3.718 12.747c-1.593 5.31-1.062 10.623 1.594 13.809 2.655 3.187 6.373 5.31 11.153 5.843l19.652 1.062c.53 0 1.062.53 1.593.53.53.532.53 1.063 0 1.594-.531 1.063-1.062 1.594-2.125 1.594l-20.182 1.062c-11.154.53-22.838 9.56-27.087 20.182l-1.063 4.78c-.531.532 0 1.594 1.063 1.594h70.108c1.062 0 1.593-.531 1.593-1.593 1.062-4.25 2.124-9.03 2.124-13.81 0-27.618-22.838-50.456-50.456-50.456"/></svg>
diff --git a/frameworks/solid/hosts/netlify/assets/netlify.toml b/frameworks/solid/hosts/netlify/assets/netlify.toml
@@ -0,0 +1,6 @@
+[build]
+  command = "vite build"
+  dir = "dist/client"
+[dev]
+  command = "vite dev"
+  port = 3000
diff --git a/frameworks/solid/hosts/netlify/info.json b/frameworks/solid/hosts/netlify/info.json
@@ -0,0 +1,16 @@
+{
+  "name": "Netlify",
+  "description": "Netlify deployment setup",
+  "link": "https://docs.netlify.com",
+  "phase": "add-on",
+  "modes": ["file-router", "code-router"],
+  "type": "host",
+  "priority": 180,
+  "integrations": [
+    {
+      "type": "vite-plugin",
+      "import": "import netlify from '@netlify/vite-plugin-tanstack-start'",
+      "code": "netlify()"
+    }
+  ]
+}
diff --git a/frameworks/solid/hosts/netlify/package.json b/frameworks/solid/hosts/netlify/package.json
@@ -0,0 +1,5 @@
+{
+  "dependencies": {
+    "@netlify/vite-plugin-tanstack-start": "^1.0.2"
+  }
+}
diff --git a/frameworks/solid/hosts/netlify/small-logo.svg b/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>
diff --git a/frameworks/solid/hosts/nitro/package.json b/frameworks/solid/hosts/nitro/package.json
@@ -1,5 +1,5 @@
 {
   "dependencies": {
-    "@tanstack/nitro-v2-vite-plugin": "^1.132.31"
+    "@tanstack/nitro-v2-vite-plugin": "^1.133.19"
   }
 }
diff --git a/frameworks/solid/project/base/package.json b/frameworks/solid/project/base/package.json
@@ -9,13 +9,13 @@
     "test": "vitest run"
   },
   "dependencies": {
-    "@tanstack/solid-router": "^1.132.25",
-    "@tanstack/solid-router-devtools": "^1.132.25",
-    "@tanstack/solid-start": "^1.132.25",
-    "solid-js": "^1.9.5"
+    "@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": {
-    "vite-plugin-solid": "^2.11.2",
+    "vite-plugin-solid": "^2.11.10",
     "typescript": "^5.7.2",
     "vite": "^7.1.7"
   }
diff --git a/frameworks/solid/project/base/src/routes/__root.tsx.ejs b/frameworks/solid/project/base/src/routes/__root.tsx.ejs
@@ -11,6 +11,7 @@ import "@fontsource/inter"
   for(const init of addOn.main?.initialize || []) { %>
   <%- init %>
 <% } } %>
+import { HydrationScript } from 'solid-js/web'
 
 import styleCss from "../styles.css?url";
 
@@ -23,23 +24,30 @@ export const Route = createRootRouteWithContext()({
 
 function RootComponent() {
   return (
-    <>
-      <% for(const integration of integrations.filter(i => i.type === 'provider')) { %>
-        <<%= integration.jsName %>>
-      <% } %>
-      <HeadContent />
-      <% if (addOns.length || integrations.length || routes.length) { %>
-        <Header />
-      <% } %>
-      <Outlet />
-      <TanStackRouterDevtools />
-      <% for(const integration of integrations.filter(i => i.type === 'layout')) { %>
-        <<%= integration.jsName %> />
-      <% } %>
-      <% for(const integration of integrations.filter(i => i.type === 'provider').reverse()) { %>
-        </<%= integration.jsName %>>
-      <% } %>
-      <Scripts />
-    </>
+    <html>
+      <head>
+        <HydrationScript />
+        <HeadContent />
+      </head>
+      <body>
+        <Suspense>
+          <% for(const integration of integrations.filter(i => i.type === 'provider')) { %>
+            <<%= integration.jsName %>>
+          <% } %>
+          <% if (addOns.length || integrations.length || routes.length) { %>
+            <Header />
+          <% } %>
+          <Outlet />
+          <TanStackRouterDevtools />
+          <% for(const integration of integrations.filter(i => i.type === 'layout')) { %>
+            <<%= integration.jsName %> />
+          <% } %>
+          <% for(const integration of integrations.filter(i => i.type === 'provider').reverse()) { %>
+            </<%= integration.jsName %>>
+          <% } %>
+          </Suspense>
+        <Scripts />
+      </body>
+    </html>
   )
 }
diff --git a/frameworks/solid/project/packages.json b/frameworks/solid/project/packages.json
@@ -12,7 +12,7 @@
   },
   "file-router": {
     "dependencies": {
-      "@tanstack/router-plugin": "^1.121.3"
+      "@tanstack/router-plugin": "^1.133.21"
     }
   }
 }
diff --git a/frameworks/solid/tests/snapshots/solid/solid-cr-js-npm.json b/frameworks/solid/tests/snapshots/solid/solid-cr-js-npm.json
@@ -12,7 +12,7 @@
     "/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\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    \"dev\": \"vite --port 3000\",\n    \"build\": \"vite build && tsc\",\n    \"serve\": \"vite preview\",\n    \"test\": \"vitest run\"\n  },\n  \"dependencies\": {\n    \"@tanstack/solid-router\": \"^1.132.25\",\n    \"@tanstack/solid-router-devtools\": \"^1.132.25\",\n    \"@tanstack/solid-start\": \"^1.132.25\",\n    \"solid-js\": \"^1.9.5\"\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 --port 3000\",\n    \"build\": \"vite build && tsc\",\n    \"serve\": \"vite preview\",\n    \"test\": \"vitest run\"\n  },\n  \"dependencies\": {\n    \"@tanstack/solid-router\": \"^1.133.20\",\n    \"@tanstack/solid-router-devtools\": \"^1.133.20\",\n    \"@tanstack/solid-start\": \"^1.133.20\",\n    \"solid-js\": \"^1.9.9\"\n  },\n  \"devDependencies\": {\n    \"typescript\": \"^5.7.2\",\n    \"vite\": \"^7.1.7\",\n    \"vite-plugin-solid\": \"^2.11.10\"\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: [solidPlugin(), tailwindcss()],\n})\n"
   },
   "commands": [
diff --git a/frameworks/solid/tests/snapshots/solid/solid-cr-ts-npm.json b/frameworks/solid/tests/snapshots/solid/solid-cr-ts-npm.json
diff --git a/frameworks/solid/tests/snapshots/solid/solid-cr-ts-start-npm.json b/frameworks/solid/tests/snapshots/solid/solid-cr-ts-start-npm.json
diff --git a/frameworks/solid/tests/snapshots/solid/solid-fr-ts-npm.json b/frameworks/solid/tests/snapshots/solid/solid-fr-ts-npm.json
diff --git a/frameworks/solid/tests/snapshots/solid/solid-fr-ts-tw-npm.json b/frameworks/solid/tests/snapshots/solid/solid-fr-ts-tw-npm.json

-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +{
 +  "dependencies": {
 +    "@netlify/vite-plugin-tanstack-start": "^1.0.2"
 +  }
 +}
Original file line number	Diff line number	Diff line change
`@@ -1,5 +1,5 @@`
`1`	`1`	`{`
`2`	`2`	`"dependencies": {`
`3`		`- "@tanstack/nitro-v2-vite-plugin": "^1.132.31"`
	`3`	`+ "@tanstack/nitro-v2-vite-plugin": "^1.133.19"`
`4`	`4`	`}`
`5`	`5`	`}`