[svelte] checkboxをコンポーネント化する際にbind:groupが効かなくなる問題の対策

こちらのissueの通り、Svelteでcheckboxをラップしたコンポーネントを作成すると、bind:groupができなくなってしまう。
bind:groupの機能を再開発することで対策できたっぽいのでメモ。

※ GitHubのissueにもコメントしてみたので、見落としがあればご指摘いただいてる可能性あるので見てみてください。

Checkbox.svelte

<script>
  let checked = false;
  export let value = '';
  export let group = [];

  const handleCheck = () => { group = [...group, value] };
  const handleUncheck = () => { group = group.filter(checkedValue => checkedValue !== value) };

  $: checked? handleCheck(): handleUncheck();
</script>

<input type="checkbox" value={value} bind:checked>

親コンポーネント

<script>
  import Checkbox from 'Checkbox.svelte';
  let group = [];
  let values = [1,2,3];
  $: console.log(group);
</script>

{#each values as value}
  <Checkbox value={value} bind:group={group} />
{/each}

デモ