@fringeworks/react-defer-rendering 0.8.1 → 0.9.0

package/useDeferUntilCallThreshold/useDeferUntilCallThreshold.mjs

@@ -14,35 +14,47 @@ import { useCallback, useRef } from "react";
 function useDeferUntilCallThreshold(target, options = {}) {
 	const { onPendingCount = 1, onFallbackCount = 1, onReadyCount = 1, ...opts } = options;
 	const { onPending: handlePending, onFallback: handleFallback, onReady: handleReady, ...rest } = useDeferUntilOnReady(target, opts);
-	const pendingContRef = useRef(0);
-	const fallbackContRef = useRef(0);
-	const readyContRef = useRef(0);
+	const pendingCountRef = useRef(0);
+	const fallbackCountRef = useRef(0);
+	const readyCountRef = useRef(0);
 	const reset = useCallback(() => {
-		pendingContRef.current = 0;
-		fallbackContRef.current = 0;
-		readyContRef.current = 0;
+		pendingCountRef.current = 0;
+		fallbackCountRef.current = 0;
+		readyCountRef.current = 0;
 	}, []);
 	const onPending = useCallback(() => {
-		pendingContRef.current += 1;
-		if (onPendingCount <= pendingContRef.current) {
+		pendingCountRef.current += 1;
+		if (onPendingCount <= pendingCountRef.current) {
 			reset();
 			handlePending();
 		}
-	}, [handlePending, onPendingCount]);
+	}, [
+		handlePending,
+		onPendingCount,
+		reset
+	]);
 	const onFallback = useCallback(() => {
-		fallbackContRef.current += 1;
-		if (onFallbackCount <= fallbackContRef.current) {
+		fallbackCountRef.current += 1;
+		if (onFallbackCount <= fallbackCountRef.current) {
 			reset();
 			handleFallback();
 		}
-	}, [handleFallback, onFallbackCount]);
+	}, [
+		handleFallback,
+		onFallbackCount,
+		reset
+	]);
 	const onReady = useCallback(() => {
-		readyContRef.current += 1;
-		if (onReadyCount <= readyContRef.current) {
+		readyCountRef.current += 1;
+		if (onReadyCount <= readyCountRef.current) {
 			reset();
 			handleReady();
 		}
-	}, [handleReady, onReadyCount]);
+	}, [
+		handleReady,
+		onReadyCount,
+		reset
+	]);
 	return {
 		...rest,
 		onPending,

package/useDeferUntilChange/index.cjs

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

package/useDeferUntilChange/index.d.cts

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

package/useDeferUntilChange/index.d.mts

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

package/useDeferUntilChange/index.mjs

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

package/useDeferUntilChange/types.cjs

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

package/useDeferUntilChange/types.d.cts

@@ -1,7 +1,6 @@
 import { UseDeferUntilTrueOptions } from "../useDeferUntilTrue/types.cjs";
+import "../useDeferUntilTrue/index.cjs";
 import { ReactNode } from "react";
-
 //#region src/useDeferUntilChange/types.d.ts
-type UseDeferUntilChangeOptions<P extends ReactNode = ReactNode> = UseDeferUntilTrueOptions<P>;
-//#endregion
-export { UseDeferUntilChangeOptions };
+export type UseDeferUntilChangeOptions<P extends ReactNode = ReactNode> = UseDeferUntilTrueOptions<P>;
+//#endregion

package/useDeferUntilChange/types.d.mts

@@ -1,7 +1,6 @@
 import { UseDeferUntilTrueOptions } from "../useDeferUntilTrue/types.mjs";
+import "../useDeferUntilTrue/index.mjs";
 import { ReactNode } from "react";
-
 //#region src/useDeferUntilChange/types.d.ts
-type UseDeferUntilChangeOptions<P extends ReactNode = ReactNode> = UseDeferUntilTrueOptions<P>;
-//#endregion
-export { UseDeferUntilChangeOptions };
+export type UseDeferUntilChangeOptions<P extends ReactNode = ReactNode> = UseDeferUntilTrueOptions<P>;
+//#endregion

package/useDeferUntilChange/useDeferUntilChange.cjs

@@ -1,10 +1,8 @@
 '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);
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
+const require_useDeferUntilTrue_useDeferUntilTrue = require("../useDeferUntilTrue/useDeferUntilTrue.cjs");
+require("../useDeferUntilTrue/index.cjs");
 let react = require("react");
 
 //#region src/useDeferUntilChange/useDeferUntilChange.tsx
@@ -18,13 +16,12 @@ const NO_VALUE = Symbol("NO_VALUE");
 */
 function useDeferUntilChange(target, value, options = {}) {
 	const [prevValue, setPrevValue] = (0, react.useState)(NO_VALUE);
-	const isMounted = (0, _fringeworks_react_utils_hooks_useIsMounted.default)();
-	const result = require_useDeferUntilTrue_useDeferUntilTrue(target, prevValue === value, options);
+	const result = require_useDeferUntilTrue_useDeferUntilTrue.default(target, Object.is(prevValue, value), options);
 	(0, react.useEffect)(() => {
-		if (isMounted()) setPrevValue(value);
+		setPrevValue(value);
 	}, [value]);
 	return result;
 }
 
 //#endregion
-module.exports = useDeferUntilChange;
+exports.default = useDeferUntilChange;

package/useDeferUntilChange/useDeferUntilChange.d.cts

@@ -1,7 +1,6 @@
 import { DeferRenderingResult } from "../types.cjs";
 import { UseDeferUntilChangeOptions } from "./types.cjs";
 import { ReactNode } from "react";
-
 //#region src/useDeferUntilChange/useDeferUntilChange.d.ts
 /**
  * 値が変更されるまで描画を遅延させるhook

package/useDeferUntilChange/useDeferUntilChange.d.mts

@@ -1,7 +1,6 @@
 import { DeferRenderingResult } from "../types.mjs";
 import { UseDeferUntilChangeOptions } from "./types.mjs";
 import { ReactNode } from "react";
-
 //#region src/useDeferUntilChange/useDeferUntilChange.d.ts
 /**
  * 値が変更されるまで描画を遅延させるhook
@@ -10,6 +9,5 @@ import { ReactNode } from "react";
  * @param options オプション
  * @returns state（'pending', 'ready'）と状態に応じたノード
  */
-declare function useDeferUntilChange<T extends ReactNode, P extends ReactNode = ReactNode>(target: T, value: unknown, options?: UseDeferUntilChangeOptions<P>): DeferRenderingResult<T | P>;
-//#endregion
-export { useDeferUntilChange as default };
+export default function useDeferUntilChange<T extends ReactNode, P extends ReactNode = ReactNode>(target: T, value: unknown, options?: UseDeferUntilChangeOptions<P>): DeferRenderingResult<T | P>;
+//#endregion

package/useDeferUntilChange/useDeferUntilChange.mjs

@@ -2,7 +2,6 @@
 
 import useDeferUntilTrue from "../useDeferUntilTrue/useDeferUntilTrue.mjs";
 import "../useDeferUntilTrue/index.mjs";
-import useIsMounted from "@fringeworks/react-utils/hooks/useIsMounted";
 import { useEffect, useState } from "react";
 
 //#region src/useDeferUntilChange/useDeferUntilChange.tsx
@@ -16,10 +15,9 @@ const NO_VALUE = Symbol("NO_VALUE");
 */
 function useDeferUntilChange(target, value, options = {}) {
 	const [prevValue, setPrevValue] = useState(NO_VALUE);
-	const isMounted = useIsMounted();
-	const result = useDeferUntilTrue(target, prevValue === value, options);
+	const result = useDeferUntilTrue(target, Object.is(prevValue, value), options);
 	useEffect(() => {
-		if (isMounted()) setPrevValue(value);
+		setPrevValue(value);
 	}, [value]);
 	return result;
 }

package/useDeferUntilDate/index.cjs

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

package/useDeferUntilDate/index.d.cts

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

package/useDeferUntilDate/index.d.mts

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

package/useDeferUntilDate/index.mjs

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

package/useDeferUntilDate/types.cjs

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

package/useDeferUntilDate/types.d.cts

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

package/useDeferUntilDate/types.d.mts

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

package/useDeferUntilDate/useDeferUntilDate.cjs

@@ -1,8 +1,12 @@
 'use client';
 
-const require_useDeferUntilTimeout_useDeferUntilTimeout = require('../useDeferUntilTimeout/useDeferUntilTimeout.cjs');
-require('../useDeferUntilTimeout/index.cjs');
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
+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_timer_setLongTimeout = require("@fringeworks/utils/timer/setLongTimeout");
+_fringeworks_utils_timer_setLongTimeout = require_runtime.__toESM(_fringeworks_utils_timer_setLongTimeout, 1);
 
 //#region src/useDeferUntilDate/useDeferUntilDate.tsx
 /**
@@ -14,8 +18,13 @@ let react = require("react");
 */
 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);
