@fringeworks/react-utils 0.10.0 → 0.11.0

package/{_helpers → _internal}/_useExecutionHandler.d.cts

@@ -1,12 +1,14 @@
 import { ExecutionRequest } from "../hooks/useExecutionAt/types.cjs";
-//#region src/_helpers/_useExecutionHandler.d.ts
+import { ExecutionMark } from "../hooks/useExecutionMark/types.cjs";
+//#region src/_internal/_useExecutionHandler.d.ts
 /**
  * Execution Request を受け取り、要求があれば処理を実行する関数を返すフック
  *
  * `useExecutionEffect`・`useExecutionLayoutEffect` に共通の処理。返す関数をエフェクトで呼ぶ。
  *
- * - 初回のレンダリングで `markAt()` の値を基準にし、`at` がそれより大きい要求だけを実行する。
- *   `at` は `markAt()` で単調に増えるため、マウントより前に出た要求は実行しない
+ * - 初回のレンダリングで受け取った印（`at`、または ExecutionMark の値）を基準にし、印が変わったときだけ実行する。
+ *   マウントしたときに渡されていた要求は実行しない。印は `markAt()` で作ったものでなくてよい（カウンターなども使える）
+ * - 印が `0`（まだ要求していない）や undefined（要求なし）の場合は実行しない
  * - 一度実行した要求は、エフェクトが再実行されても（StrictMode など）実行しない
  * - コールバックは最新のものを呼ぶ
  *
@@ -14,5 +16,5 @@ import { ExecutionRequest } from "../hooks/useExecutionAt/types.cjs";
  * @param callback 要求があったときに実行する処理
  * @returns エフェクトで呼ぶ関数。参照は request が変わったときだけ変わる
  */
-declare function useExecutionHandler<P>(request: ExecutionRequest<P> | undefined, callback: (payload: P | undefined) => void): () => void;
+declare function useExecutionHandler<P>(request: ExecutionRequest<P> | ExecutionMark | undefined, callback: (payload: P | undefined) => void): () => void;
 export = useExecutionHandler;

package/{_helpers → _internal}/_useExecutionHandler.d.mts

@@ -1,12 +1,14 @@
 import { ExecutionRequest } from "../hooks/useExecutionAt/types.mjs";
-//#region src/_helpers/_useExecutionHandler.d.ts
+import { ExecutionMark } from "../hooks/useExecutionMark/types.mjs";
+//#region src/_internal/_useExecutionHandler.d.ts
 /**
  * Execution Request を受け取り、要求があれば処理を実行する関数を返すフック
  *
  * `useExecutionEffect`・`useExecutionLayoutEffect` に共通の処理。返す関数をエフェクトで呼ぶ。
  *
- * - 初回のレンダリングで `markAt()` の値を基準にし、`at` がそれより大きい要求だけを実行する。
- *   `at` は `markAt()` で単調に増えるため、マウントより前に出た要求は実行しない
+ * - 初回のレンダリングで受け取った印（`at`、または ExecutionMark の値）を基準にし、印が変わったときだけ実行する。
+ *   マウントしたときに渡されていた要求は実行しない。印は `markAt()` で作ったものでなくてよい（カウンターなども使える）
+ * - 印が `0`（まだ要求していない）や undefined（要求なし）の場合は実行しない
  * - 一度実行した要求は、エフェクトが再実行されても（StrictMode など）実行しない
  * - コールバックは最新のものを呼ぶ
  *
@@ -14,5 +16,5 @@ import { ExecutionRequest } from "../hooks/useExecutionAt/types.mjs";
  * @param callback 要求があったときに実行する処理
  * @returns エフェクトで呼ぶ関数。参照は request が変わったときだけ変わる
  */
-export default function useExecutionHandler<P>(request: ExecutionRequest<P> | undefined, callback: (payload: P | undefined) => void): () => void;
+export default function useExecutionHandler<P>(request: ExecutionRequest<P> | ExecutionMark | undefined, callback: (payload: P | undefined) => void): () => void;
 //#endregion

package/_internal/_useExecutionHandler.mjs

