WIP: Upgrade to solid 2 beta

apps/fixtures/bare/package.json

@@ -8,7 +8,8 @@
   },
   "dependencies": {
     "@solidjs/start": "workspace:*",
-    "solid-js": "^1.9.11",
+    "@solidjs/web": "2.0.0-beta.16",
+    "solid-js": "2.0.0-beta.16",
     "vite": "7.3.1"
   },
   "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,10 +7,11 @@
     "build": "vite build"
   },
   "dependencies": {
-    "@solidjs/meta": "^0.29.4",
-    "@solidjs/router": "^0.15.4",
+    "@solidjs/meta": "0.30.0-next.0",
+    "@solidjs/router": "0.17.0-next.3",
     "@solidjs/start": "workspace:*",
-    "solid-js": "^1.9.11",
+    "@solidjs/web": "2.0.0-beta.16",
+    "solid-js": "2.0.0-beta.16",
     "vite": "7.3.1"
   },
   "engines": {

apps/fixtures/basic/src/app.tsx

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

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 { nitroV2Plugin } from "../../../packages/start-nitro-v2-vite-plugin/src"
 
 export default defineConfig({
   plugins: [solidStart(), nitroV2Plugin()],
+  resolve: {
+    dedupe: ["solid-js", "@solidjs/web", "@solidjs/router"],
+  }
 });

apps/fixtures/css/package.json

@@ -8,10 +8,11 @@
     "start": "node .output/server/index.mjs"
   },
   "dependencies": {
-    "@solidjs/meta": "^0.29.4",
-    "@solidjs/router": "^0.15.4",
+    "@solidjs/meta": "0.30.0-next.0",
+    "@solidjs/router": "0.17.0-next.3",
     "@solidjs/start": "workspace:*",
-    "solid-js": "^1.9.11",
+    "@solidjs/web": "2.0.0-beta.16",
+    "solid-js": "2.0.0-beta.16",
     "vite": "7.3.1"
   },
   "engines": {

apps/fixtures/css/src/app.tsx

@@ -1,7 +1,7 @@
 import { MetaProvider, Title } from "@solidjs/meta";
 import { Router } from "@solidjs/router";
 import { FileRoutes } from "@solidjs/start/router";
-import { Suspense } from "solid-js";
+import { Loading } from "solid-js";
 import "./app.css";
 
 export default function App() {
@@ -17,7 +17,7 @@ export default function App() {
               <a href="/unstyled">Unstyled</a>
             </header>
 
-            <Suspense>{props.children}</Suspense>
+            <Loading>{props.children}</Loading>
           </div>
         </MetaProvider>
       )}

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());
 
   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/experiments/package.json

@@ -7,10 +7,11 @@
     "build": "vite build"
   },
   "dependencies": {
-    "@solidjs/meta": "^0.29.4",
-    "@solidjs/router": "^0.15.4",
+    "@solidjs/meta": "0.30.0-next.0",
+    "@solidjs/router": "0.17.0-next.3",
     "@solidjs/start": "workspace:*",
-    "solid-js": "^1.9.11",
+    "@solidjs/web": "2.0.0-beta.16",
+    "solid-js": "2.0.0-beta.16",
     "vite": "7.3.1"
   },
   "engines": {

apps/fixtures/experiments/src/app.tsx

@@ -1,7 +1,7 @@
 import { MetaProvider, Title } from "@solidjs/meta";
 import { Router } from "@solidjs/router";
 import { FileRoutes } from "@solidjs/start/router";
-import { Suspense } from "solid-js";
+import { Loading } from "solid-js";
 import "./app.css";
 import Provider from "./components/Provider";
 
@@ -14,7 +14,7 @@ export default function App() {
             <Title>SolidStart - Bare</Title>
             <a href="/">Index</a>
             <a href="/about">About</a>
-            <Suspense>{props.children}</Suspense>
+            <Loading>{props.children}</Loading>
           </Provider>
         </MetaProvider>
       )}

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

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

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

