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