[WIP] Glimmer tags integration

ember-cli-build.js

@@ -77,6 +77,7 @@ module.exports = function() {
     addGlimmerPackage(vendorPackages, 'glimmer');
     addGlimmerPackage(vendorPackages, 'glimmer-compiler');
     addGlimmerPackage(vendorPackages, 'glimmer-object');
+    addGlimmerPackage(vendorPackages, 'glimmer-object-reference');
     addGlimmerPackage(vendorPackages, 'glimmer-reference');
     addGlimmerPackage(vendorPackages, 'glimmer-runtime');
     addGlimmerPackage(vendorPackages, 'glimmer-syntax');

lib/packages.js

@@ -36,6 +36,7 @@ if (glimmerStatus === null || glimmerStatus === true) {
     ],
     testingVendorRequirements: [
       'glimmer-object',
+      'glimmer-object-reference',
       'glimmer-engine-tests'
     ],
     hasTemplates: true

package.json

@@ -38,7 +38,7 @@
     "express": "^4.5.0",
     "finalhandler": "^0.4.0",
     "github": "^0.2.3",
-    "glimmer-engine": "tildeio/glimmer#33e6c9a",
+    "glimmer-engine": "tildeio/glimmer#2849de8",
     "glob": "^5.0.13",
     "htmlbars": "0.14.16",
     "mocha": "^2.4.5",

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

@@ -141,8 +141,10 @@ const ApplicationInstance = EngineInstance.extend({
 
     if (options.isInteractive) {
       registry.injection('view', 'renderer', 'renderer:-dom');
+      registry.injection('component', 'renderer', 'renderer:-dom');
     } else {
       registry.injection('view', 'renderer', 'renderer:-inert');
+      registry.injection('component', 'renderer', 'renderer:-inert');
     }
 
     if (options.rootElement) {

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

@@ -1,5 +1,6 @@
 import { StatementSyntax, ValueReference } from 'glimmer-runtime';
-import { AttributeBindingReference, applyClassNameBinding } from '../utils/references';
+import { AttributeBindingReference, RootReference, applyClassNameBinding } from '../utils/references';
+import EmptyObject from 'ember-metal/empty_object';
 
 export class CurlyComponentSyntax extends StatementSyntax {
   constructor({ args, definition, templates }) {
@@ -15,13 +16,13 @@ export class CurlyComponentSyntax extends StatementSyntax {
   }
 }
 
-function argsToProps(args) {
-  let attrs = args.named.value();
-  let attrKeys = Object.keys(attrs);
-  let merged = { attrs: {} };
+function attrsToProps(keys, attrs) {
+  let merged = new EmptyObject();
 
-  for (let i = 0, l = attrKeys.length; i < l; i++) {
-    let name = attrKeys[i];
+  merged.attrs = merged;
+
+  for (let i = 0, l = keys.length; i < l; i++) {
+    let name = keys[i];
     let value = attrs[name];
 
     // Do we have to support passing both class /and/ classNames...?
@@ -30,31 +31,34 @@ function argsToProps(args) {
     }
 
     merged[name] = value;
-    merged.attrs[name] = value;
   }
 
   return merged;
 }
 
 class CurlyComponentManager {
   create(definition, args, dynamicScope) {
-    let klass = definition.ComponentClass;
-    let component = klass.create(argsToProps(args));
     let parentView = dynamicScope.view;
 
+    let klass = definition.ComponentClass;
+    let attrs = args.named.value();
+    let props = attrsToProps(args.named.keys, attrs);
+
+    let component = klass.create(props);
+
     dynamicScope.view = component;
     parentView.appendChild(component);
 
-    // component.didInitAttrs({ attrs });
-    // component.didReceiveAttrs({ oldAttrs: null, newAttrs: attrs });
-    // component.willInsertElement();
-    // component.willRender();
+    // component.trigger('didInitAttrs', { attrs });
+    // component.trigger('didReceiveAttrs', { newAttrs: attrs });
+    // component.trigger('willInsertElement');
+    // component.trigger('willRender');
 
     return component;
   }
 
   getSelf(component) {
-    return component;
+    return new RootReference(component);
   }
 
   didCreateElement(component, element, operations) {
@@ -84,26 +88,29 @@ class CurlyComponentManager {
   }
 
   didCreate(component) {
-    // component.didInsertElement();
-    // component.didRender();
+    // component.trigger('didInsertElement');
+    // component.trigger('didRender');
     component._transitionTo('inDOM');
   }
 
   update(component, args, dynamicScope) {
-    component.setProperties(argsToProps(args));
+    let attrs = args.named.value();
+    let props = attrsToProps(args.named.keys, attrs);
 
     // let oldAttrs = component.attrs;
-    // let newAttrs = args.named.value();
-    //
-    // component.didUpdateAttrs({ oldAttrs, newAttrs });
-    // component.didReceiveAttrs({ oldAttrs, newAttrs });
-    // component.willUpdate();
-    // component.willRender();
+    // let newAttrs = attrs;
+
+    component.setProperties(props);
+
+    // component.trigger('didUpdateAttrs', { oldAttrs, newAttrs });
+    // component.trigger('didReceiveAttrs', { oldAttrs, newAttrs });
+    // component.trigger('willUpdate');
+    // component.trigger('willRender');
   }
 
   didUpdate(component) {
-    // component.didUpdate();
-    // component.didRender();
+    // component.trigger('didUpdate');
+    // component.trigger('didRender');
   }
 
   getDestructor(component) {

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

@@ -24,10 +24,9 @@ class DynamicComponentReference {
   constructor({ nameRef, env }) {
     this.nameRef = nameRef;
     this.env = env;
+    this.tag = nameRef.tag;
   }
 
-  isDirty() { return true; }
-
   value() {
     let { env, nameRef } = this;
 
@@ -39,6 +38,4 @@ class DynamicComponentReference {
       throw new Error(`Cannot render ${name} as a component`);
     }
   }
-
-  destroy() {}
 }

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

@@ -1,5 +1,7 @@
 import { StatementSyntax } from 'glimmer-runtime';
+import { ConstReference } from 'glimmer-reference';
 import { generateGuid, guidFor } from 'ember-metal/utils';
+import { RootReference, NULL_REFERENCE } from '../utils/references';
 
 export class OutletSyntax extends StatementSyntax {
   constructor({ args }) {
@@ -26,24 +28,13 @@ function outletComponentFor(args, vm) {
   }
 }
 
-class TopLevelOutletComponentReference {
+class TopLevelOutletComponentReference extends ConstReference {
   constructor(reference) {
-    this.reference = reference;
-    this.definition = null;
-  }
+    let outletState = reference.value();
+    let definition = new TopLevelOutletComponentDefinition(outletState.render.template);
 
-  isDirty() { return true; }
-
-  value() {
-    if (!this.definition) {
-      let outletState = this.reference.value();
-      this.definition = new TopLevelOutletComponentDefinition(outletState.render.template);
-    }
-
-    return this.definition;
+    super(definition);
   }
-
-  destroy() {}
 }
 
 const INVALIDATE = null;
@@ -54,10 +45,9 @@ class OutletComponentReference {
     this.reference = reference;
     this.definition = null;
     this.lastState = null;
+    this.tag = reference.tag;
   }
 
-  isDirty() { return true; }
-
   value() {
     let { outletName, reference, definition, lastState } = this;
     let newState = reference.value();
@@ -100,7 +90,7 @@ class AbstractOutletComponentManager {
   }
 
   getSelf(state) {
-    return state.render.controller;
+    return new RootReference(state.render.controller);
   }
 
   getDestructor(state) {
@@ -138,7 +128,7 @@ class EmptyOutletComponentManager extends AbstractOutletComponentManager {
   }
 
   getSelf(state) {
-    return null;
+    return NULL_REFERENCE;
   }
 }
 

packages/ember-glimmer/lib/ember-metal-views/index.js

@@ -15,12 +15,15 @@ class DynamicScope {
 
 class Renderer {
   constructor({ dom, env, destinedForDOM = false }) {
+    this._root = null;
     this._dom = dom;
     this._env = env;
     this._destinedForDOM = destinedForDOM;
   }
 
   appendOutletView(view, target) {
+    this._root = view;
+
     let env = this._env;
     let self = new RootReference(view);
     let dynamicScope = new DynamicScope({
@@ -54,7 +57,7 @@ class Renderer {
   }
 
   rerender(view) {
-    view['_renderResult'].rerender();
+    (view['_renderResult'] || this._root['_renderResult']).rerender();
   }
 
   remove(view) {

packages/ember-glimmer/lib/ember-routing-view/index.js

@@ -1,5 +1,5 @@
 import assign from 'ember-metal/assign';
-import EmptyObject from 'ember-metal/empty_object';
+import { DirtyableTag } from 'glimmer-reference';
 
 /**
 @module ember
@@ -9,7 +9,7 @@ import EmptyObject from 'ember-metal/empty_object';
 class OutletStateReference {
   constructor(outletView) {
     this.outletView = outletView;
-    this.children = new EmptyObject();
+    this.tag = outletView._tag;
   }
 
   get(key) {
@@ -23,20 +23,13 @@ class OutletStateReference {
   get isTopLevel() {
     return true;
   }
-
-  isDirty() {
-    return true;
-  }
-
-  destroy() {
-  }
 }
 
 class ChildOutletStateReference {
   constructor(parent, key) {
     this.parent = parent;
     this.key = key;
-    this.children = new EmptyObject();
+    this.tag = parent.tag;
   }
 
   get(key) {
@@ -50,13 +43,6 @@ class ChildOutletStateReference {
   get isTopLevel() {
     return false;
   }
-
-  isDirty() {
-    return true;
-  }
-
-  destroy() {
-  }
 }
 
 export class OutletView {
@@ -86,6 +72,7 @@ export class OutletView {
     this.template = template;
     this.outletState = null;
     this._renderResult = null;
+    this._tag = new DirtyableTag();
   }
 
   appendTo(selector) {
@@ -98,14 +85,18 @@ export class OutletView {
     }
   }
 
-  appendChild() { }
+  appendChild(instance) {
+    instance.parentView = this;
+    instance.ownerView = this;
+  }
 
   rerender() {
     if (this._renderResult) { this.renderer.rerender(this); }
   }
 
   setOutletState(state) {
     this.outletState = state;
+    this._tag.dirty();
     this.rerender(); // FIXME
   }
 

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

@@ -22,5 +22,9 @@ export default CoreView.extend(
     init() {
       this._super(...arguments);
       this._viewRegistry = this._viewRegistry || EmberView.views;
+    },
+
+    __defineNonEnumerable(property) {
+      this[property.name] = property.descriptor.value;
     }
   });

packages/ember-glimmer/lib/environment.js

@@ -1,5 +1,4 @@
 import { Environment as GlimmerEnvironment } from 'glimmer-runtime';
-import { isConst } from 'glimmer-reference';
 import Dict from 'ember-metal/empty_object';
 import { CurlyComponentSyntax, CurlyComponentDefinition } from './components/curly-component';
 import { DynamicComponentSyntax } from './components/dynamic-component';
@@ -9,7 +8,6 @@ import createIterable from './utils/iterable';
 import {
   RootReference,
   ConditionalReference,
-  ConstConditionalReference,
   SimpleHelperReference,
   ClassBasedHelperReference
 } from './utils/references';
@@ -119,11 +117,14 @@ export default class Environment extends GlimmerEnvironment {
   }
 
   toConditionalReference(reference) {
-    if (isConst(reference)) {
-      return new ConstConditionalReference(reference);
-    } else {
-      return new ConditionalReference(reference);
-    }
+    // if (isConst(reference)) {
+    //   return new ConstConditionalReference(reference);
+    // } else {
+    //   return new ConditionalReference(reference);
+    // }
+
+    // FIXME: fix failing proxy tests
+    return new ConditionalReference(reference);
   }
 
   iterableFor(ref, args) {