From 315403c38d3520f96b4f2f067eda285725cb8826 Mon Sep 17 00:00:00 2001
From: simonihmig <simon.ihmig@kaliber5.de>
Date: Sun, 14 Jul 2019 14:41:13 +0200
Subject: [PATCH] Add polyfill for <Input> and <Textarea>

---
 index.js                                   | 24 +++++++--
 lib/ast-input-transform.js                 | 56 +++++++++++++++++++
 tests/integration/components/input-test.js | 62 ++++++++++++++++++++++
 3 files changed, 139 insertions(+), 3 deletions(-)
 create mode 100644 lib/ast-input-transform.js
 create mode 100644 tests/integration/components/input-test.js

diff --git a/index.js b/index.js
index d70653a..5ba30d5 100644
--- a/index.js
+++ b/index.js
@@ -46,13 +46,21 @@ module.exports = {
     }
 
     if (this.shouldPolyfillBuiltinComponents) {
-      let pluginObj = this._buildLinkToPlugin();
-      pluginObj.parallelBabel = {
+      let linktoPluginObj = this._buildLinkToPlugin();
+      linktoPluginObj.parallelBabel = {
         requireFile: __filename,
         buildUsing: '_buildLinkToPlugin',
         params: {},
       };
-      registry.add('htmlbars-ast-plugin', pluginObj);
+      registry.add('htmlbars-ast-plugin', linktoPluginObj);
+
+      let inputPluginObj = this._buildInputPlugin();
+      inputPluginObj.parallelBabel = {
+        requireFile: __filename,
+        buildUsing: '_buildInputPlugin',
+        params: {},
+      };
+      registry.add('htmlbars-ast-plugin', inputPluginObj);
     }
   },
 
@@ -86,6 +94,16 @@ module.exports = {
     };
   },
 
+  _buildInputPlugin() {
+    return {
+      name: 'input-component-invocation-support',
+      plugin: require('./lib/ast-input-transform'),
+      baseDir() {
+        return __dirname;
+      },
+    };
+  },
+
   included() {
     this._super.included.apply(this, arguments);
 
diff --git a/lib/ast-input-transform.js b/lib/ast-input-transform.js
new file mode 100644
index 0000000..57eccb2
--- /dev/null
+++ b/lib/ast-input-transform.js
@@ -0,0 +1,56 @@
+'use strict';
+
+const attributeToPropertyMap = {
+  role: 'ariaRole',
+};
+
+class AngleBracketInputPolyfill {
+  transform(ast) {
+    let b = this.syntax.builders;
+
+    // in order to debug in https://https://astexplorer.net/#/gist/0590eb883edfcd163b183514df4cc717
+    // **** copy from here ****
+    function transformAttributeValue(attributeValue) {
+      switch (attributeValue.type) {
+        case 'TextNode':
+          return b.string(attributeValue.chars);
+        case 'MustacheStatement':
+          return b.path(attributeValue.path);
+      }
+    }
+
+    let visitor = {
+      ElementNode(node) {
+        let tag = node.tag.toLowerCase();
+
+        if (tag === 'input' || tag === 'textarea') {
+          let { attributes } = node;
+
+          let props = attributes
+            .filter(({ name }) => name.charAt(0) === '@')
+            .map(attribute => Object.assign({}, attribute, { name: attribute.name.slice(1) }));
+          let attrs = attributes.map(attribute =>
+            attributeToPropertyMap[attribute.name]
+              ? Object.assign({}, attribute, { name: attributeToPropertyMap[attribute.name] })
+              : attribute
+          );
+
+          let hash = b.hash(
+            [...props, ...attrs].map(({ name, value, loc }) =>
+              b.pair(name, transformAttributeValue(value), loc)
+            )
+          );
+
+          return b.mustache(b.path(tag), null, hash, false, node.loc);
+        }
+      },
+    };
+    // **** copy to here ****
+
+    this.syntax.traverse(ast, visitor);
+
+    return ast;
+  }
+}
+
+module.exports = AngleBracketInputPolyfill;
diff --git a/tests/integration/components/input-test.js b/tests/integration/components/input-test.js
new file mode 100644
index 0000000..a3ac326
--- /dev/null
+++ b/tests/integration/components/input-test.js
@@ -0,0 +1,62 @@
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'ember-qunit';
+import { render } from '@ember/test-helpers';
+import hbs from 'htmlbars-inline-precompile';
+
+module('Integration | Component | input', function(hooks) {
+  setupRenderingTest(hooks);
+
+  test('it supports text field', async function(assert) {
+    this.set('value', 'foo');
+    await render(hbs`<Input @type="text" @value={{this.value}} />`);
+
+    assert.dom('input').hasAttribute('type', 'text');
+    assert.dom('input').hasValue('foo');
+  });
+
+  test('it supports different input types', async function(assert) {
+    this.set('value', 'user@example.com');
+    await render(hbs`<Input @type="email" @value={{this.value}} />`);
+
+    assert.dom('input').hasAttribute('type', 'email');
+    assert.dom('input').hasValue('user@example.com');
+  });
+
+  test('it supports checkbox', async function(assert) {
+    this.set('value', true);
+    await render(hbs`<Input @type="checkbox" @checked={{this.value}} />`);
+
+    assert.dom('input').hasAttribute('type', 'checkbox');
+    assert.dom('input').isChecked();
+  });
+
+  test('it supports textarea', async function(assert) {
+    this.set('value', 'foo bar');
+    await render(hbs`<Textarea @value={{this.value}} />`);
+
+    assert.dom('textarea').exists();
+    assert.dom('textarea').hasValue('foo bar');
+  });
+
+  test('it passes supported properties and attributes', async function(assert) {
+    await render(
+      hbs`<Input 
+        @value="foo" 
+        @size="20"
+        name="username"
+        placeholder="Enter username"
+        class="form-input"
+        role="searchbox"
+      />`
+    );
+
+    // does not test each and every supported property / HTML attribute, as the list is rather long, and the transform
+    // will just pass anything through, so either all work or no one does.
+    assert.dom('input').hasAttribute('type', 'text');
+    assert.dom('input').hasValue('foo');
+    assert.dom('input').hasAttribute('name', 'username');
+    assert.dom('input').hasAttribute('placeholder', 'Enter username');
+    assert.dom('input').hasClass('form-input');
+    assert.dom('input').hasAttribute('role', 'searchbox');
+  });
+});