aurelia-templating-router - npm Package Compare versions

Comparing version 1.0.0-beta.2.0.2 to 1.0.0-beta.2.0.3

bower.json

 {
   "name": "aurelia-templating-router",
-  "version": "1.0.0-beta.2.0.2",
+  "version": "1.0.0-beta.2.0.3",
   "description": "An implementation of the RouteLoader interface for use with the router module. Also contains a custom element that allows the templating engine to display the current route.",
@@ -5,0 +5,0 @@ "keywords": [

dist/amd/router-view.js

@@ -148,35 +148,26 @@ define(['exports', 'aurelia-dependency-injection', 'aurelia-templating', 'aurelia-router', 'aurelia-metadata', 'aurelia-pal'], function (exports, _aureliaDependencyInjection, _aureliaTemplating, _aureliaRouter, _aureliaMetadata, _aureliaPal) {
 
-      return Promise.resolve(this.composeLayout(layoutInstruction)).then(function (layoutView) {
-        var viewStrategy = _this.viewLocator.getViewStrategy(component.view || viewModel);
+      var viewStrategy = this.viewLocator.getViewStrategy(component.view || viewModel);
+      if (viewStrategy) {
+        viewStrategy.makeRelativeTo(_aureliaMetadata.Origin.get(component.router.container.viewModel.constructor).moduleId);
+      }
 
-        if (viewStrategy) {
-          viewStrategy.makeRelativeTo(_aureliaMetadata.Origin.get(component.router.container.viewModel.constructor).moduleId);
+      return metadata.load(childContainer, viewModelResource.value, null, viewStrategy, true).then(function (viewFactory) {
+        if (!_this.compositionTransactionNotifier) {
+          _this.compositionTransactionOwnershipToken = _this.compositionTransaction.tryCapture();
         }
 
-        return metadata.load(childContainer, viewModelResource.value, null, viewStrategy, true).then(function (viewFactory) {
-          if (!_this.compositionTransactionNotifier) {
-            _this.compositionTransactionOwnershipToken = _this.compositionTransaction.tryCapture();
-          }
+        if (layoutInstruction.viewModel || layoutInstruction.view) {
+          viewPortInstruction.layoutInstruction = layoutInstruction;
+        }
 
-          viewPortInstruction.layout = layoutView ? layoutView.view || layoutView : undefined;
+        viewPortInstruction.controller = metadata.create(childContainer, _aureliaTemplating.BehaviorInstruction.dynamic(_this.element, viewModel, viewFactory));
 
-          viewPortInstruction.controller = metadata.create(childContainer, _aureliaTemplating.BehaviorInstruction.dynamic(_this.element, viewModel, viewFactory));
+        if (waitToSwap) {
+          return;
+        }
 
-          if (waitToSwap) {
-            return;
-          }
-
-          _this.swap(viewPortInstruction);
-        });
+        _this.swap(viewPortInstruction);
       });
     };
 
-    RouterView.prototype.composeLayout = function composeLayout(instruction) {
-      if (instruction.viewModel || instruction.view) {
-        return this.compositionEngine.compose(instruction);
-      }
-
-      return undefined;
-    };
-
     RouterView.prototype.swap = function swap(viewPortInstruction) {
@@ -188,23 +179,29 @@ var _this2 = this;
         var swapStrategy = void 0;
-        var layout = viewPortInstruction.layout;
-        var viewSlot = layout ? new _aureliaTemplating.ViewSlot(layout.firstChild, false) : _this2.viewSlot;
+        var viewSlot = _this2.viewSlot;
+        var layoutInstruction = viewPortInstruction.layoutInstruction;
 
-        if (layout) {
-          viewSlot.attached();
-        }
-
         swapStrategy = _this2.swapOrder in swapStrategies ? swapStrategies[_this2.swapOrder] : swapStrategies.after;
 
         swapStrategy(viewSlot, previousView, function () {
-          if (layout) {
-            _aureliaTemplating.ShadowDOM.distributeView(viewPortInstruction.controller.view, layout.slots, viewSlot);
-            _this2._notify();
+          var waitForView = void 0;
+
+          if (layoutInstruction) {
+            if (!layoutInstruction.viewModel) {
+              layoutInstruction.viewModel = {};
+            }
+
+            waitForView = _this2.compositionEngine.createController(layoutInstruction).then(function (layout) {
+              _aureliaTemplating.ShadowDOM.distributeView(viewPortInstruction.controller.view, layout.slots || layout.view.slots);
+              return layout.view || layout;
+            });
           } else {
-            return Promise.resolve(viewSlot.add(viewPortInstruction.controller.view)).then(function () {
-              _this2._notify();
-            });
+            waitForView = Promise.resolve(viewPortInstruction.controller.view);
           }
 
-          _this2.view = viewPortInstruction.controller.view;
-          return Promise.resolve();
+          return waitForView.then(function (newView) {
+            _this2.view = newView;
+            return viewSlot.add(newView);
+          }).then(function () {
+            _this2._notify();
+          });
         });
@@ -211,0 +208,0 @@ };

dist/aurelia-templating-router.d.ts

@@ -47,3 +47,2 @@ import * as LogManager from 'aurelia-logging';
   process(viewPortInstruction?: any, waitToSwap?: any): any;
-  composeLayout(instruction?: any): any;
   swap(viewPortInstruction?: any): any;
@@ -50,0 +49,0 @@ _notify(): any;

dist/aurelia-templating-router.js

@@ -139,43 +139,33 @@ import * as LogManager from 'aurelia-logging';
 
-    return Promise.resolve(this.composeLayout(layoutInstruction))
-    .then(layoutView => {
-      let viewStrategy = this.viewLocator.getViewStrategy(component.view || viewModel);
+    let viewStrategy = this.viewLocator.getViewStrategy(component.view || viewModel);
+    if (viewStrategy) {
+      viewStrategy.makeRelativeTo(Origin.get(component.router.container.viewModel.constructor).moduleId);
+    }
 
-      if (viewStrategy) {
-        viewStrategy.makeRelativeTo(Origin.get(component.router.container.viewModel.constructor).moduleId);
+    return metadata.load(childContainer, viewModelResource.value, null, viewStrategy, true)
+    .then(viewFactory => {
+      if (!this.compositionTransactionNotifier) {
+        this.compositionTransactionOwnershipToken = this.compositionTransaction.tryCapture();
       }
 
-      return metadata.load(childContainer, viewModelResource.value, null, viewStrategy, true)
-      .then(viewFactory => {
-        if (!this.compositionTransactionNotifier) {
-          this.compositionTransactionOwnershipToken = this.compositionTransaction.tryCapture();
-        }
+      if (layoutInstruction.viewModel || layoutInstruction.view) {
+        viewPortInstruction.layoutInstruction = layoutInstruction;
+      }
 
-        viewPortInstruction.layout = layoutView ? layoutView.view || layoutView : undefined;
+      viewPortInstruction.controller = metadata.create(childContainer,
+        BehaviorInstruction.dynamic(
+          this.element,
+          viewModel,
+          viewFactory
+        )
+      );
 
-        viewPortInstruction.controller = metadata.create(childContainer,
-          BehaviorInstruction.dynamic(
-            this.element,
-            viewModel,
-            viewFactory
-          )
-        );
+      if (waitToSwap) {
+        return;
+      }
 
-        if (waitToSwap) {
-          return;
-        }
-
-        this.swap(viewPortInstruction);
-      });
+      this.swap(viewPortInstruction);
     });
   }
 
-  composeLayout(instruction) {
-    if (instruction.viewModel || instruction.view) {
-      return this.compositionEngine.compose(instruction);
-    }
-
-    return undefined;
-  }
-
   swap(viewPortInstruction) {
@@ -185,9 +175,5 @@ let work = () => {
       let swapStrategy;
-      let layout = viewPortInstruction.layout;
-      let viewSlot = layout ? new ViewSlot(layout.firstChild, false) : this.viewSlot;
+      let viewSlot = this.viewSlot;
+      let layoutInstruction = viewPortInstruction.layoutInstruction;
 
-      if (layout) {
-        viewSlot.attached();
-      }
-
       swapStrategy = this.swapOrder in swapStrategies
@@ -198,11 +184,25 @@ ? swapStrategies[this.swapOrder]
       swapStrategy(viewSlot, previousView, () => {
-        if (layout) {
-          ShadowDOM.distributeView(viewPortInstruction.controller.view, layout.slots, viewSlot);
-          this._notify();
+        let waitForView;
+
+        if (layoutInstruction) {
+          if (!layoutInstruction.viewModel) {
+            // createController chokes if there's no viewmodel, so create a dummy one
+            // could possibly check if there was no VM and don't use compose, just create a viewfactory -> view?
+            layoutInstruction.viewModel = {};
+          }
+
+          waitForView = this.compositionEngine.createController(layoutInstruction).then(layout => {
+            ShadowDOM.distributeView(viewPortInstruction.controller.view, layout.slots || layout.view.slots);
+            return layout.view || layout;
+          });
         } else {
-          return Promise.resolve(viewSlot.add(viewPortInstruction.controller.view)).then(() => { this._notify(); });
+          waitForView = Promise.resolve(viewPortInstruction.controller.view);
         }
 
-        this.view = viewPortInstruction.controller.view;
-        return Promise.resolve();
+        return waitForView.then(newView => {
+          this.view = newView;
+          return viewSlot.add(newView);
+        }).then(() => {
+          this._notify();
+        });
       });
@@ -209,0 +209,0 @@ };

dist/commonjs/router-view.js

@@ -157,35 +157,26 @@ 'use strict';
 
-    return Promise.resolve(this.composeLayout(layoutInstruction)).then(function (layoutView) {
-      var viewStrategy = _this.viewLocator.getViewStrategy(component.view || viewModel);
+    var viewStrategy = this.viewLocator.getViewStrategy(component.view || viewModel);
+    if (viewStrategy) {
+      viewStrategy.makeRelativeTo(_aureliaMetadata.Origin.get(component.router.container.viewModel.constructor).moduleId);
+    }
 
-      if (viewStrategy) {
-        viewStrategy.makeRelativeTo(_aureliaMetadata.Origin.get(component.router.container.viewModel.constructor).moduleId);
+    return metadata.load(childContainer, viewModelResource.value, null, viewStrategy, true).then(function (viewFactory) {
+      if (!_this.compositionTransactionNotifier) {
+        _this.compositionTransactionOwnershipToken = _this.compositionTransaction.tryCapture();
       }
 
-      return metadata.load(childContainer, viewModelResource.value, null, viewStrategy, true).then(function (viewFactory) {
-        if (!_this.compositionTransactionNotifier) {
-          _this.compositionTransactionOwnershipToken = _this.compositionTransaction.tryCapture();
-        }
+      if (layoutInstruction.viewModel || layoutInstruction.view) {
+        viewPortInstruction.layoutInstruction = layoutInstruction;
+      }
 
-        viewPortInstruction.layout = layoutView ? layoutView.view || layoutView : undefined;
+      viewPortInstruction.controller = metadata.create(childContainer, _aureliaTemplating.BehaviorInstruction.dynamic(_this.element, viewModel, viewFactory));
 
-        viewPortInstruction.controller = metadata.create(childContainer, _aureliaTemplating.BehaviorInstruction.dynamic(_this.element, viewModel, viewFactory));
+      if (waitToSwap) {
+        return;
+      }
 
-        if (waitToSwap) {
-          return;
-        }
-
-        _this.swap(viewPortInstruction);
-      });
+      _this.swap(viewPortInstruction);
     });
   };
 
-  RouterView.prototype.composeLayout = function composeLayout(instruction) {
-    if (instruction.viewModel || instruction.view) {
-      return this.compositionEngine.compose(instruction);
-    }
-
-    return undefined;
-  };
-
   RouterView.prototype.swap = function swap(viewPortInstruction) {
@@ -197,23 +188,29 @@ var _this2 = this;
       var swapStrategy = void 0;
-      var layout = viewPortInstruction.layout;
-      var viewSlot = layout ? new _aureliaTemplating.ViewSlot(layout.firstChild, false) : _this2.viewSlot;
+      var viewSlot = _this2.viewSlot;
+      var layoutInstruction = viewPortInstruction.layoutInstruction;
 
-      if (layout) {
-        viewSlot.attached();
-      }
-
       swapStrategy = _this2.swapOrder in swapStrategies ? swapStrategies[_this2.swapOrder] : swapStrategies.after;
 
       swapStrategy(viewSlot, previousView, function () {
-        if (layout) {
-          _aureliaTemplating.ShadowDOM.distributeView(viewPortInstruction.controller.view, layout.slots, viewSlot);
-          _this2._notify();
+        var waitForView = void 0;
+
+        if (layoutInstruction) {
+          if (!layoutInstruction.viewModel) {
+            layoutInstruction.viewModel = {};
+          }
+
+          waitForView = _this2.compositionEngine.createController(layoutInstruction).then(function (layout) {
+            _aureliaTemplating.ShadowDOM.distributeView(viewPortInstruction.controller.view, layout.slots || layout.view.slots);
+            return layout.view || layout;
+          });
         } else {
-          return Promise.resolve(viewSlot.add(viewPortInstruction.controller.view)).then(function () {
-            _this2._notify();
-          });
+          waitForView = Promise.resolve(viewPortInstruction.controller.view);
         }
 
-        _this2.view = viewPortInstruction.controller.view;
-        return Promise.resolve();
+        return waitForView.then(function (newView) {
+          _this2.view = newView;
+          return viewSlot.add(newView);
+        }).then(function () {
+          _this2._notify();
+        });
       });
@@ -220,0 +217,0 @@ };

dist/es2015/router-view.js

@@ -134,35 +134,26 @@ var _dec, _dec2, _class, _desc, _value, _class2, _descriptor, _descriptor2, _descriptor3, _descriptor4;
 
-    return Promise.resolve(this.composeLayout(layoutInstruction)).then(layoutView => {
-      let viewStrategy = this.viewLocator.getViewStrategy(component.view || viewModel);
+    let viewStrategy = this.viewLocator.getViewStrategy(component.view || viewModel);
+    if (viewStrategy) {
+      viewStrategy.makeRelativeTo(Origin.get(component.router.container.viewModel.constructor).moduleId);
+    }
 
-      if (viewStrategy) {
-        viewStrategy.makeRelativeTo(Origin.get(component.router.container.viewModel.constructor).moduleId);
+    return metadata.load(childContainer, viewModelResource.value, null, viewStrategy, true).then(viewFactory => {
+      if (!this.compositionTransactionNotifier) {
+        this.compositionTransactionOwnershipToken = this.compositionTransaction.tryCapture();
       }
 
-      return metadata.load(childContainer, viewModelResource.value, null, viewStrategy, true).then(viewFactory => {
-        if (!this.compositionTransactionNotifier) {
-          this.compositionTransactionOwnershipToken = this.compositionTransaction.tryCapture();
-        }
+      if (layoutInstruction.viewModel || layoutInstruction.view) {
+        viewPortInstruction.layoutInstruction = layoutInstruction;
+      }
 
-        viewPortInstruction.layout = layoutView ? layoutView.view || layoutView : undefined;
+      viewPortInstruction.controller = metadata.create(childContainer, BehaviorInstruction.dynamic(this.element, viewModel, viewFactory));
 
-        viewPortInstruction.controller = metadata.create(childContainer, BehaviorInstruction.dynamic(this.element, viewModel, viewFactory));
+      if (waitToSwap) {
+        return;
+      }
 
-        if (waitToSwap) {
-          return;
-        }
-
-        this.swap(viewPortInstruction);
-      });
+      this.swap(viewPortInstruction);
     });
   }
 
-  composeLayout(instruction) {
-    if (instruction.viewModel || instruction.view) {
-      return this.compositionEngine.compose(instruction);
-    }
-
-    return undefined;
-  }
-
   swap(viewPortInstruction) {
@@ -172,23 +163,29 @@ let work = () => {
       let swapStrategy;
-      let layout = viewPortInstruction.layout;
-      let viewSlot = layout ? new ViewSlot(layout.firstChild, false) : this.viewSlot;
+      let viewSlot = this.viewSlot;
+      let layoutInstruction = viewPortInstruction.layoutInstruction;
 
-      if (layout) {
-        viewSlot.attached();
-      }
-
       swapStrategy = this.swapOrder in swapStrategies ? swapStrategies[this.swapOrder] : swapStrategies.after;
 
       swapStrategy(viewSlot, previousView, () => {
-        if (layout) {
-          ShadowDOM.distributeView(viewPortInstruction.controller.view, layout.slots, viewSlot);
-          this._notify();
+        let waitForView;
+
+        if (layoutInstruction) {
+          if (!layoutInstruction.viewModel) {
+            layoutInstruction.viewModel = {};
+          }
+
+          waitForView = this.compositionEngine.createController(layoutInstruction).then(layout => {
+            ShadowDOM.distributeView(viewPortInstruction.controller.view, layout.slots || layout.view.slots);
+            return layout.view || layout;
+          });
         } else {
-          return Promise.resolve(viewSlot.add(viewPortInstruction.controller.view)).then(() => {
-            this._notify();
-          });
+          waitForView = Promise.resolve(viewPortInstruction.controller.view);
         }
 
-        this.view = viewPortInstruction.controller.view;
-        return Promise.resolve();
+        return waitForView.then(newView => {
+          this.view = newView;
+          return viewSlot.add(newView);
+        }).then(() => {
+          this._notify();
+        });
       });
@@ -195,0 +192,0 @@ };

dist/native-modules/router-view.js

@@ -146,35 +146,26 @@ var _dec, _dec2, _class, _desc, _value, _class2, _descriptor, _descriptor2, _descriptor3, _descriptor4;
 
-    return Promise.resolve(this.composeLayout(layoutInstruction)).then(function (layoutView) {
-      var viewStrategy = _this.viewLocator.getViewStrategy(component.view || viewModel);
+    var viewStrategy = this.viewLocator.getViewStrategy(component.view || viewModel);
+    if (viewStrategy) {
+      viewStrategy.makeRelativeTo(Origin.get(component.router.container.viewModel.constructor).moduleId);
+    }
 
-      if (viewStrategy) {
-        viewStrategy.makeRelativeTo(Origin.get(component.router.container.viewModel.constructor).moduleId);
+    return metadata.load(childContainer, viewModelResource.value, null, viewStrategy, true).then(function (viewFactory) {
+      if (!_this.compositionTransactionNotifier) {
+        _this.compositionTransactionOwnershipToken = _this.compositionTransaction.tryCapture();
       }
 
-      return metadata.load(childContainer, viewModelResource.value, null, viewStrategy, true).then(function (viewFactory) {
-        if (!_this.compositionTransactionNotifier) {
-          _this.compositionTransactionOwnershipToken = _this.compositionTransaction.tryCapture();
-        }
+      if (layoutInstruction.viewModel || layoutInstruction.view) {
+        viewPortInstruction.layoutInstruction = layoutInstruction;
+      }
 
-        viewPortInstruction.layout = layoutView ? layoutView.view || layoutView : undefined;
+      viewPortInstruction.controller = metadata.create(childContainer, BehaviorInstruction.dynamic(_this.element, viewModel, viewFactory));
 
-        viewPortInstruction.controller = metadata.create(childContainer, BehaviorInstruction.dynamic(_this.element, viewModel, viewFactory));
+      if (waitToSwap) {
+        return;
+      }
 
-        if (waitToSwap) {
-          return;
-        }
-
-        _this.swap(viewPortInstruction);
-      });
+      _this.swap(viewPortInstruction);
     });
   };
 
-  RouterView.prototype.composeLayout = function composeLayout(instruction) {
-    if (instruction.viewModel || instruction.view) {
-      return this.compositionEngine.compose(instruction);
-    }
-
-    return undefined;
-  };
-
   RouterView.prototype.swap = function swap(viewPortInstruction) {
@@ -186,23 +177,29 @@ var _this2 = this;
       var swapStrategy = void 0;
-      var layout = viewPortInstruction.layout;
-      var viewSlot = layout ? new ViewSlot(layout.firstChild, false) : _this2.viewSlot;
+      var viewSlot = _this2.viewSlot;
+      var layoutInstruction = viewPortInstruction.layoutInstruction;
 
-      if (layout) {
-        viewSlot.attached();
-      }
-
       swapStrategy = _this2.swapOrder in swapStrategies ? swapStrategies[_this2.swapOrder] : swapStrategies.after;
 
       swapStrategy(viewSlot, previousView, function () {
-        if (layout) {
-          ShadowDOM.distributeView(viewPortInstruction.controller.view, layout.slots, viewSlot);
-          _this2._notify();
+        var waitForView = void 0;
+
+        if (layoutInstruction) {
+          if (!layoutInstruction.viewModel) {
+            layoutInstruction.viewModel = {};
+          }
+
+          waitForView = _this2.compositionEngine.createController(layoutInstruction).then(function (layout) {
+            ShadowDOM.distributeView(viewPortInstruction.controller.view, layout.slots || layout.view.slots);
+            return layout.view || layout;
+          });
         } else {
-          return Promise.resolve(viewSlot.add(viewPortInstruction.controller.view)).then(function () {
-            _this2._notify();
-          });
+          waitForView = Promise.resolve(viewPortInstruction.controller.view);
         }
 
-        _this2.view = viewPortInstruction.controller.view;
-        return Promise.resolve();
+        return waitForView.then(function (newView) {
+          _this2.view = newView;
+          return viewSlot.add(newView);
+        }).then(function () {
+          _this2._notify();
+        });
       });
@@ -209,0 +206,0 @@ };

dist/system/router-view.js

@@ -167,35 +167,26 @@ 'use strict';
 
-          return Promise.resolve(this.composeLayout(layoutInstruction)).then(function (layoutView) {
-            var viewStrategy = _this.viewLocator.getViewStrategy(component.view || viewModel);
+          var viewStrategy = this.viewLocator.getViewStrategy(component.view || viewModel);
+          if (viewStrategy) {
+            viewStrategy.makeRelativeTo(Origin.get(component.router.container.viewModel.constructor).moduleId);
+          }
 
-            if (viewStrategy) {
-              viewStrategy.makeRelativeTo(Origin.get(component.router.container.viewModel.constructor).moduleId);
+          return metadata.load(childContainer, viewModelResource.value, null, viewStrategy, true).then(function (viewFactory) {
+            if (!_this.compositionTransactionNotifier) {
+              _this.compositionTransactionOwnershipToken = _this.compositionTransaction.tryCapture();
             }
 
-            return metadata.load(childContainer, viewModelResource.value, null, viewStrategy, true).then(function (viewFactory) {
-              if (!_this.compositionTransactionNotifier) {
-                _this.compositionTransactionOwnershipToken = _this.compositionTransaction.tryCapture();
-              }
+            if (layoutInstruction.viewModel || layoutInstruction.view) {
+              viewPortInstruction.layoutInstruction = layoutInstruction;
+            }
 
-              viewPortInstruction.layout = layoutView ? layoutView.view || layoutView : undefined;
+            viewPortInstruction.controller = metadata.create(childContainer, BehaviorInstruction.dynamic(_this.element, viewModel, viewFactory));
 
-              viewPortInstruction.controller = metadata.create(childContainer, BehaviorInstruction.dynamic(_this.element, viewModel, viewFactory));
+            if (waitToSwap) {
+              return;
+            }
 
-              if (waitToSwap) {
-                return;
-              }
-
-              _this.swap(viewPortInstruction);
-            });
+            _this.swap(viewPortInstruction);
           });
         };
 
-        RouterView.prototype.composeLayout = function composeLayout(instruction) {
-          if (instruction.viewModel || instruction.view) {
-            return this.compositionEngine.compose(instruction);
-          }
-
-          return undefined;
-        };
-
         RouterView.prototype.swap = function swap(viewPortInstruction) {
@@ -207,23 +198,29 @@ var _this2 = this;
             var swapStrategy = void 0;
-            var layout = viewPortInstruction.layout;
-            var viewSlot = layout ? new ViewSlot(layout.firstChild, false) : _this2.viewSlot;
+            var viewSlot = _this2.viewSlot;
+            var layoutInstruction = viewPortInstruction.layoutInstruction;
 
-            if (layout) {
-              viewSlot.attached();
-            }
-
             swapStrategy = _this2.swapOrder in swapStrategies ? swapStrategies[_this2.swapOrder] : swapStrategies.after;
 
             swapStrategy(viewSlot, previousView, function () {
-              if (layout) {
-                ShadowDOM.distributeView(viewPortInstruction.controller.view, layout.slots, viewSlot);
-                _this2._notify();
+              var waitForView = void 0;
+
+              if (layoutInstruction) {
+                if (!layoutInstruction.viewModel) {
+                  layoutInstruction.viewModel = {};
+                }
+
+                waitForView = _this2.compositionEngine.createController(layoutInstruction).then(function (layout) {
+                  ShadowDOM.distributeView(viewPortInstruction.controller.view, layout.slots || layout.view.slots);
+                  return layout.view || layout;
+                });
               } else {
-                return Promise.resolve(viewSlot.add(viewPortInstruction.controller.view)).then(function () {
-                  _this2._notify();
-                });
+                waitForView = Promise.resolve(viewPortInstruction.controller.view);
               }
 
-              _this2.view = viewPortInstruction.controller.view;
-              return Promise.resolve();
+              return waitForView.then(function (newView) {
+                _this2.view = newView;
+                return viewSlot.add(newView);
+              }).then(function () {
+                _this2._notify();
+              });
             });
@@ -230,0 +227,0 @@ };

dist/temp/aurelia-templating-router.js

@@ -214,35 +214,26 @@ 'use strict';
 
-    return Promise.resolve(this.composeLayout(layoutInstruction)).then(function (layoutView) {
-      var viewStrategy = _this2.viewLocator.getViewStrategy(component.view || viewModel);
+    var viewStrategy = this.viewLocator.getViewStrategy(component.view || viewModel);
+    if (viewStrategy) {
+      viewStrategy.makeRelativeTo(_aureliaMetadata.Origin.get(component.router.container.viewModel.constructor).moduleId);
+    }
 
-      if (viewStrategy) {
-        viewStrategy.makeRelativeTo(_aureliaMetadata.Origin.get(component.router.container.viewModel.constructor).moduleId);
+    return metadata.load(childContainer, viewModelResource.value, null, viewStrategy, true).then(function (viewFactory) {
+      if (!_this2.compositionTransactionNotifier) {
+        _this2.compositionTransactionOwnershipToken = _this2.compositionTransaction.tryCapture();
       }
 
-      return metadata.load(childContainer, viewModelResource.value, null, viewStrategy, true).then(function (viewFactory) {
-        if (!_this2.compositionTransactionNotifier) {
-          _this2.compositionTransactionOwnershipToken = _this2.compositionTransaction.tryCapture();
-        }
+      if (layoutInstruction.viewModel || layoutInstruction.view) {
+        viewPortInstruction.layoutInstruction = layoutInstruction;
+      }
 
-        viewPortInstruction.layout = layoutView ? layoutView.view || layoutView : undefined;
+      viewPortInstruction.controller = metadata.create(childContainer, _aureliaTemplating.BehaviorInstruction.dynamic(_this2.element, viewModel, viewFactory));
 
-        viewPortInstruction.controller = metadata.create(childContainer, _aureliaTemplating.BehaviorInstruction.dynamic(_this2.element, viewModel, viewFactory));
+      if (waitToSwap) {
+        return;
+      }
 
-        if (waitToSwap) {
-          return;
-        }
-
-        _this2.swap(viewPortInstruction);
-      });
+      _this2.swap(viewPortInstruction);
     });
   };
 
-  RouterView.prototype.composeLayout = function composeLayout(instruction) {
-    if (instruction.viewModel || instruction.view) {
-      return this.compositionEngine.compose(instruction);
-    }
-
-    return undefined;
-  };
-
   RouterView.prototype.swap = function swap(viewPortInstruction) {
@@ -254,23 +245,29 @@ var _this3 = this;
       var swapStrategy = void 0;
-      var layout = viewPortInstruction.layout;
-      var viewSlot = layout ? new _aureliaTemplating.ViewSlot(layout.firstChild, false) : _this3.viewSlot;
+      var viewSlot = _this3.viewSlot;
+      var layoutInstruction = viewPortInstruction.layoutInstruction;
 
-      if (layout) {
-        viewSlot.attached();
-      }
-
       swapStrategy = _this3.swapOrder in swapStrategies ? swapStrategies[_this3.swapOrder] : swapStrategies.after;
 
       swapStrategy(viewSlot, previousView, function () {
-        if (layout) {
-          _aureliaTemplating.ShadowDOM.distributeView(viewPortInstruction.controller.view, layout.slots, viewSlot);
-          _this3._notify();
+        var waitForView = void 0;
+
+        if (layoutInstruction) {
+          if (!layoutInstruction.viewModel) {
+            layoutInstruction.viewModel = {};
+          }
+
+          waitForView = _this3.compositionEngine.createController(layoutInstruction).then(function (layout) {
+            _aureliaTemplating.ShadowDOM.distributeView(viewPortInstruction.controller.view, layout.slots || layout.view.slots);
+            return layout.view || layout;
+          });
         } else {
-          return Promise.resolve(viewSlot.add(viewPortInstruction.controller.view)).then(function () {
-            _this3._notify();
-          });
+          waitForView = Promise.resolve(viewPortInstruction.controller.view);
         }
 
-        _this3.view = viewPortInstruction.controller.view;
-        return Promise.resolve();
+        return waitForView.then(function (newView) {
+          _this3.view = newView;
+          return viewSlot.add(newView);
+        }).then(function () {
+          _this3._notify();
+        });
       });
@@ -277,0 +274,0 @@ };

doc/api.json

@@ -1,1 +0,1 @@
-{"name":"aurelia-templating-router","children":[{"id":2,"name":"RouteHref","kind":128,"kindString":"Class","flags":{"isExported":true},"children":[{"id":3,"name":"constructor","kind":512,"kindString":"Constructor","flags":{"isExported":true},"signatures":[{"id":4,"name":"new RouteHref","kind":16384,"kindString":"Constructor signature","flags":{},"parameters":[{"id":5,"name":"router","kind":32768,"kindString":"Parameter","flags":{"isOptional":true},"type":{"type":"instrinct","name":"any"}},{"id":6,"name":"element","kind":32768,"kindString":"Parameter","flags":{"isOptional":true},"type":{"type":"instrinct","name":"any"}}],"type":{"type":"reference","name":"RouteHref","id":2}}]},{"id":11,"name":"attributeChanged","kind":2048,"kindString":"Method","flags":{"isExported":true},"signatures":[{"id":12,"name":"attributeChanged","kind":4096,"kindString":"Call signature","flags":{},"parameters":[{"id":13,"name":"value","kind":32768,"kindString":"Parameter","flags":{"isOptional":true},"type":{"type":"instrinct","name":"any"}},{"id":14,"name":"previous","kind":32768,"kindString":"Parameter","flags":{"isOptional":true},"type":{"type":"instrinct","name":"any"}}],"type":{"type":"instrinct","name":"any"}}]},{"id":7,"name":"bind","kind":2048,"kindString":"Method","flags":{"isExported":true},"signatures":[{"id":8,"name":"bind","kind":4096,"kindString":"Call signature","flags":{},"type":{"type":"instrinct","name":"any"}}]},{"id":15,"name":"processChange","kind":2048,"kindString":"Method","flags":{"isExported":true},"signatures":[{"id":16,"name":"processChange","kind":4096,"kindString":"Call signature","flags":{},"type":{"type":"instrinct","name":"any"}}]},{"id":9,"name":"unbind","kind":2048,"kindString":"Method","flags":{"isExported":true},"signatures":[{"id":10,"name":"unbind","kind":4096,"kindString":"Call signature","flags":{},"type":{"type":"instrinct","name":"any"}}]}],"groups":[{"title":"Constructors","kind":512,"children":[3]},{"title":"Methods","kind":2048,"children":[11,7,15,9]}]},{"id":17,"name":"RouterView","kind":128,"kindString":"Class","flags":{"isExported":true},"children":[{"id":22,"name":"constructor","kind":512,"kindString":"Constructor","flags":{"isExported":true},"signatures":[{"id":23,"name":"new RouterView","kind":16384,"kindString":"Constructor signature","flags":{},"parameters":[{"id":24,"name":"element","kind":32768,"kindString":"Parameter","flags":{"isOptional":true},"type":{"type":"instrinct","name":"any"}},{"id":25,"name":"container","kind":32768,"kindString":"Parameter","flags":{"isOptional":true},"type":{"type":"instrinct","name":"any"}},{"id":26,"name":"viewSlot","kind":32768,"kindString":"Parameter","flags":{"isOptional":true},"type":{"type":"instrinct","name":"any"}},{"id":27,"name":"router","kind":32768,"kindString":"Parameter","flags":{"isOptional":true},"type":{"type":"instrinct","name":"any"}},{"id":28,"name":"viewLocator","kind":32768,"kindString":"Parameter","flags":{"isOptional":true},"type":{"type":"instrinct","name":"any"}},{"id":29,"name":"compositionTransaction","kind":32768,"kindString":"Parameter","flags":{"isOptional":true},"type":{"type":"instrinct","name":"any"}},{"id":30,"name":"compositionEngine","kind":32768,"kindString":"Parameter","flags":{"isOptional":true},"type":{"type":"instrinct","name":"any"}}],"type":{"type":"reference","name":"RouterView","id":17}}]},{"id":21,"name":"layoutModel","kind":1024,"kindString":"Property","flags":{"isExported":true},"type":{"type":"instrinct","name":"any"}},{"id":19,"name":"layoutView","kind":1024,"kindString":"Property","flags":{"isExported":true},"type":{"type":"instrinct","name":"any"}},{"id":20,"name":"layoutViewModel","kind":1024,"kindString":"Property","flags":{"isExported":true},"type":{"type":"instrinct","name":"any"}},{"id":18,"name":"swapOrder","kind":1024,"kindString":"Property","flags":{"isExported":true},"type":{"type":"instrinct","name":"any"}},{"id":48,"name":"_notify","kind":2048,"kindString":"Method","flags":{"isExported":true},"signatures":[{"id":49,"name":"_notify","kind":4096,"kindString":"Call signature","flags":{},"type":{"type":"instrinct","name":"any"}}]},{"id":34,"name":"bind","kind":2048,"kindString":"Method","flags":{"isExported":true},"signatures":[{"id":35,"name":"bind","kind":4096,"kindString":"Call signature","flags":{},"parameters":[{"id":36,"name":"bindingContext","kind":32768,"kindString":"Parameter","flags":{"isOptional":true},"type":{"type":"instrinct","name":"any"}},{"id":37,"name":"overrideContext","kind":32768,"kindString":"Parameter","flags":{"isOptional":true},"type":{"type":"instrinct","name":"any"}}],"type":{"type":"instrinct","name":"any"}}]},{"id":42,"name":"composeLayout","kind":2048,"kindString":"Method","flags":{"isExported":true},"signatures":[{"id":43,"name":"composeLayout","kind":4096,"kindString":"Call signature","flags":{},"parameters":[{"id":44,"name":"instruction","kind":32768,"kindString":"Parameter","flags":{"isOptional":true},"type":{"type":"instrinct","name":"any"}}],"type":{"type":"instrinct","name":"any"}}]},{"id":31,"name":"created","kind":2048,"kindString":"Method","flags":{"isExported":true},"signatures":[{"id":32,"name":"created","kind":4096,"kindString":"Call signature","flags":{},"parameters":[{"id":33,"name":"owningView","kind":32768,"kindString":"Parameter","flags":{"isOptional":true},"type":{"type":"instrinct","name":"any"}}],"type":{"type":"instrinct","name":"any"}}]},{"id":38,"name":"process","kind":2048,"kindString":"Method","flags":{"isExported":true},"signatures":[{"id":39,"name":"process","kind":4096,"kindString":"Call signature","flags":{},"parameters":[{"id":40,"name":"viewPortInstruction","kind":32768,"kindString":"Parameter","flags":{"isOptional":true},"type":{"type":"instrinct","name":"any"}},{"id":41,"name":"waitToSwap","kind":32768,"kindString":"Parameter","flags":{"isOptional":true},"type":{"type":"instrinct","name":"any"}}],"type":{"type":"instrinct","name":"any"}}]},{"id":45,"name":"swap","kind":2048,"kindString":"Method","flags":{"isExported":true},"signatures":[{"id":46,"name":"swap","kind":4096,"kindString":"Call signature","flags":{},"parameters":[{"id":47,"name":"viewPortInstruction","kind":32768,"kindString":"Parameter","flags":{"isOptional":true},"type":{"type":"instrinct","name":"any"}}],"type":{"type":"instrinct","name":"any"}}]}],"groups":[{"title":"Constructors","kind":512,"children":[22]},{"title":"Properties","kind":1024,"children":[21,19,20,18]},{"title":"Methods","kind":2048,"children":[48,34,42,31,38,45]}]},{"id":50,"name":"TemplatingRouteLoader","kind":128,"kindString":"Class","flags":{"isExported":true},"children":[{"id":51,"name":"constructor","kind":512,"kindString":"Constructor","flags":{"isExported":true},"signatures":[{"id":52,"name":"new TemplatingRouteLoader","kind":16384,"kindString":"Constructor signature","flags":{},"parameters":[{"id":53,"name":"compositionEngine","kind":32768,"kindString":"Parameter","flags":{"isOptional":true},"type":{"type":"instrinct","name":"any"}}],"type":{"type":"reference","name":"TemplatingRouteLoader","id":50}}]},{"id":54,"name":"loadRoute","kind":2048,"kindString":"Method","flags":{"isExported":true},"signatures":[{"id":55,"name":"loadRoute","kind":4096,"kindString":"Call signature","flags":{},"parameters":[{"id":56,"name":"router","kind":32768,"kindString":"Parameter","flags":{"isOptional":true},"type":{"type":"instrinct","name":"any"}},{"id":57,"name":"config","kind":32768,"kindString":"Parameter","flags":{"isOptional":true},"type":{"type":"instrinct","name":"any"}}],"type":{"type":"instrinct","name":"any"},"overwrites":{"type":"reference","name":"RouteLoader.loadRoute"}}],"overwrites":{"type":"reference","name":"RouteLoader.loadRoute"}}],"groups":[{"title":"Constructors","kind":512,"children":[51]},{"title":"Methods","kind":2048,"children":[54]}],"extendedTypes":[{"type":"reference","name":"RouteLoader"}]}],"groups":[{"title":"Classes","kind":128,"children":[2,17,50]}]}
+{"name":"aurelia-templating-router","children":[{"id":2,"name":"RouteHref","kind":128,"kindString":"Class","flags":{"isExported":true},"children":[{"id":3,"name":"constructor","kind":512,"kindString":"Constructor","flags":{"isExported":true},"signatures":[{"id":4,"name":"new RouteHref","kind":16384,"kindString":"Constructor signature","flags":{},"parameters":[{"id":5,"name":"router","kind":32768,"kindString":"Parameter","flags":{"isOptional":true},"type":{"type":"instrinct","name":"any"}},{"id":6,"name":"element","kind":32768,"kindString":"Parameter","flags":{"isOptional":true},"type":{"type":"instrinct","name":"any"}}],"type":{"type":"reference","name":"RouteHref","id":2}}]},{"id":11,"name":"attributeChanged","kind":2048,"kindString":"Method","flags":{"isExported":true},"signatures":[{"id":12,"name":"attributeChanged","kind":4096,"kindString":"Call signature","flags":{},"parameters":[{"id":13,"name":"value","kind":32768,"kindString":"Parameter","flags":{"isOptional":true},"type":{"type":"instrinct","name":"any"}},{"id":14,"name":"previous","kind":32768,"kindString":"Parameter","flags":{"isOptional":true},"type":{"type":"instrinct","name":"any"}}],"type":{"type":"instrinct","name":"any"}}]},{"id":7,"name":"bind","kind":2048,"kindString":"Method","flags":{"isExported":true},"signatures":[{"id":8,"name":"bind","kind":4096,"kindString":"Call signature","flags":{},"type":{"type":"instrinct","name":"any"}}]},{"id":15,"name":"processChange","kind":2048,"kindString":"Method","flags":{"isExported":true},"signatures":[{"id":16,"name":"processChange","kind":4096,"kindString":"Call signature","flags":{},"type":{"type":"instrinct","name":"any"}}]},{"id":9,"name":"unbind","kind":2048,"kindString":"Method","flags":{"isExported":true},"signatures":[{"id":10,"name":"unbind","kind":4096,"kindString":"Call signature","flags":{},"type":{"type":"instrinct","name":"any"}}]}],"groups":[{"title":"Constructors","kind":512,"children":[3]},{"title":"Methods","kind":2048,"children":[11,7,15,9]}]},{"id":17,"name":"RouterView","kind":128,"kindString":"Class","flags":{"isExported":true},"children":[{"id":22,"name":"constructor","kind":512,"kindString":"Constructor","flags":{"isExported":true},"signatures":[{"id":23,"name":"new RouterView","kind":16384,"kindString":"Constructor signature","flags":{},"parameters":[{"id":24,"name":"element","kind":32768,"kindString":"Parameter","flags":{"isOptional":true},"type":{"type":"instrinct","name":"any"}},{"id":25,"name":"container","kind":32768,"kindString":"Parameter","flags":{"isOptional":true},"type":{"type":"instrinct","name":"any"}},{"id":26,"name":"viewSlot","kind":32768,"kindString":"Parameter","flags":{"isOptional":true},"type":{"type":"instrinct","name":"any"}},{"id":27,"name":"router","kind":32768,"kindString":"Parameter","flags":{"isOptional":true},"type":{"type":"instrinct","name":"any"}},{"id":28,"name":"viewLocator","kind":32768,"kindString":"Parameter","flags":{"isOptional":true},"type":{"type":"instrinct","name":"any"}},{"id":29,"name":"compositionTransaction","kind":32768,"kindString":"Parameter","flags":{"isOptional":true},"type":{"type":"instrinct","name":"any"}},{"id":30,"name":"compositionEngine","kind":32768,"kindString":"Parameter","flags":{"isOptional":true},"type":{"type":"instrinct","name":"any"}}],"type":{"type":"reference","name":"RouterView","id":17}}]},{"id":21,"name":"layoutModel","kind":1024,"kindString":"Property","flags":{"isExported":true},"type":{"type":"instrinct","name":"any"}},{"id":19,"name":"layoutView","kind":1024,"kindString":"Property","flags":{"isExported":true},"type":{"type":"instrinct","name":"any"}},{"id":20,"name":"layoutViewModel","kind":1024,"kindString":"Property","flags":{"isExported":true},"type":{"type":"instrinct","name":"any"}},{"id":18,"name":"swapOrder","kind":1024,"kindString":"Property","flags":{"isExported":true},"type":{"type":"instrinct","name":"any"}},{"id":45,"name":"_notify","kind":2048,"kindString":"Method","flags":{"isExported":true},"signatures":[{"id":46,"name":"_notify","kind":4096,"kindString":"Call signature","flags":{},"type":{"type":"instrinct","name":"any"}}]},{"id":34,"name":"bind","kind":2048,"kindString":"Method","flags":{"isExported":true},"signatures":[{"id":35,"name":"bind","kind":4096,"kindString":"Call signature","flags":{},"parameters":[{"id":36,"name":"bindingContext","kind":32768,"kindString":"Parameter","flags":{"isOptional":true},"type":{"type":"instrinct","name":"any"}},{"id":37,"name":"overrideContext","kind":32768,"kindString":"Parameter","flags":{"isOptional":true},"type":{"type":"instrinct","name":"any"}}],"type":{"type":"instrinct","name":"any"}}]},{"id":31,"name":"created","kind":2048,"kindString":"Method","flags":{"isExported":true},"signatures":[{"id":32,"name":"created","kind":4096,"kindString":"Call signature","flags":{},"parameters":[{"id":33,"name":"owningView","kind":32768,"kindString":"Parameter","flags":{"isOptional":true},"type":{"type":"instrinct","name":"any"}}],"type":{"type":"instrinct","name":"any"}}]},{"id":38,"name":"process","kind":2048,"kindString":"Method","flags":{"isExported":true},"signatures":[{"id":39,"name":"process","kind":4096,"kindString":"Call signature","flags":{},"parameters":[{"id":40,"name":"viewPortInstruction","kind":32768,"kindString":"Parameter","flags":{"isOptional":true},"type":{"type":"instrinct","name":"any"}},{"id":41,"name":"waitToSwap","kind":32768,"kindString":"Parameter","flags":{"isOptional":true},"type":{"type":"instrinct","name":"any"}}],"type":{"type":"instrinct","name":"any"}}]},{"id":42,"name":"swap","kind":2048,"kindString":"Method","flags":{"isExported":true},"signatures":[{"id":43,"name":"swap","kind":4096,"kindString":"Call signature","flags":{},"parameters":[{"id":44,"name":"viewPortInstruction","kind":32768,"kindString":"Parameter","flags":{"isOptional":true},"type":{"type":"instrinct","name":"any"}}],"type":{"type":"instrinct","name":"any"}}]}],"groups":[{"title":"Constructors","kind":512,"children":[22]},{"title":"Properties","kind":1024,"children":[21,19,20,18]},{"title":"Methods","kind":2048,"children":[45,34,31,38,42]}]},{"id":47,"name":"TemplatingRouteLoader","kind":128,"kindString":"Class","flags":{"isExported":true},"children":[{"id":48,"name":"constructor","kind":512,"kindString":"Constructor","flags":{"isExported":true},"signatures":[{"id":49,"name":"new TemplatingRouteLoader","kind":16384,"kindString":"Constructor signature","flags":{},"parameters":[{"id":50,"name":"compositionEngine","kind":32768,"kindString":"Parameter","flags":{"isOptional":true},"type":{"type":"instrinct","name":"any"}}],"type":{"type":"reference","name":"TemplatingRouteLoader","id":47}}]},{"id":51,"name":"loadRoute","kind":2048,"kindString":"Method","flags":{"isExported":true},"signatures":[{"id":52,"name":"loadRoute","kind":4096,"kindString":"Call signature","flags":{},"parameters":[{"id":53,"name":"router","kind":32768,"kindString":"Parameter","flags":{"isOptional":true},"type":{"type":"instrinct","name":"any"}},{"id":54,"name":"config","kind":32768,"kindString":"Parameter","flags":{"isOptional":true},"type":{"type":"instrinct","name":"any"}}],"type":{"type":"instrinct","name":"any"},"overwrites":{"type":"reference","name":"RouteLoader.loadRoute"}}],"overwrites":{"type":"reference","name":"RouteLoader.loadRoute"}}],"groups":[{"title":"Constructors","kind":512,"children":[48]},{"title":"Methods","kind":2048,"children":[51]}],"extendedTypes":[{"type":"reference","name":"RouteLoader"}]}],"groups":[{"title":"Classes","kind":128,"children":[2,17,47]}]}

package.json

 {
   "name": "aurelia-templating-router",
-  "version": "1.0.0-beta.2.0.2",
+  "version": "1.0.0-beta.2.0.3",
   "description": "An implementation of the RouteLoader interface for use with the router module. Also contains a custom element that allows the templating engine to display the current route.",
@@ -5,0 +5,0 @@ "keywords": [

src/router-view.js

@@ -91,43 +91,33 @@ import {Container, inject} from 'aurelia-dependency-injection';
 
-    return Promise.resolve(this.composeLayout(layoutInstruction))
-    .then(layoutView => {
-      let viewStrategy = this.viewLocator.getViewStrategy(component.view || viewModel);
+    let viewStrategy = this.viewLocator.getViewStrategy(component.view || viewModel);
+    if (viewStrategy) {
+      viewStrategy.makeRelativeTo(Origin.get(component.router.container.viewModel.constructor).moduleId);
+    }
 
-      if (viewStrategy) {
-        viewStrategy.makeRelativeTo(Origin.get(component.router.container.viewModel.constructor).moduleId);
+    return metadata.load(childContainer, viewModelResource.value, null, viewStrategy, true)
+    .then(viewFactory => {
+      if (!this.compositionTransactionNotifier) {
+        this.compositionTransactionOwnershipToken = this.compositionTransaction.tryCapture();
       }
 
-      return metadata.load(childContainer, viewModelResource.value, null, viewStrategy, true)
-      .then(viewFactory => {
-        if (!this.compositionTransactionNotifier) {
-          this.compositionTransactionOwnershipToken = this.compositionTransaction.tryCapture();
-        }
+      if (layoutInstruction.viewModel || layoutInstruction.view) {
+        viewPortInstruction.layoutInstruction = layoutInstruction;
+      }
 
-        viewPortInstruction.layout = layoutView ? layoutView.view || layoutView : undefined;
+      viewPortInstruction.controller = metadata.create(childContainer,
+        BehaviorInstruction.dynamic(
+          this.element,
+          viewModel,
+          viewFactory
+        )
+      );
 
-        viewPortInstruction.controller = metadata.create(childContainer,
-          BehaviorInstruction.dynamic(
-            this.element,
-            viewModel,
-            viewFactory
-          )
-        );
+      if (waitToSwap) {
+        return;
+      }
 
-        if (waitToSwap) {
-          return;
-        }
-
-        this.swap(viewPortInstruction);
-      });
+      this.swap(viewPortInstruction);
     });
   }
 
-  composeLayout(instruction) {
-    if (instruction.viewModel || instruction.view) {
-      return this.compositionEngine.compose(instruction);
-    }
-
-    return undefined;
-  }
-
   swap(viewPortInstruction) {
@@ -137,9 +127,5 @@ let work = () => {
       let swapStrategy;
-      let layout = viewPortInstruction.layout;
-      let viewSlot = layout ? new ViewSlot(layout.firstChild, false) : this.viewSlot;
+      let viewSlot = this.viewSlot;
+      let layoutInstruction = viewPortInstruction.layoutInstruction;
 
-      if (layout) {
-        viewSlot.attached();
-      }
-
       swapStrategy = this.swapOrder in swapStrategies
@@ -150,11 +136,25 @@ ? swapStrategies[this.swapOrder]
       swapStrategy(viewSlot, previousView, () => {
-        if (layout) {
-          ShadowDOM.distributeView(viewPortInstruction.controller.view, layout.slots, viewSlot);
-          this._notify();
+        let waitForView;
+
+        if (layoutInstruction) {
+          if (!layoutInstruction.viewModel) {
+            // createController chokes if there's no viewmodel, so create a dummy one
+            // could possibly check if there was no VM and don't use compose, just create a viewfactory -> view?
+            layoutInstruction.viewModel = {};
+          }
+
+          waitForView = this.compositionEngine.createController(layoutInstruction).then(layout => {
+            ShadowDOM.distributeView(viewPortInstruction.controller.view, layout.slots || layout.view.slots);
+            return layout.view || layout;
+          });
         } else {
-          return Promise.resolve(viewSlot.add(viewPortInstruction.controller.view)).then(() => { this._notify(); });
+          waitForView = Promise.resolve(viewPortInstruction.controller.view);
         }
 
-        this.view = viewPortInstruction.controller.view;
-        return Promise.resolve();
+        return waitForView.then(newView => {
+          this.view = newView;
+          return viewSlot.add(newView);
+        }).then(() => {
+          this._notify();
+        });
       });
@@ -161,0 +161,0 @@ };

test/router-view.spec.js

@@ -33,3 +33,3 @@ import {StageComponent} from 'aurelia-testing';
     .then(() => {
-      return component.viewModel.router.navigate('route');
+      return component.viewModel.router.navigate('route').then(wait);
     })
@@ -46,3 +46,3 @@ .then(() => {
     .then(() => {
-      return component.viewModel.router.navigate('route');
+      return component.viewModel.router.navigate('route').then(wait);
     })
@@ -60,3 +60,3 @@ .then(() => {
     .then(() => {
-      return component.viewModel.router.navigate('route');
+      return component.viewModel.router.navigate('route').then(wait);
     })
@@ -75,3 +75,3 @@ .then(() => {
     .then(() => {
-      return component.viewModel.router.navigate('route');
+      return component.viewModel.router.navigate('route').then(wait);
     })
@@ -90,3 +90,3 @@ .then(() => {
     .then(() => {
-      return component.viewModel.router.navigate('route');
+      return component.viewModel.router.navigate('route').then(wait);
     })
@@ -108,3 +108,3 @@ .then(() => {
     .then(() => {
-      return component.viewModel.router.navigate('route');
+      return component.viewModel.router.navigate('route').then(wait);
     })
@@ -122,3 +122,3 @@ .then(() => {
     .then(() => {
-      return component.viewModel.router.navigate('route');
+      return component.viewModel.router.navigate('route').then(wait);
     })
@@ -132,2 +132,10 @@ .then(() => {
 
+function wait() {
+  return new Promise((res) => {
+    setTimeout(() => {
+      res();
+    }, 250);
+  });
+}
+
 function withDefaultViewport(routeConfig) {
@@ -134,0 +142,0 @@ let component = StageComponent

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Lines of code

3566

increased by0.11%

Worsened metrics

Total package byte prevSize

257874

decreased by-0.11%

No dependency changes