Merge pull request #13615 from asakusuma/input-dynamic

[Glimmer2] Implement input

Author: rwjblue

package.json

@@ -37,7 +37,7 @@
     "express": "^4.5.0",
     "finalhandler": "^0.4.0",
     "github": "^0.2.3",
-    "glimmer-engine": "tildeio/glimmer#bf8213",
+    "glimmer-engine": "tildeio/glimmer#d4d1e3a",
     "glob": "^5.0.13",
     "htmlbars": "0.14.23",
     "mocha": "^2.4.5",

packages/ember-glimmer-template-compiler/lib/plugins/transform-input-type-syntax.js

@@ -0,0 +1,67 @@
+/**
+ @module ember
+ @submodule ember-glimmer
+*/
+
+/**
+  A Glimmer2 AST transformation that replaces all instances of
+
+  ```handlebars
+ {{input type=boundType}}
+  ```
+
+  with
+
+  ```handlebars
+ {{input (-input-type boundType) type=boundType}}
+  ```
+
+  Note that the type parameters is not removed as the -input-type helpers
+  is only used to select the component class. The component still needs
+  the type parameter to function.
+
+  @private
+  @class TransformInputTypeSyntax
+*/
+
+export default function TransformInputTypeSyntax() {
+  // set later within Glimmer2 to the syntax package
+  this.syntax = null;
+}
+
+/**
+  @private
+  @method transform
+  @param {AST} ast The AST to be transformed.
+*/
+TransformInputTypeSyntax.prototype.transform = function TransformInputTypeSyntax_transform(ast) {
+  let { traverse, builders: b } = this.syntax;
+
+  traverse(ast, {
+    MustacheStatement(node) {
+      if (isInput(node)) {
+        insertTypeHelperParameter(node, b);
+      }
+    }
+  });
+
+  return ast;
+};
+
+function isInput(node) {
+  return node.path.original === 'input';
+}
+
+function insertTypeHelperParameter(node, builders) {
+  let pairs = node.hash.pairs;
+  let pair = null;
+  for (let i = 0; i < pairs.length; i++) {
+    if (pairs[i].key === 'type') {
+      pair = pairs[i];
+      break;
+    }
+  }
+  if (pair && pair.value.type !== 'StringLiteral') {
+    node.params.unshift(builders.sexpr('-input-type', [builders.path(pair.value.original, pair.loc)], null, pair.loc));
+  }
+}

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

@@ -1,5 +1,6 @@
 import defaultPlugins from 'ember-template-compiler/plugins';
 import TransformActionSyntax from '../plugins/transform-action-syntax';
+import TransformInputTypeSyntax from '../plugins/transform-input-type-syntax';
 import TransformAttrsIntoProps from '../plugins/transform-attrs-into-props';
 import TransformEachInIntoEach from '../plugins/transform-each-in-into-each';
 import TransformHasBlockSyntax from '../plugins/transform-has-block-syntax';
