Skip to content

Commit bf4afc5

Browse files
authored
chore(docs): Migration guide: Update makeObservable section with decorators support (mobxjs#4588)
Update outdated claim in `makeObservable` section: it's no longer true that MobX 6 does not support decorators.
1 parent d5a4288 commit bf4afc5

1 file changed

Lines changed: 5 additions & 3 deletions

File tree

docs/migrating-from-4-or-5.md

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -24,12 +24,14 @@ _⚠️ **Warning**: Depending on factors like the size and complexity of your c
2424
- (Optional) In MobX 6 decorators have become opt-in. If you no longer wish to use decorators, remove `plugin-proposal-decorators` from your babel configuration and dependencies. Check out the [Enabling decorators {🚀}](enabling-decorators.md) section for more details.
2525
5. For TypeScript users:
2626
- Add the flag `"useDefineForClassFields": true` to your compiler config.
27-
- (Optional) In MobX 6 decorators have become opt-in. If you no longer wish to use decorators, remove / disable the `experimentalDecorators` configuration from your TypeScript config. Check out the [Enabling decorators {🚀}](enabling-decorators.md) section for more details.
27+
- (Optional) In MobX 6 decorators have become opt-in. If you no longer wish to use legacy decorators, remove / disable the `experimentalDecorators` configuration from your TypeScript config. Check out the [Enabling decorators {🚀}](enabling-decorators.md) section for more details.
2828
6. The MobX default configuration has become more strict. We recommend to adopt the new defaults after completing the upgrade, check out the [Configuration {🚀}](configuration.md) section. During migration, we recommend to configure MobX in the same way as it would be in v4/v5 out of the box: `import {configure} from "mobx"; configure({ enforceActions: "never" });`. After finishing the entire migration process and validating that your project works as expected, consider enabling the flags `computedRequiresReaction`, `reactionRequiresObservable` and `observableRequiresReaction` and `enforceActions: "observed"` to write more idiomatic MobX code.
2929

30-
## Upgrading classes to use `makeObservable`
30+
## Upgrading classes to use `makeObservable` or Stage 3 decorators
3131

32-
Due to standardized JavaScript limitations in how class fields are constructed, it is no longer possible for MobX to alter the behavior of class fields by means of decorators or the `decorate` utility. Instead, fields have to be made observable by the `constructor`. This can be done in three different ways:
32+
The implementation of decorators has changed between MobX 4/5 and version 6.11. Decorators now use the Stage 3 proposal, which comes with slight differences. Check out the [Enabling decorators {🚀}](enabling-decorators.md) section for more details.
33+
34+
Or, fields can be made observable by the use of `makeObservable` in the `constructor`. This can be done in three different ways:
3335

3436
1. Remove all decorators and call `makeObservable` in the `constructor` and explicitly define which field should be made observable using which decorator. For example: `makeObservable(this, { count: observable, tick: action, elapsedTime: computed })` (note that the second argument corresponds to what would be passed to `decorate`). This is the recommended approach if you want to drop decorators in your code base, and the project isn't yet too big.
3537
2. Leave all the decorators and call `makeObservable(this)` in the `constructor`. This will pick up the metadata generated by the decorators. This is the recommended way if you want to limit the impact of a MobX 6 migration.

0 commit comments

Comments
 (0)