From 2541268d44fc44636b3fa55c871fa5ad2edeb8d6 Mon Sep 17 00:00:00 2001
From: Godfrey Chan <godfreykfc@gmail.com>
Date: Wed, 13 Mar 2019 16:13:36 -0700
Subject: [PATCH 1/4] [FEATURE ember-glimmer-angle-bracket-built-ins]

Implement `<Textarea />`
---
 FEATURES.md                                   |   7 +
 .../@ember/-internals/glimmer/lib/resolver.ts |  16 +-
 .../-internals/glimmer/lib/setup-registry.ts  |   8 +-
 .../@ember/-internals/glimmer/lib/syntax.ts   |   2 +-
 .../lib/syntax/{-text-area.ts => textarea.ts} |   3 +-
 .../components/contextual-components-test.js  |  33 ++-
 .../components/textarea-angle-test.js         | 221 ++++++++++++++++++
 .../textarea-curly-test.js}                   |   8 +-
 .../tests/integration/helpers/input-test.js   |   2 +-
 .../application/tests/application_test.js     |  10 +-
 packages/@ember/canary-features/index.ts      |   4 +
 packages/@ember/engine/tests/engine_test.js   |   8 +-
 12 files changed, 301 insertions(+), 21 deletions(-)
 rename packages/@ember/-internals/glimmer/lib/syntax/{-text-area.ts => textarea.ts} (83%)
 create mode 100644 packages/@ember/-internals/glimmer/tests/integration/components/textarea-angle-test.js
 rename packages/@ember/-internals/glimmer/tests/integration/{helpers/text-area-test.js => components/textarea-curly-test.js} (95%)

