fix(router): enable matching fallback sibling routes (#437)

Fixes #284
vaadin · Feb 19, 2020 · e3a32e4 · e3a32e4
1 parent 4c13710
commit e3a32e4
Show file tree

Hide file tree

Showing 4 changed files with 73 additions and 22 deletions.
diff --git a/package.json b/package.json
@@ -51,7 +51,7 @@
   "bundlesize": [
     {
       "path": "dist/vaadin-router.min.js",
-      "maxSize": "7.7 kB"
+      "maxSize": "8 kB"
     }
   ],
   "browserslist": [

diff --git a/src/resolver/resolver.js b/src/resolver/resolver.js
@@ -32,19 +32,23 @@ function generateErrorMessage(currentContext) {
   return errorMessage;
 }
 
-function addRouteToChain(context, match) {
+function updateChainForRoute(context, match) {
   const {route, path} = match;
-  function shouldDiscardOldChain(oldChain, route) {
-    return !route.parent || !oldChain || !oldChain.length || oldChain[oldChain.length - 1].route !== route.parent;
-  }
 
   if (route && !route.__synthetic) {
     const item = {path, route};
-    if (shouldDiscardOldChain(context.chain, route)) {
-      context.chain = [item];
+    if (!context.chain) {
+      context.chain = [];
     } else {
-      context.chain.push(item);
+      // Discard old items
+      if (route.parent) {
+        let i = context.chain.length;
+        while (i-- && context.chain[i].route && context.chain[i].route !== route.parent) {
+          context.chain.pop();
+        }
+      }
     }
+    context.chain.push(item);
   }
 }
 
@@ -158,8 +162,14 @@ class Resolver {
         return Promise.reject(getNotFoundError(context));
       }
 
-      addRouteToChain(context, matches.value);
-      currentContext = Object.assign({}, context, matches.value);
+      currentContext = Object.assign(
+        currentContext
+          ? {chain: (currentContext.chain ? currentContext.chain.slice(0) : [])}
+          : {},
+        context,
+        matches.value
+      );
+      updateChainForRoute(currentContext, matches.value);
 
       return Promise.resolve(resolve(currentContext)).then(resolution => {
         if (resolution !== null && resolution !== undefined && resolution !== notFoundResult) {

diff --git a/src/router.js b/src/router.js
@@ -548,21 +548,48 @@ export class Router extends Resolver {
         const redirectsHappened = contextAfterRedirects !== contextBeforeRedirects;
         const topOfTheChainContextAfterRedirects =
           redirectsHappened ? contextAfterRedirects : topOfTheChainContextBeforeRedirects;
-        return contextAfterRedirects.next()
-          .then(nextChildContext => {
-            if (nextChildContext === null || nextChildContext === notFoundResult) {
-              const matchedPath = getPathnameForRouter(
-                getMatchedPath(contextAfterRedirects.chain),
-                contextAfterRedirects.resolver
-              );
-              if (matchedPath !== contextAfterRedirects.pathname) {
-                throw getNotFoundError(topOfTheChainContextAfterRedirects);
+
+        const matchedPath = getPathnameForRouter(
+          getMatchedPath(contextAfterRedirects.chain),
+          contextAfterRedirects.resolver
+        );
+        const isFound = (matchedPath === contextAfterRedirects.pathname);
+
+        // Recursive method to try matching more child and sibling routes
+        const findNextContextIfAny = (context, parent) => {
+          let prevResult = undefined;
+          if (parent === undefined) {
+            parent = context.route;
+          } else {
+            prevResult = null;
+          }
+          return context.next(undefined, parent, prevResult).then(nextContext => {
+            if (nextContext === null || nextContext === notFoundResult) {
+              // Next context is not found in children, ...
+              if (isFound) {
+                // ...but original context is already fully matching - use it
+                return context;
+              } else {
+                // ...and there is no full match yet - step up to check siblings
+                return findNextContextIfAny(context, context.route.parent);
               }
             }
-            return nextChildContext && nextChildContext !== notFoundResult
-              ? this.__fullyResolveChain(topOfTheChainContextAfterRedirects, nextChildContext)
-              : this.__amendWithOnBeforeCallbacks(contextAfterRedirects);
+
+            return nextContext;
           });
+        };
+
+        return findNextContextIfAny(contextAfterRedirects).then(nextContext => {
+          if (nextContext === null || nextContext === notFoundResult) {
+            throw getNotFoundError(topOfTheChainContextAfterRedirects);
+          }
+
+          return nextContext
+          && nextContext !== notFoundResult
+          && nextContext !== contextAfterRedirects
+            ? this.__fullyResolveChain(topOfTheChainContextAfterRedirects, nextContext)
+            : this.__amendWithOnBeforeCallbacks(contextAfterRedirects);
+        });
       });
   }
 

diff --git a/test/router/parent-layouts.spec.html b/test/router/parent-layouts.spec.html
@@ -194,6 +194,20 @@
         checkOutlet(['x-a', 'x-d']);
       });
 
+      it('should take next routes as fallback when children do not match', async() => {
+        router.setRoutes([
+          {path: '/a', component: 'x-a', children: [
+            {path: '/b', component: 'x-b'}
+          ]},
+          {path: '/a/c', component: 'x-fallback'}
+        ], true);
+
+        await router.render('/a/c');
+
+        verifyActiveRoutes(router, ['/a/c']);
+        checkOutlet(['x-fallback']);
+      });
+
       it('redirect property amends previous path', async() => {
         router.setRoutes([
           {path: '/a', component: 'x-a', children: [