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

Remove sendAction and string action passing #19658

Merged
merged 1 commit into from
Jul 21, 2021
Merged

Remove sendAction and string action passing #19658

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
84 changes: 2 additions & 82 deletions packages/@ember/-internals/glimmer/lib/components/abstract-input.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,8 @@ 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 { assert } from '@ember/debug';
import { JQUERY_INTEGRATION } from '@ember/deprecated-features';
import { action } from '@ember/object';
import { isConstRef, isUpdatableRef, Reference, updateRef, valueForRef } from '@glimmer/reference';
import Component from '../component';
Expand Down Expand Up @@ -207,86 +207,6 @@ 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.named(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://deprecations.emberjs.com/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://deprecations.emberjs.com/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;

Expand Down
10 changes: 5 additions & 5 deletions packages/@ember/-internals/glimmer/lib/helpers/action.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -95,10 +95,10 @@ export const ACTIONS = new _WeakSet();

Closure actions curry both their scope and any arguments. When invoked, any
additional arguments are added to the already curried list.
Actions should be invoked using the [sendAction](/ember/release/classes/Component/methods/sendAction?anchor=sendAction)
method. The first argument to `sendAction` is the action to be called, and
additional arguments are passed to the action function. This has interesting
properties combined with currying of arguments. For example:
Actions are presented in JavaScript as callbacks, and are
invoked like any other JavaScript function.

For example

```app/components/update-name.js
import Component from '@glimmer/component';
Expand Down Expand Up @@ -152,7 +152,7 @@ export const ACTIONS = new _WeakSet();
export default Component.extend({
click() {
// Note that model is not passed, it was curried in the template
this.sendAction('submit', 'bob');
this.submit('bob');
}
});
```
Expand Down
125 changes: 0 additions & 125 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 @@ -554,31 +554,6 @@ moduleFor(
// this.assertSelectionRange(8, 8); //NOTE: this fails in IE, the range is 0 -> 0 (TEST_SUITE=sauce)
}

['@test [DEPRECATED] sends an action with `<Input @enter="foo" />` when <enter> is pressed'](
assert
) {
assert.expect(4);

expectDeprecation(() => {
this.render(`<Input @enter="foo" />`, {
actions: {
foo(value, event) {
assert.ok(true, 'action was triggered');
if (jQueryDisabled) {
assert.notOk(event.originalEvent, 'event is not a jQuery.Event');
} else {
assert.ok(event instanceof jQuery.Event, 'jQuery event was passed');
}
},
},
});
}, 'Passing actions to components as strings (like `<Input @enter="foo" />`) is deprecated. Please use closure actions instead (`<Input @enter={{action "foo"}} />`). (\'-top-level\' @ L1:C0) ');

expectDeprecation(() => {
this.triggerEvent('keyup', { key: 'Enter' });
}, 'Passing actions to components as strings (like `<Input @enter="foo" />`) is deprecated. Please use closure actions instead (`<Input @enter={{action "foo"}} />`).');
}

['@test sends an action with `<Input @enter={{action "foo"}} />` when <enter> is pressed'](
assert
) {
Expand All @@ -602,31 +577,6 @@ moduleFor(
});
}

['@test [DEPRECATED] sends an action with `<Input @key-press="foo" />` is pressed'](assert) {
assert.expect(4);

expectDeprecation(() => {
this.render(`<Input @value={{this.value}} @key-press='foo' />`, {
value: 'initial',

actions: {
foo(value, event) {
assert.ok(true, 'action was triggered');
if (jQueryDisabled) {
assert.notOk(event.originalEvent, 'event is not a jQuery.Event');
} else {
assert.ok(event instanceof jQuery.Event, 'jQuery event was passed');
}
},
},
});
}, /Passing actions to components as strings \(like `({{input key-press="foo"}}|<Input @key-press="foo" \/>)`\) is deprecated\.|Passing the `@key-press` argument to <Input> is deprecated\./);

expectDeprecation(() => {
this.triggerEvent('keypress', { key: 'A' });
}, /Passing actions to components as strings \(like `({{input key-press="foo"}}|<Input @key-press="foo" \/>)`\) is deprecated\./);
}

