提交lib

lib/LiveRoute.d.ts

+import { History, Location } from 'history';
+import * as React from 'react';
+import { match, RouteComponentProps, RouteProps } from 'react-router';
+declare type CacheDom = HTMLElement | null;
+declare type LivePath = string | string[] | undefined;
+interface IMatchOptions {
+    path?: string | string[];
+    exact?: boolean;
+    strict?: boolean;
+    sensitive?: boolean;
+}
+declare enum SideEffect {
+    SAVE_DOM_SCROLL = "SAVE_DOM_SCROLL",
+    RESTORE_DOM_SCROLL = "RESTORE_DOM_SCROLL",
+    CLEAR_DOM_SCROLL = "CLEAR_DOM_SCROLL",
+    RESET_SCROLL = "RESET_SCROLL",
+    HIDE_DOM = "HIDE_DOM",
+    SHOW_DOM = "SHOW_DOM",
+    CLEAR_DOM_DATA = "CLEAR_DOM_DATA",
+    ON_REAPPEAR_HOOK = "ON_REAPPEAR_HOOK",
+    ON_HIDE_HOOK = "ON_HIDE_HOOK",
+    NO_SIDE_EFFECT = "NO_SIDE_EFFECT"
+}
+declare enum LiveState {
+    NORMAL_RENDER_ON_INIT = "normal render (matched or unmatched)",
+    NORMAL_RENDER_MATCHED = "normal matched render",
+    HIDE_RENDER = "hide route when livePath matched",
+    NORMAL_RENDER_UNMATCHED = "normal unmatched render (unmount)"
+}
+declare type OnRoutingHook = (location: Location, match: match | null, history: History, livePath: LivePath, alwaysLive: boolean | undefined) => any;
+interface IProps extends RouteProps {
+    name?: string;
+    livePath?: string | string[];
+    alwaysLive?: boolean;
+    onHide?: OnRoutingHook;
+    onReappear?: OnRoutingHook;
+    forceUnmount?: OnRoutingHook;
+    computedMatch?: IMatchOptions;
+}
+/**
+ * The public API for matching a single path and rendering.
+ */
+declare type PropsType = RouteComponentProps<any> & IProps;
+declare class LiveRoute extends React.Component<PropsType, any> {
+    routeDom: CacheDom;
+    scrollPosBackup: {
+        left: number;
+        top: number;
+    } | null;
+    previousDisplayStyle: string | null;
+    liveState: LiveState;
+    currentSideEffect: SideEffect[];
+    wrapperedRef: any;
+    componentDidMount(): void;
+    componentDidUpdate(prevProps: any, prevState: any): void;
+    componentWillUnmount(): void;
+    passRef: (ref: any) => void;
+    getRouteDom: (ref?: any) => void;
+    hideRoute(): void;
+    showRoute(): void;
+    doesRouteEnableLive(): string | boolean | string[] | undefined;
+    saveScrollPosition(): void;
+    restoreScrollPosition(): void;
+    resetScrollPosition(): void;
+    clearDomData(): void;
+    clearScroll(): void;
+    isLivePathMatch(livePath: LivePath, alwaysLive: boolean | undefined, pathname: string, options: IMatchOptions): match<{}> | null;
+    performSideEffects: (sideEffects: SideEffect[], range: SideEffect[]) => void;
+    getSnapshotBeforeUpdate(prevProps: any, prevState: any): null;
+    onHook: (hookName: "onHide" | "onReappear") => void;
+    render(): {} | null | undefined;
+}
+export default LiveRoute;

lib/index.d.ts

+import LiveRoute from './LiveRoute';
+export default LiveRoute;

lib/index.es6.js

