@fringeworks/react-utils 0.8.0

package/hooks/useExecutionAt/useExecutionAt.cjs

@@ -0,0 +1,38 @@
+const require_utils_markAt_markAt = require('../../utils/markAt/markAt.cjs');
+let react = require("react");
+
+//#region src/hooks/useExecutionAt/useExecutionAt.ts
+/**
+* Execution Requestプロパティ(xxxxxAt)へ渡す値と、\
+* 処理実行用のトリガー関数を作るフック。\
+* 命令的コンポーネントをラップしたreactコンポーネントで、\
+* プロパティを通じて命令的コンポーネントのメソッドを実行する仕組みを提供する。
+*
+* @template P 実行時にExecution Requestプロパティに渡すペイロードの型
+* @param options オプション
+* @returns [request, execute]
+* - `request`: 現在のリクエスト
+* - `execute`: 新しいリクエストを発行する関数
+* @example
+* // 1. Hookの宣言
+* const [undoAt, undo] = useExecutionAt<string>();
+* // 2. 実行のトリガーになるコンポーネント
+* <button onClick={() => undo('no-123')}>Undo</button>
+* // 3. 処理を実行するコンポーネント
+* <WrappedImperativeComponent undoAt={undoAt} />
+*/
+function useExecutionAt(options = {}) {
+	const [executionRequest, setExecutionRequest] = (0, react.useState)({
+		at: 0,
+		payload: options.initialPayload
+	});
+	return [executionRequest, (0, react.useCallback)((payload) => {
+		setExecutionRequest({
+			at: require_utils_markAt_markAt(),
+			payload
+		});
+	}, [])];
+}
+
+//#endregion
+module.exports = useExecutionAt;

package/hooks/useExecutionAt/useExecutionAt.d.cts

@@ -0,0 +1,24 @@
+import { UseExecutionAtOptions, UseExecutionAtResult } from "./types.cjs";
+
+//#region src/hooks/useExecutionAt/useExecutionAt.d.ts
+/**
+ * Execution Requestプロパティ(xxxxxAt)へ渡す値と、\
+ * 処理実行用のトリガー関数を作るフック。\
+ * 命令的コンポーネントをラップしたreactコンポーネントで、\
+ * プロパティを通じて命令的コンポーネントのメソッドを実行する仕組みを提供する。
+ *
+ * @template P 実行時にExecution Requestプロパティに渡すペイロードの型
+ * @param options オプション
+ * @returns [request, execute]
+ * - `request`: 現在のリクエスト
+ * - `execute`: 新しいリクエストを発行する関数
+ * @example
+ * // 1. Hookの宣言
+ * const [undoAt, undo] = useExecutionAt<string>();
+ * // 2. 実行のトリガーになるコンポーネント
+ * <button onClick={() => undo('no-123')}>Undo</button>
+ * // 3. 処理を実行するコンポーネント
+ * <WrappedImperativeComponent undoAt={undoAt} />
+ */
+declare function useExecutionAt<P = void>(options?: UseExecutionAtOptions<P>): UseExecutionAtResult<P>;
+export = useExecutionAt;

package/hooks/useExecutionAt/useExecutionAt.d.mts

@@ -0,0 +1,25 @@
+import { UseExecutionAtOptions, UseExecutionAtResult } from "./types.mjs";
+
+//#region src/hooks/useExecutionAt/useExecutionAt.d.ts
+/**
+ * Execution Requestプロパティ(xxxxxAt)へ渡す値と、\
+ * 処理実行用のトリガー関数を作るフック。\
+ * 命令的コンポーネントをラップしたreactコンポーネントで、\
+ * プロパティを通じて命令的コンポーネントのメソッドを実行する仕組みを提供する。
+ *
+ * @template P 実行時にExecution Requestプロパティに渡すペイロードの型
+ * @param options オプション
+ * @returns [request, execute]
+ * - `request`: 現在のリクエスト
+ * - `execute`: 新しいリクエストを発行する関数
+ * @example
+ * // 1. Hookの宣言
+ * const [undoAt, undo] = useExecutionAt<string>();
+ * // 2. 実行のトリガーになるコンポーネント
+ * <button onClick={() => undo('no-123')}>Undo</button>
+ * // 3. 処理を実行するコンポーネント
+ * <WrappedImperativeComponent undoAt={undoAt} />
+ */
+declare function useExecutionAt<P = void>(options?: UseExecutionAtOptions<P>): UseExecutionAtResult<P>;
+//#endregion
+export { useExecutionAt as default };

