mobx-react-use-autorun 4.0.67 → 4.0.68

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 (6) hide show
  1. package/dist/cjs/js/useMobxEffect.js +27 -18
  2. package/dist/cjs/js/useMobxEffect.js.map +1 -1
  3. package/dist/esm/js/useMobxEffect.js +29 -20
  4. package/dist/esm/js/useMobxEffect.js.map +1 -1
  5. package/lib/js/useMobxEffect.tsx +35 -14
  6. package/package.json +1 -1
package/dist/cjs/js/useMobxEffect.js CHANGED
@@ -1,38 +1,47 @@
1
1
  "use strict";
2
- var __assign = (this && this.__assign) || function () {
3
- __assign = Object.assign || function(t) {
4
- for (var s, i = 1, n = arguments.length; i < n; i++) {
5
- s = arguments[i];
6
- for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
7
- t[p] = s[p];
8
- }
9
- return t;
10
- };
11
- return __assign.apply(this, arguments);
12
- };
13
2
  Object.defineProperty(exports, "__esModule", { value: true });
14
3
  exports.useMobxEffect = void 0;
15
4
  var useMount_1 = require("./useMount");
5
+ var rxjs_1 = require("rxjs");
16
6
  var mobx_1 = require("mobx");
17
7
  var react_1 = require("react");
18
- var useMobxState_1 = require("./useMobxState");
8
+ var mobx_2 = require("mobx");
19
9
  var useMobxEffect = function (callback, dependencyList) {
20
- var state = (0, useMobxState_1.useMobxState)({}, {
21
- callback: callback
22
- });
23
- var dependencyListState = (0, useMobxState_1.useMobxState)({}, __assign({}, (dependencyList ? dependencyList : {})));
10
+ var callbackRef = (0, react_1.useRef)({ callback: callback });
11
+ var subjectRef = (0, react_1.useRef)(new rxjs_1.ReplaySubject(1));
12
+ var dependencyListRef = (0, react_1.useRef)(dependencyList);
13
+ callbackRef.current.callback = callback;
14
+ dependencyListRef.current = dependencyList;
24
15
  (0, react_1.useEffect)(function () {
25
16
  if (dependencyList) {
26
17
  return;
27
18
  }
28
19
  callback();
29
20
  });
21
+ (0, react_1.useEffect)(function () {
22
+ if (!dependencyList) {
23
+ return;
24
+ }
25
+ subjectRef.current.next();
26
+ }, dependencyList);
30
27
  (0, useMount_1.useMount)(function (subscription) {
31
28
  if (!dependencyList) {
32
29
  return;
33
30
  }
34
- var disposer = (0, mobx_1.reaction)(function () { return [(0, mobx_1.toJS)(dependencyListState)]; }, function () { return state.callback(); }, { fireImmediately: true, delay: 1 });
35
- subscription.add(function () { return disposer(); });
31
+ var mobxData = (0, mobx_1.makeAutoObservable)(Object.assign({}, dependencyListRef.current));
32
+ subscription.add(subjectRef.current.pipe((0, rxjs_1.tap)(function () {
33
+ (0, mobx_2.runInAction)(function () {
34
+ var _a, _b;
35
+ var props = Object.assign({}, dependencyListRef.current);
36
+ for (var key in props) {
37
+ (0, mobx_2.extendObservable)(mobxData, (_a = {}, _a[key] = props[key], _a), (_b = {}, _b[key] = false, _b));
38
+ }
39
+ });
40
+ })).subscribe());
41
+ var disposer = (0, mobx_1.reaction)(function () { return [(0, mobx_1.toJS)(mobxData)]; }, function () { return callbackRef.current.callback(); }, { fireImmediately: true, delay: 1 });
42
+ subscription.add(new rxjs_1.Subscription(function () {
43
+ disposer();
44
+ }));
36
45
  });
37
46
  };
38
47
  exports.useMobxEffect = useMobxEffect;
