UNPKG

3.28 kBTypeScriptView Raw
1declare module '@ember/object/compat' {
2 import type { ExtendedMethodDecorator } from '@ember/-internals/metal';
3 import type { ElementDescriptor } from '@ember/-internals/metal';
4 /**
5 `@dependentKeyCompat` is decorator that can be used on _native getters_ that
6 use tracked properties. It exposes the getter to Ember's classic computed
7 property and observer systems, so they can watch it for changes. It can be
8 used in both native and classic classes.
9
10 Native Example:
11
12 ```js
13 import { tracked } from '@glimmer/tracking';
14 import { dependentKeyCompat } from '@ember/object/compat';
15 import { computed, set } from '@ember/object';
16
17 class Person {
18 @tracked firstName;
19 @tracked lastName;
20
21 @dependentKeyCompat
22 get fullName() {
23 return `${this.firstName} ${this.lastName}`;
24 }
25 }
26
27 class Profile {
28 constructor(person) {
29 set(this, 'person', person);
30 }
31
32 @computed('person.fullName')
33 get helloMessage() {
34 return `Hello, ${this.person.fullName}!`;
35 }
36 }
37 ```
38
39 Classic Example:
40
41 ```js
42 import { tracked } from '@glimmer/tracking';
43 import { dependentKeyCompat } from '@ember/object/compat';
44 import EmberObject, { computed, observer, set } from '@ember/object';
45
46 const Person = EmberObject.extend({
47 firstName: tracked(),
48 lastName: tracked(),
49
50 fullName: dependentKeyCompat(function() {
51 return `${this.firstName} ${this.lastName}`;
52 }),
53 });
54
55 const Profile = EmberObject.extend({
56 person: null,
57
58 helloMessage: computed('person.fullName', function() {
59 return `Hello, ${this.person.fullName}!`;
60 }),
61
62 onNameUpdated: observer('person.fullName', function() {
63 console.log('person name updated!');
64 }),
65 });
66 ```
67
68 `dependentKeyCompat()` can receive a getter function or an object containing
69 `get`/`set` methods when used in classic classes, like computed properties.
70
71 In general, only properties which you _expect_ to be watched by older,
72 untracked clases should be marked as dependency compatible. The decorator is
73 meant as an interop layer for parts of Ember's older classic APIs, and should
74 not be applied to every possible getter/setter in classes. The number of
75 dependency compatible getters should be _minimized_ wherever possible. New
76 application code should not need to use `@dependentKeyCompat`, since it is
77 only for interoperation with older code.
78
79 @public
80 @method dependentKeyCompat
81 @for @ember/object/compat
82 @static
83 @param {PropertyDescriptor|undefined} desc A property descriptor containing
84 the getter and setter (when used in
85 classic classes)
86 @return {PropertyDecorator} property decorator instance
87 */
88 export function dependentKeyCompat(
89 target: ElementDescriptor[0],
90 key: ElementDescriptor[1],
91 desc: ElementDescriptor[2]
92 ): PropertyDescriptor;
93 export function dependentKeyCompat(desc: PropertyDescriptor): ExtendedMethodDecorator;
94}