-
-
Notifications
You must be signed in to change notification settings - Fork 1.8k
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
decorate - compose decorators for a single prop #1652
decorate - compose decorators for a single prop #1652
Conversation
- Reduce multiple decorators to a single decorator - Added a test for multiple decorators (@action + custom) on a function property - Added a test for multiple decorators (@observable + @serializable) on a regular property - Added a usage example in readme under `decorate` section
@@ -67,6 +67,7 @@ | |||
"rollup": "^0.41.6", | |||
"rollup-plugin-filesize": "^1.3.2", | |||
"rollup-plugin-node-resolve": "^3.0.0", | |||
"serializr": "^1.3.0", |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I added serializr
as a dev dependency just for this test, so I can compose @observable
with another decorator @serializable(primitive())
.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
N.P.
README.md
Outdated
finished: [serializable(primitive), observable] | ||
}) | ||
``` | ||
Note: Composing decorators can sometimes lead to strange things when one decorator modifies the [property descriptor](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty) in a way that is unexpected for the other decorators. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Not so sure if my explanation is clear enough. Would love to get a feedback about it.
After approval I'll open a gh-pages
PR
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Note: not all decorators can be composed together, and this functionality is just best-effort. Some decorators affect the instance directly and can 'hide' the effect of other decorators that only change the prototype
README.md
Outdated
@@ -107,6 +107,24 @@ decorate(Todo, { | |||
}) | |||
``` | |||
|
|||
For applying multiple decorators on a single property, you can pass an array of decorators. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Please mension what the application order is. I assume serializable is applied first, then persist and finally observable?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
correct
Some small comments, further looking great! Thanks! |
Thanks for the feedback @mweststrate.
I didn't get what you meant by that. Can you elaborate about "support for MobX"? |
@ramybenaroya sorry, meant MobX 4. In other words; master represents 5, but 4 is still maintained as well so it might be interesting to backport this one. (if this branch is merged with squash, it can probably just be cherry-picked) |
- Change caveat note about docorators composition as suggested in mobxjs#1652 (comment) - Add decorators application order
This is documentation for changes in mobxjs#1652
* docs: Add example for composing decorators This is documentation for changes in #1652 * Update api.md * use single quotes * Update api.md
* decorate - compose decorators for a single prop - Reduce multiple decorators to a single decorator - Added a test for multiple decorators (@action + custom) on a function property - Added a test for multiple decorators (@observable + @serializable) on a regular property - Added a usage example in readme under `decorate` section * delete package-lock * doc: update README - Change caveat note about docorators composition as suggested in mobxjs#1652 (comment) - Add decorators application order * Update README.md
PR checklist:
gh-pages
branch. Please refer to this PR). For new functionality, at least API.md should be updatednpm run perf
)Changes
a regular property
decorate
sectionUsage Example: