fontdue-js 2.20.0 → 2.21.0

package/CHANGELOG.md

@@ -1,3 +1,12 @@
+## 2.21.0
+
+- Fixed `CharacterViewer` silently dropping characters from supplementary-plane Unicode blocks (e.g. Latin Extended-F, Enclosed Alphanumeric Supplement). Range expansion now uses `codePointAt` / `String.fromCodePoint` so characters above U+FFFF render correctly instead of getting filtered out as unpaired surrogates
+- Fixed false-positive CORS error modal appearing on network failures unrelated to CORS (DNS, timeout, server unreachable). The modal now only shows for genuine CORS misconfigurations; other fetch failures log a warning instead
+
+## 2.20.1
+
+- Fixed `useAutofit` measuring multi-line text as a single line, causing the font size to be too small when type tester content contains line breaks
+
 ## 2.20.0
 
 - **Font loading now uses the FontFace API instead of CSS `@font-face`**. Fonts loaded by fontdue-js components (TypeTester, StoreModal, CharacterViewer, etc.) are no longer loaded via CSS stylesheet injection. Instead, font files are fetched as binary data and loaded via the browser's `FontFace` API. **Note:** components like TypeTesters and CharacterViewer previously loaded the entire family's CSS, which made all styles available page-wide as a side effect. They now only load the specific style they're rendering. If you render font styles outside of fontdue-js components (e.g., in a specimen section), you'll need to load those fonts yourself — either with the new `useFont` hook and `webfontSources`, or with your own `@font-face` rules.

package/dist/components/CharacterViewer/index.js

