Skip to content

Commit 72da5d3

Browse files
committed
improve documentation around method/getter/setter decorators
1 parent 389bf55 commit 72da5d3

1 file changed

Lines changed: 45 additions & 23 deletions

File tree

docs/_guide/decorators.md

Lines changed: 45 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,51 @@ class HelloWorldElement extends HTMLElement {
3737

3838
Class Field decorators get given the class and the field name so they can add custom functionality to the field. Because they operate on the fields, they must be put on top of or to the left of the field.
3939

40-
#### Supporting `strictPropertyInitialization`
40+
### Method Decorators
41+
42+
Method decorators work just like Field Decorators. Put them on top or on the left of the method, like so:
43+
44+
45+
```js
46+
class HelloWorldElement extends HTMLElement {
47+
48+
@log
49+
submit() {
50+
// ...
51+
}
52+
53+
// Alternative style
54+
55+
@log load() {
56+
// ...
57+
}
58+
59+
}
60+
```
61+
62+
### Getter/Setter
63+
64+
Decorators can also be used over a `get` or `set` field. These work just like Field Decorators, but you can put them over one or both the `get` or `set` field. Some decorators might throw an error if you put them over a `get` field, when they expect to be put over a `set` field:
65+
66+
67+
```js
68+
class HelloWorldElement extends HTMLElement {
69+
70+
@target set something() {
71+
// ...
72+
}
73+
74+
// Can be used over just one field
75+
@attr get data() {
76+
return {}
77+
}
78+
set data() {
79+
80+
}
81+
}
82+
```
83+
84+
### Supporting `strictPropertyInitialization`
4185

4286
TypeScript comes with various "strict" mode settings, one of which is `strictPropertyInitialization` which lets TypeScript catch potential class properties which might not be assigned during construction of a class. This option conflicts with Catalyst's `@target`/`@targets` decorators, which safely do the assignment but TypeScript's simple heuristics cannot detect this. There are two ways to work around this:
4387

@@ -63,28 +107,6 @@ TypeScript comes with various "strict" mode settings, one of which is `strictPro
63107
}
64108
```
65109

66-
### Method Decorators
67-
68-
Catalyst doesn't currently ship with any method decorators, but you might see them in code. They work just like Field Decorators (in fact they're the same thing). Put them on top or on the left of the method, like so:
69-
70-
71-
```js
72-
class HelloWorldElement extends HTMLElement {
73-
74-
@log
75-
submit() {
76-
// ...
77-
}
78-
79-
// Alternative style
80-
81-
@log load() {
82-
// ...
83-
}
84-
85-
}
86-
```
87-
88110
### Function Calling Decorators
89111

90112
You might see some decorators that look like function calls, and that's because they are! Some decorators allow for customisation; calling with additional arguments. Decorators that expect to be called are generally not interchangeable with the non-call variant, a decorators documentation should tell you how to use it.

0 commit comments

Comments
 (0)