@fringeworks/react-defer-rendering 0.8.0

package/useDeferUntilDate/index.d.cts

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

package/useDeferUntilDate/index.d.mts

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

package/useDeferUntilDate/index.mjs

@@ -0,0 +1,5 @@
+'use client';
+
+import useDeferUntilDate from "./useDeferUntilDate.mjs";
+
+export { useDeferUntilDate as default };

package/useDeferUntilDate/types.d.cts

@@ -0,0 +1,7 @@
+import { UseDeferUntilTimeoutOptions } from "../useDeferUntilTimeout/types.cjs";
+import { ReactNode } from "react";
+
+//#region src/useDeferUntilDate/types.d.ts
+type UseDeferUntilDateOptions<P extends ReactNode = ReactNode> = UseDeferUntilTimeoutOptions<P>;
+//#endregion
+export { UseDeferUntilDateOptions };

package/useDeferUntilDate/types.d.mts

@@ -0,0 +1,7 @@
+import { UseDeferUntilTimeoutOptions } from "../useDeferUntilTimeout/types.mjs";
+import { ReactNode } from "react";
+
+//#region src/useDeferUntilDate/types.d.ts
+type UseDeferUntilDateOptions<P extends ReactNode = ReactNode> = UseDeferUntilTimeoutOptions<P>;
+//#endregion
+export { UseDeferUntilDateOptions };

package/useDeferUntilDate/types.mjs

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

package/useDeferUntilDate/useDeferUntilDate.cjs

@@ -0,0 +1,21 @@
+'use client';
+
+const require_useDeferUntilTimeout_useDeferUntilTimeout = require('../useDeferUntilTimeout/useDeferUntilTimeout.cjs');
+require('../useDeferUntilTimeout/index.cjs');
+let react = require("react");
+
+//#region src/useDeferUntilDate/useDeferUntilDate.tsx
+/**
+* 指定の日時まで描画を遅延させるhook
+* @param target 描画対象のノード
+* @param date 描画する日時（null/undefinedの場合は待たずに描画する）
+* @param options オプション
+* @returns state（'pending', 'ready'）と状態に応じたノード
+*/
+function useDeferUntilDate(target, date, options = {}) {
+	const time = date ? date.getTime() : null;
+	return require_useDeferUntilTimeout_useDeferUntilTimeout(target, (0, react.useMemo)(() => time != null ? time - Date.now() : null, [time]), options);
+}
+
+//#endregion
+module.exports = useDeferUntilDate;

package/useDeferUntilDate/useDeferUntilDate.d.cts

@@ -0,0 +1,14 @@
+import { DeferRenderingResult } from "../types.cjs";
+import { UseDeferUntilDateOptions } from "./types.cjs";
+import { ReactNode } from "react";
+
+//#region src/useDeferUntilDate/useDeferUntilDate.d.ts
+/**
+ * 指定の日時まで描画を遅延させるhook
+ * @param target 描画対象のノード
+ * @param date 描画する日時（null/undefinedの場合は待たずに描画する）
+ * @param options オプション
+ * @returns state（'pending', 'ready'）と状態に応じたノード
+ */
+declare function useDeferUntilDate<T extends ReactNode, P extends ReactNode = ReactNode>(target: T, date: Date | null | undefined, options?: UseDeferUntilDateOptions<P>): DeferRenderingResult<T | P>;
+export = useDeferUntilDate;

package/useDeferUntilDate/useDeferUntilDate.d.mts

@@ -0,0 +1,15 @@
+import { DeferRenderingResult } from "../types.mjs";
+import { UseDeferUntilDateOptions } from "./types.mjs";
+import { ReactNode } from "react";
+
+//#region src/useDeferUntilDate/useDeferUntilDate.d.ts
+/**
+ * 指定の日時まで描画を遅延させるhook
+ * @param target 描画対象のノード
+ * @param date 描画する日時（null/undefinedの場合は待たずに描画する）
+ * @param options オプション
+ * @returns state（'pending', 'ready'）と状態に応じたノード
+ */
+declare function useDeferUntilDate<T extends ReactNode, P extends ReactNode = ReactNode>(target: T, date: Date | null | undefined, options?: UseDeferUntilDateOptions<P>): DeferRenderingResult<T | P>;
+//#endregion
+export { useDeferUntilDate as default };

package/useDeferUntilDate/useDeferUntilDate.mjs

