Unable to resolve page through dynamic()

[rhyses-pieces]

Hello! I'm building out a POC with Elegua and Vite + Svelte, but I ran into an issue with dynamic routing. Whenever I use a named params route in the list of routes for the dynamic() method, Vite HMR freezes up and fails to render anything.

I'm unsure if I set up my routes wrong, but here's the gist of how it looks like on my end:

in App.svelte:

<svelte:component this={dynamic($path, [
  ["/", Home],
  ["/login", Login],
  ["/register", Register],
  ["/chara", Chara],
  ["/chara/new", CharaNew],
  ["/chara/:id", CharaSingle, { id: $params["id"] }]
], Error)} />

in CharaSingle.svelte:

<script lang="ts">
  import { params } from "elegua";
  export let id = "";
</script>

<h1>This is Id: {id}</h1>
<p>this is params: {JSON.stringify($params)}</p>

But if I place the CharaSingle component inside an if block, it renders with no issues:

{#if resolve($path, "/chara/:id")}
  <CharaSingle id={$params["id"]} />
{/if}

I set up a stackblitz project to showcase the issue here: https://stackblitz.com/edit/vitejs-vite-ur49yb?file=src%2FApp.svelte

Is there something I'm missing? Please let me know.

[howesteve]

You didn't show how are your imports, but I'm guessing some of them are lazily loaded and others not? If this is the case, it's due to issue #7 - dynamic() only works for static components - and is not easy to implement for lazy components. Think of dynamic() more as an accessory helper, than core functionality. For now, I advise using plain {#if...} blocks until I get some time to guess how is the best way to implement it.

[rhyses-pieces]

All of them are just imported like this:

<script>
  import Component from "../lib/components/Component.svelte";
  import Component2 from "../lib/components/Component2.svelte";
</script>

I don't think any of them were lazily loaded, unless again I've missed something. I did switch over to the {#if}{:else} blocks in the meantime.

[howesteve]

Ok, got it now. The problem is a leftover in the docs, where I wrote about support for a third param in the routes array:

<!-- You can pass optional props that will be passed to the component such as in the '/blog/:post' route below -->
<svelte:component this={dynamic($path, [
  ['/', Home],
  ['/about', About],
  ['/blog', Blog],
  ['/blog/:post', Post, {id: $params['post']}],
], Error)} />

Due to that, you followed the docs and tried:

["/chara/:id", CharaSingle, { id: $params["id"] }]

... but if you see the console screen for your sample project, there is an error:
Uncaught RangeError: Invalid array length

... which is the third, actually unsupported parameter, being passed inside the route.

To fix this, please do like this in your dynamic() call:

```["/chara/:id", CharaSingle]``
... and inspect $params['id']} from an `onMount()` event inside your `CharaSingle` component.

The reason was, when I was about to release the version implementing dynamic(), I decided to keep the api simple, and gave up that implementation, which would make dynamic() return not just [component], but two params ([component, params]). It would not be as easy to use as it is:

  <svelte:component this={dynamic($path, routes)} />

because the props returns from dynamic() would have to be stored in another variable.

So, I'm sorry about the leftover mistake, and I've fixed the documentation.

I wrote the dynamic() function in short time, thinking about it just as a helper function, but it end up being one of the most used features. I'm going to revamp it for release 3.0 which will support svelte 5, and there will be some breaking changes in that function, but an easy port overall. And I shall implement #7 as well.

[rhyses-pieces]

Oh I see! That makes a lot of sense. It's no worries, thanks for the clarification and help.