Migrate Solid to 2.0

.github/workflows/test-perf.yml

@@ -82,7 +82,13 @@ jobs:
         run: |
           BASE_SHA="${{ github.event.pull_request.base.sha }}"
           git fetch origin "$BASE_SHA" --depth=1
-          if git cat-file -e "$BASE_SHA:packages/react-grab/src" 2>/dev/null; then
+          PACKAGE_DEPENDENCY_FIELDS='{ dependencies, devDependencies, optionalDependencies, peerDependencies }'
+          if ! diff --brief \
+            <(git show "$BASE_SHA:packages/react-grab/package.json" | jq --sort-keys "$PACKAGE_DEPENDENCY_FIELDS") \
+            <(jq --sort-keys "$PACKAGE_DEPENDENCY_FIELDS" packages/react-grab/package.json) >/dev/null; then
+            echo "React Grab's dependencies changed; skipping the incompatible baseline run."
+            echo "swapped=false" >> "$GITHUB_OUTPUT"
+          elif git cat-file -e "$BASE_SHA:packages/react-grab/src" 2>/dev/null; then
             git checkout "$BASE_SHA" -- packages/react-grab/src
             echo "swapped=true" >> "$GITHUB_OUTPUT"
             echo "Swapped react-grab/src to base revision $BASE_SHA"
@@ -150,7 +156,15 @@ jobs:
       - name: Compute baseline-vs-current diff
         if: github.event_name == 'pull_request' && needs.perf-shard.result == 'success'
         run: |
-          node packages/react-grab/scripts/diff-perf-runs.mjs packages/react-grab/perf/baseline packages/react-grab/perf/current | tee perf-diff.md >> "$GITHUB_STEP_SUMMARY"
+          if [[ -d packages/react-grab/perf/baseline && -d packages/react-grab/perf/current ]]; then
+            node packages/react-grab/scripts/diff-perf-runs.mjs packages/react-grab/perf/baseline packages/react-grab/perf/current | tee perf-diff.md >> "$GITHUB_STEP_SUMMARY"
+          else
+            {
+              echo "## Performance comparison skipped"
+              echo
+              echo "A compatible base-source run was unavailable, so only current-source performance tests were executed."
+            } | tee perf-diff.md >> "$GITHUB_STEP_SUMMARY"
+          fi
 
       - name: Upload perf diff
         if: always() && github.event_name == 'pull_request'

apps/openstory/package.json