@@ -0,0 +1,37 @@
+import useLatestRef from "../hooks/useLatestRef/useLatestRef.mjs";
+import "../hooks/useLatestRef/index.mjs";
+import { useCallback, useRef } from "react";
+
+//#region src/_internal/_useExecutionHandler.ts
+/**
+* 受け取った要求の印（`at`、または ExecutionMark の値）を返す
+*/
+const getMark = (request) => typeof request === "number" ? request : request?.at;
+/**
+* Execution Request を受け取り、要求があれば処理を実行する関数を返すフック
+*
+* `useExecutionEffect`・`useExecutionLayoutEffect` に共通の処理。返す関数をエフェクトで呼ぶ。
+*
+* - 初回のレンダリングで受け取った印（`at`、または ExecutionMark の値）を基準にし、印が変わったときだけ実行する。
+*   マウントしたときに渡されていた要求は実行しない。印は `markAt()` で作ったものでなくてよい（カウンターなども使える）
+* - 印が `0`（まだ要求していない）や undefined（要求なし）の場合は実行しない
+* - 一度実行した要求は、エフェクトが再実行されても（StrictMode など）実行しない
+* - コールバックは最新のものを呼ぶ
+*
+* @param request 受け取った Execution Request。undefined の場合は要求なし
+* @param callback 要求があったときに実行する処理
+* @returns エフェクトで呼ぶ関数。参照は request が変わったときだけ変わる
+*/
+function useExecutionHandler(request, callback) {
+	const callbackRef = useLatestRef(callback);
+	const handledRef = useRef(getMark(request));
+	return useCallback(() => {
+		const mark = getMark(request);
+		if (mark === void 0 || mark === 0 || Object.is(mark, handledRef.current)) return;
+		handledRef.current = mark;
+		callbackRef.current(typeof request === "number" ? void 0 : request?.payload);
+	}, [request, callbackRef]);
+}
+
+//#endregion
+export { useExecutionHandler as default };

package/hooks/index.cjs

@@ -1,4 +1,10 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+const require_hooks_useLatestRef_useLatestRef = require("./useLatestRef/useLatestRef.cjs");
+require("./useLatestRef/index.cjs");
+const require_hooks_useChangeEffect_useChangeEffect = require("./useChangeEffect/useChangeEffect.cjs");
+require("./useChangeEffect/index.cjs");
+const require_hooks_useChangeLayoutEffect_useChangeLayoutEffect = require("./useChangeLayoutEffect/useChangeLayoutEffect.cjs");
+require("./useChangeLayoutEffect/index.cjs");
 const require_hooks_useStableLength_useStableLength = require("./useStableLength/useStableLength.cjs");
 require("./useStableLength/index.cjs");
 const require_hooks_useCombinedRefs_useCombinedRefs = require("./useCombinedRefs/useCombinedRefs.cjs");
