feat(router): stateful routes

package.json

@@ -44,7 +44,8 @@
       "aurelia-history": "^1.1.0",
       "aurelia-logging": "^1.0.0",
       "aurelia-path": "^1.0.0",
-      "aurelia-route-recognizer": "^1.2.0"
+      "aurelia-route-recognizer": "^1.2.0",
+      "aurelia-templating": "^1.6.0"
     },
     "devDependencies": {
       "aurelia-pal-browser": "^1.0.0-rc.1.0.0",
@@ -59,7 +60,8 @@
     "aurelia-history": "^1.1.0",
     "aurelia-logging": "^1.0.0",
     "aurelia-path": "^1.0.0",
-    "aurelia-route-recognizer": "^1.2.0"
+    "aurelia-route-recognizer": "^1.2.0",
+    "aurelia-templating": "^1.6.0"
   },
   "devDependencies": {
     "aurelia-tools": "0.2.4",

src/navigation-instruction.js

@@ -121,15 +121,16 @@ export class NavigationInstruction {
   /**
   * Adds a viewPort instruction.
   */
-  addViewPortInstruction(viewPortName: string, strategy: string, moduleId: string, component: any): any {
+  addViewPortInstruction(viewPortName: string, strategy: string, moduleId: string, component: any, active: boolean): any {
     const config = Object.assign({}, this.lifecycleArgs[1], { currentViewPort: viewPortName });
     let viewportInstruction = this.viewPortInstructions[viewPortName] = {
       name: viewPortName,
       strategy: strategy,
       moduleId: moduleId,
       component: component,
       childRouter: component.childRouter,
-      lifecycleArgs: [].concat(this.lifecycleArgs[0], config, this.lifecycleArgs[2])
+      lifecycleArgs: [].concat(this.lifecycleArgs[0], config, this.lifecycleArgs[2]),
+      active: active
     };
 
     return viewportInstruction;
@@ -224,6 +225,9 @@ export class NavigationInstruction {
             }
           }));
         }
