@fringeworks/react-utils 0.10.0 → 0.11.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 (74) hide show
  1. package/README.ja.md +101 -21
  2. package/README.md +114 -34
  3. package/{_helpers → _internal}/_traverseChildren.cjs +1 -1
  4. package/{_helpers → _internal}/_traverseChildren.d.cts +1 -1
  5. package/{_helpers → _internal}/_traverseChildren.d.mts +1 -1
  6. package/{_helpers → _internal}/_traverseChildren.mjs +1 -1
  7. package/_internal/_useChangeHandler.cjs +48 -0
  8. package/_internal/_useChangeHandler.d.cts +18 -0
  9. package/_internal/_useChangeHandler.d.mts +18 -0
  10. package/_internal/_useChangeHandler.mjs +47 -0
  11. package/{_helpers → _internal}/_useExecutionHandler.cjs +13 -12
  12. package/{_helpers → _internal}/_useExecutionHandler.d.cts +6 -4
  13. package/{_helpers → _internal}/_useExecutionHandler.d.mts +6 -4
  14. package/_internal/_useExecutionHandler.mjs +37 -0
  15. package/hooks/index.cjs +11 -2
  16. package/hooks/index.d.cts +6 -1
  17. package/hooks/index.d.mts +6 -1
  18. package/hooks/index.mjs +9 -3
  19. package/hooks/useChangeEffect/index.cjs +5 -0
  20. package/hooks/useChangeEffect/index.d.cts +3 -0
  21. package/hooks/useChangeEffect/index.d.mts +3 -0
  22. package/hooks/useChangeEffect/index.mjs +3 -0
  23. package/hooks/useChangeEffect/types.cjs +1 -0
  24. package/hooks/useChangeEffect/types.d.cts +11 -0
  25. package/hooks/useChangeEffect/types.d.mts +11 -0
  26. package/hooks/useChangeEffect/types.mjs +1 -0
  27. package/hooks/useChangeEffect/useChangeEffect.cjs +37 -0
  28. package/hooks/useChangeEffect/useChangeEffect.d.cts +27 -0
  29. package/hooks/useChangeEffect/useChangeEffect.d.mts +27 -0
  30. package/hooks/useChangeEffect/useChangeEffect.mjs +36 -0
  31. package/hooks/useChangeLayoutEffect/index.cjs +5 -0
  32. package/hooks/useChangeLayoutEffect/index.d.cts +2 -0
  33. package/hooks/useChangeLayoutEffect/index.d.mts +2 -0
  34. package/hooks/useChangeLayoutEffect/index.mjs +3 -0
  35. package/hooks/useChangeLayoutEffect/useChangeLayoutEffect.cjs +24 -0
  36. package/hooks/useChangeLayoutEffect/useChangeLayoutEffect.d.cts +14 -0
  37. package/hooks/useChangeLayoutEffect/useChangeLayoutEffect.d.mts +14 -0
  38. package/hooks/useChangeLayoutEffect/useChangeLayoutEffect.mjs +23 -0
  39. package/hooks/useExecutionEffect/useExecutionEffect.cjs +8 -6
  40. package/hooks/useExecutionEffect/useExecutionEffect.d.cts +8 -5
  41. package/hooks/useExecutionEffect/useExecutionEffect.d.mts +8 -5
  42. package/hooks/useExecutionEffect/useExecutionEffect.mjs +7 -5
  43. package/hooks/useExecutionLayoutEffect/useExecutionLayoutEffect.cjs +3 -3
  44. package/hooks/useExecutionLayoutEffect/useExecutionLayoutEffect.d.cts +3 -2
  45. package/hooks/useExecutionLayoutEffect/useExecutionLayoutEffect.d.mts +3 -2
  46. package/hooks/useExecutionLayoutEffect/useExecutionLayoutEffect.mjs +2 -2
  47. package/hooks/useExecutionMark/index.cjs +5 -0
  48. package/hooks/useExecutionMark/index.d.cts +3 -0
  49. package/hooks/useExecutionMark/index.d.mts +3 -0
  50. package/hooks/useExecutionMark/index.mjs +3 -0
  51. package/hooks/useExecutionMark/types.cjs +1 -0
  52. package/hooks/useExecutionMark/types.d.cts +15 -0
  53. package/hooks/useExecutionMark/types.d.mts +15 -0
  54. package/hooks/useExecutionMark/types.mjs +1 -0
  55. package/hooks/useExecutionMark/useExecutionMark.cjs +29 -0
  56. package/hooks/useExecutionMark/useExecutionMark.d.cts +19 -0
  57. package/hooks/useExecutionMark/useExecutionMark.d.mts +19 -0
  58. package/hooks/useExecutionMark/useExecutionMark.mjs +28 -0
  59. package/index.cjs +7 -1
  60. package/index.d.cts +6 -1
  61. package/index.d.mts +6 -1
  62. package/index.mjs +5 -2
  63. package/package.json +31 -1
  64. package/utils/forEachContent/forEachContent.cjs +2 -2
  65. package/utils/forEachContent/forEachContent.mjs +1 -1
  66. package/utils/forEachElement/forEachElement.cjs +2 -2
  67. package/utils/forEachElement/forEachElement.mjs +1 -1
  68. package/utils/markAt/types.d.cts +3 -0
  69. package/utils/markAt/types.d.mts +3 -0
  70. package/utils/transformContent/transformContent.cjs +2 -2
  71. package/utils/transformContent/transformContent.mjs +1 -1
  72. package/utils/transformElement/transformElement.cjs +2 -2
  73. package/utils/transformElement/transformElement.mjs +1 -1
  74. package/_helpers/_useExecutionHandler.mjs +0 -36
@@ -1,20 +1,22 @@
1
- import useExecutionHandler from "../../_helpers/_useExecutionHandler.mjs";
1
+ import useExecutionHandler from "../../_internal/_useExecutionHandler.mjs";
2
2
  import { useEffect } from "react";
3
3
 
4
4
  //#region src/hooks/useExecutionEffect/useExecutionEffect.ts
5
5
  /**
6
6
  * Execution Request プロパティ(xxxAt)を受け取り、要求があったときに処理を実行するフック
7
7
  *
8
- * `useExecutionAt` と対になる、受け取る側のフック。
8
+ * `useExecutionAt`・`useExecutionMark` と対になる、受け取る側のフック。
9
9
  * 命令的なコンポーネントをラップした React のコンポーネントで、プロパティを通じてメソッドを実行する。
10
10
  * 処理は画面に表示した後(`useEffect`)に実行する。表示する前に実行する場合は `useExecutionLayoutEffect` を使う。
11
11
  *
12
- * - `at` が変わったときだけ実行する(`payload` は比べない)
13
- * - マウントより前に出た要求(マウントしたときにすでに渡されていた要求を含む)は実行しない
12
+ * - 印(`at`、または ExecutionMark の値)が変わったときだけ実行する(`payload` は比べない)
13
+ * - マウントしたときに渡されていた要求は実行しない(マウントしたときの印を基準にする)
14
+ * - 印が `0`(まだ要求していない)や undefined の場合は実行しない
15
+ * - ExecutionMark を受け取った場合、コールバックの payload は undefined
14
16
  * - 次のレンダリングまでに複数回要求した場合は、最後の要求だけを実行する
15
17
  * - コールバックは最新のものを呼ぶ。参照が変わっても実行しない
16
18
  *
17
- * @param request 受け取った Execution Request。undefined の場合は要求なし
19
+ * @param request 受け取った Execution Request(`useExecutionAt` の値、または payload の無い ExecutionMark)。undefined の場合は要求なし
18
20
  * @param callback 要求があったときに実行する処理。要求の payload を受け取る
19
21
  * @example
20
22
  * // 呼び出す側
@@ -1,5 +1,5 @@
1
1
  Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
2
- const require__helpers__useExecutionHandler = require("../../_helpers/_useExecutionHandler.cjs");
2
+ const require__internal__useExecutionHandler = require("../../_internal/_useExecutionHandler.cjs");
3
3
  let react = require("react");
4
4
 
5
5
  //#region src/hooks/useExecutionLayoutEffect/useExecutionLayoutEffect.ts
@@ -10,11 +10,11 @@ let react = require("react");
10
10
  * スクロールの位置を合わせる、計測し直すなど、結果を画面に表示する前に反映したい処理に使う。
11
11
  * 要求の扱いは `useExecutionEffect` と同じ。
12
12
  *
13
- * @param request 受け取った Execution Request。undefined の場合は要求なし
13
+ * @param request 受け取った Execution Request(`useExecutionAt` の値、または payload の無い ExecutionMark)。undefined の場合は要求なし
14
14
  * @param callback 要求があったときに実行する処理。要求の payload を受け取る
15
15
  */
