Merge pull request #17499 from rwjblue/patch-glimmer-vm

[BUGFIX beta] Update to glimmer-vm 0.37.1.
emberjs · Jan 22, 2019 · 3a8b530 · 3a8b530
2 parents 5d2b553 + 9ce961a
commit 3a8b530
Show file tree

Hide file tree

Showing 4 changed files with 251 additions and 100 deletions.
diff --git a/package.json b/package.json
@@ -89,14 +89,14 @@
     "@babel/plugin-transform-shorthand-properties": "^7.2.0",
     "@babel/plugin-transform-spread": "^7.2.2",
     "@babel/plugin-transform-template-literals": "^7.2.0",
-    "@glimmer/compiler": "^0.37.0",
+    "@glimmer/compiler": "^0.37.1",
     "@glimmer/env": "^0.1.7",
-    "@glimmer/interfaces": "^0.37.0",
-    "@glimmer/node": "^0.37.0",
-    "@glimmer/opcode-compiler": "^0.37.0",
-    "@glimmer/program": "^0.37.0",
-    "@glimmer/reference": "^0.37.0",
-    "@glimmer/runtime": "^0.37.0",
+    "@glimmer/interfaces": "^0.37.1",
+    "@glimmer/node": "^0.37.1",
+    "@glimmer/opcode-compiler": "^0.37.1",
+    "@glimmer/program": "^0.37.1",
+    "@glimmer/reference": "^0.37.1",
+    "@glimmer/runtime": "^0.37.1",
     "@types/qunit": "^2.5.3",
     "@types/rsvp": "^4.0.2",
     "auto-dist-tag": "^1.0.0",

diff --git a/...s/@ember/-internals/glimmer/tests/integration/components/angle-bracket-invocation-test.js b/...s/@ember/-internals/glimmer/tests/integration/components/angle-bracket-invocation-test.js
@@ -855,6 +855,70 @@ if (EMBER_GLIMMER_ANGLE_BRACKET_INVOCATION) {
         });
       }
 
+      '@test can forward ...attributes to dynamic component invocation ("splattributes")'() {
+        this.registerComponent('x-outer', {
+          ComponentClass: Component.extend({ tagName: '' }),
+          template: '<XInner ...attributes>{{yield}}</XInner>',
+        });
+
+        this.registerComponent('x-inner', {
+          ComponentClass: Component.extend({ tagName: '' }),
+          template: '<div ...attributes>{{yield}}</div>',
+        });
+
+        this.render(strip`
+          {{#let (component 'x-outer') as |Thing|}}
+            <Thing data-foo>Hello!</Thing>
+          {{/let}}
+        `);
+
+        this.assertElement(this.firstChild, {
+          tagName: 'div',
+          attrs: { 'data-foo': '' },
+          content: 'Hello!',
+        });
+      }
+
+      '@test an inner angle invocation can forward ...attributes through dynamic component invocation ("splattributes")'() {
+        this.registerComponent('x-outer', {
+          ComponentClass: Component.extend({ tagName: '' }),
+          template: `{{#let (component 'x-inner') as |Thing|}}<Thing ...attributes>{{yield}}</Thing>{{/let}}`,
+        });
+
+        this.registerComponent('x-inner', {
+          ComponentClass: Component.extend({ tagName: '' }),
+          template: '<div ...attributes>{{yield}}</div>',
+        });
+
+        this.render('<XOuter data-foo>Hello!</XOuter>');
+
+        this.assertElement(this.firstChild, {
+          tagName: 'div',
+          attrs: { 'data-foo': '' },
+          content: 'Hello!',
+        });
+      }
+
+      '@test an inner angle invocation can forward ...attributes through static component invocation ("splattributes")'() {
+        this.registerComponent('x-outer', {
+          ComponentClass: Component.extend({ tagName: '' }),
+          template: `<XInner ...attributes>{{yield}}</XInner>`,
+        });
+
+        this.registerComponent('x-inner', {
+          ComponentClass: Component.extend({ tagName: '' }),
+          template: '<div ...attributes>{{yield}}</div>',
+        });
+
+        this.render('<XOuter data-foo>Hello!</XOuter>');
+
+        this.assertElement(this.firstChild, {
+          tagName: 'div',
+          attrs: { 'data-foo': '' },
+          content: 'Hello!',
+        });
+      }
+
       '@test can include `...attributes` in multiple elements in tagless component ("splattributes")'() {
         this.registerComponent('foo-bar', {
           ComponentClass: Component.extend({ tagName: '' }),
@@ -919,6 +983,41 @@ if (EMBER_GLIMMER_ANGLE_BRACKET_INVOCATION) {
           content: 'world',
         });
       }
+
+      '@test can yield content to contextual components invoked with angle-bracket components that receives splattributes'() {
+        this.registerComponent('foo-bar/inner', {
+          ComponentClass: Component.extend({ tagName: '' }),
+          template: '<h1 ...attributes>{{yield}}</h1>',
+        });
+        this.registerComponent('foo-bar', {
+          ComponentClass: Component.extend({ tagName: '' }),
+          // If <Inner> doesn't receive splattributes this test passes
+          template: strip`
+            {{#let (component "foo-bar/inner") as |Inner|}}
+              <Inner ...attributes>{{yield}}</Inner>
+              <h2>Inside the let</h2>
+            {{/let}}
+            <h3>Outside the let</h3>
+          `,
+        });
+
+        this.render('<FooBar>Yielded content</FooBar>');
+        this.assertElement(this.firstChild, {
+          tagName: 'h1',
+          attrs: {},
+          content: 'Yielded content',
+        });
+        this.assertElement(this.nthChild(1), {
+          tagName: 'h2',
+          attrs: {},
+          content: 'Inside the let',
+        });
+        this.assertElement(this.nthChild(2), {
+          tagName: 'h3',
+          attrs: {},
+          content: 'Outside the let',
+        });
+      }
     }
   );
 }
