@fringeworks/react-utils 0.9.1 → 0.10.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (67) hide show
  1. package/README.ja.md +123 -10
  2. package/README.md +123 -10
  3. package/_helpers/_useExecutionHandler.cjs +37 -0
  4. package/_helpers/_useExecutionHandler.d.cts +18 -0
  5. package/_helpers/_useExecutionHandler.d.mts +18 -0
  6. package/_helpers/_useExecutionHandler.mjs +36 -0
  7. package/hooks/index.cjs +17 -2
  8. package/hooks/index.d.cts +8 -3
  9. package/hooks/index.d.mts +8 -3
  10. package/hooks/index.mjs +13 -3
  11. package/hooks/useExecutionEffect/index.cjs +5 -0
  12. package/hooks/useExecutionEffect/index.d.cts +2 -0
  13. package/hooks/useExecutionEffect/index.d.mts +2 -0
  14. package/hooks/useExecutionEffect/index.mjs +3 -0
  15. package/hooks/useExecutionEffect/useExecutionEffect.cjs +37 -0
  16. package/hooks/useExecutionEffect/useExecutionEffect.d.cts +27 -0
  17. package/hooks/useExecutionEffect/useExecutionEffect.d.mts +27 -0
  18. package/hooks/useExecutionEffect/useExecutionEffect.mjs +36 -0
  19. package/hooks/useExecutionLayoutEffect/index.cjs +5 -0
  20. package/hooks/useExecutionLayoutEffect/index.d.cts +2 -0
  21. package/hooks/useExecutionLayoutEffect/index.d.mts +2 -0
  22. package/hooks/useExecutionLayoutEffect/index.mjs +3 -0
  23. package/hooks/useExecutionLayoutEffect/useExecutionLayoutEffect.cjs +24 -0
  24. package/hooks/useExecutionLayoutEffect/useExecutionLayoutEffect.d.cts +14 -0
  25. package/hooks/useExecutionLayoutEffect/useExecutionLayoutEffect.d.mts +14 -0
  26. package/hooks/useExecutionLayoutEffect/useExecutionLayoutEffect.mjs +23 -0
  27. package/hooks/useIsHydrated/index.cjs +5 -0
  28. package/hooks/useIsHydrated/index.d.cts +2 -0
  29. package/hooks/useIsHydrated/index.d.mts +2 -0
  30. package/hooks/useIsHydrated/index.mjs +3 -0
  31. package/hooks/useIsHydrated/useIsHydrated.cjs +28 -0
  32. package/hooks/useIsHydrated/useIsHydrated.d.cts +15 -0
  33. package/hooks/useIsHydrated/useIsHydrated.d.mts +15 -0
  34. package/hooks/useIsHydrated/useIsHydrated.mjs +27 -0
  35. package/hooks/useRerender/index.cjs +5 -0
  36. package/hooks/useRerender/index.d.cts +2 -0
  37. package/hooks/useRerender/index.d.mts +2 -0
  38. package/hooks/useRerender/index.mjs +3 -0
  39. package/hooks/useRerender/useRerender.cjs +19 -0
  40. package/hooks/useRerender/useRerender.d.cts +11 -0
  41. package/hooks/useRerender/useRerender.d.mts +11 -0
  42. package/hooks/useRerender/useRerender.mjs +18 -0
  43. package/hooks/useStableCallback/index.cjs +5 -0
  44. package/hooks/useStableCallback/index.d.cts +2 -0
  45. package/hooks/useStableCallback/index.d.mts +2 -0
  46. package/hooks/useStableCallback/index.mjs +3 -0
  47. package/hooks/useStableCallback/useStableCallback.cjs +25 -0
  48. package/hooks/useStableCallback/useStableCallback.d.cts +15 -0
  49. package/hooks/useStableCallback/useStableCallback.d.mts +15 -0
  50. package/hooks/useStableCallback/useStableCallback.mjs +24 -0
  51. package/index.cjs +13 -1
  52. package/index.d.cts +9 -3
  53. package/index.d.mts +9 -3
  54. package/index.mjs +8 -2
  55. package/package.json +61 -1
  56. package/utils/getComponentName/getComponentName.cjs +18 -0
  57. package/utils/getComponentName/getComponentName.d.cts +12 -0
  58. package/utils/getComponentName/getComponentName.d.mts +12 -0
  59. package/utils/getComponentName/getComponentName.mjs +17 -0
  60. package/utils/getComponentName/index.cjs +5 -0
  61. package/utils/getComponentName/index.d.cts +2 -0
  62. package/utils/getComponentName/index.d.mts +2 -0
  63. package/utils/getComponentName/index.mjs +3 -0
  64. package/utils/index.cjs +2 -0
  65. package/utils/index.d.cts +3 -1
  66. package/utils/index.d.mts +3 -1
  67. package/utils/index.mjs +2 -1