+import { Component, createElement, Children } from 'react';
+import { findDOMNode } from 'react-dom';
+import { matchPath } from 'react-router';
+
+var prefix = 'Invariant failed';
+function invariant(condition, message) {
+  if (condition) {
+    return;
+  }
+
+  {
+    throw new Error(prefix);
+  }
+}
+
+/* tslint:disable:cyclomatic-complexity */
+
+function debugLog(...message) {
+}
+
+function isEmptyChildren(children) {
+  return Children.count(children) === 0;
+}
+
+var SideEffect;
+
+(function (SideEffect) {
+  SideEffect["SAVE_DOM_SCROLL"] = "SAVE_DOM_SCROLL";
+  SideEffect["RESTORE_DOM_SCROLL"] = "RESTORE_DOM_SCROLL";
+  SideEffect["CLEAR_DOM_SCROLL"] = "CLEAR_DOM_SCROLL";
+  SideEffect["RESET_SCROLL"] = "RESET_SCROLL";
+  SideEffect["HIDE_DOM"] = "HIDE_DOM";
+  SideEffect["SHOW_DOM"] = "SHOW_DOM";
+  SideEffect["CLEAR_DOM_DATA"] = "CLEAR_DOM_DATA";
+  SideEffect["ON_REAPPEAR_HOOK"] = "ON_REAPPEAR_HOOK";
+  SideEffect["ON_HIDE_HOOK"] = "ON_HIDE_HOOK";
+  SideEffect["NO_SIDE_EFFECT"] = "NO_SIDE_EFFECT";
+})(SideEffect || (SideEffect = {}));
+
+var LiveState;
+
+(function (LiveState) {
+  LiveState["NORMAL_RENDER_ON_INIT"] = "normal render (matched or unmatched)";
+  LiveState["NORMAL_RENDER_MATCHED"] = "normal matched render";
+  LiveState["HIDE_RENDER"] = "hide route when livePath matched";
+  LiveState["NORMAL_RENDER_UNMATCHED"] = "normal unmatched render (unmount)";
+})(LiveState || (LiveState = {}));
+
+class LiveRoute extends Component {
+  constructor() {
+    super(...arguments);
+    this.routeDom = null;
+    this.scrollPosBackup = null;
+    this.previousDisplayStyle = null;
+    this.liveState = LiveState.NORMAL_RENDER_ON_INIT;
+    this.currentSideEffect = [SideEffect.NO_SIDE_EFFECT];
+    this.wrapperedRef = null;
+
+    this.passRef = ref => {
+      this.wrapperedRef = ref;
+    }; // get DOM of Route
+
+
+    this.getRouteDom = ref => {
+      let routeDom = findDOMNode(this);
+      this.routeDom = routeDom || this.routeDom;
+      ref && this.passRef(ref);
+    };
+
+    this.performSideEffects = (sideEffects, range) => {
+      debugLog(`${this.props.name} perform side effects:`, sideEffects, range);
+      const sideEffectsToRun = sideEffects.filter(item => range.includes(item));
+      sideEffectsToRun.forEach((sideEffect, index) => {
+        switch (sideEffect) {
+          case SideEffect.SAVE_DOM_SCROLL:
+            this.saveScrollPosition();
+            break;
+
+          case SideEffect.HIDE_DOM:
+            this.hideRoute();
+            break;
+
+          case SideEffect.SHOW_DOM:
+            this.showRoute();
+            break;
+
+          case SideEffect.RESTORE_DOM_SCROLL:
+            this.restoreScrollPosition();
+            break;
+
+          case SideEffect.ON_REAPPEAR_HOOK:
+            this.onHook('onReappear');
+            break;
+
+          case SideEffect.ON_HIDE_HOOK:
+            this.onHook('onHide');
+            break;
+
+          case SideEffect.CLEAR_DOM_SCROLL:
+            this.clearScroll();
+            break;
+
+          case SideEffect.RESET_SCROLL:
+            this.resetScrollPosition();
+            break;
+
+          case SideEffect.CLEAR_DOM_DATA:
+            this.clearScroll();
+            this.clearDomData();
+            break;
+        }
+      });
+      this.currentSideEffect = sideEffects.filter(item => !range.includes(item));
+    };
+
+    this.onHook = hookName => {
+      const {
+        exact = false,
+        sensitive = false,
+        strict = false,
+        path,
+        livePath,
+        alwaysLive,
+        // from withRouter, same as RouterContext.Consumer ⬇️
+        history,
+        location,
+        match,
+        staticContext // from withRouter, same as RouterContext.Consumer ⬆️
+
+      } = this.props;
+      const hook = this.props[hookName];
+      const context = {
+        history,
+        location,
+        match,
+        staticContext
+      };
+      const matchOfPath = this.props.path ? matchPath(location.pathname, this.props) : context.match;
+      const matchOfLivePath = this.isLivePathMatch(livePath, alwaysLive, location.pathname, {
+        path,
+        exact,
+        strict,
+        sensitive
+      });
+      const matchAnyway = matchOfPath || matchOfLivePath;
+
+      if (hookName == 'onHide') {
+        this.wrapperedRef && this.wrapperedRef.componentOnHide && this.wrapperedRef.componentOnHide(location, matchAnyway, history, livePath, alwaysLive);
+      } else if (hookName == 'onReappear') {
+        this.wrapperedRef && this.wrapperedRef.componentOnReappear && this.wrapperedRef.componentOnReappear(location, matchAnyway, history, livePath, alwaysLive);
+      }
+
+      if (typeof hook === 'function') {
+        hook(location, matchAnyway, history, livePath, alwaysLive);
+      }
+    };
+  }
+
+  componentDidMount() {
+    this.getRouteDom();
+  }
+
+  componentDidUpdate(prevProps, prevState) {
+    this.performSideEffects(this.currentSideEffect, [SideEffect.ON_REAPPEAR_HOOK, SideEffect.CLEAR_DOM_DATA]);
+    this.performSideEffects(this.currentSideEffect, [SideEffect.SHOW_DOM, SideEffect.RESTORE_DOM_SCROLL, SideEffect.CLEAR_DOM_SCROLL]);
+    this.performSideEffects(this.currentSideEffect, [SideEffect.RESET_SCROLL]);
+    this.getRouteDom();
+  } // clear on unmounting
+
+
+  componentWillUnmount() {
+    this.clearDomData();
+    this.clearScroll();
+  }
+
+  hideRoute() {
+    if (this.routeDom && this.routeDom.style.display !== 'none') {
+      this.previousDisplayStyle = this.routeDom.style.display;
+      this.routeDom.style.display = 'none';
+    }
+  } // reveal DOM display
+
+
+  showRoute() {
+    if (this.routeDom && this.previousDisplayStyle !== null) {
+      this.routeDom.style.display = this.previousDisplayStyle;
+    }
+  }
+
+  doesRouteEnableLive() {
+    return this.props.livePath || this.props.alwaysLive;
+  } // save scroll position before hide DOM
+
+
+  saveScrollPosition() {
+    if (this.routeDom && this.scrollPosBackup === null) {
+      const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
+      const scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft;
+      this.scrollPosBackup = {
+        top: scrollTop,
+        left: scrollLeft
+      };
+    }
+  } // restore the scroll position before hide
+
+
+  restoreScrollPosition() {
+    const scroll = this.scrollPosBackup;
+
+    if (scroll && this.routeDom) {
+      window.scrollTo(scroll.left, scroll.top);
+    }
+  } // reset scroll position
+
+
+  resetScrollPosition() {
+    if (scroll && this.routeDom) {
+      window.scrollTo(0, 0);
+    }
+  } // clear scroll position
+
+
+  clearDomData() {
+    if (this.doesRouteEnableLive()) {
+      this.routeDom = null;
+      this.previousDisplayStyle = null;
+    }
+  } // clear scroll position
+
+
+  clearScroll() {
+    if (this.doesRouteEnableLive()) {
+      this.scrollPosBackup = null;
+    }
+  }
+
+  isLivePathMatch(livePath, alwaysLive, pathname, options) {
+    const pathArr = Array.isArray(livePath) ? livePath : [livePath];
+
+    if (alwaysLive) {
+      pathArr.push('*');
+    }
+
+    for (let currPath of pathArr) {
+      if (typeof currPath !== 'string') {
+        continue;
+      }
+
+      const currLiveOptions = Object.assign({}, options, {
+        path: currPath
+      });
+      const currMatch = matchPath(pathname, currLiveOptions); // return if one of the livePaths is matched
+
+      if (currMatch) {
+        return currMatch;
+      }
+    } // not matched default fallback
+
+
+    return null;
+  }
+
+  getSnapshotBeforeUpdate(prevProps, prevState) {
+    this.performSideEffects(this.currentSideEffect, [SideEffect.SAVE_DOM_SCROLL, SideEffect.HIDE_DOM]);
+    return null;
+  }
+
+  render() {
+    const {
+      exact = false,
+      sensitive = false,
+      strict = false,
+      forceUnmount,
+      path,
+      livePath,
+      alwaysLive,
+      component,
+      render,
+      // from withRouter, same as RouterContext.Consumer ⬇️
+      history,
+      location,
+      match,
+      staticContext // from withRouter, same as RouterContext.Consumer ⬆️
+
+    } = this.props;
+    let {
+      children
+    } = this.props;
+    const context = {
+      history,
+      location,
+      match,
+      staticContext
+    };
+    !!!context ? invariant(false) : void 0;
+    const matchOfPath = this.props.path ? matchPath(location.pathname, this.props) : context.match;
+    const matchOfLivePath = this.isLivePathMatch(livePath, alwaysLive, location.pathname, {
+      path,
+      exact,
+      strict,
+      sensitive
+    });
+    const matchAnyway = matchOfPath || matchOfLivePath; // no render
+
+    if (!matchAnyway || matchAnyway && !matchOfPath && (this.liveState === LiveState.NORMAL_RENDER_ON_INIT || this.liveState === LiveState.NORMAL_RENDER_UNMATCHED)) {
+      this.currentSideEffect = [SideEffect.CLEAR_DOM_SCROLL];
+      this.liveState = LiveState.NORMAL_RENDER_UNMATCHED;
+      return null;
+    } // normal render || hide render
+
+
+    if (matchOfPath) {
+      this.currentSideEffect = [SideEffect.RESET_SCROLL]; // hide ➡️ show
+
+      if (this.liveState === LiveState.HIDE_RENDER) {
+        this.currentSideEffect = [SideEffect.SHOW_DOM, SideEffect.RESTORE_DOM_SCROLL, SideEffect.CLEAR_DOM_SCROLL, SideEffect.ON_REAPPEAR_HOOK];
+      }
+
+      this.liveState = LiveState.NORMAL_RENDER_MATCHED;
+    } else {
+
+      if (typeof forceUnmount === 'function' && forceUnmount(location, match, history, livePath, alwaysLive)) {
+        this.liveState = LiveState.NORMAL_RENDER_UNMATCHED;
+        this.currentSideEffect = [SideEffect.CLEAR_DOM_DATA];
+        return null;
+      } // show ➡️ hide
+
+
+      if (this.liveState === LiveState.NORMAL_RENDER_MATCHED) {
+        this.currentSideEffect = [SideEffect.ON_HIDE_HOOK, SideEffect.SAVE_DOM_SCROLL, SideEffect.HIDE_DOM];
+      }
+
+      this.liveState = LiveState.HIDE_RENDER;
+    } // normal render
+
+
+    const props = Object.assign({}, context, {
+      location,
+      match: matchOfPath,
+      ensureDidMount: this.getRouteDom
+    }); // Preact uses an empty array as children by
+    // default, so use null if that's the case.
+
+    if (Array.isArray(children) && children.length === 0) {
+      children = null;
+    }
+
+    if (typeof children === 'function') {
+      children = children(props);
+
+      if (children === undefined) {
+
+        children = null;
+      }
+    }
+
+    const componentInstance = component && createElement(component, props); // normal render from Route
+
+    return children && !isEmptyChildren(children) ? children : matchAnyway ? component ? componentInstance : render ? render(props) : null : null;
+  }
+
+}
+
+export default LiveRoute;

