@fringeworks/react-utils 0.10.0 → 0.12.0

package/index.d.mts

@@ -1,11 +1,15 @@
-import { MarkAtResult } from "./utils/markAt/types.mjs";
-import markAt from "./utils/markAt/markAt.mjs";
-import { ExecutionFunction, ExecutionRequest, UseExecutionAtOptions, UseExecutionAtResult } from "./hooks/useExecutionAt/types.mjs";
+import { ChangeDependencies } from "./hooks/useChangeEffect/types.mjs";
+import { CSSPropertiesWithVars, ExecutionMark } from "./types.mjs";
+import { ExecutionFunction, ExecutionRequest, UseExecutionAtResult } from "./hooks/useExecutionAt/types.mjs";
 import useExecutionAt from "./hooks/useExecutionAt/useExecutionAt.mjs";
+import useChangeEffect from "./hooks/useChangeEffect/useChangeEffect.mjs";
+import useChangeLayoutEffect from "./hooks/useChangeLayoutEffect/useChangeLayoutEffect.mjs";
 import useCombinedRefs from "./hooks/useCombinedRefs/useCombinedRefs.mjs";
 import useConstant from "./hooks/useConstant/useConstant.mjs";
 import useExecutionEffect from "./hooks/useExecutionEffect/useExecutionEffect.mjs";
 import useExecutionLayoutEffect from "./hooks/useExecutionLayoutEffect/useExecutionLayoutEffect.mjs";
+import { UseExecutionMarkResult } from "./hooks/useExecutionMark/types.mjs";
+import useExecutionMark from "./hooks/useExecutionMark/useExecutionMark.mjs";
 import useIsHydrated from "./hooks/useIsHydrated/useIsHydrated.mjs";
 import useIsMounted from "./hooks/useIsMounted/useIsMounted.mjs";
 import { LatestRef } from "./hooks/useLatestRef/types.mjs";
@@ -16,7 +20,6 @@ import useRerender from "./hooks/useRerender/useRerender.mjs";
 import useStableCallback from "./hooks/useStableCallback/useStableCallback.mjs";
 import useStableLength from "./hooks/useStableLength/useStableLength.mjs";
 import "./hooks/index.mjs";
-import { CSSPropertiesWithVars } from "./types.mjs";
 import { AppliedProps, SkippedDefaults } from "./utils/applyDefaultProps/types.mjs";
 import applyDefaultProps from "./utils/applyDefaultProps/applyDefaultProps.mjs";
 import ensureComponent from "./utils/ensureComponent/ensureComponent.mjs";
@@ -25,8 +28,9 @@ import extendElement from "./utils/extendElement/extendElement.mjs";
 import forEachContent from "./utils/forEachContent/forEachContent.mjs";
 import forEachElement from "./utils/forEachElement/forEachElement.mjs";
 import getComponentName from "./utils/getComponentName/getComponentName.mjs";
+import markAt from "./utils/markAt/markAt.mjs";
 import setRefCurrent from "./utils/setRefCurrent/setRefCurrent.mjs";
 import transformContent from "./utils/transformContent/transformContent.mjs";
 import transformElement from "./utils/transformElement/transformElement.mjs";
 import "./utils/index.mjs";
