Does Voie work from file:// protocol with hash paths?

[niaxi]

I am attempting to build a desktop app using NWjs (v0.12.3) http://nwjs.io/ and the well thought-out Voie (v0.6.1) router. NWjs renders app UI by loading an html file using the "file://" protocol. I cannot get the "root" state to activate.

The "root" state is defined as follows:

app.add('root', {
  enter: ( ctx ) => {
    console.log('**ROOT**');
  }
});

The base file that wires up Voie + Vue is loaded in NWjs as

file:///Users/path/to/project/../index.html

I have not been able to see that lovely console log **ROOT** yet.

In addition, I am limited to hashes only so my second state is defined for #/cats like so:

app.add('cats', { path: '#/cats', enter: ( ctx ) => { console.log('CATS'); } });

To activate this state, I go to:

file:///Users/path/to/project/../index.html#/cats

No dice. :(

I'm thinking I must have missed something in the docs. I'm still investigating this, next stop is looking into how the path matching works. Any feedback will be welcome.

[niaxi]

I just RTFM and found the note about using history.js to enable hash support. I'll give it a go and update/close this issue if it works out.

[inca]

FWIW you can also check out routing test, it uses hash history (note, no #/ required in state configuration).

[niaxi]

After reading up on the Voie docs and taking a look at the history docs at https://github.com/rackt/history/tree/master/docs I still could not get this working.

Here's what I ended up with:

import { StateManager } from 'voie';
import { createHashHistory } from 'history';

let app = new StateManager({
  el: '.app',
  history: createHashHistory()
});

Still doesn't work with the file:// protocol in and NWjs app.

[niaxi]

Finally!

Debugged, like I should have done in the first place. Found the error

Uncaught TypeError: undefined is not a function

happening at a spot where the code was trying to call .find() on an Array of state names. The find method is only available in ES6.

The version of chrome in NWjs v0.12.3 does not yet have Array.prorotype.find(). So I pulled in a Polyfill and Voie-la! see what I did there?

I still have to use createHashHistory in order for my app to function over the file://protocol, makes sense.

Good news is that the main issue is now solved and I can get back on my merry way.

Toodles!

[inca]

Yep, I believe I mentioned es6-shim in docs somewhere :smile: Anyway, thanks for the update on this one!

[niaxi]

Thank you for a very useful take on Application state transitions + routing :smile: