WIP: Upgrade to solid 2 beta

apps/fixtures/bare/package.json

@@ -8,7 +8,8 @@
   },
   "dependencies": {
     "@solidjs/start": "workspace:*",
-    "solid-js": "^1.9.9",
+    "@solidjs/web": "2.0.0-beta.3",
+    "solid-js": "2.0.0-beta.3",
     "vite": "7.1.10"
   },
   "engines": {

apps/fixtures/basic/package.json

@@ -7,10 +7,11 @@
     "build": "vite build"
   },
   "dependencies": {
-    "@solidjs/meta": "^0.29.4",
+    "@solidjs/meta": "0.30.0-next.0",
     "@solidjs/router": "^0.15.0",
     "@solidjs/start": "workspace:*",
-    "solid-js": "^1.9.9",
+    "@solidjs/web": "2.0.0-beta.3",
+    "solid-js": "2.0.0-beta.3",
     "vite": "7.1.10"
   },
   "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/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/meta": "0.30.0-next.0",
     "@solidjs/router": "^0.15.0",
     "@solidjs/start": "workspace:*",
-    "solid-js": "^1.9.9",
+    "@solidjs/web": "2.0.0-beta.3",
+    "solid-js": "2.0.0-beta.3",
     "vite": "7.1.10"
   },
   "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,13 @@
-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/experiments/package.json

@@ -7,10 +7,11 @@
     "build": "vite build"
   },
   "dependencies": {
-    "@solidjs/meta": "^0.29.4",
+    "@solidjs/meta": "0.30.0-next.0",
     "@solidjs/router": "^0.15.0",
     "@solidjs/start": "workspace:*",
-    "solid-js": "^1.9.9",
+    "@solidjs/web": "2.0.0-beta.3",
+    "solid-js": "2.0.0-beta.3",
     "vite": "7.1.10"
   },
   "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/hackernews/package.json

@@ -9,7 +9,8 @@
   "dependencies": {
     "@solidjs/router": "^0.15.0",
     "@solidjs/start": "workspace:*",
-    "solid-js": "^1.9.9",
+    "@solidjs/web": "2.0.0-beta.3",
+    "solid-js": "2.0.0-beta.3",
     "vite": "7.1.10"
   },
   "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/comment.tsx

@@ -13,7 +13,7 @@ const Comment: Component<{ comment: CommentDefinition }> = props => {
       <div class="text" innerHTML={props.comment.content} />
       <Show when={props.comment.comments.length}>
         <Toggle>
-          <For each={props.comment.comments}>{comment => <Comment comment={comment} />}</For>
+          <For each={props.comment.comments}>{comment => <Comment comment={comment()} />}</For>
         </Toggle>
       </Show>
     </li>

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>
   );

apps/fixtures/hackernews/src/routes/stories/[id].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 Comment from "~/components/comment";
 import { getStory } from "~/lib/api";
 
@@ -10,31 +10,29 @@ export const route = {
 } satisfies RouteDefinition;
 
 export default function Story(props: RouteSectionProps) {
-  const story = createAsync(() => getStory(props.params.id));
+  const story = createMemo(() => getStory(props.params.id));
   return (
-    <Show when={story()}>
-      <div class="item-view">
-        <div class="item-view-header">
-          <a href={story()!.url} target="_blank">
-            <h1>{story()!.title}</h1>
-          </a>
-          <Show when={story()!.domain}>
-            <span class="host">({story()!.domain})</span>
-          </Show>
-          <p class="meta">
-            {story()!.points} points | by <a href={`/users/${story()!.user}`}>{story()!.user}</a>{" "}
-            {story()!.time_ago} ago
-          </p>
-        </div>
-        <div class="item-view-comments">
-          <p class="item-view-comments-header">
-            {story()!.comments_count ? story()!.comments_count + " comments" : "No comments yet."}
-          </p>
-          <ul class="comment-children">
-            <For each={story()!.comments}>{comment => <Comment comment={comment} />}</For>
-          </ul>
-        </div>
+    <div class="item-view">
+      <div class="item-view-header">
+        <a href={story().url} target="_blank">
+          <h1>{story().title}</h1>
+        </a>
+        <Show when={story().domain}>
+          <span class="host">({story().domain})</span>
+        </Show>
+        <p class="meta">
+          {story().points} points | by <A href={`/users/${story().user}`}>{story().user}</A>{" "}
+          {story().time_ago} ago
+        </p>
       </div>
-    </Show>
+      <div class="item-view-comments">
+        <p class="item-view-comments-header">
+          {story().comments_count ? story().comments_count + " comments" : "No comments yet."}
+        </p>
+        <ul class="comment-children">
+          <For each={story().comments}>{comment => <Comment comment={comment()} />}</For>
+        </ul>
+      </div>
+    </div>
   );
 }