package/hooks/useExecutionAt/useExecutionAt.mjs

@@ -0,0 +1,38 @@
+import markAt from "../../utils/markAt/markAt.mjs";
+import { useCallback, useState } from "react";
+
+//#region src/hooks/useExecutionAt/useExecutionAt.ts
+/**
+* Execution Requestプロパティ(xxxxxAt)へ渡す値と、\
+* 処理実行用のトリガー関数を作るフック。\
+* 命令的コンポーネントをラップしたreactコンポーネントで、\
+* プロパティを通じて命令的コンポーネントのメソッドを実行する仕組みを提供する。
+*
+* @template P 実行時にExecution Requestプロパティに渡すペイロードの型
+* @param options オプション
+* @returns [request, execute]
+* - `request`: 現在のリクエスト
+* - `execute`: 新しいリクエストを発行する関数
+* @example
+* // 1. Hookの宣言
+* const [undoAt, undo] = useExecutionAt<string>();
+* // 2. 実行のトリガーになるコンポーネント
+* <button onClick={() => undo('no-123')}>Undo</button>
+* // 3. 処理を実行するコンポーネント
+* <WrappedImperativeComponent undoAt={undoAt} />
+*/
+function useExecutionAt(options = {}) {
+	const [executionRequest, setExecutionRequest] = useState({
+		at: 0,
+		payload: options.initialPayload
+	});
+	return [executionRequest, useCallback((payload) => {
+		setExecutionRequest({
+			at: markAt(),
+			payload
+		});
+	}, [])];
+}
+
+//#endregion
+export { useExecutionAt as default };

package/hooks/useIsMounted/index.cjs

@@ -0,0 +1,3 @@
+const require_hooks_useIsMounted_useIsMounted = require('./useIsMounted.cjs');
+
+module.exports = require_hooks_useIsMounted_useIsMounted;

package/hooks/useIsMounted/index.d.cts

@@ -0,0 +1,2 @@
+import useIsMounted from "./useIsMounted.cjs";
+export = useIsMounted;

package/hooks/useIsMounted/index.d.mts

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

package/hooks/useIsMounted/index.mjs

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

package/hooks/useIsMounted/useIsMounted.cjs

@@ -0,0 +1,21 @@
+let react = require("react");
+
+//#region src/hooks/useIsMounted/useIsMounted.ts
+/**
+* マウントされているかどうかを判定する関数を返すフック
+* @returns
+*/
+function useIsMounted() {
+	const isMountedRef = (0, react.useRef)(false);
+	const isMounted = (0, react.useCallback)(() => isMountedRef.current, []);
+	(0, react.useEffect)(() => {
+		isMountedRef.current = true;
+		return () => {
+			isMountedRef.current = false;
+		};
+	}, []);
+	return isMounted;
+}
+
+//#endregion
+module.exports = useIsMounted;

package/hooks/useIsMounted/useIsMounted.d.cts

@@ -0,0 +1,7 @@
+//#region src/hooks/useIsMounted/useIsMounted.d.ts
+/**
+ * マウントされているかどうかを判定する関数を返すフック
+ * @returns
+ */
+declare function useIsMounted(): () => boolean;
+export = useIsMounted;

package/hooks/useIsMounted/useIsMounted.d.mts

@@ -0,0 +1,8 @@
+//#region src/hooks/useIsMounted/useIsMounted.d.ts
+/**
+ * マウントされているかどうかを判定する関数を返すフック
+ * @returns
+ */
+declare function useIsMounted(): () => boolean;
+//#endregion
+export { useIsMounted as default };

package/hooks/useIsMounted/useIsMounted.mjs

@@ -0,0 +1,21 @@
+import { useCallback, useEffect, useRef } from "react";
+
+//#region src/hooks/useIsMounted/useIsMounted.ts
+/**
+* マウントされているかどうかを判定する関数を返すフック
+* @returns
+*/
+function useIsMounted() {
+	const isMountedRef = useRef(false);
+	const isMounted = useCallback(() => isMountedRef.current, []);
+	useEffect(() => {
+		isMountedRef.current = true;
+		return () => {
+			isMountedRef.current = false;
+		};
+	}, []);
+	return isMounted;
+}
+
+//#endregion
+export { useIsMounted as default };

package/hooks/useLatestRef/index.cjs

