Determine if empty, null or undefined children is passed

[calvo-jp]

Describe the bug

Hi guys. Would like to know if this is an expected behavior of children in svelte 5. Given the code below
 

<!-- error-message.svelte -->
<script lang="ts">
  import type { SvelteHTMLElements } from 'svelte/elements';
  import { twMerge } from 'tailwind-merge';

  let { class: className, children, ...props }: SvelteHTMLElements['div'] = $props();
</script>

{#if children}
  <div
    class={twMerge('mt-1.5 block font-roboto text-xs text-[rgba(255,37,37,0.70)]', className)}
    {...props}
  >
    {@render children()}
  </div>
{/if}

<!-- login.svelte -->
<FormGroup>
  <FormLabel for="mobileNumber">Phone Number</FormLabel>
  <MobileNumberField id="mobileNumber" name="mobileNumber" placeholder="Enter Phone Number" />
  <ErrorMessage>{$errors.mobileNumber?.at(0)}</ErrorMessage>
</FormGroup>

We are expecting that when $errors.mobileNumber?.at(0) is undefined or null then #if children should return false but it instead returns true and renders the div. Is there a way to tell if an actual children (not undefined or null) was actually passed.

These get rendered because children is of type function

<ErrorMessage>{null}</ErrorMessage>
<ErrorMessage>{undefined}</ErrorMessage>

and this does not

<ErrorMessage></ErrorMessage>

Reproduction

<!-- error-message.svelte -->
<script lang="ts">
  import type { SvelteHTMLElements } from 'svelte/elements';
  import { twMerge } from 'tailwind-merge';

  let { children, ...props }: SvelteHTMLElements['div'] = $props();

  $inspect(Boolean(children));
</script>

{#if children}
  <div {...props}>
    {@render children()}
  </div>
{/if}

<!-- login.svelte -->
<ErrorMessage>{null}</ErrorMessage>
<ErrorMessage>{undefined}</ErrorMessage>
<ErrorMessage></ErrorMessage>

Logs

No response

System Info

Windows 11

Severity

annoyance

[Rich-Harris]

It's expected, yeah. The child component doesn't care what's in the children snippet, just whether or not there is one. Is it always going to be a string? If so you could just pass a normal prop

[7nik]

You should raise the if:

{#if $errors.mobileNumber?.at(0)}
  <ErrorMessage>{$errors.mobileNumber.at(0)}</ErrorMessage>
{/if}

[7nik]

Another way is to use the :empty selector to hide the div. Note that a tag must contain no tags, text, or whitespace to be :empty.
Example.

[calvo-jp]

Thanks for the response and clarification. Would just go with using a prop. Appreciate it

[justingolden21]

I have code with a button component which has optional children, and an optional icon. I want to add mr-2 to the icon if the children exist.

<button>
	{#if icon}
		<div class={twMerge(svgVariants({ animation }))}>
			<Icon name={icon} />
		</div>
	{/if}
	{@render children?.()}
</button>

Code like:
<Button variant="outline" size="icon" animation={animation} icon="clock"></Button> will have falsey children, and

<Button variant="outline" size="lg" animation={animation} icon="clock">Button With Icon</Button> will have truthy children, so on first glance, class:mr-2={children} works great.

Unfortunately,

<Button icon="clock" {variant} {size}>
	{#if size !== 'icon'}
		Hello
	{/if}
</Button>

Even if the #if is false, children will STILL be truthy.

I tried mr-2 last:mr-0, but if the inner text is not wrapped in an element, then it will not apply the margin, since the icon div would still be the last child.

I've been deep in the rabbit hole with this, and so far I'm at:

class:mr-2={children?.toString().trim()} class:last\:mr-0={!children?.toString().trim()} with no success.

If there's a way to possibly check if children has any elements, please let me know. Currently, it seems to be impossible to determine this without adding another prop to the button itself for if it has children and passing that in every single instance where the button is used.

Even wrapping in a span or checking #if children doesn't work:

{#if icon}
		<div class={twMerge(svgVariants({ animation }))}>
			<Icon name={icon} />
		</div>
	{/if}
	{#if children}
	<span>{@render children?.()}</span>
	{/if}

With mr-2 last:mr-0 or any combination, this will still render margin to the right of the icon if the #if size is false because children will still be truthy.

Tried <span class:ml-2={icon}> to render children and still doesn't work, since it will always render the span, even if I check for children it still renders the span. I'm convinced there is no way to avoid false positive and false negative in this scenario. I can't get a falsey variable from the following code without getting false negatives from others:

<Button icon="clock" size="icon">
	{#if false}blah{/if}
</Button>

I think this is an unsolvable problem without svelte changing how it handles this, but sadly it would be a breaking change and such a niche, minor change.

EDIT: stupid solution: using gap-2 in the parent and making it flex.

[brunnerh]

You can do this:

+ {#snippet children()}Hello{/snippet}
<Button icon="clock" {variant} {size}
+  children={size !== 'icon' ? children : undefined}
>
-	{#if size !== 'icon'}
-		Hello
-	{/if}
</Button>

(Snippet name can also be changed to be more meaningful since the property needs the long syntax here.)