+      }
+      else if (viewPortInstruction.active && !viewPortInstruction.childNavigationInstruction) {
+        delaySwaps.push({viewPort, viewPortInstruction});
       } else {
         if (viewPortInstruction.childNavigationInstruction) {
           loads.push(viewPortInstruction.childNavigationInstruction._commitChanges(waitToSwap));

src/navigation-plan.js

@@ -1,4 +1,5 @@
-import { Redirect } from './navigation-commands';
+import {Redirect} from './navigation-commands';
+import {_resolveUrl} from './util';
 
 /**
 * The strategy to use when activating modules during navigation.
@@ -55,76 +56,143 @@ export function _buildNavigationPlan(instruction: NavigationInstruction, forceLi
 
   let prev = instruction.previousInstruction;
   let plan = {};
-  let defaults = instruction.router.viewPortDefaults;
+  let pending = [];
 
-  if (prev) {
-    let newParams = hasDifferentParameterValues(prev, instruction);
-    let pending = [];
+  let newParams = prev ? hasDifferentParameterValues(prev, instruction) : true;
 
+  let viewPortDefaults = Object.assign({}, instruction.router.viewPortDefaults);
+
+  if (prev && !config.explicitViewPorts) {
     for (let viewPortName in prev.viewPortInstructions) {
-      let prevViewPortInstruction = prev.viewPortInstructions[viewPortName];
-      let nextViewPortConfig = viewPortName in config.viewPorts ? config.viewPorts[viewPortName] : prevViewPortInstruction;
-      if (nextViewPortConfig.moduleId === null && viewPortName in instruction.router.viewPortDefaults) {
-        nextViewPortConfig = defaults[viewPortName];
-      }
+      delete viewPortDefaults[viewPortName.split('.')[0]];
 
-      let viewPortPlan = plan[viewPortName] = {
-        name: viewPortName,
-        config: nextViewPortConfig,
-        prevComponent: prevViewPortInstruction.component,
-        prevModuleId: prevViewPortInstruction.moduleId
-      };
-
-      if (prevViewPortInstruction.moduleId !== nextViewPortConfig.moduleId) {
-        viewPortPlan.strategy = activationStrategy.replace;
-      } else if ('determineActivationStrategy' in prevViewPortInstruction.component.viewModel) {
-        viewPortPlan.strategy = prevViewPortInstruction.component.viewModel
-          .determineActivationStrategy(...instruction.lifecycleArgs);
-      } else if (config.activationStrategy) {
-        viewPortPlan.strategy = config.activationStrategy;
-      } else if (newParams || forceLifecycleMinimum) {
-        viewPortPlan.strategy = activationStrategy.invokeLifecycle;
-      } else {
-        viewPortPlan.strategy = activationStrategy.noChange;
+      let viewPortPlan = buildViewPortPlan(instruction, instruction.config.viewPorts, forceLifecycleMinimum, newParams, viewPortName, true);
+      plan[viewPortPlan.name] = viewPortPlan.plan;
+      if (viewPortPlan.task) {
+        pending.push(viewPortPlan.task);
       }
+    }
+  }
 
-      if (viewPortPlan.strategy !== activationStrategy.replace && prevViewPortInstruction.childRouter) {
-        let path = instruction.getWildcardPath();
-        let task = prevViewPortInstruction.childRouter
-          ._createNavigationInstruction(path, instruction).then(childInstruction => { // eslint-disable-line no-loop-func
-            viewPortPlan.childNavigationInstruction = childInstruction;
-
-            return _buildNavigationPlan(
-              childInstruction,
-              viewPortPlan.strategy === activationStrategy.invokeLifecycle)
-              .then(childPlan => {
-                if (childPlan instanceof Redirect) {
-                  return Promise.reject(childPlan);
-                }
-                childInstruction.plan = childPlan;
-              });
-          });
+  let viewPorts = {};
+
+  if (viewPortDefaults) {
+    for (let viewPortName in viewPortDefaults) {
+      if (config.viewPorts[viewPortName] === undefined) {
+        viewPorts[viewPortName] = viewPortDefaults[viewPortName];
+      }
+    }
+  }
 
-        pending.push(task);
+  if (config.viewPorts) {
+    for (let viewPortName in config.viewPorts) {
+      if (config.viewPorts[viewPortName] === null || config.viewPorts[viewPortName].moduleId === null) {
+        config.viewPorts[viewPortName] = null;
+      }
+      if (config.viewPorts[viewPortName] !== undefined || !viewPorts[viewPortName]) {
+        if (config.stateful || (config.viewPorts[viewPortName] && config.viewPorts[viewPortName].stateful)) {
+          config.viewPorts[viewPortName].stateful = true;
+          viewPortName = instruction.router._ensureStatefulViewPort(viewPortName, config.viewPorts[viewPortName].moduleId);
+        }
+        viewPorts[viewPortName] = config.viewPorts[viewPortName.split('.')[0]];
       }
     }
+  }
 
-    return Promise.all(pending).then(() => plan);
+  for (let viewPortName in viewPorts) {
+    let viewPortPlan = buildViewPortPlan(instruction, viewPorts, forceLifecycleMinimum, newParams, viewPortName, false);
+    plan[viewPortPlan.name] = viewPortPlan.plan;
+    if (viewPortPlan.task) {
+      pending.push(viewPortPlan.task);
+    }
   }
 
-  for (let viewPortName in config.viewPorts) {
-    let viewPortConfig = config.viewPorts[viewPortName];
-    if (viewPortConfig.moduleId === null && viewPortName in instruction.router.viewPortDefaults) {
-      viewPortConfig = defaults[viewPortName];
+  return Promise.all(pending).then(() => {
+    for (let viewPortName in plan) {
+      if (viewPortName.indexOf('.') != -1) {
+        let shortName = viewPortName.split('.')[0];
+        if (!plan[shortName]) {
+          plan[shortName] = {
+            name: shortName,
+            strategy: activationStrategy.replace,
+            config: null
+          }
+        }
+      }
     }
-    plan[viewPortName] = {
-      name: viewPortName,
-      strategy: activationStrategy.replace,
-      config: viewPortConfig
-    };
+    return plan;
+  });
+}
+
+function buildViewPortPlan(instruction: NavigationInstruction, viewPorts: any, forceLifecycleMinimum, newParams: boolean, viewPortName: string, previous: boolean) {
+  let plan = {};
+  let prev = instruction.previousInstruction;
+  let config = instruction.config;
+  let configViewPortName = viewPortName;
+  let prevViewPortInstruction = prev ? prev.viewPortInstructions[viewPortName] : undefined;
+  let nextViewPortConfig = !previous ? viewPorts[configViewPortName] : undefined;
+
+  if (config.explicitViewPorts && nextViewPortConfig === undefined) {
+    nextViewPortConfig = null;
+  }
+
+  plan['name'] = viewPortName;
+  let viewPortPlan = plan['plan'] = {
+    name: viewPortName
+  };
+  if (prevViewPortInstruction) {
+    viewPortPlan.prevComponent = prevViewPortInstruction.component;
+    viewPortPlan.prevModuleId = prevViewPortInstruction.moduleId;
+  }
+  if (nextViewPortConfig !== undefined) {
+    viewPortPlan.config = nextViewPortConfig;
+    viewPortPlan.active = true;
+  }
+  else {
+    viewPortPlan.config = prevViewPortInstruction.config;
+  }
+
+  if (!prevViewPortInstruction) {
+    viewPortPlan.strategy = activationStrategy.replace;
+  } else if (nextViewPortConfig === null) { // null value means deliberately cleared!
+    viewPortPlan.strategy = activationStrategy.replace;
+  } else if (nextViewPortConfig === undefined) { // undefined (left out in config) means keep same
+    viewPortPlan.strategy = activationStrategy.noChange;
+  }
+  else if (prevViewPortInstruction.moduleId !== nextViewPortConfig.moduleId) {
+    viewPortPlan.strategy = activationStrategy.replace;
+  }
+  else if (!nextViewPortConfig.stateful && !prevViewPortInstruction.active) {
+    viewPortPlan.strategy = activationStrategy.replace;
+  } else if ('determineActivationStrategy' in prevViewPortInstruction.component.viewModel) {
+    viewPortPlan.strategy = prevViewPortInstruction.component.viewModel
+      .determineActivationStrategy(...instruction.lifecycleArgs);
+  } else if (config.activationStrategy) {
+    viewPortPlan.strategy = config.activationStrategy;
+  } else if (newParams || forceLifecycleMinimum) {
+    viewPortPlan.strategy = activationStrategy.invokeLifecycle;
+  } else {
+    viewPortPlan.strategy = activationStrategy.noChange;
+  }
+
+  if (viewPortPlan.strategy !== activationStrategy.replace && prevViewPortInstruction.childRouter) {
+    let path = instruction.getWildcardPath();
+    let task = prevViewPortInstruction.childRouter
+      ._createNavigationInstruction(path, instruction).then(childInstruction => { // eslint-disable-line no-loop-func
+        viewPortPlan.childNavigationInstruction = childInstruction;
+
+        return _buildNavigationPlan(
+          childInstruction,
+          viewPortPlan.strategy === activationStrategy.invokeLifecycle)
+          .then(childPlan => {
+            childInstruction.plan = childPlan;
+          });
+      });
+
+    plan['task'] = task;
   }
 
-  return Promise.resolve(plan);
+  return plan;
 }
 
 function hasDifferentParameterValues(prev: NavigationInstruction, next: NavigationInstruction): boolean {

src/route-loading.js

@@ -49,7 +49,8 @@ function determineWhatToLoad(navigationInstruction: NavigationInstruction, toLoa
         viewPortName,
         viewPortPlan.strategy,
         viewPortPlan.prevModuleId,
-        viewPortPlan.prevComponent);
+        viewPortPlan.prevComponent,
+        viewPortPlan.active);
 
       if (viewPortPlan.childNavigationInstruction) {
         viewPortInstruction.childNavigationInstruction = viewPortPlan.childNavigationInstruction;
@@ -69,7 +70,8 @@ function loadRoute(routeLoader: RouteLoader, navigationInstruction: NavigationIn
       viewPortPlan.name,
       viewPortPlan.strategy,
       moduleId,
-      component);
+      component,
+      viewPortPlan.active);
 
     let childRouter = component.childRouter;
     if (childRouter) {

src/router.js

@@ -1,6 +1,7 @@
 import {RouteRecognizer} from 'aurelia-route-recognizer';
 import {Container} from 'aurelia-dependency-injection';
 import {History, NavigationOptions} from 'aurelia-history';
+import {TemplatingEngine} from 'aurelia-templating';
 import {NavigationInstruction} from './navigation-instruction';
 import {NavModel} from './nav-model';
 import {RouterConfiguration} from './router-configuration';
@@ -584,6 +585,25 @@ export class Router {
         return c;
       });
   }
+
+  _ensureStatefulViewPort(name, moduleId) {
+    let viewPort = this.viewPorts[name];
+    let viewPortName = `${name}.${moduleId}`;
+
+    if (!this.viewPorts[viewPortName]) {
+      let newElement = viewPort.element.ownerDocument.createElement('router-view');
+      newElement.setAttribute('name', viewPortName);
+      viewPort.element.insertAdjacentElement('afterend', newElement);
+      let templatingEngine = viewPort.container.get(TemplatingEngine);
+      templatingEngine.enhance({
+        element: newElement,
+        container: viewPort.container,
+        resources: viewPort.resources
+      });
+    }
+
+    return viewPortName;
+  }
 }
 
 function generateBaseUrl(router: Router, instruction: NavigationInstruction) {

test/navigation-plan.spec.js

@@ -35,22 +35,22 @@ describe('NavigationPlanStep', () => {
       fragment: 'first',
       config: { viewPorts: { default: { moduleId: './first' }}},
       params: { id: '1' },
-      router
+      router: {}
     });
 
     sameAsFirstInstruction = new NavigationInstruction({
       fragment: 'first',
       config: { viewPorts: { default: { moduleId: './first' }}},
       previousInstruction: firstInstruction,
       params: { id: '1' },
-      router
+      router: {}
     });
 
     secondInstruction = new NavigationInstruction({
       fragment: 'second',
       config: { viewPorts: { default: { moduleId: './second' }}},
       previousInstruction: firstInstruction,
-      router
+      router: {}
     });
   });
 
@@ -204,8 +204,8 @@ describe('NavigationPlanStep', () => {
     });
 
     it('is no-change when nothing changes', (done) => {
-      firstInstruction.addViewPortInstruction('default', 'ignored', './first', { viewModel: {}});
-
+      firstInstruction.addViewPortInstruction('default', 'ignored', './first', { viewModel: {}}, true);
+      
       step.run(sameAsFirstInstruction, state.next)
       .then(() => {
         expect(state.result).toBe(true);
@@ -216,7 +216,7 @@ describe('NavigationPlanStep', () => {
 
     it('can be determined by route config', (done) => {
       sameAsFirstInstruction.config.activationStrategy = 'fake-strategy';
-      firstInstruction.addViewPortInstruction('default', 'ignored', './first', { viewModel: {}});
+      firstInstruction.addViewPortInstruction('default', 'ignored', './first', { viewModel: {}}, true);
 
       step.run(sameAsFirstInstruction, state.next)
       .then(() => {
@@ -228,7 +228,7 @@ describe('NavigationPlanStep', () => {
 
     it('can be determined by view model', (done) => {
       let viewModel = { determineActivationStrategy: () => 'vm-strategy'};
-      firstInstruction.addViewPortInstruction('default', 'ignored', './first', { viewModel });
+      firstInstruction.addViewPortInstruction('default', 'ignored', './first', { viewModel }, true);
 
       step.run(sameAsFirstInstruction, state.next)
       .then(() => {
@@ -241,7 +241,7 @@ describe('NavigationPlanStep', () => {
     it('is invoke-lifecycle when only params change', (done) => {
       firstInstruction.params = { id: '1' };
       sameAsFirstInstruction.params = { id: '2' };
-      firstInstruction.addViewPortInstruction('default', 'ignored', './first', { viewModel: {}});
+      firstInstruction.addViewPortInstruction('default', 'ignored', './first', { viewModel: {}}, true);
 
       step.run(sameAsFirstInstruction, state.next)
       .then(() => {
@@ -255,7 +255,7 @@ describe('NavigationPlanStep', () => {
       firstInstruction.queryParams = { param: 'foo' };
       sameAsFirstInstruction.queryParams = { param: 'bar' };
       sameAsFirstInstruction.options.compareQueryParams = true;
-      firstInstruction.addViewPortInstruction('default', 'ignored', './first', { viewModel: {}});
+      firstInstruction.addViewPortInstruction('default', 'ignored', './first', { viewModel: {}}, true);
 
       step.run(sameAsFirstInstruction, state.next)
       .then(() => {