@fringeworks/react-defer-rendering 0.8.0

package/useDeferUntilWebFontReady/useDeferUntilWebFontReady.cjs

@@ -0,0 +1,93 @@
+'use client';
+
+const require_runtime = require('../_virtual/_rolldown/runtime.cjs');
+const require_constants = require('../constants.cjs');
+const require_useDeferUntilReady_useDeferUntilReady = require('../useDeferUntilReady/useDeferUntilReady.cjs');
+require('../useDeferUntilReady/index.cjs');
+let react = require("react");
+let _fringeworks_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");
+_fringeworks_web_font_observer_waitForWebFont = require_runtime.__toESM(_fringeworks_web_font_observer_waitForWebFont, 1);
+
+//#region src/useDeferUntilWebFontReady/useDeferUntilWebFontReady.tsx
+/**
+* 指定のWebフォントがすべて利用可能になるまで描画を遅延させるhook\
+* 対象は`@font-face`で定義されたWebフォントで、システムフォントを指定した場合はタイムアウト後に'fallback'になる\
+* `@font-face`の定義は遅延対象のノードの外に置くこと（遅延対象の中にあると定義が登録されず、タイムアウトまで待つことになる）
+* @param target 描画対象のノード
+* @param fonts 待つWebフォント。複数の場合は配列（null/undefined/空文字/空配列の場合は待たずに描画する）
+* @param options オプション
+* @returns state（'pending', 'ready', 'fallback'）と状態に応じたノード
+*/
+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 [result, setResult] = (0, react.useState)(() => ({
+		key: fontsKey,
+		state: initialState
+	}));
+	const isLoaded = (0, react.useSyncExternalStore)((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]));
+	(0, react.useEffect)(() => {
+		if (webFonts.length === 0) return;
+		const controller = new AbortController();
+		const { signal } = controller;
+		const update = (state) => {
+			if (!signal.aborted) setResult({
+				key: fontsKey,
+				state
+			});
+		};
+		const waitForWebFonts = () => Promise.all(webFonts.map(({ family, ...rest }) => (0, _fringeworks_web_font_observer_waitForWebFont.default)(family, {
+			...rest,
+			timeout,
+			signal
+		})));
+		const loader = loaderRef.current;
+		(loader ? loader(signal).then(() => signal.aborted ? [] : waitForWebFonts()) : waitForWebFonts()).then(() => update(require_constants.RenderingState.ready), () => {
+			update(require_constants.RenderingState.fallback);
+			controller.abort();
+		});
+		return () => {
+			controller.abort();
+		};
+	}, [webFonts, timeout]);
+	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);
+}
+/**
+* 待つWebフォントの指定を、比較可能な形の配列に正規化する
+* @param fonts 待つWebフォントの指定
+* @returns 正規化されたWebフォントの配列
+*/
+function normalizeFonts(fonts) {
+	return (Array.isArray(fonts) ? fonts : [fonts]).flatMap((font) => {
+		if (!font) return [];
+		if (typeof font === "string") return [{ family: font }];
+		const { family, weight, style, width, text } = font;
+		return family ? [{
+			family,
+			weight,
+			style,
+			width,
+			text
+		}] : [];
+	});
+}
+
+//#endregion
+module.exports = useDeferUntilWebFontReady;

package/useDeferUntilWebFontReady/useDeferUntilWebFontReady.d.cts

@@ -0,0 +1,16 @@
+import { DeferRenderingResult } from "../types.cjs";
+import { UseDeferUntilWebFontReadyOptions, WebFontTargets } from "./types.cjs";
+import { ReactNode } from "react";
+
+//#region src/useDeferUntilWebFontReady/useDeferUntilWebFontReady.d.ts
+/**
+ * 指定のWebフォントがすべて利用可能になるまで描画を遅延させるhook\
+ * 対象は`@font-face`で定義されたWebフォントで、システムフォントを指定した場合はタイムアウト後に'fallback'になる\
+ * `@font-face`の定義は遅延対象のノードの外に置くこと（遅延対象の中にあると定義が登録されず、タイムアウトまで待つことになる）
+ * @param target 描画対象のノード
+ * @param fonts 待つWebフォント。複数の場合は配列（null/undefined/空文字/空配列の場合は待たずに描画する）
+ * @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>;
+export = useDeferUntilWebFontReady;

package/useDeferUntilWebFontReady/useDeferUntilWebFontReady.d.mts

@@ -0,0 +1,17 @@
+import { DeferRenderingResult } from "../types.mjs";
+import { UseDeferUntilWebFontReadyOptions, WebFontTargets } from "./types.mjs";
+import { ReactNode } from "react";
+
+//#region src/useDeferUntilWebFontReady/useDeferUntilWebFontReady.d.ts
+/**
+ * 指定のWebフォントがすべて利用可能になるまで描画を遅延させるhook\
+ * 対象は`@font-face`で定義されたWebフォントで、システムフォントを指定した場合はタイムアウト後に'fallback'になる\
+ * `@font-face`の定義は遅延対象のノードの外に置くこと（遅延対象の中にあると定義が登録されず、タイムアウトまで待つことになる）
+ * @param target 描画対象のノード
+ * @param fonts 待つWebフォント。複数の場合は配列（null/undefined/空文字/空配列の場合は待たずに描画する）
+ * @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 };

package/useDeferUntilWebFontReady/useDeferUntilWebFontReady.mjs

@@ -0,0 +1,90 @@
+'use client';
+
+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 isWebFontLoaded from "@fringeworks/web-font-observer/isWebFontLoaded";
+import waitForWebFont from "@fringeworks/web-font-observer/waitForWebFont";
+
+//#region src/useDeferUntilWebFontReady/useDeferUntilWebFontReady.tsx
+/**
+* 指定のWebフォントがすべて利用可能になるまで描画を遅延させるhook\
+* 対象は`@font-face`で定義されたWebフォントで、システムフォントを指定した場合はタイムアウト後に'fallback'になる\
+* `@font-face`の定義は遅延対象のノードの外に置くこと（遅延対象の中にあると定義が登録されず、タイムアウトまで待つことになる）
+* @param target 描画対象のノード
+* @param fonts 待つWebフォント。複数の場合は配列（null/undefined/空文字/空配列の場合は待たずに描画する）
+* @param options オプション
+* @returns state（'pending', 'ready', 'fallback'）と状態に応じたノード
+*/
+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 [result, setResult] = useState(() => ({
+		key: fontsKey,
+		state: initialState
+	}));
+	const isLoaded = useSyncExternalStore(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]));
+	useEffect(() => {
+		if (webFonts.length === 0) return;
+		const controller = new AbortController();
+		const { signal } = controller;
+		const update = (state) => {
+			if (!signal.aborted) setResult({
+				key: fontsKey,
+				state
+			});
+		};
+		const waitForWebFonts = () => Promise.all(webFonts.map(({ family, ...rest }) => waitForWebFont(family, {
+			...rest,
+			timeout,
+			signal
+		})));
+		const loader = loaderRef.current;
+		(loader ? loader(signal).then(() => signal.aborted ? [] : waitForWebFonts()) : waitForWebFonts()).then(() => update(RenderingState.ready), () => {
+			update(RenderingState.fallback);
+			controller.abort();
+		});
+		return () => {
+			controller.abort();
+		};
+	}, [webFonts, timeout]);
+	let state;
+	if (isLoaded) state = RenderingState.ready;
+	else if (result.key === fontsKey) state = result.state;
+	else state = RenderingState.pending;
+	return useDeferUntilReady(target, state, opts);
+}
+/**
+* 待つWebフォントの指定を、比較可能な形の配列に正規化する
+* @param fonts 待つWebフォントの指定
+* @returns 正規化されたWebフォントの配列
+*/
+function normalizeFonts(fonts) {
+	return (Array.isArray(fonts) ? fonts : [fonts]).flatMap((font) => {
+		if (!font) return [];
+		if (typeof font === "string") return [{ family: font }];
+		const { family, weight, style, width, text } = font;
+		return family ? [{
+			family,
+			weight,
+			style,
+			width,
+			text
+		}] : [];
+	});
+}
+
+//#endregion
+export { useDeferUntilWebFontReady as default };