WIP: Upgrade to solid 2 beta

.changeset/quick-pandas-build.md

@@ -0,0 +1,5 @@
+---
+"@solidjs/start": patch
+---
+
+Fix production builds shipping without client assets (and 500ing from a manifest-less server fallback) when composed with nitro, by bumping vite-plugin-solid to 3.0.0-next.20: its client-build-first `buildApp` hooks now run at normal order and defer to nitro's orchestrator instead of building the client before nitro's pre-order hook wipes `.output/`. A temporary workaround that filtered those hooks out of the solid() plugin set has been removed.

.changeset/router-1-0-file-routes.md

@@ -0,0 +1,18 @@
+---
+"@solidjs/start": patch
+---
+
+Migrate to `@solidjs/router` 1.0.0-next.7, which removes the component API in favor of the `createRouter` factory. `@solidjs/start/router` now exports the file-system route tree as a value — `fileRoutes` — instead of the `FileRoutes` component (there is no JSX children slot to mount it in anymore); apps pass it straight to the factory:
+
+```tsx
+import { createRouter } from "@solidjs/router";
+import { fileRoutes } from "@solidjs/start/router";
+
+const Router = createRouter({ routes: fileRoutes });
+
+export default function App() {
+  return <Router>{props => <Loading>{props.children}</Loading>}</Router>;
+}
+```
+
+Routes are immutable per router instance, so one shared tree serves every request and mount: `PageEvent.routes` (and the per-request tree build in `createPageEvent`) is gone, and the single-flight collector consumes `fileRoutes` directly. The old `root` prop becomes the render-prop child and `rootPreload` becomes the factory's `preload` option; active-link styling moves from the removed `<A>` component's `active` class to the router's anchor attribute vocabulary (`[data-active]`, `[aria-current="page"]`).

.changeset/router-owns-single-flight-nojs.md

@@ -0,0 +1,5 @@
+---
+"@solidjs/start": patch
+---
+
+Adopt the router's server-function integration: single-flight payload collection and the no-JS flash-cookie form convention are `@solidjs/router`'s now (its vocabulary — query cache keys, submissions — was always the payload). Start's `handleSingleFlight` (data-only app render), `createSingleFlightHeaders`, `handleNoJS`, and the flash-cookie SSR seeding are deleted; the server-function handler wires `createFlightDataCollector({ routes: createRoutes, base })` — the router's pure preload runner over the file-system route tree, no app render involved — and `createNoJSHandler({ base })` from `@solidjs/router/server` into the core handler hooks. Client-side single-flight opt-in is automatic: the router registers itself as the transport's flight-data consumer, so per-call `X-Single-Flight` headers are gone too.

apps/fixtures/bare/package.json

