fontdue-js 2.28.0 → 3.0.0-alpha10

package/dist/components/CartButton/index.js

@@ -1,25 +1,16 @@
-"use strict";
 'use client';
 
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.CartButtonPreloadedQueryRenderer = CartButtonPreloadedQueryRenderer;
-exports.default = CartButton;
-var _CartButtonQuery2 = _interopRequireDefault(require("../../__generated__/CartButtonQuery.graphql"));
-var _CartButton_order2 = _interopRequireDefault(require("../../__generated__/CartButton_order.graphql"));
-var _react = _interopRequireWildcard(require("react"));
-var _reactRedux = require("react-redux");
-var _reactRelay = require("react-relay");
-var _ComponentsContext = _interopRequireDefault(require("../ComponentsContext"));
-var _ConfigContext = _interopRequireDefault(require("../ConfigContext"));
-var _Icons = require("../Icons");
-var _useSerializablePreloadedQuery = _interopRequireDefault(require("../../relay/useSerializablePreloadedQuery"));
-var _Price = _interopRequireWildcard(require("../Price"));
-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; }
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+import _CartButtonQuery from "../../__generated__/CartButtonQuery.graphql.js";
+import _CartButton_order from "../../__generated__/CartButton_order.graphql.js";
+import React, { Suspense, useEffect, useCallback, useContext, useState } from 'react';
+import { useDispatch } from 'react-redux';
+import { graphql, useFragment, useLazyLoadQuery } from 'react-relay';
+import ComponentsContext from '../ComponentsContext.js';
+import ConfigContext from '../ConfigContext.js';
+import { CartNew } from '../Icons/index.js';
+import Price, { PriceFormat } from '../Price/index.js';
+import { EnsureFontdueContext } from '../FontdueContextProvider/index.js';
 function getOrderCount(order) {
   return order.orderItems ? order.orderItems.length : 0;
 }
@@ -38,49 +29,37 @@ function CartButtonComponent(_ref) {
     children,
     suffix
   } = _ref;