-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 };
+export { type AppliedProps, type CSSPropertiesWithVars, type ChangeDependencies, type ExecutionFunction, type ExecutionMark, type ExecutionRequest, type ExtendableProps, type LatestRef, type SkippedDefaults, 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

@@ -1,12 +1,15 @@
+import useLatestRef from "./hooks/useLatestRef/useLatestRef.mjs";
+import useChangeEffect from "./hooks/useChangeEffect/useChangeEffect.mjs";
+import useChangeLayoutEffect from "./hooks/useChangeLayoutEffect/useChangeLayoutEffect.mjs";
 import setRefCurrent from "./utils/setRefCurrent/setRefCurrent.mjs";
 import useStableLength from "./hooks/useStableLength/useStableLength.mjs";
 import useCombinedRefs from "./hooks/useCombinedRefs/useCombinedRefs.mjs";
 import useConstant from "./hooks/useConstant/useConstant.mjs";
 import markAt from "./utils/markAt/markAt.mjs";
 import useExecutionAt from "./hooks/useExecutionAt/useExecutionAt.mjs";
-import useLatestRef from "./hooks/useLatestRef/useLatestRef.mjs";
 import useExecutionEffect from "./hooks/useExecutionEffect/useExecutionEffect.mjs";
 import useExecutionLayoutEffect from "./hooks/useExecutionLayoutEffect/useExecutionLayoutEffect.mjs";
+import useExecutionMark from "./hooks/useExecutionMark/useExecutionMark.mjs";
 import useIsHydrated from "./hooks/useIsHydrated/useIsHydrated.mjs";
 import useIsMounted from "./hooks/useIsMounted/useIsMounted.mjs";
 import usePreviousValue from "./hooks/usePreviousValue/usePreviousValue.mjs";
@@ -23,4 +26,4 @@ import transformContent from "./utils/transformContent/transformContent.mjs";
 import transformElement from "./utils/transformElement/transformElement.mjs";
 import "./utils/index.mjs";
 
-export { applyDefaultProps, ensureComponent, extendElement, forEachContent, forEachElement, getComponentName, markAt, setRefCurrent, transformContent, transformElement, useCombinedRefs, useConstant, useExecutionAt, useExecutionEffect, useExecutionLayoutEffect, useIsHydrated, useIsMounted, useLatestRef, usePreviousValue, useRerender, useStableCallback, useStableLength };
+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

@@ -1,7 +1,7 @@
 {
   "name": "@fringeworks/react-utils",
-  "version": "0.10.0",
-  "description": "A library some will find handy, providing utilities for React.",
+  "version": "0.12.0",
+  "description": "A library some will find handy, offering hooks and functions for building React components.",
   "keywords": [
     "react"
   ],
@@ -34,6 +34,26 @@
         "default": "./hooks/index.cjs"
       }
     },
+    "./hooks/useChangeEffect": {
+      "import": {
+        "types": "./hooks/useChangeEffect/index.d.mts",
+        "default": "./hooks/useChangeEffect/index.mjs"
+      },
+      "require": {
+        "types": "./hooks/useChangeEffect/index.d.cts",
+        "default": "./hooks/useChangeEffect/index.cjs"
+      }
+    },
+    "./hooks/useChangeLayoutEffect": {
+      "import": {
+        "types": "./hooks/useChangeLayoutEffect/index.d.mts",
+        "default": "./hooks/useChangeLayoutEffect/index.mjs"
+      },
+      "require": {
+        "types": "./hooks/useChangeLayoutEffect/index.d.cts",
+        "default": "./hooks/useChangeLayoutEffect/index.cjs"
+      }
+    },
     "./hooks/useCombinedRefs": {
       "import": {
         "types": "./hooks/useCombinedRefs/index.d.mts",
@@ -84,6 +104,16 @@
         "default": "./hooks/useExecutionLayoutEffect/index.cjs"
       }
     },