16
16
  function useExecutionLayoutEffect(request, callback) {
17
- const handle = require__helpers__useExecutionHandler.default(request, callback);
17
+ const handle = require__internal__useExecutionHandler.default(request, callback);
18
18
  (0, react.useLayoutEffect)(() => {
19
19
  handle();
20
20
  }, [handle]);
@@ -1,4 +1,5 @@
1
1
  import { ExecutionRequest } from "../useExecutionAt/types.cjs";
2
+ import { ExecutionMark } from "../useExecutionMark/types.cjs";
2
3
  //#region src/hooks/useExecutionLayoutEffect/useExecutionLayoutEffect.d.ts
3
4
  /**
4
5
  * Execution Request プロパティ(xxxAt)を受け取り、要求があったときに画面に表示する前に処理を実行するフック
@@ -7,8 +8,8 @@ import { ExecutionRequest } from "../useExecutionAt/types.cjs";
7
8
  * スクロールの位置を合わせる、計測し直すなど、結果を画面に表示する前に反映したい処理に使う。
8
9
  * 要求の扱いは `useExecutionEffect` と同じ。
9
10
  *
10
- * @param request 受け取った Execution Request。undefined の場合は要求なし
11
+ * @param request 受け取った Execution Request(`useExecutionAt` の値、または payload の無い ExecutionMark)。undefined の場合は要求なし
11
12
  * @param callback 要求があったときに実行する処理。要求の payload を受け取る
12
13
  */
13
- declare function useExecutionLayoutEffect<P = void>(request: ExecutionRequest<P> | undefined, callback: (payload: P | undefined) => void): void;
14
+ declare function useExecutionLayoutEffect<P = void>(request: ExecutionRequest<P> | ExecutionMark | undefined, callback: (payload: P | undefined) => void): void;
14
15
  export = useExecutionLayoutEffect;
@@ -1,4 +1,5 @@
1
1
  import { ExecutionRequest } from "../useExecutionAt/types.mjs";
2
+ import { ExecutionMark } from "../useExecutionMark/types.mjs";
2
3
  //#region src/hooks/useExecutionLayoutEffect/useExecutionLayoutEffect.d.ts
3
4
  /**
4
5
  * Execution Request プロパティ(xxxAt)を受け取り、要求があったときに画面に表示する前に処理を実行するフック
@@ -7,8 +8,8 @@ import { ExecutionRequest } from "../useExecutionAt/types.mjs";
7
8
  * スクロールの位置を合わせる、計測し直すなど、結果を画面に表示する前に反映したい処理に使う。
8
9
  * 要求の扱いは `useExecutionEffect` と同じ。
9
10
  *
10
- * @param request 受け取った Execution Request。undefined の場合は要求なし
11
+ * @param request 受け取った Execution Request(`useExecutionAt` の値、または payload の無い ExecutionMark)。undefined の場合は要求なし
11
12
  * @param callback 要求があったときに実行する処理。要求の payload を受け取る
12
13
  */
13
- export default function useExecutionLayoutEffect<P = void>(request: ExecutionRequest<P> | undefined, callback: (payload: P | undefined) => void): void;
14
+ export default function useExecutionLayoutEffect<P = void>(request: ExecutionRequest<P> | ExecutionMark | undefined, callback: (payload: P | undefined) => void): void;
14
15
  //#endregion
@@ -1,4 +1,4 @@
1
- import useExecutionHandler from "../../_helpers/_useExecutionHandler.mjs";
1
+ import useExecutionHandler from "../../_internal/_useExecutionHandler.mjs";
2
2
  import { useLayoutEffect } from "react";
3
3
 
4
4
  //#region src/hooks/useExecutionLayoutEffect/useExecutionLayoutEffect.ts
@@ -9,7 +9,7 @@ import { useLayoutEffect } from "react";
9
9
  * スクロールの位置を合わせる、計測し直すなど、結果を画面に表示する前に反映したい処理に使う。
10
10
  * 要求の扱いは `useExecutionEffect` と同じ。
11
11
  *
12
- * @param request 受け取った Execution Request。undefined の場合は要求なし
12
+ * @param request 受け取った Execution Request(`useExecutionAt` の値、または payload の無い ExecutionMark)。undefined の場合は要求なし
13
13
  * @param callback 要求があったときに実行する処理。要求の payload を受け取る
14
14
  */
15
15
  function useExecutionLayoutEffect(request, callback) {
@@ -0,0 +1,5 @@
1
+ Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
2
+ const require_hooks_useExecutionMark_useExecutionMark = require("./useExecutionMark.cjs");
3
+
4
+ exports.default = require_hooks_useExecutionMark_useExecutionMark.default;
5
+ exports.useExecutionMark = require_hooks_useExecutionMark_useExecutionMark.default;
@@ -0,0 +1,3 @@
1
+ import { ExecutionMark, UseExecutionMarkResult } from "./types.cjs";
2
+ import useExecutionMark from "./useExecutionMark.cjs";
3
+ export { type ExecutionMark, type UseExecutionMarkResult, useExecutionMark as default, useExecutionMark };
@@ -0,0 +1,3 @@
1
+ import { ExecutionMark, UseExecutionMarkResult } from "./types.mjs";
2
+ import useExecutionMark from "./useExecutionMark.mjs";
3
+ export { type ExecutionMark, type UseExecutionMarkResult, useExecutionMark as default, useExecutionMark };
@@ -0,0 +1,3 @@
1
+ import useExecutionMark from "./useExecutionMark.mjs";
2
+
3
+ export { useExecutionMark as default, useExecutionMark };
@@ -0,0 +1 @@
1
+ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
@@ -0,0 +1,15 @@
1
+ //#region src/hooks/useExecutionMark/types.d.ts
2
+ /**
3
+ * payload の無い Execution Request(実行の印)
4
+ *
5
+ * 実体は数値。Execution Request プロパティ(xxxAt)に渡し、値が変わるたびに1回の要求とみなす。
6
+ * **要求のたびに、前回と異なる値にすること**(同じ値を続けて渡しても、2回目は要求とみなさない)。
7
+ * `markAt()` で作ると、呼ぶたびに異なる値になる。`useExecutionMark` を使うと、`markAt()` で作った値と、要求する関数を受け取れる。
8
+ * `0` は「まだ要求していない」を表し、実行しない。
9
+ */
10
+ export type ExecutionMark = number;
11
+ /**
12
+ * useExecutionMark の戻り値
13
+ */
14
+ export type UseExecutionMarkResult = readonly [mark: ExecutionMark, execute: () => void];
15
+ //#endregion
@@ -0,0 +1,15 @@
1
+ //#region src/hooks/useExecutionMark/types.d.ts
2
+ /**
3
+ * payload の無い Execution Request(実行の印)
4
+ *
5
+ * 実体は数値。Execution Request プロパティ(xxxAt)に渡し、値が変わるたびに1回の要求とみなす。
6
+ * **要求のたびに、前回と異なる値にすること**(同じ値を続けて渡しても、2回目は要求とみなさない)。
7
+ * `markAt()` で作ると、呼ぶたびに異なる値になる。`useExecutionMark` を使うと、`markAt()` で作った値と、要求する関数を受け取れる。
8
+ * `0` は「まだ要求していない」を表し、実行しない。
9
+ */
10
+ export type ExecutionMark = number;
11
+ /**
12
+ * useExecutionMark の戻り値
13
+ */
14
+ export type UseExecutionMarkResult = readonly [mark: ExecutionMark, execute: () => void];
15
+ //#endregion
@@ -0,0 +1 @@
1
+ export { };
@@ -0,0 +1,29 @@
1
+ Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
2
+ const require_utils_markAt_markAt = require("../../utils/markAt/markAt.cjs");
3
+ let react = require("react");
4
+
5
+ //#region src/hooks/useExecutionMark/useExecutionMark.ts
6
+ /**
7
+ * payload の無い Execution Request(実行の印)と、要求する関数を返すフック
8
+ *
9
+ * `useExecutionAt` の payload を持たない版。命令的なコンポーネントの `focus()`・`reset()` のような、
10
+ * 引数の要らないメソッドを、プロパティを通じて実行する場合に使う。
11
+ *
12
+ * - 印は初期状態では `0`(まだ要求していない)で、`execute` を呼ぶたびに `markAt()` で作った新しい値になる
13
+ * - `execute` の参照は常に同じ
14
+ *
15
+ * @returns [mark, execute]
16
+ * @example
17
+ * const [focusAt, focus] = useExecutionMark();
18
+ * <button onClick={focus}>Focus</button>
19
+ * <WrappedImperativeComponent focusAt={focusAt} />
20
+ */
21
+ function useExecutionMark() {
22
+ const [mark, setMark] = (0, react.useState)(0);
23
+ return [mark, (0, react.useCallback)(() => {
24
+ setMark(require_utils_markAt_markAt.default());
25
+ }, [])];
26
+ }
27
+
28
+ //#endregion
29
+ exports.default = useExecutionMark;
@@ -0,0 +1,19 @@
1
+ import { UseExecutionMarkResult } from "./types.cjs";
2
+ //#region src/hooks/useExecutionMark/useExecutionMark.d.ts
3
+ /**
4
+ * payload の無い Execution Request(実行の印)と、要求する関数を返すフック
5
+ *
6
+ * `useExecutionAt` の payload を持たない版。命令的なコンポーネントの `focus()`・`reset()` のような、
7
+ * 引数の要らないメソッドを、プロパティを通じて実行する場合に使う。
8
+ *
9
+ * - 印は初期状態では `0`(まだ要求していない)で、`execute` を呼ぶたびに `markAt()` で作った新しい値になる
10
+ * - `execute` の参照は常に同じ
11
+ *
12
+ * @returns [mark, execute]
13
+ * @example
14
+ * const [focusAt, focus] = useExecutionMark();
15
+ * <button onClick={focus}>Focus</button>
16
+ * <WrappedImperativeComponent focusAt={focusAt} />
17
+ */
18
+ declare function useExecutionMark(): UseExecutionMarkResult;
19
+ export = useExecutionMark;
@@ -0,0 +1,19 @@
1
+ import { UseExecutionMarkResult } from "./types.mjs";
2
+ //#region src/hooks/useExecutionMark/useExecutionMark.d.ts
3
+ /**
4
+ * payload の無い Execution Request(実行の印)と、要求する関数を返すフック
5
+ *
6
+ * `useExecutionAt` の payload を持たない版。命令的なコンポーネントの `focus()`・`reset()` のような、
7
+ * 引数の要らないメソッドを、プロパティを通じて実行する場合に使う。
8
+ *
9
+ * - 印は初期状態では `0`(まだ要求していない)で、`execute` を呼ぶたびに `markAt()` で作った新しい値になる
10
+ * - `execute` の参照は常に同じ
11
+ *
12
+ * @returns [mark, execute]
13
+ * @example
14
+ * const [focusAt, focus] = useExecutionMark();
15
+ * <button onClick={focus}>Focus</button>
16
+ * <WrappedImperativeComponent focusAt={focusAt} />
17
+ */
18
+ export default function useExecutionMark(): UseExecutionMarkResult;
19
+ //#endregion
@@ -0,0 +1,28 @@
1
+ import markAt from "../../utils/markAt/markAt.mjs";
2
+ import { useCallback, useState } from "react";
3
+
4
+ //#region src/hooks/useExecutionMark/useExecutionMark.ts
5
+ /**
6
+ * payload の無い Execution Request(実行の印)と、要求する関数を返すフック
7
+ *
8
+ * `useExecutionAt` の payload を持たない版。命令的なコンポーネントの `focus()`・`reset()` のような、
9
+ * 引数の要らないメソッドを、プロパティを通じて実行する場合に使う。
10
+ *
11
+ * - 印は初期状態では `0`(まだ要求していない)で、`execute` を呼ぶたびに `markAt()` で作った新しい値になる
12
+ * - `execute` の参照は常に同じ
13
+ *
14
+ * @returns [mark, execute]
15
+ * @example
16
+ * const [focusAt, focus] = useExecutionMark();
17
+ * <button onClick={focus}>Focus</button>
18
+ * <WrappedImperativeComponent focusAt={focusAt} />
19
+ */
20
+ function useExecutionMark() {
21
+ const [mark, setMark] = useState(0);
22
+ return [mark, useCallback(() => {
23
+ setMark(markAt());
24
+ }, [])];
25
+ }
26
+
27
+ //#endregion
28
+ export { useExecutionMark as default };
package/index.cjs CHANGED
@@ -1,13 +1,16 @@
1
1
  Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
2
+ const require_hooks_useLatestRef_useLatestRef = require("./hooks/useLatestRef/useLatestRef.cjs");
3
+ const require_hooks_useChangeEffect_useChangeEffect = require("./hooks/useChangeEffect/useChangeEffect.cjs");
4
+ const require_hooks_useChangeLayoutEffect_useChangeLayoutEffect = require("./hooks/useChangeLayoutEffect/useChangeLayoutEffect.cjs");
2
5
  const require_utils_setRefCurrent_setRefCurrent = require("./utils/setRefCurrent/setRefCurrent.cjs");
3
6
  const require_hooks_useStableLength_useStableLength = require("./hooks/useStableLength/useStableLength.cjs");
4
7
  const require_hooks_useCombinedRefs_useCombinedRefs = require("./hooks/useCombinedRefs/useCombinedRefs.cjs");
5
8
  const require_hooks_useConstant_useConstant = require("./hooks/useConstant/useConstant.cjs");
6
9
  const require_utils_markAt_markAt = require("./utils/markAt/markAt.cjs");
7
10
  const require_hooks_useExecutionAt_useExecutionAt = require("./hooks/useExecutionAt/useExecutionAt.cjs");
8
- const require_hooks_useLatestRef_useLatestRef = require("./hooks/useLatestRef/useLatestRef.cjs");
9
11
  const require_hooks_useExecutionEffect_useExecutionEffect = require("./hooks/useExecutionEffect/useExecutionEffect.cjs");
10
12
  const require_hooks_useExecutionLayoutEffect_useExecutionLayoutEffect = require("./hooks/useExecutionLayoutEffect/useExecutionLayoutEffect.cjs");
13
+ const require_hooks_useExecutionMark_useExecutionMark = require("./hooks/useExecutionMark/useExecutionMark.cjs");
11
14
  const require_hooks_useIsHydrated_useIsHydrated = require("./hooks/useIsHydrated/useIsHydrated.cjs");
12
15
  const require_hooks_useIsMounted_useIsMounted = require("./hooks/useIsMounted/useIsMounted.cjs");
13
16
  const require_hooks_usePreviousValue_usePreviousValue = require("./hooks/usePreviousValue/usePreviousValue.cjs");
@@ -34,11 +37,14 @@ exports.markAt = require_utils_markAt_markAt.default;
34
37
  exports.setRefCurrent = require_utils_setRefCurrent_setRefCurrent.default;
35
38
  exports.transformContent = require_utils_transformContent_transformContent.default;
36
39
  exports.transformElement = require_utils_transformElement_transformElement.default;
40
+ exports.useChangeEffect = require_hooks_useChangeEffect_useChangeEffect.default;
41
+ exports.useChangeLayoutEffect = require_hooks_useChangeLayoutEffect_useChangeLayoutEffect.default;
37
42
  exports.useCombinedRefs = require_hooks_useCombinedRefs_useCombinedRefs.default;
38
43
  exports.useConstant = require_hooks_useConstant_useConstant.default;
39
44
  exports.useExecutionAt = require_hooks_useExecutionAt_useExecutionAt.default;
40
45
  exports.useExecutionEffect = require_hooks_useExecutionEffect_useExecutionEffect.default;
41
46
  exports.useExecutionLayoutEffect = require_hooks_useExecutionLayoutEffect_useExecutionLayoutEffect.default;
47
+ exports.useExecutionMark = require_hooks_useExecutionMark_useExecutionMark.default;
42
48
  exports.useIsHydrated = require_hooks_useIsHydrated_useIsHydrated.default;
43
49
  exports.useIsMounted = require_hooks_useIsMounted_useIsMounted.default;
44
50
  exports.useLatestRef = require_hooks_useLatestRef_useLatestRef.default;
package/index.d.cts CHANGED
@@ -1,7 +1,12 @@
1
+ import { ChangeDependencies } from "./hooks/useChangeEffect/types.cjs";
1
2
  import { MarkAtResult } from "./utils/markAt/types.cjs";
2
3
  import markAt from "./utils/markAt/markAt.cjs";
3
4
  import { ExecutionFunction, ExecutionRequest, UseExecutionAtOptions, UseExecutionAtResult } from "./hooks/useExecutionAt/types.cjs";
4
5
  import useExecutionAt from "./hooks/useExecutionAt/useExecutionAt.cjs";
6
+ import { ExecutionMark, UseExecutionMarkResult } from "./hooks/useExecutionMark/types.cjs";
7
+ import useExecutionMark from "./hooks/useExecutionMark/useExecutionMark.cjs";
8
+ import useChangeEffect from "./hooks/useChangeEffect/useChangeEffect.cjs";
9
+ import useChangeLayoutEffect from "./hooks/useChangeLayoutEffect/useChangeLayoutEffect.cjs";
5
10
  import useCombinedRefs from "./hooks/useCombinedRefs/useCombinedRefs.cjs";
6
11
  import useConstant from "./hooks/useConstant/useConstant.cjs";
7
12
  import useExecutionEffect from "./hooks/useExecutionEffect/useExecutionEffect.cjs";
@@ -29,4 +34,4 @@ import setRefCurrent from "./utils/setRefCurrent/setRefCurrent.cjs";
29
34
  import transformContent from "./utils/transformContent/transformContent.cjs";
30
35
  import transformElement from "./utils/transformElement/transformElement.cjs";
31
36
  import "./utils/index.cjs";
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 };
37
+ export { type AppliedProps, type CSSPropertiesWithVars, type ChangeDependencies, type ExecutionFunction, type ExecutionMark, type ExecutionRequest, type ExtendableProps, type LatestRef, type MarkAtResult, type SkippedDefaults, type UseExecutionAtOptions, type UseExecutionAtResult, type UseExecutionMarkResult, type UsePreviousValueOptions, applyDefaultProps, ensureComponent, extendElement, forEachContent, forEachElement, getComponentName, markAt, setRefCurrent, transformContent, transformElement, useChangeEffect, useChangeLayoutEffect, useCombinedRefs, useConstant, useExecutionAt, useExecutionEffect, useExecutionLayoutEffect, useExecutionMark, useIsHydrated, useIsMounted, useLatestRef, usePreviousValue, useRerender, useStableCallback, useStableLength };
package/index.d.mts CHANGED
@@ -1,7 +1,12 @@
1
+ import { ChangeDependencies } from "./hooks/useChangeEffect/types.mjs";
1
2
  import { MarkAtResult } from "./utils/markAt/types.mjs";
2
3
  import markAt from "./utils/markAt/markAt.mjs";
3
4
  import { ExecutionFunction, ExecutionRequest, UseExecutionAtOptions, UseExecutionAtResult } from "./hooks/useExecutionAt/types.mjs";
4
5
  import useExecutionAt from "./hooks/useExecutionAt/useExecutionAt.mjs";
6
+ import { ExecutionMark, UseExecutionMarkResult } from "./hooks/useExecutionMark/types.mjs";
7
+ import useExecutionMark from "./hooks/useExecutionMark/useExecutionMark.mjs";
8
+ import useChangeEffect from "./hooks/useChangeEffect/useChangeEffect.mjs";
9
+ import useChangeLayoutEffect from "./hooks/useChangeLayoutEffect/useChangeLayoutEffect.mjs";
5
10
  import useCombinedRefs from "./hooks/useCombinedRefs/useCombinedRefs.mjs";
6
11
  import useConstant from "./hooks/useConstant/useConstant.mjs";
7
12
  import useExecutionEffect from "./hooks/useExecutionEffect/useExecutionEffect.mjs";
@@ -29,4 +34,4 @@ import setRefCurrent from "./utils/setRefCurrent/setRefCurrent.mjs";
29
34
  import transformContent from "./utils/transformContent/transformContent.mjs";
30
35
  import transformElement from "./utils/transformElement/transformElement.mjs";
31
36
  import "./utils/index.mjs";
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 };
37
+ export { type AppliedProps, type CSSPropertiesWithVars, type ChangeDependencies, type ExecutionFunction, type ExecutionMark, type ExecutionRequest, type ExtendableProps, type LatestRef, type MarkAtResult, type SkippedDefaults, type UseExecutionAtOptions, type UseExecutionAtResult, type UseExecutionMarkResult, type UsePreviousValueOptions, applyDefaultProps, ensureComponent, extendElement, forEachContent, forEachElement, getComponentName, markAt, setRefCurrent, transformContent, transformElement, useChangeEffect, useChangeLayoutEffect, useCombinedRefs, useConstant, useExecutionAt, useExecutionEffect, useExecutionLayoutEffect, useExecutionMark, useIsHydrated, useIsMounted, useLatestRef, usePreviousValue, useRerender, useStableCallback, useStableLength };
package/index.mjs CHANGED
@@ -1,12 +1,15 @@
1
+ import useLatestRef from "./hooks/useLatestRef/useLatestRef.mjs";
2
+ import useChangeEffect from "./hooks/useChangeEffect/useChangeEffect.mjs";
3
+ import useChangeLayoutEffect from "./hooks/useChangeLayoutEffect/useChangeLayoutEffect.mjs";
1
4
  import setRefCurrent from "./utils/setRefCurrent/setRefCurrent.mjs";
