fontdue-js 2.22.4 → 3.0.0-alpha1

package/dist/relay/loadSerializableQuery.js

@@ -1,10 +1,5 @@
-"use strict";
+import { createNetworkFetch } from './environment.js';
 
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = loadSerializableQuery;
-var _environment = require("./environment");
 /**
  * RELAY CACHE KEY NORMALIZATION
  *
@@ -45,9 +40,10 @@ var _environment = require("./environment");
 // Call into raw network fetch to get serializable GraphQL query response
 // This response will be sent to the client to "warm" the QueryResponseCache
 // to avoid the client fetches.
-async function loadSerializableQuery(query, variables) {
+export default async function loadSerializableQuery(query, variables, options) {
   if (!('params' in query)) throw new Error('Params not found in query, is it a fragment instead of a query?');
-  const response = await (0, _environment.networkFetch)(query.params, variables);
+  const fetcher = createNetworkFetch(options);
+  const response = await fetcher(query.params, variables);
   return {
     params: query.params,
     variables,

package/dist/relay/useSerializablePreloadedQuery.d.ts

@@ -1,4 +1,4 @@
 import { PreloadedQuery, PreloadFetchPolicy } from "react-relay";
-import { OperationType } from "relay-runtime";
-import { SerializablePreloadedQuery } from "./loadSerializableQuery";
-export default function useSerializablePreloadedQuery<TQuery extends OperationType>(preloadQuery: SerializablePreloadedQuery<TQuery>, fetchPolicy?: PreloadFetchPolicy): PreloadedQuery<TQuery>;
+import { GraphQLTaggedNode, OperationType } from "relay-runtime";
+import { SerializablePreloadedQuery } from "./loadSerializableQuery.js";
+export default function useSerializablePreloadedQuery<TQuery extends OperationType>(preloadQuery: SerializablePreloadedQuery<TQuery>, fetchPolicy?: PreloadFetchPolicy, query?: GraphQLTaggedNode): PreloadedQuery<TQuery>;

package/dist/relay/useSerializablePreloadedQuery.js

@@ -1,29 +1,33 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = useSerializablePreloadedQuery;
-var _react = require("react");
-var _reactRelay = require("react-relay");
-var _environment = require("./environment");
 // Convert preloaded query object (with raw GraphQL Response) into
 // Relay's PreloadedQuery.
 
-// This hook convert serializable preloaded query
-// into Relay's PreloadedQuery object.
-// It is also writes this serializable preloaded query
-// into QueryResponseCache, so we the network layer
-// can use these cache results when fetching data
-// in `usePreloadedQuery`.
-function useSerializablePreloadedQuery(
-//environment: IEnvironment,
-preloadQuery) {
+import { useMemo } from "react";
+import { useRelayEnvironment } from "react-relay";
+import { createOperationDescriptor, getRequest } from "relay-runtime";
+import { responseCache } from "./environment.js";
+// This hook converts a serializable preloaded query into Relay's PreloadedQuery
+// object. It primes Relay so that `usePreloadedQuery` resolves synchronously on
+// both server and client:
+//   - On the client, it warms the QueryResponseCache so network-layer lookups hit.
+//   - When a `query` tagged node is provided, it also commits the response
+//     payload directly into the environment's Store via `commitPayload`. This is
+//     required for SSR frameworks (Astro, Vite SSR, etc.) whose non-streaming
+//     `renderToString` needs the data available synchronously during render.
+export default function useSerializablePreloadedQuery(preloadQuery) {
   let fetchPolicy = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : "store-or-network";
-  (0, _react.useMemo)(() => {
+  let query = arguments.length > 2 ? arguments[2] : undefined;
+  const environment = useRelayEnvironment();
+  useMemo(() => {
     writePreloadedQueryToCache(preloadQuery);
-  }, [preloadQuery]);
-  const environment = (0, _reactRelay.useRelayEnvironment)();
+    if (query != null) {
+      const response = preloadQuery.response;
+      const singular = Array.isArray(response) ? response[0] : response;
+      if ((singular === null || singular === void 0 ? void 0 : singular.data) != null) {
+        const operation = createOperationDescriptor(getRequest(query), preloadQuery.variables);
+        environment.commitPayload(operation, singular.data);
+      }
+    }
+  }, [preloadQuery, environment, query]);
   return {
     environment,
     fetchKey: preloadQuery.params.id ?? preloadQuery.params.cacheID,
@@ -40,5 +44,5 @@ preloadQuery) {
 function writePreloadedQueryToCache(preloadedQueryObject) {
   // @ts-ignore
   const cacheKey = preloadedQueryObject.params.id ?? preloadedQueryObject.params.cacheID;
-  _environment.responseCache === null || _environment.responseCache === void 0 ? void 0 : _environment.responseCache.set(cacheKey, preloadedQueryObject.variables, preloadedQueryObject.response);
+  responseCache === null || responseCache === void 0 ? void 0 : responseCache.set(cacheKey, preloadedQueryObject.variables, preloadedQueryObject.response);
 }

package/dist/retryImport.js

@@ -1,9 +1,3 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = retryImport;
 /**
  * Wraps a dynamic import in retry logic.
  *
@@ -16,7 +10,7 @@ exports.default = retryImport;
  *
  * See: https://github.com/whatwg/html/issues/6768
  */
