npm - @sparkle-learning/core - Versions diffs - 0.0.27 → 0.0.30 - Mend

@sparkle-learning/core 0.0.27 → 0.0.30

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (697) hide show

package/dist/cjs/ion-router.cjs.entry.js CHANGED Viewed

@@ -2,48 +2,38 @@
 Object.defineProperty(exports, '__esModule', { value: true });
-const index = require('./index-fbf4d3bf.js');
-const helpers = require('./helpers-26770c32.js');
+const index = require('./index-bae2a754.js');
+const helpers = require('./helpers-7e28976c.js');
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
 const ROUTER_INTENT_NONE = 'root';
 const ROUTER_INTENT_FORWARD = 'forward';
 const ROUTER_INTENT_BACK = 'back';
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
+/** Join the non empty segments with "/". */
 const generatePath = (segments) => {
   const path = segments
     .filter(s => s.length > 0)
     .join('/');
   return '/' + path;
 };
-const chainToPath = (chain) => {
-  const path = [];
-  for (const route of chain) {
-    for (const segment of route.path) {
-      if (segment[0] === ':') {
-        const param = route.params && route.params[segment.slice(1)];
-        if (!param) {
-          return null;
-        }
-        path.push(param);
-      }
-      else if (segment !== '') {
-        path.push(segment);
-      }
-    }
-  }
-  return path;
-};
-const writePath = (history, root, useHash, path, direction, state, queryString) => {
-  let url = generatePath([
-    ...parsePath(root),
-    ...path
-  ]);
+const generateUrl = (segments, useHash, queryString) => {
+  let url = generatePath(segments);
   if (useHash) {
     url = '#' + url;
   }
   if (queryString !== undefined) {
-    url = url + '?' + queryString;
+    url += '?' + queryString;
   }
+  return url;
+};
+const writeSegments = (history, root, useHash, segments, direction, state, queryString) => {
+  const url = generateUrl([...parsePath(root).segments, ...segments], useHash, queryString);
   if (direction === ROUTER_INTENT_FORWARD) {
     history.pushState(state, '', url);
   }
@@ -51,58 +41,95 @@ const writePath = (history, root, useHash, path, direction, state, queryString)
     history.replaceState(state, '', url);
   }
 };
