chore: port site to tanstack start v1

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 => (

site/package.json

@@ -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/scripts/generate.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/src/entry-client.tsx → site/src/client.tsx

@@ -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/src/components/BundleSizeModal/BundleSizeModal.tsx

@@ -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/components/Footer/Footer.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
           </a>
           , and best of all ...{" "}
           <span class="whitespace-nowrap">

site/src/components/Header/Header.tsx

@@ -20,7 +20,7 @@ import ThemeBtn from "./ThemeBtn.js";
 import clsx from "clsx";
 import { createTween } from "@solid-primitives/tween";
 import SearchModal from "../Search/SearchModal.js";
-import { A, useLocation } from "@solidjs/router";
+import { Link, useLocation } from "@tanstack/solid-router";
 
 export const [isScrollEnabled, setScrollEnabled] = createSignal(false);
 
@@ -126,7 +126,7 @@ const Header: Component = () => {
 
   createEffect(
     defer(
-      createMemo(() => location.hash),
+      createMemo(() => location().hash),
       () => setIsNavOpen(false),
     ),
   );
@@ -161,7 +161,7 @@ const Header: Component = () => {
                 classList={{ "opacity-100": isNavOpen() }}
               />
             </div>
-            <A href="/">
+            <Link to="/">
               <img
                 class="hidden h-[28px] sm:block sm:h-[40px] dark:hidden"
                 src="/img/solid-primitives-logo.svg"
@@ -182,7 +182,7 @@ const Header: Component = () => {
                 src="/img/solid-primitives-stacked-dark-logo.svg"
                 alt=""
               />
-            </A>
+            </Link>
             <nav>
               <ul class="flex items-center gap-3">
                 <li class="transition" classList={{ "opacity-0": isSearchOpen() }}>

site/src/components/Header/NavMenu.tsx

@@ -1,7 +1,7 @@
 import { type RefProps } from "@solid-primitives/refs";
 import { type Component, For } from "solid-js";
 import { scrollIntoView } from "~/utils.js";
-import { A, useLocation } from "@solidjs/router";
+import { useLocation } from "@tanstack/solid-router";
 
 const NavMenu: Component<RefProps<HTMLDivElement> & { onClose: () => void }> = props => {
   const location = useLocation();
@@ -25,19 +25,19 @@ const NavMenu: Component<RefProps<HTMLDivElement> & { onClose: () => void }> = p
 
               return (
                 <li>
-                  <A
+                  <a
                     class="block py-2 font-semibold"
                     href={href}
                     onClick={() => {
-                      if (location.hash === href) {
+                      if (location().hash === hashName) {
                         const anchor = document.querySelector(`a[href="${href}"]`)!;
                         scrollIntoView(anchor, { offset: 70, behavior: "auto" });
                         props.onClose();
                       }
                     }}
                   >
                     {item}
-                  </A>
+                  </a>
                 </li>
               );
             }}

site/src/routes/[...404].tsx → site/src/components/NotFound.tsx

@@ -1,16 +1,12 @@
+import { Link } from "@tanstack/solid-router";
 import { pageWidthClass } from "~/constants.js";
 import { DocumentClass } from "~/primitives/document-class.jsx";
-import { Title } from "@solidjs/meta";
-import { HttpStatusCode } from "@solidjs/start";
-import { A } from "@solidjs/router";
 
 export default function NotFound() {
   return (
     <main
       class={`${pageWidthClass} mx-auto min-h-[calc(100vh-250px)] w-full p-4 pt-[100px] lg:pt-[150px]`}
     >
-      <Title>Not Found</Title>
-      <HttpStatusCode code={404} />
       <DocumentClass class="full-page" />
       <h1 class="mb-12 text-center text-xl">Primitive not Found</h1>
       <div class="flex justify-center overflow-x-clip">
@@ -87,7 +83,7 @@ export default function NotFound() {
         </div>
       </div>
       <div class="mt-24 flex justify-center">
-        <A href="/" class="flex items-center gap-4 px-4 py-2 hover:opacity-70">
+        <Link to="/" class="flex items-center gap-4 px-4 py-2 hover:opacity-70">
           <svg
             xmlns="http://www.w3.org/2000/svg"
             width="24"
@@ -104,7 +100,7 @@ export default function NotFound() {
             <polyline points="12 19 5 12 12 5" />
           </svg>
           <span>Back to Main</span>
-        </A>
+        </Link>
       </div>
     </main>
   );

site/src/components/Primitives/PrimitiveBtn.tsx

@@ -1,14 +1,15 @@
 import { type ParentComponent } from "solid-js";
-import { A } from "@solidjs/router";
+import { Link } from "@tanstack/solid-router";
 
 const PrimitiveBtn: ParentComponent<{ href: string }> = props => {
   return (
-    <A
-      href={`/package/${props.href}`}
+    <Link
+      // `href` may contain a trailing `#hash`; pass as plain string (not type-safe)
+      to={`/package/${props.href}` as any}
       class="flex-shrink-0 rounded-md px-2 text-[14px] font-semibold text-[#063983] transition-colors hover:bg-[#d0e4ff87] hover:text-[#00275f] sm:text-base dark:text-[#d0dff2] dark:hover:bg-[#566e8e87] dark:hover:text-[#eff6ff]"
     >
       {props.children}
-    </A>
+    </Link>
   );
 };