mobx-react 9.2.2 → 10.0.1
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 +82 -0
- package/README.md +8 -264
- package/dist/index.d.ts +1 -6
- package/dist/mobxreact.cjs.development.js +101 -449
- package/dist/mobxreact.cjs.development.js.map +1 -1
- package/dist/mobxreact.cjs.production.min.js +1 -1
- package/dist/mobxreact.cjs.production.min.js.map +1 -1
- package/dist/mobxreact.esm.development.js +76 -405
- package/dist/mobxreact.esm.development.js.map +1 -1
- package/dist/mobxreact.esm.js +80 -407
- package/dist/mobxreact.esm.js.map +1 -1
- package/dist/mobxreact.esm.production.min.js +1 -1
- package/dist/mobxreact.esm.production.min.js.map +1 -1
- package/dist/mobxreact.mjs +340 -0
- package/dist/mobxreact.mjs.map +1 -0
- package/dist/mobxreact.umd.development.js +103 -450
- package/dist/mobxreact.umd.development.js.map +1 -1
- package/dist/mobxreact.umd.production.min.js +1 -1
- package/dist/mobxreact.umd.production.min.js.map +1 -1
- package/dist/utils/utils.d.ts +0 -8
- package/package.json +30 -20
- package/src/index.ts +3 -12
- package/src/observer.tsx +9 -8
- package/src/utils/utils.ts +0 -46
- package/batchingForReactDom.js +0 -1
- package/batchingForReactNative.js +0 -1
- package/batchingOptOut.js +0 -1
- package/dist/Provider.d.ts +0 -10
- package/dist/disposeOnUnmount.d.ts +0 -11
- package/dist/inject.d.ts +0 -6
- package/dist/propTypes.d.ts +0 -9
- package/dist/types/IStoresToProps.d.ts +0 -2
- package/dist/types/IValueMap.d.ts +0 -1
- package/dist/types/IWrappedComponent.d.ts +0 -4
- package/src/Provider.tsx +0 -29
- package/src/disposeOnUnmount.ts +0 -111
- package/src/inject.ts +0 -107
- package/src/propTypes.ts +0 -210
- package/src/types/IStoresToProps.ts +0 -7
- package/src/types/IValueMap.ts +0 -1
- package/src/types/IWrappedComponent.ts +0 -4
package/dist/mobxreact.esm.js
CHANGED
|
@@ -1,7 +1,10 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
1
|
+
const __MOBX_DEV__ = process.env.NODE_ENV !== "production";
|
|
2
|
+
|
|
3
|
+
import { _allowStateChanges, Reaction, _getGlobalState, observable } from 'mobx';
|
|
4
|
+
import * as React from 'react';
|
|
5
|
+
import { PureComponent, Component } from 'react';
|
|
3
6
|
import { isUsingStaticRendering, _observerFinalizationRegistry, observer as observer$1 } from 'mobx-react-lite';
|
|
4
|
-
export { Observer,
|
|
7
|
+
export { Observer, _observerFinalizationRegistry, clearTimers, enableStaticRendering, isUsingStaticRendering, useLocalObservable } from 'mobx-react-lite';
|
|
5
8
|
|
|
6
9
|
function shallowEqual(objA, objB) {
|
|
7
10
|
//From: https://github.com/facebook/fbjs/blob/c69904a511b900266935168223063dd8772dfc40/packages/fbjs/src/core/shallowEqual.js
|
|
@@ -11,12 +14,12 @@ function shallowEqual(objA, objB) {
|
|
|
11
14
|
if (typeof objA !== "object" || objA === null || typeof objB !== "object" || objB === null) {
|
|
12
15
|
return false;
|
|
13
16
|
}
|
|
14
|
-
|
|
15
|
-
|
|
17
|
+
const keysA = Object.keys(objA);
|
|
18
|
+
const keysB = Object.keys(objB);
|
|
16
19
|
if (keysA.length !== keysB.length) {
|
|
17
20
|
return false;
|
|
18
21
|
}
|
|
19
|
-
for (
|
|
22
|
+
for (let i = 0; i < keysA.length; i++) {
|
|
20
23
|
if (!Object.hasOwnProperty.call(objB, keysA[i]) || !is(objA[keysA[i]], objB[keysA[i]])) {
|
|
21
24
|
return false;
|
|
22
25
|
}
|
|
@@ -31,53 +34,24 @@ function is(x, y) {
|
|
|
31
34
|
return x !== x && y !== y;
|
|
32
35
|
}
|
|
33
36
|
}
|
|
34
|
-
// based on https://github.com/mridgway/hoist-non-react-statics/blob/master/src/index.js
|
|
35
|
-
var hoistBlackList = {
|
|
36
|
-
$$typeof: 1,
|
|
37
|
-
render: 1,
|
|
38
|
-
compare: 1,
|
|
39
|
-
type: 1,
|
|
40
|
-
childContextTypes: 1,
|
|
41
|
-
contextType: 1,
|
|
42
|
-
contextTypes: 1,
|
|
43
|
-
defaultProps: 1,
|
|
44
|
-
getDefaultProps: 1,
|
|
45
|
-
getDerivedStateFromError: 1,
|
|
46
|
-
getDerivedStateFromProps: 1,
|
|
47
|
-
mixins: 1,
|
|
48
|
-
displayName: 1,
|
|
49
|
-
propTypes: 1
|
|
50
|
-
};
|
|
51
|
-
function copyStaticProperties(base, target) {
|
|
52
|
-
var protoProps = Object.getOwnPropertyNames(Object.getPrototypeOf(base));
|
|
53
|
-
Object.getOwnPropertyNames(base).forEach(function (key) {
|
|
54
|
-
if (!hoistBlackList[key] && protoProps.indexOf(key) === -1) {
|
|
55
|
-
Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(base, key));
|
|
56
|
-
}
|
|
57
|
-
});
|
|
58
|
-
}
|
|
59
37
|
/**
|
|
60
38
|
* Utilities for patching componentWillUnmount, to make sure @disposeOnUnmount works correctly icm with user defined hooks
|
|
61
39
|
* and the handler provided by mobx-react
|
|
62
40
|
*/
|
|
63
|
-
|
|
64
|
-
|
|
41
|
+
const mobxMixins = /*#__PURE__*/Symbol("patchMixins");
|
|
42
|
+
const mobxPatchedDefinition = /*#__PURE__*/Symbol("patchedDefinition");
|
|
65
43
|
function getMixins(target, methodName) {
|
|
66
|
-
|
|
67
|
-
|
|
44
|
+
const mixins = target[mobxMixins] = target[mobxMixins] || {};
|
|
45
|
+
const methodMixins = mixins[methodName] = mixins[methodName] || {};
|
|
68
46
|
methodMixins.locks = methodMixins.locks || 0;
|
|
69
47
|
methodMixins.methods = methodMixins.methods || [];
|
|
70
48
|
return methodMixins;
|
|
71
49
|
}
|
|
72
|
-
function wrapper(realMethod, mixins) {
|
|
73
|
-
var _this = this;
|
|
74
|
-
for (var _len = arguments.length, args = new Array(_len > 2 ? _len - 2 : 0), _key = 2; _key < _len; _key++) {
|
|
75
|
-
args[_key - 2] = arguments[_key];
|
|
76
|
-
}
|
|
50
|
+
function wrapper(realMethod, mixins, ...args) {
|
|
77
51
|
// locks are used to ensure that mixins are invoked only once per invocation, even on recursive calls
|
|
78
52
|
mixins.locks++;
|
|
79
53
|
try {
|
|
80
|
-
|
|
54
|
+
let retVal;
|
|
81
55
|
if (realMethod !== undefined && realMethod !== null) {
|
|
82
56
|
retVal = realMethod.apply(this, args);
|
|
83
57
|
}
|
|
@@ -85,58 +59,61 @@ function wrapper(realMethod, mixins) {
|
|
|
85
59
|
} finally {
|
|
86
60
|
mixins.locks--;
|
|
87
61
|
if (mixins.locks === 0) {
|
|
88
|
-
mixins.methods.forEach(
|
|
89
|
-
mx.apply(
|
|
62
|
+
mixins.methods.forEach(mx => {
|
|
63
|
+
mx.apply(this, args);
|
|
90
64
|
});
|
|
91
65
|
}
|
|
92
66
|
}
|
|
93
67
|
}
|
|
94
68
|
function wrapFunction(realMethod, mixins) {
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
args[_key2] = arguments[_key2];
|
|
98
|
-
}
|
|
99
|
-
wrapper.call.apply(wrapper, [this, realMethod, mixins].concat(args));
|
|
69
|
+
const fn = function fn(...args) {
|
|
70
|
+
wrapper.call(this, realMethod, mixins, ...args);
|
|
100
71
|
};
|
|
101
72
|
return fn;
|
|
102
73
|
}
|
|
103
74
|
function patch(target, methodName, mixinMethod) {
|
|
104
|
-
|
|
75
|
+
const mixins = getMixins(target, methodName);
|
|
105
76
|
if (mixins.methods.indexOf(mixinMethod) < 0) {
|
|
106
77
|
mixins.methods.push(mixinMethod);
|
|
107
78
|
}
|
|
108
|
-
|
|
79
|
+
const oldDefinition = Object.getOwnPropertyDescriptor(target, methodName);
|
|
109
80
|
if (oldDefinition && oldDefinition[mobxPatchedDefinition]) {
|
|
110
81
|
// already patched definition, do not repatch
|
|
111
82
|
return;
|
|
112
83
|
}
|
|
113
|
-
|
|
114
|
-
|
|
84
|
+
const originalMethod = target[methodName];
|
|
85
|
+
const newDefinition = createDefinition(target, methodName, oldDefinition ? oldDefinition.enumerable : undefined, mixins, originalMethod);
|
|
115
86
|
Object.defineProperty(target, methodName, newDefinition);
|
|
116
87
|
}
|
|
117
88
|
function createDefinition(target, methodName, enumerable, mixins, originalMethod) {
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
89
|
+
let wrappedFunc = wrapFunction(originalMethod, mixins);
|
|
90
|
+
return {
|
|
91
|
+
// @ts-ignore
|
|
92
|
+
[mobxPatchedDefinition]: true,
|
|
93
|
+
get: function () {
|
|
94
|
+
return wrappedFunc;
|
|
95
|
+
},
|
|
96
|
+
set: function (value) {
|
|
97
|
+
if (this === target) {
|
|
98
|
+
wrappedFunc = wrapFunction(value, mixins);
|
|
99
|
+
} else {
|
|
100
|
+
// when it is an instance of the prototype/a child prototype patch that particular case again separately
|
|
101
|
+
// since we need to store separate values depending on wether it is the actual instance, the prototype, etc
|
|
102
|
+
// e.g. the method for super might not be the same as the method for the prototype which might be not the same
|
|
103
|
+
// as the method for the instance
|
|
104
|
+
const newDefinition = createDefinition(this, methodName, enumerable, mixins, value);
|
|
105
|
+
Object.defineProperty(this, methodName, newDefinition);
|
|
106
|
+
}
|
|
107
|
+
},
|
|
108
|
+
configurable: true,
|
|
109
|
+
enumerable: enumerable
|
|
110
|
+
};
|
|
134
111
|
}
|
|
135
112
|
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
if (
|
|
113
|
+
const administrationSymbol = /*#__PURE__*/Symbol("ObserverAdministration");
|
|
114
|
+
const isMobXReactObserverSymbol = /*#__PURE__*/Symbol("isMobXReactObserver");
|
|
115
|
+
let observablePropDescriptors;
|
|
116
|
+
if (__MOBX_DEV__) {
|
|
140
117
|
observablePropDescriptors = {
|
|
141
118
|
props: /*#__PURE__*/createObservablePropDescriptor("props"),
|
|
142
119
|
state: /*#__PURE__*/createObservablePropDescriptor("state"),
|
|
@@ -160,10 +137,12 @@ function getAdministration(component) {
|
|
|
160
137
|
};
|
|
161
138
|
}
|
|
162
139
|
function makeClassComponentObserver(componentClass) {
|
|
163
|
-
|
|
140
|
+
const {
|
|
141
|
+
prototype
|
|
142
|
+
} = componentClass;
|
|
164
143
|
if (componentClass[isMobXReactObserverSymbol]) {
|
|
165
|
-
|
|
166
|
-
throw new Error(
|
|
144
|
+
const displayName = getDisplayName(componentClass);
|
|
145
|
+
throw new Error(`The provided component class (${displayName}) has already been declared as an observer component.`);
|
|
167
146
|
} else {
|
|
168
147
|
componentClass[isMobXReactObserverSymbol] = true;
|
|
169
148
|
}
|
|
@@ -178,13 +157,13 @@ function makeClassComponentObserver(componentClass) {
|
|
|
178
157
|
throw new Error("It is not allowed to use shouldComponentUpdate in observer based components.");
|
|
179
158
|
}
|
|
180
159
|
}
|
|
181
|
-
if (
|
|
160
|
+
if (__MOBX_DEV__) {
|
|
182
161
|
Object.defineProperties(prototype, observablePropDescriptors);
|
|
183
162
|
}
|
|
184
|
-
|
|
163
|
+
const originalRender = prototype.render;
|
|
185
164
|
if (typeof originalRender !== "function") {
|
|
186
|
-
|
|
187
|
-
throw new Error(
|
|
165
|
+
const displayName = getDisplayName(componentClass);
|
|
166
|
+
throw new Error(`[mobx-react] class component (${displayName}) is missing \`render\` method.` + `\n\`observer\` requires \`render\` being a function defined on prototype.` + `\n\`render = () => {}\` or \`render = function() {}\` is not supported.`);
|
|
188
167
|
}
|
|
189
168
|
prototype.render = function () {
|
|
190
169
|
Object.defineProperty(this, "render", {
|
|
@@ -195,12 +174,11 @@ function makeClassComponentObserver(componentClass) {
|
|
|
195
174
|
});
|
|
196
175
|
return this.render();
|
|
197
176
|
};
|
|
198
|
-
|
|
177
|
+
const originalComponentDidMount = prototype.componentDidMount;
|
|
199
178
|
prototype.componentDidMount = function () {
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
throw new Error("[mobx-react] `observer(" + _displayName2 + ").componentDidMount` must be defined on prototype." + "\n`componentDidMount = () => {}` or `componentDidMount = function() {}` is not supported.");
|
|
179
|
+
if (__MOBX_DEV__ && this.componentDidMount !== Object.getPrototypeOf(this).componentDidMount) {
|
|
180
|
+
const displayName = getDisplayName(componentClass);
|
|
181
|
+
throw new Error(`[mobx-react] \`observer(${displayName}).componentDidMount\` must be defined on prototype.` + `\n\`componentDidMount = () => {}\` or \`componentDidMount = function() {}\` is not supported.`);
|
|
204
182
|
}
|
|
205
183
|
// `componentDidMount` may not be called at all. React can abandon the instance after `render`.
|
|
206
184
|
// That's why we use finalization registry to dispose reaction created during render.
|
|
@@ -213,7 +191,7 @@ function makeClassComponentObserver(componentClass) {
|
|
|
213
191
|
// Therefore we don't have to worry about external (observable) state being updated before mount (no state version checking).
|
|
214
192
|
//
|
|
215
193
|
// Things may change: "In the future, React will provide a feature that lets components preserve state between unmounts"
|
|
216
|
-
|
|
194
|
+
const admin = getAdministration(this);
|
|
217
195
|
admin.mounted = true;
|
|
218
196
|
// Component instance committed, prevent reaction disposal.
|
|
219
197
|
_observerFinalizationRegistry.unregister(this);
|
|
@@ -221,9 +199,7 @@ function makeClassComponentObserver(componentClass) {
|
|
|
221
199
|
// therefore `this` could NOT be garbage collected before mount,
|
|
222
200
|
// preventing reaction disposal by FinalizationRegistry and leading to memory leak.
|
|
223
201
|
// As an alternative we could have `admin.instanceRef = new WeakRef(this)`, but lets avoid it if possible.
|
|
224
|
-
admin.forceUpdate =
|
|
225
|
-
return _this.forceUpdate();
|
|
226
|
-
};
|
|
202
|
+
admin.forceUpdate = () => this.forceUpdate();
|
|
227
203
|
if (!admin.reaction || admin.reactionInvalidatedBeforeMount) {
|
|
228
204
|
// Missing reaction:
|
|
229
205
|
// 1. Instance was unmounted (reaction disposed) and immediately remounted without running render #3395.
|
|
@@ -243,7 +219,7 @@ function makeClassComponentObserver(componentClass) {
|
|
|
243
219
|
if (isUsingStaticRendering()) {
|
|
244
220
|
return;
|
|
245
221
|
}
|
|
246
|
-
|
|
222
|
+
const admin = getAdministration(this);
|
|
247
223
|
(_admin$reaction = admin.reaction) == null || _admin$reaction.dispose();
|
|
248
224
|
admin.reaction = null;
|
|
249
225
|
admin.forceUpdate = null;
|
|
@@ -257,8 +233,8 @@ function getDisplayName(componentClass) {
|
|
|
257
233
|
return componentClass.displayName || componentClass.name || "<component>";
|
|
258
234
|
}
|
|
259
235
|
function createReactiveRender(originalRender) {
|
|
260
|
-
|
|
261
|
-
|
|
236
|
+
const boundOriginalRender = originalRender.bind(this);
|
|
237
|
+
const admin = getAdministration(this);
|
|
262
238
|
function reactiveRender() {
|
|
263
239
|
if (!admin.reaction) {
|
|
264
240
|
// Create reaction lazily to support re-mounting #3395
|
|
@@ -269,9 +245,9 @@ function createReactiveRender(originalRender) {
|
|
|
269
245
|
_observerFinalizationRegistry.register(this, admin, this);
|
|
270
246
|
}
|
|
271
247
|
}
|
|
272
|
-
|
|
273
|
-
|
|
274
|
-
admin.reaction.track(
|
|
248
|
+
let error = undefined;
|
|
249
|
+
let renderResult = undefined;
|
|
250
|
+
admin.reaction.track(() => {
|
|
275
251
|
try {
|
|
276
252
|
// TODO@major
|
|
277
253
|
// Optimization: replace with _allowStateChangesStart/End (not available in mobx@6.0.0)
|
|
@@ -288,7 +264,7 @@ function createReactiveRender(originalRender) {
|
|
|
288
264
|
return reactiveRender;
|
|
289
265
|
}
|
|
290
266
|
function createReaction(admin) {
|
|
291
|
-
return new Reaction(admin.name
|
|
267
|
+
return new Reaction(`${admin.name}.render()`, () => {
|
|
292
268
|
if (!admin.mounted) {
|
|
293
269
|
// This is neccessary to avoid react warning about calling forceUpdate on component that isn't mounted yet.
|
|
294
270
|
// This happens when component is abandoned after render - our reaction is already created and reacts to changes.
|
|
@@ -324,15 +300,17 @@ function createObservablePropDescriptor(key) {
|
|
|
324
300
|
return {
|
|
325
301
|
configurable: true,
|
|
326
302
|
enumerable: true,
|
|
327
|
-
get
|
|
328
|
-
|
|
329
|
-
|
|
303
|
+
get() {
|
|
304
|
+
const admin = getAdministration(this);
|
|
305
|
+
const derivation = _getGlobalState().trackingDerivation;
|
|
330
306
|
if (derivation && derivation !== admin.reaction) {
|
|
331
|
-
throw new Error(
|
|
307
|
+
throw new Error(`[mobx-react] Cannot read "${admin.name}.${key}" in a reactive context, as it isn't observable.
|
|
308
|
+
Please use component lifecycle method to copy the value into a local observable first.
|
|
309
|
+
See https://github.com/mobxjs/mobx/blob/main/packages/mobx-react/README.md#note-on-using-props-and-state-in-derivations`);
|
|
332
310
|
}
|
|
333
311
|
return admin[key];
|
|
334
312
|
},
|
|
335
|
-
set
|
|
313
|
+
set(value) {
|
|
336
314
|
getAdministration(this)[key] = value;
|
|
337
315
|
}
|
|
338
316
|
};
|
|
@@ -342,10 +320,7 @@ function observer(component, context) {
|
|
|
342
320
|
if (context && context.kind !== "class") {
|
|
343
321
|
throw new Error("The @observer decorator can be used on classes only");
|
|
344
322
|
}
|
|
345
|
-
if (component
|
|
346
|
-
console.warn("Mobx observer: You are trying to use `observer` on a component that already has `inject`. Please apply `observer` before applying `inject`");
|
|
347
|
-
}
|
|
348
|
-
if (Object.prototype.isPrototypeOf.call(Component, component) || Object.prototype.isPrototypeOf.call(PureComponent, component)) {
|
|
323
|
+
if (Object.prototype.isPrototypeOf.call(React.Component, component) || Object.prototype.isPrototypeOf.call(React.PureComponent, component)) {
|
|
349
324
|
// Class component
|
|
350
325
|
return makeClassComponentObserver(component);
|
|
351
326
|
} else {
|
|
@@ -354,308 +329,6 @@ function observer(component, context) {
|
|
|
354
329
|
}
|
|
355
330
|
}
|
|
356
331
|
|
|
357
|
-
function _extends() {
|
|
358
|
-
return _extends = Object.assign ? Object.assign.bind() : function (n) {
|
|
359
|
-
for (var e = 1; e < arguments.length; e++) {
|
|
360
|
-
var t = arguments[e];
|
|
361
|
-
for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
|
|
362
|
-
}
|
|
363
|
-
return n;
|
|
364
|
-
}, _extends.apply(null, arguments);
|
|
365
|
-
}
|
|
366
|
-
function _objectWithoutPropertiesLoose(r, e) {
|
|
367
|
-
if (null == r) return {};
|
|
368
|
-
var t = {};
|
|
369
|
-
for (var n in r) if ({}.hasOwnProperty.call(r, n)) {
|
|
370
|
-
if (-1 !== e.indexOf(n)) continue;
|
|
371
|
-
t[n] = r[n];
|
|
372
|
-
}
|
|
373
|
-
return t;
|
|
374
|
-
}
|
|
375
|
-
|
|
376
|
-
var _excluded = ["children"];
|
|
377
|
-
var MobXProviderContext = /*#__PURE__*/React__default.createContext({});
|
|
378
|
-
function Provider(props) {
|
|
379
|
-
var children = props.children,
|
|
380
|
-
stores = _objectWithoutPropertiesLoose(props, _excluded);
|
|
381
|
-
var parentValue = React__default.useContext(MobXProviderContext);
|
|
382
|
-
var mutableProviderRef = React__default.useRef(_extends({}, parentValue, stores));
|
|
383
|
-
var value = mutableProviderRef.current;
|
|
384
|
-
if (process.env.NODE_ENV !== "production") {
|
|
385
|
-
var newValue = _extends({}, value, stores); // spread in previous state for the context based stores
|
|
386
|
-
if (!shallowEqual(value, newValue)) {
|
|
387
|
-
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.");
|
|
388
|
-
}
|
|
389
|
-
}
|
|
390
|
-
return React__default.createElement(MobXProviderContext.Provider, {
|
|
391
|
-
value: value
|
|
392
|
-
}, children);
|
|
393
|
-
}
|
|
394
|
-
Provider.displayName = "MobXProvider";
|
|
395
|
-
|
|
396
|
-
/**
|
|
397
|
-
* Store Injection
|
|
398
|
-
*/
|
|
399
|
-
function createStoreInjector(grabStoresFn, component, injectNames, makeReactive) {
|
|
400
|
-
// Support forward refs
|
|
401
|
-
var Injector = React__default.forwardRef(function (props, ref) {
|
|
402
|
-
var newProps = _extends({}, props);
|
|
403
|
-
var context = React__default.useContext(MobXProviderContext);
|
|
404
|
-
Object.assign(newProps, grabStoresFn(context || {}, newProps) || {});
|
|
405
|
-
if (ref) {
|
|
406
|
-
newProps.ref = ref;
|
|
407
|
-
}
|
|
408
|
-
return React__default.createElement(component, newProps);
|
|
409
|
-
});
|
|
410
|
-
if (makeReactive) Injector = observer(Injector);
|
|
411
|
-
Injector["isMobxInjector"] = true; // assigned late to suppress observer warning
|
|
412
|
-
// Static fields from component should be visible on the generated Injector
|
|
413
|
-
copyStaticProperties(component, Injector);
|
|
414
|
-
Injector["wrappedComponent"] = component;
|
|
415
|
-
Injector.displayName = getInjectName(component, injectNames);
|
|
416
|
-
return Injector;
|
|
417
|
-
}
|
|
418
|
-
function getInjectName(component, injectNames) {
|
|
419
|
-
var displayName;
|
|
420
|
-
var componentName = component.displayName || component.name || component.constructor && component.constructor.name || "Component";
|
|
421
|
-
if (injectNames) displayName = "inject-with-" + injectNames + "(" + componentName + ")";else displayName = "inject(" + componentName + ")";
|
|
422
|
-
return displayName;
|
|
423
|
-
}
|
|
424
|
-
function grabStoresByName(storeNames) {
|
|
425
|
-
return function (baseStores, nextProps) {
|
|
426
|
-
storeNames.forEach(function (storeName) {
|
|
427
|
-
if (storeName in nextProps // prefer props over stores
|
|
428
|
-
) return;
|
|
429
|
-
if (!(storeName in baseStores)) throw new Error("MobX injector: Store '" + storeName + "' is not available! Make sure it is provided by some Provider");
|
|
430
|
-
nextProps[storeName] = baseStores[storeName];
|
|
431
|
-
});
|
|
432
|
-
return nextProps;
|
|
433
|
-
};
|
|
434
|
-
}
|
|
435
|
-
/**
|
|
436
|
-
* higher order component that injects stores to a child.
|
|
437
|
-
* takes either a varargs list of strings, which are stores read from the context,
|
|
438
|
-
* or a function that manually maps the available stores from the context to props:
|
|
439
|
-
* storesToProps(mobxStores, props, context) => newProps
|
|
440
|
-
*/
|
|
441
|
-
function inject() {
|
|
442
|
-
for (var _len = arguments.length, storeNames = new Array(_len), _key = 0; _key < _len; _key++) {
|
|
443
|
-
storeNames[_key] = arguments[_key];
|
|
444
|
-
}
|
|
445
|
-
if (typeof arguments[0] === "function") {
|
|
446
|
-
var grabStoresFn = arguments[0];
|
|
447
|
-
return function (componentClass) {
|
|
448
|
-
return createStoreInjector(grabStoresFn, componentClass, grabStoresFn.name, true);
|
|
449
|
-
};
|
|
450
|
-
} else {
|
|
451
|
-
return function (componentClass) {
|
|
452
|
-
return createStoreInjector(grabStoresByName(storeNames), componentClass, storeNames.join("-"), false);
|
|
453
|
-
};
|
|
454
|
-
}
|
|
455
|
-
}
|
|
456
|
-
|
|
457
|
-
var reactMajorVersion = /*#__PURE__*/Number.parseInt(React__default.version, 10);
|
|
458
|
-
var warnedAboutDisposeOnUnmountDeprecated = false;
|
|
459
|
-
var protoStoreKey = /*#__PURE__*/Symbol("disposeOnUnmountProto");
|
|
460
|
-
var instStoreKey = /*#__PURE__*/Symbol("disposeOnUnmountInst");
|
|
461
|
-
function runDisposersOnWillUnmount() {
|
|
462
|
-
var _this = this;
|
|
463
|
-
[].concat(this[protoStoreKey] || [], this[instStoreKey] || []).forEach(function (propKeyOrFunction) {
|
|
464
|
-
var prop = typeof propKeyOrFunction === "string" ? _this[propKeyOrFunction] : propKeyOrFunction;
|
|
465
|
-
if (prop !== undefined && prop !== null) {
|
|
466
|
-
if (Array.isArray(prop)) prop.map(function (f) {
|
|
467
|
-
return f();
|
|
468
|
-
});else prop();
|
|
469
|
-
}
|
|
470
|
-
});
|
|
471
|
-
}
|
|
472
|
-
/**
|
|
473
|
-
* @deprecated `disposeOnUnmount` is not compatible with React 18 and higher.
|
|
474
|
-
*/
|
|
475
|
-
function disposeOnUnmount(target, propertyKeyOrFunction) {
|
|
476
|
-
if (Array.isArray(propertyKeyOrFunction)) {
|
|
477
|
-
return propertyKeyOrFunction.map(function (fn) {
|
|
478
|
-
return disposeOnUnmount(target, fn);
|
|
479
|
-
});
|
|
480
|
-
}
|
|
481
|
-
if (!warnedAboutDisposeOnUnmountDeprecated) {
|
|
482
|
-
if (reactMajorVersion >= 18) {
|
|
483
|
-
console.error("[mobx-react] disposeOnUnmount is not compatible with React 18 and higher. Don't use it.");
|
|
484
|
-
} else {
|
|
485
|
-
console.warn("[mobx-react] disposeOnUnmount is deprecated. It won't work correctly with React 18 and higher.");
|
|
486
|
-
}
|
|
487
|
-
warnedAboutDisposeOnUnmountDeprecated = true;
|
|
488
|
-
}
|
|
489
|
-
var c = Object.getPrototypeOf(target).constructor;
|
|
490
|
-
var c2 = Object.getPrototypeOf(target.constructor);
|
|
491
|
-
// Special case for react-hot-loader
|
|
492
|
-
var c3 = Object.getPrototypeOf(Object.getPrototypeOf(target));
|
|
493
|
-
if (!(c === React__default.Component || c === React__default.PureComponent || c2 === React__default.Component || c2 === React__default.PureComponent || c3 === React__default.Component || c3 === React__default.PureComponent)) {
|
|
494
|
-
throw new Error("[mobx-react] disposeOnUnmount only supports direct subclasses of React.Component or React.PureComponent.");
|
|
495
|
-
}
|
|
496
|
-
if (typeof propertyKeyOrFunction !== "string" && typeof propertyKeyOrFunction !== "function" && !Array.isArray(propertyKeyOrFunction)) {
|
|
497
|
-
throw new Error("[mobx-react] disposeOnUnmount only works if the parameter is either a property key or a function.");
|
|
498
|
-
}
|
|
499
|
-
// decorator's target is the prototype, so it doesn't have any instance properties like props
|
|
500
|
-
var isDecorator = typeof propertyKeyOrFunction === "string";
|
|
501
|
-
// add property key / function we want run (disposed) to the store
|
|
502
|
-
var componentWasAlreadyModified = !!target[protoStoreKey] || !!target[instStoreKey];
|
|
503
|
-
var store = isDecorator ?
|
|
504
|
-
// decorators are added to the prototype store
|
|
505
|
-
target[protoStoreKey] || (target[protoStoreKey] = []) :
|
|
506
|
-
// functions are added to the instance store
|
|
507
|
-
target[instStoreKey] || (target[instStoreKey] = []);
|
|
508
|
-
store.push(propertyKeyOrFunction);
|
|
509
|
-
// tweak the component class componentWillUnmount if not done already
|
|
510
|
-
if (!componentWasAlreadyModified) {
|
|
511
|
-
patch(target, "componentWillUnmount", runDisposersOnWillUnmount);
|
|
512
|
-
}
|
|
513
|
-
// return the disposer as is if invoked as a non decorator
|
|
514
|
-
if (typeof propertyKeyOrFunction !== "string") {
|
|
515
|
-
return propertyKeyOrFunction;
|
|
516
|
-
}
|
|
517
|
-
}
|
|
518
|
-
|
|
519
|
-
// Copied from React.PropTypes
|
|
520
|
-
function createChainableTypeChecker(validator) {
|
|
521
|
-
function checkType(isRequired, props, propName, componentName, location, propFullName) {
|
|
522
|
-
for (var _len = arguments.length, rest = new Array(_len > 6 ? _len - 6 : 0), _key = 6; _key < _len; _key++) {
|
|
523
|
-
rest[_key - 6] = arguments[_key];
|
|
524
|
-
}
|
|
525
|
-
return untracked(function () {
|
|
526
|
-
componentName = componentName || "<<anonymous>>";
|
|
527
|
-
propFullName = propFullName || propName;
|
|
528
|
-
if (props[propName] == null) {
|
|
529
|
-
if (isRequired) {
|
|
530
|
-
var actual = props[propName] === null ? "null" : "undefined";
|
|
531
|
-
return new Error("The " + location + " `" + propFullName + "` is marked as required " + "in `" + componentName + "`, but its value is `" + actual + "`.");
|
|
532
|
-
}
|
|
533
|
-
return null;
|
|
534
|
-
} else {
|
|
535
|
-
// @ts-ignore rest arg is necessary for some React internals - fails tests otherwise
|
|
536
|
-
return validator.apply(void 0, [props, propName, componentName, location, propFullName].concat(rest));
|
|
537
|
-
}
|
|
538
|
-
});
|
|
539
|
-
}
|
|
540
|
-
var chainedCheckType = checkType.bind(null, false);
|
|
541
|
-
// Add isRequired to satisfy Requirable
|
|
542
|
-
chainedCheckType.isRequired = checkType.bind(null, true);
|
|
543
|
-
return chainedCheckType;
|
|
544
|
-
}
|
|
545
|
-
// Copied from React.PropTypes
|
|
546
|
-
function isSymbol(propType, propValue) {
|
|
547
|
-
// Native Symbol.
|
|
548
|
-
if (propType === "symbol") {
|
|
549
|
-
return true;
|
|
550
|
-
}
|
|
551
|
-
// 19.4.3.5 Symbol.prototype[@@toStringTag] === 'Symbol'
|
|
552
|
-
if (propValue["@@toStringTag"] === "Symbol") {
|
|
553
|
-
return true;
|
|
554
|
-
}
|
|
555
|
-
// Fallback for non-spec compliant Symbols which are polyfilled.
|
|
556
|
-
if (typeof Symbol === "function" && propValue instanceof Symbol) {
|
|
557
|
-
return true;
|
|
558
|
-
}
|
|
559
|
-
return false;
|
|
560
|
-
}
|
|
561
|
-
// Copied from React.PropTypes
|
|
562
|
-
function getPropType(propValue) {
|
|
563
|
-
var propType = typeof propValue;
|
|
564
|
-
if (Array.isArray(propValue)) {
|
|
565
|
-
return "array";
|
|
566
|
-
}
|
|
567
|
-
if (propValue instanceof RegExp) {
|
|
568
|
-
// Old webkits (at least until Android 4.0) return 'function' rather than
|
|
569
|
-
// 'object' for typeof a RegExp. We'll normalize this here so that /bla/
|
|
570
|
-
// passes PropTypes.object.
|
|
571
|
-
return "object";
|
|
572
|
-
}
|
|
573
|
-
if (isSymbol(propType, propValue)) {
|
|
574
|
-
return "symbol";
|
|
575
|
-
}
|
|
576
|
-
return propType;
|
|
577
|
-
}
|
|
578
|
-
// This handles more types than `getPropType`. Only used for error messages.
|
|
579
|
-
// Copied from React.PropTypes
|
|
580
|
-
function getPreciseType(propValue) {
|
|
581
|
-
var propType = getPropType(propValue);
|
|
582
|
-
if (propType === "object") {
|
|
583
|
-
if (propValue instanceof Date) {
|
|
584
|
-
return "date";
|
|
585
|
-
} else if (propValue instanceof RegExp) {
|
|
586
|
-
return "regexp";
|
|
587
|
-
}
|
|
588
|
-
}
|
|
589
|
-
return propType;
|
|
590
|
-
}
|
|
591
|
-
function createObservableTypeCheckerCreator(allowNativeType, mobxType) {
|
|
592
|
-
return createChainableTypeChecker(function (props, propName, componentName, location, propFullName) {
|
|
593
|
-
return untracked(function () {
|
|
594
|
-
if (allowNativeType) {
|
|
595
|
-
if (getPropType(props[propName]) === mobxType.toLowerCase()) return null;
|
|
596
|
-
}
|
|
597
|
-
var mobxChecker;
|
|
598
|
-
switch (mobxType) {
|
|
599
|
-
case "Array":
|
|
600
|
-
mobxChecker = isObservableArray;
|
|
601
|
-
break;
|
|
602
|
-
case "Object":
|
|
603
|
-
mobxChecker = isObservableObject;
|
|
604
|
-
break;
|
|
605
|
-
case "Map":
|
|
606
|
-
mobxChecker = isObservableMap;
|
|
607
|
-
break;
|
|
608
|
-
default:
|
|
609
|
-
throw new Error("Unexpected mobxType: " + mobxType);
|
|
610
|
-
}
|
|
611
|
-
var propValue = props[propName];
|
|
612
|
-
if (!mobxChecker(propValue)) {
|
|
613
|
-
var preciseType = getPreciseType(propValue);
|
|
614
|
-
var nativeTypeExpectationMessage = allowNativeType ? " or javascript `" + mobxType.toLowerCase() + "`" : "";
|
|
615
|
-
return new Error("Invalid prop `" + propFullName + "` of type `" + preciseType + "` supplied to" + " `" + componentName + "`, expected `mobx.Observable" + mobxType + "`" + nativeTypeExpectationMessage + ".");
|
|
616
|
-
}
|
|
617
|
-
return null;
|
|
618
|
-
});
|
|
619
|
-
});
|
|
620
|
-
}
|
|
621
|
-
function createObservableArrayOfTypeChecker(allowNativeType, typeChecker) {
|
|
622
|
-
return createChainableTypeChecker(function (props, propName, componentName, location, propFullName) {
|
|
623
|
-
for (var _len2 = arguments.length, rest = new Array(_len2 > 5 ? _len2 - 5 : 0), _key2 = 5; _key2 < _len2; _key2++) {
|
|
624
|
-
rest[_key2 - 5] = arguments[_key2];
|
|
625
|
-
}
|
|
626
|
-
return untracked(function () {
|
|
627
|
-
if (typeof typeChecker !== "function") {
|
|
628
|
-
return new Error("Property `" + propFullName + "` of component `" + componentName + "` has " + "invalid PropType notation.");
|
|
629
|
-
} else {
|
|
630
|
-
var error = createObservableTypeCheckerCreator(allowNativeType, "Array")(props, propName, componentName, location, propFullName);
|
|
631
|
-
if (error instanceof Error) return error;
|
|
632
|
-
var propValue = props[propName];
|
|
633
|
-
for (var i = 0; i < propValue.length; i++) {
|
|
634
|
-
error = typeChecker.apply(void 0, [propValue, i, componentName, location, propFullName + "[" + i + "]"].concat(rest));
|
|
635
|
-
if (error instanceof Error) return error;
|
|
636
|
-
}
|
|
637
|
-
return null;
|
|
638
|
-
}
|
|
639
|
-
});
|
|
640
|
-
});
|
|
641
|
-
}
|
|
642
|
-
var observableArray = /*#__PURE__*/createObservableTypeCheckerCreator(false, "Array");
|
|
643
|
-
var observableArrayOf = /*#__PURE__*/createObservableArrayOfTypeChecker.bind(null, false);
|
|
644
|
-
var observableMap = /*#__PURE__*/createObservableTypeCheckerCreator(false, "Map");
|
|
645
|
-
var observableObject = /*#__PURE__*/createObservableTypeCheckerCreator(false, "Object");
|
|
646
|
-
var arrayOrObservableArray = /*#__PURE__*/createObservableTypeCheckerCreator(true, "Array");
|
|
647
|
-
var arrayOrObservableArrayOf = /*#__PURE__*/createObservableArrayOfTypeChecker.bind(null, true);
|
|
648
|
-
var objectOrObservableObject = /*#__PURE__*/createObservableTypeCheckerCreator(true, "Object");
|
|
649
|
-
var PropTypes = {
|
|
650
|
-
observableArray: observableArray,
|
|
651
|
-
observableArrayOf: observableArrayOf,
|
|
652
|
-
observableMap: observableMap,
|
|
653
|
-
observableObject: observableObject,
|
|
654
|
-
arrayOrObservableArray: arrayOrObservableArray,
|
|
655
|
-
arrayOrObservableArrayOf: arrayOrObservableArrayOf,
|
|
656
|
-
objectOrObservableObject: objectOrObservableObject
|
|
657
|
-
};
|
|
658
|
-
|
|
659
332
|
if (!Component) {
|
|
660
333
|
throw new Error("mobx-react requires React to be available");
|
|
661
334
|
}
|
|
@@ -663,5 +336,5 @@ if (!observable) {
|
|
|
663
336
|
throw new Error("mobx-react requires mobx to be available");
|
|
664
337
|
}
|
|
665
338
|
|
|
666
|
-
export {
|
|
339
|
+
export { observer };
|
|
667
340
|
//# sourceMappingURL=mobxreact.esm.js.map
|