Support for Dynamic Imports

Is your feature request related to a problem? Please describe. First, I’ve been following this project for a few months now and found it to be exactly what I need for my lit-element web component needs. There’s one thing I think it’s missing, and that’s route based lazy loading of components.

Describe the solution you’d like On route change, it should load an optional developer provided loading component. It should make an asynchronous request for the component associated with the route, then it should replace the loading component with the requested component once the promise is resolved. The additions can be added to the route.ts.

Describe alternatives you’ve considered I considered and demonstrated the use of a higher order component to achieve the same result using lit-redux-router. Although, it isn’t the cleanest way of doing it. The better way is to modify lit-redux-router. I thought it might be helpful to contribute it to you first. Maybe you have a better idea for how to approach this.

Additional context

An example of what two lazy loaded component routes would look like:

import { html, LitElement } from 'lit-element';
import { connectRouter } from 'lit-redux-router';
import store from './store.js';

import '../pages/home/home.js';
import '../components/Loading';

connectRouter(store);

class AppComponent extends LitElement {

  render() {
    const AboutRoute = {
      load: () => import(/* webpackChunkName: "aboutPage" */ '../pages/home/about'),
      loading: 'eve-loading'
    };
    const DocsRoute = {
      load: () => import(/* webpackChunkName: "docsPage" */ '../pages/home/docs'),
      loading: 'eve-loading'
    };

    return html`
      <div>
        <lit-route path="/" component="home-page"></lit-route>
        <lit-route path="/about" component="about-page" lazy="${true}" .loader="${AboutRoute}"></lit-route>
        <lit-route path="/docs" component="docs-page" lazy="${true}" .loader="${DocsRoute}"></lit-route>
      </div>
    `;
  }

}

customElements.define('eve-app', AppComponent);

[hutchgrant]

Yea that’s just the example, you don’t have to use webpack chunks. It does however assume the babel dynamic import plugin will be used in the implementation. But that’s optional, for this optional feature. It’s not a dependency for the module.

[hutchgrant]

That looks good to me, though I still have to test it. That’s way better looking logic than my hacky method.

Also the success and error events should be optional as well.