Skip to content

{#if a.deep != null} runs when a.deep is null if used as a transition parameter #15627

@rChaoz

Description

@rChaoz

Describe the bug

Did my best with the title. Can't describe this very well, please see the reproduction.

In short, this code...

{#if s.drawer}
  {s.drawer.toString()}
{/if}

...crashes with s.drawer is undefined. The contents of the if are evaluated even when the if is false, but only when s.drawer is used as the argument of a transition (transition:whatever={s.drawer}).

Reproduction

REPL

<script>
	const s = $state({})
	
	function slide() {
			return { duration: 150 }
	}
	
	function open() {
		s.drawer = { id: 123 }
	}
	
	function close() {
		delete s.drawer
	}
</script>

Hit Open, then Close. It crashes and the drawer remains open but the Close
button cannot be interacted with anymore (see console).
<br><br>

{#if s.drawer}
    {@const id = s.drawer.id}
    {#if id}
	Hi, I'm the drawer.
	<!-- Remove the "={id}" and the error goes away -->
        <button transition:slide|global onclick={close}>Close</button>
    {/if}
{/if}

<button onclick={open}>Open</button>

Regression

This is also a regression. The same bug happens in legacy mode, but the code works in v4.

v5 REPL | v4 REPL

Severity

annoyance

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions