@fringeworks/react-defer-rendering 0.8.1 → 0.9.0

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 };