lib/index.js

+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var ReactDOM = require('react-dom');
+var reactRouter = require('react-router');
+
+/*! *****************************************************************************
+Copyright (c) Microsoft Corporation. All rights reserved.
+Licensed under the Apache License, Version 2.0 (the "License"); you may not use
+this file except in compliance with the License. You may obtain a copy of the
+License at http://www.apache.org/licenses/LICENSE-2.0
+
+THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED
+WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE,
+MERCHANTABLITY OR NON-INFRINGEMENT.
+
+See the Apache Version 2.0 License for specific language governing permissions
+and limitations under the License.
+***************************************************************************** */
+/* global Reflect, Promise */
+
+var extendStatics = function(d, b) {
+    extendStatics = Object.setPrototypeOf ||
+        ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+        function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+    return extendStatics(d, b);
+};
+
+function __extends(d, b) {
+    extendStatics(d, b);
+    function __() { this.constructor = d; }
+    d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+}
+
+var __assign = function() {
+    __assign = Object.assign || function __assign(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+
+function __values(o) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator], i = 0;
+    if (m) return m.call(o);
+    return {
+        next: function () {
+            if (o && i >= o.length) o = void 0;
+            return { value: o && o[i++], done: !o };
+        }
+    };
+}
+
+var prefix = 'Invariant failed';
+function invariant(condition, message) {
+  if (condition) {
+    return;
+  }
+
+  {
+    throw new Error(prefix);
+  }
+}
+
+/* tslint:disable:cyclomatic-complexity */
+
+function debugLog() {
+  var message = [];
+
+  for (var _i = 0; _i < arguments.length; _i++) {
+    message[_i] = arguments[_i];
+  }
+}
+
+function isEmptyChildren(children) {
+  return React.Children.count(children) === 0;
+}
+
+var SideEffect;
+
+(function (SideEffect) {
+  SideEffect["SAVE_DOM_SCROLL"] = "SAVE_DOM_SCROLL";
+  SideEffect["RESTORE_DOM_SCROLL"] = "RESTORE_DOM_SCROLL";
+  SideEffect["CLEAR_DOM_SCROLL"] = "CLEAR_DOM_SCROLL";
+  SideEffect["RESET_SCROLL"] = "RESET_SCROLL";
+  SideEffect["HIDE_DOM"] = "HIDE_DOM";
+  SideEffect["SHOW_DOM"] = "SHOW_DOM";
+  SideEffect["CLEAR_DOM_DATA"] = "CLEAR_DOM_DATA";
+  SideEffect["ON_REAPPEAR_HOOK"] = "ON_REAPPEAR_HOOK";
+  SideEffect["ON_HIDE_HOOK"] = "ON_HIDE_HOOK";
+  SideEffect["NO_SIDE_EFFECT"] = "NO_SIDE_EFFECT";
+})(SideEffect || (SideEffect = {}));
+
+var LiveState;
+
+(function (LiveState) {
+  LiveState["NORMAL_RENDER_ON_INIT"] = "normal render (matched or unmatched)";
+  LiveState["NORMAL_RENDER_MATCHED"] = "normal matched render";
+  LiveState["HIDE_RENDER"] = "hide route when livePath matched";
+  LiveState["NORMAL_RENDER_UNMATCHED"] = "normal unmatched render (unmount)";
+})(LiveState || (LiveState = {}));
+
+var LiveRoute =
+/*#__PURE__*/
+
+/** @class */
+function (_super) {
+  __extends(LiveRoute, _super);
+
+  function LiveRoute() {
+    var _this = _super !== null && _super.apply(this, arguments) || this;
+
+    _this.routeDom = null;
+    _this.scrollPosBackup = null;
+    _this.previousDisplayStyle = null;
+    _this.liveState = LiveState.NORMAL_RENDER_ON_INIT;
+    _this.currentSideEffect = [SideEffect.NO_SIDE_EFFECT];
+    _this.wrapperedRef = null;
+
+    _this.passRef = function (ref) {
+      _this.wrapperedRef = ref;
+    }; // get DOM of Route
+
+
+    _this.getRouteDom = function (ref) {
+      var routeDom = ReactDOM.findDOMNode(_this);
+      _this.routeDom = routeDom || _this.routeDom;
+      ref && _this.passRef(ref);
+    };
+
+    _this.performSideEffects = function (sideEffects, range) {
+      debugLog(_this.props.name + " perform side effects:", sideEffects, range);
+      var sideEffectsToRun = sideEffects.filter(function (item) {
+        return range.includes(item);
+      });
+      sideEffectsToRun.forEach(function (sideEffect, index) {
+        switch (sideEffect) {
+          case SideEffect.SAVE_DOM_SCROLL:
+            _this.saveScrollPosition();
+
+            break;
+
+          case SideEffect.HIDE_DOM:
+            _this.hideRoute();
+
+            break;
+
+          case SideEffect.SHOW_DOM:
+            _this.showRoute();
+
+            break;
+
+          case SideEffect.RESTORE_DOM_SCROLL:
+            _this.restoreScrollPosition();
+
+            break;
+
+          case SideEffect.ON_REAPPEAR_HOOK:
+            _this.onHook('onReappear');
+
+            break;
+
+          case SideEffect.ON_HIDE_HOOK:
+            _this.onHook('onHide');
+
+            break;
+
+          case SideEffect.CLEAR_DOM_SCROLL:
+            _this.clearScroll();
+
+            break;
+
+          case SideEffect.RESET_SCROLL:
+            _this.resetScrollPosition();
+
+            break;
+
+          case SideEffect.CLEAR_DOM_DATA:
+            _this.clearScroll();
+
+            _this.clearDomData();
+
+            break;
+        }
+      });
+      _this.currentSideEffect = sideEffects.filter(function (item) {
+        return !range.includes(item);
+      });
+    };
+
+    _this.onHook = function (hookName) {
+      var _a = _this.props,
+          _b = _a.exact,
+          exact = _b === void 0 ? false : _b,
+          _c = _a.sensitive,
+          sensitive = _c === void 0 ? false : _c,
+          _d = _a.strict,
+          strict = _d === void 0 ? false : _d,
+          path = _a.path,
+          livePath = _a.livePath,
+          alwaysLive = _a.alwaysLive,
+          // from withRouter, same as RouterContext.Consumer ⬇️
+      history = _a.history,
+          location = _a.location,
+          match = _a.match,
+          staticContext = _a.staticContext // from withRouter, same as RouterContext.Consumer ⬆️
+      ;
+      var hook = _this.props[hookName];
+      var context = {
+        history: history,
+        location: location,
+        match: match,
+        staticContext: staticContext
+      };
+      var matchOfPath = _this.props.path ? reactRouter.matchPath(location.pathname, _this.props) : context.match;
+
+      var matchOfLivePath = _this.isLivePathMatch(livePath, alwaysLive, location.pathname, {
+        path: path,
+        exact: exact,
+        strict: strict,
+        sensitive: sensitive
+      });
+
+      var matchAnyway = matchOfPath || matchOfLivePath;
+
+      if (hookName == 'onHide') {
+        _this.wrapperedRef && _this.wrapperedRef.componentOnHide && _this.wrapperedRef.componentOnHide(location, matchAnyway, history, livePath, alwaysLive);
+      } else if (hookName == 'onReappear') {
+        _this.wrapperedRef && _this.wrapperedRef.componentOnReappear && _this.wrapperedRef.componentOnReappear(location, matchAnyway, history, livePath, alwaysLive);
+      }
+
+      if (typeof hook === 'function') {
+        hook(location, matchAnyway, history, livePath, alwaysLive);
+      }
+    };
+
+    return _this;
+  }
+
+  LiveRoute.prototype.componentDidMount = function () {
+    this.getRouteDom();
+  };
+
+  LiveRoute.prototype.componentDidUpdate = function (prevProps, prevState) {
+    this.performSideEffects(this.currentSideEffect, [SideEffect.ON_REAPPEAR_HOOK, SideEffect.CLEAR_DOM_DATA]);
+    this.performSideEffects(this.currentSideEffect, [SideEffect.SHOW_DOM, SideEffect.RESTORE_DOM_SCROLL, SideEffect.CLEAR_DOM_SCROLL]);
+    this.performSideEffects(this.currentSideEffect, [SideEffect.RESET_SCROLL]);
+    this.getRouteDom();
+  }; // clear on unmounting
+
+
+  LiveRoute.prototype.componentWillUnmount = function () {
+    this.clearDomData();
+    this.clearScroll();
+  };
+
+  LiveRoute.prototype.hideRoute = function () {
+    if (this.routeDom && this.routeDom.style.display !== 'none') {
+      debugLog('--- hide route ---');
+      this.previousDisplayStyle = this.routeDom.style.display;
+      this.routeDom.style.display = 'none';
+    }
+  }; // reveal DOM display
+
+
+  LiveRoute.prototype.showRoute = function () {
+    if (this.routeDom && this.previousDisplayStyle !== null) {
+      this.routeDom.style.display = this.previousDisplayStyle;
+    }
+  };
+
+  LiveRoute.prototype.doesRouteEnableLive = function () {
+    return this.props.livePath || this.props.alwaysLive;
+  }; // save scroll position before hide DOM
+
+
+  LiveRoute.prototype.saveScrollPosition = function () {
+    if (this.routeDom && this.scrollPosBackup === null) {
+      var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
+      var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft;
+      debugLog("saved top = " + scrollTop + ", left = " + scrollLeft);
+      this.scrollPosBackup = {
+        top: scrollTop,
+        left: scrollLeft
+      };
+    }
+  }; // restore the scroll position before hide
+
+
+  LiveRoute.prototype.restoreScrollPosition = function () {
+    var scroll = this.scrollPosBackup;
+    debugLog(scroll);
+
+    if (scroll && this.routeDom) {
+      window.scrollTo(scroll.left, scroll.top);
+    }
+  }; // reset scroll position
+
+
+  LiveRoute.prototype.resetScrollPosition = function () {
+    if (scroll && this.routeDom) {
+      window.scrollTo(0, 0);
+    }
+  }; // clear scroll position
+
+
+  LiveRoute.prototype.clearDomData = function () {
+    if (this.doesRouteEnableLive()) {
+      this.routeDom = null;
+      this.previousDisplayStyle = null;
+    }
+  }; // clear scroll position
+
+
+  LiveRoute.prototype.clearScroll = function () {
+    if (this.doesRouteEnableLive()) {
+      this.scrollPosBackup = null;
+    }
+  };
+
+  LiveRoute.prototype.isLivePathMatch = function (livePath, alwaysLive, pathname, options) {
+    var e_1, _a;
+
+    var pathArr = Array.isArray(livePath) ? livePath : [livePath];
+
+    if (alwaysLive) {
+      pathArr.push('*');
+    }
+
+    try {
+      for (var pathArr_1 = __values(pathArr), pathArr_1_1 = pathArr_1.next(); !pathArr_1_1.done; pathArr_1_1 = pathArr_1.next()) {
+        var currPath = pathArr_1_1.value;
+
+        if (typeof currPath !== 'string') {
+          continue;
+        }
+
+        var currLiveOptions = __assign({}, options, {
+          path: currPath
+        });
+
+        var currMatch = reactRouter.matchPath(pathname, currLiveOptions); // return if one of the livePaths is matched
+
+        if (currMatch) {
+          return currMatch;
+        }
+      }
+    } catch (e_1_1) {
+      e_1 = {
+        error: e_1_1
+      };
+    } finally {
+      try {
+        if (pathArr_1_1 && !pathArr_1_1.done && (_a = pathArr_1.return)) _a.call(pathArr_1);
+      } finally {
+        if (e_1) throw e_1.error;
+      }
+    } // not matched default fallback
+
+
+    return null;
+  };
+
+  LiveRoute.prototype.getSnapshotBeforeUpdate = function (prevProps, prevState) {
+    this.performSideEffects(this.currentSideEffect, [SideEffect.SAVE_DOM_SCROLL, SideEffect.HIDE_DOM]);
+    return null;
+  };
+
+  LiveRoute.prototype.render = function () {
+    var _a = this.props,
+        _b = _a.exact,
+        exact = _b === void 0 ? false : _b,
+        _c = _a.sensitive,
+        sensitive = _c === void 0 ? false : _c,
+        _d = _a.strict,
+        strict = _d === void 0 ? false : _d,
+        forceUnmount = _a.forceUnmount,
+        path = _a.path,
+        livePath = _a.livePath,
+        alwaysLive = _a.alwaysLive,
+        component = _a.component,
+        render = _a.render,
+        // from withRouter, same as RouterContext.Consumer ⬇️
+    history = _a.history,
+        location = _a.location,
+        match = _a.match,
+        staticContext = _a.staticContext // from withRouter, same as RouterContext.Consumer ⬆️
+    ;
+    var children = this.props.children;
+    var context = {
+      history: history,
+      location: location,
+      match: match,
+      staticContext: staticContext
+    };
+    !!!context ? invariant(false) : void 0;
+    var matchOfPath = this.props.path ? reactRouter.matchPath(location.pathname, this.props) : context.match;
+    var matchOfLivePath = this.isLivePathMatch(livePath, alwaysLive, location.pathname, {
+      path: path,
+      exact: exact,
+      strict: strict,
+      sensitive: sensitive
+    });
+    var matchAnyway = matchOfPath || matchOfLivePath; // no render
+
+    if (!matchAnyway || matchAnyway && !matchOfPath && (this.liveState === LiveState.NORMAL_RENDER_ON_INIT || this.liveState === LiveState.NORMAL_RENDER_UNMATCHED)) {
+      debugLog('--- not match ---');
+      this.currentSideEffect = [SideEffect.CLEAR_DOM_SCROLL];
+      this.liveState = LiveState.NORMAL_RENDER_UNMATCHED;
+      return null;
+    } // normal render || hide render
+
+
+    if (matchOfPath) {
+      debugLog('--- normal match ---');
+      this.currentSideEffect = [SideEffect.RESET_SCROLL]; // hide ➡️ show
+
+      if (this.liveState === LiveState.HIDE_RENDER) {
+        this.currentSideEffect = [SideEffect.SHOW_DOM, SideEffect.RESTORE_DOM_SCROLL, SideEffect.CLEAR_DOM_SCROLL, SideEffect.ON_REAPPEAR_HOOK];
+      }
+
+      this.liveState = LiveState.NORMAL_RENDER_MATCHED;
+    } else {
+      debugLog('--- hide match ---'); // force unmount
+
+      if (typeof forceUnmount === 'function' && forceUnmount(location, match, history, livePath, alwaysLive)) {
+        this.liveState = LiveState.NORMAL_RENDER_UNMATCHED;
+        this.currentSideEffect = [SideEffect.CLEAR_DOM_DATA];
+        return null;
+      } // show ➡️ hide
+
+
+      if (this.liveState === LiveState.NORMAL_RENDER_MATCHED) {
+        this.currentSideEffect = [SideEffect.ON_HIDE_HOOK, SideEffect.SAVE_DOM_SCROLL, SideEffect.HIDE_DOM];
+      }
+
+      this.liveState = LiveState.HIDE_RENDER;
+    } // normal render
+
+
+    var props = __assign({}, context, {
+      location: location,
+      match: matchOfPath,
+      ensureDidMount: this.getRouteDom
+    }); // Preact uses an empty array as children by
+    // default, so use null if that's the case.
+
+
+    if (Array.isArray(children) && children.length === 0) {
+      children = null;
+    }
+
+    if (typeof children === 'function') {
+      children = children(props);
+
+      if (children === undefined) {
+
+        children = null;
+      }
+    }
+
+    var componentInstance = component && React.createElement(component, props); // normal render from Route
+
+    return children && !isEmptyChildren(children) ? children : matchAnyway ? component ? componentInstance : render ? render(props) : null : null;
+  };
+
+  return LiveRoute;
+}(React.Component);
+
+exports.default = LiveRoute;