@@ -0,0 +1,3 @@
+const require_hooks_useLatestRef_useLatestRef = require('./useLatestRef.cjs');
+
+module.exports = require_hooks_useLatestRef_useLatestRef;

package/hooks/useLatestRef/index.d.cts

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

package/hooks/useLatestRef/index.d.mts

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

package/hooks/useLatestRef/index.mjs

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

package/hooks/useLatestRef/types.d.cts

@@ -0,0 +1,12 @@
+//#region src/hooks/useLatestRef/types.d.ts
+/**
+ * 最新の値を保持する参照
+ */
+type LatestRef<T> = {
+  /**
+   * 最後にコミットされたレンダリングでの値
+   */
+  readonly current: T;
+};
+//#endregion
+export { LatestRef };

package/hooks/useLatestRef/types.d.mts

@@ -0,0 +1,12 @@
+//#region src/hooks/useLatestRef/types.d.ts
+/**
+ * 最新の値を保持する参照
+ */
+type LatestRef<T> = {
+  /**
+   * 最後にコミットされたレンダリングでの値
+   */
+  readonly current: T;
+};
+//#endregion
+export { LatestRef };

package/hooks/useLatestRef/types.mjs

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

package/hooks/useLatestRef/useLatestRef.cjs

@@ -0,0 +1,23 @@
+let react = require("react");
+
+//#region src/hooks/useLatestRef/useLatestRef.ts
+/**
+* 最新の値を保持する参照を返すhook
+*
+* 返却する参照は常に同じオブジェクトのため、依存配列に含めずに
+* イベントハンドラーやエフェクトの中から最新の値を参照できる。
+* 値はコミット時に更新されるため、レンダリング中には参照しないこと。
+*
+* @param value 値
+* @returns 最新の値を保持する参照
+*/
+function useLatestRef(value) {
+	const ref = (0, react.useRef)(value);
+	(0, react.useInsertionEffect)(() => {
+		ref.current = value;
+	});
+	return ref;
+}
+
+//#endregion
+module.exports = useLatestRef;

package/hooks/useLatestRef/useLatestRef.d.cts

@@ -0,0 +1,15 @@
+import { LatestRef } from "./types.cjs";
+
+//#region src/hooks/useLatestRef/useLatestRef.d.ts
+/**
+ * 最新の値を保持する参照を返すhook
+ *
+ * 返却する参照は常に同じオブジェクトのため、依存配列に含めずに
+ * イベントハンドラーやエフェクトの中から最新の値を参照できる。
+ * 値はコミット時に更新されるため、レンダリング中には参照しないこと。
+ *
+ * @param value 値
+ * @returns 最新の値を保持する参照
+ */
+declare function useLatestRef<T>(value: T): LatestRef<T>;
+export = useLatestRef;

package/hooks/useLatestRef/useLatestRef.d.mts

@@ -0,0 +1,16 @@
+import { LatestRef } from "./types.mjs";
+
+//#region src/hooks/useLatestRef/useLatestRef.d.ts
+/**
+ * 最新の値を保持する参照を返すhook
+ *
+ * 返却する参照は常に同じオブジェクトのため、依存配列に含めずに
+ * イベントハンドラーやエフェクトの中から最新の値を参照できる。
+ * 値はコミット時に更新されるため、レンダリング中には参照しないこと。
+ *
+ * @param value 値
+ * @returns 最新の値を保持する参照
+ */
+declare function useLatestRef<T>(value: T): LatestRef<T>;
+//#endregion
+export { useLatestRef as default };

package/hooks/useLatestRef/useLatestRef.mjs

@@ -0,0 +1,23 @@
+import { useInsertionEffect, useRef } from "react";
+
+//#region src/hooks/useLatestRef/useLatestRef.ts
+/**
+* 最新の値を保持する参照を返すhook
+*
+* 返却する参照は常に同じオブジェクトのため、依存配列に含めずに
+* イベントハンドラーやエフェクトの中から最新の値を参照できる。
+* 値はコミット時に更新されるため、レンダリング中には参照しないこと。
+*
+* @param value 値
+* @returns 最新の値を保持する参照
+*/
+function useLatestRef(value) {
+	const ref = useRef(value);
+	useInsertionEffect(() => {
+		ref.current = value;
+	});
+	return ref;
+}
+
+//#endregion
+export { useLatestRef as default };

package/hooks/usePreviousValue/index.cjs

