upgrade: resize-observer package upgrade for Solid 2.0

.changeset/resize-observer-solid2-migration.md

@@ -0,0 +1,17 @@
+---
+"@solid-primitives/resize-observer": major
+---
+
+Migrate to Solid.js v2.0 (beta.10)
+
+## Breaking Changes
+
+**Peer dependencies**: `solid-js@^2.0.0-beta.10` and `@solidjs/web@^2.0.0-beta.10` are now required.
+
+### `@solid-primitives/resize-observer`
+
+- `isServer` now imported from `@solidjs/web` (not `solid-js/web`)
+- `createResizeObserver`: internal `createEffect` converted to the Solid 2.0 split compute/apply pattern
+- `createElementSize`: internal `createEffect` converted to split compute/apply pattern; element cleanup (`unobserve`) is returned from apply phase instead of using `onCleanup`
+- `createElementSize`: `sharedConfig.context` replaced with `sharedConfig.hydrating` for hydration detection
+- `createStore` setter in consuming code now requires a function argument (Solid 2.0 store API change)

packages/resize-observer/README.md

@@ -75,8 +75,8 @@ import { createResizeObserver } from "@solid-primitives/resize-observer";
 
 let ref!: HTMLDivElement;
 
-// can in onMount if the target variable isn't yet populated
-onMount(() => {
+// can use onSettled if the target variable isn't yet populated
+onSettled(() => {
   createResizeObserver(ref, ({ width, height }, el) => {
     if (el === ref) console.log(width, height);
   });
@@ -95,10 +95,10 @@ createResizeObserver(targets, ({ width, height }, el) => {});
 // updating the signal will unobserve removed elements and observe added ones
 setTargets(p => [...p, element]);
 
-// createResizeObserver supports top-lever store arrays too
+// createResizeObserver supports top-level store arrays too
 const [targets, setTargets] = createStore([document.body]);
 createResizeObserver(targets, ({ width, height }, el) => {});
-setTargets(targets.length, element);
+setTargets(prev => [...prev, element]);
 ```
 
 ## `createWindowSize`

packages/resize-observer/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@solid-primitives/resize-observer",
-  "version": "2.1.5",
+  "version": "3.0.0",
   "description": "Reactive primitives for observing resizing of HTML elements.",
   "author": "Moshe Udimar",
   "contributors": [
@@ -58,10 +58,12 @@
     "@solid-primitives/utils": "workspace:^"
   },
   "peerDependencies": {
-    "solid-js": "^1.6.12"
+    "@solidjs/web": "^2.0.0-beta.10",
+    "solid-js": "^2.0.0-beta.10"
   },
   "typesVersions": {},
   "devDependencies": {
-    "solid-js": "^1.9.7"
+    "@solidjs/web": "2.0.0-beta.10",
+    "solid-js": "2.0.0-beta.10"
   }
 }

packages/resize-observer/src/index.ts

@@ -11,7 +11,7 @@ import {
   filterNonNullable,
 } from "@solid-primitives/utils";
 import { type Accessor, createEffect, onCleanup, sharedConfig } from "solid-js";
-import { isServer } from "solid-js/web";
+import { isServer } from "@solidjs/web";
 
 type ResizeObserverEntryGeneric<T extends Element> = ResizeObserverEntry & { readonly target: T };
 type ResizeObserverCallbackGeneric<T extends Element> = (
@@ -88,11 +88,12 @@ export function createResizeObserver<T extends Element>(
       }
     }, options);
 
-  createEffect((prev: T[]) => {
-    const refs = filterNonNullable(asArray(access(targets)));
-    handleDiffArray(refs, prev, observe, unobserve);
-    return refs;
-  }, []);
+  createEffect(
+    () => filterNonNullable(asArray(access(targets))),
+    (refs: T[], prev?: T[]) => {
+      handleDiffArray(refs, prev ?? [], observe, unobserve);
+    },
+  );
 }
 
 const WINDOW_SIZE_FALLBACK = { width: 0, height: 0 } as const satisfies Size;
@@ -177,21 +178,25 @@ export function createElementSize(
   const isFn = typeof target === "function";
 
   const [size, setSize] = createStaticStore(
-    sharedConfig.context || isFn ? ELEMENT_SIZE_FALLBACK : getElementSize(target),
+    sharedConfig.hydrating || isFn ? ELEMENT_SIZE_FALLBACK : getElementSize(target),
   );
 
   const ro = new ResizeObserver(([e]) => setSize(getElementSize(e!.target)));
   onCleanup(() => ro.disconnect());
 
   if (isFn) {
-    createEffect(() => {
-      const el = target();
-      if (el) {
-        setSize(getElementSize(el));
-        ro.observe(el);
-        onCleanup(() => ro.unobserve(el));
-      }
-    });
+    createEffect(
+      () => (target as Accessor<Element | false | undefined | null>)(),
+      (el: Element | false | null | undefined) => {
+        if (el) {
+          setSize(getElementSize(el));
+          ro.observe(el);
+          return () => ro.unobserve(el);
+        } else {
+          setSize(ELEMENT_SIZE_FALLBACK);
+        }
+      },
+    );
   } else {
     ro.observe(target);
     onCleanup(() => ro.unobserve(target));

packages/resize-observer/test/index.test.ts

@@ -1,6 +1,5 @@
 import { describe, test, expect, afterAll } from "vitest";
-import { createRoot, createSignal, onMount } from "solid-js";
-import { createStore } from "solid-js/store";
+import { createRoot, createSignal, createStore, flush, onSettled } from "solid-js";
 import {
   Size,
   createElementSize,
@@ -64,6 +63,7 @@ describe("createResizeObserver", () => {
       createResizeObserver(div1, () => {});
       return dispose;
     });
+    flush();
 
     expect(targets.size).toBe(1);
     expect(targets.has(div1)).toBeTruthy();
@@ -77,6 +77,7 @@ describe("createResizeObserver", () => {
       createResizeObserver([div1, div2], () => {});
       return dispose;
     });
+    flush();
     expect(targets.size).toBe(2);
     expect(targets.has(div1)).toBeTruthy();
     expect(targets.has(div2)).toBeTruthy();
@@ -92,11 +93,13 @@ describe("createResizeObserver", () => {
       expect(targets.size, "targets shouldn't be connected synchronously").toBe(0);
       return { dispose, setRefs };
     });
+    flush();
 
     expect(targets.size).toBe(1);
     expect(targets.has(div1)).toBeTruthy();
 
     setRefs([div2, div3]);
+    flush();
     expect(targets.size).toBe(2);
     expect(targets.has(div2)).toBeTruthy();
     expect(targets.has(div3)).toBeTruthy();
@@ -112,11 +115,13 @@ describe("createResizeObserver", () => {
       expect(targets.size, "targets shouldn't be connected synchronously").toBe(0);
       return { dispose, setRefs };
     });
+    flush();
 
     expect(targets.size).toBe(1);
     expect(targets.has(div1)).toBeTruthy();
 
-    setRefs([div2, div3]);
+    setRefs(() => [div2, div3]);
+    flush();
     expect(targets.size).toBe(2);
     expect(targets.has(div2)).toBeTruthy();
     expect(targets.has(div3)).toBeTruthy();
@@ -158,7 +163,7 @@ describe("createElementSize", () => {
       expect(size.width).toBe(null);
       expect(size.height).toBe(null);
 
-      onMount(() => {
+      onSettled(() => {
         expect(size.width).toBe(100);
         expect(size.height).toBe(200);
         dispose();