lib/index.min.js

+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var A=require("react"),o=require("react-dom"),M=require("react-router"),r=function(t,e){return(r=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(t,e){t.__proto__=e}||function(t,e){for(var o in e)e.hasOwnProperty(o)&&(t[o]=e[o])})(t,e)};var C=function(){return(C=Object.assign||function(t){for(var e,o=1,r=arguments.length;o<r;o++)for(var n in e=arguments[o])Object.prototype.hasOwnProperty.call(e,n)&&(t[n]=e[n]);return t}).apply(this,arguments)};var N,t,H,e;function P(){for(var t=[],e=0;e<arguments.length;e++)t[e]=arguments[e]}(t=N||(N={})).SAVE_DOM_SCROLL="SAVE_DOM_SCROLL",t.RESTORE_DOM_SCROLL="RESTORE_DOM_SCROLL",t.CLEAR_DOM_SCROLL="CLEAR_DOM_SCROLL",t.RESET_SCROLL="RESET_SCROLL",t.HIDE_DOM="HIDE_DOM",t.SHOW_DOM="SHOW_DOM",t.CLEAR_DOM_DATA="CLEAR_DOM_DATA",t.ON_REAPPEAR_HOOK="ON_REAPPEAR_HOOK",t.ON_HIDE_HOOK="ON_HIDE_HOOK",t.NO_SIDE_EFFECT="NO_SIDE_EFFECT",(e=H||(H={})).NORMAL_RENDER_ON_INIT="normal render (matched or unmatched)",e.NORMAL_RENDER_MATCHED="normal matched render",e.HIDE_RENDER="hide route when livePath matched",e.NORMAL_RENDER_UNMATCHED="normal unmatched render (unmount)";var n=function(t){function e(){var S=null!==t&&t.apply(this,arguments)||this;return S.routeDom=null,S.scrollPosBackup=null,S.previousDisplayStyle=null,S.liveState=H.NORMAL_RENDER_ON_INIT,S.currentSideEffect=[N.NO_SIDE_EFFECT],S.wrapperedRef=null,S.passRef=function(t){S.wrapperedRef=t},S.getRouteDom=function(t){var e=o.findDOMNode(S);S.routeDom=e||S.routeDom,t&&S.passRef(t)},S.performSideEffects=function(t,e){P(S.props.name+" perform side effects:",t,e),t.filter(function(t){return e.includes(t)}).forEach(function(t,e){switch(t){case N.SAVE_DOM_SCROLL:S.saveScrollPosition();break;case N.HIDE_DOM:S.hideRoute();break;case N.SHOW_DOM:S.showRoute();break;case N.RESTORE_DOM_SCROLL:S.restoreScrollPosition();break;case N.ON_REAPPEAR_HOOK:S.onHook("onReappear");break;case N.ON_HIDE_HOOK:S.onHook("onHide");break;case N.CLEAR_DOM_SCROLL:S.clearScroll();break;case N.RESET_SCROLL:S.resetScrollPosition();break;case N.CLEAR_DOM_DATA:S.clearScroll(),S.clearDomData()}}),S.currentSideEffect=t.filter(function(t){return!e.includes(t)})},S.onHook=function(t){var e=S.props,o=e.exact,r=void 0!==o&&o,n=e.sensitive,i=void 0!==n&&n,a=e.strict,s=void 0!==a&&a,c=e.path,l=e.livePath,p=e.alwaysLive,u=e.history,h=e.location,E=e.match,f=e.staticContext,O=S.props[t],R={history:u,location:h,match:E,staticContext:f},_=S.props.path?M.matchPath(h.pathname,S.props):R.match,D=S.isLivePathMatch(l,p,h.pathname,{path:c,exact:r,strict:s,sensitive:i}),d=_||D;"onHide"==t?S.wrapperedRef&&S.wrapperedRef.componentOnHide&&S.wrapperedRef.componentOnHide(h,d,u,l,p):"onReappear"==t&&S.wrapperedRef&&S.wrapperedRef.componentOnReappear&&S.wrapperedRef.componentOnReappear(h,d,u,l,p),"function"==typeof O&&O(h,d,u,l,p)},S}return function(t,e){function o(){this.constructor=t}r(t,e),t.prototype=null===e?Object.create(e):(o.prototype=e.prototype,new o)}(e,t),e.prototype.componentDidMount=function(){this.getRouteDom()},e.prototype.componentDidUpdate=function(t,e){this.performSideEffects(this.currentSideEffect,[N.ON_REAPPEAR_HOOK,N.CLEAR_DOM_DATA]),this.performSideEffects(this.currentSideEffect,[N.SHOW_DOM,N.RESTORE_DOM_SCROLL,N.CLEAR_DOM_SCROLL]),this.performSideEffects(this.currentSideEffect,[N.RESET_SCROLL]),this.getRouteDom()},e.prototype.componentWillUnmount=function(){this.clearDomData(),this.clearScroll()},e.prototype.hideRoute=function(){this.routeDom&&"none"!==this.routeDom.style.display&&(P("--- hide route ---"),this.previousDisplayStyle=this.routeDom.style.display,this.routeDom.style.display="none")},e.prototype.showRoute=function(){this.routeDom&&null!==this.previousDisplayStyle&&(this.routeDom.style.display=this.previousDisplayStyle)},e.prototype.doesRouteEnableLive=function(){return this.props.livePath||this.props.alwaysLive},e.prototype.saveScrollPosition=function(){if(this.routeDom&&null===this.scrollPosBackup){var t=document.documentElement.scrollTop||document.body.scrollTop,e=document.documentElement.scrollLeft||document.body.scrollLeft;P("saved top = "+t+", left = "+e),this.scrollPosBackup={top:t,left:e}}},e.prototype.restoreScrollPosition=function(){var t=this.scrollPosBackup;P(t),t&&this.routeDom&&window.scrollTo(t.left,t.top)},e.prototype.resetScrollPosition=function(){scroll&&this.routeDom&&window.scrollTo(0,0)},e.prototype.clearDomData=function(){this.doesRouteEnableLive()&&(this.routeDom=null,this.previousDisplayStyle=null)},e.prototype.clearScroll=function(){this.doesRouteEnableLive()&&(this.scrollPosBackup=null)},e.prototype.isLivePathMatch=function(t,e,o,r){var n,i,a=Array.isArray(t)?t:[t];e&&a.push("*");try{for(var s=function(t){var e="function"==typeof Symbol&&t[Symbol.iterator],o=0;return e?e.call(t):{next:function(){return t&&o>=t.length&&(t=void 0),{value:t&&t[o++],done:!t}}}}(a),c=s.next();!c.done;c=s.next()){var l=c.value;if("string"==typeof l){var p=C({},r,{path:l}),u=M.matchPath(o,p);if(u)return u}}}catch(t){n={error:t}}finally{try{c&&!c.done&&(i=s.return)&&i.call(s)}finally{if(n)throw n.error}}return null},e.prototype.getSnapshotBeforeUpdate=function(t,e){return this.performSideEffects(this.currentSideEffect,[N.SAVE_DOM_SCROLL,N.HIDE_DOM]),null},e.prototype.render=function(){var t=this.props,e=t.exact,o=void 0!==e&&e,r=t.sensitive,n=void 0!==r&&r,i=t.strict,a=void 0!==i&&i,s=t.forceUnmount,c=t.path,l=t.livePath,p=t.alwaysLive,u=t.component,h=t.render,E=t.history,f=t.location,O=t.match,R=t.staticContext,_=this.props.children,D={history:E,location:f,match:O,staticContext:R},d=this.props.path?M.matchPath(f.pathname,this.props):D.match,S=this.isLivePathMatch(l,p,f.pathname,{path:c,exact:o,strict:a,sensitive:n}),m=d||S;if(!m||m&&!d&&(this.liveState===H.NORMAL_RENDER_ON_INIT||this.liveState===H.NORMAL_RENDER_UNMATCHED))return P("--- not match ---"),this.currentSideEffect=[N.CLEAR_DOM_SCROLL],this.liveState=H.NORMAL_RENDER_UNMATCHED,null;if(d)P("--- normal match ---"),this.currentSideEffect=[N.RESET_SCROLL],this.liveState===H.HIDE_RENDER&&(this.currentSideEffect=[N.SHOW_DOM,N.RESTORE_DOM_SCROLL,N.CLEAR_DOM_SCROLL,N.ON_REAPPEAR_HOOK]),this.liveState=H.NORMAL_RENDER_MATCHED;else{if(P("--- hide match ---"),"function"==typeof s&&s(f,O,E,l,p))return this.liveState=H.NORMAL_RENDER_UNMATCHED,this.currentSideEffect=[N.CLEAR_DOM_DATA],null;this.liveState===H.NORMAL_RENDER_MATCHED&&(this.currentSideEffect=[N.ON_HIDE_HOOK,N.SAVE_DOM_SCROLL,N.HIDE_DOM]),this.liveState=H.HIDE_RENDER}var L=C({},D,{location:f,match:d,ensureDidMount:this.getRouteDom});Array.isArray(_)&&0===_.length&&(_=null),"function"==typeof _&&void 0===(_=_(L))&&(_=null);var y,v=u&&A.createElement(u,L);return _&&(y=_,0!==A.Children.count(y))?_:m?u?v:h?h(L):null:null},e}(A.Component);exports.default=n;
\ No newline at end of file