package/dist/cjs/js/useMobxEffect.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"useMobxEffect.js","sourceRoot":"","sources":["../../../lib/js/useMobxEffect.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;AAAA,uCAAsC;AACtC,6BAAqC;AACrC,+BAAkC;AAClC,+CAA8C;AAEvC,IAAM,aAAa,GAAG,UAAC,QAAoB,EAAE,cAAsB;IAEtE,IAAM,KAAK,GAAG,IAAA,2BAAY,EAAC,EAC1B,EAAE;QACC,QAAQ,UAAA;KACX,CAAC,CAAC;IAEH,IAAM,mBAAmB,GAAG,IAAA,2BAAY,EAAC,EAExC,eACM,CAAC,cAAc,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,EAAE,CAAC,EAC3C,CAAA;IAEF,IAAA,iBAAS,EAAC;QACN,IAAI,cAAc,EAAE;YAChB,OAAO;SACV;QACD,QAAQ,EAAE,CAAC;IACf,CAAC,CAAC,CAAA;IAEF,IAAA,mBAAQ,EAAC,UAAC,YAAY;QAClB,IAAI,CAAC,cAAc,EAAE;YACjB,OAAO;SACV;QAED,IAAM,QAAQ,GAAG,IAAA,eAAQ,EAAC,cAAM,OAAA,CAAC,IAAA,WAAI,EAAC,mBAAmB,CAAC,CAAC,EAA3B,CAA2B,EAAE,cAAM,OAAA,KAAK,CAAC,QAAQ,EAAE,EAAhB,CAAgB,EAAE,EAAE,eAAe,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC,EAAE,CAAC,CAAC;QAE1H,YAAY,CAAC,GAAG,CAAC,cAAM,OAAA,QAAQ,EAAE,EAAV,CAAU,CAAC,CAAC;IACvC,CAAC,CAAC,CAAA;AAEN,CAAC,CAAA;AA9BY,QAAA,aAAa,iBA8BzB"}
1
+ {"version":3,"file":"useMobxEffect.js","sourceRoot":"","sources":["../../../lib/js/useMobxEffect.tsx"],"names":[],"mappings":";;;AAAA,uCAAsC;AACtC,6BAAwD;AACxD,6BAAyD;AACzD,+BAA0C;AAC1C,6BAAqD;AAE9C,IAAM,aAAa,GAAG,UAAC,QAAoB,EAAE,cAAsB;IAEtE,IAAM,WAAW,GAAG,IAAA,cAAM,EAA2B,EAAE,QAAQ,EAAE,QAAQ,EAAE,CAAC,CAAC;IAE7E,IAAM,UAAU,GAAG,IAAA,cAAM,EAAC,IAAI,oBAAa,CAAO,CAAC,CAAC,CAAC,CAAC;IAEtD,IAAM,iBAAiB,GAAG,IAAA,cAAM,EAAC,cAAc,CAAC,CAAC;IAEjD,WAAW,CAAC,OAAQ,CAAC,QAAQ,GAAG,QAAQ,CAAC;IAEzC,iBAAiB,CAAC,OAAO,GAAG,cAAc,CAAC;IAE3C,IAAA,iBAAS,EAAC;QACN,IAAI,cAAc,EAAE;YAChB,OAAO;SACV;QACD,QAAQ,EAAE,CAAC;IACf,CAAC,CAAC,CAAA;IAEF,IAAA,iBAAS,EAAC;QACN,IAAI,CAAC,cAAc,EAAE;YACjB,OAAO;SACV;QACD,UAAU,CAAC,OAAO,CAAC,IAAI,EAAE,CAAC;IAC9B,CAAC,EAAE,cAAc,CAAC,CAAA;IAElB,IAAA,mBAAQ,EAAC,UAAC,YAAY;QAClB,IAAI,CAAC,cAAc,EAAE;YACjB,OAAO;SACV;QACD,IAAM,QAAQ,GAAG,IAAA,yBAAkB,EAAC,MAAM,CAAC,MAAM,CAAC,EAAE,EAAE,iBAAiB,CAAC,OAAO,CAAC,CAAC,CAAC;QAClF,YAAY,CAAC,GAAG,CAAC,UAAU,CAAC,OAAO,CAAC,IAAI,CACpC,IAAA,UAAG,EAAC;YACA,IAAA,kBAAW,EAAC;;gBACR,IAAM,KAAK,GAAG,MAAM,CAAC,MAAM,CAAC,EAAE,EAAE,iBAAiB,CAAC,OAAO,CAAC,CAAC;gBAC3D,KAAK,IAAM,GAAG,IAAI,KAAK,EAAE;oBACrB,IAAA,uBAAgB,EAAC,QAAQ,YAAI,GAAC,GAAG,IAAG,KAAK,CAAC,GAAG,CAAC,iBAAM,GAAC,GAAG,IAAG,KAAK,MAAG,CAAC;iBACvE;YACL,CAAC,CAAC,CAAA;QACN,CAAC,CAAC,CACL,CAAC,SAAS,EAAE,CAAC,CAAC;QAEf,IAAM,QAAQ,GAAG,IAAA,eAAQ,EAAC,cAAM,OAAA,CAAC,IAAA,WAAI,EAAC,QAAQ,CAAC,CAAC,EAAhB,CAAgB,EAAE,cAAM,OAAA,WAAW,CAAC,OAAQ,CAAC,QAAQ,EAAE,EAA/B,CAA+B,EAAE,EAAE,eAAe,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC,EAAE,CAAC,CAAC;QAE9H,YAAY,CAAC,GAAG,CAAC,IAAI,mBAAY,CAAC;YAC9B,QAAQ,EAAE,CAAC;QACf,CAAC,CAAC,CAAC,CAAC;IAER,CAAC,CAAC,CAAA;AAEN,CAAC,CAAA;AAlDY,QAAA,aAAa,iBAkDzB"}
package/dist/esm/js/useMobxEffect.js CHANGED
@@ -1,35 +1,44 @@
1
- var __assign = (this && this.__assign) || function () {
2
- __assign = Object.assign || function(t) {
3
- for (var s, i = 1, n = arguments.length; i < n; i++) {
4
- s = arguments[i];
5
- for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
6
- t[p] = s[p];
7
- }
8
- return t;
9
- };
10
- return __assign.apply(this, arguments);
11
- };
12
1
  import { useMount } from './useMount';