@@ -0,0 +1,3 @@
+const require_hooks_usePreviousValue_usePreviousValue = require('./usePreviousValue.cjs');
+
+module.exports = require_hooks_usePreviousValue_usePreviousValue;

package/hooks/usePreviousValue/index.d.cts

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

package/hooks/usePreviousValue/index.d.mts

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

package/hooks/usePreviousValue/index.mjs

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

package/hooks/usePreviousValue/types.d.cts

@@ -0,0 +1,18 @@
+//#region src/hooks/usePreviousValue/types.d.ts
+type UsePreviousValueOptions<T = any> = {
+  /**
+   * 初期値
+   */
+  initialValue?: T;
+  /**
+   * 値の比較関数
+   * falseの場合に値を更新する
+   * 未指定の場合は`===`で比較
+   * @param oldValue
+   * @param newValue
+   * @returns
+   */
+  isEqual?: (oldValue: T | undefined, newValue: T) => boolean;
+};
+//#endregion
+export { UsePreviousValueOptions };

package/hooks/usePreviousValue/types.d.mts

@@ -0,0 +1,18 @@
+//#region src/hooks/usePreviousValue/types.d.ts
+type UsePreviousValueOptions<T = any> = {
+  /**
+   * 初期値
+   */
+  initialValue?: T;
+  /**
+   * 値の比較関数
+   * falseの場合に値を更新する
+   * 未指定の場合は`===`で比較
+   * @param oldValue
+   * @param newValue
+   * @returns
+   */
+  isEqual?: (oldValue: T | undefined, newValue: T) => boolean;
+};
+//#endregion
+export { UsePreviousValueOptions };

package/hooks/usePreviousValue/types.mjs

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

package/hooks/usePreviousValue/usePreviousValue.cjs

@@ -0,0 +1,23 @@
+let react = require("react");
+
+//#region src/hooks/usePreviousValue/usePreviousValue.ts
+const defaultIsEqual = (oldValue, newValue) => oldValue === newValue;
+/**
+* 前回の値を返すhook
+* @param value 現在の値
+* @param options オプション
+* @returns 前回の値
+*/
+function usePreviousValue(value, options = {}) {
+	const isEqual = options.isEqual ?? defaultIsEqual;
+	const [currentValue, setCurrentValue] = (0, react.useState)(options.initialValue);
+	const [prevValue, setPrevValue] = (0, react.useState)(options.initialValue);
+	if (!isEqual(currentValue, value)) {
+		setPrevValue(currentValue);
+		setCurrentValue(value);
+	}
+	return prevValue;
+}
+
+//#endregion
+module.exports = usePreviousValue;

package/hooks/usePreviousValue/usePreviousValue.d.cts

@@ -0,0 +1,11 @@
+import { UsePreviousValueOptions } from "./types.cjs";
+
+//#region src/hooks/usePreviousValue/usePreviousValue.d.ts
+/**
+ * 前回の値を返すhook
+ * @param value 現在の値
+ * @param options オプション
+ * @returns 前回の値
+ */
+declare function usePreviousValue<T = unknown>(value: T, options?: UsePreviousValueOptions<T>): T | undefined;
+export = usePreviousValue;

package/hooks/usePreviousValue/usePreviousValue.d.mts

@@ -0,0 +1,12 @@
+import { UsePreviousValueOptions } from "./types.mjs";
+
+//#region src/hooks/usePreviousValue/usePreviousValue.d.ts
+/**
+ * 前回の値を返すhook
+ * @param value 現在の値
+ * @param options オプション
+ * @returns 前回の値
+ */
+declare function usePreviousValue<T = unknown>(value: T, options?: UsePreviousValueOptions<T>): T | undefined;
+//#endregion
+export { usePreviousValue as default };

package/hooks/usePreviousValue/usePreviousValue.mjs

@@ -0,0 +1,23 @@
+import { useState } from "react";
+
+//#region src/hooks/usePreviousValue/usePreviousValue.ts
+const defaultIsEqual = (oldValue, newValue) => oldValue === newValue;
+/**
+* 前回の値を返すhook
+* @param value 現在の値
+* @param options オプション
+* @returns 前回の値
+*/
+function usePreviousValue(value, options = {}) {
+	const isEqual = options.isEqual ?? defaultIsEqual;
+	const [currentValue, setCurrentValue] = useState(options.initialValue);
+	const [prevValue, setPrevValue] = useState(options.initialValue);
+	if (!isEqual(currentValue, value)) {
+		setPrevValue(currentValue);
+		setCurrentValue(value);
+	}
+	return prevValue;
+}
+
+//#endregion
+export { usePreviousValue as default };