-  const orderData = (0, _reactRelay.useFragment)((_CartButton_order2.default.hash && _CartButton_order2.default.hash !== "26a092d7efb579c98adda18413349b3b" && console.error("The definition of 'CartButton_order' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _CartButton_order2.default), orderKey);
-  const [count, setCount] = (0, _react.useState)(0);
-  const dispatch = (0, _reactRedux.useDispatch)();
+  const orderData = useFragment((_CartButton_order.hash && _CartButton_order.hash !== "26a092d7efb579c98adda18413349b3b" && console.error("The definition of 'CartButton_order' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _CartButton_order), orderKey);
+  const [count, setCount] = useState(0);
+  const dispatch = useDispatch();
   const {
     storeModal: storeModalConfig
-  } = (0, _react.useContext)(_ConfigContext.default);
-  const formatSuffix = (0, _react.useCallback)(() => {
+  } = useContext(ConfigContext);
+  const formatSuffix = useCallback(() => {
     if (!suffix) return null;
-
-    // Check if the suffix contains any substitutions
     const hasSubstitutions = /\{(count|subtotal)\}/.test(suffix);
-
-    // Hide if there are substitutions and cart is empty
     if (hasSubstitutions && count === 0) return null;
-
-    // Split into parts: ['text', '{placeholder}', 'text', '{placeholder}', 'text']
     const parts = suffix.split(/(\{[^}]+\})/);
-
-    // Transform each part based on whether it's a placeholder or text
     const nodes = parts.map((part, index) => {
       const match = part.match(/^\{([^}]+)\}$/);
-      if (!match) return part || null; // Regular text
-
-      // Handle placeholder
+      if (!match) return part || null;
       const placeholder = match[1];
       switch (placeholder) {
         case 'count':
           return count > 0 ? count.toString() : null;
         case 'subtotal':
-          return orderData !== null && orderData !== void 0 && orderData.subtotal ? /*#__PURE__*/_react.default.createElement(_Price.default, {
+          return orderData !== null && orderData !== void 0 && orderData.subtotal ? /*#__PURE__*/React.createElement(Price, {
             key: `price-${index}`,
             price: orderData.subtotal,
-            format: _Price.PriceFormat.Truncated
+            format: PriceFormat.Truncated
           }) : null;
         default:
           return part;
-        // Keep unknown placeholders as-is
       }
-    }).filter(Boolean); // Remove null/empty parts
-
+    }).filter(Boolean);
     return nodes.length > 0 ? nodes : null;
   }, [suffix, count, orderData === null || orderData === void 0 ? void 0 : orderData.subtotal]);
-  const handleClick = (0, _react.useCallback)(() => {
+  const handleClick = useCallback(() => {
     if (count > 0 || storeModalConfig.hideAllCollections) {
       dispatch({
         type: 'STORE_MODAL_REPLACE',
@@ -89,47 +68,59 @@ function CartButtonComponent(_ref) {
     }
     dispatch(openCart());
   }, [count, dispatch, storeModalConfig.hideAllCollections]);
-  (0, _react.useEffect)(() => {
-    // set count only on the client, because on the server it's always gonna be zero
+  useEffect(() => {
     setCount(cartButtonCount(orderData));
   }, [orderData, setCount]);
   if (!orderData) return null;
   if (orderData.stripeCharge && orderData.stripeCharge.paid) return null;
   const suffixNodes = formatSuffix();
-  return /*#__PURE__*/_react.default.createElement(_ComponentsContext.default.Consumer, null, components => components.CartButton ? /*#__PURE__*/_react.default.createElement(components.CartButton, {
+  return /*#__PURE__*/React.createElement(ComponentsContext.Consumer, null, components => components.CartButton ? /*#__PURE__*/React.createElement(components.CartButton, {
     count: count,
     innerProps: {
       onClick: handleClick
     }
-  }) : /*#__PURE__*/_react.default.createElement("button", {
+  }) : /*#__PURE__*/React.createElement("button", {
     className: "cart-button",
     onClick: handleClick,
     "data-count": count,
     "data-active": count >= 1,
     "data-button-style": buttonStyle
-  }, children ? children : buttonStyle === 'icon' ? /*#__PURE__*/_react.default.createElement(_Icons.CartNew, null) : /*#__PURE__*/_react.default.createElement("span", {
+  }, children ? children : buttonStyle === 'icon' ? /*#__PURE__*/React.createElement(CartNew, null) : /*#__PURE__*/React.createElement("span", {
     className: "cart-button__label"
-  }, label || 'Cart', suffixNodes && /*#__PURE__*/_react.default.createElement("span", {
+  }, label || 'Cart', suffixNodes && /*#__PURE__*/React.createElement("span", {
     className: "cart-button__suffix"
   }, suffixNodes))));
 }
-const query = (_CartButtonQuery2.default.hash && _CartButtonQuery2.default.hash !== "5c0da5849bf1215a9d1f264831830f71" && console.error("The definition of 'CartButtonQuery' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _CartButtonQuery2.default);
-function CartButtonPreloadedQueryRenderer(_ref2) {
+const query = (_CartButtonQuery.hash && _CartButtonQuery.hash !== "5c0da5849bf1215a9d1f264831830f71" && console.error("The definition of 'CartButtonQuery' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _CartButtonQuery);
+function CartButtonLazyQueryRenderer(props) {
   var _data$viewer;
-  let {
-    preloadedQuery,
-    ...rest
-  } = _ref2;
-  const queryRef = (0, _useSerializablePreloadedQuery.default)(preloadedQuery);
-  const data = (0, _reactRelay.usePreloadedQuery)(query, queryRef);
-  return /*#__PURE__*/_react.default.createElement(CartButtonComponent, _extends({}, rest, {
+  const data = useLazyLoadQuery(query, {});
+  return /*#__PURE__*/React.createElement(CartButtonComponent, _extends({}, props, {
     order: ((_data$viewer = data.viewer) === null || _data$viewer === void 0 ? void 0 : _data$viewer.currentOrder) ?? null
   }));
 }
-function CartButton(props) {
-  var _data$viewer2;
-  const data = (0, _reactRelay.useLazyLoadQuery)(query, {});
-  return /*#__PURE__*/_react.default.createElement(CartButtonComponent, _extends({}, props, {
-    order: ((_data$viewer2 = data.viewer) === null || _data$viewer2 === void 0 ? void 0 : _data$viewer2.currentOrder) ?? null
-  }));
+// Cart contents are per-customer-session, so a server-side preload from a
+// CDN-cached SSG/prerender environment (no session cookies) just caches an
+// empty cart and delays the real one. CartButton lazy-fetches on hydration —
+// and only after mount: useLazyLoadQuery would otherwise also run during the
+// SSR pass, where the fetch is sessionless (and in multi-tenant setups may
+// have no resolvable GraphQL URL at all). Until mount it renders the empty
+// cart state, which is also the Suspense fallback while the real fetch runs,
+// so server HTML and first client render agree.
+export default function CartButton(_ref2) {
+  let {
+    config,
+    ...props
+  } = _ref2;
+  const [mounted, setMounted] = useState(false);
+  useEffect(() => setMounted(true), []);
+  return /*#__PURE__*/React.createElement(EnsureFontdueContext, {
+    config: config
+  }, mounted ? /*#__PURE__*/React.createElement(Suspense, {
+    fallback: /*#__PURE__*/React.createElement(CartButtonComponent, _extends({}, props, {
+      order: null
+    }))
+  }, /*#__PURE__*/React.createElement(CartButtonLazyQueryRenderer, props)) : /*#__PURE__*/React.createElement(CartButtonComponent, _extends({}, props, {
+    order: null
+  })));
 }

package/dist/components/CharacterViewer/StyleSelect.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { VariableSettings } from '../../utils';
+import { VariableSettings } from '../../utils.js';
 interface StyleSelect_props {
     collections: readonly {
         name: string;

package/dist/components/CharacterViewer/StyleSelect.js

@@ -1,14 +1,7 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = StyleSelect;
-var _react = _interopRequireDefault(require("react"));
-var _Select = _interopRequireDefault(require("../Select"));
-var _utils = require("../../utils");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-function StyleSelect(_ref) {
+import React from 'react';
+import Select from '../Select/index.js';
+import { compareVariableSettings, notEmpty, variableInstanceSettings } from '../../utils.js';
+export default function StyleSelect(_ref) {
   let {
     collections,
     value,
@@ -27,7 +20,7 @@ function StyleSelect(_ref) {
         return name === variableInstanceName;
       });
       let variableSettings;
-      if (instance) variableSettings = (0, _utils.variableInstanceSettings)(instance);
+      if (instance) variableSettings = variableInstanceSettings(instance);
       onChange({
         fontStyleId,
         variableSettings
@@ -42,12 +35,12 @@ function StyleSelect(_ref) {
   if (value.variableSettings) {
     var _fontStyle$variableIn2;
     const fontStyle = collections.flatMap(coll => coll.fontStyles).find(style => style.id === value.fontStyleId);
-    const instance = fontStyle === null || fontStyle === void 0 ? void 0 : (_fontStyle$variableIn2 = fontStyle.variableInstances) === null || _fontStyle$variableIn2 === void 0 ? void 0 : _fontStyle$variableIn2.find(instance => (0, _utils.compareVariableSettings)(instance, value.variableSettings));
+    const instance = fontStyle === null || fontStyle === void 0 ? void 0 : (_fontStyle$variableIn2 = fontStyle.variableInstances) === null || _fontStyle$variableIn2 === void 0 ? void 0 : _fontStyle$variableIn2.find(instance => compareVariableSettings(instance, value.variableSettings));
     if (instance) {
       selectValue = `${value.fontStyleId}:::${instance.name}`;
     }
   }
-  return /*#__PURE__*/_react.default.createElement(_Select.default, {
+  return /*#__PURE__*/React.createElement(Select, {
     options: collections.flatMap(coll => {
       var _coll$fontStyles2;
       if (coll.isVariableFont) {
@@ -57,13 +50,13 @@ function StyleSelect(_ref) {
           return (_style$variableInstan = style.variableInstances) === null || _style$variableInstan === void 0 ? void 0 : _style$variableInstan.map(instance => ({
             value: `${style.id}:::${instance.name}`,
             text: `${coll.name} ${instance.name}`
-          })).filter(_utils.notEmpty);
-        }).filter(_utils.notEmpty)) ?? [];
+          })).filter(notEmpty);
+        }).filter(notEmpty)) ?? [];
       }
       return ((_coll$fontStyles2 = coll.fontStyles) === null || _coll$fontStyles2 === void 0 ? void 0 : _coll$fontStyles2.map(style => ({
         value: style.id,
         text: `${coll.name} ${style.name}`
-      })).filter(_utils.notEmpty)) ?? [];
+      })).filter(notEmpty)) ?? [];
     }),
     value: selectValue,
     onChange: handleChange

package/dist/components/CharacterViewer/index.d.ts

@@ -1,15 +1,38 @@
 import React from 'react';
-import { SerializablePreloadedQuery } from '../../relay/loadSerializableQuery';
-import { CharacterViewerIDQuery } from '__generated__/CharacterViewerIDQuery.graphql';
-import { CharacterViewerSlugQuery } from '__generated__/CharacterViewerSlugQuery.graphql';
+import { SerializablePreloadedQuery } from '../../relay/loadSerializableQuery.js';
+import { CharacterViewerIDQuery } from '../../__generated__/CharacterViewerIDQuery.graphql.js';
+import { CharacterViewerSlugQuery } from '../../__generated__/CharacterViewerSlugQuery.graphql.js';
+import { Config } from '../ConfigContext.js';
 export interface CharacterViewer_props {
-    collectionId?: string;
-    collectionSlug?: string;
 }
+export type CharacterViewerPreloadedQuery = SerializablePreloadedQuery<CharacterViewerIDQuery> | SerializablePreloadedQuery<CharacterViewerSlugQuery>;
+export type LoadCharacterViewerQueryVariables = {
+    collectionId: string;
+    collectionSlug?: never;
+} | {
+    collectionId?: never;
+    collectionSlug: string;
+};
+export declare function loadCharacterViewerQuery(variables: LoadCharacterViewerQueryVariables): Promise<CharacterViewerPreloadedQuery>;
 export declare function CharacterViewerPreloadedIDQueryRenderer({ preloadedQuery, ...rest }: CharacterViewer_props & {
     preloadedQuery: SerializablePreloadedQuery<CharacterViewerIDQuery>;
 }): React.JSX.Element | null;
 export declare function CharacterViewerPreloadedSlugQueryRenderer({ preloadedQuery, ...rest }: CharacterViewer_props & {
     preloadedQuery: SerializablePreloadedQuery<CharacterViewerSlugQuery>;
 }): React.JSX.Element | null;
-export default function CharacterViewer({ collectionId, collectionSlug, }: CharacterViewer_props): React.JSX.Element;
+export type CharacterViewer_unifiedProps = CharacterViewer_props & {
+    config?: Config;
+} & ({
+    preloadedQuery: CharacterViewerPreloadedQuery;
+    collectionId?: never;
+    collectionSlug?: never;
+} | {
+    preloadedQuery?: never;
+    collectionId: string;
+    collectionSlug?: never;
+} | {
+    preloadedQuery?: never;
+    collectionId?: never;
+    collectionSlug: string;
+});
+export default function CharacterViewer(props: CharacterViewer_unifiedProps): React.JSX.Element;