mobx-react 6.1.4 → 6.1.8
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +15 -1
- package/dist/Provider.d.ts +10 -0
- package/dist/disposeOnUnmount.d.ts +5 -0
- package/dist/index.d.ts +7 -0
- package/dist/index.js +8 -0
- package/dist/inject.d.ts +5 -0
- package/dist/mobx-react.umd.js +2 -2
- package/dist/mobxreact.cjs.development.js +851 -0
- package/dist/mobxreact.cjs.development.js.map +1 -0
- package/dist/mobxreact.cjs.production.min.js +2 -0
- package/dist/mobxreact.cjs.production.min.js.map +1 -0
- package/dist/mobxreact.esm.js +804 -0
- package/dist/mobxreact.esm.js.map +1 -0
- package/dist/mobxreact.rn.module.js +804 -0
- package/dist/mobxreact.umd.development.js +851 -0
- package/dist/mobxreact.umd.development.js.map +1 -0
- package/dist/mobxreact.umd.production.min.js +2 -0
- package/dist/mobxreact.umd.production.min.js.map +1 -0
- package/dist/observer.d.ts +5 -0
- package/dist/observerClass.d.ts +2 -0
- package/dist/propTypes.d.ts +10 -0
- package/dist/test/propTypes.test.d.ts +1 -0
- package/dist/test/utils/withConsole.d.ts +4 -0
- package/dist/types/IReactComponent.d.ts +2 -0
- package/dist/types/IStoresToProps.d.ts +2 -0
- package/dist/types/IValueMap.d.ts +1 -0
- package/dist/types/IWrappedComponent.d.ts +4 -0
- package/dist/utils/utils.d.ts +15 -0
- package/package.json +63 -37
- package/dist/mobx-react.d.ts +0 -94
- package/dist/mobx-react.js +0 -2
- package/dist/mobx-react.js.map +0 -1
- package/dist/mobx-react.module.js +0 -2
- package/dist/mobx-react.module.js.map +0 -1
- package/dist/mobx-react.rn.module.js +0 -2
- package/dist/mobx-react.umd.js.map +0 -1
|
@@ -0,0 +1,804 @@
|
|
|
1
|
+
import { Reaction, _allowStateChanges, _allowStateReadsStart, _allowStateReadsEnd, $mobx, createAtom, untracked, isObservableMap, isObservableObject, isObservableArray, observable, configure } from 'mobx';
|
|
2
|
+
import React__default, { PureComponent, Component, forwardRef, memo, createElement } from 'react';
|
|
3
|
+
import { unstable_batchedUpdates } from 'react-dom';
|
|
4
|
+
import { isUsingStaticRendering, Observer, observer as observer$1 } from 'mobx-react-lite';
|
|
5
|
+
export { Observer, isUsingStaticRendering, useAsObservableSource, useLocalStore, useObserver, useStaticRendering } from 'mobx-react-lite';
|
|
6
|
+
|
|
7
|
+
var symbolId = 0;
|
|
8
|
+
|
|
9
|
+
function createSymbol(name) {
|
|
10
|
+
if (typeof Symbol === "function") {
|
|
11
|
+
return Symbol(name);
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
var symbol = "__$mobx-react " + name + " (" + symbolId + ")";
|
|
15
|
+
symbolId++;
|
|
16
|
+
return symbol;
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
var createdSymbols = {};
|
|
20
|
+
function newSymbol(name) {
|
|
21
|
+
if (!createdSymbols[name]) {
|
|
22
|
+
createdSymbols[name] = createSymbol(name);
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
return createdSymbols[name];
|
|
26
|
+
}
|
|
27
|
+
function shallowEqual(objA, objB) {
|
|
28
|
+
//From: https://github.com/facebook/fbjs/blob/c69904a511b900266935168223063dd8772dfc40/packages/fbjs/src/core/shallowEqual.js
|
|
29
|
+
if (is(objA, objB)) return true;
|
|
30
|
+
|
|
31
|
+
if (typeof objA !== "object" || objA === null || typeof objB !== "object" || objB === null) {
|
|
32
|
+
return false;
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
var keysA = Object.keys(objA);
|
|
36
|
+
var keysB = Object.keys(objB);
|
|
37
|
+
if (keysA.length !== keysB.length) return false;
|
|
38
|
+
|
|
39
|
+
for (var i = 0; i < keysA.length; i++) {
|
|
40
|
+
if (!Object.hasOwnProperty.call(objB, keysA[i]) || !is(objA[keysA[i]], objB[keysA[i]])) {
|
|
41
|
+
return false;
|
|
42
|
+
}
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
return true;
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
function is(x, y) {
|
|
49
|
+
// From: https://github.com/facebook/fbjs/blob/c69904a511b900266935168223063dd8772dfc40/packages/fbjs/src/core/shallowEqual.js
|
|
50
|
+
if (x === y) {
|
|
51
|
+
return x !== 0 || 1 / x === 1 / y;
|
|
52
|
+
} else {
|
|
53
|
+
return x !== x && y !== y;
|
|
54
|
+
}
|
|
55
|
+
} // based on https://github.com/mridgway/hoist-non-react-statics/blob/master/src/index.js
|
|
56
|
+
|
|
57
|
+
|
|
58
|
+
var hoistBlackList = {
|
|
59
|
+
$$typeof: 1,
|
|
60
|
+
render: 1,
|
|
61
|
+
compare: 1,
|
|
62
|
+
type: 1,
|
|
63
|
+
childContextTypes: 1,
|
|
64
|
+
contextType: 1,
|
|
65
|
+
contextTypes: 1,
|
|
66
|
+
defaultProps: 1,
|
|
67
|
+
getDefaultProps: 1,
|
|
68
|
+
getDerivedStateFromError: 1,
|
|
69
|
+
getDerivedStateFromProps: 1,
|
|
70
|
+
mixins: 1,
|
|
71
|
+
propTypes: 1
|
|
72
|
+
};
|
|
73
|
+
function copyStaticProperties(base, target) {
|
|
74
|
+
var protoProps = Object.getOwnPropertyNames(Object.getPrototypeOf(base));
|
|
75
|
+
Object.getOwnPropertyNames(base).forEach(function (key) {
|
|
76
|
+
if (!hoistBlackList[key] && protoProps.indexOf(key) === -1) {
|
|
77
|
+
Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(base, key));
|
|
78
|
+
}
|
|
79
|
+
});
|
|
80
|
+
}
|
|
81
|
+
/**
|
|
82
|
+
* Helper to set `prop` to `this` as non-enumerable (hidden prop)
|
|
83
|
+
* @param target
|
|
84
|
+
* @param prop
|
|
85
|
+
* @param value
|
|
86
|
+
*/
|
|
87
|
+
|
|
88
|
+
function setHiddenProp(target, prop, value) {
|
|
89
|
+
if (!Object.hasOwnProperty.call(target, prop)) {
|
|
90
|
+
Object.defineProperty(target, prop, {
|
|
91
|
+
enumerable: false,
|
|
92
|
+
configurable: true,
|
|
93
|
+
writable: true,
|
|
94
|
+
value: value
|
|
95
|
+
});
|
|
96
|
+
} else {
|
|
97
|
+
target[prop] = value;
|
|
98
|
+
}
|
|
99
|
+
}
|
|
100
|
+
/**
|
|
101
|
+
* Utilities for patching componentWillUnmount, to make sure @disposeOnUnmount works correctly icm with user defined hooks
|
|
102
|
+
* and the handler provided by mobx-react
|
|
103
|
+
*/
|
|
104
|
+
|
|
105
|
+
var mobxMixins =
|
|
106
|
+
/*#__PURE__*/
|
|
107
|
+
newSymbol("patchMixins");
|
|
108
|
+
var mobxPatchedDefinition =
|
|
109
|
+
/*#__PURE__*/
|
|
110
|
+
newSymbol("patchedDefinition");
|
|
111
|
+
|
|
112
|
+
function getMixins(target, methodName) {
|
|
113
|
+
var mixins = target[mobxMixins] = target[mobxMixins] || {};
|
|
114
|
+
var methodMixins = mixins[methodName] = mixins[methodName] || {};
|
|
115
|
+
methodMixins.locks = methodMixins.locks || 0;
|
|
116
|
+
methodMixins.methods = methodMixins.methods || [];
|
|
117
|
+
return methodMixins;
|
|
118
|
+
}
|
|
119
|
+
|
|
120
|
+
function wrapper(realMethod, mixins) {
|
|
121
|
+
var _this = this;
|
|
122
|
+
|
|
123
|
+
for (var _len = arguments.length, args = new Array(_len > 2 ? _len - 2 : 0), _key = 2; _key < _len; _key++) {
|
|
124
|
+
args[_key - 2] = arguments[_key];
|
|
125
|
+
}
|
|
126
|
+
|
|
127
|
+
// locks are used to ensure that mixins are invoked only once per invocation, even on recursive calls
|
|
128
|
+
mixins.locks++;
|
|
129
|
+
|
|
130
|
+
try {
|
|
131
|
+
var retVal;
|
|
132
|
+
|
|
133
|
+
if (realMethod !== undefined && realMethod !== null) {
|
|
134
|
+
retVal = realMethod.apply(this, args);
|
|
135
|
+
}
|
|
136
|
+
|
|
137
|
+
return retVal;
|
|
138
|
+
} finally {
|
|
139
|
+
mixins.locks--;
|
|
140
|
+
|
|
141
|
+
if (mixins.locks === 0) {
|
|
142
|
+
mixins.methods.forEach(function (mx) {
|
|
143
|
+
mx.apply(_this, args);
|
|
144
|
+
});
|
|
145
|
+
}
|
|
146
|
+
}
|
|
147
|
+
}
|
|
148
|
+
|
|
149
|
+
function wrapFunction(realMethod, mixins) {
|
|
150
|
+
var fn = function fn() {
|
|
151
|
+
for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
|
|
152
|
+
args[_key2] = arguments[_key2];
|
|
153
|
+
}
|
|
154
|
+
|
|
155
|
+
wrapper.call.apply(wrapper, [this, realMethod, mixins].concat(args));
|
|
156
|
+
};
|
|
157
|
+
|
|
158
|
+
return fn;
|
|
159
|
+
}
|
|
160
|
+
|
|
161
|
+
function patch(target, methodName, mixinMethod) {
|
|
162
|
+
var mixins = getMixins(target, methodName);
|
|
163
|
+
|
|
164
|
+
if (mixins.methods.indexOf(mixinMethod) < 0) {
|
|
165
|
+
mixins.methods.push(mixinMethod);
|
|
166
|
+
}
|
|
167
|
+
|
|
168
|
+
var oldDefinition = Object.getOwnPropertyDescriptor(target, methodName);
|
|
169
|
+
|
|
170
|
+
if (oldDefinition && oldDefinition[mobxPatchedDefinition]) {
|
|
171
|
+
// already patched definition, do not repatch
|
|
172
|
+
return;
|
|
173
|
+
}
|
|
174
|
+
|
|
175
|
+
var originalMethod = target[methodName];
|
|
176
|
+
var newDefinition = createDefinition(target, methodName, oldDefinition ? oldDefinition.enumerable : undefined, mixins, originalMethod);
|
|
177
|
+
Object.defineProperty(target, methodName, newDefinition);
|
|
178
|
+
}
|
|
179
|
+
|
|
180
|
+
function createDefinition(target, methodName, enumerable, mixins, originalMethod) {
|
|
181
|
+
var _ref;
|
|
182
|
+
|
|
183
|
+
var wrappedFunc = wrapFunction(originalMethod, mixins);
|
|
184
|
+
return _ref = {}, _ref[mobxPatchedDefinition] = true, _ref.get = function get() {
|
|
185
|
+
return wrappedFunc;
|
|
186
|
+
}, _ref.set = function set(value) {
|
|
187
|
+
if (this === target) {
|
|
188
|
+
wrappedFunc = wrapFunction(value, mixins);
|
|
189
|
+
} else {
|
|
190
|
+
// when it is an instance of the prototype/a child prototype patch that particular case again separately
|
|
191
|
+
// since we need to store separate values depending on wether it is the actual instance, the prototype, etc
|
|
192
|
+
// e.g. the method for super might not be the same as the method for the prototype which might be not the same
|
|
193
|
+
// as the method for the instance
|
|
194
|
+
var newDefinition = createDefinition(this, methodName, enumerable, mixins, value);
|
|
195
|
+
Object.defineProperty(this, methodName, newDefinition);
|
|
196
|
+
}
|
|
197
|
+
}, _ref.configurable = true, _ref.enumerable = enumerable, _ref;
|
|
198
|
+
}
|
|
199
|
+
|
|
200
|
+
var mobxAdminProperty = $mobx || "$mobx";
|
|
201
|
+
var mobxIsUnmounted =
|
|
202
|
+
/*#__PURE__*/
|
|
203
|
+
newSymbol("isUnmounted");
|
|
204
|
+
var skipRenderKey =
|
|
205
|
+
/*#__PURE__*/
|
|
206
|
+
newSymbol("skipRender");
|
|
207
|
+
var isForcingUpdateKey =
|
|
208
|
+
/*#__PURE__*/
|
|
209
|
+
newSymbol("isForcingUpdate");
|
|
210
|
+
function makeClassComponentObserver(componentClass) {
|
|
211
|
+
var target = componentClass.prototype;
|
|
212
|
+
if (target.componentWillReact) throw new Error("The componentWillReact life-cycle event is no longer supported");
|
|
213
|
+
|
|
214
|
+
if (componentClass["__proto__"] !== PureComponent) {
|
|
215
|
+
if (!target.shouldComponentUpdate) target.shouldComponentUpdate = observerSCU;else if (target.shouldComponentUpdate !== observerSCU) // n.b. unequal check, instead of existence check, as @observer might be on superclass as well
|
|
216
|
+
throw new Error("It is not allowed to use shouldComponentUpdate in observer based components.");
|
|
217
|
+
} // this.props and this.state are made observable, just to make sure @computed fields that
|
|
218
|
+
// are defined inside the component, and which rely on state or props, re-compute if state or props change
|
|
219
|
+
// (otherwise the computed wouldn't update and become stale on props change, since props are not observable)
|
|
220
|
+
// However, this solution is not without it's own problems: https://github.com/mobxjs/mobx-react/issues?utf8=%E2%9C%93&q=is%3Aissue+label%3Aobservable-props-or-not+
|
|
221
|
+
|
|
222
|
+
|
|
223
|
+
makeObservableProp(target, "props");
|
|
224
|
+
makeObservableProp(target, "state");
|
|
225
|
+
var baseRender = target.render;
|
|
226
|
+
|
|
227
|
+
target.render = function () {
|
|
228
|
+
return makeComponentReactive.call(this, baseRender);
|
|
229
|
+
};
|
|
230
|
+
|
|
231
|
+
patch(target, "componentWillUnmount", function () {
|
|
232
|
+
if (isUsingStaticRendering() === true) return;
|
|
233
|
+
|
|
234
|
+
if (this.render[mobxAdminProperty]) {
|
|
235
|
+
this.render[mobxAdminProperty].dispose();
|
|
236
|
+
} else if (process.env.NODE_ENV !== "production") {
|
|
237
|
+
var displayName = getDisplayName(this);
|
|
238
|
+
console.warn("The render function for an observer component (" + displayName + ") was modified after MobX attached. This is not supported, since the new function can't be triggered by MobX.");
|
|
239
|
+
}
|
|
240
|
+
|
|
241
|
+
this[mobxIsUnmounted] = true;
|
|
242
|
+
});
|
|
243
|
+
return componentClass;
|
|
244
|
+
} // Generates a friendly name for debugging
|
|
245
|
+
|
|
246
|
+
function getDisplayName(comp) {
|
|
247
|
+
return comp.displayName || comp.name || comp.constructor && (comp.constructor.displayName || comp.constructor.name) || "<component>";
|
|
248
|
+
}
|
|
249
|
+
|
|
250
|
+
function makeComponentReactive(render) {
|
|
251
|
+
var _this = this;
|
|
252
|
+
|
|
253
|
+
if (isUsingStaticRendering() === true) return render.call(this);
|
|
254
|
+
/**
|
|
255
|
+
* If props are shallowly modified, react will render anyway,
|
|
256
|
+
* so atom.reportChanged() should not result in yet another re-render
|
|
257
|
+
*/
|
|
258
|
+
|
|
259
|
+
setHiddenProp(this, skipRenderKey, false);
|
|
260
|
+
/**
|
|
261
|
+
* forceUpdate will re-assign this.props. We don't want that to cause a loop,
|
|
262
|
+
* so detect these changes
|
|
263
|
+
*/
|
|
264
|
+
|
|
265
|
+
setHiddenProp(this, isForcingUpdateKey, false);
|
|
266
|
+
var initialName = getDisplayName(this);
|
|
267
|
+
var baseRender = render.bind(this);
|
|
268
|
+
var isRenderingPending = false;
|
|
269
|
+
var reaction = new Reaction(initialName + ".render()", function () {
|
|
270
|
+
if (!isRenderingPending) {
|
|
271
|
+
// N.B. Getting here *before mounting* means that a component constructor has side effects (see the relevant test in misc.js)
|
|
272
|
+
// This unidiomatic React usage but React will correctly warn about this so we continue as usual
|
|
273
|
+
// See #85 / Pull #44
|
|
274
|
+
isRenderingPending = true;
|
|
275
|
+
|
|
276
|
+
if (_this[mobxIsUnmounted] !== true) {
|
|
277
|
+
var hasError = true;
|
|
278
|
+
|
|
279
|
+
try {
|
|
280
|
+
setHiddenProp(_this, isForcingUpdateKey, true);
|
|
281
|
+
if (!_this[skipRenderKey]) Component.prototype.forceUpdate.call(_this);
|
|
282
|
+
hasError = false;
|
|
283
|
+
} finally {
|
|
284
|
+
setHiddenProp(_this, isForcingUpdateKey, false);
|
|
285
|
+
if (hasError) reaction.dispose();
|
|
286
|
+
}
|
|
287
|
+
}
|
|
288
|
+
}
|
|
289
|
+
});
|
|
290
|
+
reaction["reactComponent"] = this;
|
|
291
|
+
reactiveRender[mobxAdminProperty] = reaction;
|
|
292
|
+
this.render = reactiveRender;
|
|
293
|
+
|
|
294
|
+
function reactiveRender() {
|
|
295
|
+
isRenderingPending = false;
|
|
296
|
+
var exception = undefined;
|
|
297
|
+
var rendering = undefined;
|
|
298
|
+
reaction.track(function () {
|
|
299
|
+
try {
|
|
300
|
+
rendering = _allowStateChanges(false, baseRender);
|
|
301
|
+
} catch (e) {
|
|
302
|
+
exception = e;
|
|
303
|
+
}
|
|
304
|
+
});
|
|
305
|
+
|
|
306
|
+
if (exception) {
|
|
307
|
+
throw exception;
|
|
308
|
+
}
|
|
309
|
+
|
|
310
|
+
return rendering;
|
|
311
|
+
}
|
|
312
|
+
|
|
313
|
+
return reactiveRender.call(this);
|
|
314
|
+
}
|
|
315
|
+
|
|
316
|
+
function observerSCU(nextProps, nextState) {
|
|
317
|
+
if (isUsingStaticRendering()) {
|
|
318
|
+
console.warn("[mobx-react] It seems that a re-rendering of a React component is triggered while in static (server-side) mode. Please make sure components are rendered only once server-side.");
|
|
319
|
+
} // update on any state changes (as is the default)
|
|
320
|
+
|
|
321
|
+
|
|
322
|
+
if (this.state !== nextState) {
|
|
323
|
+
return true;
|
|
324
|
+
} // update if props are shallowly not equal, inspired by PureRenderMixin
|
|
325
|
+
// we could return just 'false' here, and avoid the `skipRender` checks etc
|
|
326
|
+
// however, it is nicer if lifecycle events are triggered like usually,
|
|
327
|
+
// so we return true here if props are shallowly modified.
|
|
328
|
+
|
|
329
|
+
|
|
330
|
+
return !shallowEqual(this.props, nextProps);
|
|
331
|
+
}
|
|
332
|
+
|
|
333
|
+
function makeObservableProp(target, propName) {
|
|
334
|
+
var valueHolderKey = newSymbol("reactProp_" + propName + "_valueHolder");
|
|
335
|
+
var atomHolderKey = newSymbol("reactProp_" + propName + "_atomHolder");
|
|
336
|
+
|
|
337
|
+
function getAtom() {
|
|
338
|
+
if (!this[atomHolderKey]) {
|
|
339
|
+
setHiddenProp(this, atomHolderKey, createAtom("reactive " + propName));
|
|
340
|
+
}
|
|
341
|
+
|
|
342
|
+
return this[atomHolderKey];
|
|
343
|
+
}
|
|
344
|
+
|
|
345
|
+
Object.defineProperty(target, propName, {
|
|
346
|
+
configurable: true,
|
|
347
|
+
enumerable: true,
|
|
348
|
+
get: function get() {
|
|
349
|
+
var prevReadState = false;
|
|
350
|
+
|
|
351
|
+
if (_allowStateReadsStart && _allowStateReadsEnd) {
|
|
352
|
+
prevReadState = _allowStateReadsStart(true);
|
|
353
|
+
}
|
|
354
|
+
|
|
355
|
+
getAtom.call(this).reportObserved();
|
|
356
|
+
|
|
357
|
+
if (_allowStateReadsStart && _allowStateReadsEnd) {
|
|
358
|
+
_allowStateReadsEnd(prevReadState);
|
|
359
|
+
}
|
|
360
|
+
|
|
361
|
+
return this[valueHolderKey];
|
|
362
|
+
},
|
|
363
|
+
set: function set(v) {
|
|
364
|
+
if (!this[isForcingUpdateKey] && !shallowEqual(this[valueHolderKey], v)) {
|
|
365
|
+
setHiddenProp(this, valueHolderKey, v);
|
|
366
|
+
setHiddenProp(this, skipRenderKey, true);
|
|
367
|
+
getAtom.call(this).reportChanged();
|
|
368
|
+
setHiddenProp(this, skipRenderKey, false);
|
|
369
|
+
} else {
|
|
370
|
+
setHiddenProp(this, valueHolderKey, v);
|
|
371
|
+
}
|
|
372
|
+
}
|
|
373
|
+
});
|
|
374
|
+
}
|
|
375
|
+
|
|
376
|
+
var hasSymbol = typeof Symbol === "function" && Symbol.for; // Using react-is had some issues (and operates on elements, not on types), see #608 / #609
|
|
377
|
+
|
|
378
|
+
var ReactForwardRefSymbol = hasSymbol ?
|
|
379
|
+
/*#__PURE__*/
|
|
380
|
+
Symbol.for("react.forward_ref") : typeof forwardRef === "function" &&
|
|
381
|
+
/*#__PURE__*/
|
|
382
|
+
forwardRef(function (props) {
|
|
383
|
+
return null;
|
|
384
|
+
})["$$typeof"];
|
|
385
|
+
var ReactMemoSymbol = hasSymbol ?
|
|
386
|
+
/*#__PURE__*/
|
|
387
|
+
Symbol.for("react.memo") : typeof memo === "function" &&
|
|
388
|
+
/*#__PURE__*/
|
|
389
|
+
memo(function (props) {
|
|
390
|
+
return null;
|
|
391
|
+
})["$$typeof"];
|
|
392
|
+
/**
|
|
393
|
+
* Observer function / decorator
|
|
394
|
+
*/
|
|
395
|
+
|
|
396
|
+
function observer(component) {
|
|
397
|
+
if (component["isMobxInjector"] === true) {
|
|
398
|
+
console.warn("Mobx observer: You are trying to use 'observer' on a component that already has 'inject'. Please apply 'observer' before applying 'inject'");
|
|
399
|
+
}
|
|
400
|
+
|
|
401
|
+
if (ReactMemoSymbol && component["$$typeof"] === ReactMemoSymbol) {
|
|
402
|
+
throw new Error("Mobx observer: You are trying to use 'observer' on function component wrapped to either another observer or 'React.memo'. The observer already applies 'React.memo' for you.");
|
|
403
|
+
} // Unwrap forward refs into `<Observer>` component
|
|
404
|
+
// we need to unwrap the render, because it is the inner render that needs to be tracked,
|
|
405
|
+
// not the ForwardRef HoC
|
|
406
|
+
|
|
407
|
+
|
|
408
|
+
if (ReactForwardRefSymbol && component["$$typeof"] === ReactForwardRefSymbol) {
|
|
409
|
+
var baseRender = component["render"];
|
|
410
|
+
if (typeof baseRender !== "function") throw new Error("render property of ForwardRef was not a function");
|
|
411
|
+
return forwardRef(function ObserverForwardRef() {
|
|
412
|
+
var args = arguments;
|
|
413
|
+
return createElement(Observer, null, function () {
|
|
414
|
+
return baseRender.apply(undefined, args);
|
|
415
|
+
});
|
|
416
|
+
});
|
|
417
|
+
} // Function component
|
|
418
|
+
|
|
419
|
+
|
|
420
|
+
if (typeof component === "function" && (!component.prototype || !component.prototype.render) && !component["isReactClass"] && !Object.prototype.isPrototypeOf.call(Component, component)) {
|
|
421
|
+
return observer$1(component);
|
|
422
|
+
}
|
|
423
|
+
|
|
424
|
+
return makeClassComponentObserver(component);
|
|
425
|
+
}
|
|
426
|
+
|
|
427
|
+
function _extends() {
|
|
428
|
+
_extends = Object.assign || function (target) {
|
|
429
|
+
for (var i = 1; i < arguments.length; i++) {
|
|
430
|
+
var source = arguments[i];
|
|
431
|
+
|
|
432
|
+
for (var key in source) {
|
|
433
|
+
if (Object.prototype.hasOwnProperty.call(source, key)) {
|
|
434
|
+
target[key] = source[key];
|
|
435
|
+
}
|
|
436
|
+
}
|
|
437
|
+
}
|
|
438
|
+
|
|
439
|
+
return target;
|
|
440
|
+
};
|
|
441
|
+
|
|
442
|
+
return _extends.apply(this, arguments);
|
|
443
|
+
}
|
|
444
|
+
|
|
445
|
+
function _objectWithoutPropertiesLoose(source, excluded) {
|
|
446
|
+
if (source == null) return {};
|
|
447
|
+
var target = {};
|
|
448
|
+
var sourceKeys = Object.keys(source);
|
|
449
|
+
var key, i;
|
|
450
|
+
|
|
451
|
+
for (i = 0; i < sourceKeys.length; i++) {
|
|
452
|
+
key = sourceKeys[i];
|
|
453
|
+
if (excluded.indexOf(key) >= 0) continue;
|
|
454
|
+
target[key] = source[key];
|
|
455
|
+
}
|
|
456
|
+
|
|
457
|
+
return target;
|
|
458
|
+
}
|
|
459
|
+
|
|
460
|
+
var MobXProviderContext =
|
|
461
|
+
/*#__PURE__*/
|
|
462
|
+
React__default.createContext({});
|
|
463
|
+
function Provider(props) {
|
|
464
|
+
var children = props.children,
|
|
465
|
+
stores = _objectWithoutPropertiesLoose(props, ["children"]);
|
|
466
|
+
|
|
467
|
+
var parentValue = React__default.useContext(MobXProviderContext);
|
|
468
|
+
var mutableProviderRef = React__default.useRef(_extends({}, parentValue, {}, stores));
|
|
469
|
+
var value = mutableProviderRef.current;
|
|
470
|
+
|
|
471
|
+
if (process.env.NODE_ENV !== "production") {
|
|
472
|
+
var newValue = _extends({}, value, {}, stores); // spread in previous state for the context based stores
|
|
473
|
+
|
|
474
|
+
|
|
475
|
+
if (!shallowEqual(value, newValue)) {
|
|
476
|
+
throw new Error("MobX Provider: The set of provided stores has changed. See: https://github.com/mobxjs/mobx-react#the-set-of-provided-stores-has-changed-error.");
|
|
477
|
+
}
|
|
478
|
+
}
|
|
479
|
+
|
|
480
|
+
return React__default.createElement(MobXProviderContext.Provider, {
|
|
481
|
+
value: value
|
|
482
|
+
}, children);
|
|
483
|
+
}
|
|
484
|
+
Provider.displayName = "MobXProvider";
|
|
485
|
+
|
|
486
|
+
/**
|
|
487
|
+
* Store Injection
|
|
488
|
+
*/
|
|
489
|
+
|
|
490
|
+
function createStoreInjector(grabStoresFn, component, injectNames, makeReactive) {
|
|
491
|
+
// Support forward refs
|
|
492
|
+
var Injector = React__default.forwardRef(function (props, ref) {
|
|
493
|
+
var newProps = _extends({}, props);
|
|
494
|
+
|
|
495
|
+
var context = React__default.useContext(MobXProviderContext);
|
|
496
|
+
Object.assign(newProps, grabStoresFn(context || {}, newProps) || {});
|
|
497
|
+
|
|
498
|
+
if (ref) {
|
|
499
|
+
newProps.ref = ref;
|
|
500
|
+
}
|
|
501
|
+
|
|
502
|
+
return React__default.createElement(component, newProps);
|
|
503
|
+
});
|
|
504
|
+
if (makeReactive) Injector = observer(Injector);
|
|
505
|
+
Injector["isMobxInjector"] = true; // assigned late to suppress observer warning
|
|
506
|
+
// Static fields from component should be visible on the generated Injector
|
|
507
|
+
|
|
508
|
+
copyStaticProperties(component, Injector);
|
|
509
|
+
Injector["wrappedComponent"] = component;
|
|
510
|
+
Injector.displayName = getInjectName(component, injectNames);
|
|
511
|
+
return Injector;
|
|
512
|
+
}
|
|
513
|
+
|
|
514
|
+
function getInjectName(component, injectNames) {
|
|
515
|
+
var displayName;
|
|
516
|
+
var componentName = component.displayName || component.name || component.constructor && component.constructor.name || "Component";
|
|
517
|
+
if (injectNames) displayName = "inject-with-" + injectNames + "(" + componentName + ")";else displayName = "inject(" + componentName + ")";
|
|
518
|
+
return displayName;
|
|
519
|
+
}
|
|
520
|
+
|
|
521
|
+
function grabStoresByName(storeNames) {
|
|
522
|
+
return function (baseStores, nextProps) {
|
|
523
|
+
storeNames.forEach(function (storeName) {
|
|
524
|
+
if (storeName in nextProps // prefer props over stores
|
|
525
|
+
) return;
|
|
526
|
+
if (!(storeName in baseStores)) throw new Error("MobX injector: Store '" + storeName + "' is not available! Make sure it is provided by some Provider");
|
|
527
|
+
nextProps[storeName] = baseStores[storeName];
|
|
528
|
+
});
|
|
529
|
+
return nextProps;
|
|
530
|
+
};
|
|
531
|
+
}
|
|
532
|
+
/**
|
|
533
|
+
* higher order component that injects stores to a child.
|
|
534
|
+
* takes either a varargs list of strings, which are stores read from the context,
|
|
535
|
+
* or a function that manually maps the available stores from the context to props:
|
|
536
|
+
* storesToProps(mobxStores, props, context) => newProps
|
|
537
|
+
*/
|
|
538
|
+
|
|
539
|
+
|
|
540
|
+
function inject() {
|
|
541
|
+
for (var _len = arguments.length, storeNames = new Array(_len), _key = 0; _key < _len; _key++) {
|
|
542
|
+
storeNames[_key] = arguments[_key];
|
|
543
|
+
}
|
|
544
|
+
|
|
545
|
+
if (typeof arguments[0] === "function") {
|
|
546
|
+
var grabStoresFn = arguments[0];
|
|
547
|
+
return function (componentClass) {
|
|
548
|
+
return createStoreInjector(grabStoresFn, componentClass, grabStoresFn.name, true);
|
|
549
|
+
};
|
|
550
|
+
} else {
|
|
551
|
+
return function (componentClass) {
|
|
552
|
+
return createStoreInjector(grabStoresByName(storeNames), componentClass, storeNames.join("-"), false);
|
|
553
|
+
};
|
|
554
|
+
}
|
|
555
|
+
}
|
|
556
|
+
|
|
557
|
+
var protoStoreKey =
|
|
558
|
+
/*#__PURE__*/
|
|
559
|
+
newSymbol("disposeOnUnmountProto");
|
|
560
|
+
var instStoreKey =
|
|
561
|
+
/*#__PURE__*/
|
|
562
|
+
newSymbol("disposeOnUnmountInst");
|
|
563
|
+
|
|
564
|
+
function runDisposersOnWillUnmount() {
|
|
565
|
+
var _this = this;
|
|
566
|
+
[].concat(this[protoStoreKey] || [], this[instStoreKey] || []).forEach(function (propKeyOrFunction) {
|
|
567
|
+
var prop = typeof propKeyOrFunction === "string" ? _this[propKeyOrFunction] : propKeyOrFunction;
|
|
568
|
+
|
|
569
|
+
if (prop !== undefined && prop !== null) {
|
|
570
|
+
if (Array.isArray(prop)) prop.map(function (f) {
|
|
571
|
+
return f();
|
|
572
|
+
});else prop();
|
|
573
|
+
}
|
|
574
|
+
});
|
|
575
|
+
}
|
|
576
|
+
|
|
577
|
+
function disposeOnUnmount(target, propertyKeyOrFunction) {
|
|
578
|
+
if (Array.isArray(propertyKeyOrFunction)) {
|
|
579
|
+
return propertyKeyOrFunction.map(function (fn) {
|
|
580
|
+
return disposeOnUnmount(target, fn);
|
|
581
|
+
});
|
|
582
|
+
}
|
|
583
|
+
|
|
584
|
+
var c = Object.getPrototypeOf(target).constructor || Object.getPrototypeOf(target.constructor);
|
|
585
|
+
var c2 = Object.getPrototypeOf(target.constructor);
|
|
586
|
+
|
|
587
|
+
if (!(c === React__default.Component || c === React__default.PureComponent || c2 === React__default.Component || c2 === React__default.PureComponent)) {
|
|
588
|
+
throw new Error("[mobx-react] disposeOnUnmount only supports direct subclasses of React.Component or React.PureComponent.");
|
|
589
|
+
}
|
|
590
|
+
|
|
591
|
+
if (typeof propertyKeyOrFunction !== "string" && typeof propertyKeyOrFunction !== "function" && !Array.isArray(propertyKeyOrFunction)) {
|
|
592
|
+
throw new Error("[mobx-react] disposeOnUnmount only works if the parameter is either a property key or a function.");
|
|
593
|
+
} // decorator's target is the prototype, so it doesn't have any instance properties like props
|
|
594
|
+
|
|
595
|
+
|
|
596
|
+
var isDecorator = typeof propertyKeyOrFunction === "string"; // add property key / function we want run (disposed) to the store
|
|
597
|
+
|
|
598
|
+
var componentWasAlreadyModified = !!target[protoStoreKey] || !!target[instStoreKey];
|
|
599
|
+
var store = isDecorator ? // decorators are added to the prototype store
|
|
600
|
+
target[protoStoreKey] || (target[protoStoreKey] = []) : // functions are added to the instance store
|
|
601
|
+
target[instStoreKey] || (target[instStoreKey] = []);
|
|
602
|
+
store.push(propertyKeyOrFunction); // tweak the component class componentWillUnmount if not done already
|
|
603
|
+
|
|
604
|
+
if (!componentWasAlreadyModified) {
|
|
605
|
+
patch(target, "componentWillUnmount", runDisposersOnWillUnmount);
|
|
606
|
+
} // return the disposer as is if invoked as a non decorator
|
|
607
|
+
|
|
608
|
+
|
|
609
|
+
if (typeof propertyKeyOrFunction !== "string") {
|
|
610
|
+
return propertyKeyOrFunction;
|
|
611
|
+
}
|
|
612
|
+
}
|
|
613
|
+
|
|
614
|
+
function createChainableTypeChecker(validator) {
|
|
615
|
+
function checkType(isRequired, props, propName, componentName, location, propFullName) {
|
|
616
|
+
for (var _len = arguments.length, rest = new Array(_len > 6 ? _len - 6 : 0), _key = 6; _key < _len; _key++) {
|
|
617
|
+
rest[_key - 6] = arguments[_key];
|
|
618
|
+
}
|
|
619
|
+
|
|
620
|
+
return untracked(function () {
|
|
621
|
+
componentName = componentName || "<<anonymous>>";
|
|
622
|
+
propFullName = propFullName || propName;
|
|
623
|
+
|
|
624
|
+
if (props[propName] == null) {
|
|
625
|
+
if (isRequired) {
|
|
626
|
+
var actual = props[propName] === null ? "null" : "undefined";
|
|
627
|
+
return new Error("The " + location + " `" + propFullName + "` is marked as required " + "in `" + componentName + "`, but its value is `" + actual + "`.");
|
|
628
|
+
}
|
|
629
|
+
|
|
630
|
+
return null;
|
|
631
|
+
} else {
|
|
632
|
+
// @ts-ignore rest arg is necessary for some React internals - fails tests otherwise
|
|
633
|
+
return validator.apply(void 0, [props, propName, componentName, location, propFullName].concat(rest));
|
|
634
|
+
}
|
|
635
|
+
});
|
|
636
|
+
}
|
|
637
|
+
|
|
638
|
+
var chainedCheckType = checkType.bind(null, false); // Add isRequired to satisfy Requirable
|
|
639
|
+
|
|
640
|
+
chainedCheckType.isRequired = checkType.bind(null, true);
|
|
641
|
+
return chainedCheckType;
|
|
642
|
+
} // Copied from React.PropTypes
|
|
643
|
+
|
|
644
|
+
|
|
645
|
+
function isSymbol(propType, propValue) {
|
|
646
|
+
// Native Symbol.
|
|
647
|
+
if (propType === "symbol") {
|
|
648
|
+
return true;
|
|
649
|
+
} // 19.4.3.5 Symbol.prototype[@@toStringTag] === 'Symbol'
|
|
650
|
+
|
|
651
|
+
|
|
652
|
+
if (propValue["@@toStringTag"] === "Symbol") {
|
|
653
|
+
return true;
|
|
654
|
+
} // Fallback for non-spec compliant Symbols which are polyfilled.
|
|
655
|
+
|
|
656
|
+
|
|
657
|
+
if (typeof Symbol === "function" && propValue instanceof Symbol) {
|
|
658
|
+
return true;
|
|
659
|
+
}
|
|
660
|
+
|
|
661
|
+
return false;
|
|
662
|
+
} // Copied from React.PropTypes
|
|
663
|
+
|
|
664
|
+
|
|
665
|
+
function getPropType(propValue) {
|
|
666
|
+
var propType = typeof propValue;
|
|
667
|
+
|
|
668
|
+
if (Array.isArray(propValue)) {
|
|
669
|
+
return "array";
|
|
670
|
+
}
|
|
671
|
+
|
|
672
|
+
if (propValue instanceof RegExp) {
|
|
673
|
+
// Old webkits (at least until Android 4.0) return 'function' rather than
|
|
674
|
+
// 'object' for typeof a RegExp. We'll normalize this here so that /bla/
|
|
675
|
+
// passes PropTypes.object.
|
|
676
|
+
return "object";
|
|
677
|
+
}
|
|
678
|
+
|
|
679
|
+
if (isSymbol(propType, propValue)) {
|
|
680
|
+
return "symbol";
|
|
681
|
+
}
|
|
682
|
+
|
|
683
|
+
return propType;
|
|
684
|
+
} // This handles more types than `getPropType`. Only used for error messages.
|
|
685
|
+
// Copied from React.PropTypes
|
|
686
|
+
|
|
687
|
+
|
|
688
|
+
function getPreciseType(propValue) {
|
|
689
|
+
var propType = getPropType(propValue);
|
|
690
|
+
|
|
691
|
+
if (propType === "object") {
|
|
692
|
+
if (propValue instanceof Date) {
|
|
693
|
+
return "date";
|
|
694
|
+
} else if (propValue instanceof RegExp) {
|
|
695
|
+
return "regexp";
|
|
696
|
+
}
|
|
697
|
+
}
|
|
698
|
+
|
|
699
|
+
return propType;
|
|
700
|
+
}
|
|
701
|
+
|
|
702
|
+
function createObservableTypeCheckerCreator(allowNativeType, mobxType) {
|
|
703
|
+
return createChainableTypeChecker(function (props, propName, componentName, location, propFullName) {
|
|
704
|
+
return untracked(function () {
|
|
705
|
+
if (allowNativeType) {
|
|
706
|
+
if (getPropType(props[propName]) === mobxType.toLowerCase()) return null;
|
|
707
|
+
}
|
|
708
|
+
|
|
709
|
+
var mobxChecker;
|
|
710
|
+
|
|
711
|
+
switch (mobxType) {
|
|
712
|
+
case "Array":
|
|
713
|
+
mobxChecker = isObservableArray;
|
|
714
|
+
break;
|
|
715
|
+
|
|
716
|
+
case "Object":
|
|
717
|
+
mobxChecker = isObservableObject;
|
|
718
|
+
break;
|
|
719
|
+
|
|
720
|
+
case "Map":
|
|
721
|
+
mobxChecker = isObservableMap;
|
|
722
|
+
break;
|
|
723
|
+
|
|
724
|
+
default:
|
|
725
|
+
throw new Error("Unexpected mobxType: " + mobxType);
|
|
726
|
+
}
|
|
727
|
+
|
|
728
|
+
var propValue = props[propName];
|
|
729
|
+
|
|
730
|
+
if (!mobxChecker(propValue)) {
|
|
731
|
+
var preciseType = getPreciseType(propValue);
|
|
732
|
+
var nativeTypeExpectationMessage = allowNativeType ? " or javascript `" + mobxType.toLowerCase() + "`" : "";
|
|
733
|
+
return new Error("Invalid prop `" + propFullName + "` of type `" + preciseType + "` supplied to" + " `" + componentName + "`, expected `mobx.Observable" + mobxType + "`" + nativeTypeExpectationMessage + ".");
|
|
734
|
+
}
|
|
735
|
+
|
|
736
|
+
return null;
|
|
737
|
+
});
|
|
738
|
+
});
|
|
739
|
+
}
|
|
740
|
+
|
|
741
|
+
function createObservableArrayOfTypeChecker(allowNativeType, typeChecker) {
|
|
742
|
+
return createChainableTypeChecker(function (props, propName, componentName, location, propFullName) {
|
|
743
|
+
for (var _len2 = arguments.length, rest = new Array(_len2 > 5 ? _len2 - 5 : 0), _key2 = 5; _key2 < _len2; _key2++) {
|
|
744
|
+
rest[_key2 - 5] = arguments[_key2];
|
|
745
|
+
}
|
|
746
|
+
|
|
747
|
+
return untracked(function () {
|
|
748
|
+
if (typeof typeChecker !== "function") {
|
|
749
|
+
return new Error("Property `" + propFullName + "` of component `" + componentName + "` has " + "invalid PropType notation.");
|
|
750
|
+
} else {
|
|
751
|
+
var error = createObservableTypeCheckerCreator(allowNativeType, "Array")(props, propName, componentName, location, propFullName);
|
|
752
|
+
if (error instanceof Error) return error;
|
|
753
|
+
var propValue = props[propName];
|
|
754
|
+
|
|
755
|
+
for (var i = 0; i < propValue.length; i++) {
|
|
756
|
+
error = typeChecker.apply(void 0, [propValue, i, componentName, location, propFullName + "[" + i + "]"].concat(rest));
|
|
757
|
+
if (error instanceof Error) return error;
|
|
758
|
+
}
|
|
759
|
+
|
|
760
|
+
return null;
|
|
761
|
+
}
|
|
762
|
+
});
|
|
763
|
+
});
|
|
764
|
+
}
|
|
765
|
+
|
|
766
|
+
var observableArray =
|
|
767
|
+
/*#__PURE__*/
|
|
768
|
+
createObservableTypeCheckerCreator(false, "Array");
|
|
769
|
+
var observableArrayOf =
|
|
770
|
+
/*#__PURE__*/
|
|
771
|
+
createObservableArrayOfTypeChecker.bind(null, false);
|
|
772
|
+
var observableMap =
|
|
773
|
+
/*#__PURE__*/
|
|
774
|
+
createObservableTypeCheckerCreator(false, "Map");
|
|
775
|
+
var observableObject =
|
|
776
|
+
/*#__PURE__*/
|
|
777
|
+
createObservableTypeCheckerCreator(false, "Object");
|
|
778
|
+
var arrayOrObservableArray =
|
|
779
|
+
/*#__PURE__*/
|
|
780
|
+
createObservableTypeCheckerCreator(true, "Array");
|
|
781
|
+
var arrayOrObservableArrayOf =
|
|
782
|
+
/*#__PURE__*/
|
|
783
|
+
createObservableArrayOfTypeChecker.bind(null, true);
|
|
784
|
+
var objectOrObservableObject =
|
|
785
|
+
/*#__PURE__*/
|
|
786
|
+
createObservableTypeCheckerCreator(true, "Object");
|
|
787
|
+
var PropTypes = {
|
|
788
|
+
observableArray: observableArray,
|
|
789
|
+
observableArrayOf: observableArrayOf,
|
|
790
|
+
observableMap: observableMap,
|
|
791
|
+
observableObject: observableObject,
|
|
792
|
+
arrayOrObservableArray: arrayOrObservableArray,
|
|
793
|
+
arrayOrObservableArrayOf: arrayOrObservableArrayOf,
|
|
794
|
+
objectOrObservableObject: objectOrObservableObject
|
|
795
|
+
};
|
|
796
|
+
|
|
797
|
+
if (!Component) throw new Error("mobx-react requires React to be available");
|
|
798
|
+
if (!observable) throw new Error("mobx-react requires mobx to be available");
|
|
799
|
+
if (typeof unstable_batchedUpdates === "function") configure({
|
|
800
|
+
reactionScheduler: unstable_batchedUpdates
|
|
801
|
+
});
|
|
802
|
+
|
|
803
|
+
export { MobXProviderContext, PropTypes, Provider, disposeOnUnmount, inject, observer };
|
|
804
|
+
//# sourceMappingURL=mobxreact.esm.js.map
|