@@ -2,7 +2,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 } from "@solidjs/web";
 import Counter from "~/components/Counter";
 const BreaksOnServer = clientOnly(() => import("~/components/BreaksOnServer"));
 

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": "^0.15.4",
+    "@solidjs/router": "0.17.0-next.3",
     "@solidjs/start": "workspace:*",
-    "solid-js": "^1.9.11",
+    "@solidjs/web": "2.0.0-beta.16",
+    "solid-js": "2.0.0-beta.16",
     "vite": "7.3.1"
   },
   "engines": {

apps/fixtures/hackernews/src/app.tsx

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

apps/fixtures/hackernews/src/components/story.tsx

@@ -10,7 +10,7 @@ const Story: Component<{ story: StoryDefinition }> = props => {
       <span class="title">
         <Show
           when={props.story.url}
-          fallback={<A href={`/item/${props.story.id}`}>{props.story.title}</A>}
+          fallback={<A href={`/stories/${props.story.id}`}>{props.story.title}</A>}
         >
           <a href={props.story.url} target="_blank" rel="noreferrer">
             {props.story.title}

apps/fixtures/hackernews/src/components/toggle.tsx

@@ -5,7 +5,7 @@ export default function Toggle(props: { children: any }) {
 
   return (
     <>
-      <div class="toggle" classList={{ open: open() }}>
+      <div class={["toggle", { open: open() }]}>
         <a onClick={() => setOpen(o => !o)}>{open() ? "[-]" : "[+] comments collapsed"}</a>
       </div>
       <ul class="comment-children" style={{ display: open() ? "block" : "none" }}>

apps/fixtures/hackernews/src/lib/api.ts

@@ -37,6 +37,10 @@ const mapStories = {
 export const getStories = query(
   async (type: StoryTypes, page: number): Promise<StoryDefinition[]> => {
     "use server";
+    const storyType = mapStories[type];
+    if (!storyType) {
+      return [];
+    }
     return fetchAPI(`${mapStories[type]}?page=${page}`);
   },
   "stories",

apps/fixtures/hackernews/src/routes/[...stories].tsx

@@ -1,5 +1,5 @@
-import { createAsync, type RouteDefinition, type RouteSectionProps } from "@solidjs/router";
-import { For, Show } from "solid-js";
+import { A, type RouteDefinition, type RouteSectionProps } from "@solidjs/router";
+import { For, Show, createMemo } from "solid-js";
 import Story from "~/components/story";
 import { getStories } from "~/lib/api";
 import { StoryTypes } from "~/types";
@@ -13,7 +13,7 @@ export const route = {
 export default function Stories(props: RouteSectionProps) {
   const page = () => +props.location.query.page || 1;
   const type = () => (props.params.stories || "top") as StoryTypes;
-  const stories = createAsync(() => getStories(type(), page()));
+  const stories = createMemo(() => getStories(type(), page()));
 
   return (
     <div class="news-view">
@@ -26,9 +26,9 @@ export default function Stories(props: RouteSectionProps) {
             </span>
           }
         >
-          <a class="page-link" href={`/${type()}?page=${page() - 1}`} aria-label="Previous Page">
+          <A class="page-link" href={`/${type()}?page=${page() - 1}`} aria-label="Previous Page">
             {"<"} prev
-          </a>
+          </A>
         </Show>
         <span>page {page()}</span>
         <Show
@@ -39,17 +39,13 @@ export default function Stories(props: RouteSectionProps) {
             </span>
           }
         >
-          <a class="page-link" href={`/${type()}?page=${page() + 1}`} aria-label="Next Page">
+          <A class="page-link" href={`/${type()}?page=${page() + 1}`} aria-label="Next Page">
             more {">"}
-          </a>
+          </A>
         </Show>
       </div>
       <main class="news-list">
-        <Show when={stories()}>
-          <ul>
-            <For each={stories()}>{story => <Story story={story} />}</For>
-          </ul>
-        </Show>
+        <For each={stories()}>{story => <Story story={story} />}</For>
       </main>
     </div>
   );