Template expressions don't reflect <script> narrowing

[rebasecase]

Description

<script>
let { data } = $props(); // {myProp?: string}

if (!data.myProp) { throw error(404, "nope");}
</script>

{#if data.myProp === "foo"} // data.myProp is possibly 'undefined'
{/if}

Proposed solution

I'm not sure

Alternatives

!. or non null checks.

Additional Information, eg. Screenshots

No response

[jasonlyu123]

This is an expected result. In Svelte, the instance script tag only gets run once. When the props update, your if check won't get rerun. You can either move the check to the load function. Or if you're sure this myProp won't ever get updated, you can create a const to store the narrowed value.

<script>
let { data } = $props();

if (!data.myProp) { throw error(404, "nope");}
const myProp = data.myProp
</script>

{#if myProp === "foo"}
{/if}

[rebasecase]

the instance script tag only gets run once

Thanks