['@test sends an action with `<Input @key-press={{action "foo"}} />` is pressed'](assert) {
let triggered = 0;

Expand Down Expand Up @@ -727,31 +677,6 @@ moduleFor(
});
}

['@test [DEPRECATED] sends an action with `<Input @escape-press="foo" />` when <escape> is pressed'](
assert
) {
assert.expect(4);

expectDeprecation(() => {
this.render(`<Input @escape-press='foo' />`, {
actions: {
foo(value, event) {
assert.ok(true, 'action was triggered');
if (jQueryDisabled) {
assert.notOk(event.originalEvent, 'event is not a jQuery.Event');
} else {
assert.ok(event instanceof jQuery.Event, 'jQuery event was passed');
}
},
},
});
}, 'Passing actions to components as strings (like `<Input @escape-press="foo" />`) is deprecated. Please use closure actions instead (`<Input @escape-press={{action "foo"}} />`). (\'-top-level\' @ L1:C0) ');

expectDeprecation(() => {
this.triggerEvent('keyup', { key: 'Escape' });
}, 'Passing actions to components as strings (like `<Input @escape-press="foo" />`) is deprecated. Please use closure actions instead (`<Input @escape-press={{action "foo"}} />`).');
}

['@test sends an action with `<Input @escape-press={{action "foo"}} />` when <escape> is pressed'](
assert
) {
Expand All @@ -773,31 +698,6 @@ moduleFor(
this.triggerEvent('keyup', { key: 'Escape' });
}

['@test [DEPRECATED] sends an action with `<Input @key-down="foo" />` when a key is pressed'](
assert
) {
assert.expect(4);

expectDeprecation(() => {
this.render(`<Input @key-down='foo' />`, {
actions: {
foo(value, event) {
assert.ok(true, 'action was triggered');
if (jQueryDisabled) {
assert.notOk(event.originalEvent, 'event is not a jQuery.Event');
} else {
assert.ok(event instanceof jQuery.Event, 'jQuery event was passed');
}
},
},
});
}, /Passing actions to components as strings \(like `({{input key-down="foo"}}|<Input @key-down="foo" \/>)`\) is deprecated\.|Passing the `@key-down` argument to <Input> is deprecated\./);

expectDeprecation(() => {
this.triggerEvent('keydown', { key: 'A' });
}, 'Passing actions to components as strings (like `<Input @key-down="foo" />`) is deprecated. Please use closure actions instead (`<Input @key-down={{action "foo"}} />`).');
}

['@test [DEPRECATED] sends an action with `<Input @key-down={{action "foo"}} />` when a key is pressed'](
assert
) {
Expand Down Expand Up @@ -828,31 +728,6 @@ moduleFor(
assert.equal(triggered, 1, 'The action was triggered exactly once');
}

['@test [DEPRECATED] sends an action with `<Input @key-up="foo" />` when a key is pressed'](
assert
) {
assert.expect(4);

expectDeprecation(() => {
this.render(`<Input @key-up='foo' />`, {
actions: {
foo(value, event) {
assert.ok(true, 'action was triggered');
if (jQueryDisabled) {
assert.notOk(event.originalEvent, 'event is not a jQuery.Event');
} else {
assert.ok(event instanceof jQuery.Event, 'jQuery event was passed');
}
},
},
});
}, /Passing actions to components as strings \(like `({{input key-up="foo"}}|<Input @key-up="foo" \/>)`\) is deprecated\.|Passing the `@key-up` argument to <Input> is deprecated\./);

expectDeprecation(() => {
this.triggerEvent('keyup', { key: 'A' });
}, 'Passing actions to components as strings (like `<Input @key-up="foo" />`) is deprecated. Please use closure actions instead (`<Input @key-up={{action "foo"}} />`).');
}

['@test [DEPRECATED] sends an action with `<Input @key-up={{action "foo"}} />` when a key is pressed'](
assert
) {
Expand Down
Loading