1 | 'use strict';
|
2 |
|
3 | Object.defineProperty(exports, '__esModule', { value: true });
|
4 |
|
5 | function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
|
6 |
|
7 | var mobx = require('mobx');
|
8 | var React = require('react');
|
9 | var React__default = _interopDefault(React);
|
10 | var reactDom = require('react-dom');
|
11 |
|
12 | if (!React.useState) {
|
13 | throw new Error("mobx-react-lite requires React with Hooks support");
|
14 | }
|
15 |
|
16 | if (!mobx.makeObservable) {
|
17 | throw new Error("mobx-react-lite@3 requires mobx at least version 6 to be available");
|
18 | }
|
19 |
|
20 | function defaultNoopBatch(callback) {
|
21 | callback();
|
22 | }
|
23 | function observerBatching(reactionScheduler) {
|
24 | if (!reactionScheduler) {
|
25 | reactionScheduler = defaultNoopBatch;
|
26 |
|
27 | {
|
28 | console.warn("[MobX] Failed to get unstable_batched updates from react-dom / react-native");
|
29 | }
|
30 | }
|
31 |
|
32 | mobx.configure({
|
33 | reactionScheduler: reactionScheduler
|
34 | });
|
35 | }
|
36 | var isObserverBatched = function isObserverBatched() {
|
37 | {
|
38 | console.warn("[MobX] Deprecated");
|
39 | }
|
40 |
|
41 | return true;
|
42 | };
|
43 |
|
44 | var deprecatedMessages = [];
|
45 | function useDeprecated(msg) {
|
46 | if (!deprecatedMessages.includes(msg)) {
|
47 | deprecatedMessages.push(msg);
|
48 | console.warn(msg);
|
49 | }
|
50 | }
|
51 |
|
52 | function printDebugValue(v) {
|
53 | return mobx.getDependencyTree(v);
|
54 | }
|
55 |
|
56 | var FinalizationRegistryLocal = typeof FinalizationRegistry === "undefined" ? undefined : FinalizationRegistry;
|
57 |
|
58 | function createTrackingData(reaction) {
|
59 | var trackingData = {
|
60 | reaction: reaction,
|
61 | mounted: false,
|
62 | changedBeforeMount: false,
|
63 | cleanAt: Date.now() + CLEANUP_LEAKED_REACTIONS_AFTER_MILLIS
|
64 | };
|
65 | return trackingData;
|
66 | }
|
67 |
|
68 |
|
69 |
|
70 |
|
71 |
|
72 |
|
73 |
|
74 | var CLEANUP_LEAKED_REACTIONS_AFTER_MILLIS = 10000;
|
75 |
|
76 |
|
77 |
|
78 |
|
79 | var CLEANUP_TIMER_LOOP_MILLIS = 10000;
|
80 |
|
81 |
|
82 |
|
83 |
|
84 |
|
85 | function createReactionCleanupTrackingUsingFinalizationRegister(FinalizationRegistry) {
|
86 | var cleanupTokenToReactionTrackingMap = new Map();
|
87 | var globalCleanupTokensCounter = 1;
|
88 | var registry = new FinalizationRegistry(function cleanupFunction(token) {
|
89 | var trackedReaction = cleanupTokenToReactionTrackingMap.get(token);
|
90 |
|
91 | if (trackedReaction) {
|
92 | trackedReaction.reaction.dispose();
|
93 | cleanupTokenToReactionTrackingMap["delete"](token);
|
94 | }
|
95 | });
|
96 | return {
|
97 | addReactionToTrack: function addReactionToTrack(reactionTrackingRef, reaction, objectRetainedByReact) {
|
98 | var token = globalCleanupTokensCounter++;
|
99 | registry.register(objectRetainedByReact, token, reactionTrackingRef);
|
100 | reactionTrackingRef.current = createTrackingData(reaction);
|
101 | reactionTrackingRef.current.finalizationRegistryCleanupToken = token;
|
102 | cleanupTokenToReactionTrackingMap.set(token, reactionTrackingRef.current);
|
103 | return reactionTrackingRef.current;
|
104 | },
|
105 | recordReactionAsCommitted: function recordReactionAsCommitted(reactionRef) {
|
106 | registry.unregister(reactionRef);
|
107 |
|
108 | if (reactionRef.current && reactionRef.current.finalizationRegistryCleanupToken) {
|
109 | cleanupTokenToReactionTrackingMap["delete"](reactionRef.current.finalizationRegistryCleanupToken);
|
110 | }
|
111 | },
|
112 | forceCleanupTimerToRunNowForTests: function forceCleanupTimerToRunNowForTests() {
|
113 | },
|
114 | resetCleanupScheduleForTests: function resetCleanupScheduleForTests() {
|
115 | }
|
116 | };
|
117 | }
|
118 |
|
119 | function _unsupportedIterableToArray(o, minLen) {
|
120 | if (!o) return;
|
121 | if (typeof o === "string") return _arrayLikeToArray(o, minLen);
|
122 | var n = Object.prototype.toString.call(o).slice(8, -1);
|
123 | if (n === "Object" && o.constructor) n = o.constructor.name;
|
124 | if (n === "Map" || n === "Set") return Array.from(o);
|
125 | if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
|
126 | }
|
127 |
|
128 | function _arrayLikeToArray(arr, len) {
|
129 | if (len == null || len > arr.length) len = arr.length;
|
130 |
|
131 | for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
|
132 |
|
133 | return arr2;
|
134 | }
|
135 |
|
136 | function _createForOfIteratorHelperLoose(o, allowArrayLike) {
|
137 | var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"];
|
138 | if (it) return (it = it.call(o)).next.bind(it);
|
139 |
|
140 | if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") {
|
141 | if (it) o = it;
|
142 | var i = 0;
|
143 | return function () {
|
144 | if (i >= o.length) return {
|
145 | done: true
|
146 | };
|
147 | return {
|
148 | done: false,
|
149 | value: o[i++]
|
150 | };
|
151 | };
|
152 | }
|
153 |
|
154 | throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
|
155 | }
|
156 |
|
157 |
|
158 |
|
159 |
|
160 |
|
161 | function createTimerBasedReactionCleanupTracking() {
|
162 | |
163 |
|
164 |
|
165 | var uncommittedReactionRefs = new Set();
|
166 | |
167 |
|
168 |
|
169 |
|
170 | var reactionCleanupHandle;
|
171 |
|
172 |
|
173 | |
174 |
|
175 |
|
176 |
|
177 | function forceCleanupTimerToRunNowForTests() {
|
178 |
|
179 |
|
180 | if (reactionCleanupHandle) {
|
181 | clearTimeout(reactionCleanupHandle);
|
182 | cleanUncommittedReactions();
|
183 | }
|
184 | }
|
185 |
|
186 |
|
187 |
|
188 | function resetCleanupScheduleForTests() {
|
189 | if (uncommittedReactionRefs.size > 0) {
|
190 | for (var _iterator = _createForOfIteratorHelperLoose(uncommittedReactionRefs), _step; !(_step = _iterator()).done;) {
|
191 | var ref = _step.value;
|
192 | var tracking = ref.current;
|
193 |
|
194 | if (tracking) {
|
195 | tracking.reaction.dispose();
|
196 | ref.current = null;
|
197 | }
|
198 | }
|
199 |
|
200 | uncommittedReactionRefs.clear();
|
201 | }
|
202 |
|
203 | if (reactionCleanupHandle) {
|
204 | clearTimeout(reactionCleanupHandle);
|
205 | reactionCleanupHandle = undefined;
|
206 | }
|
207 | }
|
208 |
|
209 | function ensureCleanupTimerRunning() {
|
210 | if (reactionCleanupHandle === undefined) {
|
211 | reactionCleanupHandle = setTimeout(cleanUncommittedReactions, CLEANUP_TIMER_LOOP_MILLIS);
|
212 | }
|
213 | }
|
214 |
|
215 | function scheduleCleanupOfReactionIfLeaked(ref) {
|
216 | uncommittedReactionRefs.add(ref);
|
217 | ensureCleanupTimerRunning();
|
218 | }
|
219 |
|
220 | function recordReactionAsCommitted(reactionRef) {
|
221 | uncommittedReactionRefs["delete"](reactionRef);
|
222 | }
|
223 | |
224 |
|
225 |
|
226 |
|
227 |
|
228 | function cleanUncommittedReactions() {
|
229 | reactionCleanupHandle = undefined;
|
230 |
|
231 |
|
232 | var now = Date.now();
|
233 | uncommittedReactionRefs.forEach(function (ref) {
|
234 | var tracking = ref.current;
|
235 |
|
236 | if (tracking) {
|
237 | if (now >= tracking.cleanAt) {
|
238 |
|
239 | tracking.reaction.dispose();
|
240 | ref.current = null;
|
241 | uncommittedReactionRefs["delete"](ref);
|
242 | }
|
243 | }
|
244 | });
|
245 |
|
246 | if (uncommittedReactionRefs.size > 0) {
|
247 |
|
248 |
|
249 | ensureCleanupTimerRunning();
|
250 | }
|
251 | }
|
252 |
|
253 | return {
|
254 | addReactionToTrack: function addReactionToTrack(reactionTrackingRef, reaction,
|
255 | /**
|
256 | * On timer based implementation we don't really need this object,
|
257 | * but we keep the same api
|
258 | */
|
259 | objectRetainedByReact) {
|
260 | reactionTrackingRef.current = createTrackingData(reaction);
|
261 | scheduleCleanupOfReactionIfLeaked(reactionTrackingRef);
|
262 | return reactionTrackingRef.current;
|
263 | },
|
264 | recordReactionAsCommitted: recordReactionAsCommitted,
|
265 | forceCleanupTimerToRunNowForTests: forceCleanupTimerToRunNowForTests,
|
266 | resetCleanupScheduleForTests: resetCleanupScheduleForTests
|
267 | };
|
268 | }
|
269 |
|
270 | var _ref = FinalizationRegistryLocal ? createReactionCleanupTrackingUsingFinalizationRegister(FinalizationRegistryLocal) : createTimerBasedReactionCleanupTracking(),
|
271 | addReactionToTrack = _ref.addReactionToTrack,
|
272 | recordReactionAsCommitted = _ref.recordReactionAsCommitted,
|
273 | resetCleanupScheduleForTests = _ref.resetCleanupScheduleForTests;
|
274 |
|
275 | var globalIsUsingStaticRendering = false;
|
276 | function enableStaticRendering(enable) {
|
277 | globalIsUsingStaticRendering = enable;
|
278 | }
|
279 | function isUsingStaticRendering() {
|
280 | return globalIsUsingStaticRendering;
|
281 | }
|
282 |
|
283 | function observerComponentNameFor(baseComponentName) {
|
284 | return "observer" + baseComponentName;
|
285 | }
|
286 |
|
287 |
|
288 |
|
289 |
|
290 |
|
291 | var ObjectToBeRetainedByReact = function ObjectToBeRetainedByReact() {};
|
292 |
|
293 | function objectToBeRetainedByReactFactory() {
|
294 | return new ObjectToBeRetainedByReact();
|
295 | }
|
296 |
|
297 | function useObserver(fn, baseComponentName) {
|
298 | if (baseComponentName === void 0) {
|
299 | baseComponentName = "observed";
|
300 | }
|
301 |
|
302 | if (isUsingStaticRendering()) {
|
303 | return fn();
|
304 | }
|
305 |
|
306 | var _React$useState = React__default.useState(objectToBeRetainedByReactFactory),
|
307 | objectRetainedByReact = _React$useState[0];
|
308 |
|
309 |
|
310 | var _React$useState2 = React__default.useState(),
|
311 | setState = _React$useState2[1];
|
312 |
|
313 | var forceUpdate = function forceUpdate() {
|
314 | return setState([]);
|
315 | };
|
316 |
|
317 |
|
318 |
|
319 |
|
320 | var reactionTrackingRef = React__default.useRef(null);
|
321 |
|
322 | if (!reactionTrackingRef.current) {
|
323 |
|
324 |
|
325 | var newReaction = new mobx.Reaction(observerComponentNameFor(baseComponentName), function () {
|
326 |
|
327 |
|
328 |
|
329 |
|
330 |
|
331 | if (trackingData.mounted) {
|
332 |
|
333 | forceUpdate();
|
334 | } else {
|
335 |
|
336 |
|
337 | trackingData.changedBeforeMount = true;
|
338 | }
|
339 | });
|
340 | var trackingData = addReactionToTrack(reactionTrackingRef, newReaction, objectRetainedByReact);
|
341 | }
|
342 |
|
343 | var reaction = reactionTrackingRef.current.reaction;
|
344 | React__default.useDebugValue(reaction, printDebugValue);
|
345 | React__default.useEffect(function () {
|
346 |
|
347 | recordReactionAsCommitted(reactionTrackingRef);
|
348 |
|
349 | if (reactionTrackingRef.current) {
|
350 |
|
351 |
|
352 |
|
353 | reactionTrackingRef.current.mounted = true;
|
354 |
|
355 | if (reactionTrackingRef.current.changedBeforeMount) {
|
356 | reactionTrackingRef.current.changedBeforeMount = false;
|
357 | forceUpdate();
|
358 | }
|
359 | } else {
|
360 |
|
361 |
|
362 |
|
363 |
|
364 |
|
365 | reactionTrackingRef.current = {
|
366 | reaction: new mobx.Reaction(observerComponentNameFor(baseComponentName), function () {
|
367 |
|
368 | forceUpdate();
|
369 | }),
|
370 | mounted: true,
|
371 | changedBeforeMount: false,
|
372 | cleanAt: Infinity
|
373 | };
|
374 | forceUpdate();
|
375 | }
|
376 |
|
377 | return function () {
|
378 | reactionTrackingRef.current.reaction.dispose();
|
379 | reactionTrackingRef.current = null;
|
380 | };
|
381 | }, []);
|
382 |
|
383 |
|
384 |
|
385 | var rendering;
|
386 | var exception;
|
387 | reaction.track(function () {
|
388 | try {
|
389 | rendering = fn();
|
390 | } catch (e) {
|
391 | exception = e;
|
392 | }
|
393 | });
|
394 |
|
395 | if (exception) {
|
396 | throw exception;
|
397 | }
|
398 |
|
399 | return rendering;
|
400 | }
|
401 |
|
402 | var warnObserverOptionsDeprecated = true;
|
403 | var hasSymbol = typeof Symbol === "function" && Symbol["for"];
|
404 |
|
405 | var ReactForwardRefSymbol = hasSymbol ? Symbol["for"]("react.forward_ref") : typeof React.forwardRef === "function" && React.forwardRef(function (props) {
|
406 | return null;
|
407 | })["$$typeof"];
|
408 | var ReactMemoSymbol = hasSymbol ? Symbol["for"]("react.memo") : typeof React.memo === "function" && React.memo(function (props) {
|
409 | return null;
|
410 | })["$$typeof"];
|
411 |
|
412 | function observer(baseComponent, // TODO remove in next major
|
413 | options) {
|
414 | var _options$forwardRef;
|
415 |
|
416 | if ( warnObserverOptionsDeprecated && options) {
|
417 | warnObserverOptionsDeprecated = false;
|
418 | console.warn("[mobx-react-lite] `observer(fn, { forwardRef: true })` is deprecated, use `observer(React.forwardRef(fn))`");
|
419 | }
|
420 |
|
421 | if (ReactMemoSymbol && baseComponent["$$typeof"] === ReactMemoSymbol) {
|
422 | throw new Error("[mobx-react-lite] You are trying to use `observer` on a function component wrapped in either another `observer` or `React.memo`. The observer already applies 'React.memo' for you.");
|
423 | }
|
424 |
|
425 |
|
426 | if (isUsingStaticRendering()) {
|
427 | return baseComponent;
|
428 | }
|
429 |
|
430 | var useForwardRef = (_options$forwardRef = options == null ? void 0 : options.forwardRef) != null ? _options$forwardRef : false;
|
431 | var render = baseComponent;
|
432 | var baseComponentName = baseComponent.displayName || baseComponent.name;
|
433 |
|
434 |
|
435 | if (ReactForwardRefSymbol && baseComponent["$$typeof"] === ReactForwardRefSymbol) {
|
436 | useForwardRef = true;
|
437 | render = baseComponent["render"];
|
438 |
|
439 | if (typeof render !== "function") {
|
440 | throw new Error("[mobx-react-lite] `render` property of ForwardRef was not a function");
|
441 | }
|
442 | }
|
443 |
|
444 | var observerComponent = function observerComponent(props, ref) {
|
445 | return useObserver(function () {
|
446 | return render(props, ref);
|
447 | }, baseComponentName);
|
448 | };
|
449 |
|
450 |
|
451 |
|
452 | if (baseComponentName !== "") {
|
453 | observerComponent.displayName = baseComponentName;
|
454 | }
|
455 |
|
456 |
|
457 | if (baseComponent.contextTypes) {
|
458 | observerComponent.contextTypes = baseComponent.contextTypes;
|
459 | }
|
460 |
|
461 | if (useForwardRef) {
|
462 |
|
463 |
|
464 |
|
465 | observerComponent = React.forwardRef(observerComponent);
|
466 | }
|
467 |
|
468 |
|
469 |
|
470 |
|
471 | observerComponent = React.memo(observerComponent);
|
472 | copyStaticProperties(baseComponent, observerComponent);
|
473 |
|
474 | {
|
475 | Object.defineProperty(observerComponent, "contextTypes", {
|
476 | set: function set() {
|
477 | var _this$type;
|
478 |
|
479 | throw new Error("[mobx-react-lite] `" + (this.displayName || ((_this$type = this.type) == null ? void 0 : _this$type.displayName) || "Component") + ".contextTypes` must be set before applying `observer`.");
|
480 | }
|
481 | });
|
482 | }
|
483 |
|
484 | return observerComponent;
|
485 | }
|
486 |
|
487 | var hoistBlackList = {
|
488 | $$typeof: true,
|
489 | render: true,
|
490 | compare: true,
|
491 | type: true,
|
492 |
|
493 |
|
494 | displayName: true
|
495 | };
|
496 |
|
497 | function copyStaticProperties(base, target) {
|
498 | Object.keys(base).forEach(function (key) {
|
499 | if (!hoistBlackList[key]) {
|
500 | Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(base, key));
|
501 | }
|
502 | });
|
503 | }
|
504 |
|
505 | function ObserverComponent(_ref) {
|
506 | var children = _ref.children,
|
507 | render = _ref.render;
|
508 | var component = children || render;
|
509 |
|
510 | if (typeof component !== "function") {
|
511 | return null;
|
512 | }
|
513 |
|
514 | return useObserver(component);
|
515 | }
|
516 |
|
517 | {
|
518 | ObserverComponent.propTypes = {
|
519 | children: ObserverPropsCheck,
|
520 | render: ObserverPropsCheck
|
521 | };
|
522 | }
|
523 |
|
524 | ObserverComponent.displayName = "Observer";
|
525 |
|
526 | function ObserverPropsCheck(props, key, componentName, location, propFullName) {
|
527 | var extraKey = key === "children" ? "render" : "children";
|
528 | var hasProp = typeof props[key] === "function";
|
529 | var hasExtraProp = typeof props[extraKey] === "function";
|
530 |
|
531 | if (hasProp && hasExtraProp) {
|
532 | return new Error("MobX Observer: Do not use children and render in the same time in`" + componentName);
|
533 | }
|
534 |
|
535 | if (hasProp || hasExtraProp) {
|
536 | return null;
|
537 | }
|
538 |
|
539 | return new Error("Invalid prop `" + propFullName + "` of type `" + typeof props[key] + "` supplied to" + " `" + componentName + "`, expected `function`.");
|
540 | }
|
541 |
|
542 | function useLocalObservable(initializer, annotations) {
|
543 | return React.useState(function () {
|
544 | return mobx.observable(initializer(), annotations, {
|
545 | autoBind: true
|
546 | });
|
547 | })[0];
|
548 | }
|
549 |
|
550 | function useAsObservableSource(current) {
|
551 | useDeprecated("[mobx-react-lite] 'useAsObservableSource' is deprecated, please store the values directly in an observable, for example by using 'useLocalObservable', and sync future updates using 'useEffect' when needed. See the README for examples.");
|
552 |
|
553 | var _useState = React.useState(function () {
|
554 | return mobx.observable(current, {}, {
|
555 | deep: false
|
556 | });
|
557 | }),
|
558 | res = _useState[0];
|
559 |
|
560 | mobx.runInAction(function () {
|
561 | Object.assign(res, current);
|
562 | });
|
563 | return res;
|
564 | }
|
565 |
|
566 | function useLocalStore(initializer, current) {
|
567 | useDeprecated("[mobx-react-lite] 'useLocalStore' is deprecated, use 'useLocalObservable' instead.");
|
568 | var source = current && useAsObservableSource(current);
|
569 | return React.useState(function () {
|
570 | return mobx.observable(initializer(source), undefined, {
|
571 | autoBind: true
|
572 | });
|
573 | })[0];
|
574 | }
|
575 |
|
576 | observerBatching(reactDom.unstable_batchedUpdates);
|
577 | function useObserver$1(fn, baseComponentName) {
|
578 | if (baseComponentName === void 0) {
|
579 | baseComponentName = "observed";
|
580 | }
|
581 |
|
582 | {
|
583 | useDeprecated("[mobx-react-lite] 'useObserver(fn)' is deprecated. Use `<Observer>{fn}</Observer>` instead, or wrap the entire component in `observer`.");
|
584 | }
|
585 |
|
586 | return useObserver(fn, baseComponentName);
|
587 | }
|
588 | function useStaticRendering(enable) {
|
589 | {
|
590 | console.warn("[mobx-react-lite] 'useStaticRendering' is deprecated, use 'enableStaticRendering' instead");
|
591 | }
|
592 |
|
593 | enableStaticRendering(enable);
|
594 | }
|
595 |
|
596 | exports.Observer = ObserverComponent;
|
597 | exports.clearTimers = resetCleanupScheduleForTests;
|
598 | exports.enableStaticRendering = enableStaticRendering;
|
599 | exports.isObserverBatched = isObserverBatched;
|
600 | exports.isUsingStaticRendering = isUsingStaticRendering;
|
601 | exports.observer = observer;
|
602 | exports.observerBatching = observerBatching;
|
603 | exports.useAsObservableSource = useAsObservableSource;
|
604 | exports.useLocalObservable = useLocalObservable;
|
605 | exports.useLocalStore = useLocalStore;
|
606 | exports.useObserver = useObserver$1;
|
607 | exports.useStaticRendering = useStaticRendering;
|
608 |
|