@@ -13,14 +13,16 @@
     "openstory": "^0.1.0"
   },
   "devDependencies": {
+    "@solidjs/vite-plugin": "3.0.0-next.28",
+    "@solidjs/web": "2.0.0-rc.0",
     "@types/node": "^25.6.2",
     "@types/react": "^19.2.14",
     "@types/react-dom": "^19.2.3",
     "react-grab": "workspace:*",
-    "solid-js": "^1.9.12",
+    "solid-js": "2.0.0-rc.0",
     "typescript": "^6.0.3",
     "vite": "npm:@voidzero-dev/vite-plus-core@^0.1.20",
-    "vite-plugin-solid": "^2.11.12"
+    "vite-plugin-solid": "3.0.0-next.27"
   },
   "optionalDependencies": {
     "react": "19.2.6",

apps/openstory/preview.tsx

@@ -1,4 +1,4 @@
-import type { JSX } from "solid-js";
+import type { JSX } from "@solidjs/web";
 import "react-grab/dist/styles.css";
 import type { Preview } from "openstory/solid";
 

apps/openstory/stories/playground/freeze-demo.stories.tsx

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from "openstory/solid";
-import { onCleanup, onMount } from "solid-js";
+import { onSettled } from "solid-js";
 import { createElement } from "react";
 import { createRoot, type Root } from "react-dom/client";
 
@@ -9,11 +9,11 @@ import { BouncingTimer } from "./bouncing-timer.react.js";
 const ReactHost = () => {
   let hostElement: HTMLDivElement | undefined;
 
-  onMount(() => {
+  onSettled(() => {
     if (!hostElement) return;
     const reactRoot: Root = createRoot(hostElement);
     reactRoot.render(createElement(BouncingTimer));
-    onCleanup(() => reactRoot.unmount());
+    return () => reactRoot.unmount();
   });
 
   return <div ref={hostElement} style={{ height: "100vh", width: "100vw" }} />;

apps/openstory/stories/playground/live-updates.stories.tsx

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from "openstory/solid";
-import { onCleanup, onMount } from "solid-js";
+import { onSettled } from "solid-js";
 import { createElement } from "react";
 import { createRoot, type Root } from "react-dom/client";
 
@@ -9,11 +9,11 @@ import { LiveCounter } from "./live-counter.react.js";
 const ReactHost = () => {
   let hostElement: HTMLDivElement | undefined;
 
-  onMount(() => {
+  onSettled(() => {
     if (!hostElement) return;
     const reactRoot: Root = createRoot(hostElement);
     reactRoot.render(createElement(LiveCounter));
-    onCleanup(() => reactRoot.unmount());
+    return () => reactRoot.unmount();
   });
 
   return <div ref={hostElement} style={{ "min-height": "100vh" }} />;

apps/openstory/stories/renderer.stories.tsx

@@ -1,4 +1,4 @@
-import { createEffect, createSignal, on, onCleanup, onMount } from "solid-js";
+import { createEffect, createSignal, onSettled } from "solid-js";
 import type { Meta, StoryContext, StoryObj } from "openstory/solid";
 import { expect, waitFor } from "openstory/test";
 import { ReactGrabRenderer } from "@react-grab-source/components/renderer.js";
@@ -89,16 +89,16 @@ const Scene = (props: SceneProps) => {
     });
   };
 
-  onMount(() => {
+  onSettled(() => {
     recompute();
     window.addEventListener("resize", recompute);
-    onCleanup(() => {
+    return () => {
       window.removeEventListener("resize", recompute);
       if (pendingFrameHandle !== null) cancelAnimationFrame(pendingFrameHandle);
-    });
+    };
   });
 
-  createEffect(on(() => props.selectedElement, scheduleRecompute, { defer: true }));
+  createEffect(() => props.selectedElement, scheduleRecompute, { defer: true });
 
   const elementMeta = (): ElementMeta => {
     const element = elementRefs[props.selectedElement];

apps/openstory/stories/target-box.tsx

@@ -1,4 +1,5 @@
-import type { Component, JSX } from "solid-js";
+import type { Component } from "solid-js";
+import type { JSX } from "@solidjs/web";
 import { DEMO_BOUNDS } from "./demo-bounds.js";
 
 export const TargetBox: Component = () => (

apps/openstory/tsconfig.json

@@ -4,7 +4,7 @@
     "module": "ESNext",
     "moduleResolution": "Bundler",
     "jsx": "preserve",
-    "jsxImportSource": "solid-js",
+    "jsxImportSource": "@solidjs/web",
     "strict": true,
     "noEmit": true,
     "esModuleInterop": true,

apps/openstory/vite.config.ts

@@ -1,10 +1,10 @@
 import { fileURLToPath } from "node:url";
 import { defineConfig } from "vite";
-import solid from "vite-plugin-solid";
+import solid from "@solidjs/vite-plugin";
 import { openstory } from "openstory/plugin";
 import { solidSourceLocationBabelPlugin } from "../../packages/react-grab/solid-source-location-babel-plugin.js";
 
-const REACT_FILE_PATTERN = /\.react\.tsx$/;
+const REACT_FILE_PATTERN = "**/*.react.tsx";
 
 export default defineConfig(({ command }) => ({
   plugins: [
@@ -21,11 +21,12 @@ export default defineConfig(({ command }) => ({
   ],
   resolve: {
     alias: {
+      "solid-js/web": "@solidjs/web",
       "@react-grab-source": fileURLToPath(
         new URL("../../packages/react-grab/src", import.meta.url),
       ),
     },
-    dedupe: ["solid-js", "solid-js/web"],
+    dedupe: ["solid-js", "@solidjs/web"],
   },
   define: {
     "process.env.VERSION": JSON.stringify("[DEV]"),

packages/react-grab/e2e/solid-source-location.spec.ts

@@ -6,8 +6,8 @@ import { SOLID_SOURCE_LOCATION_ATTRIBUTE } from "../src/utils/resolve-solid-sour
 const TOOLBAR_ACTION_SELECTOR = "[data-react-grab-toolbar-action]";
 const TOOLBAR_ACTION_SOURCE_PATH =
   "packages/react-grab/src/components/toolbar/toolbar-action-button.tsx";
-const TOOLBAR_ACTION_SOURCE_LINE_NUMBER = 24;
-const TOOLBAR_ACTION_SOURCE_COLUMN_NUMBER = 5;
+const TOOLBAR_ACTION_SOURCE_LINE_NUMBER = 39;
+const TOOLBAR_ACTION_SOURCE_COLUMN_NUMBER = 7;
 
 test("exposes exact Solid sources only in development", async ({ reactGrab }, testInfo) => {
   await reactGrab.activate();

packages/react-grab/package.json

@@ -117,14 +117,15 @@
     "@jridgewell/trace-mapping": "^0.3.31",
     "@playwright/test": "^1.59.1",
     "@react-grab/playwright-coverage": "workspace:*",
+    "@solidjs/web": "2.0.0-rc.0",
     "@tailwindcss/cli": "^4.3.0",
     "@types/babel__core": "^7.20.5",
     "@types/node": "^25.6.2",
     "@types/react": "^19.2.14",
-    "babel-preset-solid": "^1.9.12",
+    "babel-preset-solid": "2.0.0-rc.0",
     "concurrently": "^9.2.1",
     "expect-sdk": "^0.1.2",
-    "solid-js": "^1.9.12",
+    "solid-js": "2.0.0-rc.0",
     "tailwindcss": "^4.3.0",
     "tsx": "^4.21.0",
     "vite-plus": "^0.1.20"

packages/react-grab/solid-babel-plugin.ts

@@ -33,14 +33,14 @@ export const cssTextPlugin = () => {
 
 export const solidWebBrowserPlugin = () => {
   const require = createRequire(import.meta.url);
-  const serverPath = require.resolve("solid-js/web");
+  const serverPath = require.resolve("@solidjs/web");
   const distDir = dirname(serverPath);
   const browserPath = resolve(distDir, "web.js");
   return {
     name: "solid-web-browser",
     enforce: "pre" as const,
     resolveId(source: string) {
-      if (source === "solid-js/web") return browserPath;
+      if (source === "@solidjs/web") return browserPath;
     },
   };
 };

packages/react-grab/src/components/context-menu.tsx

@@ -3,9 +3,7 @@ import {
   createMemo,
   createSignal,
   For,
-  on,
-  onCleanup,
-  onMount,
+  onSettled,
   Show,
   type Component,
 } from "solid-js";
@@ -98,8 +96,8 @@ export const ContextMenu: Component<ContextMenuProps> = (props) => {
   // Elements that were just mounted may not have been laid out yet, so without
   // deferring to the next frame the measured dimensions are zero and the menu
   // would flash at the wrong position before jumping to its correct spot.
-  createEffect(() => {
-    if (isVisible()) {
+  createEffect(isVisible, (visible) => {
+    if (visible) {
       nativeRequestAnimationFrame(measureContainer);
     }
   });
@@ -174,43 +172,41 @@ export const ContextMenu: Component<ContextMenuProps> = (props) => {
   // restore focus to whatever the host page had focused — but only if
   // nothing else has already claimed focus (e.g. the prompt-mode textarea
   // that an action opened), so we do not yank it back.
-  createEffect(
-    on(isVisible, (visible) => {
-      if (visible) {
-        // document.activeElement returns the shadow host when focus is
-        // inside the shadow root, so use the host's shadowRoot.activeElement
-        // to detect a focused element that already lives in our own DOM
-        // tree; we should not capture our own host as "previous".
-        const hostShadowRoot = containerRef?.getRootNode();
-        const focusInsideHost =
-          hostShadowRoot instanceof ShadowRoot ? hostShadowRoot.activeElement : null;
-        const pageActiveElement = document.activeElement;
-        const wasFocusedOnPage =
-          pageActiveElement instanceof HTMLElement &&
-          focusInsideHost === null &&
-          !(containerRef instanceof Element && containerRef.contains(pageActiveElement));
-        previouslyFocusedElement = wasFocusedOnPage ? pageActiveElement : null;
-        menuContainerRef?.focus({ preventScroll: true });
-        return;
-      }
-      menuStore.setActiveItem(null);
-      const restoreTarget = previouslyFocusedElement;
-      previouslyFocusedElement = null;
-      if (!(restoreTarget instanceof HTMLElement) || !document.contains(restoreTarget)) return;
-      // Defer to the next frame so an action-triggered focus move (e.g.
-      // the prompt textarea focusing itself via queueMicrotask) lands
-      // first. If something other than the body has focus by then, the
-      // action's side effect deserves to keep it.
-      nativeRequestAnimationFrame(() => {
-        const currentActive = document.activeElement;
-        const isOrphanedFocus = currentActive === null || currentActive === document.body;
-        if (!isOrphanedFocus) return;
-        restoreTarget.focus({ preventScroll: true });
-      });
-    }),
-  );
+  createEffect(isVisible, (visible) => {
+    if (visible) {
+      // document.activeElement returns the shadow host when focus is
+      // inside the shadow root, so use the host's shadowRoot.activeElement
+      // to detect a focused element that already lives in our own DOM
+      // tree; we should not capture our own host as "previous".
+      const hostShadowRoot = containerRef?.getRootNode();
+      const focusInsideHost =
+        hostShadowRoot instanceof ShadowRoot ? hostShadowRoot.activeElement : null;
+      const pageActiveElement = document.activeElement;
+      const wasFocusedOnPage =
+        pageActiveElement instanceof HTMLElement &&
+        focusInsideHost === null &&
+        !(containerRef instanceof Element && containerRef.contains(pageActiveElement));
+      previouslyFocusedElement = wasFocusedOnPage ? pageActiveElement : null;
+      menuContainerRef?.focus({ preventScroll: true });
+      return;
+    }
+    menuStore.setActiveItem(null);
+    const restoreTarget = previouslyFocusedElement;
+    previouslyFocusedElement = null;
+    if (!(restoreTarget instanceof HTMLElement) || !document.contains(restoreTarget)) return;
+    // Defer to the next frame so an action-triggered focus move (e.g.
+    // the prompt textarea focusing itself via queueMicrotask) lands
+    // first. If something other than the body has focus by then, the
+    // action's side effect deserves to keep it.
+    nativeRequestAnimationFrame(() => {
+      const currentActive = document.activeElement;
+      const isOrphanedFocus = currentActive === null || currentActive === document.body;
+      if (!isOrphanedFocus) return;
+      restoreTarget.focus({ preventScroll: true });
+    });
+  });
 
-  onMount(() => {
+  onSettled(() => {
     measureContainer();
 
     const handleKeyDown = (event: KeyboardEvent) => {
@@ -278,10 +274,10 @@ export const ContextMenu: Component<ContextMenuProps> = (props) => {
     const gatedHandleKeyDown = ignoreRealInput(handleKeyDown);
     window.addEventListener("keydown", gatedHandleKeyDown, { capture: true });
 
-    onCleanup(() => {
+    return () => {
       unregisterOverlayDismiss();
       window.removeEventListener("keydown", gatedHandleKeyDown, { capture: true });
-    });
+    };
   });
 
   const accessibleMenuLabel = createMemo(() => {

packages/react-grab/src/components/frozen-glow.tsx

@@ -1,4 +1,4 @@
-import { createEffect, createSignal, onCleanup, onMount, type Component } from "solid-js";
+import { createEffect, createSignal, onSettled, type Component } from "solid-js";
 import {
   FADE_DURATION_MS,
   FROZEN_GLOW_COLOR,
@@ -27,24 +27,27 @@ export const FrozenGlow: Component<FrozenGlowProps> = (props) => {
   if (scopeContainer) {
     const handleViewportChange = () => setScopeRect(measureRect());
 
-    onMount(() => {
+    onSettled(() => {
       const resizeObserver = new ResizeObserver(handleViewportChange);
       resizeObserver.observe(scopeContainer);
       window.addEventListener("scroll", handleViewportChange, { capture: true, passive: true });
       window.addEventListener("resize", handleViewportChange);
-      onCleanup(() => {
+      return () => {
         resizeObserver.disconnect();
         window.removeEventListener("scroll", handleViewportChange, { capture: true });
         window.removeEventListener("resize", handleViewportChange);
-      });
+      };
     });
 
     // ResizeObserver misses position-only layout shifts (e.g. content above
     // the container expanding while the showcase is idle), so re-measure at
     // the moment the glow fades in — the only time a stale rect would show.
-    createEffect(() => {
-      if (props.visible) handleViewportChange();
-    });
+    createEffect(
+      () => props.visible,
+      (visible) => {
+        if (visible) handleViewportChange();
+      },
+    );
   }
 
   const top = () => {

packages/react-grab/src/components/menu/menu-item.tsx

@@ -1,4 +1,5 @@
-import { onCleanup, onMount, type Component, type JSX } from "solid-js";
+import { onCleanup, onSettled, type Component } from "solid-js";
+import type { JSX } from "@solidjs/web";
 import { cn } from "../../utils/cn.js";
 import { useMenuStore } from "./menu-context.js";
 
@@ -30,7 +31,7 @@ export const MenuItem: Component<MenuItemProps> = (props) => {
 
   let buttonElement: HTMLButtonElement | undefined;
 
-  onMount(() => {
+  onSettled(() => {
     if (!buttonElement) return;
     store.registerItem({
       value: registeredValue,
@@ -50,8 +51,8 @@ export const MenuItem: Component<MenuItemProps> = (props) => {
       data-react-grab-menu-item={props.dataId ?? registeredValue}
       type="button"
       role={role()}
-      aria-checked={role() === "menuitemradio" ? Boolean(props.checked) : undefined}
-      aria-disabled={Boolean(props.disabled)}
+      aria-checked={role() === "menuitemradio" ? (props.checked ? "true" : "false") : undefined}
+      aria-disabled={props.disabled ? "true" : "false"}
       tabindex={store.keyboardNavigation ? (isActive() ? 0 : -1) : undefined}
       disabled={props.disabled}
       class={cn(