1 | /**
|
2 | * @decorator
|
3 | *
|
4 | * Marks a property as tracked.
|
5 | *
|
6 | * By default, a component's properties are expected to be static,
|
7 | * meaning you are not able to update them and have the template update accordingly.
|
8 | * Marking a property as tracked means that when that property changes,
|
9 | * a rerender of the component is scheduled so the template is kept up to date.
|
10 | *
|
11 | * @example
|
12 | *
|
13 | * ```typescript
|
14 | * import Component from '@glimmer/component';
|
15 | * import { tracked } from '@glimmer/tracking';
|
16 | *
|
17 | * export default class MyComponent extends Component {
|
18 | * @tracked
|
19 | * remainingApples = 10
|
20 | * }
|
21 | * ```
|
22 | *
|
23 | * When something changes the component's `remainingApples` property, the rerender
|
24 | * will be scheduled.
|
25 | *
|
26 | * @example Computed Properties
|
27 | *
|
28 | * In the case that you have a getter that depends on other properties, tracked
|
29 | * properties accessed within the getter will automatically be tracked for you.
|
30 | * That means when any of those dependent tracked properties is changed, a
|
31 | * rerender of the component will be scheduled.
|
32 | *
|
33 | * In the following example we have two properties,
|
34 | * `eatenApples`, and `remainingApples`.
|
35 | *
|
36 | *
|
37 | * ```typescript
|
38 | * import Component from '@glimmer/component';
|
39 | * import { tracked } from '@glimmer/tracking';
|
40 | *
|
41 | * const totalApples = 100;
|
42 | *
|
43 | * export default class MyComponent extends Component {
|
44 | * @tracked
|
45 | * eatenApples = 0
|
46 | *
|
47 | * get remainingApples() {
|
48 | * return totalApples - this.eatenApples;
|
49 | * }
|
50 | *
|
51 | * increment() {
|
52 | * this.eatenApples = this.eatenApples + 1;
|
53 | * }
|
54 | * }
|
55 | * ```
|
56 | */
|
57 | export declare let tracked: PropertyDecorator;
|
58 | export declare function setPropertyDidChange(cb: () => void): void;
|