package/hooks/useStableLength/index.cjs

@@ -0,0 +1,3 @@
+const require_hooks_useStableLength_useStableLength = require('./useStableLength.cjs');
+
+module.exports = require_hooks_useStableLength_useStableLength;

package/hooks/useStableLength/index.d.cts

@@ -0,0 +1,2 @@
+import useStableLength from "./useStableLength.cjs";
+export = useStableLength;

package/hooks/useStableLength/index.d.mts

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

package/hooks/useStableLength/index.mjs

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

package/hooks/useStableLength/useStableLength.cjs

@@ -0,0 +1,16 @@
+let react = require("react");
+
+//#region src/hooks/useStableLength/useStableLength.ts
+/**
+* 配列数が常に一定であることを保証する為のフック\
+* 配列数が変わった際にはエラーをスローする
+* @param arr 配列
+* @throws Error
+*/
+function useStableLength(arr) {
+	const length = (0, react.useRef)(arr.length).current;
+	if (length !== arr.length) throw new Error(`useStableLength: Array length must remain stable across renders (${length} → ${arr.length})`);
+}
+
+//#endregion
+module.exports = useStableLength;

package/hooks/useStableLength/useStableLength.d.cts

@@ -0,0 +1,9 @@
+//#region src/hooks/useStableLength/useStableLength.d.ts
+/**
+ * 配列数が常に一定であることを保証する為のフック\
+ * 配列数が変わった際にはエラーをスローする
+ * @param arr 配列
+ * @throws Error
+ */
+declare function useStableLength(arr: unknown[]): void;
+export = useStableLength;

package/hooks/useStableLength/useStableLength.d.mts

@@ -0,0 +1,10 @@
+//#region src/hooks/useStableLength/useStableLength.d.ts
+/**
+ * 配列数が常に一定であることを保証する為のフック\
+ * 配列数が変わった際にはエラーをスローする
+ * @param arr 配列
+ * @throws Error
+ */
+declare function useStableLength(arr: unknown[]): void;
+//#endregion
+export { useStableLength as default };

package/hooks/useStableLength/useStableLength.mjs

@@ -0,0 +1,16 @@
+import { useRef } from "react";
+
+//#region src/hooks/useStableLength/useStableLength.ts
+/**
+* 配列数が常に一定であることを保証する為のフック\
+* 配列数が変わった際にはエラーをスローする
+* @param arr 配列
+* @throws Error
+*/
+function useStableLength(arr) {
+	const length = useRef(arr.length).current;
+	if (length !== arr.length) throw new Error(`useStableLength: Array length must remain stable across renders (${length} → ${arr.length})`);
+}
+
+//#endregion
+export { useStableLength as default };

package/index.cjs

@@ -0,0 +1,16 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+const require_hooks_index = require('./hooks/index.cjs');
+const require_utils_index = require('./utils/index.cjs');
+
+Object.defineProperty(exports, 'hooks', {
+  enumerable: true,
+  get: function () {
+    return require_hooks_index.hooks_exports;
+  }
+});
+Object.defineProperty(exports, 'utils', {
+  enumerable: true,
+  get: function () {
+    return require_utils_index.utils_exports;
+  }
+});

package/index.d.cts

@@ -0,0 +1,4 @@
+import { index_d_exports } from "./hooks/index.cjs";
+import { CSSPropertiesWithVars } from "./types.cjs";
+import { index_d_exports as index_d_exports$1 } from "./utils/index.cjs";
+export { type CSSPropertiesWithVars, index_d_exports as hooks, index_d_exports$1 as utils };

package/index.d.mts

@@ -0,0 +1,4 @@
+import { index_d_exports } from "./hooks/index.mjs";
+import { CSSPropertiesWithVars } from "./types.mjs";
+import { index_d_exports as index_d_exports$1 } from "./utils/index.mjs";
+export { type CSSPropertiesWithVars, index_d_exports as hooks, index_d_exports$1 as utils };

package/index.mjs

@@ -0,0 +1,4 @@
+import { hooks_exports } from "./hooks/index.mjs";
+import { utils_exports } from "./utils/index.mjs";
+
+export { hooks_exports as hooks, utils_exports as utils };