@fringeworks/react-defer-rendering 0.8.0 → 0.9.0

package/useDeferUntilWebFontReady/index.mjs

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

package/useDeferUntilWebFontReady/types.cjs

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

package/useDeferUntilWebFontReady/types.d.cts

@@ -1,13 +1,13 @@
 import { RenderingState } from "../constants.cjs";
 import { UseDeferUntilReadyOptions } from "../useDeferUntilReady/types.cjs";
+import "../useDeferUntilReady/index.cjs";
 import { ReactNode } from "react";
 import { WebFontMatchOptions } from "@fringeworks/web-font-observer";
-
 //#region src/useDeferUntilWebFontReady/types.d.ts
 /**
  * 太さ等を指定して待つWebフォント
  */
-type WebFont = WebFontMatchOptions & {
+export type WebFont = WebFontMatchOptions & {
   /**
    * フォントファミリー
    */
@@ -17,13 +17,13 @@ type WebFont = WebFontMatchOptions & {
  * 待つWebフォント\
  * フォントファミリーのみで良い場合は文字列で指定できる
  */
-type WebFontTarget = string | WebFont;
+export type WebFontTarget = string | WebFont;
 /**
  * 待つWebフォントの指定\
  * 複数のWebフォントを待つ場合は配列で指定する。配列内のnull/undefinedは無視される
  */
-type WebFontTargets = WebFontTarget | readonly (WebFontTarget | null | undefined)[];
-type UseDeferUntilWebFontReadyOptions<P extends ReactNode = ReactNode, E extends ReactNode = ReactNode> = UseDeferUntilReadyOptions<P, E> & {
+export type WebFontTargets = WebFontTarget | readonly (WebFontTarget | null | undefined)[];
+export type UseDeferUntilWebFontReadyOptions<P extends ReactNode = ReactNode, E extends ReactNode = ReactNode> = UseDeferUntilReadyOptions<P, E> & {
   /**
    * Webフォントが利用可能にならなかった場合に失敗とみなすまでの時間（ミリ秒）\
    * Webフォントごとに適用されるが、すべて並行して待つため実質的に全体の待ち時間となる\
@@ -45,5 +45,4 @@ type UseDeferUntilWebFontReadyOptions<P extends ReactNode = ReactNode, E extends
    */
   initialState?: RenderingState;
 };
-//#endregion
-export { UseDeferUntilWebFontReadyOptions, WebFont, WebFontTarget, WebFontTargets };
+//#endregion

package/useDeferUntilWebFontReady/types.d.mts

@@ -1,13 +1,13 @@
 import { RenderingState } from "../constants.mjs";
 import { UseDeferUntilReadyOptions } from "../useDeferUntilReady/types.mjs";
+import "../useDeferUntilReady/index.mjs";
 import { ReactNode } from "react";
 import { WebFontMatchOptions } from "@fringeworks/web-font-observer";
-
 //#region src/useDeferUntilWebFontReady/types.d.ts
 /**
  * 太さ等を指定して待つWebフォント
  */
-type WebFont = WebFontMatchOptions & {
+export type WebFont = WebFontMatchOptions & {
   /**
    * フォントファミリー
    */
@@ -17,13 +17,13 @@ type WebFont = WebFontMatchOptions & {
  * 待つWebフォント\
  * フォントファミリーのみで良い場合は文字列で指定できる
  */
-type WebFontTarget = string | WebFont;
+export type WebFontTarget = string | WebFont;
 /**
  * 待つWebフォントの指定\
  * 複数のWebフォントを待つ場合は配列で指定する。配列内のnull/undefinedは無視される
  */
-type WebFontTargets = WebFontTarget | readonly (WebFontTarget | null | undefined)[];
-type UseDeferUntilWebFontReadyOptions<P extends ReactNode = ReactNode, E extends ReactNode = ReactNode> = UseDeferUntilReadyOptions<P, E> & {
+export type WebFontTargets = WebFontTarget | readonly (WebFontTarget | null | undefined)[];
+export type UseDeferUntilWebFontReadyOptions<P extends ReactNode = ReactNode, E extends ReactNode = ReactNode> = UseDeferUntilReadyOptions<P, E> & {
   /**
    * Webフォントが利用可能にならなかった場合に失敗とみなすまでの時間（ミリ秒）\
    * Webフォントごとに適用されるが、すべて並行して待つため実質的に全体の待ち時間となる\
@@ -45,5 +45,4 @@ type UseDeferUntilWebFontReadyOptions<P extends ReactNode = ReactNode, E extends
    */
   initialState?: RenderingState;
 };
-//#endregion
-export { UseDeferUntilWebFontReadyOptions, WebFont, WebFontTarget, WebFontTargets };
+//#endregion

package/useDeferUntilWebFontReady/useDeferUntilWebFontReady.cjs

@@ -1,10 +1,13 @@
 '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');
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
+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_react_utils_hooks_useLatestRef = require("@fringeworks/react-utils/hooks/useLatestRef");
+_fringeworks_react_utils_hooks_useLatestRef = require_runtime.__toESM(_fringeworks_react_utils_hooks_useLatestRef, 1);
 let _fringeworks_web_font_observer_isWebFontLoaded = require("@fringeworks/web-font-observer/isWebFontLoaded");
 _fringeworks_web_font_observer_isWebFontLoaded = require_runtime.__toESM(_fringeworks_web_font_observer_isWebFontLoaded, 1);
 let _fringeworks_web_font_observer_waitForWebFont = require("@fringeworks/web-font-observer/waitForWebFont");
@@ -22,23 +25,24 @@ _fringeworks_web_font_observer_waitForWebFont = require_runtime.__toESM(_fringew
 */
 function useDeferUntilWebFontReady(target, fonts, options = {}) {
 	const { timeout, loader, initialState = require_constants.RenderingState.pending, ...opts } = options;
-	const normalizedFonts = normalizeFonts(fonts);
-	const fontsKey = JSON.stringify(normalizedFonts);
-	const webFonts = (0, react.useMemo)(() => normalizedFonts, [fontsKey]);
-	const loaderRef = (0, react.useRef)(loader);
-	loaderRef.current = loader;
+	const fontsKey = JSON.stringify(normalizeFonts(fonts));
+	const webFonts = (0, react.useMemo)(() => JSON.parse(fontsKey), [fontsKey]);
+	const loaderRef = (0, _fringeworks_react_utils_hooks_useLatestRef.default)(loader);
 	const [result, setResult] = (0, react.useState)(() => ({
 		key: fontsKey,
 		state: initialState
 	}));
-	const isLoaded = (0, react.useSyncExternalStore)((0, react.useCallback)((onStoreChange) => {
+	const subscribe = (0, react.useCallback)((onStoreChange) => {
 		const fontFaceSet = typeof document === "undefined" ? void 0 : document.fonts;
 		if (webFonts.length === 0 || !fontFaceSet) return () => {};
 		fontFaceSet.addEventListener("loadingdone", onStoreChange);
 		return () => {
 			fontFaceSet.removeEventListener("loadingdone", onStoreChange);
 		};
-	}, [webFonts]), (0, react.useCallback)(() => webFonts.every(({ family, ...rest }) => (0, _fringeworks_web_font_observer_isWebFontLoaded.default)(family, rest)), [webFonts]), (0, react.useCallback)(() => webFonts.length === 0, [webFonts]));
+	}, [webFonts]);
+	const getSnapshot = (0, react.useCallback)(() => webFonts.every(({ family, ...rest }) => (0, _fringeworks_web_font_observer_isWebFontLoaded.default)(family, rest)), [webFonts]);
+	const getServerSnapshot = (0, react.useCallback)(() => webFonts.length === 0, [webFonts]);
+	const isLoaded = (0, react.useSyncExternalStore)(subscribe, getSnapshot, getServerSnapshot);
 	(0, react.useEffect)(() => {
 		if (webFonts.length === 0) return;
 		const controller = new AbortController();
@@ -62,12 +66,17 @@ function useDeferUntilWebFontReady(target, fonts, options = {}) {
 		return () => {
 			controller.abort();
 		};
-	}, [webFonts, timeout]);
+	}, [
+		webFonts,
+		fontsKey,
+		timeout,
+		loaderRef
+	]);
 	let state;
 	if (isLoaded) state = require_constants.RenderingState.ready;
 	else if (result.key === fontsKey) state = result.state;
 	else state = require_constants.RenderingState.pending;
-	return require_useDeferUntilReady_useDeferUntilReady(target, state, opts);
+	return require_useDeferUntilReady_useDeferUntilReady.default(target, state, opts);
 }
 /**
 * 待つWebフォントの指定を、比較可能な形の配列に正規化する
@@ -90,4 +99,4 @@ function normalizeFonts(fonts) {
 }
 
 //#endregion
-module.exports = useDeferUntilWebFontReady;
+exports.default = useDeferUntilWebFontReady;

package/useDeferUntilWebFontReady/useDeferUntilWebFontReady.d.cts

@@ -1,7 +1,6 @@
 import { DeferRenderingResult } from "../types.cjs";
 import { UseDeferUntilWebFontReadyOptions, WebFontTargets } from "./types.cjs";
 import { ReactNode } from "react";
-
 //#region src/useDeferUntilWebFontReady/useDeferUntilWebFontReady.d.ts
 /**
  * 指定のWebフォントがすべて利用可能になるまで描画を遅延させるhook\

package/useDeferUntilWebFontReady/useDeferUntilWebFontReady.d.mts

@@ -1,7 +1,6 @@
 import { DeferRenderingResult } from "../types.mjs";
 import { UseDeferUntilWebFontReadyOptions, WebFontTargets } from "./types.mjs";
 import { ReactNode } from "react";
-
 //#region src/useDeferUntilWebFontReady/useDeferUntilWebFontReady.d.ts
 /**
  * 指定のWebフォントがすべて利用可能になるまで描画を遅延させるhook\
@@ -12,6 +11,5 @@ import { ReactNode } from "react";
  * @param options オプション
  * @returns state（'pending', 'ready', 'fallback'）と状態に応じたノード
  */
-declare function useDeferUntilWebFontReady<T extends ReactNode, P extends ReactNode = ReactNode, E extends ReactNode = ReactNode>(target: T, fonts: WebFontTargets | null | undefined, options?: UseDeferUntilWebFontReadyOptions<P, E>): DeferRenderingResult<T | P | E>;
-//#endregion
-export { useDeferUntilWebFontReady as default };
+export default function useDeferUntilWebFontReady<T extends ReactNode, P extends ReactNode = ReactNode, E extends ReactNode = ReactNode>(target: T, fonts: WebFontTargets | null | undefined, options?: UseDeferUntilWebFontReadyOptions<P, E>): DeferRenderingResult<T | P | E>;
+//#endregion

package/useDeferUntilWebFontReady/useDeferUntilWebFontReady.mjs

@@ -3,7 +3,8 @@
 import { RenderingState } from "../constants.mjs";
 import useDeferUntilReady from "../useDeferUntilReady/useDeferUntilReady.mjs";
 import "../useDeferUntilReady/index.mjs";
-import { useCallback, useEffect, useMemo, useRef, useState, useSyncExternalStore } from "react";
+import { useCallback, useEffect, useMemo, useState, useSyncExternalStore } from "react";
+import useLatestRef from "@fringeworks/react-utils/hooks/useLatestRef";
 import isWebFontLoaded from "@fringeworks/web-font-observer/isWebFontLoaded";
 import waitForWebFont from "@fringeworks/web-font-observer/waitForWebFont";
 
@@ -19,23 +20,24 @@ import waitForWebFont from "@fringeworks/web-font-observer/waitForWebFont";
 */
 function useDeferUntilWebFontReady(target, fonts, options = {}) {
 	const { timeout, loader, initialState = RenderingState.pending, ...opts } = options;
-	const normalizedFonts = normalizeFonts(fonts);
-	const fontsKey = JSON.stringify(normalizedFonts);
-	const webFonts = useMemo(() => normalizedFonts, [fontsKey]);
-	const loaderRef = useRef(loader);
-	loaderRef.current = loader;
+	const fontsKey = JSON.stringify(normalizeFonts(fonts));
+	const webFonts = useMemo(() => JSON.parse(fontsKey), [fontsKey]);
+	const loaderRef = useLatestRef(loader);
 	const [result, setResult] = useState(() => ({
 		key: fontsKey,
 		state: initialState
 	}));
-	const isLoaded = useSyncExternalStore(useCallback((onStoreChange) => {
+	const subscribe = useCallback((onStoreChange) => {
 		const fontFaceSet = typeof document === "undefined" ? void 0 : document.fonts;
 		if (webFonts.length === 0 || !fontFaceSet) return () => {};
 		fontFaceSet.addEventListener("loadingdone", onStoreChange);
 		return () => {
 			fontFaceSet.removeEventListener("loadingdone", onStoreChange);
 		};
-	}, [webFonts]), useCallback(() => webFonts.every(({ family, ...rest }) => isWebFontLoaded(family, rest)), [webFonts]), useCallback(() => webFonts.length === 0, [webFonts]));
+	}, [webFonts]);
+	const getSnapshot = useCallback(() => webFonts.every(({ family, ...rest }) => isWebFontLoaded(family, rest)), [webFonts]);
+	const getServerSnapshot = useCallback(() => webFonts.length === 0, [webFonts]);
+	const isLoaded = useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
 	useEffect(() => {
 		if (webFonts.length === 0) return;
 		const controller = new AbortController();
@@ -59,7 +61,12 @@ function useDeferUntilWebFontReady(target, fonts, options = {}) {
 		return () => {
 			controller.abort();
 		};
-	}, [webFonts, timeout]);
+	}, [
+		webFonts,
+		fontsKey,
+		timeout,
+		loaderRef
+	]);
 	let state;
 	if (isLoaded) state = RenderingState.ready;
 	else if (result.key === fontsKey) state = result.state;

package/useDeferUntilScrolled/index.cjs

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

package/useDeferUntilScrolled/index.d.cts

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

package/useDeferUntilScrolled/index.d.mts

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

package/useDeferUntilScrolled/index.mjs

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

package/useDeferUntilScrolled/types.d.cts

@@ -1,29 +0,0 @@
-import { UseDeferUntilTrueOptions } from "../useDeferUntilTrue/types.cjs";
-import { ReactNode, RefObject } from "react";
-
-//#region src/useDeferUntilScrolled/types.d.ts
-type UseDeferUntilScrolledOptions<P extends ReactNode = ReactNode> = UseDeferUntilTrueOptions<P> & {
-  /**
-   * 監視するコンテナーの参照
-   */
-  rootRef?: RefObject<Element | null | undefined>;
-  rootMargin?: number;
-  /**
-   * スクロールイベントのデバウンス時間（ミリ秒）
-   * デフォルトは100ms
-   * @default 100
-   */
-  detectionDelay?: number;
-  /**
-   * 検知するスクロールの方向
-   */
-  direction?: 'vertical' | 'horizontal';
-  /**
-   * SSR時など、実際のスクロール位置を判定できない環境での初期値\
-   * デフォルトはfalse
-   * @default false
-   */
-  initialCondition?: boolean;
-};
-//#endregion
-export { UseDeferUntilScrolledOptions };

package/useDeferUntilScrolled/types.d.mts

@@ -1,29 +0,0 @@
-import { UseDeferUntilTrueOptions } from "../useDeferUntilTrue/types.mjs";
-import { ReactNode, RefObject } from "react";
-
-//#region src/useDeferUntilScrolled/types.d.ts
-type UseDeferUntilScrolledOptions<P extends ReactNode = ReactNode> = UseDeferUntilTrueOptions<P> & {
-  /**
-   * 監視するコンテナーの参照
-   */
-  rootRef?: RefObject<Element | null | undefined>;
-  rootMargin?: number;
-  /**
-   * スクロールイベントのデバウンス時間（ミリ秒）
-   * デフォルトは100ms
-   * @default 100
-   */
-  detectionDelay?: number;
-  /**
-   * 検知するスクロールの方向
-   */
-  direction?: 'vertical' | 'horizontal';
-  /**
-   * SSR時など、実際のスクロール位置を判定できない環境での初期値\
-   * デフォルトはfalse
-   * @default false
-   */
-  initialCondition?: boolean;
-};
-//#endregion
-export { UseDeferUntilScrolledOptions };

package/useDeferUntilScrolled/types.mjs

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

package/useDeferUntilScrolled/useDeferUntilScrolled.cjs

@@ -1,94 +0,0 @@
-'use client';
-
-const require_runtime = require('../_virtual/_rolldown/runtime.cjs');
-const require_useDeferUntilTrue_useDeferUntilTrue = require('../useDeferUntilTrue/useDeferUntilTrue.cjs');
-require('../useDeferUntilTrue/index.cjs');
-let _fringeworks_react_utils_hooks_useIsMounted = require("@fringeworks/react-utils/hooks/useIsMounted");
-_fringeworks_react_utils_hooks_useIsMounted = require_runtime.__toESM(_fringeworks_react_utils_hooks_useIsMounted, 1);
-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/useDeferUntilScrolled/useDeferUntilScrolled.tsx
-/**
-* 縦または横スクロール位置に基づいて描画を遅延させるhook
-* @param target 描画対象のノード
-* @param elementRef 基準となる要素の参照（参照自体がnull/undefinedの場合は待たずに描画する）
-* @param options オプション
-* @returns state（'pending', 'ready'）と状態に応じたノード
-*/
-function useDeferUntilScrolled(target, elementRef, options = {}) {
-	const defaultRootRef = (0, react.useRef)(null);
-	const { rootRef = defaultRootRef, rootMargin = 0, detectionDelay = 100, preserveOnceReady, direction = "vertical", initialCondition = false, ...opts } = options;
-	const [condition, setCondition] = (0, react.useState)(!elementRef || initialCondition);
-	const isMounted = (0, _fringeworks_react_utils_hooks_useIsMounted.default)();
-	const isFirstRun = (0, react.useRef)(true);
-	(0, react.useEffect)(() => {
-		const isFirst = isFirstRun.current;
-		isFirstRun.current = false;
-		if (!elementRef) {
-			setCondition(true);
-			return;
-		}
-		if (!isFirst) setCondition(false);
-		const element = elementRef.current;
-		if (!element) return;
-		const container = rootRef.current;
-		const scrollTarget = container ?? window;
-		const getRootBounds = () => {
-			if (container) {
-				const rect = container.getBoundingClientRect();
-				const top = rect.top + container.clientTop;
-				const left = rect.left + container.clientLeft;
-				return {
-					top,
-					left,
-					bottom: top + container.clientHeight,
-					right: left + container.clientWidth
-				};
-			}
-			const viewport = document.documentElement;
-			return {
-				top: 0,
-				left: 0,
-				bottom: viewport.clientHeight,
-				right: viewport.clientWidth
-			};
-		};
-		const checkVisible = () => {
-			const rect = element.getBoundingClientRect();
-			const bounds = getRootBounds();
-			return direction === "vertical" ? rect.top - rootMargin < bounds.bottom && rect.bottom + rootMargin >= bounds.top : rect.left - rootMargin < bounds.right && rect.right + rootMargin >= bounds.left;
-		};
-		if (checkVisible()) {
-			setCondition(true);
-			if (preserveOnceReady) return;
-		}
-		const debouncedHandleScroll = (0, _fringeworks_utils_timer_debounce.default)(() => {
-			if (!isMounted()) return;
-			const isVisible = checkVisible();
-			setCondition(isVisible);
-			if (preserveOnceReady && isVisible) scrollTarget.removeEventListener("scroll", debouncedHandleScroll);
-		}, detectionDelay);
-		scrollTarget.addEventListener("scroll", debouncedHandleScroll, { passive: true });
-		return () => {
-			debouncedHandleScroll.cancel();
-			scrollTarget.removeEventListener("scroll", debouncedHandleScroll);
-		};
-	}, [
-		elementRef,
-		elementRef?.current,
-		rootRef.current,
-		rootMargin,
-		detectionDelay,
-		direction,
-		preserveOnceReady
-	]);
-	return require_useDeferUntilTrue_useDeferUntilTrue(target, condition, {
-		preserveOnceReady,
-		...opts
-	});
-}
-
-//#endregion
-module.exports = useDeferUntilScrolled;

package/useDeferUntilScrolled/useDeferUntilScrolled.d.cts

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

package/useDeferUntilScrolled/useDeferUntilScrolled.d.mts

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

package/useDeferUntilScrolled/useDeferUntilScrolled.mjs

@@ -1,91 +0,0 @@
-'use client';
-
-import useDeferUntilTrue from "../useDeferUntilTrue/useDeferUntilTrue.mjs";
-import "../useDeferUntilTrue/index.mjs";
-import useIsMounted from "@fringeworks/react-utils/hooks/useIsMounted";
-import { useEffect, useRef, useState } from "react";
-import debounce from "@fringeworks/utils/timer/debounce";
-
-//#region src/useDeferUntilScrolled/useDeferUntilScrolled.tsx
-/**
-* 縦または横スクロール位置に基づいて描画を遅延させるhook
-* @param target 描画対象のノード
-* @param elementRef 基準となる要素の参照（参照自体がnull/undefinedの場合は待たずに描画する）
-* @param options オプション
-* @returns state（'pending', 'ready'）と状態に応じたノード
-*/
-function useDeferUntilScrolled(target, elementRef, options = {}) {
-	const defaultRootRef = useRef(null);
-	const { rootRef = defaultRootRef, rootMargin = 0, detectionDelay = 100, preserveOnceReady, direction = "vertical", initialCondition = false, ...opts } = options;
-	const [condition, setCondition] = useState(!elementRef || initialCondition);
-	const isMounted = useIsMounted();
-	const isFirstRun = useRef(true);
-	useEffect(() => {
-		const isFirst = isFirstRun.current;
-		isFirstRun.current = false;
-		if (!elementRef) {
-			setCondition(true);
-			return;
-		}
-		if (!isFirst) setCondition(false);
-		const element = elementRef.current;
-		if (!element) return;
-		const container = rootRef.current;
-		const scrollTarget = container ?? window;
-		const getRootBounds = () => {
-			if (container) {
-				const rect = container.getBoundingClientRect();
-				const top = rect.top + container.clientTop;
-				const left = rect.left + container.clientLeft;
-				return {
-					top,
-					left,
-					bottom: top + container.clientHeight,
-					right: left + container.clientWidth
-				};
-			}
-			const viewport = document.documentElement;
-			return {
-				top: 0,
-				left: 0,
-				bottom: viewport.clientHeight,
-				right: viewport.clientWidth
-			};
-		};
-		const checkVisible = () => {
-			const rect = element.getBoundingClientRect();
-			const bounds = getRootBounds();
-			return direction === "vertical" ? rect.top - rootMargin < bounds.bottom && rect.bottom + rootMargin >= bounds.top : rect.left - rootMargin < bounds.right && rect.right + rootMargin >= bounds.left;
-		};
-		if (checkVisible()) {
-			setCondition(true);
-			if (preserveOnceReady) return;
-		}
-		const debouncedHandleScroll = debounce(() => {
-			if (!isMounted()) return;
-			const isVisible = checkVisible();
-			setCondition(isVisible);
-			if (preserveOnceReady && isVisible) scrollTarget.removeEventListener("scroll", debouncedHandleScroll);
-		}, detectionDelay);
-		scrollTarget.addEventListener("scroll", debouncedHandleScroll, { passive: true });
-		return () => {
-			debouncedHandleScroll.cancel();
-			scrollTarget.removeEventListener("scroll", debouncedHandleScroll);
-		};
-	}, [
-		elementRef,
-		elementRef?.current,
-		rootRef.current,
-		rootMargin,
-		detectionDelay,
-		direction,
-		preserveOnceReady
-	]);
-	return useDeferUntilTrue(target, condition, {
-		preserveOnceReady,
-		...opts
-	});
-}
-
-//#endregion
-export { useDeferUntilScrolled as default };