solidjs-community · brenelz · May 4, 2026 · May 4, 2026 · May 16, 2026 · May 17, 2026
diff --git a/package.json b/package.json
@@ -35,7 +35,7 @@
     "@babel/core": "^7.27.0",
     "@changesets/cli": "^2.29.4",
     "@nothing-but/node-resolve-ts": "^1.0.1",
-    "@solidjs/start": "^1.1.4",
+    "@solidjs/web": "2.0.0-beta.10",
     "@types/jsdom": "^21.1.7",
     "@types/node": "^22.15.31",
     "@typescript-eslint/eslint-plugin": "^8.34.0",
@@ -53,12 +53,11 @@
     "rehype-highlight": "^7.0.2",
     "rehype-slug": "^6.0.0",
     "remark-gfm": "^4.0.1",
-    "solid-js": "2.0.0-beta.13",
+    "solid-js": "2.0.0-beta.10",
     "typescript": "^5.8.3",
-    "vinxi": "^0.5.7",
     "vite": "^6.3.5",
-    "babel-preset-solid": "2.0.0-beta.13",
-    "vite-plugin-solid": "^2.11.6",
+    "vite-plugin-solid": "3.0.0-next.5",
+    "babel-preset-solid": "2.0.0-beta.10",
     "vitest": "^2.1.9"
   },
   "packageManager": "pnpm@11.1.1",

diff --git a/packages/virtual/package.json b/packages/virtual/package.json
@@ -63,7 +63,7 @@
   "devDependencies": {
     "@babel/core": "^7.27.0",
     "@solidjs/web": "2.0.0-beta.13",
-    "babel-preset-solid": "2.0.0-beta.13",
+    "babel-preset-solid": "2.0.0-beta.10",
     "solid-js": "2.0.0-beta.13"
   }
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/site/package.json b/site/package.json
@@ -20,9 +20,10 @@
     "tailwindcss": "3.3.3",
     "tailwindcss-dir": "^4.0.0",
     "vite": "^8.0.8",
-    "vite-plugin-solid": "^2.11.12"
+    "vite-plugin-solid": "3.0.0-next.5"
   },
   "dependencies": {
+    "@solidjs/web": "2.0.0-beta.10",
     "@solid-primitives/clipboard": "workspace:^",
     "@solid-primitives/event-bus": "workspace:^",
     "@solid-primitives/event-listener": "workspace:^",
@@ -39,8 +40,8 @@
     "@solid-primitives/scroll": "workspace:^",
     "@solid-primitives/tween": "workspace:^",
     "@solid-primitives/utils": "workspace:^",
-    "@tanstack/solid-router": "^1.168.16",
-    "@tanstack/solid-start": "^1.167.28",
+    "@tanstack/solid-router": "^2.0.0-beta.17",
+    "@tanstack/solid-start": "^2.0.0-beta.17",
     "clsx": "^2.0.0",
     "fuse.js": "^7.0.0",
     "rehype-sanitize": "^6.0.0",

diff --git a/site/src/api.ts b/site/src/api.ts
@@ -1,4 +1,4 @@
-import { isServer } from "solid-js/web";
+import { isServer } from "@solidjs/web";
 import type { PackageData, PackageListItem } from "./types.js";
 
 const GEN_DIR = "_generated";

diff --git a/site/src/client.tsx b/site/src/client.tsx
@@ -1,5 +1,5 @@
 import { debounce } from "@solid-primitives/scheduled";
-import { hydrate } from "solid-js/web";
+import { hydrate } from "@solidjs/web";
 import { hydrateStart, StartClient } from "@tanstack/solid-start/client";
 
 // Primitives/Table.tsx produces a lot of hydration warnings in development mode.

diff --git a/site/src/components/BundleSizeModal/BundleSizeModal.tsx b/site/src/components/BundleSizeModal/BundleSizeModal.tsx
@@ -1,7 +1,7 @@
 import { createVisibilityObserver } from "@solid-primitives/intersection-observer";
 import { isIOS, isSafari } from "@solid-primitives/platform";
 import { createResizeObserver } from "@solid-primitives/resize-observer";
-import { type Component, createSignal, For, onMount } from "solid-js";
+import { type Component, createSignal, For, onSettled } from "solid-js";
 import type { Bundlesize, BundlesizeItem } from "~/types.js";
 
 const SHARED_HEADERS = ["Minified", "Minified + GZipped"] as const;
@@ -81,7 +81,7 @@ const BundleSizeModal: Component<{
     });
   };
 