diff --git a/packages/@ember/-internals/glimmer/tests/integration/custom-component-manager-test.js b/packages/@ember/-internals/glimmer/tests/integration/custom-component-manager-test.js
@@ -305,6 +305,58 @@ if (GLIMMER_CUSTOM_COMPONENT_MANAGER) {
         this.assertHTML(`<p>Chad Hietala</p>`);
       }
 
+      ['@test it can set positional params on the component instance']() {
+        let ComponentClass = setComponentManager(
+          createBasicManager,
+          EmberObject.extend({
+            salutation: computed('args.positional', function() {
+              return this.args.positional[0] + ' ' + this.args.positional[1];
+            }),
+          })
+        );
+
+        this.registerComponent('foo-bar', {
+          template: `<p>{{salutation}}</p>`,
+          ComponentClass,
+        });
+
+        this.render('{{foo-bar "Yehuda" "Katz"}}');
+
+        this.assertHTML(`<p>Yehuda Katz</p>`);
+      }
+
+      ['@test positional params are updated if they change']() {
+        let ComponentClass = setComponentManager(
+          createBasicManager,
+          EmberObject.extend({
+            salutation: computed('args.positional', function() {
+              return this.args.positional[0] + ' ' + this.args.positional[1];
+            }),
+          })
+        );
+
+        this.registerComponent('foo-bar', {
+          template: `<p>{{salutation}}</p>`,
+          ComponentClass,
+        });
+
+        this.render('{{foo-bar firstName lastName}}', {
+          firstName: 'Yehuda',
+          lastName: 'Katz',
+        });
+
+        this.assertHTML(`<p>Yehuda Katz</p>`);
+
+        runTask(() =>
+          setProperties(this.context, {
+            firstName: 'Chad',
+            lastName: 'Hietala',
+          })
+        );
+
+        this.assertHTML(`<p>Chad Hietala</p>`);
+      }
+
       ['@test it can opt-in to running destructor'](assert) {
         let ComponentClass = setComponentManager(
           () => {