13
- import { reaction, toJS } from 'mobx';
14
- import { useEffect } from 'react';
15
- import { useMobxState } from './useMobxState';
2
+ import { ReplaySubject, Subscription, tap } from 'rxjs';
3
+ import { makeAutoObservable, reaction, toJS } from 'mobx';
4
+ import { useEffect, useRef } from 'react';
5
+ import { extendObservable, runInAction } from 'mobx';
16
6
  export var useMobxEffect = function (callback, dependencyList) {
17
- var state = useMobxState({}, {
18
- callback: callback
19
- });
20
- var dependencyListState = useMobxState({}, __assign({}, (dependencyList ? dependencyList : {})));
7
+ var callbackRef = useRef({ callback: callback });
8
+ var subjectRef = useRef(new ReplaySubject(1));
9
+ var dependencyListRef = useRef(dependencyList);
10
+ callbackRef.current.callback = callback;
11
+ dependencyListRef.current = dependencyList;
21
12
  useEffect(function () {
22
13
  if (dependencyList) {
23
14
  return;
24
15
  }
25
16
  callback();
26
17
  });
18
+ useEffect(function () {
19
+ if (!dependencyList) {
20
+ return;
21
+ }
22
+ subjectRef.current.next();
23
+ }, dependencyList);
27
24
  useMount(function (subscription) {
28
25
  if (!dependencyList) {
29
26
  return;
30
27
  }
31
- var disposer = reaction(function () { return [toJS(dependencyListState)]; }, function () { return state.callback(); }, { fireImmediately: true, delay: 1 });
32
- subscription.add(function () { return disposer(); });
28
+ var mobxData = makeAutoObservable(Object.assign({}, dependencyListRef.current));
29
+ subscription.add(subjectRef.current.pipe(tap(function () {
30
+ runInAction(function () {
31
+ var _a, _b;
32
+ var props = Object.assign({}, dependencyListRef.current);
33
+ for (var key in props) {
34
+ extendObservable(mobxData, (_a = {}, _a[key] = props[key], _a), (_b = {}, _b[key] = false, _b));
35
+ }
36
+ });
37
+ })).subscribe());
38
+ var disposer = reaction(function () { return [toJS(mobxData)]; }, function () { return callbackRef.current.callback(); }, { fireImmediately: true, delay: 1 });
39
+ subscription.add(new Subscription(function () {
40
+ disposer();
41
+ }));
33
42
  });
34
43
  };
35
44
  //# sourceMappingURL=useMobxEffect.js.map