@@ -0,0 +1,21 @@
+'use client';
+
+import useDeferUntilTimeout from "../useDeferUntilTimeout/useDeferUntilTimeout.mjs";
+import "../useDeferUntilTimeout/index.mjs";
+import { useMemo } from "react";
+
+//#region src/useDeferUntilDate/useDeferUntilDate.tsx
+/**
+* 指定の日時まで描画を遅延させるhook
+* @param target 描画対象のノード
+* @param date 描画する日時（null/undefinedの場合は待たずに描画する）
+* @param options オプション
+* @returns state（'pending', 'ready'）と状態に応じたノード
+*/
+function useDeferUntilDate(target, date, options = {}) {
+	const time = date ? date.getTime() : null;
+	return useDeferUntilTimeout(target, useMemo(() => time != null ? time - Date.now() : null, [time]), options);
+}
+
+//#endregion
+export { useDeferUntilDate as default };

package/useDeferUntilIntersected/index.cjs

@@ -0,0 +1,5 @@
+'use client';
+
+const require_useDeferUntilIntersected_useDeferUntilIntersected = require('./useDeferUntilIntersected.cjs');
+
+module.exports = require_useDeferUntilIntersected_useDeferUntilIntersected;

package/useDeferUntilIntersected/index.d.cts

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

package/useDeferUntilIntersected/index.d.mts

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

package/useDeferUntilIntersected/index.mjs

@@ -0,0 +1,5 @@
+'use client';
+
+import useDeferUntilIntersected from "./useDeferUntilIntersected.mjs";
+
+export { useDeferUntilIntersected as default };

package/useDeferUntilIntersected/types.d.cts

@@ -0,0 +1,31 @@
+import { UseDeferUntilTrueOptions } from "../useDeferUntilTrue/types.cjs";
+import { CSSProperties, ReactNode, RefObject } from "react";
+
+//#region src/useDeferUntilIntersected/types.d.ts
+type UseDeferUntilIntersectedOptions<P extends ReactNode = ReactNode> = UseDeferUntilTrueOptions<P> & IntersectionObserverInit & {
+  /**
+   * 監視するコンテナーの参照
+   * デフォルトはnull（ビューポート）
+   */
+  rootRef?: RefObject<Element | null | undefined>;
+  /**
+   * ビューポートとの交差判定をする基準になるマージン\
+   * CSSのmarginと同じ形式で指定\
+   * 未指定の場合はビューポートの端で判定される
+   */
+  rootMargin?: CSSProperties['margin'];
+  /**
+   * ビューポートに基準となる要素がどの程度の割合入ったら描画するか(0～1)\
+   * デフォルトは0.1（10%）
+   * @default 0.1
+   */
+  threshold?: number;
+  /**
+   * SSR時など、実際の交差状態を判定できない環境での初期値\
+   * デフォルトはfalse
+   * @default false
+   */
+  initialCondition?: boolean;
+};
+//#endregion
+export { UseDeferUntilIntersectedOptions };

package/useDeferUntilIntersected/types.d.mts

@@ -0,0 +1,31 @@
+import { UseDeferUntilTrueOptions } from "../useDeferUntilTrue/types.mjs";
+import { CSSProperties, ReactNode, RefObject } from "react";
+
+//#region src/useDeferUntilIntersected/types.d.ts
+type UseDeferUntilIntersectedOptions<P extends ReactNode = ReactNode> = UseDeferUntilTrueOptions<P> & IntersectionObserverInit & {
+  /**
+   * 監視するコンテナーの参照
+   * デフォルトはnull（ビューポート）
+   */
+  rootRef?: RefObject<Element | null | undefined>;
+  /**
+   * ビューポートとの交差判定をする基準になるマージン\
+   * CSSのmarginと同じ形式で指定\
+   * 未指定の場合はビューポートの端で判定される
+   */
+  rootMargin?: CSSProperties['margin'];
+  /**
+   * ビューポートに基準となる要素がどの程度の割合入ったら描画するか(0～1)\
+   * デフォルトは0.1（10%）
+   * @default 0.1
+   */
+  threshold?: number;
+  /**
+   * SSR時など、実際の交差状態を判定できない環境での初期値\
+   * デフォルトはfalse
+   * @default false
+   */
+  initialCondition?: boolean;
+};
+//#endregion
+export { UseDeferUntilIntersectedOptions };

package/useDeferUntilIntersected/types.mjs

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

package/useDeferUntilIntersected/useDeferUntilIntersected.cjs

