update to 1.0.4

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-view-router",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "description": "react-view-router",
   "keywords": [
     "react-view-router",

src/index.js

@@ -8,6 +8,7 @@ export {
 export { default as RouterView }  from './router-view';
 
 export { useRouteGuards, REACT_FORWARD_REF_TYPE } from './route-guard';
+export { lazyImport } from './route-lazy';
 
 export * from './util';
 

src/route-cache.js

@@ -0,0 +1,23 @@
+class RouterCache {
+  constructor() {
+    this.cached = {};
+    this.seed = 0;
+  }
+
+  create(data) {
+    const key = `[route_cache_id:${++this.seed}]`;
+    this.cached[key] = data;
+    return key;
+  }
+
+  flush(seed) {
+    if (!seed) return;
+    let ret = this.cached[seed];
+    delete this.cached[seed];
+    return ret;
+  }
+}
+const routeCache = new RouterCache();
+
+
+export default routeCache;

src/route-guard.js

@@ -7,6 +7,7 @@ export class RouteCuards {
   constructor(guards) {
     this.beforeRouteEnter = [];
     this.beforeRouteUpdate = [];
+    this.afterRouteEnter = [];
     this.beforeRouteLeave = [];
     this.afterRouteLeave = [];
     Object.keys(guards).forEach(key => this[key] && this[key].push(guards[key]));
@@ -21,12 +22,19 @@ export class RouteCuards {
 }
 
 export function useRouteGuards(component, guards = {}) {
-  return {
+  const ret = {
     $$typeof: ForwardRefMeth.$$typeof,
-    __guards: new RouteCuards(guards || {}),
-    __component: component,
     render(props, ref) {
       return React.createElement(component, { ...props, ref });
     }
   };
+  Object.defineProperty(ret, '__guards', {
+    enumerable: false,
+    value: new RouteCuards(guards || {}),
+  });
+  Object.defineProperty(ret, '__component', {
+    enumerable: false,
+    value: component,
+  });
+  return ret;
 }

src/route-lazy.js

@@ -0,0 +1,44 @@
+
+export class RouteLazy {
+  constructor(importMethod) {
+    this.importMethod = importMethod;
+    this.resolved = false;
+    this.updater = null;
+  }
+
+  toResolve() {
+    return new Promise((resolve, reject) => {
+      let _resolve = v => {
+        if (this.updater) v = this.updater(v) || v;
+        this.resolved = true;
+        resolve(v);
+      };
+      let component = this.importMethod();
+      if (component instanceof Promise) {
+        component.then(c => {
+          component = c.__esModule ? c.default : c;
+          return _resolve(component);
+        }).catch(function () { return reject(arguments); });
+      } else _resolve(component);
+    });
+  }
+}
+
+export async function resolveRouteLazyList(matched) {
+  if (!matched) return;
+  const toResolve = function (routeLazy) {
+    if (!routeLazy || !(routeLazy instanceof RouteLazy)) return;
+    return routeLazy.toResolve();
+  };
+  for (let r of matched) {
+    const config = r.config;
+    await toResolve(config.component, config);
+    if (config.components) {
+      for (let key of config.components) await toResolve(config.components[key], config);
+    }
+  }
+}
+
+export function lazyImport(importMethod) {
+  return new RouteLazy(importMethod);
+}

src/router-view.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Router } from 'react-router-dom';
-import { renderRoutes } from './util';
+import { renderRoutes, normalizeRoutes } from './util';
 
 class RouterView extends React.Component {
   constructor(props) {
@@ -16,6 +16,7 @@ class RouterView extends React.Component {
 
       router,
       parentRoute: null,
+      currentRoute: null,
       routes: router ? this.filterRoutes(router.routes) : [],
     };
     this.state = state;
@@ -25,9 +26,10 @@ class RouterView extends React.Component {
   }
 
   _updateRef(ref) {
-    const { parentRoute } = this.state;
-    if (parentRoute) parentRoute.componentInstance = ref;
+    let currentRoute = this._refreshCurrentRoute();
+    if (currentRoute) currentRoute.componentInstance = ref;
     if (this.props && this.props._updateRef) this.props._updateRef(ref);
+    if (currentRoute.fullPath !== this.state.currentRoute.fullPath) this.setState({ currentRoute });
   }
 
   filterRoutes(routes) {
@@ -42,6 +44,16 @@ class RouterView extends React.Component {
     });
   }
 
+  _refreshCurrentRoute(state) {
+    if (!state) state = this.state;
+    const matched = state.router.currentRoute.matched;
+    const ret = matched.length > state._routerDepth
+      ? matched[state._routerDepth]
+      : null;
+    if (ret) ret.viewInstance = this;
+    return ret;
+  }
+
   async componentDidMount() {
     if (this.state._routerInited) return;
     const state = { ...this.state, _routerInited: true };
@@ -61,29 +73,56 @@ class RouterView extends React.Component {
       }
     }
 
-    if (!state.routes.length && state._routerDepth) {
-      // state.router.updateRoute();
+    if (!state.routes.length) {
       const matched = state.router.currentRoute.matched;
-      state.parentRoute = matched.length > state._routerDepth
-        ? matched[state._routerDepth - 1]
-        : null;
-      if (state.parentRoute) {
-        state.parentRoute.viewInstance = this;
+      state.currentRoute = this._refreshCurrentRoute(state);
+      if (state._routerDepth) {
+        // state.router.updateRoute();
+        state.parentRoute = matched.length >= state._routerDepth
+          ? matched[state._routerDepth - 1]
+          : null;
+        state.routes = state.parentRoute ? this.filterRoutes(state.parentRoute.config.children) : [];
       }
-      state.routes = state.parentRoute ? this.filterRoutes(state.parentRoute.config.children) : [];
     }
 
     if (state._routerRoot && state.router) {
-      state.router._handleRouteInterceptor(state.router.location, ok => ok && this.setState(state));
+      state.router._handleRouteInterceptor(state.router.location, ok => ok && this.setState(state), true);
     } else this.setState(state);
   }
 
   shouldComponentUpdate(nextProps, nextState) {
     return !nextProps.location || (nextProps.location.pathname !== this.props.location.pathname);
   }
 
+  push(routes) {
+    const state = { ...this.state };
+    state.routes.push(...normalizeRoutes(routes));
+    this.setState(state);
+  }
+
+  splice(index, routes) {
+    const state = { ...this.state };
+    state.routes.splice(index, routes.length, ...normalizeRoutes(routes));
+    this.setState(state);
+  }
+
+  indexOf(route) {
+    if (typeof route === 'string') route = { path: route };
+    const { routes } = this.state;
+    return routes.findIndex(r => r.path === route.path);
+  }
+
+  remove(route) {
+    if (typeof route === 'string') route = { path: route };
+    const { routes } = this.state;
+    const index = this.indexOf(route);
+    if (~index) routes.splice(index, 1);
+    this.setState({ routes });
+  }
+
   render() {
     const { routes, router, _routerRoot, _routerInited } = this.state;
+    // eslint-disable-next-line
     const { _updateRef, ...props } = this.props || {};
     if (!_routerInited) return props.fallback || null;
     const { query, params } = router.currentRoute;
@@ -92,10 +131,9 @@ class RouterView extends React.Component {
       {
         ...props,
         parent: this,
-        ref: _updateRef ? this._updateRef : undefined
       },
       { },
-      { name: props.name, query, params });
+      { name: props.name, query, params, ref: this._updateRef });
     let ret = null;
     if (_routerRoot) {
       ret = React.createElement(Router, { history: router }, _render());