@@ -9,6 +10,7 @@ export const PLUGINS = [
   ...defaultPlugins,
   // the following are ember-glimmer specific
   TransformActionSyntax,
+  TransformInputTypeSyntax,
   TransformAttrsIntoProps,
   TransformEachInIntoEach,
   TransformHasBlockSyntax

packages/ember-glimmer/lib/environment.js

@@ -31,6 +31,7 @@ import { default as mut } from './helpers/mut';
 import { default as readonly } from './helpers/readonly';
 import { default as unbound } from './helpers/unbound';
 import { default as classHelper } from './helpers/-class';
+import { default as inputTypeHelper } from './helpers/-input-type';
 import { default as queryParams } from './helpers/query-param';
 import { default as eachIn } from './helpers/each-in';
 import { default as normalizeClassHelper } from './helpers/-normalize-class';
@@ -40,6 +41,42 @@ const builtInComponents = {
   textarea: '-text-area'
 };
 
+function createCurly(args, templates, definition) {
+  wrapClassAttribute(args);
+  return new CurlyComponentSyntax({ args, definition, templates });
+}
+
+function buildTextFieldSyntax({ args, templates }, getDefinition) {
+  let definition = getDefinition('-text-field');
+  wrapClassAttribute(args);
+  return new CurlyComponentSyntax({ args, definition, templates });
+}
+
+const builtInDynamicComponents = {
+  input({ key, args, templates }, getDefinition) {
+    if (args.named.has('type')) {
+      let typeArg = args.named.at('type');
+      if (typeArg.type === 'value') {
+        if (typeArg.value === 'checkbox') {
+          assert(
+            '{{input type=\'checkbox\'}} does not support setting `value=someBooleanValue`; ' +
+            'you must use `checked=someBooleanValue` instead.',
+            !args.named.has('value')
+          );
+
+          return createCurly(args, templates, getDefinition('-checkbox'));
+        } else {
+          return buildTextFieldSyntax({ args, templates }, getDefinition);
+        }
+      }
+    } else {
+      return buildTextFieldSyntax({ args, templates }, getDefinition);
+    }
+
+    return new DynamicComponentSyntax({ args, templates });
+  }
+};
+
 const builtInHelpers = {
   if: inlineIf,
   action,
@@ -55,6 +92,7 @@ const builtInHelpers = {
   unless: inlineUnless,
   '-class': classHelper,
   '-each-in': eachIn,
+  '-input-type': inputTypeHelper,
   '-normalize-class': normalizeClassHelper
 };
 
@@ -143,6 +181,11 @@ export default class Environment extends GlimmerEnvironment {
 
     if (isSimple && (isInline || isBlock)) {
       // 2. built-in syntax
+
+      let generateBuiltInSyntax = builtInDynamicComponents[key];
+      // Check if it's a keyword
+      let mappedKey = builtInComponents[key];
+
       if (key === 'component') {
         return new DynamicComponentSyntax({ args, templates });
       } else if (key === 'outlet') {
@@ -156,11 +199,14 @@ export default class Environment extends GlimmerEnvironment {
         definition = this.getComponentDefinition([internalKey]);
       } else if (key.indexOf('-') >= 0) {
         definition = this.getComponentDefinition(path);
+      } else if (mappedKey) {
+        definition = this.getComponentDefinition([mappedKey]);
       }
 
       if (definition) {
-        wrapClassAttribute(args);
-        return new CurlyComponentSyntax({ args, definition, templates });
+        return createCurly(args, templates, definition);
+      } else if (generateBuiltInSyntax) {
+        return generateBuiltInSyntax(statement, (path) => this.getComponentDefinition([path]));
       }
 
       assert(`Could not find component named "${key}" (no component or template with that name was found)`, !isBlock || this.hasHelper(key));

packages/ember-glimmer/lib/helpers/-input-type.js

@@ -0,0 +1,16 @@
+import { InternalHelperReference } from '../utils/references';
+
+function inputTypeHelper({ positional, named }) {
+  let type = positional.at(0).value();
+  if (type === 'checkbox') {
+    return '-checkbox';
+  }
+  return '-text-field';
+}
+
+export default {
+  isInternalHelper: true,
+  toReference(args) {
+    return new InternalHelperReference(inputTypeHelper, args);
+  }
+};

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

@@ -1,11 +1,16 @@
 import { set } from 'ember-metal/property_set';
 import { TextField, Checkbox } from '../../utils/helpers';
 import { RenderingTest, moduleFor } from '../../utils/test-case';
+import { runDestroy } from 'ember-runtime/tests/utils';
 
 class InputRenderingTest extends RenderingTest {
   constructor() {
     super();
 
+    // Modifying input.selectionStart, which is utilized in the cursor tests,
+    // causes an event in Safari.
+    runDestroy(this.owner.lookup('event_dispatcher:main'));
+
     this.registerComponent('-text-field', { ComponentClass: TextField });
     this.registerComponent('-checkbox', { ComponentClass: Checkbox });
   }
@@ -65,7 +70,7 @@ class InputRenderingTest extends RenderingTest {
   }
 }
 
-moduleFor('@htmlbars Helpers test: {{input}}', class extends InputRenderingTest {
+moduleFor('Helpers test: {{input}}', class extends InputRenderingTest {
 
   ['@test a single text field is inserted into the DOM'](assert) {
     this.render(`{{input type="text" value=value}}`, { value: 'hello' });
@@ -252,7 +257,7 @@ moduleFor('@htmlbars Helpers test: {{input}}', class extends InputRenderingTest
 
 });
 
-moduleFor('@htmlbars Helpers test: {{input}} with dynamic type', class extends InputRenderingTest {
+moduleFor('Helpers test: {{input}} with dynamic type', class extends InputRenderingTest {
 
   ['@test a bound property can be used to determine type']() {
     this.render(`{{input type=type}}`, { type: 'password' });
@@ -274,7 +279,7 @@ moduleFor('@htmlbars Helpers test: {{input}} with dynamic type', class extends I
 
 });
 
-moduleFor(`@htmlbars Helpers test: {{input type='checkbox'}}`, class extends InputRenderingTest {
+moduleFor(`Helpers test: {{input type='checkbox'}}`, class extends InputRenderingTest {
 
   ['@test dynamic attributes']() {
     this.render(`{{input
@@ -370,7 +375,7 @@ moduleFor(`@htmlbars Helpers test: {{input type='checkbox'}}`, class extends Inp
 
 });
 
-moduleFor(`@htmlbars Helpers test: {{input type='text'}}`, class extends InputRenderingTest {
+moduleFor(`Helpers test: {{input type='text'}}`, class extends InputRenderingTest {
 
   ['@test null values'](assert) {
     let attributes = ['disabled', 'placeholder', 'name', 'maxlength', 'size', 'tabindex'];