Merge pull request #13093 from chadhietala/hash-helper

[Glimmer2] Migrating hash helper

packages/ember-glimmer/lib/environment.js

@@ -18,10 +18,13 @@ import {
   inlineUnless
 } from './helpers/if-unless';
 
+import { default as hash } from './helpers/hash';
+
 const builtInHelpers = {
   concat,
   if: inlineIf,
-  unless: inlineUnless
+  unless: inlineUnless,
+  hash
 };
 
 export default class extends Environment {

packages/ember-glimmer/lib/helpers/hash.js

@@ -0,0 +1,38 @@
+import { helper } from '../helper';
+/**
+@module ember
+@submodule ember-templates
+*/
+
+/**
+   Use the `{{hash}}` helper to create a hash to pass as an option to your
+   components. This is specially useful for contextual components where you can
+   just yield a hash:
+
+   ```handlebars
+   {{yield (hash
+      name='Sarah'
+      title=office
+   )}}
+   ```
+
+   Would result in an object such as:
+
+   ```js
+   { name: 'Sarah', title: this.get('office') }
+   ```
+
+   Where the `title` is bound to updates of the `office` property.
+
+   @method hash
+   @for Ember.Templates.helpers
+   @param {Object} options
+   @return {Object} Hash
+   @public
+ */
+
+function hash(params, hash, options) {
+  return hash;
+}
+
+export default helper(hash);

packages/ember-glimmer/tests/integration/helpers/hash-test.js

@@ -0,0 +1,168 @@
+import { RenderingTest, moduleFor } from '../../utils/test-case';
+import { set } from 'ember-metal/property_set';
+import setProperties from 'ember-metal/set_properties';
+import Component from 'ember-views/components/component';
+
+moduleFor('Helpers test: {{hash}}', class extends RenderingTest {
+
+  ['@test returns a hash with the right key-value']() {
+    this.render(`{{#with (hash name=\"Sergio\") as |person|}}{{person.name}}{{/with}}`);
+
+    this.assertText('Sergio');
+
+    this.runTask(() => this.rerender());
+
+    this.assertText('Sergio');
+  }
+
+  ['@test can have more than one key-value']() {
+    this.render(`{{#with (hash name="Sergio" lastName="Arbeo") as |person|}}{{person.name}} {{person.lastName}}{{/with}}`);
+
+    this.assertText('Sergio Arbeo');
+
+    this.runTask(() => this.rerender());
+
+    this.assertText('Sergio Arbeo');
+  }
+
+  ['@test binds values when variables are used']() {
+    this.render(`{{#with (hash name=firstName lastName="Arbeo") as |person|}}{{person.name}} {{person.lastName}}{{/with}}`, {
+      firstName: 'Marisa'
+    });
+
+    this.assertText('Marisa Arbeo');
+
+    this.runTask(() => this.rerender());
+
+    this.assertText('Marisa Arbeo');
+
+    this.runTask(() => set(this.context, 'firstName', 'Sergio'));
+
+    this.assertText('Sergio Arbeo');
+
+    this.runTask(() => set(this.context, 'firstName', 'Marisa'));
+
+    this.assertText('Marisa Arbeo');
+  }
+
+  ['@test binds multiple values when variables are used']() {
+    this.render(`{{#with (hash name=firstName lastName=lastName) as |person|}}{{person.name}} {{person.lastName}}{{/with}}`, {
+      firstName: 'Marisa',
+      lastName: 'Arbeo'
+    });
+
+    this.assertText('Marisa Arbeo');
+
+    this.runTask(() => this.rerender());
+
+    this.assertText('Marisa Arbeo');
+
+    this.runTask(() => set(this.context, 'firstName', 'Sergio'));
+
+    this.assertText('Sergio Arbeo');
+
+    this.runTask(() => set(this.context, 'lastName', 'Smith'));
+
+    this.assertText('Sergio Smith');
+
+    this.runTask(() => setProperties(this.context, {
+      firstName: 'Marisa',
+      lastName: 'Arbeo'
+    }));
+
+    this.assertText('Marisa Arbeo');
+  }
+
+  ['@test hash helpers can be nested']() {
+    this.render(`{{#with (hash person=(hash name=firstName)) as |ctx|}}{{ctx.person.name}}{{/with}}`, {
+      firstName: 'Balint'
+    });
+
+    this.assertText('Balint');
+
+    this.runTask(() => this.rerender());
+
+    this.assertText('Balint');
+
+    this.runTask(() => set(this.context, 'firstName', 'Chad'));
+
+    this.assertText('Chad');
+
+    this.runTask(() => set(this.context, 'firstName', 'Balint'));
+
+    this.assertText('Balint');
+  }
+
+  ['@test should yield hash of internal properties']() {
+    let fooBarInstance;
+    let FooBarComponent = Component.extend({
+      init() {
+        this._super();
+        fooBarInstance = this;
+        this.firstName = 'Chad';
+      }
+    });
+
+    this.registerComponent('foo-bar', {
+      ComponentClass: FooBarComponent,
+      template: `{{yield (hash firstName=firstName)}}`
+    });
+
+    this.render(`{{#foo-bar as |values|}}{{values.firstName}}{{/foo-bar}}`);
+
+    this.assertText('Chad');
+
+    this.runTask(() => this.rerender());
+
+    this.assertText('Chad');
+
+    this.runTask(() => set(fooBarInstance, 'firstName', 'Godfrey'));
+
+    this.assertText('Godfrey');
+
+    this.runTask(() => set(fooBarInstance, 'firstName', 'Chad'));
+
+    this.assertText('Chad');
+  }
+
+  ['@test should yield hash of internal and external properties']() {
+    let fooBarInstance;
+    let FooBarComponent = Component.extend({
+      init() {
+        this._super();
+        fooBarInstance = this;
+        this.firstName = 'Chad';
+      }
+    });
+
+    this.registerComponent('foo-bar', {
+      ComponentClass: FooBarComponent,
+      template: `{{yield (hash firstName=firstName lastName=lastName)}}`
+    });
+
+    this.render(`{{#foo-bar lastName=lastName as |values|}}{{values.firstName}} {{values.lastName}}{{/foo-bar}}`, {
+      lastName: 'Hietala'
+    });
+
+    this.assertText('Chad Hietala');
+
+    this.runTask(() => this.rerender());
+
+    this.assertText('Chad Hietala');
+
+    this.runTask(() => {
+      set(fooBarInstance, 'firstName', 'Godfrey');
+      set(this.context, 'lastName', 'Chan');
+    });
+
+    this.assertText('Godfrey Chan');
+
+    this.runTask(() => {
+      set(fooBarInstance, 'firstName', 'Chad');
+      set(this.context, 'lastName', 'Hietala');
+    });
+
+    this.assertText('Chad Hietala');
+  }
+
+});

packages/ember-htmlbars/lib/helpers/hash.js

@@ -7,22 +7,17 @@
    Use the `{{hash}}` helper to create a hash to pass as an option to your
    components. This is specially useful for contextual components where you can
    just yield a hash:
-
    ```handlebars
    {{yield (hash
       name='Sarah'
       title=office
    )}}
    ```
-
    Would result in an object such as:
-
    ```js
    { name: 'Sarah', title: this.get('office') }
    ```
-
    Where the `title` is bound to updates of the `office` property.
-
    @method hash
    @for Ember.Templates.helpers
    @param {Object} options