diff --git a/FEATURES.md b/FEATURES.md
index dbb12ae1bea..abe424ae4ed 100644
--- a/FEATURES.md
+++ b/FEATURES.md
@@ -43,3 +43,10 @@ for a detailed explanation.
   syntax.
 
   See [RFC #457](https://github.com/emberjs/rfcs/pull/457).
+
+* `ember-glimmer-angle-bracket-built-ins`
+
+  Allow the built-in `LinkTo`, `Input`, and `Textarea` components to be invoked
+  with the angle bracket invocation sytnax.
+
+  See [RFC #459](https://github.com/emberjs/rfcs/pull/459).
diff --git a/packages/@ember/-internals/glimmer/lib/resolver.ts b/packages/@ember/-internals/glimmer/lib/resolver.ts
index 43f49e93575..ba3ec4d748d 100644
--- a/packages/@ember/-internals/glimmer/lib/resolver.ts
+++ b/packages/@ember/-internals/glimmer/lib/resolver.ts
@@ -2,7 +2,10 @@ import { privatize as P } from '@ember/-internals/container';
 import { ENV } from '@ember/-internals/environment';
 import { LookupOptions, Owner, setOwner } from '@ember/-internals/owner';
 import { lookupComponent, lookupPartial, OwnedTemplateMeta } from '@ember/-internals/views';
-import { EMBER_MODULE_UNIFICATION } from '@ember/canary-features';
+import {
+  EMBER_GLIMMER_ANGLE_BRACKET_BUILT_INS,
+  EMBER_MODULE_UNIFICATION,
+} from '@ember/canary-features';
 import { assert } from '@ember/debug';
 import { _instrumentStart } from '@ember/instrumentation';
 import {
@@ -303,8 +306,15 @@ export default class RuntimeResolver implements IRuntimeResolver<OwnedTemplateMe
     _name: string,
     meta: OwnedTemplateMeta
   ): Option<ComponentDefinition> {
-    assert('You cannot use `textarea` as a component name.', _name !== 'textarea');
-    assert('You cannot use `input` as a component name.', _name !== 'input');
+    assert(
+      'Invoking `{{textarea}}` using angle bracket syntax or `component` helper is not yet supported.',
+      EMBER_GLIMMER_ANGLE_BRACKET_BUILT_INS || _name !== 'textarea'
+    );
+
+    assert(
+      'Invoking `{{input}}` using angle bracket syntax or `component` helper is not yet supported.',
+      _name !== 'input'
+    );
 
     let name = _name;
     let namespace = undefined;
diff --git a/packages/@ember/-internals/glimmer/lib/setup-registry.ts b/packages/@ember/-internals/glimmer/lib/setup-registry.ts
index bb214b3264c..a0b61cde171 100644
--- a/packages/@ember/-internals/glimmer/lib/setup-registry.ts
+++ b/packages/@ember/-internals/glimmer/lib/setup-registry.ts
@@ -1,6 +1,7 @@
 import { hasDOM } from '@ember/-internals/browser-environment';
 import { privatize as P, Registry } from '@ember/-internals/container';
 import { ENV } from '@ember/-internals/environment';
+import { EMBER_GLIMMER_ANGLE_BRACKET_BUILT_INS } from '@ember/canary-features';
 import { Simple } from '@glimmer/interfaces';
 import Component from './component';
 import Checkbox from './components/checkbox';
@@ -97,10 +98,15 @@ export function setupEngineRegistry(registry: Registry) {
   registry.register('helper:loc', loc);
 
   registry.register('component:-text-field', TextField);
-  registry.register('component:-text-area', TextArea);
   registry.register('component:-checkbox', Checkbox);
   registry.register('component:link-to', LinkToComponent);
 
+  if (EMBER_GLIMMER_ANGLE_BRACKET_BUILT_INS) {
+    registry.register('component:textarea', TextArea);
+  } else {
+    registry.register('component:-text-area', TextArea);
+  }
+
   if (!ENV._TEMPLATE_ONLY_GLIMMER_COMPONENTS) {
     registry.register(P`component:-default`, Component);
   }
diff --git a/packages/@ember/-internals/glimmer/lib/syntax.ts b/packages/@ember/-internals/glimmer/lib/syntax.ts
index f4f1d0b643c..b95610dc31d 100644
--- a/packages/@ember/-internals/glimmer/lib/syntax.ts
+++ b/packages/@ember/-internals/glimmer/lib/syntax.ts
@@ -5,11 +5,11 @@ import { Macros, OpcodeBuilder } from '@glimmer/opcode-compiler';
 import { Option } from '@glimmer/util';
 import { Core } from '@glimmer/wire-format';
 import CompileTimeLookup from './compile-time-lookup';
-import { textAreaMacro } from './syntax/-text-area';
 import { inputMacro } from './syntax/input';
 import { blockLetMacro } from './syntax/let';
 import { mountMacro } from './syntax/mount';
 import { outletMacro } from './syntax/outlet';
+import { textAreaMacro } from './syntax/textarea';
 import { hashToArgs } from './syntax/utils';
 import { wrapComponentClassAttribute } from './utils/bindings';
 
diff --git a/packages/@ember/-internals/glimmer/lib/syntax/-text-area.ts b/packages/@ember/-internals/glimmer/lib/syntax/textarea.ts
similarity index 83%
rename from packages/@ember/-internals/glimmer/lib/syntax/-text-area.ts
rename to packages/@ember/-internals/glimmer/lib/syntax/textarea.ts
index 0ca8ea8a35d..9500e63541b 100644
--- a/packages/@ember/-internals/glimmer/lib/syntax/-text-area.ts
+++ b/packages/@ember/-internals/glimmer/lib/syntax/textarea.ts
@@ -1,4 +1,5 @@
 import { OwnedTemplateMeta } from '@ember/-internals/views';
+import { EMBER_GLIMMER_ANGLE_BRACKET_BUILT_INS } from '@ember/canary-features';
 import { Option } from '@glimmer/interfaces';
 import { OpcodeBuilder } from '@glimmer/opcode-compiler';
 import * as WireFormat from '@glimmer/wire-format';
@@ -12,7 +13,7 @@ export function textAreaMacro(
   builder: OpcodeBuilder<OwnedTemplateMeta>
 ) {
   let definition = builder.compiler['resolver'].lookupComponentDefinition(
-    '-text-area',
+    EMBER_GLIMMER_ANGLE_BRACKET_BUILT_INS ? 'textarea' : '-text-area',
     builder.referrer
   );
   wrapComponentClassAttribute(hash);
diff --git a/packages/@ember/-internals/glimmer/tests/integration/components/contextual-components-test.js b/packages/@ember/-internals/glimmer/tests/integration/components/contextual-components-test.js
index 39f0e2045a7..8dbbc40513d 100644
--- a/packages/@ember/-internals/glimmer/tests/integration/components/contextual-components-test.js
+++ b/packages/@ember/-internals/glimmer/tests/integration/components/contextual-components-test.js
@@ -1220,13 +1220,38 @@ moduleFor(
     ['@test GH#14632 give useful warning when calling contextual components with input as a name']() {
       expectAssertion(() => {
         this.render('{{component (component "input" type="text")}}');
-      }, 'You cannot use `input` as a component name.');
+      }, 'Invoking `{{input}}` using angle bracket syntax or `component` helper is not yet supported.');
     }
 
-    ['@test GH#14632 give useful warning when calling contextual components with textarea as a name']() {
+    ['@feature(!ember-glimmer-angle-bracket-built-ins) GH#14632 give useful warning when calling contextual components with textarea as a name']() {
       expectAssertion(() => {
-        this.render('{{component (component "textarea" type="text")}}');
-      }, 'You cannot use `textarea` as a component name.');
+        this.render('{{component (component "textarea")}}');
+      }, 'Invoking `{{textarea}}` using angle bracket syntax or `component` helper is not yet supported.');
+    }
+
+    ['@feature(ember-glimmer-angle-bracket-built-ins) it can invoke textarea component']() {
+      this.render('{{component (component "textarea" value=value)}}', {
+        value: 'foo',
+      });
+
+      this.assertComponentElement(this.firstChild, {
+        tagName: 'textarea',
+        attrs: {
+          class: 'ember-text-area ember-view',
+        },
+      });
+
+      this.assert.strictEqual('foo', this.firstChild.value);
+
+      this.assertStableRerender();
+
+      runTask(() => this.context.set('value', 'bar'));
+
+      this.assert.strictEqual('bar', this.firstChild.value);
+
+      runTask(() => this.context.set('value', 'foo'));
+
+      this.assert.strictEqual('foo', this.firstChild.value);
     }
 
     ['@test GH#17121 local variable should win over helper (without arguments)']() {
diff --git a/packages/@ember/-internals/glimmer/tests/integration/components/textarea-angle-test.js b/packages/@ember/-internals/glimmer/tests/integration/components/textarea-angle-test.js
new file mode 100644
index 00000000000..9793ed83931
--- /dev/null
+++ b/packages/@ember/-internals/glimmer/tests/integration/components/textarea-angle-test.js
@@ -0,0 +1,221 @@
+import { RenderingTestCase, moduleFor, classes, applyMixins, runTask } from 'internal-test-helpers';
+
+import { EMBER_GLIMMER_ANGLE_BRACKET_BUILT_INS } from '@ember/canary-features';
+import { assign } from '@ember/polyfills';
+import { set } from '@ember/-internals/metal';
+
+if (EMBER_GLIMMER_ANGLE_BRACKET_BUILT_INS) {
+  class TextAreaRenderingTest extends RenderingTestCase {
+    assertTextArea({ attrs, value } = {}) {
+      let mergedAttrs = assign({ class: classes('ember-view ember-text-area') }, attrs);
+      this.assertComponentElement(this.firstChild, {
+        tagName: 'textarea',
+        attrs: mergedAttrs,
+      });
+
+      if (value) {
+        this.assert.strictEqual(value, this.firstChild.value);
+      }
+    }
+
+    triggerEvent(type, options = {}) {
+      let event = document.createEvent('Events');
+      event.initEvent(type, true, true);
+      assign(event, options);
+
+      this.firstChild.dispatchEvent(event);
+    }
+  }
+
+  class BoundTextAreaAttributes {
+    constructor(cases) {
+      this.cases = cases;
+    }
+
+    generate({ attribute, first, second }) {
+      return {
+        [`@test ${attribute} (HTML attribute)`]() {
+          this.render(`<Textarea ${attribute}={{value}} />`, {
+            value: first,
+          });
+          this.assertTextArea({ attrs: { [attribute]: first } });
+
+          this.assertStableRerender();
+
+          runTask(() => set(this.context, 'value', second));
+          this.assertTextArea({ attrs: { [attribute]: second } });
+
+          runTask(() => set(this.context, 'value', first));
+          this.assertTextArea({ attrs: { [attribute]: first } });
+        },
+
+        [`@test @${attribute} (named argument)`]() {
+          this.render(`<Textarea @${attribute}={{value}} />`, {
+            value: first,
+          });
+          this.assertTextArea({ attrs: { [attribute]: first } });
+
+          this.assertStableRerender();
+
+          runTask(() => set(this.context, 'value', second));
+          this.assertTextArea({ attrs: { [attribute]: second } });
+
+          runTask(() => set(this.context, 'value', first));
+          this.assertTextArea({ attrs: { [attribute]: first } });
+        },
+      };
+    }
+  }
+
+  applyMixins(
+    TextAreaRenderingTest,
+    new BoundTextAreaAttributes([
+      { attribute: 'placeholder', first: 'Stuff here', second: 'Other stuff' },
+      { attribute: 'name', first: 'Stuff here', second: 'Other stuff' },
+      { attribute: 'title', first: 'Stuff here', second: 'Other stuff' },
+      { attribute: 'maxlength', first: '1', second: '2' },
+      { attribute: 'rows', first: '1', second: '2' },
+      { attribute: 'cols', first: '1', second: '2' },
+      { attribute: 'tabindex', first: '1', second: '2' },
+    ])
+  );
+
+  moduleFor(
+    'Components test: <Textarea>',
+    class extends TextAreaRenderingTest {
+      ['@test Should insert a <textarea>'](assert) {
+        this.render('<Textarea />');
+
+        assert.equal(this.$('textarea').length, 1);
+
+        this.assertStableRerender();
+      }
+
+      ['@test Should respect disabled (HTML attribute)'](assert) {
+        this.render('<Textarea disabled={{disabled}} />', {
+          disabled: true,
+        });
+        assert.ok(this.$('textarea').is(':disabled'));
+      }
+
+      ['@test Should respect @disabled (named argument)'](assert) {
+        this.render('<Textarea @disabled={{disabled}} />', {
+          disabled: true,
+        });
+        assert.ok(this.$('textarea').is(':disabled'));
+      }
+
+      ['@test Should respect disabled (HTML attribute) when false'](assert) {
+        this.render('<Textarea disabled={{disabled}} />', {
+          disabled: false,
+        });
+        assert.ok(this.$('textarea').is(':not(:disabled)'));
+      }
+
+      ['@test Should respect @disabled (named argument) when false'](assert) {
+        this.render('<Textarea @disabled={{disabled}} />', {
+          disabled: false,
+        });
+        assert.ok(this.$('textarea').is(':not(:disabled)'));
+      }
+
+      ['@test Should become disabled (HTML attribute) when the context changes'](assert) {
+        this.render('<Textarea disabled={{disabled}} />');
+        assert.ok(this.$('textarea').is(':not(:disabled)'));
+
+        this.assertStableRerender();
+
+        runTask(() => set(this.context, 'disabled', true));
+        assert.ok(this.$('textarea').is(':disabled'));
+
+        runTask(() => set(this.context, 'disabled', false));
+        assert.ok(this.$('textarea').is(':not(:disabled)'));
+      }
+
+      ['@test Should become @disabled (named argument) when the context changes'](assert) {
+        this.render('<Textarea @disabled={{disabled}} />');
+        assert.ok(this.$('textarea').is(':not(:disabled)'));
+
+        this.assertStableRerender();
+
+        runTask(() => set(this.context, 'disabled', true));
+        assert.ok(this.$('textarea').is(':disabled'));
+
+        runTask(() => set(this.context, 'disabled', false));
+        assert.ok(this.$('textarea').is(':not(:disabled)'));
+      }
+
+      ['@test Should bind its contents to the specified @value']() {
+        this.render('<Textarea @value={{model.val}} />', {
+          model: { val: 'A beautiful day in Seattle' },
+        });
+        this.assertTextArea({ value: 'A beautiful day in Seattle' });
+
+        this.assertStableRerender();
+
+        runTask(() => set(this.context, 'model.val', 'Auckland'));
+        this.assertTextArea({ value: 'Auckland' });
+
+        runTask(() => set(this.context, 'model', { val: 'A beautiful day in Seattle' }));
+        this.assertTextArea({ value: 'A beautiful day in Seattle' });
+      }
+
+      ['@test GH#14001 Should correctly handle an empty string bound value']() {
+        this.render('<Textarea @value={{message}} />', { message: '' });
+
+        this.assert.strictEqual(this.firstChild.value, '');
+
+        this.assertStableRerender();
+
+        runTask(() => set(this.context, 'message', 'hello'));
+
+        this.assert.strictEqual(this.firstChild.value, 'hello');
+
+        runTask(() => set(this.context, 'message', ''));
+
+        this.assert.strictEqual(this.firstChild.value, '');
+      }
+
+      ['@test should update the @value for `cut` / `input` / `change` events']() {
+        this.render('<Textarea @value={{model.val}} />', {
+          model: { val: 'A beautiful day in Seattle' },
+        });
+        this.assertTextArea({ value: 'A beautiful day in Seattle' });
+
+        this.assertStableRerender();
+
+        runTask(() => {
+          this.firstChild.value = 'Auckland';
+          this.triggerEvent('cut');
+        });
+        this.assertTextArea({ value: 'Auckland' });
+
+        runTask(() => {
+          this.firstChild.value = 'Hope';
+          this.triggerEvent('paste');
+        });
+        this.assertTextArea({ value: 'Hope' });
+
+        runTask(() => {
+          this.firstChild.value = 'Boston';
+          this.triggerEvent('input');
+        });
+        this.assertTextArea({ value: 'Boston' });
+
+        runTask(() => set(this.context, 'model', { val: 'A beautiful day in Seattle' }));
+        this.assertTextArea({ value: 'A beautiful day in Seattle' });
+      }
+    }
+  );
+} else {
+  moduleFor(
+    'Components test: <Textarea>',
+    class extends RenderingTestCase {
+      ['@test it is not allowed']() {
+        expectAssertion(() => {
+          this.render(`<Textarea />`);
+        }, 'Invoking `{{textarea}}` using angle bracket syntax or `component` helper is not yet supported.');
+      }
+    }
+  );
+}
diff --git a/packages/@ember/-internals/glimmer/tests/integration/helpers/text-area-test.js b/packages/@ember/-internals/glimmer/tests/integration/components/textarea-curly-test.js
similarity index 95%
rename from packages/@ember/-internals/glimmer/tests/integration/helpers/text-area-test.js
rename to packages/@ember/-internals/glimmer/tests/integration/components/textarea-curly-test.js
index 27a984ddecc..dbaf53a3db3 100644
--- a/packages/@ember/-internals/glimmer/tests/integration/helpers/text-area-test.js
+++ b/packages/@ember/-internals/glimmer/tests/integration/components/textarea-curly-test.js
@@ -64,14 +64,8 @@ applyMixins(
 );
 
 moduleFor(
-  'Helpers test: {{textarea}}',
+  'Components test: {{textarea}}',
   class extends TextAreaRenderingTest {
-    ['@test Should not allow angle bracket invocation']() {
-      expectAssertion(() => {
-        this.render('<Textarea />');
-      }, 'You cannot use `textarea` as a component name.');
-    }
-
     ['@test Should insert a textarea'](assert) {
       this.render('{{textarea}}');
 
diff --git a/packages/@ember/-internals/glimmer/tests/integration/helpers/input-test.js b/packages/@ember/-internals/glimmer/tests/integration/helpers/input-test.js
index 547f662ac42..4e799d1749c 100644
--- a/packages/@ember/-internals/glimmer/tests/integration/helpers/input-test.js
+++ b/packages/@ember/-internals/glimmer/tests/integration/helpers/input-test.js
@@ -83,7 +83,7 @@ moduleFor(
     ['@test should not allow angle bracket invocation']() {
       expectAssertion(() => {
         this.render('<Input />');
-      }, 'You cannot use `input` as a component name.');
+      }, 'Invoking `{{input}}` using angle bracket syntax or `component` helper is not yet supported.');
     }
 
     ['@test a single text field is inserted into the DOM']() {
diff --git a/packages/@ember/application/tests/application_test.js b/packages/@ember/application/tests/application_test.js
index 825236018f8..4aaabd8fbbe 100644
--- a/packages/@ember/application/tests/application_test.js
+++ b/packages/@ember/application/tests/application_test.js
@@ -3,10 +3,10 @@ import VERSION from 'ember/version';
 import { ENV, context } from '@ember/-internals/environment';
 import { libraries } from '@ember/-internals/metal';
 import { getDebugFunction, setDebugFunction } from '@ember/debug';
-import Application from '..';
 import { Router, NoneLocation, Route as EmberRoute } from '@ember/-internals/routing';
 import { jQueryDisabled, jQuery } from '@ember/-internals/views';
 import { _loaded } from '@ember/application';
+import { EMBER_GLIMMER_ANGLE_BRACKET_BUILT_INS } from '@ember/canary-features';
 import Controller from '@ember/controller';
 import { Object as EmberObject } from '@ember/-internals/runtime';
 import { setTemplates } from '@ember/-internals/glimmer';
@@ -23,6 +23,7 @@ import {
   runTask,
 } from 'internal-test-helpers';
 import { run } from '@ember/runloop';
+import Application from '..';
 
 moduleFor(
   'Application, autobooting multiple apps',
@@ -151,10 +152,15 @@ moduleFor(
       verifyInjection(assert, application, 'route', '_router', 'router:main');
 
       verifyRegistration(assert, application, 'component:-text-field');
-      verifyRegistration(assert, application, 'component:-text-area');
       verifyRegistration(assert, application, 'component:-checkbox');
       verifyRegistration(assert, application, 'component:link-to');
 
+      if (EMBER_GLIMMER_ANGLE_BRACKET_BUILT_INS) {
+        verifyRegistration(assert, application, 'component:textarea');
+      } else {
+        verifyRegistration(assert, application, 'component:-text-area');
+      }
+
       verifyRegistration(assert, application, 'service:-routing');
       verifyInjection(assert, application, 'service:-routing', 'router', 'router:main');
 
diff --git a/packages/@ember/canary-features/index.ts b/packages/@ember/canary-features/index.ts
index 94395a45289..5295eaf727f 100644
--- a/packages/@ember/canary-features/index.ts
+++ b/packages/@ember/canary-features/index.ts
@@ -18,6 +18,7 @@ export const DEFAULT_FEATURES = {
   EMBER_MODULE_UNIFICATION: null,
   EMBER_METAL_TRACKED_PROPERTIES: null,
   EMBER_GLIMMER_ANGLE_BRACKET_NESTED_LOOKUP: null,
+  EMBER_GLIMMER_ANGLE_BRACKET_BUILT_INS: null,
   EMBER_ROUTING_BUILD_ROUTEINFO_METADATA: true,
   EMBER_NATIVE_DECORATOR_SUPPORT: null,
 };
@@ -75,6 +76,9 @@ export const EMBER_METAL_TRACKED_PROPERTIES = featureValue(FEATURES.EMBER_METAL_
 export const EMBER_GLIMMER_ANGLE_BRACKET_NESTED_LOOKUP = featureValue(
   FEATURES.EMBER_GLIMMER_ANGLE_BRACKET_NESTED_LOOKUP
 );
+export const EMBER_GLIMMER_ANGLE_BRACKET_BUILT_INS = featureValue(
+  FEATURES.EMBER_GLIMMER_ANGLE_BRACKET_BUILT_INS
+);
 
 export const EMBER_ROUTING_BUILD_ROUTEINFO_METADATA = featureValue(
   FEATURES.EMBER_ROUTING_BUILD_ROUTEINFO_METADATA
diff --git a/packages/@ember/engine/tests/engine_test.js b/packages/@ember/engine/tests/engine_test.js
index 83c55510296..81a9bac7609 100644
--- a/packages/@ember/engine/tests/engine_test.js
+++ b/packages/@ember/engine/tests/engine_test.js
@@ -1,4 +1,5 @@
 import { context } from '@ember/-internals/environment';
+import { EMBER_GLIMMER_ANGLE_BRACKET_BUILT_INS } from '@ember/canary-features';
 import { run } from '@ember/runloop';
 import Engine from '@ember/engine';
 import { Object as EmberObject } from '@ember/-internals/runtime';
@@ -72,10 +73,15 @@ moduleFor(
       verifyInjection(assert, engine, 'route', '_router', 'router:main');
 
       verifyRegistration(assert, engine, 'component:-text-field');
-      verifyRegistration(assert, engine, 'component:-text-area');
       verifyRegistration(assert, engine, 'component:-checkbox');
       verifyRegistration(assert, engine, 'component:link-to');
 
+      if (EMBER_GLIMMER_ANGLE_BRACKET_BUILT_INS) {
+        verifyRegistration(assert, engine, 'component:textarea');
+      } else {
+        verifyRegistration(assert, engine, 'component:-text-area');
+      }
+
       verifyRegistration(assert, engine, 'service:-routing');
       verifyInjection(assert, engine, 'service:-routing', 'router', 'router:main');
 

From 96cb49d508c324d38df614a1d2daaea54e9895fa Mon Sep 17 00:00:00 2001
From: Godfrey Chan <godfreykfc@gmail.com>
Date: Thu, 14 Mar 2019 14:27:48 -0700
Subject: [PATCH 2/4] [FEATURE ember-glimmer-angle-bracket-built-ins]

Remove `{{dash-rule}}` for curly invocations.
---
 .../@ember/-internals/glimmer/lib/syntax.ts   | 11 ++++--
 .../-internals/glimmer/lib/syntax/textarea.ts | 37 ++++++++++++++-----
 .../components/curly-components-test.js       | 24 +++++++++++-
 3 files changed, 58 insertions(+), 14 deletions(-)

diff --git a/packages/@ember/-internals/glimmer/lib/syntax.ts b/packages/@ember/-internals/glimmer/lib/syntax.ts
index b95610dc31d..e035e9193c4 100644
--- a/packages/@ember/-internals/glimmer/lib/syntax.ts
+++ b/packages/@ember/-internals/glimmer/lib/syntax.ts
@@ -1,4 +1,5 @@
 import { OwnedTemplateMeta } from '@ember/-internals/views';
+import { EMBER_GLIMMER_ANGLE_BRACKET_BUILT_INS } from '@ember/canary-features';
 import { assert } from '@ember/debug';
 import { CompilableBlock } from '@glimmer/interfaces';
 import { Macros, OpcodeBuilder } from '@glimmer/opcode-compiler';
@@ -26,7 +27,8 @@ function refineInlineSyntax(
       builder.referrer.owner.hasRegistration(`helper:${name}`)
     )
   );
-  if (name.indexOf('-') === -1) {
+
+  if (!EMBER_GLIMMER_ANGLE_BRACKET_BUILT_INS && name.indexOf('-') === -1) {
     return false;
   }
 
@@ -48,7 +50,7 @@ function refineBlockSyntax(
   inverse: Option<CompilableBlock>,
   builder: OpcodeBuilder<OwnedTemplateMeta>
 ) {
-  if (name.indexOf('-') === -1) {
+  if (!EMBER_GLIMMER_ANGLE_BRACKET_BUILT_INS && name.indexOf('-') === -1) {
     return false;
   }
 
@@ -97,11 +99,14 @@ export function populateMacros(macros: Macros) {
   inlines.add('outlet', outletMacro);
   inlines.add('mount', mountMacro);
   inlines.add('input', inputMacro);
-  inlines.add('textarea', textAreaMacro);
   inlines.addMissing(refineInlineSyntax);
   blocks.add('let', blockLetMacro);
   blocks.addMissing(refineBlockSyntax);
 
+  if (!EMBER_GLIMMER_ANGLE_BRACKET_BUILT_INS) {
+    inlines.add('textarea', textAreaMacro);
+  }
+
   for (let i = 0; i < experimentalMacros.length; i++) {
     let macro = experimentalMacros[i];
     macro(blocks, inlines);
diff --git a/packages/@ember/-internals/glimmer/lib/syntax/textarea.ts b/packages/@ember/-internals/glimmer/lib/syntax/textarea.ts
index 9500e63541b..873d6cdf49e 100644
--- a/packages/@ember/-internals/glimmer/lib/syntax/textarea.ts
+++ b/packages/@ember/-internals/glimmer/lib/syntax/textarea.ts
@@ -1,22 +1,39 @@
 import { OwnedTemplateMeta } from '@ember/-internals/views';
 import { EMBER_GLIMMER_ANGLE_BRACKET_BUILT_INS } from '@ember/canary-features';
+import { DEBUG } from '@glimmer/env';
 import { Option } from '@glimmer/interfaces';
 import { OpcodeBuilder } from '@glimmer/opcode-compiler';
+import { unreachable } from '@glimmer/util';
 import * as WireFormat from '@glimmer/wire-format';
 import { wrapComponentClassAttribute } from '../utils/bindings';
 import { hashToArgs } from './utils';
 
-export function textAreaMacro(
-  _name: string,
+export let textAreaMacro: (
+  name: string,
   params: Option<WireFormat.Core.Params>,
   hash: Option<WireFormat.Core.Hash>,
   builder: OpcodeBuilder<OwnedTemplateMeta>
-) {
-  let definition = builder.compiler['resolver'].lookupComponentDefinition(
-    EMBER_GLIMMER_ANGLE_BRACKET_BUILT_INS ? 'textarea' : '-text-area',
-    builder.referrer
-  );
-  wrapComponentClassAttribute(hash);
-  builder.component.static(definition!, [params || [], hashToArgs(hash), null, null]);
-  return true;
+) => boolean;
+
+if (EMBER_GLIMMER_ANGLE_BRACKET_BUILT_INS) {
+  if (DEBUG) {
+    textAreaMacro = () => {
+      throw unreachable();
+    };
+  }
+} else {
+  textAreaMacro = function textAreaMacro(
+    _name: string,
+    params: Option<WireFormat.Core.Params>,
+    hash: Option<WireFormat.Core.Hash>,
+    builder: OpcodeBuilder<OwnedTemplateMeta>
+  ) {
+    let definition = builder.compiler['resolver'].lookupComponentDefinition(
+      '-text-area',
+      builder.referrer
+    );
+    wrapComponentClassAttribute(hash);
+    builder.component.static(definition!, [params || [], hashToArgs(hash), null, null]);
+    return true;
+  };
 }
diff --git a/packages/@ember/-internals/glimmer/tests/integration/components/curly-components-test.js b/packages/@ember/-internals/glimmer/tests/integration/components/curly-components-test.js
index 06c12e4d985..86ce77a5976 100644
--- a/packages/@ember/-internals/glimmer/tests/integration/components/curly-components-test.js
+++ b/packages/@ember/-internals/glimmer/tests/integration/components/curly-components-test.js
@@ -1281,7 +1281,29 @@ moduleFor(
       this.assertText('some-prop some-component');
     }
 
-    ['@test component without dash is not looked up']() {
+    ['@feature(ember-glimmer-angle-bracket-built-ins) component without dash is looked up']() {
+      this.registerComponent('somecomponent', {
+        template: 'somecomponent',
+      });
+
+      this.render('{{somecomponent}}', {
+        somecomponent: 'notsomecomponent',
+      });
+
+      this.assertText('somecomponent');
+
+      this.assertStableRerender();
+
+      runTask(() => this.context.set('somecomponent', 'not not notsomecomponent'));
+
+      this.assertText('somecomponent');
+
+      runTask(() => this.context.set('somecomponent', 'notsomecomponent'));
+
+      this.assertText('somecomponent');
+    }
+
+    ['@feature(!ember-glimmer-angle-bracket-built-ins) component without dash is not looked up']() {
       this.registerComponent('somecomponent', {
         template: 'somecomponent',
       });

From 05472ed9770c49864755f6201c20e4e7ca004bb4 Mon Sep 17 00:00:00 2001
From: Godfrey Chan <godfreykfc@gmail.com>
Date: Thu, 14 Mar 2019 15:32:25 -0700
Subject: [PATCH 3/4] [FEATURE ember-glimmer-angle-bracket-built-ins]

Implement `<TextArea />` typo guard.
---
 packages/@ember/-internals/glimmer/lib/resolver.ts          | 6 ++++++
 .../tests/integration/components/textarea-angle-test.js     | 6 ++++++
 2 files changed, 12 insertions(+)

diff --git a/packages/@ember/-internals/glimmer/lib/resolver.ts b/packages/@ember/-internals/glimmer/lib/resolver.ts
index ba3ec4d748d..00b91f9c100 100644
--- a/packages/@ember/-internals/glimmer/lib/resolver.ts
+++ b/packages/@ember/-internals/glimmer/lib/resolver.ts
@@ -139,6 +139,12 @@ export default class RuntimeResolver implements IRuntimeResolver<OwnedTemplateMe
   lookupComponentHandle(name: string, meta: OwnedTemplateMeta) {
     let nextHandle = this.handles.length;
     let handle = this.handle(this._lookupComponentDefinition(name, meta));
+
+    assert(
+      'Could not find component `<TextArea />` (did you mean `<Textarea />`?)',
+      !(EMBER_GLIMMER_ANGLE_BRACKET_BUILT_INS && name === 'text-area' && handle === null)
+    );
+
     if (nextHandle === handle) {
       this.componentDefinitionCount++;
     }
diff --git a/packages/@ember/-internals/glimmer/tests/integration/components/textarea-angle-test.js b/packages/@ember/-internals/glimmer/tests/integration/components/textarea-angle-test.js
index 9793ed83931..0b62aeebe9b 100644
--- a/packages/@ember/-internals/glimmer/tests/integration/components/textarea-angle-test.js
+++ b/packages/@ember/-internals/glimmer/tests/integration/components/textarea-angle-test.js
@@ -83,6 +83,12 @@ if (EMBER_GLIMMER_ANGLE_BRACKET_BUILT_INS) {
   moduleFor(
     'Components test: <Textarea>',
     class extends TextAreaRenderingTest {
+      ['@test Should catch <TextArea />` typo']() {
+        expectAssertion(() => {
+          this.render('<TextArea />');
+        }, 'Could not find component `<TextArea />` (did you mean `<Textarea />`?)');
+      }
+
       ['@test Should insert a <textarea>'](assert) {
         this.render('<Textarea />');
 

From 06177863ae313c8d9c71e5a55dbac36700279d8f Mon Sep 17 00:00:00 2001
From: Godfrey Chan <godfreykfc@gmail.com>
Date: Fri, 15 Mar 2019 17:42:44 -0700
Subject: [PATCH 4/4] [FEATURE ember-glimmer-angle-bracket-built-ins]

Implement `<Input />`.
---
 packages/@ember/-internals/glimmer/index.ts   |    4 +-
 .../glimmer/lib/components/input.ts           |  177 +++
 .../{text_field.ts => text-field.ts}          |    0
 .../components/{text_area.ts => textarea.ts}  |    0
 .../@ember/-internals/glimmer/lib/resolver.ts |    2 +-
 .../-internals/glimmer/lib/setup-registry.ts  |   19 +-
 .../@ember/-internals/glimmer/lib/syntax.ts   |   10 +-
 .../-internals/glimmer/lib/syntax/input.ts    |  370 +++---
 .../glimmer/lib/templates/input.d.ts          |    3 +
 .../glimmer/lib/templates/input.hbs           |   70 ++
 .../components/contextual-components-test.js  |   28 +-
 .../components/input-angle-test.js            | 1105 +++++++++++++++++
 .../input-curly-test.js}                      |  103 +-
 .../views/lib/mixins/text_support.js          |   20 +-
 .../lib/plugins/deprecate-send-action.ts      |   41 +-
 .../lib/plugins/index.ts                      |    6 +-
 .../plugins/transform-input-type-syntax.ts    |   67 +-
 .../plugins/deprecate-send-action-test.js     |    2 +-
 18 files changed, 1764 insertions(+), 263 deletions(-)
 create mode 100644 packages/@ember/-internals/glimmer/lib/components/input.ts
 rename packages/@ember/-internals/glimmer/lib/components/{text_field.ts => text-field.ts} (100%)
 rename packages/@ember/-internals/glimmer/lib/components/{text_area.ts => textarea.ts} (100%)
 create mode 100644 packages/@ember/-internals/glimmer/lib/templates/input.d.ts
 create mode 100644 packages/@ember/-internals/glimmer/lib/templates/input.hbs
 create mode 100644 packages/@ember/-internals/glimmer/tests/integration/components/input-angle-test.js
 rename packages/@ember/-internals/glimmer/tests/integration/{helpers/input-test.js => components/input-curly-test.js} (83%)

diff --git a/packages/@ember/-internals/glimmer/index.ts b/packages/@ember/-internals/glimmer/index.ts
index e936f345548..18fc753c6ea 100644
--- a/packages/@ember/-internals/glimmer/index.ts
+++ b/packages/@ember/-internals/glimmer/index.ts
@@ -265,8 +265,8 @@
 export { default as RootTemplate } from './lib/templates/root';
 export { default as template } from './lib/template';
 export { default as Checkbox } from './lib/components/checkbox';
-export { default as TextField } from './lib/components/text_field';
-export { default as TextArea } from './lib/components/text_area';
+export { default as TextField } from './lib/components/text-field';
+export { default as TextArea } from './lib/components/textarea';
 export { default as LinkComponent } from './lib/components/link-to';
 export { default as Component, ROOT_REF } from './lib/component';
 export { default as Helper, helper } from './lib/helper';
diff --git a/packages/@ember/-internals/glimmer/lib/components/input.ts b/packages/@ember/-internals/glimmer/lib/components/input.ts
new file mode 100644
index 00000000000..fbccb87a825
--- /dev/null
+++ b/packages/@ember/-internals/glimmer/lib/components/input.ts
@@ -0,0 +1,177 @@
+/**
+@module @ember/component
+*/
+import { computed } from '@ember/-internals/metal';
+import { EMBER_GLIMMER_ANGLE_BRACKET_BUILT_INS } from '@ember/canary-features';
+import { assert } from '@ember/debug';
+import { DEBUG } from '@glimmer/env';
+import Component from '../component';
+
+let Input: any;
+
+if (EMBER_GLIMMER_ANGLE_BRACKET_BUILT_INS) {
+  /**
+    The `{{input}}` helper lets you create an HTML `<input />` component.
+    It causes a `TextField` component to be rendered.  For more info,
+    see the [TextField](/api/ember/release/classes/TextField) docs and
+    the [templates guide](https://guides.emberjs.com/release/templates/input-helpers/).
+
+    ```handlebars
+    {{input value="987"}}
+    ```
+
+    renders as:
+
+    ```HTML
+    <input type="text" value="987" />
+    ```
+
+    ### Text field
+
+    If no `type` option is specified, a default of type 'text' is used.
+    Many of the standard HTML attributes may be passed to this helper.
+    <table>
+      <tr><td>`readonly`</td><td>`required`</td><td>`autofocus`</td></tr>
+      <tr><td>`value`</td><td>`placeholder`</td><td>`disabled`</td></tr>
+      <tr><td>`size`</td><td>`tabindex`</td><td>`maxlength`</td></tr>
+      <tr><td>`name`</td><td>`min`</td><td>`max`</td></tr>
+      <tr><td>`pattern`</td><td>`accept`</td><td>`autocomplete`</td></tr>
+      <tr><td>`autosave`</td><td>`formaction`</td><td>`formenctype`</td></tr>
+      <tr><td>`formmethod`</td><td>`formnovalidate`</td><td>`formtarget`</td></tr>
+      <tr><td>`height`</td><td>`inputmode`</td><td>`multiple`</td></tr>
+      <tr><td>`step`</td><td>`width`</td><td>`form`</td></tr>
+      <tr><td>`selectionDirection`</td><td>`spellcheck`</td><td>&nbsp;</td></tr>
+    </table>
+    When set to a quoted string, these values will be directly applied to the HTML
+    element. When left unquoted, these values will be bound to a property on the
+    template's current rendering context (most typically a controller instance).
+    A very common use of this helper is to bind the `value` of an input to an Object's attribute:
+
+    ```handlebars
+    Search:
+    {{input value=searchWord}}
+    ```
+
+    In this example, the initial value in the `<input />` will be set to the value of `searchWord`.
+    If the user changes the text, the value of `searchWord` will also be updated.
+
+    ### Actions
+
+    The helper can send multiple actions based on user events.
+    The action property defines the action which is sent when
+    the user presses the return key.
+
+    ```handlebars
+    {{input action="submit"}}
+    ```
+
+    The helper allows some user events to send actions.
+
+    * `enter`
+    * `insert-newline`
+    * `escape-press`
+    * `focus-in`
+    * `focus-out`
+    * `key-press`
+    * `key-up`
+
+    For example, if you desire an action to be sent when the input is blurred,
+    you only need to setup the action name to the event name property.
+
+    ```handlebars
+    {{input focus-out="alertMessage"}}
+    ```
+    See more about [Text Support Actions](/api/ember/release/classes/TextField)
+
+    ### Extending `TextField`
+
+    Internally, `{{input type="text"}}` creates an instance of `TextField`, passing
+    arguments from the helper to `TextField`'s `create` method. You can extend the
+    capabilities of text inputs in your applications by reopening this class. For example,
+    if you are building a Bootstrap project where `data-*` attributes are used, you
+    can add one to the `TextField`'s `attributeBindings` property:
+
+    ```javascript
+    import TextField from '@ember/component/text-field';
+    TextField.reopen({
+      attributeBindings: ['data-error']
+    });
+    ```
+
+    Keep in mind when writing `TextField` subclasses that `TextField`
+    itself extends `Component`. Expect isolated component semantics, not
+    legacy 1.x view semantics (like `controller` being present).
+    See more about [Ember components](/api/ember/release/classes/Component)
+
+    ### Checkbox
+
+    Checkboxes are special forms of the `{{input}}` helper.  To create a `<checkbox />`:
+
+    ```handlebars
+    Emberize Everything:
+    {{input type="checkbox" name="isEmberized" checked=isEmberized}}
+    ```
+
+    This will bind checked state of this checkbox to the value of `isEmberized`  -- if either one changes,
+    it will be reflected in the other.
+
+    The following HTML attributes can be set via the helper:
+
+    * `checked`
+    * `disabled`
+    * `tabindex`
+    * `indeterminate`
+    * `name`
+    * `autofocus`
+    * `form`
+
+    ### Extending `Checkbox`
+
+    Internally, `{{input type="checkbox"}}` creates an instance of `Checkbox`, passing
+    arguments from the helper to `Checkbox`'s `create` method. You can extend the
+    capablilties of checkbox inputs in your applications by reopening this class. For example,
+    if you wanted to add a css class to all checkboxes in your application:
+
+    ```javascript
+    import Checkbox from '@ember/component/checkbox';
+
+    Checkbox.reopen({
+      classNames: ['my-app-checkbox']
+    });
+    ```
+
+    @method input
+    @for Ember.Templates.helpers
+    @param {Hash} options
+    @public
+  */
+  Input = Component.extend({
+    tagName: '',
+
+    isCheckbox: computed('type', function(this: { type?: unknown }) {
+      return this.type === 'checkbox';
+    }),
+  });
+
+  Input.toString = () => '@ember/component/input';
+
+  if (DEBUG) {
+    const UNSET = {};
+
+    Input.reopen({
+      value: UNSET,
+
+      didReceiveAttrs() {
+        this._super();
+
+        assert(
+          "`<Input @type='checkbox' @value={{...}} />` is not supported; " +
+            "please use `<Input @type='checkbox' @checked={{...}} />` instead.",
+          !(this.type === 'checkbox' && this.value !== UNSET)
+        );
+      },
+    });
+  }
+}
+
+export default Input;
diff --git a/packages/@ember/-internals/glimmer/lib/components/text_field.ts b/packages/@ember/-internals/glimmer/lib/components/text-field.ts
similarity index 100%
rename from packages/@ember/-internals/glimmer/lib/components/text_field.ts
rename to packages/@ember/-internals/glimmer/lib/components/text-field.ts
diff --git a/packages/@ember/-internals/glimmer/lib/components/text_area.ts b/packages/@ember/-internals/glimmer/lib/components/textarea.ts
similarity index 100%
rename from packages/@ember/-internals/glimmer/lib/components/text_area.ts
rename to packages/@ember/-internals/glimmer/lib/components/textarea.ts
diff --git a/packages/@ember/-internals/glimmer/lib/resolver.ts b/packages/@ember/-internals/glimmer/lib/resolver.ts
index 00b91f9c100..225fb452ae5 100644
--- a/packages/@ember/-internals/glimmer/lib/resolver.ts
+++ b/packages/@ember/-internals/glimmer/lib/resolver.ts
@@ -319,7 +319,7 @@ export default class RuntimeResolver implements IRuntimeResolver<OwnedTemplateMe
 
     assert(
       'Invoking `{{input}}` using angle bracket syntax or `component` helper is not yet supported.',
-      _name !== 'input'
+      EMBER_GLIMMER_ANGLE_BRACKET_BUILT_INS || _name !== 'input'
     );
 
     let name = _name;
diff --git a/packages/@ember/-internals/glimmer/lib/setup-registry.ts b/packages/@ember/-internals/glimmer/lib/setup-registry.ts
index a0b61cde171..97eb6dcdd86 100644
--- a/packages/@ember/-internals/glimmer/lib/setup-registry.ts
+++ b/packages/@ember/-internals/glimmer/lib/setup-registry.ts
@@ -5,9 +5,10 @@ import { EMBER_GLIMMER_ANGLE_BRACKET_BUILT_INS } from '@ember/canary-features';
 import { Simple } from '@glimmer/interfaces';
 import Component from './component';
 import Checkbox from './components/checkbox';
+import Input from './components/input';
 import LinkToComponent from './components/link-to';
-import TextArea from './components/text_area';
-import TextField from './components/text_field';
+import TextField from './components/text-field';
+import TextArea from './components/textarea';
 import {
   clientBuilder,
   DOMChanges,
@@ -21,6 +22,7 @@ import loc from './helpers/loc';
 import { InertRenderer, InteractiveRenderer } from './renderer';
 import TemplateCompiler from './template-compiler';
 import ComponentTemplate from './templates/component';
+import InputTemplate from './templates/input';
 import OutletTemplate from './templates/outlet';
 import RootTemplate from './templates/root';
 import OutletView from './views/outlet';
@@ -102,6 +104,19 @@ export function setupEngineRegistry(registry: Registry) {
   registry.register('component:link-to', LinkToComponent);
 
   if (EMBER_GLIMMER_ANGLE_BRACKET_BUILT_INS) {
+    // Internal
+
+    // These are registered as CapCase because our internal tempaltes do not
+    // go through the dashify transform. As a nice bonus, it also makes it
+    // more difficult for users to invoke them by accident.
+    registry.register('component:TextField', TextField);
+    registry.register('component:Checkbox', Checkbox);
+
+    // Public
+
+    registry.register('component:input', Input);
+    registry.register('template:components/input', InputTemplate);
+
     registry.register('component:textarea', TextArea);
   } else {
     registry.register('component:-text-area', TextArea);
diff --git a/packages/@ember/-internals/glimmer/lib/syntax.ts b/packages/@ember/-internals/glimmer/lib/syntax.ts
index e035e9193c4..6e95714da93 100644
--- a/packages/@ember/-internals/glimmer/lib/syntax.ts
+++ b/packages/@ember/-internals/glimmer/lib/syntax.ts
@@ -98,15 +98,17 @@ export function populateMacros(macros: Macros) {
   let { inlines, blocks } = macros;
   inlines.add('outlet', outletMacro);
   inlines.add('mount', mountMacro);
-  inlines.add('input', inputMacro);
-  inlines.addMissing(refineInlineSyntax);
-  blocks.add('let', blockLetMacro);
-  blocks.addMissing(refineBlockSyntax);
 
   if (!EMBER_GLIMMER_ANGLE_BRACKET_BUILT_INS) {
+    inlines.add('input', inputMacro);
     inlines.add('textarea', textAreaMacro);
   }
 
+  inlines.addMissing(refineInlineSyntax);
+
+  blocks.add('let', blockLetMacro);
+  blocks.addMissing(refineBlockSyntax);
+
   for (let i = 0; i < experimentalMacros.length; i++) {
     let macro = experimentalMacros[i];
     macro(blocks, inlines);
diff --git a/packages/@ember/-internals/glimmer/lib/syntax/input.ts b/packages/@ember/-internals/glimmer/lib/syntax/input.ts
index fcf2baa5a73..74b5557bfb1 100644
--- a/packages/@ember/-internals/glimmer/lib/syntax/input.ts
+++ b/packages/@ember/-internals/glimmer/lib/syntax/input.ts
@@ -2,193 +2,211 @@
 @module ember
 */
 import { OwnedTemplateMeta } from '@ember/-internals/views';
+import { EMBER_GLIMMER_ANGLE_BRACKET_BUILT_INS } from '@ember/canary-features';
 import { assert } from '@ember/debug';
+import { DEBUG } from '@glimmer/env';
 import { Option } from '@glimmer/interfaces';
 import { OpcodeBuilder } from '@glimmer/opcode-compiler';
+import { unreachable } from '@glimmer/util';
 import * as WireFormat from '@glimmer/wire-format';
 import { wrapComponentClassAttribute } from '../utils/bindings';
 import { hashToArgs } from './utils';
 
-function buildSyntax(
-  type: string,
-  params: any[],
-  hash: any,
-  builder: OpcodeBuilder<OwnedTemplateMeta>
-) {
-  let definition = builder.compiler['resolver'].lookupComponentDefinition(type, builder.referrer);
-  builder.component.static(definition!, [params, hashToArgs(hash), null, null]);
-  return true;
-}
-
-/**
-  The `{{input}}` helper lets you create an HTML `<input />` component.
-  It causes a `TextField` component to be rendered.  For more info,
-  see the [TextField](/api/ember/release/classes/TextField) docs and
-  the [templates guide](https://guides.emberjs.com/release/templates/input-helpers/).
-
-  ```handlebars
-  {{input value="987"}}
-  ```
-
-  renders as:
-
-  ```HTML
-  <input type="text" value="987" />
-  ```
-
-  ### Text field
-
-  If no `type` option is specified, a default of type 'text' is used.
-  Many of the standard HTML attributes may be passed to this helper.
-  <table>
-    <tr><td>`readonly`</td><td>`required`</td><td>`autofocus`</td></tr>
-    <tr><td>`value`</td><td>`placeholder`</td><td>`disabled`</td></tr>
-    <tr><td>`size`</td><td>`tabindex`</td><td>`maxlength`</td></tr>
-    <tr><td>`name`</td><td>`min`</td><td>`max`</td></tr>
-    <tr><td>`pattern`</td><td>`accept`</td><td>`autocomplete`</td></tr>
-    <tr><td>`autosave`</td><td>`formaction`</td><td>`formenctype`</td></tr>
-    <tr><td>`formmethod`</td><td>`formnovalidate`</td><td>`formtarget`</td></tr>
-    <tr><td>`height`</td><td>`inputmode`</td><td>`multiple`</td></tr>
-    <tr><td>`step`</td><td>`width`</td><td>`form`</td></tr>
-    <tr><td>`selectionDirection`</td><td>`spellcheck`</td><td>&nbsp;</td></tr>
-  </table>
-  When set to a quoted string, these values will be directly applied to the HTML
-  element. When left unquoted, these values will be bound to a property on the
-  template's current rendering context (most typically a controller instance).
-  A very common use of this helper is to bind the `value` of an input to an Object's attribute:
-
-  ```handlebars
-  Search:
-  {{input value=searchWord}}
-  ```
-
-  In this example, the initial value in the `<input />` will be set to the value of `searchWord`.
-  If the user changes the text, the value of `searchWord` will also be updated.
-
-  ### Actions
-
-  The helper can send multiple actions based on user events.
-  The action property defines the action which is sent when
-  the user presses the return key.
-
-  ```handlebars
-  {{input action="submit"}}
-  ```
-
-  The helper allows some user events to send actions.
-
-  * `enter`
-  * `insert-newline`
-  * `escape-press`
-  * `focus-in`
-  * `focus-out`
-  * `key-press`
-  * `key-up`
-
-  For example, if you desire an action to be sent when the input is blurred,
-  you only need to setup the action name to the event name property.
-
-  ```handlebars
-  {{input focus-out="alertMessage"}}
-  ```
-  See more about [Text Support Actions](/api/ember/release/classes/TextField)
-
-  ### Extending `TextField`
-
-  Internally, `{{input type="text"}}` creates an instance of `TextField`, passing
-  arguments from the helper to `TextField`'s `create` method. You can extend the
-  capabilities of text inputs in your applications by reopening this class. For example,
-  if you are building a Bootstrap project where `data-*` attributes are used, you
-  can add one to the `TextField`'s `attributeBindings` property:
-
-  ```javascript
-  import TextField from '@ember/component/text-field';
-  TextField.reopen({
-    attributeBindings: ['data-error']
-  });
-  ```
-
-  Keep in mind when writing `TextField` subclasses that `TextField`
-  itself extends `Component`. Expect isolated component semantics, not
-  legacy 1.x view semantics (like `controller` being present).
-  See more about [Ember components](/api/ember/release/classes/Component)
-
-  ### Checkbox
-
-  Checkboxes are special forms of the `{{input}}` helper.  To create a `<checkbox />`:
-
-  ```handlebars
-  Emberize Everything:
-  {{input type="checkbox" name="isEmberized" checked=isEmberized}}
-  ```
-
-  This will bind checked state of this checkbox to the value of `isEmberized`  -- if either one changes,
-  it will be reflected in the other.
-
-  The following HTML attributes can be set via the helper:
-
-  * `checked`
-  * `disabled`
-  * `tabindex`
-  * `indeterminate`
-  * `name`
-  * `autofocus`
-  * `form`
-
-  ### Extending `Checkbox`
-
-  Internally, `{{input type="checkbox"}}` creates an instance of `Checkbox`, passing
-  arguments from the helper to `Checkbox`'s `create` method. You can extend the
-  capablilties of checkbox inputs in your applications by reopening this class. For example,
-  if you wanted to add a css class to all checkboxes in your application:
-
-  ```javascript
-  import Checkbox from '@ember/component/checkbox';
-
-  Checkbox.reopen({
-    classNames: ['my-app-checkbox']
-  });
-  ```
-
-  @method input
-  @for Ember.Templates.helpers
-  @param {Hash} options
-  @public
-*/
-
-export function inputMacro(
-  _name: string,
+export let inputMacro: (
+  name: string,
   params: Option<WireFormat.Core.Params>,
   hash: Option<WireFormat.Core.Hash>,
   builder: OpcodeBuilder<OwnedTemplateMeta>
-) {
-  if (params === null) {
-    params = [];
+) => boolean;
+
+if (EMBER_GLIMMER_ANGLE_BRACKET_BUILT_INS) {
+  if (DEBUG) {
+    inputMacro = () => {
+      throw unreachable();
+    };
   }
-  if (hash !== null) {
-    let keys = hash[0];
-    let values = hash[1];
-    let typeIndex = keys.indexOf('type');
-
-    if (typeIndex > -1) {
-      let typeArg = values[typeIndex];
-      if (Array.isArray(typeArg)) {
-        // there is an AST plugin that converts this to an expression
-        // it really should just compile in the component call too.
-        let inputTypeExpr = params[0] as WireFormat.Expression;
-        builder.dynamicComponent(inputTypeExpr, null, params.slice(1), hash, true, null, null);
-        return true;
-      }
-      if (typeArg === 'checkbox') {
-        assert(
-          "{{input type='checkbox'}} does not support setting `value=someBooleanValue`; " +
-            'you must use `checked=someBooleanValue` instead.',
-          keys.indexOf('value') === -1
-        );
-        wrapComponentClassAttribute(hash);
-        return buildSyntax('-checkbox', params, hash, builder);
+} else {
+  /**
+    The `{{input}}` helper lets you create an HTML `<input />` component.
+    It causes a `TextField` component to be rendered.  For more info,
+    see the [TextField](/api/ember/release/classes/TextField) docs and
+    the [templates guide](https://guides.emberjs.com/release/templates/input-helpers/).
+
+    ```handlebars
+    {{input value="987"}}
+    ```
+
+    renders as:
+
+    ```HTML
+    <input type="text" value="987" />
+    ```
+
+    ### Text field
+
+    If no `type` option is specified, a default of type 'text' is used.
+    Many of the standard HTML attributes may be passed to this helper.
+    <table>
+      <tr><td>`readonly`</td><td>`required`</td><td>`autofocus`</td></tr>
+      <tr><td>`value`</td><td>`placeholder`</td><td>`disabled`</td></tr>
+      <tr><td>`size`</td><td>`tabindex`</td><td>`maxlength`</td></tr>
+      <tr><td>`name`</td><td>`min`</td><td>`max`</td></tr>
+      <tr><td>`pattern`</td><td>`accept`</td><td>`autocomplete`</td></tr>
+      <tr><td>`autosave`</td><td>`formaction`</td><td>`formenctype`</td></tr>
+      <tr><td>`formmethod`</td><td>`formnovalidate`</td><td>`formtarget`</td></tr>
+      <tr><td>`height`</td><td>`inputmode`</td><td>`multiple`</td></tr>
+      <tr><td>`step`</td><td>`width`</td><td>`form`</td></tr>
+      <tr><td>`selectionDirection`</td><td>`spellcheck`</td><td>&nbsp;</td></tr>
+    </table>
+    When set to a quoted string, these values will be directly applied to the HTML
+    element. When left unquoted, these values will be bound to a property on the
+    template's current rendering context (most typically a controller instance).
+    A very common use of this helper is to bind the `value` of an input to an Object's attribute:
+
+    ```handlebars
+    Search:
+    {{input value=searchWord}}
+    ```
+
+    In this example, the initial value in the `<input />` will be set to the value of `searchWord`.
+    If the user changes the text, the value of `searchWord` will also be updated.
+
+    ### Actions
+
+    The helper can send multiple actions based on user events.
+    The action property defines the action which is sent when
+    the user presses the return key.
+
+    ```handlebars
+    {{input action="submit"}}
+    ```
+
+    The helper allows some user events to send actions.
+
+    * `enter`
+    * `insert-newline`
+    * `escape-press`
+    * `focus-in`
+    * `focus-out`
+    * `key-press`
+    * `key-up`
+
+    For example, if you desire an action to be sent when the input is blurred,
+    you only need to setup the action name to the event name property.
+
+    ```handlebars
+    {{input focus-out="alertMessage"}}
+    ```
+    See more about [Text Support Actions](/api/ember/release/classes/TextField)
+
+    ### Extending `TextField`
+
+    Internally, `{{input type="text"}}` creates an instance of `TextField`, passing
+    arguments from the helper to `TextField`'s `create` method. You can extend the
+    capabilities of text inputs in your applications by reopening this class. For example,
+    if you are building a Bootstrap project where `data-*` attributes are used, you
+    can add one to the `TextField`'s `attributeBindings` property:
+
+    ```javascript
+    import TextField from '@ember/component/text-field';
+    TextField.reopen({
+      attributeBindings: ['data-error']
+    });
+    ```
+
+    Keep in mind when writing `TextField` subclasses that `TextField`
+    itself extends `Component`. Expect isolated component semantics, not
+    legacy 1.x view semantics (like `controller` being present).
+    See more about [Ember components](/api/ember/release/classes/Component)
+
+    ### Checkbox
+
+    Checkboxes are special forms of the `{{input}}` helper.  To create a `<checkbox />`:
+
+    ```handlebars
+    Emberize Everything:
+    {{input type="checkbox" name="isEmberized" checked=isEmberized}}
+    ```
+
+    This will bind checked state of this checkbox to the value of `isEmberized`  -- if either one changes,
+    it will be reflected in the other.
+
+    The following HTML attributes can be set via the helper:
+
+    * `checked`
+    * `disabled`
+    * `tabindex`
+    * `indeterminate`
+    * `name`
+    * `autofocus`
+    * `form`
+
+    ### Extending `Checkbox`
+
+    Internally, `{{input type="checkbox"}}` creates an instance of `Checkbox`, passing
+    arguments from the helper to `Checkbox`'s `create` method. You can extend the
+    capablilties of checkbox inputs in your applications by reopening this class. For example,
+    if you wanted to add a css class to all checkboxes in your application:
+
+    ```javascript
+    import Checkbox from '@ember/component/checkbox';
+
+    Checkbox.reopen({
+      classNames: ['my-app-checkbox']
+    });
+    ```
+
+    @method input
+    @for Ember.Templates.helpers
+    @param {Hash} options
+    @public
+  */
+
+  let buildSyntax = function buildSyntax(
+    type: string,
+    params: any[],
+    hash: any,
+    builder: OpcodeBuilder<OwnedTemplateMeta>
+  ) {
+    let definition = builder.compiler['resolver'].lookupComponentDefinition(type, builder.referrer);
+    builder.component.static(definition!, [params, hashToArgs(hash), null, null]);
+    return true;
+  };
+
+  inputMacro = function inputMacro(
+    _name: string,
+    params: Option<WireFormat.Core.Params>,
+    hash: Option<WireFormat.Core.Hash>,
+    builder: OpcodeBuilder<OwnedTemplateMeta>
+  ) {
+    if (params === null) {
+      params = [];
+    }
+    if (hash !== null) {
+      let keys = hash[0];
+      let values = hash[1];
+      let typeIndex = keys.indexOf('type');
+
+      if (typeIndex > -1) {
+        let typeArg = values[typeIndex];
+        if (Array.isArray(typeArg)) {
+          // there is an AST plugin that converts this to an expression
+          // it really should just compile in the component call too.
+          let inputTypeExpr = params[0] as WireFormat.Expression;
+          builder.dynamicComponent(inputTypeExpr, null, params.slice(1), hash, true, null, null);
+          return true;
+        }
+        if (typeArg === 'checkbox') {
+          assert(
+            "`{{input type='checkbox' value=...}}` is not supported; " +
+              "please use `{{input type='checkbox' checked=...}}` instead.",
+            keys.indexOf('value') === -1
+          );
+          wrapComponentClassAttribute(hash);
+          return buildSyntax('-checkbox', params, hash, builder);
+        }
       }
     }
-  }
-  return buildSyntax('-text-field', params, hash, builder);
+    return buildSyntax('-text-field', params, hash, builder);
+  };
 }
diff --git a/packages/@ember/-internals/glimmer/lib/templates/input.d.ts b/packages/@ember/-internals/glimmer/lib/templates/input.d.ts
new file mode 100644
index 00000000000..786bb5e91a8
--- /dev/null
+++ b/packages/@ember/-internals/glimmer/lib/templates/input.d.ts
@@ -0,0 +1,3 @@
+import { Factory } from '../template';
+declare const TEMPLATE: Factory;
+export default TEMPLATE;
diff --git a/packages/@ember/-internals/glimmer/lib/templates/input.hbs b/packages/@ember/-internals/glimmer/lib/templates/input.hbs
new file mode 100644
index 00000000000..3c66f23252f
--- /dev/null
+++ b/packages/@ember/-internals/glimmer/lib/templates/input.hbs
@@ -0,0 +1,70 @@
+{{~#if this.isCheckbox~}}
+  <Checkbox
+    @type={{@type}}
+    @checked={{@checked}}
+    @class={{@class}}
+    @id={{@id}}
+    @indeterminate={{@indeterminate}}
+    @disabled={{@disabled}}
+    @tabindex={{@tabindex}}
+    @name={{@name}}
+    @autofocus={{@autofocus}}
+    @required={{@required}}
+    @form={{@form}}
+    ...attributes
+  />
+{{~else~}}
+  <TextField
+    @accept={{@accept}}
+    @autocapitalize={{@autocapitalize}}
+    @autocomplete={{@autocomplete}}
+    @autocorrect={{@autocorrect}}
+    @autofocus={{@autofocus}}
+    @autosave={{@autosave}}
+    @bubbles={{@bubbles}}
+    @class={{@class}}
+    @dir={{@dir}}
+    @disabled={{@disabled}}
+    @enter={{@enter}}
+    @escape-press={{@escape-press}}
+    @focus-in={{@focus-in}}
+    @focus-out={{@focus-out}}
+    @form={{@form}}
+    @formaction={{@formaction}}
+    @formenctype={{@formenctype}}
+    @formmethod={{@formmethod}}
+    @formnovalidate={{@formnovalidate}}
+    @formtarget={{@formtarget}}
+    @height={{@height}}
+    @id={{@id}}
+    @inputmode={{@inputmode}}
+    @insert-newline={{@insert-newline}}
+    @key-down={{@key-down}}
+    @key-press={{@key-press}}
+    @key-up={{@key-up}}
+    @lang={{@lang}}
+    @list={{@list}}
+    @max={{@max}}
+    @maxlength={{@maxlength}}
+    @min={{@min}}
+    @minlength={{@minlength}}
+    @multiple={{@multiple}}
+    @name={{@name}}
+    @pattern={{@pattern}}
+    @placeholder={{@placeholder}}
+    @readonly={{@readonly}}
+    @required={{@required}}
+    @selectionDirection={{@selectionDirection}}
+    @size={{@size}}
+    @spellcheck={{@spellcheck}}
+    @step={{@step}}
+    @tabindex={{@tabindex}}
+    @target={{this._target}}
+    @title={{@title}}
+    @type={{@type}}
+    @value={{@value}}
+    @width={{@width}}
+    ...attributes
+  />
+{{~/if~}}
+
diff --git a/packages/@ember/-internals/glimmer/tests/integration/components/contextual-components-test.js b/packages/@ember/-internals/glimmer/tests/integration/components/contextual-components-test.js
index 8dbbc40513d..fa1b777c336 100644
--- a/packages/@ember/-internals/glimmer/tests/integration/components/contextual-components-test.js
+++ b/packages/@ember/-internals/glimmer/tests/integration/components/contextual-components-test.js
@@ -1217,12 +1217,38 @@ moduleFor(
       this.assertText('ab');
     }
 
-    ['@test GH#14632 give useful warning when calling contextual components with input as a name']() {
+    ['@feature(!ember-glimmer-angle-bracket-built-ins) GH#14632 give useful warning when calling contextual components with input as a name']() {
       expectAssertion(() => {
         this.render('{{component (component "input" type="text")}}');
       }, 'Invoking `{{input}}` using angle bracket syntax or `component` helper is not yet supported.');
     }
 
+    ['@feature(ember-glimmer-angle-bracket-built-ins) it can invoke input component']() {
+      this.render('{{component (component "input" type="text" value=value)}}', {
+        value: 'foo',
+      });
+
+      this.assertComponentElement(this.firstChild, {
+        tagName: 'input',
+        attrs: {
+          class: 'ember-text-field ember-view',
+          type: 'text',
+        },
+      });
+
+      this.assert.strictEqual('foo', this.firstChild.value);
+
+      this.assertStableRerender();
+
+      runTask(() => this.context.set('value', 'bar'));
+
+      this.assert.strictEqual('bar', this.firstChild.value);
+
+      runTask(() => this.context.set('value', 'foo'));
+
+      this.assert.strictEqual('foo', this.firstChild.value);
+    }
+
     ['@feature(!ember-glimmer-angle-bracket-built-ins) GH#14632 give useful warning when calling contextual components with textarea as a name']() {
       expectAssertion(() => {
         this.render('{{component (component "textarea")}}');
diff --git a/packages/@ember/-internals/glimmer/tests/integration/components/input-angle-test.js b/packages/@ember/-internals/glimmer/tests/integration/components/input-angle-test.js
new file mode 100644
index 00000000000..61aa01c5e9a
--- /dev/null
+++ b/packages/@ember/-internals/glimmer/tests/integration/components/input-angle-test.js
@@ -0,0 +1,1105 @@
+import { RenderingTestCase, moduleFor, runDestroy, runTask } from 'internal-test-helpers';
+
+import { EMBER_GLIMMER_ANGLE_BRACKET_BUILT_INS } from '@ember/canary-features';
+import { assign } from '@ember/polyfills';
+import { set } from '@ember/-internals/metal';
+import { jQuery } from '@ember/-internals/views';
+
+import { Component } from '../../utils/helpers';
+
+if (EMBER_GLIMMER_ANGLE_BRACKET_BUILT_INS) {
+  class InputRenderingTest extends RenderingTestCase {
+    $input() {
+      return this.$('input');
+    }
+
+    inputID() {
+      return this.$input().prop('id');
+    }
+
+    assertDisabled() {
+      this.assert.ok(this.$('input').prop('disabled'), 'The input is disabled');
+    }
+
+    assertNotDisabled() {
+      this.assert.ok(this.$('input').is(':not(:disabled)'), 'The input is not disabled');
+    }
+
+    assertInputId(expectedId) {
+      this.assert.equal(this.inputID(), expectedId, 'the input id should be `expectedId`');
+    }
+
+    assertSingleInput() {
+      this.assert.equal(this.$('input').length, 1, 'A single text field was inserted');
+    }
+
+    assertSingleCheckbox() {
+      this.assert.equal(this.$('input[type=checkbox]').length, 1, 'A single checkbox is added');
+    }
+
+    assertCheckboxIsChecked() {
+      this.assert.equal(this.$input().prop('checked'), true, 'the checkbox is checked');
+    }
+
+    assertCheckboxIsNotChecked() {
+      this.assert.equal(this.$input().prop('checked'), false, 'the checkbox is not checked');
+    }
+
+    assertValue(expected) {
+      this.assert.equal(this.$input().val(), expected, `the input value should be ${expected}`);
+    }
+
+    assertAttr(name, expected) {
+      this.assert.equal(
+        this.$input().attr(name),
+        expected,
+        `the input ${name} attribute has the value '${expected}'`
+      );
+    }
+
+    assertAllAttrs(names, expected) {
+      names.forEach(name => this.assertAttr(name, expected));
+    }
+
+    assertSelectionRange(start, end) {
+      let input = this.$input()[0];
+      this.assert.equal(
+        input.selectionStart,
+        start,
+        `the cursor start position should be ${start}`
+      );
+      this.assert.equal(input.selectionEnd, end, `the cursor end position should be ${end}`);
+    }
+
+    triggerEvent(type, options) {
+      let event = document.createEvent('Events');
+      event.initEvent(type, true, true);
+      assign(event, options);
+
+      let element = this.$input()[0];
+      runTask(() => {
+        element.dispatchEvent(event);
+      });
+    }
+  }
+
+  moduleFor(
+    'Components test: <Input />',
+    class extends InputRenderingTest {
+      ['@test a single text field is inserted into the DOM']() {
+        this.render(`<Input @type="text" @value={{value}} />`, { value: 'hello' });
+
+        let id = this.inputID();
+
+        this.assertValue('hello');
+        this.assertSingleInput();
+
+        runTask(() => this.rerender());
+
+        this.assertValue('hello');
+        this.assertSingleInput();
+        this.assertInputId(id);
+
+        runTask(() => set(this.context, 'value', 'goodbye'));
+
+        this.assertValue('goodbye');
+        this.assertSingleInput();
+        this.assertInputId(id);
+
+        runTask(() => set(this.context, 'value', 'hello'));
+
+        this.assertValue('hello');
+        this.assertSingleInput();
+        this.assertInputId(id);
+      }
+
+      ['@test default type']() {
+        this.render(`<Input />`);
+
+        this.assertAttr('type', 'text');
+
+        runTask(() => this.rerender());
+
+        this.assertAttr('type', 'text');
+      }
+
+      ['@test dynamic attributes (HTML attribute)']() {
+        this.render(
+          `
+        <Input @type="text" @value={{value}}
+          disabled={{disabled}}
+          placeholder={{placeholder}}
+          name={{name}}
+          maxlength={{maxlength}}
+          minlength={{minlength}}
+          size={{size}}
+          tabindex={{tabindex}}
+        />`,
+          {
+            value: 'Original value',
+            disabled: false,
+            placeholder: 'Original placeholder',
+            name: 'original-name',
+            maxlength: 10,
+            minlength: 5,
+            size: 20,
+            tabindex: 30,
+          }
+        );
+
+        this.assertNotDisabled();
+        this.assertValue('Original value');
+        this.assertAttr('placeholder', 'Original placeholder');
+        this.assertAttr('name', 'original-name');
+        this.assertAttr('maxlength', '10');
+        this.assertAttr('minlength', '5');
+        // this.assertAttr('size', '20'); //NOTE: failing in IE  (TEST_SUITE=sauce)
+        // this.assertAttr('tabindex', '30'); //NOTE: failing in IE (TEST_SUITE=sauce)
+
+        runTask(() => this.rerender());
+
+        this.assertNotDisabled();
+        this.assertValue('Original value');
+        this.assertAttr('placeholder', 'Original placeholder');
+        this.assertAttr('name', 'original-name');
+        this.assertAttr('maxlength', '10');
+        this.assertAttr('minlength', '5');
+        // this.assertAttr('size', '20'); //NOTE: failing in IE (TEST_SUITE=sauce)
+        // this.assertAttr('tabindex', '30'); //NOTE: failing in IE (TEST_SUITE=sauce)
+
+        runTask(() => {
+          set(this.context, 'value', 'Updated value');
+          set(this.context, 'disabled', true);
+          set(this.context, 'placeholder', 'Updated placeholder');
+          set(this.context, 'name', 'updated-name');
+          set(this.context, 'maxlength', 11);
+          set(this.context, 'minlength', 6);
+          // set(this.context, 'size', 21); //NOTE: failing in IE (TEST_SUITE=sauce)
+          // set(this.context, 'tabindex', 31); //NOTE: failing in IE (TEST_SUITE=sauce)
+        });
+
+        this.assertDisabled();
+        this.assertValue('Updated value');
+        this.assertAttr('placeholder', 'Updated placeholder');
+        this.assertAttr('name', 'updated-name');
+        this.assertAttr('maxlength', '11');
+        this.assertAttr('minlength', '6');
+        // this.assertAttr('size', '21'); //NOTE: failing in IE (TEST_SUITE=sauce)
+        // this.assertAttr('tabindex', '31'); //NOTE: failing in IE (TEST_SUITE=sauce)
+
+        runTask(() => {
+          set(this.context, 'value', 'Original value');
+          set(this.context, 'disabled', false);
+          set(this.context, 'placeholder', 'Original placeholder');
+          set(this.context, 'name', 'original-name');
+          set(this.context, 'maxlength', 10);
+          set(this.context, 'minlength', 5);
+          // set(this.context, 'size', 20); //NOTE: failing in IE (TEST_SUITE=sauce)
+          // set(this.context, 'tabindex', 30); //NOTE: failing in IE (TEST_SUITE=sauce)
+        });
+
+        this.assertNotDisabled();
+        this.assertValue('Original value');
+        this.assertAttr('placeholder', 'Original placeholder');
+        this.assertAttr('name', 'original-name');
+        this.assertAttr('maxlength', '10');
+        this.assertAttr('minlength', '5');
+        // this.assertAttr('size', '20'); //NOTE: failing in IE (TEST_SUITE=sauce)
+        // this.assertAttr('tabindex', '30'); //NOTE: failing in IE (TEST_SUITE=sauce)
+      }
+
+      ['@test dynamic attributes (named argument)']() {
+        this.render(
+          `
+        <Input @type="text" @value={{value}}
+          @disabled={{disabled}}
+          @placeholder={{placeholder}}
+          @name={{name}}
+          @maxlength={{maxlength}}
+          @minlength={{minlength}}
+          @size={{size}}
+          @tabindex={{tabindex}}
+        />`,
+          {
+            value: 'Original value',
+            disabled: false,
+            placeholder: 'Original placeholder',
+            name: 'original-name',
+            maxlength: 10,
+            minlength: 5,
+            size: 20,
+            tabindex: 30,
+          }
+        );
+
+        this.assertNotDisabled();
+        this.assertValue('Original value');
+        this.assertAttr('placeholder', 'Original placeholder');
+        this.assertAttr('name', 'original-name');
+        this.assertAttr('maxlength', '10');
+        this.assertAttr('minlength', '5');
+        // this.assertAttr('size', '20'); //NOTE: failing in IE  (TEST_SUITE=sauce)
+        // this.assertAttr('tabindex', '30'); //NOTE: failing in IE (TEST_SUITE=sauce)
+
+        runTask(() => this.rerender());
+
+        this.assertNotDisabled();
+        this.assertValue('Original value');
+        this.assertAttr('placeholder', 'Original placeholder');
+        this.assertAttr('name', 'original-name');
+        this.assertAttr('maxlength', '10');
+        this.assertAttr('minlength', '5');
+        // this.assertAttr('size', '20'); //NOTE: failing in IE (TEST_SUITE=sauce)
+        // this.assertAttr('tabindex', '30'); //NOTE: failing in IE (TEST_SUITE=sauce)
+
+        runTask(() => {
+          set(this.context, 'value', 'Updated value');
+          set(this.context, 'disabled', true);
+          set(this.context, 'placeholder', 'Updated placeholder');
+          set(this.context, 'name', 'updated-name');
+          set(this.context, 'maxlength', 11);
+          set(this.context, 'minlength', 6);
+          // set(this.context, 'size', 21); //NOTE: failing in IE (TEST_SUITE=sauce)
+          // set(this.context, 'tabindex', 31); //NOTE: failing in IE (TEST_SUITE=sauce)
+        });
+
+        this.assertDisabled();
+        this.assertValue('Updated value');
+        this.assertAttr('placeholder', 'Updated placeholder');
+        this.assertAttr('name', 'updated-name');
+        this.assertAttr('maxlength', '11');
+        this.assertAttr('minlength', '6');
+        // this.assertAttr('size', '21'); //NOTE: failing in IE (TEST_SUITE=sauce)
+        // this.assertAttr('tabindex', '31'); //NOTE: failing in IE (TEST_SUITE=sauce)
+
+        runTask(() => {
+          set(this.context, 'value', 'Original value');
+          set(this.context, 'disabled', false);
+          set(this.context, 'placeholder', 'Original placeholder');
+          set(this.context, 'name', 'original-name');
+          set(this.context, 'maxlength', 10);
+          set(this.context, 'minlength', 5);
+          // set(this.context, 'size', 20); //NOTE: failing in IE (TEST_SUITE=sauce)
+          // set(this.context, 'tabindex', 30); //NOTE: failing in IE (TEST_SUITE=sauce)
+        });
+
+        this.assertNotDisabled();
+        this.assertValue('Original value');
+        this.assertAttr('placeholder', 'Original placeholder');
+        this.assertAttr('name', 'original-name');
+        this.assertAttr('maxlength', '10');
+        this.assertAttr('minlength', '5');
+        // this.assertAttr('size', '20'); //NOTE: failing in IE (TEST_SUITE=sauce)
+        // this.assertAttr('tabindex', '30'); //NOTE: failing in IE (TEST_SUITE=sauce)
+      }
+
+      ['@test static attributes (HTML attribute)']() {
+        this.render(`
+        <Input @type="text" @value="Original value"
+          disabled="disabled"
+          placeholder="Original placeholder"
+          name="original-name"
+          maxlength="10"
+          minlength="5"
+          size="20"
+          tabindex="30"
+        />`);
+
+        this.assertDisabled();
+        this.assertValue('Original value');
+        this.assertAttr('placeholder', 'Original placeholder');
+        this.assertAttr('name', 'original-name');
+        this.assertAttr('maxlength', '10');
+        this.assertAttr('minlength', '5');
+        // this.assertAttr('size', '20');  //NOTE: failing in IE (TEST_SUITE=sauce)
+        // this.assertAttr('tabindex', '30');  //NOTE: failing in IE (TEST_SUITE=sauce)
+
+        runTask(() => this.rerender());
+
+        this.assertDisabled();
+        this.assertValue('Original value');
+        this.assertAttr('placeholder', 'Original placeholder');
+        this.assertAttr('name', 'original-name');
+        this.assertAttr('maxlength', '10');
+        this.assertAttr('minlength', '5');
+        // this.assertAttr('size', '20');  //NOTE: failing in IE (TEST_SUITE=sauce)
+        // this.assertAttr('tabindex', '30');  //NOTE: failing in IE (TEST_SUITE=sauce)
+      }
+
+      ['@test static attributes (named argument)']() {
+        this.render(`
+        <Input @type="text" @value="Original value"
+          @disabled={{true}}
+          @placeholder="Original placeholder"
+          @name="original-name"
+          @maxlength={{10}}
+          @minlength={{5}}
+          @size={{20}}
+          @tabindex={{30}}
+        />`);
+
+        this.assertDisabled();
+        this.assertValue('Original value');
+        this.assertAttr('placeholder', 'Original placeholder');
+        this.assertAttr('name', 'original-name');
+        this.assertAttr('maxlength', '10');
+        this.assertAttr('minlength', '5');
+        // this.assertAttr('size', '20');  //NOTE: failing in IE (TEST_SUITE=sauce)
+        // this.assertAttr('tabindex', '30');  //NOTE: failing in IE (TEST_SUITE=sauce)
+
+        runTask(() => this.rerender());
+
+        this.assertDisabled();
+        this.assertValue('Original value');
+        this.assertAttr('placeholder', 'Original placeholder');
+        this.assertAttr('name', 'original-name');
+        this.assertAttr('maxlength', '10');
+        this.assertAttr('minlength', '5');
+        // this.assertAttr('size', '20');  //NOTE: failing in IE (TEST_SUITE=sauce)
+        // this.assertAttr('tabindex', '30');  //NOTE: failing in IE (TEST_SUITE=sauce)
+      }
+
+      ['@test cursor selection range']() {
+        // Modifying input.selectionStart, which is utilized in the cursor tests,
+        // causes an event in Safari.
+        runDestroy(this.owner.lookup('event_dispatcher:main'));
+
+        this.render(`<Input @type="text" @value={{value}} />`, { value: 'original' });
+
+        let input = this.$input()[0];
+
+        // See https://ember-twiddle.com/33e506329f8176ae874422644d4cc08c?openFiles=components.input-component.js%2Ctemplates.components.input-component.hbs
+        // this.assertSelectionRange(8, 8); //NOTE: this is (0, 0) on Firefox (TEST_SUITE=sauce)
+
+        runTask(() => this.rerender());
+
+        // this.assertSelectionRange(8, 8); //NOTE: this is (0, 0) on Firefox (TEST_SUITE=sauce)
+
+        runTask(() => {
+          input.selectionStart = 2;
+          input.selectionEnd = 4;
+        });
+
+        this.assertSelectionRange(2, 4);
+
+        runTask(() => this.rerender());
+
+        this.assertSelectionRange(2, 4);
+
+        // runTask(() => set(this.context, 'value', 'updated'));
+        //
+        // this.assertSelectionRange(7, 7); //NOTE: this fails in IE, the range is 0 -> 0 (TEST_SUITE=sauce)
+        //
+        // runTask(() => set(this.context, 'value', 'original'));
+        //
+        // this.assertSelectionRange(8, 8); //NOTE: this fails in IE, the range is 0 -> 0 (TEST_SUITE=sauce)
+      }
+
+      ['@test [DEPRECATED] sends an action with `<Input @enter="foo" />` when <enter> is pressed'](
+        assert
+      ) {
+        assert.expect(4);
+
+        expectDeprecation(() => {
+          this.render(`<Input @enter="foo" />`, {
+            actions: {
+              foo(value, event) {
+                assert.ok(true, 'action was triggered');
+                assert.ok(event instanceof jQuery.Event, 'jQuery event was passed.');
+              },
+            },
+          });
+        }, 'Passing actions to components as strings (like `<Input @enter="foo" />`) is deprecated. Please use closure actions instead (`<Input @enter={{action "foo"}} />`). (\'-top-level\' @ L1:C0) ');
+
+        expectDeprecation(() => {
+          this.triggerEvent('keyup', { keyCode: 13 });
+        }, 'Passing actions to components as strings (like `<Input @enter="foo" />`) is deprecated. Please use closure actions instead (`<Input @enter={{action "foo"}} />`).');
+      }
+
+      ['@test sends an action with `<Input @enter={{action "foo"}} />` when <enter> is pressed'](
+        assert
+      ) {
+        assert.expect(2);
+
+        this.render(`<Input @enter={{action 'foo'}} />`, {
+          actions: {
+            foo(value, event) {
+              assert.ok(true, 'action was triggered');
+              assert.ok(event instanceof jQuery.Event, 'jQuery event was passed');
+            },
+          },
+        });
+
+        this.triggerEvent('keyup', {
+          keyCode: 13,
+        });
+      }
+
+      ['@test [DEPRECATED] sends an action with `<Input @key-press="foo" />` is pressed'](assert) {
+        assert.expect(4);
+
+        expectDeprecation(() => {
+          this.render(`<Input @value={{value}} @key-press='foo' />`, {
+            value: 'initial',
+
+            actions: {
+              foo(value, event) {
+                assert.ok(true, 'action was triggered');
+                assert.ok(event instanceof jQuery.Event, 'jQuery event was passed');
+              },
+            },
+          });
+        }, 'Passing actions to components as strings (like `<Input @key-press="foo" />`) is deprecated. Please use closure actions instead (`<Input @key-press={{action "foo"}} />`). (\'-top-level\' @ L1:C0) ');
+
+        expectDeprecation(() => {
+          this.triggerEvent('keypress', { keyCode: 65 });
+        }, 'Passing actions to components as strings (like `<Input @key-press="foo" />`) is deprecated. Please use closure actions instead (`<Input @key-press={{action "foo"}} />`).');
+      }
+
+      ['@test sends an action with `<Input @key-press={{action "foo"}} />` is pressed'](assert) {
+        assert.expect(2);
+
+        this.render(`<Input @value={{value}} @key-press={{action 'foo'}} />`, {
+          value: 'initial',
+
+          actions: {
+            foo(value, event) {
+              assert.ok(true, 'action was triggered');
+              assert.ok(event instanceof jQuery.Event, 'jQuery event was passed');
+            },
+          },
+        });
+
+        this.triggerEvent('keypress', { keyCode: 65 });
+      }
+
+      ['@test sends an action to the parent level when `bubbles=true` is provided'](assert) {
+        assert.expect(1);
+
+        let ParentComponent = Component.extend({
+          change() {
+            assert.ok(true, 'bubbled upwards');
+          },
+        });
+
+        this.registerComponent('parent', {
+          ComponentClass: ParentComponent,
+          template: `<Input @bubbles={{true}} />`,
+        });
+        this.render(`<Parent />`);
+
+        this.triggerEvent('change');
+      }
+
+      ['@test triggers `focus-in` when focused'](assert) {
+        let wasFocused = false;
+
+        this.render(`<Input @focus-in={{action 'foo'}} />`, {
+          actions: {
+            foo() {
+              wasFocused = true;
+            },
+          },
+        });
+
+        runTask(() => {
+          this.$input().focus();
+        });
+
+        assert.ok(wasFocused, 'action was triggered');
+      }
+
+      ['@test sends `insert-newline` when <enter> is pressed'](assert) {
+        assert.expect(2);
+
+        this.render(`<Input @insert-newline={{action 'foo'}} />`, {
+          actions: {
+            foo(value, event) {
+              assert.ok(true, 'action was triggered');
+              assert.ok(event instanceof jQuery.Event, 'jQuery event was passed');
+            },
+          },
+        });
+
+        this.triggerEvent('keyup', {
+          keyCode: 13,
+        });
+      }
+
+      ['@test [DEPRECATED] sends an action with `<Input @escape-press="foo" />` when <escape> is pressed'](
+        assert
+      ) {
+        assert.expect(4);
+
+        expectDeprecation(() => {
+          this.render(`<Input @escape-press='foo' />`, {
+            actions: {
+              foo(value, event) {
+                assert.ok(true, 'action was triggered');
+                assert.ok(event instanceof jQuery.Event, 'jQuery event was passed');
+              },
+            },
+          });
+        }, 'Passing actions to components as strings (like `<Input @escape-press="foo" />`) is deprecated. Please use closure actions instead (`<Input @escape-press={{action "foo"}} />`). (\'-top-level\' @ L1:C0) ');
+
+        expectDeprecation(() => {
+          this.triggerEvent('keyup', { keyCode: 27 });
+        }, 'Passing actions to components as strings (like `<Input @escape-press="foo" />`) is deprecated. Please use closure actions instead (`<Input @escape-press={{action "foo"}} />`).');
+      }
+
+      ['@test sends an action with `<Input @escape-press={{action "foo"}} />` when <escape> is pressed'](
+        assert
+      ) {
+        assert.expect(2);
+
+        this.render(`<Input @escape-press={{action 'foo'}} />`, {
+          actions: {
+            foo(value, event) {
+              assert.ok(true, 'action was triggered');
+              assert.ok(event instanceof jQuery.Event, 'jQuery event was passed');
+            },
+          },
+        });
+
+        this.triggerEvent('keyup', { keyCode: 27 });
+      }
+
+      ['@test [DEPRECATED] sends an action with `<Input @key-down="foo" />` when a key is pressed'](
+        assert
+      ) {
+        assert.expect(4);
+
+        expectDeprecation(() => {
+          this.render(`<Input @key-down='foo' />`, {
+            actions: {
+              foo(value, event) {
+                assert.ok(true, 'action was triggered');
+                assert.ok(event instanceof jQuery.Event, 'jQuery event was passed');
+              },
+            },
+          });
+        }, 'Passing actions to components as strings (like `<Input @key-down="foo" />`) is deprecated. Please use closure actions instead (`<Input @key-down={{action "foo"}} />`). (\'-top-level\' @ L1:C0) ');
+
+        expectDeprecation(() => {
+          this.triggerEvent('keydown', { keyCode: 65 });
+        }, 'Passing actions to components as strings (like `<Input @key-down="foo" />`) is deprecated. Please use closure actions instead (`<Input @key-down={{action "foo"}} />`).');
+      }
+
+      ['@test sends an action with `<Input @key-down={{action "foo"}} />` when a key is pressed'](
+        assert
+      ) {
+        assert.expect(2);
+
+        this.render(`<Input @key-down={{action 'foo'}} />`, {
+          actions: {
+            foo(value, event) {
+              assert.ok(true, 'action was triggered');
+              assert.ok(event instanceof jQuery.Event, 'jQuery event was passed');
+            },
+          },
+        });
+
+        this.triggerEvent('keydown', { keyCode: 65 });
+      }
+
+      ['@test [DEPRECATED] sends an action with `<Input @key-up="foo" />` when a key is pressed'](
+        assert
+      ) {
+        assert.expect(4);
+
+        expectDeprecation(() => {
+          this.render(`<Input @key-up='foo' />`, {
+            actions: {
+              foo(value, event) {
+                assert.ok(true, 'action was triggered');
+                assert.ok(event instanceof jQuery.Event, 'jQuery event was passed');
+              },
+            },
+          });
+        }, 'Passing actions to components as strings (like `<Input @key-up="foo" />`) is deprecated. Please use closure actions instead (`<Input @key-up={{action "foo"}} />`). (\'-top-level\' @ L1:C0) ');
+
+        expectDeprecation(() => {
+          this.triggerEvent('keyup', { keyCode: 65 });
+        }, 'Passing actions to components as strings (like `<Input @key-up="foo" />`) is deprecated. Please use closure actions instead (`<Input @key-up={{action "foo"}} />`).');
+      }
+
+      ['@test sends an action with `<Input @key-up={{action "foo"}} />` when a key is pressed'](
+        assert
+      ) {
+        assert.expect(2);
+
+        this.render(`<Input @key-up={{action 'foo'}} />`, {
+          actions: {
+            foo(value, event) {
+              assert.ok(true, 'action was triggered');
+              assert.ok(event instanceof jQuery.Event, 'jQuery event was passed');
+            },
+          },
+        });
+        this.triggerEvent('keyup', { keyCode: 65 });
+      }
+
+      ['@test GH#14727 can render a file input after having had render an input of other type']() {
+        this.render(`<Input @type="text" /><Input @type="file" />`);
+
+        this.assert.equal(this.$input()[0].type, 'text');
+        this.assert.equal(this.$input()[1].type, 'file');
+      }
+    }
+  );
+
+  moduleFor(
+    'Components 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' });
+
+        this.assertAttr('type', 'password');
+
+        runTask(() => this.rerender());
+
+        this.assertAttr('type', 'password');
+
+        runTask(() => set(this.context, 'type', 'text'));
+
+        this.assertAttr('type', 'text');
+
+        runTask(() => set(this.context, 'type', 'password'));
+
+        this.assertAttr('type', 'password');
+      }
+
+      ['@test a subexpression can be used to determine type']() {
+        this.render(`<Input @type={{if isTruthy trueType falseType}} />`, {
+          isTruthy: true,
+          trueType: 'text',
+          falseType: 'password',
+        });
+
+        this.assertAttr('type', 'text');
+
+        runTask(() => this.rerender());
+
+        this.assertAttr('type', 'text');
+
+        runTask(() => set(this.context, 'isTruthy', false));
+
+        this.assertAttr('type', 'password');
+
+        runTask(() => set(this.context, 'isTruthy', true));
+
+        this.assertAttr('type', 'text');
+      }
+
+      ['@test GH16256 input macro does not modify params in place']() {
+        this.registerComponent('my-input', {
+          template: `<Input @type={{inputType}} />`,
+        });
+
+        this.render(`<MyInput @inputType={{firstType}} /><MyInput @inputType={{secondType}} />`, {
+          firstType: 'password',
+          secondType: 'email',
+        });
+
+        let inputs = this.element.querySelectorAll('input');
+        this.assert.equal(inputs.length, 2, 'there are two inputs');
+        this.assert.equal(inputs[0].getAttribute('type'), 'password');
+        this.assert.equal(inputs[1].getAttribute('type'), 'email');
+      }
+    }
+  );
+
+  moduleFor(
+    `Components test: <Input @type='checkbox' />`,
+    class extends InputRenderingTest {
+      ['@test dynamic attributes (HTML attribute)']() {
+        this.render(
+          `<Input @type='checkbox' @checked={{checked}}
+            disabled={{disabled}}
+            name={{name}}
+            tabindex={{tabindex}}
+          />`,
+          {
+            disabled: false,
+            name: 'original-name',
+            checked: false,
+            tabindex: 10,
+          }
+        );
+
+        this.assertSingleCheckbox();
+        this.assertNotDisabled();
+        this.assertAttr('name', 'original-name');
+        this.assertAttr('tabindex', '10');
+
+        runTask(() => this.rerender());
+
+        this.assertSingleCheckbox();
+        this.assertNotDisabled();
+        this.assertAttr('name', 'original-name');
+        this.assertAttr('tabindex', '10');
+
+        runTask(() => {
+          set(this.context, 'disabled', true);
+          set(this.context, 'name', 'updated-name');
+          set(this.context, 'tabindex', 11);
+        });
+
+        this.assertSingleCheckbox();
+        this.assertDisabled();
+        this.assertAttr('name', 'updated-name');
+        this.assertAttr('tabindex', '11');
+
+        runTask(() => {
+          set(this.context, 'disabled', false);
+          set(this.context, 'name', 'original-name');
+          set(this.context, 'tabindex', 10);
+        });
+
+        this.assertSingleCheckbox();
+        this.assertNotDisabled();
+        this.assertAttr('name', 'original-name');
+        this.assertAttr('tabindex', '10');
+      }
+
+      ['@test dynamic attributes (named argument)']() {
+        this.render(
+          `<Input @type='checkbox' @checked={{checked}}
+            @disabled={{disabled}}
+            @name={{name}}
+            @tabindex={{tabindex}}
+          />`,
+          {
+            disabled: false,
+            name: 'original-name',
+            checked: false,
+            tabindex: 10,
+          }
+        );
+
+        this.assertSingleCheckbox();
+        this.assertNotDisabled();
+        this.assertAttr('name', 'original-name');
+        this.assertAttr('tabindex', '10');
+
+        runTask(() => this.rerender());
+
+        this.assertSingleCheckbox();
+        this.assertNotDisabled();
+        this.assertAttr('name', 'original-name');
+        this.assertAttr('tabindex', '10');
+
+        runTask(() => {
+          set(this.context, 'disabled', true);
+          set(this.context, 'name', 'updated-name');
+          set(this.context, 'tabindex', 11);
+        });
+
+        this.assertSingleCheckbox();
+        this.assertDisabled();
+        this.assertAttr('name', 'updated-name');
+        this.assertAttr('tabindex', '11');
+
+        runTask(() => {
+          set(this.context, 'disabled', false);
+          set(this.context, 'name', 'original-name');
+          set(this.context, 'tabindex', 10);
+        });
+
+        this.assertSingleCheckbox();
+        this.assertNotDisabled();
+        this.assertAttr('name', 'original-name');
+        this.assertAttr('tabindex', '10');
+      }
+
+      ['@test `value` property assertion']() {
+        expectAssertion(() => {
+          this.render(`<Input @type="checkbox" @value={{value}} />`, {
+            value: 'value',
+          });
+        }, /checkbox.+@value.+not supported.+use.+@checked.+instead/);
+      }
+
+      ['@test with a bound type']() {
+        this.render(`<Input @type={{inputType}} @checked={{isChecked}} />`, {
+          inputType: 'checkbox',
+          isChecked: true,
+        });
+
+        this.assertSingleCheckbox();
+        this.assertCheckboxIsChecked();
+
+        runTask(() => this.rerender());
+
+        this.assertCheckboxIsChecked();
+
+        runTask(() => set(this.context, 'isChecked', false));
+
+        this.assertCheckboxIsNotChecked();
+
+        runTask(() => set(this.context, 'isChecked', true));
+
+        this.assertCheckboxIsChecked();
+      }
+
+      ['@test native click changes check property']() {
+        this.render(`<Input @type="checkbox" />`);
+
+        this.assertSingleCheckbox();
+        this.assertCheckboxIsNotChecked();
+        this.$input()[0].click();
+        this.assertCheckboxIsChecked();
+        this.$input()[0].click();
+        this.assertCheckboxIsNotChecked();
+      }
+
+      ['@test with static values (HTML attribute)']() {
+        this.render(
+          `<Input @type="checkbox" @checked={{false}} disabled={{false}} tabindex="10" name="original-name" />`
+        );
+
+        this.assertSingleCheckbox();
+        this.assertCheckboxIsNotChecked();
+        this.assertNotDisabled();
+        this.assertAttr('tabindex', '10');
+        this.assertAttr('name', 'original-name');
+
+        runTask(() => this.rerender());
+
+        this.assertSingleCheckbox();
+        this.assertCheckboxIsNotChecked();
+        this.assertNotDisabled();
+        this.assertAttr('tabindex', '10');
+        this.assertAttr('name', 'original-name');
+      }
+
+      ['@test with static values (named argument)']() {
+        this.render(
+          `<Input @type="checkbox" @checked={{false}} @disabled={{false}} @tabindex={{10}} @name="original-name" />`
+        );
+
+        this.assertSingleCheckbox();
+        this.assertCheckboxIsNotChecked();
+        this.assertNotDisabled();
+        this.assertAttr('tabindex', '10');
+        this.assertAttr('name', 'original-name');
+
+        runTask(() => this.rerender());
+
+        this.assertSingleCheckbox();
+        this.assertCheckboxIsNotChecked();
+        this.assertNotDisabled();
+        this.assertAttr('tabindex', '10');
+        this.assertAttr('name', 'original-name');
+      }
+    }
+  );
+
+  moduleFor(
+    `Components test: <Input @type='text' />`,
+    class extends InputRenderingTest {
+      ['@test null values (HTML attribute)']() {
+        let attributes = ['disabled', 'placeholder', 'name', 'maxlength', 'size', 'tabindex'];
+
+        this.render(
+          `
+        <Input @type="text" @value={{value}}
+          disabled={{disabled}}
+          placeholder={{placeholder}}
+          name={{name}}
+          maxlength={{maxlength}}
+          size={{size}}
+          tabindex={{tabindex}}
+        />`,
+          {
+            value: null,
+            disabled: null,
+            placeholder: null,
+            name: null,
+            maxlength: null,
+            size: null,
+            tabindex: null,
+          }
+        );
+
+        this.assertValue('');
+        this.assertAllAttrs(attributes, undefined);
+
+        runTask(() => this.rerender());
+
+        this.assertValue('');
+        this.assertAllAttrs(attributes, undefined);
+
+        runTask(() => {
+          set(this.context, 'disabled', true);
+          set(this.context, 'value', 'Updated value');
+          set(this.context, 'placeholder', 'Updated placeholder');
+          set(this.context, 'name', 'updated-name');
+          set(this.context, 'maxlength', 11);
+          set(this.context, 'size', 21);
+          set(this.context, 'tabindex', 31);
+        });
+
+        this.assertDisabled();
+        this.assertValue('Updated value');
+        this.assertAttr('placeholder', 'Updated placeholder');
+        this.assertAttr('name', 'updated-name');
+        this.assertAttr('maxlength', '11');
+        this.assertAttr('size', '21');
+        this.assertAttr('tabindex', '31');
+
+        runTask(() => {
+          set(this.context, 'disabled', null);
+          set(this.context, 'value', null);
+          set(this.context, 'placeholder', null);
+          set(this.context, 'name', null);
+          set(this.context, 'maxlength', null);
+          // set(this.context, 'size', null); //NOTE: this fails with `Error: Failed to set the 'size' property on 'HTMLInputElement': The value provided is 0, which is an invalid size.` (TEST_SUITE=sauce)
+          set(this.context, 'tabindex', null);
+        });
+
+        this.assertAttr('disabled', undefined);
+        this.assertValue('');
+        // this.assertAttr('placeholder', undefined); //NOTE: this fails with a value of "null" (TEST_SUITE=sauce)
+        // this.assertAttr('name', undefined); //NOTE: this fails with a value of "null" (TEST_SUITE=sauce)
+        this.assertAttr('maxlength', undefined);
+        // this.assertAttr('size', undefined); //NOTE: re-enable once `size` bug above has been addressed
+        this.assertAttr('tabindex', undefined);
+      }
+
+      ['@test null values (named argument)']() {
+        let attributes = ['disabled', 'placeholder', 'name', 'maxlength', 'size', 'tabindex'];
+
+        this.render(
+          `
+        <Input @type="text" @value={{value}}
+          @disabled={{disabled}}
+          @placeholder={{placeholder}}
+          @name={{name}}
+          @maxlength={{maxlength}}
+          @size={{size}}
+          @tabindex={{tabindex}}
+        />`,
+          {
+            value: null,
+            disabled: null,
+            placeholder: null,
+            name: null,
+            maxlength: null,
+            size: null,
+            tabindex: null,
+          }
+        );
+
+        this.assertValue('');
+        this.assertAllAttrs(attributes, undefined);
+
+        runTask(() => this.rerender());
+
+        this.assertValue('');
+        this.assertAllAttrs(attributes, undefined);
+
+        runTask(() => {
+          set(this.context, 'disabled', true);
+          set(this.context, 'value', 'Updated value');
+          set(this.context, 'placeholder', 'Updated placeholder');
+          set(this.context, 'name', 'updated-name');
+          set(this.context, 'maxlength', 11);
+          set(this.context, 'size', 21);
+          set(this.context, 'tabindex', 31);
+        });
+
+        this.assertDisabled();
+        this.assertValue('Updated value');
+        this.assertAttr('placeholder', 'Updated placeholder');
+        this.assertAttr('name', 'updated-name');
+        this.assertAttr('maxlength', '11');
+        this.assertAttr('size', '21');
+        this.assertAttr('tabindex', '31');
+
+        runTask(() => {
+          set(this.context, 'disabled', null);
+          set(this.context, 'value', null);
+          set(this.context, 'placeholder', null);
+          set(this.context, 'name', null);
+          set(this.context, 'maxlength', null);
+          // set(this.context, 'size', null); //NOTE: this fails with `Error: Failed to set the 'size' property on 'HTMLInputElement': The value provided is 0, which is an invalid size.` (TEST_SUITE=sauce)
+          set(this.context, 'tabindex', null);
+        });
+
+        this.assertAttr('disabled', undefined);
+        this.assertValue('');
+        // this.assertAttr('placeholder', undefined); //NOTE: this fails with a value of "null" (TEST_SUITE=sauce)
+        // this.assertAttr('name', undefined); //NOTE: this fails with a value of "null" (TEST_SUITE=sauce)
+        this.assertAttr('maxlength', undefined);
+        // this.assertAttr('size', undefined); //NOTE: re-enable once `size` bug above has been addressed
+        this.assertAttr('tabindex', undefined);
+      }
+    }
+  );
+
+  // These are the permutations of the set:
+  // ['type="range"', 'min="-5" max="50"', value="%x"']
+  [
+    // HTML attribute
+    '@type="range" min="-5" max="50" @value="%x"',
+    '@type="range" @value="%x" min="-5" max="50"',
+    'min="-5" max="50" @type="range" @value="%x"',
+    'min="-5" max="50" @value="%x" @type="range"',
+    '@value="%x" min="-5" max="50" @type="range"',
+    '@value="%x" @type="range" min="-5" max="50"',
+
+    // Named argument
+    '@type="range" @min="-5" @max="50" @value="%x"',
+    '@type="range" @value="%x" @min="-5" @max="50"',
+    '@min="-5" @max="50" @type="range" @value="%x"',
+    '@min="-5" @max="50" @value="%x" @type="range"',
+    '@value="%x" @min="-5" @max="50" @type="range"',
+    '@value="%x" @type="range" @min="-5" @max="50"',
+  ].forEach(attrs => {
+    moduleFor(
+      `[GH#15675] Components test: <Input ${attrs} />`,
+      class extends InputRenderingTest {
+        renderInput(value = 25) {
+          this.render(`<Input ${attrs.replace('%x', value)} />`);
+        }
+
+        ['@test value over default max but below set max is kept']() {
+          this.renderInput('25');
+          this.assertValue('25');
+        }
+
+        ['@test value below default min but above set min is kept']() {
+          this.renderInput('-2');
+          this.assertValue('-2');
+        }
+
+        ['@test in the valid default range is kept']() {
+          this.renderInput('5');
+          this.assertValue('5');
+        }
+
+        ['@test value above max is reset to max']() {
+          this.renderInput('55');
+          this.assertValue('50');
+        }
+
+        ['@test value below min is reset to min']() {
+          this.renderInput('-10');
+          this.assertValue('-5');
+        }
+      }
+    );
+  });
+} else {
+  moduleFor(
+    'Components test: <Input>',
+    class extends RenderingTestCase {
+      ['@test it is not allowed']() {
+        expectAssertion(() => {
+          this.render(`<Input />`);
+        }, 'Invoking `{{input}}` using angle bracket syntax or `component` helper is not yet supported.');
+      }
+    }
+  );
+}
diff --git a/packages/@ember/-internals/glimmer/tests/integration/helpers/input-test.js b/packages/@ember/-internals/glimmer/tests/integration/components/input-curly-test.js
similarity index 83%
rename from packages/@ember/-internals/glimmer/tests/integration/helpers/input-test.js
rename to packages/@ember/-internals/glimmer/tests/integration/components/input-curly-test.js
index 4e799d1749c..e58971339bc 100644
--- a/packages/@ember/-internals/glimmer/tests/integration/helpers/input-test.js
+++ b/packages/@ember/-internals/glimmer/tests/integration/components/input-curly-test.js
@@ -1,5 +1,6 @@
 import { RenderingTestCase, moduleFor, runDestroy, runTask } from 'internal-test-helpers';
 
+import { EMBER_GLIMMER_ANGLE_BRACKET_BUILT_INS } from '@ember/canary-features';
 import { assign } from '@ember/polyfills';
 import { set } from '@ember/-internals/metal';
 import { jQuery } from '@ember/-internals/views';
@@ -78,14 +79,8 @@ class InputRenderingTest extends RenderingTestCase {
 }
 
 moduleFor(
-  'Helpers test: {{input}}',
+  'Components test: {{input}}',
   class extends InputRenderingTest {
-    ['@test should not allow angle bracket invocation']() {
-      expectAssertion(() => {
-        this.render('<Input />');
-      }, 'Invoking `{{input}}` using angle bracket syntax or `component` helper is not yet supported.');
-    }
-
     ['@test a single text field is inserted into the DOM']() {
       this.render(`{{input type="text" value=value}}`, { value: 'hello' });
 
@@ -293,16 +288,24 @@ moduleFor(
             },
           },
         });
-      }, 'Please refactor `{{input enter="foo"}}` to `{{input enter=(action "foo")}}. (\'-top-level\' @ L1:C0) ');
-      expectDeprecation(() => {
-        this.triggerEvent('keyup', { keyCode: 13 });
-      }, 'Passing actions to components as strings (like {{input enter="foo"}}) is deprecated. Please use closure actions instead ({{input enter=(action "foo")}})');
+      }, 'Passing actions to components as strings (like `{{input enter="foo"}}`) is deprecated. Please use closure actions instead (`{{input enter=(action "foo")}}`). (\'-top-level\' @ L1:C0) ');
+
+      if (EMBER_GLIMMER_ANGLE_BRACKET_BUILT_INS) {
+        expectDeprecation(() => {
+          this.triggerEvent('keyup', { keyCode: 13 });
+        }, 'Passing actions to components as strings (like `<Input @enter="foo" />`) is deprecated. Please use closure actions instead (`<Input @enter={{action "foo"}} />`).');
+      } else {
+        expectDeprecation(() => {
+          this.triggerEvent('keyup', { keyCode: 13 });
+        }, 'Passing actions to components as strings (like `{{input enter="foo"}}`) is deprecated. Please use closure actions instead (`{{input enter=(action "foo")}}`).');
+      }
     }
 
     ['@test sends an action with `{{input enter=(action "foo")}}` when <enter> is pressed'](
       assert
     ) {
       assert.expect(2);
+
       this.render(`{{input enter=(action 'foo')}}`, {
         actions: {
           foo(value, event) {
@@ -331,11 +334,17 @@ moduleFor(
             },
           },
         });
-      }, 'Please refactor `{{input key-press="foo"}}` to `{{input key-press=(action "foo")}}. (\'-top-level\' @ L1:C0) ');
-
-      expectDeprecation(() => {
-        this.triggerEvent('keypress', { keyCode: 65 });
-      }, 'Passing actions to components as strings (like {{input key-press="foo"}}) is deprecated. Please use closure actions instead ({{input key-press=(action "foo")}})');
+      }, 'Passing actions to components as strings (like `{{input key-press="foo"}}`) is deprecated. Please use closure actions instead (`{{input key-press=(action "foo")}}`). (\'-top-level\' @ L1:C0) ');
+
+      if (EMBER_GLIMMER_ANGLE_BRACKET_BUILT_INS) {
+        expectDeprecation(() => {
+          this.triggerEvent('keypress', { keyCode: 65 });
+        }, 'Passing actions to components as strings (like `<Input @key-press="foo" />`) is deprecated. Please use closure actions instead (`<Input @key-press={{action "foo"}} />`).');
+      } else {
+        expectDeprecation(() => {
+          this.triggerEvent('keypress', { keyCode: 65 });
+        }, 'Passing actions to components as strings (like `{{input key-press="foo"}}`) is deprecated. Please use closure actions instead (`{{input key-press=(action "foo")}}`).');
+      }
     }
 
     ['@test sends an action with `{{input key-press=(action "foo")}}` is pressed'](assert) {
@@ -422,11 +431,17 @@ moduleFor(
             },
           },
         });
-      }, 'Please refactor `{{input escape-press="foo"}}` to `{{input escape-press=(action "foo")}}. (\'-top-level\' @ L1:C0) ');
-
-      expectDeprecation(() => {
-        this.triggerEvent('keyup', { keyCode: 27 });
-      }, 'Passing actions to components as strings (like {{input escape-press="foo"}}) is deprecated. Please use closure actions instead ({{input escape-press=(action "foo")}})');
+      }, 'Passing actions to components as strings (like `{{input escape-press="foo"}}`) is deprecated. Please use closure actions instead (`{{input escape-press=(action "foo")}}`). (\'-top-level\' @ L1:C0) ');
+
+      if (EMBER_GLIMMER_ANGLE_BRACKET_BUILT_INS) {
+        expectDeprecation(() => {
+          this.triggerEvent('keyup', { keyCode: 27 });
+        }, 'Passing actions to components as strings (like `<Input @escape-press="foo" />`) is deprecated. Please use closure actions instead (`<Input @escape-press={{action "foo"}} />`).');
+      } else {
+        expectDeprecation(() => {
+          this.triggerEvent('keyup', { keyCode: 27 });
+        }, 'Passing actions to components as strings (like `{{input escape-press="foo"}}`) is deprecated. Please use closure actions instead (`{{input escape-press=(action "foo")}}`).');
+      }
     }
 
     ['@test sends an action with `{{input escape-press=(action "foo")}}` when <escape> is pressed'](
@@ -460,11 +475,17 @@ moduleFor(
             },
           },
         });
-      }, 'Please refactor `{{input key-down="foo"}}` to `{{input key-down=(action "foo")}}. (\'-top-level\' @ L1:C0) ');
-
-      expectDeprecation(() => {
-        this.triggerEvent('keydown', { keyCode: 65 });
-      }, 'Passing actions to components as strings (like {{input key-down="foo"}}) is deprecated. Please use closure actions instead ({{input key-down=(action "foo")}})');
+      }, 'Passing actions to components as strings (like `{{input key-down="foo"}}`) is deprecated. Please use closure actions instead (`{{input key-down=(action "foo")}}`). (\'-top-level\' @ L1:C0) ');
+
+      if (EMBER_GLIMMER_ANGLE_BRACKET_BUILT_INS) {
+        expectDeprecation(() => {
+          this.triggerEvent('keydown', { keyCode: 65 });
+        }, 'Passing actions to components as strings (like `<Input @key-down="foo" />`) is deprecated. Please use closure actions instead (`<Input @key-down={{action "foo"}} />`).');
+      } else {
+        expectDeprecation(() => {
+          this.triggerEvent('keydown', { keyCode: 65 });
+        }, 'Passing actions to components as strings (like `{{input key-down="foo"}}`) is deprecated. Please use closure actions instead (`{{input key-down=(action "foo")}}`).');
+      }
     }
 
     ['@test sends an action with `{{input key-down=(action "foo")}}` when a key is pressed'](
@@ -498,16 +519,20 @@ moduleFor(
             },
           },
         });
-      }, 'Please refactor `{{input key-up="foo"}}` to `{{input key-up=(action "foo")}}. (\'-top-level\' @ L1:C0) ');
-
-      expectDeprecation(() => {
-        this.triggerEvent('keyup', { keyCode: 65 });
-      }, 'Passing actions to components as strings (like {{input key-up="foo"}}) is deprecated. Please use closure actions instead ({{input key-up=(action "foo")}})');
+      }, 'Passing actions to components as strings (like `{{input key-up="foo"}}`) is deprecated. Please use closure actions instead (`{{input key-up=(action "foo")}}`). (\'-top-level\' @ L1:C0) ');
+
+      if (EMBER_GLIMMER_ANGLE_BRACKET_BUILT_INS) {
+        expectDeprecation(() => {
+          this.triggerEvent('keyup', { keyCode: 65 });
+        }, 'Passing actions to components as strings (like `<Input @key-up="foo" />`) is deprecated. Please use closure actions instead (`<Input @key-up={{action "foo"}} />`).');
+      } else {
+        expectDeprecation(() => {
+          this.triggerEvent('keyup', { keyCode: 65 });
+        }, 'Passing actions to components as strings (like `{{input key-up="foo"}}`) is deprecated. Please use closure actions instead (`{{input key-up=(action "foo")}}`).');
+      }
     }
 
-    ['@test [DEPRECATED] sends an action with `{{input key-up=(action "foo")}}` when a key is pressed'](
-      assert
-    ) {
+    ['@test sends an action with `{{input key-up=(action "foo")}}` when a key is pressed'](assert) {
       assert.expect(2);
 
       this.render(`{{input key-up=(action 'foo')}}`, {
@@ -531,7 +556,7 @@ moduleFor(
 );
 
 moduleFor(
-  'Helpers test: {{input}} with dynamic type',
+  'Components 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' });
@@ -592,7 +617,7 @@ moduleFor(
 );
 
 moduleFor(
-  `Helpers test: {{input type='checkbox'}}`,
+  `Components test: {{input type='checkbox'}}`,
   class extends InputRenderingTest {
     ['@test dynamic attributes']() {
       this.render(
@@ -651,7 +676,7 @@ moduleFor(
         this.render(`{{input type="checkbox" value=value}}`, {
           value: 'value',
         });
-      }, /you must use `checked=/);
+      }, /checkbox.+value.+not supported.+use.+checked.+instead/);
     }
 
     ['@test with a bound type']() {
@@ -710,7 +735,7 @@ moduleFor(
 );
 
 moduleFor(
-  `Helpers test: {{input type='text'}}`,
+  `Components test: {{input type='text'}}`,
   class extends InputRenderingTest {
     ['@test null values']() {
       let attributes = ['disabled', 'placeholder', 'name', 'maxlength', 'size', 'tabindex'];
@@ -795,7 +820,7 @@ moduleFor(
   'value="%x" type="range" min="-5" max="50"',
 ].forEach(attrs => {
   moduleFor(
-    `[GH#15675] Helpers test: {{input ${attrs}}}`,
+    `[GH#15675] Components test: {{input ${attrs}}}`,
     class extends InputRenderingTest {
       renderInput(value = 25) {
         this.render(`{{input ${attrs.replace('%x', value)}}}`);
diff --git a/packages/@ember/-internals/views/lib/mixins/text_support.js b/packages/@ember/-internals/views/lib/mixins/text_support.js
index 055908669b2..aa5173bd5c9 100644
--- a/packages/@ember/-internals/views/lib/mixins/text_support.js
+++ b/packages/@ember/-internals/views/lib/mixins/text_support.js
@@ -4,6 +4,7 @@
 
 import { get, set, Mixin } from '@ember/-internals/metal';
 import { TargetActionSupport } from '@ember/-internals/runtime';
+import { EMBER_GLIMMER_ANGLE_BRACKET_BUILT_INS } from '@ember/canary-features';
 import { deprecate } from '@ember/debug';
 import { SEND_ACTION } from '@ember/deprecated-features';
 
@@ -310,15 +311,16 @@ function sendAction(eventName, view, event) {
   let value = get(view, 'value');
 
   if (SEND_ACTION && typeof actionName === 'string') {
-    deprecate(
-      `Passing actions to components as strings (like {{input ${eventName}="${actionName}"}}) is deprecated. Please use closure actions instead ({{input ${eventName}=(action "${actionName}")}})`,
-      false,
-      {
-        id: 'ember-component.send-action',
-        until: '4.0.0',
-        url: 'https://emberjs.com/deprecations/v3.x#toc_ember-component-send-action',
-      }
-    );
+    let message = EMBER_GLIMMER_ANGLE_BRACKET_BUILT_INS
+      ? `Passing actions to components as strings (like \`<Input @${eventName}="${actionName}" />\`) is deprecated. Please use closure actions instead (\`<Input @${eventName}={{action "${actionName}"}} />\`).`
+      : `Passing actions to components as strings (like \`{{input ${eventName}="${actionName}"}}\`) is deprecated. Please use closure actions instead (\`{{input ${eventName}=(action "${actionName}")}}\`).`;
+
+    deprecate(message, false, {
+      id: 'ember-component.send-action',
+      until: '4.0.0',
+      url: 'https://emberjs.com/deprecations/v3.x#toc_ember-component-send-action',
+    });
+
     view.triggerAction({
       action: actionName,
       actionContext: [value, event],
diff --git a/packages/ember-template-compiler/lib/plugins/deprecate-send-action.ts b/packages/ember-template-compiler/lib/plugins/deprecate-send-action.ts
index e06bda6120a..c79f1f6ff13 100644
--- a/packages/ember-template-compiler/lib/plugins/deprecate-send-action.ts
+++ b/packages/ember-template-compiler/lib/plugins/deprecate-send-action.ts
@@ -1,3 +1,4 @@
+import { EMBER_GLIMMER_ANGLE_BRACKET_BUILT_INS } from '@ember/canary-features';
 import { deprecate } from '@ember/debug';
 import { SEND_ACTION } from '@ember/deprecated-features';
 import { AST, ASTPlugin, ASTPluginEnvironment } from '@glimmer/syntax';
@@ -18,15 +19,51 @@ export default function deprecateSendAction(env: ASTPluginEnvironment): ASTPlugi
   if (SEND_ACTION) {
     let { moduleName } = env.meta;
 
-    let deprecationMessage = (node: AST.MustacheStatement, evName: string, action: string) => {
+    let deprecationMessage = (node: AST.Node, eventName: string, actionName: string) => {
       let sourceInformation = calculateLocationDisplay(moduleName, node.loc);
-      return `Please refactor \`{{input ${evName}="${action}"}}\` to \`{{input ${evName}=(action "${action}")}}\. ${sourceInformation}`;
+
+      if (EMBER_GLIMMER_ANGLE_BRACKET_BUILT_INS && node.type === 'ElementNode') {
+        return `Passing actions to components as strings (like \`<Input @${eventName}="${actionName}" />\`) is deprecated. Please use closure actions instead (\`<Input @${eventName}={{action "${actionName}"}} />\`). ${sourceInformation}`;
+      } else {
+        return `Passing actions to components as strings (like \`{{input ${eventName}="${actionName}"}}\`) is deprecated. Please use closure actions instead (\`{{input ${eventName}=(action "${actionName}")}}\`). ${sourceInformation}`;
+      }
     };
 
     return {
       name: 'deprecate-send-action',
 
       visitor: {
+        ElementNode(node: AST.ElementNode) {
+          if (!EMBER_GLIMMER_ANGLE_BRACKET_BUILT_INS || node.tag !== 'Input') {
+            return;
+          }
+
+          node.attributes.forEach(({ name, value }) => {
+            if (name.charAt(0) === '@') {
+              let eventName = name.substring(1);
+
+              if (EVENTS.indexOf(eventName) > -1) {
+                if (value.type === 'TextNode') {
+                  deprecate(deprecationMessage(node, eventName, value.chars), false, {
+                    id: 'ember-component.send-action',
+                    until: '4.0.0',
+                    url: 'https://emberjs.com/deprecations/v3.x#toc_ember-component-send-action',
+                  });
+                } else if (
+                  value.type === 'MustacheStatement' &&
+                  value.path.type === 'StringLiteral'
+                ) {
+                  deprecate(deprecationMessage(node, eventName, value.path.original), false, {
+                    id: 'ember-component.send-action',
+                    until: '4.0.0',
+                    url: 'https://emberjs.com/deprecations/v3.x#toc_ember-component-send-action',
+                  });
+                }
+              }
+            }
+          });
+        },
+
         MustacheStatement(node: AST.MustacheStatement) {
           if (node.path.original !== 'input') {
             return;
diff --git a/packages/ember-template-compiler/lib/plugins/index.ts b/packages/ember-template-compiler/lib/plugins/index.ts
index 2089090076f..3f407a518ac 100644
--- a/packages/ember-template-compiler/lib/plugins/index.ts
+++ b/packages/ember-template-compiler/lib/plugins/index.ts
@@ -17,6 +17,7 @@ import TransformOldClassBindingSyntax from './transform-old-class-binding-syntax
 import TransformQuotedBindingsIntoJustBindings from './transform-quoted-bindings-into-just-bindings';
 import TransformTopLevelComponents from './transform-top-level-components';
 
+import { EMBER_GLIMMER_ANGLE_BRACKET_BUILT_INS } from '@ember/canary-features';
 import { SEND_ACTION } from '@ember/deprecated-features';
 import { ASTPlugin, ASTPluginEnvironment } from '@glimmer/syntax';
 
@@ -31,7 +32,6 @@ const transforms: Array<APluginFunc> = [
   TransformQuotedBindingsIntoJustBindings,
   AssertReservedNamedArguments,
   TransformActionSyntax,
-  TransformInputTypeSyntax,
   TransformAttrsIntoArgs,
   TransformEachInIntoEach,
   TransformHasBlockSyntax,
@@ -42,6 +42,10 @@ const transforms: Array<APluginFunc> = [
   AssertSplattributeExpressions,
 ];
 
+if (!EMBER_GLIMMER_ANGLE_BRACKET_BUILT_INS) {
+  transforms.push(TransformInputTypeSyntax);
+}
+
 if (SEND_ACTION) {
   transforms.push(DeprecateSendAction);
 }
diff --git a/packages/ember-template-compiler/lib/plugins/transform-input-type-syntax.ts b/packages/ember-template-compiler/lib/plugins/transform-input-type-syntax.ts
index 3f7b67d48ad..1a0089d0aae 100644
--- a/packages/ember-template-compiler/lib/plugins/transform-input-type-syntax.ts
+++ b/packages/ember-template-compiler/lib/plugins/transform-input-type-syntax.ts
@@ -1,4 +1,6 @@
+import { EMBER_GLIMMER_ANGLE_BRACKET_BUILT_INS } from '@ember/canary-features';
 import { AST, ASTPlugin, ASTPluginEnvironment } from '@glimmer/syntax';
+import { unreachable } from '@glimmer/util';
 import { Builders } from '../types';
 
 /**
@@ -26,36 +28,51 @@ import { Builders } from '../types';
   @class TransformInputTypeSyntax
 */
 
-export default function transformInputTypeSyntax(env: ASTPluginEnvironment): ASTPlugin {
-  let b = env.syntax.builders;
+let transformInputTypeSyntax: (env: ASTPluginEnvironment) => ASTPlugin;
 
-  return {
-    name: 'transform-input-type-syntax',
+if (EMBER_GLIMMER_ANGLE_BRACKET_BUILT_INS) {
+  transformInputTypeSyntax = () => {
+    throw unreachable();
+  };
+} else {
+  transformInputTypeSyntax = function transformInputTypeSyntax(
+    env: ASTPluginEnvironment
+  ): ASTPlugin {
+    let b = env.syntax.builders;
+
+    return {
+      name: 'transform-input-type-syntax',
 
-    visitor: {
-      MustacheStatement(node: AST.MustacheStatement) {
-        if (isInput(node)) {
-          insertTypeHelperParameter(node, b);
-        }
+      visitor: {
+        MustacheStatement(node: AST.MustacheStatement) {
+          if (isInput(node)) {
+            insertTypeHelperParameter(node, b);
+          }
+        },
       },
-    },
+    };
   };
-}
 
-function isInput(node: AST.MustacheStatement) {
-  return node.path.original === 'input';
-}
+  let isInput = function isInput(node: AST.MustacheStatement) {
+    return node.path.original === 'input';
+  };
 
-function insertTypeHelperParameter(node: AST.MustacheStatement, builders: 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;
+  let insertTypeHelperParameter = function insertTypeHelperParameter(
+    node: AST.MustacheStatement,
+    builders: 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', [pair.value], undefined, pair.loc));
     }
-  }
-  if (pair && pair.value.type !== 'StringLiteral') {
-    node.params.unshift(builders.sexpr('-input-type', [pair.value], undefined, pair.loc));
-  }
+  };
 }
+
+export default transformInputTypeSyntax;
diff --git a/packages/ember-template-compiler/tests/plugins/deprecate-send-action-test.js b/packages/ember-template-compiler/tests/plugins/deprecate-send-action-test.js
index a5925fa41e0..9f7316f3b56 100644
--- a/packages/ember-template-compiler/tests/plugins/deprecate-send-action-test.js
+++ b/packages/ember-template-compiler/tests/plugins/deprecate-send-action-test.js
@@ -18,7 +18,7 @@ EVENTS.forEach(function(e) {
   DeprecateSendActionTest.prototype[
     `@test Using \`{{input ${e}="actionName"}}\` provides a deprecation`
   ] = function() {
-    let expectedMessage = `Please refactor \`{{input ${e}="foo-bar"}}\` to \`{{input ${e}=(action "foo-bar")}}\. ('baz/foo-bar' @ L1:C0) `;
+    let expectedMessage = `Passing actions to components as strings (like \`{{input ${e}="foo-bar"}}\`) is deprecated. Please use closure actions instead (\`{{input ${e}=(action "foo-bar")}}\`)\. ('baz/foo-bar' @ L1:C0) `;
 
     expectDeprecation(() => {
       compile(`{{input ${e}="foo-bar"}}`, { moduleName: 'baz/foo-bar' });