@@ -15,6 +15,7 @@ var _CharacterViewer_family2 = _interopRequireDefault(require("../../__generated
 var _react = _interopRequireWildcard(require("react"));
 var _reactRelay = require("react-relay");
 var _resizeObserver = _interopRequireDefault(require("@react-hook/resize-observer"));
+var _retryImport = _interopRequireDefault(require("../../retryImport"));
 var _utils = require("../../utils");
 var _useFontStyle = _interopRequireDefault(require("../useFontStyle"));
 var _useSerializablePreloadedQuery = _interopRequireDefault(require("../../relay/useSerializablePreloadedQuery"));
@@ -83,9 +84,9 @@ function useUnicodeData() {
   const [data, setData] = (0, _react.useState)();
   (0, _react.useEffect)(() => {
     function fetchData() {
-      Promise.resolve().then(() => _interopRequireWildcard(require('../../data/unicodeData'))).then(data => {
+      (0, _retryImport.default)(() => Promise.resolve().then(() => _interopRequireWildcard(require('../../data/unicodeData')))).then(data => {
         if (!ignore) setData(data.default);
-      });
+      }).catch(() => {});
     }
     let ignore = false;
     fetchData();
@@ -109,10 +110,10 @@ function compareGlyphs(a, b) {
   return true;
 }
 function charCode(c) {
-  return c.charCodeAt(0);
+  return c.codePointAt(0) ?? 0;
 }
 function fromCharCode(code) {
-  return String.fromCharCode(code);
+  return String.fromCodePoint(code);
 }
 function flattenCharacterList(charSet, glyphNames) {
   if (!glyphNames || !charSet || !charSet.characters) return null;

package/dist/components/FontdueProvider/FontdueProviderClientComponent.js

@@ -14,12 +14,13 @@ var _ConfigContext = _interopRequireWildcard(require("../ConfigContext"));
 var _reducer = require("../../reducer");
 var _ComponentsContext = _interopRequireDefault(require("../ComponentsContext"));
 var _UrlContext = _interopRequireDefault(require("../UrlContext"));
+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; }
-const ConsentBanner = /*#__PURE__*/(0, _react.lazy)(() => Promise.resolve().then(() => _interopRequireWildcard(require('../ConsentBanner'))));
-const Tracking = /*#__PURE__*/(0, _react.lazy)(() => Promise.resolve().then(() => _interopRequireWildcard(require('../Tracking'))));
-const ServerConfigProvider = /*#__PURE__*/(0, _react.lazy)(() => Promise.resolve().then(() => _interopRequireWildcard(require('../ServerConfigProvider'))));
+const ConsentBanner = /*#__PURE__*/(0, _react.lazy)(() => (0, _retryImport.default)(() => Promise.resolve().then(() => _interopRequireWildcard(require('../ConsentBanner')))));
+const Tracking = /*#__PURE__*/(0, _react.lazy)(() => (0, _retryImport.default)(() => Promise.resolve().then(() => _interopRequireWildcard(require('../Tracking')))));
+const ServerConfigProvider = /*#__PURE__*/(0, _react.lazy)(() => (0, _retryImport.default)(() => Promise.resolve().then(() => _interopRequireWildcard(require('../ServerConfigProvider')))));
 function FontdueProviderClientComponent(_ref) {
   let {
     children,

package/dist/components/Root/index.js

@@ -9,6 +9,7 @@ var _reactErrorBoundary = require("react-error-boundary");
 var _reactDom = _interopRequireDefault(require("react-dom"));
 var _uuid = require("uuid");
 var _reducer = require("../../reducer");
+var _retryImport = _interopRequireDefault(require("../../retryImport"));
 var _utils = require("../../utils");
 var _FontdueProvider = _interopRequireDefault(require("../FontdueProvider"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
@@ -17,31 +18,31 @@ function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return
 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; }
 const customElementMap = {
   // @ts-ignore
-  'fontdue-add-to-cart-banner': /*#__PURE__*/(0, _react.lazy)(() => Promise.resolve().then(() => _interopRequireWildcard(require('../AddToCartBanner')))),
+  'fontdue-add-to-cart-banner': /*#__PURE__*/(0, _react.lazy)(() => (0, _retryImport.default)(() => Promise.resolve().then(() => _interopRequireWildcard(require('../AddToCartBanner'))))),
   // @ts-ignore
-  'fontdue-buying-options': /*#__PURE__*/(0, _react.lazy)(() => Promise.resolve().then(() => _interopRequireWildcard(require('../BuyingOptions')))),
-  'fontdue-buy-button': /*#__PURE__*/(0, _react.lazy)(() => Promise.resolve().then(() => _interopRequireWildcard(require('../BuyButton')))),
-  'fontdue-cart': /*#__PURE__*/(0, _react.lazy)(() => Promise.resolve().then(() => _interopRequireWildcard(require('../Cart')))),
-  'fontdue-cart-button': /*#__PURE__*/(0, _react.lazy)(() => Promise.resolve().then(() => _interopRequireWildcard(require('../CartButton')))),
-  'fontdue-character-viewer': /*#__PURE__*/(0, _react.lazy)(() => Promise.resolve().then(() => _interopRequireWildcard(require('../CharacterViewer')))),
+  'fontdue-buying-options': /*#__PURE__*/(0, _react.lazy)(() => (0, _retryImport.default)(() => Promise.resolve().then(() => _interopRequireWildcard(require('../BuyingOptions'))))),
+  'fontdue-buy-button': /*#__PURE__*/(0, _react.lazy)(() => (0, _retryImport.default)(() => Promise.resolve().then(() => _interopRequireWildcard(require('../BuyButton'))))),
+  'fontdue-cart': /*#__PURE__*/(0, _react.lazy)(() => (0, _retryImport.default)(() => Promise.resolve().then(() => _interopRequireWildcard(require('../Cart'))))),
+  'fontdue-cart-button': /*#__PURE__*/(0, _react.lazy)(() => (0, _retryImport.default)(() => Promise.resolve().then(() => _interopRequireWildcard(require('../CartButton'))))),
+  'fontdue-character-viewer': /*#__PURE__*/(0, _react.lazy)(() => (0, _retryImport.default)(() => Promise.resolve().then(() => _interopRequireWildcard(require('../CharacterViewer'))))),
   // @ts-ignore
-  'fontdue-collection-aa': /*#__PURE__*/(0, _react.lazy)(() => Promise.resolve().then(() => _interopRequireWildcard(require('../CollectionAa')))),
+  'fontdue-collection-aa': /*#__PURE__*/(0, _react.lazy)(() => (0, _retryImport.default)(() => Promise.resolve().then(() => _interopRequireWildcard(require('../CollectionAa'))))),
   // @ts-ignore
-  'fontdue-cookie-notification': /*#__PURE__*/(0, _react.lazy)(() => Promise.resolve().then(() => _interopRequireWildcard(require('../CookieNotification')))),
-  'fontdue-font-families': /*#__PURE__*/(0, _react.lazy)(() => Promise.resolve().then(() => _interopRequireWildcard(require('../FontFamilies')))),
-  'fontdue-customer-login-form': /*#__PURE__*/(0, _react.lazy)(() => Promise.resolve().then(() => _interopRequireWildcard(require('../CustomerLoginForm')))),
-  'fontdue-newsletter-signup': /*#__PURE__*/(0, _react.lazy)(() => Promise.resolve().then(() => _interopRequireWildcard(require('../NewsletterSignup/NewsletterSignupElement')))),
-  'fontdue-node-password-form': /*#__PURE__*/(0, _react.lazy)(() => Promise.resolve().then(() => _interopRequireWildcard(require('../NodePasswordForm')))),
+  'fontdue-cookie-notification': /*#__PURE__*/(0, _react.lazy)(() => (0, _retryImport.default)(() => Promise.resolve().then(() => _interopRequireWildcard(require('../CookieNotification'))))),
+  'fontdue-font-families': /*#__PURE__*/(0, _react.lazy)(() => (0, _retryImport.default)(() => Promise.resolve().then(() => _interopRequireWildcard(require('../FontFamilies'))))),
+  'fontdue-customer-login-form': /*#__PURE__*/(0, _react.lazy)(() => (0, _retryImport.default)(() => Promise.resolve().then(() => _interopRequireWildcard(require('../CustomerLoginForm'))))),
+  'fontdue-newsletter-signup': /*#__PURE__*/(0, _react.lazy)(() => (0, _retryImport.default)(() => Promise.resolve().then(() => _interopRequireWildcard(require('../NewsletterSignup/NewsletterSignupElement'))))),
+  'fontdue-node-password-form': /*#__PURE__*/(0, _react.lazy)(() => (0, _retryImport.default)(() => Promise.resolve().then(() => _interopRequireWildcard(require('../NodePasswordForm'))))),
   // @ts-ignore
-  'fontdue-precart': /*#__PURE__*/(0, _react.lazy)(() => Promise.resolve().then(() => _interopRequireWildcard(require('../Precart')))),
+  'fontdue-precart': /*#__PURE__*/(0, _react.lazy)(() => (0, _retryImport.default)(() => Promise.resolve().then(() => _interopRequireWildcard(require('../Precart'))))),
   // @ts-ignore
-  'fontdue-specimen-link': /*#__PURE__*/(0, _react.lazy)(() => Promise.resolve().then(() => _interopRequireWildcard(require('../SpecimenLink')))),
+  'fontdue-specimen-link': /*#__PURE__*/(0, _react.lazy)(() => (0, _retryImport.default)(() => Promise.resolve().then(() => _interopRequireWildcard(require('../SpecimenLink'))))),
   // @ts-ignore
-  'fontdue-sticky-nav': /*#__PURE__*/(0, _react.lazy)(() => Promise.resolve().then(() => _interopRequireWildcard(require('../StickyNav')))),
-  'fontdue-store-modal': /*#__PURE__*/(0, _react.lazy)(() => Promise.resolve().then(() => _interopRequireWildcard(require('../StoreModal')))),
-  'fontdue-test-fonts-form': /*#__PURE__*/(0, _react.lazy)(() => Promise.resolve().then(() => _interopRequireWildcard(require('../TestFontsForm/TestFontsFormElement')))),
-  'fontdue-type-tester': /*#__PURE__*/(0, _react.lazy)(() => Promise.resolve().then(() => _interopRequireWildcard(require('../TypeTester/TypeTesterStandaloneElement')))),
-  'fontdue-type-testers': /*#__PURE__*/(0, _react.lazy)(() => Promise.resolve().then(() => _interopRequireWildcard(require('../TypeTesters/TypeTestersElement'))))
+  'fontdue-sticky-nav': /*#__PURE__*/(0, _react.lazy)(() => (0, _retryImport.default)(() => Promise.resolve().then(() => _interopRequireWildcard(require('../StickyNav'))))),
+  'fontdue-store-modal': /*#__PURE__*/(0, _react.lazy)(() => (0, _retryImport.default)(() => Promise.resolve().then(() => _interopRequireWildcard(require('../StoreModal'))))),
+  'fontdue-test-fonts-form': /*#__PURE__*/(0, _react.lazy)(() => (0, _retryImport.default)(() => Promise.resolve().then(() => _interopRequireWildcard(require('../TestFontsForm/TestFontsFormElement'))))),
+  'fontdue-type-tester': /*#__PURE__*/(0, _react.lazy)(() => (0, _retryImport.default)(() => Promise.resolve().then(() => _interopRequireWildcard(require('../TypeTester/TypeTesterStandaloneElement'))))),
+  'fontdue-type-testers': /*#__PURE__*/(0, _react.lazy)(() => (0, _retryImport.default)(() => Promise.resolve().then(() => _interopRequireWildcard(require('../TypeTesters/TypeTestersElement')))))
 };
 Object.keys(customElementMap).forEach(elementName => {
   // this might be more sophisticated in the future with a shadow DOM, etc,

package/dist/corsError.js

@@ -4,6 +4,8 @@ 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;
@@ -35,6 +37,32 @@ function startPolling(fetchUrl) {
     }
   }, 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(_ref => {
+    let {
+      renderCorsErrorModal
+    } = _ref;
+    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;
@@ -43,13 +71,20 @@ function handlePossibleCorsError(error, fetchUrl) {
   if (detected) return true;
   detected = true;
   const origin = window.location.origin;
-  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`);
-  Promise.resolve().then(() => _interopRequireWildcard(require('./components/CorsErrorModal'))).then(_ref => {
-    let {
-      renderCorsErrorModal
-    } = _ref;
-    renderCorsErrorModal(origin, fetchUrl);
+
+  // 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.`);
+    }
   });
-  startPolling(fetchUrl);
   return true;
 }

package/dist/hooks/useAutofit.js

@@ -87,10 +87,11 @@ const useAutofit = _ref => {
     const availableWidth = containerWidth - padding;
     if (availableWidth <= 0 || !text) return;
 
-    // Use DOM measurement when variable font settings are active
-    // (canvas doesn't support fontVariationSettings in most browsers).
-    // Otherwise use canvas for better performance (no layout reflow).
-    const refWidth = fontVariationSettings ? measureWithDOM(text, fontFamily, fontWeight, fontStyle, letterSpacing, fontVariationSettings) : measureWithCanvas(text, fontFamily, fontWeight, fontStyle, letterSpacing);
+    // Split by newlines and measure the widest line, since the rendered
+    // text preserves line breaks (Draft.js uses white-space: pre-wrap).
+    const lines = text.split('\n');
+    const measure = fontVariationSettings ? line => measureWithDOM(line, fontFamily, fontWeight, fontStyle, letterSpacing, fontVariationSettings) : line => measureWithCanvas(line, fontFamily, fontWeight, fontStyle, letterSpacing);
+    const refWidth = Math.max(...lines.map(measure));
     if (refWidth <= 0) return;
 
     // Text width scales linearly with font size.

package/dist/retryImport.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Wraps a dynamic import in retry logic.
+ *
+ * Retries the factory up to `retries` times with a delay between attempts.
+ * Re-invoking the factory works on Safari (which doesn't cache module-map
+ * failures) and handles transient network blips on all browsers. Chrome and
+ * Firefox cache failed module fetches in the module map, so retries of the
+ * same specifier may return the cached rejection without a network request;
+ * the delay helps partially mitigate that, but is not a guaranteed fix.
+ *
+ * See: https://github.com/whatwg/html/issues/6768
+ */
+export default function retryImport<T>(load: () => Promise<T>, retries?: number, delay?: number): Promise<T>;

package/dist/retryImport.js

@@ -0,0 +1,26 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = retryImport;
+/**
+ * Wraps a dynamic import in retry logic.
+ *
+ * Retries the factory up to `retries` times with a delay between attempts.
+ * Re-invoking the factory works on Safari (which doesn't cache module-map
+ * failures) and handles transient network blips on all browsers. Chrome and
+ * Firefox cache failed module fetches in the module map, so retries of the
+ * same specifier may return the cached rejection without a network request;
+ * the delay helps partially mitigate that, but is not a guaranteed fix.
+ *
+ * See: https://github.com/whatwg/html/issues/6768
+ */
+function retryImport(load) {
+  let retries = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 2;
+  let delay = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 1000;
+  return load().catch(error => {
+    if (retries === 0) throw error;
+    return new Promise(resolve => setTimeout(resolve, delay)).then(() => retryImport(load, retries - 1, delay));
+  });
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fontdue-js",
-  "version": "2.20.0",
+  "version": "2.21.0",
   "scripts": {
     "build": "npm run relay && run-p build-js build-css build-ts",
     "build-js": "babel src --out-dir dist --extensions .ts,.tsx,.js,.jsx",