diff --git a/.changeset/clipboard-solid-2.md b/.changeset/clipboard-solid-2.md new file mode 100644 index 000000000..5e6eb4b3d --- /dev/null +++ b/.changeset/clipboard-solid-2.md @@ -0,0 +1,13 @@ +--- +"@solid-primitives/clipboard": major +--- + +Upgrade to Solid 2.0 (`solid-js@^2.0.0-beta.7`). + +**`createClipboard`** — replaced `createResource` with a Solid 2.0 async `createMemo`. The accessor starts as `[]` synchronously (no initial suspension) and resolves asynchronously after `refetch()`. Use `isPending(() => clipboard())` for a loading indicator instead of ``. + +**`copyToClipboard`** — converted from a `use:` directive to a `ref` directive factory. Replace `use:copyToClipboard={opts}` with `ref={copyToClipboard(opts)}`. + +**`isServer`** — moved from `solid-js/web` to `@solidjs/web` in Solid 2.0; the package now imports from `@solidjs/web`. + +**`createEffect` + `on`** — `on` helper removed; replaced with the Solid 2.0 split `createEffect(compute, effect)` form with explicit defer-by-default behavior. diff --git a/packages/clipboard/CHANGELOG.md b/packages/clipboard/CHANGELOG.md index 609e78782..ee2018ce0 100644 --- a/packages/clipboard/CHANGELOG.md +++ b/packages/clipboard/CHANGELOG.md @@ -1,5 +1,19 @@ # @solid-primitives/clipboard +## 2.0.0-beta.0 + +### Major Changes + +- Upgrade to Solid 2.0 (`solid-js@^2.0.0-beta.7`). + + **`createClipboard`** — replaced `createResource` with a Solid 2.0 async `createMemo`. The accessor returns `[]` synchronously on first access (no suspension) and resolves asynchronously after `refetch()`. Use `isPending(() => clipboard())` for a loading indicator instead of ``. + + **`copyToClipboard`** — converted from a `use:` directive to a `ref` directive factory. Replace `use:copyToClipboard={opts}` with `ref={copyToClipboard(opts)}`. + + **`isServer`** — moved from `solid-js/web` to `@solidjs/web` in Solid 2.0; the source now imports from `@solidjs/web`. + + **`createEffect` with `on`** — `on` helper removed; replaced with the Solid 2.0 split `createEffect(compute, effect)` form plus an explicit `skip` flag to preserve the `defer: true` default. + ## 1.6.4 ### Patch Changes diff --git a/packages/clipboard/README.md b/packages/clipboard/README.md index f805e89f8..743ee28ac 100644 --- a/packages/clipboard/README.md +++ b/packages/clipboard/README.md @@ -8,55 +8,41 @@ [![size](https://img.shields.io/npm/v/@solid-primitives/clipboard?style=for-the-badge)](https://www.npmjs.com/package/@solid-primitives/clipboard) [![stage](https://img.shields.io/endpoint?style=for-the-badge&url=https%3A%2F%2Fraw.githubusercontent.com%2Fsolidjs-community%2Fsolid-primitives%2Fmain%2Fassets%2Fbadges%2Fstage-3.json)](https://github.com/solidjs-community/solid-primitives#contribution-process) -This primitive is designed to that make reading and writing to [Clipboard API](https://developer.mozilla.org/en-US/docs/Web/API/Clipboard_API) easy. It also comes with a convenient directive to write to clipboard. +Primitives for reading and writing to the [Clipboard API](https://developer.mozilla.org/en-US/docs/Web/API/Clipboard_API). -- [`readClipboard`](#readclipboard) - A basic non-reactive primitive that makes accessing the clipboard easy. -- [`writeClipboard`](#writeclipboard) - A basic non-reactive primitive that makes writing to the clipboard easy. -- [`createClipboard`](#createclipboard) - This primitive provides full facilities for reading and writing to the clipboard. It allows for writing to clipboard via exported function or input signal. It wraps the Clipboard Async API with a resource and supplies reactive helpers to make pulling from the clipboard easy. -- [`copyToClipboard`](#copytoclipboard) - convenient directive for setting the clipboard value. +- [`readClipboard`](#readclipboard) - One-shot async read of clipboard items. +- [`writeClipboard`](#writeclipboard) - One-shot async write to the clipboard. +- [`createClipboard`](#createclipboard) - Reactive clipboard backed by an async memo. Reads on demand, writes reactively from a signal. +- [`copyToClipboard`](#copytoclipboard) - `ref` directive factory that copies an element's value to clipboard on click. ## Installation ```bash npm install @solid-primitives/clipboard # or -yarn add @solid-primitives/clipboard -# or pnpm add @solid-primitives/clipboard ``` ## `readClipboard` -A basic non-reactive primitive that makes accessing the clipboard easy. Note that write supports both string and ClipboardItems object structure. - -### How to use it +One-shot async read that returns a `Promise`. ```ts import { readClipboard } from "@solid-primitives/clipboard"; -const clipboard = await readClipboard(); - -clipboard.forEach(item => { - if (item.type == "text/plain") { - console.log(item.text()); - } -}); +const items = await readClipboard(); ``` ## `writeClipboard` -A basic non-reactive primitive that makes writing to the clipboard easy. Note that write supports both string and ClipboardItems object structure. - -### How to use it +One-shot async write. Accepts a string or `ClipboardItem[]`. ```ts import { writeClipboard } from "@solid-primitives/clipboard"; -writeClipboard("Hello World"); +await writeClipboard("Hello World"); -// or - -writeClipboard([ +await writeClipboard([ new ClipboardItem({ "text/plain": new Blob(["Hello World"], { type: "text/plain" }), }), @@ -65,86 +51,92 @@ writeClipboard([ ## `createClipboard` -This primitive provides full facilities for reading and writing to the clipboard. It allows for writing to clipboard via exported function or input signal. It wraps the Clipboard Async API with a resource and supplies reactive helpers to make pulling from the clipboard easy. +Reactive primitive backed by a Solid 2.0 async memo. -### How to use it +```ts +const [clipboard, refetch, write] = createClipboard(optionalSignal?, deferInitial?); +``` + +- `clipboard()` — `Accessor`. Starts as `[]` synchronously (no initial suspension). After `refetch()`, resolves asynchronously; the previous value stays visible while pending. +- `refetch()` — trigger a fresh clipboard read. +- `write` — same as `writeClipboard`. + +Automatically calls `refetch()` on the native `clipboardchange` event. + +When an optional data signal is passed, its value is written to the clipboard on every change. The initial write is deferred by default (`deferInitial` defaults to `true`). ```tsx +import { createSignal } from "solid-js"; +import { createClipboard } from "@solid-primitives/clipboard"; + const [data, setData] = createSignal("Hello"); -const [clipboard, refresh] = createClipboard(data); // will write "Hello" to clipboard +const [clipboard, refetch] = createClipboard(data); -setData("foobar"); // will write "foobar" to clipboard +setData("World"); // writes "World" to clipboard -refresh(); // will read from clipboard and update clipboard() signal +refetch(); // reads clipboard into clipboard() return ( - - - {item => ( - - {item.text} - - - - - )} - - + + {item => ( + + {item.text} + + + + + )} + ); ``` -Note: The primitive binds and listens for `clipboardchange` meaning that clipboard changes should automatically propagate. The implementation however is buggy on certain browsers. +No `` needed — `clipboard()` never suspends before the first `refetch()`. If you want a loading indicator during a read, use `isPending`: + +```tsx +import { isPending } from "solid-js"; + +

{isPending(() => clipboard()) ? "Reading…" : `${clipboard().length} items`}

; +``` ## `copyToClipboard` -You can also use clipboard as a convenient directive for setting the clipboard value. You can override the default value and the setter with the options parameter. +A `ref` directive factory that writes an element's value to clipboard on click. On ``/`