+	const [reachedTime, setReachedTime] = (0, react.useState)(() => time != null && time <= Date.now() ? time : null);
+	(0, react.useEffect)(() => {
+		if (time == null) return;
+		return (0, _fringeworks_utils_timer_setLongTimeout.default)(() => setReachedTime(time), Math.max(0, time - Date.now()));
+	}, [time]);
+	return require_useDeferUntilTrue_useDeferUntilTrue.default(target, time == null || reachedTime === time, options);
 }
 
 //#endregion
-module.exports = useDeferUntilDate;
+exports.default = useDeferUntilDate;

package/useDeferUntilDate/useDeferUntilDate.d.cts

@@ -1,7 +1,6 @@
 import { DeferRenderingResult } from "../types.cjs";
 import { UseDeferUntilDateOptions } from "./types.cjs";
 import { ReactNode } from "react";
-
 //#region src/useDeferUntilDate/useDeferUntilDate.d.ts
 /**
  * 指定の日時まで描画を遅延させるhook

package/useDeferUntilDate/useDeferUntilDate.d.mts

@@ -1,7 +1,6 @@
 import { DeferRenderingResult } from "../types.mjs";
 import { UseDeferUntilDateOptions } from "./types.mjs";
 import { ReactNode } from "react";
-
 //#region src/useDeferUntilDate/useDeferUntilDate.d.ts
 /**
  * 指定の日時まで描画を遅延させるhook
@@ -10,6 +9,5 @@ import { ReactNode } from "react";
  * @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 };
+export default function useDeferUntilDate<T extends ReactNode, P extends ReactNode = ReactNode>(target: T, date: Date | null | undefined, options?: UseDeferUntilDateOptions<P>): DeferRenderingResult<T | P>;
+//#endregion

package/useDeferUntilDate/useDeferUntilDate.mjs

@@ -1,8 +1,9 @@
 'use client';
 
-import useDeferUntilTimeout from "../useDeferUntilTimeout/useDeferUntilTimeout.mjs";
-import "../useDeferUntilTimeout/index.mjs";
-import { useMemo } from "react";
+import useDeferUntilTrue from "../useDeferUntilTrue/useDeferUntilTrue.mjs";
+import "../useDeferUntilTrue/index.mjs";
+import { useEffect, useState } from "react";
+import setLongTimeout from "@fringeworks/utils/timer/setLongTimeout";
 
 //#region src/useDeferUntilDate/useDeferUntilDate.tsx
 /**
@@ -14,7 +15,12 @@ import { useMemo } from "react";
 */
 function useDeferUntilDate(target, date, options = {}) {
 	const time = date ? date.getTime() : null;
-	return useDeferUntilTimeout(target, useMemo(() => time != null ? time - Date.now() : null, [time]), options);
+	const [reachedTime, setReachedTime] = useState(() => time != null && time <= Date.now() ? time : null);
+	useEffect(() => {
+		if (time == null) return;
+		return setLongTimeout(() => setReachedTime(time), Math.max(0, time - Date.now()));
+	}, [time]);
+	return useDeferUntilTrue(target, time == null || reachedTime === time, options);
 }
 
 //#endregion

