@breautek/router 3.0.0 → 4.0.0

package/dist/router.js

@@ -13,788 +13,711 @@ function ___$insertStyle(css) {
     return css;
 }
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 var React = require('react');
 var events = require('events');
 
-function _interopNamespace(e) {
-  if (e && e.__esModule) return e;
-  var n = Object.create(null);
-  if (e) {
-    Object.keys(e).forEach(function (k) {
-      if (k !== 'default') {
-        var d = Object.getOwnPropertyDescriptor(e, k);
-        Object.defineProperty(n, k, d.get ? d : {
-          enumerable: true,
-          get: function () { return e[k]; }
+function _interopNamespaceDefault(e) {
+    var n = Object.create(null);
+    if (e) {
+        Object.keys(e).forEach(function (k) {
+            if (k !== 'default') {
+                var d = Object.getOwnPropertyDescriptor(e, k);
+                Object.defineProperty(n, k, d.get ? d : {
+                    enumerable: true,
+                    get: function () { return e[k]; }
+                });
+            }
         });
-      }
-    });
-  }
-  n["default"] = e;
-  return Object.freeze(n);
+    }
+    n.default = e;
+    return Object.freeze(n);
 }
 
-var React__namespace = /*#__PURE__*/_interopNamespace(React);
+var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
 
-var runtime = {exports: {}};
+const EVENT_URL_CHANGE = 'urlchange';
+class RouterStrategy extends events.EventEmitter {
+    constructor(router) {
+        super();
+        this.$router = router;
+        this.$viewMountListeners = [];
+        this.$viewUnmountListneners = [];
+    }
+    addViewMountCallback(cb) {
+        this.$viewMountListeners.push(cb);
+    }
+    removeViewMountCallback(cb) {
+        let idx = this.$viewMountListeners.indexOf(cb);
+        if (idx > -1) {
+            this.$viewMountListeners.splice(idx, 1);
+        }
+    }
+    addViewUnmountCallback(cb) {
+        this.$viewUnmountListneners.push(cb);
+    }
+    removeViewUnmountCallback(cb) {
+        let idx = this.$viewUnmountListneners.indexOf(cb);
+        if (idx > -1) {
+            this.$viewUnmountListneners.splice(idx, 1);
+        }
+    }
+    /**
+     * @internal
+     * @param view
+     */
+    __onViewMount(view) {
+        for (let i = 0; i < this.$viewMountListeners.length; i++) {
+            this.$viewMountListeners[i](view);
+        }
+    }
+    /**
+     * @internal
+     * @param view
+     */
+    __onViewUnmount(view) {
+        for (let i = 0; i < this.$viewUnmountListneners.length; i++) {
+            this.$viewUnmountListneners[i](view);
+        }
+    }
+    /**
+     * Gets the router
+     */
+    getRouter() {
+        return this.$router;
+    }
+    /**
+     * Sets the browser title
+     *
+     * @param {string} title
+     */
+    setTitle(title) {
+        let head = document.head.getElementsByTagName('title')[0];
+        if (!head) {
+            head = document.createElement('title');
+            document.head.appendChild(head);
+        }
+        if (!title) {
+            title = '';
+        }
+        head.innerText = title.toString();
+    }
+    /**
+     * Listen for URL change events
+     *
+     * @param callback
+     */
+    addURLChangeCallback(callback) {
+        this.on(EVENT_URL_CHANGE, callback);
+    }
+    /**
+     * Removes an existing listener
+     *
+     * @param callback
+     */
+    removeURLChangeCallback(callback) {
+        this.off(EVENT_URL_CHANGE, callback);
+    }
+    /**
+     * navigate the history forward one entry. This is an alias for [go(1)]{@link go}
+     */
+    forward() {
+        this.go(1);
+    }
+    /**
+     * Navigate the history back one entry. This is an alias for [go(-1)]{@link go}
+     */
+    back() {
+        this.go(-1);
+    }
+    /**
+     * Returns true if can go back 1 entry.
+     * This is the same as calling [canGo(-1)]{@link canGo}
+     */
+    canBack() {
+        return this.canGo(-1);
+    }
+    /**
+     * Returns true if can go forward 1 entry.
+     * This is the same as calling [canGo(1)]{@link canGo}
+     */
+    canForward() {
+        return this.canGo(1);
+    }
+    /**
+     * Returns the URL one entry forward.
+     * This is the same as calling [peek(1)]{@link peek}
+     */
+    peekForward() {
+        return this.peek(1);
+    }
+    /**
+     * Returns the URL one entry back.
+     * This is the same as calling [peek(-1)]{@link peek}
+     */
+    peekBack() {
+        return this.peek(-1);
+    }
+    /**
+     * Fires the {@link EVENT_URL_CHANGE} event
+     * @param url
+     */
+    _fireURLChange(url) {
+        this.emit(EVENT_URL_CHANGE, url);
+    }
+}
 
 /**
- * Copyright (c) 2014-present, Facebook, Inc.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-(function (module) {
-	var runtime = (function (exports) {
-
-	  var Op = Object.prototype;
-	  var hasOwn = Op.hasOwnProperty;
-	  var undefined$1; // More compressible than void 0.
-	  var $Symbol = typeof Symbol === "function" ? Symbol : {};
-	  var iteratorSymbol = $Symbol.iterator || "@@iterator";
-	  var asyncIteratorSymbol = $Symbol.asyncIterator || "@@asyncIterator";
-	  var toStringTagSymbol = $Symbol.toStringTag || "@@toStringTag";
-
-	  function define(obj, key, value) {
-	    Object.defineProperty(obj, key, {
-	      value: value,
-	      enumerable: true,
-	      configurable: true,
-	      writable: true
-	    });
-	    return obj[key];
-	  }
-	  try {
-	    // IE 8 has a broken Object.defineProperty that only works on DOM objects.
-	    define({}, "");
-	  } catch (err) {
-	    define = function(obj, key, value) {
-	      return obj[key] = value;
-	    };
-	  }
-
-	  function wrap(innerFn, outerFn, self, tryLocsList) {
-	    // If outerFn provided and outerFn.prototype is a Generator, then outerFn.prototype instanceof Generator.
-	    var protoGenerator = outerFn && outerFn.prototype instanceof Generator ? outerFn : Generator;
-	    var generator = Object.create(protoGenerator.prototype);
-	    var context = new Context(tryLocsList || []);
-
-	    // The ._invoke method unifies the implementations of the .next,
-	    // .throw, and .return methods.
-	    generator._invoke = makeInvokeMethod(innerFn, self, context);
-
-	    return generator;
-	  }
-	  exports.wrap = wrap;
-
-	  // Try/catch helper to minimize deoptimizations. Returns a completion
-	  // record like context.tryEntries[i].completion. This interface could
-	  // have been (and was previously) designed to take a closure to be
-	  // invoked without arguments, but in all the cases we care about we
-	  // already have an existing method we want to call, so there's no need
-	  // to create a new function object. We can even get away with assuming
-	  // the method takes exactly one argument, since that happens to be true
-	  // in every case, so we don't have to touch the arguments object. The
-	  // only additional allocation required is the completion record, which
-	  // has a stable shape and so hopefully should be cheap to allocate.
-	  function tryCatch(fn, obj, arg) {
-	    try {
-	      return { type: "normal", arg: fn.call(obj, arg) };
-	    } catch (err) {
-	      return { type: "throw", arg: err };
-	    }
-	  }
-
-	  var GenStateSuspendedStart = "suspendedStart";
-	  var GenStateSuspendedYield = "suspendedYield";
-	  var GenStateExecuting = "executing";
-	  var GenStateCompleted = "completed";
-
-	  // Returning this object from the innerFn has the same effect as
-	  // breaking out of the dispatch switch statement.
-	  var ContinueSentinel = {};
-
-	  // Dummy constructor functions that we use as the .constructor and
-	  // .constructor.prototype properties for functions that return Generator
-	  // objects. For full spec compliance, you may wish to configure your
-	  // minifier not to mangle the names of these two functions.
-	  function Generator() {}
-	  function GeneratorFunction() {}
-	  function GeneratorFunctionPrototype() {}
-
-	  // This is a polyfill for %IteratorPrototype% for environments that
-	  // don't natively support it.
-	  var IteratorPrototype = {};
-	  define(IteratorPrototype, iteratorSymbol, function () {
-	    return this;
-	  });
-
-	  var getProto = Object.getPrototypeOf;
-	  var NativeIteratorPrototype = getProto && getProto(getProto(values([])));
-	  if (NativeIteratorPrototype &&
-	      NativeIteratorPrototype !== Op &&
-	      hasOwn.call(NativeIteratorPrototype, iteratorSymbol)) {
-	    // This environment has a native %IteratorPrototype%; use it instead
-	    // of the polyfill.
-	    IteratorPrototype = NativeIteratorPrototype;
-	  }
-
-	  var Gp = GeneratorFunctionPrototype.prototype =
-	    Generator.prototype = Object.create(IteratorPrototype);
-	  GeneratorFunction.prototype = GeneratorFunctionPrototype;
-	  define(Gp, "constructor", GeneratorFunctionPrototype);
-	  define(GeneratorFunctionPrototype, "constructor", GeneratorFunction);
-	  GeneratorFunction.displayName = define(
-	    GeneratorFunctionPrototype,
-	    toStringTagSymbol,
-	    "GeneratorFunction"
-	  );
-
-	  // Helper for defining the .next, .throw, and .return methods of the
-	  // Iterator interface in terms of a single ._invoke method.
-	  function defineIteratorMethods(prototype) {
-	    ["next", "throw", "return"].forEach(function(method) {
-	      define(prototype, method, function(arg) {
-	        return this._invoke(method, arg);
-	      });
-	    });
-	  }
-
-	  exports.isGeneratorFunction = function(genFun) {
-	    var ctor = typeof genFun === "function" && genFun.constructor;
-	    return ctor
-	      ? ctor === GeneratorFunction ||
-	        // For the native GeneratorFunction constructor, the best we can
-	        // do is to check its .name property.
-	        (ctor.displayName || ctor.name) === "GeneratorFunction"
-	      : false;
-	  };
-
-	  exports.mark = function(genFun) {
-	    if (Object.setPrototypeOf) {
-	      Object.setPrototypeOf(genFun, GeneratorFunctionPrototype);
-	    } else {
-	      genFun.__proto__ = GeneratorFunctionPrototype;
-	      define(genFun, toStringTagSymbol, "GeneratorFunction");
-	    }
-	    genFun.prototype = Object.create(Gp);
-	    return genFun;
-	  };
-
-	  // Within the body of any async function, `await x` is transformed to
-	  // `yield regeneratorRuntime.awrap(x)`, so that the runtime can test
-	  // `hasOwn.call(value, "__await")` to determine if the yielded value is
-	  // meant to be awaited.
-	  exports.awrap = function(arg) {
-	    return { __await: arg };
-	  };
-
-	  function AsyncIterator(generator, PromiseImpl) {
-	    function invoke(method, arg, resolve, reject) {
-	      var record = tryCatch(generator[method], generator, arg);
-	      if (record.type === "throw") {
-	        reject(record.arg);
-	      } else {
-	        var result = record.arg;
-	        var value = result.value;
-	        if (value &&
-	            typeof value === "object" &&
-	            hasOwn.call(value, "__await")) {
-	          return PromiseImpl.resolve(value.__await).then(function(value) {
-	            invoke("next", value, resolve, reject);
-	          }, function(err) {
-	            invoke("throw", err, resolve, reject);
-	          });
-	        }
-
-	        return PromiseImpl.resolve(value).then(function(unwrapped) {
-	          // When a yielded Promise is resolved, its final value becomes
-	          // the .value of the Promise<{value,done}> result for the
-	          // current iteration.
-	          result.value = unwrapped;
-	          resolve(result);
-	        }, function(error) {
-	          // If a rejected Promise was yielded, throw the rejection back
-	          // into the async generator function so it can be handled there.
-	          return invoke("throw", error, resolve, reject);
-	        });
-	      }
-	    }
-
-	    var previousPromise;
-
-	    function enqueue(method, arg) {
-	      function callInvokeWithMethodAndArg() {
-	        return new PromiseImpl(function(resolve, reject) {
-	          invoke(method, arg, resolve, reject);
-	        });
-	      }
-
-	      return previousPromise =
-	        // If enqueue has been called before, then we want to wait until
-	        // all previous Promises have been resolved before calling invoke,
-	        // so that results are always delivered in the correct order. If
-	        // enqueue has not been called before, then it is important to
-	        // call invoke immediately, without waiting on a callback to fire,
-	        // so that the async generator function has the opportunity to do
-	        // any necessary setup in a predictable way. This predictability
-	        // is why the Promise constructor synchronously invokes its
-	        // executor callback, and why async functions synchronously
-	        // execute code before the first await. Since we implement simple
-	        // async functions in terms of async generators, it is especially
-	        // important to get this right, even though it requires care.
-	        previousPromise ? previousPromise.then(
-	          callInvokeWithMethodAndArg,
-	          // Avoid propagating failures to Promises returned by later
-	          // invocations of the iterator.
-	          callInvokeWithMethodAndArg
-	        ) : callInvokeWithMethodAndArg();
-	    }
-
-	    // Define the unified helper method that is used to implement .next,
-	    // .throw, and .return (see defineIteratorMethods).
-	    this._invoke = enqueue;
-	  }
-
-	  defineIteratorMethods(AsyncIterator.prototype);
-	  define(AsyncIterator.prototype, asyncIteratorSymbol, function () {
-	    return this;
-	  });
-	  exports.AsyncIterator = AsyncIterator;
-
-	  // Note that simple async functions are implemented on top of
-	  // AsyncIterator objects; they just return a Promise for the value of
-	  // the final result produced by the iterator.
-	  exports.async = function(innerFn, outerFn, self, tryLocsList, PromiseImpl) {
-	    if (PromiseImpl === void 0) PromiseImpl = Promise;
-
-	    var iter = new AsyncIterator(
-	      wrap(innerFn, outerFn, self, tryLocsList),
-	      PromiseImpl
-	    );
-
-	    return exports.isGeneratorFunction(outerFn)
-	      ? iter // If outerFn is a generator, return the full iterator.
-	      : iter.next().then(function(result) {
-	          return result.done ? result.value : iter.next();
-	        });
-	  };
-
-	  function makeInvokeMethod(innerFn, self, context) {
-	    var state = GenStateSuspendedStart;
-
-	    return function invoke(method, arg) {
-	      if (state === GenStateExecuting) {
-	        throw new Error("Generator is already running");
-	      }
-
-	      if (state === GenStateCompleted) {
-	        if (method === "throw") {
-	          throw arg;
-	        }
-
-	        // Be forgiving, per 25.3.3.3.3 of the spec:
-	        // https://people.mozilla.org/~jorendorff/es6-draft.html#sec-generatorresume
-	        return doneResult();
-	      }
-
-	      context.method = method;
-	      context.arg = arg;
-
-	      while (true) {
-	        var delegate = context.delegate;
-	        if (delegate) {
-	          var delegateResult = maybeInvokeDelegate(delegate, context);
-	          if (delegateResult) {
-	            if (delegateResult === ContinueSentinel) continue;
-	            return delegateResult;
-	          }
-	        }
-
-	        if (context.method === "next") {
-	          // Setting context._sent for legacy support of Babel's
-	          // function.sent implementation.
-	          context.sent = context._sent = context.arg;
-
-	        } else if (context.method === "throw") {
-	          if (state === GenStateSuspendedStart) {
-	            state = GenStateCompleted;
-	            throw context.arg;
-	          }
-
-	          context.dispatchException(context.arg);
-
-	        } else if (context.method === "return") {
-	          context.abrupt("return", context.arg);
-	        }
-
-	        state = GenStateExecuting;
-
-	        var record = tryCatch(innerFn, self, context);
-	        if (record.type === "normal") {
-	          // If an exception is thrown from innerFn, we leave state ===
-	          // GenStateExecuting and loop back for another invocation.
-	          state = context.done
-	            ? GenStateCompleted
-	            : GenStateSuspendedYield;
-
-	          if (record.arg === ContinueSentinel) {
-	            continue;
-	          }
-
-	          return {
-	            value: record.arg,
-	            done: context.done
-	          };
-
-	        } else if (record.type === "throw") {
-	          state = GenStateCompleted;
-	          // Dispatch the exception by looping back around to the
-	          // context.dispatchException(context.arg) call above.
-	          context.method = "throw";
-	          context.arg = record.arg;
-	        }
-	      }
-	    };
-	  }
-
-	  // Call delegate.iterator[context.method](context.arg) and handle the
-	  // result, either by returning a { value, done } result from the
-	  // delegate iterator, or by modifying context.method and context.arg,
-	  // setting context.delegate to null, and returning the ContinueSentinel.
-	  function maybeInvokeDelegate(delegate, context) {
-	    var method = delegate.iterator[context.method];
-	    if (method === undefined$1) {
-	      // A .throw or .return when the delegate iterator has no .throw
-	      // method always terminates the yield* loop.
-	      context.delegate = null;
-
-	      if (context.method === "throw") {
-	        // Note: ["return"] must be used for ES3 parsing compatibility.
-	        if (delegate.iterator["return"]) {
-	          // If the delegate iterator has a return method, give it a
-	          // chance to clean up.
-	          context.method = "return";
-	          context.arg = undefined$1;
-	          maybeInvokeDelegate(delegate, context);
-
-	          if (context.method === "throw") {
-	            // If maybeInvokeDelegate(context) changed context.method from
-	            // "return" to "throw", let that override the TypeError below.
-	            return ContinueSentinel;
-	          }
-	        }
-
-	        context.method = "throw";
-	        context.arg = new TypeError(
-	          "The iterator does not provide a 'throw' method");
-	      }
-
-	      return ContinueSentinel;
-	    }
-
-	    var record = tryCatch(method, delegate.iterator, context.arg);
-
-	    if (record.type === "throw") {
-	      context.method = "throw";
-	      context.arg = record.arg;
-	      context.delegate = null;
-	      return ContinueSentinel;
-	    }
-
-	    var info = record.arg;
-
-	    if (! info) {
-	      context.method = "throw";
-	      context.arg = new TypeError("iterator result is not an object");
-	      context.delegate = null;
-	      return ContinueSentinel;
-	    }
-
-	    if (info.done) {
-	      // Assign the result of the finished delegate to the temporary
-	      // variable specified by delegate.resultName (see delegateYield).
-	      context[delegate.resultName] = info.value;
-
-	      // Resume execution at the desired location (see delegateYield).
-	      context.next = delegate.nextLoc;
-
-	      // If context.method was "throw" but the delegate handled the
-	      // exception, let the outer generator proceed normally. If
-	      // context.method was "next", forget context.arg since it has been
-	      // "consumed" by the delegate iterator. If context.method was
-	      // "return", allow the original .return call to continue in the
-	      // outer generator.
-	      if (context.method !== "return") {
-	        context.method = "next";
-	        context.arg = undefined$1;
-	      }
-
-	    } else {
-	      // Re-yield the result returned by the delegate method.
-	      return info;
-	    }
-
-	    // The delegate iterator is finished, so forget it and continue with
-	    // the outer generator.
-	    context.delegate = null;
-	    return ContinueSentinel;
-	  }
-
-	  // Define Generator.prototype.{next,throw,return} in terms of the
-	  // unified ._invoke helper method.
-	  defineIteratorMethods(Gp);
-
-	  define(Gp, toStringTagSymbol, "Generator");
-
-	  // A Generator should always return itself as the iterator object when the
-	  // @@iterator function is called on it. Some browsers' implementations of the
-	  // iterator prototype chain incorrectly implement this, causing the Generator
-	  // object to not be returned from this call. This ensures that doesn't happen.
-	  // See https://github.com/facebook/regenerator/issues/274 for more details.
-	  define(Gp, iteratorSymbol, function() {
-	    return this;
-	  });
-
-	  define(Gp, "toString", function() {
-	    return "[object Generator]";
-	  });
-
-	  function pushTryEntry(locs) {
-	    var entry = { tryLoc: locs[0] };
-
-	    if (1 in locs) {
-	      entry.catchLoc = locs[1];
-	    }
-
-	    if (2 in locs) {
-	      entry.finallyLoc = locs[2];
-	      entry.afterLoc = locs[3];
-	    }
-
-	    this.tryEntries.push(entry);
-	  }
-
-	  function resetTryEntry(entry) {
-	    var record = entry.completion || {};
-	    record.type = "normal";
-	    delete record.arg;
-	    entry.completion = record;
-	  }
-
-	  function Context(tryLocsList) {
-	    // The root entry object (effectively a try statement without a catch
-	    // or a finally block) gives us a place to store values thrown from
-	    // locations where there is no enclosing try statement.
-	    this.tryEntries = [{ tryLoc: "root" }];
-	    tryLocsList.forEach(pushTryEntry, this);
-	    this.reset(true);
-	  }
-
-	  exports.keys = function(object) {
-	    var keys = [];
-	    for (var key in object) {
-	      keys.push(key);
-	    }
-	    keys.reverse();
-
-	    // Rather than returning an object with a next method, we keep
-	    // things simple and return the next function itself.
-	    return function next() {
-	      while (keys.length) {
-	        var key = keys.pop();
-	        if (key in object) {
-	          next.value = key;
-	          next.done = false;
-	          return next;
-	        }
-	      }
-
-	      // To avoid creating an additional object, we just hang the .value
-	      // and .done properties off the next function object itself. This
-	      // also ensures that the minifier will not anonymize the function.
-	      next.done = true;
-	      return next;
-	    };
-	  };
-
-	  function values(iterable) {
-	    if (iterable) {
-	      var iteratorMethod = iterable[iteratorSymbol];
-	      if (iteratorMethod) {
-	        return iteratorMethod.call(iterable);
-	      }
-
-	      if (typeof iterable.next === "function") {
-	        return iterable;
-	      }
-
-	      if (!isNaN(iterable.length)) {
-	        var i = -1, next = function next() {
-	          while (++i < iterable.length) {
-	            if (hasOwn.call(iterable, i)) {
-	              next.value = iterable[i];
-	              next.done = false;
-	              return next;
-	            }
-	          }
-
-	          next.value = undefined$1;
-	          next.done = true;
-
-	          return next;
-	        };
-
-	        return next.next = next;
-	      }
-	    }
-
-	    // Return an iterator with no values.
-	    return { next: doneResult };
-	  }
-	  exports.values = values;
-
-	  function doneResult() {
-	    return { value: undefined$1, done: true };
-	  }
-
-	  Context.prototype = {
-	    constructor: Context,
-
-	    reset: function(skipTempReset) {
-	      this.prev = 0;
-	      this.next = 0;
-	      // Resetting context._sent for legacy support of Babel's
-	      // function.sent implementation.
-	      this.sent = this._sent = undefined$1;
-	      this.done = false;
-	      this.delegate = null;
-
-	      this.method = "next";
-	      this.arg = undefined$1;
-
-	      this.tryEntries.forEach(resetTryEntry);
-
-	      if (!skipTempReset) {
-	        for (var name in this) {
-	          // Not sure about the optimal order of these conditions:
-	          if (name.charAt(0) === "t" &&
-	              hasOwn.call(this, name) &&
-	              !isNaN(+name.slice(1))) {
-	            this[name] = undefined$1;
-	          }
-	        }
-	      }
-	    },
-
-	    stop: function() {
-	      this.done = true;
-
-	      var rootEntry = this.tryEntries[0];
-	      var rootRecord = rootEntry.completion;
-	      if (rootRecord.type === "throw") {
-	        throw rootRecord.arg;
-	      }
-
-	      return this.rval;
-	    },
-
-	    dispatchException: function(exception) {
-	      if (this.done) {
-	        throw exception;
-	      }
-
-	      var context = this;
-	      function handle(loc, caught) {
-	        record.type = "throw";
-	        record.arg = exception;
-	        context.next = loc;
-
-	        if (caught) {
-	          // If the dispatched exception was caught by a catch block,
-	          // then let that catch block handle the exception normally.
-	          context.method = "next";
-	          context.arg = undefined$1;
-	        }
-
-	        return !! caught;
-	      }
-
-	      for (var i = this.tryEntries.length - 1; i >= 0; --i) {
-	        var entry = this.tryEntries[i];
-	        var record = entry.completion;
-
-	        if (entry.tryLoc === "root") {
-	          // Exception thrown outside of any try block that could handle
-	          // it, so set the completion value of the entire function to
-	          // throw the exception.
-	          return handle("end");
-	        }
-
-	        if (entry.tryLoc <= this.prev) {
-	          var hasCatch = hasOwn.call(entry, "catchLoc");
-	          var hasFinally = hasOwn.call(entry, "finallyLoc");
-
-	          if (hasCatch && hasFinally) {
-	            if (this.prev < entry.catchLoc) {
-	              return handle(entry.catchLoc, true);
-	            } else if (this.prev < entry.finallyLoc) {
-	              return handle(entry.finallyLoc);
-	            }
-
-	          } else if (hasCatch) {
-	            if (this.prev < entry.catchLoc) {
-	              return handle(entry.catchLoc, true);
-	            }
-
-	          } else if (hasFinally) {
-	            if (this.prev < entry.finallyLoc) {
-	              return handle(entry.finallyLoc);
-	            }
-
-	          } else {
-	            throw new Error("try statement without catch or finally");
-	          }
-	        }
-	      }
-	    },
-
-	    abrupt: function(type, arg) {
-	      for (var i = this.tryEntries.length - 1; i >= 0; --i) {
-	        var entry = this.tryEntries[i];
-	        if (entry.tryLoc <= this.prev &&
-	            hasOwn.call(entry, "finallyLoc") &&
-	            this.prev < entry.finallyLoc) {
-	          var finallyEntry = entry;
-	          break;
-	        }
-	      }
-
-	      if (finallyEntry &&
-	          (type === "break" ||
-	           type === "continue") &&
-	          finallyEntry.tryLoc <= arg &&
-	          arg <= finallyEntry.finallyLoc) {
-	        // Ignore the finally entry if control is not jumping to a
-	        // location outside the try/catch block.
-	        finallyEntry = null;
-	      }
-
-	      var record = finallyEntry ? finallyEntry.completion : {};
-	      record.type = type;
-	      record.arg = arg;
-
-	      if (finallyEntry) {
-	        this.method = "next";
-	        this.next = finallyEntry.finallyLoc;
-	        return ContinueSentinel;
-	      }
-
-	      return this.complete(record);
-	    },
-
-	    complete: function(record, afterLoc) {
-	      if (record.type === "throw") {
-	        throw record.arg;
-	      }
-
-	      if (record.type === "break" ||
-	          record.type === "continue") {
-	        this.next = record.arg;
-	      } else if (record.type === "return") {
-	        this.rval = this.arg = record.arg;
-	        this.method = "return";
-	        this.next = "end";
-	      } else if (record.type === "normal" && afterLoc) {
-	        this.next = afterLoc;
-	      }
-
-	      return ContinueSentinel;
-	    },
-
-	    finish: function(finallyLoc) {
-	      for (var i = this.tryEntries.length - 1; i >= 0; --i) {
-	        var entry = this.tryEntries[i];
-	        if (entry.finallyLoc === finallyLoc) {
-	          this.complete(entry.completion, entry.afterLoc);
-	          resetTryEntry(entry);
-	          return ContinueSentinel;
-	        }
-	      }
-	    },
-
-	    "catch": function(tryLoc) {
-	      for (var i = this.tryEntries.length - 1; i >= 0; --i) {
-	        var entry = this.tryEntries[i];
-	        if (entry.tryLoc === tryLoc) {
-	          var record = entry.completion;
-	          if (record.type === "throw") {
-	            var thrown = record.arg;
-	            resetTryEntry(entry);
-	          }
-	          return thrown;
-	        }
-	      }
-
-	      // The context.catch method must only be called with a location
-	      // argument that corresponds to a known catch block.
-	      throw new Error("illegal catch attempt");
-	    },
-
-	    delegateYield: function(iterable, resultName, nextLoc) {
-	      this.delegate = {
-	        iterator: values(iterable),
-	        resultName: resultName,
-	        nextLoc: nextLoc
-	      };
+    A {@link RouterStrategy} that manages a history stack using inline pound symbols `#`.
+    URLs will have a starting point `/#/`, as a default base.
+
+    For example, if you [pushState("mylink")]{@link pushState}, the url
+    `/#/mylink` will be produced.
+*/
+class HashStrategy extends RouterStrategy {
+    constructor(router) {
+        super(router);
+        this.$base = '#';
+        this.$stack = [];
+        this.$position = -1;
+        this.$lastFiredLocation = null;
+        window.addEventListener('popstate', (ev) => {
+            let location = this.getLocation();
+            if (this.$lastFiredLocation !== location) {
+                this._fireURLChange(location);
+            }
+        });
+        window.addEventListener('hashchange', (e) => {
+            let location = this.getLocation();
+            if (this.$lastFiredLocation !== location) {
+                this._fireURLChange(location);
+            }
+        });
+        this.$init();
+    }
+    $init() {
+        this.pushState(this.getLocation());
+    }
+    getLocation() {
+        return window.location.hash.replace('#', '');
+    }
+    getLocationAt(position) {
+        return this.$stack[this.$position + position];
+    }
+    getHistoryLength() {
+        return this.$stack.length;
+    }
+    getScrollRestoration() {
+        return window.history.scrollRestoration;
+    }
+    canGo(to) {
+        return this.$stack[this.$position + to] !== undefined;
+    }
+    peek(to) {
+        return this.$stack[this.$position + to];
+    }
+    go(to) {
+        if (!this.canGo(to)) {
+            return;
+        }
+        this.$position += to;
+        let url = this.$stack[this.$position];
+        this.$navigate(url);
+    }
+    pushState(url, state) {
+        if (url === this.getLocation()) {
+            //We are already here, so do nothing.
+            return;
+        }
+        if (this.$stack.length === 0) {
+            this.$stack[++this.$position] = this.getLocation();
+        }
+        this.$stack[++this.$position] = url;
+        //clear everything after position.
+        this.$stack = this.$stack.slice(0, this.$position + 1);
+        this.$navigate(url);
+    }
+    replaceState(url, state) {
+        if (url === this.getLocation()) {
+            //We are already here, so do nothing.
+            return;
+        }
+        if (this.$position === -1) {
+            this.pushState(url, state);
+        }
+        else {
+            this.$stack[this.$position] = url;
+            this.$navigate(url);
+        }
+    }
+    clear() {
+        this.$stack = [];
+        this.$position = -1;
+    }
+    $navigate(url) {
+        window.location.hash = this.$base + url;
+        this._fireURLChange(this.getLocation());
+    }
+    _fireURLChange(url) {
+        this.$lastFiredLocation = url;
+        super._fireURLChange(url);
+    }
+}
 
-	      if (this.method === "next") {
-	        // Deliberately forget the last sent value so that we don't
-	        // accidentally pass it on to the delegate.
-	        this.arg = undefined$1;
-	      }
+/**
+Alias for {@link HashStrategy}
+*/
+// eslint-disable-next-line @typescript-eslint/naming-convention
+let DefaultStrategy = HashStrategy;
 
-	      return ContinueSentinel;
-	    }
-	  };
+/**
+ * Parses the URL for router paths and url-based variables.
+ */
+class URLParser {
+    /**
+     *
+     * @param {string} pattern The URL pattern
+     * @param {boolean} allowPartialMatch   If true, the pattern will match again urls that contains the pattern,
+     *                                      even if it isn't an exact match.
+     *                                      Defaults to false.
+     */
+    constructor(pattern, allowPartialMatch = false) {
+        this.$allowPartialMatch = allowPartialMatch;
+        this.$pattern = this.$stripURL(pattern);
+    }
+    /**
+     * Parses the URL and returns the url parameters.
+     * Returns null the url does not match the pattern
+     *
+     * @param {string} url The url to test
+     */
+    parse(url) {
+        url = this.$stripURL(url);
+        let parts = this.$getParts(url);
+        let patternParts = this.$getParts(this.$pattern);
+        if ((!this.$allowPartialMatch && parts.length !== patternParts.length) || url === '') {
+            return null;
+        }
+        let params = {};
+        for (let i = 0; i < patternParts.length; i++) {
+            let pPart = patternParts[i];
+            let uPart = parts[i];
+            if (uPart) {
+                if (pPart.charAt(0) === ':') {
+                    params[pPart.slice(1)] = uPart;
+                }
+                else {
+                    if (pPart !== uPart) {
+                        return null;
+                    }
+                }
+            }
+            else {
+                break;
+            }
+        }
+        return params;
+    }
+    /**
+     * Strips the url for parsing, removing leading and trailing forward slashes.
+     *
+     * @private
+     * @param {string} url URL to strip
+     */
+    $stripURL(url) {
+        while (url.charAt(0) === '/') {
+            url = url.slice(1);
+        }
+        while (url.charAt(url.length - 1) === '/') {
+            url = url.slice(0, url.length - 1);
+        }
+        return url;
+    }
+    /**
+     * Splits the url into an array of URL parts, separated by the forward slash
+     *
+     * @private
+     * @param {string} url URL to split
+     */
+    $getParts(url) {
+        url = this.$stripURL(url);
+        return url.split('/');
+    }
+}
 
-	  // Regardless of whether this script is executing as a CommonJS module
-	  // or not, return the runtime object so that we can declare the variable
-	  // regeneratorRuntime in the outer scope, which allows this module to be
-	  // injected easily by `bin/regenerator --include-runtime script.js`.
-	  return exports;
+/**
+ * This class is reponsible for determing which route to render
+ * based on the URL and the route url patterns.
+ */
+class RouteMatcher {
+    constructor(routerStrategy) {
+        this.$strategy = routerStrategy;
+    }
+    $defaultNoRouteFunction(indexRoute, routes) {
+        return indexRoute;
+    }
+    /**
+     * Matches the url to the appropriate renderable route
+     *
+     * @param url
+     * @param children
+     * @param base
+     * @param indexRoute
+     * @param onNoRoute
+     */
+    match(url, children, base, indexRoute, onNoRoute) {
+        let componentToRender = null;
+        let params = null;
+        for (let i = 0; i < children.length; i++) {
+            let route = children[i];
+            let shouldAllowPartialMatching = !!route.props.children;
+            let parser = new URLParser(base + route.props.url, shouldAllowPartialMatching);
+            params = parser.parse(url);
+            if (params) {
+                componentToRender = route;
+                break;
+            }
+        }
+        if (!componentToRender) {
+            componentToRender = (onNoRoute ? onNoRoute : this.$defaultNoRouteFunction)(indexRoute, children);
+        }
+        if (!componentToRender) {
+            if (!base) {
+                console.warn('No routes matched, and no index route available.');
+            }
+            return null;
+        }
+        let props = {
+            url: url,
+            base: base + componentToRender.props.url,
+            matcher: this,
+            component: componentToRender.props.component,
+            entryTransition: componentToRender.props.entryTransition,
+            exitTransition: componentToRender.props.exitTransition,
+            componentProps: {
+                url: url,
+                router: this.$strategy
+            }
+        };
+        if (params) {
+            for (let i in params) {
+                props.componentProps[i] = params[i];
+            }
+        }
+        return React.cloneElement(componentToRender, props);
+    }
+}
 
-	}(
-	  // If this script is executing as a CommonJS module, use module.exports
-	  // as the regeneratorRuntime namespace. Otherwise create a new empty
-	  // object. Either way, the resulting object will be used to initialize
-	  // the regeneratorRuntime variable at the top of this file.
-	  module.exports 
-	));
+class Router extends React__namespace.Component {
+    constructor(props) {
+        super(props);
+        // eslint-disable-next-line @typescript-eslint/naming-convention
+        let Strategy;
+        if (!props.strategy) {
+            Strategy = DefaultStrategy;
+        }
+        else {
+            Strategy = props.strategy;
+        }
+        let strategy = new Strategy(this);
+        this.state = {
+            strategy: strategy,
+            url: strategy.getLocation(),
+            shouldTransition: false
+        };
+        this.$lastRenderedRoute = null;
+        this.$onURLChange = this.$onURLChange.bind(this);
+        this.$matcher = new RouteMatcher(strategy);
+    }
+    static getInstance() {
+        if (!Router.$instance) {
+            return null;
+        }
+        return Router.$instance.getRouterStrategy();
+    }
+    /**
+     * Gets the current routing strategy
+     */
+    getRouterStrategy() {
+        return this.state.strategy;
+    }
+    /**
+     * @ignore
+     */
+    $onURLChange(url) {
+        if (url !== this.state.url) {
+            this.setState({
+                url: url,
+                shouldTransition: true
+            });
+        }
+    }
+    componentDidMount() {
+        Router.$instance = this;
+        this.state.strategy.addURLChangeCallback(this.$onURLChange);
+    }
+    /**
+     * @ignore
+     */
+    UNSAFE_componentWillReceiveProps(nextProps) {
+        if (nextProps.strategy && (this.state.strategy instanceof nextProps.strategy)) {
+            this.state.strategy.removeURLChangeCallback(this.$onURLChange);
+            let strat = new nextProps.strategy(this);
+            strat.addURLChangeCallback(this.$onURLChange);
+            this.setState({
+                strategy: strat
+            });
+        }
+    }
+    /**
+     * @ignore
+     */
+    componentWillUnmount() {
+        Router.$instance = null;
+        this.state.strategy.removeURLChangeCallback(this.$onURLChange);
+    }
+    /**
+     * @ignore
+     */
+    render() {
+        let currentRoute = this.$matcher.match(this.state.url || '/', this.$getChildren(), '', this.$getIndexRoute(), this.props.onNoRoute);
+        // eslint-disable-next-line @typescript-eslint/naming-convention
+        let Root = null;
+        if (this.props.component) {
+            Root = this.props.component;
+        }
+        if (this.state.shouldTransition && (currentRoute.props.entryTransition || (this.$lastRenderedRoute &&
+            this.$lastRenderedRoute.props.exitTransition))) {
+            this.$awaitingTransition = true;
+            let exiting = null;
+            if (this.$lastRenderedRoute) {
+                exiting = React__namespace.cloneElement(this.$lastRenderedRoute, {
+                    ref: (route) => {
+                        this.$exitingRoute = route;
+                    }
+                });
+            }
+            // Incoming will always be safe to render, hence no defensive checks
+            let incoming = React__namespace.cloneElement(currentRoute, {
+                ref: (route) => {
+                    this.$incomingRoute = route;
+                }
+            });
+            if (Root) {
+                return React__namespace.createElement(Root, { router: this.getRouterStrategy(), url: this.state.url }, [exiting, incoming]);
+            }
+            else {
+                return [exiting, incoming];
+            }
+        }
+        else {
+            this.$lastRenderedRoute = currentRoute;
+            if (Root) {
+                // currentRoute must be rendered as an array; because, exiting and incoming is rendered as an array.
+                // if currentRoute is not rendered as an array, a bug happens where the exiting screen is reloaded 
+                // calling the constructor again.
+                return React__namespace.createElement(Root, { router: this.getRouterStrategy(), url: this.state.url }, [currentRoute]);
+            }
+            else {
+                return currentRoute;
+            }
+        }
+    }
+    /**
+     * @ignore
+     */
+    componentDidUpdate() {
+        if (this.$awaitingTransition) {
+            this.$awaitingTransition = false;
+            let exitTransitionPromise = null;
+            if (this.$exitingRoute && this.$exitingRoute.props.exitTransition) {
+                exitTransitionPromise = this.$exitingRoute.props.exitTransition.execute(this.$incomingRoute.getView(), this.$exitingRoute.getView());
+            }
+            else {
+                exitTransitionPromise = Promise.resolve();
+            }
+            exitTransitionPromise.then(() => {
+                let entryTransitionPromise = null;
+                if (this.$incomingRoute.props.entryTransition) {
+                    entryTransitionPromise = this.$incomingRoute.props.entryTransition.execute(this.$incomingRoute.getView(), this.$exitingRoute.getView());
+                }
+                else {
+                    entryTransitionPromise = Promise.resolve();
+                }
+                return entryTransitionPromise;
+            }).catch((error) => {
+                console.error(error);
+            }).then(() => {
+                this.$incomingRoute = null;
+                this.$exitingRoute = null;
+                this.setState({ shouldTransition: false });
+            });
+        }
+    }
+    /**
+     * Gets the number of history entries. Note this does not count the browser history.
+     * Only the history kept track during the life-cycle of the app.
+     */
+    getHistoryLength() {
+        return this.state.strategy.getHistoryLength();
+    }
+    /**
+     * Gets the scroll restoration mode
+     */
+    getScrollRestoration() {
+        return this.state.strategy.getScrollRestoration();
+    }
+    /**
+     *
+     * @param to An integer, positive means go forward, negative means go backwards. E.g:
+     *              `1`  move forward one step
+     *              `-1` move backward one step
+     *              `0`  navigate to the current page (This is essentially a no-op)
+     */
+    go(to) {
+        this.state.strategy.go(to);
+    }
+    /**
+     * Go back one step. This is an alias for [pushState(-1)]{@link go}.
+     */
+    back() {
+        this.state.strategy.go(-1);
+    }
+    /**
+     * Go forward one step. This is an alias for [pushState(1)]{@link go}.
+     */
+    forward() {
+        this.state.strategy.go(1);
+    }
+    /**
+     * Gets the potential routes
+     */
+    $getChildren() {
+        let children = null;
+        if (this.props.children instanceof Array) {
+            children = this.props.children;
+        }
+        else {
+            children = [this.props.children];
+        }
+        return children;
+    }
+    /**
+     * Finds the index route. Returns null if there are no indexed routes.
+     */
+    $getIndexRoute() {
+        let children = this.$getChildren();
+        for (let i = 0; i < children.length; i++) {
+            let child = children[i];
+            if (child.props.index) {
+                return child;
+            }
+        }
+        return null;
+    }
+}
+/**
+ * @deprecated Use Router.getInstance() instead.
+ * @returns {RouterStrategy}
+ */
+let getRouter = () => {
+    console.warn('getRouter() is deprecated. use Router.getInstance() instead.');
+    return Router.getInstance();
+};
 
