diff --git a/README.md b/README.md index 3b33f9a..e15f903 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,6 @@ # Svelte Copy -A svelte action to copy text to clipboard. It uses the `navigator.clipboard` api, with a fallback to the legacy method. +A svelte attachment/action to copy text to clipboard. It uses the `navigator.clipboard` api, with a fallback to the legacy method. # Installing @@ -10,6 +10,8 @@ npm install svelte-copy -D This library only works with Svelte 5, checkout [svelte-copy@1](https://www.npmjs.com/package/svelte-copy/v/1.4.2) for Svelte 3/4 support. +[Actions (use:)](https://svelte.dev/docs/svelte/use) and [attachments (@attach)](https://svelte.dev/docs/svelte/@attach) are both supported. + # Usage The simplest use is to just pass the text you want to copy: @@ -19,7 +21,17 @@ The simplest use is to just pass the text you want to copy: import { copy } from 'svelte-copy'; - +``` + +```svelte + + + ``` @@ -32,7 +44,28 @@ You can expand that with an options object: +``` + +```svelte + + + */ -export const copy: Action = ( +export const copyAction: Action = ( element: Element, initialOptions: string | Options, ) => { @@ -105,3 +106,21 @@ export const copy: Action = ( }, }; }; + +/** + * A svelte attachment to copy text to clipboard. + * + * @see https://svelte-copy.willow.codes + * + * @example + * + * + * + * + */ +export const copy = (options: string | Options) => + fromAction(copyAction, () => options); diff --git a/src/lib/index.ts b/src/lib/index.ts index ee9a137..cc9214e 100644 --- a/src/lib/index.ts +++ b/src/lib/index.ts @@ -1,4 +1,4 @@ -export { copy, copyText } from './copy'; +export { copy, copyAction, copyText } from './copy'; export type { Options, ErrorCallback, diff --git a/src/routes/+page.server.ts b/src/routes/+page.server.ts index 1381c1c..deb02b8 100644 --- a/src/routes/+page.server.ts +++ b/src/routes/+page.server.ts @@ -11,94 +11,186 @@ async function highlight(code: string) { export async function load() { return { examples: { - simple: await highlight(dedent` - + attachment: { + simple: await highlight(dedent` + - - `), - simpleObject: await highlight(dedent` - - `), - simpleCopyAlert: await highlight(dedent` - - `), - copyAlert: await highlight(dedent` - - `), - errorAlert: await highlight(dedent` - - `), - customEvents: await highlight(dedent` - - `), + + `), + simpleObject: await highlight(dedent` + + `), + simpleCopyAlert: await highlight(dedent` + + `), + copyAlert: await highlight(dedent` + + `), + errorAlert: await highlight(dedent` + + `), + customEvents: await highlight(dedent` + + `), + copyText: await highlight(dedent` + + + + `), + }, + action: { + simple: await highlight(dedent` + + + + `), + simpleObject: await highlight(dedent` + + `), + simpleCopyAlert: await highlight(dedent` + + `), + copyAlert: await highlight(dedent` + + `), + errorAlert: await highlight(dedent` + + `), + customEvents: await highlight(dedent` + + `), + }, copyText: await highlight(dedent` - + $effect(() => { + if (debounced.current) { + copyText(debounced.current) + .then(() => alert('Copied!')) + .catch((error) => alert(error?.message)); + } + }); + - - `), + + `), }, }; } diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte index 0748a35..21b771e 100644 --- a/src/routes/+page.svelte +++ b/src/routes/+page.svelte @@ -2,7 +2,7 @@ import CopyTextExample from './CopyTextExample.svelte'; import Example from './Example.svelte'; import GitHub from './GitHub.svelte'; - import { copy } from '$lib'; + import { copy, copyAction } from '$lib'; const { data } = $props(); @@ -20,27 +20,128 @@

The simplest use is to just pass the text you want to copy

- + {#snippet children(text)} - + {/snippet}

We could pass this as an object

- + {#snippet children(text)} - + {/snippet}

Let's alert the user if the text was copied

- + {#snippet children(text)} + {/snippet} + + +

We could tell the user what was copied

+ + + {#snippet children(text)} + + {/snippet} + + +

If there was an error, we can check for that too

+ + + {#snippet children(text)} + + {/snippet} + + +

We can trigger the copy on custom events

+ + + {#snippet children(text)} + + {/snippet} + + + +
+

Usage (with actions)

+ + + In Svelte 5.29 and newer, consider using attachments instead, as they are more flexible and composable. + + +

The simplest use is to just pass the text you want to copy

+ + + {#snippet children(text)} + + {/snippet} + + +

We could pass this as an object

+ + + {#snippet children(text)} + + {/snippet} + + +

Let's alert the user if the text was copied

+ + + {#snippet children(text)} +