From d2b8b58b5777708e955e2c1c90531db8a35819b5 Mon Sep 17 00:00:00 2001
From: Godfrey Chan <godfreykfc@gmail.com>
Date: Thu, 11 Feb 2021 03:03:49 -0800
Subject: [PATCH] [FEATURE modernized-built-in-components] Extract shared code

Refactor to extra shared code into internal component to pave way
for implementing <LinkTo> with the new infrastructure.

Part of #19270
---
 packages/@ember/-internals/glimmer/index.ts   |   5 +-
 .../lib/component-managers/internal.ts        |  88 --
 .../glimmer/lib/components/-textarea.ts       | 103 ++
 .../glimmer/lib/components/abstract-input.ts  | 321 +++++++
 .../glimmer/lib/components/input.ts           | 900 ++----------------
 .../glimmer/lib/components/internal.ts        | 530 ++++++++++-
 .../glimmer/lib/components/textarea.ts        | 143 ++-
 .../-internals/glimmer/lib/setup-registry.ts  |  17 +-
 .../glimmer/lib/templates/input.hbs           |   2 +-
 .../glimmer/lib/templates/textarea.hbs        |   2 +-
 10 files changed, 1114 insertions(+), 997 deletions(-)
 delete mode 100644 packages/@ember/-internals/glimmer/lib/component-managers/internal.ts
 create mode 100644 packages/@ember/-internals/glimmer/lib/components/-textarea.ts
 create mode 100644 packages/@ember/-internals/glimmer/lib/components/abstract-input.ts

diff --git a/packages/@ember/-internals/glimmer/index.ts b/packages/@ember/-internals/glimmer/index.ts
index d756909be67..c8a801895ed 100644
--- a/packages/@ember/-internals/glimmer/index.ts
+++ b/packages/@ember/-internals/glimmer/index.ts
@@ -366,9 +366,10 @@ export { templateFactory as template, templateCacheCounters } from '@glimmer/opc
 export { default as RootTemplate } from './lib/templates/root';
 export { default as Checkbox } from './lib/components/checkbox';
 export { default as TextField } from './lib/components/text-field';
-export { default as TextArea } from './lib/components/textarea';
+export { default as TextArea } from './lib/components/-textarea';
 export { default as LinkComponent } from './lib/components/link-to';
-export { default as Input, TextareaComponent as Textarea } from './lib/components/input';
+export { default as Input } from './lib/components/input';
+export { default as Textarea } from './lib/components/textarea';
 export { default as Component } from './lib/component';
 export { default as Helper, helper } from './lib/helper';
 export { SafeString, escapeExpression, htmlSafe, isHTMLSafe } from './lib/utils/string';