-	try {
-	  regeneratorRuntime = runtime;
-	} catch (accidentalStrictMode) {
-	  // This module should not be running in strict mode, so the above
-	  // assignment should always work unless something is misconfigured. Just
-	  // in case runtime.js accidentally runs in strict mode, in modern engines
-	  // we can explicitly access globalThis. In older engines we can escape
-	  // strict mode using a global Function call. This could conceivably fail
-	  // if a Content Security Policy forbids using Function, but in that case
-	  // the proper solution is to fix the accidental strict mode problem. If
-	  // you've misconfigured your bundler to force strict mode and applied a
-	  // CSP to forbid Function, and you're not willing to fix either of those
-	  // problems, please detail your unique predicament in a GitHub issue.
-	  if (typeof globalThis === "object") {
-	    globalThis.regeneratorRuntime = runtime;
-	  } else {
-	    Function("r", "regeneratorRuntime = r")(runtime);
-	  }
-	}
-} (runtime));
+/**
+ * @notice Using the URLStrategy requires some backend configuration
+ * to route URLs back to application.
+ *
+ * To make this easier, by default these URLs are prefixed with
+ * `/r/` to easily differentiate between URLs that needs to be re-routed back
+ * to the application vs other resources such as images.
+ */
+class URLStrategy extends RouterStrategy {
+    /**
+     *
+     * @param {Router} router
+     */
+    constructor(router) {
+        super(router);
+        this.$base = window.location.origin + '/r';
+        this.$stack = [];
+        this.$position = -1;
+        window.addEventListener('popstate', () => {
+            this._fireURLChange(this.getLocation());
+        });
+        this.$init();
+    }
+    $init() {
+        this.pushState(this.getLocation());
+    }
+    getLocation() {
+        return window.location.pathname.replace('/r', '');
+    }
+    getLocationAt(position) {
+        return this.$stack[this.$position + position];
+    }
+    getHistoryLength() {
+        return window.history.length;
+    }
+    getScrollRestoration() {
+        return window.history.scrollRestoration;
+    }
+    peek(to) {
+        return this.$stack[this.$position + to];
+    }
+    canGo(to) {
+        return this.$stack[this.$position + to] !== undefined;
+    }
+    go(to) {
+        if (!this.canGo(to)) {
+            return;
+        }
+        this.$position += to;
+        this.$navigate(this.$stack[this.$position]);
+    }
+    pushState(url, state) {
+        if (state) {
+            console.warn('Warning: The state parameter is not implemented yet.');
+        }
+        if (url === this.getLocation()) {
+            //We are already here, so do nothing.
+            return;
+        }
+        this.$stack[++this.$position] = url;
+        //clear everything after position.
+        this.$stack = this.$stack.slice(0, this.$position + 1);
+        this.$navigate(url);
+    }
+    replaceState(url, state) {
+        if (state) {
+            console.warn('Warning: The state parameter is not implemented yet.');
+        }
+        if (url === this.getLocation()) {
+            //We are already here, so do nothing.
+            return;
+        }
+        if (this.$position === -1) {
+            this.pushState(url, state);
+        }
+        else {
+            this.$stack[this.$position] = url;
+            this.$navigate(url);
+        }
+    }
+    clear() {
+        this.$stack = [];
+        this.$position = -1;
+    }
+    $navigate(url, replace = false) {
+        if (replace) {
+            window.history.replaceState({}, null, this.$base + url);
+        }
+        else {
+            window.history.pushState({}, null, this.$base + url);
+        }
+        this._fireURLChange(this.getLocation());
+    }
+}
 
 /******************************************************************************
 Copyright (c) Microsoft Corporation.
@@ -810,33 +733,8 @@ LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
 OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
 PERFORMANCE OF THIS SOFTWARE.
 ***************************************************************************** */