@@ -7,12 +13,12 @@ const require_hooks_useConstant_useConstant = require("./useConstant/useConstant
 require("./useConstant/index.cjs");
 const require_hooks_useExecutionAt_useExecutionAt = require("./useExecutionAt/useExecutionAt.cjs");
 require("./useExecutionAt/index.cjs");
-const require_hooks_useLatestRef_useLatestRef = require("./useLatestRef/useLatestRef.cjs");
-require("./useLatestRef/index.cjs");
 const require_hooks_useExecutionEffect_useExecutionEffect = require("./useExecutionEffect/useExecutionEffect.cjs");
 require("./useExecutionEffect/index.cjs");
 const require_hooks_useExecutionLayoutEffect_useExecutionLayoutEffect = require("./useExecutionLayoutEffect/useExecutionLayoutEffect.cjs");
 require("./useExecutionLayoutEffect/index.cjs");
+const require_hooks_useExecutionMark_useExecutionMark = require("./useExecutionMark/useExecutionMark.cjs");
+require("./useExecutionMark/index.cjs");
 const require_hooks_useIsHydrated_useIsHydrated = require("./useIsHydrated/useIsHydrated.cjs");
 require("./useIsHydrated/index.cjs");
 const require_hooks_useIsMounted_useIsMounted = require("./useIsMounted/useIsMounted.cjs");
@@ -24,11 +30,14 @@ require("./useRerender/index.cjs");
 const require_hooks_useStableCallback_useStableCallback = require("./useStableCallback/useStableCallback.cjs");
 require("./useStableCallback/index.cjs");
 
+exports.useChangeEffect = require_hooks_useChangeEffect_useChangeEffect.default;
+exports.useChangeLayoutEffect = require_hooks_useChangeLayoutEffect_useChangeLayoutEffect.default;
 exports.useCombinedRefs = require_hooks_useCombinedRefs_useCombinedRefs.default;
 exports.useConstant = require_hooks_useConstant_useConstant.default;
 exports.useExecutionAt = require_hooks_useExecutionAt_useExecutionAt.default;
 exports.useExecutionEffect = require_hooks_useExecutionEffect_useExecutionEffect.default;
 exports.useExecutionLayoutEffect = require_hooks_useExecutionLayoutEffect_useExecutionLayoutEffect.default;
+exports.useExecutionMark = require_hooks_useExecutionMark_useExecutionMark.default;
 exports.useIsHydrated = require_hooks_useIsHydrated_useIsHydrated.default;
 exports.useIsMounted = require_hooks_useIsMounted_useIsMounted.default;
 exports.useLatestRef = require_hooks_useLatestRef_useLatestRef.default;

package/hooks/index.d.cts

@@ -1,5 +1,10 @@
+import { ChangeDependencies } from "./useChangeEffect/types.cjs";
 import { ExecutionFunction, ExecutionRequest, UseExecutionAtOptions, UseExecutionAtResult } from "./useExecutionAt/types.cjs";
 import useExecutionAt from "./useExecutionAt/useExecutionAt.cjs";
+import { ExecutionMark, UseExecutionMarkResult } from "./useExecutionMark/types.cjs";
+import useExecutionMark from "./useExecutionMark/useExecutionMark.cjs";
+import useChangeEffect from "./useChangeEffect/useChangeEffect.cjs";
+import useChangeLayoutEffect from "./useChangeLayoutEffect/useChangeLayoutEffect.cjs";
 import useCombinedRefs from "./useCombinedRefs/useCombinedRefs.cjs";
 import "./useCombinedRefs/index.cjs";
 import useConstant from "./useConstant/useConstant.cjs";
@@ -14,4 +19,4 @@ import usePreviousValue from "./usePreviousValue/usePreviousValue.cjs";
 import useRerender from "./useRerender/useRerender.cjs";
 import useStableCallback from "./useStableCallback/useStableCallback.cjs";
 import useStableLength from "./useStableLength/useStableLength.cjs";
-export { type ExecutionFunction, type ExecutionRequest, type LatestRef, type UseExecutionAtOptions, type UseExecutionAtResult, type UsePreviousValueOptions, useCombinedRefs, useConstant, useExecutionAt, useExecutionEffect, useExecutionLayoutEffect, useIsHydrated, useIsMounted, useLatestRef, usePreviousValue, useRerender, useStableCallback, useStableLength };
+export { type ChangeDependencies, type ExecutionFunction, type ExecutionMark, type ExecutionRequest, type LatestRef, type UseExecutionAtOptions, type UseExecutionAtResult, type UseExecutionMarkResult, type UsePreviousValueOptions, useChangeEffect, useChangeLayoutEffect, useCombinedRefs, useConstant, useExecutionAt, useExecutionEffect, useExecutionLayoutEffect, useExecutionMark, useIsHydrated, useIsMounted, useLatestRef, usePreviousValue, useRerender, useStableCallback, useStableLength };

package/hooks/index.d.mts

@@ -1,5 +1,10 @@
+import { ChangeDependencies } from "./useChangeEffect/types.mjs";
 import { ExecutionFunction, ExecutionRequest, UseExecutionAtOptions, UseExecutionAtResult } from "./useExecutionAt/types.mjs";
 import useExecutionAt from "./useExecutionAt/useExecutionAt.mjs";
+import { ExecutionMark, UseExecutionMarkResult } from "./useExecutionMark/types.mjs";
+import useExecutionMark from "./useExecutionMark/useExecutionMark.mjs";
+import useChangeEffect from "./useChangeEffect/useChangeEffect.mjs";
+import useChangeLayoutEffect from "./useChangeLayoutEffect/useChangeLayoutEffect.mjs";
 import useCombinedRefs from "./useCombinedRefs/useCombinedRefs.mjs";
 import "./useCombinedRefs/index.mjs";
 import useConstant from "./useConstant/useConstant.mjs";
@@ -14,4 +19,4 @@ import usePreviousValue from "./usePreviousValue/usePreviousValue.mjs";
 import useRerender from "./useRerender/useRerender.mjs";
 import useStableCallback from "./useStableCallback/useStableCallback.mjs";
 import useStableLength from "./useStableLength/useStableLength.mjs";
-export { type ExecutionFunction, type ExecutionRequest, type LatestRef, type UseExecutionAtOptions, type UseExecutionAtResult, type UsePreviousValueOptions, useCombinedRefs, useConstant, useExecutionAt, useExecutionEffect, useExecutionLayoutEffect, useIsHydrated, useIsMounted, useLatestRef, usePreviousValue, useRerender, useStableCallback, useStableLength };
+export { type ChangeDependencies, type ExecutionFunction, type ExecutionMark, type ExecutionRequest, type LatestRef, type UseExecutionAtOptions, type UseExecutionAtResult, type UseExecutionMarkResult, type UsePreviousValueOptions, useChangeEffect, useChangeLayoutEffect, useCombinedRefs, useConstant, useExecutionAt, useExecutionEffect, useExecutionLayoutEffect, useExecutionMark, useIsHydrated, useIsMounted, useLatestRef, usePreviousValue, useRerender, useStableCallback, useStableLength };

package/hooks/index.mjs

@@ -1,3 +1,9 @@
+import useLatestRef from "./useLatestRef/useLatestRef.mjs";
+import "./useLatestRef/index.mjs";
+import useChangeEffect from "./useChangeEffect/useChangeEffect.mjs";
+import "./useChangeEffect/index.mjs";
+import useChangeLayoutEffect from "./useChangeLayoutEffect/useChangeLayoutEffect.mjs";
+import "./useChangeLayoutEffect/index.mjs";
 import useStableLength from "./useStableLength/useStableLength.mjs";
 import "./useStableLength/index.mjs";
 import useCombinedRefs from "./useCombinedRefs/useCombinedRefs.mjs";
@@ -6,12 +12,12 @@ import useConstant from "./useConstant/useConstant.mjs";
 import "./useConstant/index.mjs";
 import useExecutionAt from "./useExecutionAt/useExecutionAt.mjs";
 import "./useExecutionAt/index.mjs";
-import useLatestRef from "./useLatestRef/useLatestRef.mjs";
-import "./useLatestRef/index.mjs";
 import useExecutionEffect from "./useExecutionEffect/useExecutionEffect.mjs";
 import "./useExecutionEffect/index.mjs";
 import useExecutionLayoutEffect from "./useExecutionLayoutEffect/useExecutionLayoutEffect.mjs";
 import "./useExecutionLayoutEffect/index.mjs";
+import useExecutionMark from "./useExecutionMark/useExecutionMark.mjs";
+import "./useExecutionMark/index.mjs";
 import useIsHydrated from "./useIsHydrated/useIsHydrated.mjs";
 import "./useIsHydrated/index.mjs";
 import useIsMounted from "./useIsMounted/useIsMounted.mjs";
@@ -23,4 +29,4 @@ import "./useRerender/index.mjs";
 import useStableCallback from "./useStableCallback/useStableCallback.mjs";
 import "./useStableCallback/index.mjs";
 
-export { useCombinedRefs, useConstant, useExecutionAt, useExecutionEffect, useExecutionLayoutEffect, useIsHydrated, useIsMounted, useLatestRef, usePreviousValue, useRerender, useStableCallback, useStableLength };
+export { useChangeEffect, useChangeLayoutEffect, useCombinedRefs, useConstant, useExecutionAt, useExecutionEffect, useExecutionLayoutEffect, useExecutionMark, useIsHydrated, useIsMounted, useLatestRef, usePreviousValue, useRerender, useStableCallback, useStableLength };

package/hooks/useChangeEffect/index.cjs

@@ -0,0 +1,5 @@
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
+const require_hooks_useChangeEffect_useChangeEffect = require("./useChangeEffect.cjs");
+
+exports.default = require_hooks_useChangeEffect_useChangeEffect.default;
+exports.useChangeEffect = require_hooks_useChangeEffect_useChangeEffect.default;

package/hooks/useChangeEffect/index.d.cts

@@ -0,0 +1,3 @@
+import { ChangeDependencies } from "./types.cjs";
+import useChangeEffect from "./useChangeEffect.cjs";
+export { type ChangeDependencies, useChangeEffect as default, useChangeEffect };

package/hooks/useChangeEffect/index.d.mts

@@ -0,0 +1,3 @@
+import { ChangeDependencies } from "./types.mjs";
+import useChangeEffect from "./useChangeEffect.mjs";
+export { type ChangeDependencies, useChangeEffect as default, useChangeEffect };

package/hooks/useChangeEffect/index.mjs

@@ -0,0 +1,3 @@
+import useChangeEffect from "./useChangeEffect.mjs";
+
+export { useChangeEffect as default, useChangeEffect };

package/hooks/useChangeEffect/types.cjs

@@ -0,0 +1 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });

package/hooks/useChangeEffect/types.d.cts

@@ -0,0 +1,11 @@
+//#region src/hooks/useChangeEffect/types.d.ts
+/**
+ * 変化を見る依存の値（Change Dependencies）
+ *
+ * プロパティごとに `Object.is` で比べ、どれかが変わったら変化とみなす。
+ * 比べるのは1段目のプロパティだけで、プロパティの値がオブジェクトの場合は参照で比べる。
+ * そのため、オブジェクトをその場で書いて渡してよい（例: `{ className, theme }`）。
+ * Execution Request（`useExecutionAt` の値）を入れると、要求のたびに変化とみなす。
+ */
+export type ChangeDependencies = object;
+//#endregion

package/hooks/useChangeEffect/types.d.mts

@@ -0,0 +1,11 @@
+//#region src/hooks/useChangeEffect/types.d.ts
+/**
+ * 変化を見る依存の値（Change Dependencies）
+ *
+ * プロパティごとに `Object.is` で比べ、どれかが変わったら変化とみなす。
+ * 比べるのは1段目のプロパティだけで、プロパティの値がオブジェクトの場合は参照で比べる。
+ * そのため、オブジェクトをその場で書いて渡してよい（例: `{ className, theme }`）。
+ * Execution Request（`useExecutionAt` の値）を入れると、要求のたびに変化とみなす。
+ */
+export type ChangeDependencies = object;
+//#endregion

package/hooks/useChangeEffect/types.mjs

@@ -0,0 +1 @@
+export {  };

package/hooks/useChangeEffect/useChangeEffect.cjs