diff --git a/packages/@ember/-internals/glimmer/lib/component-managers/internal.ts b/packages/@ember/-internals/glimmer/lib/component-managers/internal.ts
deleted file mode 100644
index d6636a3ee5e..00000000000
--- a/packages/@ember/-internals/glimmer/lib/component-managers/internal.ts
+++ /dev/null
@@ -1,88 +0,0 @@
-import { Owner } from '@ember/-internals/owner';
-import { assert } from '@ember/debug';
-import {
-  CapturedNamedArguments,
-  Destroyable,
-  DynamicScope,
-  Environment,
-  InternalComponentCapabilities,
-  InternalComponentManager,
-  VMArguments,
-  WithCreateInstance,
-} from '@glimmer/interfaces';
-import { createConstRef, isConstRef, Reference, valueForRef } from '@glimmer/reference';
-
-const CAPABILITIES: InternalComponentCapabilities = {
-  dynamicLayout: false,
-  dynamicTag: false,
-  prepareArgs: false,
-  createArgs: true,
-  attributeHook: false,
-  elementHook: false,
-  createCaller: true,
-  dynamicScope: false,
-  updateHook: false,
-  createInstance: true,
-  wrapped: false,
-  willDestroy: false,
-  hasSubOwner: false,
-};
-
-export interface InternalComponentState {
-  env: Environment;
-  instance: Destroyable;
-}
-
-export interface EmberInternalComponentConstructor {
-  new (owner: Owner, args: CapturedNamedArguments, caller: unknown): Destroyable;
-}
-
-export default class InternalManager
-  implements
-    InternalComponentManager<InternalComponentState, EmberInternalComponentConstructor>,
-    WithCreateInstance {
-  constructor(private ComponentClass: EmberInternalComponentConstructor, private name: string) {}
-
-  getCapabilities(): InternalComponentCapabilities {
-    return CAPABILITIES;
-  }
-
-  create(
-    owner: Owner,
-    _definition: unknown,
-    args: VMArguments,
-    env: Environment,
-    _dynamicScope: DynamicScope,
-    caller: Reference
-  ): InternalComponentState {
-    assert('caller must be const', isConstRef(caller));
-
-    assert(
-      `The ${this.name} component does not take any positional arguments`,
-      args.positional.length === 0
-    );
-
-    let { ComponentClass } = this;
-    let instance = new ComponentClass(owner, args.named.capture(), valueForRef(caller));
-
-    return { env, instance };
-  }
-
-  didCreate(): void {}
-  didUpdate(): void {}
-
-  didRenderLayout(): void {}
-  didUpdateLayout(): void {}
-
-  getDebugName(): string {
-    return this.name;
-  }
-
-  getSelf({ instance }: InternalComponentState): Reference {
-    return createConstRef(instance, 'this');
-  }
-
-  getDestroyable(state: InternalComponentState): Destroyable {
-    return state.instance;
-  }
-}
diff --git a/packages/@ember/-internals/glimmer/lib/components/-textarea.ts b/packages/@ember/-internals/glimmer/lib/components/-textarea.ts
new file mode 100644
index 00000000000..00473ea09b7
--- /dev/null
+++ b/packages/@ember/-internals/glimmer/lib/components/-textarea.ts
@@ -0,0 +1,103 @@
+/**
+@module @ember/component
+*/
+import { CoreObject } from '@ember/-internals/runtime';
+import { TextSupport } from '@ember/-internals/views';
+import { EMBER_MODERNIZED_BUILT_IN_COMPONENTS } from '@ember/canary-features';
+import { deprecate } from '@ember/debug';
+import Component from '../component';
+import layout from '../templates/empty';
+
+/**
+  The internal representation used for `Textarea` invocations.
+
+  @class TextArea
+  @extends Component
+  @see {Ember.Templates.components.Textarea}
+  @uses Ember.TextSupport
+  @public
+*/
+const TextArea = Component.extend(TextSupport, {
+  classNames: ['ember-text-area'],
+
+  layout,
+
+  tagName: 'textarea',
+  attributeBindings: [
+    'rows',
+    'cols',
+    'name',
+    'selectionEnd',
+    'selectionStart',
+    'autocomplete',
+    'wrap',
+    'lang',
+    'dir',
+    'value',
+  ],
+  rows: null,
+  cols: null,
+});
+
+TextArea.toString = () => '@ember/component/text-area';
+
+if (EMBER_MODERNIZED_BUILT_IN_COMPONENTS) {
+  Object.defineProperty(TextArea, '_wasReopened', {
+    configurable: true,
+    enumerable: false,
+    writable: true,
+    value: false,
+  });
+
+  Object.defineProperty(TextArea, 'reopen', {
+    configurable: true,
+    enumerable: false,
+    writable: true,
+    value: function reopen(this: typeof TextArea, ...args: unknown[]): unknown {
+      if (this === TextArea) {
+        deprecate(
+          'Reopening Ember.TextArea is deprecated. Consider implementing your own ' +
+            'wrapper component or create a custom subclass.',
+          false,
+          {
+            id: 'ember.built-in-components.reopen',
+            for: 'ember-source',
+            since: {},
+            until: '4.0.0',
+          }
+        );
+
+        TextArea._wasReopened = true;
+      }
+
+      return CoreObject.reopen.call(this, ...args);
+    },
+  });
+
+  Object.defineProperty(TextArea, 'reopenClass', {
+    configurable: true,
+    enumerable: false,
+    writable: true,
+    value: function reopenClass(this: typeof TextArea, ...args: unknown[]): unknown {
+      if (this === TextArea) {
+        deprecate(
+          'Reopening Ember.TextArea is deprecated. Consider implementing your own ' +
+            'wrapper component or create a custom subclass.',
+          false,
+          {
+            id: 'ember.built-in-components.reopen',
+            for: 'ember-source',
+            since: {},
+            until: '4.0.0',
+          }
+        );
+
+        TextArea._wasReopened = true;
+      }
+
+      return CoreObject.reopenClass.call(this, ...args);
+    },
+  });
+}
+
+export default TextArea;
diff --git a/packages/@ember/-internals/glimmer/lib/components/abstract-input.ts b/packages/@ember/-internals/glimmer/lib/components/abstract-input.ts
new file mode 100644
index 00000000000..cc08b53de5e
--- /dev/null
+++ b/packages/@ember/-internals/glimmer/lib/components/abstract-input.ts
@@ -0,0 +1,321 @@
+import { tracked } from '@ember/-internals/metal';
+import { TargetActionSupport } from '@ember/-internals/runtime';
+import { TextSupport } from '@ember/-internals/views';
+import { EMBER_MODERNIZED_BUILT_IN_COMPONENTS } from '@ember/canary-features';
+import { assert, deprecate } from '@ember/debug';
+import { JQUERY_INTEGRATION, SEND_ACTION } from '@ember/deprecated-features';
+import { action } from '@ember/object';
+import { isConstRef, isUpdatableRef, Reference, updateRef, valueForRef } from '@glimmer/reference';
+import Component from '../component';
+import InternalComponent, {
+  DeprecatingInternalComponent,
+  EventListener,
+  handleDeprecatedArguments,
+  handleDeprecatedAttributeArguments,
+  handleDeprecatedEventArguments,
+  InternalComponentConstructor,
+  jQueryEventShim,
+} from './internal';
+
+const UNINITIALIZED: unknown = Object.freeze({});
+
+type VirtualEventListener = (value: string, event: Event) => void;
+
+function elementForEvent(event: Event): HTMLInputElement | HTMLTextAreaElement {
+  assert(
+    '[BUG] event target must be an <input> or <textarea> element',
+    event.target instanceof HTMLInputElement || event.target instanceof HTMLTextAreaElement
+  );
+
+  return event.target;
+}
+
+function valueForEvent(event: Event): string {
+  return elementForEvent(event).value;
+}
+
+function devirtualize(callback: VirtualEventListener): EventListener {
+  return (event: Event) => callback(valueForEvent(event), event);
+}
+
+export function valueFrom(reference?: Reference<unknown>): Value {
+  if (reference === undefined) {
+    return new LocalValue(undefined);
+  } else if (isConstRef(reference)) {
+    return new LocalValue(valueForRef(reference));
+  } else if (isUpdatableRef(reference)) {
+    return new UpstreamValue(reference);
+  } else {
+    return new ForkedValue(reference);
+  }
+}
+
+interface Value {
+  get(): unknown;
+  set(value: unknown): void;
+}
+
+class LocalValue implements Value {
+  @tracked private value: unknown;
+
+  constructor(value: unknown) {
+    this.value = value;
+  }
+
+  get(): unknown {
+    return this.value;
+  }
+
+  set(value: unknown): void {
+    this.value = value;
+  }
+}
+
+class UpstreamValue implements Value {
+  constructor(private reference: Reference<unknown>) {}
+
+  get(): unknown {
+    return valueForRef(this.reference);
+  }
+
+  set(value: unknown): void {
+    updateRef(this.reference, value);
+  }
+}
+
+class ForkedValue implements Value {
+  private local?: Value;
+  private upstream: Value;
+
+  private lastUpstreamValue = UNINITIALIZED;
+
+  constructor(reference: Reference<unknown>) {
+    this.upstream = new UpstreamValue(reference);
+  }
+
+  get(): unknown {
+    let upstreamValue = this.upstream.get();
+
+    if (upstreamValue !== this.lastUpstreamValue) {
+      this.lastUpstreamValue = upstreamValue;
+      this.local = new LocalValue(upstreamValue);
+    }
+
+    assert('[BUG] this.local must have been initialized at this point', this.local);
+    return this.local.get();
+  }
+
+  set(value: unknown): void {
+    assert('[BUG] this.local must have been initialized at this point', this.local);
+    this.local.set(value);
+  }
+}
+
+export default abstract class AbstractInput
+  extends InternalComponent
+  implements DeprecatingInternalComponent {
+  modernized = this.shouldModernize();
+
+  protected shouldModernize(): boolean {
+    return (
+      Boolean(EMBER_MODERNIZED_BUILT_IN_COMPONENTS) &&
+      Component._wasReopened === false &&
+      TextSupport._wasReopened === false &&
+      TargetActionSupport._wasReopened === false
+    );
+  }
+
+  private _value = valueFrom(this.args.value);
+
+  get value(): unknown {
+    return this._value.get();
+  }
+
+  set value(value: unknown) {
+    this._value.set(value);
+  }
+
+  @action valueDidChange(event: Event): void {
+    this.value = valueForEvent(event);
+  }
+
+  /**
+   * The `change` and `input` actions need to be overridden in the `Input`
+   * subclass. Unfortunately, some ember-source builds currently uses babel
+   * loose mode to transpile its classes. Having the `@action` decorator on the
+   * super class creates a getter on the prototype, and when the subclass
+   * overrides the method, the loose mode transpilation would emit something
+   * like `Subclass.prototype['change'] = function change() { ... }`, which
+   * fails because `prototype['change']` is getter-only/readonly. The correct
+   * solution is to use `Object.defineProperty(prototype, 'change', ...)` but
+   * that requires disabling loose mode. For now, the workaround is to add the
+   * decorator only on the subclass. This is more of a configuration issue on
+   * our own builds and doesn't really affect apps.
+   */
+
+  /* @action */ change(event: Event): void {
+    this.valueDidChange(event);
+  }
+
+  /* @action */ input(event: Event): void {
+    this.valueDidChange(event);
+  }
+
+  @action keyUp(event: KeyboardEvent): void {
+    switch (event.key) {
+      case 'Enter':
+        this.listenerFor('enter')(event);
+        this.listenerFor('insert-newline')(event);
+        break;
+
+      case 'Escape':
+        this.listenerFor('escape-press')(event);
+        break;
+    }
+  }
+
+  protected listenerFor(name: string): EventListener {
+    let listener = super.listenerFor(name);
+
+    if (this.isVirtualEventListener(name, listener)) {
+      return devirtualize(listener);
+    } else {
+      return listener;
+    }
+  }
+
+  protected isVirtualEventListener(
+    name: string,
+    _listener: Function
+  ): _listener is VirtualEventListener {
+    let virtualEvents = ['enter', 'insert-newline', 'escape-press'];
+
+    return virtualEvents.indexOf(name) !== -1;
+  }
+}
+
+export function handleDeprecatedFeatures(
+  target: InternalComponentConstructor<AbstractInput>,
+  attributeBindings: Array<string | [attribute: string, argument: string]>
+): void {
+  if (SEND_ACTION) {
+    let angle = target.toString();
+    let { prototype } = target;
+
+    interface View {
+      send(action: string, ...args: unknown[]): void;
+    }
+
+    let isView = (target: {}): target is View => {
+      return typeof (target as Partial<View>).send === 'function';
+    };
+
+    let superListenerFor = prototype['listenerFor'];
+
+    Object.defineProperty(prototype, 'listenerFor', {
+      configurable: true,
+      enumerable: false,
+      value: function listenerFor(this: AbstractInput, name: string): EventListener {
+        const actionName = this.arg(name);
+
+        if (typeof actionName === 'string') {
+          deprecate(
+            `Passing actions to components as strings (like \`<${angle} @${name}="${actionName}" />\`) is deprecated. ` +
+              `Please use closure actions instead (\`<${angle} @${name}={{action "${actionName}"}} />\`).`,
+            false,
+            {
+              id: 'ember-component.send-action',
+              for: 'ember-source',
+              since: {},
+              until: '4.0.0',
+              url: 'https://emberjs.com/deprecations/v3.x#toc_ember-component-send-action',
+            }
+          );
+
+          const { caller } = this;
+
+          assert('[BUG] missing caller', caller && typeof caller === 'object');
+
+          let listener: Function;
+
+          if (isView(caller)) {
+            listener = (...args: unknown[]) => caller.send(actionName, ...args);
+          } else {
+            assert(
+              `The action '${actionName}' did not exist on ${caller}`,
+              typeof caller[actionName] === 'function'
+            );
+
+            listener = caller[actionName];
+          }
+
+          let deprecatedListener = (...args: unknown[]) => {
+            deprecate(
+              `Passing actions to components as strings (like \`<${angle} @${name}="${actionName}" />\`) is deprecated. ` +
+                `Please use closure actions instead (\`<${angle} @${name}={{action "${actionName}"}} />\`).`,
+              false,
+              {
+                id: 'ember-component.send-action',
+                for: 'ember-source',
+                since: {},
+                until: '4.0.0',
+                url: 'https://emberjs.com/deprecations/v3.x#toc_ember-component-send-action',
+              }
+            );
+
+            return listener(...args);
+          };
+
+          if (this.isVirtualEventListener(name, deprecatedListener)) {
+            return devirtualize(deprecatedListener);
+          } else {
+            return deprecatedListener as EventListener;
+          }
+        } else {
+          return superListenerFor.call(this, name);
+        }
+      },
+    });
+  }
+
+  if (EMBER_MODERNIZED_BUILT_IN_COMPONENTS) {
+    let { prototype } = target;
+
+    let virtualEvents = {
+      focusin: 'focus-in',
+      focusout: 'focus-out',
+      keypress: 'key-press',
+      keyup: 'key-up',
+      keydown: 'key-down',
+    };
+
+    handleDeprecatedArguments(target);
+
+    handleDeprecatedAttributeArguments(target, attributeBindings);
+
+    handleDeprecatedEventArguments(target, Object.entries(virtualEvents));
+
+    {
+      let superIsVirtualEventListener = prototype['isVirtualEventListener'];
+
+      Object.defineProperty(prototype, 'isVirtualEventListener', {
+        configurable: true,
+        enumerable: false,
+        value: function isVirtualEventListener(
+          this: AbstractInput,
+          name: string,
+          listener: Function
+        ): listener is VirtualEventListener {
+          return (
+            Object.values(virtualEvents).indexOf(name) !== -1 ||
+            superIsVirtualEventListener.call(this, name, listener)
+          );
+        },
+      });
+    }
+  }
+
+  if (JQUERY_INTEGRATION) {
+    jQueryEventShim(target);
+  }
+}
diff --git a/packages/@ember/-internals/glimmer/lib/components/input.ts b/packages/@ember/-internals/glimmer/lib/components/input.ts
index cb1e899ef1a..b01be4a3793 100644
--- a/packages/@ember/-internals/glimmer/lib/components/input.ts
+++ b/packages/@ember/-internals/glimmer/lib/components/input.ts
@@ -2,32 +2,16 @@
 @module @ember/component
 */
 import { hasDOM } from '@ember/-internals/browser-environment';
