Merge pull request #12975 from tildeio/component-element

Implement `this.element` for components

package.json

@@ -32,7 +32,7 @@
     "express": "^4.5.0",
     "finalhandler": "^0.4.0",
     "github": "^0.2.3",
-    "glimmer-engine": "tildeio/glimmer#b1f2112",
+    "glimmer-engine": "tildeio/glimmer#44f03dc",
     "glob": "~4.3.2",
     "htmlbars": "0.14.14",
     "qunit-extras": "^1.4.0",

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

@@ -29,9 +29,20 @@ class CurlyComponentManager {
     return component;
   }
 
+  getSelf(component) {
+    return component;
+  }
+
+  didCreateElement(component, element) {
+    component.element = element;
+    // component._transitionTo('hasElement');
+  }
+
+
   didCreate(component) {
     // component.didInsertElement();
     // component.didRender();
+    // component._transitionTo('inDOM');
   }
 
   update(component, args) {
@@ -50,10 +61,6 @@ class CurlyComponentManager {
     // component.didUpdate();
     // component.didRender();
   }
-
-  getSelf(component) {
-    return component;
-  }
 }
 
 const MANAGER = new CurlyComponentManager();

packages/ember-glimmer/tests/integration/components/curly-components-test.js

@@ -16,6 +16,87 @@ moduleFor('Components test: curly components', class extends RenderingTest {
     this.assertComponentElement(this.firstChild, { content: 'hello' });
   }
 
+  ['@test it has an element']() {
+    let instance;
+
+    let FooBarComponent = Component.extend({
+      init() {
+        instance = this;
+        this._super();
+      }
+    });
+
+    this.registerComponent('foo-bar', { ComponentClass: FooBarComponent, template: 'hello' });
+
+    this.render('{{foo-bar}}');
+
+    let element1 = instance.element;
+
+    this.assertComponentElement(element1, { content: 'hello' });
+
+    this.runTask(() => this.rerender());
+
+    let element2 = instance.element;
+
+    this.assertComponentElement(element2, { content: 'hello' });
+
+    this.assertSameNode(element2, element1);
+  }
+
+  ['@htmlbars it has a jQuery proxy to the element'](assert) {
+    let instance;
+
+    let FooBarComponent = Component.extend({
+      init() {
+        instance = this;
+        this._super();
+      }
+    });
+
+    this.registerComponent('foo-bar', { ComponentClass: FooBarComponent, template: 'hello' });
+
+    this.render('{{foo-bar}}');
+
+    let element1 = instance.$()[0];
+
+    this.assertComponentElement(element1, { content: 'hello' });
+
+    this.runTask(() => this.rerender());
+
+    let element2 = instance.$()[0];
+
+    this.assertComponentElement(element2, { content: 'hello' });
+
+    this.assertSameNode(element2, element1);
+  }
+
+  ['@htmlbars it scopes the jQuery proxy to the component element'](assert) {
+    let instance;
+
+    let FooBarComponent = Component.extend({
+      init() {
+        instance = this;
+        this._super();
+      }
+    });
+
+    this.registerComponent('foo-bar', { ComponentClass: FooBarComponent, template: '<span class="inner">inner</span>' });
+
+    this.render('<span class="outer">outer</span>{{foo-bar}}');
+
+    let $span = instance.$('span');
+
+    assert.equal($span.length, 1);
+    assert.equal($span.attr('class'), 'inner');
+
+    this.runTask(() => this.rerender());
+
+    $span = instance.$('span');
+
+    assert.equal($span.length, 1);
+    assert.equal($span.attr('class'), 'inner');
+  }
+
   ['@test it can render a basic component with a block']() {
     this.registerComponent('foo-bar', { template: '{{yield}}' });
 

packages/ember-glimmer/tests/utils/abstract-test-case.js

@@ -198,8 +198,8 @@ export class RenderingTest extends TestCase {
     this.assertElement(node, { ElementType, tagName, attrs, content });
   }
 
-  assertSameNode(node1, node2) {
-    assert.strictEqual(node1, node2, 'DOM node stability');
+  assertSameNode(actual, expected) {
+    assert.strictEqual(actual, expected, 'DOM node stability');
   }
 
   assertInvariants() {