WIP: Upgrade to solid 2 beta

apps/fixtures/bare/package.json

@@ -8,10 +8,11 @@
   },
   "dependencies": {
     "@solidjs/start": "workspace:*",
-    "solid-js": "^1.9.9",
+    "@solidjs/web": "2.0.0-beta.0",
+    "solid-js": "2.0.0-beta.0",
     "vite": "7.1.10"
   },
   "engines": {
     "node": ">=22"
   }
-}
+}

apps/fixtures/basic/package.json

@@ -10,10 +10,11 @@
     "@solidjs/meta": "^0.29.4",
     "@solidjs/router": "^0.15.0",
     "@solidjs/start": "workspace:*",
-    "solid-js": "^1.9.9",
+    "@solidjs/web": "2.0.0-beta.0",
+    "solid-js": "2.0.0-beta.0",
     "vite": "7.1.10"
   },
   "engines": {
     "node": ">=22"
   }
-}
+}

apps/fixtures/basic/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() {
@@ -12,7 +12,7 @@ export default function App() {
           <Title>SolidStart - Basic</Title>
           <a href="/">Index</a>
           <a href="/about">About</a>
-          <Suspense>{props.children}</Suspense>
+          <Loading>{props.children}</Loading>
         </MetaProvider>
       )}
     >

apps/fixtures/css/package.json

@@ -11,7 +11,8 @@
     "@solidjs/meta": "^0.29.4",
     "@solidjs/router": "^0.15.0",
     "@solidjs/start": "workspace:*",
-    "solid-js": "^1.9.9",
+    "@solidjs/web": "2.0.0-beta.0",
+    "solid-js": "2.0.0-beta.0",
     "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

@@ -10,7 +10,8 @@
     "@solidjs/meta": "^0.29.4",
     "@solidjs/router": "^0.15.0",
     "@solidjs/start": "workspace:*",
-    "solid-js": "^1.9.9",
+    "@solidjs/web": "2.0.0-beta.0",
+    "solid-js": "2.0.0-beta.0",
     "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,7 @@
   "dependencies": {
     "@solidjs/router": "^0.15.0",
     "@solidjs/start": "workspace:*",
-    "solid-js": "^1.9.9",
+    "solid-js": "2.0.0-beta.0",
     "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/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/nitro-3/package.json

@@ -11,7 +11,7 @@
     "@solidjs/meta": "^0.29.4",
     "@solidjs/router": "^0.15.0",
     "@solidjs/start": "workspace:*",
-    "solid-js": "^1.9.9",
+    "solid-js": "2.0.0-beta.0",
     "nitro": "^3.0.1-alpha.2",
     "vite": "7.1.10"
   },

apps/fixtures/nitro-3/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() {
@@ -12,7 +12,7 @@ export default function App() {
           <Title>SolidStart - Basic</Title>
           <a href="/">Index</a>
           <a href="/about">About</a>
-          <Suspense>{props.children}</Suspense>
+          <Loading>{props.children}</Loading>
         </MetaProvider>
       )}
     >

apps/fixtures/notes/package.json

@@ -11,7 +11,7 @@
     "@solidjs/start": "workspace:*",
     "date-fns": "^3.6.0",
     "marked": "^12.0.1",
-    "solid-js": "^1.9.9",
+    "solid-js": "2.0.0-beta.0",
     "unstorage": "1.10.2",
     "vite": "7.1.10"
   },

apps/fixtures/notes/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 EditButton from "~/components/EditButton";
 import NoteList from "~/components/NoteList";
 import { getNotes } from "~/lib/api";
@@ -31,13 +31,13 @@ export default function App() {
               <EditButton>New</EditButton>
             </section>
             <nav>
-              <Suspense fallback="Loading Notes..">
+              <Loading fallback="Loading Notes..">
                 <NoteList searchText={props.location.query.searchText || ""} />
-              </Suspense>
+              </Loading>
             </nav>
           </section>
           <section class="col note-viewer">
-            <Suspense fallback="Loading Content">{props.children}</Suspense>
+            <Loading fallback="Loading Content">{props.children}</Loading>
           </section>
         </div>
       )}

apps/fixtures/notes/src/components/SearchField.tsx

@@ -6,11 +6,11 @@
  *
  */
 import { useSearchParams } from "@solidjs/router";