@@ -0,0 +1,27 @@
1
+ import { ExecutionRequest } from "../useExecutionAt/types.cjs";
2
+ //#region src/hooks/useExecutionEffect/useExecutionEffect.d.ts
3
+ /**
4
+ * Execution Request プロパティ(xxxAt)を受け取り、要求があったときに処理を実行するフック
5
+ *
6
+ * `useExecutionAt` と対になる、受け取る側のフック。
7
+ * 命令的なコンポーネントをラップした React のコンポーネントで、プロパティを通じてメソッドを実行する。
8
+ * 処理は画面に表示した後(`useEffect`)に実行する。表示する前に実行する場合は `useExecutionLayoutEffect` を使う。
9
+ *
10
+ * - `at` が変わったときだけ実行する(`payload` は比べない)
11
+ * - マウントより前に出た要求(マウントしたときにすでに渡されていた要求を含む)は実行しない
12
+ * - 次のレンダリングまでに複数回要求した場合は、最後の要求だけを実行する
13
+ * - コールバックは最新のものを呼ぶ。参照が変わっても実行しない
14
+ *
15
+ * @param request 受け取った Execution Request。undefined の場合は要求なし
16
+ * @param callback 要求があったときに実行する処理。要求の payload を受け取る
17
+ * @example
18
+ * // 呼び出す側
19
+ * const [undoAt, undo] = useExecutionAt<string>();
20
+ * <WrappedImperativeComponent undoAt={undoAt} />
21
+ * // 受け取る側(WrappedImperativeComponent の中)
22
+ * useExecutionEffect(props.undoAt, (payload) => {
23
+ * instance.undo(payload);
24
+ * });
25
+ */
26
+ declare function useExecutionEffect<P = void>(request: ExecutionRequest<P> | undefined, callback: (payload: P | undefined) => void): void;
27
+ export = useExecutionEffect;
@@ -0,0 +1,27 @@
1
+ import { ExecutionRequest } from "../useExecutionAt/types.mjs";
2
+ //#region src/hooks/useExecutionEffect/useExecutionEffect.d.ts
3
+ /**
4
+ * Execution Request プロパティ(xxxAt)を受け取り、要求があったときに処理を実行するフック
5
+ *
6
+ * `useExecutionAt` と対になる、受け取る側のフック。
7
+ * 命令的なコンポーネントをラップした React のコンポーネントで、プロパティを通じてメソッドを実行する。
8
+ * 処理は画面に表示した後(`useEffect`)に実行する。表示する前に実行する場合は `useExecutionLayoutEffect` を使う。
9
+ *
10
+ * - `at` が変わったときだけ実行する(`payload` は比べない)
11
+ * - マウントより前に出た要求(マウントしたときにすでに渡されていた要求を含む)は実行しない
12
+ * - 次のレンダリングまでに複数回要求した場合は、最後の要求だけを実行する
13
+ * - コールバックは最新のものを呼ぶ。参照が変わっても実行しない
14
+ *
15
+ * @param request 受け取った Execution Request。undefined の場合は要求なし
16
+ * @param callback 要求があったときに実行する処理。要求の payload を受け取る
17
+ * @example
18
+ * // 呼び出す側
19
+ * const [undoAt, undo] = useExecutionAt<string>();
20
+ * <WrappedImperativeComponent undoAt={undoAt} />
21
+ * // 受け取る側(WrappedImperativeComponent の中)
22
+ * useExecutionEffect(props.undoAt, (payload) => {
23
+ * instance.undo(payload);
24
+ * });
25
+ */
26
+ export default function useExecutionEffect<P = void>(request: ExecutionRequest<P> | undefined, callback: (payload: P | undefined) => void): void;
27
+ //#endregion
@@ -0,0 +1,36 @@
1
+ import useExecutionHandler from "../../_helpers/_useExecutionHandler.mjs";
2
+ import { useEffect } from "react";
3
+
4
+ //#region src/hooks/useExecutionEffect/useExecutionEffect.ts
5
+ /**
6
+ * Execution Request プロパティ(xxxAt)を受け取り、要求があったときに処理を実行するフック
7
+ *
8
+ * `useExecutionAt` と対になる、受け取る側のフック。
9
+ * 命令的なコンポーネントをラップした React のコンポーネントで、プロパティを通じてメソッドを実行する。
10
+ * 処理は画面に表示した後(`useEffect`)に実行する。表示する前に実行する場合は `useExecutionLayoutEffect` を使う。
11
+ *
12
+ * - `at` が変わったときだけ実行する(`payload` は比べない)
13
+ * - マウントより前に出た要求(マウントしたときにすでに渡されていた要求を含む)は実行しない
14
+ * - 次のレンダリングまでに複数回要求した場合は、最後の要求だけを実行する
15
+ * - コールバックは最新のものを呼ぶ。参照が変わっても実行しない
16
+ *
17
+ * @param request 受け取った Execution Request。undefined の場合は要求なし
18
+ * @param callback 要求があったときに実行する処理。要求の payload を受け取る
19
+ * @example
20
+ * // 呼び出す側
21
+ * const [undoAt, undo] = useExecutionAt<string>();
22
+ * <WrappedImperativeComponent undoAt={undoAt} />
23
+ * // 受け取る側(WrappedImperativeComponent の中)
24
+ * useExecutionEffect(props.undoAt, (payload) => {
25
+ * instance.undo(payload);
26
+ * });
27
+ */
28
+ function useExecutionEffect(request, callback) {
29
+ const handle = useExecutionHandler(request, callback);
30
+ useEffect(() => {
31
+ handle();
32
+ }, [handle]);
33
+ }
34
+
35
+ //#endregion
36
+ export { useExecutionEffect as default };
@@ -0,0 +1,5 @@
1
+ Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
2
+ const require_hooks_useExecutionLayoutEffect_useExecutionLayoutEffect = require("./useExecutionLayoutEffect.cjs");
3
+
4
+ exports.default = require_hooks_useExecutionLayoutEffect_useExecutionLayoutEffect.default;
5
+ exports.useExecutionLayoutEffect = require_hooks_useExecutionLayoutEffect_useExecutionLayoutEffect.default;
@@ -0,0 +1,2 @@
1
+ import useExecutionLayoutEffect from "./useExecutionLayoutEffect.cjs";
2
+ export { useExecutionLayoutEffect as default, useExecutionLayoutEffect };
@@ -0,0 +1,2 @@
1
+ import useExecutionLayoutEffect from "./useExecutionLayoutEffect.mjs";
2
+ export { useExecutionLayoutEffect as default, useExecutionLayoutEffect };
@@ -0,0 +1,3 @@
1
+ import useExecutionLayoutEffect from "./useExecutionLayoutEffect.mjs";
2
+
3
+ export { useExecutionLayoutEffect as default, useExecutionLayoutEffect };
@@ -0,0 +1,24 @@
1
+ Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
2
+ const require__helpers__useExecutionHandler = require("../../_helpers/_useExecutionHandler.cjs");
3
+ let react = require("react");
4
+
5
+ //#region src/hooks/useExecutionLayoutEffect/useExecutionLayoutEffect.ts
6
+ /**
7
+ * Execution Request プロパティ(xxxAt)を受け取り、要求があったときに画面に表示する前に処理を実行するフック
8
+ *
9
+ * `useExecutionEffect` の、処理を `useLayoutEffect` で実行する版。
10
+ * スクロールの位置を合わせる、計測し直すなど、結果を画面に表示する前に反映したい処理に使う。
11
+ * 要求の扱いは `useExecutionEffect` と同じ。
12
+ *
13
+ * @param request 受け取った Execution Request。undefined の場合は要求なし
14
+ * @param callback 要求があったときに実行する処理。要求の payload を受け取る
15
+ */
16
+ function useExecutionLayoutEffect(request, callback) {
17
+ const handle = require__helpers__useExecutionHandler.default(request, callback);
18
+ (0, react.useLayoutEffect)(() => {
19
+ handle();
20
+ }, [handle]);
21
+ }
22
+
23
+ //#endregion
24
+ exports.default = useExecutionLayoutEffect;
@@ -0,0 +1,14 @@
1
+ import { ExecutionRequest } from "../useExecutionAt/types.cjs";
2
+ //#region src/hooks/useExecutionLayoutEffect/useExecutionLayoutEffect.d.ts
3
+ /**
4
+ * Execution Request プロパティ(xxxAt)を受け取り、要求があったときに画面に表示する前に処理を実行するフック
5
+ *
6
+ * `useExecutionEffect` の、処理を `useLayoutEffect` で実行する版。
7
+ * スクロールの位置を合わせる、計測し直すなど、結果を画面に表示する前に反映したい処理に使う。
8
+ * 要求の扱いは `useExecutionEffect` と同じ。
9
+ *
10
+ * @param request 受け取った Execution Request。undefined の場合は要求なし
11
+ * @param callback 要求があったときに実行する処理。要求の payload を受け取る
12
+ */
13
+ declare function useExecutionLayoutEffect<P = void>(request: ExecutionRequest<P> | undefined, callback: (payload: P | undefined) => void): void;
14
+ export = useExecutionLayoutEffect;
@@ -0,0 +1,14 @@
1
+ import { ExecutionRequest } from "../useExecutionAt/types.mjs";
2
+ //#region src/hooks/useExecutionLayoutEffect/useExecutionLayoutEffect.d.ts
3
+ /**
4
+ * Execution Request プロパティ(xxxAt)を受け取り、要求があったときに画面に表示する前に処理を実行するフック
5
+ *
6
+ * `useExecutionEffect` の、処理を `useLayoutEffect` で実行する版。
7
+ * スクロールの位置を合わせる、計測し直すなど、結果を画面に表示する前に反映したい処理に使う。
8
+ * 要求の扱いは `useExecutionEffect` と同じ。
9
+ *
10
+ * @param request 受け取った Execution Request。undefined の場合は要求なし
11
+ * @param callback 要求があったときに実行する処理。要求の payload を受け取る
12
+ */
13
+ export default function useExecutionLayoutEffect<P = void>(request: ExecutionRequest<P> | undefined, callback: (payload: P | undefined) => void): void;
14
+ //#endregion
@@ -0,0 +1,23 @@
1
+ import useExecutionHandler from "../../_helpers/_useExecutionHandler.mjs";
2
+ import { useLayoutEffect } from "react";
3
+
4
+ //#region src/hooks/useExecutionLayoutEffect/useExecutionLayoutEffect.ts
5
+ /**
6
+ * Execution Request プロパティ(xxxAt)を受け取り、要求があったときに画面に表示する前に処理を実行するフック
7
+ *
8
+ * `useExecutionEffect` の、処理を `useLayoutEffect` で実行する版。
9
+ * スクロールの位置を合わせる、計測し直すなど、結果を画面に表示する前に反映したい処理に使う。
10
+ * 要求の扱いは `useExecutionEffect` と同じ。
11
+ *
12
+ * @param request 受け取った Execution Request。undefined の場合は要求なし
13
+ * @param callback 要求があったときに実行する処理。要求の payload を受け取る
14
+ */
15
+ function useExecutionLayoutEffect(request, callback) {
16
+ const handle = useExecutionHandler(request, callback);
17
+ useLayoutEffect(() => {
18
+ handle();
19
+ }, [handle]);
20
+ }
21
+
22
+ //#endregion
23
+ export { useExecutionLayoutEffect as default };
@@ -0,0 +1,5 @@
1
+ Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
2
+ const require_hooks_useIsHydrated_useIsHydrated = require("./useIsHydrated.cjs");
3
+
4
+ exports.default = require_hooks_useIsHydrated_useIsHydrated.default;
5
+ exports.useIsHydrated = require_hooks_useIsHydrated_useIsHydrated.default;
@@ -0,0 +1,2 @@
1
+ import useIsHydrated from "./useIsHydrated.cjs";
2
+ export { useIsHydrated as default, useIsHydrated };
@@ -0,0 +1,2 @@
1
+ import useIsHydrated from "./useIsHydrated.mjs";
2
+ export { useIsHydrated as default, useIsHydrated };
@@ -0,0 +1,3 @@
1
+ import useIsHydrated from "./useIsHydrated.mjs";
2
+
3
+ export { useIsHydrated as default, useIsHydrated };
@@ -0,0 +1,28 @@
1
+ Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
2
+ let react = require("react");
3
+
4
+ //#region src/hooks/useIsHydrated/useIsHydrated.ts
5
+ /**
6
+ * 購読しない(値が変わることは無い)
7
+ */
8
+ const subscribe = () => () => {};
9
+ const getSnapshot = () => true;
10
+ const getServerSnapshot = () => false;
11
+ /**
12
+ * ハイドレーションが終わっているかを返すフック
13
+ *
14
+ * - サーバーの描画とハイドレーション中は false、その後は true を返す
15
+ * - ハイドレーションの後にマウントしたコンポーネントや、クライアントだけで描画した場合は、最初から true を返す
16
+ *
17
+ * クライアントにしか無い値(`window`・`localStorage`・画面の幅など)を、ハイドレーションの不一致を起こさずに描画するために使う。
18
+ * `typeof window` による判定と違い、クライアントでもハイドレーション中は false になる。
19
+ * `useSyncExternalStore` の、サーバーとハイドレーション中は `getServerSnapshot` の値を使う性質を利用している。
20
+ *
21
+ * @returns ハイドレーションが終わっている場合は true
22
+ */
23
+ function useIsHydrated() {
24
+ return (0, react.useSyncExternalStore)(subscribe, getSnapshot, getServerSnapshot);
25
+ }
26
+
27
+ //#endregion
28
+ exports.default = useIsHydrated;
@@ -0,0 +1,15 @@
1
+ //#region src/hooks/useIsHydrated/useIsHydrated.d.ts
2
+ /**
3
+ * ハイドレーションが終わっているかを返すフック
4
+ *
5
+ * - サーバーの描画とハイドレーション中は false、その後は true を返す
6
+ * - ハイドレーションの後にマウントしたコンポーネントや、クライアントだけで描画した場合は、最初から true を返す
7
+ *
8
+ * クライアントにしか無い値(`window`・`localStorage`・画面の幅など)を、ハイドレーションの不一致を起こさずに描画するために使う。
9
+ * `typeof window` による判定と違い、クライアントでもハイドレーション中は false になる。
10
+ * `useSyncExternalStore` の、サーバーとハイドレーション中は `getServerSnapshot` の値を使う性質を利用している。
11
+ *
12
+ * @returns ハイドレーションが終わっている場合は true
13
+ */
14
+ declare function useIsHydrated(): boolean;
15
+ export = useIsHydrated;
@@ -0,0 +1,15 @@
1
+ //#region src/hooks/useIsHydrated/useIsHydrated.d.ts
2
+ /**
3
+ * ハイドレーションが終わっているかを返すフック
4
+ *
5
+ * - サーバーの描画とハイドレーション中は false、その後は true を返す
6
+ * - ハイドレーションの後にマウントしたコンポーネントや、クライアントだけで描画した場合は、最初から true を返す
7
+ *
8
+ * クライアントにしか無い値(`window`・`localStorage`・画面の幅など)を、ハイドレーションの不一致を起こさずに描画するために使う。
9
+ * `typeof window` による判定と違い、クライアントでもハイドレーション中は false になる。
10
+ * `useSyncExternalStore` の、サーバーとハイドレーション中は `getServerSnapshot` の値を使う性質を利用している。
11
+ *
12
+ * @returns ハイドレーションが終わっている場合は true
13
+ */
14
+ export default function useIsHydrated(): boolean;
15
+ //#endregion
@@ -0,0 +1,27 @@
1
+ import { useSyncExternalStore } from "react";
2
+
3
+ //#region src/hooks/useIsHydrated/useIsHydrated.ts
4
+ /**
5
+ * 購読しない(値が変わることは無い)
6
+ */
7
+ const subscribe = () => () => {};
8
+ const getSnapshot = () => true;
9
+ const getServerSnapshot = () => false;
10
+ /**
11
+ * ハイドレーションが終わっているかを返すフック
12
+ *
13
+ * - サーバーの描画とハイドレーション中は false、その後は true を返す
14
+ * - ハイドレーションの後にマウントしたコンポーネントや、クライアントだけで描画した場合は、最初から true を返す
15
+ *
16
+ * クライアントにしか無い値(`window`・`localStorage`・画面の幅など)を、ハイドレーションの不一致を起こさずに描画するために使う。
17
+ * `typeof window` による判定と違い、クライアントでもハイドレーション中は false になる。
18
+ * `useSyncExternalStore` の、サーバーとハイドレーション中は `getServerSnapshot` の値を使う性質を利用している。
19
+ *
20
+ * @returns ハイドレーションが終わっている場合は true
21
+ */
22
+ function useIsHydrated() {
23
+ return useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
24
+ }
25
+
26
+ //#endregion
27
+ export { useIsHydrated as default };
@@ -0,0 +1,5 @@
1
+ Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
2
+ const require_hooks_useRerender_useRerender = require("./useRerender.cjs");
3
+
4
+ exports.default = require_hooks_useRerender_useRerender.default;
5
+ exports.useRerender = require_hooks_useRerender_useRerender.default;
@@ -0,0 +1,2 @@
1
+ import useRerender from "./useRerender.cjs";
2
+ export { useRerender as default, useRerender };
@@ -0,0 +1,2 @@
1
+ import useRerender from "./useRerender.mjs";
2
+ export { useRerender as default, useRerender };
@@ -0,0 +1,3 @@
1
+ import useRerender from "./useRerender.mjs";
2
+
3
+ export { useRerender as default, useRerender };
@@ -0,0 +1,19 @@
1
+ Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
2
+ let react = require("react");
3
+
4
+ //#region src/hooks/useRerender/useRerender.ts
5
+ /**
6
+ * 再レンダリングだけを起こす関数を返すフック
7
+ *
8
+ * 値を持たずに描画し直したい場合(外部の状態を読み直して表示するときなど)に使う。
9
+ * `useReducer` のカウンターを進めることで、再レンダリングを要求する。
10
+ *
11
+ * @returns 呼ぶと再レンダリングを要求する関数。参照は常に同じ
12
+ */
13
+ function useRerender() {
14
+ const [, rerender] = (0, react.useReducer)((count) => count + 1, 0);
15
+ return rerender;
16
+ }
17
+
18
+ //#endregion
19
+ exports.default = useRerender;
@@ -0,0 +1,11 @@
1
+ //#region src/hooks/useRerender/useRerender.d.ts
2
+ /**
3
+ * 再レンダリングだけを起こす関数を返すフック
4
+ *
5
+ * 値を持たずに描画し直したい場合(外部の状態を読み直して表示するときなど)に使う。
6
+ * `useReducer` のカウンターを進めることで、再レンダリングを要求する。
7
+ *
8
+ * @returns 呼ぶと再レンダリングを要求する関数。参照は常に同じ
9
+ */
10
+ declare function useRerender(): () => void;
11
+ export = useRerender;
@@ -0,0 +1,11 @@
1
+ //#region src/hooks/useRerender/useRerender.d.ts
2
+ /**
3
+ * 再レンダリングだけを起こす関数を返すフック
4
+ *
5
+ * 値を持たずに描画し直したい場合(外部の状態を読み直して表示するときなど)に使う。
6
+ * `useReducer` のカウンターを進めることで、再レンダリングを要求する。
7
+ *
8
+ * @returns 呼ぶと再レンダリングを要求する関数。参照は常に同じ
9
+ */
10
+ export default function useRerender(): () => void;
11
+ //#endregion
@@ -0,0 +1,18 @@
1
+ import { useReducer } from "react";
2
+
3
+ //#region src/hooks/useRerender/useRerender.ts
4
+ /**
5
+ * 再レンダリングだけを起こす関数を返すフック
6
+ *
7
+ * 値を持たずに描画し直したい場合(外部の状態を読み直して表示するときなど)に使う。
8
+ * `useReducer` のカウンターを進めることで、再レンダリングを要求する。
9
+ *
10
+ * @returns 呼ぶと再レンダリングを要求する関数。参照は常に同じ
11
+ */
12
+ function useRerender() {
13
+ const [, rerender] = useReducer((count) => count + 1, 0);
14
+ return rerender;
15
+ }
16
+
17
+ //#endregion
18
+ export { useRerender as default };
@@ -0,0 +1,5 @@
1
+ Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
2
+ const require_hooks_useStableCallback_useStableCallback = require("./useStableCallback.cjs");
3
+
4
+ exports.default = require_hooks_useStableCallback_useStableCallback.default;
5
+ exports.useStableCallback = require_hooks_useStableCallback_useStableCallback.default;
@@ -0,0 +1,2 @@
1
+ import useStableCallback from "./useStableCallback.cjs";
2
+ export { useStableCallback as default, useStableCallback };
@@ -0,0 +1,2 @@
1
+ import useStableCallback from "./useStableCallback.mjs";
2
+ export { useStableCallback as default, useStableCallback };
@@ -0,0 +1,3 @@
1
+ import useStableCallback from "./useStableCallback.mjs";
2
+
3
+ export { useStableCallback as default, useStableCallback };
@@ -0,0 +1,25 @@
1
+ Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
2
+ const require_hooks_useLatestRef_useLatestRef = require("../useLatestRef/useLatestRef.cjs");
3
+ require("../useLatestRef/index.cjs");
4
+ let react = require("react");
5
+
6
+ //#region src/hooks/useStableCallback/useStableCallback.ts
7
+ /**
8
+ * 参照が変わらず、呼ぶと最新のコールバックを実行する関数を返すフック
9
+ *
10
+ * 子のコンポーネントに渡すイベントハンドラーの参照を変えずに、中身は常に最新にする場合に使う。
11
+ * React 19.2 の `useEffectEvent` と違い、子のコンポーネントに渡せる。
12
+ *
13
+ * 最新のコールバックはコミット時に反映されるため、レンダリング中には呼ばないこと(古いコールバックが呼ばれる)。
14
+ * イベントハンドラーやエフェクトの中から呼ぶ。
15
+ *
16
+ * @param callback コールバック
17
+ * @returns 最新のコールバックを呼ぶ関数。参照は常に同じ
18
+ */
19
+ function useStableCallback(callback) {
20
+ const latestRef = require_hooks_useLatestRef_useLatestRef.default(callback);
21
+ return (0, react.useCallback)((...args) => latestRef.current(...args), [latestRef]);
22
+ }
23
+
24
+ //#endregion
25
+ exports.default = useStableCallback;
@@ -0,0 +1,15 @@
1
+ //#region src/hooks/useStableCallback/useStableCallback.d.ts
2
+ /**
3
+ * 参照が変わらず、呼ぶと最新のコールバックを実行する関数を返すフック
4
+ *
5
+ * 子のコンポーネントに渡すイベントハンドラーの参照を変えずに、中身は常に最新にする場合に使う。
6
+ * React 19.2 の `useEffectEvent` と違い、子のコンポーネントに渡せる。
7
+ *
8
+ * 最新のコールバックはコミット時に反映されるため、レンダリング中には呼ばないこと(古いコールバックが呼ばれる)。
9
+ * イベントハンドラーやエフェクトの中から呼ぶ。
10
+ *
11
+ * @param callback コールバック
12
+ * @returns 最新のコールバックを呼ぶ関数。参照は常に同じ
13
+ */
14
+ declare function useStableCallback<A extends unknown[], R>(callback: (...args: A) => R): (...args: A) => R;
15
+ export = useStableCallback;
@@ -0,0 +1,15 @@
1
+ //#region src/hooks/useStableCallback/useStableCallback.d.ts
2
+ /**
3
+ * 参照が変わらず、呼ぶと最新のコールバックを実行する関数を返すフック
4
+ *
5
+ * 子のコンポーネントに渡すイベントハンドラーの参照を変えずに、中身は常に最新にする場合に使う。
6
+ * React 19.2 の `useEffectEvent` と違い、子のコンポーネントに渡せる。
7
+ *
8
+ * 最新のコールバックはコミット時に反映されるため、レンダリング中には呼ばないこと(古いコールバックが呼ばれる)。
9
+ * イベントハンドラーやエフェクトの中から呼ぶ。
10
+ *
11
+ * @param callback コールバック
12
+ * @returns 最新のコールバックを呼ぶ関数。参照は常に同じ
13
+ */
14
+ export default function useStableCallback<A extends unknown[], R>(callback: (...args: A) => R): (...args: A) => R;
15
+ //#endregion
@@ -0,0 +1,24 @@
1
+ import useLatestRef from "../useLatestRef/useLatestRef.mjs";
2
+ import "../useLatestRef/index.mjs";
3
+ import { useCallback } from "react";
4
+
5
+ //#region src/hooks/useStableCallback/useStableCallback.ts
6
+ /**
7
+ * 参照が変わらず、呼ぶと最新のコールバックを実行する関数を返すフック
8
+ *
9
+ * 子のコンポーネントに渡すイベントハンドラーの参照を変えずに、中身は常に最新にする場合に使う。
10
+ * React 19.2 の `useEffectEvent` と違い、子のコンポーネントに渡せる。
11
+ *
12
+ * 最新のコールバックはコミット時に反映されるため、レンダリング中には呼ばないこと(古いコールバックが呼ばれる)。
13
+ * イベントハンドラーやエフェクトの中から呼ぶ。
14
+ *
15
+ * @param callback コールバック
16
+ * @returns 最新のコールバックを呼ぶ関数。参照は常に同じ
17
+ */
18
+ function useStableCallback(callback) {
19
+ const latestRef = useLatestRef(callback);
20
+ return useCallback((...args) => latestRef.current(...args), [latestRef]);
21
+ }
22
+
23
+ //#endregion
24
+ export { useStableCallback as default };
package/index.cjs CHANGED
@@ -5,15 +5,21 @@ const require_hooks_useCombinedRefs_useCombinedRefs = require("./hooks/useCombin
5
5
  const require_hooks_useConstant_useConstant = require("./hooks/useConstant/useConstant.cjs");
6
6
  const require_utils_markAt_markAt = require("./utils/markAt/markAt.cjs");
7
7
  const require_hooks_useExecutionAt_useExecutionAt = require("./hooks/useExecutionAt/useExecutionAt.cjs");
8
- const require_hooks_useIsMounted_useIsMounted = require("./hooks/useIsMounted/useIsMounted.cjs");
9
8
  const require_hooks_useLatestRef_useLatestRef = require("./hooks/useLatestRef/useLatestRef.cjs");
9
+ const require_hooks_useExecutionEffect_useExecutionEffect = require("./hooks/useExecutionEffect/useExecutionEffect.cjs");
10
+ const require_hooks_useExecutionLayoutEffect_useExecutionLayoutEffect = require("./hooks/useExecutionLayoutEffect/useExecutionLayoutEffect.cjs");
11
+ const require_hooks_useIsHydrated_useIsHydrated = require("./hooks/useIsHydrated/useIsHydrated.cjs");
12
+ const require_hooks_useIsMounted_useIsMounted = require("./hooks/useIsMounted/useIsMounted.cjs");
10
13
  const require_hooks_usePreviousValue_usePreviousValue = require("./hooks/usePreviousValue/usePreviousValue.cjs");
14
+ const require_hooks_useRerender_useRerender = require("./hooks/useRerender/useRerender.cjs");
15
+ const require_hooks_useStableCallback_useStableCallback = require("./hooks/useStableCallback/useStableCallback.cjs");
11
16
  require("./hooks/index.cjs");
12
17
  const require_utils_applyDefaultProps_applyDefaultProps = require("./utils/applyDefaultProps/applyDefaultProps.cjs");
13
18
  const require_utils_ensureComponent_ensureComponent = require("./utils/ensureComponent/ensureComponent.cjs");
14
19
  const require_utils_extendElement_extendElement = require("./utils/extendElement/extendElement.cjs");
15
20
  const require_utils_forEachContent_forEachContent = require("./utils/forEachContent/forEachContent.cjs");
16
21
  const require_utils_forEachElement_forEachElement = require("./utils/forEachElement/forEachElement.cjs");
22
+ const require_utils_getComponentName_getComponentName = require("./utils/getComponentName/getComponentName.cjs");
17
23
  const require_utils_transformContent_transformContent = require("./utils/transformContent/transformContent.cjs");
18
24
  const require_utils_transformElement_transformElement = require("./utils/transformElement/transformElement.cjs");
19
25
  require("./utils/index.cjs");
@@ -23,6 +29,7 @@ exports.ensureComponent = require_utils_ensureComponent_ensureComponent.default;
23
29
  exports.extendElement = require_utils_extendElement_extendElement.default;
24
30
  exports.forEachContent = require_utils_forEachContent_forEachContent.default;
25
31
  exports.forEachElement = require_utils_forEachElement_forEachElement.default;
32
+ exports.getComponentName = require_utils_getComponentName_getComponentName.default;
26
33
  exports.markAt = require_utils_markAt_markAt.default;
27
34
  exports.setRefCurrent = require_utils_setRefCurrent_setRefCurrent.default;
28
35
  exports.transformContent = require_utils_transformContent_transformContent.default;
@@ -30,7 +37,12 @@ exports.transformElement = require_utils_transformElement_transformElement.defau
30
37
  exports.useCombinedRefs = require_hooks_useCombinedRefs_useCombinedRefs.default;
31
38
  exports.useConstant = require_hooks_useConstant_useConstant.default;
32
39
  exports.useExecutionAt = require_hooks_useExecutionAt_useExecutionAt.default;
40
+ exports.useExecutionEffect = require_hooks_useExecutionEffect_useExecutionEffect.default;
41
+ exports.useExecutionLayoutEffect = require_hooks_useExecutionLayoutEffect_useExecutionLayoutEffect.default;
42
+ exports.useIsHydrated = require_hooks_useIsHydrated_useIsHydrated.default;
33
43
  exports.useIsMounted = require_hooks_useIsMounted_useIsMounted.default;
34
44
  exports.useLatestRef = require_hooks_useLatestRef_useLatestRef.default;
35
45
  exports.usePreviousValue = require_hooks_usePreviousValue_usePreviousValue.default;
46
+ exports.useRerender = require_hooks_useRerender_useRerender.default;
47
+ exports.useStableCallback = require_hooks_useStableCallback_useStableCallback.default;
36
48
  exports.useStableLength = require_hooks_useStableLength_useStableLength.default;
package/index.d.cts CHANGED
@@ -1,14 +1,19 @@
1
- import useCombinedRefs from "./hooks/useCombinedRefs/useCombinedRefs.cjs";
2
- import useConstant from "./hooks/useConstant/useConstant.cjs";
3
1
  import { MarkAtResult } from "./utils/markAt/types.cjs";
4
2
  import markAt from "./utils/markAt/markAt.cjs";
5
3
  import { ExecutionFunction, ExecutionRequest, UseExecutionAtOptions, UseExecutionAtResult } from "./hooks/useExecutionAt/types.cjs";
6
4
  import useExecutionAt from "./hooks/useExecutionAt/useExecutionAt.cjs";
5
+ import useCombinedRefs from "./hooks/useCombinedRefs/useCombinedRefs.cjs";
6
+ import useConstant from "./hooks/useConstant/useConstant.cjs";
7
+ import useExecutionEffect from "./hooks/useExecutionEffect/useExecutionEffect.cjs";
8
+ import useExecutionLayoutEffect from "./hooks/useExecutionLayoutEffect/useExecutionLayoutEffect.cjs";
9
+ import useIsHydrated from "./hooks/useIsHydrated/useIsHydrated.cjs";
7
10
  import useIsMounted from "./hooks/useIsMounted/useIsMounted.cjs";
8
11
  import { LatestRef } from "./hooks/useLatestRef/types.cjs";
9
12
  import useLatestRef from "./hooks/useLatestRef/useLatestRef.cjs";
10
13
  import { UsePreviousValueOptions } from "./hooks/usePreviousValue/types.cjs";
11
14
  import usePreviousValue from "./hooks/usePreviousValue/usePreviousValue.cjs";
15
+ import useRerender from "./hooks/useRerender/useRerender.cjs";
16
+ import useStableCallback from "./hooks/useStableCallback/useStableCallback.cjs";
12
17
  import useStableLength from "./hooks/useStableLength/useStableLength.cjs";
13
18
  import "./hooks/index.cjs";
14
19
  import { CSSPropertiesWithVars } from "./types.cjs";
@@ -19,8 +24,9 @@ import { ExtendableProps } from "./utils/extendElement/types.cjs";
19
24
  import extendElement from "./utils/extendElement/extendElement.cjs";
20
25
  import forEachContent from "./utils/forEachContent/forEachContent.cjs";
21
26
  import forEachElement from "./utils/forEachElement/forEachElement.cjs";
27
+ import getComponentName from "./utils/getComponentName/getComponentName.cjs";
22
28
  import setRefCurrent from "./utils/setRefCurrent/setRefCurrent.cjs";
23
29
  import transformContent from "./utils/transformContent/transformContent.cjs";
24
30
  import transformElement from "./utils/transformElement/transformElement.cjs";
25
31
  import "./utils/index.cjs";
26
- export { type AppliedProps, type CSSPropertiesWithVars, type ExecutionFunction, type ExecutionRequest, type ExtendableProps, type LatestRef, type MarkAtResult, type SkippedDefaults, type UseExecutionAtOptions, type UseExecutionAtResult, type UsePreviousValueOptions, applyDefaultProps, ensureComponent, extendElement, forEachContent, forEachElement, markAt, setRefCurrent, transformContent, transformElement, useCombinedRefs, useConstant, useExecutionAt, useIsMounted, useLatestRef, usePreviousValue, useStableLength };
32
+ export { type AppliedProps, type CSSPropertiesWithVars, type ExecutionFunction, type ExecutionRequest, type ExtendableProps, type LatestRef, type MarkAtResult, type SkippedDefaults, type UseExecutionAtOptions, type UseExecutionAtResult, type UsePreviousValueOptions, applyDefaultProps, ensureComponent, extendElement, forEachContent, forEachElement, getComponentName, markAt, setRefCurrent, transformContent, transformElement, useCombinedRefs, useConstant, useExecutionAt, useExecutionEffect, useExecutionLayoutEffect, useIsHydrated, useIsMounted, useLatestRef, usePreviousValue, useRerender, useStableCallback, useStableLength };
package/index.d.mts CHANGED
@@ -1,14 +1,19 @@
1
- import useCombinedRefs from "./hooks/useCombinedRefs/useCombinedRefs.mjs";
2
- import useConstant from "./hooks/useConstant/useConstant.mjs";
3
1
  import { MarkAtResult } from "./utils/markAt/types.mjs";
4
2
  import markAt from "./utils/markAt/markAt.mjs";
5
3
  import { ExecutionFunction, ExecutionRequest, UseExecutionAtOptions, UseExecutionAtResult } from "./hooks/useExecutionAt/types.mjs";
6
4
  import useExecutionAt from "./hooks/useExecutionAt/useExecutionAt.mjs";
5
+ import useCombinedRefs from "./hooks/useCombinedRefs/useCombinedRefs.mjs";
6
+ import useConstant from "./hooks/useConstant/useConstant.mjs";
7
+ import useExecutionEffect from "./hooks/useExecutionEffect/useExecutionEffect.mjs";
8
+ import useExecutionLayoutEffect from "./hooks/useExecutionLayoutEffect/useExecutionLayoutEffect.mjs";
9
+ import useIsHydrated from "./hooks/useIsHydrated/useIsHydrated.mjs";
7
10
  import useIsMounted from "./hooks/useIsMounted/useIsMounted.mjs";
8
11
  import { LatestRef } from "./hooks/useLatestRef/types.mjs";
9
12
  import useLatestRef from "./hooks/useLatestRef/useLatestRef.mjs";
10
13
  import { UsePreviousValueOptions } from "./hooks/usePreviousValue/types.mjs";
11
14
  import usePreviousValue from "./hooks/usePreviousValue/usePreviousValue.mjs";
15
+ import useRerender from "./hooks/useRerender/useRerender.mjs";
16
+ import useStableCallback from "./hooks/useStableCallback/useStableCallback.mjs";
12
17
  import useStableLength from "./hooks/useStableLength/useStableLength.mjs";
13
18
  import "./hooks/index.mjs";
14
19
  import { CSSPropertiesWithVars } from "./types.mjs";
@@ -19,8 +24,9 @@ import { ExtendableProps } from "./utils/extendElement/types.mjs";
19
24
  import extendElement from "./utils/extendElement/extendElement.mjs";
20
25
  import forEachContent from "./utils/forEachContent/forEachContent.mjs";
21
26
  import forEachElement from "./utils/forEachElement/forEachElement.mjs";
27
+ import getComponentName from "./utils/getComponentName/getComponentName.mjs";
22
28
  import setRefCurrent from "./utils/setRefCurrent/setRefCurrent.mjs";
23
29
  import transformContent from "./utils/transformContent/transformContent.mjs";
24
30
  import transformElement from "./utils/transformElement/transformElement.mjs";
25
31
  import "./utils/index.mjs";
26
- export { type AppliedProps, type CSSPropertiesWithVars, type ExecutionFunction, type ExecutionRequest, type ExtendableProps, type LatestRef, type MarkAtResult, type SkippedDefaults, type UseExecutionAtOptions, type UseExecutionAtResult, type UsePreviousValueOptions, applyDefaultProps, ensureComponent, extendElement, forEachContent, forEachElement, markAt, setRefCurrent, transformContent, transformElement, useCombinedRefs, useConstant, useExecutionAt, useIsMounted, useLatestRef, usePreviousValue, useStableLength };
32
+ export { type AppliedProps, type CSSPropertiesWithVars, type ExecutionFunction, type ExecutionRequest, type ExtendableProps, type LatestRef, type MarkAtResult, type SkippedDefaults, type UseExecutionAtOptions, type UseExecutionAtResult, type UsePreviousValueOptions, applyDefaultProps, ensureComponent, extendElement, forEachContent, forEachElement, getComponentName, markAt, setRefCurrent, transformContent, transformElement, useCombinedRefs, useConstant, useExecutionAt, useExecutionEffect, useExecutionLayoutEffect, useIsHydrated, useIsMounted, useLatestRef, usePreviousValue, useRerender, useStableCallback, useStableLength };