@@ -8,8 +8,9 @@
   },
   "dependencies": {
     "@solidjs/start": "workspace:*",
+    "@solidjs/web": "2.0.0-beta.28",
     "nitro": "^3.0.260610-beta",
-    "solid-js": "^1.9.14",
+    "solid-js": "2.0.0-beta.28",
     "vite": "^8.1.5"
   },
   "engines": {

apps/fixtures/bare/tsconfig.json

@@ -6,7 +6,7 @@
     "allowSyntheticDefaultImports": true,
     "esModuleInterop": true,
     "jsx": "preserve",
-    "jsxImportSource": "solid-js",
+    "jsxImportSource": "@solidjs/web",
     "allowJs": true,
     "strict": true,
     "noEmit": true,

apps/fixtures/basic/package.json

@@ -7,11 +7,12 @@
     "build": "vite build"
   },
   "dependencies": {
-    "@solidjs/meta": "^0.29.4",
-    "@solidjs/router": "^1.0.0",
+    "@solidjs/meta": "0.30.0-next.0",
+    "@solidjs/router": "2.0.0-next.12",
     "@solidjs/start": "workspace:*",
+    "@solidjs/web": "2.0.0-beta.28",
     "nitro": "^3.0.260610-beta",
-    "solid-js": "^1.9.14",
+    "solid-js": "2.0.0-beta.28",
     "vite": "^8.1.5"
   },
   "engines": {

apps/fixtures/basic/src/app.tsx

@@ -1,22 +1,22 @@
 import { MetaProvider, Title } from "@solidjs/meta";
-import { Router } from "@solidjs/router";
-import { FileRoutes } from "@solidjs/start/router";
-import { Suspense } from "solid-js";
+import { createRouter } from "@solidjs/router";
+import { fileRoutes } from "@solidjs/start/router";
+import { Loading } from "solid-js";
 import "./app.css";
 
+const Router = createRouter({ routes: fileRoutes });
+
 export default function App() {
   return (
-    <Router
-      root={props => (
+    <Router>
+      {props => (
         <MetaProvider>
           <Title>SolidStart - Basic</Title>
           <a href="/">Index</a>
           <a href="/about">About</a>
-          <Suspense>{props.children}</Suspense>
+          <Loading>{props.children}</Loading>
         </MetaProvider>
       )}
-    >
-      <FileRoutes />
     </Router>
   );
 }

apps/fixtures/basic/src/routes/[...404].tsx

@@ -1,10 +1,8 @@
-import { Title } from "@solidjs/meta";
 import { HttpStatusCode } from "@solidjs/start";
 
 export default function NotFound() {
   return (
     <main>
-      <Title>Not Found</Title>
       <HttpStatusCode code={404} />
       <h1>Page Not Found</h1>
       <p>

apps/fixtures/basic/tsconfig.json

@@ -6,7 +6,7 @@
     "allowSyntheticDefaultImports": true,
     "esModuleInterop": true,
     "jsx": "preserve",
-    "jsxImportSource": "solid-js",
+    "jsxImportSource": "@solidjs/web",
     "allowJs": true,
     "strict": true,
     "noEmit": true,

apps/fixtures/basic/vite.config.ts

@@ -4,4 +4,7 @@ import { solidStart } from "../../../packages/start/src/config";
 
 export default defineConfig({
   plugins: [solidStart(), nitro()],
+  resolve: {
+    dedupe: ["solid-js", "@solidjs/web", "@solidjs/router"],
+  },
 });

apps/fixtures/css/package.json

@@ -8,11 +8,12 @@
     "start": "node .output/server/index.mjs"
   },
   "dependencies": {
-    "@solidjs/meta": "^0.29.4",
-    "@solidjs/router": "^1.0.0",
+    "@solidjs/meta": "0.30.0-next.0",
+    "@solidjs/router": "2.0.0-next.12",
     "@solidjs/start": "workspace:*",
+    "@solidjs/web": "2.0.0-beta.28",
     "nitro": "^3.0.260610-beta",
-    "solid-js": "^1.9.14",
+    "solid-js": "2.0.0-beta.28",
     "vite": "^8.1.5"
   },
   "devDependencies": {

apps/fixtures/css/src/app.tsx

@@ -1,13 +1,15 @@
 import { MetaProvider, Title } from "@solidjs/meta";
-import { Router } from "@solidjs/router";
-import { FileRoutes } from "@solidjs/start/router";
-import { Suspense } from "solid-js";
+import { createRouter } from "@solidjs/router";
+import { fileRoutes } from "@solidjs/start/router";
+import { Loading } from "solid-js";
 import "./app.css";
 
+const Router = createRouter({ routes: fileRoutes });
+
 export default function App() {
   return (
-    <Router
-      root={props => (
+    <Router>
+      {props => (
         <MetaProvider>
           <Title>SolidStart - CSS Fixture</Title>
           <div class="mx-auto max-w-5xl p-10 pt-3">
@@ -17,12 +19,10 @@ export default function App() {
               <a href="/unstyled">Unstyled</a>
             </header>
 
-            <Suspense>{props.children}</Suspense>
+            <Loading>{props.children}</Loading>
           </div>
         </MetaProvider>
       )}
-    >
-      <FileRoutes />
     </Router>
   );
 }

apps/fixtures/css/src/components/layout.tsx

@@ -1,13 +1,15 @@
-import { createSignal, FlowProps, onMount } from "solid-js";
-import { getRequestEvent } from "solid-js/web";
+import { createSignal, FlowProps, onSettled } from "solid-js";
+import { getRequestEvent } from "@solidjs/web";
 
 const Badge = (props: FlowProps) => (
   <div class="text-base text-white bg-gray-700 rounded-lg px-2 font-medium">{props.children}</div>
 );
 
 const Layout = (props: FlowProps<{ title: string }>) => {
   const [mounted, setMounted] = createSignal(false);
-  onMount(() => setMounted(true));
+  onSettled(() => {
+    setMounted(true);
+  });
 
   return (
     <div class="flex gap-2 flex-col">

apps/fixtures/css/src/components/test.tsx

@@ -1,4 +1,4 @@
-import { JSX } from "solid-js";
+import { JSX } from "@solidjs/web";
 
 const clsx = (...args: (string | false | undefined)[]) => args.filter(Boolean).join(" ");
 

apps/fixtures/css/src/routes/index.tsx

@@ -1,5 +1,5 @@
-import { createAsync, query } from "@solidjs/router";
-import { lazy, Show } from "solid-js";
+import { query } from "@solidjs/router";
+import { createMemo, lazy, Show } from "solid-js";
 import "virtual:virtualModule.css";
 import Layout from "../components/layout";
 import { CommonTests } from "../components/test";
@@ -12,8 +12,10 @@ const Lazy = lazy(() => import("../components/lazy"));
 const LazyLink = lazy(() => import("../components/lazyLink"));
 const LazyLinkTmp = lazy(() => import("../components/lazyLinkTmp"));
 
-const entries = import.meta.glob("../components/lazyG*.tsx");
-const LazyGlob = lazy(Object.values(entries)[0] as any);
+const entries = import.meta.glob("/src/components/lazyG*.tsx");
+// Solid 2 lazy() requires an explicit moduleUrl in SSR when the loader
+// isn't a static dynamic import the bundler plugin can analyze.
+const LazyGlob = lazy(Object.values(entries)[0] as any, Object.keys(entries)[0]!.slice(1));
 
 const SharedChunk = lazy(() => import("../components/sharedChunk/lazy1"));
 // Do not remove this.
@@ -27,7 +29,7 @@ const getData = query(async () => {
 }, "data");
 
 export default function Home() {
-  const data = createAsync(() => getData(), { deferStream: true });
+  const data = createMemo(() => getData(), { deferStream: true });
 
   return (
     <main>

apps/fixtures/css/tsconfig.json

@@ -6,7 +6,7 @@
     "allowSyntheticDefaultImports": true,
     "esModuleInterop": true,
     "jsx": "preserve",
-    "jsxImportSource": "solid-js",
+    "jsxImportSource": "@solidjs/web",
     "allowJs": true,
     "strict": true,
     "noEmit": true,

apps/fixtures/css/vite.config.ts

@@ -12,7 +12,6 @@ export default defineConfig({
         /**
          * Creates a shared chunk with two components. Needed for the "SharedChunk" test!
          * The vite manifest behaves differently for such shared chunks.
-         * More info: packages/start/src/config/lazy.ts
          *
          * TODO: When switching to Rolldown, migrate this to advancedChunks
          * https://vite.dev/guide/rolldown.html#manualchunks-to-advancedchunks

apps/fixtures/experiments/package.json

@@ -7,11 +7,12 @@
     "build": "vite build"
   },
   "dependencies": {
-    "@solidjs/meta": "^0.29.4",
-    "@solidjs/router": "^1.0.0",
+    "@solidjs/meta": "0.30.0-next.0",
+    "@solidjs/router": "2.0.0-next.12",
     "@solidjs/start": "workspace:*",
+    "@solidjs/web": "2.0.0-beta.28",
     "nitro": "^3.0.260610-beta",
-    "solid-js": "^1.9.14",
+    "solid-js": "2.0.0-beta.28",
     "vite": "^8.1.5"
   },
   "engines": {

apps/fixtures/experiments/src/app.tsx

@@ -1,25 +1,25 @@
 import { MetaProvider, Title } from "@solidjs/meta";
-import { Router } from "@solidjs/router";
-import { FileRoutes } from "@solidjs/start/router";
-import { Suspense } from "solid-js";
+import { createRouter } from "@solidjs/router";
+import { fileRoutes } from "@solidjs/start/router";
+import { Loading } from "solid-js";
 import "./app.css";
 import Provider from "./components/Provider";
 
+const Router = createRouter({ routes: fileRoutes });
+
 export default function App() {
   return (
-    <Router
-      root={props => (
+    <Router>
+      {props => (
         <MetaProvider>
           <Provider initialCount={10}>
             <Title>SolidStart - Bare</Title>
             <a href="/">Index</a>
             <a href="/about">About</a>
-            <Suspense>{props.children}</Suspense>
+            <Loading>{props.children}</Loading>
           </Provider>
         </MetaProvider>
       )}
-    >
-      <FileRoutes />
     </Router>
   );
 }

apps/fixtures/experiments/src/components/Provider.tsx

@@ -3,9 +3,5 @@ import { createSignal } from "solid-js";
 import counterContext from "./counterContext";
 
 export default function Provider(props) {
-  return (
-    <counterContext.Provider value={createSignal(props.initialCount)}>
-      {props.children}
-    </counterContext.Provider>
-  );
+  return <counterContext value={createSignal(props.initialCount)}>{props.children}</counterContext>;
 }

apps/fixtures/experiments/src/routes/index.tsx

@@ -1,8 +1,7 @@
 import { Title } from "@solidjs/meta";
-import { json } from "@solidjs/router";
 import { clientOnly, GET } from "@solidjs/start";
 import { getServerFunctionMeta } from "@solidjs/start/server";
-import { getRequestEvent, isServer } from "solid-js/web";
+import { getRequestEvent, isServer, respond } from "@solidjs/web";
 import Counter from "~/components/Counter";
 const BreaksOnServer = clientOnly(() => import("~/components/BreaksOnServer"));
 
@@ -11,7 +10,7 @@ const hello = GET(async (name: string) => {
   const e = getRequestEvent()!;
   const { id } = getServerFunctionMeta()!;
   console.log("ID", id, e.locals.foo);
-  return json(
+  return respond(
     { hello: new Promise<string>(r => setTimeout(() => r(name), 1000)) },
     { headers: { "cache-control": "max-age=60" } },
   );

apps/fixtures/experiments/tsconfig.json

@@ -6,7 +6,7 @@
     "allowSyntheticDefaultImports": true,
     "esModuleInterop": true,
     "jsx": "preserve",
-    "jsxImportSource": "solid-js",
+    "jsxImportSource": "@solidjs/web",
     "allowJs": true,
     "strict": true,
     "noEmit": true,

apps/fixtures/hackernews/package.json

@@ -8,9 +8,10 @@
     "build": "vite build"
   },
   "dependencies": {
-    "@solidjs/router": "^1.0.0",
+    "@solidjs/router": "2.0.0-next.12",
     "@solidjs/start": "workspace:*",
-    "solid-js": "^1.9.14",
+    "@solidjs/web": "2.0.0-beta.28",
+    "solid-js": "2.0.0-beta.28",
     "vite": "^8.1.5"
   },
   "engines": {

apps/fixtures/hackernews/src/app.css

@@ -47,7 +47,9 @@ a {
   color: #fff;
 }
 
-.header a.active {
+/* Router 1.0 marks exact-or-prefix matched anchors with `data-active`
+   (the root path only ever matches exactly, so "/" doesn't stay lit). */
+.header a[data-active] {
   color: #fff;
   font-weight: 400;
 }

apps/fixtures/hackernews/src/app.tsx

@@ -1,22 +1,20 @@
-import { Router } from "@solidjs/router";
-import { FileRoutes } from "@solidjs/start/router";
-import { Suspense } from "solid-js";
+import { createRouter } from "@solidjs/router";
+import { fileRoutes } from "@solidjs/start/router";
+import { Loading } from "solid-js";
 import "./app.css";
 import Nav from "./components/nav";
 
+const Router = createRouter({ routes: fileRoutes });
+
 export default function App() {
   return (
-    <Router
-      root={props => (
+    <Router>
+      {props => (
         <>
           <Nav />
-          <Suspense fallback={<div class="news-list-nav">Loading...</div>}>
-            {props.children}
-          </Suspense>
+          <Loading fallback={<div class="news-list-nav">Loading...</div>}>{props.children}</Loading>
         </>
       )}
-    >
-      <FileRoutes />
     </Router>
   );
 }