@stryke/hooks 0.4.46 → 0.4.48
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 +15 -0
- package/dist/_virtual/rolldown_runtime.cjs +29 -1
- package/dist/env/src/runtime-checks.cjs +57 -1
- package/dist/env/src/runtime-checks.mjs +56 -1
- package/dist/env/src/runtime-checks.mjs.map +1 -1
- package/dist/helpers/src/debounce.cjs +62 -1
- package/dist/helpers/src/debounce.mjs +61 -1
- package/dist/helpers/src/debounce.mjs.map +1 -1
- package/dist/helpers/src/throttle.cjs +43 -1
- package/dist/helpers/src/throttle.mjs +42 -1
- package/dist/helpers/src/throttle.mjs.map +1 -1
- package/dist/index.cjs +41 -1
- package/dist/index.mjs +19 -1
- package/dist/type-checks/src/get-object-tag.cjs +15 -1
- package/dist/type-checks/src/get-object-tag.mjs +14 -1
- package/dist/type-checks/src/get-object-tag.mjs.map +1 -1
- package/dist/type-checks/src/is-equal.cjs +19 -1
- package/dist/type-checks/src/is-equal.mjs +18 -1
- package/dist/type-checks/src/is-equal.mjs.map +1 -1
- package/dist/type-checks/src/is-function.cjs +25 -1
- package/dist/type-checks/src/is-function.mjs +25 -1
- package/dist/type-checks/src/is-function.mjs.map +1 -1
- package/dist/types/src/base.cjs +6 -1
- package/dist/types/src/base.mjs +5 -1
- package/dist/types/src/base.mjs.map +1 -1
- package/dist/use-battery.cjs +60 -1
- package/dist/use-battery.mjs +58 -1
- package/dist/use-battery.mjs.map +1 -1
- package/dist/use-callback-ref.cjs +18 -1
- package/dist/use-callback-ref.mjs +17 -1
- package/dist/use-callback-ref.mjs.map +1 -1
- package/dist/use-callback-stable.cjs +26 -1
- package/dist/use-callback-stable.mjs +26 -1
- package/dist/use-callback-stable.mjs.map +1 -1
- package/dist/use-click-away.cjs +33 -1
- package/dist/use-click-away.mjs +32 -1
- package/dist/use-click-away.mjs.map +1 -1
- package/dist/use-compose-refs.cjs +43 -1
- package/dist/use-compose-refs.mjs +40 -1
- package/dist/use-compose-refs.mjs.map +1 -1
- package/dist/use-copy-to-clipboard.cjs +38 -1
- package/dist/use-copy-to-clipboard.mjs +37 -1
- package/dist/use-copy-to-clipboard.mjs.map +1 -1
- package/dist/use-debounce.cjs +44 -1
- package/dist/use-debounce.mjs +42 -1
- package/dist/use-debounce.mjs.map +1 -1
- package/dist/use-did-finish-ssr.cjs +27 -1
- package/dist/use-did-finish-ssr.mjs +24 -1
- package/dist/use-did-finish-ssr.mjs.map +1 -1
- package/dist/use-escape-keydown.cjs +23 -1
- package/dist/use-escape-keydown.mjs +22 -1
- package/dist/use-escape-keydown.mjs.map +1 -1
- package/dist/use-event.cjs +27 -1
- package/dist/use-event.mjs +26 -1
- package/dist/use-event.mjs.map +1 -1
- package/dist/use-hover.cjs +33 -1
- package/dist/use-hover.mjs +32 -1
- package/dist/use-hover.mjs.map +1 -1
- package/dist/use-idle.cjs +50 -1
- package/dist/use-idle.mjs +49 -1
- package/dist/use-idle.mjs.map +1 -1
- package/dist/use-isomorphic-layout-effect.cjs +14 -1
- package/dist/use-isomorphic-layout-effect.mjs +13 -1
- package/dist/use-isomorphic-layout-effect.mjs.map +1 -1
- package/dist/use-keyboard-visible.cjs +24 -1
- package/dist/use-keyboard-visible.mjs +23 -1
- package/dist/use-keyboard-visible.mjs.map +1 -1
- package/dist/use-memo-stable.cjs +48 -1
- package/dist/use-memo-stable.mjs +47 -1
- package/dist/use-memo-stable.mjs.map +1 -1
- package/dist/use-network-state.cjs +57 -1
- package/dist/use-network-state.mjs +55 -1
- package/dist/use-network-state.mjs.map +1 -1
- package/dist/use-previous.cjs +20 -1
- package/dist/use-previous.mjs +19 -1
- package/dist/use-previous.mjs.map +1 -1
- package/package.json +2 -2
package/dist/use-idle.mjs
CHANGED
|
@@ -1,2 +1,50 @@
|
|
|
1
|
-
import{throttle
|
|
1
|
+
import { throttle } from "./helpers/src/throttle.mjs";
|
|
2
|
+
import { useEffect, useState } from "react";
|
|
3
|
+
|
|
4
|
+
//#region src/use-idle.ts
|
|
5
|
+
/**
|
|
6
|
+
* A hook that returns a boolean indicating if the user is idle.
|
|
7
|
+
*
|
|
8
|
+
* @param ms - The number of milliseconds to wait before considering the user as idle
|
|
9
|
+
* @returns A boolean indicating if the user is idle
|
|
10
|
+
*/
|
|
11
|
+
const useIdle = (ms = 1e3 * 60) => {
|
|
12
|
+
const [idle, setIdle] = useState(false);
|
|
13
|
+
useEffect(() => {
|
|
14
|
+
let timeoutId = -1;
|
|
15
|
+
const handleTimeout = () => {
|
|
16
|
+
setIdle(true);
|
|
17
|
+
};
|
|
18
|
+
const handleEvent = throttle(() => {
|
|
19
|
+
setIdle(false);
|
|
20
|
+
clearTimeout(timeoutId);
|
|
21
|
+
timeoutId = setTimeout(handleTimeout, ms);
|
|
22
|
+
}, 500);
|
|
23
|
+
const handleVisibilityChange = () => {
|
|
24
|
+
if (!document.hidden) handleEvent();
|
|
25
|
+
};
|
|
26
|
+
timeoutId = setTimeout(handleTimeout, ms);
|
|
27
|
+
addEventListener("mousemove", handleEvent);
|
|
28
|
+
addEventListener("mousedown", handleEvent);
|
|
29
|
+
window.addEventListener("resize", handleEvent);
|
|
30
|
+
addEventListener("keydown", handleEvent);
|
|
31
|
+
addEventListener("touchstart", handleEvent);
|
|
32
|
+
window.addEventListener("wheel", handleEvent);
|
|
33
|
+
document.addEventListener("visibilitychange", handleVisibilityChange);
|
|
34
|
+
return () => {
|
|
35
|
+
removeEventListener("mousemove", handleEvent);
|
|
36
|
+
removeEventListener("mousedown", handleEvent);
|
|
37
|
+
window.removeEventListener("resize", handleEvent);
|
|
38
|
+
removeEventListener("keydown", handleEvent);
|
|
39
|
+
removeEventListener("touchstart", handleEvent);
|
|
40
|
+
window.removeEventListener("wheel", handleEvent);
|
|
41
|
+
document.removeEventListener("visibilitychange", handleVisibilityChange);
|
|
42
|
+
clearTimeout(timeoutId);
|
|
43
|
+
};
|
|
44
|
+
}, [ms]);
|
|
45
|
+
return idle;
|
|
46
|
+
};
|
|
47
|
+
|
|
48
|
+
//#endregion
|
|
49
|
+
export { useIdle };
|
|
2
50
|
//# sourceMappingURL=use-idle.mjs.map
|
package/dist/use-idle.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-idle.mjs","names":["timeoutId: any"],"sources":["../src/use-idle.ts"],"sourcesContent":["/* -------------------------------------------------------------------\n\n ⚡ Storm Software - Stryke\n\n This code was released as part of the Stryke project. Stryke\n is maintained by Storm Software under the Apache-2.0 license, and is\n free for commercial and private use. For more information, please visit\n our licensing page at https://stormsoftware.com/licenses/projects/stryke.\n\n Website: https://stormsoftware.com\n Repository: https://github.com/storm-software/stryke\n Documentation: https://docs.stormsoftware.com/projects/stryke\n Contact: https://stormsoftware.com/contact\n\n SPDX-License-Identifier: Apache-2.0\n\n ------------------------------------------------------------------- */\n\nimport { throttle } from \"@stryke/helpers/throttle\";\nimport { useEffect, useState } from \"react\";\n\n/**\n * A hook that returns a boolean indicating if the user is idle.\n *\n * @param ms - The number of milliseconds to wait before considering the user as idle\n * @returns A boolean indicating if the user is idle\n */\nexport const useIdle = (ms = 1000 * 60): boolean => {\n const [idle, setIdle] = useState(false);\n\n useEffect(() => {\n let timeoutId: any = -1;\n\n const handleTimeout = () => {\n setIdle(true);\n };\n\n const handleEvent = throttle(() => {\n setIdle(false);\n\n clearTimeout(timeoutId);\n timeoutId = setTimeout(handleTimeout, ms);\n }, 500);\n\n const handleVisibilityChange = () => {\n if (!document.hidden) {\n handleEvent();\n }\n };\n\n timeoutId = setTimeout(handleTimeout, ms);\n\n addEventListener(\"mousemove\", handleEvent);\n addEventListener(\"mousedown\", handleEvent);\n window.addEventListener(\"resize\", handleEvent);\n addEventListener(\"keydown\", handleEvent);\n addEventListener(\"touchstart\", handleEvent);\n window.addEventListener(\"wheel\", handleEvent);\n document.addEventListener(\"visibilitychange\", handleVisibilityChange);\n\n return () => {\n removeEventListener(\"mousemove\", handleEvent);\n removeEventListener(\"mousedown\", handleEvent);\n window.removeEventListener(\"resize\", handleEvent);\n removeEventListener(\"keydown\", handleEvent);\n removeEventListener(\"touchstart\", handleEvent);\n window.removeEventListener(\"wheel\", handleEvent);\n document.removeEventListener(\"visibilitychange\", handleVisibilityChange);\n clearTimeout(timeoutId);\n };\n }, [ms]);\n\n return idle;\n};\n"],"mappings":"
|
|
1
|
+
{"version":3,"file":"use-idle.mjs","names":["timeoutId: any"],"sources":["../src/use-idle.ts"],"sourcesContent":["/* -------------------------------------------------------------------\n\n ⚡ Storm Software - Stryke\n\n This code was released as part of the Stryke project. Stryke\n is maintained by Storm Software under the Apache-2.0 license, and is\n free for commercial and private use. For more information, please visit\n our licensing page at https://stormsoftware.com/licenses/projects/stryke.\n\n Website: https://stormsoftware.com\n Repository: https://github.com/storm-software/stryke\n Documentation: https://docs.stormsoftware.com/projects/stryke\n Contact: https://stormsoftware.com/contact\n\n SPDX-License-Identifier: Apache-2.0\n\n ------------------------------------------------------------------- */\n\nimport { throttle } from \"@stryke/helpers/throttle\";\nimport { useEffect, useState } from \"react\";\n\n/**\n * A hook that returns a boolean indicating if the user is idle.\n *\n * @param ms - The number of milliseconds to wait before considering the user as idle\n * @returns A boolean indicating if the user is idle\n */\nexport const useIdle = (ms = 1000 * 60): boolean => {\n const [idle, setIdle] = useState(false);\n\n useEffect(() => {\n let timeoutId: any = -1;\n\n const handleTimeout = () => {\n setIdle(true);\n };\n\n const handleEvent = throttle(() => {\n setIdle(false);\n\n clearTimeout(timeoutId);\n timeoutId = setTimeout(handleTimeout, ms);\n }, 500);\n\n const handleVisibilityChange = () => {\n if (!document.hidden) {\n handleEvent();\n }\n };\n\n timeoutId = setTimeout(handleTimeout, ms);\n\n addEventListener(\"mousemove\", handleEvent);\n addEventListener(\"mousedown\", handleEvent);\n window.addEventListener(\"resize\", handleEvent);\n addEventListener(\"keydown\", handleEvent);\n addEventListener(\"touchstart\", handleEvent);\n window.addEventListener(\"wheel\", handleEvent);\n document.addEventListener(\"visibilitychange\", handleVisibilityChange);\n\n return () => {\n removeEventListener(\"mousemove\", handleEvent);\n removeEventListener(\"mousedown\", handleEvent);\n window.removeEventListener(\"resize\", handleEvent);\n removeEventListener(\"keydown\", handleEvent);\n removeEventListener(\"touchstart\", handleEvent);\n window.removeEventListener(\"wheel\", handleEvent);\n document.removeEventListener(\"visibilitychange\", handleVisibilityChange);\n clearTimeout(timeoutId);\n };\n }, [ms]);\n\n return idle;\n};\n"],"mappings":";;;;;;;;;;AA2BA,MAAa,WAAW,KAAK,MAAO,OAAgB;CAClD,MAAM,CAAC,MAAM,WAAW,SAAS,MAAM;AAEvC,iBAAgB;EACd,IAAIA,YAAiB;EAErB,MAAM,sBAAsB;AAC1B,WAAQ,KAAK;;EAGf,MAAM,cAAc,eAAe;AACjC,WAAQ,MAAM;AAEd,gBAAa,UAAU;AACvB,eAAY,WAAW,eAAe,GAAG;KACxC,IAAI;EAEP,MAAM,+BAA+B;AACnC,OAAI,CAAC,SAAS,OACZ,cAAa;;AAIjB,cAAY,WAAW,eAAe,GAAG;AAEzC,mBAAiB,aAAa,YAAY;AAC1C,mBAAiB,aAAa,YAAY;AAC1C,SAAO,iBAAiB,UAAU,YAAY;AAC9C,mBAAiB,WAAW,YAAY;AACxC,mBAAiB,cAAc,YAAY;AAC3C,SAAO,iBAAiB,SAAS,YAAY;AAC7C,WAAS,iBAAiB,oBAAoB,uBAAuB;AAErE,eAAa;AACX,uBAAoB,aAAa,YAAY;AAC7C,uBAAoB,aAAa,YAAY;AAC7C,UAAO,oBAAoB,UAAU,YAAY;AACjD,uBAAoB,WAAW,YAAY;AAC3C,uBAAoB,cAAc,YAAY;AAC9C,UAAO,oBAAoB,SAAS,YAAY;AAChD,YAAS,oBAAoB,oBAAoB,uBAAuB;AACxE,gBAAa,UAAU;;IAExB,CAAC,GAAG,CAAC;AAER,QAAO"}
|
|
@@ -1 +1,14 @@
|
|
|
1
|
-
const
|
|
1
|
+
const require_rolldown_runtime = require('./_virtual/rolldown_runtime.cjs');
|
|
2
|
+
const require_runtime_checks = require('./env/src/runtime-checks.cjs');
|
|
3
|
+
let react = require("react");
|
|
4
|
+
|
|
5
|
+
//#region src/use-isomorphic-layout-effect.ts
|
|
6
|
+
/**
|
|
7
|
+
* The function checks if the code is running on the server-side
|
|
8
|
+
*
|
|
9
|
+
* @returns An indicator specifying if the code is running on the server-side
|
|
10
|
+
*/
|
|
11
|
+
const useIsomorphicLayoutEffect = require_runtime_checks.isRuntimeServer ? react.useEffect : react.useLayoutEffect;
|
|
12
|
+
|
|
13
|
+
//#endregion
|
|
14
|
+
exports.useIsomorphicLayoutEffect = useIsomorphicLayoutEffect;
|
|
@@ -1,2 +1,14 @@
|
|
|
1
|
-
import{isRuntimeServer
|
|
1
|
+
import { isRuntimeServer } from "./env/src/runtime-checks.mjs";
|
|
2
|
+
import { useEffect, useLayoutEffect } from "react";
|
|
3
|
+
|
|
4
|
+
//#region src/use-isomorphic-layout-effect.ts
|
|
5
|
+
/**
|
|
6
|
+
* The function checks if the code is running on the server-side
|
|
7
|
+
*
|
|
8
|
+
* @returns An indicator specifying if the code is running on the server-side
|
|
9
|
+
*/
|
|
10
|
+
const useIsomorphicLayoutEffect = isRuntimeServer ? useEffect : useLayoutEffect;
|
|
11
|
+
|
|
12
|
+
//#endregion
|
|
13
|
+
export { useIsomorphicLayoutEffect };
|
|
2
14
|
//# sourceMappingURL=use-isomorphic-layout-effect.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-isomorphic-layout-effect.mjs","names":[],"sources":["../src/use-isomorphic-layout-effect.ts"],"sourcesContent":["/* -------------------------------------------------------------------\n\n ⚡ Storm Software - Stryke\n\n This code was released as part of the Stryke project. Stryke\n is maintained by Storm Software under the Apache-2.0 license, and is\n free for commercial and private use. For more information, please visit\n our licensing page at https://stormsoftware.com/licenses/projects/stryke.\n\n Website: https://stormsoftware.com\n Repository: https://github.com/storm-software/stryke\n Documentation: https://docs.stormsoftware.com/projects/stryke\n Contact: https://stormsoftware.com/contact\n\n SPDX-License-Identifier: Apache-2.0\n\n ------------------------------------------------------------------- */\n\nimport { isRuntimeServer } from \"@stryke/env/runtime-checks\";\nimport { useEffect, useLayoutEffect } from \"react\";\n\n/**\n * The function checks if the code is running on the server-side\n *\n * @returns An indicator specifying if the code is running on the server-side\n */\nexport const useIsomorphicLayoutEffect = isRuntimeServer\n ? useEffect\n : useLayoutEffect;\n"],"mappings":"
|
|
1
|
+
{"version":3,"file":"use-isomorphic-layout-effect.mjs","names":[],"sources":["../src/use-isomorphic-layout-effect.ts"],"sourcesContent":["/* -------------------------------------------------------------------\n\n ⚡ Storm Software - Stryke\n\n This code was released as part of the Stryke project. Stryke\n is maintained by Storm Software under the Apache-2.0 license, and is\n free for commercial and private use. For more information, please visit\n our licensing page at https://stormsoftware.com/licenses/projects/stryke.\n\n Website: https://stormsoftware.com\n Repository: https://github.com/storm-software/stryke\n Documentation: https://docs.stormsoftware.com/projects/stryke\n Contact: https://stormsoftware.com/contact\n\n SPDX-License-Identifier: Apache-2.0\n\n ------------------------------------------------------------------- */\n\nimport { isRuntimeServer } from \"@stryke/env/runtime-checks\";\nimport { useEffect, useLayoutEffect } from \"react\";\n\n/**\n * The function checks if the code is running on the server-side\n *\n * @returns An indicator specifying if the code is running on the server-side\n */\nexport const useIsomorphicLayoutEffect = isRuntimeServer\n ? useEffect\n : useLayoutEffect;\n"],"mappings":";;;;;;;;;AA0BA,MAAa,4BAA4B,kBACrC,YACA"}
|
|
@@ -1 +1,24 @@
|
|
|
1
|
-
const
|
|
1
|
+
const require_rolldown_runtime = require('./_virtual/rolldown_runtime.cjs');
|
|
2
|
+
let react = require("react");
|
|
3
|
+
let react_native = require("react-native");
|
|
4
|
+
|
|
5
|
+
//#region src/use-keyboard-visible.ts
|
|
6
|
+
const useKeyboardVisible = () => {
|
|
7
|
+
const [isKeyboardVisible, setKeyboardVisible] = (0, react.useState)(false);
|
|
8
|
+
(0, react.useEffect)(() => {
|
|
9
|
+
const keyboardDidShowListener = react_native.Keyboard.addListener("keyboardDidShow", () => {
|
|
10
|
+
setKeyboardVisible(true);
|
|
11
|
+
});
|
|
12
|
+
const keyboardDidHideListener = react_native.Keyboard.addListener("keyboardDidHide", () => {
|
|
13
|
+
setKeyboardVisible(false);
|
|
14
|
+
});
|
|
15
|
+
return () => {
|
|
16
|
+
keyboardDidHideListener.remove();
|
|
17
|
+
keyboardDidShowListener.remove();
|
|
18
|
+
};
|
|
19
|
+
}, []);
|
|
20
|
+
return isKeyboardVisible;
|
|
21
|
+
};
|
|
22
|
+
|
|
23
|
+
//#endregion
|
|
24
|
+
exports.useKeyboardVisible = useKeyboardVisible;
|
|
@@ -1,2 +1,24 @@
|
|
|
1
|
-
import{useEffect
|
|
1
|
+
import { useEffect, useState } from "react";
|
|
2
|
+
import { Keyboard } from "react-native";
|
|
3
|
+
|
|
4
|
+
//#region src/use-keyboard-visible.ts
|
|
5
|
+
const useKeyboardVisible = () => {
|
|
6
|
+
const [isKeyboardVisible, setKeyboardVisible] = useState(false);
|
|
7
|
+
useEffect(() => {
|
|
8
|
+
const keyboardDidShowListener = Keyboard.addListener("keyboardDidShow", () => {
|
|
9
|
+
setKeyboardVisible(true);
|
|
10
|
+
});
|
|
11
|
+
const keyboardDidHideListener = Keyboard.addListener("keyboardDidHide", () => {
|
|
12
|
+
setKeyboardVisible(false);
|
|
13
|
+
});
|
|
14
|
+
return () => {
|
|
15
|
+
keyboardDidHideListener.remove();
|
|
16
|
+
keyboardDidShowListener.remove();
|
|
17
|
+
};
|
|
18
|
+
}, []);
|
|
19
|
+
return isKeyboardVisible;
|
|
20
|
+
};
|
|
21
|
+
|
|
22
|
+
//#endregion
|
|
23
|
+
export { useKeyboardVisible };
|
|
2
24
|
//# sourceMappingURL=use-keyboard-visible.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-keyboard-visible.mjs","names":[],"sources":["../src/use-keyboard-visible.ts"],"sourcesContent":["/* -------------------------------------------------------------------\n\n ⚡ Storm Software - Stryke\n\n This code was released as part of the Stryke project. Stryke\n is maintained by Storm Software under the Apache-2.0 license, and is\n free for commercial and private use. For more information, please visit\n our licensing page at https://stormsoftware.com/licenses/projects/stryke.\n\n Website: https://stormsoftware.com\n Repository: https://github.com/storm-software/stryke\n Documentation: https://docs.stormsoftware.com/projects/stryke\n Contact: https://stormsoftware.com/contact\n\n SPDX-License-Identifier: Apache-2.0\n\n ------------------------------------------------------------------- */\n\nimport { useEffect, useState } from \"react\";\nimport { Keyboard } from \"react-native\";\n\nexport const useKeyboardVisible = () => {\n const [isKeyboardVisible, setKeyboardVisible] = useState(false);\n\n useEffect(() => {\n const keyboardDidShowListener = Keyboard.addListener(\n \"keyboardDidShow\",\n () => {\n setKeyboardVisible(true);\n }\n );\n const keyboardDidHideListener = Keyboard.addListener(\n \"keyboardDidHide\",\n () => {\n setKeyboardVisible(false);\n }\n );\n\n return () => {\n keyboardDidHideListener.remove();\n keyboardDidShowListener.remove();\n };\n }, []);\n\n return isKeyboardVisible;\n};\n"],"mappings":"
|
|
1
|
+
{"version":3,"file":"use-keyboard-visible.mjs","names":[],"sources":["../src/use-keyboard-visible.ts"],"sourcesContent":["/* -------------------------------------------------------------------\n\n ⚡ Storm Software - Stryke\n\n This code was released as part of the Stryke project. Stryke\n is maintained by Storm Software under the Apache-2.0 license, and is\n free for commercial and private use. For more information, please visit\n our licensing page at https://stormsoftware.com/licenses/projects/stryke.\n\n Website: https://stormsoftware.com\n Repository: https://github.com/storm-software/stryke\n Documentation: https://docs.stormsoftware.com/projects/stryke\n Contact: https://stormsoftware.com/contact\n\n SPDX-License-Identifier: Apache-2.0\n\n ------------------------------------------------------------------- */\n\nimport { useEffect, useState } from \"react\";\nimport { Keyboard } from \"react-native\";\n\nexport const useKeyboardVisible = () => {\n const [isKeyboardVisible, setKeyboardVisible] = useState(false);\n\n useEffect(() => {\n const keyboardDidShowListener = Keyboard.addListener(\n \"keyboardDidShow\",\n () => {\n setKeyboardVisible(true);\n }\n );\n const keyboardDidHideListener = Keyboard.addListener(\n \"keyboardDidHide\",\n () => {\n setKeyboardVisible(false);\n }\n );\n\n return () => {\n keyboardDidHideListener.remove();\n keyboardDidShowListener.remove();\n };\n }, []);\n\n return isKeyboardVisible;\n};\n"],"mappings":";;;;AAqBA,MAAa,2BAA2B;CACtC,MAAM,CAAC,mBAAmB,sBAAsB,SAAS,MAAM;AAE/D,iBAAgB;EACd,MAAM,0BAA0B,SAAS,YACvC,yBACM;AACJ,sBAAmB,KAAK;IAE3B;EACD,MAAM,0BAA0B,SAAS,YACvC,yBACM;AACJ,sBAAmB,MAAM;IAE5B;AAED,eAAa;AACX,2BAAwB,QAAQ;AAChC,2BAAwB,QAAQ;;IAEjC,EAAE,CAAC;AAEN,QAAO"}
|
package/dist/use-memo-stable.cjs
CHANGED
|
@@ -1 +1,48 @@
|
|
|
1
|
-
const
|
|
1
|
+
const require_rolldown_runtime = require('./_virtual/rolldown_runtime.cjs');
|
|
2
|
+
let react = require("react");
|
|
3
|
+
|
|
4
|
+
//#region src/use-memo-stable.ts
|
|
5
|
+
const areInputsEqual = (newInputs, lastInputs) => {
|
|
6
|
+
if (newInputs.length !== lastInputs.length) return false;
|
|
7
|
+
for (const [i, newInput] of newInputs.entries()) if (newInput !== lastInputs[i]) return false;
|
|
8
|
+
return true;
|
|
9
|
+
};
|
|
10
|
+
/**
|
|
11
|
+
* `useMemo` and `useCallback` cache the most recent result. However, this cache can be destroyed by React when it wants to.
|
|
12
|
+
*
|
|
13
|
+
* `useMemoStable` and `useCallbackStable` are concurrent mode safe alternatives to `useMemo` and `useCallback` that do provide semantic guarantee. What this means is that you will always get the same reference for a memoized value so long as there is no input change.
|
|
14
|
+
*
|
|
15
|
+
* Using `useMemoStable` and `useCallbackStable` will consume more memory than useMemo and `useCallback` in order to provide a stable cache. React can release the cache of `useMemo` and `useCallback`, but `useMemoStable` will not release the cache until it is garbage collected.
|
|
16
|
+
*
|
|
17
|
+
* @remarks
|
|
18
|
+
* You may rely on useMemo as a performance optimization, not as a semantic guarantee. In the future, React may choose to “forget” some previously memoized values and recalculate them on next render, e.g. to free memory for offscreen components. Write your code so that it still works without `useMemo` — and then add it to optimize performance.
|
|
19
|
+
*
|
|
20
|
+
* @param getResult - The function used to generate the result
|
|
21
|
+
* @param inputs - The inputs to watch for changes
|
|
22
|
+
* @returns The memoized result
|
|
23
|
+
*/
|
|
24
|
+
function useMemoStable(getResult, inputs) {
|
|
25
|
+
const initial = (0, react.useState)(() => ({
|
|
26
|
+
inputs,
|
|
27
|
+
result: getResult()
|
|
28
|
+
}))[0];
|
|
29
|
+
const isFirstRun = (0, react.useRef)(true);
|
|
30
|
+
const committed = (0, react.useRef)(initial);
|
|
31
|
+
const useCache = isFirstRun.current || Boolean(inputs && committed.current.inputs && areInputsEqual(inputs, committed.current.inputs));
|
|
32
|
+
const cache = (0, react.useMemo)(() => useCache ? committed.current : {
|
|
33
|
+
inputs,
|
|
34
|
+
result: getResult()
|
|
35
|
+
}, [
|
|
36
|
+
inputs,
|
|
37
|
+
getResult,
|
|
38
|
+
useCache
|
|
39
|
+
]);
|
|
40
|
+
(0, react.useEffect)(() => {
|
|
41
|
+
isFirstRun.current = false;
|
|
42
|
+
committed.current = cache;
|
|
43
|
+
}, [cache]);
|
|
44
|
+
return cache.result;
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
//#endregion
|
|
48
|
+
exports.useMemoStable = useMemoStable;
|
package/dist/use-memo-stable.mjs
CHANGED
|
@@ -1,2 +1,48 @@
|
|
|
1
|
-
import{useEffect
|
|
1
|
+
import { useEffect, useMemo, useRef, useState } from "react";
|
|
2
|
+
|
|
3
|
+
//#region src/use-memo-stable.ts
|
|
4
|
+
const areInputsEqual = (newInputs, lastInputs) => {
|
|
5
|
+
if (newInputs.length !== lastInputs.length) return false;
|
|
6
|
+
for (const [i, newInput] of newInputs.entries()) if (newInput !== lastInputs[i]) return false;
|
|
7
|
+
return true;
|
|
8
|
+
};
|
|
9
|
+
/**
|
|
10
|
+
* `useMemo` and `useCallback` cache the most recent result. However, this cache can be destroyed by React when it wants to.
|
|
11
|
+
*
|
|
12
|
+
* `useMemoStable` and `useCallbackStable` are concurrent mode safe alternatives to `useMemo` and `useCallback` that do provide semantic guarantee. What this means is that you will always get the same reference for a memoized value so long as there is no input change.
|
|
13
|
+
*
|
|
14
|
+
* Using `useMemoStable` and `useCallbackStable` will consume more memory than useMemo and `useCallback` in order to provide a stable cache. React can release the cache of `useMemo` and `useCallback`, but `useMemoStable` will not release the cache until it is garbage collected.
|
|
15
|
+
*
|
|
16
|
+
* @remarks
|
|
17
|
+
* You may rely on useMemo as a performance optimization, not as a semantic guarantee. In the future, React may choose to “forget” some previously memoized values and recalculate them on next render, e.g. to free memory for offscreen components. Write your code so that it still works without `useMemo` — and then add it to optimize performance.
|
|
18
|
+
*
|
|
19
|
+
* @param getResult - The function used to generate the result
|
|
20
|
+
* @param inputs - The inputs to watch for changes
|
|
21
|
+
* @returns The memoized result
|
|
22
|
+
*/
|
|
23
|
+
function useMemoStable(getResult, inputs) {
|
|
24
|
+
const initial = useState(() => ({
|
|
25
|
+
inputs,
|
|
26
|
+
result: getResult()
|
|
27
|
+
}))[0];
|
|
28
|
+
const isFirstRun = useRef(true);
|
|
29
|
+
const committed = useRef(initial);
|
|
30
|
+
const useCache = isFirstRun.current || Boolean(inputs && committed.current.inputs && areInputsEqual(inputs, committed.current.inputs));
|
|
31
|
+
const cache = useMemo(() => useCache ? committed.current : {
|
|
32
|
+
inputs,
|
|
33
|
+
result: getResult()
|
|
34
|
+
}, [
|
|
35
|
+
inputs,
|
|
36
|
+
getResult,
|
|
37
|
+
useCache
|
|
38
|
+
]);
|
|
39
|
+
useEffect(() => {
|
|
40
|
+
isFirstRun.current = false;
|
|
41
|
+
committed.current = cache;
|
|
42
|
+
}, [cache]);
|
|
43
|
+
return cache.result;
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
//#endregion
|
|
47
|
+
export { useMemoStable };
|
|
2
48
|
//# sourceMappingURL=use-memo-stable.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-memo-stable.mjs","names":["initial: Cache<TResult>","useCache: boolean","cache: Cache<TResult>"],"sources":["../src/use-memo-stable.ts"],"sourcesContent":["/* -------------------------------------------------------------------\n\n ⚡ Storm Software - Stryke\n\n This code was released as part of the Stryke project. Stryke\n is maintained by Storm Software under the Apache-2.0 license, and is\n free for commercial and private use. For more information, please visit\n our licensing page at https://stormsoftware.com/licenses/projects/stryke.\n\n Website: https://stormsoftware.com\n Repository: https://github.com/storm-software/stryke\n Documentation: https://docs.stormsoftware.com/projects/stryke\n Contact: https://stormsoftware.com/contact\n\n SPDX-License-Identifier: Apache-2.0\n\n ------------------------------------------------------------------- */\n\nimport { useEffect, useMemo, useRef, useState } from \"react\";\n\n/* eslint-disable @cspell/spellchecker */\n\n/**\n\n * Forked from use-memo-one by Alex Reardon\n */\n\ninterface Cache<TData> {\n inputs?: any[];\n result: TData;\n}\n\nconst areInputsEqual = (newInputs: any[], lastInputs: any[]) => {\n // no checks needed if the inputs length has changed\n if (newInputs.length !== lastInputs.length) {\n return false;\n }\n // Using for loop for speed. It generally performs better than array.every\n // https://github.com/alexreardon/memoize-one/pull/59\n\n for (const [i, newInput] of newInputs.entries()) {\n // using shallow equality check\n if (newInput !== lastInputs[i]) {\n return false;\n }\n }\n\n return true;\n};\n\n/**\n * `useMemo` and `useCallback` cache the most recent result. However, this cache can be destroyed by React when it wants to.\n *\n * `useMemoStable` and `useCallbackStable` are concurrent mode safe alternatives to `useMemo` and `useCallback` that do provide semantic guarantee. What this means is that you will always get the same reference for a memoized value so long as there is no input change.\n *\n * Using `useMemoStable` and `useCallbackStable` will consume more memory than useMemo and `useCallback` in order to provide a stable cache. React can release the cache of `useMemo` and `useCallback`, but `useMemoStable` will not release the cache until it is garbage collected.\n *\n * @remarks\n * You may rely on useMemo as a performance optimization, not as a semantic guarantee. In the future, React may choose to “forget” some previously memoized values and recalculate them on next render, e.g. to free memory for offscreen components. Write your code so that it still works without `useMemo` — and then add it to optimize performance.\n *\n * @param getResult - The function used to generate the result\n * @param inputs - The inputs to watch for changes\n * @returns The memoized result\n */\nexport function useMemoStable<TResult>(\n getResult: () => TResult,\n inputs?: any[]\n): TResult {\n // using useState to generate initial value as it is lazy\n const initial: Cache<TResult> = useState(() => ({\n inputs,\n result: getResult()\n }))[0];\n const isFirstRun = useRef<boolean>(true);\n const committed = useRef<Cache<TResult>>(initial);\n\n // persist any uncommitted changes after they have been committed\n const useCache: boolean =\n isFirstRun.current ||\n Boolean(\n inputs &&\n committed.current.inputs &&\n areInputsEqual(inputs, committed.current.inputs)\n );\n\n // create a new cache if required\n const cache: Cache<TResult> = useMemo(\n () =>\n useCache\n ? committed.current\n : {\n inputs,\n result: getResult()\n },\n [inputs, getResult, useCache]\n );\n\n // commit the cache\n useEffect(() => {\n isFirstRun.current = false;\n committed.current = cache;\n }, [cache]);\n\n return cache.result;\n}\n"],"mappings":"
|
|
1
|
+
{"version":3,"file":"use-memo-stable.mjs","names":["initial: Cache<TResult>","useCache: boolean","cache: Cache<TResult>"],"sources":["../src/use-memo-stable.ts"],"sourcesContent":["/* -------------------------------------------------------------------\n\n ⚡ Storm Software - Stryke\n\n This code was released as part of the Stryke project. Stryke\n is maintained by Storm Software under the Apache-2.0 license, and is\n free for commercial and private use. For more information, please visit\n our licensing page at https://stormsoftware.com/licenses/projects/stryke.\n\n Website: https://stormsoftware.com\n Repository: https://github.com/storm-software/stryke\n Documentation: https://docs.stormsoftware.com/projects/stryke\n Contact: https://stormsoftware.com/contact\n\n SPDX-License-Identifier: Apache-2.0\n\n ------------------------------------------------------------------- */\n\nimport { useEffect, useMemo, useRef, useState } from \"react\";\n\n/* eslint-disable @cspell/spellchecker */\n\n/**\n\n * Forked from use-memo-one by Alex Reardon\n */\n\ninterface Cache<TData> {\n inputs?: any[];\n result: TData;\n}\n\nconst areInputsEqual = (newInputs: any[], lastInputs: any[]) => {\n // no checks needed if the inputs length has changed\n if (newInputs.length !== lastInputs.length) {\n return false;\n }\n // Using for loop for speed. It generally performs better than array.every\n // https://github.com/alexreardon/memoize-one/pull/59\n\n for (const [i, newInput] of newInputs.entries()) {\n // using shallow equality check\n if (newInput !== lastInputs[i]) {\n return false;\n }\n }\n\n return true;\n};\n\n/**\n * `useMemo` and `useCallback` cache the most recent result. However, this cache can be destroyed by React when it wants to.\n *\n * `useMemoStable` and `useCallbackStable` are concurrent mode safe alternatives to `useMemo` and `useCallback` that do provide semantic guarantee. What this means is that you will always get the same reference for a memoized value so long as there is no input change.\n *\n * Using `useMemoStable` and `useCallbackStable` will consume more memory than useMemo and `useCallback` in order to provide a stable cache. React can release the cache of `useMemo` and `useCallback`, but `useMemoStable` will not release the cache until it is garbage collected.\n *\n * @remarks\n * You may rely on useMemo as a performance optimization, not as a semantic guarantee. In the future, React may choose to “forget” some previously memoized values and recalculate them on next render, e.g. to free memory for offscreen components. Write your code so that it still works without `useMemo` — and then add it to optimize performance.\n *\n * @param getResult - The function used to generate the result\n * @param inputs - The inputs to watch for changes\n * @returns The memoized result\n */\nexport function useMemoStable<TResult>(\n getResult: () => TResult,\n inputs?: any[]\n): TResult {\n // using useState to generate initial value as it is lazy\n const initial: Cache<TResult> = useState(() => ({\n inputs,\n result: getResult()\n }))[0];\n const isFirstRun = useRef<boolean>(true);\n const committed = useRef<Cache<TResult>>(initial);\n\n // persist any uncommitted changes after they have been committed\n const useCache: boolean =\n isFirstRun.current ||\n Boolean(\n inputs &&\n committed.current.inputs &&\n areInputsEqual(inputs, committed.current.inputs)\n );\n\n // create a new cache if required\n const cache: Cache<TResult> = useMemo(\n () =>\n useCache\n ? committed.current\n : {\n inputs,\n result: getResult()\n },\n [inputs, getResult, useCache]\n );\n\n // commit the cache\n useEffect(() => {\n isFirstRun.current = false;\n committed.current = cache;\n }, [cache]);\n\n return cache.result;\n}\n"],"mappings":";;;AAgCA,MAAM,kBAAkB,WAAkB,eAAsB;AAE9D,KAAI,UAAU,WAAW,WAAW,OAClC,QAAO;AAKT,MAAK,MAAM,CAAC,GAAG,aAAa,UAAU,SAAS,CAE7C,KAAI,aAAa,WAAW,GAC1B,QAAO;AAIX,QAAO;;;;;;;;;;;;;;;;AAiBT,SAAgB,cACd,WACA,QACS;CAET,MAAMA,UAA0B,gBAAgB;EAC9C;EACA,QAAQ,WAAW;EACpB,EAAE,CAAC;CACJ,MAAM,aAAa,OAAgB,KAAK;CACxC,MAAM,YAAY,OAAuB,QAAQ;CAGjD,MAAMC,WACJ,WAAW,WACX,QACE,UACA,UAAU,QAAQ,UAClB,eAAe,QAAQ,UAAU,QAAQ,OAAO,CACjD;CAGH,MAAMC,QAAwB,cAE1B,WACI,UAAU,UACV;EACE;EACA,QAAQ,WAAW;EACpB,EACP;EAAC;EAAQ;EAAW;EAAS,CAC9B;AAGD,iBAAgB;AACd,aAAW,UAAU;AACrB,YAAU,UAAU;IACnB,CAAC,MAAM,CAAC;AAEX,QAAO,MAAM"}
|
|
@@ -1 +1,57 @@
|
|
|
1
|
-
const
|
|
1
|
+
const require_rolldown_runtime = require('./_virtual/rolldown_runtime.cjs');
|
|
2
|
+
const require_is_equal = require('./type-checks/src/is-equal.cjs');
|
|
3
|
+
let react = require("react");
|
|
4
|
+
|
|
5
|
+
//#region src/use-network-state.ts
|
|
6
|
+
const getConnection = () => {
|
|
7
|
+
return navigator["connection"] || navigator["mozConnection"] || navigator["webkitConnection"];
|
|
8
|
+
};
|
|
9
|
+
/**
|
|
10
|
+
* Subscribes to network state changes.
|
|
11
|
+
*
|
|
12
|
+
* @param callback - The callback function to call when the network state changes
|
|
13
|
+
* @returns A function to unsubscribe from the network state changes
|
|
14
|
+
*/
|
|
15
|
+
const useNetworkStateSubscribe = (callback) => {
|
|
16
|
+
addEventListener("online", callback, { passive: true });
|
|
17
|
+
addEventListener("offline", callback, { passive: true });
|
|
18
|
+
const connection = getConnection();
|
|
19
|
+
if (connection) connection.addEventListener("change", callback, { passive: true });
|
|
20
|
+
return () => {
|
|
21
|
+
removeEventListener("online", callback);
|
|
22
|
+
removeEventListener("offline", callback);
|
|
23
|
+
if (connection) connection.removeEventListener("change", callback);
|
|
24
|
+
};
|
|
25
|
+
};
|
|
26
|
+
const getNetworkStateServerSnapshot = () => {
|
|
27
|
+
throw new Error("useNetworkState is a client-only hook");
|
|
28
|
+
};
|
|
29
|
+
/**
|
|
30
|
+
* A hook that returns the network state.
|
|
31
|
+
*
|
|
32
|
+
* @returns The network state
|
|
33
|
+
*/
|
|
34
|
+
function useNetworkState() {
|
|
35
|
+
const cache = (0, react.useRef)({});
|
|
36
|
+
const getSnapshot = () => {
|
|
37
|
+
const online = navigator.onLine;
|
|
38
|
+
const connection = getConnection();
|
|
39
|
+
const nextState = {
|
|
40
|
+
online,
|
|
41
|
+
downlink: connection?.downlink,
|
|
42
|
+
downlinkMax: connection?.downlinkMax,
|
|
43
|
+
effectiveType: connection?.effectiveType,
|
|
44
|
+
rtt: connection?.rtt,
|
|
45
|
+
saveData: connection?.saveData,
|
|
46
|
+
type: connection?.type
|
|
47
|
+
};
|
|
48
|
+
if (require_is_equal.isEqual(cache.current, nextState)) return cache.current;
|
|
49
|
+
cache.current = nextState;
|
|
50
|
+
return nextState;
|
|
51
|
+
};
|
|
52
|
+
return (0, react.useSyncExternalStore)(useNetworkStateSubscribe, getSnapshot, getNetworkStateServerSnapshot);
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
//#endregion
|
|
56
|
+
exports.useNetworkState = useNetworkState;
|
|
57
|
+
exports.useNetworkStateSubscribe = useNetworkStateSubscribe;
|
|
@@ -1,2 +1,56 @@
|
|
|
1
|
-
import{isEqual
|
|
1
|
+
import { isEqual } from "./type-checks/src/is-equal.mjs";
|
|
2
|
+
import { useRef, useSyncExternalStore } from "react";
|
|
3
|
+
|
|
4
|
+
//#region src/use-network-state.ts
|
|
5
|
+
const getConnection = () => {
|
|
6
|
+
return navigator["connection"] || navigator["mozConnection"] || navigator["webkitConnection"];
|
|
7
|
+
};
|
|
8
|
+
/**
|
|
9
|
+
* Subscribes to network state changes.
|
|
10
|
+
*
|
|
11
|
+
* @param callback - The callback function to call when the network state changes
|
|
12
|
+
* @returns A function to unsubscribe from the network state changes
|
|
13
|
+
*/
|
|
14
|
+
const useNetworkStateSubscribe = (callback) => {
|
|
15
|
+
addEventListener("online", callback, { passive: true });
|
|
16
|
+
addEventListener("offline", callback, { passive: true });
|
|
17
|
+
const connection = getConnection();
|
|
18
|
+
if (connection) connection.addEventListener("change", callback, { passive: true });
|
|
19
|
+
return () => {
|
|
20
|
+
removeEventListener("online", callback);
|
|
21
|
+
removeEventListener("offline", callback);
|
|
22
|
+
if (connection) connection.removeEventListener("change", callback);
|
|
23
|
+
};
|
|
24
|
+
};
|
|
25
|
+
const getNetworkStateServerSnapshot = () => {
|
|
26
|
+
throw new Error("useNetworkState is a client-only hook");
|
|
27
|
+
};
|
|
28
|
+
/**
|
|
29
|
+
* A hook that returns the network state.
|
|
30
|
+
*
|
|
31
|
+
* @returns The network state
|
|
32
|
+
*/
|
|
33
|
+
function useNetworkState() {
|
|
34
|
+
const cache = useRef({});
|
|
35
|
+
const getSnapshot = () => {
|
|
36
|
+
const online = navigator.onLine;
|
|
37
|
+
const connection = getConnection();
|
|
38
|
+
const nextState = {
|
|
39
|
+
online,
|
|
40
|
+
downlink: connection?.downlink,
|
|
41
|
+
downlinkMax: connection?.downlinkMax,
|
|
42
|
+
effectiveType: connection?.effectiveType,
|
|
43
|
+
rtt: connection?.rtt,
|
|
44
|
+
saveData: connection?.saveData,
|
|
45
|
+
type: connection?.type
|
|
46
|
+
};
|
|
47
|
+
if (isEqual(cache.current, nextState)) return cache.current;
|
|
48
|
+
cache.current = nextState;
|
|
49
|
+
return nextState;
|
|
50
|
+
};
|
|
51
|
+
return useSyncExternalStore(useNetworkStateSubscribe, getSnapshot, getNetworkStateServerSnapshot);
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
//#endregion
|
|
55
|
+
export { useNetworkState, useNetworkStateSubscribe };
|
|
2
56
|
//# sourceMappingURL=use-network-state.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-network-state.mjs","names":[],"sources":["../src/use-network-state.ts"],"sourcesContent":["/* -------------------------------------------------------------------\n\n ⚡ Storm Software - Stryke\n\n This code was released as part of the Stryke project. Stryke\n is maintained by Storm Software under the Apache-2.0 license, and is\n free for commercial and private use. For more information, please visit\n our licensing page at https://stormsoftware.com/licenses/projects/stryke.\n\n Website: https://stormsoftware.com\n Repository: https://github.com/storm-software/stryke\n Documentation: https://docs.stormsoftware.com/projects/stryke\n Contact: https://stormsoftware.com/contact\n\n SPDX-License-Identifier: Apache-2.0\n\n ------------------------------------------------------------------- */\n\nimport { isEqual } from \"@stryke/type-checks/is-equal\";\nimport type { NetworkInformation, NetworkState } from \"@stryke/types/navigator\";\nimport { useRef, useSyncExternalStore } from \"react\";\n\nconst getConnection = (): NetworkInformation | undefined => {\n const connectionKey = \"connection\" as keyof typeof navigator;\n const mozConnectionKey = \"mozConnection\" as keyof typeof navigator;\n const webkitConnectionKey = \"webkitConnection\" as keyof typeof navigator;\n\n return (navigator[connectionKey] ||\n navigator[mozConnectionKey] ||\n navigator[webkitConnectionKey]) as NetworkInformation;\n};\n\n/**\n * Subscribes to network state changes.\n *\n * @param callback - The callback function to call when the network state changes\n * @returns A function to unsubscribe from the network state changes\n */\nexport const useNetworkStateSubscribe = (callback: (event: Event) => any) => {\n addEventListener(\"online\", callback, { passive: true });\n addEventListener(\"offline\", callback, { passive: true });\n\n const connection = getConnection();\n\n if (connection) {\n connection.addEventListener(\"change\", callback, { passive: true });\n }\n\n return () => {\n removeEventListener(\"online\", callback);\n removeEventListener(\"offline\", callback);\n\n if (connection) {\n connection.removeEventListener(\"change\", callback);\n }\n };\n};\n\nconst getNetworkStateServerSnapshot = () => {\n throw new Error(\"useNetworkState is a client-only hook\");\n};\n\n/**\n * A hook that returns the network state.\n *\n * @returns The network state\n */\nexport function useNetworkState() {\n // eslint-disable-next-line ts/no-empty-object-type\n const cache = useRef<NetworkState | {}>({});\n\n const getSnapshot = (): NetworkState => {\n const online = navigator.onLine;\n const connection = getConnection();\n\n const nextState = {\n online,\n downlink: connection?.downlink,\n downlinkMax: connection?.downlinkMax,\n effectiveType: connection?.effectiveType,\n rtt: connection?.rtt,\n saveData: connection?.saveData,\n type: connection?.type\n } as NetworkState;\n\n if (isEqual(cache.current, nextState)) {\n return cache.current as NetworkState;\n }\n cache.current = nextState;\n return nextState;\n };\n\n return useSyncExternalStore(\n useNetworkStateSubscribe,\n getSnapshot,\n getNetworkStateServerSnapshot\n );\n}\n"],"mappings":"
|
|
1
|
+
{"version":3,"file":"use-network-state.mjs","names":[],"sources":["../src/use-network-state.ts"],"sourcesContent":["/* -------------------------------------------------------------------\n\n ⚡ Storm Software - Stryke\n\n This code was released as part of the Stryke project. Stryke\n is maintained by Storm Software under the Apache-2.0 license, and is\n free for commercial and private use. For more information, please visit\n our licensing page at https://stormsoftware.com/licenses/projects/stryke.\n\n Website: https://stormsoftware.com\n Repository: https://github.com/storm-software/stryke\n Documentation: https://docs.stormsoftware.com/projects/stryke\n Contact: https://stormsoftware.com/contact\n\n SPDX-License-Identifier: Apache-2.0\n\n ------------------------------------------------------------------- */\n\nimport { isEqual } from \"@stryke/type-checks/is-equal\";\nimport type { NetworkInformation, NetworkState } from \"@stryke/types/navigator\";\nimport { useRef, useSyncExternalStore } from \"react\";\n\nconst getConnection = (): NetworkInformation | undefined => {\n const connectionKey = \"connection\" as keyof typeof navigator;\n const mozConnectionKey = \"mozConnection\" as keyof typeof navigator;\n const webkitConnectionKey = \"webkitConnection\" as keyof typeof navigator;\n\n return (navigator[connectionKey] ||\n navigator[mozConnectionKey] ||\n navigator[webkitConnectionKey]) as NetworkInformation;\n};\n\n/**\n * Subscribes to network state changes.\n *\n * @param callback - The callback function to call when the network state changes\n * @returns A function to unsubscribe from the network state changes\n */\nexport const useNetworkStateSubscribe = (callback: (event: Event) => any) => {\n addEventListener(\"online\", callback, { passive: true });\n addEventListener(\"offline\", callback, { passive: true });\n\n const connection = getConnection();\n\n if (connection) {\n connection.addEventListener(\"change\", callback, { passive: true });\n }\n\n return () => {\n removeEventListener(\"online\", callback);\n removeEventListener(\"offline\", callback);\n\n if (connection) {\n connection.removeEventListener(\"change\", callback);\n }\n };\n};\n\nconst getNetworkStateServerSnapshot = () => {\n throw new Error(\"useNetworkState is a client-only hook\");\n};\n\n/**\n * A hook that returns the network state.\n *\n * @returns The network state\n */\nexport function useNetworkState() {\n // eslint-disable-next-line ts/no-empty-object-type\n const cache = useRef<NetworkState | {}>({});\n\n const getSnapshot = (): NetworkState => {\n const online = navigator.onLine;\n const connection = getConnection();\n\n const nextState = {\n online,\n downlink: connection?.downlink,\n downlinkMax: connection?.downlinkMax,\n effectiveType: connection?.effectiveType,\n rtt: connection?.rtt,\n saveData: connection?.saveData,\n type: connection?.type\n } as NetworkState;\n\n if (isEqual(cache.current, nextState)) {\n return cache.current as NetworkState;\n }\n cache.current = nextState;\n return nextState;\n };\n\n return useSyncExternalStore(\n useNetworkStateSubscribe,\n getSnapshot,\n getNetworkStateServerSnapshot\n );\n}\n"],"mappings":";;;;AAsBA,MAAM,sBAAsD;AAK1D,QAAQ,UAJc,iBAKpB,UAJuB,oBAKvB,UAJ0B;;;;;;;;AAa9B,MAAa,4BAA4B,aAAoC;AAC3E,kBAAiB,UAAU,UAAU,EAAE,SAAS,MAAM,CAAC;AACvD,kBAAiB,WAAW,UAAU,EAAE,SAAS,MAAM,CAAC;CAExD,MAAM,aAAa,eAAe;AAElC,KAAI,WACF,YAAW,iBAAiB,UAAU,UAAU,EAAE,SAAS,MAAM,CAAC;AAGpE,cAAa;AACX,sBAAoB,UAAU,SAAS;AACvC,sBAAoB,WAAW,SAAS;AAExC,MAAI,WACF,YAAW,oBAAoB,UAAU,SAAS;;;AAKxD,MAAM,sCAAsC;AAC1C,OAAM,IAAI,MAAM,wCAAwC;;;;;;;AAQ1D,SAAgB,kBAAkB;CAEhC,MAAM,QAAQ,OAA0B,EAAE,CAAC;CAE3C,MAAM,oBAAkC;EACtC,MAAM,SAAS,UAAU;EACzB,MAAM,aAAa,eAAe;EAElC,MAAM,YAAY;GAChB;GACA,UAAU,YAAY;GACtB,aAAa,YAAY;GACzB,eAAe,YAAY;GAC3B,KAAK,YAAY;GACjB,UAAU,YAAY;GACtB,MAAM,YAAY;GACnB;AAED,MAAI,QAAQ,MAAM,SAAS,UAAU,CACnC,QAAO,MAAM;AAEf,QAAM,UAAU;AAChB,SAAO;;AAGT,QAAO,qBACL,0BACA,aACA,8BACD"}
|
package/dist/use-previous.cjs
CHANGED
|
@@ -1 +1,20 @@
|
|
|
1
|
-
const
|
|
1
|
+
const require_rolldown_runtime = require('./_virtual/rolldown_runtime.cjs');
|
|
2
|
+
let react = require("react");
|
|
3
|
+
|
|
4
|
+
//#region src/use-previous.ts
|
|
5
|
+
function usePrevious(value) {
|
|
6
|
+
const ref = (0, react.useRef)({
|
|
7
|
+
value,
|
|
8
|
+
previous: value
|
|
9
|
+
});
|
|
10
|
+
return (0, react.useMemo)(() => {
|
|
11
|
+
if (ref.current.value !== value) {
|
|
12
|
+
ref.current.previous = ref.current.value;
|
|
13
|
+
ref.current.value = value;
|
|
14
|
+
}
|
|
15
|
+
return ref.current.previous;
|
|
16
|
+
}, [value]);
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
//#endregion
|
|
20
|
+
exports.usePrevious = usePrevious;
|
package/dist/use-previous.mjs
CHANGED
|
@@ -1,2 +1,20 @@
|
|
|
1
|
-
import{useMemo
|
|
1
|
+
import { useMemo, useRef } from "react";
|
|
2
|
+
|
|
3
|
+
//#region src/use-previous.ts
|
|
4
|
+
function usePrevious(value) {
|
|
5
|
+
const ref = useRef({
|
|
6
|
+
value,
|
|
7
|
+
previous: value
|
|
8
|
+
});
|
|
9
|
+
return useMemo(() => {
|
|
10
|
+
if (ref.current.value !== value) {
|
|
11
|
+
ref.current.previous = ref.current.value;
|
|
12
|
+
ref.current.value = value;
|
|
13
|
+
}
|
|
14
|
+
return ref.current.previous;
|
|
15
|
+
}, [value]);
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
//#endregion
|
|
19
|
+
export { usePrevious };
|
|
2
20
|
//# sourceMappingURL=use-previous.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-previous.mjs","names":[],"sources":["../src/use-previous.ts"],"sourcesContent":["/* -------------------------------------------------------------------\n\n ⚡ Storm Software - Stryke\n\n This code was released as part of the Stryke project. Stryke\n is maintained by Storm Software under the Apache-2.0 license, and is\n free for commercial and private use. For more information, please visit\n our licensing page at https://stormsoftware.com/licenses/projects/stryke.\n\n Website: https://stormsoftware.com\n Repository: https://github.com/storm-software/stryke\n Documentation: https://docs.stormsoftware.com/projects/stryke\n Contact: https://stormsoftware.com/contact\n\n SPDX-License-Identifier: Apache-2.0\n\n ------------------------------------------------------------------- */\n\nimport { useMemo, useRef } from \"react\";\n\nexport function usePrevious<T>(value: T) {\n const ref = useRef({\n value,\n previous: value\n });\n\n // We compare values before making an update to ensure that\n // a change has been made. This ensures the previous value is\n // persisted correctly between renders.\n return useMemo(() => {\n if (ref.current.value !== value) {\n ref.current.previous = ref.current.value;\n ref.current.value = value;\n }\n return ref.current.previous;\n }, [value]);\n}\n"],"mappings":"
|
|
1
|
+
{"version":3,"file":"use-previous.mjs","names":[],"sources":["../src/use-previous.ts"],"sourcesContent":["/* -------------------------------------------------------------------\n\n ⚡ Storm Software - Stryke\n\n This code was released as part of the Stryke project. Stryke\n is maintained by Storm Software under the Apache-2.0 license, and is\n free for commercial and private use. For more information, please visit\n our licensing page at https://stormsoftware.com/licenses/projects/stryke.\n\n Website: https://stormsoftware.com\n Repository: https://github.com/storm-software/stryke\n Documentation: https://docs.stormsoftware.com/projects/stryke\n Contact: https://stormsoftware.com/contact\n\n SPDX-License-Identifier: Apache-2.0\n\n ------------------------------------------------------------------- */\n\nimport { useMemo, useRef } from \"react\";\n\nexport function usePrevious<T>(value: T) {\n const ref = useRef({\n value,\n previous: value\n });\n\n // We compare values before making an update to ensure that\n // a change has been made. This ensures the previous value is\n // persisted correctly between renders.\n return useMemo(() => {\n if (ref.current.value !== value) {\n ref.current.previous = ref.current.value;\n ref.current.value = value;\n }\n return ref.current.previous;\n }, [value]);\n}\n"],"mappings":";;;AAoBA,SAAgB,YAAe,OAAU;CACvC,MAAM,MAAM,OAAO;EACjB;EACA,UAAU;EACX,CAAC;AAKF,QAAO,cAAc;AACnB,MAAI,IAAI,QAAQ,UAAU,OAAO;AAC/B,OAAI,QAAQ,WAAW,IAAI,QAAQ;AACnC,OAAI,QAAQ,QAAQ;;AAEtB,SAAO,IAAI,QAAQ;IAClB,CAAC,MAAM,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@stryke/hooks",
|
|
3
|
-
"version": "0.4.
|
|
3
|
+
"version": "0.4.48",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"description": "A package containing shared hooks that can be used in any React UI project",
|
|
6
6
|
"repository": {
|
|
@@ -106,5 +106,5 @@
|
|
|
106
106
|
"tsdown": "^0.17.2"
|
|
107
107
|
},
|
|
108
108
|
"publishConfig": { "access": "public" },
|
|
109
|
-
"gitHead": "
|
|
109
|
+
"gitHead": "9c02f25b3bf83a1228a94fc2ef3fcd816dc0f707"
|
|
110
110
|
}
|