-/* global Reflect, Promise */
+/* global Reflect, Promise, SuppressedError, Symbol */
 
-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 (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
-    return extendStatics(d, b);
-};
-
-function __extends(d, b) {
-    if (typeof b !== "function" && b !== null)
-        throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
-    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 __awaiter(thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
@@ -848,983 +746,278 @@ function __awaiter(thisArg, _arguments, P, generator) {
     });
 }
 
-function __generator(thisArg, body) {
-    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
-    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
-    function verb(n) { return function (v) { return step([n, v]); }; }
-    function step(op) {
-        if (f) throw new TypeError("Generator is already executing.");
-        while (_) try {
-            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
-            if (y = 0, t) op = [op[0] & 2, t.value];
-            switch (op[0]) {
-                case 0: case 1: t = op; break;
-                case 4: _.label++; return { value: op[1], done: false };
-                case 5: _.label++; y = op[1]; op = [0]; continue;
-                case 7: op = _.ops.pop(); _.trys.pop(); continue;
-                default:
-                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
-                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
-                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
-                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
-                    if (t[2]) _.ops.pop();
-                    _.trys.pop(); continue;
-            }
-            op = body.call(thisArg, _);
-        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
-        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
-    }
-}
-
-var EVENT_URL_CHANGE = 'urlchange';
-var RouterStrategy = /** @class */ (function (_super) {
-    __extends(RouterStrategy, _super);
-    function RouterStrategy(router) {
-        var _this = _super.call(this) || this;
-        _this.$router = router;
-        return _this;
-    }
-    /**
-     * Gets the router
-     */
-    RouterStrategy.prototype.getRouter = function () {
-        return this.$router;
-    };
-    /**
-     * Sets the browser title
-     *
-     * @param {string} title
-     */
-    RouterStrategy.prototype.setTitle = function (title) {
-        var head = document.head.getElementsByTagName('title')[0];
-        if (!head) {
-            head = document.createElement('title');
-            document.head.appendChild(head);
-        }
-        if (!title) {
-            title = '';
-        }
-        head.innerText = title.toString();
-    };
-    /**
-     * Listen for URL change events
-     *
-     * @param callback
-     */
-    RouterStrategy.prototype.addURLChangeCallback = function (callback) {
-        this.on(EVENT_URL_CHANGE, callback);
-    };
-    /**
-     * Removes an existing listener
-     *
-     * @param callback
-     */
-    RouterStrategy.prototype.removeURLChangeCallback = function (callback) {
-        this.off(EVENT_URL_CHANGE, callback);
-    };
-    /**
-     * navigate the history forward one entry. This is an alias for [go(1)]{@link go}
-     */
-    RouterStrategy.prototype.forward = function () {
-        this.go(1);
-    };
-    /**
-     * Navigate the history back one entry. This is an alias for [go(-1)]{@link go}
-     */
-    RouterStrategy.prototype.back = function () {
-        this.go(-1);
-    };
-    /**
-     * Returns true if can go back 1 entry.
-     * This is the same as calling [canGo(-1)]{@link canGo}
-     */
-    RouterStrategy.prototype.canBack = function () {
-        return this.canGo(-1);
-    };
-    /**
-     * Returns true if can go forward 1 entry.
-     * This is the same as calling [canGo(1)]{@link canGo}
-     */
-    RouterStrategy.prototype.canForward = function () {
-        return this.canGo(1);
-    };
-    /**
-     * Returns the URL one entry forward.
-     * This is the same as calling [peek(1)]{@link peek}
-     */
-    RouterStrategy.prototype.peekForward = function () {
-        return this.peek(1);
-    };
-    /**
-     * Returns the URL one entry back.
-     * This is the same as calling [peek(-1)]{@link peek}
-     */
-    RouterStrategy.prototype.peekBack = function () {
-        return this.peek(-1);
-    };
-    /**
-     * Fires the {@link EVENT_URL_CHANGE} event
-     * @param url
-     */
-    RouterStrategy.prototype._fireURLChange = function (url) {
-        this.emit(EVENT_URL_CHANGE, url);
-    };
-    return RouterStrategy;
-}(events.EventEmitter));
-
-/**
-    A {@link RouterStrategy} that manages a history stack using inline pound symbols `#`.
-    URLs will have a starting point `/#/`, as a default base.
-
-    For example, if you [pushState("mylink")]{@link pushState}, the url
-    `/#/mylink` will be produced.
-*/
-var HashStrategy = /** @class */ (function (_super) {
-    __extends(HashStrategy, _super);
-    function HashStrategy(router) {
-        var _this = _super.call(this, router) || this;
-        _this.$base = '#';
-        _this.$stack = [];
-        _this.$position = -1;
-        _this.$lastFiredLocation = null; //this.getLocation();
-        window.addEventListener('popstate', function (ev) {
-            var location = _this.getLocation();
-            if (_this.$lastFiredLocation !== location) {
-                _this._fireURLChange(location);
-            }
-        });
-        window.addEventListener('hashchange', function (e) {
-            var location = _this.getLocation();
-            if (_this.$lastFiredLocation !== location) {
-                _this._fireURLChange(location);
-            }
-        });
-        _this.$init();
-        return _this;
-    }
-    HashStrategy.prototype.$init = function () {
-        this.pushState(this.getLocation());
-    };
-    HashStrategy.prototype.getLocation = function () {
-        return window.location.hash.replace('#', '');
-    };
-    HashStrategy.prototype.getLocationAt = function (position) {
-        return this.$stack[this.$position + position];
-    };
-    HashStrategy.prototype.getHistoryLength = function () {
-        return this.$stack.length;
-    };
-    HashStrategy.prototype.getScrollRestoration = function () {
-        return window.history.scrollRestoration;
-    };
-    HashStrategy.prototype.canGo = function (to) {
-        return this.$stack[this.$position + to] !== undefined;
-    };
-    HashStrategy.prototype.peek = function (to) {
-        return this.$stack[this.$position + to];
-    };
-    HashStrategy.prototype.go = function (to) {
-        if (!this.canGo(to)) {
-            return;
-        }
-        this.$position += to;
-        var url = this.$stack[this.$position];
-        this.$navigate(url);
-    };
-    HashStrategy.prototype.pushState = function (url, state) {
-        if (url === this.getLocation()) {
-            //We are already here, so do nothing.
-            return;
-        }
-        if (this.$stack.length === 0) {
-            this.$stack[++this.$position] = this.getLocation();
-        }
-        this.$stack[++this.$position] = url;
-        //clear everything after position.
-        this.$stack = this.$stack.slice(0, this.$position + 1);
-        this.$navigate(url);
-    };
-    HashStrategy.prototype.replaceState = function (url, state) {
-        if (url === this.getLocation()) {
-            //We are already here, so do nothing.
-            return;
-        }
-        if (this.$position === -1) {
-            this.pushState(url, state);
-        }
-        else {
-            this.$stack[this.$position] = url;
-            this.$navigate(url);
-        }
-    };
-    HashStrategy.prototype.clear = function () {
-        this.$stack = [];
-        this.$position = -1;
-    };
-    HashStrategy.prototype.$navigate = function (url) {
-        window.location.hash = this.$base + url;
-        this._fireURLChange(this.getLocation());
-    };
-    HashStrategy.prototype._fireURLChange = function (url) {
-        this.$lastFiredLocation = url;
-        _super.prototype._fireURLChange.call(this, url);
-    };
-    return HashStrategy;
-}(RouterStrategy));
-
-/**
-Alias for {@link HashStrategy}
-*/
-// eslint-disable-next-line @typescript-eslint/naming-convention
-var DefaultStrategy = HashStrategy;
-
-/**
- * Parses the URL for router paths and url-based variables.
- */
-var URLParser = /** @class */ (function () {
-    /**
-     *
-     * @param {string} pattern The URL pattern
-     * @param {boolean} allowPartialMatch   If true, the pattern will match again urls that contains the pattern,
-     *                                      even if it isn't an exact match.
-     *                                      Defaults to false.
-     */
-    function URLParser(pattern, allowPartialMatch) {
-        if (allowPartialMatch === void 0) { allowPartialMatch = false; }
-        this.$allowPartialMatch = allowPartialMatch;
-        this.$pattern = this.$stripURL(pattern);
-    }
-    /**
-     * Parses the URL and returns the url parameters.
-     * Returns null the url does not match the pattern
-     *
-     * @param {string} url The url to test
-     */
-    URLParser.prototype.parse = function (url) {
-        url = this.$stripURL(url);
-        var parts = this.$getParts(url);
-        var patternParts = this.$getParts(this.$pattern);
-        if ((!this.$allowPartialMatch && parts.length !== patternParts.length) || url === '') {
-            return null;
-        }
-        var params = {};
-        for (var i = 0; i < patternParts.length; i++) {
-            var pPart = patternParts[i];
-            var uPart = parts[i];
-            if (uPart) {
-                if (pPart.charAt(0) === ':') {
-                    params[pPart.slice(1)] = uPart;
-                }
-                else {
-                    if (pPart !== uPart) {
-                        return null;
-                    }
-                }
-            }
-            else {
-                break;
-            }
-        }
-        return params;
-    };
-    /**
-     * Strips the url for parsing, removing leading and trailing forward slashes.
-     *
-     * @private
-     * @param {string} url URL to strip
-     */
-    URLParser.prototype.$stripURL = function (url) {
-        while (url.charAt(0) === '/') {
-            url = url.slice(1);
-        }
-        while (url.charAt(url.length - 1) === '/') {
-            url = url.slice(0, url.length - 1);
-        }
-        return url;
-    };
-    /**
-     * Splits the url into an array of URL parts, separated by the forward slash
-     *
-     * @private
-     * @param {string} url URL to split
-     */
-    URLParser.prototype.$getParts = function (url) {
-        url = this.$stripURL(url);
-        return url.split('/');
-    };
-    return URLParser;
-}());
-
-/**
- * This class is reponsible for determing which route to render
- * based on the URL and the route url patterns.
- */
-var RouteMatcher = /** @class */ (function () {
-    function RouteMatcher(routerStrategy) {
-        this.$strategy = routerStrategy;
-    }
-    RouteMatcher.prototype.$defaultNoRouteFunction = function (indexRoute, routes) {
-        return indexRoute;
-    };
-    /**
-     * Matches the url to the appropriate renderable route
-     *
-     * @param url
-     * @param children
-     * @param base
-     * @param indexRoute
-     * @param onNoRoute
-     */
-    RouteMatcher.prototype.match = function (url, children, base, indexRoute, onNoRoute) {
-        var componentToRender = null;
-        var params = null;
-        for (var i = 0; i < children.length; i++) {
-            var route = children[i];
-            var shouldAllowPartialMatching = !!route.props.children;
-            var parser = new URLParser(base + route.props.url, shouldAllowPartialMatching);
-            params = parser.parse(url);
-            if (params) {
-                componentToRender = route;
-                break;
-            }
-        }
-        if (!componentToRender) {
-            componentToRender = (onNoRoute ? onNoRoute : this.$defaultNoRouteFunction)(indexRoute, children);
-        }
-        if (!componentToRender) {
-            if (!base) {
-                console.warn('No routes matched, and no index route available.');
-            }
-            return null;
-        }
-        var props = {
-            url: url,
-            base: base + componentToRender.props.url,
-            matcher: this,
-            component: componentToRender.props.component,
-            entryTransition: componentToRender.props.entryTransition,
-            exitTransition: componentToRender.props.exitTransition,
-            componentProps: {
-                url: url,
-                router: this.$strategy
-            }
-        };
-        if (params) {
-            for (var i in params) {
-                props.componentProps[i] = params[i];
-            }
-        }
-        return React.cloneElement(componentToRender, props);
-    };
-    return RouteMatcher;
-}());
-
-var Router = /** @class */ (function (_super) {
-    __extends(Router, _super);
-    function Router(props) {
-        var _this = _super.call(this, props) || this;
-        // eslint-disable-next-line @typescript-eslint/naming-convention
-        var Strategy;
-        if (!props.strategy) {
-            Strategy = DefaultStrategy;
-        }
-        else {
-            Strategy = props.strategy;
-        }
-        var strategy = new Strategy(_this);
-        _this.state = {
-            strategy: strategy,
-            url: strategy.getLocation(),
-            shouldTransition: false
-        };
-        _this.$lastRenderedRoute = null;
-        _this.$onURLChange = _this.$onURLChange.bind(_this);
-        _this.$matcher = new RouteMatcher(strategy);
-        return _this;
-    }
-    Router.getInstance = function () {
-        if (!Router.$instance) {
-            return null;
-        }
-        return Router.$instance.getRouterStrategy();
-    };
-    /**
-     * Gets the current routing strategy
-     */
-    Router.prototype.getRouterStrategy = function () {
-        return this.state.strategy;
-    };
-    /**
-     * @ignore
-     */
-    Router.prototype.$onURLChange = function (url) {
-        if (url !== this.state.url) {
-            this.setState({
-                url: url,
-                shouldTransition: true
-            });
-        }
-    };
-    Router.prototype.componentDidMount = function () {
-        Router.$instance = this;
-        this.state.strategy.addURLChangeCallback(this.$onURLChange);
-    };
-    /**
-     * @ignore
-     */
-    Router.prototype.UNSAFE_componentWillReceiveProps = function (nextProps) {
-        if (nextProps.strategy && (this.state.strategy instanceof nextProps.strategy)) {
-            this.state.strategy.removeURLChangeCallback(this.$onURLChange);
-            var strat = new nextProps.strategy(this);
-            strat.addURLChangeCallback(this.$onURLChange);
-            this.setState({
-                strategy: strat
-            });
-        }
-    };
-    /**
-     * @ignore
-     */
-    Router.prototype.componentWillUnmount = function () {
-        Router.$instance = null;
-        this.state.strategy.removeURLChangeCallback(this.$onURLChange);
-    };
-    /**
-     * @ignore
-     */
-    Router.prototype.render = function () {
-        var _this = this;
-        var currentRoute = this.$matcher.match(this.state.url || '/', this.$getChildren(), '', this.$getIndexRoute(), this.props.onNoRoute);
-        // eslint-disable-next-line @typescript-eslint/naming-convention
-        var Root = null;
-        if (this.props.component) {
-            Root = this.props.component;
-        }
-        if (this.state.shouldTransition && (currentRoute.props.entryTransition || (this.$lastRenderedRoute &&
-            this.$lastRenderedRoute.props.exitTransition))) {
-            this.$awaitingTransition = true;
-            var exiting = null;
-            if (this.$lastRenderedRoute) {
-                exiting = React__namespace.cloneElement(this.$lastRenderedRoute, {
-                    ref: function (route) {
-                        _this.$exitingRoute = route;
-                    }
-                });
-            }
-            // Incoming will always be safe to render, hence no defensive checks
-            var incoming = React__namespace.cloneElement(currentRoute, {
-                ref: function (route) {
-                    _this.$incomingRoute = route;
-                }
-            });
-            if (Root) {
-                return React__namespace.createElement(Root, { router: this.getRouterStrategy(), url: this.state.url }, [exiting, incoming]);
-            }
-            else {
-                return [exiting, incoming];
-            }
-        }
-        else {
-            this.$lastRenderedRoute = currentRoute;
-            if (Root) {
-                // currentRoute must be rendered as an array; because, exiting and incoming is rendered as an array.
-                // if currentRoute is not rendered as an array, a bug happens where the exiting screen is reloaded 
-                // calling the constructor again.
-                return React__namespace.createElement(Root, { router: this.getRouterStrategy(), url: this.state.url }, [currentRoute]);
-            }
-            else {
-                return currentRoute;
-            }
-        }
-    };
-    /**
-     * @ignore
-     */
-    Router.prototype.componentDidUpdate = function () {
-        var _this = this;
-        if (this.$awaitingTransition) {
-            this.$awaitingTransition = false;
-            var exitTransitionPromise = null;
-            if (this.$exitingRoute && this.$exitingRoute.props.exitTransition) {
-                exitTransitionPromise = this.$exitingRoute.props.exitTransition.execute(this.$incomingRoute.getView(), this.$exitingRoute.getView());
-            }
-            else {
-                exitTransitionPromise = Promise.resolve();
-            }
-            exitTransitionPromise.then(function () {
-                var entryTransitionPromise = null;
-                if (_this.$incomingRoute.props.entryTransition) {
-                    entryTransitionPromise = _this.$incomingRoute.props.entryTransition.execute(_this.$incomingRoute.getView(), _this.$exitingRoute.getView());
-                }
-                else {
-                    entryTransitionPromise = Promise.resolve();
-                }
-                return entryTransitionPromise;
-            })["catch"](function (error) {
-                console.error(error);
-            }).then(function () {
-                _this.$incomingRoute = null;
-                _this.$exitingRoute = null;
-                _this.setState({ shouldTransition: false });
-            });
-        }
-    };
-    /**
-     * Gets the number of history entries. Note this does not count the browser history.
-     * Only the history kept track during the life-cycle of the app.
-     */
-    Router.prototype.getHistoryLength = function () {
-        return this.state.strategy.getHistoryLength();
-    };
-    /**
-     * Gets the scroll restoration mode
-     */
-    Router.prototype.getScrollRestoration = function () {
-        return this.state.strategy.getScrollRestoration();
-    };
-    /**
-     *
-     * @param to An integer, positive means go forward, negative means go backwards. E.g:
-     *              `1`  move forward one step
-     *              `-1` move backward one step
-     *              `0`  navigate to the current page (This is essentially a no-op)
-     */
-    Router.prototype.go = function (to) {
-        this.state.strategy.go(to);
-    };
-    /**
-     * Go back one step. This is an alias for [pushState(-1)]{@link go}.
-     */
-    Router.prototype.back = function () {
-        this.state.strategy.go(-1);
-    };
-    /**
-     * Go forward one step. This is an alias for [pushState(1)]{@link go}.
-     */
-    Router.prototype.forward = function () {
-        this.state.strategy.go(1);
-    };
-    /**
-     * Gets the potential routes
-     */
-    Router.prototype.$getChildren = function () {
-        var children = null;
-        if (this.props.children instanceof Array) {
-            children = this.props.children;
-        }
-        else {
-            children = [this.props.children];
-        }
-        return children;
-    };
-    /**
-     * Finds the index route. Returns null if there are no indexed routes.
-     */
-    Router.prototype.$getIndexRoute = function () {
-        var children = this.$getChildren();
-        for (var i = 0; i < children.length; i++) {
-            var child = children[i];
-            if (child.props.index) {
-                return child;
-            }
-        }
-        return null;
-    };
-    return Router;
-}(React__namespace.Component));
-var getRouter = function () {
-    console.warn('getRouter() is deprecated. use Router.getInstance() instead.');
-    return Router.getInstance();
+typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
+    var e = new Error(message);
+    return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
 };
 
-/**
- * @notice Using the URLStrategy requires some backend configuration
- * to route URLs back to application.
- *
- * To make this easier, by default these URLs are prefixed with
- * `/r/` to easily differentiate between URLs that needs to be re-routed back
- * to the application vs other resources such as images.
- */
-var URLStrategy = /** @class */ (function (_super) {
-    __extends(URLStrategy, _super);
-    /**
-     *
-     * @param {Router} router
-     */
-    function URLStrategy(router) {
-        var _this = _super.call(this, router) || this;
-        _this.$base = window.location.origin + '/r';
-        _this.$stack = [];
-        _this.$position = -1;
-        window.addEventListener('popstate', function () {
-            _this._fireURLChange(_this.getLocation());
-        });
-        _this.$init();
-        return _this;
-    }
-    URLStrategy.prototype.$init = function () {
-        this.pushState(this.getLocation());
-    };
-    URLStrategy.prototype.getLocation = function () {
-        return window.location.pathname.replace('/r', '');
-    };
-    URLStrategy.prototype.getLocationAt = function (position) {
-        return this.$stack[this.$position + position];
-    };
-    URLStrategy.prototype.getHistoryLength = function () {
-        return window.history.length;
-    };
-    URLStrategy.prototype.getScrollRestoration = function () {
-        return window.history.scrollRestoration;
-    };
-    URLStrategy.prototype.peek = function (to) {
-        return this.$stack[this.$position + to];
-    };
-    URLStrategy.prototype.canGo = function (to) {
-        return this.$stack[this.$position + to] !== undefined;
-    };
-    URLStrategy.prototype.go = function (to) {
-        if (!this.canGo(to)) {
-            return;
-        }
-        this.$position += to;
-        this.$navigate(this.$stack[this.$position]);
-    };
-    URLStrategy.prototype.pushState = function (url, state) {
-        if (state) {
-            console.warn('Warning: The state parameter is not implemented yet.');
-        }
-        if (url === this.getLocation()) {
-            //We are already here, so do nothing.
-            return;
-        }
-        this.$stack[++this.$position] = url;
-        //clear everything after position.
-        this.$stack = this.$stack.slice(0, this.$position + 1);
-        this.$navigate(url);
-    };
-    URLStrategy.prototype.replaceState = function (url, state) {
-        if (state) {
-            console.warn('Warning: The state parameter is not implemented yet.');
-        }
-        if (url === this.getLocation()) {
-            //We are already here, so do nothing.
-            return;
-        }
-        if (this.$position === -1) {
-            this.pushState(url, state);
-        }
-        else {
-            this.$stack[this.$position] = url;
-            this.$navigate(url);
-        }
-    };
-    URLStrategy.prototype.clear = function () {
-        this.$stack = [];
-        this.$position = -1;
-    };
-    URLStrategy.prototype.$navigate = function (url, replace) {
-        if (replace === void 0) { replace = false; }
-        if (replace) {
-            window.history.replaceState({}, null, this.$base + url);
-        }
-        else {
-            window.history.pushState({}, null, this.$base + url);
-        }
-        this._fireURLChange(this.getLocation());
-    };
-    return URLStrategy;
-}(RouterStrategy));
-
 ___$insertStyle(".View {\n  position: static;\n  top: 0px;\n  left: 0px;\n  width: 100%;\n  height: 100%;\n  z-index: 1;\n}");
 
-var View = /** @class */ (function (_super) {
-    __extends(View, _super);
-    /**
-     * @param props See [IViewProps]
-     */
-    function View(props) {
-        var _this = _super.call(this, props) || this;
-        _this.$node = null;
-        return _this;
-    }
-    /**
-     * Return the CSS class on this view
-     */
-    View.prototype.getCSSClass = function () {
-        return '';
-    };
-    /**
-     * Override to return a webpack API style stylesheet
-     */
-    View.prototype.getViewStylesheet = function () {
-        return null;
-    };
-    /**
-     * @ignore
-     */
-    View.prototype.componentDidMount = function () {
-        var _this = this;
-        this.getTitle().then(function (title) {
-            _this.props.router.setTitle(title);
-        });
-        var stylesheet = this.getViewStylesheet();
-        if (stylesheet) {
-            stylesheet.use();
-        }
-    };
-    /**
-     * @ignore
-     */
-    View.prototype.componentWillUnmount = function () {
-        var stylesheet = this.getViewStylesheet();
-        if (stylesheet) {
-            stylesheet.unuse();
-        }
-    };
-    /**
-     * Gets the underlying HTML node for this View
-     */
-    View.prototype.getNode = function () {
-        return this.$node;
-    };
-    /**
-     * Get the title of this view
-     */
-    View.prototype.getTitle = function () {
-        return __awaiter(this, void 0, void 0, function () {
-            return __generator(this, function (_a) {
-                return [2 /*return*/, null];
-            });
-        });
-    };
-    /**
-     * Get the inline styles for this view.
-     * Use React style notation.
-     */
-    View.prototype.getViewStyles = function () {
-        return {};
-    };
-    View.prototype.render = function () {
-        var _this = this;
-        var cssClass = this.getCSSClass();
-        return (React__namespace.createElement("div", { className: "View".concat(cssClass ? ' ' + cssClass : ''), ref: function (n) { _this.$node = n; }, style: this.getViewStyles() }, this._renderView()));
-    };
-    return View;
-}(React__namespace.Component));
+class View extends React__namespace.Component {
+    /**
+     * @param props See [IViewProps]
+     */
+    constructor(props) {
+        super(props);
+        this.$node = null;
+    }
+    /**
+     * Return the CSS class on this view
+     */
+    getCSSClass() {
+        return '';
+    }
+    /**
+     * Override to return a webpack API style stylesheet
+     */
+    getViewStylesheet() {
+        return null;
+    }
+    /**
+     * @ignore
+     */
+    componentDidMount() {
+        this.getTitle().then((title) => {
+            this.props.router.setTitle(title);
+        });
+        let stylesheet = this.getViewStylesheet();
+        if (stylesheet) {
+            stylesheet.use();
+        }
+        this.props.router.__onViewMount(this);
+    }
+    /**
+     * @ignore
+     */
+    componentWillUnmount() {
+        let stylesheet = this.getViewStylesheet();
+        if (stylesheet) {
+            stylesheet.unuse();
+        }
+        this.props.router.__onViewUnmount(this);
+    }
+    /**
+     * Gets the underlying HTML node for this View
+     */
+    getNode() {
+        return this.$node;
+    }
+    /**
+     * Get the title of this view
+     */
+    getTitle() {
+        return __awaiter(this, void 0, void 0, function* () {
+            return null;
+        });
+    }
+    /**
+     * Get the inline styles for this view.
+     * Use React style notation.
+     */
+    getViewStyles() {
+        return {};
+    }
+    render() {
+        let cssClass = this.getCSSClass();
+        return (React__namespace.createElement("div", { className: `View${cssClass ? ' ' + cssClass : ''}`, ref: (n) => { this.$node = n; }, style: this.getViewStyles() }, this._renderView()));
+    }
+}
 
-/**
- * This class represents a route that renders a {@link View} component
- */
-var Route = /** @class */ (function (_super) {
-    __extends(Route, _super);
-    function Route(props) {
-        var _this = _super.call(this, props) || this;
-        _this.render;
-        return _this;
-    }
-    Route.prototype.render = function () {
-        return this.$getComponentsToRender(this);
-    };
-    Route.prototype.getView = function () {
-        return this.$node;
-    };
-    Route.prototype.$getComponentsToRender = function (component) {
-        var _this = this;
-        var url = component.props.url;
-        var base = component.props.base || '';
-        // eslint-disable-next-line @typescript-eslint/naming-convention
-        var ViewComponent = component.props.component;
-        var child;
-        var routeComponent = component.props.matcher.match(url, this.$getChildren(component), base);
-        if (routeComponent) {
-            child = this.$getComponentsToRender(routeComponent);
-        }
-        return (React__namespace.createElement(ViewComponent, __assign({}, component.props.componentProps, { ref: function (node) {
-                if (node) {
-                    if (node instanceof View) {
-                        _this.$node = node;
-                    }
-                    else {
-                        throw new Error('Routed components should be a View, but got ' + Object.getPrototypeOf(node).constructor.name + ' instead.');
-                    }
-                }
-                else {
-                    _this.$node = null;
-                }
-            } }), child));
-    };
-    Route.prototype.$getChildren = function (component) {
-        var children = null;
-        if (!component) {
-            component = this;
-        }
-        if (!component.props.children) {
-            return [];
-        }
-        if (component.props.children instanceof Array) {
-            children = component.props.children;
-        }
-        else {
-            children = [component.props.children];
-        }
-        return children;
-    };
-    return Route;
-}(React__namespace.Component));
+/**
+ * This class represents a route that renders a {@link View} component
+ */
+class Route extends React__namespace.Component {
+    constructor(props) {
+        super(props);
+        this.render;
+    }
+    render() {
+        return this.$getComponentsToRender(this);
+    }
+    getView() {
+        return this.$node;
+    }
+    $getComponentsToRender(component) {
+        let url = component.props.url;
+        let base = component.props.base || '';
+        // eslint-disable-next-line @typescript-eslint/naming-convention
+        let ViewComponent = component.props.component;
+        let child;
+        let routeComponent = component.props.matcher.match(url, this.$getChildren(component), base);
+        if (routeComponent) {
+            child = this.$getComponentsToRender(routeComponent);
+        }
+        return (React__namespace.createElement(ViewComponent, Object.assign({}, component.props.componentProps, { ref: (node) => {
+                if (node) {
+                    if (node instanceof View) {
+                        this.$node = node;
+                    }
+                    else {
+                        throw new Error('Routed components should be a View, but got ' + Object.getPrototypeOf(node).constructor.name + ' instead.');
+                    }
+                }
+                else {
+                    this.$node = null;
+                }
+            } }), child));
+    }
+    $getChildren(component) {
+        let children = null;
+        if (!component) {
+            component = this;
+        }
+        if (!component.props.children) {
+            return [];
+        }
+        if (component.props.children instanceof Array) {
+            children = component.props.children;
+        }
+        else {
+            children = [component.props.children];
+        }
+        return children;
+    }
+}
 
-var TransitionStrategy = /** @class */ (function () {
-    function TransitionStrategy() {
-    }
-    /**
-     * Invoked when the transition should begin.
-     * The promise should only resolve once the transition
-     * has ran to completion.
-     *
-     * The `incomingView` is the view that the user is navigating to.
-     * The `exitingView` is te view that the user is currently on, and is leaving.
-     *
-     * Both views will be rendered and are free to be manipulated in anyway that is desired,
-     * however, the incomingView should be positioned in it's natural position by the end
-     * of the transition to avoid "snapping" behaviour.
-     *
-     * @param {View} incomingView
-     * @param {View} exitingView
-     */
-    TransitionStrategy.prototype.execute = function (incomingView, exitingView) {
-        return __awaiter(this, void 0, void 0, function () {
-            return __generator(this, function (_a) {
-                switch (_a.label) {
-                    case 0: return [4 /*yield*/, this._execute(incomingView, exitingView)];
-                    case 1:
-                        _a.sent();
-                        return [2 /*return*/];
-                }
-            });
-        });
-    };
-    return TransitionStrategy;
-}());
+class TransitionStrategy {
+    constructor() { }
+    /**
+     * Invoked when the transition should begin.
+     * The promise should only resolve once the transition
+     * has ran to completion.
+     *
+     * The `incomingView` is the view that the user is navigating to.
+     * The `exitingView` is te view that the user is currently on, and is leaving.
+     *
+     * Both views will be rendered and are free to be manipulated in anyway that is desired,
+     * however, the incomingView should be positioned in it's natural position by the end
+     * of the transition to avoid "snapping" behaviour.
+     *
+     * @param {View} incomingView
+     * @param {View} exitingView
+     */
+    execute(incomingView, exitingView) {
+        return __awaiter(this, void 0, void 0, function* () {
+            yield this._execute(incomingView, exitingView);
+        });
+    }
+}
 
-exports.TransitionSlideDirection = void 0;
-(function (TransitionSlideDirection) {
-    TransitionSlideDirection[TransitionSlideDirection["LEFT"] = 1] = "LEFT";
-    TransitionSlideDirection[TransitionSlideDirection["RIGHT"] = 2] = "RIGHT";
-    TransitionSlideDirection[TransitionSlideDirection["UP"] = 3] = "UP";
-    TransitionSlideDirection[TransitionSlideDirection["DOWN"] = 4] = "DOWN";
-})(exports.TransitionSlideDirection || (exports.TransitionSlideDirection = {}));
-var TransitionSlide = /** @class */ (function (_super) {
-    __extends(TransitionSlide, _super);
-    function TransitionSlide(slideDirection, slideSpeed) {
-        var _this = _super.call(this) || this;
-        _this.$slideDirection = slideDirection || exports.TransitionSlideDirection.LEFT;
-        _this.$slideSpeed = slideSpeed || 0.25;
-        return _this;
-    }
-    TransitionSlide.prototype._execute = function (incoming, exiting) {
-        var _this = this;
-        return new Promise(function (resolve, reject) {
-            var incomingNode = incoming.getNode();
-            var exitingNode = exiting.getNode();
-            //First set initial transition CSS
-            incomingNode.style.willChange = 'transform';
-            incomingNode.style.transform = 'translate3d(0,0,0)';
-            incomingNode.style.pointerEvents = 'none';
-            incomingNode.style.zIndex = '1';
-            exitingNode.style.willChange = 'transform';
-            exitingNode.style.transform = 'translate3d(0,0,0)';
-            exitingNode.style.pointerEvents = 'none';
-            exitingNode.style.zIndex = '2';
-            switch (_this.$slideDirection) {
-                case exports.TransitionSlideDirection.LEFT:
-                    incomingNode.style.left = '100%';
-                    exitingNode.style.left = '0%';
-                    break;
-                case exports.TransitionSlideDirection.RIGHT:
-                    incomingNode.style.left = '-100%';
-                    exitingNode.style.left = '0%';
-                    break;
-                case exports.TransitionSlideDirection.UP:
-                    incomingNode.style.top = '100%';
-                    exitingNode.style.top = '0%';
-                    break;
-                case exports.TransitionSlideDirection.DOWN:
-                    incomingNode.style.top = '-100%';
-                    exitingNode.style.top = '0%';
-                    break;
-            }
-            //Set the appropriate transition string
-            var transitionString = _this.$getTransitionString(_this.$slideDirection);
-            incomingNode.style.transition = transitionString;
-            exitingNode.style.transition = transitionString;
-            //Add transition listener
-            var onTransitionEnd = function () {
-                //cleanup
-                incomingNode.removeEventListener('transitionend', onTransitionEnd);
-                incomingNode.style.willChange = '';
-                incomingNode.style.transform = '';
-                incomingNode.style.pointerEvents = '';
-                incomingNode.style.transition = '';
-                incomingNode.style.top = '0px';
-                incomingNode.style.left = '0px';
-                incomingNode.style.zIndex = '';
-                exitingNode.style.willChange = '';
-                exitingNode.style.transform = '';
-                exitingNode.style.pointerEvents = '';
-                exitingNode.style.transition = '';
-                exitingNode.style.top = '0px';
-                exitingNode.style.left = '0px';
-                exitingNode.style.zIndex = '';
-                //And we're done
-                resolve();
-            };
-            incomingNode.addEventListener('transitionend', onTransitionEnd);
-            //Apply transition logic
-            setTimeout(function () {
-                switch (_this.$slideDirection) {
-                    case exports.TransitionSlideDirection.LEFT:
-                        incomingNode.style.left = '0%';
-                        exitingNode.style.left = '-100%';
-                        break;
-                    case exports.TransitionSlideDirection.RIGHT:
-                        incomingNode.style.left = '0%';
-                        exitingNode.style.left = '100%';
-                        break;
-                    case exports.TransitionSlideDirection.UP:
-                        incomingNode.style.top = '0%';
-                        exitingNode.style.top = '-100%';
-                        break;
-                    case exports.TransitionSlideDirection.DOWN:
-                        incomingNode.style.top = '0%';
-                        exitingNode.style.top = '100%';
-                        break;
-                }
-            }, 1);
-        });
-    };
-    TransitionSlide.prototype.$getTransitionString = function (direction) {
-        var dir = null;
-        var speed = "".concat(this.$slideSpeed, "s");
-        switch (direction) {
-            case exports.TransitionSlideDirection.LEFT:
-            case exports.TransitionSlideDirection.RIGHT:
-                dir = 'left';
-                break;
-            case exports.TransitionSlideDirection.UP:
-            case exports.TransitionSlideDirection.DOWN:
-                dir = 'top';
-                break;
-        }
-        return "".concat(dir, " ").concat(speed, " ").concat(this.$getSlideStyle());
-    };
-    TransitionSlide.prototype.$getSlideStyle = function () {
-        return 'ease-in-out';
-    };
-    return TransitionSlide;
-}(TransitionStrategy));
+exports.TransitionSlideDirection = void 0;
+(function (TransitionSlideDirection) {
+    TransitionSlideDirection[TransitionSlideDirection["LEFT"] = 1] = "LEFT";
+    TransitionSlideDirection[TransitionSlideDirection["RIGHT"] = 2] = "RIGHT";
+    TransitionSlideDirection[TransitionSlideDirection["UP"] = 3] = "UP";
+    TransitionSlideDirection[TransitionSlideDirection["DOWN"] = 4] = "DOWN";
+})(exports.TransitionSlideDirection || (exports.TransitionSlideDirection = {}));
+class TransitionSlide extends TransitionStrategy {
+    constructor(slideDirection, slideSpeed) {
+        super();
+        this.$slideDirection = slideDirection || exports.TransitionSlideDirection.LEFT;
+        this.$slideSpeed = slideSpeed || 0.25;
+    }
+    _execute(incoming, exiting) {
+        return new Promise((resolve, reject) => {
+            let incomingNode = incoming.getNode();
+            let exitingNode = exiting.getNode();
+            //First set initial transition CSS
+            incomingNode.style.willChange = 'transform';
+            incomingNode.style.transform = 'translate3d(0,0,0)';
+            incomingNode.style.pointerEvents = 'none';
+            incomingNode.style.zIndex = '1';
+            exitingNode.style.willChange = 'transform';
+            exitingNode.style.transform = 'translate3d(0,0,0)';
+            exitingNode.style.pointerEvents = 'none';
+            exitingNode.style.zIndex = '2';
+            switch (this.$slideDirection) {
+                case exports.TransitionSlideDirection.LEFT:
+                    incomingNode.style.left = '100%';
+                    exitingNode.style.left = '0%';
+                    break;
+                case exports.TransitionSlideDirection.RIGHT:
+                    incomingNode.style.left = '-100%';
+                    exitingNode.style.left = '0%';
+                    break;
+                case exports.TransitionSlideDirection.UP:
+                    incomingNode.style.top = '100%';
+                    exitingNode.style.top = '0%';
+                    break;
+                case exports.TransitionSlideDirection.DOWN:
+                    incomingNode.style.top = '-100%';
+                    exitingNode.style.top = '0%';
+                    break;
+            }
+            //Set the appropriate transition string
+            let transitionString = this.$getTransitionString(this.$slideDirection);
+            incomingNode.style.transition = transitionString;
+            exitingNode.style.transition = transitionString;
+            //Add transition listener
+            let onTransitionEnd = () => {
+                //cleanup
+                incomingNode.removeEventListener('transitionend', onTransitionEnd);
+                incomingNode.style.willChange = '';
+                incomingNode.style.transform = '';
+                incomingNode.style.pointerEvents = '';
+                incomingNode.style.transition = '';
+                incomingNode.style.top = '0px';
+                incomingNode.style.left = '0px';
+                incomingNode.style.zIndex = '';
+                exitingNode.style.willChange = '';
+                exitingNode.style.transform = '';
+                exitingNode.style.pointerEvents = '';
+                exitingNode.style.transition = '';
+                exitingNode.style.top = '0px';
+                exitingNode.style.left = '0px';
+                exitingNode.style.zIndex = '';
+                //And we're done
+                resolve();
+            };
+            incomingNode.addEventListener('transitionend', onTransitionEnd);
+            //Apply transition logic
+            setTimeout(() => {
+                switch (this.$slideDirection) {
+                    case exports.TransitionSlideDirection.LEFT:
+                        incomingNode.style.left = '0%';
+                        exitingNode.style.left = '-100%';
+                        break;
+                    case exports.TransitionSlideDirection.RIGHT:
+                        incomingNode.style.left = '0%';
+                        exitingNode.style.left = '100%';
+                        break;
+                    case exports.TransitionSlideDirection.UP:
+                        incomingNode.style.top = '0%';
+                        exitingNode.style.top = '-100%';
+                        break;
+                    case exports.TransitionSlideDirection.DOWN:
+                        incomingNode.style.top = '0%';
+                        exitingNode.style.top = '100%';
+                        break;
+                }
+            }, 1);
+        });
+    }
+    $getTransitionString(direction) {
+        let dir = null;
+        let speed = `${this.$slideSpeed}s`;
+        switch (direction) {
+            case exports.TransitionSlideDirection.LEFT:
+            case exports.TransitionSlideDirection.RIGHT:
+                dir = 'left';
+                break;
+            case exports.TransitionSlideDirection.UP:
+            case exports.TransitionSlideDirection.DOWN:
+                dir = 'top';
+                break;
+        }
+        return `${dir} ${speed} ${this.$getSlideStyle()}`;
+    }
+    $getSlideStyle() {
+        return 'ease-in-out';
+    }
+}
 
 var name = "@breautek/router";
-var version = "3.0.0";
+var version = "4.0.0";
 var description = "An alternate react router.";
 var main = "dist/router.js";
 var types = "dist/src/api.d.ts";
@@ -1835,12 +1028,10 @@ var publishConfig = {
 var scripts = {
 	test: "jest",
 	lint: "eslint --ext .ts,.tsx '?(src|spec)/**/*.?(ts|tsx)' --cache",
-	build: "rollup -c rollup.config.js",
+	build: "rollup -c rollup.config.js --bundleConfigAsCjs",
 	"publish-beta": "npm publish --tag beta",
 	prepublishOnly: "npm run build",
-	changelog: "auto-changelog --output CHANGELOG.md -p --release-summary --ignore-commit-pattern chore",
-	docs: "typedoc --excludePrivate --includeVersion -readme ./README.md --out ./docs ./src/api.ts",
-	version: "npm run-script build && npm run-script docs && npm run changelog && git add CHANGELOG.md docs && git commit -m 'chore: changelog'",
+	version: "npm run-script build",
 	postversion: "git push && git push --tags"
 };
 var repository = {
@@ -1858,51 +1049,37 @@ var author = "norman@normanbreau.com";
 var license = "MIT";
 var homepage = "https://github.com/breautek/router";
 var peerDependencies = {
-	react: ">=16.9.0 <17.0.0",
-	"react-dom": ">=16.9.0 <17.0.0"
+	react: "16.x || 17.x || 18.x",
+	"react-dom": "16.x || 17.x || 18.x"
 };
 var devDependencies = {
-	"@babel/core": "7.18.5",
-	"@babel/plugin-syntax-dynamic-import": "7.8.3",
-	"@babel/preset-env": "7.18.2",
-	"@babel/preset-react": "7.17.12",
-	"@babel/preset-typescript": "7.17.12",
-	"@babel/register": "7.17.7",
-	"@rollup/plugin-babel": "5.3.1",
-	"@rollup/plugin-commonjs": "22.0.0",
-	"@rollup/plugin-json": "4.1.0",
-	"@rollup/plugin-node-resolve": "13.3.0",
-	"@types/enzyme": "3.10.12",
-	"@types/enzyme-adapter-react-16": "1.0.6",
-	"@types/jest": "27.5.1",
-	"@types/react": "16.14.4",
-	"@types/react-dom": "16.9.11",
-	"@types/react-test-renderer": "17.0.1",
-	"@typescript-eslint/eslint-plugin": "5.29.0",
-	"@typescript-eslint/parser": "5.29.0",
-	ajv: "8.11.0",
-	"auto-changelog": "2.4.0",
-	"babel-jest": "27.5.1",
-	enzyme: "3.11.0",
-	"enzyme-adapter-react-16": "1.15.6",
-	eslint: "8.18.0",
-	"eslint-plugin-react": "7.30.0",
-	glob: "8.0.3",
+	"@rollup/plugin-commonjs": "25.0.3",
+	"@rollup/plugin-json": "6.0.0",
+	"@rollup/plugin-node-resolve": "15.1.0",
+	"@testing-library/jest-dom": "5.16.5",
+	"@testing-library/react": "14.0.0",
+	"@types/jest": "29.5.3",
+	"@types/react": "18.2.15",
+	"@types/react-dom": "18.2.7",
+	"@typescript-eslint/eslint-plugin": "6.1.0",
+	"@typescript-eslint/parser": "6.1.0",
+	ajv: "8.12.0",
+	eslint: "8.45.0",
+	"eslint-plugin-react": "7.32.2",
+	glob: "10.3.3",
 	"ignore-styles": "5.0.1",
-	jest: "27.5.1",
-	"node-sass": "7.0.1",
-	react: "16.14.0",
-	"react-dom": "16.14.0",
-	"regenerator-runtime": "0.13.9",
-	rollup: "2.75.7",
+	jest: "29.6.1",
+	"jest-environment-jsdom": "29.6.1",
+	"node-sass": "9.0.0",
+	react: "18.2.0",
+	"react-dom": "18.2.0",
+	rollup: "3.26.3",
 	"rollup-plugin-progress": "1.1.2",
-	"rollup-plugin-sass": "1.2.12",
-	"rollup-plugin-typescript2": "0.32.1",
-	"ts-jest": "27.1.3",
-	"ts-node": "10.8.1",
-	typedoc: "0.22.17",
-	"typedoc-plugin-markdown": "3.12.1",
-	typescript: "4.6.4"
+	"rollup-plugin-sass": "1.12.19",
+	"rollup-plugin-typescript2": "0.35.0",
+	"ts-jest": "29.1.1",
+	"ts-node": "10.9.1",
+	typescript: "5.1.6"
 };
 var packageInfo = {
 	name: name,
@@ -1922,7 +1099,7 @@ var packageInfo = {
 	devDependencies: devDependencies
 };
 
-var VERSION = packageInfo.version;
+const VERSION = packageInfo.version;
 
 exports.DefaultStrategy = DefaultStrategy;
 exports.EVENT_URL_CHANGE = EVENT_URL_CHANGE;