@@ -0,0 +1,60 @@
+'use client';
+
+const require_runtime = require('../_virtual/_rolldown/runtime.cjs');
+const require_useDeferUntilTrue_useDeferUntilTrue = require('../useDeferUntilTrue/useDeferUntilTrue.cjs');
+require('../useDeferUntilTrue/index.cjs');
+let react = require("react");
+let _fringeworks_utils_string_unit = require("@fringeworks/utils/string/unit");
+_fringeworks_utils_string_unit = require_runtime.__toESM(_fringeworks_utils_string_unit, 1);
+
+//#region src/useDeferUntilIntersected/useDeferUntilIntersected.tsx
+/**
+* 基準となる要素がビューポートに入るまで描画を遅延させるhook
+* @param target 描画対象のノード
+* @param elementRef 基準となる要素の参照（参照自体がnull/undefinedの場合は待たずに描画する）
+* @param options オプション
+* @returns state（'pending', 'ready'）と状態に応じたノード
+*/
+function useDeferUntilIntersected(target, elementRef, options = {}) {
+	const defaultRootRef = (0, react.useRef)(null);
+	const { rootRef = defaultRootRef, rootMargin, threshold = .1, initialCondition = false, ...opts } = options;
+	const snapshotRef = (0, react.useRef)(initialCondition);
+	const observedElementRef = (0, react.useRef)(null);
+	return require_useDeferUntilTrue_useDeferUntilTrue(target, (0, react.useSyncExternalStore)((0, react.useCallback)((onStoreChange) => {
+		const element = elementRef?.current;
+		const container = rootRef.current;
+		if (observedElementRef.current !== element) {
+			observedElementRef.current = element;
+			if (snapshotRef.current !== initialCondition) {
+				snapshotRef.current = initialCondition;
+				onStoreChange();
+			}
+		}
+		if (!element) return () => {};
+		const observer = new IntersectionObserver((entries) => {
+			const entry = entries[0];
+			if (snapshotRef.current !== entry.isIntersecting) {
+				snapshotRef.current = entry.isIntersecting;
+				onStoreChange();
+			}
+		}, {
+			root: container,
+			rootMargin: (0, _fringeworks_utils_string_unit.default)(rootMargin),
+			threshold
+		});
+		observer.observe(element);
+		return () => {
+			observer.disconnect();
+		};
+	}, [
+		elementRef,
+		elementRef?.current,
+		rootRef.current,
+		threshold,
+		rootMargin,
+		initialCondition
+	]), (0, react.useCallback)(() => !elementRef || snapshotRef.current, [elementRef]), (0, react.useCallback)(() => !elementRef || initialCondition, [elementRef, initialCondition])), opts);
+}
+
+//#endregion
+module.exports = useDeferUntilIntersected;

package/useDeferUntilIntersected/useDeferUntilIntersected.d.cts

@@ -0,0 +1,14 @@
+import { DeferRenderingResult } from "../types.cjs";
+import { UseDeferUntilIntersectedOptions } from "./types.cjs";
+import { ReactNode, RefObject } from "react";
+
+//#region src/useDeferUntilIntersected/useDeferUntilIntersected.d.ts
+/**
+ * 基準となる要素がビューポートに入るまで描画を遅延させるhook
+ * @param target 描画対象のノード
+ * @param elementRef 基準となる要素の参照（参照自体がnull/undefinedの場合は待たずに描画する）
+ * @param options オプション
+ * @returns state（'pending', 'ready'）と状態に応じたノード
+ */
+declare function useDeferUntilIntersected<T extends ReactNode, P extends ReactNode = ReactNode>(target: T, elementRef: RefObject<HTMLElement | null | undefined> | null | undefined, options?: UseDeferUntilIntersectedOptions<P>): DeferRenderingResult<T | P>;
+export = useDeferUntilIntersected;

package/useDeferUntilIntersected/useDeferUntilIntersected.d.mts

@@ -0,0 +1,15 @@
+import { DeferRenderingResult } from "../types.mjs";
+import { UseDeferUntilIntersectedOptions } from "./types.mjs";
+import { ReactNode, RefObject } from "react";
+
+//#region src/useDeferUntilIntersected/useDeferUntilIntersected.d.ts
+/**
+ * 基準となる要素がビューポートに入るまで描画を遅延させるhook
+ * @param target 描画対象のノード
+ * @param elementRef 基準となる要素の参照（参照自体がnull/undefinedの場合は待たずに描画する）
+ * @param options オプション
+ * @returns state（'pending', 'ready'）と状態に応じたノード
+ */
+declare function useDeferUntilIntersected<T extends ReactNode, P extends ReactNode = ReactNode>(target: T, elementRef: RefObject<HTMLElement | null | undefined> | null | undefined, options?: UseDeferUntilIntersectedOptions<P>): DeferRenderingResult<T | P>;
+//#endregion
+export { useDeferUntilIntersected as default };

