@fringeworks/react-defer-rendering 0.8.1 → 0.9.0

package/types.d.cts

@@ -1,11 +1,10 @@
 import { RenderingState } from "./constants.cjs";
 import { ReactNode } from "react";
-
 //#region src/types.d.ts
 /**
  * オプションのベース
  */
-type DeferRenderingOptionsBase<P extends ReactNode> = {
+export type DeferRenderingOptionsBase<P extends ReactNode> = {
   /**
    * 表示待ち中に表示するノード
    */
@@ -29,7 +28,7 @@ type DeferRenderingOptionsBase<P extends ReactNode> = {
 /**
  * オプションのベース(フォールバック有り)
  */
-type DeferRenderingWithFallbackOptionsBase<P extends ReactNode, F extends ReactNode> = DeferRenderingOptionsBase<P> & {
+export type DeferRenderingWithFallbackOptionsBase<P extends ReactNode, F extends ReactNode> = DeferRenderingOptionsBase<P> & {
   /**
    * フォールバック時に表示するノード
    */
@@ -48,7 +47,7 @@ type DeferRenderingWithFallbackOptionsBase<P extends ReactNode, F extends ReactN
 /**
  * 現在の状態を示す戻り値
  */
-type DeferRenderingResult<N extends ReactNode> = {
+export type DeferRenderingResult<N extends ReactNode> = {
   /**
    * 描画状態
    */
@@ -62,7 +61,7 @@ type DeferRenderingResult<N extends ReactNode> = {
 /**
  * 現在の状態と状態変更用のハンドラーを返す戻り値
  */
-type DeferRenderingWithHandlersResult<N extends ReactNode> = DeferRenderingResult<N> & {
+export type DeferRenderingWithHandlersResult<N extends ReactNode> = DeferRenderingResult<N> & {
   /**
    * 描画前の状態に戻すハンドラー
    * @returns
@@ -79,5 +78,4 @@ type DeferRenderingWithHandlersResult<N extends ReactNode> = DeferRenderingResul
    */
   onReady: () => void;
 };
-//#endregion
-export { DeferRenderingOptionsBase, DeferRenderingResult, DeferRenderingWithFallbackOptionsBase, DeferRenderingWithHandlersResult };
+//#endregion

package/types.d.mts

@@ -1,11 +1,10 @@
 import { RenderingState } from "./constants.mjs";
 import { ReactNode } from "react";
-
 //#region src/types.d.ts
 /**
  * オプションのベース
  */
-type DeferRenderingOptionsBase<P extends ReactNode> = {
+export type DeferRenderingOptionsBase<P extends ReactNode> = {
   /**
    * 表示待ち中に表示するノード
    */
@@ -29,7 +28,7 @@ type DeferRenderingOptionsBase<P extends ReactNode> = {
 /**
  * オプションのベース(フォールバック有り)
  */
-type DeferRenderingWithFallbackOptionsBase<P extends ReactNode, F extends ReactNode> = DeferRenderingOptionsBase<P> & {
+export type DeferRenderingWithFallbackOptionsBase<P extends ReactNode, F extends ReactNode> = DeferRenderingOptionsBase<P> & {
   /**
    * フォールバック時に表示するノード
    */
@@ -48,7 +47,7 @@ type DeferRenderingWithFallbackOptionsBase<P extends ReactNode, F extends ReactN
 /**
  * 現在の状態を示す戻り値
  */
-type DeferRenderingResult<N extends ReactNode> = {
+export type DeferRenderingResult<N extends ReactNode> = {
   /**
    * 描画状態
    */
@@ -62,7 +61,7 @@ type DeferRenderingResult<N extends ReactNode> = {
 /**
  * 現在の状態と状態変更用のハンドラーを返す戻り値
  */
-type DeferRenderingWithHandlersResult<N extends ReactNode> = DeferRenderingResult<N> & {
+export type DeferRenderingWithHandlersResult<N extends ReactNode> = DeferRenderingResult<N> & {
   /**
    * 描画前の状態に戻すハンドラー
    * @returns
@@ -79,5 +78,4 @@ type DeferRenderingWithHandlersResult<N extends ReactNode> = DeferRenderingResul
    */
   onReady: () => void;
 };
-//#endregion
-export { DeferRenderingOptionsBase, DeferRenderingResult, DeferRenderingWithFallbackOptionsBase, DeferRenderingWithHandlersResult };
+//#endregion

package/useDeferUntilAsyncComplete/index.cjs

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

package/useDeferUntilAsyncComplete/index.d.cts

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

package/useDeferUntilAsyncComplete/index.d.mts

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

package/useDeferUntilAsyncComplete/index.mjs

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

package/useDeferUntilAsyncComplete/types.cjs

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

package/useDeferUntilAsyncComplete/types.d.cts

@@ -1,7 +1,6 @@
 import { UseDeferUntilResolvedOptions } from "../useDeferUntilResolved/types.cjs";
+import "../useDeferUntilResolved/index.cjs";
 import { ReactNode } from "react";
-
 //#region src/useDeferUntilAsyncComplete/types.d.ts
-type UseDeferUntilAsyncCompleteOptions<P extends ReactNode = ReactNode, E extends ReactNode = ReactNode> = UseDeferUntilResolvedOptions<P, E>;
-//#endregion
-export { UseDeferUntilAsyncCompleteOptions };
+export type UseDeferUntilAsyncCompleteOptions<P extends ReactNode = ReactNode, E extends ReactNode = ReactNode> = UseDeferUntilResolvedOptions<P, E>;
+//#endregion

package/useDeferUntilAsyncComplete/types.d.mts

@@ -1,7 +1,6 @@
 import { UseDeferUntilResolvedOptions } from "../useDeferUntilResolved/types.mjs";
+import "../useDeferUntilResolved/index.mjs";
 import { ReactNode } from "react";
-
 //#region src/useDeferUntilAsyncComplete/types.d.ts
-type UseDeferUntilAsyncCompleteOptions<P extends ReactNode = ReactNode, E extends ReactNode = ReactNode> = UseDeferUntilResolvedOptions<P, E>;
-//#endregion
-export { UseDeferUntilAsyncCompleteOptions };
+export type UseDeferUntilAsyncCompleteOptions<P extends ReactNode = ReactNode, E extends ReactNode = ReactNode> = UseDeferUntilResolvedOptions<P, E>;
+//#endregion

package/useDeferUntilAsyncComplete/useDeferUntilAsyncComplete.cjs

@@ -1,8 +1,9 @@
 'use client';
 
-const require__usePromiseState = require('../_usePromiseState.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__usePromiseState = require("../_usePromiseState.cjs");
+const require_useDeferUntilReady_useDeferUntilReady = require("../useDeferUntilReady/useDeferUntilReady.cjs");
+require("../useDeferUntilReady/index.cjs");
 
 //#region src/useDeferUntilAsyncComplete/useDeferUntilAsyncComplete.tsx
 /**
@@ -13,8 +14,9 @@ require('../useDeferUntilReady/index.cjs');
 * @returns state（'pending', 'ready', 'fallback'）と状態に応じたノード
 */
 function useDeferUntilAsyncComplete(target, asyncFn, options = {}) {
-	return require_useDeferUntilReady_useDeferUntilReady(target, require__usePromiseState(asyncFn), options);
+	const state = require__usePromiseState.default(asyncFn);
+	return require_useDeferUntilReady_useDeferUntilReady.default(target, state, options);
 }
 
 //#endregion
-module.exports = useDeferUntilAsyncComplete;
+exports.default = useDeferUntilAsyncComplete;

package/useDeferUntilAsyncComplete/useDeferUntilAsyncComplete.d.cts

@@ -1,7 +1,6 @@
 import { DeferRenderingResult } from "../types.cjs";
 import { UseDeferUntilAsyncCompleteOptions } from "./types.cjs";
 import { ReactNode } from "react";
-
 //#region src/useDeferUntilAsyncComplete/useDeferUntilAsyncComplete.d.ts
 /**
  * 非同期関数の処理の完了まで描画を遅延させるhook

package/useDeferUntilAsyncComplete/useDeferUntilAsyncComplete.d.mts

@@ -1,7 +1,6 @@
 import { DeferRenderingResult } from "../types.mjs";
 import { UseDeferUntilAsyncCompleteOptions } from "./types.mjs";
 import { ReactNode } from "react";
-
 //#region src/useDeferUntilAsyncComplete/useDeferUntilAsyncComplete.d.ts
 /**
  * 非同期関数の処理の完了まで描画を遅延させるhook
@@ -10,6 +9,5 @@ import { ReactNode } from "react";
  * @param options オプション
  * @returns state（'pending', 'ready', 'fallback'）と状態に応じたノード
  */
-declare function useDeferUntilAsyncComplete<T extends ReactNode, P extends ReactNode = ReactNode, E extends ReactNode = ReactNode>(target: T, asyncFn: (() => Promise<void>) | null | undefined, options?: UseDeferUntilAsyncCompleteOptions<P, E>): DeferRenderingResult<T | P | E>;
-//#endregion
-export { useDeferUntilAsyncComplete as default };
+export default function useDeferUntilAsyncComplete<T extends ReactNode, P extends ReactNode = ReactNode, E extends ReactNode = ReactNode>(target: T, asyncFn: (() => Promise<void>) | null | undefined, options?: UseDeferUntilAsyncCompleteOptions<P, E>): DeferRenderingResult<T | P | E>;
+//#endregion

package/useDeferUntilAsyncComplete/useDeferUntilAsyncComplete.mjs

@@ -13,7 +13,8 @@ import "../useDeferUntilReady/index.mjs";
 * @returns state（'pending', 'ready', 'fallback'）と状態に応じたノード
 */
 function useDeferUntilAsyncComplete(target, asyncFn, options = {}) {
-	return useDeferUntilReady(target, usePromiseState(asyncFn), options);
+	const state = usePromiseState(asyncFn);
+	return useDeferUntilReady(target, state, options);
 }
 
 //#endregion

package/useDeferUntilBreakpoint/index.cjs

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

package/useDeferUntilBreakpoint/index.d.cts

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

package/useDeferUntilBreakpoint/index.d.mts

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

package/useDeferUntilBreakpoint/index.mjs

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

package/useDeferUntilBreakpoint/types.cjs

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

package/useDeferUntilBreakpoint/types.d.cts

@@ -1,10 +1,11 @@
 import { UseDeferUntilTrueOptions } from "../useDeferUntilTrue/types.cjs";
+import "../useDeferUntilTrue/index.cjs";
 import { ReactNode } from "react";
-
 //#region src/useDeferUntilBreakpoint/types.d.ts
-type UseDeferUntilBreakpointOptions<P extends ReactNode = ReactNode> = UseDeferUntilTrueOptions<P> & {
+export type UseDeferUntilBreakpointOptions<P extends ReactNode = ReactNode> = UseDeferUntilTrueOptions<P> & {
   /**
-   * メディアクエリー変更時のデバウンス時間（ミリ秒）
+   * メディアクエリーの変化を反映するまでの時間（ミリ秒）\
+   * この間に続けて変化した場合は、最後の変化から数え直す。0の場合は次のタスクで反映する\
    * デフォルトは100ms
    * @default 100
    */
@@ -16,5 +17,4 @@ type UseDeferUntilBreakpointOptions<P extends ReactNode = ReactNode> = UseDeferU
    */
   initialCondition?: boolean;
 };
-//#endregion
-export { UseDeferUntilBreakpointOptions };
+//#endregion

package/useDeferUntilBreakpoint/types.d.mts

@@ -1,10 +1,11 @@
 import { UseDeferUntilTrueOptions } from "../useDeferUntilTrue/types.mjs";
+import "../useDeferUntilTrue/index.mjs";
 import { ReactNode } from "react";
-
 //#region src/useDeferUntilBreakpoint/types.d.ts
-type UseDeferUntilBreakpointOptions<P extends ReactNode = ReactNode> = UseDeferUntilTrueOptions<P> & {
+export type UseDeferUntilBreakpointOptions<P extends ReactNode = ReactNode> = UseDeferUntilTrueOptions<P> & {
   /**
-   * メディアクエリー変更時のデバウンス時間（ミリ秒）
+   * メディアクエリーの変化を反映するまでの時間（ミリ秒）\
+   * この間に続けて変化した場合は、最後の変化から数え直す。0の場合は次のタスクで反映する\
    * デフォルトは100ms
    * @default 100
    */
@@ -16,5 +17,4 @@ type UseDeferUntilBreakpointOptions<P extends ReactNode = ReactNode> = UseDeferU
    */
   initialCondition?: boolean;
 };
-//#endregion
-export { UseDeferUntilBreakpointOptions };
+//#endregion

package/useDeferUntilBreakpoint/useDeferUntilBreakpoint.cjs

@@ -1,8 +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_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_debounce = require("@fringeworks/utils/timer/debounce");
 _fringeworks_utils_timer_debounce = require_runtime.__toESM(_fringeworks_utils_timer_debounce, 1);
@@ -17,28 +18,47 @@ _fringeworks_utils_timer_debounce = require_runtime.__toESM(_fringeworks_utils_t
 */
 function useDeferUntilBreakpoint(target, mediaQuery, options = {}) {
 	const { detectionDelay = 100, preserveOnceReady, initialCondition = false, ...opts } = options;
-	return require_useDeferUntilTrue_useDeferUntilTrue(target, (0, react.useSyncExternalStore)((0, react.useCallback)((onStoreChange) => {
+	const snapshotRef = (0, react.useRef)(null);
+	const subscribe = (0, react.useCallback)((onStoreChange) => {
 		if (!mediaQuery) return () => {};
 		const mediaQueryList = window.matchMedia(mediaQuery);
+		snapshotRef.current = {
+			mediaQuery,
+			matches: mediaQueryList.matches
+		};
 		if (preserveOnceReady && mediaQueryList.matches) return () => {};
-		const handleChange = (event) => {
+		const handleChange = () => {
+			const { matches } = mediaQueryList;
+			snapshotRef.current = {
+				mediaQuery,
+				matches
+			};
 			onStoreChange();
-			if (preserveOnceReady && event.matches) mediaQueryList.removeEventListener("change", debouncedHandleChange);
+			if (preserveOnceReady && matches) mediaQueryList.removeEventListener("change", debouncedHandleChange);
 		};
-		const debouncedHandleChange = (0, _fringeworks_utils_timer_debounce.default)(handleChange, detectionDelay);
+		const debouncedHandleChange = (0, _fringeworks_utils_timer_debounce.default)(handleChange, { wait: detectionDelay });
 		mediaQueryList.addEventListener("change", debouncedHandleChange);
 		return () => {
+			debouncedHandleChange.cancel();
 			mediaQueryList.removeEventListener("change", debouncedHandleChange);
 		};
 	}, [
 		mediaQuery,
 		preserveOnceReady,
 		detectionDelay
-	]), (0, react.useCallback)(() => !mediaQuery || window.matchMedia(mediaQuery).matches, [mediaQuery]), (0, react.useCallback)(() => !mediaQuery || initialCondition, [mediaQuery, initialCondition])), {
+	]);
+	const getSnapshot = (0, react.useCallback)(() => {
+		if (!mediaQuery) return true;
+		const snapshot = snapshotRef.current;
+		return snapshot?.mediaQuery === mediaQuery ? snapshot.matches : window.matchMedia(mediaQuery).matches;
+	}, [mediaQuery]);
+	const getServerSnapshot = (0, react.useCallback)(() => !mediaQuery || initialCondition, [mediaQuery, initialCondition]);
+	const condition = (0, react.useSyncExternalStore)(subscribe, getSnapshot, getServerSnapshot);
+	return require_useDeferUntilTrue_useDeferUntilTrue.default(target, condition, {
 		preserveOnceReady,
 		...opts
 	});
 }
 
 //#endregion
-module.exports = useDeferUntilBreakpoint;
+exports.default = useDeferUntilBreakpoint;

package/useDeferUntilBreakpoint/useDeferUntilBreakpoint.d.cts

@@ -1,7 +1,6 @@
 import { DeferRenderingResult } from "../types.cjs";
 import { UseDeferUntilBreakpointOptions } from "./types.cjs";
 import { ReactNode } from "react";
-
 //#region src/useDeferUntilBreakpoint/useDeferUntilBreakpoint.d.ts
 /**
  * メディアクエリーが一致するまで描画を遅延させるhook

package/useDeferUntilBreakpoint/useDeferUntilBreakpoint.d.mts

@@ -1,7 +1,6 @@
 import { DeferRenderingResult } from "../types.mjs";
 import { UseDeferUntilBreakpointOptions } from "./types.mjs";
 import { ReactNode } from "react";
-
 //#region src/useDeferUntilBreakpoint/useDeferUntilBreakpoint.d.ts
 /**
  * メディアクエリーが一致するまで描画を遅延させるhook
@@ -10,6 +9,5 @@ import { ReactNode } from "react";
  * @param options オプション
  * @returns state（'pending', 'ready'）と状態に応じたノード
  */
-declare function useDeferUntilBreakpoint<T extends ReactNode, P extends ReactNode = ReactNode>(target: T, mediaQuery: string | null | undefined, options?: UseDeferUntilBreakpointOptions<P>): DeferRenderingResult<T | P>;
-//#endregion
-export { useDeferUntilBreakpoint as default };
+export default function useDeferUntilBreakpoint<T extends ReactNode, P extends ReactNode = ReactNode>(target: T, mediaQuery: string | null | undefined, options?: UseDeferUntilBreakpointOptions<P>): DeferRenderingResult<T | P>;
+//#endregion

package/useDeferUntilBreakpoint/useDeferUntilBreakpoint.mjs

@@ -2,7 +2,7 @@
 
 import useDeferUntilTrue from "../useDeferUntilTrue/useDeferUntilTrue.mjs";
 import "../useDeferUntilTrue/index.mjs";
-import { useCallback, useSyncExternalStore } from "react";
+import { useCallback, useRef, useSyncExternalStore } from "react";
 import debounce from "@fringeworks/utils/timer/debounce";
 
 //#region src/useDeferUntilBreakpoint/useDeferUntilBreakpoint.tsx
@@ -15,24 +15,43 @@ import debounce from "@fringeworks/utils/timer/debounce";
 */
 function useDeferUntilBreakpoint(target, mediaQuery, options = {}) {
 	const { detectionDelay = 100, preserveOnceReady, initialCondition = false, ...opts } = options;
-	return useDeferUntilTrue(target, useSyncExternalStore(useCallback((onStoreChange) => {
+	const snapshotRef = useRef(null);
+	const subscribe = useCallback((onStoreChange) => {
 		if (!mediaQuery) return () => {};
 		const mediaQueryList = window.matchMedia(mediaQuery);
+		snapshotRef.current = {
+			mediaQuery,
+			matches: mediaQueryList.matches
+		};
 		if (preserveOnceReady && mediaQueryList.matches) return () => {};
-		const handleChange = (event) => {
+		const handleChange = () => {
+			const { matches } = mediaQueryList;
+			snapshotRef.current = {
+				mediaQuery,
+				matches
+			};
 			onStoreChange();
-			if (preserveOnceReady && event.matches) mediaQueryList.removeEventListener("change", debouncedHandleChange);
+			if (preserveOnceReady && matches) mediaQueryList.removeEventListener("change", debouncedHandleChange);
 		};
-		const debouncedHandleChange = debounce(handleChange, detectionDelay);
+		const debouncedHandleChange = debounce(handleChange, { wait: detectionDelay });
 		mediaQueryList.addEventListener("change", debouncedHandleChange);
 		return () => {
+			debouncedHandleChange.cancel();
 			mediaQueryList.removeEventListener("change", debouncedHandleChange);
 		};
 	}, [
 		mediaQuery,
 		preserveOnceReady,
 		detectionDelay
-	]), useCallback(() => !mediaQuery || window.matchMedia(mediaQuery).matches, [mediaQuery]), useCallback(() => !mediaQuery || initialCondition, [mediaQuery, initialCondition])), {
+	]);
+	const getSnapshot = useCallback(() => {
+		if (!mediaQuery) return true;
+		const snapshot = snapshotRef.current;
+		return snapshot?.mediaQuery === mediaQuery ? snapshot.matches : window.matchMedia(mediaQuery).matches;
+	}, [mediaQuery]);
+	const getServerSnapshot = useCallback(() => !mediaQuery || initialCondition, [mediaQuery, initialCondition]);
+	const condition = useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
+	return useDeferUntilTrue(target, condition, {
 		preserveOnceReady,
 		...opts
 	});

package/useDeferUntilCallThreshold/index.cjs

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

package/useDeferUntilCallThreshold/index.d.cts

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

package/useDeferUntilCallThreshold/index.d.mts

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

package/useDeferUntilCallThreshold/index.mjs

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

package/useDeferUntilCallThreshold/types.cjs

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

package/useDeferUntilCallThreshold/types.d.cts

@@ -1,8 +1,8 @@
 import { UseDeferUntilOnReadyOptions } from "../useDeferUntilOnReady/types.cjs";
+import "../useDeferUntilOnReady/index.cjs";
 import { ReactNode } from "react";
-
 //#region src/useDeferUntilCallThreshold/types.d.ts
-type UseDeferUntilCallThresholdOptions<P extends ReactNode = ReactNode, E extends ReactNode = ReactNode> = UseDeferUntilOnReadyOptions<P, E> & {
+export type UseDeferUntilCallThresholdOptions<P extends ReactNode = ReactNode, E extends ReactNode = ReactNode> = UseDeferUntilOnReadyOptions<P, E> & {
   /**
    * readyになる為のonReadyの呼び出し回数
    * 未指定の場合は1回
@@ -19,5 +19,4 @@ type UseDeferUntilCallThresholdOptions<P extends ReactNode = ReactNode, E extend
    */
   onPendingCount?: number;
 };
-//#endregion
-export { UseDeferUntilCallThresholdOptions };
+//#endregion

package/useDeferUntilCallThreshold/types.d.mts

@@ -1,8 +1,8 @@
 import { UseDeferUntilOnReadyOptions } from "../useDeferUntilOnReady/types.mjs";
+import "../useDeferUntilOnReady/index.mjs";
 import { ReactNode } from "react";
-
 //#region src/useDeferUntilCallThreshold/types.d.ts
-type UseDeferUntilCallThresholdOptions<P extends ReactNode = ReactNode, E extends ReactNode = ReactNode> = UseDeferUntilOnReadyOptions<P, E> & {
+export type UseDeferUntilCallThresholdOptions<P extends ReactNode = ReactNode, E extends ReactNode = ReactNode> = UseDeferUntilOnReadyOptions<P, E> & {
   /**
    * readyになる為のonReadyの呼び出し回数
    * 未指定の場合は1回
@@ -19,5 +19,4 @@ type UseDeferUntilCallThresholdOptions<P extends ReactNode = ReactNode, E extend
    */
   onPendingCount?: number;
 };
-//#endregion
-export { UseDeferUntilCallThresholdOptions };
+//#endregion

package/useDeferUntilCallThreshold/useDeferUntilCallThreshold.cjs

@@ -1,7 +1,8 @@
 'use client';
 
-const require_useDeferUntilOnReady_useDeferUntilOnReady = require('../useDeferUntilOnReady/useDeferUntilOnReady.cjs');
-require('../useDeferUntilOnReady/index.cjs');
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
+const require_useDeferUntilOnReady_useDeferUntilOnReady = require("../useDeferUntilOnReady/useDeferUntilOnReady.cjs");
+require("../useDeferUntilOnReady/index.cjs");
 let react = require("react");
 
 //#region src/useDeferUntilCallThreshold/useDeferUntilCallThreshold.tsx
@@ -13,36 +14,48 @@ let react = require("react");
 */
 function useDeferUntilCallThreshold(target, options = {}) {
 	const { onPendingCount = 1, onFallbackCount = 1, onReadyCount = 1, ...opts } = options;
-	const { onPending: handlePending, onFallback: handleFallback, onReady: handleReady, ...rest } = require_useDeferUntilOnReady_useDeferUntilOnReady(target, opts);
-	const pendingContRef = (0, react.useRef)(0);
-	const fallbackContRef = (0, react.useRef)(0);
-	const readyContRef = (0, react.useRef)(0);
+	const { onPending: handlePending, onFallback: handleFallback, onReady: handleReady, ...rest } = require_useDeferUntilOnReady_useDeferUntilOnReady.default(target, opts);
+	const pendingCountRef = (0, react.useRef)(0);
+	const fallbackCountRef = (0, react.useRef)(0);
+	const readyCountRef = (0, react.useRef)(0);
 	const reset = (0, react.useCallback)(() => {
-		pendingContRef.current = 0;
-		fallbackContRef.current = 0;
-		readyContRef.current = 0;
+		pendingCountRef.current = 0;
+		fallbackCountRef.current = 0;
+		readyCountRef.current = 0;
 	}, []);
 	const onPending = (0, react.useCallback)(() => {
-		pendingContRef.current += 1;
-		if (onPendingCount <= pendingContRef.current) {
+		pendingCountRef.current += 1;
+		if (onPendingCount <= pendingCountRef.current) {
 			reset();
 			handlePending();
 		}
-	}, [handlePending, onPendingCount]);
+	}, [
+		handlePending,
+		onPendingCount,
+		reset
+	]);
 	const onFallback = (0, react.useCallback)(() => {
-		fallbackContRef.current += 1;
-		if (onFallbackCount <= fallbackContRef.current) {
+		fallbackCountRef.current += 1;
+		if (onFallbackCount <= fallbackCountRef.current) {
 			reset();
 			handleFallback();
 		}
-	}, [handleFallback, onFallbackCount]);
+	}, [
+		handleFallback,
+		onFallbackCount,
+		reset
+	]);
 	const onReady = (0, react.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,
@@ -52,4 +65,4 @@ function useDeferUntilCallThreshold(target, options = {}) {
 }
 
 //#endregion
-module.exports = useDeferUntilCallThreshold;
+exports.default = useDeferUntilCallThreshold;

package/useDeferUntilCallThreshold/useDeferUntilCallThreshold.d.cts

@@ -1,7 +1,6 @@
 import { DeferRenderingWithHandlersResult } from "../types.cjs";
 import { UseDeferUntilCallThresholdOptions } from "./types.cjs";
 import { ReactNode } from "react";
-
 //#region src/useDeferUntilCallThreshold/useDeferUntilCallThreshold.d.ts
 /**
  * 戻り値として返す`onReady`等のハンドラーが指定回数呼ばれるまで描画を遅延させるhook

package/useDeferUntilCallThreshold/useDeferUntilCallThreshold.d.mts

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