package/dist/esm/js/useMobxEffect.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"useMobxEffect.js","sourceRoot":"","sources":["../../../lib/js/useMobxEffect.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,QAAQ,EAAE,IAAI,EAAE,MAAM,MAAM,CAAA;AACrC,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAClC,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAE9C,MAAM,CAAC,IAAM,aAAa,GAAG,UAAC,QAAoB,EAAE,cAAsB;IAEtE,IAAM,KAAK,GAAG,YAAY,CAAC,EAC1B,EAAE;QACC,QAAQ,UAAA;KACX,CAAC,CAAC;IAEH,IAAM,mBAAmB,GAAG,YAAY,CAAC,EAExC,eACM,CAAC,cAAc,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,EAAE,CAAC,EAC3C,CAAA;IAEF,SAAS,CAAC;QACN,IAAI,cAAc,EAAE;YAChB,OAAO;SACV;QACD,QAAQ,EAAE,CAAC;IACf,CAAC,CAAC,CAAA;IAEF,QAAQ,CAAC,UAAC,YAAY;QAClB,IAAI,CAAC,cAAc,EAAE;YACjB,OAAO;SACV;QAED,IAAM,QAAQ,GAAG,QAAQ,CAAC,cAAM,OAAA,CAAC,IAAI,CAAC,mBAAmB,CAAC,CAAC,EAA3B,CAA2B,EAAE,cAAM,OAAA,KAAK,CAAC,QAAQ,EAAE,EAAhB,CAAgB,EAAE,EAAE,eAAe,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC,EAAE,CAAC,CAAC;QAE1H,YAAY,CAAC,GAAG,CAAC,cAAM,OAAA,QAAQ,EAAE,EAAV,CAAU,CAAC,CAAC;IACvC,CAAC,CAAC,CAAA;AAEN,CAAC,CAAA"}
1
+ {"version":3,"file":"useMobxEffect.js","sourceRoot":"","sources":["../../../lib/js/useMobxEffect.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,aAAa,EAAE,YAAY,EAAE,GAAG,EAAE,MAAM,MAAM,CAAC;AACxD,OAAO,EAAE,kBAAkB,EAAE,QAAQ,EAAE,IAAI,EAAE,MAAM,MAAM,CAAA;AACzD,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAE,gBAAgB,EAAE,WAAW,EAAE,MAAM,MAAM,CAAC;AAErD,MAAM,CAAC,IAAM,aAAa,GAAG,UAAC,QAAoB,EAAE,cAAsB;IAEtE,IAAM,WAAW,GAAG,MAAM,CAA2B,EAAE,QAAQ,EAAE,QAAQ,EAAE,CAAC,CAAC;IAE7E,IAAM,UAAU,GAAG,MAAM,CAAC,IAAI,aAAa,CAAO,CAAC,CAAC,CAAC,CAAC;IAEtD,IAAM,iBAAiB,GAAG,MAAM,CAAC,cAAc,CAAC,CAAC;IAEjD,WAAW,CAAC,OAAQ,CAAC,QAAQ,GAAG,QAAQ,CAAC;IAEzC,iBAAiB,CAAC,OAAO,GAAG,cAAc,CAAC;IAE3C,SAAS,CAAC;QACN,IAAI,cAAc,EAAE;YAChB,OAAO;SACV;QACD,QAAQ,EAAE,CAAC;IACf,CAAC,CAAC,CAAA;IAEF,SAAS,CAAC;QACN,IAAI,CAAC,cAAc,EAAE;YACjB,OAAO;SACV;QACD,UAAU,CAAC,OAAO,CAAC,IAAI,EAAE,CAAC;IAC9B,CAAC,EAAE,cAAc,CAAC,CAAA;IAElB,QAAQ,CAAC,UAAC,YAAY;QAClB,IAAI,CAAC,cAAc,EAAE;YACjB,OAAO;SACV;QACD,IAAM,QAAQ,GAAG,kBAAkB,CAAC,MAAM,CAAC,MAAM,CAAC,EAAE,EAAE,iBAAiB,CAAC,OAAO,CAAC,CAAC,CAAC;QAClF,YAAY,CAAC,GAAG,CAAC,UAAU,CAAC,OAAO,CAAC,IAAI,CACpC,GAAG,CAAC;YACA,WAAW,CAAC;;gBACR,IAAM,KAAK,GAAG,MAAM,CAAC,MAAM,CAAC,EAAE,EAAE,iBAAiB,CAAC,OAAO,CAAC,CAAC;gBAC3D,KAAK,IAAM,GAAG,IAAI,KAAK,EAAE;oBACrB,gBAAgB,CAAC,QAAQ,YAAI,GAAC,GAAG,IAAG,KAAK,CAAC,GAAG,CAAC,iBAAM,GAAC,GAAG,IAAG,KAAK,MAAG,CAAC;iBACvE;YACL,CAAC,CAAC,CAAA;QACN,CAAC,CAAC,CACL,CAAC,SAAS,EAAE,CAAC,CAAC;QAEf,IAAM,QAAQ,GAAG,QAAQ,CAAC,cAAM,OAAA,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,EAAhB,CAAgB,EAAE,cAAM,OAAA,WAAW,CAAC,OAAQ,CAAC,QAAQ,EAAE,EAA/B,CAA+B,EAAE,EAAE,eAAe,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC,EAAE,CAAC,CAAC;QAE9H,YAAY,CAAC,GAAG,CAAC,IAAI,YAAY,CAAC;YAC9B,QAAQ,EAAE,CAAC;QACf,CAAC,CAAC,CAAC,CAAC;IAER,CAAC,CAAC,CAAA;AAEN,CAAC,CAAA"}
package/lib/js/useMobxEffect.tsx CHANGED
@@ -1,20 +1,20 @@
1
1
  import { useMount } from './useMount';
2
- import { reaction, toJS } from 'mobx'
3
- import { useEffect } from 'react';
4
- import { useMobxState } from './useMobxState';
2
+ import { ReplaySubject, Subscription, tap } from 'rxjs';
3
+ import { makeAutoObservable, reaction, toJS } from 'mobx'
4
+ import { useEffect, useRef } from 'react';
5
+ import { extendObservable, runInAction } from 'mobx';
5
6
 
6
7
  export const useMobxEffect = (callback: () => void, dependencyList?: any[]): void => {
7
8
 
8
- const state = useMobxState({
9
- }, {
10
- callback
11
- });
9
+ const callbackRef = useRef<{ callback: () => void }>({ callback: callback });
12
10
 
13
- const dependencyListState = useMobxState({
11
+ const subjectRef = useRef(new ReplaySubject<void>(1));
14
12
 
15
- }, {
16
- ...(dependencyList ? dependencyList : {})
17
- })
13
+ const dependencyListRef = useRef(dependencyList);
14
+
15
+ callbackRef.current!.callback = callback;
16
+
17
+ dependencyListRef.current = dependencyList;
18
18
 
19
19
  useEffect(() => {
20
20
  if (dependencyList) {
@@ -23,14 +23,35 @@ export const useMobxEffect = (callback: () => void, dependencyList?: any[]): voi
23
23
  callback();
24
24
  })
25
25
 
26
- useMount((subscription) => {
26
+ useEffect(() => {
27
27
  if (!dependencyList) {
28
28
  return;
29
29
  }
30
+ subjectRef.current.next();
31
+ }, dependencyList)
30
32
 
31
- const disposer = reaction(() => [toJS(dependencyListState)], () => state.callback(), { fireImmediately: true, delay: 1 });
33
+ useMount((subscription) => {
34
+ if (!dependencyList) {
35
+ return;
36
+ }
37
+ const mobxData = makeAutoObservable(Object.assign({}, dependencyListRef.current));
38
+ subscription.add(subjectRef.current.pipe(
39
+ tap(() => {
40
+ runInAction(() => {
41
+ const props = Object.assign({}, dependencyListRef.current);
42
+ for (const key in props) {
43
+ extendObservable(mobxData, { [key]: props[key] }, { [key]: false });
44
+ }
45
+ })
46
+ })
47
+ ).subscribe());
48
+
49
+ const disposer = reaction(() => [toJS(mobxData)], () => callbackRef.current!.callback(), { fireImmediately: true, delay: 1 });
50
+
51
+ subscription.add(new Subscription(() => {
52
+ disposer();
53
+ }));
32
54
 
33
- subscription.add(() => disposer());
34
55
  })
35
56
 
36
57
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "mobx-react-use-autorun",
3
- "version": "4.0.67",
3
+ "version": "4.0.68",
4
4
  "description": "Provide concise usage for mobx in react",
5
5
  "scripts": {
6
6
  "test": "node bin/mobx_react_test.js",