2
5
  import useStableLength from "./hooks/useStableLength/useStableLength.mjs";
3
6
  import useCombinedRefs from "./hooks/useCombinedRefs/useCombinedRefs.mjs";
4
7
  import useConstant from "./hooks/useConstant/useConstant.mjs";
5
8
  import markAt from "./utils/markAt/markAt.mjs";
6
9
  import useExecutionAt from "./hooks/useExecutionAt/useExecutionAt.mjs";
7
- import useLatestRef from "./hooks/useLatestRef/useLatestRef.mjs";
8
10
  import useExecutionEffect from "./hooks/useExecutionEffect/useExecutionEffect.mjs";
9
11
  import useExecutionLayoutEffect from "./hooks/useExecutionLayoutEffect/useExecutionLayoutEffect.mjs";
12
+ import useExecutionMark from "./hooks/useExecutionMark/useExecutionMark.mjs";
10
13
  import useIsHydrated from "./hooks/useIsHydrated/useIsHydrated.mjs";
11
14
  import useIsMounted from "./hooks/useIsMounted/useIsMounted.mjs";
12
15
  import usePreviousValue from "./hooks/usePreviousValue/usePreviousValue.mjs";
@@ -23,4 +26,4 @@ import transformContent from "./utils/transformContent/transformContent.mjs";
23
26
  import transformElement from "./utils/transformElement/transformElement.mjs";