-const removePrefix = (prefix, path) => {
-  if (prefix.length > path.length) {
+/**
+ * Transforms a chain to a list of segments.
+ *
+ * Notes:
+ * - parameter segments of the form :param are replaced with their value,
+ * - null is returned when a value is missing for any parameter segment.
+ */
+const chainToSegments = (chain) => {
+  const segments = [];
+  for (const route of chain) {
+    for (const segment of route.segments) {
+      if (segment[0] === ':') {
+        const param = route.params && route.params[segment.slice(1)];
+        if (!param) {
+          return null;
+        }
+        segments.push(param);
+      }
+      else if (segment !== '') {
+        segments.push(segment);
+      }
+    }
+  }
+  return segments;
+};
+/**
+ * Removes the prefix segments from the path segments.
+ *
+ * Return:
+ * - null when the path segments do not start with the passed prefix,
+ * - the path segments after the prefix otherwise.
+ */
+const removePrefix = (prefix, segments) => {
+  if (prefix.length > segments.length) {
     return null;
   }
   if (prefix.length <= 1 && prefix[0] === '') {
-    return path;
+    return segments;
   }
   for (let i = 0; i < prefix.length; i++) {
-    if (prefix[i].length > 0 && prefix[i] !== path[i]) {
+    if (prefix[i] !== segments[i]) {
       return null;
     }
   }
-  if (path.length === prefix.length) {
+  if (segments.length === prefix.length) {
     return [''];
   }
-  return path.slice(prefix.length);
+  return segments.slice(prefix.length);
 };
-const readPath = (loc, root, useHash) => {
-  let pathname = loc.pathname;
-  if (useHash) {
-    const hash = loc.hash;
-    pathname = (hash[0] === '#')
-      ? hash.slice(1)
-      : '';
-  }
-  const prefix = parsePath(root);
-  const path = parsePath(pathname);
-  return removePrefix(prefix, path);
+const readSegments = (loc, root, useHash) => {
+  const prefix = parsePath(root).segments;
+  const pathname = useHash ? loc.hash.slice(1) : loc.pathname;
+  const segments = parsePath(pathname).segments;
+  return removePrefix(prefix, segments);
 };
+/**
+ * Parses the path to:
+ * - segments an array of '/' separated parts,
+ * - queryString (undefined when no query string).
+ */
 const parsePath = (path) => {
-  if (path == null) {
-    return [''];
-  }
-  const removeQueryString = path.split('?')[0];
-  const segments = removeQueryString.split('/')
-    .map(s => s.trim())
-    .filter(s => s.length > 0);
-  if (segments.length === 0) {
-    return [''];
-  }
-  else {
-    return segments;
+  let segments = [''];
+  let queryString;
+  if (path != null) {
+    const qsStart = path.indexOf('?');
+    if (qsStart > -1) {
+      queryString = path.substring(qsStart + 1);
+      path = path.substring(0, qsStart);
+    }
+    segments = path.split('/')
+      .map(s => s.trim())
+      .filter(s => s.length > 0);
+    if (segments.length === 0) {
+      segments = [''];
+    }
   }
+  return { segments, queryString };
 };
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
 const printRoutes = (routes) => {
   console.group(`[ion-core] ROUTES[${routes.length}]`);
   for (const chain of routes) {
-    const path = [];
-    chain.forEach(r => path.push(...r.path));
+    const segments = [];
+    chain.forEach(r => segments.push(...r.segments));
     const ids = chain.map(r => r.id);
-    console.debug(`%c ${generatePath(path)}`, 'font-weight: bold; padding-left: 20px', '=>\t', `(${ids.join(', ')})`);
+    console.debug(`%c ${generatePath(segments)}`, 'font-weight: bold; padding-left: 20px', '=>\t', `(${ids.join(', ')})`);
   }
   console.groupEnd();
 };
@@ -110,12 +137,23 @@ const printRedirects = (redirects) => {
   console.group(`[ion-core] REDIRECTS[${redirects.length}]`);
   for (const redirect of redirects) {
     if (redirect.to) {
-      console.debug('FROM: ', `$c ${generatePath(redirect.from)}`, 'font-weight: bold', ' TO: ', `$c ${generatePath(redirect.to)}`, 'font-weight: bold');
+      console.debug('FROM: ', `$c ${generatePath(redirect.from)}`, 'font-weight: bold', ' TO: ', `$c ${generatePath(redirect.to.segments)}`, 'font-weight: bold');
     }
   }
   console.groupEnd();
 };
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
+/**
+ * Activates the passed route chain.
+ *
+ * There must be exactly one outlet per route entry in the chain.
+ *
+ * The methods calls setRouteId on each of the outlet with the corresponding route entry in the chain.
+ * setRouteId will create or select the view in the outlet.
+ */
 const writeNavState = async (root, chain, direction, index, changed = false, animation) => {
   try {
     // find next navigation outlet in the DOM
@@ -124,7 +162,7 @@ const writeNavState = async (root, chain, direction, index, changed = false, ani
     if (index >= chain.length || !outlet) {
       return changed;
     }
-    await outlet.componentOnReady();
+    await new Promise(resolve => helpers.componentOnReady(outlet, resolve));
     const route = chain[index];
     const result = await outlet.setRouteId(route.id, route.params, direction, animation);
     // if the outlet changed the page, reset navigation to neutral (no direction)
@@ -147,23 +185,21 @@ const writeNavState = async (root, chain, direction, index, changed = false, ani
     return false;
   }
 };
+/**
+ * Recursively walks the outlet in the DOM.
+ *
+ * The function returns a list of RouteID corresponding to each of the outlet and the last outlet without a RouteID.
+ */
 const readNavState = async (root) => {
   const ids = [];
   let outlet;
   let node = root;
-  // tslint:disable-next-line:no-constant-condition
-  while (true) {
-    outlet = searchNavNode(node);
-    if (outlet) {
-      const id = await outlet.getRouteId();
-      if (id) {
-        node = id.element;
-        id.element = undefined;
-        ids.push(id);
-      }
-      else {
-        break;
-      }
+  while (outlet = searchNavNode(node)) {
+    const id = await outlet.getRouteId();
+    if (id) {
+      node = id.element;
+      id.element = undefined;
+      ids.push(id);
     }
     else {
       break;
@@ -176,27 +212,38 @@ const waitUntilNavNode = () => {
     return Promise.resolve();
   }
   return new Promise(resolve => {
-    window.addEventListener('ionNavWillLoad', resolve, { once: true });
+    window.addEventListener('ionNavWillLoad', () => resolve(), { once: true });
   });
 };
-const QUERY = ':not([no-router]) ion-nav, :not([no-router]) ion-tabs, :not([no-router]) ion-router-outlet';
+/** Selector for all the outlets supported by the router. */
+const OUTLET_SELECTOR = ':not([no-router]) ion-nav, :not([no-router]) ion-tabs, :not([no-router]) ion-router-outlet';
 const searchNavNode = (root) => {
   if (!root) {
     return undefined;
   }
-  if (root.matches(QUERY)) {
+  if (root.matches(OUTLET_SELECTOR)) {
     return root;
   }
-  const outlet = root.querySelector(QUERY);
-  return outlet ? outlet : undefined;
+  const outlet = root.querySelector(OUTLET_SELECTOR);
+  return outlet !== null && outlet !== void 0 ? outlet : undefined;
 };
-const matchesRedirect = (input, route) => {
-  const { from, to } = route;
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
+/**
+ * Returns whether the given redirect matches the given path segments.
+ *
+ * A redirect matches when the segments of the path and redirect.from are equal.
+ * Note that segments are only checked until redirect.from contains a '*' which matches any path segment.
+ * The path ['some', 'path', 'to', 'page'] matches both ['some', 'path', 'to', 'page'] and ['some', 'path', '*'].
+ */
+const matchesRedirect = (segments, redirect) => {
+  const { from, to } = redirect;
   if (to === undefined) {
     return false;
   }
-  if (from.length > input.length) {
+  if (from.length > segments.length) {
     return false;
   }
   for (let i = 0; i < from.length; i++) {
@@ -204,37 +251,83 @@ const matchesRedirect = (input, route) => {
     if (expected === '*') {
       return true;
     }
-    if (expected !== input[i]) {
+    if (expected !== segments[i]) {
       return false;
     }
   }
-  return from.length === input.length;
+  return from.length === segments.length;
 };
-const routeRedirect = (path, routes) => {
-  return routes.find(route => matchesRedirect(path, route));
+/** Returns the first redirect matching the path segments or undefined when no match found. */
+const findRouteRedirect = (segments, redirects) => {
+  return redirects.find(redirect => matchesRedirect(segments, redirect));
 };
 const matchesIDs = (ids, chain) => {
   const len = Math.min(ids.length, chain.length);
-  let i = 0;
-  for (; i < len; i++) {
-    if (ids[i].toLowerCase() !== chain[i].id) {
+  let score = 0;
+  for (let i = 0; i < len; i++) {
+    const routeId = ids[i];
+    const routeChain = chain[i];
+    // Skip results where the route id does not match the chain at the same index
+    if (routeId.id.toLowerCase() !== routeChain.id) {
       break;
     }
+    if (routeId.params) {
+      const routeIdParams = Object.keys(routeId.params);
+      // Only compare routes with the chain that have the same number of parameters.
+      if (routeIdParams.length === routeChain.segments.length) {
+        // Maps the route's params into a path based on the path variable names,
+        // to compare against the route chain format.
+        //
+        // Before:
+        // ```ts
+        // {
+        //  params: {
+        //    s1: 'a',
+        //    s2: 'b'
+        //  }
+        // }
+        // ```
+        //
+        // After:
+        // ```ts
+        // [':s1',':s2']
+        // ```
+        //
+        const pathWithParams = routeIdParams.map(key => `:${key}`);
+        for (let j = 0; j < pathWithParams.length; j++) {
+          // Skip results where the path variable is not a match
+          if (pathWithParams[j].toLowerCase() !== routeChain.segments[j]) {
+            break;
+          }
+          // Weight path matches for the same index higher.
+          score++;
+        }
+      }
+    }
+    // Weight id matches
+    score++;
   }
-  return i;
+  return score;
 };
-const matchesPath = (inputPath, chain) => {
-  const segments = new RouterSegments(inputPath);
+/**
+ * Matches the segments against the chain.
+ *
+ * Returns:
+ * - null when there is no match,
+ * - a chain with the params properties updated with the parameter segments on match.
+ */
+const matchesSegments = (segments, chain) => {
+  const inputSegments = new RouterSegments(segments);
   let matchesDefault = false;
   let allparams;
   for (let i = 0; i < chain.length; i++) {
-    const path = chain[i].path;
-    if (path[0] === '') {
+    const chainSegments = chain[i].segments;
+    if (chainSegments[0] === '') {
       matchesDefault = true;
     }
     else {
-      for (const segment of path) {
-        const data = segments.next();
+      for (const segment of chainSegments) {
+        const data = inputSegments.next();
         // data param
         if (segment[0] === ':') {
           if (data === '') {
@@ -252,7 +345,7 @@ const matchesPath = (inputPath, chain) => {
     }
   }
   const matches = (matchesDefault)
-    ? matchesDefault === (segments.next() === '')
+    ? matchesDefault === (inputSegments.next() === '')
     : true;
   if (!matches) {
     return null;
@@ -260,7 +353,7 @@ const matchesPath = (inputPath, chain) => {
   if (allparams) {
     return chain.map((route, i) => ({
       id: route.id,
-      path: route.path,
+      segments: route.segments,
       params: mergeParams(route.params, allparams[i]),
       beforeEnter: route.beforeEnter,
       beforeLeave: route.beforeLeave
@@ -268,62 +361,84 @@ const matchesPath = (inputPath, chain) => {
   }
   return chain;
 };
+/**
+ * Merges the route parameter objects.
+ * Returns undefined when both parameters are undefined.
+ */
 const mergeParams = (a, b) => {
-  if (!a && b) {
-    return b;
-  }
-  else if (a && !b) {
-    return a;
-  }
-  else if (a && b) {
-    return Object.assign(Object.assign({}, a), b);
-  }
-  return undefined;
+  return a || b ? Object.assign(Object.assign({}, a), b) : undefined;
 };
-const routerIDsToChain = (ids, chains) => {
+/**
+ * Finds the best match for the ids in the chains.
+ *
+ * Returns the best match or null when no match is found.
+ * When a chain is returned the parameters are updated from the RouteIDs.
+ * That is they contain both the componentProps of the <ion-route> and the parameter segment.
+ */
+const findChainForIDs = (ids, chains) => {
   let match = null;
   let maxMatches = 0;
-  const plainIDs = ids.map(i => i.id);
   for (const chain of chains) {
-    const score = matchesIDs(plainIDs, chain);
+    const score = matchesIDs(ids, chain);
     if (score > maxMatches) {
       match = chain;
       maxMatches = score;
     }
   }
   if (match) {
-    return match.map((route, i) => ({
-      id: route.id,
-      path: route.path,
-      params: mergeParams(route.params, ids[i] && ids[i].params)
-    }));
+    return match.map((route, i) => {
+      var _a;
+      return ({
+        id: route.id,
+        segments: route.segments,
+        params: mergeParams(route.params, (_a = ids[i]) === null || _a === void 0 ? void 0 : _a.params)
+      });
+    });
   }
   return null;
 };
-const routerPathToChain = (path, chains) => {
+/**
+ * Finds the best match for the segments in the chains.
+ *
+ * Returns the best match or null when no match is found.
+ * When a chain is returned the parameters are updated from the segments.
+ * That is they contain both the componentProps of the <ion-route> and the parameter segments.
+ */
+const findChainForSegments = (segments, chains) => {
   let match = null;
-  let matches = 0;
+  let bestScore = 0;
   for (const chain of chains) {
-    const matchedChain = matchesPath(path, chain);
+    const matchedChain = matchesSegments(segments, chain);
     if (matchedChain !== null) {
       const score = computePriority(matchedChain);
-      if (score > matches) {
-        matches = score;
+      if (score > bestScore) {
+        bestScore = score;
         match = matchedChain;
       }
     }
   }
   return match;
 };
+/**
+ * Computes the priority of a chain.
+ *
+ * Parameter segments are given a lower priority over fixed segments.
+ *
+ * Considering the following 2 chains matching the path /path/to/page:
+ * - /path/to/:where
+ * - /path/to/page
+ *
+ * The second one will be given a higher priority because "page" is a fixed segment (vs ":where", a parameter segment).
+ */
 const computePriority = (chain) => {
   let score = 1;
   let level = 1;
   for (const route of chain) {
-    for (const path of route.path) {
-      if (path[0] === ':') {
+    for (const segment of route.segments) {
+      if (segment[0] === ':') {
         score += Math.pow(1, level);
       }
-      else if (path !== '') {
+      else if (segment !== '') {
         score += Math.pow(2, level);
       }
       level++;
@@ -332,80 +447,100 @@ const computePriority = (chain) => {
   return score;
 };
 class RouterSegments {
-  constructor(path) {
-    this.path = path.slice();
+  constructor(segments) {
+    this.segments = segments.slice();
   }
   next() {
-    if (this.path.length > 0) {
-      return this.path.shift();
+    if (this.segments.length > 0) {
+      return this.segments.shift();
     }
     return '';
   }
 }
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
+const readProp = (el, prop) => {
+  if (prop in el) {
+    return el[prop];
+  }
+  if (el.hasAttribute(prop)) {
+    return el.getAttribute(prop);
+  }
+  return null;
+};
+/**
+ * Extracts the redirects (that is <ion-route-redirect> elements inside the root).
+ *
+ * The redirects are returned as a list of RouteRedirect.
+ */
 const readRedirects = (root) => {
   return Array.from(root.children)
     .filter(el => el.tagName === 'ION-ROUTE-REDIRECT')
     .map(el => {
     const to = readProp(el, 'to');
     return {
-      from: parsePath(readProp(el, 'from')),
+      from: parsePath(readProp(el, 'from')).segments,
       to: to == null ? undefined : parsePath(to),
     };
   });
 };
+/**
+ * Extracts all the routes (that is <ion-route> elements inside the root).
+ *
+ * The routes are returned as a list of chains - the flattened tree.
+ */
 const readRoutes = (root) => {
   return flattenRouterTree(readRouteNodes(root));
 };
-const readRouteNodes = (root, node = root) => {
+/**
+ * Reads the route nodes as a tree modeled after the DOM tree of <ion-route> elements.
+ *
+ * Note: routes without a component are ignored together with their children.
+ */
+const readRouteNodes = (node) => {
   return Array.from(node.children)
     .filter(el => el.tagName === 'ION-ROUTE' && el.component)
     .map(el => {
     const component = readProp(el, 'component');
-    if (component == null) {
-      throw new Error('component missing in ion-route');
-    }
     return {
-      path: parsePath(readProp(el, 'url')),
+      segments: parsePath(readProp(el, 'url')).segments,
       id: component.toLowerCase(),
       params: el.componentProps,
       beforeLeave: el.beforeLeave,
       beforeEnter: el.beforeEnter,
-      children: readRouteNodes(root, el)
+      children: readRouteNodes(el)
     };
   });
 };
-const readProp = (el, prop) => {
-  if (prop in el) {
-    return el[prop];
-  }
-  if (el.hasAttribute(prop)) {
-    return el.getAttribute(prop);
-  }
-  return null;
-};
+/**
+ * Flattens a RouterTree in a list of chains.
+ *
+ * Each chain represents a path from the root node to a terminal node.
+ */
 const flattenRouterTree = (nodes) => {
-  const routes = [];
+  const chains = [];
   for (const node of nodes) {
-    flattenNode([], routes, node);
+    flattenNode([], chains, node);
   }
-  return routes;
+  return chains;
 };
-const flattenNode = (chain, routes, node) => {
-  const s = chain.slice();
-  s.push({
-    id: node.id,
-    path: node.path,
-    params: node.params,
-    beforeLeave: node.beforeLeave,
-    beforeEnter: node.beforeEnter
-  });
+/** Flattens a route node recursively and push each branch to the chains list. */
+const flattenNode = (chain, chains, node) => {
+  chain = [...chain, {
+      id: node.id,
+      segments: node.segments,
+      params: node.params,
+      beforeLeave: node.beforeLeave,
+      beforeEnter: node.beforeEnter
+    }];
   if (node.children.length === 0) {
-    routes.push(s);
+    chains.push(chain);
     return;
   }
-  for (const sub of node.children) {
-    flattenNode(s, routes, sub);
+  for (const child of node.children) {
+    flattenNode(chain, chains, child);
   }
 };
@@ -419,9 +554,8 @@ const Router = class {
     this.state = 0;
     this.lastState = 0;
     /**
-     * By default `ion-router` will match the routes at the root path ("/").
-     * That can be changed when
-     *
+     * The root path to use when matching URLs. By default, this is set to "/", but you can specify
+     * an alternate prefix for all URL paths.
      */
     this.root = '/';
     /**
@@ -434,17 +568,26 @@ const Router = class {
      * Usually "hash-less" navigation works better for SEO and it's more user friendly too, but it might
      * requires additional server-side configuration in order to properly work.
      *
-     * On the otherside hash-navigation is much easier to deploy, it even works over the file protocol.
+     * On the other side hash-navigation is much easier to deploy, it even works over the file protocol.
      *
      * By default, this property is `true`, change to `false` to allow hash-less URLs.
      */
     this.useHash = true;
   }
   async componentWillLoad() {
-    console.debug('[ion-router] router will load');
     await waitUntilNavNode();
-    console.debug('[ion-router] found nav');
-    await this.onRoutesChanged();
+    const canProceed = await this.runGuards(this.getSegments());
+    if (canProceed !== true) {
+      if (typeof canProceed === 'object') {
+        const { redirect } = canProceed;
+        const path = parsePath(redirect);
+        this.setSegments(path.segments, ROUTER_INTENT_NONE, path.queryString);
+        await this.writeNavStateRoot(path.segments, ROUTER_INTENT_NONE);
+      }
+    }
+    else {
+      await this.onRoutesChanged();
+    }
   }
   componentDidLoad() {
     window.addEventListener('ionRouteRedirectChanged', helpers.debounce(this.onRedirectChanged.bind(this), 10));
@@ -452,16 +595,17 @@ const Router = class {
   }
   async onPopState() {
     const direction = this.historyDirection();
-    let path = this.getPath();
-    const canProceed = await this.runGuards(path);
+    let segments = this.getSegments();
+    const canProceed = await this.runGuards(segments);
     if (canProceed !== true) {
       if (typeof canProceed === 'object') {
-        path = parsePath(canProceed.redirect);
+        segments = parsePath(canProceed.redirect).segments;
+      }
+      else {
+        return false;
       }
-      return false;
     }
-    console.debug('[ion-router] URL changed -> update nav', path, direction);
-    return this.writeNavStateRoot(path, direction);
+    return this.writeNavStateRoot(segments, direction);
   }
   onBackButton(ev) {
     ev.detail.register(0, processNextHandler => {
@@ -483,42 +627,39 @@ const Router = class {
     return true;
   }
   /**
-   * Navigate to the specified URL.
+   * Navigate to the specified path.
    *
-   * @param url The url to navigate to.
+   * @param path The path to navigate to.
    * @param direction The direction of the animation. Defaults to `"forward"`.
    */
-  async push(url, direction = 'forward', animation) {
-    if (url.startsWith('.')) {
-      url = (new URL(url, window.location.href)).pathname;
+  async push(path, direction = 'forward', animation) {
+    var _a;
+    if (path.startsWith('.')) {
+      const currentPath = (_a = this.previousPath) !== null && _a !== void 0 ? _a : '/';
+      // Convert currentPath to an URL by pre-pending a protocol and a host to resolve the relative path.
+      const url = new URL(path, `https://host/${currentPath}`);
+      path = url.pathname + url.search;
     }
-    console.debug('[ion-router] URL pushed -> updating nav', url, direction);
-    let path = parsePath(url);
-    let queryString = url.split('?')[1];
-    const canProceed = await this.runGuards(path);
+    let parsedPath = parsePath(path);
+    const canProceed = await this.runGuards(parsedPath.segments);
     if (canProceed !== true) {
       if (typeof canProceed === 'object') {
-        path = parsePath(canProceed.redirect);
-        queryString = canProceed.redirect.split('?')[1];
+        parsedPath = parsePath(canProceed.redirect);
       }
       else {
         return false;
       }
     }
-    this.setPath(path, direction, queryString);
-    return this.writeNavStateRoot(path, direction, animation);
+    this.setSegments(parsedPath.segments, direction, parsedPath.queryString);
+    return this.writeNavStateRoot(parsedPath.segments, direction, animation);
   }
-  /**
-   * Go back to previous page in the window.history.
-   */
+  /** Go back to previous page in the window.history. */
   back() {
     window.history.back();
     return Promise.resolve(this.waitPromise);
   }
   /** @internal */
   async printDebug() {
-    console.debug('CURRENT PATH', this.getPath());
-    console.debug('PREVIOUS PATH', this.previousPath);
     printRoutes(readRoutes(this.el));
     printRedirects(readRedirects(this.el));
   }
@@ -530,35 +671,37 @@ const Router = class {
     }
     const { ids, outlet } = await readNavState(window.document.body);
     const routes = readRoutes(this.el);
-    const chain = routerIDsToChain(ids, routes);
+    const chain = findChainForIDs(ids, routes);
     if (!chain) {
       console.warn('[ion-router] no matching URL for ', ids.map(i => i.id));
       return false;
     }
-    const path = chainToPath(chain);
-    if (!path) {
+    const segments = chainToSegments(chain);
+    if (!segments) {
       console.warn('[ion-router] router could not match path because some required param is missing');
       return false;
     }
-    console.debug('[ion-router] nav changed -> update URL', ids, path);
-    this.setPath(path, direction);
-    await this.safeWriteNavState(outlet, chain, ROUTER_INTENT_NONE, path, null, ids.length);
+    this.setSegments(segments, direction);
+    await this.safeWriteNavState(outlet, chain, ROUTER_INTENT_NONE, segments, null, ids.length);
     return true;
   }
+  /** This handler gets called when a `ion-route-redirect` component is added to the DOM or if the from or to property of such node changes. */
   onRedirectChanged() {
-    const path = this.getPath();
-    if (path && routeRedirect(path, readRedirects(this.el))) {
-      this.writeNavStateRoot(path, ROUTER_INTENT_NONE);
+    const segments = this.getSegments();
+    if (segments && findRouteRedirect(segments, readRedirects(this.el))) {
+      this.writeNavStateRoot(segments, ROUTER_INTENT_NONE);
     }
   }
+  /** This handler gets called when a `ion-route` component is added to the DOM or if the from or to property of such node changes. */
   onRoutesChanged() {
-    return this.writeNavStateRoot(this.getPath(), ROUTER_INTENT_NONE);
+    return this.writeNavStateRoot(this.getSegments(), ROUTER_INTENT_NONE);
   }
   historyDirection() {
+    var _a;
     const win = window;
     if (win.history.state === null) {
       this.state++;
-      win.history.replaceState(this.state, win.document.title, win.document.location && win.document.location.href);
+      win.history.replaceState(this.state, win.document.title, (_a = win.document.location) === null || _a === void 0 ? void 0 : _a.href);
     }
     const state = win.history.state;
     const lastState = this.lastState;
@@ -566,42 +709,41 @@ const Router = class {
     if (state > lastState || (state >= lastState && lastState > 0)) {
       return ROUTER_INTENT_FORWARD;
     }
-    else if (state < lastState) {
+    if (state < lastState) {
       return ROUTER_INTENT_BACK;
     }
-    else {
-      return ROUTER_INTENT_NONE;
-    }
+    return ROUTER_INTENT_NONE;
   }
-  async writeNavStateRoot(path, direction, animation) {
-    if (!path) {
+  async writeNavStateRoot(segments, direction, animation) {
+    if (!segments) {
       console.error('[ion-router] URL is not part of the routing set');
       return false;
     }
     // lookup redirect rule
     const redirects = readRedirects(this.el);
-    const redirect = routeRedirect(path, redirects);
+    const redirect = findRouteRedirect(segments, redirects);
     let redirectFrom = null;
     if (redirect) {
-      this.setPath(redirect.to, direction);
+      const { segments: toSegments, queryString } = redirect.to;
+      this.setSegments(toSegments, direction, queryString);
       redirectFrom = redirect.from;
-      path = redirect.to;
+      segments = toSegments;
     }
     // lookup route chain
     const routes = readRoutes(this.el);
-    const chain = routerPathToChain(path, routes);
+    const chain = findChainForSegments(segments, routes);
     if (!chain) {
       console.error('[ion-router] the path does not match any route');
       return false;
     }
     // write DOM give
-    return this.safeWriteNavState(document.body, chain, direction, path, redirectFrom, 0, animation);
+    return this.safeWriteNavState(document.body, chain, direction, segments, redirectFrom, 0, animation);
   }
-  async safeWriteNavState(node, chain, direction, path, redirectFrom, index = 0, animation) {
+  async safeWriteNavState(node, chain, direction, segments, redirectFrom, index = 0, animation) {
     const unlock = await this.lock();
     let changed = false;
     try {
-      changed = await this.writeNavState(node, chain, direction, path, redirectFrom, index, animation);
+      changed = await this.writeNavState(node, chain, direction, segments, redirectFrom, index, animation);
     }
     catch (e) {
       console.error(e);
@@ -618,62 +760,64 @@ const Router = class {
     }
     return resolve;
   }
-  async runGuards(to = this.getPath(), from = parsePath(this.previousPath)) {
+  /**
+   * Executes the beforeLeave hook of the source route and the beforeEnter hook of the target route if they exist.
+   *
+   * When the beforeLeave hook does not return true (to allow navigating) then that value is returned early and the beforeEnter is executed.
+   * Otherwise the beforeEnterHook hook of the target route is executed.
+   */
+  async runGuards(to = this.getSegments(), from) {
+    if (from === undefined) {
+      from = parsePath(this.previousPath).segments;
+    }
     if (!to || !from) {
       return true;
     }
     const routes = readRoutes(this.el);
-    const toChain = routerPathToChain(to, routes);
-    const fromChain = routerPathToChain(from, routes);
-    const beforeEnterHook = toChain && toChain[toChain.length - 1].beforeEnter;
+    const fromChain = findChainForSegments(from, routes);
     const beforeLeaveHook = fromChain && fromChain[fromChain.length - 1].beforeLeave;
     const canLeave = beforeLeaveHook ? await beforeLeaveHook() : true;
     if (canLeave === false || typeof canLeave === 'object') {
       return canLeave;
     }
-    const canEnter = beforeEnterHook ? await beforeEnterHook() : true;
-    if (canEnter === false || typeof canEnter === 'object') {
-      return canEnter;
-    }
-    return true;
+    const toChain = findChainForSegments(to, routes);
+    const beforeEnterHook = toChain && toChain[toChain.length - 1].beforeEnter;
+    return beforeEnterHook ? beforeEnterHook() : true;
   }
-  async writeNavState(node, chain, direction, path, redirectFrom, index = 0, animation) {
+  async writeNavState(node, chain, direction, segments, redirectFrom, index = 0, animation) {
     if (this.busy) {
       console.warn('[ion-router] router is busy, transition was cancelled');
       return false;
     }
     this.busy = true;
     // generate route event and emit will change
-    const routeEvent = this.routeChangeEvent(path, redirectFrom);
+    const routeEvent = this.routeChangeEvent(segments, redirectFrom);
     if (routeEvent) {
       this.ionRouteWillChange.emit(routeEvent);
     }
     const changed = await writeNavState(node, chain, direction, index, false, animation);
     this.busy = false;
-    if (changed) {
-      console.debug('[ion-router] route changed', path);
-    }
     // emit did change
     if (routeEvent) {
       this.ionRouteDidChange.emit(routeEvent);
     }
     return changed;
   }
-  setPath(path, direction, queryString) {
+  setSegments(segments, direction, queryString) {
     this.state++;
-    writePath(window.history, this.root, this.useHash, path, direction, this.state, queryString);
+    writeSegments(window.history, this.root, this.useHash, segments, direction, this.state, queryString);
   }
-  getPath() {
-    return readPath(window.location, this.root, this.useHash);
+  getSegments() {
+    return readSegments(window.location, this.root, this.useHash);
   }
-  routeChangeEvent(path, redirectFromPath) {
+  routeChangeEvent(toSegments, redirectFromSegments) {
     const from = this.previousPath;
-    const to = generatePath(path);
+    const to = generatePath(toSegments);
     this.previousPath = to;
     if (to === from) {
       return null;
     }
-    const redirectedFrom = redirectFromPath ? generatePath(redirectFromPath) : null;
+    const redirectedFrom = redirectFromSegments ? generatePath(redirectFromSegments) : null;
     return {
       from,
       redirectedFrom,