ember-source 4.4.0-alpha.3 → 4.4.0-alpha.4

package/dist/packages/@ember/-internals/glimmer/index.js

@@ -300,7 +300,7 @@ class ForkedValue {
 class AbstractInput extends InternalComponent {
   constructor() {
     super(...arguments);
-    this._value = valueFrom(this.args.named.value);
+    this._value = valueFrom(this.args.named['value']);
   }
 
   validateArguments() {
@@ -555,7 +555,7 @@ if (hasDOM) {
 class Input extends AbstractInput {
   constructor() {
     super(...arguments);
-    this._checked = valueFrom(this.args.named.checked);
+    this._checked = valueFrom(this.args.named['checked']);
   }
 
   static toString() {
@@ -595,7 +595,7 @@ class Input extends AbstractInput {
 
   get checked() {
     if (this.isCheckbox) {
-      warn('`<Input @type="checkbox" />` reflects its checked state via the `@checked` argument. ' + 'You wrote `<Input @type="checkbox" @value={{...}} />` which is likely not what you intended. ' + 'Did you mean `<Input @type="checkbox" @checked={{...}} />`?', untrack(() => this.args.named.checked !== undefined || this.args.named.value === undefined || typeof valueForRef(this.args.named.value) === 'string'), {
+      warn('`<Input @type="checkbox" />` reflects its checked state via the `@checked` argument. ' + 'You wrote `<Input @type="checkbox" @value={{...}} />` which is likely not what you intended. ' + 'Did you mean `<Input @type="checkbox" @checked={{...}} />`?', untrack(() => this.args.named['checked'] !== undefined || this.args.named['value'] === undefined || typeof valueForRef(this.args.named['value']) === 'string'), {
         id: 'ember.built-in-components.input-checkbox-value'
       });
       return this._checked.get();
@@ -605,7 +605,7 @@ class Input extends AbstractInput {
   }
 
   set checked(checked) {
-    warn('`<Input @type="checkbox" />` reflects its checked state via the `@checked` argument. ' + 'You wrote `<Input @type="checkbox" @value={{...}} />` which is likely not what you intended. ' + 'Did you mean `<Input @type="checkbox" @checked={{...}} />`?', untrack(() => this.args.named.checked !== undefined || this.args.named.value === undefined || typeof valueForRef(this.args.named.value) === 'string'), {
+    warn('`<Input @type="checkbox" />` reflects its checked state via the `@checked` argument. ' + 'You wrote `<Input @type="checkbox" @value={{...}} />` which is likely not what you intended. ' + 'Did you mean `<Input @type="checkbox" @checked={{...}} />`?', untrack(() => this.args.named['checked'] !== undefined || this.args.named['value'] === undefined || typeof valueForRef(this.args.named['value']) === 'string'), {
       id: 'ember.built-in-components.input-checkbox-value'
     });
 
@@ -1898,8 +1898,8 @@ var action$1 = internalHelper(args => {
   let [context, action$$1, ...restArgs] = positional;
   assert('hash position arguments', context && action$$1);
   let debugKey = action$$1.debugLabel;
-  let target = 'target' in named && named.target ? named.target : context;
-  let processArgs = makeArgsProcessor('value' in named && named.value || false, restArgs);
+  let target = 'target' in named ? named['target'] : context;
+  let processArgs = makeArgsProcessor('value' in named && named['value'] || false, restArgs);
   let fn$$1;
 
   if (isInvokableRef(action$$1)) {
@@ -2492,625 +2492,6 @@ function isCurlyManager(manager) {
 }
 
 let lazyEventsProcessed = new WeakMap();
-/**
-@module @ember/component
-*/
-
-/**
-  A component is a reusable UI element that consists of a `.hbs` template and an
-  optional JavaScript class that defines its behavior. For example, someone
-  might make a `button` in the template and handle the click behavior in the
-  JavaScript file that shares the same name as the template.
-
-  Components are broken down into two categories:
-
-  - Components _without_ JavaScript, that are based only on a template. These
-    are called Template-only or TO components.
-  - Components _with_ JavaScript, which consist of a template and a backing
-    class.
-
-  Ember ships with two types of JavaScript classes for components:
-
-  1. Glimmer components, imported from `@glimmer/component`, which are the
-     default component's for Ember Octane (3.15) and more recent editions.
-  2. Classic components, imported from `@ember/component`, which were the
-     default for older editions of Ember (pre 3.15).
-
-  Below is the documentation for Classic components. If you are looking for the
-  API documentation for Template-only or Glimmer components, it is
-  [available here](/ember/release/modules/@glimmer%2Fcomponent).
-
-  ## Defining a Classic Component
-
-  If you want to customize the component in order to handle events, transform
-  arguments or maintain internal state, you implement a subclass of `Component`.
-
-  One example is to add computed properties to your component:
-
-  ```app/components/person-profile.js
-  import Component from '@ember/component';
-
-  export default Component.extend({
-    displayName: computed('person.title', 'person.firstName', 'person.lastName', function() {
-      let { title, firstName, lastName } = this.person;
-
-      if (title) {
-        return `${title} ${lastName}`;
-      } else {
-        return `${firstName} ${lastName}`;
-      }
-    })
-  });
-  ```
-
-  And then use it in the component's template:
-
-  ```app/templates/components/person-profile.hbs
-  <h1>{{this.displayName}}</h1>
-  {{yield}}
-  ```
-
-  ## Customizing a Classic Component's HTML Element in JavaScript
-
-  ### HTML Tag
-
-  The default HTML tag name used for a component's HTML representation is `div`.
-  This can be customized by setting the `tagName` property.
-
-  Consider the following component class:
-
-  ```app/components/emphasized-paragraph.js
-  import Component from '@ember/component';
-
-  export default Component.extend({
-    tagName: 'em'
-  });
-  ```
-
-  When invoked, this component would produce output that looks something like
-  this:
-
-  ```html
-  <em id="ember1" class="ember-view"></em>
-  ```
-
-  ### HTML `class` Attribute
-
-  The HTML `class` attribute of a component's tag can be set by providing a
-  `classNames` property that is set to an array of strings:
-
-  ```app/components/my-widget.js
-  import Component from '@ember/component';
-
-  export default Component.extend({
-    classNames: ['my-class', 'my-other-class']
-  });
-  ```
-
-  Invoking this component will produce output that looks like this:
-
-  ```html
-  <div id="ember1" class="ember-view my-class my-other-class"></div>
-  ```
-
-  `class` attribute values can also be set by providing a `classNameBindings`
-  property set to an array of properties names for the component. The return
-  value of these properties will be added as part of the value for the
-  components's `class` attribute. These properties can be computed properties:
-
-  ```app/components/my-widget.js
-  import Component from '@ember/component';
-  import { computed } from '@ember/object';
-
-  export default Component.extend({
-    classNames: ['my-class', 'my-other-class'],
-    classNameBindings: ['propertyA', 'propertyB'],
-
-    propertyA: 'from-a',
-    propertyB: computed(function() {
-      if (someLogic) { return 'from-b'; }
-    })
-  });
-  ```
-
-  Invoking this component will produce HTML that looks like:
-
-  ```html
-  <div id="ember1" class="ember-view my-class my-other-class from-a from-b"></div>
-  ```
-
-  Note that `classNames` and `classNameBindings` is in addition to the `class`
-  attribute passed with the angle bracket invocation syntax. Therefore, if this
-  component was invoked like so:
-
-  ```handlebars
-  <MyWidget class="from-invocation" />
-  ```
-
-  The resulting HTML will look similar to this:
-
-  ```html
-  <div id="ember1" class="from-invocation ember-view my-class my-other-class from-a from-b"></div>
-  ```
-
-  If the value of a class name binding returns a boolean the property name
-  itself will be used as the class name if the property is true. The class name
-  will not be added if the value is `false` or `undefined`.
-
-  ```app/components/my-widget.js
-  import Component from '@ember/component';
-
-  export default Component.extend({
-    classNameBindings: ['hovered'],
-
-    hovered: true
-  });
-  ```
-
-  Invoking this component will produce HTML that looks like:
-
-  ```html
-  <div id="ember1" class="ember-view hovered"></div>
-  ```
-
-  ### Custom Class Names for Boolean Values
-
-  When using boolean class name bindings you can supply a string value other
-  than the property name for use as the `class` HTML attribute by appending the
-  preferred value after a ":" character when defining the binding:
-
-  ```app/components/my-widget.js
-  import Component from '@ember/component';
-
-  export default Component.extend({
-    classNameBindings: ['awesome:so-very-cool'],
-
-    awesome: true
-  });
-  ```
-
-  Invoking this component will produce HTML that looks like:
-
-  ```html
-  <div id="ember1" class="ember-view so-very-cool"></div>
-  ```
-
-  Boolean value class name bindings whose property names are in a
-  camelCase-style format will be converted to a dasherized format:
-
-  ```app/components/my-widget.js
-  import Component from '@ember/component';
-
-  export default Component.extend({
-    classNameBindings: ['isUrgent'],
-
-    isUrgent: true
-  });
-  ```
-
-  Invoking this component will produce HTML that looks like:
-
-  ```html
-  <div id="ember1" class="ember-view is-urgent"></div>
-  ```
-
-  Class name bindings can also refer to object values that are found by
-  traversing a path relative to the component itself:
-
-  ```app/components/my-widget.js
-  import Component from '@ember/component';
-  import EmberObject from '@ember/object';
-
-  export default Component.extend({
-    classNameBindings: ['messages.empty'],
-
-    messages: EmberObject.create({
-      empty: true
-    })
-  });
-  ```
-
-  Invoking this component will produce HTML that looks like:
-
-  ```html
-  <div id="ember1" class="ember-view empty"></div>
-  ```
-
-  If you want to add a class name for a property which evaluates to true and
-  and a different class name if it evaluates to false, you can pass a binding
-  like this:
-
-  ```app/components/my-widget.js
-  import Component from '@ember/component';
-
-  export default Component.extend({
-    classNameBindings: ['isEnabled:enabled:disabled'],
-    isEnabled: true
-  });
-  ```
-
-  Invoking this component will produce HTML that looks like:
-
-  ```html
-  <div id="ember1" class="ember-view enabled"></div>
-  ```
-
-  When isEnabled is `false`, the resulting HTML representation looks like this:
-
-  ```html
-  <div id="ember1" class="ember-view disabled"></div>
-  ```
-
-  This syntax offers the convenience to add a class if a property is `false`:
-
-  ```app/components/my-widget.js
-  import Component from '@ember/component';
-
-  // Applies no class when isEnabled is true and class 'disabled' when isEnabled is false
-  export default Component.extend({
-    classNameBindings: ['isEnabled::disabled'],
-    isEnabled: true
-  });
-  ```
-
-  Invoking this component when the `isEnabled` property is true will produce
-  HTML that looks like:
-
-  ```html
-  <div id="ember1" class="ember-view"></div>
-  ```
-
-  Invoking it when the `isEnabled` property on the component is `false` will
-  produce HTML that looks like:
-
-  ```html
-  <div id="ember1" class="ember-view disabled"></div>
-  ```
-
-  Updates to the value of a class name binding will result in automatic update
-  of the  HTML `class` attribute in the component's rendered HTML
-  representation. If the value becomes `false` or `undefined` the class name
-  will be removed.
-
-  Both `classNames` and `classNameBindings` are concatenated properties. See
-  [EmberObject](/ember/release/classes/EmberObject) documentation for more
-  information about concatenated properties.
-
-  ### Other HTML Attributes
-
-  The HTML attribute section of a component's tag can be set by providing an
-  `attributeBindings` property set to an array of property names on the component.
-  The return value of these properties will be used as the value of the component's
-  HTML associated attribute:
-
-  ```app/components/my-anchor.js
-  import Component from '@ember/component';
-
-  export default Component.extend({
-    tagName: 'a',
-    attributeBindings: ['href'],
-
-    href: 'http://google.com'
-  });
-  ```
-
-  Invoking this component will produce HTML that looks like:
-
-  ```html
-  <a id="ember1" class="ember-view" href="http://google.com"></a>
-  ```
-
-  One property can be mapped on to another by placing a ":" between
-  the source property and the destination property:
-
-  ```app/components/my-anchor.js
-  import Component from '@ember/component';
-
-  export default Component.extend({
-    tagName: 'a',
-    attributeBindings: ['url:href'],
-
-    url: 'http://google.com'
-  });
-  ```
-
-  Invoking this component will produce HTML that looks like:
-
-  ```html
-  <a id="ember1" class="ember-view" href="http://google.com"></a>
-  ```
-
-  HTML attributes passed with angle bracket invocations will take precedence
-  over those specified in `attributeBindings`. Therefore, if this component was
-  invoked like so:
-
-  ```handlebars
-  <MyAnchor href="http://bing.com" @url="http://google.com" />
-  ```
-
-  The resulting HTML will looks like this:
-
-  ```html
-  <a id="ember1" class="ember-view" href="http://bing.com"></a>
-  ```
-
-  Note that the `href` attribute is ultimately set to `http://bing.com`,
-  despite it having attribute binidng to the `url` property, which was
-  set to `http://google.com`.
-
-  Namespaced attributes (e.g. `xlink:href`) are supported, but have to be
-  mapped, since `:` is not a valid character for properties in Javascript:
-
-  ```app/components/my-use.js
-  import Component from '@ember/component';
-
-  export default Component.extend({
-    tagName: 'use',
-    attributeBindings: ['xlinkHref:xlink:href'],
-
-    xlinkHref: '#triangle'
-  });
-  ```
-
-  Invoking this component will produce HTML that looks like:
-
-  ```html
-  <use xlink:href="#triangle"></use>
-  ```
-
-  If the value of a property monitored by `attributeBindings` is a boolean, the
-  attribute will be present or absent depending on the value:
-
-  ```app/components/my-text-input.js
-  import Component from '@ember/component';
-
-  export default Component.extend({
-    tagName: 'input',
-    attributeBindings: ['disabled'],
-
-    disabled: false
-  });
-  ```
-
-  Invoking this component will produce HTML that looks like:
-
-  ```html
-  <input id="ember1" class="ember-view" />
-  ```
-
-  `attributeBindings` can refer to computed properties:
-
-  ```app/components/my-text-input.js
-  import Component from '@ember/component';
-  import { computed } from '@ember/object';
-
-  export default Component.extend({
-    tagName: 'input',
-    attributeBindings: ['disabled'],
-
-    disabled: computed(function() {
-      if (someLogic) {
-        return true;
-      } else {
-        return false;
-      }
-    })
-  });
-  ```
-
-  To prevent setting an attribute altogether, use `null` or `undefined` as the
-  value of the property used in `attributeBindings`:
-
-  ```app/components/my-text-input.js
-  import Component from '@ember/component';
-
-  export default Component.extend({
-    tagName: 'form',
-    attributeBindings: ['novalidate'],
-    novalidate: null
-  });
-  ```
-
-  Updates to the property of an attribute binding will result in automatic
-  update of the  HTML attribute in the component's HTML output.
-
-  `attributeBindings` is a concatenated property. See
-  [EmberObject](/ember/release/classes/EmberObject) documentation for more
-  information about concatenated properties.
-
-  ## Layouts
-
-  The `layout` property can be used to dynamically specify a template associated
-  with a component class, instead of relying on Ember to link together a
-  component class and a template based on file names.
-
-  In general, applications should not use this feature, but it's commonly used
-  in addons for historical reasons.
-
-  The `layout` property should be set to the default export of a template
-  module, which is the name of a template file without the `.hbs` extension.
-
-  ```app/templates/components/person-profile.hbs
-  <h1>Person's Title</h1>
-  <div class='details'>{{yield}}</div>
-  ```
-
-  ```app/components/person-profile.js
-    import Component from '@ember/component';
-    import layout from '../templates/components/person-profile';
-
-    export default Component.extend({
-      layout
-    });
-  ```
-
-  If you invoke the component:
-
-  ```handlebars
-  <PersonProfile>
-    <h2>Chief Basket Weaver</h2>
-    <h3>Fisherman Industries</h3>
-  </PersonProfile>
-  ```
-
-  or
-
-  ```handlebars
-  {{#person-profile}}
-    <h2>Chief Basket Weaver</h2>
-    <h3>Fisherman Industries</h3>
-  {{/person-profile}}
-  ```
-
-  It will result in the following HTML output:
-
-  ```html
-  <h1>Person's Title</h1>
-    <div class="details">
-    <h2>Chief Basket Weaver</h2>
-    <h3>Fisherman Industries</h3>
-  </div>
-  ```
-
-  ## Handling Browser Events
-
-  Components can respond to user-initiated events in one of three ways: passing
-  actions with angle bracket invocation, adding event handler methods to the
-  component's class, or adding actions to the component's template.
-
-  ### Passing Actions With Angle Bracket Invocation
-
-  For one-off events specific to particular instance of a component, it is possible
-  to pass actions to the component's element using angle bracket invocation syntax.
-
-  ```handlebars
-  <MyWidget {{action 'firstWidgetClicked'}} />
-
-  <MyWidget {{action 'secondWidgetClicked'}} />
-  ```
-
-  In this case, when the first component is clicked on, Ember will invoke the
-  `firstWidgetClicked` action. When the second component is clicked on, Ember
-  will invoke the `secondWidgetClicked` action instead.
-
-  Besides `{{action}}`, it is also possible to pass any arbitrary element modifiers
-  using the angle bracket invocation syntax.
-
-  ### Event Handler Methods
-
-  Components can also respond to user-initiated events by implementing a method
-  that matches the event name. This approach is appropriate when the same event
-  should be handled by all instances of the same component.
-
-  An event object will be passed as the argument to the event handler method.
-
-  ```app/components/my-widget.js
-  import Component from '@ember/component';
-
-  export default Component.extend({
-    click(event) {
-      // `event.target` is either the component's element or one of its children
-      let tag = event.target.tagName.toLowerCase();
-      console.log('clicked on a `<${tag}>` HTML element!');
-    }
-  });
-  ```
-
-  In this example, whenever the user clicked anywhere inside the component, it
-  will log a message to the console.
-
-  It is possible to handle event types other than `click` by implementing the
-  following event handler methods. In addition, custom events can be registered
-  by using `Application.customEvents`.
-
-  Touch events:
-
-  * `touchStart`
-  * `touchMove`
-  * `touchEnd`
-  * `touchCancel`
-
-  Keyboard events:
-
-  * `keyDown`
-  * `keyUp`
-  * `keyPress`
-
-  Mouse events:
-
-  * `mouseDown`
-  * `mouseUp`
-  * `contextMenu`
-  * `click`
-  * `doubleClick`
-  * `focusIn`
-  * `focusOut`
-
-  Form events:
-
-  * `submit`
-  * `change`
-  * `focusIn`
-  * `focusOut`
-  * `input`
-
-  Drag and drop events:
-
-  * `dragStart`
-  * `drag`
-  * `dragEnter`
-  * `dragLeave`
-  * `dragOver`
-  * `dragEnd`
-  * `drop`
-
-  ### `{{action}}` Helper
-
-  Instead of handling all events of a particular type anywhere inside the
-  component's element, you may instead want to limit it to a particular
-  element in the component's template. In this case, it would be more
-  convenient to implement an action instead.
-
-  For example, you could implement the action `hello` for the `person-profile`
-  component:
-
-  ```app/components/person-profile.js
-  import Component from '@ember/component';
-
-  export default Component.extend({
-    actions: {
-      hello(name) {
-        console.log("Hello", name);
-      }
-    }
-  });
-  ```
-
-  And then use it in the component's template:
-
-  ```app/templates/components/person-profile.hbs
-  <h1>{{@person.name}}</h1>
-
-  <button {{action 'hello' @person.name}}>
-    Say Hello to {{@person.name}}
-  </button>
-  ```
-
-  When the user clicks the button, Ember will invoke the `hello` action,
-  passing in the current value of `@person.name` as an argument.
-
-  See [Ember.Templates.helpers.action](/ember/release/classes/Ember.Templates.helpers/methods/action?anchor=action).
-
-  @class Component
-  @extends Ember.CoreView
-  @uses Ember.TargetActionSupport
-  @uses Ember.ClassNamesSupport
-  @uses Ember.ActionSupport
-  @uses Ember.ViewMixin
-  @uses Ember.ViewStateSupport
-  @public
-*/
-
 const Component = CoreView.extend(ChildViewsSupport, ViewStateSupport, ClassNamesSupport, TargetActionSupport, ActionSupport, ViewMixin, {
   isComponent: true,
 
@@ -3417,23 +2798,6 @@ const Component = CoreView.extend(ChildViewsSupport, ViewStateSupport, ClassName
    @since 1.13.0
    */
 
-  /**
-    Layout can be used to wrap content in a component.
-    @property layout
-    @type Function
-    @public
-  */
-
-  /**
-    The name of the layout to lookup if no layout is provided.
-    By default `Component` will lookup a template with this name in
-    `Ember.TEMPLATES` (a shared global object).
-    @property layoutName
-    @type String
-    @default null
-    @private
-  */
-
   /**
     The HTML `id` of the component's element in the DOM. You can provide this
     value yourself but it must be unique (just as in HTML):
@@ -4470,7 +3834,7 @@ setGlobalContext({
   },
 
   warnIfStyleNotTrusted(value) {
-    warn(constructStyleDeprecationMessage(value), (() => {
+    warn(constructStyleDeprecationMessage(String(value)), (() => {
       if (value === null || value === undefined || isHTMLSafe$1(value)) {
         return true;
       }
@@ -4558,9 +3922,9 @@ var disallowDynamicResolution = internalHelper(({
 }) => {
   const nameOrValueRef = positional[0];
   assert(`[BUG] wrong number of positional arguments, expecting 1, got ${positional.length}`, positional.length === 1 && nameOrValueRef);
-  let typeRef = named.type;
-  let locRef = named.loc;
-  let originalRef = named.original;
+  let typeRef = named['type'];
+  let locRef = named['loc'];
+  let originalRef = named['original'];
   assert(`[BUG] expecting \`type\` named argument`, typeRef);
   assert(`[BUG] expecting \`loc\` named argument`, locRef);
   assert(`[BUG] expecting \`original\` named argument`, originalRef); // Bug: why do these fail?
@@ -5462,7 +4826,7 @@ const outletHelper = internalHelper((_args, owner, scope) => {
   let outletRef = createComputeRef(() => {
     let state = valueForRef(scope.get('outletState'));
     let outlets = state !== undefined ? state.outlets : undefined;
-    return outlets !== undefined ? outlets.main : undefined;
+    return outlets !== undefined ? outlets['main'] : undefined;
   });
   let lastState = null;
   let definition = null;
@@ -5487,7 +4851,7 @@ const outletHelper = internalHelper((_args, owner, scope) => {
         // provide the correct updated value. So we stop updating and return
         // the _last_ model value for that outlet.
 
-        named.model = createComputeRef(() => {
+        named['model'] = createComputeRef(() => {
           if (lastState === state) {
             model = valueForRef(modelRef);
           }
@@ -5496,7 +4860,7 @@ const outletHelper = internalHelper((_args, owner, scope) => {
         });
 
         if (DEBUG) {
-          named.model = createDebugAliasRef('@model', named.model);
+          named['model'] = createDebugAliasRef('@model', named['model']);
         }
 
         let args = createCapturedArgs(named, EMPTY_POSITIONAL);
@@ -5777,6 +5141,104 @@ class ResolverImpl {
 
 }
 
+const TOP_LEVEL_NAME = '-top-level';
+const TOP_LEVEL_OUTLET = 'main';
+class OutletView {
+  constructor(_environment, owner, template, namespace) {
+    this._environment = _environment;
+    this.owner = owner;
+    this.template = template;
+    this.namespace = namespace;
+    let outletStateTag = createTag();
+    let outletState = {
+      outlets: {
+        main: undefined
+      },
+      render: {
+        owner: owner,
+        into: undefined,
+        outlet: TOP_LEVEL_OUTLET,
+        name: TOP_LEVEL_NAME,
+        controller: undefined,
+        model: undefined,
+        template
+      }
+    };
+    let ref = this.ref = createComputeRef(() => {
+      consumeTag(outletStateTag);
+      return outletState;
+    }, state => {
+      dirtyTag(outletStateTag);
+      outletState.outlets['main'] = state;
+    });
+    this.state = {
+      ref,
+      name: TOP_LEVEL_NAME,
+      outlet: TOP_LEVEL_OUTLET,
+      template,
+      controller: undefined,
+      model: undefined
+    };
+  }
+
+  static extend(injections) {
+    return class extends OutletView {
+      static create(options) {
+        if (options) {
+          return super.create(Object.assign({}, injections, options));
+        } else {
+          return super.create(injections);
+        }
+      }
+
+    };
+  }
+
+  static reopenClass(injections) {
+    Object.assign(this, injections);
+  }
+
+  static create(options) {
+    let {
+      environment: _environment,
+      application: namespace,
+      template: templateFactory$$1
+    } = options;
+    let owner = getOwner(options);
+    assert('OutletView is unexpectedly missing an owner', owner);
+    let template = templateFactory$$1(owner);
+    return new OutletView(_environment, owner, template, namespace);
+  }
+
+  appendTo(selector) {
+    let target;
+
+    if (this._environment.hasDOM) {
+      target = typeof selector === 'string' ? document.querySelector(selector) : selector;
+    } else {
+      target = selector;
+    }
+
+    let renderer = this.owner.lookup('renderer:-dom'); // SAFETY: It's not clear that this cast is safe.
+    // The types for appendOutletView may be incorrect or this is a potential bug.
+
+    schedule('render', renderer, 'appendOutletView', this, target);
+  }
+
+  rerender() {
+    /**/
+  }
+
+  setOutletState(state) {
+    updateRef(this.ref, state);
+  }
+
+  destroy() {
+    /**/
+  }
+
+}
+
 class DynamicScope {
   constructor(view, outletState) {
     this.view = view;
@@ -5831,7 +5293,7 @@ class RootState {
     this.root = root;
     this.runtime = runtime;
     assert(`You cannot render \`${valueForRef(self)}\` without a template.`, template !== undefined);
-    this.id = getViewId(root);
+    this.id = root instanceof OutletView ? guidFor(root) : getViewId(root);
     this.result = undefined;
     this.destroyed = false;
     this.render = errorLoopTransaction(() => {
@@ -6263,104 +5725,6 @@ var OutletTemplate = templateFactory({
   "isStrictMode": false
 });
 
-const TOP_LEVEL_NAME = '-top-level';
-const TOP_LEVEL_OUTLET = 'main';
-class OutletView {
-  constructor(_environment, owner, template, namespace) {
-    this._environment = _environment;
-    this.owner = owner;
-    this.template = template;
-    this.namespace = namespace;
-    let outletStateTag = createTag();
-    let outletState = {
-      outlets: {
-        main: undefined
-      },
-      render: {
-        owner: owner,
-        into: undefined,
-        outlet: TOP_LEVEL_OUTLET,
-        name: TOP_LEVEL_NAME,
-        controller: undefined,
-        model: undefined,
-        template
-      }
-    };
-    let ref = this.ref = createComputeRef(() => {
-      consumeTag(outletStateTag);
-      return outletState;
-    }, state => {
-      dirtyTag(outletStateTag);
-      outletState.outlets.main = state;
-    });
-    this.state = {
-      ref,
-      name: TOP_LEVEL_NAME,
-      outlet: TOP_LEVEL_OUTLET,
-      template,
-      controller: undefined,
-      model: undefined
-    };
-  }
-
-  static extend(injections) {
-    return class extends OutletView {
-      static create(options) {
-        if (options) {
-          return super.create(Object.assign({}, injections, options));
-        } else {
-          return super.create(injections);
-        }
-      }
-
-    };
-  }
-
-  static reopenClass(injections) {
-    Object.assign(this, injections);
-  }
-
-  static create(options) {
-    let {
-      environment: _environment,
-      application: namespace,
-      template: templateFactory$$1
-    } = options;
-    let owner = getOwner(options);
-    assert('OutletView is unexpectedly missing an owner', owner);
-    let template = templateFactory$$1(owner);
-    return new OutletView(_environment, owner, template, namespace);
-  }
-
-  appendTo(selector) {
-    let target;
-
-    if (this._environment.hasDOM) {
-      target = typeof selector === 'string' ? document.querySelector(selector) : selector;
-    } else {
-      target = selector;
-    }
-
-    let renderer = this.owner.lookup('renderer:-dom'); // SAFETY: It's not clear that this cast is safe.
-    // The types for appendOutletView may be incorrect or this is a potential bug.
-
-    schedule('render', renderer, 'appendOutletView', this, target);
-  }
-
-  rerender() {
-    /**/
-  }
-
-  setOutletState(state) {
-    updateRef(this.ref, state);
-  }
-
-  destroy() {
-    /**/
-  }
-
-}
-
 function setupApplicationRegistry(registry) {
   // because we are using injections we can't use instantiate false
   // we need to use bind() to copy the function so factory for