lib/index.min.js.map

+{"version":3,"sources":["lib/index.prod.js"],"names":["Object","defineProperty","exports","value","React","require","ReactDOM","reactRouter","extendStatics","d","b","setPrototypeOf","__proto__","Array","p","hasOwnProperty","__assign","assign","t","s","i","n","arguments","length","prototype","call","apply","this","SideEffect","LiveState","debugLog","message","_i","LiveRoute","_super","_this","routeDom","scrollPosBackup","previousDisplayStyle","liveState","NORMAL_RENDER_ON_INIT","currentSideEffect","NO_SIDE_EFFECT","wrapperedRef","passRef","ref","getRouteDom","findDOMNode","performSideEffects","sideEffects","range","props","name","filter","item","includes","forEach","sideEffect","index","SAVE_DOM_SCROLL","saveScrollPosition","HIDE_DOM","hideRoute","SHOW_DOM","showRoute","RESTORE_DOM_SCROLL","restoreScrollPosition","ON_REAPPEAR_HOOK","onHook","ON_HIDE_HOOK","CLEAR_DOM_SCROLL","clearScroll","RESET_SCROLL","resetScrollPosition","CLEAR_DOM_DATA","clearDomData","hookName","_a","_b","exact","_c","sensitive","_d","strict","path","livePath","alwaysLive","history","location","match","staticContext","hook","context","matchOfPath","matchPath","pathname","matchOfLivePath","isLivePathMatch","matchAnyway","componentOnHide","componentOnReappear","__","constructor","create","__extends","componentDidMount","componentDidUpdate","prevProps","prevState","componentWillUnmount","style","display","doesRouteEnableLive","scrollTop","document","documentElement","body","scrollLeft","top","left","scroll","window","scrollTo","options","e_1","pathArr","isArray","push","pathArr_1","o","m","Symbol","iterator","next","done","__values","pathArr_1_1","currPath","currLiveOptions","currMatch","e_1_1","error","return","getSnapshotBeforeUpdate","render","forceUnmount","component","children","NORMAL_RENDER_UNMATCHED","HIDE_RENDER","NORMAL_RENDER_MATCHED","ensureDidMount","undefined","componentInstance","createElement","Children","count","Component","default"],"mappings":"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"}
\ No newline at end of file

