0

Best way to setup a SPA router with lit-element and simple-wc-router using webpack.

I currently have this working but am wondering if there is a better way to put this all together.

webpack-config.js:

module.exports = ({ mode, presets }) => {
  return webpackMerge(
  {
    entry: {
    app: './src/index.js'
  },

index.js

import './app-router.js';
window.addEventListener('load', () => {
    initRouter();
});

function initRouter() {
  var approuter = document.createElement("app-router");
  document.getElementsByTagName("BODY")[0].append(approuter);
}

app-router.js

import { LitElement, html } from 'lit-element';
import { Router } from 'simple-wc-router';
import './ui/side-panel.js';
import './admin/admin-home.js';

class AppRouter extends Router(LitElement) {
    static get routes() {
        return [
        {
            path: "/admin",
            component: 'admin-home',
            import: () => {
              console.log('path /admin...');
              import(/* webpackChunkName: "adminutils" */ './admin/admin-home');
            }

        },
        {
          path: '/admin/billing',
          component: 'admin-billing',
          import: () => import(/* webpackChunkName: "adminutils" */ './admin/admin-billing')
        },

        {
          path: "*",
          component: 'not-found-view',
          import: () => import(/* webpackChunkName: "not-found-view" */ './views/not-found-view')
        }
    ];
}

This currently works. But in order to use the app-router element which has the routing logic, I have to append a HTML element.

Per LitElement docs: https://lit-element.polymer-project.org/guide/use the way to use a component after importing would be 

<app-router></app-router>

I could not find a way to use a web component without the html part, hence: document.getElementsByTagName("BODY")[0].append(approuter);

Is there a more elegant way to use the app-router web component?

Is there a better way to set up the routing component assuming we're using webpack?

user3757849
  • 199
  • 2
  • 14
  • Have you tried using vaadin router or the pwa-helpers router? https://vaadin.com/router https://www.npmjs.com/package/pwa-helpers#routerjs – Alan Dávalos Oct 09 '19 at 03:35
  • Have tried the vaadin router - that was the one that inspired this setup. There's a bug in the vaadin router when clicking on a link for a location that the user is already at. There is also an issue handling multiple subdirs /a/b/c. Was trying to avoid fixing those issues myself! Will take a look at pwa helpers router and check back in! Thanks for the tips. – user3757849 Oct 09 '19 at 15:08

1 Answers1

0

I guess a better solution might be to only import app-router in index.js like so:

import './app-router.js';

Without the event listener and initRouter() functions.

Then since index.js imported the module already, just add:

<app-router></app-router>

to index.html. This gives you the flexibility of specifying wherever you want the routing to happen, which may or may not be at the top of the page.

user3757849
  • 199
  • 2
  • 14