-import { tracked } from '@ember/-internals/metal';
-import { Owner } from '@ember/-internals/owner';
-import { TargetActionSupport } from '@ember/-internals/runtime';
-import { guidFor } from '@ember/-internals/utils';
-import { jQuery, jQueryDisabled, TextSupport } from '@ember/-internals/views';
 import { EMBER_MODERNIZED_BUILT_IN_COMPONENTS } from '@ember/canary-features';
-import { assert, deprecate, runInDebug, warn } from '@ember/debug';
-import { JQUERY_INTEGRATION, SEND_ACTION } from '@ember/deprecated-features';
+import { assert, warn } from '@ember/debug';
 import { action } from '@ember/object';
-import { Maybe, Option } from '@glimmer/interfaces';
-import {
-  setComponentTemplate,
-  setInternalComponentManager,
-  setInternalModifierManager,
-} from '@glimmer/manager';
-import { isConstRef, isUpdatableRef, Reference, updateRef, valueForRef } from '@glimmer/reference';
+import { valueForRef } from '@glimmer/reference';
 import { untrack } from '@glimmer/validator';
-import Component from '../component';
-import InternalManager from '../component-managers/internal';
-import InternalModifier, { InternalModifierManager } from '../modifiers/internal';
 import InputTemplate from '../templates/input';
-import TextareaTemplate from '../templates/textarea';
+import AbstractInput, { handleDeprecatedFeatures, valueFrom } from './abstract-input';
 import Checkbox from './checkbox';
-import InternalComponent from './internal';
+import { opaquify } from './internal';
 import TextField from './text-field';
-import TextArea from './textarea';
 
 let isValidInputType: (type: string) => boolean;
 
@@ -61,137 +45,6 @@ if (hasDOM && EMBER_MODERNIZED_BUILT_IN_COMPONENTS) {
   isValidInputType = (type: string) => type !== '';
 }
 
-type EventListener = (event: Event) => void;
-type VirtualEventListener = (value: string, event: Event) => void;
-
-function NOOP() {}
-
-const UNINITIALIZED: unknown = Object.freeze({});
-
-function elementForEvent(event: Event): HTMLInputElement | HTMLTextAreaElement {
-  assert(
-    '[BUG] Event target must be the <input> or <textarea> element',
-    event.target instanceof HTMLInputElement || event.target instanceof HTMLTextAreaElement
-  );
-
-  return event.target;
-}
-
-function valueForEvent(event: Event): string {
-  return elementForEvent(event).value;
-}
-
-function devirtualize(callback: VirtualEventListener): EventListener {
-  return (event: Event) => callback(valueForEvent(event), event);
-}
-
-/**
- * This interface paves over the differences between these three cases:
- *
- * 1. `<Input />` or `<Input @value="some string" />`
- * 2. `<Input @value={{this.value}} />`
- * 3. `<Input @value={{to-upper-case this.value}} />`
- *
- * For the first set of cases (any const reference in general), the semantics
- * are that `@value` is treated as an initial value only, just like the `value`
- * attribute. Perhaps using the `value` attribute would have been more Correct™
- * here, but that would make a pretty confusing API, and the user's intent is
- * pretty clear, so we support it.
- *
- * The second case is the most common. `{{this.value}}` is an updatable
- * reference here so the value is fully owned and bound to the "upstream" value
- * and we don't store a copy of it in the component.
- *
- * The last case is the most tricky. There are a lot of different ways for this
- * to happen, but the end result is that we have a non-const and non-updatable
- * reference in our hands. The semantics here is a mix of the first two cases.
- * We take the computed value as the initial value, but hold a copy of it and
- * allow it to diverge from upstream. However, when the upstream recomputes to
- * a value different than what we originally had, we would reconcile with the
- * new upstream value and throw away the local copy.
- *
- * It's not clear that we intended to support the last case, or that it is used
- * intentionally in the real world, but it's a fallout of the two-way binding
- * system and `Ember.Component` semantics from before.
- *
- * This interface paves over the differences so the component doesn't have to
- * worry about it.
- *
- * All of the above applies to `@checked` as well.
- */
-function valueFrom(reference?: Reference<unknown>): Value {
-  if (reference === undefined) {
-    return new LocalValue(undefined);
-  } else if (isConstRef(reference)) {
-    return new LocalValue(valueForRef(reference));
-  } else if (isUpdatableRef(reference)) {
-    return new UpstreamValue(reference);
-  } else {
-    return new ForkedValue(reference);
-  }
-}
-
-interface Value {
-  get(): unknown;
-  set(value: unknown): void;
-}
-
-class LocalValue implements Value {
-  @tracked private value: unknown;
-
-  constructor(value: unknown) {
-    this.value = value;
-  }
-
-  get(): unknown {
-    return this.value;
-  }
-
-  set(value: unknown): void {
-    this.value = value;
-  }
-}
-
-class UpstreamValue implements Value {
-  constructor(private reference: Reference<unknown>) {}
-
-  get(): unknown {
-    return valueForRef(this.reference);
-  }
-
-  set(value: unknown): void {
-    updateRef(this.reference, value);
-  }
-}
-
-class ForkedValue implements Value {
-  private local?: Value;
-  private upstream: Value;
-
-  private lastUpstreamValue = UNINITIALIZED;
-
-  constructor(reference: Reference<unknown>) {
-    this.upstream = new UpstreamValue(reference);
-  }
-
-  get(): unknown {
-    let upstreamValue = this.upstream.get();
-
-    if (upstreamValue !== this.lastUpstreamValue) {
-      this.lastUpstreamValue = upstreamValue;
-      this.local = new LocalValue(upstreamValue);
-    }
-
-    assert('[BUG] this.local must have been initialized at this point', this.local);
-    return this.local.get();
-  }
-
-  set(value: unknown): void {
-    assert('[BUG] this.local must have been initialized at this point', this.local);
-    this.local.set(value);
-  }
-}
-
 /**
   See [Ember.Templates.components.Input](/ember/release/classes/Ember.Templates.components/methods/Input?anchor=Input).
 
@@ -313,39 +166,43 @@ class ForkedValue implements Value {
   @param {Hash} options
   @public
 */
