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.

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

Remove deprecation for setting hash properties (from years ago) #1580

Merged
Show file tree
Hide file tree
Changes from all commits
Commits
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
Original file line number Diff line number Diff line change
Expand Up @@ -185,93 +185,6 @@ class HashTest extends RenderTest {
this.assertHTML('Godfrey');
this.assertStableRerender();
}

@test
'defined hash keys can be updated'(assert: Assert) {
class FooBar extends GlimmerishComponent {
constructor(owner: object, args: { hash: Record<string, unknown> }) {
super(owner, args);
args.hash['firstName'] = 'Chad';

assert.strictEqual(args.hash['firstName'], 'Chad', 'Name updated in JS');
}
}

this.registerComponent('Glimmer', 'FooBar', `{{yield @hash}}`, FooBar);

this.render(
`<FooBar @hash={{hash firstName="Godfrey" lastName="Hietala"}} as |values|>{{values.firstName}} {{values.lastName}}</FooBar>`
);

// Name will not be updated in templates because templates access the child
// reference on hashes directly
this.assertHTML('Godfrey Hietala');
this.assertStableRerender();

assert.validateDeprecations(
/You set the 'firstName' property on a \{\{hash\}\} object. Setting properties on objects generated by \{\{hash\}\} is deprecated. Please update to use an object created with a tracked property or getter, or with a custom helper./u
);
}

@test
'defined hash keys are reset whenever the upstream changes'(assert: Assert) {
class FooBar extends GlimmerishComponent {
constructor(owner: object, args: { hash: Record<string, unknown> }) {
super(owner, args);
args.hash['name'] = 'Chad';
}

get alias() {
return (this.args['hash'] as Record<string, unknown>)['name'];
}
}

this.registerComponent('Glimmer', 'FooBar', `{{yield @hash this.alias}}`, FooBar);

this.render(
`<FooBar @hash={{hash name=this.name}} as |values alias|>{{values.name}} {{alias}}</FooBar>`,
{
name: 'Godfrey',
}
);

// JS alias will be updated, version accessed lazily in templates will not
this.assertHTML('Godfrey Chad');
this.assertStableRerender();

this.rerender({ name: 'Tom' });

// Both will be updated to match the new value
this.assertHTML('Tom Tom');
this.assertStableRerender();

assert.validateDeprecations(
/You set the 'name' property on a \{\{hash\}\} object. Setting properties on objects generated by \{\{hash\}\} is deprecated. Please update to use an object created with a tracked property or getter, or with a custom helper./u
);
}

@test
'undefined hash keys can be updated'(assert: Assert) {
class FooBar extends GlimmerishComponent {
constructor(owner: object, args: { hash: Record<string, unknown> }) {
super(owner, args);
args.hash['lastName'] = 'Chan';
}
}

this.registerComponent('Glimmer', 'FooBar', `{{yield @hash}}`, FooBar);

this.render(
`<FooBar @hash={{hash firstName="Godfrey"}} as |values|>{{values.firstName}} {{values.lastName}}</FooBar>`
);

this.assertHTML('Godfrey Chan');
this.assertStableRerender();

assert.validateDeprecations(
/You set the 'lastName' property on a \{\{hash\}\} object. Setting properties on objects generated by \{\{hash\}\} is deprecated. Please update to use an object created with a tracked property or getter, or with a custom helper./u
);
}
}

jitSuite(HashTest);
31 changes: 1 addition & 30 deletions packages/@glimmer/runtime/lib/helpers/hash.ts
Original file line number Diff line number Diff line change
@@ -1,33 +1,10 @@
import type { CapturedArguments, Dict } from '@glimmer/interfaces';
import type { Reference } from '@glimmer/reference';
import { deprecate } from '@glimmer/global-context';
import { createComputeRef } from '@glimmer/reference';

import { reifyNamed } from '../vm/arguments';
import { internalHelper } from './internal-helper';

let wrapHashProxy: (hash: Record<string, unknown>) => Record<string, unknown>;

if (import.meta.env.DEV) {
wrapHashProxy = (hash: Record<string, unknown>) => {
return new Proxy(hash, {
set(target, key, value) {
deprecate(
`You set the '${String(
key
)}' property on a {{hash}} object. Setting properties on objects generated by {{hash}} is deprecated. Please update to use an object created with a tracked property or getter, or with a custom helper.`,
false,
{ id: 'setting-on-hash' }
);

target[key as string] = value;

return true;
},
});
};
}

/**
Use the `{{hash}}` helper to create a hash to pass as an option to your
components. This is specially useful for contextual components where you can
Expand Down Expand Up @@ -67,13 +44,7 @@ if (import.meta.env.DEV) {
export const hash = internalHelper(({ named }: CapturedArguments): Reference<Dict<unknown>> => {
let ref = createComputeRef(
() => {
let hash = reifyNamed(named);

if (import.meta.env.DEV) {
hash = wrapHashProxy(hash);
}

return hash;
return reifyNamed(named);
},
null,
'hash'
Expand Down
Loading