Svelte3 クリップボードにコピーするボタンを作る

Svelte3でクリップボードにコピーするボタンを作りたい時の実装方法デス。

こちらで動作を検証できます
https://svelte.dev/repl/3194502389af4e22991f8bb0c61d65cf?version=3.16.5

コピーボタンの表示コンポーネント

<script>
    import CopyClipBoard from './CopyClipBoard.svelte';

    let name = 'world';

    const copy = () => {
        const app = new CopyClipBoard({
            target: document.getElementById('clipboard'),
            props: { name },
        });
        app.$destroy();
    }
</script>

<input bind:value={name}>
<button on:click={copy}>copy</button>

<!-- クリップボードにコピーするためのテキストエリアを一時配置するための領域 -->
<div id="clipboard"></div>

コピーボタンを押した時にCopyClipBoardコンポーネントの作成、削除を行うだけです。
実際のコピー処理はCopyClipBoard.svelteに実装します。

クリップボードにコピーするためのコンポーネント

<script>
    import { onMount } from 'svelte';

    export let name;

    let textarea;

    onMount(() => {
        textarea.select();
        document.execCommand('copy');
    });
</script>

<textarea bind:value={name} bind:this={textarea}></textarea>

textareaの全選択(select())を行いたいのでbind:thisでtextareaのDOMノードを取得しておきます。
あとはonMount()でdocument.execCommand('copy')を実行してコピーを行うだけになります。