Check if `#snippet` is empty

[hyunbinseo]

Describe the problem

I would love to call showModal() only when there is a modal content:

<script lang="ts">
  import type { Snippet } from 'svelte';

  let { children }: { children?: Snippet | undefined } = $props();

  let dialog: HTMLDialogElement;

  // If children is non-empty, call `dialog.showModal()`
</script>

<dialog bind:this={dialog}>
  {@render children?.()}
</dialog>

But this does not work because children snippet is always a function with this if block:

function snippet2(node, args)

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

  let showContent = $state(false);
</script>

<Modal>
  {#if showContent}
    <h1>Hello, World!</h1>
  {/if}
</Modal>

<button type="button" onclick={() => (showContent = !showContent)}>
  Toggle
</button>

Describe the proposed solution

$effect(() => {
  // Something I can use here:
  if (children !== undefined) {
    dialog.showModal();
    return;
  }
  dialog.close();
});

For workaround, I am currently using explicit props:

{#snippet content()}
  <h1>Hello, World!</h1>
{/snippet}

<Modal children={showContent ? content : undefined}></Modal>

<button type="button" onclick={() => (showContent = !showContent)}>
  Toggle
</button>

Importance

nice to have

[adiguba]

Hello,

This is difficult to achieve, as an "empty snippet" can take multiple form and difficult to detect...

For example :

<Modal>
  <MyComponent/> <!-- did MyComponent render something ? -->
</Modal>

I think that it would be simplier (and better) to have an open props :

<Modal bind:open={showContent}>
  <h1>Hello, World!</h1>
</Modal>

Example in REPL

[hyunbinseo]

I've actually done that:

<script lang="ts">
  import Modal from './Modal.svelte';

  let type = $state<'a' | 'b' | 'c'>('a');
</script>

<Modal open={type === 'a' || type === 'b'}>
  {#if type === 'a'}
    <h1>Hello, World!</h1>
  {:else if type === 'b'}
    <h1>Touch Grass</h1>
  {/if}
</Modal>

I really don't want to create an extra open variable in this case.