-function retryImport(load) {
+export default 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 => {

package/dist/scripts/updateUnicodeData.js

@@ -1,5 +1,3 @@
-"use strict";
-
 const https = require('https');
 const fs = require('fs');
 const path = require('path');

package/dist/utils.d.ts

@@ -1,5 +1,5 @@
-import { CollectionStyleSkus } from './components/Root/productState';
-import type { FontdueState } from './reducer';
+import { CollectionStyleSkus } from './components/Root/productState.js';
+import type { FontdueState } from './reducer.js';
 export declare const pluralize: (count: number, singular: string, plural?: string) => string;
 export declare function notEmpty<TValue>(value: TValue | null | undefined): value is TValue;
 export declare function kebabToCamel(str: string): string;

package/dist/utils.js

@@ -1,46 +1,32 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.compareVariableSettings = exports.collectionSkuIdsDifferences = exports.collTransitivelyContainsSkuId = exports.collContainsSkuId = void 0;
-exports.getFeatureGlyphs = getFeatureGlyphs;
-exports.isSelected = exports.inspect = void 0;
-exports.kebabToCamel = kebabToCamel;
-exports.notEmpty = notEmpty;
-exports.variableSettingsCSS = exports.variableInstanceSettings = exports.variableInstanceCSS = exports.pluralize = exports.parseCustomProperties = void 0;
-const pluralize = (count, singular, plural) => {
+export const pluralize = (count, singular, plural) => {
   if (count === 1) return `1 ${singular}`;
   if (!plural) return `${count} ${singular}s`;
   return `${count}\xa0${plural}`;
 };
-exports.pluralize = pluralize;
-function notEmpty(value) {
+export function notEmpty(value) {
   return value !== null && value !== undefined;
 }
-function kebabToCamel(str) {
+export function kebabToCamel(str) {
   return str.replace(/-([a-z])/g, function (g) {
     return g[1].toUpperCase();
   });
 }
 
 // where coll is a member of `collectionStyleSkus`;
-const collContainsSkuId = (coll, skuIdOrStyleId) => {
+export const collContainsSkuId = (coll, skuIdOrStyleId) => {
   if (!coll) return false;
   return coll.childrenSkuIds.indexOf(skuIdOrStyleId) >= 0 || coll.fontStyleSkuIds.indexOf(skuIdOrStyleId) >= 0 || coll.fontStyleIds.indexOf(skuIdOrStyleId) >= 0;
 };
 
 // Transitive containment check — walks the collection hierarchy to find
 // if a SKU is contained at any depth (e.g., collection bundle → family → bundle)
-exports.collContainsSkuId = collContainsSkuId;
-const collTransitivelyContainsSkuId = (collectionStyleSkus, collSkuId, skuIdOrStyleId) => {
+export const collTransitivelyContainsSkuId = (collectionStyleSkus, collSkuId, skuIdOrStyleId) => {
   const coll = collectionStyleSkus[collSkuId];
   if (!coll) return false;
   if (collContainsSkuId(coll, skuIdOrStyleId)) return true;
   return coll.childrenSkuIds.some(childSkuId => collTransitivelyContainsSkuId(collectionStyleSkus, childSkuId, skuIdOrStyleId));
 };
-exports.collTransitivelyContainsSkuId = collTransitivelyContainsSkuId;
-const isSelected = skuIdOrStyleId => state => {
+export const isSelected = skuIdOrStyleId => state => {
   if (!skuIdOrStyleId) return false;
   if (state.selectedSkuIds[skuIdOrStyleId] === true) return true;
   // get the collections that contain this skuId as a fontStyle or child
@@ -53,8 +39,7 @@ const isSelected = skuIdOrStyleId => state => {
 // find any collection ancestors that contain this skuId,
 // then for each collection, sum the price of selected skus,
 // and return the delta between the collection price and the sum.
-exports.isSelected = isSelected;
-const collectionSkuIdsDifferences = (state, skuId) => Object.keys(state.collectionStyleSkus).filter(collectionSkuId => {
+export const collectionSkuIdsDifferences = (state, skuId) => Object.keys(state.collectionStyleSkus).filter(collectionSkuId => {
   return skuId === collectionSkuId || collTransitivelyContainsSkuId(state.collectionStyleSkus, collectionSkuId, skuId);
 }).reduce((acc, collectionSkuId) => {
   const selectedSkuIdsInColl = Object.keys(state.selectedSkuIds).filter(selectedSkuId => state.selectedSkuIds[selectedSkuId] === true && collTransitivelyContainsSkuId(state.collectionStyleSkus, collectionSkuId, selectedSkuId));
@@ -62,8 +47,7 @@ const collectionSkuIdsDifferences = (state, skuId) => Object.keys(state.collecti
   acc[collectionSkuId] = (state.skuPrices[collectionSkuId] ?? 0) - sumOfSelectedSkuIdsInColl;
   return acc;
 }, {});
-exports.collectionSkuIdsDifferences = collectionSkuIdsDifferences;
-const variableInstanceSettings = instance => instance === null || instance === void 0 ? void 0 : instance.coordinates.reduce((acc, _ref) => {
+export const variableInstanceSettings = instance => instance === null || instance === void 0 ? void 0 : instance.coordinates.reduce((acc, _ref) => {
   let {
     axis,
     value
@@ -71,14 +55,11 @@ const variableInstanceSettings = instance => instance === null || instance === v
   acc[axis] = value;
   return acc;
 }, {});
-exports.variableInstanceSettings = variableInstanceSettings;
-const compareVariableSettings = (instance, settings) => instance.coordinates.every(coord => settings[coord.axis] === coord.value);
-exports.compareVariableSettings = compareVariableSettings;
-const variableSettingsCSS = variableSettings => ({
+export const compareVariableSettings = (instance, settings) => instance.coordinates.every(coord => settings[coord.axis] === coord.value);
+export const variableSettingsCSS = variableSettings => ({
   fontVariationSettings: Object.keys(variableSettings).map(axis => `'${axis}' ${variableSettings[axis]}`).join(',')
 });
-exports.variableSettingsCSS = variableSettingsCSS;
-const variableInstanceCSS = variableInstance => ({
+export const variableInstanceCSS = variableInstance => ({
   fontVariationSettings: variableInstance.coordinates.map(_ref2 => {
     let {
       axis,
@@ -87,8 +68,7 @@ const variableInstanceCSS = variableInstance => ({
     return `'${axis}' ${value}`;
   }).join(',')
 });
-exports.variableInstanceCSS = variableInstanceCSS;
-const parseCustomProperties = props => {
+export const parseCustomProperties = props => {
   if (!props) return {};
   return props.reduce((acc, prop) => {
     const [key, val] = prop.split(':');
@@ -96,13 +76,11 @@ const parseCustomProperties = props => {
     return acc;
   }, {});
 };
-exports.parseCustomProperties = parseCustomProperties;
-const inspect = value => {
+export const inspect = value => {
   console.log(value);
   return value;
 };
-exports.inspect = inspect;
-function getFeatureGlyphs(supportedLanguages) {
+export function getFeatureGlyphs(supportedLanguages) {
   if (supportedLanguages !== null && supportedLanguages !== void 0 && supportedLanguages.includes('en')) return 'Aa';
   if (supportedLanguages !== null && supportedLanguages !== void 0 && supportedLanguages.includes('ar')) return 'ت';
   if (supportedLanguages !== null && supportedLanguages !== void 0 && supportedLanguages.includes('gr')) return 'Αα';

package/dist/vanilla/FontStyle.js

@@ -1,11 +1,4 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _fontfaceobserver = _interopRequireDefault(require("fontfaceobserver"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+import FontFaceObserver from 'fontfaceobserver';
 const FALLBACK_FAMILY = 'Fallback';
 const setStyle = ($el, _ref) => {
   let {
@@ -38,7 +31,7 @@ class FontStyle {
         fontWeight: 'normal',
         fontStyle: 'normal'
       });
-      const observer = new _fontfaceobserver.default(fontFamily, {
+      const observer = new FontFaceObserver(fontFamily, {
         weight: fontWeight,
         style: fontStyle
       });
@@ -56,5 +49,4 @@ class FontStyle {
     });
   }
 }
-var _default = FontStyle;
-exports.default = _default;
+export default FontStyle;

package/dist/vanilla/TruncatedMarkdown.js

@@ -1,9 +1,3 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
 function insertAfter(newNode, referenceNode) {
   referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);
 }
@@ -19,10 +13,9 @@ const init = $element => {
     expand($element);
   });
 };
-class TruncatedMarkdown {
+export default class TruncatedMarkdown {
   constructor() {
     this.$elements = [...document.querySelectorAll('[data-truncated-rest-text]')];
     this.$elements.forEach(init);
   }
-}
-exports.default = TruncatedMarkdown;
+}

package/dist/vite.d.ts

@@ -0,0 +1 @@
+export default function fontdueJs(): unknown[];

package/dist/vite.js

@@ -0,0 +1,74 @@
+// Vite plugin that fixes the SSR-side CJS interop fontdue-js's deps need.
+//
+// fontdue-js itself is published as transpiled (not bundled) ESM. Its Relay
+// + draft-js + fbjs deps still ship as CJS using `module.exports = require(…)`
+// re-export shapes that Node's strict ESM-CJS interop (and Vite's dev SSR
+// module-runner) can't named-import from. Without help, `import { graphql }
+// from 'react-relay'` blows up at SSR time with `Named export 'graphql' not
+// found` or `module is not defined`.
+//
+// `vite-plugin-cjs-interop` is the canonical fix for this — referenced by the
+// Relay maintainers in https://github.com/facebook/relay/issues/4548. It
+// rewrites named imports of the listed packages to read from `.default` after
+// CJS load, which is what Node + Vite actually expose.
+//
+// Consumers wire it up like:
+//
+//   // vite.config.ts
+//   import fontdueJs from 'fontdue-js/vite';
+//   export default defineConfig({ plugins: [fontdueJs()] });
+//
+// Returned shape is structurally a Vite Plugin (or array of plugins).
+//
+// @ts-ignore — vite-plugin-cjs-interop has no bundled types but exports
+// cjsInterop at runtime; we don't take a build-time `vite` dep on the user.
+import { cjsInterop } from 'vite-plugin-cjs-interop';
+
+// Packages whose imports cjsInterop should rewrite to default-import +
+// destructure shape. Limit this to packages that genuinely ship as CJS-only
+// with `module.exports = require('./lib')` shapes that defeat named-import
+// resolution. React-redux is real ESM and must NOT be in this list — its
+// ESM build has true named exports.
+const CJS_DEPS = ['react-relay', 'relay-runtime', 'draft-js', 'fbjs'];
+
+// Packages to pre-bundle for the browser via Vite's optimizer. Pre-bundling
+// pulls a package's transitive deps into one esbuild output, which sidesteps
+// the cjs-module-lexer trap when an ESM package (react-redux) imports a CJS
+// transitive (use-sync-external-store). Without this, the browser dev path
+// fails with "does not provide an export named useSyncExternalStoreWithSelector".
+const CLIENT_OPTIMIZE = [...CJS_DEPS, 'react-redux'];
+export default function fontdueJs() {
+  return [cjsInterop({
+    dependencies: CJS_DEPS
+  }), {
+    name: 'fontdue-js',
+    config() {
+      return {
+        // Pre-bundle the CJS-shaped deps via esbuild for the client
+        // bundle. Without this, Astro dev's browser pass tries to
+        // ESM-import `Environment` from `relay-runtime` and fails —
+        // its `module.exports = require('./lib/index.js')` shape can't
+        // be statically analyzed for named exports.
+        optimizeDeps: {
+          include: [...CLIENT_OPTIMIZE]
+        },
+        // fbjs (transitive via draft-js) references Node's `global` at
+        // module init. Browsers don't define it, so the pre-bundled chunk
+        // throws `ReferenceError: global is not defined`. Aliasing
+        // `global` to `globalThis` at compile time covers both browser
+        // and SSR paths.
+        define: {
+          global: 'globalThis'
+        },
+        ssr: {
+          // Run fontdue-js source through Vite's transform pipeline so
+          // cjsInterop sees its imports of CJS-shaped Relay/draft-js/fbjs
+          // and rewrites them. Otherwise Node externalizes fontdue-js and
+          // its `import { graphql } from 'react-relay'` fails — cjs-module-
+          // lexer can't extract names from `module.exports = require('./lib')`.
+          noExternal: ['fontdue-js']
+        }
+      };
+    }
+  }];
+}

package/package.json

@@ -1,6 +1,7 @@
 {
   "name": "fontdue-js",
-  "version": "2.22.4",
+  "version": "3.0.0-alpha1",
+  "type": "module",
   "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",
@@ -21,12 +22,10 @@
   },
   "dependencies": {
     "@emotion/react": "^11.14.0",
-    "@react-hook/resize-observer": "^2",
     "@react-hook/window-size": "^3.0.7",
     "@sentry/react": "^10.17.0",
     "@stripe/react-stripe-js": "^3.8.1",
     "@stripe/stripe-js": "^7.7.0",
-    "classnames": "^2.2.5",
     "draft-js": "^0.11.7",
     "fast-deep-equal": "^2.0.1",
     "fontfaceobserver": "^2.0.13",
@@ -38,7 +37,8 @@
     "redux": "^5.0.0",
     "relay-runtime": "^20.0.0",
     "store": "^2.0.12",
-    "uuid": "^8.3.2"
+    "uuid": "^8.3.2",
+    "vite-plugin-cjs-interop": "^3.3.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.15.7",
@@ -80,6 +80,7 @@
     "@types/react": "19.0.0"
   },
   "exports": {
+    ".": "./dist/index.js",
     "./fontdue.css": "./dist/fontdue.css",
     "./BuyButton": {
       "react-server": "./dist/components/BuyButton/index.server.js",
@@ -111,6 +112,8 @@
       "react-server": "./dist/components/TypeTester/TypeTesterStandalone.server.js",
       "default": "./dist/components/TypeTester/TypeTesterStandalone.js"
     },
+    "./TypeTester/preload": "./dist/components/TypeTester/TypeTesterStandalone.preload.js",
+    "./vite": "./dist/vite.js",
     "./TypeTesters": {
       "react-server": "./dist/components/TypeTesters/index.server.js",
       "default": "./dist/components/TypeTesters/index.js"

package/scripts/addJsExtensionsBabelPlugin.cjs

@@ -0,0 +1,62 @@
+// Babel plugin: rewrite extensionless relative imports to add `.js`. Mirrors
+// the source codemod (scripts/addJsExtensionsToSource.mjs) for two cases the
+// codemod can't touch:
+//   1. src/__generated__/*.graphql.ts — emitted by relay-compiler, regenerated
+//      on every `npm run relay`, so any source-level edit would be reverted.
+//   2. Imports synthesized by babel-plugin-relay from `graphql\`...\`` tags —
+//      these don't exist in source at all; they're inserted during the babel
+//      pass, after the codemod has already run.
+//
+// Order matters: this plugin must run after 'relay' so it sees those inserted
+// imports. Babel runs plugins in array order, so list this plugin last.
+
+const path = require('path');
+const fs = require('fs');
+
+const SOURCE_EXTS = ['.ts', '.tsx', '.js', '.jsx'];
+
+function resolveSpecifier(filename, specifier) {
+  if (!specifier.startsWith('./') && !specifier.startsWith('../')) return null;
+  const baseDir = path.dirname(filename);
+  const abs = path.resolve(baseDir, specifier);
+  for (const ext of SOURCE_EXTS) {
+    if (fs.existsSync(abs + ext)) return specifier + '.js';
+  }
+  if (fs.existsSync(abs) && fs.statSync(abs).isDirectory()) {
+    for (const ext of SOURCE_EXTS) {
+      if (fs.existsSync(path.join(abs, 'index' + ext))) {
+        return specifier.replace(/\/$/, '') + '/index.js';
+      }
+    }
+  }
+  return null;
+}
+
+module.exports = function addJsExtensionsPlugin({ types: t }) {
+  function rewriteSource(node, filename) {
+    if (!node || !node.source || !filename) return;
+    const next = resolveSpecifier(filename, node.source.value);
+    if (next != null) node.source = t.stringLiteral(next);
+  }
+  return {
+    name: 'add-js-extensions',
+    visitor: {
+      ImportDeclaration(p, state) {
+        rewriteSource(p.node, state.filename);
+      },
+      ExportNamedDeclaration(p, state) {
+        rewriteSource(p.node, state.filename);
+      },
+      ExportAllDeclaration(p, state) {
+        rewriteSource(p.node, state.filename);
+      },
+      CallExpression(p, state) {
+        if (p.node.callee.type !== 'Import') return;
+        const arg = p.node.arguments[0];
+        if (!arg || arg.type !== 'StringLiteral') return;
+        const next = resolveSpecifier(state.filename, arg.value);
+        if (next != null) arg.value = next;
+      },
+    },
+  };
+};

package/types/globals.d.ts

@@ -0,0 +1,3 @@
+// Build-time injected by an inline babel plugin in .babelrc.cjs.
+// Source of truth is `package.json#version`.
+declare const __FONTDUE_JS_VERSION__: string;