Research the router export

Right now we lazy import and initialize the router here:

https://github.com/IBM/pwa-lit-template/blob/5fb2c633276bf0b4bdcc339d9a3c7f1f988a0359/src/components/app-index.ts#L81-L89

This router.init() function doesn’t export anything:

https://github.com/IBM/pwa-lit-template/blob/5fb2c633276bf0b4bdcc339d9a3c7f1f988a0359/src/router/index.ts#L13-L27

Doing it this way, we found a problem: We can’t import the router instance to use the router helpers.

For example, we want to replace the hardcoded link in the not found page to use the router name. From this:

https://github.com/IBM/pwa-lit-template/blob/5fb2c633276bf0b4bdcc339d9a3c7f1f988a0359/src/pages/page-not-found.ts#L29

To something like this:

<a href="${router.urlForName('home')}">Back to home</a> 

And the same for the navigation links:

https://github.com/IBM/pwa-lit-template/blob/5fb2c633276bf0b4bdcc339d9a3c7f1f988a0359/src/components/app-index.ts#L57-L61

[web-padawan]

I will experiment with your branch later today, and will try to come up with a better approach.

[web-padawan]

I would consider using async directive for urlForName helpers.

let routerInstance;

export const initRouter = async (outlet) => {
  if (!routerInstance && outlet) {
    const router = await import('../router/index');
    routerInstance = router.init(outlet);
  }
  return routerInstance;
};

export const waitForRouter = () => {
  return new Promise((resolve) => {
    if (routerInstance) {
      resolve(routerInstance);
    } else {
      setTimeout(() => waitForRouter(), 100);
    }
  });
};

// use "until" directive to use helpers asynchronously
export const urlForName = (name) => {
  return until(waitForRouter().then((r) => r.urlForName(name)), '');
};