24
27
  import "./utils/index.mjs";
25
28
 
26
- export { applyDefaultProps, ensureComponent, extendElement, forEachContent, forEachElement, getComponentName, markAt, setRefCurrent, transformContent, transformElement, useCombinedRefs, useConstant, useExecutionAt, useExecutionEffect, useExecutionLayoutEffect, useIsHydrated, useIsMounted, useLatestRef, usePreviousValue, useRerender, useStableCallback, useStableLength };
29
+ export { applyDefaultProps, ensureComponent, extendElement, forEachContent, forEachElement, getComponentName, markAt, setRefCurrent, transformContent, transformElement, useChangeEffect, useChangeLayoutEffect, useCombinedRefs, useConstant, useExecutionAt, useExecutionEffect, useExecutionLayoutEffect, useExecutionMark, useIsHydrated, useIsMounted, useLatestRef, usePreviousValue, useRerender, useStableCallback, useStableLength };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@fringeworks/react-utils",
3
- "version": "0.10.0",
3
+ "version": "0.11.0",
4
4
  "description": "A library some will find handy, providing utilities for React.",
5
5
  "keywords": [
6
6
  "react"
@@ -34,6 +34,26 @@
34
34
  "default": "./hooks/index.cjs"
35
35
  }
36
36
  },
