routify
routify copied to clipboard
Using metadata indirectly (via variable) makes goto to not work properly.
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
It looks like your metadata
variable isn't reactive.
In Svelte you would need to do this
$: metadata = $context.route.metadata
Changing it to $: metadata = $context.route.meta;
did not change behavior
Would you be able to create a reproducible for me to try?
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.
Sorry. By reproducible I meant a minimal reproducible approach to isolate and reproduce the bug.