mobx-react 6.1.4 → 6.1.5
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 +10 -1
- package/dist/mobx-react.js +717 -1
- package/dist/mobx-react.js.map +1 -1
- package/dist/mobx-react.module.js +704 -1
- package/dist/mobx-react.module.js.map +1 -1
- package/dist/mobx-react.rn.module.js +704 -1
- package/dist/mobx-react.umd.js +1 -1
- package/dist/mobx-react.umd.js.map +1 -1
- package/package.json +5 -2
|
@@ -1,2 +1,705 @@
|
|
|
1
|
-
import
|
|
1
|
+
import { unstable_batchedUpdates } from 'react-dom';
|
|
2
|
+
import { isUsingStaticRendering, observer, Observer } from 'mobx-react-lite';
|
|
3
|
+
export { Observer, useObserver, useAsObservableSource, useLocalStore, isUsingStaticRendering, useStaticRendering } from 'mobx-react-lite';
|
|
4
|
+
import React__default, { PureComponent, Component, forwardRef, memo, createElement } from 'react';
|
|
5
|
+
import { createAtom, _allowStateChanges, Reaction, $mobx, isObservableArray, isObservableObject, isObservableMap, untracked, observable, configure } from 'mobx';
|
|
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 (!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 = newSymbol("patchMixins");
|
|
106
|
+
var mobxPatchedDefinition = newSymbol("patchedDefinition");
|
|
107
|
+
|
|
108
|
+
function getMixins(target, methodName) {
|
|
109
|
+
var mixins = target[mobxMixins] = target[mobxMixins] || {};
|
|
110
|
+
var methodMixins = mixins[methodName] = mixins[methodName] || {};
|
|
111
|
+
methodMixins.locks = methodMixins.locks || 0;
|
|
112
|
+
methodMixins.methods = methodMixins.methods || [];
|
|
113
|
+
return methodMixins;
|
|
114
|
+
}
|
|
115
|
+
|
|
116
|
+
function wrapper(realMethod, mixins) {
|
|
117
|
+
var this$1 = this;
|
|
118
|
+
var args = [], len = arguments.length - 2;
|
|
119
|
+
while ( len-- > 0 ) args[ len ] = arguments[ len + 2 ];
|
|
120
|
+
|
|
121
|
+
// locks are used to ensure that mixins are invoked only once per invocation, even on recursive calls
|
|
122
|
+
mixins.locks++;
|
|
123
|
+
|
|
124
|
+
try {
|
|
125
|
+
var retVal;
|
|
126
|
+
|
|
127
|
+
if (realMethod !== undefined && realMethod !== null) {
|
|
128
|
+
retVal = realMethod.apply(this, args);
|
|
129
|
+
}
|
|
130
|
+
|
|
131
|
+
return retVal;
|
|
132
|
+
} finally {
|
|
133
|
+
mixins.locks--;
|
|
134
|
+
|
|
135
|
+
if (mixins.locks === 0) {
|
|
136
|
+
mixins.methods.forEach(function (mx) {
|
|
137
|
+
mx.apply(this$1, args);
|
|
138
|
+
});
|
|
139
|
+
}
|
|
140
|
+
}
|
|
141
|
+
}
|
|
142
|
+
|
|
143
|
+
function wrapFunction(realMethod, mixins) {
|
|
144
|
+
var fn = function () {
|
|
145
|
+
var args = [], len = arguments.length;
|
|
146
|
+
while ( len-- ) args[ len ] = arguments[ len ];
|
|
147
|
+
|
|
148
|
+
wrapper.call.apply(wrapper, [ this, realMethod, mixins ].concat( args ));
|
|
149
|
+
};
|
|
150
|
+
|
|
151
|
+
return fn;
|
|
152
|
+
}
|
|
153
|
+
|
|
154
|
+
function patch(target, methodName, mixinMethod) {
|
|
155
|
+
var mixins = getMixins(target, methodName);
|
|
156
|
+
|
|
157
|
+
if (mixins.methods.indexOf(mixinMethod) < 0) {
|
|
158
|
+
mixins.methods.push(mixinMethod);
|
|
159
|
+
}
|
|
160
|
+
|
|
161
|
+
var oldDefinition = Object.getOwnPropertyDescriptor(target, methodName);
|
|
162
|
+
|
|
163
|
+
if (oldDefinition && oldDefinition[mobxPatchedDefinition]) {
|
|
164
|
+
// already patched definition, do not repatch
|
|
165
|
+
return;
|
|
166
|
+
}
|
|
167
|
+
|
|
168
|
+
var originalMethod = target[methodName];
|
|
169
|
+
var newDefinition = createDefinition(target, methodName, oldDefinition ? oldDefinition.enumerable : undefined, mixins, originalMethod);
|
|
170
|
+
Object.defineProperty(target, methodName, newDefinition);
|
|
171
|
+
}
|
|
172
|
+
|
|
173
|
+
function createDefinition(target, methodName, enumerable, mixins, originalMethod) {
|
|
174
|
+
var obj;
|
|
175
|
+
|
|
176
|
+
var wrappedFunc = wrapFunction(originalMethod, mixins);
|
|
177
|
+
return ( obj = {}, obj[mobxPatchedDefinition] = true, obj.get = function () {
|
|
178
|
+
return wrappedFunc;
|
|
179
|
+
}, obj.set = function (value) {
|
|
180
|
+
if (this === target) {
|
|
181
|
+
wrappedFunc = wrapFunction(value, mixins);
|
|
182
|
+
} else {
|
|
183
|
+
// when it is an instance of the prototype/a child prototype patch that particular case again separately
|
|
184
|
+
// since we need to store separate values depending on wether it is the actual instance, the prototype, etc
|
|
185
|
+
// e.g. the method for super might not be the same as the method for the prototype which might be not the same
|
|
186
|
+
// as the method for the instance
|
|
187
|
+
var newDefinition = createDefinition(this, methodName, enumerable, mixins, value);
|
|
188
|
+
Object.defineProperty(this, methodName, newDefinition);
|
|
189
|
+
}
|
|
190
|
+
}, obj.configurable = true, obj.enumerable = enumerable, obj );
|
|
191
|
+
}
|
|
192
|
+
|
|
193
|
+
var mobxAdminProperty = $mobx || "$mobx";
|
|
194
|
+
var mobxIsUnmounted = newSymbol("isUnmounted");
|
|
195
|
+
var skipRenderKey = newSymbol("skipRender");
|
|
196
|
+
var isForcingUpdateKey = newSymbol("isForcingUpdate");
|
|
197
|
+
function makeClassComponentObserver(componentClass) {
|
|
198
|
+
var target = componentClass.prototype;
|
|
199
|
+
if (target.componentWillReact) { throw new Error("The componentWillReact life-cycle event is no longer supported"); }
|
|
200
|
+
|
|
201
|
+
if (componentClass.__proto__ !== PureComponent) {
|
|
202
|
+
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
|
|
203
|
+
{ throw new Error("It is not allowed to use shouldComponentUpdate in observer based components."); }
|
|
204
|
+
} // this.props and this.state are made observable, just to make sure @computed fields that
|
|
205
|
+
// are defined inside the component, and which rely on state or props, re-compute if state or props change
|
|
206
|
+
// (otherwise the computed wouldn't update and become stale on props change, since props are not observable)
|
|
207
|
+
// 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+
|
|
208
|
+
|
|
209
|
+
|
|
210
|
+
makeObservableProp(target, "props");
|
|
211
|
+
makeObservableProp(target, "state");
|
|
212
|
+
var baseRender = target.render;
|
|
213
|
+
|
|
214
|
+
target.render = function () {
|
|
215
|
+
return makeComponentReactive.call(this, baseRender);
|
|
216
|
+
};
|
|
217
|
+
|
|
218
|
+
patch(target, "componentWillUnmount", function () {
|
|
219
|
+
if (isUsingStaticRendering() === true) { return; }
|
|
220
|
+
|
|
221
|
+
if (this.render[mobxAdminProperty]) {
|
|
222
|
+
this.render[mobxAdminProperty].dispose();
|
|
223
|
+
} else if (process.env.NODE_ENV !== "production") {
|
|
224
|
+
var displayName = getDisplayName(this);
|
|
225
|
+
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."));
|
|
226
|
+
}
|
|
227
|
+
|
|
228
|
+
this[mobxIsUnmounted] = true;
|
|
229
|
+
});
|
|
230
|
+
return componentClass;
|
|
231
|
+
} // Generates a friendly name for debugging
|
|
232
|
+
|
|
233
|
+
function getDisplayName(comp) {
|
|
234
|
+
return comp.displayName || comp.name || comp.constructor && (comp.constructor.displayName || comp.constructor.name) || "<component>";
|
|
235
|
+
}
|
|
236
|
+
|
|
237
|
+
function makeComponentReactive(render) {
|
|
238
|
+
var this$1 = this;
|
|
239
|
+
|
|
240
|
+
if (isUsingStaticRendering() === true) { return render.call(this); }
|
|
241
|
+
/**
|
|
242
|
+
* If props are shallowly modified, react will render anyway,
|
|
243
|
+
* so atom.reportChanged() should not result in yet another re-render
|
|
244
|
+
*/
|
|
245
|
+
|
|
246
|
+
setHiddenProp(this, skipRenderKey, false);
|
|
247
|
+
/**
|
|
248
|
+
* forceUpdate will re-assign this.props. We don't want that to cause a loop,
|
|
249
|
+
* so detect these changes
|
|
250
|
+
*/
|
|
251
|
+
|
|
252
|
+
setHiddenProp(this, isForcingUpdateKey, false);
|
|
253
|
+
var initialName = getDisplayName(this);
|
|
254
|
+
var baseRender = render.bind(this);
|
|
255
|
+
var isRenderingPending = false;
|
|
256
|
+
var reaction = new Reaction((initialName + ".render()"), function () {
|
|
257
|
+
if (!isRenderingPending) {
|
|
258
|
+
// N.B. Getting here *before mounting* means that a component constructor has side effects (see the relevant test in misc.js)
|
|
259
|
+
// This unidiomatic React usage but React will correctly warn about this so we continue as usual
|
|
260
|
+
// See #85 / Pull #44
|
|
261
|
+
isRenderingPending = true;
|
|
262
|
+
|
|
263
|
+
if (this$1[mobxIsUnmounted] !== true) {
|
|
264
|
+
var hasError = true;
|
|
265
|
+
|
|
266
|
+
try {
|
|
267
|
+
setHiddenProp(this$1, isForcingUpdateKey, true);
|
|
268
|
+
if (!this$1[skipRenderKey]) { Component.prototype.forceUpdate.call(this$1); }
|
|
269
|
+
hasError = false;
|
|
270
|
+
} finally {
|
|
271
|
+
setHiddenProp(this$1, isForcingUpdateKey, false);
|
|
272
|
+
if (hasError) { reaction.dispose(); }
|
|
273
|
+
}
|
|
274
|
+
}
|
|
275
|
+
}
|
|
276
|
+
});
|
|
277
|
+
reaction.reactComponent = this;
|
|
278
|
+
reactiveRender[mobxAdminProperty] = reaction;
|
|
279
|
+
this.render = reactiveRender;
|
|
280
|
+
|
|
281
|
+
function reactiveRender() {
|
|
282
|
+
isRenderingPending = false;
|
|
283
|
+
var exception = undefined;
|
|
284
|
+
var rendering = undefined;
|
|
285
|
+
reaction.track(function () {
|
|
286
|
+
try {
|
|
287
|
+
rendering = _allowStateChanges(false, baseRender);
|
|
288
|
+
} catch (e) {
|
|
289
|
+
exception = e;
|
|
290
|
+
}
|
|
291
|
+
});
|
|
292
|
+
|
|
293
|
+
if (exception) {
|
|
294
|
+
throw exception;
|
|
295
|
+
}
|
|
296
|
+
|
|
297
|
+
return rendering;
|
|
298
|
+
}
|
|
299
|
+
|
|
300
|
+
return reactiveRender.call(this);
|
|
301
|
+
}
|
|
302
|
+
|
|
303
|
+
function observerSCU(nextProps, nextState) {
|
|
304
|
+
if (isUsingStaticRendering()) {
|
|
305
|
+
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.");
|
|
306
|
+
} // update on any state changes (as is the default)
|
|
307
|
+
|
|
308
|
+
|
|
309
|
+
if (this.state !== nextState) {
|
|
310
|
+
return true;
|
|
311
|
+
} // update if props are shallowly not equal, inspired by PureRenderMixin
|
|
312
|
+
// we could return just 'false' here, and avoid the `skipRender` checks etc
|
|
313
|
+
// however, it is nicer if lifecycle events are triggered like usually,
|
|
314
|
+
// so we return true here if props are shallowly modified.
|
|
315
|
+
|
|
316
|
+
|
|
317
|
+
return !shallowEqual(this.props, nextProps);
|
|
318
|
+
}
|
|
319
|
+
|
|
320
|
+
function makeObservableProp(target, propName) {
|
|
321
|
+
var valueHolderKey = newSymbol(("reactProp_" + propName + "_valueHolder"));
|
|
322
|
+
var atomHolderKey = newSymbol(("reactProp_" + propName + "_atomHolder"));
|
|
323
|
+
|
|
324
|
+
function getAtom() {
|
|
325
|
+
if (!this[atomHolderKey]) {
|
|
326
|
+
setHiddenProp(this, atomHolderKey, createAtom("reactive " + propName));
|
|
327
|
+
}
|
|
328
|
+
|
|
329
|
+
return this[atomHolderKey];
|
|
330
|
+
}
|
|
331
|
+
|
|
332
|
+
Object.defineProperty(target, propName, {
|
|
333
|
+
configurable: true,
|
|
334
|
+
enumerable: true,
|
|
335
|
+
get: function () {
|
|
336
|
+
getAtom.call(this).reportObserved();
|
|
337
|
+
return this[valueHolderKey];
|
|
338
|
+
},
|
|
339
|
+
set: function set(v) {
|
|
340
|
+
if (!this[isForcingUpdateKey] && !shallowEqual(this[valueHolderKey], v)) {
|
|
341
|
+
setHiddenProp(this, valueHolderKey, v);
|
|
342
|
+
setHiddenProp(this, skipRenderKey, true);
|
|
343
|
+
getAtom.call(this).reportChanged();
|
|
344
|
+
setHiddenProp(this, skipRenderKey, false);
|
|
345
|
+
} else {
|
|
346
|
+
setHiddenProp(this, valueHolderKey, v);
|
|
347
|
+
}
|
|
348
|
+
}
|
|
349
|
+
});
|
|
350
|
+
}
|
|
351
|
+
|
|
352
|
+
/* eslint-disable react/display-name */
|
|
353
|
+
var hasSymbol = typeof Symbol === "function" && Symbol.for; // Using react-is had some issues (and operates on elements, not on types), see #608 / #609
|
|
354
|
+
|
|
355
|
+
var ReactForwardRefSymbol = hasSymbol ? Symbol.for("react.forward_ref") : typeof forwardRef === "function" && forwardRef(function () {})["$$typeof"];
|
|
356
|
+
var ReactMemoSymbol = hasSymbol ? Symbol.for("react.memo") : typeof memo === "function" && memo(function () {})["$$typeof"];
|
|
357
|
+
/**
|
|
358
|
+
* Observer function / decorator
|
|
359
|
+
*/
|
|
360
|
+
|
|
361
|
+
function observer$1(componentClass) {
|
|
362
|
+
if (componentClass.isMobxInjector === true) {
|
|
363
|
+
console.warn("Mobx observer: You are trying to use 'observer' on a component that already has 'inject'. Please apply 'observer' before applying 'inject'");
|
|
364
|
+
}
|
|
365
|
+
|
|
366
|
+
if (ReactMemoSymbol && componentClass["$$typeof"] === ReactMemoSymbol) {
|
|
367
|
+
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.");
|
|
368
|
+
} // Unwrap forward refs into `<Observer>` component
|
|
369
|
+
// we need to unwrap the render, because it is the inner render that needs to be tracked,
|
|
370
|
+
// not the ForwardRef HoC
|
|
371
|
+
|
|
372
|
+
|
|
373
|
+
if (ReactForwardRefSymbol && componentClass["$$typeof"] === ReactForwardRefSymbol) {
|
|
374
|
+
var baseRender = componentClass.render;
|
|
375
|
+
if (typeof baseRender !== "function") { throw new Error("render property of ForwardRef was not a function"); }
|
|
376
|
+
return forwardRef(function ObserverForwardRef() {
|
|
377
|
+
var arguments$1 = arguments;
|
|
378
|
+
|
|
379
|
+
return React__default.createElement( Observer, null, function () { return baseRender.apply(undefined, arguments$1); } );
|
|
380
|
+
});
|
|
381
|
+
} // Function component
|
|
382
|
+
|
|
383
|
+
|
|
384
|
+
if (typeof componentClass === "function" && (!componentClass.prototype || !componentClass.prototype.render) && !componentClass.isReactClass && !Object.prototype.isPrototypeOf.call(Component, componentClass)) {
|
|
385
|
+
return observer(componentClass);
|
|
386
|
+
}
|
|
387
|
+
|
|
388
|
+
return makeClassComponentObserver(componentClass);
|
|
389
|
+
}
|
|
390
|
+
|
|
391
|
+
/* eslint-disable react/prop-types */
|
|
392
|
+
function objectWithoutProperties (obj, exclude) { var target = {}; for (var k in obj) if (Object.prototype.hasOwnProperty.call(obj, k) && exclude.indexOf(k) === -1) target[k] = obj[k]; return target; }
|
|
393
|
+
var MobXProviderContext = React__default.createContext({});
|
|
394
|
+
function Provider(ref) {
|
|
395
|
+
var children = ref.children;
|
|
396
|
+
var rest = objectWithoutProperties( ref, ["children"] );
|
|
397
|
+
var stores = rest;
|
|
398
|
+
|
|
399
|
+
var parentValue = React__default.useContext(MobXProviderContext);
|
|
400
|
+
var value = React__default.useRef(Object.assign({}, parentValue,
|
|
401
|
+
stores)).current;
|
|
402
|
+
|
|
403
|
+
if (process && typeof process.env !== "undefined" && process.env.NODE_ENV !== "production") {
|
|
404
|
+
var newValue = Object.assign({}, value,
|
|
405
|
+
stores); // spread in previous state for the context based stores
|
|
406
|
+
|
|
407
|
+
if (!shallowEqual(value, newValue)) {
|
|
408
|
+
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.");
|
|
409
|
+
}
|
|
410
|
+
}
|
|
411
|
+
|
|
412
|
+
return React__default.createElement( MobXProviderContext.Provider, { value: value }, children);
|
|
413
|
+
}
|
|
414
|
+
Provider.displayName = "MobXProvider";
|
|
415
|
+
|
|
416
|
+
/**
|
|
417
|
+
* Store Injection
|
|
418
|
+
*/
|
|
419
|
+
|
|
420
|
+
function createStoreInjector(grabStoresFn, component, injectNames, makeReactive) {
|
|
421
|
+
// Support forward refs
|
|
422
|
+
var Injector = React__default.forwardRef(function (props, ref) {
|
|
423
|
+
var newProps = Object.assign({}, props);
|
|
424
|
+
var context = React__default.useContext(MobXProviderContext);
|
|
425
|
+
Object.assign(newProps, grabStoresFn(context || {}, newProps) || {});
|
|
426
|
+
|
|
427
|
+
if (ref) {
|
|
428
|
+
newProps.ref = ref;
|
|
429
|
+
}
|
|
430
|
+
|
|
431
|
+
return createElement(component, newProps);
|
|
432
|
+
});
|
|
433
|
+
if (makeReactive) { Injector = observer$1(Injector); }
|
|
434
|
+
Injector.isMobxInjector = true; // assigned late to suppress observer warning
|
|
435
|
+
// Static fields from component should be visible on the generated Injector
|
|
436
|
+
|
|
437
|
+
copyStaticProperties(component, Injector);
|
|
438
|
+
Injector.wrappedComponent = component;
|
|
439
|
+
Injector.displayName = getInjectName(component, injectNames);
|
|
440
|
+
return Injector;
|
|
441
|
+
}
|
|
442
|
+
|
|
443
|
+
function getInjectName(component, injectNames) {
|
|
444
|
+
var displayName;
|
|
445
|
+
var componentName = component.displayName || component.name || component.constructor && component.constructor.name || "Component";
|
|
446
|
+
if (injectNames) { displayName = "inject-with-" + injectNames + "(" + componentName + ")"; }else { displayName = "inject(" + componentName + ")"; }
|
|
447
|
+
return displayName;
|
|
448
|
+
}
|
|
449
|
+
|
|
450
|
+
function grabStoresByName(storeNames) {
|
|
451
|
+
return function (baseStores, nextProps) {
|
|
452
|
+
storeNames.forEach(function (storeName) {
|
|
453
|
+
if (storeName in nextProps // prefer props over stores
|
|
454
|
+
) { return; }
|
|
455
|
+
if (!(storeName in baseStores)) { throw new Error("MobX injector: Store '" + storeName + "' is not available! Make sure it is provided by some Provider"); }
|
|
456
|
+
nextProps[storeName] = baseStores[storeName];
|
|
457
|
+
});
|
|
458
|
+
return nextProps;
|
|
459
|
+
};
|
|
460
|
+
}
|
|
461
|
+
/**
|
|
462
|
+
* higher order component that injects stores to a child.
|
|
463
|
+
* takes either a varargs list of strings, which are stores read from the context,
|
|
464
|
+
* or a function that manually maps the available stores from the context to props:
|
|
465
|
+
* storesToProps(mobxStores, props, context) => newProps
|
|
466
|
+
*/
|
|
467
|
+
|
|
468
|
+
|
|
469
|
+
function inject(
|
|
470
|
+
/* fn(stores, nextProps) or ...storeNames */) {
|
|
471
|
+
var storeNames = [], len = arguments.length;
|
|
472
|
+
while ( len-- ) storeNames[ len ] = arguments[ len ];
|
|
473
|
+
|
|
474
|
+
var grabStoresFn;
|
|
475
|
+
|
|
476
|
+
if (typeof arguments[0] === "function") {
|
|
477
|
+
grabStoresFn = arguments[0];
|
|
478
|
+
return function (componentClass) { return createStoreInjector(grabStoresFn, componentClass, grabStoresFn.name, true); };
|
|
479
|
+
} else {
|
|
480
|
+
return function (componentClass) { return createStoreInjector(grabStoresByName(storeNames), componentClass, storeNames.join("-"), false); };
|
|
481
|
+
}
|
|
482
|
+
}
|
|
483
|
+
|
|
484
|
+
var protoStoreKey = newSymbol("disposeOnUnmountProto");
|
|
485
|
+
var instStoreKey = newSymbol("disposeOnUnmountInst");
|
|
486
|
+
|
|
487
|
+
function runDisposersOnWillUnmount() {
|
|
488
|
+
var this$1 = this;
|
|
489
|
+
(this[protoStoreKey] || []).concat( (this[instStoreKey] || [])).forEach(function (propKeyOrFunction) {
|
|
490
|
+
var prop = typeof propKeyOrFunction === "string" ? this$1[propKeyOrFunction] : propKeyOrFunction;
|
|
491
|
+
|
|
492
|
+
if (prop !== undefined && prop !== null) {
|
|
493
|
+
if (Array.isArray(prop)) { prop.map(function (f) { return f(); }); }else { prop(); }
|
|
494
|
+
}
|
|
495
|
+
});
|
|
496
|
+
}
|
|
497
|
+
|
|
498
|
+
function disposeOnUnmount(target, propertyKeyOrFunction) {
|
|
499
|
+
if (Array.isArray(propertyKeyOrFunction)) {
|
|
500
|
+
return propertyKeyOrFunction.map(function (fn) { return disposeOnUnmount(target, fn); });
|
|
501
|
+
}
|
|
502
|
+
|
|
503
|
+
var c = Object.getPrototypeOf(target).constructor || Object.getPrototypeOf(target.constructor);
|
|
504
|
+
var c2 = Object.getPrototypeOf(target.constructor);
|
|
505
|
+
|
|
506
|
+
if (!(c === Component || c === PureComponent || c2 === Component || c2 === PureComponent)) {
|
|
507
|
+
throw new Error("[mobx-react] disposeOnUnmount only supports direct subclasses of React.Component or React.PureComponent.");
|
|
508
|
+
}
|
|
509
|
+
|
|
510
|
+
if (typeof propertyKeyOrFunction !== "string" && typeof propertyKeyOrFunction !== "function" && !Array.isArray(propertyKeyOrFunction)) {
|
|
511
|
+
throw new Error("[mobx-react] disposeOnUnmount only works if the parameter is either a property key or a function.");
|
|
512
|
+
} // decorator's target is the prototype, so it doesn't have any instance properties like props
|
|
513
|
+
|
|
514
|
+
|
|
515
|
+
var isDecorator = typeof propertyKeyOrFunction === "string"; // add property key / function we want run (disposed) to the store
|
|
516
|
+
|
|
517
|
+
var componentWasAlreadyModified = !!target[protoStoreKey] || !!target[instStoreKey];
|
|
518
|
+
var store = isDecorator ? // decorators are added to the prototype store
|
|
519
|
+
target[protoStoreKey] || (target[protoStoreKey] = []) : // functions are added to the instance store
|
|
520
|
+
target[instStoreKey] || (target[instStoreKey] = []);
|
|
521
|
+
store.push(propertyKeyOrFunction); // tweak the component class componentWillUnmount if not done already
|
|
522
|
+
|
|
523
|
+
if (!componentWasAlreadyModified) {
|
|
524
|
+
patch(target, "componentWillUnmount", runDisposersOnWillUnmount);
|
|
525
|
+
} // return the disposer as is if invoked as a non decorator
|
|
526
|
+
|
|
527
|
+
|
|
528
|
+
if (typeof propertyKeyOrFunction !== "string") {
|
|
529
|
+
return propertyKeyOrFunction;
|
|
530
|
+
}
|
|
531
|
+
}
|
|
532
|
+
|
|
533
|
+
function createChainableTypeChecker(validate) {
|
|
534
|
+
function checkType(isRequired, props, propName, componentName, location, propFullName) {
|
|
535
|
+
var rest = [], len = arguments.length - 6;
|
|
536
|
+
while ( len-- > 0 ) rest[ len ] = arguments[ len + 6 ];
|
|
537
|
+
|
|
538
|
+
return untracked(function () {
|
|
539
|
+
componentName = componentName || "<<anonymous>>";
|
|
540
|
+
propFullName = propFullName || propName;
|
|
541
|
+
|
|
542
|
+
if (props[propName] == null) {
|
|
543
|
+
if (isRequired) {
|
|
544
|
+
var actual = props[propName] === null ? "null" : "undefined";
|
|
545
|
+
return new Error("The " + location + " `" + propFullName + "` is marked as required " + "in `" + componentName + "`, but its value is `" + actual + "`.");
|
|
546
|
+
}
|
|
547
|
+
|
|
548
|
+
return null;
|
|
549
|
+
} else {
|
|
550
|
+
return validate.apply(void 0, [ props, propName, componentName, location, propFullName ].concat( rest ));
|
|
551
|
+
}
|
|
552
|
+
});
|
|
553
|
+
}
|
|
554
|
+
|
|
555
|
+
var chainedCheckType = checkType.bind(null, false);
|
|
556
|
+
chainedCheckType.isRequired = checkType.bind(null, true);
|
|
557
|
+
return chainedCheckType;
|
|
558
|
+
} // Copied from React.PropTypes
|
|
559
|
+
|
|
560
|
+
|
|
561
|
+
function isSymbol(propType, propValue) {
|
|
562
|
+
// Native Symbol.
|
|
563
|
+
if (propType === "symbol") {
|
|
564
|
+
return true;
|
|
565
|
+
} // 19.4.3.5 Symbol.prototype[@@toStringTag] === 'Symbol'
|
|
566
|
+
|
|
567
|
+
|
|
568
|
+
if (propValue["@@toStringTag"] === "Symbol") {
|
|
569
|
+
return true;
|
|
570
|
+
} // Fallback for non-spec compliant Symbols which are polyfilled.
|
|
571
|
+
|
|
572
|
+
|
|
573
|
+
if (typeof Symbol === "function" && propValue instanceof Symbol) {
|
|
574
|
+
return true;
|
|
575
|
+
}
|
|
576
|
+
|
|
577
|
+
return false;
|
|
578
|
+
} // Copied from React.PropTypes
|
|
579
|
+
|
|
580
|
+
|
|
581
|
+
function getPropType(propValue) {
|
|
582
|
+
var propType = typeof propValue;
|
|
583
|
+
|
|
584
|
+
if (Array.isArray(propValue)) {
|
|
585
|
+
return "array";
|
|
586
|
+
}
|
|
587
|
+
|
|
588
|
+
if (propValue instanceof RegExp) {
|
|
589
|
+
// Old webkits (at least until Android 4.0) return 'function' rather than
|
|
590
|
+
// 'object' for typeof a RegExp. We'll normalize this here so that /bla/
|
|
591
|
+
// passes PropTypes.object.
|
|
592
|
+
return "object";
|
|
593
|
+
}
|
|
594
|
+
|
|
595
|
+
if (isSymbol(propType, propValue)) {
|
|
596
|
+
return "symbol";
|
|
597
|
+
}
|
|
598
|
+
|
|
599
|
+
return propType;
|
|
600
|
+
} // This handles more types than `getPropType`. Only used for error messages.
|
|
601
|
+
// Copied from React.PropTypes
|
|
602
|
+
|
|
603
|
+
|
|
604
|
+
function getPreciseType(propValue) {
|
|
605
|
+
var propType = getPropType(propValue);
|
|
606
|
+
|
|
607
|
+
if (propType === "object") {
|
|
608
|
+
if (propValue instanceof Date) {
|
|
609
|
+
return "date";
|
|
610
|
+
} else if (propValue instanceof RegExp) {
|
|
611
|
+
return "regexp";
|
|
612
|
+
}
|
|
613
|
+
}
|
|
614
|
+
|
|
615
|
+
return propType;
|
|
616
|
+
}
|
|
617
|
+
|
|
618
|
+
function createObservableTypeCheckerCreator(allowNativeType, mobxType) {
|
|
619
|
+
return createChainableTypeChecker(function (props, propName, componentName, location, propFullName) {
|
|
620
|
+
return untracked(function () {
|
|
621
|
+
if (allowNativeType) {
|
|
622
|
+
if (getPropType(props[propName]) === mobxType.toLowerCase()) { return null; }
|
|
623
|
+
}
|
|
624
|
+
|
|
625
|
+
var mobxChecker;
|
|
626
|
+
|
|
627
|
+
switch (mobxType) {
|
|
628
|
+
case "Array":
|
|
629
|
+
mobxChecker = isObservableArray;
|
|
630
|
+
break;
|
|
631
|
+
|
|
632
|
+
case "Object":
|
|
633
|
+
mobxChecker = isObservableObject;
|
|
634
|
+
break;
|
|
635
|
+
|
|
636
|
+
case "Map":
|
|
637
|
+
mobxChecker = isObservableMap;
|
|
638
|
+
break;
|
|
639
|
+
|
|
640
|
+
default:
|
|
641
|
+
throw new Error(("Unexpected mobxType: " + mobxType));
|
|
642
|
+
}
|
|
643
|
+
|
|
644
|
+
var propValue = props[propName];
|
|
645
|
+
|
|
646
|
+
if (!mobxChecker(propValue)) {
|
|
647
|
+
var preciseType = getPreciseType(propValue);
|
|
648
|
+
var nativeTypeExpectationMessage = allowNativeType ? " or javascript `" + mobxType.toLowerCase() + "`" : "";
|
|
649
|
+
return new Error("Invalid prop `" + propFullName + "` of type `" + preciseType + "` supplied to" + " `" + componentName + "`, expected `mobx.Observable" + mobxType + "`" + nativeTypeExpectationMessage + ".");
|
|
650
|
+
}
|
|
651
|
+
|
|
652
|
+
return null;
|
|
653
|
+
});
|
|
654
|
+
});
|
|
655
|
+
}
|
|
656
|
+
|
|
657
|
+
function createObservableArrayOfTypeChecker(allowNativeType, typeChecker) {
|
|
658
|
+
return createChainableTypeChecker(function (props, propName, componentName, location, propFullName) {
|
|
659
|
+
var rest = [], len = arguments.length - 5;
|
|
660
|
+
while ( len-- > 0 ) rest[ len ] = arguments[ len + 5 ];
|
|
661
|
+
|
|
662
|
+
return untracked(function () {
|
|
663
|
+
if (typeof typeChecker !== "function") {
|
|
664
|
+
return new Error("Property `" + propFullName + "` of component `" + componentName + "` has " + "invalid PropType notation.");
|
|
665
|
+
}
|
|
666
|
+
|
|
667
|
+
var error = createObservableTypeCheckerCreator(allowNativeType, "Array")(props, propName, componentName);
|
|
668
|
+
if (error instanceof Error) { return error; }
|
|
669
|
+
var propValue = props[propName];
|
|
670
|
+
|
|
671
|
+
for (var i = 0; i < propValue.length; i++) {
|
|
672
|
+
error = typeChecker.apply(void 0, [ propValue, i, componentName, location, propFullName + "[" + i + "]" ].concat( rest ));
|
|
673
|
+
if (error instanceof Error) { return error; }
|
|
674
|
+
}
|
|
675
|
+
|
|
676
|
+
return null;
|
|
677
|
+
});
|
|
678
|
+
});
|
|
679
|
+
}
|
|
680
|
+
|
|
681
|
+
var observableArray = createObservableTypeCheckerCreator(false, "Array");
|
|
682
|
+
var observableArrayOf = createObservableArrayOfTypeChecker.bind(null, false);
|
|
683
|
+
var observableMap = createObservableTypeCheckerCreator(false, "Map");
|
|
684
|
+
var observableObject = createObservableTypeCheckerCreator(false, "Object");
|
|
685
|
+
var arrayOrObservableArray = createObservableTypeCheckerCreator(true, "Array");
|
|
686
|
+
var arrayOrObservableArrayOf = createObservableArrayOfTypeChecker.bind(null, true);
|
|
687
|
+
var objectOrObservableObject = createObservableTypeCheckerCreator(true, "Object");
|
|
688
|
+
var PropTypes = {
|
|
689
|
+
observableArray: observableArray,
|
|
690
|
+
observableArrayOf: observableArrayOf,
|
|
691
|
+
observableMap: observableMap,
|
|
692
|
+
observableObject: observableObject,
|
|
693
|
+
arrayOrObservableArray: arrayOrObservableArray,
|
|
694
|
+
arrayOrObservableArrayOf: arrayOrObservableArrayOf,
|
|
695
|
+
objectOrObservableObject: objectOrObservableObject
|
|
696
|
+
};
|
|
697
|
+
|
|
698
|
+
if (!Component) { throw new Error("mobx-react requires React to be available"); }
|
|
699
|
+
if (!observable) { throw new Error("mobx-react requires mobx to be available"); }
|
|
700
|
+
if (typeof unstable_batchedUpdates === "function") { configure({
|
|
701
|
+
reactionScheduler: unstable_batchedUpdates
|
|
702
|
+
}); }
|
|
703
|
+
|
|
704
|
+
export { observer$1 as observer, Provider, MobXProviderContext, inject, disposeOnUnmount, PropTypes };
|
|
2
705
|
//# sourceMappingURL=mobx-react.module.js.map
|