-import { useTransition } from "solid-js";
+import { isPending } from "solid-js";
 
 export default function SearchField() {
-  const [isSearching] = useTransition();
   const [search, setParams] = useSearchParams();
+  const isSearching = () => isPending(() => search.searchText);
   return (
     <form class="search" role="search" onSubmit={e => e.preventDefault()} $ServerOnly>
       <label class="offscreen" for="sidebar-search-input">

apps/fixtures/notes/src/components/SidebarNote.tsx

@@ -7,25 +7,27 @@
  */
 
 import { useLocation } from "@solidjs/router";
-import { createEffect, createSignal, Show, useTransition } from "solid-js";
+import { createEffect, createSignal, Show } from "solid-js";
 import { Note } from "~/lib/types";
 
 export default function SidebarNote(props: { note: Note }) {
   const location = useLocation();
-  const [isPending] = useTransition();
   const [isExpanded, setIsExpanded] = createSignal(false);
   const isActive = () => {
     return location.pathname.startsWith(`/notes/${props.note.id}`);
   };
   let itemRef!: HTMLDivElement;
 
   let title = props.note.title;
-  createEffect(() => {
-    if (props.note.title !== title) {
-      title = props.note.title;
-      itemRef.classList.add("flash");
-    }
-  });
+  createEffect(
+    () => props.note.title,
+    (newTitle) => {
+      if (newTitle !== title) {
+        title = newTitle;
+        itemRef.classList.add("flash");
+      }
+    },
+  );
 
   return (
     <div
@@ -46,9 +48,7 @@ export default function SidebarNote(props: { note: Note }) {
         href={`/notes/${props.note.id}`}
         class="sidebar-note-open"
         style={{
-          "background-color": isPending()
-            ? "var(--gray-80)"
-            : isActive()
+          "background-color": isActive()
               ? "var(--tertiary-blue)"
               : "",
           border: isActive() ? "1px solid var(--primary-border)" : "1px solid transparent",

apps/fixtures/todomvc/package.json

@@ -10,7 +10,7 @@
   "dependencies": {
     "@solidjs/router": "^0.15.0",
     "@solidjs/start": "workspace:*",
-    "solid-js": "^1.9.9",
+    "solid-js": "2.0.0-beta.0",
     "unstorage": "1.10.2",
     "vite": "7.1.10"
   },

apps/fixtures/todomvc/src/app.tsx

@@ -1,11 +1,11 @@
 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 => <Suspense>{props.children}</Suspense>}>
+    <Router root={props => <Loading>{props.children}</Loading>}>
       <FileRoutes />
     </Router>
   );

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

@@ -20,12 +20,10 @@ import { Todo } from "~/types";
 
 declare module "solid-js" {
   namespace JSX {
-    interface Directives {
-      setFocus: true;
-    }
+    interface ExplicitProperties {}
   }
 }
-const setFocus = (el: HTMLElement) => setTimeout(() => el.focus());
+const setFocus = () => (el: HTMLElement) => setTimeout(() => el.focus());
 
 export const route = {
   preload() {
@@ -108,12 +106,11 @@ export default function TodoApp(props: RouteSectionProps) {
               return (
                 <Show when={!removing()}>
                   <li
-                    class="todo"
-                    classList={{
+                    class={["todo", {
                       editing: editingTodoId() === todo.id,
                       completed: completed(),
                       pending: pending(),
-                    }}
+                    }]}
                   >
                     <form class="view" method="post">
                       <button
@@ -144,7 +141,7 @@ export default function TodoApp(props: RouteSectionProps) {
                               e.currentTarget.form!.requestSubmit();
                             } else setTimeout(() => setEditing({}));
                           }}
-                          use:setFocus
+                          ref={setFocus()}
                         />
                       </form>
                     </Show>
@@ -175,20 +172,20 @@ export default function TodoApp(props: RouteSectionProps) {
             <li>
               <a
                 href="?show=all"
-                classList={{ selected: !location.query.show || location.query.show === "all" }}
+                class={{ selected: !location.query.show || location.query.show === "all" }}
               >
                 All
               </a>
             </li>
             <li>
-              <a href="?show=active" classList={{ selected: location.query.show === "active" }}>
+              <a href="?show=active" class={{ selected: location.query.show === "active" }}>
                 Active
               </a>
             </li>
             <li>
               <a
                 href="?show=completed"
-                classList={{ selected: location.query.show === "completed" }}
+                class={{ selected: location.query.show === "completed" }}
               >
                 Completed
               </a>

apps/landing-page/package.json

@@ -26,7 +26,7 @@
     "@solidjs/start": "workspace:*",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
-    "solid-js": "^1.9.9",
+    "solid-js": "2.0.0-beta.0",
     "solid-motionone": "^1.0.4",
     "solid-transition-group": "^0.3.0"
   }