package/useDeferUntilIntersected/useDeferUntilIntersected.mjs

@@ -0,0 +1,58 @@
+'use client';
+
+import useDeferUntilTrue from "../useDeferUntilTrue/useDeferUntilTrue.mjs";
+import "../useDeferUntilTrue/index.mjs";
+import { useCallback, useRef, useSyncExternalStore } from "react";
+import unit from "@fringeworks/utils/string/unit";
+
+//#region src/useDeferUntilIntersected/useDeferUntilIntersected.tsx
+/**
+* 基準となる要素がビューポートに入るまで描画を遅延させるhook
+* @param target 描画対象のノード
+* @param elementRef 基準となる要素の参照（参照自体がnull/undefinedの場合は待たずに描画する）
+* @param options オプション
+* @returns state（'pending', 'ready'）と状態に応じたノード
+*/
+function useDeferUntilIntersected(target, elementRef, options = {}) {
+	const defaultRootRef = useRef(null);
+	const { rootRef = defaultRootRef, rootMargin, threshold = .1, initialCondition = false, ...opts } = options;
+	const snapshotRef = useRef(initialCondition);
+	const observedElementRef = useRef(null);
+	return useDeferUntilTrue(target, useSyncExternalStore(useCallback((onStoreChange) => {
+		const element = elementRef?.current;
+		const container = rootRef.current;
+		if (observedElementRef.current !== element) {
+			observedElementRef.current = element;
+			if (snapshotRef.current !== initialCondition) {
+				snapshotRef.current = initialCondition;
+				onStoreChange();
+			}
+		}
+		if (!element) return () => {};
+		const observer = new IntersectionObserver((entries) => {
+			const entry = entries[0];
+			if (snapshotRef.current !== entry.isIntersecting) {
+				snapshotRef.current = entry.isIntersecting;
+				onStoreChange();
+			}
+		}, {
+			root: container,
+			rootMargin: unit(rootMargin),
+			threshold
+		});
+		observer.observe(element);
+		return () => {
+			observer.disconnect();
+		};
+	}, [
+		elementRef,
+		elementRef?.current,
+		rootRef.current,
+		threshold,
+		rootMargin,
+		initialCondition
+	]), useCallback(() => !elementRef || snapshotRef.current, [elementRef]), useCallback(() => !elementRef || initialCondition, [elementRef, initialCondition])), opts);
+}
+
+//#endregion
+export { useDeferUntilIntersected as default };

package/useDeferUntilOnReady/index.cjs

@@ -0,0 +1,5 @@
+'use client';
+
+const require_useDeferUntilOnReady_useDeferUntilOnReady = require('./useDeferUntilOnReady.cjs');
+
+module.exports = require_useDeferUntilOnReady_useDeferUntilOnReady;

package/useDeferUntilOnReady/index.d.cts

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

package/useDeferUntilOnReady/index.d.mts

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

package/useDeferUntilOnReady/index.mjs

@@ -0,0 +1,5 @@
+'use client';
+
+import useDeferUntilOnReady from "./useDeferUntilOnReady.mjs";
+
+export { useDeferUntilOnReady as default };

package/useDeferUntilOnReady/types.d.cts

@@ -0,0 +1,23 @@
+import { UseDeferUntilReadyOptions } from "../useDeferUntilReady/types.cjs";
+import { ReactNode } from "react";
+
+//#region src/useDeferUntilOnReady/types.d.ts
+type UseDeferUntilOnReadyOptions<P extends ReactNode = ReactNode, E extends ReactNode = ReactNode> = UseDeferUntilReadyOptions<P, E> & {
+  /**
+   * onReadyのデバウンス時間（ミリ秒）
+   * 未指定の場合は即時処理
+   */
+  onReadyDelay?: number;
+  /**
+   * onFallbackのデバウンス時間（ミリ秒）
+   * 未指定の場合は即時処理
+   */
+  onFallbackDelay?: number;
+  /**
+   * onPendingのデバウンス時間（ミリ秒）
+   * 未指定の場合は即時処理
+   */
+  onPendingDelay?: number;
+};
+//#endregion
+export { UseDeferUntilOnReadyOptions };

package/useDeferUntilOnReady/types.d.mts

