fontdue-js 2.22.0 → 2.22.1

package/dist-cjs/components/useConsent.js

@@ -0,0 +1,26 @@
+"use strict";
+'use client';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useConsent = useConsent;
+var _react = require("react");
+var _consent = require("./ConsentBanner/consent");
+const CONSENT_EVENT = 'fontdue:consent';
+function subscribe(callback) {
+  window.addEventListener(CONSENT_EVENT, callback);
+  return () => window.removeEventListener(CONSENT_EVENT, callback);
+}
+
+/**
+ * Returns true when the visitor has granted consent for the given category.
+ * Re-renders automatically when consent changes (e.g. the visitor clicks
+ * "Accept all" on the consent banner).
+ *
+ * @example
+ * const analyticsConsent = useConsent('analytics');
+ */
+function useConsent(category) {
+  return (0, _react.useSyncExternalStore)(subscribe, () => (0, _consent.hasConsent)(category), () => false);
+}

package/dist-cjs/components/useFont.js

@@ -0,0 +1,76 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = require("react");
+var _fontLoader = require("../fontLoader");
+const FALLBACK_FAMILY = 'Fallback';
+
+/**
+ * Hook to load and detect web fonts.
+ *
+ * When `webfontSources` is provided, loads the font directly via the FontFace
+ * API (no CSS @font-face required). When omitted, falls back to
+ * `document.fonts.load()` to detect fonts loaded by CSS @font-face rules.
+ *
+ * Usage:
+ *   const { style, loaded } = useFont({
+ *     fontFamily: "Tonka Regular",
+ *     webfontSources: [{ url: "https://...", format: "woff2" }],
+ *   });
+ */
+const useFont = ({
+  fontFamily,
+  webfontSources,
+  fontWeight = 400,
+  fontStyle: fontStyleProp = 'normal'
+}) => {
+  const [loaded, setLoaded] = (0, _react.useState)(false);
+  const mounted = (0, _react.useRef)(false);
+  (0, _react.useEffect)(() => {
+    mounted.current = true;
+    return () => {
+      mounted.current = false;
+    };
+  }, []);
+  (0, _react.useEffect)(() => {
+    if (!fontFamily) return;
+    if (webfontSources && webfontSources.length > 0) {
+      // Load directly via FontFace API
+      (0, _fontLoader.loadFont)(fontFamily, webfontSources).then(() => {
+        if (mounted.current) setLoaded(true);
+      }).catch(console.error);
+    } else {
+      // Fall back to detecting CSS-loaded fonts
+      let cancelled = false;
+      const tryLoad = () => {
+        document.fonts.load(`${fontStyleProp} ${fontWeight} 16px "${fontFamily}"`).then(fontFaces => {
+          if (!cancelled && fontFaces.length > 0) setLoaded(true);
+        }).catch(() => {});
+      };
+      tryLoad();
+      document.fonts.addEventListener('loadingdone', tryLoad);
+      return () => {
+        cancelled = true;
+        document.fonts.removeEventListener('loadingdone', tryLoad);
+      };
+    }
+  }, [fontFamily]);
+  const cssStyle = loaded ? {
+    fontFamily: `"${fontFamily}", ${FALLBACK_FAMILY}`,
+    fontWeight,
+    fontStyle: fontStyleProp
+  } : {
+    fontFamily: FALLBACK_FAMILY,
+    fontWeight: 'normal',
+    fontStyle: 'normal'
+  };
+  return {
+    style: cssStyle,
+    loaded
+  };
+};
+var _default = useFont;
+exports.default = _default;

package/dist-cjs/components/useFontStyle.js