lib/index.module.js

+import { createElement, Children, Component } from 'react';
+import { findDOMNode } from 'react-dom';
+import { matchPath } from 'react-router';
+
+/*! *****************************************************************************
+Copyright (c) Microsoft Corporation. All rights reserved.
+Licensed under the Apache License, Version 2.0 (the "License"); you may not use
+this file except in compliance with the License. You may obtain a copy of the
+License at http://www.apache.org/licenses/LICENSE-2.0
+
+THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED
+WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE,
+MERCHANTABLITY OR NON-INFRINGEMENT.
+
+See the Apache Version 2.0 License for specific language governing permissions
+and limitations under the License.
+***************************************************************************** */
+/* global Reflect, Promise */
+
+var extendStatics = function(d, b) {
+    extendStatics = Object.setPrototypeOf ||
+        ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+        function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+    return extendStatics(d, b);
+};
+
+function __extends(d, b) {
+    extendStatics(d, b);
+    function __() { this.constructor = d; }
+    d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+}
+
+var __assign = function() {
+    __assign = Object.assign || function __assign(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+
+function __values(o) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator], i = 0;
+    if (m) return m.call(o);
+    return {
+        next: function () {
+            if (o && i >= o.length) o = void 0;
+            return { value: o && o[i++], done: !o };
+        }
+    };
+}
+
+var prefix = 'Invariant failed';
+function invariant(condition, message) {
+  if (condition) {
+    return;
+  }
+
+  {
+    throw new Error(prefix);
+  }
+}
+
+/* tslint:disable:cyclomatic-complexity */
+
+function debugLog() {
+  var message = [];
+
+  for (var _i = 0; _i < arguments.length; _i++) {
+    message[_i] = arguments[_i];
+  }
+}
+
+function isEmptyChildren(children) {
+  return Children.count(children) === 0;
+}
+
+var SideEffect;
+
+(function (SideEffect) {
+  SideEffect["SAVE_DOM_SCROLL"] = "SAVE_DOM_SCROLL";
+  SideEffect["RESTORE_DOM_SCROLL"] = "RESTORE_DOM_SCROLL";
+  SideEffect["CLEAR_DOM_SCROLL"] = "CLEAR_DOM_SCROLL";
+  SideEffect["RESET_SCROLL"] = "RESET_SCROLL";
+  SideEffect["HIDE_DOM"] = "HIDE_DOM";
+  SideEffect["SHOW_DOM"] = "SHOW_DOM";
+  SideEffect["CLEAR_DOM_DATA"] = "CLEAR_DOM_DATA";
+  SideEffect["ON_REAPPEAR_HOOK"] = "ON_REAPPEAR_HOOK";
+  SideEffect["ON_HIDE_HOOK"] = "ON_HIDE_HOOK";
+  SideEffect["NO_SIDE_EFFECT"] = "NO_SIDE_EFFECT";
+})(SideEffect || (SideEffect = {}));
+
+var LiveState;
+
+(function (LiveState) {
+  LiveState["NORMAL_RENDER_ON_INIT"] = "normal render (matched or unmatched)";
+  LiveState["NORMAL_RENDER_MATCHED"] = "normal matched render";
+  LiveState["HIDE_RENDER"] = "hide route when livePath matched";
+  LiveState["NORMAL_RENDER_UNMATCHED"] = "normal unmatched render (unmount)";
+})(LiveState || (LiveState = {}));
+
+var LiveRoute =
+/*#__PURE__*/
+
+/** @class */
+function (_super) {
+  __extends(LiveRoute, _super);
+
+  function LiveRoute() {
+    var _this = _super !== null && _super.apply(this, arguments) || this;
+
+    _this.routeDom = null;
+    _this.scrollPosBackup = null;
+    _this.previousDisplayStyle = null;
+    _this.liveState = LiveState.NORMAL_RENDER_ON_INIT;
+    _this.currentSideEffect = [SideEffect.NO_SIDE_EFFECT];
+    _this.wrapperedRef = null;
+
+    _this.passRef = function (ref) {
+      _this.wrapperedRef = ref;
+    }; // get DOM of Route
+
+
+    _this.getRouteDom = function (ref) {
+      var routeDom = findDOMNode(_this);
+      _this.routeDom = routeDom || _this.routeDom;
+      ref && _this.passRef(ref);
+    };
+
+    _this.performSideEffects = function (sideEffects, range) {
+      debugLog(_this.props.name + " perform side effects:", sideEffects, range);
+      var sideEffectsToRun = sideEffects.filter(function (item) {
+        return range.includes(item);
+      });
+      sideEffectsToRun.forEach(function (sideEffect, index) {
+        switch (sideEffect) {
+          case SideEffect.SAVE_DOM_SCROLL:
+            _this.saveScrollPosition();
+
+            break;
+
+          case SideEffect.HIDE_DOM:
+            _this.hideRoute();
+
+            break;
+
+          case SideEffect.SHOW_DOM:
+            _this.showRoute();
+
+            break;
+
+          case SideEffect.RESTORE_DOM_SCROLL:
+            _this.restoreScrollPosition();
+
+            break;
+
+          case SideEffect.ON_REAPPEAR_HOOK:
+            _this.onHook('onReappear');
+
+            break;
+
+          case SideEffect.ON_HIDE_HOOK:
+            _this.onHook('onHide');
+
+            break;
+
+          case SideEffect.CLEAR_DOM_SCROLL:
+            _this.clearScroll();
+
+            break;
+
+          case SideEffect.RESET_SCROLL:
+            _this.resetScrollPosition();
+
+            break;
+
+          case SideEffect.CLEAR_DOM_DATA:
+            _this.clearScroll();
+
+            _this.clearDomData();
+
+            break;
+        }
+      });
+      _this.currentSideEffect = sideEffects.filter(function (item) {
+        return !range.includes(item);
+      });
+    };
+
+    _this.onHook = function (hookName) {
+      var _a = _this.props,
+          _b = _a.exact,
+          exact = _b === void 0 ? false : _b,
+          _c = _a.sensitive,
+          sensitive = _c === void 0 ? false : _c,
+          _d = _a.strict,
+          strict = _d === void 0 ? false : _d,
+          path = _a.path,
+          livePath = _a.livePath,
+          alwaysLive = _a.alwaysLive,
+          // from withRouter, same as RouterContext.Consumer ⬇️
+      history = _a.history,
+          location = _a.location,
+          match = _a.match,
+          staticContext = _a.staticContext // from withRouter, same as RouterContext.Consumer ⬆️
+      ;
+      var hook = _this.props[hookName];
+      var context = {
+        history: history,
+        location: location,
+        match: match,
+        staticContext: staticContext
+      };
+      var matchOfPath = _this.props.path ? matchPath(location.pathname, _this.props) : context.match;
+
+      var matchOfLivePath = _this.isLivePathMatch(livePath, alwaysLive, location.pathname, {
+        path: path,
+        exact: exact,
+        strict: strict,
+        sensitive: sensitive
+      });
+
+      var matchAnyway = matchOfPath || matchOfLivePath;
+
+      if (hookName == 'onHide') {
+        _this.wrapperedRef && _this.wrapperedRef.componentOnHide && _this.wrapperedRef.componentOnHide(location, matchAnyway, history, livePath, alwaysLive);
+      } else if (hookName == 'onReappear') {
+        _this.wrapperedRef && _this.wrapperedRef.componentOnReappear && _this.wrapperedRef.componentOnReappear(location, matchAnyway, history, livePath, alwaysLive);
+      }
+
+      if (typeof hook === 'function') {
+        hook(location, matchAnyway, history, livePath, alwaysLive);
+      }
+    };
+
+    return _this;
+  }
+
+  LiveRoute.prototype.componentDidMount = function () {
+    this.getRouteDom();
+  };
+
+  LiveRoute.prototype.componentDidUpdate = function (prevProps, prevState) {
+    this.performSideEffects(this.currentSideEffect, [SideEffect.ON_REAPPEAR_HOOK, SideEffect.CLEAR_DOM_DATA]);
+    this.performSideEffects(this.currentSideEffect, [SideEffect.SHOW_DOM, SideEffect.RESTORE_DOM_SCROLL, SideEffect.CLEAR_DOM_SCROLL]);
+    this.performSideEffects(this.currentSideEffect, [SideEffect.RESET_SCROLL]);
+    this.getRouteDom();
+  }; // clear on unmounting
+
+
+  LiveRoute.prototype.componentWillUnmount = function () {
+    this.clearDomData();
+    this.clearScroll();
+  };
+
+  LiveRoute.prototype.hideRoute = function () {
+    if (this.routeDom && this.routeDom.style.display !== 'none') {
+      debugLog('--- hide route ---');
+      this.previousDisplayStyle = this.routeDom.style.display;
+      this.routeDom.style.display = 'none';
+    }
+  }; // reveal DOM display
+
+
+  LiveRoute.prototype.showRoute = function () {
+    if (this.routeDom && this.previousDisplayStyle !== null) {
+      this.routeDom.style.display = this.previousDisplayStyle;
+    }
+  };
+
+  LiveRoute.prototype.doesRouteEnableLive = function () {
+    return this.props.livePath || this.props.alwaysLive;
+  }; // save scroll position before hide DOM
+
+
+  LiveRoute.prototype.saveScrollPosition = function () {
+    if (this.routeDom && this.scrollPosBackup === null) {
+      var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
+      var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft;
+      debugLog("saved top = " + scrollTop + ", left = " + scrollLeft);
+      this.scrollPosBackup = {
+        top: scrollTop,
+        left: scrollLeft
+      };
+    }
+  }; // restore the scroll position before hide
+
+
+  LiveRoute.prototype.restoreScrollPosition = function () {
+    var scroll = this.scrollPosBackup;
+    debugLog(scroll);
+
+    if (scroll && this.routeDom) {
+      window.scrollTo(scroll.left, scroll.top);
+    }
+  }; // reset scroll position
+
+
+  LiveRoute.prototype.resetScrollPosition = function () {
+    if (scroll && this.routeDom) {
+      window.scrollTo(0, 0);
+    }
+  }; // clear scroll position
+
+
+  LiveRoute.prototype.clearDomData = function () {
+    if (this.doesRouteEnableLive()) {
+      this.routeDom = null;
+      this.previousDisplayStyle = null;
+    }
+  }; // clear scroll position
+
+
+  LiveRoute.prototype.clearScroll = function () {
+    if (this.doesRouteEnableLive()) {
+      this.scrollPosBackup = null;
+    }
+  };
+
+  LiveRoute.prototype.isLivePathMatch = function (livePath, alwaysLive, pathname, options) {
+    var e_1, _a;
+
+    var pathArr = Array.isArray(livePath) ? livePath : [livePath];
+
+    if (alwaysLive) {
+      pathArr.push('*');
+    }
+
+    try {
+      for (var pathArr_1 = __values(pathArr), pathArr_1_1 = pathArr_1.next(); !pathArr_1_1.done; pathArr_1_1 = pathArr_1.next()) {
+        var currPath = pathArr_1_1.value;
+
+        if (typeof currPath !== 'string') {
+          continue;
+        }
+
+        var currLiveOptions = __assign({}, options, {
+          path: currPath
+        });
+
+        var currMatch = matchPath(pathname, currLiveOptions); // return if one of the livePaths is matched
+
+        if (currMatch) {
+          return currMatch;
+        }
+      }
+    } catch (e_1_1) {
+      e_1 = {
+        error: e_1_1
+      };
+    } finally {
+      try {
+        if (pathArr_1_1 && !pathArr_1_1.done && (_a = pathArr_1.return)) _a.call(pathArr_1);
+      } finally {
+        if (e_1) throw e_1.error;
+      }
+    } // not matched default fallback
+
+
+    return null;
+  };
+
+  LiveRoute.prototype.getSnapshotBeforeUpdate = function (prevProps, prevState) {
+    this.performSideEffects(this.currentSideEffect, [SideEffect.SAVE_DOM_SCROLL, SideEffect.HIDE_DOM]);
+    return null;
+  };
+
+  LiveRoute.prototype.render = function () {
+    var _a = this.props,
+        _b = _a.exact,
+        exact = _b === void 0 ? false : _b,
+        _c = _a.sensitive,
+        sensitive = _c === void 0 ? false : _c,
+        _d = _a.strict,
+        strict = _d === void 0 ? false : _d,
+        forceUnmount = _a.forceUnmount,
+        path = _a.path,
+        livePath = _a.livePath,
+        alwaysLive = _a.alwaysLive,
+        component = _a.component,
+        render = _a.render,
+        // from withRouter, same as RouterContext.Consumer ⬇️
+    history = _a.history,
+        location = _a.location,
+        match = _a.match,
+        staticContext = _a.staticContext // from withRouter, same as RouterContext.Consumer ⬆️
+    ;
+    var children = this.props.children;
+    var context = {
+      history: history,
+      location: location,
+      match: match,
+      staticContext: staticContext
+    };
+    !!!context ? invariant(false) : void 0;
+    var matchOfPath = this.props.path ? matchPath(location.pathname, this.props) : context.match;
+    var matchOfLivePath = this.isLivePathMatch(livePath, alwaysLive, location.pathname, {
+      path: path,
+      exact: exact,
+      strict: strict,
+      sensitive: sensitive
+    });
+    var matchAnyway = matchOfPath || matchOfLivePath; // no render
+
+    if (!matchAnyway || matchAnyway && !matchOfPath && (this.liveState === LiveState.NORMAL_RENDER_ON_INIT || this.liveState === LiveState.NORMAL_RENDER_UNMATCHED)) {
+      debugLog('--- not match ---');
+      this.currentSideEffect = [SideEffect.CLEAR_DOM_SCROLL];
+      this.liveState = LiveState.NORMAL_RENDER_UNMATCHED;
+      return null;
+    } // normal render || hide render
+
+
+    if (matchOfPath) {
+      debugLog('--- normal match ---');
+      this.currentSideEffect = [SideEffect.RESET_SCROLL]; // hide ➡️ show
+
+      if (this.liveState === LiveState.HIDE_RENDER) {
+        this.currentSideEffect = [SideEffect.SHOW_DOM, SideEffect.RESTORE_DOM_SCROLL, SideEffect.CLEAR_DOM_SCROLL, SideEffect.ON_REAPPEAR_HOOK];
+      }
+
+      this.liveState = LiveState.NORMAL_RENDER_MATCHED;
+    } else {
+      debugLog('--- hide match ---'); // force unmount
+
+      if (typeof forceUnmount === 'function' && forceUnmount(location, match, history, livePath, alwaysLive)) {
+        this.liveState = LiveState.NORMAL_RENDER_UNMATCHED;
+        this.currentSideEffect = [SideEffect.CLEAR_DOM_DATA];
+        return null;
+      } // show ➡️ hide
+
+
+      if (this.liveState === LiveState.NORMAL_RENDER_MATCHED) {
+        this.currentSideEffect = [SideEffect.ON_HIDE_HOOK, SideEffect.SAVE_DOM_SCROLL, SideEffect.HIDE_DOM];
+      }
+
+      this.liveState = LiveState.HIDE_RENDER;
+    } // normal render
+
+
+    var props = __assign({}, context, {
+      location: location,
+      match: matchOfPath,
+      ensureDidMount: this.getRouteDom
+    }); // Preact uses an empty array as children by
+    // default, so use null if that's the case.
+
+
+    if (Array.isArray(children) && children.length === 0) {
+      children = null;
+    }
+
+    if (typeof children === 'function') {
+      children = children(props);
+
+      if (children === undefined) {
+
+        children = null;
+      }
+    }
+
+    var componentInstance = component && createElement(component, props); // normal render from Route
+
+    return children && !isEmptyChildren(children) ? children : matchAnyway ? component ? componentInstance : render ? render(props) : null : null;
+  };
+
+  return LiveRoute;
+}(Component);
+
+export default LiveRoute;