-abstract class AbstractInput extends InternalComponent {
-  /**
-   * The default HTML id attribute. We don't really _need_ one, this is just
-   * added for compatibility as it's hard to tell if people rely on it being
-   * present, and it doens't really hurt.
-   *
-   * However, don't rely on this internally, like passing it to `getElementId`.
-   * This can be (and often is) overriden by passing an `id` attribute on the
-   * invocation, which shadows this default id via `...attributes`.
-   */
-  get id(): string {
-    return guidFor(this);
+class Input extends AbstractInput {
+  static toString(): string {
+    return 'Input';
   }
 
   /**
-   * The default HTML class attribute. Similar to the above, we don't _need_
-   * them, they are just added for compatibility as it's similarly hard to tell
-   * if people rely on it in their CSS etc, and it doens't really hurt.
+   * The HTML class attribute.
    */
   get class(): string {
     if (this.isCheckbox) {
       return 'ember-checkbox ember-view';
-    } else if (this.isTextarea) {
-      return 'ember-text-area ember-view';
     } else {
       return 'ember-text-field ember-view';
     }
   }
 
-  abstract modernized: boolean;
-  abstract type: string;
-  abstract isCheckbox: boolean;
-  abstract isTextarea: boolean;
+  /**
+   * The HTML type attribute.
+   */
+  get type(): string {
+    let type = this.arg('type');
+
+    if (type === null || type === undefined) {
+      return 'text';
+    }
+
+    assert(
+      'The `@type` argument to the <Input> component must be a string',
+      typeof type === 'string'
+    );
+
+    return isValidInputType(type) ? type : 'text';
+  }
+
+  get isCheckbox(): boolean {
+    return this.arg('type') === 'checkbox';
+  }
 
   private _checked = valueFrom(this.args.checked);
 
@@ -387,132 +244,30 @@ abstract class AbstractInput extends InternalComponent {
     this._checked.set(checked);
   }
 
-  private _value = valueFrom(this.args.value);
-
-  get value(): unknown {
-    return this._value.get();
-  }
-
-  set value(value: unknown) {
-    this._value.set(value);
-  }
-
-  @action checkedDidChange(event: Event): void {
-    let element = elementForEvent(event);
-    assert('[BUG] element must be an <input>', element instanceof HTMLInputElement);
-    this.checked = element.checked;
-  }
-
-  @action valueDidChange(event: Event): void {
-    this.value = valueForEvent(event);
-  }
-
   @action change(event: Event): void {
     if (this.isCheckbox) {
       this.checkedDidChange(event);
     } else {
-      this.valueDidChange(event);
+      super.change(event);
     }
   }
 
   @action input(event: Event): void {
     if (!this.isCheckbox) {
-      this.valueDidChange(event);
-    }
-  }
-
-  @action keyUp(event: KeyboardEvent): void {
-    switch (event.key) {
-      case 'Enter':
-        this.callbackFor('enter')(event);
-        this.callbackFor('insert-newline')(event);
-        break;
-
-      case 'Escape':
-        this.callbackFor('escape-press')(event);
-        break;
-    }
-  }
-
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  protected isSupportedArgument(_name: string): boolean {
-    return false;
-  }
-
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  protected onUnsupportedArgument(_name: string): void {}
-
-  protected callbackFor(type: string, shouldDevirtualize = true): EventListener {
-    let callback = this.arg(type);
-
-    if (callback) {
-      assert(
-        `The \`@${type}\` argument to the <${this.constructor}> component must be a function`,
-        typeof callback === 'function'
-      );
-
-      if (shouldDevirtualize) {
-        return devirtualize(callback as VirtualEventListener);
-      } else {
-        return callback as EventListener;
-      }
-    } else {
-      return NOOP;
+      super.input(event);
     }
   }
-}
 
-class Input extends AbstractInput {
-  static toString(): string {
-    return 'Input';
-  }
-
-  constructor(owner: Owner, args: Record<string, Reference | undefined>, caller: unknown) {
-    super(owner, args, caller);
-
-    runInDebug(() => {
-      untrack(() => {
-        for (let name in args) {
-          if (!this.isSupportedArgument(name)) {
-            this.onUnsupportedArgument(name);
-          }
-        }
-      });
-    });
+  @action checkedDidChange(event: Event): void {
+    let element = event.target;
+    assert('[BUG] element must be an <input>', element instanceof HTMLInputElement);
+    this.checked = element.checked;
   }
 
-  modernized =
-    Boolean(EMBER_MODERNIZED_BUILT_IN_COMPONENTS) &&
-    Component._wasReopened === false &&
-    TextField._wasReopened === false &&
-    Checkbox._wasReopened === false &&
-    TextSupport._wasReopened === false &&
-    TargetActionSupport._wasReopened === false;
-
-  /**
-   * The HTML type attribute.
-   */
-  get type(): string {
-    let type = this.arg('type');
-
-    if (type === null || type === undefined) {
-      return 'text';
-    }
-
-    assert(
-      'The `@type` argument to the <Input> component must be a string',
-      typeof type === 'string'
+  protected shouldModernize(): boolean {
+    return (
+      super.shouldModernize() && TextField._wasReopened === false && Checkbox._wasReopened === false
     );
-
-    return isValidInputType(type) ? type : 'text';
-  }
-
-  get isCheckbox(): boolean {
-    return this.arg('type') === 'checkbox';
-  }
-
-  get isTextarea(): false {
-    return false;
   }
 
   protected isSupportedArgument(name: string): boolean {
@@ -520,8 +275,8 @@ class Input extends AbstractInput {
       'type',
       'value',
       'checked',
-      'insert-newline',
       'enter',
+      'insert-newline',
       'escape-press',
     ];
 
@@ -529,532 +284,57 @@ class Input extends AbstractInput {
   }
 }
 
-class Textarea extends AbstractInput {
-  static toString(): string {
-    return 'Textarea';
-  }
-
-  constructor(owner: Owner, args: Record<string, Reference | undefined>, caller: unknown) {
-    super(owner, args, caller);
-
-    runInDebug(() => {
-      untrack(() => {
-        for (let name in args) {
-          if (!this.isSupportedArgument(name)) {
-            this.onUnsupportedArgument(name);
-          }
-        }
-      });
-    });
-  }
-
-  modernized =
-    Boolean(EMBER_MODERNIZED_BUILT_IN_COMPONENTS) &&
-    Component._wasReopened === false &&
-    TextArea._wasReopened === false &&
-    TextSupport._wasReopened === false &&
-    TargetActionSupport._wasReopened === false;
-
-  get type(): never {
-    throw assert(`[BUG] type getter should never be called on <Textarea />`);
-  }
-
-  get isCheckbox(): false {
-    return false;
-  }
-
-  get isTextarea(): true {
-    return true;
-  }
-
-  protected isSupportedArgument(name: string): boolean {
-    let supportedArguments = ['type', 'value', 'insert-newline', 'enter', 'escape-press'];
-    return supportedArguments.indexOf(name) !== -1 || super.isSupportedArgument(name);
-  }
-}
-
-// Deprecated features
 if (EMBER_MODERNIZED_BUILT_IN_COMPONENTS) {
-  // Unsupported arguments
-  {
-    AbstractInput.prototype['onUnsupportedArgument'] = function (
-      this: AbstractInput,
-      argument: string
-    ): void {
-      let name = this.constructor.toString();
-
-      deprecate(`Passing the \`@${argument}\` argument to <${name}> is deprecated.`, false, {
-        id: 'ember.built-in-components.legacy-arguments',
-        for: 'ember-source',
-        since: {},
-        until: '4.0.0',
-      });
-
-      this.modernized = false;
-    };
-  }
-
-  // Attribute bindings
-  {
-    let descriptorFor = (target: object, property: string): Option<PropertyDescriptor> => {
-      if (target) {
-        return (
-          Object.getOwnPropertyDescriptor(target, property) ||
-          descriptorFor(Object.getPrototypeOf(target), property)
-        );
-      } else {
-        return null;
-      }
-    };
-
-    let defineGetterForDeprecatedAttributeBinding = (
-      component: typeof AbstractInput,
-      attribute: string,
-      argument = attribute
-    ): void => {
-      let name = component.toString();
-      let curlyName = name.toLowerCase();
-      let { prototype } = component;
-
-      let superIsSupportedArgument = prototype['isSupportedArgument'];
-
-      prototype['isSupportedArgument'] = function isSupportedArgument(
-        this: AbstractInput,
-        name: string
-      ): boolean {
-        return (this.modernized && name === argument) || superIsSupportedArgument.call(this, name);
-      };
-
-      let superDescriptor = descriptorFor(prototype, attribute);
-      let superGetter: (this: AbstractInput) => unknown = () => undefined;
-
-      if (superDescriptor) {
-        assert(
-          `Expecting ${attribute} to be a getter on <${name}>`,
-          typeof superDescriptor.get === 'function'
-        );
-
-        superGetter = superDescriptor.get;
-      }
-
-      Object.defineProperty(prototype, attribute, {
-        configurable: true,
-        enumerable: true,
-        get(this: AbstractInput): unknown {
-          if (argument in this.args) {
-            deprecate(
-              `Passing the \`@${argument}\` argument to <${name}> is deprecated. ` +
-                `Instead, please pass the attribute directly, i.e. \`<${name} ${attribute}={{...}} />\` ` +
-                `instead of \`<${name} @${argument}={{...}} />\` or \`{{${curlyName} ${argument}=...}}\`.`,
-              false,
-              {
-                id: 'ember.built-in-components.legacy-attribute-arguments',
-                for: 'ember-source',
-                since: {},
-                until: '4.0.0',
-              }
-            );
-
-            // The `class` attribute is concatenated/merged instead of clobbered
-            if (attribute === 'class' && superDescriptor) {
-              return `${superGetter.call(this)} ${this.arg(argument)}`;
-            } else {
-              return this.arg(argument);
-            }
-          } else {
-            return superGetter.call(this);
-          }
-        },
-      });
-    };
-
-    let deprecatedInputAttributeBindings: Array<string | [string, string]> = [
-      // Component
-      'id',
-      ['id', 'elementId'],
-      'class',
-      ['class', 'classNames'],
-      ['role', 'ariaRole'],
-
-      // TextSupport
-      'autocapitalize',
-      'autocorrect',
-      'autofocus',
-      'disabled',
-      'form',
-      'maxlength',
-      'minlength',
-      'placeholder',
-      'readonly',
-      'required',
-      'selectionDirection',
-      'spellcheck',
-      'tabindex',
-      'title',
-
-      // TextField
-      'accept',
-      'autocomplete',
-      'autosave',
-      'dir',
-      'formaction',
-      'formenctype',
-      'formmethod',
-      'formnovalidate',
-      'formtarget',
-      'height',
-      'inputmode',
-      'lang',
-      'list',
-      'max',
-      'min',
-      'multiple',
-      'name',
-      'pattern',
-      'size',
-      'step',
-      'width',
-
-      // Checkbox
-      'indeterminate',
-    ];
-
-    deprecatedInputAttributeBindings.forEach((args) => {
-      if (Array.isArray(args)) {
-        defineGetterForDeprecatedAttributeBinding(Input, ...args);
-      } else {
-        defineGetterForDeprecatedAttributeBinding(Input, args);
-      }
-    });
-
-    let deprecatedTextareaAttributeBindings: Array<string | [string, string]> = [
-      // Component
-      'id',
-      ['id', 'elementId'],
-      'class',
-      ['class', 'classNames'],
-      ['role', 'ariaRole'],
-
-      // TextSupport
-      'autocapitalize',
-      'autocorrect',
-      'autofocus',
-      'disabled',
-      'form',
-      'maxlength',
-      'minlength',
-      'placeholder',
-      'readonly',
-      'required',
-      'selectionDirection',
-      'spellcheck',
-      'tabindex',
-      'title',
-
-      // TextField
-      'rows',
-      'cols',
-      'name',
-      'selectionEnd',
-      'selectionStart',
-      'autocomplete',
-      'wrap',
-      'lang',
-      'dir',
-    ];
-
-    deprecatedTextareaAttributeBindings.forEach((args) => {
-      if (Array.isArray(args)) {
-        defineGetterForDeprecatedAttributeBinding(Textarea, ...args);
-      } else {
-        defineGetterForDeprecatedAttributeBinding(Textarea, args);
-      }
-    });
-  }
-
-  // Deprecated event arguments
-  {
-    type EventsMap = Record<string, string>;
-
-    const EVENTS = new WeakMap<object, EventsMap>();
-
-    const getEventsMap = (owner: Owner): EventsMap => {
-      let events = EVENTS.get(owner);
-
-      if (events === undefined) {
-        let eventDispatcher = owner.lookup<Maybe<{ _finalEvents?: EventsMap }>>(
-          'event_dispatcher:main'
-        );
-
-        assert(
-          'missing event dispatcher',
-          eventDispatcher !== null && typeof eventDispatcher === 'object'
-        );
-
-        assert(
-          'missing _finalEvents on event dispatcher',
-          '_finalEvents' in eventDispatcher &&
-            eventDispatcher?._finalEvents !== null &&
-            typeof eventDispatcher?._finalEvents === 'object'
-        );
-
-        EVENTS.set(owner, (events = eventDispatcher._finalEvents));
-      }
-
-      return events;
-    };
-
-    let superIsSupportedArgument = AbstractInput.prototype['isSupportedArgument'];
-
-    AbstractInput.prototype['isSupportedArgument'] = function isSupportedArgument(
-      this: AbstractInput,
-      name: string
-    ): boolean {
-      let events = [
-        ...Object.values(getEventsMap(this.owner)),
-        'focus-in',
-        'focus-out',
-        'key-press',
-        'key-up',
-        'key-down',
-      ];
-
-      return (
-        (this.modernized && events.indexOf(name) !== -1) ||
-        superIsSupportedArgument.call(this, name)
-      );
-    };
-    class DeprecatedEventHandlersModifier extends InternalModifier {
-      static toString(): string {
-        return 'DeprecatedEventHandlersModifier';
-      }
-
-      private listeners = new Map<string, EventListener>();
-
-      install(): void {
-        let { element, eventsMap, component, listenerFor, listeners } = this;
-
-        let entries: [eventName: string, methodName: string, isVirtualEvent?: boolean][] = [
-          ...Object.entries(eventsMap),
-          ['focusin', 'focus-in', true],
-          ['focusout', 'focus-out', true],
-          ['keypress', 'key-press', true],
-          ['keyup', 'key-up', true],
-          ['keydown', 'key-down', true],
-        ];
-
-        for (let [eventName, methodName, isVirtualEvent] of entries) {
-          let listener = listenerFor.call(component, eventName, methodName, isVirtualEvent);
-
-          if (listener) {
-            listeners.set(eventName, listener);
-            element.addEventListener(eventName, listener);
-          }
-        }
-
-        Object.freeze(listeners);
-      }
-
-      remove(): void {
-        let { element, listeners } = this;
-
-        for (let [event, listener] of Object.entries(listeners)) {
-          element.removeEventListener(event, listener);
-        }
-
-        this.listeners = new Map();
-      }
-
-      private get eventsMap(): EventsMap {
-        return getEventsMap(this.owner);
-      }
-
-      private get component(): AbstractInput {
-        let component = this.positional(0);
-
-        assert(
-          'must pass the <Input /> or <Textarea /> component as first argument',
-          component instanceof AbstractInput
-        );
-
-        return component;
-      }
-
-      private listenerFor(
-        this: AbstractInput,
-        eventName: string,
-        methodName: string,
-        isVirtualEvent = false
-      ): Option<EventListener> {
-        assert(
-          'must be called with the <Input /> or <Textarea /> component as this',
-          this instanceof AbstractInput
-        );
-
-        let name = this.constructor.toString();
-        let curlyName = name.toLowerCase();
-
-        if (methodName in this.args) {
-          deprecate(
-            `Passing the \`@${methodName}\` argument to <${name}> is deprecated. ` +
-              `This would have overwritten the internal \`${methodName}\` method on ` +
-              `the <${name}> component and prevented it from functioning properly. ` +
-              `Instead, please use the {{on}} modifier, i.e. \`<${name} {{on "${eventName}" ...}} />\` ` +
-              `instead of \`<${name} @${methodName}={{...}} />\` or \`{{${curlyName} ${methodName}=...}}\`.`,
-            !(methodName in this),
-            {
-              id: 'ember.built-in-components.legacy-attribute-arguments',
-              for: 'ember-source',
-              since: {},
-              until: '4.0.0',
-            }
-          );
-
-          deprecate(
-            `Passing the \`@${methodName}\` argument to <${name}> is deprecated. ` +
-              `Instead, please use the {{on}} modifier, i.e. \`<${name} {{on "${eventName}" ...}} />\` ` +
-              `instead of \`<${name} @${methodName}={{...}} />\` or \`{{${curlyName} ${methodName}=...}}\`.`,
-            methodName in this,
-            {
-              id: 'ember.built-in-components.legacy-attribute-arguments',
-              for: 'ember-source',
-              since: {},
-              until: '4.0.0',
-            }
-          );
-
-          return this['callbackFor'].call(this, methodName, isVirtualEvent);
-        } else {
-          return null;
-        }
-      }
-    }
-
-    setInternalModifierManager(
-      new InternalModifierManager(DeprecatedEventHandlersModifier, 'deprecated-event-handlers'),
-      DeprecatedEventHandlersModifier
-    );
-
-    AbstractInput.prototype['DeprecatedEventHandlersModifier'] = DeprecatedEventHandlersModifier;
-  }
-
-  // String actions
-  if (SEND_ACTION) {
-    interface View {
-      send(action: string, ...args: unknown[]): void;
-    }
-
-    let isView = (target: {}): target is View => {
-      return typeof (target as Partial<View>).send === 'function';
-    };
-
-    let superCallbackFor = AbstractInput.prototype['callbackFor'];
-
-    Object.assign(AbstractInput.prototype, {
-      callbackFor(this: AbstractInput, type: string, shouldDevirtualize = true): EventListener {
-        const actionName = this.arg(type);
-
-        if (typeof actionName === 'string') {
-          deprecate(
-            `Passing actions to components as strings (like \`<${this.constructor} @${type}="${actionName}" />\`) is deprecated. ` +
-              `Please use closure actions instead (\`<${this.constructor} @${type}={{action "${actionName}"}} />\`).`,
-            false,
-            {
-              id: 'ember-component.send-action',
-              for: 'ember-source',
-              since: {},
-              until: '4.0.0',
-              url: 'https://emberjs.com/deprecations/v3.x#toc_ember-component-send-action',
-            }
-          );
-
-          const { caller } = this;
-
-          assert('[BUG] Missing caller', caller && typeof caller === 'object');
-
-          let callback: Function;
-
-          if (isView(caller)) {
-            callback = (...args: unknown[]) => caller.send(actionName, ...args);
-          } else {
-            assert(
-              `The action '${actionName}' did not exist on ${caller}`,
-              typeof caller[actionName] === 'function'
-            );
-
-            callback = caller[actionName];
-          }
-
-          let deprecated = (...args: unknown[]) => {
-            deprecate(
-              `Passing actions to components as strings (like \`<${this.constructor} @${type}="${actionName}" />\`) is deprecated. ` +
-                `Please use closure actions instead (\`<${this.constructor} @${type}={{action "${actionName}"}} />\`).`,
-              false,
-              {
-                id: 'ember-component.send-action',
-                for: 'ember-source',
-                since: {},
-                until: '4.0.0',
-                url: 'https://emberjs.com/deprecations/v3.x#toc_ember-component-send-action',
-              }
-            );
-
-            return callback(...args);
-          };
-
-          if (shouldDevirtualize) {
-            return devirtualize(deprecated as VirtualEventListener);
-          } else {
-            return deprecated as EventListener;
-          }
-        } else {
-          return superCallbackFor.call(this, type);
-        }
-      },
-    });
-  }
-
-  // jQuery Events
-  if (JQUERY_INTEGRATION) {
-    let superCallbackFor = AbstractInput.prototype['callbackFor'];
-
-    Object.assign(AbstractInput.prototype, {
-      callbackFor(this: AbstractInput, type: string, shouldDevirtualize = true): EventListener {
-        let callback = superCallbackFor.call(this, type, shouldDevirtualize);
-
-        if (jQuery && !jQueryDisabled) {
-          return (event: Event) => callback(new jQuery.Event(event));
-        } else {
-          return callback;
-        }
-      },
-    });
-  }
+  handleDeprecatedFeatures(Input, [
+    // Component
+    'id',
+    ['id', 'elementId'],
+    'class',
+    ['class', 'classNames'],
+    ['role', 'ariaRole'],
+
+    // TextSupport
+    'autocapitalize',
+    'autocorrect',
+    'autofocus',
+    'disabled',
+    'form',
+    'maxlength',
+    'minlength',
+    'placeholder',
+    'readonly',
+    'required',
+    'selectionDirection',
+    'spellcheck',
+    'tabindex',
+    'title',
+
+    // TextField
+    'accept',
+    'autocomplete',
+    'autosave',
+    'dir',
+    'formaction',
+    'formenctype',
+    'formmethod',
+    'formnovalidate',
+    'formtarget',
+    'height',
+    'inputmode',
+    'lang',
+    'list',
+    'max',
+    'min',
+    'multiple',
+    'name',
+    'pattern',
+    'size',
+    'step',
+    'width',
+
+    // Checkbox
+    'indeterminate',
+  ]);
 }
 
-// Use an opaque handle so implementation details are
-const InputComponent = {
-  // Factory interface
-  create(): never {
-    throw assert('Use constructor instead of create');
-  },
-
-  toString: Input.toString,
-};
-
-setInternalComponentManager(new InternalManager(Input, 'input'), InputComponent);
-setComponentTemplate(InputTemplate, InputComponent);
-
-export default InputComponent;
-
-export const TextareaComponent = {
-  // Factory interface
-  create(): never {
-    throw assert('Use constructor instead of create');
-  },
-
-  toString: Textarea.toString,
-};
-
-setInternalComponentManager(new InternalManager(Textarea, 'textarea'), TextareaComponent);
-setComponentTemplate(TextareaTemplate, TextareaComponent);
+export default opaquify(Input, InputTemplate);
diff --git a/packages/@ember/-internals/glimmer/lib/components/internal.ts b/packages/@ember/-internals/glimmer/lib/components/internal.ts
index 264e69d7884..1643892ab47 100644
--- a/packages/@ember/-internals/glimmer/lib/components/internal.ts
+++ b/packages/@ember/-internals/glimmer/lib/components/internal.ts
@@ -1,6 +1,34 @@
 import { Owner, setOwner } from '@ember/-internals/owner';
 import { guidFor } from '@ember/-internals/utils';
-import { Reference, valueForRef } from '@glimmer/reference';
+import { jQuery, jQueryDisabled } from '@ember/-internals/views';
+import { EMBER_MODERNIZED_BUILT_IN_COMPONENTS } from '@ember/canary-features';
+import { assert, deprecate } from '@ember/debug';
+import { JQUERY_INTEGRATION } from '@ember/deprecated-features';
+import {
+  CapturedNamedArguments,
+  Destroyable,
+  DynamicScope,
+  Environment,
+  InternalComponentCapabilities,
+  InternalComponentManager,
+  Maybe,
+  Option,
+  TemplateFactory,
+  VMArguments,
+  WithCreateInstance,
+} from '@glimmer/interfaces';
+import {
+  setComponentTemplate,
+  setInternalComponentManager,
+  setInternalModifierManager,
+} from '@glimmer/manager';
+import { createConstRef, isConstRef, Reference, valueForRef } from '@glimmer/reference';
+import { untrack } from '@glimmer/validator';
+import InternalModifier, { InternalModifierManager } from '../modifiers/internal';
+
+function NOOP(): void {}
+
+export type EventListener = (event: Event) => void;
 
 export default class InternalComponent {
   // Override this
@@ -16,12 +44,508 @@ export default class InternalComponent {
     setOwner(this, owner);
   }
 
-  protected arg(key: string): unknown {
-    let ref = this.args[key];
+  /**
+   * The default HTML id attribute. We don't really _need_ one, this is just
+   * added for compatibility as it's hard to tell if people rely on it being
+   * present, and it doens't really hurt.
+   *
+   * However, don't rely on this internally, like passing it to `getElementId`.
+   * This can be (and often is) overriden by passing an `id` attribute on the
+   * invocation, which shadows this default id via `...attributes`.
+   */
+  get id(): string {
+    return guidFor(this);
+  }
+
+  /**
+   * The default HTML class attribute. Similar to the above, we don't _need_
+   * them, they are just added for compatibility as it's similarly hard to tell
+   * if people rely on it in their CSS etc, and it doens't really hurt.
+   */
+  get class(): string {
+    return 'ember-view';
+  }
+
+  protected arg(name: string): unknown {
+    let ref = this.args[name];
     return ref ? valueForRef(ref) : undefined;
   }
 
+  protected listenerFor(name: string): EventListener {
+    let listener = this.arg(name);
+
+    if (listener) {
+      assert(
+        `The \`@${name}\` argument to the <${this.constructor}> component must be a function`,
+        typeof listener === 'function'
+      );
+
+      return listener as EventListener;
+    } else {
+      return NOOP;
+    }
+  }
+
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  protected isSupportedArgument(_name: string): boolean {
+    return false;
+  }
+
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  protected onUnsupportedArgument(_name: string): void {}
+
   toString(): string {
     return `<${this.constructor.toString()}:${guidFor(this)}>`;
   }
 }
+
+export interface InternalComponentConstructor<T extends InternalComponent = InternalComponent> {
+  new (owner: Owner, args: CapturedNamedArguments, caller: unknown): T;
+  prototype: T;
+  toString(): string;
+}
+
+declare const OPAQUE_INTERNAL_COMPONENT_CONSTRUCTOR: unique symbol;
+
+export interface OpaqueInternalComponentConstructor {
+  create(): never;
+  toString(): string;
+  [OPAQUE_INTERNAL_COMPONENT_CONSTRUCTOR]: true;
+}
+
+const OPAQUE_CONSTRUCTOR_MAP = new WeakMap<
+  OpaqueInternalComponentConstructor,
+  InternalComponentConstructor
+>();
+
+export function opaquify(
+  constructor: InternalComponentConstructor,
+  template: TemplateFactory
+): OpaqueInternalComponentConstructor {
+  let _opaque: Omit<
+    OpaqueInternalComponentConstructor,
+    typeof OPAQUE_INTERNAL_COMPONENT_CONSTRUCTOR
+  > = {
+    // Factory interface
+    create(): never {
+      throw assert('Use constructor instead of create');
+    },
+
+    toString() {
+      return constructor.toString();
+    },
+  };
+
+  let opaque = _opaque as OpaqueInternalComponentConstructor;
+
+  OPAQUE_CONSTRUCTOR_MAP.set(opaque, constructor);
+
+  setInternalComponentManager(INTERNAL_COMPONENT_MANAGER, opaque);
+  setComponentTemplate(template, opaque);
+
+  return opaque;
+}
+
+function deopaquify(opaque: OpaqueInternalComponentConstructor): InternalComponentConstructor {
+  let constructor = OPAQUE_CONSTRUCTOR_MAP.get(opaque);
+  assert(`[BUG] Invalid internal component constructor: ${opaque}`, constructor);
+  return constructor;
+}
+
+const CAPABILITIES: InternalComponentCapabilities = {
+  dynamicLayout: false,
+  dynamicTag: false,
+  prepareArgs: false,
+  createArgs: true,
+  attributeHook: false,
+  elementHook: false,
+  createCaller: true,
+  dynamicScope: false,
+  updateHook: false,
+  createInstance: true,
+  wrapped: false,
+  willDestroy: false,
+  hasSubOwner: false,
+};
+
+class InternalManager
+  implements
+    InternalComponentManager<InternalComponent, OpaqueInternalComponentConstructor>,
+    WithCreateInstance {
+  getCapabilities(): InternalComponentCapabilities {
+    return CAPABILITIES;
+  }
+
+  create(
+    owner: Owner,
+    definition: OpaqueInternalComponentConstructor,
+    args: VMArguments,
+    _env: Environment,
+    _dynamicScope: DynamicScope,
+    caller: Reference
+  ): InternalComponent {
+    assert('caller must be const', isConstRef(caller));
+
+    let ComponentClass = deopaquify(definition);
+
+    assert(
+      `The ${definition.toString()} component does not take any positional arguments`,
+      args.positional.length === 0
+    );
+
+    let instance = new ComponentClass(owner, args.named.capture(), valueForRef(caller));
+
+    untrack(
+      function (this: InternalComponent): void {
+        for (let name of args.named.names) {
+          if (!this.isSupportedArgument(name)) {
+            this.onUnsupportedArgument(name);
+          }
+        }
+      }.bind(instance)
+    );
+
+    return instance;
+  }
+
+  didCreate(): void {}
+  didUpdate(): void {}
+
+  didRenderLayout(): void {}
+  didUpdateLayout(): void {}
+
+  getDebugName(definition: OpaqueInternalComponentConstructor): string {
+    return definition.toString();
+  }
+
+  getSelf(instance: InternalComponent): Reference {
+    return createConstRef(instance, 'this');
+  }
+
+  getDestroyable(instance: InternalComponent): Destroyable {
+    return instance;
+  }
+}
+
+const INTERNAL_COMPONENT_MANAGER = new InternalManager();
+
+// Deprecated features
+
+export interface DeprecatingInternalComponent extends InternalComponent {
+  modernized: boolean;
+}
+
+export type DeprecatingInternalComponentConstructor = InternalComponentConstructor<
+  DeprecatingInternalComponent
+>;
+
+export function handleDeprecatedArguments(target: DeprecatingInternalComponentConstructor): void {
+  if (EMBER_MODERNIZED_BUILT_IN_COMPONENTS) {
+    let angle = target.toString();
+    let { prototype } = target;
+
+    let superOnUnsupportedArgument = prototype['onUnsupportedArgument'];
+
+    Object.defineProperty(prototype, 'onUnsupportedArgument', {
+      configurable: true,
+      enumerable: false,
+      value: function onUnsupportedArgument(
+        this: DeprecatingInternalComponent,
+        name: string
+      ): void {
+        deprecate(`Passing the \`@${name}\` argument to <${angle}> is deprecated.`, false, {
+          id: 'ember.built-in-components.legacy-arguments',
+          for: 'ember-source',
+          since: {},
+          until: '4.0.0',
+        });
+
+        this.modernized = false;
+
+        superOnUnsupportedArgument.call(this, name);
+      },
+    });
+  }
+}
+
+export function handleDeprecatedAttributeArguments(
+  target: DeprecatingInternalComponentConstructor,
+  bindings: Array<string | [attribute: string, argument: string]>
+): void {
+  if (EMBER_MODERNIZED_BUILT_IN_COMPONENTS) {
+    let angle = target.toString();
+    let curly = angle.toLowerCase();
+    let { prototype } = target;
+
+    let descriptorFor = (target: object, property: string): Option<PropertyDescriptor> => {
+      if (target) {
+        return (
+          Object.getOwnPropertyDescriptor(target, property) ||
+          descriptorFor(Object.getPrototypeOf(target), property)
+        );
+      } else {
+        return null;
+      }
+    };
+
+    bindings.forEach((binding) => {
+      let attribute: string;
+      let argument: string;
+
+      if (Array.isArray(binding)) {
+        [attribute, argument] = binding;
+      } else {
+        attribute = argument = binding;
+      }
+
+      let superIsSupportedArgument = prototype['isSupportedArgument'];
+
+      Object.defineProperty(prototype, 'isSupportedArgument', {
+        configurable: true,
+        enumerable: false,
+        value: function isSupportedArgument(
+          this: DeprecatingInternalComponent,
+          name: string
+        ): boolean {
+          return (
+            (this.modernized && name === argument) || superIsSupportedArgument.call(this, name)
+          );
+        },
+      });
+
+      let superDescriptor = descriptorFor(prototype, attribute);
+      let superGetter: (this: DeprecatingInternalComponent) => unknown = () => undefined;
+
+      if (superDescriptor) {
+        assert(
+          `[BUG] expecting ${attribute} to be a getter on <${angle}>`,
+          typeof superDescriptor.get === 'function'
+        );
+
+        superGetter = superDescriptor.get;
+      }
+
+      Object.defineProperty(prototype, attribute, {
+        configurable: true,
+        enumerable: true,
+        get(this: DeprecatingInternalComponent): unknown {
+          if (argument in this.args) {
+            deprecate(
+              `Passing the \`@${argument}\` argument to <${angle}> is deprecated. ` +
+                `Instead, please pass the attribute directly, i.e. \`<${angle} ${attribute}={{...}} />\` ` +
+                `instead of \`<${angle} @${argument}={{...}} />\` or \`{{${curly} ${argument}=...}}\`.`,
+              false,
+              {
+                id: 'ember.built-in-components.legacy-attribute-arguments',
+                for: 'ember-source',
+                since: {},
+                until: '4.0.0',
+              }
+            );
+
+            // The `class` attribute is concatenated/merged instead of clobbered
+            if (attribute === 'class' && superDescriptor) {
+              return `${superGetter.call(this)} ${this.arg(argument)}`;
+            } else {
+              return this.arg(argument);
+            }
+          } else {
+            return superGetter.call(this);
+          }
+        },
+      });
+    });
+  }
+}
+
+export let handleDeprecatedEventArguments: (
+  target: DeprecatingInternalComponentConstructor,
+  extraEvents: Array<[event: string, argument: string]>
+) => void = NOOP;
+
+if (EMBER_MODERNIZED_BUILT_IN_COMPONENTS) {
+  type EventsMap = Record<string, string>;
+
+  const EVENTS = new WeakMap<object, EventsMap>();
+
+  const getEventsMap = (owner: Owner): EventsMap => {
+    let events = EVENTS.get(owner);
+
+    if (events === undefined) {
+      let eventDispatcher = owner.lookup<Maybe<{ _finalEvents?: EventsMap }>>(
+        'event_dispatcher:main'
+      );
+
+      assert(
+        '[BUG] missing event dispatcher',
+        eventDispatcher !== null && typeof eventDispatcher === 'object'
+      );
+
+      assert(
+        '[BUG] missing _finalEvents on event dispatcher',
+        '_finalEvents' in eventDispatcher &&
+          eventDispatcher?._finalEvents !== null &&
+          typeof eventDispatcher?._finalEvents === 'object'
+      );
+
+      EVENTS.set(owner, (events = eventDispatcher._finalEvents));
+    }
+
+    return events;
+  };
+
+  handleDeprecatedEventArguments = (target, extraEvents) => {
+    let angle = target.toString();
+    let curly = angle.toLowerCase();
+    let { prototype } = target;
+
+    let superIsSupportedArgument = prototype['isSupportedArgument'];
+
+    Object.defineProperty(prototype, 'isSupportedArgument', {
+      configurable: true,
+      enumerable: false,
+      value: function isSupportedArgument(
+        this: DeprecatingInternalComponent,
+        name: string
+      ): boolean {
+        let events = [
+          ...Object.values(getEventsMap(this.owner)),
+          'focus-in',
+          'focus-out',
+          'key-press',
+          'key-up',
+          'key-down',
+        ];
+
+        return (
+          (this.modernized && events.indexOf(name) !== -1) ||
+          superIsSupportedArgument.call(this, name)
+        );
+      },
+    });
+
+    class DeprecatedEventHandlersModifier extends InternalModifier {
+      static toString(): string {
+        return 'DeprecatedEventHandlersModifier';
+      }
+
+      private listeners = new Map<string, EventListener>();
+
+      install(): void {
+        let { element, component, listenerFor, listeners } = this;
+
+        let entries: [event: string, argument: string][] = [
+          ...Object.entries(getEventsMap(this.owner)),
+          ...extraEvents,
+        ];
+
+        for (let [event, argument] of entries) {
+          let listener = listenerFor.call(component, event, argument);
+
+          if (listener) {
+            listeners.set(event, listener);
+            element.addEventListener(event, listener);
+          }
+        }
+
+        Object.freeze(listeners);
+      }
+
+      remove(): void {
+        let { element, listeners } = this;
+
+        for (let [event, listener] of Object.entries(listeners)) {
+          element.removeEventListener(event, listener);
+        }
+
+        this.listeners = new Map();
+      }
+
+      private get component(): DeprecatingInternalComponent {
+        let component = this.positional(0);
+
+        assert(
+          `[BUG] must pass <${angle}> component as first argument`,
+          component instanceof target
+        );
+
+        return component;
+      }
+
+      private listenerFor(
+        this: DeprecatingInternalComponent,
+        event: string,
+        argument: string
+      ): Option<EventListener> {
+        assert(`[BUG] must be called with <${angle}> component as this`, this instanceof target);
+
+        if (argument in this.args) {
+          deprecate(
+            `Passing the \`@${argument}\` argument to <${angle}> is deprecated. ` +
+              `This would have overwritten the internal \`${argument}\` method on ` +
+              `the <${angle}> component and prevented it from functioning properly. ` +
+              `Instead, please use the {{on}} modifier, i.e. \`<${angle} {{on "${event}" ...}} />\` ` +
+              `instead of \`<${angle} @${argument}={{...}} />\` or \`{{${curly} ${argument}=...}}\`.`,
+            !(argument in this),
+            {
+              id: 'ember.built-in-components.legacy-attribute-arguments',
+              for: 'ember-source',
+              since: {},
+              until: '4.0.0',
+            }
+          );
+
+          deprecate(
+            `Passing the \`@${argument}\` argument to <${angle}> is deprecated. ` +
+              `Instead, please use the {{on}} modifier, i.e. \`<${angle} {{on "${event}" ...}} />\` ` +
+              `instead of \`<${angle} @${argument}={{...}} />\` or \`{{${curly} ${argument}=...}}\`.`,
+            argument in this,
+            {
+              id: 'ember.built-in-components.legacy-attribute-arguments',
+              for: 'ember-source',
+              since: {},
+              until: '4.0.0',
+            }
+          );
+
+          return this['listenerFor'].call(this, argument);
+        } else {
+          return null;
+        }
+      }
+    }
+
+    setInternalModifierManager(
+      new InternalModifierManager(DeprecatedEventHandlersModifier, 'deprecated-event-handlers'),
+      DeprecatedEventHandlersModifier
+    );
+
+    Object.defineProperty(prototype, 'handleDeprecatedEvents', {
+      configurable: true,
+      enumerable: true,
+      value: DeprecatedEventHandlersModifier,
+    });
+  };
+}
+
+export function jQueryEventShim(target: DeprecatingInternalComponentConstructor): void {
+  if (JQUERY_INTEGRATION) {
+    let { prototype } = target;
+
+    let superListenerFor = prototype['listenerFor'];
+
+    Object.defineProperty(prototype, 'listenerFor', {
+      configurable: true,
+      enumerable: false,
+      value: function listenerFor(this: InternalComponent, name: string): EventListener {
+        let listener = superListenerFor.call(this, name);
+
+        if (jQuery && !jQueryDisabled) {
+          return (event: Event) => listener(new jQuery.Event(event));
+        } else {
+          return listener;
+        }
+      },
+    });
+  }
+}
diff --git a/packages/@ember/-internals/glimmer/lib/components/textarea.ts b/packages/@ember/-internals/glimmer/lib/components/textarea.ts
index 750280c9f59..3c38ee9332e 100644
--- a/packages/@ember/-internals/glimmer/lib/components/textarea.ts
+++ b/packages/@ember/-internals/glimmer/lib/components/textarea.ts
@@ -1,12 +1,12 @@
 /**
 @module @ember/component
 */
-import { CoreObject } from '@ember/-internals/runtime';
-import { TextSupport } from '@ember/-internals/views';
 import { EMBER_MODERNIZED_BUILT_IN_COMPONENTS } from '@ember/canary-features';
-import { deprecate } from '@ember/debug';
-import Component from '../component';
-import layout from '../templates/empty';
+import { action } from '@ember/object';
+import TextareaTemplate from '../templates/textarea';
+import LegacyTextArea from './-textarea';
+import AbstractInput, { handleDeprecatedFeatures } from './abstract-input';
+import { opaquify } from './internal';
 
 /**
   The `Textarea` component inserts a new instance of `<textarea>` tag into the template.
@@ -130,23 +130,62 @@ import layout from '../templates/empty';
   @see {Ember.Templates.components.textarea}
   @public
 */
+class Textarea extends AbstractInput {
+  static toString(): string {
+    return 'Textarea';
+  }
 
-/**
-  The internal representation used for `Textarea` invocations.
+  get class(): string {
+    return 'ember-text-area ember-view';
+  }
 
-  @class TextArea
-  @extends Component
-  @see {Ember.Templates.components.Textarea}
-  @uses Ember.TextSupport
-  @public
-*/
-const TextArea = Component.extend(TextSupport, {
-  classNames: ['ember-text-area'],
+  // See abstract-input.ts for why these are needed
 
-  layout,
+  @action change(event: Event): void {
+    super.change(event);
+  }
+
+  @action input(event: Event): void {
+    super.input(event);
+  }
 
-  tagName: 'textarea',
-  attributeBindings: [
+  protected shouldModernize(): boolean {
+    return super.shouldModernize() && LegacyTextArea._wasReopened === false;
+  }
+
+  protected isSupportedArgument(name: string): boolean {
+    let supportedArguments = ['type', 'value', 'enter', 'insert-newline', 'escape-press'];
+    return supportedArguments.indexOf(name) !== -1 || super.isSupportedArgument(name);
+  }
+}
+
+// Deprecated features
+if (EMBER_MODERNIZED_BUILT_IN_COMPONENTS) {
+  handleDeprecatedFeatures(Textarea, [
+    // Component
+    'id',
+    ['id', 'elementId'],
+    'class',
+    ['class', 'classNames'],
+    ['role', 'ariaRole'],
+
+    // TextSupport
+    'autocapitalize',
+    'autocorrect',
+    'autofocus',
+    'disabled',
+    'form',
+    'maxlength',
+    'minlength',
+    'placeholder',
+    'readonly',
+    'required',
+    'selectionDirection',
+    'spellcheck',
+    'tabindex',
+    'title',
+
+    // TextField
     'rows',
     'cols',
     'name',
@@ -156,71 +195,7 @@ const TextArea = Component.extend(TextSupport, {
     'wrap',
     'lang',
     'dir',
-    'value',
-  ],
-  rows: null,
-  cols: null,
-});
-
-TextArea.toString = () => '@ember/component/text-area';
-
-if (EMBER_MODERNIZED_BUILT_IN_COMPONENTS) {
-  Object.defineProperty(TextArea, '_wasReopened', {
-    configurable: true,
-    enumerable: false,
-    writable: true,
-    value: false,
-  });
-
-  Object.defineProperty(TextArea, 'reopen', {
-    configurable: true,
-    enumerable: false,
-    writable: true,
-    value: function reopen(this: typeof TextArea, ...args: unknown[]): unknown {
-      if (this === TextArea) {
-        deprecate(
-          'Reopening Ember.TextArea is deprecated. Consider implementing your own ' +
-            'wrapper component or create a custom subclass.',
-          false,
-          {
-            id: 'ember.built-in-components.reopen',
-            for: 'ember-source',
-            since: {},
-            until: '4.0.0',
-          }
-        );
-
-        TextArea._wasReopened = true;
-      }
-
-      return CoreObject.reopen.call(this, ...args);
-    },
-  });
-
-  Object.defineProperty(TextArea, 'reopenClass', {
-    configurable: true,
-    enumerable: false,
-    writable: true,
-    value: function reopenClass(this: typeof TextArea, ...args: unknown[]): unknown {
-      if (this === TextArea) {
-        deprecate(
-          'Reopening Ember.TextArea is deprecated. Consider implementing your own ' +
-            'wrapper component or create a custom subclass.',
-          false,
-          {
-            id: 'ember.built-in-components.reopen',
-            for: 'ember-source',
-            since: {},
-            until: '4.0.0',
-          }
-        );
-
-        TextArea._wasReopened = true;
-      }
-
-      return CoreObject.reopenClass.call(this, ...args);
-    },
-  });
+  ]);
 }
 
-export default TextArea;
+export default opaquify(Textarea, TextareaTemplate);
diff --git a/packages/@ember/-internals/glimmer/lib/setup-registry.ts b/packages/@ember/-internals/glimmer/lib/setup-registry.ts
index f4bed62a3b0..696585a6273 100644
--- a/packages/@ember/-internals/glimmer/lib/setup-registry.ts
+++ b/packages/@ember/-internals/glimmer/lib/setup-registry.ts
@@ -2,11 +2,12 @@ import { privatize as P, Registry } from '@ember/-internals/container';
 import { ENV } from '@ember/-internals/environment';
 import { EMBER_MODERNIZED_BUILT_IN_COMPONENTS } from '@ember/canary-features';
 import Component from './component';
+import LegacyTextArea from './components/-textarea';
 import Checkbox from './components/checkbox';
-import InputComponent, { TextareaComponent } from './components/input';
-import LinkToComponent from './components/link-to';
+import Input from './components/input';
+import LinkTo from './components/link-to';
 import TextField from './components/text-field';
-import TextArea from './components/textarea';
+import Textarea from './components/textarea';
 import { clientBuilder, rehydrationBuilder, serializeBuilder } from './dom';
 import loc from './helpers/loc';
 import { Renderer } from './renderer';
@@ -57,14 +58,14 @@ export function setupEngineRegistry(registry: Registry): void {
 
   registry.register('component:-text-field', TextField);
   registry.register('component:-checkbox', Checkbox);
-  registry.register('component:input', InputComponent);
-  registry.register('component:link-to', LinkToComponent);
+  registry.register('component:input', Input);
+  registry.register('component:link-to', LinkTo);
 
   if (EMBER_MODERNIZED_BUILT_IN_COMPONENTS) {
-    registry.register('component:-textarea', TextArea);
-    registry.register('component:textarea', TextareaComponent);
+    registry.register('component:-textarea', LegacyTextArea);
+    registry.register('component:textarea', Textarea);
   } else {
-    registry.register('component:textarea', TextArea);
+    registry.register('component:textarea', LegacyTextArea);
   }
 
   if (!ENV._TEMPLATE_ONLY_GLIMMER_COMPONENTS) {
diff --git a/packages/@ember/-internals/glimmer/lib/templates/input.hbs b/packages/@ember/-internals/glimmer/lib/templates/input.hbs
index a9f16a6e2a8..eada41c6e5e 100644
--- a/packages/@ember/-internals/glimmer/lib/templates/input.hbs
+++ b/packages/@ember/-internals/glimmer/lib/templates/input.hbs
@@ -55,7 +55,7 @@
     {{on "paste" this.valueDidChange}}
     {{on "cut" this.valueDidChange}}
 
-    {{this.DeprecatedEventHandlersModifier this}}
+    {{this.handleDeprecatedEvents this}}
   />
 {{~else~}}
   {{~#let (component '-checkbox') (component '-text-field') as |Checkbox TextField|~}}
diff --git a/packages/@ember/-internals/glimmer/lib/templates/textarea.hbs b/packages/@ember/-internals/glimmer/lib/templates/textarea.hbs
index aa101f4e21e..103a4dcd9b6 100644
--- a/packages/@ember/-internals/glimmer/lib/templates/textarea.hbs
+++ b/packages/@ember/-internals/glimmer/lib/templates/textarea.hbs
@@ -40,7 +40,7 @@
     {{on "paste" this.valueDidChange}}
     {{on "cut" this.valueDidChange}}
 
-    {{this.DeprecatedEventHandlersModifier this}}
+    {{this.handleDeprecatedEvents this}}
   />
 {{~else~}}
   {{~#let (component '-textarea')  as |Textarea|~}}