@@ -0,0 +1,37 @@
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
+const require__internal__useChangeHandler = require("../../_internal/_useChangeHandler.cjs");
+let react = require("react");
+
+//#region src/hooks/useChangeEffect/useChangeEffect.ts
+/**
+* 変化を見る依存の値（Change Dependencies）を受け取り、値が変わったときに処理を実行するフック
+*
+* `xxxOn` のプロパティ（例: `refreshOn`）を受け取る側のフック。
+* 結果が入力だけで決まる操作（測り直し、再計算など）を、利用者が渡した値の変化に合わせて実行する。
+* 回数や payload に意味がある命令は、Execution Request（`useExecutionAt`・`useExecutionEffect`）を使う。
+* 処理は画面に表示した後（`useEffect`）に実行する。表示する前に実行する場合は `useChangeLayoutEffect` を使う。
+*
+* - 1段目のプロパティを `Object.is` で比べ、どれかが変わったときに実行する。プロパティが増えた・減った場合も変化とみなす
+* - 初回（マウントしたとき）は実行しない
+* - undefined は依存なし（プロパティの無いオブジェクト）として扱う
+* - コールバックは最新のものを呼ぶ。参照が変わっても実行しない
+*
+* @param dependencies 受け取った依存の値。undefined の場合は依存なし
+* @param callback 依存の値が変わったときに実行する処理
+* @example
+* // 渡す側
+* <WrappedComponent refreshOn={{ className, theme }} />
+* // 受け取る側（WrappedComponent の中）
+* useChangeEffect(props.refreshOn, () => {
+*   instance.refresh();
+* });
+*/
+function useChangeEffect(dependencies, callback) {
+	const handle = require__internal__useChangeHandler.default(dependencies, callback);
+	(0, react.useEffect)(() => {
+		handle();
+	});
+}
+
+//#endregion
+exports.default = useChangeEffect;

package/hooks/useChangeEffect/useChangeEffect.d.cts

@@ -0,0 +1,27 @@
+import { ChangeDependencies } from "./types.cjs";
+//#region src/hooks/useChangeEffect/useChangeEffect.d.ts
+/**
+ * 変化を見る依存の値（Change Dependencies）を受け取り、値が変わったときに処理を実行するフック
+ *
+ * `xxxOn` のプロパティ（例: `refreshOn`）を受け取る側のフック。
+ * 結果が入力だけで決まる操作（測り直し、再計算など）を、利用者が渡した値の変化に合わせて実行する。
+ * 回数や payload に意味がある命令は、Execution Request（`useExecutionAt`・`useExecutionEffect`）を使う。
+ * 処理は画面に表示した後（`useEffect`）に実行する。表示する前に実行する場合は `useChangeLayoutEffect` を使う。
+ *
+ * - 1段目のプロパティを `Object.is` で比べ、どれかが変わったときに実行する。プロパティが増えた・減った場合も変化とみなす
+ * - 初回（マウントしたとき）は実行しない
+ * - undefined は依存なし（プロパティの無いオブジェクト）として扱う
+ * - コールバックは最新のものを呼ぶ。参照が変わっても実行しない
+ *
+ * @param dependencies 受け取った依存の値。undefined の場合は依存なし
+ * @param callback 依存の値が変わったときに実行する処理
+ * @example
+ * // 渡す側
+ * <WrappedComponent refreshOn={{ className, theme }} />
+ * // 受け取る側（WrappedComponent の中）
+ * useChangeEffect(props.refreshOn, () => {
+ *   instance.refresh();
+ * });
+ */
+declare function useChangeEffect(dependencies: ChangeDependencies | undefined, callback: () => void): void;
+export = useChangeEffect;

package/hooks/useChangeEffect/useChangeEffect.d.mts

@@ -0,0 +1,27 @@
+import { ChangeDependencies } from "./types.mjs";
+//#region src/hooks/useChangeEffect/useChangeEffect.d.ts
+/**
+ * 変化を見る依存の値（Change Dependencies）を受け取り、値が変わったときに処理を実行するフック
+ *
+ * `xxxOn` のプロパティ（例: `refreshOn`）を受け取る側のフック。
+ * 結果が入力だけで決まる操作（測り直し、再計算など）を、利用者が渡した値の変化に合わせて実行する。
+ * 回数や payload に意味がある命令は、Execution Request（`useExecutionAt`・`useExecutionEffect`）を使う。
+ * 処理は画面に表示した後（`useEffect`）に実行する。表示する前に実行する場合は `useChangeLayoutEffect` を使う。
+ *
+ * - 1段目のプロパティを `Object.is` で比べ、どれかが変わったときに実行する。プロパティが増えた・減った場合も変化とみなす
+ * - 初回（マウントしたとき）は実行しない
+ * - undefined は依存なし（プロパティの無いオブジェクト）として扱う
+ * - コールバックは最新のものを呼ぶ。参照が変わっても実行しない
+ *
+ * @param dependencies 受け取った依存の値。undefined の場合は依存なし
+ * @param callback 依存の値が変わったときに実行する処理
+ * @example
+ * // 渡す側
+ * <WrappedComponent refreshOn={{ className, theme }} />
+ * // 受け取る側（WrappedComponent の中）
+ * useChangeEffect(props.refreshOn, () => {
+ *   instance.refresh();
+ * });
+ */
+export default function useChangeEffect(dependencies: ChangeDependencies | undefined, callback: () => void): void;
+//#endregion