@@ -0,0 +1,23 @@
+import { UseDeferUntilReadyOptions } from "../useDeferUntilReady/types.mjs";
+import { ReactNode } from "react";
+
+//#region src/useDeferUntilOnReady/types.d.ts
+type UseDeferUntilOnReadyOptions<P extends ReactNode = ReactNode, E extends ReactNode = ReactNode> = UseDeferUntilReadyOptions<P, E> & {
+  /**
+   * onReadyのデバウンス時間（ミリ秒）
+   * 未指定の場合は即時処理
+   */
+  onReadyDelay?: number;
+  /**
+   * onFallbackのデバウンス時間（ミリ秒）
+   * 未指定の場合は即時処理
+   */
+  onFallbackDelay?: number;
+  /**
+   * onPendingのデバウンス時間（ミリ秒）
+   * 未指定の場合は即時処理
+   */
+  onPendingDelay?: number;
+};
+//#endregion
+export { UseDeferUntilOnReadyOptions };

package/useDeferUntilOnReady/types.mjs

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

package/useDeferUntilOnReady/useDeferUntilOnReady.cjs

@@ -0,0 +1,42 @@
+'use client';
+
+const require_runtime = require('../_virtual/_rolldown/runtime.cjs');
+const require_constants = require('../constants.cjs');
+const require_useDeferUntilReady_useDeferUntilReady = require('../useDeferUntilReady/useDeferUntilReady.cjs');
+require('../useDeferUntilReady/index.cjs');
+let react = require("react");
+let _fringeworks_utils_timer_debounce = require("@fringeworks/utils/timer/debounce");
+_fringeworks_utils_timer_debounce = require_runtime.__toESM(_fringeworks_utils_timer_debounce, 1);
+
+//#region src/useDeferUntilOnReady/useDeferUntilOnReady.tsx
+/**
+* 戻り値として返す`onReady`が実行されるまで描画を遅延させるhook
+* @param target 描画対象のノード
+* @param options オプション
+* @returns state（'pending', 'ready', 'fallback'）と状態に応じたノードと状態変更用のハンドラー
+*/
+function useDeferUntilOnReady(target, options = {}) {
+	const { onReadyDelay, onFallbackDelay, onPendingDelay, ...opts } = options;
+	const [state, setState] = (0, react.useState)(require_constants.RenderingState.pending);
+	const onReady = (0, react.useMemo)(() => {
+		const fn = () => setState(require_constants.RenderingState.ready);
+		return onReadyDelay != null ? (0, _fringeworks_utils_timer_debounce.default)(fn, onReadyDelay) : fn;
+	}, [onReadyDelay]);
+	const onFallback = (0, react.useMemo)(() => {
+		const fn = () => setState(require_constants.RenderingState.fallback);
+		return onFallbackDelay != null ? (0, _fringeworks_utils_timer_debounce.default)(fn, onFallbackDelay) : fn;
+	}, [onFallbackDelay]);
+	const onPending = (0, react.useMemo)(() => {
+		const fn = () => setState(require_constants.RenderingState.pending);
+		return onPendingDelay != null ? (0, _fringeworks_utils_timer_debounce.default)(fn, onPendingDelay) : fn;
+	}, [onPendingDelay]);
+	return {
+		...require_useDeferUntilReady_useDeferUntilReady(target, state, opts),
+		onPending,
+		onFallback,
+		onReady
+	};
+}
+
+//#endregion
+module.exports = useDeferUntilOnReady;

package/useDeferUntilOnReady/useDeferUntilOnReady.d.cts

@@ -0,0 +1,13 @@
+import { DeferRenderingWithHandlersResult } from "../types.cjs";
+import { UseDeferUntilOnReadyOptions } from "./types.cjs";
+import { ReactNode } from "react";
+
+//#region src/useDeferUntilOnReady/useDeferUntilOnReady.d.ts
+/**
+ * 戻り値として返す`onReady`が実行されるまで描画を遅延させるhook
+ * @param target 描画対象のノード
+ * @param options オプション
+ * @returns state（'pending', 'ready', 'fallback'）と状態に応じたノードと状態変更用のハンドラー
+ */
+declare function useDeferUntilOnReady<T extends ReactNode, P extends ReactNode = ReactNode, E extends ReactNode = ReactNode>(target: T, options?: UseDeferUntilOnReadyOptions<P, E>): DeferRenderingWithHandlersResult<T | P | E>;
+export = useDeferUntilOnReady;

package/useDeferUntilOnReady/useDeferUntilOnReady.d.mts

