Svelte CSV importer that runs entirely in the browser

<script lang="ts">
  import "@updog/data-editor-wc";
  import "@updog/data-editor-wc/styles.css";
  import type { UpdogEditorElement } from "@updog/data-editor-wc";

  const columns = [
    { id: "name", title: "Name" },
    {
      id: "email",
      title: "Email",
      validators: [{ type: "email" }, { type: "unique" }],
    },
  ];

  let editorEl: UpdogEditorElement | undefined = $state();

  $effect(() => {
    if (!editorEl) return;
    const el = editorEl;
    el.configure({
      apiKey: "YOUR_KEY",
      columns,
      primaryKey: "email",
      onComplete: (result) => save(result.sources),
    });
    const onClose = () => el.hide();
    el.addEventListener("close", onClose);
    return () => el.removeEventListener("close", onClose);
  });

  function open() {
    editorEl?.show();
  }
</script>

<button type="button" onclick={open}>Open Importer</button>
<updog-editor bind:this={editorEl}></updog-editor>