package/hooks/useChangeEffect/useChangeEffect.mjs

@@ -0,0 +1,36 @@
+import useChangeHandler from "../../_internal/_useChangeHandler.mjs";
+import { useEffect } from "react";
+
+//#region src/hooks/useChangeEffect/useChangeEffect.ts
+/**
+* 変化を見る依存の値（Change Dependencies）を受け取り、値が変わったときに処理を実行するフック
+*
+* `xxxOn` のプロパティ（例: `refreshOn`）を受け取る側のフック。
+* 結果が入力だけで決まる操作（測り直し、再計算など）を、利用者が渡した値の変化に合わせて実行する。
+* 回数や payload に意味がある命令は、Execution Request（`useExecutionAt`・`useExecutionEffect`）を使う。
+* 処理は画面に表示した後（`useEffect`）に実行する。表示する前に実行する場合は `useChangeLayoutEffect` を使う。
+*
+* - 1段目のプロパティを `Object.is` で比べ、どれかが変わったときに実行する。プロパティが増えた・減った場合も変化とみなす
+* - 初回（マウントしたとき）は実行しない
+* - undefined は依存なし（プロパティの無いオブジェクト）として扱う
+* - コールバックは最新のものを呼ぶ。参照が変わっても実行しない
+*
+* @param dependencies 受け取った依存の値。undefined の場合は依存なし
+* @param callback 依存の値が変わったときに実行する処理
+* @example
+* // 渡す側
+* <WrappedComponent refreshOn={{ className, theme }} />
+* // 受け取る側（WrappedComponent の中）
+* useChangeEffect(props.refreshOn, () => {
+*   instance.refresh();
+* });
+*/
+function useChangeEffect(dependencies, callback) {
+	const handle = useChangeHandler(dependencies, callback);
+	useEffect(() => {
+		handle();
+	});
+}
+
+//#endregion
+export { useChangeEffect as default };

package/hooks/useChangeLayoutEffect/index.cjs

@@ -0,0 +1,5 @@
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
+const require_hooks_useChangeLayoutEffect_useChangeLayoutEffect = require("./useChangeLayoutEffect.cjs");
+
+exports.default = require_hooks_useChangeLayoutEffect_useChangeLayoutEffect.default;
+exports.useChangeLayoutEffect = require_hooks_useChangeLayoutEffect_useChangeLayoutEffect.default;

package/hooks/useChangeLayoutEffect/index.d.cts

@@ -0,0 +1,2 @@
+import useChangeLayoutEffect from "./useChangeLayoutEffect.cjs";
+export { useChangeLayoutEffect as default, useChangeLayoutEffect };

package/hooks/useChangeLayoutEffect/index.d.mts

@@ -0,0 +1,2 @@
+import useChangeLayoutEffect from "./useChangeLayoutEffect.mjs";
+export { useChangeLayoutEffect as default, useChangeLayoutEffect };

package/hooks/useChangeLayoutEffect/index.mjs

@@ -0,0 +1,3 @@
+import useChangeLayoutEffect from "./useChangeLayoutEffect.mjs";
+
+export { useChangeLayoutEffect as default, useChangeLayoutEffect };

package/hooks/useChangeLayoutEffect/useChangeLayoutEffect.cjs

@@ -0,0 +1,24 @@
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
+const require__internal__useChangeHandler = require("../../_internal/_useChangeHandler.cjs");
+let react = require("react");
+
+//#region src/hooks/useChangeLayoutEffect/useChangeLayoutEffect.ts
+/**
+* 変化を見る依存の値（Change Dependencies）を受け取り、値が変わったときに画面に表示する前に処理を実行するフック
+*
+* `useChangeEffect` の、処理を `useLayoutEffect` で実行する版。
+* 測り直しなど、結果を画面に表示する前に反映したい処理に使う。
+* 依存の値の扱いは `useChangeEffect` と同じ。
+*
+* @param dependencies 受け取った依存の値。undefined の場合は依存なし
+* @param callback 依存の値が変わったときに実行する処理
+*/
+function useChangeLayoutEffect(dependencies, callback) {
+	const handle = require__internal__useChangeHandler.default(dependencies, callback);
+	(0, react.useLayoutEffect)(() => {
+		handle();
+	});
+}
+
+//#endregion
+exports.default = useChangeLayoutEffect;

package/hooks/useChangeLayoutEffect/useChangeLayoutEffect.d.cts