package/useDeferUntilIntersected/index.cjs

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

package/useDeferUntilIntersected/index.d.cts

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

package/useDeferUntilIntersected/index.d.mts

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

package/useDeferUntilIntersected/index.mjs

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

package/useDeferUntilIntersected/types.cjs

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

package/useDeferUntilIntersected/types.d.cts

@@ -1,19 +1,19 @@
 import { UseDeferUntilTrueOptions } from "../useDeferUntilTrue/types.cjs";
-import { CSSProperties, ReactNode, RefObject } from "react";
-
+import "../useDeferUntilTrue/index.cjs";
+import { ReactNode, RefObject } from "react";
 //#region src/useDeferUntilIntersected/types.d.ts
-type UseDeferUntilIntersectedOptions<P extends ReactNode = ReactNode> = UseDeferUntilTrueOptions<P> & IntersectionObserverInit & {
+export type UseDeferUntilIntersectedOptions<P extends ReactNode = ReactNode> = UseDeferUntilTrueOptions<P> & {
   /**
    * 監視するコンテナーの参照
    * デフォルトはnull（ビューポート）
    */
   rootRef?: RefObject<Element | null | undefined>;
   /**
-   * ビューポートとの交差判定をする基準になるマージン\
-   * CSSのmarginと同じ形式で指定\
-   * 未指定の場合はビューポートの端で判定される
+   * 交差を判定する範囲を広げる余白\
+   * 数値はピクセル（上下左右に同じ値）、文字列はIntersectionObserverのrootMarginの書式（例: `'10px 0px'`、`'10%'`。単位は`px`と`%`のみ）\
+   * 未指定の場合はビューポート（rootRefを指定した場合はコンテナー）の端で判定される
    */
-  rootMargin?: CSSProperties['margin'];
+  rootMargin?: number | string;
   /**
    * ビューポートに基準となる要素がどの程度の割合入ったら描画するか(0～1)\
    * デフォルトは0.1（10%）
@@ -27,5 +27,4 @@ type UseDeferUntilIntersectedOptions<P extends ReactNode = ReactNode> = UseDefer
    */
   initialCondition?: boolean;
 };
-//#endregion
-export { UseDeferUntilIntersectedOptions };
+//#endregion

package/useDeferUntilIntersected/types.d.mts

@@ -1,19 +1,19 @@
 import { UseDeferUntilTrueOptions } from "../useDeferUntilTrue/types.mjs";
-import { CSSProperties, ReactNode, RefObject } from "react";
-
+import "../useDeferUntilTrue/index.mjs";
+import { ReactNode, RefObject } from "react";
 //#region src/useDeferUntilIntersected/types.d.ts
-type UseDeferUntilIntersectedOptions<P extends ReactNode = ReactNode> = UseDeferUntilTrueOptions<P> & IntersectionObserverInit & {
+export type UseDeferUntilIntersectedOptions<P extends ReactNode = ReactNode> = UseDeferUntilTrueOptions<P> & {
   /**
    * 監視するコンテナーの参照
    * デフォルトはnull（ビューポート）
    */
   rootRef?: RefObject<Element | null | undefined>;
   /**
-   * ビューポートとの交差判定をする基準になるマージン\
-   * CSSのmarginと同じ形式で指定\
-   * 未指定の場合はビューポートの端で判定される
+   * 交差を判定する範囲を広げる余白\
+   * 数値はピクセル（上下左右に同じ値）、文字列はIntersectionObserverのrootMarginの書式（例: `'10px 0px'`、`'10%'`。単位は`px`と`%`のみ）\
+   * 未指定の場合はビューポート（rootRefを指定した場合はコンテナー）の端で判定される
    */
-  rootMargin?: CSSProperties['margin'];
+  rootMargin?: number | string;
   /**
    * ビューポートに基準となる要素がどの程度の割合入ったら描画するか(0～1)\
    * デフォルトは0.1（10%）
@@ -27,5 +27,4 @@ type UseDeferUntilIntersectedOptions<P extends ReactNode = ReactNode> = UseDefer
    */
   initialCondition?: boolean;
 };
-//#endregion
-export { UseDeferUntilIntersectedOptions };
+//#endregion

package/useDeferUntilIntersected/useDeferUntilIntersected.cjs

@@ -1,11 +1,9 @@
 'use client';
 
-const require_runtime = require('../_virtual/_rolldown/runtime.cjs');
-const require_useDeferUntilTrue_useDeferUntilTrue = require('../useDeferUntilTrue/useDeferUntilTrue.cjs');
-require('../useDeferUntilTrue/index.cjs');
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
+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
 /**
@@ -20,9 +18,8 @@ function useDeferUntilIntersected(target, elementRef, options = {}) {
 	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 subscribe = (0, react.useCallback)((onStoreChange) => {
 		const element = elementRef?.current;
-		const container = rootRef.current;
 		if (observedElementRef.current !== element) {
 			observedElementRef.current = element;
 			if (snapshotRef.current !== initialCondition) {
@@ -31,6 +28,7 @@ function useDeferUntilIntersected(target, elementRef, options = {}) {
 			}
 		}
 		if (!element) return () => {};
+		const container = rootRef.current;
 		const observer = new IntersectionObserver((entries) => {
 			const entry = entries[0];
 			if (entry && snapshotRef.current !== entry.isIntersecting) {
@@ -39,7 +37,7 @@ function useDeferUntilIntersected(target, elementRef, options = {}) {
 			}
 		}, {
 			root: container,
-			rootMargin: (0, _fringeworks_utils_string_unit.default)(rootMargin),
+			rootMargin: typeof rootMargin === "number" ? `${rootMargin}px` : rootMargin,
 			threshold
 		});
 		observer.observe(element);
@@ -48,13 +46,16 @@ function useDeferUntilIntersected(target, elementRef, options = {}) {
 		};
 	}, [
 		elementRef,
-		elementRef?.current,
-		rootRef.current,
+		rootRef,
 		threshold,
 		rootMargin,
 		initialCondition
-	]), (0, react.useCallback)(() => !elementRef || snapshotRef.current, [elementRef]), (0, react.useCallback)(() => !elementRef || initialCondition, [elementRef, initialCondition])), opts);
+	]);
+	const getSnapshot = (0, react.useCallback)(() => !elementRef || snapshotRef.current, [elementRef]);
+	const getServerSnapshot = (0, react.useCallback)(() => !elementRef || initialCondition, [elementRef, initialCondition]);
+	const condition = (0, react.useSyncExternalStore)(subscribe, getSnapshot, getServerSnapshot);
+	return require_useDeferUntilTrue_useDeferUntilTrue.default(target, condition, opts);
 }
 
 //#endregion
-module.exports = useDeferUntilIntersected;
+exports.default = useDeferUntilIntersected;

package/useDeferUntilIntersected/useDeferUntilIntersected.d.cts

@@ -1,7 +1,6 @@
 import { DeferRenderingResult } from "../types.cjs";
 import { UseDeferUntilIntersectedOptions } from "./types.cjs";
 import { ReactNode, RefObject } from "react";
-
 //#region src/useDeferUntilIntersected/useDeferUntilIntersected.d.ts
 /**
  * 基準となる要素がビューポートに入るまで描画を遅延させるhook

package/useDeferUntilIntersected/useDeferUntilIntersected.d.mts

@@ -1,7 +1,6 @@
 import { DeferRenderingResult } from "../types.mjs";
 import { UseDeferUntilIntersectedOptions } from "./types.mjs";
 import { ReactNode, RefObject } from "react";
-
 //#region src/useDeferUntilIntersected/useDeferUntilIntersected.d.ts
 /**
  * 基準となる要素がビューポートに入るまで描画を遅延させるhook
@@ -10,6 +9,5 @@ import { ReactNode, RefObject } from "react";
  * @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 };
+export default 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

package/useDeferUntilIntersected/useDeferUntilIntersected.mjs

@@ -3,7 +3,6 @@
 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
 /**
@@ -18,9 +17,8 @@ function useDeferUntilIntersected(target, elementRef, options = {}) {
 	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 subscribe = useCallback((onStoreChange) => {
 		const element = elementRef?.current;
-		const container = rootRef.current;
 		if (observedElementRef.current !== element) {
 			observedElementRef.current = element;
 			if (snapshotRef.current !== initialCondition) {
@@ -29,6 +27,7 @@ function useDeferUntilIntersected(target, elementRef, options = {}) {
 			}
 		}
 		if (!element) return () => {};
+		const container = rootRef.current;
 		const observer = new IntersectionObserver((entries) => {
 			const entry = entries[0];
 			if (entry && snapshotRef.current !== entry.isIntersecting) {
@@ -37,7 +36,7 @@ function useDeferUntilIntersected(target, elementRef, options = {}) {
 			}
 		}, {
 			root: container,
-			rootMargin: unit(rootMargin),
+			rootMargin: typeof rootMargin === "number" ? `${rootMargin}px` : rootMargin,
 			threshold
 		});
 		observer.observe(element);
@@ -46,12 +45,15 @@ function useDeferUntilIntersected(target, elementRef, options = {}) {
 		};
 	}, [
 		elementRef,
-		elementRef?.current,
-		rootRef.current,
+		rootRef,
 		threshold,
 		rootMargin,
 		initialCondition
-	]), useCallback(() => !elementRef || snapshotRef.current, [elementRef]), useCallback(() => !elementRef || initialCondition, [elementRef, initialCondition])), opts);
+	]);
+	const getSnapshot = useCallback(() => !elementRef || snapshotRef.current, [elementRef]);
+	const getServerSnapshot = useCallback(() => !elementRef || initialCondition, [elementRef, initialCondition]);
+	const condition = useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
+	return useDeferUntilTrue(target, condition, opts);
 }
 
 //#endregion

package/useDeferUntilOnReady/index.cjs

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

package/useDeferUntilOnReady/index.d.cts

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

package/useDeferUntilOnReady/index.d.mts

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

package/useDeferUntilOnReady/index.mjs

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