Write a guide for implementing a singleton pattern with the v4 Dialog component primitives

[jdvlpr]

Describe the feature in detail (code, mocks, or screenshots encouraged)

This has been brought up, for example here: https://discord.com/channels/1003691521280856084/1048010639219642419/threads/1434873227389177896

What type of pull request would this be?

None

Provide relevant links or additional information.

No response

[risalfajar]

What a nice timing, just asked a question about this on Reddit.

[jdvlpr]

While waiting for an official guide, I've come up with a solution that works for me using Svelte. I'm not sure if it is the "correct" way to implement a singleton pattern with the V4 Dialog primitives, but here's a general outline:

---

state.svelte.ts

class DialogClass {
  opened = $state(false);

  contentComponent = $state({
    ref: null,
    props: null,
  });

  trigger = async ({
    component,
  }: {
    component?: any;
  }) => {
    // close the dialog
    this.close();

    // Delay necessary for zag to transition
    // TODO: Check if this is still necessary or not. I think it was in the older modal singleton pattern.
    await new Promise((resolve) => {
        setTimeout(() => {
          resolve(true);
        }, 0);
      });

    const { ref, props } = component;

    // Set the the modal component and props
    this.contentComponent = {
        ref,
        props,
    };

    // Open the modal
    this.opened = true;
  };

  close = () => {
    this.opened = false;
  };
}

export const dialog = new DialogClass();

---

DialogProvider.svelte

<script>
  import { dialog } from '$lib/state';
  import { Dialog, Portal } from '@skeletonlabs/skeleton-svelte';
  import { fly } from 'svelte/transition';
</script>

<Dialog open={dialog.opened} onOpenChange={(e) => (dialog.opened = e.open)}>
  <Portal>
    <Dialog.Backdrop
      class="bg-surface-50-950/50 fixed inset-0 z-50 backdrop-blur-md"
    />
    <Dialog.Positioner
      class="fixed inset-0 z-50 flex items-center justify-center"
    >
      <Dialog.Content
        class="card bg-surface-50 dark:bg-surface-950 max-h-[100svh] space-y-4 overflow-auto shadow-xl max-sm:min-w-[100vw] lg:max-h-[80svh]"
      >
        {#snippet element(attributes)}
          {#if !attributes.hidden}
            <div {...attributes} in:fly={{ y: 200, duration: 150 }}>
            
                {#if dialog.contentComponent.ref}
                  {#key dialog.contentComponent.ref}
                    <dialog.contentComponent.ref
                      {...dialog.contentComponent.props}
                    />
                  {/key}
                {/if}
            </div>
          {/if}
        {/snippet}
      </Dialog.Content>
    </Dialog.Positioner>
  </Portal>
</Dialog>

---

In the main +layout.svelte file, import and place the <DialogProvider /> component.

---

+page.svelte

<script>
  import Menu from '$lib/components/Menu.svelte';
</script>

<button
  title="Dialog Menu"
  class="btn hover:preset-tonal"
  onclick={() =>
    dialog.trigger({
      component: {
        ref: Menu,
        props: { color: 'yellow' },
      },
    })}
>
  Menu
</button>

---

Note: I've got some other custom things going on in my implementation, but I've simplified it here. For the full source code and to see my current migration progress, you can look around at this V4 migration branch: https://github.com/jdvlpr/Temperature-Blanket-Web-App/blob/skeletonV4/src/lib/components/modals/DialogProvider.svelte.