Using metadata indirectly (via variable) makes goto to not work properly.

[dBaliukynas]

Describe the bug

Using let metadata = $context.route.metadata to conditionally render the slot, makes goto to not redirect to '/' (if condition actually hits). Also, trying to click to href="/" also doesn't work and no content is being rendered. If I would use $context.route.metadata directly and not via let metadata, everything works fine.

Reproduction

Full code (this works improperly):

<script lang="ts">
    import "../app.pcss";
    import { LightSwitch } from "@skeletonlabs/skeleton";
    import { AppBar } from "@skeletonlabs/skeleton";
    import { session } from "../App.svelte";
    import { get } from "svelte/store";
    import {
        afterUrlChange,
        beforeUrlChange,
        context,
        goto,
    } from "@roxi/routify";
    import { supabase } from "../supabase/supabaseClient";

    let metadata = $context.route.meta;

    if ($session?.user && metadata?._guest) {
        $goto("/");
    }

    const handleLogOut = async () => {
        let { error } = await supabase.auth.signOut();
        if (!error) {
            $goto("/");
        }
    };
</script>

<div class=" bg-gradient-to-br from-[#6EE2F5] to-[#6454F0] pb-0.5">
    <AppBar class=" h-full w-full bg-gray-800">
        <svelte:fragment slot="lead">
            <a href="/"><img src="" class="h-8 w-28" /></a>
        </svelte:fragment>
        <svelte:fragment slot="trail">
            {#if $session?.user}
                <span>{$session.user.user_metadata.username}</span>
                <a href="#" on:click={handleLogOut}>Sign Out</a>
            {:else}
                <a href="/sign-up">Sign Up</a>
                <a href="/login">Log In</a>
            {/if}
            <LightSwitch />
        </svelte:fragment>
    </AppBar>
</div>

{#if $session?.user && metadata?._guest}
    <div></div>
{:else}
    <slot />
{/if}

This works properly:

<script lang="ts">
    import "../app.pcss";
    import { LightSwitch } from "@skeletonlabs/skeleton";
    import { AppBar } from "@skeletonlabs/skeleton";
    import { session } from "../App.svelte";
    import { get } from "svelte/store";
    import {
        afterUrlChange,
        beforeUrlChange,
        context,
        goto,
    } from "@roxi/routify";
    import { supabase } from "../supabase/supabaseClient";

    let metadata = $context.route.meta;

    if ($session?.user && metadata?._guest) {
        $goto("/");
    }

    const handleLogOut = async () => {
        let { error } = await supabase.auth.signOut();
        if (!error) {
            $goto("/");
        }
    };
</script>

<div class=" bg-gradient-to-br from-[#6EE2F5] to-[#6454F0] pb-0.5">
    <AppBar class=" h-full w-full bg-gray-800">
        <svelte:fragment slot="lead">
            <a href="/"><img src="" class="h-8 w-28" /></a>
        </svelte:fragment>
        <svelte:fragment slot="trail">
            {#if $session?.user}
                <span>{$session.user.user_metadata.username}</span>
                <a href="#" on:click={handleLogOut}>Sign Out</a>
            {:else}
                <a href="/sign-up">Sign Up</a>
                <a href="/login">Log In</a>
            {/if}
            <LightSwitch />
        </svelte:fragment>
    </AppBar>
</div>

{#if $session?.user && $context.route.meta?._guest} <------------------------
    <div></div>
{:else}
    <slot />
{/if}

Logs

No response

System Info

System:
    OS: Linux 5.15 Ubuntu 22.04 LTS 22.04 LTS (Jammy Jellyfish)
    CPU: (6) x64 Intel(R) Core(TM) i5-9400F CPU @ 2.90GHz
    Memory: 5.63 GB / 7.73 GB
    Container: Yes
    Shell: 5.1.16 - /bin/bash
  Binaries:
    Node: 21.6.2 - ~/.nvm/versions/node/v21.6.2/bin/node
    npm: 10.2.4 - ~/.nvm/versions/node/v21.6.2/bin/npm
    pnpm: 8.15.3 - /usr/local/bin/pnpm
  npmPackages:
    @roxi/routify: 3.0.0-next.214 => 3.0.0-next.214
    svelte: ^4.2.10 => 4.2.11
    vite: ^5.1.0 => 5.1.3

[jakobrosenberg]

It looks like your metadata variable isn't reactive.

In Svelte you would need to do this

$: metadata = $context.route.metadata

[dBaliukynas]

Changing it to $: metadata = $context.route.meta; did not change behavior

[jakobrosenberg]

Would you be able to create a reproducible for me to try?

[dBaliukynas]

I have created a repo: https://github.com/dBaliukynas/routify-test. I used pnpm, so you would only need to clone and run pnpm i and pnpm run dev. The behavior can be seen in _module.svelte file.

[jakobrosenberg]

Sorry. By reproducible I meant a minimal reproducible approach to isolate and reproduce the bug.