I can't migrate my component to Svelte 5

[Enes5519]

Discussed in #15117

^{Originally posted by Enes5519 January 27, 2025}
The svelte 4 component I will share below is the wrapper version of a custom element from a different library on the Svelte side. The code below was working perfectly with the use of slots, but now I cannot achieve the same perfection because the slot rules are very strict. At the first stage, I was going to update it only by upgrading the version, can you help me at this stage?

<script lang="ts">
  import type { BlDialog } from "@trendyol/baklava";
  import { onDestroy } from "svelte";

  interface $$Props extends Partial<BlDialog> {
    class?: string;
    "data-testid"?: string;
    fullWidthAction?: boolean;
  }

  export let open = false;
  export let fullWidthAction = false;

  function handleDialogOpen() {
    open = true;
  }

  function handleDialogClose() {
    open = false;
  }

  onDestroy(() => {
    // @see https://github.com/Trendyol/baklava/issues/778
    document.body.style.overflow = "auto";
  });
</script>

<bl-dialog
  on:bl-dialog-open={handleDialogOpen}
  on:bl-dialog-open
  on:bl-dialog-close={handleDialogClose}
  on:bl-dialog-close
  on:bl-dialog-request-close
  class:full={fullWidthAction}
  {open}
  polyfilled={true}
  {...$$restProps}
>
  <slot />
  <slot name="primary-action" slot="primary-action" />
  <slot name="secondary-action" slot="secondary-action" />
  <slot name="tertiary-action" slot="tertiary-action" />
</bl-dialog>

<style>
  .full bl-button {
    --bl-button-display: block;
    flex: 1;
  }
</style>

Normally I translated it as below, but do I need to create a separate prop for each component to pass the slot attribute? For example, I made the bl-button custom element a component and I cannot use them under each other.

<script lang="ts">
  import type { BlDialog } from "@trendyol/baklava";
  import { onDestroy, type Snippet } from "svelte";

  interface Props extends Omit<Partial<BlDialog>, "children"> {
    "data-testid"?: string;
    fullWidthAction?: boolean;
    children?: Snippet;
    onOpen?: (e: CustomEvent<{ isOpen: boolean }>) => void;
    onClose?: (e: CustomEvent<{ isOpen: boolean }>) => void;
    onRequestClose?: (
      e: CustomEvent<{
        source: "close-button" | "keyboard" | "backdrop";
      }>
    ) => void;
  }

  let {
    open = $bindable(false),
    fullWidthAction = false,
    children,
    onOpen,
    onClose,
    onRequestClose,
    ...rest
  }: Props = $props();

  function handleDialogOpen(e: CustomEvent<{ isOpen: boolean }>) {
    open = true;
    onOpen?.(e);
  }

  function handleDialogClose(e: CustomEvent<{ isOpen: boolean }>) {
    open = false;
    onClose?.(e);
  }

  onDestroy(() => {
    // @see https://github.com/Trendyol/baklava/issues/778
    document.body.style.overflow = "auto";
  });
</script>

<bl-dialog
  onbl-dialog-open={handleDialogOpen}
  onbl-dialog-close={handleDialogClose}
  onbl-dialog-request-close={onRequestClose}
  class:full={fullWidthAction}
  {open}
  polyfilled={true}
  {...rest}
>
  {@render children?.()}
</bl-dialog>

<style>
  .full bl-button {
    --bl-button-display: block;
    flex: 1;
  }
</style>

Problematic usage

<DialogV5 bind:open {onRequestClose} {...rest}>
  <div class="container">
    <AssetImage name="{variant}-illustration.svg" alt={variant} />
    <div class="caption">{caption}</div>
    <div class="description">
      {@render children?.()}
    </div>
  </div>

  {#if primaryButtonText}
    <Button slot="primary-action" class="button" size="large" onClick={onClickPrimary}>
      {primaryButtonText}
    </Button>
  {/if}
  {#if secondaryButtonText}
    <Button slot="secondary-action" class="button" size="large" variant="secondary" onClick={onClickSecondary}>
      {secondaryButtonText}
    </Button>
  {/if}
</DialogV5>
```</div>

[Enes5519]

I created a workaround. I create a prop called slott and set it with the actions. But I didn't like this solution very much.

[paoloricciuti]

Sorry I've read this multiple times but I don't get what's the issue you are facing. What is happening? Why can't you just create a prop for each snippet?

[paoloricciuti]

Maybe the problem is that you are using the slot property within the snippet?

[brunnerh]

@paoloricciuti check the linked discussion. The problem is an interaction with custom elements where Svelte prohibits the use of slot="..." (which previously was not the case).

[paoloricciuti]

@paoloricciuti check the linked discussion. The problem is an interaction with custom elements where Svelte prohibits the use of slot="..." (which previously was not the case).

Oh yeah that was my idea too...mmm this is a tricky one

[Enes5519]

We are having trouble with sourcemaps and want to migrate to Svelte 5. This prevents us from making an easy transition. How do you think we can proceed?

[paoloricciuti]

An easy workaround would be to use the snippet to only populate the internal of the element. So basically instead of @render children() you do

<button slot="blabla">
    {@render children()}
</button>

But that might not be fully possible.

[Enes5519]

If I make such a move, it means that I will use the action slots only for the button, which will create a big breaking change in our project. Additionally, each button has its own variants. Unfortunately, I cannot change the Dialog component in this way.