+    "./hooks/useExecutionMark": {
+      "import": {
+        "types": "./hooks/useExecutionMark/index.d.mts",
+        "default": "./hooks/useExecutionMark/index.mjs"
+      },
+      "require": {
+        "types": "./hooks/useExecutionMark/index.d.cts",
+        "default": "./hooks/useExecutionMark/index.cjs"
+      }
+    },
     "./hooks/useIsHydrated": {
       "import": {
         "types": "./hooks/useIsHydrated/index.d.mts",

package/types.d.cts

@@ -6,4 +6,14 @@ import { CSSProperties } from "react";
 export type CSSPropertiesWithVars = CSSProperties & {
   [key: `--${string}`]: string | number | undefined;
 };
+/**
+ * 実行の印（payload の無い Execution Request）
+ *
+ * 実体は数値。Execution Request プロパティ（xxxAt）に渡し、値が変わるたびに1回の要求とみなす。
+ * `ExecutionRequest` の `at` もこの型。
+ * **要求のたびに、前回と異なる値にすること**（同じ値を続けて渡しても、2回目は要求とみなさない）。
+ * `markAt()` で作ると、呼ぶたびに異なる値になる。`useExecutionMark` を使うと、`markAt()` で作った値と、要求する関数を受け取れる。
+ * `0` は「まだ要求していない」を表し、実行しない。
+ */
+export type ExecutionMark = number;
 //#endregion

package/types.d.mts

@@ -6,4 +6,14 @@ import { CSSProperties } from "react";
 export type CSSPropertiesWithVars = CSSProperties & {
   [key: `--${string}`]: string | number | undefined;
 };
+/**
+ * 実行の印（payload の無い Execution Request）
+ *
+ * 実体は数値。Execution Request プロパティ（xxxAt）に渡し、値が変わるたびに1回の要求とみなす。
+ * `ExecutionRequest` の `at` もこの型。
+ * **要求のたびに、前回と異なる値にすること**（同じ値を続けて渡しても、2回目は要求とみなさない）。
+ * `markAt()` で作ると、呼ぶたびに異なる値になる。`useExecutionMark` を使うと、`markAt()` で作った値と、要求する関数を受け取れる。
+ * `0` は「まだ要求していない」を表し、実行しない。
+ */
+export type ExecutionMark = number;
 //#endregion

package/utils/forEachContent/forEachContent.cjs

@@ -1,5 +1,5 @@
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
-const require__helpers__traverseChildren = require("../../_helpers/_traverseChildren.cjs");
+const require__internal__traverseChildren = require("../../_internal/_traverseChildren.cjs");
 
 //#region src/utils/forEachContent/forEachContent.ts
 /**
@@ -8,7 +8,7 @@ const require__helpers__traverseChildren = require("../../_helpers/_traverseChil
 * @param callback コールバック。indexはFragmentをまたいだ連番
 */
 function forEachContent(children, callback) {
-	require__helpers__traverseChildren.default(children, require__helpers__traverseChildren._isContent, callback);
+	require__internal__traverseChildren.default(children, require__internal__traverseChildren._isContent, callback);
 }
 
 //#endregion

package/utils/forEachContent/forEachContent.mjs

@@ -1,4 +1,4 @@
-import _traverseChildren, { _isContent } from "../../_helpers/_traverseChildren.mjs";
+import _traverseChildren, { _isContent } from "../../_internal/_traverseChildren.mjs";
 
 //#region src/utils/forEachContent/forEachContent.ts
 /**

package/utils/forEachElement/forEachElement.cjs

@@ -1,5 +1,5 @@
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
-const require__helpers__traverseChildren = require("../../_helpers/_traverseChildren.cjs");
+const require__internal__traverseChildren = require("../../_internal/_traverseChildren.cjs");
 let react = require("react");
 
 //#region src/utils/forEachElement/forEachElement.ts
@@ -9,7 +9,7 @@ let react = require("react");
 * @param callback コールバック。indexはFragmentをまたいだ連番
 */
 function forEachElement(children, callback) {
-	require__helpers__traverseChildren.default(children, react.isValidElement, callback);
+	require__internal__traverseChildren.default(children, react.isValidElement, callback);
 }
 
 //#endregion

package/utils/forEachElement/forEachElement.mjs

@@ -1,4 +1,4 @@
-import _traverseChildren from "../../_helpers/_traverseChildren.mjs";
+import _traverseChildren from "../../_internal/_traverseChildren.mjs";
 import { isValidElement } from "react";
 
 //#region src/utils/forEachElement/forEachElement.ts

package/utils/index.d.cts

@@ -1,5 +1,3 @@
-import { MarkAtResult } from "./markAt/types.cjs";
-import markAt from "./markAt/markAt.cjs";
 import { AppliedProps, SkippedDefaults } from "./applyDefaultProps/types.cjs";
 import applyDefaultProps from "./applyDefaultProps/applyDefaultProps.cjs";
 import ensureComponent from "./ensureComponent/ensureComponent.cjs";
@@ -13,10 +11,12 @@ import forEachElement from "./forEachElement/forEachElement.cjs";
 import "./forEachElement/index.cjs";
 import getComponentName from "./getComponentName/getComponentName.cjs";
 import "./getComponentName/index.cjs";
+import markAt from "./markAt/markAt.cjs";
+import "./markAt/index.cjs";
 import setRefCurrent from "./setRefCurrent/setRefCurrent.cjs";
 import "./setRefCurrent/index.cjs";
 import transformContent from "./transformContent/transformContent.cjs";
 import "./transformContent/index.cjs";
 import transformElement from "./transformElement/transformElement.cjs";
 import "./transformElement/index.cjs";
-export { type AppliedProps, type ExtendableProps, type MarkAtResult, type SkippedDefaults, applyDefaultProps, ensureComponent, extendElement, forEachContent, forEachElement, getComponentName, markAt, setRefCurrent, transformContent, transformElement };
+export { type AppliedProps, type ExtendableProps, type SkippedDefaults, applyDefaultProps, ensureComponent, extendElement, forEachContent, forEachElement, getComponentName, markAt, setRefCurrent, transformContent, transformElement };

package/utils/index.d.mts

@@ -1,5 +1,3 @@
-import { MarkAtResult } from "./markAt/types.mjs";
-import markAt from "./markAt/markAt.mjs";
 import { AppliedProps, SkippedDefaults } from "./applyDefaultProps/types.mjs";
 import applyDefaultProps from "./applyDefaultProps/applyDefaultProps.mjs";
 import ensureComponent from "./ensureComponent/ensureComponent.mjs";
@@ -13,10 +11,12 @@ import forEachElement from "./forEachElement/forEachElement.mjs";
 import "./forEachElement/index.mjs";
 import getComponentName from "./getComponentName/getComponentName.mjs";
 import "./getComponentName/index.mjs";
+import markAt from "./markAt/markAt.mjs";
+import "./markAt/index.mjs";
 import setRefCurrent from "./setRefCurrent/setRefCurrent.mjs";
 import "./setRefCurrent/index.mjs";
 import transformContent from "./transformContent/transformContent.mjs";
 import "./transformContent/index.mjs";
 import transformElement from "./transformElement/transformElement.mjs";
 import "./transformElement/index.mjs";
-export { type AppliedProps, type ExtendableProps, type MarkAtResult, type SkippedDefaults, applyDefaultProps, ensureComponent, extendElement, forEachContent, forEachElement, getComponentName, markAt, setRefCurrent, transformContent, transformElement };
+export { type AppliedProps, type ExtendableProps, type SkippedDefaults, applyDefaultProps, ensureComponent, extendElement, forEachContent, forEachElement, getComponentName, markAt, setRefCurrent, transformContent, transformElement };

package/utils/markAt/index.d.cts

@@ -1,3 +1,2 @@
-import { MarkAtResult } from "./types.cjs";
 import markAt from "./markAt.cjs";
-export { type MarkAtResult, markAt as default, markAt };
+export { markAt as default, markAt };

package/utils/markAt/index.d.mts

@@ -1,3 +1,2 @@
-import { MarkAtResult } from "./types.mjs";
 import markAt from "./markAt.mjs";
-export { type MarkAtResult, markAt as default, markAt };
+export { markAt as default, markAt };

package/utils/markAt/markAt.cjs

@@ -2,8 +2,8 @@ Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toString
 //#region src/utils/markAt/markAt.ts
 let count = 0;
 /**
-* 呼び出す度に単調増加する一意な値を返す
-* @returns
+* 呼び出す度に単調増加する一意な値（実行の印）を返す
+* @returns 1 から始まり、呼ぶたびに増える値
 */
 function markAt() {
 	count += 1;

package/utils/markAt/markAt.d.cts

@@ -1,8 +1,8 @@
-import { MarkAtResult } from "./types.cjs";
+import { ExecutionMark } from "../../types.cjs";
 //#region src/utils/markAt/markAt.d.ts
 /**
- * 呼び出す度に単調増加する一意な値を返す
- * @returns
+ * 呼び出す度に単調増加する一意な値（実行の印）を返す
+ * @returns 1 から始まり、呼ぶたびに増える値
  */
-declare function markAt(): MarkAtResult;
+declare function markAt(): ExecutionMark;
 export = markAt;

package/utils/markAt/markAt.d.mts

@@ -1,8 +1,8 @@
-import { MarkAtResult } from "./types.mjs";
+import { ExecutionMark } from "../../types.mjs";
 //#region src/utils/markAt/markAt.d.ts
 /**
- * 呼び出す度に単調増加する一意な値を返す
- * @returns
+ * 呼び出す度に単調増加する一意な値（実行の印）を返す
+ * @returns 1 から始まり、呼ぶたびに増える値
  */
-export default function markAt(): MarkAtResult;
+export default function markAt(): ExecutionMark;
 //#endregion

package/utils/markAt/markAt.mjs

@@ -1,8 +1,8 @@
 //#region src/utils/markAt/markAt.ts
 let count = 0;
 /**
-* 呼び出す度に単調増加する一意な値を返す
-* @returns
+* 呼び出す度に単調増加する一意な値（実行の印）を返す
+* @returns 1 から始まり、呼ぶたびに増える値
 */
 function markAt() {
 	count += 1;

package/utils/transformContent/transformContent.cjs

@@ -1,5 +1,5 @@
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
-const require__helpers__traverseChildren = require("../../_helpers/_traverseChildren.cjs");
+const require__internal__traverseChildren = require("../../_internal/_traverseChildren.cjs");
 
 //#region src/utils/transformContent/transformContent.ts
 /**
@@ -15,7 +15,7 @@ const require__helpers__traverseChildren = require("../../_helpers/_traverseChil
 */
 function transformContent(children, callback) {
 	const result = [];
-	require__helpers__traverseChildren.default(children, require__helpers__traverseChildren._isContent, callback, (value) => result.push(value));
+	require__internal__traverseChildren.default(children, require__internal__traverseChildren._isContent, callback, (value) => result.push(value));
 	return result;
 }
 

package/utils/transformContent/transformContent.mjs

@@ -1,4 +1,4 @@
-import _traverseChildren, { _isContent } from "../../_helpers/_traverseChildren.mjs";
+import _traverseChildren, { _isContent } from "../../_internal/_traverseChildren.mjs";
 
 //#region src/utils/transformContent/transformContent.ts
 /**

package/utils/transformElement/transformElement.cjs

@@ -1,5 +1,5 @@
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
-const require__helpers__traverseChildren = require("../../_helpers/_traverseChildren.cjs");
+const require__internal__traverseChildren = require("../../_internal/_traverseChildren.cjs");
 let react = require("react");
 
 //#region src/utils/transformElement/transformElement.ts
@@ -16,7 +16,7 @@ let react = require("react");
 */
 function transformElement(children, callback) {
 	const result = [];
-	require__helpers__traverseChildren.default(children, react.isValidElement, callback, (value) => result.push(value));
+	require__internal__traverseChildren.default(children, react.isValidElement, callback, (value) => result.push(value));
 	return result;
 }
 

package/utils/transformElement/transformElement.mjs

@@ -1,4 +1,4 @@
-import _traverseChildren from "../../_helpers/_traverseChildren.mjs";
+import _traverseChildren from "../../_internal/_traverseChildren.mjs";
 import { isValidElement } from "react";
 
 //#region src/utils/transformElement/transformElement.ts

package/_helpers/_useExecutionHandler.mjs

@@ -1,36 +0,0 @@
-import useConstant from "../hooks/useConstant/useConstant.mjs";
-import "../hooks/useConstant/index.mjs";
-import markAt from "../utils/markAt/markAt.mjs";
-import useLatestRef from "../hooks/useLatestRef/useLatestRef.mjs";
-import "../hooks/useLatestRef/index.mjs";
-import { useCallback, useRef } from "react";
-
-//#region src/_helpers/_useExecutionHandler.ts
-/**
-* Execution Request を受け取り、要求があれば処理を実行する関数を返すフック
-*
-* `useExecutionEffect`・`useExecutionLayoutEffect` に共通の処理。返す関数をエフェクトで呼ぶ。
-*
-* - 初回のレンダリングで `markAt()` の値を基準にし、`at` がそれより大きい要求だけを実行する。
-*   `at` は `markAt()` で単調に増えるため、マウントより前に出た要求は実行しない
-* - 一度実行した要求は、エフェクトが再実行されても（StrictMode など）実行しない
-* - コールバックは最新のものを呼ぶ
-*
-* @param request 受け取った Execution Request。undefined の場合は要求なし
-* @param callback 要求があったときに実行する処理
-* @returns エフェクトで呼ぶ関数。参照は request が変わったときだけ変わる
-*/
-function useExecutionHandler(request, callback) {
-	const callbackRef = useLatestRef(callback);
-	const baseline = useConstant(markAt);
-	const handledAtRef = useRef(baseline);
-	return useCallback(() => {
-		if (request && request.at > handledAtRef.current) {
-			handledAtRef.current = request.at;
-			callbackRef.current(request.payload);
-		}
-	}, [request, callbackRef]);
-}
-
-//#endregion
-export { useExecutionHandler as default };

package/utils/markAt/types.d.cts

@@ -1,3 +0,0 @@
-//#region src/utils/markAt/types.d.ts
-export type MarkAtResult = number;
-//#endregion

package/utils/markAt/types.d.mts

@@ -1,3 +0,0 @@
-//#region src/utils/markAt/types.d.ts
-export type MarkAtResult = number;
-//#endregion