Merge pull request #13492 from Joelkang/each-in

[Glimmer2] Add each-in support

Author: rwjblue

packages/ember-glimmer-template-compiler/lib/plugins/transform-each-in-into-each.js

@@ -0,0 +1,46 @@
+/**
+ @module ember
+ @submodule ember-glimmer
+*/
+
+/**
+  A Glimmer2 AST transformation that replaces all instances of
+
+  ```handlebars
+ {{#each-in iterableThing as |key value|}}
+  ```
+
+  with
+
+  ```handlebars
+ {{#each (-each-in iterableThing) as |key value|}}
+  ```
+
+  @private
+  @class TransformHasBlockSyntax
+*/
+
+export default function TransformEachInIntoEach() {
+  // set later within Glimmer2 to the syntax package
+  this.syntax = null;
+}
+
+/**
+  @private
+  @method transform
+  @param {AST} ast The AST to be transformed.
+*/
+TransformEachInIntoEach.prototype.transform = function TransformEachInIntoEach_transform(ast) {
+  let { traverse, builders: b } = this.syntax;
+
+  traverse(ast, {
+    BlockStatement(node) {
+      if (node.path.original === 'each-in') {
+        node.params[0] = b.sexpr(b.path('-each-in'), [node.params[0]]);
+        return b.block(b.path('each'), node.params, node.hash, node.program, node.inverse, node.loc);
+      }
+    }
+  });
+
+  return ast;
+};

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

@@ -1,13 +1,15 @@
 import defaultPlugins from 'ember-template-compiler/plugins';
 import TransformHasBlockSyntax from '../plugins/transform-has-block-syntax';
 import TransformActionSyntax from '../plugins/transform-action-syntax';
+import TransformEachInIntoEach from '../plugins/transform-each-in-into-each';
 import assign from 'ember-metal/assign';
 
 export const PLUGINS = [
   ...defaultPlugins,
   // the following are ember-glimmer specific
   TransformHasBlockSyntax,
-  TransformActionSyntax
+  TransformActionSyntax,
+  TransformEachInIntoEach
 ];
 
 let USER_PLUGINS = [];

packages/ember-glimmer/lib/environment.js

@@ -32,6 +32,7 @@ import { default as readonly } from './helpers/readonly';
 import { default as unbound } from './helpers/unbound';
 import { default as classHelper } from './helpers/-class';
 import { default as queryParams } from './helpers/query-param';
+import { default as eachIn } from './helpers/each-in';
 import { OWNER } from 'container/owner';
 
 const builtInComponents = {
@@ -50,7 +51,8 @@ const builtInHelpers = {
   readonly,
   unbound,
   'query-params': queryParams,
-  '-class': classHelper
+  '-class': classHelper,
+  '-each-in': eachIn
 };
 
 import { default as ActionModifierManager } from './modifiers/action';
@@ -206,7 +208,6 @@ export default class Environment extends GlimmerEnvironment {
 
   lookupHelper(name) {
     let helper = builtInHelpers[name[0]] || this.owner.lookup(`helper:${name}`);
-
     // TODO: try to unify this into a consistent protocol to avoid wasteful closure allocations
     if (helper.isInternalHelper) {
       return (args) => helper.toReference(args);

packages/ember-glimmer/lib/helpers/each-in.js

@@ -0,0 +1,53 @@
+/**
+@module ember
+@submodule ember-templates
+*/
+
+import symbol from 'ember-metal/symbol';
+
+/**
+  The `{{each-in}}` helper loops over properties on an object. It is unbound,
+  in that new (or removed) properties added to the target object will not be
+  rendered.
+
+  For example, given a `user` object that looks like:
+
+  ```javascript
+  {
+    "name": "Shelly Sails",
+    "age": 42
+  }
+  ```
+
+  This template would display all properties on the `user`
+  object in a list:
+
+  ```handlebars
+  <ul>
+  {{#each-in user as |key value|}}
+    <li>{{key}}: {{value}}</li>
+  {{/each-in}}
+  </ul>
+  ```
+
+  Outputting their name and age.
+
+  @method each-in
+  @for Ember.Templates.helpers
+  @public
+  @since 2.1.0
+*/
+const EACH_IN_REFERENCE = symbol('EACH_IN');
+
+export function isEachIn(ref) {
+  return ref && ref[EACH_IN_REFERENCE];
+}
+
+export default {
+  isInternalHelper: true,
+  toReference(args) {
+    let ref = Object.create(args.positional.at(0));
+    ref[EACH_IN_REFERENCE] = true;
+    return ref;
+  }
+};

packages/ember-glimmer/lib/utils/iterable.js

@@ -1,7 +1,8 @@
 import { get } from 'ember-metal/property_get';
 import { guidFor } from 'ember-metal/utils';
 import { objectAt, isEmberArray } from 'ember-runtime/mixins/array';
-import { UpdatableReference } from './references';
+import { UpdatableReference, UpdatablePrimitiveReference } from './references';
+import { isEachIn } from '../helpers/each-in';
 
 export default function iterableFor(ref, keyPath) {
   return new Iterable(ref, keyFor(keyPath));
@@ -88,6 +89,33 @@ class EmberArrayIterator {
   }
 }
 
+class ObjectKeysIterator {
+  constructor(keys, values, keyFor) {
+    this.keys = keys;
+    this.values = values;
+    this.keyFor = keyFor;
+    this.position = 0;
+  }
+
+  isEmpty() {
+    return this.keys.length === 0;
+  }
+
+  next() {
+    let { keys, values, keyFor, position } = this;
+
+    if (position >= keys.length) { return null; }
+
+    let value = values[position];
+    let memo = keys[position];
+    let key = keyFor(value, memo);
+
+    this.position++;
+
+    return { key, value: memo, memo: value };
+  }
+}
+
 class EmptyIterator {
   isEmpty() {
     return true;
@@ -117,6 +145,10 @@ class Iterable {
       return iterable.length > 0 ? new ArrayIterator(iterable, keyFor) : EMPTY_ITERATOR;
     } else if (isEmberArray(iterable)) {
       return new EmberArrayIterator(iterable, keyFor);
+    } else if (isEachIn(ref)) {
+      let keys = Object.keys(iterable);
+      let values = keys.map(key => iterable[key]);
+      return keys.length > 0 ? new ObjectKeysIterator(keys, values, keyFor) : EMPTY_ITERATOR;
     } else {
       throw new Error(`Don't know how to {{#each ${iterable}}}`);
     }
@@ -131,7 +163,7 @@ class Iterable {
   }
 
   memoReferenceFor(item) {
-    return new UpdatableReference(item.memo);
+    return new UpdatablePrimitiveReference(item.memo);
   }
 
   updateMemoReference(reference, item) {

packages/ember-glimmer/lib/utils/references.js

@@ -135,6 +135,12 @@ export class UpdatableReference extends EmberPathReference {
   }
 }
 
+export class UpdatablePrimitiveReference extends UpdatableReference {
+  get() {
+    return UNDEFINED_REFERENCE;
+  }
+}
+
 export class ConditionalReference extends GlimmerConditionalReference {
   static create(reference) {
     if (isConst(reference)) {