Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Merged
merged 2 commits into from
Jan 28, 2021
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
e6cf176
[FEATURE modernized-built-in-components] First-pass implementation
chancancode Oct 20, 2020
27a413f
Skip strict mode input test for now
chancancode Jan 21, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
661 changes: 660 additions & 1 deletion packages/@ember/-internals/glimmer/lib/components/input.ts
View file
Open in desktop

Large diffs are not rendered by default.

98 changes: 91 additions & 7 deletions packages/@ember/-internals/glimmer/lib/templates/input.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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.modernized ~}}
<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}}
Comment on lines +57 to +81
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We should either read the event dispatcher for its values here, or just defer to it

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I actually wrote the code to address this and submitted #19269. However, as explained in that PR, I don't want to introduce a new global name for a one-off thing we are making here. Given that we expect the contextual modifier RFC to land pretty soon and this is still behind a flag, I would prefer to punt on addressing this for now.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

#19382

/>
{{~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}}
97 changes: 53 additions & 44 deletions packages/@ember/-internals/glimmer/tests/integration/application/debug-render-tree-test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ import { ENV } from '@ember/-internals/environment';
import { Component, setComponentManager } 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 Controller from '@ember/controller';
import { captureRenderTree } from '@ember/debug';
import Engine from '@ember/engine';
Expand Down Expand Up @@ -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: [],
},
],
},
]);

Expand All @@ -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',
Expand All @@ -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: [],
},
],
},
]);

Expand All @@ -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: [],
},
],
},
]);
}
Expand Down
36 changes: 33 additions & 3 deletions packages/@ember/-internals/glimmer/tests/integration/components/input-angle-test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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)'
Expand Down Expand Up @@ -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',
Expand Down
23 changes: 22 additions & 1 deletion packages/@ember/-internals/glimmer/tests/integration/components/input-curly-test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand Down
2 changes: 1 addition & 1 deletion packages/@ember/-internals/glimmer/tests/integration/components/strict-mode-test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -162,7 +162,7 @@ if (EMBER_STRICT_MODE) {
moduleFor(
'Strict Mode - built ins',
class extends RenderingTestCase {
'@test Can use Input'() {
'@skip Can use Input'() {
let Foo = defineComponent({ Input }, '<Input/>');

this.registerComponent('foo', { ComponentClass: Foo });
Expand Down
1 change: 1 addition & 0 deletions packages/@ember/-internals/metal/lib/tracked.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -75,6 +75,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,
Expand Down
2 changes: 2 additions & 0 deletions packages/@ember/-internals/views/index.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,8 @@
import { Option } from '@glimmer/interfaces';
import { SimpleElement } from '@simple-dom/interface';

export { jQuery, jQueryDisabled } from './lib/system/jquery';

export const ActionSupport: any;
export const ChildViewsSupport: any;
export const ClassNamesSupport: any;
Expand Down
1 change: 1 addition & 0 deletions packages/@ember/object/index.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export let action: MethodDecorator;