@@ -0,0 +1,14 @@
+import { DeferRenderingWithHandlersResult } from "../types.mjs";
+import { UseDeferUntilOnReadyOptions } from "./types.mjs";
+import { ReactNode } from "react";
+
+//#region src/useDeferUntilOnReady/useDeferUntilOnReady.d.ts
+/**
+ * 戻り値として返す`onReady`が実行されるまで描画を遅延させるhook
+ * @param target 描画対象のノード
+ * @param options オプション
+ * @returns state（'pending', 'ready', 'fallback'）と状態に応じたノードと状態変更用のハンドラー
+ */
+declare function useDeferUntilOnReady<T extends ReactNode, P extends ReactNode = ReactNode, E extends ReactNode = ReactNode>(target: T, options?: UseDeferUntilOnReadyOptions<P, E>): DeferRenderingWithHandlersResult<T | P | E>;
+//#endregion
+export { useDeferUntilOnReady as default };

package/useDeferUntilOnReady/useDeferUntilOnReady.mjs

@@ -0,0 +1,40 @@
+'use client';
+
+import { RenderingState } from "../constants.mjs";
+import useDeferUntilReady from "../useDeferUntilReady/useDeferUntilReady.mjs";
+import "../useDeferUntilReady/index.mjs";
+import { useMemo, useState } from "react";
+import debounce from "@fringeworks/utils/timer/debounce";
+
+//#region src/useDeferUntilOnReady/useDeferUntilOnReady.tsx
+/**
+* 戻り値として返す`onReady`が実行されるまで描画を遅延させるhook
+* @param target 描画対象のノード
+* @param options オプション
+* @returns state（'pending', 'ready', 'fallback'）と状態に応じたノードと状態変更用のハンドラー
+*/
+function useDeferUntilOnReady(target, options = {}) {
+	const { onReadyDelay, onFallbackDelay, onPendingDelay, ...opts } = options;
+	const [state, setState] = useState(RenderingState.pending);
+	const onReady = useMemo(() => {
+		const fn = () => setState(RenderingState.ready);
+		return onReadyDelay != null ? debounce(fn, onReadyDelay) : fn;
+	}, [onReadyDelay]);
+	const onFallback = useMemo(() => {
+		const fn = () => setState(RenderingState.fallback);
+		return onFallbackDelay != null ? debounce(fn, onFallbackDelay) : fn;
+	}, [onFallbackDelay]);
+	const onPending = useMemo(() => {
+		const fn = () => setState(RenderingState.pending);
+		return onPendingDelay != null ? debounce(fn, onPendingDelay) : fn;
+	}, [onPendingDelay]);
+	return {
+		...useDeferUntilReady(target, state, opts),
+		onPending,
+		onFallback,
+		onReady
+	};
+}
+
+//#endregion
+export { useDeferUntilOnReady as default };

package/useDeferUntilReady/index.cjs

@@ -0,0 +1,5 @@
+'use client';
+
+const require_useDeferUntilReady_useDeferUntilReady = require('./useDeferUntilReady.cjs');
+
+module.exports = require_useDeferUntilReady_useDeferUntilReady;

package/useDeferUntilReady/index.d.cts

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

package/useDeferUntilReady/index.d.mts

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

package/useDeferUntilReady/index.mjs

@@ -0,0 +1,5 @@
+'use client';
+
+import useDeferUntilReady from "./useDeferUntilReady.mjs";
+
+export { useDeferUntilReady as default };

package/useDeferUntilReady/types.d.cts

@@ -0,0 +1,7 @@
+import { DeferRenderingWithFallbackOptionsBase } from "../types.cjs";
+import { ReactNode } from "react";
+
+//#region src/useDeferUntilReady/types.d.ts
+type UseDeferUntilReadyOptions<P extends ReactNode = ReactNode, E extends ReactNode = ReactNode> = DeferRenderingWithFallbackOptionsBase<P, E>;
+//#endregion
+export { UseDeferUntilReadyOptions };

package/useDeferUntilReady/types.d.mts

@@ -0,0 +1,7 @@
+import { DeferRenderingWithFallbackOptionsBase } from "../types.mjs";
+import { ReactNode } from "react";
+
+//#region src/useDeferUntilReady/types.d.ts
+type UseDeferUntilReadyOptions<P extends ReactNode = ReactNode, E extends ReactNode = ReactNode> = DeferRenderingWithFallbackOptionsBase<P, E>;
+//#endregion
+export { UseDeferUntilReadyOptions };

package/useDeferUntilReady/types.mjs

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