[FEATURE modernized-built-in-components] First-pass implementation

First-pass implementation for converting the `<Input>` component into an internal (not classic) component compatibly. This passes all the existing tests. Some follow-up work before this is ready for prime time: - Implement any remaining classic component features not covered by the existing tests. - Detect any unimplementable classic component features and deopt into the previous implementation. - Write the second deprecation RFC and get the proposal merged.
emberjs · Oct 27, 2020 · 63f6024 · 63f6024
1 parent 05e278a
commit 63f6024
Show file tree

Hide file tree

Showing 10 changed files with 917 additions and 93 deletions.
diff --git a/packages/@ember/-internals/glimmer/lib/components/input.ts b/packages/@ember/-internals/glimmer/lib/components/input.ts
diff --git a/packages/@ember/-internals/glimmer/lib/templates/input.hbs b/packages/@ember/-internals/glimmer/lib/templates/input.hbs
@@ -1,7 +1,91 @@
-{{~#let (component '-checkbox') (component '-text-field') as |Checkbox TextField|~}}
-  {{~#if this.isCheckbox~}}
-    <Checkbox @target={{this.caller}} @__ARGS__={{this.args}} ...attributes />
-  {{~else~}}
-    <TextField @target={{this.caller}} @__ARGS__={{this.args}} ...attributes />
-  {{~/if~}}
-{{~/let~}}
+{{~#if this.moderinzed ~}}
+  <input
+    {{!-- for compatibility --}}
+    id={{this.id}}
+    class={{this.class}}
+
+    {{!-- deprecated attribute bindings --}}
+    autocapitalize={{this._autocapitalize}}
+    autocorrect={{this._autocorrect}}
+    autofocus={{this._autofocus}}
+    disabled={{this._disabled}}
+    form={{this._form}}
+    maxlength={{this._maxlength}}
+    minlength={{this._minlength}}
+    placeholder={{this._placeholder}}
+    readonly={{this._readonly}}
+    required={{this._required}}
+    selectionDirection={{this._selectionDirection}}
+    spellcheck={{this._spellcheck}}
+    tabindex={{this._tabindex}}
+    title={{this._title}}
+    accept={{this._accept}}
+    autocomplete={{this._autocomplete}}
+    autosave={{this._autosave}}
+    dir={{this._dir}}
+    formaction={{this._formaction}}
+    formenctype={{this._formenctype}}
+    formmethod={{this._formmethod}}
+    formnovalidate={{this._formnovalidate}}
+    formtarget={{this._formtarget}}
+    height={{this._height}}
+    inputmode={{this._inputmode}}
+    lang={{this._lang}}
+    list={{this._list}}
+    max={{this._max}}
+    min={{this._min}}
+    multiple={{this._multiple}}
+    name={{this._name}}
+    pattern={{this._pattern}}
+    size={{this._size}}
+    step={{this._step}}
+    width={{this._width}}
+    indeterminate={{this._indeterminate}}
+
+    ...attributes
+
+    type={{this.type}}
+    checked={{this.checked}}
+    value={{this.value}}
+
+    {{on "change" this.change}}
+    {{on "input" this.input}}
+    {{on "keyup" this.keyUp}}
+    {{on "paste" this.valueDidChange}}
+    {{on "cut" this.valueDidChange}}
+
+    {{!-- deprecated native event callbacks --}}
+    {{on "touchstart" this._touchStart}}
+    {{on "touchmove" this._touchMove}}
+    {{on "touchend" this._touchEnd}}
+    {{on "touchcancel" this._touchCancel}}
+    {{on "keydown" this._keyDown}}
+    {{on "keypress" this._keyPress}}
+    {{on "mousedown" this._mouseDown}}
+    {{on "mouseup" this._mouseUp}}
+    {{on "contextmenu" this._contextMenu}}
+    {{on "click" this._click}}
+    {{on "dblclick" this._doubleClick}}
+    {{on "focusin" this._focusIn}}
+    {{on "focusout" this._focusOut}}
+    {{on "submit" this._submit}}
+    {{on "dragstart" this._dragStart}}
+    {{on "drag" this._drag}}
+    {{on "dragenter" this._dragEnter}}
+    {{on "dragleave" this._dragLeave}}
+    {{on "dragover" this._dragOver}}
+    {{on "drop" this._drop}}
+    {{on "dragend" this._dragEnd}}
+    {{on "mouseenter" this._mouseEnter}}
+    {{on "mouseleave" this._mouseLeave}}
+    {{on "mousemove" this._mouseMove}}
+  />
+{{~else~}}
+  {{~#let (component '-checkbox') (component '-text-field') as |Checkbox TextField|~}}
+    {{~#if this.isCheckbox~}}
+      <Checkbox @target={{this.caller}} @__ARGS__={{this.args}} ...attributes />
+    {{~else~}}
+      <TextField @target={{this.caller}} @__ARGS__={{this.args}} ...attributes />
+    {{~/if~}}
+  {{~/let~}}
+{{/if}}
diff --git a/packages/@ember/-internals/glimmer/tests/integration/application/debug-render-tree-test.ts b/packages/@ember/-internals/glimmer/tests/integration/application/debug-render-tree-test.ts
@@ -15,6 +15,7 @@ import {
 } from '@ember/-internals/glimmer';
 import { EngineInstanceOptions, Owner } from '@ember/-internals/owner';
 import { Route } from '@ember/-internals/routing';
+import { EMBER_MODERNIZED_BUILT_IN_COMPONENTS } from '@ember/canary-features';
 import templateOnly from '@ember/component/template-only';
 import Controller from '@ember/controller';
 import { captureRenderTree } from '@ember/debug';
@@ -1276,17 +1277,19 @@ if (ENV._DEBUG_RENDER_TREE) {
             instance: (instance: object) => inputToString.test(instance.toString()),
             template: 'packages/@ember/-internals/glimmer/lib/templates/input.hbs',
             bounds: this.nodeBounds(this.element.firstChild),
-            children: [
-              {
-                type: 'component',
-                name: '-text-field',
-                args: { positional: [], named: { target, type: 'text', value: 'first' } },
-                instance: (instance: object) => instance['value'] === 'first',
-                template: 'packages/@ember/-internals/glimmer/lib/templates/empty.hbs',
-                bounds: this.nodeBounds(this.element.firstChild),
-                children: [],
-              },
-            ],
+            children: EMBER_MODERNIZED_BUILT_IN_COMPONENTS
+              ? []
+              : [
+                  {
+                    type: 'component',
+                    name: '-text-field',
+                    args: { positional: [], named: { target, type: 'text', value: 'first' } },
+                    instance: (instance: object) => instance['value'] === 'first',
+                    template: 'packages/@ember/-internals/glimmer/lib/templates/empty.hbs',
+                    bounds: this.nodeBounds(this.element.firstChild),
+                    children: [],
+                  },
+                ],
           },
         ]);
 
@@ -1300,17 +1303,19 @@ if (ENV._DEBUG_RENDER_TREE) {
             instance: (instance: object) => inputToString.test(instance.toString()),
             template: 'packages/@ember/-internals/glimmer/lib/templates/input.hbs',
             bounds: this.nodeBounds(this.element.firstChild),
-            children: [
-              {
-                type: 'component',
-                name: '-text-field',
-                args: { positional: [], named: { target, type: 'text', value: 'first' } },
-                instance: (instance: object) => instance['value'] === 'first',
-                template: 'packages/@ember/-internals/glimmer/lib/templates/empty.hbs',
-                bounds: this.nodeBounds(this.element.firstChild),
-                children: [],
-              },
-            ],
+            children: EMBER_MODERNIZED_BUILT_IN_COMPONENTS
+              ? []
+              : [
+                  {
+                    type: 'component',
+                    name: '-text-field',
+                    args: { positional: [], named: { target, type: 'text', value: 'first' } },
+                    instance: (instance: object) => instance['value'] === 'first',
+                    template: 'packages/@ember/-internals/glimmer/lib/templates/empty.hbs',
+                    bounds: this.nodeBounds(this.element.firstChild),
+                    children: [],
+                  },
+                ],
           },
           {
             type: 'component',
@@ -1319,17 +1324,19 @@ if (ENV._DEBUG_RENDER_TREE) {
             instance: (instance: object) => inputToString.test(instance.toString()),
             template: 'packages/@ember/-internals/glimmer/lib/templates/input.hbs',
             bounds: this.nodeBounds(this.element.lastChild),
-            children: [
-              {
-                type: 'component',
-                name: '-checkbox',
-                args: { positional: [], named: { target, type: 'checkbox', checked: false } },
-                instance: (instance: object) => instance['checked'] === false,
-                template: 'packages/@ember/-internals/glimmer/lib/templates/empty.hbs',
-                bounds: this.nodeBounds(this.element.lastChild),
-                children: [],
-              },
-            ],
+            children: EMBER_MODERNIZED_BUILT_IN_COMPONENTS
+              ? []
+              : [
+                  {
+                    type: 'component',
+                    name: '-checkbox',
+                    args: { positional: [], named: { target, type: 'checkbox', checked: false } },
+                    instance: (instance: object) => instance['checked'] === false,
+                    template: 'packages/@ember/-internals/glimmer/lib/templates/empty.hbs',
+                    bounds: this.nodeBounds(this.element.lastChild),
+                    children: [],
+                  },
+                ],
           },
         ]);
 
@@ -1343,17 +1350,19 @@ if (ENV._DEBUG_RENDER_TREE) {
             instance: (instance: object) => inputToString.test(instance.toString()),
             template: 'packages/@ember/-internals/glimmer/lib/templates/input.hbs',
             bounds: this.nodeBounds(this.element.firstChild),
-            children: [
-              {
-                type: 'component',
-                name: '-text-field',
-                args: { positional: [], named: { target, type: 'text', value: 'first' } },
-                instance: (instance: object) => instance['value'] === 'first',
-                template: 'packages/@ember/-internals/glimmer/lib/templates/empty.hbs',
-                bounds: this.nodeBounds(this.element.firstChild),
-                children: [],
-              },
-            ],
+            children: EMBER_MODERNIZED_BUILT_IN_COMPONENTS
+              ? []
+              : [
+                  {
+                    type: 'component',
+                    name: '-text-field',
+                    args: { positional: [], named: { target, type: 'text', value: 'first' } },
+                    instance: (instance: object) => instance['value'] === 'first',
+                    template: 'packages/@ember/-internals/glimmer/lib/templates/empty.hbs',
+                    bounds: this.nodeBounds(this.element.firstChild),
+                    children: [],
+                  },
+                ],
           },
         ]);
       }

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
@@ -153,10 +153,19 @@ class InputRenderingTest extends RenderingTestCase {
     this.assert.equal($standard.type, $custom.type);
 
     Object.keys(events).forEach((event) => {
-      this.triggerEvent(event, null, '#standard');
-      this.triggerEvent(event, null, '#custom');
+      // triggerEvent does not seem to work with focusin and focusout events
+      if (event !== 'focusin' && event !== 'focusout') {
+        this.triggerEvent(event, null, '#standard');
+        this.triggerEvent(event, null, '#custom');
+      }
     });
 
+    // test focusin and focusout by actually moving focus
+    $standard[0].focus();
+    $standard[0].blur();
+    $custom[0].focus();
+    $custom[0].blur();
+
     this.assert.ok(
       triggered.standard.length > 10,
       'sanity check that most events are triggered (standard)'
@@ -958,14 +967,35 @@ moduleFor(
       this.assertAttr('tabindex', '10');
     }
 
-    ['@test `value` property assertion']() {
+    ['@feature(!EMBER_MODERNIZED_BUILT_IN_COMPONENTS) `value` property assertion']() {
       expectAssertion(() => {
         this.render(`<Input @type="checkbox" @value={{value}} />`, {
           value: 'value',
         });
       }, /checkbox.+@value.+not supported.+use.+@checked.+instead/);
     }
 
+    ['@feature(EMBER_MODERNIZED_BUILT_IN_COMPONENTS) `value` property warning']() {
+      let message =
+        '`<Input @type="checkbox" />` reflects its checked state via the `@checked` argument. ' +
+        'You wrote `<Input @type="checkbox" @value={{...}} />` which is likely not what you intended. ' +
+        'Did you mean `<Input @type="checkbox" @checked={{...}} />`?';
+
+      expectWarning(() => {
+        this.render(`<Input @type="checkbox" @value={{value}} />`, {
+          value: true,
+        });
+      }, message);
+
+      this.assert.strictEqual(this.context.value, true);
+      this.assertCheckboxIsNotChecked();
+
+      expectWarning(() => this.$input()[0].click(), message);
+
+      this.assert.strictEqual(this.context.value, true);
+      this.assertCheckboxIsChecked();
+    }
+
     ['@test with a bound type']() {
       this.render(`<Input @type={{inputType}} @checked={{isChecked}} />`, {
         inputType: 'checkbox',

diff --git a/packages/@ember/-internals/glimmer/tests/integration/components/input-curly-test.js b/packages/@ember/-internals/glimmer/tests/integration/components/input-curly-test.js
@@ -761,14 +761,35 @@ moduleFor(
       this.assertAttr('tabindex', '10');
     }
 
-    ['@test `value` property assertion']() {
+    ['@feature(!EMBER_MODERNIZED_BUILT_IN_COMPONENTS) `value` property assertion']() {
       expectAssertion(() => {
         this.render(`{{input type="checkbox" value=value}}`, {
           value: 'value',
         });
       }, /checkbox.+value.+not supported.+use.+checked.+instead/);
     }
 
+    ['@feature(EMBER_MODERNIZED_BUILT_IN_COMPONENTS) `value` property warning']() {
+      let message =
+        '`<Input @type="checkbox" />` reflects its checked state via the `@checked` argument. ' +
+        'You wrote `<Input @type="checkbox" @value={{...}} />` which is likely not what you intended. ' +
+        'Did you mean `<Input @type="checkbox" @checked={{...}} />`?';
+
+      expectWarning(() => {
+        this.render(`{{input type="checkbox" value=value}}`, {
+          value: true,
+        });
+      }, message);
+
+      this.assert.strictEqual(this.context.value, true);
+      this.assertCheckboxIsNotChecked();
+
+      expectWarning(() => this.$input()[0].click(), message);
+
+      this.assert.strictEqual(this.context.value, true);
+      this.assertCheckboxIsChecked();
+    }
+
     ['@test with a bound type']() {
       this.render(`{{input type=inputType checked=isChecked}}`, {
         inputType: 'checkbox',

diff --git a/packages/@ember/-internals/metal/lib/tracked.ts b/packages/@ember/-internals/metal/lib/tracked.ts
@@ -76,6 +76,7 @@ import { SELF_TAG } from './tags';
   @param dependencies Optional dependents to be tracked.
 */
 export function tracked(propertyDesc: { value: any; initializer: () => any }): Decorator;
+export function tracked(target: object, key: string): void;
 export function tracked(
   target: object,
   key: string,

diff --git a/packages/@ember/-internals/views/index.d.ts b/packages/@ember/-internals/views/index.d.ts
@@ -3,6 +3,8 @@ import { Factory, Owner } from '@ember/-internals/owner';
 import { TemplateFactory } from '@ember/-internals/glimmer';
 import { SimpleElement } from '@simple-dom/interface';
 
+export { jQuery, jQueryDisabled } from './lib/system/jquery';
+
 export interface StaticTemplateMeta {
   moduleName: string;
   managerId?: string;

diff --git a/packages/@ember/debug/index.ts b/packages/@ember/debug/index.ts
@@ -21,9 +21,7 @@ export type DebugFunctionType =
   | 'runInDebug'
   | 'deprecateFunc';
 
-export type AssertFunc =
-  | ((desc: string) => never)
-  | ((desc: string, condition?: unknown) => asserts condition);
+export type AssertFunc = (desc: string, condition?: unknown) => asserts condition;
 export type DebugFunc = (message: string) => void;
 export type DebugSealFunc = (obj: object) => void;
 export type DebugFreezeFunc = (obj: object) => void;

diff --git a/packages/@ember/object/index.d.ts b/packages/@ember/object/index.d.ts
@@ -0,0 +1 @@
+export let action: MethodDecorator;