37
+ "./hooks/useChangeEffect": {
38
+ "import": {
39
+ "types": "./hooks/useChangeEffect/index.d.mts",
40
+ "default": "./hooks/useChangeEffect/index.mjs"
41
+ },
42
+ "require": {
43
+ "types": "./hooks/useChangeEffect/index.d.cts",
44
+ "default": "./hooks/useChangeEffect/index.cjs"
45
+ }
46
+ },
47
+ "./hooks/useChangeLayoutEffect": {
48
+ "import": {
49
+ "types": "./hooks/useChangeLayoutEffect/index.d.mts",
50
+ "default": "./hooks/useChangeLayoutEffect/index.mjs"
51
+ },
52
+ "require": {
53
+ "types": "./hooks/useChangeLayoutEffect/index.d.cts",
54
+ "default": "./hooks/useChangeLayoutEffect/index.cjs"
55
+ }
56
+ },
37
57
  "./hooks/useCombinedRefs": {
38
58
  "import": {
39
59
  "types": "./hooks/useCombinedRefs/index.d.mts",
@@ -84,6 +104,16 @@
84
104
  "default": "./hooks/useExecutionLayoutEffect/index.cjs"
85
105
  }
86
106
  },
107
+ "./hooks/useExecutionMark": {
108
+ "import": {
109
+ "types": "./hooks/useExecutionMark/index.d.mts",
110
+ "default": "./hooks/useExecutionMark/index.mjs"
111
+ },
112
+ "require": {
113
+ "types": "./hooks/useExecutionMark/index.d.cts",
114
+ "default": "./hooks/useExecutionMark/index.cjs"
115
+ }
116
+ },
87
117
  "./hooks/useIsHydrated": {
88
118
  "import": {
89
119
  "types": "./hooks/useIsHydrated/index.d.mts",
@@ -1,5 +1,5 @@
1
1
  Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
2
- const require__helpers__traverseChildren = require("../../_helpers/_traverseChildren.cjs");
2
+ const require__internal__traverseChildren = require("../../_internal/_traverseChildren.cjs");
3
3
 
4
4
  //#region src/utils/forEachContent/forEachContent.ts
5
5
  /**
@@ -8,7 +8,7 @@ const require__helpers__traverseChildren = require("../../_helpers/_traverseChil
8
8
  * @param callback コールバック。indexはFragmentをまたいだ連番
9
9
  */
10
10
  function forEachContent(children, callback) {
11
- require__helpers__traverseChildren.default(children, require__helpers__traverseChildren._isContent, callback);
11
+ require__internal__traverseChildren.default(children, require__internal__traverseChildren._isContent, callback);
12
12
  }
13
13
 
14
14
  //#endregion
@@ -1,4 +1,4 @@
1
- import _traverseChildren, { _isContent } from "../../_helpers/_traverseChildren.mjs";
1
+ import _traverseChildren, { _isContent } from "../../_internal/_traverseChildren.mjs";
2
2
 
3
3
  //#region src/utils/forEachContent/forEachContent.ts
4
4
  /**
@@ -1,5 +1,5 @@
1
1
  Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
2
- const require__helpers__traverseChildren = require("../../_helpers/_traverseChildren.cjs");
2
+ const require__internal__traverseChildren = require("../../_internal/_traverseChildren.cjs");
3
3
  let react = require("react");
4
4
 
5
5
  //#region src/utils/forEachElement/forEachElement.ts
@@ -9,7 +9,7 @@ let react = require("react");
9
9
  * @param callback コールバック。indexはFragmentをまたいだ連番
10
10
  */
11
11
  function forEachElement(children, callback) {
12
- require__helpers__traverseChildren.default(children, react.isValidElement, callback);
12
+ require__internal__traverseChildren.default(children, react.isValidElement, callback);
13
13
  }
14
14
 
15
15
  //#endregion
@@ -1,4 +1,4 @@
1
- import _traverseChildren from "../../_helpers/_traverseChildren.mjs";
1
+ import _traverseChildren from "../../_internal/_traverseChildren.mjs";
2
2
  import { isValidElement } from "react";
3
3
 
4
4
  //#region src/utils/forEachElement/forEachElement.ts
@@ -1,3 +1,6 @@
1
1
  //#region src/utils/markAt/types.d.ts
2
+ /**
3
+ * 一意な値
4
+ */
2
5
  export type MarkAtResult = number;
3
6
  //#endregion
@@ -1,3 +1,6 @@
1
1
  //#region src/utils/markAt/types.d.ts
2
+ /**
3
+ * 一意な値
4
+ */
2
5
  export type MarkAtResult = number;
3
6
  //#endregion
@@ -1,5 +1,5 @@
1
1
  Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
2
- const require__helpers__traverseChildren = require("../../_helpers/_traverseChildren.cjs");
2
+ const require__internal__traverseChildren = require("../../_internal/_traverseChildren.cjs");
3
3
 
4
4
  //#region src/utils/transformContent/transformContent.ts
5
5
  /**
@@ -15,7 +15,7 @@ const require__helpers__traverseChildren = require("../../_helpers/_traverseChil
15
15
  */
16
16
  function transformContent(children, callback) {
17
17
  const result = [];
18
- require__helpers__traverseChildren.default(children, require__helpers__traverseChildren._isContent, callback, (value) => result.push(value));
18
+ require__internal__traverseChildren.default(children, require__internal__traverseChildren._isContent, callback, (value) => result.push(value));
19
19
  return result;
20
20
  }
21
21
 
@@ -1,4 +1,4 @@
1
- import _traverseChildren, { _isContent } from "../../_helpers/_traverseChildren.mjs";
1
+ import _traverseChildren, { _isContent } from "../../_internal/_traverseChildren.mjs";
2
2
 
3
3
  //#region src/utils/transformContent/transformContent.ts
4
4
  /**
@@ -1,5 +1,5 @@
1
1
  Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
2
- const require__helpers__traverseChildren = require("../../_helpers/_traverseChildren.cjs");
2
+ const require__internal__traverseChildren = require("../../_internal/_traverseChildren.cjs");
3
3
  let react = require("react");
4
4
 
5
5
  //#region src/utils/transformElement/transformElement.ts
@@ -16,7 +16,7 @@ let react = require("react");
16
16
  */
17
17
  function transformElement(children, callback) {
18
18
  const result = [];
19
- require__helpers__traverseChildren.default(children, react.isValidElement, callback, (value) => result.push(value));
19
+ require__internal__traverseChildren.default(children, react.isValidElement, callback, (value) => result.push(value));
20
20
  return result;
21
21
  }
22
22
 
@@ -1,4 +1,4 @@
1
- import _traverseChildren from "../../_helpers/_traverseChildren.mjs";
1
+ import _traverseChildren from "../../_internal/_traverseChildren.mjs";
2
2
  import { isValidElement } from "react";
3
3
 
4
4
  //#region src/utils/transformElement/transformElement.ts
@@ -1,36 +0,0 @@
1
- import useConstant from "../hooks/useConstant/useConstant.mjs";
2
- import "../hooks/useConstant/index.mjs";
3
- import markAt from "../utils/markAt/markAt.mjs";
4
- import useLatestRef from "../hooks/useLatestRef/useLatestRef.mjs";
5
- import "../hooks/useLatestRef/index.mjs";
6
- import { useCallback, useRef } from "react";
7
-
8
- //#region src/_helpers/_useExecutionHandler.ts
9
- /**
10
- * Execution Request を受け取り、要求があれば処理を実行する関数を返すフック
11
- *
12
- * `useExecutionEffect`・`useExecutionLayoutEffect` に共通の処理。返す関数をエフェクトで呼ぶ。
13
- *
14
- * - 初回のレンダリングで `markAt()` の値を基準にし、`at` がそれより大きい要求だけを実行する。
15
- * `at` は `markAt()` で単調に増えるため、マウントより前に出た要求は実行しない
16
- * - 一度実行した要求は、エフェクトが再実行されても(StrictMode など)実行しない
17
- * - コールバックは最新のものを呼ぶ
18
- *
19
- * @param request 受け取った Execution Request。undefined の場合は要求なし
20
- * @param callback 要求があったときに実行する処理
21
- * @returns エフェクトで呼ぶ関数。参照は request が変わったときだけ変わる
22
- */
23
- function useExecutionHandler(request, callback) {
24
- const callbackRef = useLatestRef(callback);
25
- const baseline = useConstant(markAt);
26
- const handledAtRef = useRef(baseline);
27
- return useCallback(() => {
28
- if (request && request.at > handledAtRef.current) {
29
- handledAtRef.current = request.at;
30
- callbackRef.current(request.payload);
31
- }
32
- }, [request, callbackRef]);
33
- }
34
-
35
- //#endregion
36
- export { useExecutionHandler as default };