fontdue-js 2.22.0 → 2.22.1

package/dist-cjs/utils.js

@@ -0,0 +1,107 @@
+"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) => {
+  if (count === 1) return `1 ${singular}`;
+  if (!plural) return `${count} ${singular}s`;
+  return `${count}\xa0${plural}`;
+};
+exports.pluralize = pluralize;
+function notEmpty(value) {
+  return value !== null && value !== undefined;
+}
+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) => {
+  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) => {
+  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 => {
+  if (!skuIdOrStyleId) return false;
+  if (state.selectedSkuIds[skuIdOrStyleId] === true) return true;
+  // get the collections that contain this skuId as a fontStyle or child
+  const parentCollectionSkuIds = Object.keys(state.collectionStyleSkus).filter(collSkuId => collContainsSkuId(state.collectionStyleSkus[collSkuId], skuIdOrStyleId));
+  // Recursively check ancestors — handles transitive selection
+  // (e.g., collection bundle → family → bundle)
+  return parentCollectionSkuIds.some(parentSkuId => isSelected(parentSkuId)(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 => {
+  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));
+  const sumOfSelectedSkuIdsInColl = selectedSkuIdsInColl.map(selectedSkuId => state.skuPrices[selectedSkuId] ?? 0).reduce((acc, price) => acc + price, 0);
+  acc[collectionSkuId] = (state.skuPrices[collectionSkuId] ?? 0) - sumOfSelectedSkuIdsInColl;
+  return acc;
+}, {});
+exports.collectionSkuIdsDifferences = collectionSkuIdsDifferences;
+const variableInstanceSettings = instance => instance?.coordinates.reduce((acc, {
+  axis,
+  value
+}) => {
+  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 => ({
+  fontVariationSettings: Object.keys(variableSettings).map(axis => `'${axis}' ${variableSettings[axis]}`).join(',')
+});
+exports.variableSettingsCSS = variableSettingsCSS;
+const variableInstanceCSS = variableInstance => ({
+  fontVariationSettings: variableInstance.coordinates.map(({
+    axis,
+    value
+  }) => `'${axis}' ${value}`).join(',')
+});
+exports.variableInstanceCSS = variableInstanceCSS;
+const parseCustomProperties = props => {
+  if (!props) return {};
+  return props.reduce((acc, prop) => {
+    const [key, val] = prop.split(':');
+    acc[key] = val;
+    return acc;
+  }, {});
+};
+exports.parseCustomProperties = parseCustomProperties;
+const inspect = value => {
+  console.log(value);
+  return value;
+};
+exports.inspect = inspect;
+function getFeatureGlyphs(supportedLanguages) {
+  if (supportedLanguages?.includes('en')) return 'Aa';
+  if (supportedLanguages?.includes('ar')) return 'ت';
+  if (supportedLanguages?.includes('gr')) return 'Αα';
+  if (supportedLanguages?.includes('ru')) return 'Аа';
+  return null;
+}

package/dist-cjs/vanilla/FontStyle.js

@@ -0,0 +1,58 @@
+"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 }; }
+const FALLBACK_FAMILY = 'Fallback';
+const setStyle = ($el, {
+  fontFamily,
+  fontWeight,
+  fontStyle
+}) => {
+  $el.style.fontFamily = `"${fontFamily}"`;
+  $el.style.fontWeight = fontWeight;
+  $el.style.fontStyle = fontStyle;
+};
+class FontStyle {
+  constructor(props) {
+    this.$fontStyles = [...document.querySelectorAll('[data-font-style]')];
+    this.render(props);
+  }
+  render({
+    onAllFontsLoaded
+  } = {}) {
+    let loaded = 0;
+    const toLoad = this.$fontStyles.length;
+    this.$fontStyles.forEach($fontStyle => {
+      const data = JSON.parse($fontStyle.dataset.fontStyle);
+      const fontFamily = data['font-family'];
+      const fontWeight = data['font-weight'];
+      const fontStyle = data['font-style'];
+      setStyle($fontStyle, {
+        fontFamily: FALLBACK_FAMILY,
+        fontWeight: 'normal',
+        fontStyle: 'normal'
+      });
+      const observer = new _fontfaceobserver.default(fontFamily, {
+        weight: fontWeight,
+        style: fontStyle
+      });
+      observer.load(null, 90000).then(out => {
+        loaded++;
+        if (typeof onAllFontsLoaded === 'function' && loaded === toLoad) {
+          onAllFontsLoaded();
+        }
+        setStyle($fontStyle, {
+          fontFamily,
+          fontWeight,
+          fontStyle
+        });
+      }).catch(console.error);
+    });
+  }
+}
+var _default = FontStyle;
+exports.default = _default;

package/dist-cjs/vanilla/TruncatedMarkdown.js

@@ -0,0 +1,28 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+function insertAfter(newNode, referenceNode) {
+  referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);
+}
+const expand = $element => {
+  const html = JSON.parse($element.dataset.truncatedRestText);
+  const $node = document.createElement('div');
+  $node.innerHTML = html;
+  insertAfter($node, $element);
+  $element.querySelector('button').style.visibility = 'hidden';
+};
+const init = $element => {
+  $element.querySelector('button').addEventListener('click', () => {
+    expand($element);
+  });
+};
+class TruncatedMarkdown {
+  constructor() {
+    this.$elements = [...document.querySelectorAll('[data-truncated-rest-text]')];
+    this.$elements.forEach(init);
+  }
+}
+exports.default = TruncatedMarkdown;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fontdue-js",
-  "version": "2.22.0",
+  "version": "2.22.1",
   "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",

package/dist-bundle/FontdueProvider.js

@@ -1,6 +0,0 @@
-'use client';
-import './chunks/ComponentsContext-CmkN9J4X.js';
-import 'react';
-export { F as default } from './chunks/index-C4ak9qTL.js';
-import './index.js';
-//# sourceMappingURL=FontdueProvider.js.map

package/dist-bundle/FontdueProvider.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"FontdueProvider.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}

package/dist-bundle/TypeTester.js

@@ -1,7 +0,0 @@
-'use client';
-import './chunks/ComponentsContext-CmkN9J4X.js';
-export { T as TypeTesterStandalonePreloadedQueryRenderer, a as default } from './chunks/TypeTesterStandalone-BMWuv8Ca.js';
-import 'react';
-import './index.js';
-import 'react-dom';
-//# sourceMappingURL=TypeTester.js.map

package/dist-bundle/TypeTester.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"TypeTester.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;"}

package/dist-bundle/TypeTester.preload.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"TypeTester.preload.js","sources":["../src/relay/loadSerializableQuery.ts","../src/components/TypeTester/TypeTesterStandalone.preload.tsx"],"sourcesContent":["import {\n  GraphQLResponse,\n  GraphQLTaggedNode,\n  OperationType,\n  RequestParameters,\n  VariablesOf,\n} from 'relay-runtime';\nimport { createNetworkFetch } from './environment';\n\nexport interface SerializablePreloadedQuery<TQuery extends OperationType> {\n  params: RequestParameters;\n  variables: VariablesOf<TQuery>;\n  response: GraphQLResponse;\n}\n\n/**\n * RELAY CACHE KEY NORMALIZATION\n *\n * This type transformation is required to fix a cache key inconsistency issue in Relay.\n *\n * THE PROBLEM:\n * Relay's `getOperationVariables()` function always includes ALL argumentDefinitions\n * from the GraphQL operation, even optional ones, setting them to their defaultValue\n * (typically null). This means when Relay generates cache keys, it creates entries like:\n *\n * Cache Key A: { collectionId: \"123\", tags: null, excludeTags: null, selectable: true }\n * Cache Key B: { collectionId: \"123\", selectable: true }  // when optional vars omitted\n *\n * Even though these represent the same logical query, they produce different cache keys\n * because `JSON.stringify(stableCopy(variables))` serializes them differently.\n *\n *  (This is possibly caused by NextJS RSC data serialization and hydration)\n *\n * THE ROOT CAUSE:\n * - GraphQL schema defines: `$tags: [String!], $excludeTags: [String!]` (optional)\n * - TypeScript generates: `tags?: ReadonlyArray<string> | null`\n * - Relay's argumentDefinitions include: `{ name: \"tags\", defaultValue: null }`\n * - getOperationVariables() always sets: `operationVariables[def.name] = def.defaultValue`\n *\n * THE SOLUTION:\n * RequireAllWithNull<T> transforms optional properties to required properties with\n * explicit null values, forcing callers to be consistent. This ensures server-side\n * preloaded queries and client-side cache lookups use identical variable structures.\n *\n * USAGE:\n * Instead of: { tags, excludeTags } // undefined values\n * Use:        { tags: tags ?? null, excludeTags: excludeTags ?? null } // explicit nulls\n *\n * This eliminates cache misses caused by variable structure inconsistencies between\n * server-side rendering and client-side Relay operations.\n */\ntype RequireAllWithNull<T> = {\n  [K in keyof T]-?: T[K] | null;\n};\n\nexport interface LoadSerializableQueryOptions {\n  url?: string;\n  stripeIntegration?: 'card-element' | 'dynamic';\n}\n\n// Call into raw network fetch to get serializable GraphQL query response\n// This response will be sent to the client to \"warm\" the QueryResponseCache\n// to avoid the client fetches.\nexport default async function loadSerializableQuery<TQuery extends OperationType>(\n  query: GraphQLTaggedNode,\n  variables: RequireAllWithNull<VariablesOf<TQuery>>,\n  options?: LoadSerializableQueryOptions,\n): Promise<SerializablePreloadedQuery<TQuery>> {\n  if (!('params' in query))\n    throw new Error('Params not found in query, is it a fragment instead of a query?');\n  const fetcher = createNetworkFetch(options);\n  const response = await fetcher(query.params, variables);\n\n  return {\n    params: query.params,\n    variables,\n    response,\n  };\n}\n","import React from 'react';\nimport loadSerializableQuery, {\n  LoadSerializableQueryOptions,\n  SerializablePreloadedQuery,\n} from '../../relay/loadSerializableQuery';\nimport TypeTesterStandaloneQueryNode, {\n  TypeTesterStandaloneQuery,\n} from '../../__generated__/TypeTesterStandaloneQuery.graphql';\nimport FontdueProvider from '../FontdueProvider';\nimport { TypeTesterStandalonePreloadedQueryRenderer } from './TypeTesterStandalone';\n\nexport type TypeTesterPreloadedQuery =\n  SerializablePreloadedQuery<TypeTesterStandaloneQuery>;\n\nexport interface LoadTypeTesterQueryVariables {\n  familyName: string;\n  styleName: string;\n  selectable?: boolean;\n}\n\nexport async function loadTypeTesterQuery(\n  variables: LoadTypeTesterQueryVariables,\n  options?: LoadSerializableQueryOptions,\n): Promise<TypeTesterPreloadedQuery> {\n  return loadSerializableQuery<TypeTesterStandaloneQuery>(\n    TypeTesterStandaloneQueryNode,\n    {\n      familyName: variables.familyName,\n      styleName: variables.styleName,\n      selectable: variables.selectable ?? true,\n    },\n    options,\n  );\n}\n\ntype RendererProps = React.ComponentProps<typeof TypeTesterStandalonePreloadedQueryRenderer>;\n\n// Self-wraps with FontdueProvider so consumers don't need to. The provider\n// state is a module-level singleton under the hood, so multiple\n// TypeTesterPreloaded (or other *Preloaded) components on a page all share\n// one Relay env + Redux store + auxiliary UI.\nexport function TypeTesterPreloaded(props: RendererProps) {\n  return (\n    <FontdueProvider>\n      <TypeTesterStandalonePreloadedQueryRenderer {...props} />\n    </FontdueProvider>\n  );\n}\n"],"names":["loadSerializableQuery","query","variables","options","Error","fetcher","createNetworkFetch","response","params","loadTypeTesterQuery","TypeTesterStandaloneQueryNode","familyName","styleName","selectable","TypeTesterPreloaded","props","React","createElement","FontdueProvider","TypeTesterStandalonePreloadedQueryRenderer"],"mappings":";;;;;;;AAeA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAUA;AACA;AACA;AACe,eAAeA,qBAAqBA,CACjDC,KAAwB,EACxBC,SAAkD,EAClDC,OAAsC,EACO;EAC7C,IAAI,EAAE,QAAQ,IAAIF,KAAK,CAAC,EACtB,MAAM,IAAIG,KAAK,CAAC,iEAAiE,CAAC;AACpF,EAAA,MAAMC,OAAO,GAAGC,kBAAkB,CAACH,OAAO,CAAC;EAC3C,MAAMI,QAAQ,GAAG,MAAMF,OAAO,CAACJ,KAAK,CAACO,MAAM,EAAEN,SAAS,CAAC;EAEvD,OAAO;IACLM,MAAM,EAAEP,KAAK,CAACO,MAAM;IACpBN,SAAS;AACTK,IAAAA;GACD;AACH;;AC1DO,eAAeE,mBAAmBA,CACvCP,SAAuC,EACvCC,OAAsC,EACH;EACnC,OAAOH,qBAAqB,CAC1BU,IAA6B,EAC7B;IACEC,UAAU,EAAET,SAAS,CAACS,UAAU;IAChCC,SAAS,EAAEV,SAAS,CAACU,SAAS;AAC9BC,IAAAA,UAAU,EAAEX,SAAS,CAACW,UAAU,IAAI;GACrC,EACDV,OACF,CAAC;AACH;AAIA;AACA;AACA;AACA;AACO,SAASW,mBAAmBA,CAACC,KAAoB,EAAE;AACxD,EAAA,oBACEC,cAAA,CAAAC,aAAA,CAACC,eAAe,EAAA,IAAA,eACdF,cAAA,CAAAC,aAAA,CAACE,0CAA0C,EAAKJ,KAAQ,CACzC,CAAC;AAEtB;;;;"}