Merge pull request #14139 from emberjs/lazy-child-views

😪 Make `view.childViews` lazy

packages/ember-application/lib/system/application.js

@@ -4,6 +4,7 @@
 */
 import { ENV } from 'ember-environment';
 import { assert, debug } from 'ember-metal/debug';
+import dictionary from 'ember-metal/dictionary';
 import libraries from 'ember-metal/libraries';
 import { isTesting } from 'ember-metal/testing';
 import { get } from 'ember-metal/property_get';
@@ -1037,7 +1038,7 @@ Application.reopenClass({
 });
 
 function commonSetupRegistry(registry) {
-  registry.register('-view-registry:main', { create() { return {}; } });
+  registry.register('-view-registry:main', { create() { return dictionary(null); } });
 
   registry.register('route:basic', Route);
   registry.register('event_dispatcher:main', EventDispatcher);

packages/ember-glimmer/lib/renderer.js

@@ -8,6 +8,7 @@ import _runInTransaction from 'ember-metal/transaction';
 import isEnabled from 'ember-metal/features';
 import { BOUNDS } from './component';
 import { RootComponentDefinition } from './syntax/curly-component';
+import { getViewId } from 'ember-views/system/utils';
 
 let runInTransaction;
 
@@ -101,14 +102,14 @@ class Renderer {
     let self = new RootReference(view);
     let targetObject = view.outletState.render.controller;
     let ref = view.toReference();
-    let dynamicScope = new DynamicScope(view, ref, ref, true, targetObject);
+    let dynamicScope = new DynamicScope(null, ref, ref, true, targetObject);
     this._renderRoot(view, view.template, self, target, dynamicScope);
   }
 
   appendTo(view, target) {
     let rootDef = new RootComponentDefinition(view);
     let self = new RootReference(rootDef);
-    let dynamicScope = new DynamicScope(view, UNDEFINED_REFERENCE, UNDEFINED_REFERENCE, true, null);
+    let dynamicScope = new DynamicScope(null, UNDEFINED_REFERENCE, UNDEFINED_REFERENCE, true, null);
     this._renderRoot(view, this._rootTemplate, self, target, dynamicScope);
   }
 
@@ -126,12 +127,13 @@ class Renderer {
   }
 
   register(view) {
-    assert('Attempted to register a view with an id already in use: ' + view.elementId, !this._viewRegistry[view.elementId]);
-    this._viewRegistry[view.elementId] = view;
+    let id = getViewId(view);
+    assert('Attempted to register a view with an id already in use: ' + id, !this._viewRegistry[id]);
+    this._viewRegistry[id] = view;
   }
 
   unregister(view) {
-    delete this._viewRegistry[view.elementId];
+    delete this._viewRegistry[getViewId(view)];
   }
 
   remove(view) {

packages/ember-glimmer/lib/syntax/curly-component.js

@@ -200,7 +200,9 @@ class CurlyComponentManager {
     dynamicScope.view = component;
     dynamicScope.targetObject = component;
 
-    parentView.appendChild(component);
+    if (parentView !== null) {
+      parentView.appendChild(component);
+    }
 
     component.trigger('didInitAttrs', { attrs });
     component.trigger('didReceiveAttrs', { newAttrs: attrs });

packages/ember-glimmer/lib/views/outlet.js

@@ -130,11 +130,6 @@ export default class OutletView {
     this._renderResult = this.renderer.appendOutletView(this, target);
   }
 
-  appendChild(instance) {
-    instance.parentView = this;
-    instance.ownerView = this;
-  }
-
   rerender() {
     if (this._renderResult) { this.renderer.rerender(this); }
   }

packages/ember-glimmer/tests/integration/components/life-cycle-test.js

@@ -2,6 +2,7 @@ import { set } from 'ember-metal/property_set';
 import { Component } from '../../utils/helpers';
 import { strip } from '../../utils/abstract-test-case';
 import { moduleFor, RenderingTest } from '../../utils/test-case';
+import { getViewId } from 'ember-views/system/utils';
 import run from 'ember-metal/run_loop';
 
 class LifeCycleHooksTest extends RenderingTest {
@@ -45,16 +46,17 @@ class LifeCycleHooksTest extends RenderingTest {
 
   assertRegisteredViews(label) {
     let viewRegistry = this.owner.lookup('-view-registry:main');
-    let actual = Object.keys(viewRegistry).sort();
-    let expected = this.componentRegistry.slice().sort();
+    let topLevelId = getViewId(this.component);
+    let actual = Object.keys(viewRegistry).sort().filter(id => id !== topLevelId);
+    let expected = this.componentRegistry.sort();
 
     this.assert.deepEqual(actual, expected, 'registered views - ' + label);
   }
 
   registerComponent(name, { template = null }) {
     let pushComponent = (instance) => {
       this.components[name] = instance;
-      this.componentRegistry.push(instance.elementId);
+      this.componentRegistry.push(getViewId(instance));
     };
 
     let removeComponent = (instance) => {
@@ -69,8 +71,10 @@ class LifeCycleHooksTest extends RenderingTest {
     };
 
     let assertParentView = (hookName, instance) => {
-      if (!instance.parentView) {
-        this.assert.ok(false, `parentView should be present in ${hookName}`);
+      this.assert.ok(instance.parentView, `parentView should be present in ${hookName}`);
+
+      if (this.isHTMLBars) {
+        this.assert.ok(instance.ownerView, `ownerView should be present in ${hookName}`);
       }
     };
 

packages/ember-glimmer/tests/integration/components/link-to-test.js

@@ -2,16 +2,11 @@ import { moduleFor, ApplicationTest } from '../../utils/test-case';
 import Controller from 'ember-runtime/controllers/controller';
 import Route from 'ember-routing/system/route';
 import { set } from 'ember-metal/property_set';
-import run from 'ember-metal/run_loop';
 import { LinkTo } from '../../utils/helpers';
 import { classes as classMatcher } from '../../utils/test-helpers';
 import isEnabled from 'ember-metal/features';
 
 moduleFor('Link-to component', class extends ApplicationTest {
-  runTask(fn) {
-    run(fn);
-  }
-
   visitWithDeprecation(path, deprecation) {
     let p;
 
@@ -172,10 +167,6 @@ moduleFor('Link-to component with query-params', class extends ApplicationTest {
     }
   }
 
-  runTask(fn) {
-    run(fn);
-  }
-
   ['@test populates href with fully supplied query param values'](assert) {
     this.registerTemplate('index', `{{#link-to 'index' (query-params foo='456' bar='NAW')}}Index{{/link-to}}`);