-  onMount(() => {
+  onSettled(() => {
     fitFont();
   });
 
@@ -106,7 +106,9 @@ const BundleSizeModal: Component<{
               <tr class="bg-page-main-bg font-semibold text-[#49494B] dark:text-[#b7c1d0]">
                 <For each={PACKAGE_TH_HEADERS}>
                   {item => (
-                    <th class="xxs:text-sm p-1 text-center text-xs md:px-3 md:text-base">{item}</th>
+                    <th class="xxs:text-sm p-1 text-center text-xs md:px-3 md:text-base">
+                      {item()}
+                    </th>
                   )}
                 </For>
               </tr>
@@ -151,7 +153,9 @@ const BundleSizeModal: Component<{
               <tr class="bg-page-main-bg font-semibold text-[#49494B] dark:text-[#b7c1d0]">
                 <For each={PRIMITIVE_TH_HEADERS}>
                   {item => (
-                    <th class="xxs:text-sm p-1 text-center text-xs md:px-3 md:text-base">{item}</th>
+                    <th class="xxs:text-sm p-1 text-center text-xs md:px-3 md:text-base">
+                      {item()}
+                    </th>
                   )}
                 </For>
                 <th
@@ -163,21 +167,24 @@ const BundleSizeModal: Component<{
             </thead>
             <tbody>
               <For each={props.primitives}>
-                {item => (
-                  <tr class="word-spacing-[-2px] even:bg-page-main-bg odd:bg-[#f6fbff] dark:odd:bg-[#2b3f4a]">
-                    <td class="p-1 text-sm md:px-3 md:text-base" data-primitive-td>
-                      <span class="inline-block" data-primitive-span>
-                        {item.name}
-                      </span>
-                    </td>
-                    <td class="whitespace-nowrap p-1 text-center text-sm md:px-3 md:text-base">
-                      {item.min.join(" ")}
-                    </td>
-                    <td class="whitespace-nowrap p-1 text-center text-sm md:px-3 md:text-base">
-                      {item.gzip.join(" ")}
-                    </td>
-                  </tr>
-                )}
+                {item => {
+                  const primitive = item();
+                  return (
+                    <tr class="word-spacing-[-2px] even:bg-page-main-bg odd:bg-[#f6fbff] dark:odd:bg-[#2b3f4a]">
+                      <td class="p-1 text-sm md:px-3 md:text-base" data-primitive-td>
+                        <span class="inline-block" data-primitive-span>
+                          {primitive.name}
+                        </span>
+                      </td>
+                      <td class="whitespace-nowrap p-1 text-center text-sm md:px-3 md:text-base">
+                        {primitive.min.join(" ")}
+                      </td>
+                      <td class="whitespace-nowrap p-1 text-center text-sm md:px-3 md:text-base">
+                        {primitive.gzip.join(" ")}
+                      </td>
+                    </tr>
+                  );
+                }}
               </For>
             </tbody>
           </table>

diff --git a/site/src/components/Footer/Footer.tsx b/site/src/components/Footer/Footer.tsx
@@ -1,37 +1,35 @@
 import { type Component } from "solid-js";
-
 const Footer: Component = () => {
-  return (
-    <footer class="mt-10 bg-[#F3F5F7] dark:bg-slate-800/50">
-      <div class="prose mx-auto max-w-[864px] p-4 py-8 leading-7">
-        <p class="text-center">
-          This site is built with{" "}
-          <a class="text-link" href="https://www.solidjs.com" target="_blank">
-            SolidJS
-          </a>
-          ,{" "}
-          <a
-            class="text-link"
-            href="https://tanstack.com/start/latest/docs/framework/solid/overview"
-            target="_blank"
-          >
-            TanStack Start for Solid
-          </a>
-          , and best of all ...{" "}
-          <span class="whitespace-nowrap">
-            <a
-              class="text-link"
-              href="https://github.com/solidjs-community/solid-primitives"
-              target="_blank"
-            >
-              Solid Primitives
-            </a>
-          </span>
-          !
-        </p>
-      </div>
-    </footer>
-  );
+    return (
+        <footer class="mt-10 bg-[#F3F5F7] dark:bg-slate-800/50">
+            <div class="prose mx-auto max-w-[864px] p-4 py-8 leading-7">
+                <p class="text-center">
+                    This site is built with{" "}
+                    <a class="text-link" href="https://www.solidjs.com" target="_blank">
+                        SolidJS
+                    </a>
+                    ,{" "}
+                    <a
+                        class="text-link"
+                        href="https://tanstack.com/start/latest/docs/framework/solid/overview"
+                        target="_blank"
+                    >
+                        TanStack Start for Solid
+                    </a>
+                    , and best of all ...{" "}
+                    <span class="whitespace-nowrap">
+                        <a
+                            class="text-link"
+                            href="https://github.com/solidjs-community/solid-primitives"
+                            target="_blank"
+                        >
+                            Solid Primitives
+                        </a>
+                    </span>
+                    !
+                </p>
+            </div>
+        </footer>
+    );
 };
-
 export default Footer;