@@ -0,0 +1,58 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _useFontStyle_fontStyle2 = _interopRequireDefault(require("../__generated__/useFontStyle_fontStyle.graphql"));
+var _react = require("react");
+var _reactRelay = require("react-relay");
+var _fontLoader = require("../fontLoader");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const FALLBACK_FAMILY = 'Fallback';
+const useFontStyle = ({
+  fontStyle: fontStyleKey
+}) => {
+  const fontStyle = (0, _reactRelay.useFragment)((_useFontStyle_fontStyle2.default.hash && _useFontStyle_fontStyle2.default.hash !== "cc36ae8da5627792c27e9d3ad2b07258" && console.error("The definition of 'useFontStyle_fontStyle' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _useFontStyle_fontStyle2.default), fontStyleKey ?? null);
+  const fontFamily = fontStyle ? `${fontStyle.cssFamily} ${fontStyle.name}` : null;
+  const sources = fontStyle?.webfontSources;
+  const verticalMetrics = fontStyle?.verticalMetrics;
+
+  // Always initialize as false to avoid SSR/client hydration mismatch.
+  // The effect below will detect already-loaded fonts on mount.
+  const [loaded, setLoaded] = (0, _react.useState)(false);
+  const mounted = (0, _react.useRef)(false);
+  (0, _react.useEffect)(() => {
+    mounted.current = true;
+    return () => {
+      mounted.current = false;
+    };
+  }, []);
+  (0, _react.useEffect)(() => {
+    if (!fontFamily) return;
+    if ((0, _fontLoader.isFontLoaded)(fontFamily)) {
+      setLoaded(true);
+      return;
+    }
+    if (!sources || sources.length === 0) return;
+    setLoaded(false);
+    (0, _fontLoader.loadFont)(fontFamily, sources, verticalMetrics).then(() => {
+      if (mounted.current) setLoaded(true);
+    }).catch(console.error);
+  }, [fontFamily]);
+  const cssStyle = loaded && fontFamily ? {
+    fontFamily: `"${fontFamily}", ${FALLBACK_FAMILY}`,
+    fontWeight: 400,
+    fontStyle: 'normal'
+  } : {
+    fontFamily: FALLBACK_FAMILY,
+    fontWeight: 'normal',
+    fontStyle: 'normal'
+  };
+  return {
+    style: cssStyle,
+    loaded
+  };
+};
+var _default = useFontStyle;
+exports.default = _default;

package/dist-cjs/components/useInterval.js

@@ -0,0 +1,28 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = require("react");
+const useInterval = (callback, delay) => {
+  const savedCallback = (0, _react.useRef)(undefined);
+
+  // Remember the latest callback.
+  (0, _react.useEffect)(() => {
+    savedCallback.current = callback;
+  }, [callback]);
+
+  // Set up the interval.
+  (0, _react.useEffect)(() => {
+    function tick() {
+      savedCallback.current?.();
+    }
+    if (delay !== null) {
+      const id = setInterval(tick, delay);
+      return () => clearInterval(id);
+    }
+  }, [delay]);
+};
+var _default = useInterval;
+exports.default = _default;

package/dist-cjs/components/useTotalStyles.js

@@ -0,0 +1,26 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _useTotalStyles_fontCollection2 = _interopRequireDefault(require("../__generated__/useTotalStyles_fontCollection.graphql"));
+var _reactRelay = require("react-relay");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const useTotalStyles = ({
+  fontCollection
+}) => {
+  const data = (0, _reactRelay.useFragment)((_useTotalStyles_fontCollection2.default.hash && _useTotalStyles_fontCollection2.default.hash !== "d050379fa0ed41b1f9ce94454366187a" && console.error("The definition of 'useTotalStyles_fontCollection' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _useTotalStyles_fontCollection2.default), fontCollection);
+  let variableFonts = 0;
+  if (data.isVariableFont) {
+    variableFonts = data.totalStyles ?? 0;
+  } else {
+    variableFonts = data.children?.filter(child => child.isVariableFont).reduce((acc, child) => acc + child.totalStyles, 0) ?? 0;
+  }
+  return {
+    totalStyles: data.totalStyles - variableFonts,
+    variableFonts
+  };
+};
+var _default = useTotalStyles;
+exports.default = _default;

package/{dist-bundle/index.js → dist-cjs/config.js}

@@ -1,3 +1,10 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.configure = configure;
+exports.getConfig = getConfig;
 // Module-level global configuration. Consumers call `configure()` once at
 // app startup (e.g. Astro middleware, Next layout, Vite entry) and every
 // fontdue-js entry point reads defaults from here. Explicit options passed
@@ -17,7 +24,4 @@ function configure(opts) {
 }
 function getConfig() {
   return current;
-}
-
-export { configure, getConfig };
-//# sourceMappingURL=index.js.map
+}

package/dist-cjs/corsError.js

@@ -0,0 +1,89 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.handlePossibleCorsError = handlePossibleCorsError;
+var _retryImport = _interopRequireDefault(require("./retryImport"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+let detected = false;
+let navigating = false;
+if (typeof window !== 'undefined') {
+  window.addEventListener('beforeunload', () => {
+    navigating = true;
+  });
+}
+function isCrossOrigin(fetchUrl) {
+  try {
+    const url = new URL(fetchUrl, window.location.href);
+    return url.origin !== window.location.origin;
+  } catch {
+    return false;
+  }
+}
+function startPolling(fetchUrl) {
+  const interval = setInterval(async () => {
+    try {
+      await fetch(fetchUrl, {
+        method: 'POST',
+        credentials: 'include'
+      });
+      clearInterval(interval);
+      window.location.reload();
+    } catch {
+      // still blocked, keep polling
+    }
+  }, 3000);
+}
+async function isCorsBlocked(fetchUrl) {
+  // A no-cors fetch bypasses CORS entirely — if it also fails,
+  // the server is unreachable (network error), not CORS-blocked.
+  try {
+    await fetch(fetchUrl, {
+      method: 'HEAD',
+      mode: 'no-cors'
+    });
+    return true; // server reachable, so the original error was CORS
+  } catch {
+    return false; // server unreachable, network error
+  }
+}
+function showCorsError(origin, fetchUrl) {
+  console.error(`[Fontdue] Cross-origin request to ${fetchUrl} was blocked.\n\n` + `Your website (${origin}) is not listed as an allowed origin ` + `in your Fontdue CORS settings.\n\n` + `To fix this:\n` + `1. Log in to your Fontdue dashboard\n` + `2. Go to Settings \u2192 Security\n` + `3. Add "${origin}" to the "Cross-origin API access" field\n` + `4. Save \u2014 this page will reload automatically`);
+  (0, _retryImport.default)(() => Promise.resolve().then(() => _interopRequireWildcard(require('./components/CorsErrorModal')))).then(({
+    renderCorsErrorModal
+  }) => {
+    renderCorsErrorModal(origin, fetchUrl);
+  }).catch(() => {
+    // Chunk failed to load — the console.error above already
+    // told the developer what's wrong.
+  });
+  startPolling(fetchUrl);
+}
+function handlePossibleCorsError(error, fetchUrl) {
+  if (typeof window === 'undefined') return false;
+  if (!(error instanceof TypeError)) return false;
+  if (navigating) return false;
+  if (!isCrossOrigin(fetchUrl)) return false;
+  if (detected) return true;
+  detected = true;
+  const origin = window.location.origin;
+
+  // Verify this is actually a CORS error and not a network failure.
+  // We do this async — handlePossibleCorsError still returns true
+  // synchronously so the caller can return a stub response instead
+  // of throwing, but we only show the modal if CORS is confirmed.
+  isCorsBlocked(fetchUrl).then(blocked => {
+    if (blocked) {
+      showCorsError(origin, fetchUrl);
+    } else {
+      // Network error, not CORS — reset so a real CORS error
+      // can still be detected if connectivity recovers.
+      detected = false;
+      console.warn(`[Fontdue] Request to ${fetchUrl} failed — this looks like a network issue, not a CORS configuration problem.`);
+    }
+  });
+  return true;
+}