`router.mode.hash()` broken?

[NfNitLoop]

Hello! New user here, so I may very well be getting something wrong.

I tried setting the router mode like this (in my index.html before I load the Svelte app):

<script type="module">
    import {router} from "tinro"
    router.mode.hash()
</script>

And alternatively like this (inside my .svelte app file):

<script context="module">
    import {router} from "tinro"
    router.mode.hash()
</script>

But while I can confirm that the code runs in either location... an <a href="/foo/"> still uses the History API to change the location to point to a non-existent page (/foo/). (I expected something like /myapp/#/foo/.)

The Route does work and display properly in my window, but if I reload the page the URL doesn't work because I don't have (and don't want) server-side support for wrong URLs.

[Update]: There are also no errors in the console. I'm running FireFox 84.0.1.

[AlexxNB]

Just tested with clean Svelte template:

<script context="module">
    import {router} from 'tinro';
    router.mode.hash();
</script>

<script>
    import {Route} from 'tinro';
</script>

<nav>
    <a href="/foo">Foo</a>
    <a href="/bar">Bar</a>
</nav>
<Route>
    <Route path="/foo">This is Foo</Route>
    <Route path="/bar">This is Bar</Route>
</Route>

This work as expected, URL are /#/foo and /#/bar. Be sure that you use latest v.0.5.3, because router.mode.hash() was added recently. Before we use router.useHashNavigation() which is deprecated now.

[NfNitLoop]

I did verify that I have 0.5.3. I may have an older version of Svelte, though. Maybe that’s causing an issue? I’ll upgrade things and try again tomorrow and let you know what I find. Thanks!

[NfNitLoop]

OK, I am able to see the working hash navigation in the basic svelte template. (Though, while the browser's back button updates the #/foo/ anchor in the URL, the content in the page isn't updated. Is that expected, or a bug?)

I'm using the same version of tinro in my app and it's not working, though. Even after an npm update. The only difference I can think of is that my app is using Snowpack instead of the svelte template's dev server. But I'm not getting any errors from Snowpack or in the browser so that seems like an unlikely cause.

I'm bumping up against the limits of my JavaScript debugging skill, though. I'll keep poking at it, but would be happy for any suggestions. (I'm also available to do a screen share if that helps!)

[Update]: I've updated the svelte-template to run with Snowpack and, unsurprisingly, that was not the issue. (It's still working in svelte-template, but not in my very minimal app. 🤔)

[AlexxNB]

What is snowpack template, you use? I wanna try also.

[AlexxNB]

Tried Svelte template from CSA - still works great. (with code which I posted above in the App.svelte).

[AlexxNB]

Check with v.0.5.5. If you have an template based on webpack or something like, which loads dist/tinro.js instead Route.svelte it may help.

[NfNitLoop]

Huh! 0.5.5 works! I'm not sure how those changes fixed it, but I confirmed that if I switch back to 0.5.3, links do not insert the #, and if I switch back to 0.5.5, they do. 🎉 Thanks!

I'm still having the issue above with the browser back button, but I'll open a separate issue for that.

[AlexxNB]

I'm not sure how those changes fixed it,

Heh... There was my mistake in modules bundling - router which used Route component and router which you imported was two different things, so nothing happening when you changed mode.

Module is using in REPL. But some Svelte templates also load module ("main" or "module" field in package.json) instead Route.svelte. I recomend to avoid such templates, because it will dublicate svelte code in your bundle.