Usage in electron application

[grizio]

I used svelte-routing into an electron application on Windows and ended up having some issues.

After some investigation, I found the solution (compatible in browser and in electron application for Windows and Linux, not tested on mac):

<script>
  // App.svelte
  import { Router } from "svelte-routing"

  export let url = ""

  // Add the basepath (ex: C:/) on top-level router
  const basepath = /^\/?[a-zA-Z]+:/.test(window.location.pathname)
    ? window.location.pathname.substr(0, window.location.pathname.indexOf(":") + 1)
    : "/"
</script>

<Router url={url} basepath={basepath}>
  <!-- … -->
</Router>

I needed to add a basepath with the disk letter (C:/, D:/, …) on top-level router. It could be interesting to update the library to be electron compatible on windows (and other OS). I thought of three ways:

1. Add the disk letter prefix (ex: C:/) directly in the Router component as in the above code for every library consumer (I did not find an invalid use case but I could forget one)
2. Add an attribute electron: boolean on Router to enable this specific behavior
3. Update the documentation with the explanation and let consumers do it manually

I can create the Pull Request once the solution (one of the three above or another) is decided.

Thanks for your library and your time. :pray:

[EmilTholin]

Hi @grizio! Sorry for the slow feedback on this.

Great that you got it working in Electron! Maybe it could be a good idea to create a question/answer on Stack Overflow? That combined with this issue of yours will make it easy for people to google a solution to this. I'm not sure we want to add it to the README as it's a pretty rare use case.

What do you think?

[grizio]

Personally, I would prefer having a simple sentence in the README (in a section troubleshooting) instead of looking for answers in stack overflow when possible, even if it is a link to this Github issue (eg: To use this library in electron application, see #143).

But my opinion is maybe different from most people, I do not know the behavior of most people.

[mefechoel]

It might be handy to use the memory history implementation when using electron. It is currently used as a fallback when the history api can't be used. For that to work, it would need to be exposed to the api though. A history could be created and passed to the router like so:

<script>
  import { Router, createHistory, createMemorySource } from "svelte-routing";

  const history = createHistory(createMemorySource());
</script>

<Router {history}>
  ...
</Router>

[DerGernTod]

@mefechoel would be great if that'd work. i tried it but unfortunately the createHistory and createMemorySource functions are not exposed. if i try to import them from the history file as in

import { createHistory, createMemorySource } from "svelte-routing/history";

i get exceptions that createHistory and createMemorySource are undefined.

the basepath approach works for me though, so thanks for that, @grizio! however, if you reload the electron window you'll get an error, because the router pushes this into the history: "file:///C:/about" which of course cannot be resolved. for such cases hash history would be great since for electron apps, there simply is no serverside that could provide such paths.

what would be necessary to provide such a feature?