chore: port site to tanstack start v1 (#839)

Author: davedbase

packages/match/dev/index.tsx

@@ -1,4 +1,4 @@
-import { Component, createSignal } from "solid-js";
+import { type Component, createSignal } from "solid-js";
 import { MatchTag, MatchValue } from "../src/index.js";
 
 type AnimalDog = { type: "dog"; breed: string };

packages/mouse/dev/components.tsx

@@ -1,4 +1,4 @@
-import { access, MaybeAccessor } from "@solid-primitives/utils";
+import { access, type MaybeAccessor } from "@solid-primitives/utils";
 import { type Component, For } from "solid-js";
 
 export const DisplayRecord: Component<{ record: Record<string, MaybeAccessor<any>> }> = props => (

pnpm-lock.yaml

@@ -4,21 +4,23 @@
   "type": "module",
   "scripts": {
     "generate": "node --import=@nothing-but/node-resolve-ts --experimental-transform-types ./scripts/generate.ts",
-    "dev": "vinxi dev",
-    "build": "vinxi build",
-    "start": "vinxi start",
-    "version": "vinxi version",
+    "dev": "vite dev",
+    "build": "vite build",
+    "start": "node .output/server/index.mjs",
     "deploy": "pnpm generate && pnpm build",
-    "preview": "node .output/server/index.mjs"
+    "preview": "vite preview"
   },
   "devDependencies": {
     "@tailwindcss/container-queries": "^0.1.1",
     "@tailwindcss/typography": "^0.5.10",
     "@types/mark.js": "^8.11.12",
     "autoprefixer": "^10.4.16",
     "postcss": "^8.4.32",
+    "react": "^19.2.5",
     "tailwindcss": "3.3.3",
-    "tailwindcss-dir": "^4.0.0"
+    "tailwindcss-dir": "^4.0.0",
+    "vite": "^8.0.8",
+    "vite-plugin-solid": "^2.11.12"
   },
   "dependencies": {
     "@solid-primitives/clipboard": "workspace:^",
@@ -37,8 +39,8 @@
     "@solid-primitives/scroll": "workspace:^",
     "@solid-primitives/tween": "workspace:^",
     "@solid-primitives/utils": "workspace:^",
-    "@solidjs/meta": "^0.29.3",
-    "@solidjs/router": "^0.13.1",
+    "@tanstack/solid-router": "^1.168.16",
+    "@tanstack/solid-start": "^1.167.28",
     "clsx": "^2.0.0",
     "fuse.js": "^7.0.0",
     "rehype-sanitize": "^6.0.0",
@@ -47,10 +49,9 @@
     "remark-parse": "^11.0.0",
     "remark-rehype": "^11.0.0",
     "sass": "^1.72.0",
+    "@floating-ui/dom": "^1.7.6",
     "solid-dismiss": "^1.7.121",
     "solid-icons": "^1.1.0",
-    "solid-tippy": "^0.2.1",
-    "tippy.js": "^6.3.7",
     "undici": "^5.28.2",
     "unified": "^11.0.4"
   },

site/app.config.ts

@@ -115,7 +115,7 @@ async function generateReadme(module: ModuleData, primitiveData: PrimitiveData)
           }
           return origin;
         });
-        p2 = `[Live Site](https://primitives.solidjs.community/playground/${module.name}/)\n\n${p2}`;
+        p2 = `[Live Site](/playground/${module.name}/)\n\n${p2}`;
         return `${p1}${p2}`;
       }
       return _;

site/package.json

@@ -1,10 +1,9 @@
-// @refresh reload
 import { debounce } from "@solid-primitives/scheduled";
-import { mount, StartClient } from "@solidjs/start/client";
-
-// import "solid-devtools";
+import { hydrate } from "solid-js/web";
+import { hydrateStart, StartClient } from "@tanstack/solid-start/client";
 
 // Primitives/Table.tsx produces a lot of hydration warnings in development mode.
+// Batch them into a single collapsed group so the dev console stays usable.
 if (import.meta.env.MODE === "development") {
   const keys: string[] = [];
   // eslint-disable-next-line no-console
@@ -26,4 +25,6 @@ if (import.meta.env.MODE === "development") {
   }, 1000);
 }
 
-mount(() => <StartClient />, document);
+hydrateStart().then(router => {
+  hydrate(() => <StartClient router={router} />, document);
+});

site/scripts/generate.ts

@@ -2,7 +2,7 @@ import { createVisibilityObserver } from "@solid-primitives/intersection-observe
 import { isIOS, isSafari } from "@solid-primitives/platform";
 import { createResizeObserver } from "@solid-primitives/resize-observer";
 import { type Component, createSignal, For, onMount } from "solid-js";
-import { Bundlesize, BundlesizeItem } from "~/types.js";
+import type { Bundlesize, BundlesizeItem } from "~/types.js";
 
 const SHARED_HEADERS = ["Minified", "Minified + GZipped"] as const;
 const PACKAGE_TH_HEADERS = ["Package", ...SHARED_HEADERS] as const;

site/src/app.tsx

@@ -10,8 +10,8 @@ const Footer: Component = () => {
             SolidJS
           </a>
           ,{" "}
-          <a class="text-link" href="https://start.solidjs.com" target="_blank">
-            SolidStart
+          <a class="text-link" href="https://tanstack.com/start/latest/docs/framework/solid/overview" target="_blank">
+            TanStack Start for Solid
           </a>
           , and best of all ...{" "}
           <span class="whitespace-nowrap">