Support for Dynamic Imports about lit-redux-router HOT 7 CLOSED

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.

from lit-redux-router.

@hutchgrant
Curious, does this assume a hard dependency on webpack?

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

from lit-redux-router.

oh I see, this is just for your example usage, and not needed for the underlying implementation?

from lit-redux-router.

Thanks for opening this issue @hutchgrant, it will be a great addition!

from lit-redux-router.

This problem intersects with another use case that is if you have to query for data or any other async process before being able to display a route. (angular ui-router had an interface for this for example)

calling an api using a promise

<lit-route 
    path="/docs" 
    component="docs-page" 
    .resolve="${() => fetch('mydomain.com/api')}"
></lit-route>

dynamic import is a promise as well

<lit-route 
    path="/docs" 
    component="docs-page" 
    .resolve="${() => import(/* webpackChunkName: "aboutPage" */ '../pages/home/about')}"
></lit-route>

As you suggested we need a component for loading status

<lit-route 
    path="/docs" 
    component="docs-page" 
    .resolve="${() => import(/* webpackChunkName: "aboutPage" */ '../pages/home/about')}"
    loading="my-loading"
></lit-route>

And potentially add onSuccess and onError events for redirects or tracking or whatever

<lit-route 
    path="/docs" 
    component="docs-page" 
    .resolve="${() => import(/* webpackChunkName: "aboutPage" */ '../pages/home/about')}"
    loading="my-loading"
    @success="${result => console.log(result)}"
    @error="${error => console.log(error)}"
></lit-route>

from lit-redux-router.

I suggest the following implementation with a few changes in the stateChanged lifecycle and the render function

public stateChanged(state: State): void {
  this.active = isRouteActive(state, this.path);
  this.params = getRouteParams(state, this.path);

  if (this.active && this.resolve) {
    this.isResolving = true;
    this.resolve()
      .then(() => {
        this.isResolving = false;
        // here potentially fire custom success event
      })
      .catch(() => {
        this.isResolving = false;
        // here potentially fire custom error event
      });
  }
}

public render(): TemplateResult {
  if (!this.active) {
    return html``;
  }

  if (this.resolve && this.isResolving) {
    return !this.loading ? html`` : this.getTemplate(this.loading);
  }

  if (!this.component) {
    return html`<slot></slot>`;
  }

  return this.getTemplate(this.component, this.params);
}

from lit-redux-router.

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.

from lit-redux-router.