A navigation aid (aka, router) for the browser in 850 bytes~!

Hello, Luke!

I am implementing navaid as a long-lived router on an app that will be used both on web and smartphones (through Cordova).

Is there an option on navaid to avoid the automatic call of run() when calling listen() or a way to provide a specific URL to this first call, like / instead of the current URL?

This helps my app to run fine on smartphones as well, because otherwise the run() call will fail with the initial URL provided by Cordova, that is something like file:///home/user/app/directory/index.html.

I used Page.js to to this before, and on the smartphones I used its dispatch: false option to avoid this firs "run". But Navaid is so incredibly smaller that I prefer it over Page.js.

Thanks again!

I apologize in advance if I'm wrong to open the issue and I shouldn't have done it here. But I think it really concerns the basics of Navaid.

I'm also ready to open and update a wiki page for all newcomers like me.

THE PROBLEM:

I started from svelte-demo (https://github.com/lukeed/svelte-demo) and I'm trying to use nested routes for a list/detail view.

REPRODUCTION: https://codesandbox.io/s/quizzical-dirac-2d0qy

To come to the problem you should:

• open the console from the tab on the bottom
• click on "Go to Teams Page"
• click on "Go to Team 1 Page" (or others)
• click on "Go to Team 1 Page" (or others) from the list
• as you can see in console until now just four messages from "App draw()" and one "PageTeamRoute draw()"
• now you can clear the console
• click on "Go to Player 1 Page" (or others) from the list
• you can see now the problem: 4 messages in console:

Why?

Am I correctly using Navaid with nested routes?

Is this correct in App.svelte?

.on("team/*", obj => draw(PageTeam, obj))

I am following the example in the template provided after creating an app from the official svelte demo and I received the above ^ error when I set my rollup configuration file format to iife.

input: 'src/main.js', output: { sourcemap: true, format: 'iife', name: 'app', file: 'public/bundle.js' },

Or is this a rollup issue?

Coming from this example: https://codesandbox.io/s/reverent-tesla-c0kq0 I would like to understnad if this is possible in Navaid now:

const router = Navaid()
    .on("/", () => draw(PageHome))
    .on("/teams", () => draw(PageTeamList))
    .on("/team/:teamID/*", obj => draw(Team, obj))
    .listen();

• using .on("/team/:teamID/*", obj => draw(Team, obj)) doesn't catch urls like "/team/1"
• using .on("/team/*", obj => draw(Team, obj)) catch urls like "/team/1" but as params in Team component I need the :teamID parameter which is wild in this case; the problem is if the URL is eg. like "/team/1/2/56/8" wild is 1/2/56/8 which is a wrong var in my Team component code.

UPDATE:

I need also something like this to catch: /team/1/shirt/5.

Is there a way to catch both using something like /team/:teamID* where * here is a wildcard after :teamID?

I hope I was clear. :)

Taking your https://codesandbox.io/s/reverent-tesla-c0kq0 from https://github.com/lukeed/navaid/issues/13.

• If you upgrade to 3.5.1 is ok:

(one click on "Go to Teams Page")

• If you upgrade to 3.5.2 is not:

(one click on "Go to Teams Page")

What can it be?

UPDATE:

FIRST PROBLEM

I cannot navigate anymore.

Until 3.5.1 you can navigate like this:

1. Being in Home ("/")
2. click on "Go to Teams Page" ("/teams")
3. click on "Go to Team 1 Page" ("team/1")

With 3.5.2 you can't.

You can do 1 and 2 but at the step 3 you see nothing.

If you are on the page "team/1" and reload using codesandbox's preview icon it works.

SECOND PROBLEM

In one of my projects the error is even more frightening:

TypeError: Cannot read property '$$' of undefined

For SPA's that need to work regardless of hosting environment, using hash-based navigation is usually the best solution, especially if link-sharing is integral to the app.

I made these small changes to enable hash support:

if ((uri = fmt(uri || location.href.replace(location.origin, "")))) {
//uri = uri.match(/[^\?#]*/)[0];

and

...
		addEventListener("click", click);
		addEventListener("hashChange", run);
		$.unlisten = function() {
...
			removeEventListener("click", click);
			removeEventListener("hashChange", run);
		};

Given the regex I assume you did not want support for hashes in this library, but happy to write a test and submit a pull if you are open to it.

Hi @lukeed thanks for your work on this router! I'm having some trouble with 404 page not found handling and was wondering if you could point me in the right direction. Whenever I do a Ctrl+r to reload the page I see the 404 page flicker before loading the correct page (sometimes it doesn't reach the correct page and just loads the 404). Here are some project details in case it's helpful:

• I have static HTML fallbacks for each page that hydrate into svelte components
• The static HTML paths are in the format /about/index.html so I match the urls with trailing slashes and redirect them to the same page but without the slash in the spa (e.g. /about)
• I dynamically create the routes using a data source (nodes.js)

<Html {route} {node} {allNodes} />

<script>
  import Navaid from 'navaid';
  import nodes from './nodes.js';
  import Html from '../global/html.svelte';

  let route, node, allNodes;

  const getNode = (uri, trailingSlash = "") => {
    return nodes.find(node => node.path + trailingSlash == uri);
  }

  let uri = location.pathname;
  node = getNode(uri);
  if (node === undefined) {
    node = getNode(uri, "/");
  }
  allNodes = nodes;

  function draw(m) {
    node = getNode(uri);
    if (node === undefined) {
      // Create a placeholder node so props are complete
      node = {
        "path": "/404",
        "type": "404",
        "filename": "404.json",
        "fields": {}
      }
    }
    route = m.default;
    window.scrollTo(0, 0);
  }

  function track(obj) {
    uri = obj.state || obj.uri;
  }

  addEventListener('replacestate', track);
  addEventListener('pushstate', track);
  addEventListener('popstate', track);

  const router = Navaid('/', () => import('../content/404.js').then(draw));

  allNodes.forEach(node => {
    router.on(node.path, () => {
      // Check if the url visited ends in a trailing slash (besides the homepage).
      if (uri.length > 1 && uri.slice(-1) == "/") {
        // Redirect to the same path without the trailing slash.
        router.route(node.path, false);
      } else {
        import('../content/' + node.type + '.js').then(draw);
      }
    }).listen();

  });

</script>

Thanks!

Starting to use your library with Svelte 3. This is either a question or feature request...

I see the pushState events are basically using the state param for the uri. This removes ability to history.pushState(someRouteState, ...) right?

Seems like it would be nice to have pushState state param, say, default to null but be available to use.... when caching some route data like here:

https://twitter.com/ryanflorence/status/1111272046372093953

None of the other generic routers seem to handle this well OR they don't handle search params well or something. Yours is best so far and small. But having state available would be nice.

Hi,

How i can receive a generic event before load component and after load it?

My components .js file are loaded dynamically, so it still on home until the .js file is loaded. So i want show a loading toast and hide after it was loaded.

const router = Navaid("/")
        .on("/", () => run(import("../routes/Home.svelte")))
        .on("/about", () => run(import("../routes/About.svelte")))

Can you help me?

Thanks.

Assuming this setup:

router = (
  navaid()
    .on('/', () => console.log('doing something'))
    .listen()
);

You will be doing something every time the "/" path is routed. This is common sense & to be expected. However, what might not be obvious is that if you have a standard link in a global component (eg, a navbar) pointing to the home page:

<a href="/">Go Home</a>

... and click it repeatedly, you will be doing something for each of those clicks, even though you're already on the "/" route.

This is posted as a RFC because it might qualify as a breaking change in some apps.
Many might actually be relying on this behavior to reset page state, for example.

Please let me know below :)

There's currently not a good way to handle multiple routers within the same page. But what are your thoughts about this for handling multiple routers in a page?

TBH I'm not even sure that this is a good idea... still on the fence

var items = (
  navaid()
    .on('/items/', () => console.log('Items Home'))
    .on('/items/:title', x => console.log('Item: ', x.title))
);

var books = (
  navaid()
    .on('/books/', () => console.log('Books Home'))
    .on('/books/:title', x => console.log('Book: ', x.title))
);

var main = (
  navaid()
    .on('/', () => console.log('Home'))
    .on('/about', () => console.log('About'))
    .use(items)
    .use(books)
    .on('/contact', () => console.log('Contact'))
);

main.listen();

I already have this built, and it seems to be the only sane way to juggle multiple routers on a page.

As for actual routing, there are two options:

1. Look at the main routes first and then the sub-routers' routes, disregarding the order of the router composition:

   /   –>   /about   –>   /contact   –>   /items   –>   /items/:title   –>   /books   –>   /books/:title
   

2. Treat all routers' routes equally, respecting the order of composition:

   /   –>   /about   –>   /items   –>   /items/:title   –>   /books   –>   /books/:title   –>   /contact
   

Of course, another alternative is to do something like this:

main.listen();
items.listen();
books.listen();

...which feels much simpler to the end-user, but it very likely adds a considerable amount of overhead to Navaid in order to facilitate that. IMO it may not be worth it, especially if/when the 90% use-case is to use a single instance per App.

No matter the choice, handling the on404 behavior needs answering, too. For example, if main, items, and books all have their own 404-handler, how will one know to fire vs wait for a sibling router? Similarly, what if only books had a 404-handler defined... how should it know that it's okay to run?

My hunch is that the 2nd option (3x .listen()) is not compatible with this at all.

Hello mate

Quick fix to make my project work. Please feel free to update this PR.

https://developer.mozilla.org/en-US/docs/Web/API/HTMLAnchorElement/download

I would like to add an in-app back button that should go back in the history, but if it would leave my site it should call history.replaceState to a fallback instead.

For example, if I click on a link to example.com/products/123, the in-app back button would work as router.route('/products', true), but if I was already at any page in that site and navigated to that route, the button would work as history.back().

The falback uri would be different depending on the page and should be specified, but it could default to /.

Hello!

All we know that example: https://codesandbox.io/s/reverent-tesla-c0kq0 But when you update sirv-cli from 0.3.1 to last version 1.0.8 you will get strange behavior. All svelte project become rerendering multiple times and it will be difficult to call it SPA as for me. You should see console after changing sirv-cli version. For example: 1 click to "Go to Teams Page" and you will get 9 same messages "~> App is drawing ::
PageTeamList ".

I will go with other serving software in production and it could be no problem but i am not sure.

What is the problem here? And how i could fix it? And how i could name that problem correctly?

Thank you!

I see there's on. It's not clear to me from the docs whether that happens before or after, but it'd be cool if there were also a handler for the other one

This is low priority for me since I'm not actually using navaid for anything right now. Just something I noticed was missing from the API and thought I'd share as a suggestion

Hi, Is it possible to cancel navigation in navaid? In an editor scenario I would like to setup a dirty flag so that if the user wants to navigate off the page while the editor has changes, to prompt the user and give him the chance to cancel navigation.

In the svelte-demo repo I have seen a good example of route guards for the protected/admin area scenario. Following that sample code, I could conditionally prompt the user based on a dirty flag and do nothing at all if he or she chooses to cancel. But from navaids point of view, the navigation would have already happened and the history would reflect the new url.

I thinks a beforeNavigation hook would be a great addition to the the library.

Is it possible to solve this scenario in navaids current incarnation?

Thanks!!

const router = (
  Navaid('/')
  // support for cancelling navigation??
  .beforeNavigation((newPath, oldPath) => {
    if($dirtyFlag) {
      // prompt user  
      // return false to cancel navigation      
      return false;
    }
    return true;
  })
  .on('/', () => run(import('../routes/Home.svelte')))
  .on('/about', () => run(import('../routes/About.svelte')))
  .on('/login', () => run(import('../routes/Login.svelte')))
  .on('/private', () => onAdmin(import('../routes/Private.svelte')))
  .on('/forbidden', () => run(import('../routes/Forbidden.svelte')))
  .on('/blog', () => run(import('../routes/Blog.svelte')))
  .on('/blog/:postid', obj => run(import('../routes/Article.svelte'), obj))
  );
function onAdmin(thunk, obj) {
  if ($isAdmin) return run(thunk, obj);
  if ($isUser) return router.route('/forbidden', true);
  router.route('/login', true);
}

Intercepting clicks made on anchors inside shadow roots looking for the anchor closest to the event target doesn't work since events are re-targeted to the shadow root host element.

The anchor can be found in the event path with the following code:

function findA(e){
  var i = 0, p = e.path || e.composedPath && e.composedPath(), a = p && p[i];
  while(a && a.tagName !== 'A') a = p[++i];
  return a;
}

Note that this will only work for shadow roots configured with mode set to open since elements inside closed ones don't appear in the event path.

Can submit a PR if you agree with the proposed change