@reactables/react 2.0.0-beta.8 → 2.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/dist/Hooks/useReactable.d.ts +1 -1
- package/dist/index.cjs +6 -1
- package/dist/index.cjs.map +1 -1
- package/dist/index.js +6 -1
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import { Observable } from 'rxjs';
|
|
2
2
|
import { Reactable, ActionObservableWithTypes, DestroyAction } from '@reactables/core';
|
|
3
3
|
export type HookedReactable<T> = T extends (...args: any[]) => Reactable<infer S, infer U, infer V> ? [S, U, Observable<S>, ActionObservableWithTypes<V>?] : never;
|
|
4
|
-
export declare const useReactable: <T, S extends DestroyAction, U extends unknown[], V extends Record<string, string>>(reactableFactory: (...props: U) => Reactable<T, S, V>, ...props: U) => HookedReactable<
|
|
4
|
+
export declare const useReactable: <T, S extends DestroyAction, U extends unknown[], V extends Record<string, string>>(reactableFactory: (...props: U) => Reactable<T, S, V>, ...props: U) => HookedReactable<typeof reactableFactory>;
|
package/dist/index.cjs
CHANGED
|
@@ -8,6 +8,7 @@ var useReactable = function (reactableFactory) {
|
|
|
8
8
|
props[_i - 1] = arguments[_i];
|
|
9
9
|
}
|
|
10
10
|
var rx = react.useRef(null);
|
|
11
|
+
var lastMount = react.useRef(null);
|
|
11
12
|
/**
|
|
12
13
|
* React Strict Mode has bugs with clean up with refs so it breaks the useReactable hook as of now
|
|
13
14
|
* See Bug: https://github.com/facebook/react/issues/26315
|
|
@@ -20,13 +21,17 @@ var useReactable = function (reactableFactory) {
|
|
|
20
21
|
var _a = rx.current, state$ = _a[0], actions = _a[1], actions$ = _a[2];
|
|
21
22
|
var _b = react.useState(), state = _b[0], setState = _b[1];
|
|
22
23
|
react.useEffect(function () {
|
|
24
|
+
lastMount.current = new Date();
|
|
23
25
|
var subscription = state$.subscribe(function (result) {
|
|
24
26
|
setState(result);
|
|
25
27
|
});
|
|
26
28
|
return function () {
|
|
27
29
|
var _a;
|
|
28
|
-
(_a = actions.destroy) === null || _a === void 0 ? void 0 : _a.call(actions);
|
|
29
30
|
subscription.unsubscribe();
|
|
31
|
+
var diff = new Date().getTime() - lastMount.current.getTime();
|
|
32
|
+
if (diff > 50) {
|
|
33
|
+
(_a = actions.destroy) === null || _a === void 0 ? void 0 : _a.call(actions);
|
|
34
|
+
}
|
|
30
35
|
};
|
|
31
36
|
}, [actions, state$]);
|
|
32
37
|
return [state, actions, state$, actions$];
|
package/dist/index.cjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.cjs","sources":["../src/Hooks/useReactable.ts"],"sourcesContent":["import { Observable } from 'rxjs';\nimport { useEffect, useState, useRef } from 'react';\nimport { Reactable, ActionObservableWithTypes, DestroyAction } from '@reactables/core';\n\nexport type HookedReactable<T> = T extends (...args: any[]) => Reactable<infer S, infer U, infer V>\n ? [S, U, Observable<S>, ActionObservableWithTypes<V>?]\n : never;\n\nexport const useReactable = <\n T,\n S extends DestroyAction,\n U extends unknown[],\n V extends Record<string, string>,\n>(\n reactableFactory: (...props: U) => Reactable<T, S, V>,\n ...props: U\n): HookedReactable<typeof reactableFactory> => {\n const rx = useRef<Reactable<T, S, V>>(null)
|
|
1
|
+
{"version":3,"file":"index.cjs","sources":["../src/Hooks/useReactable.ts"],"sourcesContent":["import { Observable } from 'rxjs';\nimport { useEffect, useState, useRef, MutableRefObject } from 'react';\nimport { Reactable, ActionObservableWithTypes, DestroyAction } from '@reactables/core';\n\nexport type HookedReactable<T> = T extends (...args: any[]) => Reactable<infer S, infer U, infer V>\n ? [S, U, Observable<S>, ActionObservableWithTypes<V>?]\n : never;\n\nexport const useReactable = <\n T,\n S extends DestroyAction,\n U extends unknown[],\n V extends Record<string, string>,\n>(\n reactableFactory: (...props: U) => Reactable<T, S, V>,\n ...props: U\n): HookedReactable<typeof reactableFactory> => {\n const rx = useRef<Reactable<T, S, V>>(null) as MutableRefObject<Reactable<T, S, V>>;\n const lastMount = useRef<Date>(null) as MutableRefObject<Date>;\n\n /**\n * React Strict Mode has bugs with clean up with refs so it breaks the useReactable hook as of now\n * See Bug: https://github.com/facebook/react/issues/26315\n * See Bug: https://github.com/facebook/react/issues/24670\n * Using this recommended approach for resolving Strict Modeissue: https://react.dev/reference/react/useRef#avoiding-recreating-the-ref-contents\n */\n if (rx.current === null) {\n rx.current = reactableFactory(...props);\n }\n\n const [state$, actions, actions$] = rx.current;\n const [state, setState] = useState<T>();\n\n useEffect(() => {\n lastMount.current = new Date();\n const subscription = state$.subscribe((result) => {\n setState(result);\n });\n\n return () => {\n subscription.unsubscribe();\n\n const diff = new Date().getTime() - lastMount.current.getTime();\n if (diff > 50) {\n actions.destroy?.();\n }\n };\n }, [actions, state$]);\n\n return [state, actions, state$, actions$] as unknown as HookedReactable<typeof reactableFactory>;\n};\n"],"names":["useRef","useState","useEffect"],"mappings":";;;;AAQO,IAAM,YAAY,GAAG,UAM1B,gBAAqD,EAAA;IACrD,IAAW,KAAA,GAAA,EAAA;SAAX,IAAW,EAAA,GAAA,CAAA,EAAX,EAAW,GAAA,SAAA,CAAA,MAAA,EAAX,EAAW,EAAA,EAAA;QAAX,KAAW,CAAA,EAAA,GAAA,CAAA,CAAA,GAAA,SAAA,CAAA,EAAA,CAAA;;AAEX,IAAA,IAAM,EAAE,GAAGA,YAAM,CAAqB,IAAI,CAAyC;AACnF,IAAA,IAAM,SAAS,GAAGA,YAAM,CAAO,IAAI,CAA2B;AAE9D;;;;;AAKG;AACH,IAAA,IAAI,EAAE,CAAC,OAAO,KAAK,IAAI,EAAE;AACvB,QAAA,EAAE,CAAC,OAAO,GAAG,gBAAgB,CAAI,KAAA,CAAA,MAAA,EAAA,KAAK,CAAC;;AAGnC,IAAA,IAAA,EAA8B,GAAA,EAAE,CAAC,OAAO,EAAvC,MAAM,GAAA,EAAA,CAAA,CAAA,CAAA,EAAE,OAAO,GAAA,EAAA,CAAA,CAAA,CAAA,EAAE,QAAQ,QAAc;IACxC,IAAA,EAAA,GAAoBC,cAAQ,EAAK,EAAhC,KAAK,GAAA,EAAA,CAAA,CAAA,CAAA,EAAE,QAAQ,GAAA,EAAA,CAAA,CAAA,CAAiB;AAEvC,IAAAC,eAAS,CAAC,YAAA;AACR,QAAA,SAAS,CAAC,OAAO,GAAG,IAAI,IAAI,EAAE;AAC9B,QAAA,IAAM,YAAY,GAAG,MAAM,CAAC,SAAS,CAAC,UAAC,MAAM,EAAA;YAC3C,QAAQ,CAAC,MAAM,CAAC;AAClB,SAAC,CAAC;QAEF,OAAO,YAAA;;YACL,YAAY,CAAC,WAAW,EAAE;AAE1B,YAAA,IAAM,IAAI,GAAG,IAAI,IAAI,EAAE,CAAC,OAAO,EAAE,GAAG,SAAS,CAAC,OAAO,CAAC,OAAO,EAAE;AAC/D,YAAA,IAAI,IAAI,GAAG,EAAE,EAAE;AACb,gBAAA,CAAA,EAAA,GAAA,OAAO,CAAC,OAAO,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,IAAA,CAAA,OAAA,CAAI;;AAEvB,SAAC;AACH,KAAC,EAAE,CAAC,OAAO,EAAE,MAAM,CAAC,CAAC;IAErB,OAAO,CAAC,KAAK,EAAE,OAAO,EAAE,MAAM,EAAE,QAAQ,CAAwD;AAClG;;;;"}
|
package/dist/index.js
CHANGED
|
@@ -6,6 +6,7 @@ var useReactable = function (reactableFactory) {
|
|
|
6
6
|
props[_i - 1] = arguments[_i];
|
|
7
7
|
}
|
|
8
8
|
var rx = useRef(null);
|
|
9
|
+
var lastMount = useRef(null);
|
|
9
10
|
/**
|
|
10
11
|
* React Strict Mode has bugs with clean up with refs so it breaks the useReactable hook as of now
|
|
11
12
|
* See Bug: https://github.com/facebook/react/issues/26315
|
|
@@ -18,13 +19,17 @@ var useReactable = function (reactableFactory) {
|
|
|
18
19
|
var _a = rx.current, state$ = _a[0], actions = _a[1], actions$ = _a[2];
|
|
19
20
|
var _b = useState(), state = _b[0], setState = _b[1];
|
|
20
21
|
useEffect(function () {
|
|
22
|
+
lastMount.current = new Date();
|
|
21
23
|
var subscription = state$.subscribe(function (result) {
|
|
22
24
|
setState(result);
|
|
23
25
|
});
|
|
24
26
|
return function () {
|
|
25
27
|
var _a;
|
|
26
|
-
(_a = actions.destroy) === null || _a === void 0 ? void 0 : _a.call(actions);
|
|
27
28
|
subscription.unsubscribe();
|
|
29
|
+
var diff = new Date().getTime() - lastMount.current.getTime();
|
|
30
|
+
if (diff > 50) {
|
|
31
|
+
(_a = actions.destroy) === null || _a === void 0 ? void 0 : _a.call(actions);
|
|
32
|
+
}
|
|
28
33
|
};
|
|
29
34
|
}, [actions, state$]);
|
|
30
35
|
return [state, actions, state$, actions$];
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../src/Hooks/useReactable.ts"],"sourcesContent":["import { Observable } from 'rxjs';\nimport { useEffect, useState, useRef } from 'react';\nimport { Reactable, ActionObservableWithTypes, DestroyAction } from '@reactables/core';\n\nexport type HookedReactable<T> = T extends (...args: any[]) => Reactable<infer S, infer U, infer V>\n ? [S, U, Observable<S>, ActionObservableWithTypes<V>?]\n : never;\n\nexport const useReactable = <\n T,\n S extends DestroyAction,\n U extends unknown[],\n V extends Record<string, string>,\n>(\n reactableFactory: (...props: U) => Reactable<T, S, V>,\n ...props: U\n): HookedReactable<typeof reactableFactory> => {\n const rx = useRef<Reactable<T, S, V>>(null)
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../src/Hooks/useReactable.ts"],"sourcesContent":["import { Observable } from 'rxjs';\nimport { useEffect, useState, useRef, MutableRefObject } from 'react';\nimport { Reactable, ActionObservableWithTypes, DestroyAction } from '@reactables/core';\n\nexport type HookedReactable<T> = T extends (...args: any[]) => Reactable<infer S, infer U, infer V>\n ? [S, U, Observable<S>, ActionObservableWithTypes<V>?]\n : never;\n\nexport const useReactable = <\n T,\n S extends DestroyAction,\n U extends unknown[],\n V extends Record<string, string>,\n>(\n reactableFactory: (...props: U) => Reactable<T, S, V>,\n ...props: U\n): HookedReactable<typeof reactableFactory> => {\n const rx = useRef<Reactable<T, S, V>>(null) as MutableRefObject<Reactable<T, S, V>>;\n const lastMount = useRef<Date>(null) as MutableRefObject<Date>;\n\n /**\n * React Strict Mode has bugs with clean up with refs so it breaks the useReactable hook as of now\n * See Bug: https://github.com/facebook/react/issues/26315\n * See Bug: https://github.com/facebook/react/issues/24670\n * Using this recommended approach for resolving Strict Modeissue: https://react.dev/reference/react/useRef#avoiding-recreating-the-ref-contents\n */\n if (rx.current === null) {\n rx.current = reactableFactory(...props);\n }\n\n const [state$, actions, actions$] = rx.current;\n const [state, setState] = useState<T>();\n\n useEffect(() => {\n lastMount.current = new Date();\n const subscription = state$.subscribe((result) => {\n setState(result);\n });\n\n return () => {\n subscription.unsubscribe();\n\n const diff = new Date().getTime() - lastMount.current.getTime();\n if (diff > 50) {\n actions.destroy?.();\n }\n };\n }, [actions, state$]);\n\n return [state, actions, state$, actions$] as unknown as HookedReactable<typeof reactableFactory>;\n};\n"],"names":[],"mappings":";;AAQO,IAAM,YAAY,GAAG,UAM1B,gBAAqD,EAAA;IACrD,IAAW,KAAA,GAAA,EAAA;SAAX,IAAW,EAAA,GAAA,CAAA,EAAX,EAAW,GAAA,SAAA,CAAA,MAAA,EAAX,EAAW,EAAA,EAAA;QAAX,KAAW,CAAA,EAAA,GAAA,CAAA,CAAA,GAAA,SAAA,CAAA,EAAA,CAAA;;AAEX,IAAA,IAAM,EAAE,GAAG,MAAM,CAAqB,IAAI,CAAyC;AACnF,IAAA,IAAM,SAAS,GAAG,MAAM,CAAO,IAAI,CAA2B;AAE9D;;;;;AAKG;AACH,IAAA,IAAI,EAAE,CAAC,OAAO,KAAK,IAAI,EAAE;AACvB,QAAA,EAAE,CAAC,OAAO,GAAG,gBAAgB,CAAI,KAAA,CAAA,MAAA,EAAA,KAAK,CAAC;;AAGnC,IAAA,IAAA,EAA8B,GAAA,EAAE,CAAC,OAAO,EAAvC,MAAM,GAAA,EAAA,CAAA,CAAA,CAAA,EAAE,OAAO,GAAA,EAAA,CAAA,CAAA,CAAA,EAAE,QAAQ,QAAc;IACxC,IAAA,EAAA,GAAoB,QAAQ,EAAK,EAAhC,KAAK,GAAA,EAAA,CAAA,CAAA,CAAA,EAAE,QAAQ,GAAA,EAAA,CAAA,CAAA,CAAiB;AAEvC,IAAA,SAAS,CAAC,YAAA;AACR,QAAA,SAAS,CAAC,OAAO,GAAG,IAAI,IAAI,EAAE;AAC9B,QAAA,IAAM,YAAY,GAAG,MAAM,CAAC,SAAS,CAAC,UAAC,MAAM,EAAA;YAC3C,QAAQ,CAAC,MAAM,CAAC;AAClB,SAAC,CAAC;QAEF,OAAO,YAAA;;YACL,YAAY,CAAC,WAAW,EAAE;AAE1B,YAAA,IAAM,IAAI,GAAG,IAAI,IAAI,EAAE,CAAC,OAAO,EAAE,GAAG,SAAS,CAAC,OAAO,CAAC,OAAO,EAAE;AAC/D,YAAA,IAAI,IAAI,GAAG,EAAE,EAAE;AACb,gBAAA,CAAA,EAAA,GAAA,OAAO,CAAC,OAAO,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,IAAA,CAAA,OAAA,CAAI;;AAEvB,SAAC;AACH,KAAC,EAAE,CAAC,OAAO,EAAE,MAAM,CAAC,CAAC;IAErB,OAAO,CAAC,KAAK,EAAE,OAAO,EAAE,MAAM,EAAE,QAAQ,CAAwD;AAClG;;;;"}
|
package/package.json
CHANGED