[Glimmer] Late bound layouts (#13588)

* Updating glimmer-engine WIP

* [Glimmer2] Late bound layouts

Author: chadhietala

package.json

@@ -37,7 +37,7 @@
     "express": "^4.5.0",
     "finalhandler": "^0.4.0",
     "github": "^0.2.3",
-    "glimmer-engine": "tildeio/glimmer#0beb69d",
+    "glimmer-engine": "tildeio/glimmer#525e75e",
     "glob": "^5.0.13",
     "htmlbars": "0.14.23",
     "mocha": "^2.4.5",

packages/ember-glimmer-template-compiler/lib/system/template.js

@@ -5,7 +5,8 @@ class Wrapper {
     return new this(options);
   }
 
-  constructor({ env }) {
+  constructor({ env }, id) {
+    this.id = id;
     this._entryPoint = null;
     this._layout = null;
     this.env = env;
@@ -30,13 +31,17 @@ class Wrapper {
   }
 }
 
+let templateId = 0;
 const template = function(json) {
-  return class extends Wrapper {
+  let id = templateId++;
+  let Factory = class extends Wrapper {
     constructor(options) {
-      super(options);
+      super(options, id);
       this.spec = JSON.parse(json);
     }
   };
+  Factory.id = id;
+  return Factory;
 };
 
 export default template;

packages/ember-glimmer-template-compiler/tests/precompile-test.js

@@ -0,0 +1,27 @@
+import { precompile, compile, template } from 'ember-glimmer-template-compiler';
+
+QUnit.module(`Glimmer Precompile:`);
+
+QUnit.test('returns a string', (assert) => {
+  let str = precompile('Hello');
+  assert.equal(typeof str, 'string');
+});
+
+QUnit.test('when wrapped in a template, precompile is the same as compile', (assert) => {
+  // Simulating what happens in a broccoli plugin
+  // when it is creating an AMD module. e.g.
+  // ...
+  // processString(content) {
+  //   return `template(${precompile(content)})`;
+  // }
+  let Precompiled = template(JSON.parse(precompile('Hello')));
+  let Compiled = compile('Hello');
+
+  assert.equal(Precompiled.toString(), Compiled.toString(), 'Both return factories');
+
+  let precompiled = new Precompiled({ env: {} });
+  let compiled = new Compiled({ env: {} });
+
+  assert.ok(typeof precompiled.spec !== 'string', 'Spec has been parsed');
+  assert.ok(typeof compiled.spec !== 'string', 'Spec has been parsed');
+});

packages/ember-glimmer/lib/environment.js

@@ -112,6 +112,7 @@ export default class Environment extends GlimmerEnvironment {
     super(dom);
     this.owner = owner;
     this._components = new Dict();
+    this._templateCache = new Dict();
     this.builtInModifiers = {
       action: new ActionModifierManager()
     };
@@ -131,25 +132,24 @@ export default class Environment extends GlimmerEnvironment {
 
     if (key !== 'partial' && isSimple && (isInline || isBlock)) {
       if (key === 'component') {
-        return new DynamicComponentSyntax({ args, templates, isBlock });
+        return new DynamicComponentSyntax({ args, templates });
       } else if (key === 'outlet') {
         return new OutletSyntax({ args });
       } else if (key.indexOf('-') >= 0) {
-        let definition = this.createComponentDefinition(path, isBlock);
+        let definition = this.getComponentDefinition(path);
 
         if (definition) {
           wrapClassBindingAttribute(args);
           wrapClassAttribute(args);
           return new CurlyComponentSyntax({ args, definition, templates });
+        } else if (isBlock && !this.hasHelper(key)) {
+          assert(`A helper named '${path[0]}' could not be found`, false);
         }
       } else {
         // Check if it's a keyword
         let mappedKey = builtInComponents[key];
         if (mappedKey) {
-          if (mappedKey !== key) {
-            path = path.map((segment) => segment === key ? mappedKey : segment);
-          }
-          let definition = this.createComponentDefinition(path, isBlock);
+          let definition = this.getComponentDefinition([mappedKey]);
           wrapClassBindingAttribute(args);
           wrapClassAttribute(args);
           return new CurlyComponentSyntax({ args, definition, templates });
@@ -167,14 +167,17 @@ export default class Environment extends GlimmerEnvironment {
     return false;
   }
 
-  createComponentDefinition(name, isBlock) {
+  getComponentDefinition(path) {
+    let name = path[0];
     let definition = this._components[name];
 
     if (!definition) {
-      let { component: ComponentClass, layout } = lookupComponent(this.owner, name[0]);
+      let { component: ComponentClass, layout } = lookupComponent(this.owner, name);
 
       if (ComponentClass || layout) {
-        definition = this._components[name] = new CurlyComponentDefinition(name, ComponentClass, layout, isBlock);
+        definition = this._components[name] = new CurlyComponentDefinition(name, ComponentClass, layout);
+      } else if (!this.hasHelper(name)) {
+        assert(`Glimmer error: Could not find component named "${name}" (no component or template with that name was found)`, !!(ComponentClass || layout));
       }
     }
 

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

@@ -2,10 +2,12 @@ import { StatementSyntax, ValueReference } from 'glimmer-runtime';
 import { AttributeBindingReference, RootReference, applyClassNameBinding } from '../utils/references';
 import { DIRTY_TAG, IS_DISPATCHING_ATTRS, HAS_BLOCK } from '../component';
 import { assert } from 'ember-metal/debug';
-import isEnabled from 'ember-metal/features';
-import { meta as metaFor } from 'ember-metal/meta';
-import { watchKey } from 'ember-metal/watch_key';
 import processArgs from '../utils/process-args';
+import { getOwner } from 'container/owner';
+import { privatize as P } from 'container/registry';
+import get from 'ember-metal/property_get';
+
+const DEFAULT_LAYOUT = P`template:components/-default`;
 
 function aliasIdToElementId(args, props) {
   if (args.named.has('id')) {
@@ -38,7 +40,7 @@ class ComponentStateBucket {
 }
 
 class CurlyComponentManager {
-  create(definition, args, dynamicScope) {
+  create(definition, args, dynamicScope, hasBlock) {
     let parentView = dynamicScope.view;
 
     let klass = definition.ComponentClass;
@@ -48,20 +50,10 @@ class CurlyComponentManager {
     aliasIdToElementId(args, props);
 
     props.renderer = parentView.renderer;
-    props[HAS_BLOCK] = definition.isBlock;
+    props[HAS_BLOCK] = hasBlock;
 
     let component = klass.create(props);
 
-    if (isEnabled('mandatory-setter')) {
-      let meta = metaFor(component);
-      let keys = Object.keys(props);
-
-      for (let i = 0; i < keys.length; i++) {
-        // Watching a key triggers Ember to install the mandatory setter
-        watchKey(component, keys[i], meta);
-      }
-    }
-
     dynamicScope.view = component;
     parentView.appendChild(component);
 
@@ -105,6 +97,37 @@ class CurlyComponentManager {
     return bucket;
   }
 
+  ensureCompilable(definition, bucket, env) {
+    if (definition.template) {
+      return definition;
+    }
+
+    let { component } = bucket;
+    let template;
+    let TemplateFactory = component.layout;
+    // seen the definition but not the template
+    if (TemplateFactory) {
+      if (env._templateCache[TemplateFactory.id]) {
+        template = env._templateCache[TemplateFactory.id];
+      } else {
+        template = new TemplateFactory(env);
+        env._templateCache[TemplateFactory.id] = template;
+      }
+    } else {
+      let layoutName = component.layoutName && get(component, 'layoutName');
+      let owner = getOwner(component);
+
+      if (layoutName) {
+        template = owner.lookup('template:' + layoutName);
+      }
+      if (!template) {
+        template = owner.lookup(DEFAULT_LAYOUT);
+      }
+    }
+
+    return definition.lateBound(template);
+  }
+
   getSelf({ component }) {
     return new RootReference(component);
   }
@@ -199,10 +222,10 @@ function elementId(vm) {
 }
 
 export class CurlyComponentDefinition extends ComponentDefinition {
-  constructor(name, ComponentClass, template, isBlock) {
+  constructor(name, ComponentClass, template) {
     super(name, MANAGER, ComponentClass || Component);
     this.template = template;
-    this.isBlock = isBlock;
+    this._cache = undefined;
   }
 
   compile(builder) {
@@ -211,4 +234,18 @@ export class CurlyComponentDefinition extends ComponentDefinition {
     builder.attrs.dynamic('id', elementId);
     builder.attrs.static('class', 'ember-view');
   }
+
+  lateBound(template) {
+    let definition;
+    if (this._cache) {
+      definition = this._cache[template.id];
+    } else {
+      this._cache = {};
+    }
+    if (!definition) {
+      definition = new CurlyComponentDefinition(this.name, this.ComponentClass, template);
+      this._cache[template.id] = definition;
+    }
+    return definition;
+  }
 }

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

@@ -1,28 +1,26 @@
 import { ArgsSyntax, StatementSyntax } from 'glimmer-runtime';
-import { ConstReference, isConst } from 'glimmer-reference';
-import { assert } from 'ember-metal/debug';
+import { ConstReference, isConst, UNDEFINED_REFERENCE } from 'glimmer-reference';
 
-class DynamicComponentLookup {
-  constructor(args, isBlock) {
-    this.args = ArgsSyntax.fromPositionalArgs(args.positional.slice(0, 1));
-    this.factory = (args, options) => dynamicComponentFor(args, options, isBlock);
-  }
-}
-
-function dynamicComponentFor(args, { env }, isBlock) {
+function dynamicComponentFor(vm) {
+  let env     = vm.env;
+  let args    = vm.getArgs();
   let nameRef = args.positional.at(0);
 
   if (isConst(nameRef)) {
-    return new ConstReference(lookup(env, nameRef.value(), isBlock));
+    let name = nameRef.value();
+    let definition = env.getComponentDefinition([name]);
+
+    return new ConstReference(definition);
   } else {
-    return new DynamicComponentReference({ nameRef, env, isBlock });
+    return new DynamicComponentReference({ nameRef, env });
   }
 }
 
 export class DynamicComponentSyntax extends StatementSyntax {
-  constructor({ args, templates, isBlock }) {
+  constructor({ args, templates }) {
     super();
-    this.definition = new DynamicComponentLookup(args, isBlock);
+    this.definitionArgs = ArgsSyntax.fromPositionalArgs(args.positional.slice(0, 1));
+    this.definition = dynamicComponentFor;
     this.args = ArgsSyntax.build(args.positional.slice(1), args.named);
     this.templates = templates;
     this.shadow = null;
@@ -34,27 +32,20 @@ export class DynamicComponentSyntax extends StatementSyntax {
 }
 
 class DynamicComponentReference {
-  constructor({ nameRef, env, isBlock }) {
+  constructor({ nameRef, env }) {
     this.nameRef = nameRef;
     this.env = env;
     this.tag = nameRef.tag;
-    this.isBlock = isBlock;
   }
 
   value() {
-    let { env, nameRef, isBlock } = this;
-    return lookup(env, nameRef.value(), isBlock);
+    let { env, nameRef } = this;
+    let name = nameRef.value();
+    let definition = env.getComponentDefinition([name]);
+    return definition;
   }
-}
-
-function lookup(env, name, isBlock) {
-  if (typeof name === 'string') {
-    let componentDefinition = env.createComponentDefinition([name], isBlock);
-    assert(`Glimmer error: Could not find component named "${name}" (no component or template with that name was found)`, componentDefinition);
 
-    return componentDefinition;
-  } else {
-    throw new Error(`Cannot render ${name} as a component`);
+  get() {
+    return UNDEFINED_REFERENCE;
   }
 }
-

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

@@ -3,19 +3,13 @@ import { ConstReference } from 'glimmer-reference';
 import { generateGuid, guidFor } from 'ember-metal/utils';
 import { RootReference, NULL_REFERENCE } from '../utils/references';
 
-class OutletComponentLookup {
-  constructor(args) {
-    this.args = args;
-    this.factory = outletComponentFor;
-  }
-}
-
-function outletComponentFor(args, vm) {
+function outletComponentFor(vm) {
   let { outletState, isTopLevel } = vm.dynamicScope();
 
   if (isTopLevel) {
     return new TopLevelOutletComponentReference(outletState);
   } else {
+    let args = vm.getArgs();
     let outletName = args.positional.at(0).value() || 'main';
     return new OutletComponentReference(outletName, outletState.get(outletName));
   }
@@ -24,7 +18,8 @@ function outletComponentFor(args, vm) {
 export class OutletSyntax extends StatementSyntax {
   constructor({ args }) {
     super();
-    this.definition = new OutletComponentLookup(args);
+    this.definitionArgs = args;
+    this.definition = outletComponentFor;
     this.args = ArgsSyntax.empty();
     this.templates = null;
     this.shadow = null;
@@ -59,8 +54,10 @@ class OutletComponentReference {
     let { outletName, reference, definition, lastState } = this;
     let newState = reference.value();
 
+    definition = revalidate(definition, lastState, newState);
+
     if (definition) {
-      return revalidate(definition, lastState, newState);
+      return definition;
     } else if (newState) {
       return this.definition = new OutletComponentDefinition(outletName, newState.render.template);
     } else {
@@ -96,6 +93,10 @@ class AbstractOutletComponentManager {
     throw new Error('Not implemented: create');
   }
 
+  ensureCompilable(definition) {
+    return definition;
+  }
+
   getSelf(state) {
     return new RootReference(state.render.controller);
   }

packages/ember-glimmer/lib/utils/lookup-component.js

@@ -1,22 +1,6 @@
-import { privatize as P } from 'container/registry';
-
-const DEFAULT_LAYOUT = P`template:components/-default`;
-
 function lookupComponentPair(componentLookup, owner, name, options) {
   let component = componentLookup.componentFor(name, owner, options);
   let layout = componentLookup.layoutFor(name, owner, options);
-
-  if (!layout && component) {
-    let layoutProp = component.proto().layout;
-    if (layoutProp) {
-      let templateFullName = 'template:components/' + name;
-      owner.register(templateFullName, layoutProp);
-      layout = owner.lookup(templateFullName, options);
-    } else {
-      layout = owner.lookup(DEFAULT_LAYOUT);
-    }
-  }
-
   return {
     component,
     layout