@@ -0,0 +1,14 @@
+import { ChangeDependencies } from "../useChangeEffect/types.cjs";
+//#region src/hooks/useChangeLayoutEffect/useChangeLayoutEffect.d.ts
+/**
+ * 変化を見る依存の値（Change Dependencies）を受け取り、値が変わったときに画面に表示する前に処理を実行するフック
+ *
+ * `useChangeEffect` の、処理を `useLayoutEffect` で実行する版。
+ * 測り直しなど、結果を画面に表示する前に反映したい処理に使う。
+ * 依存の値の扱いは `useChangeEffect` と同じ。
+ *
+ * @param dependencies 受け取った依存の値。undefined の場合は依存なし
+ * @param callback 依存の値が変わったときに実行する処理
+ */
+declare function useChangeLayoutEffect(dependencies: ChangeDependencies | undefined, callback: () => void): void;
+export = useChangeLayoutEffect;

package/hooks/useChangeLayoutEffect/useChangeLayoutEffect.d.mts

@@ -0,0 +1,14 @@
+import { ChangeDependencies } from "../useChangeEffect/types.mjs";
+//#region src/hooks/useChangeLayoutEffect/useChangeLayoutEffect.d.ts
+/**
+ * 変化を見る依存の値（Change Dependencies）を受け取り、値が変わったときに画面に表示する前に処理を実行するフック
+ *
+ * `useChangeEffect` の、処理を `useLayoutEffect` で実行する版。
+ * 測り直しなど、結果を画面に表示する前に反映したい処理に使う。
+ * 依存の値の扱いは `useChangeEffect` と同じ。
+ *
+ * @param dependencies 受け取った依存の値。undefined の場合は依存なし
+ * @param callback 依存の値が変わったときに実行する処理
+ */
+export default function useChangeLayoutEffect(dependencies: ChangeDependencies | undefined, callback: () => void): void;
+//#endregion

package/hooks/useChangeLayoutEffect/useChangeLayoutEffect.mjs

@@ -0,0 +1,23 @@
+import useChangeHandler from "../../_internal/_useChangeHandler.mjs";
+import { useLayoutEffect } from "react";
+
+//#region src/hooks/useChangeLayoutEffect/useChangeLayoutEffect.ts
+/**
+* 変化を見る依存の値（Change Dependencies）を受け取り、値が変わったときに画面に表示する前に処理を実行するフック
+*
+* `useChangeEffect` の、処理を `useLayoutEffect` で実行する版。
+* 測り直しなど、結果を画面に表示する前に反映したい処理に使う。
+* 依存の値の扱いは `useChangeEffect` と同じ。
+*
+* @param dependencies 受け取った依存の値。undefined の場合は依存なし
+* @param callback 依存の値が変わったときに実行する処理
+*/
+function useChangeLayoutEffect(dependencies, callback) {
+	const handle = useChangeHandler(dependencies, callback);
+	useLayoutEffect(() => {
+		handle();
+	});
+}
+
+//#endregion
+export { useChangeLayoutEffect as default };

package/hooks/useExecutionEffect/useExecutionEffect.cjs

