diff --git a/.changeset/refs-solid2-migration.md b/.changeset/refs-solid2-migration.md new file mode 100644 index 000000000..a83a64b35 --- /dev/null +++ b/.changeset/refs-solid2-migration.md @@ -0,0 +1,11 @@ +--- +"@solid-primitives/refs": major +--- + +Migrate to Solid.js 2.0 (beta.10). + +**Breaking changes:** + +- Requires `solid-js@^2.0.0-beta.10` and `@solidjs/web@^2.0.0-beta.10` +- Removed deprecated re-exports of `ResolvedChildren` and `ResolvedJSXElement` from `solid-js/types` +- `Refs` and `Ref` components now use split `createEffect` (compute/apply) instead of the removed `createComputed`; the callback fires asynchronously on the next microtask after children change (consistent with Solid 2.0's deferred reactivity model) diff --git a/packages/refs/README.md b/packages/refs/README.md index b510c5dff..b9ef0e52d 100644 --- a/packages/refs/README.md +++ b/packages/refs/README.md @@ -43,7 +43,7 @@ interface ButtonProps { function Button(props: ButtonProps) { let ref: HTMLButtonElement | undefined; - onMount(() => { + onSettled(() => { // use the local ref }); diff --git a/packages/refs/package.json b/packages/refs/package.json index 80b6e6294..029458186 100644 --- a/packages/refs/package.json +++ b/packages/refs/package.json @@ -1,6 +1,6 @@ { "name": "@solid-primitives/refs", - "version": "1.1.3", + "version": "2.0.0", "description": "Library of primitives, components and directives for SolidJS that help managing references to JSX elements.", "author": "Damian Tarnawski @thetarnav ", "license": "MIT", @@ -41,7 +41,7 @@ "scripts": { "dev": "node --import=@nothing-but/node-resolve-ts --experimental-transform-types ../../scripts/dev.ts", "build": "node --import=@nothing-but/node-resolve-ts --experimental-transform-types ../../scripts/build.ts", - "vitest": "vitest -c ../../configs/vitest.config.ts", + "vitest": "vitest -c vitest.config.ts", "test": "pnpm run vitest", "test:ssr": "pnpm run vitest --mode ssr" }, @@ -55,10 +55,12 @@ "@solid-primitives/utils": "workspace:^" }, "devDependencies": { - "solid-js": "^1.9.7", + "@solidjs/web": "2.0.0-beta.10", + "solid-js": "2.0.0-beta.10", "solid-transition-group": "^0.2.3" }, "peerDependencies": { - "solid-js": "^1.6.12" + "@solidjs/web": "^2.0.0-beta.10", + "solid-js": "^2.0.0-beta.10" } } diff --git a/packages/refs/src/index.ts b/packages/refs/src/index.ts index b930f4077..21c7c4e1e 100644 --- a/packages/refs/src/index.ts +++ b/packages/refs/src/index.ts @@ -2,16 +2,12 @@ import { chain, arrayEquals } from "@solid-primitives/utils"; import { type Accessor, children, - createComputed, + createEffect, createMemo, type JSX, onCleanup, - untrack, } from "solid-js"; -import { isServer } from "solid-js/web"; - -// TODO delete in next major version -export type { ResolvedChildren, ResolvedJSXElement } from "solid-js/types/reactive/signal.js"; +import { isServer } from "@solidjs/web"; /** * Type for the `ref` prop @@ -235,11 +231,13 @@ export function Refs(props: { ref: Ref; children: JSX.Element }): JSX let prev: Element[] = []; - createComputed(() => { - const els = resolved.toArray().filter(defaultElementPredicate); - if (!arrayEquals(prev, els)) untrack(() => cb(els)); - prev = els; - }, []); + createEffect( + () => resolved.toArray().filter(defaultElementPredicate), + (els: Element[]) => { + if (!arrayEquals(prev, els)) cb(els); + prev = els; + }, + ); onCleanup(() => prev.length && cb([])); return resolved as unknown as JSX.Element; @@ -267,11 +265,13 @@ export function Ref(props: { ref: Ref; children: JSX.Elemen let prev: Element | undefined; - createComputed(() => { - const el = resolved.toArray().find(defaultElementPredicate); - if (el !== prev) untrack(() => cb(el)); - prev = el; - }); + createEffect( + () => resolved.toArray().find(defaultElementPredicate), + (el: Element | undefined) => { + if (el !== prev) cb(el); + prev = el; + }, + ); onCleanup(() => prev && cb(undefined)); diff --git a/packages/refs/test/index.test.ts b/packages/refs/test/index.test.ts index 78355cdf4..c49790129 100644 --- a/packages/refs/test/index.test.ts +++ b/packages/refs/test/index.test.ts @@ -1,5 +1,5 @@ import { describe, test, expect } from "vitest"; -import { createRoot, createSignal } from "solid-js"; +import { createRoot, createSignal, flush } from "solid-js"; import { removeItems } from "@solid-primitives/utils/immutable"; import { getResolvedElements, resolveElements } from "../src/index.js"; @@ -41,15 +41,17 @@ describe("resolveElements", () => { test("returned signals reflect changes to source", () => { createRoot(dispose => { const _source = [undefined, el2, el1, "HELLO", el3]; - const [source, setSource] = createSignal(_source); + const [source, setSource] = createSignal(_source, { ownedWrite: true }); const els = resolveElements(source); expect(els()).toEqual([el2, el1, el3]); setSource(p => [...p, el4]); + flush(); expect(els()).toEqual([el2, el1, el3, el4]); setSource(p => removeItems(p, el1, el2, undefined)); + flush(); expect(els(), "3 1").toEqual([el3, el4]); dispose(); diff --git a/packages/refs/test/mergeRefs.test.tsx b/packages/refs/test/mergeRefs.test.tsx index 227e51b7e..3b7871727 100644 --- a/packages/refs/test/mergeRefs.test.tsx +++ b/packages/refs/test/mergeRefs.test.tsx @@ -1,23 +1,31 @@ import { describe, test, expect } from "vitest"; -import { createRoot, onMount } from "solid-js"; -import { mergeRefs, RefProps } from "../src/index.js"; +import { mergeRefs } from "../src/index.js"; describe("mergeRefs", () => { - test("passes ref to props and local var", () => - createRoot(dispose => { - let local!: HTMLButtonElement; - let forwared!: HTMLButtonElement; + test("chains multiple ref callbacks", () => { + let local: HTMLButtonElement | undefined; + let forwarded: HTMLButtonElement | undefined; + const el = document.createElement("button") as HTMLButtonElement; - const Button = (props: RefProps) => { - return