mobx-react 9.2.2 → 10.0.0
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 +73 -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 +75 -404
- 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 +338 -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
|
@@ -1,7 +1,8 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import
|
|
1
|
+
import { _allowStateChanges, Reaction, _getGlobalState, observable } from 'mobx';
|
|
2
|
+
import * as React from 'react';
|
|
3
|
+
import { PureComponent, Component } from 'react';
|
|
3
4
|
import { isUsingStaticRendering, _observerFinalizationRegistry, observer as observer$1 } from 'mobx-react-lite';
|
|
4
|
-
export { Observer,
|
|
5
|
+
export { Observer, _observerFinalizationRegistry, clearTimers, enableStaticRendering, isUsingStaticRendering, useLocalObservable } from 'mobx-react-lite';
|
|
5
6
|
|
|
6
7
|
function shallowEqual(objA, objB) {
|
|
7
8
|
//From: https://github.com/facebook/fbjs/blob/c69904a511b900266935168223063dd8772dfc40/packages/fbjs/src/core/shallowEqual.js
|
|
@@ -11,12 +12,12 @@ function shallowEqual(objA, objB) {
|
|
|
11
12
|
if (typeof objA !== "object" || objA === null || typeof objB !== "object" || objB === null) {
|
|
12
13
|
return false;
|
|
13
14
|
}
|
|
14
|
-
|
|
15
|
-
|
|
15
|
+
const keysA = Object.keys(objA);
|
|
16
|
+
const keysB = Object.keys(objB);
|
|
16
17
|
if (keysA.length !== keysB.length) {
|
|
17
18
|
return false;
|
|
18
19
|
}
|
|
19
|
-
for (
|
|
20
|
+
for (let i = 0; i < keysA.length; i++) {
|
|
20
21
|
if (!Object.hasOwnProperty.call(objB, keysA[i]) || !is(objA[keysA[i]], objB[keysA[i]])) {
|
|
21
22
|
return false;
|
|
22
23
|
}
|
|
@@ -31,53 +32,24 @@ function is(x, y) {
|
|
|
31
32
|
return x !== x && y !== y;
|
|
32
33
|
}
|
|
33
34
|
}
|
|
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
35
|
/**
|
|
60
36
|
* Utilities for patching componentWillUnmount, to make sure @disposeOnUnmount works correctly icm with user defined hooks
|
|
61
37
|
* and the handler provided by mobx-react
|
|
62
38
|
*/
|
|
63
|
-
|
|
64
|
-
|
|
39
|
+
const mobxMixins = /*#__PURE__*/Symbol("patchMixins");
|
|
40
|
+
const mobxPatchedDefinition = /*#__PURE__*/Symbol("patchedDefinition");
|
|
65
41
|
function getMixins(target, methodName) {
|
|
66
|
-
|
|
67
|
-
|
|
42
|
+
const mixins = target[mobxMixins] = target[mobxMixins] || {};
|
|
43
|
+
const methodMixins = mixins[methodName] = mixins[methodName] || {};
|
|
68
44
|
methodMixins.locks = methodMixins.locks || 0;
|
|
69
45
|
methodMixins.methods = methodMixins.methods || [];
|
|
70
46
|
return methodMixins;
|
|
71
47
|
}
|
|
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
|
-
}
|
|
48
|
+
function wrapper(realMethod, mixins, ...args) {
|
|
77
49
|
// locks are used to ensure that mixins are invoked only once per invocation, even on recursive calls
|
|
78
50
|
mixins.locks++;
|
|
79
51
|
try {
|
|
80
|
-
|
|
52
|
+
let retVal;
|
|
81
53
|
if (realMethod !== undefined && realMethod !== null) {
|
|
82
54
|
retVal = realMethod.apply(this, args);
|
|
83
55
|
}
|
|
@@ -85,57 +57,60 @@ function wrapper(realMethod, mixins) {
|
|
|
85
57
|
} finally {
|
|
86
58
|
mixins.locks--;
|
|
87
59
|
if (mixins.locks === 0) {
|
|
88
|
-
mixins.methods.forEach(
|
|
89
|
-
mx.apply(
|
|
60
|
+
mixins.methods.forEach(mx => {
|
|
61
|
+
mx.apply(this, args);
|
|
90
62
|
});
|
|
91
63
|
}
|
|
92
64
|
}
|
|
93
65
|
}
|
|
94
66
|
function wrapFunction(realMethod, mixins) {
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
args[_key2] = arguments[_key2];
|
|
98
|
-
}
|
|
99
|
-
wrapper.call.apply(wrapper, [this, realMethod, mixins].concat(args));
|
|
67
|
+
const fn = function fn(...args) {
|
|
68
|
+
wrapper.call(this, realMethod, mixins, ...args);
|
|
100
69
|
};
|
|
101
70
|
return fn;
|
|
102
71
|
}
|
|
103
72
|
function patch(target, methodName, mixinMethod) {
|
|
104
|
-
|
|
73
|
+
const mixins = getMixins(target, methodName);
|
|
105
74
|
if (mixins.methods.indexOf(mixinMethod) < 0) {
|
|
106
75
|
mixins.methods.push(mixinMethod);
|
|
107
76
|
}
|
|
108
|
-
|
|
77
|
+
const oldDefinition = Object.getOwnPropertyDescriptor(target, methodName);
|
|
109
78
|
if (oldDefinition && oldDefinition[mobxPatchedDefinition]) {
|
|
110
79
|
// already patched definition, do not repatch
|
|
111
80
|
return;
|
|
112
81
|
}
|
|
113
|
-
|
|
114
|
-
|
|
82
|
+
const originalMethod = target[methodName];
|
|
83
|
+
const newDefinition = createDefinition(target, methodName, oldDefinition ? oldDefinition.enumerable : undefined, mixins, originalMethod);
|
|
115
84
|
Object.defineProperty(target, methodName, newDefinition);
|
|
116
85
|
}
|
|
117
86
|
function createDefinition(target, methodName, enumerable, mixins, originalMethod) {
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
87
|
+
let wrappedFunc = wrapFunction(originalMethod, mixins);
|
|
88
|
+
return {
|
|
89
|
+
// @ts-ignore
|
|
90
|
+
[mobxPatchedDefinition]: true,
|
|
91
|
+
get: function () {
|
|
92
|
+
return wrappedFunc;
|
|
93
|
+
},
|
|
94
|
+
set: function (value) {
|
|
95
|
+
if (this === target) {
|
|
96
|
+
wrappedFunc = wrapFunction(value, mixins);
|
|
97
|
+
} else {
|
|
98
|
+
// when it is an instance of the prototype/a child prototype patch that particular case again separately
|
|
99
|
+
// since we need to store separate values depending on wether it is the actual instance, the prototype, etc
|
|
100
|
+
// e.g. the method for super might not be the same as the method for the prototype which might be not the same
|
|
101
|
+
// as the method for the instance
|
|
102
|
+
const newDefinition = createDefinition(this, methodName, enumerable, mixins, value);
|
|
103
|
+
Object.defineProperty(this, methodName, newDefinition);
|
|
104
|
+
}
|
|
105
|
+
},
|
|
106
|
+
configurable: true,
|
|
107
|
+
enumerable: enumerable
|
|
108
|
+
};
|
|
134
109
|
}
|
|
135
110
|
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
111
|
+
const administrationSymbol = /*#__PURE__*/Symbol("ObserverAdministration");
|
|
112
|
+
const isMobXReactObserverSymbol = /*#__PURE__*/Symbol("isMobXReactObserver");
|
|
113
|
+
let observablePropDescriptors;
|
|
139
114
|
{
|
|
140
115
|
observablePropDescriptors = {
|
|
141
116
|
props: /*#__PURE__*/createObservablePropDescriptor("props"),
|
|
@@ -160,10 +135,12 @@ function getAdministration(component) {
|
|
|
160
135
|
};
|
|
161
136
|
}
|
|
162
137
|
function makeClassComponentObserver(componentClass) {
|
|
163
|
-
|
|
138
|
+
const {
|
|
139
|
+
prototype
|
|
140
|
+
} = componentClass;
|
|
164
141
|
if (componentClass[isMobXReactObserverSymbol]) {
|
|
165
|
-
|
|
166
|
-
throw new Error(
|
|
142
|
+
const displayName = getDisplayName(componentClass);
|
|
143
|
+
throw new Error(`The provided component class (${displayName}) has already been declared as an observer component.`);
|
|
167
144
|
} else {
|
|
168
145
|
componentClass[isMobXReactObserverSymbol] = true;
|
|
169
146
|
}
|
|
@@ -181,10 +158,10 @@ function makeClassComponentObserver(componentClass) {
|
|
|
181
158
|
{
|
|
182
159
|
Object.defineProperties(prototype, observablePropDescriptors);
|
|
183
160
|
}
|
|
184
|
-
|
|
161
|
+
const originalRender = prototype.render;
|
|
185
162
|
if (typeof originalRender !== "function") {
|
|
186
|
-
|
|
187
|
-
throw new Error(
|
|
163
|
+
const displayName = getDisplayName(componentClass);
|
|
164
|
+
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
165
|
}
|
|
189
166
|
prototype.render = function () {
|
|
190
167
|
Object.defineProperty(this, "render", {
|
|
@@ -195,12 +172,11 @@ function makeClassComponentObserver(componentClass) {
|
|
|
195
172
|
});
|
|
196
173
|
return this.render();
|
|
197
174
|
};
|
|
198
|
-
|
|
175
|
+
const originalComponentDidMount = prototype.componentDidMount;
|
|
199
176
|
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.");
|
|
177
|
+
if (this.componentDidMount !== Object.getPrototypeOf(this).componentDidMount) {
|
|
178
|
+
const displayName = getDisplayName(componentClass);
|
|
179
|
+
throw new Error(`[mobx-react] \`observer(${displayName}).componentDidMount\` must be defined on prototype.` + `\n\`componentDidMount = () => {}\` or \`componentDidMount = function() {}\` is not supported.`);
|
|
204
180
|
}
|
|
205
181
|
// `componentDidMount` may not be called at all. React can abandon the instance after `render`.
|
|
206
182
|
// That's why we use finalization registry to dispose reaction created during render.
|
|
@@ -213,7 +189,7 @@ function makeClassComponentObserver(componentClass) {
|
|
|
213
189
|
// Therefore we don't have to worry about external (observable) state being updated before mount (no state version checking).
|
|
214
190
|
//
|
|
215
191
|
// Things may change: "In the future, React will provide a feature that lets components preserve state between unmounts"
|
|
216
|
-
|
|
192
|
+
const admin = getAdministration(this);
|
|
217
193
|
admin.mounted = true;
|
|
218
194
|
// Component instance committed, prevent reaction disposal.
|
|
219
195
|
_observerFinalizationRegistry.unregister(this);
|
|
@@ -221,9 +197,7 @@ function makeClassComponentObserver(componentClass) {
|
|
|
221
197
|
// therefore `this` could NOT be garbage collected before mount,
|
|
222
198
|
// preventing reaction disposal by FinalizationRegistry and leading to memory leak.
|
|
223
199
|
// 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
|
-
};
|
|
200
|
+
admin.forceUpdate = () => this.forceUpdate();
|
|
227
201
|
if (!admin.reaction || admin.reactionInvalidatedBeforeMount) {
|
|
228
202
|
// Missing reaction:
|
|
229
203
|
// 1. Instance was unmounted (reaction disposed) and immediately remounted without running render #3395.
|
|
@@ -243,7 +217,7 @@ function makeClassComponentObserver(componentClass) {
|
|
|
243
217
|
if (isUsingStaticRendering()) {
|
|
244
218
|
return;
|
|
245
219
|
}
|
|
246
|
-
|
|
220
|
+
const admin = getAdministration(this);
|
|
247
221
|
(_admin$reaction = admin.reaction) == null || _admin$reaction.dispose();
|
|
248
222
|
admin.reaction = null;
|
|
249
223
|
admin.forceUpdate = null;
|
|
@@ -257,8 +231,8 @@ function getDisplayName(componentClass) {
|
|
|
257
231
|
return componentClass.displayName || componentClass.name || "<component>";
|
|
258
232
|
}
|
|
259
233
|
function createReactiveRender(originalRender) {
|
|
260
|
-
|
|
261
|
-
|
|
234
|
+
const boundOriginalRender = originalRender.bind(this);
|
|
235
|
+
const admin = getAdministration(this);
|
|
262
236
|
function reactiveRender() {
|
|
263
237
|
if (!admin.reaction) {
|
|
264
238
|
// Create reaction lazily to support re-mounting #3395
|
|
@@ -269,9 +243,9 @@ function createReactiveRender(originalRender) {
|
|
|
269
243
|
_observerFinalizationRegistry.register(this, admin, this);
|
|
270
244
|
}
|
|
271
245
|
}
|
|
272
|
-
|
|
273
|
-
|
|
274
|
-
admin.reaction.track(
|
|
246
|
+
let error = undefined;
|
|
247
|
+
let renderResult = undefined;
|
|
248
|
+
admin.reaction.track(() => {
|
|
275
249
|
try {
|
|
276
250
|
// TODO@major
|
|
277
251
|
// Optimization: replace with _allowStateChangesStart/End (not available in mobx@6.0.0)
|
|
@@ -288,7 +262,7 @@ function createReactiveRender(originalRender) {
|
|
|
288
262
|
return reactiveRender;
|
|
289
263
|
}
|
|
290
264
|
function createReaction(admin) {
|
|
291
|
-
return new Reaction(admin.name
|
|
265
|
+
return new Reaction(`${admin.name}.render()`, () => {
|
|
292
266
|
if (!admin.mounted) {
|
|
293
267
|
// This is neccessary to avoid react warning about calling forceUpdate on component that isn't mounted yet.
|
|
294
268
|
// This happens when component is abandoned after render - our reaction is already created and reacts to changes.
|
|
@@ -324,15 +298,17 @@ function createObservablePropDescriptor(key) {
|
|
|
324
298
|
return {
|
|
325
299
|
configurable: true,
|
|
326
300
|
enumerable: true,
|
|
327
|
-
get
|
|
328
|
-
|
|
329
|
-
|
|
301
|
+
get() {
|
|
302
|
+
const admin = getAdministration(this);
|
|
303
|
+
const derivation = _getGlobalState().trackingDerivation;
|
|
330
304
|
if (derivation && derivation !== admin.reaction) {
|
|
331
|
-
throw new Error(
|
|
305
|
+
throw new Error(`[mobx-react] Cannot read "${admin.name}.${key}" in a reactive context, as it isn't observable.
|
|
306
|
+
Please use component lifecycle method to copy the value into a local observable first.
|
|
307
|
+
See https://github.com/mobxjs/mobx/blob/main/packages/mobx-react/README.md#note-on-using-props-and-state-in-derivations`);
|
|
332
308
|
}
|
|
333
309
|
return admin[key];
|
|
334
310
|
},
|
|
335
|
-
set
|
|
311
|
+
set(value) {
|
|
336
312
|
getAdministration(this)[key] = value;
|
|
337
313
|
}
|
|
338
314
|
};
|
|
@@ -342,10 +318,7 @@ function observer(component, context) {
|
|
|
342
318
|
if (context && context.kind !== "class") {
|
|
343
319
|
throw new Error("The @observer decorator can be used on classes only");
|
|
344
320
|
}
|
|
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)) {
|
|
321
|
+
if (Object.prototype.isPrototypeOf.call(React.Component, component) || Object.prototype.isPrototypeOf.call(React.PureComponent, component)) {
|
|
349
322
|
// Class component
|
|
350
323
|
return makeClassComponentObserver(component);
|
|
351
324
|
} else {
|
|
@@ -354,308 +327,6 @@ function observer(component, context) {
|
|
|
354
327
|
}
|
|
355
328
|
}
|
|
356
329
|
|
|
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
|
-
{
|
|
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
330
|
if (!Component) {
|
|
660
331
|
throw new Error("mobx-react requires React to be available");
|
|
661
332
|
}
|
|
@@ -663,5 +334,5 @@ if (!observable) {
|
|
|
663
334
|
throw new Error("mobx-react requires mobx to be available");
|
|
664
335
|
}
|
|
665
336
|
|
|
666
|
-
export {
|
|
337
|
+
export { observer };
|
|
667
338
|
//# sourceMappingURL=mobxreact.esm.development.js.map
|