@@ -1,21 +1,23 @@
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
-const require__helpers__useExecutionHandler = require("../../_helpers/_useExecutionHandler.cjs");
+const require__internal__useExecutionHandler = require("../../_internal/_useExecutionHandler.cjs");
 let react = require("react");
 
 //#region src/hooks/useExecutionEffect/useExecutionEffect.ts
 /**
 * Execution Request プロパティ（xxxAt）を受け取り、要求があったときに処理を実行するフック
 *
-* `useExecutionAt` と対になる、受け取る側のフック。
+* `useExecutionAt`・`useExecutionMark` と対になる、受け取る側のフック。
 * 命令的なコンポーネントをラップした React のコンポーネントで、プロパティを通じてメソッドを実行する。
 * 処理は画面に表示した後（`useEffect`）に実行する。表示する前に実行する場合は `useExecutionLayoutEffect` を使う。
 *
-* - `at` が変わったときだけ実行する（`payload` は比べない）
-* - マウントより前に出た要求（マウントしたときにすでに渡されていた要求を含む）は実行しない
+* - 印（`at`、または ExecutionMark の値）が変わったときだけ実行する（`payload` は比べない）
+* - マウントしたときに渡されていた要求は実行しない（マウントしたときの印を基準にする）
+* - 印が `0`（まだ要求していない）や undefined の場合は実行しない
+* - ExecutionMark を受け取った場合、コールバックの payload は undefined
 * - 次のレンダリングまでに複数回要求した場合は、最後の要求だけを実行する
 * - コールバックは最新のものを呼ぶ。参照が変わっても実行しない
 *
-* @param request 受け取った Execution Request。undefined の場合は要求なし
+* @param request 受け取った Execution Request（`useExecutionAt` の値、または payload の無い ExecutionMark）。undefined の場合は要求なし
 * @param callback 要求があったときに実行する処理。要求の payload を受け取る
 * @example
 * // 呼び出す側
@@ -27,7 +29,7 @@ let react = require("react");
 * });
 */
 function useExecutionEffect(request, callback) {
-	const handle = require__helpers__useExecutionHandler.default(request, callback);
+	const handle = require__internal__useExecutionHandler.default(request, callback);
 	(0, react.useEffect)(() => {
 		handle();
 	}, [handle]);

package/hooks/useExecutionEffect/useExecutionEffect.d.cts

@@ -1,18 +1,21 @@
 import { ExecutionRequest } from "../useExecutionAt/types.cjs";
+import { ExecutionMark } from "../useExecutionMark/types.cjs";
 //#region src/hooks/useExecutionEffect/useExecutionEffect.d.ts
 /**
  * Execution Request プロパティ（xxxAt）を受け取り、要求があったときに処理を実行するフック
  *
- * `useExecutionAt` と対になる、受け取る側のフック。
+ * `useExecutionAt`・`useExecutionMark` と対になる、受け取る側のフック。
  * 命令的なコンポーネントをラップした React のコンポーネントで、プロパティを通じてメソッドを実行する。
  * 処理は画面に表示した後（`useEffect`）に実行する。表示する前に実行する場合は `useExecutionLayoutEffect` を使う。
  *
- * - `at` が変わったときだけ実行する（`payload` は比べない）
- * - マウントより前に出た要求（マウントしたときにすでに渡されていた要求を含む）は実行しない
+ * - 印（`at`、または ExecutionMark の値）が変わったときだけ実行する（`payload` は比べない）
+ * - マウントしたときに渡されていた要求は実行しない（マウントしたときの印を基準にする）
+ * - 印が `0`（まだ要求していない）や undefined の場合は実行しない
+ * - ExecutionMark を受け取った場合、コールバックの payload は undefined
  * - 次のレンダリングまでに複数回要求した場合は、最後の要求だけを実行する
  * - コールバックは最新のものを呼ぶ。参照が変わっても実行しない
  *
- * @param request 受け取った Execution Request。undefined の場合は要求なし
+ * @param request 受け取った Execution Request（`useExecutionAt` の値、または payload の無い ExecutionMark）。undefined の場合は要求なし
  * @param callback 要求があったときに実行する処理。要求の payload を受け取る
  * @example
  * // 呼び出す側
@@ -23,5 +26,5 @@ import { ExecutionRequest } from "../useExecutionAt/types.cjs";
  *   instance.undo(payload);
  * });
  */
-declare function useExecutionEffect<P = void>(request: ExecutionRequest<P> | undefined, callback: (payload: P | undefined) => void): void;
+declare function useExecutionEffect<P = void>(request: ExecutionRequest<P> | ExecutionMark | undefined, callback: (payload: P | undefined) => void): void;
 export = useExecutionEffect;

package/hooks/useExecutionEffect/useExecutionEffect.d.mts

@@ -1,18 +1,21 @@
 import { ExecutionRequest } from "../useExecutionAt/types.mjs";
+import { ExecutionMark } from "../useExecutionMark/types.mjs";
 //#region src/hooks/useExecutionEffect/useExecutionEffect.d.ts
 /**
  * Execution Request プロパティ（xxxAt）を受け取り、要求があったときに処理を実行するフック
  *
- * `useExecutionAt` と対になる、受け取る側のフック。
+ * `useExecutionAt`・`useExecutionMark` と対になる、受け取る側のフック。
  * 命令的なコンポーネントをラップした React のコンポーネントで、プロパティを通じてメソッドを実行する。
  * 処理は画面に表示した後（`useEffect`）に実行する。表示する前に実行する場合は `useExecutionLayoutEffect` を使う。
  *
- * - `at` が変わったときだけ実行する（`payload` は比べない）
- * - マウントより前に出た要求（マウントしたときにすでに渡されていた要求を含む）は実行しない
+ * - 印（`at`、または ExecutionMark の値）が変わったときだけ実行する（`payload` は比べない）
+ * - マウントしたときに渡されていた要求は実行しない（マウントしたときの印を基準にする）
+ * - 印が `0`（まだ要求していない）や undefined の場合は実行しない
+ * - ExecutionMark を受け取った場合、コールバックの payload は undefined
  * - 次のレンダリングまでに複数回要求した場合は、最後の要求だけを実行する
  * - コールバックは最新のものを呼ぶ。参照が変わっても実行しない
  *
- * @param request 受け取った Execution Request。undefined の場合は要求なし
+ * @param request 受け取った Execution Request（`useExecutionAt` の値、または payload の無い ExecutionMark）。undefined の場合は要求なし
  * @param callback 要求があったときに実行する処理。要求の payload を受け取る
  * @example
  * // 呼び出す側
@@ -23,5 +26,5 @@ import { ExecutionRequest } from "../useExecutionAt/types.mjs";
  *   instance.undo(payload);
  * });
  */
-export default function useExecutionEffect<P = void>(request: ExecutionRequest<P> | undefined, callback: (payload: P | undefined) => void): void;
+export default function useExecutionEffect<P = void>(request: ExecutionRequest<P> | ExecutionMark | undefined, callback: (payload: P | undefined) => void): void;
 //#endregion