mobx.decorate doesn't work #1969
Description
I'm not using any compilers. I'm loading MobX from a CDN. The decorate method simply doesn't seem to work.
I have a:
- Issue:
- Provide error messages including stacktrace
- Provide a minimal sample reproduction. Create a reproduction based on this sandbox
- Did you check this issue wasn't filed before?
- Elaborate on your issue. What behavior did you expect?
- State the versions of MobX and relevant libraries. Which browser / node / ... version?
Steps to reproduce
The "code sandbox" normally used for reproduction does way more than it should, so you'll have to create a couple of files and spin up a static web server to reproduce this.
- Create an HTML file with the following contents:
<html>
<head></head>
<body>
<script src="https://unpkg.com/[email protected]/lib/mobx.umd.js"></script>
<script src="mobx-issue.js"></script>
</body>
</html>- Create
mobx-issue.js
class MyClass {
list = []
}
mobx.decorate(MyClass, { list: mobx.observable })
const instance1 = new MyClass()
console.assert(mobx.isObservable(instance1.list), 'not observable')
console.assert(mobx.isObservableArray(instance1.list), 'not an observable array')
setTimeout(() => {
const instance2 = new MyClass()
console.assert(mobx.isObservable(instance2.list), 'not observable')
console.assert(mobx.isObservableArray(instance2.list), 'not an observable array')
instance2.list.replace([])
}, 1000)
instance1.list.replace([])I only added the timeout because it looks like the decorators are added as "pending", but I don't know what that's supposed to mean. The assertions fail regardless.
Expectations
I expect the above assertions in the script to not fail, but they do.
I also expect the instance1.list.replace and instance2.list.replace calls to not throw errors, but they do.
Uncaught TypeError: instance1.list.replace is not a function
at mobx-issue.js:18
(anonymous) @ mobx-issue.js:18
I suspect the issue is either in the build artifacts, or related to not using Babel/Webpack and other fluff with my source, or some combination of these.
I got as far as understanding that the decorators are applied in some sort of "pending" state. This is MyClass.prototype.Symbol(mobx pending decorators).list:
decoratorArguments: []
decoratorTarget: {constructor: ƒ, Symbol(mobx pending decorators): {…}}
descriptor: undefined
prop: "list"
propertyCreator: ƒ (target, propertyName, descriptor, _decoratorTarget, decoratorArgs)
__proto__: Object
I also know that the decoratorFactory function in MobX (line 322) will get an undefined applyImmediately argument. I'm not sure if this is relevant.
Tested with minified and unminified UMD and "module" builds of MobX version 5.9.4 on Chrome 76.0.3799.0