fontdue-js 1.12.4 → 2.0.0-alpha2

package/dist/components/PriceBar/PriceBarSection.js

@@ -10,87 +10,76 @@ var _reactRedux = require("react-redux");
 var _fastDeepEqual = _interopRequireDefault(require("fast-deep-equal"));
 var _Price = _interopRequireWildcard(require("../Price"));
 var _SelectButton = _interopRequireDefault(require("../SelectButton"));
-var _PriceBarSection_node, _PriceBarSection_RefetchQuery;
+var _utils = require("../../utils");
+var _PriceBarSection_node;
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-class PriceBarSection extends _react.default.Component {
-  constructor() {
-    super(...arguments);
-    _defineProperty(this, "componentWillReceiveProps", nextProps => {
-      const {
-        licenseOptionsSpecs,
-        relay
-      } = nextProps;
-      if (!(0, _fastDeepEqual.default)(this.props.licenseOptionsSpecs, licenseOptionsSpecs)) {
-        relay.refetch({
-          id: this.props.node.id,
+function PriceBarSection(_ref) {
+  var _node$sku;
+  let {
+    node: nodeKey
+  } = _ref;
+  const licenseOptionsSpecs = (0, _reactRedux.useSelector)(state => state.licenseOptions.map(spec => ({
+    licenseId: spec.licenseId,
+    licenseOptionIds: Object.values(spec.licenseOptions).filter(Boolean)
+  })));
+  const [isPending, startTransition] = (0, _react.useTransition)();
+  const [node, refetch] = (0, _reactRelay.useRefetchableFragment)(_PriceBarSection_node !== void 0 ? _PriceBarSection_node : (_PriceBarSection_node = require("../../__generated__/PriceBarSection_node.graphql"), _PriceBarSection_node.hash && _PriceBarSection_node.hash !== "f14d864fde8de83db89ce6cd68487f98" && console.error("The definition of 'PriceBarSection_node' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _PriceBarSection_node), nodeKey);
+  const selected = (0, _reactRedux.useSelector)((0, _utils.isSelected)(((_node$sku = node.sku) === null || _node$sku === void 0 ? void 0 : _node$sku.id) ?? null));
+  const prevLicenseOptionsSpecs = (0, _react.useRef)(licenseOptionsSpecs);
+  (0, _react.useEffect)(() => {
+    if (!(0, _fastDeepEqual.default)(prevLicenseOptionsSpecs.current, licenseOptionsSpecs)) {
+      startTransition(() => {
+        refetch({
+          id: node.id,
           licenseOptionsSpecs
         });
-      }
-    });
-  }
-  render() {
-    const {
-      node,
-      onSelectSkuId,
+      });
+    }
+    prevLicenseOptionsSpecs.current = licenseOptionsSpecs;
+  }, [node.id, licenseOptionsSpecs]);
+  const dispatch = (0, _reactRedux.useDispatch)();
+  const onSelectSkuId = (skuId, selected) => {
+    if (!skuId) return;
+    dispatch({
+      type: 'SELECT_SKU_ID',
+      skuId,
       selected
-    } = this.props;
-    return /*#__PURE__*/_react.default.createElement("div", {
-      className: "select-button-hover-parent select-button-click-parent price-bar-section",
-      "data-type": node.collectionType,
-      "data-selected": selected
-    }, /*#__PURE__*/_react.default.createElement("button", {
-      className: "price-bar-section__button",
-      type: "button",
-      onClick: () => onSelectSkuId(node.sku.id, !selected)
-    }), /*#__PURE__*/_react.default.createElement("div", {
-      className: "price-bar-section__name"
-    }, /*#__PURE__*/_react.default.createElement("span", null, node.name, " ", node.collectionType), "\xA0", /*#__PURE__*/_react.default.createElement("span", {
-      className: "price-bar-section__name__styles"
-    }, "(", node.totalStyles, " styles)")), /*#__PURE__*/_react.default.createElement("div", {
-      className: "price-bar-section__price"
-    }, !selected && /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
-      className: "price-bar-section__price__full"
-    }, /*#__PURE__*/_react.default.createElement(_Price.default, {
-      price: node.totalStylesPrice,
-      format: _Price.PriceFormat.Truncated
-    })), "\xA0", /*#__PURE__*/_react.default.createElement("div", null, node.sku && node.sku.price && /*#__PURE__*/_react.default.createElement(_Price.default, {
-      price: node.sku.price,
-      format: _Price.PriceFormat.Truncated
-    })))), node.sku && /*#__PURE__*/_react.default.createElement("div", {
-      className: "price-bar-section__select-button"
-    }, /*#__PURE__*/_react.default.createElement(_SelectButton.default, {
-      sku: node.sku,
-      onMouseEnter: this.buyButtonMouseEnter,
-      onMouseLeave: this.buyButtonMouseLeave
-    })));
-  }
-}
-const mapStateToProps = (state, _ref) => {
-  let {
-    node
-  } = _ref;
-  return {
-    selected: node.sku && state.selectedSkuIds[node.sku.id] === true,
-    licenseOptionsSpecs: state.licenseOptions.map(spec => ({
-      licenseId: spec.licenseId,
-      licenseOptionIds: Object.values(spec.licenseOptions).filter(Boolean)
-    }))
+    });
   };
-};
-const mapDispatchToProps = dispatch => ({
-  onSelectSkuId: (skuId, selected) => dispatch({
-    type: 'SELECT_SKU_ID',
-    skuId,
-    selected
-  })
-});
-
-// TODO: these refetchQueries create n number of graphql requests
-//   making bulk operations impossible
-var _default = (0, _reactRelay.createRefetchContainer)((0, _reactRedux.connect)(mapStateToProps, mapDispatchToProps)(PriceBarSection), {
-  node: _PriceBarSection_node !== void 0 ? _PriceBarSection_node : (_PriceBarSection_node = require("../../__generated__/PriceBarSection_node.graphql"), _PriceBarSection_node.hash && _PriceBarSection_node.hash !== "6879d632687580651effc197b9c9d50e" && console.error("The definition of 'PriceBarSection_node' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _PriceBarSection_node)
-}, _PriceBarSection_RefetchQuery !== void 0 ? _PriceBarSection_RefetchQuery : (_PriceBarSection_RefetchQuery = require("../../__generated__/PriceBarSection_RefetchQuery.graphql"), _PriceBarSection_RefetchQuery.hash && _PriceBarSection_RefetchQuery.hash !== "acb957e5ddf373dd9d2b43c98d99ca43" && console.error("The definition of 'PriceBarSection_RefetchQuery' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _PriceBarSection_RefetchQuery));
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "select-button-hover-parent select-button-click-parent price-bar-section",
+    "data-type": node.collectionType,
+    "data-selected": selected
+  }, /*#__PURE__*/_react.default.createElement("button", {
+    className: "price-bar-section__button",
+    type: "button",
+    onClick: () => {
+      var _node$sku2;
+      return onSelectSkuId((_node$sku2 = node.sku) === null || _node$sku2 === void 0 ? void 0 : _node$sku2.id, !selected);
+    }
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    className: "price-bar-section__name"
+  }, /*#__PURE__*/_react.default.createElement("span", null, node.name, " ", node.collectionType), "\xA0", /*#__PURE__*/_react.default.createElement("span", {
+    className: "price-bar-section__name__styles"
+  }, "(", node.totalStyles, " styles)")), /*#__PURE__*/_react.default.createElement("div", {
+    className: "price-bar-section__price",
+    "data-loading": isPending
+  }, !selected && /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+    className: "price-bar-section__price__full"
+  }, /*#__PURE__*/_react.default.createElement(_Price.default, {
+    price: node.totalStylesPrice,
+    format: _Price.PriceFormat.Truncated
+  })), "\xA0", /*#__PURE__*/_react.default.createElement("div", null, node.sku && node.sku.price && /*#__PURE__*/_react.default.createElement(_Price.default, {
+    price: node.sku.price,
+    format: _Price.PriceFormat.Truncated
+  })))), node.sku && /*#__PURE__*/_react.default.createElement("div", {
+    className: "price-bar-section__select-button"
+  }, /*#__PURE__*/_react.default.createElement(_SelectButton.default, {
+    sku: node.sku,
+    productId: node.sku.id
+  })));
+}
+var _default = PriceBarSection;
 exports.default = _default;

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

@@ -0,0 +1,7 @@
+import React from 'react';
+import { PriceBar_node$key } from '__generated__/PriceBar_node.graphql';
+interface PriceBar_props {
+    node: PriceBar_node$key | null;
+}
+declare function PriceBar({ node: nodeKey }: PriceBar_props): React.JSX.Element | null;
+export default PriceBar;

package/dist/components/PriceBar/index.js

@@ -4,81 +4,47 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 var _reactRelay = require("react-relay");
 var _PriceBarSection = _interopRequireDefault(require("./PriceBarSection"));
 var _PriceBar_node;
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-class PriceBarBase extends _react.default.Component {
-  constructor() {
-    super(...arguments);
-    _defineProperty(this, "state", {
-      visible: false
-    });
-    _defineProperty(this, "onScroll", () => {
-      if (!this.$pricebar) return;
-      if (this.$pricebar.getBoundingClientRect().top === 0) {
-        return this.visibleOn();
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function PriceBar(_ref) {
+  let {
+    node: nodeKey
+  } = _ref;
+  const node = (0, _reactRelay.useFragment)(_PriceBar_node !== void 0 ? _PriceBar_node : (_PriceBar_node = require("../../__generated__/PriceBar_node.graphql"), _PriceBar_node.hash && _PriceBar_node.hash !== "4a2e7a54397986a901a103fbbf554c4e" && console.error("The definition of 'PriceBar_node' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _PriceBar_node), nodeKey);
+  const [visible, setVisible] = (0, _react.useState)(false);
+  const $pricebar = (0, _react.useRef)(null);
+  (0, _react.useEffect)(() => {
+    function onScroll() {
+      if (!$pricebar.current) return;
+      if ($pricebar.current.getBoundingClientRect().top === 0) {
+        return setVisible(true);
       }
-      return this.visibleOff();
-    });
-  }
-  componentDidMount() {
-    window.addEventListener('scroll', this.onScroll);
-    window.addEventListener('resize', this.onScroll);
-    this.onScroll();
-  }
-  componentWillUnmount() {
-    window.removeEventListener('scroll', this.onScroll);
-    window.removeEventListener('resize', this.onScroll);
-  }
-  visibleOn() {
-    const {
-      visible
-    } = this.state;
-    if (visible) {
-      return;
+      return setVisible(false);
     }
-    this.setState({
-      visible: true
-    });
-  }
-  visibleOff() {
-    const {
-      visible
-    } = this.state;
-    if (!visible) {
-      return;
-    }
-    this.setState({
-      visible: false
-    });
-  }
-  render() {
-    const {
-      node
-    } = this.props;
-    const {
-      visible
-    } = this.state;
-    if (!node) return null;
-    return /*#__PURE__*/_react.default.createElement("div", {
-      className: "price-bar",
-      ref: ref => {
-        this.$pricebar = ref;
-      },
-      "data-visible": visible
-    }, /*#__PURE__*/_react.default.createElement("div", {
-      className: "price-bar__wrapper"
-    }, node.parent && /*#__PURE__*/_react.default.createElement(_PriceBarSection.default, {
-      node: node.parent
-    }), /*#__PURE__*/_react.default.createElement(_PriceBarSection.default, {
-      node: node
-    })));
-  }
+    window.addEventListener('scroll', onScroll);
+    window.addEventListener('resize', onScroll);
+    return () => {
+      window.removeEventListener('scroll', onScroll);
+      window.removeEventListener('resize', onScroll);
+    };
+  }, [setVisible, $pricebar]);
+  if (!node) return null;
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "price-bar",
+    ref: $pricebar,
+    "data-visible": visible
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "price-bar__wrapper"
+  }, node.parent && /*#__PURE__*/_react.default.createElement(_PriceBarSection.default, {
+    node: node.parent
+  }), /*#__PURE__*/_react.default.createElement(_PriceBarSection.default, {
+    node: node
+  })));
 }
-var _default = (0, _reactRelay.createFragmentContainer)(PriceBarBase, {
-  node: _PriceBar_node !== void 0 ? _PriceBar_node : (_PriceBar_node = require("../../__generated__/PriceBar_node.graphql"), _PriceBar_node.hash && _PriceBar_node.hash !== "4a2e7a54397986a901a103fbbf554c4e" && console.error("The definition of 'PriceBar_node' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _PriceBar_node)
-});
+var _default = PriceBar;
 exports.default = _default;

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

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from 'react';
 import { FontdueProvider_props } from '../FontdueProvider';
-declare const Root: (props: FontdueProvider_props) => JSX.Element;
+declare const Root: (props: FontdueProvider_props) => React.JSX.Element;
 export default Root;

package/dist/components/Root/index.js

@@ -6,49 +6,40 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _reactDom = _interopRequireDefault(require("react-dom"));
-var _reactLoadable = _interopRequireDefault(require("react-loadable"));
 var _uuid = require("uuid");
+var _reducer = require("../../reducer");
 var _utils = require("../../utils");
 var _FontdueProvider = _interopRequireDefault(require("../FontdueProvider"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-const Loading = () => null;
-const loadable = loader => (0, _reactLoadable.default)({
-  loader,
-  loading: Loading,
-  render: (loaded, props) => {
-    const Component = loaded.default;
-    return /*#__PURE__*/_react.default.createElement(Component, props);
-  }
-});
 const customElementMap = {
   // @ts-ignore
-  'fontdue-add-to-cart-banner': loadable(() => Promise.resolve().then(() => _interopRequireWildcard(require('../AddToCartBanner')))),
+  'fontdue-add-to-cart-banner': /*#__PURE__*/(0, _react.lazy)(() => Promise.resolve().then(() => _interopRequireWildcard(require('../AddToCartBanner')))),
   // @ts-ignore
-  'fontdue-buying-options': loadable(() => Promise.resolve().then(() => _interopRequireWildcard(require('../BuyingOptions')))),
-  'fontdue-buy-button': loadable(() => Promise.resolve().then(() => _interopRequireWildcard(require('../BuyButton')))),
-  'fontdue-cart': loadable(() => Promise.resolve().then(() => _interopRequireWildcard(require('../Cart')))),
-  'fontdue-cart-button': loadable(() => Promise.resolve().then(() => _interopRequireWildcard(require('../CartButton')))),
-  'fontdue-character-viewer': loadable(() => Promise.resolve().then(() => _interopRequireWildcard(require('../CharacterViewer')))),
+  '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')))),
   // @ts-ignore
-  'fontdue-collection-aa': loadable(() => Promise.resolve().then(() => _interopRequireWildcard(require('../CollectionAa')))),
+  'fontdue-collection-aa': /*#__PURE__*/(0, _react.lazy)(() => Promise.resolve().then(() => _interopRequireWildcard(require('../CollectionAa')))),
   // @ts-ignore
-  'fontdue-cookie-notification': loadable(() => Promise.resolve().then(() => _interopRequireWildcard(require('../CookieNotification')))),
-  'fontdue-font-families': loadable(() => Promise.resolve().then(() => _interopRequireWildcard(require('../FontFamilies')))),
-  'fontdue-customer-login-form': loadable(() => Promise.resolve().then(() => _interopRequireWildcard(require('../CustomerLoginForm')))),
-  'fontdue-newsletter-signup': loadable(() => Promise.resolve().then(() => _interopRequireWildcard(require('../NewsletterSignup')))),
+  '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')))),
   // @ts-ignore
-  'fontdue-precart': loadable(() => Promise.resolve().then(() => _interopRequireWildcard(require('../Precart')))),
+  'fontdue-precart': /*#__PURE__*/(0, _react.lazy)(() => Promise.resolve().then(() => _interopRequireWildcard(require('../Precart')))),
   // @ts-ignore
-  'fontdue-specimen-link': loadable(() => Promise.resolve().then(() => _interopRequireWildcard(require('../SpecimenLink')))),
+  'fontdue-specimen-link': /*#__PURE__*/(0, _react.lazy)(() => Promise.resolve().then(() => _interopRequireWildcard(require('../SpecimenLink')))),
   // @ts-ignore
-  'fontdue-sticky-nav': loadable(() => Promise.resolve().then(() => _interopRequireWildcard(require('../StickyNav')))),
-  'fontdue-store-modal': loadable(() => Promise.resolve().then(() => _interopRequireWildcard(require('../StoreModal')))),
-  'fontdue-test-fonts-form': loadable(() => Promise.resolve().then(() => _interopRequireWildcard(require('../TestFontsForm/TestFontsFormElement')))),
-  'fontdue-type-tester': loadable(() => Promise.resolve().then(() => _interopRequireWildcard(require('../TypeTester/TypeTesterStandaloneElement')))),
-  'fontdue-type-testers': loadable(() => Promise.resolve().then(() => _interopRequireWildcard(require('../TypeTesters/TypeTestersElement'))))
+  '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'))))
 };
 Object.keys(customElementMap).forEach(elementName => {
   // this might be more sophisticated in the future with a shadow DOM, etc,
@@ -63,9 +54,11 @@ const renderCustomElement = (element, key) => {
     acc[(0, _utils.kebabToCamel)(attribute)] = element.getAttribute(attribute) ?? '';
     return acc;
   }, {});
-  return /*#__PURE__*/_reactDom.default.createPortal( /*#__PURE__*/_react.default.createElement(Component, _extends({}, props, {
+  return /*#__PURE__*/_reactDom.default.createPortal( /*#__PURE__*/_react.default.createElement(_react.Suspense, {
+    fallback: null
+  }, /*#__PURE__*/_react.default.createElement(Component, _extends({}, props, {
     key: key
-  })), element);
+  }))), element);
 };
 const customElementTags = Object.keys(customElementMap);
 const allFontdueElements = element => customElementTags.flatMap(elementName => Array.from(element.querySelectorAll(elementName)));
@@ -79,6 +72,7 @@ const Root = props => {
   // more than once (otherwise we run into issues rendering the component
   // twice into the same element). this also gives us a way to set unique keys.
   const [elements, setElements] = (0, _react.useState)(getInitialElements());
+  const store = (0, _react.useRef)((0, _reducer.createDefaultStore)(props.config));
   (0, _react.useEffect)(() => {
     // watch for any new or removed fontdue elements
 
@@ -120,12 +114,82 @@ const Root = props => {
       subtree: true,
       childList: true
     });
+    function handleRoute(url) {
+      const routes = {
+        '^index$': handleIndex,
+        '^cart/?$': handleCart,
+        '^product/([a-zA-Z0-9+/=]+)/?$': handleProduct
+      };
+      for (const [path, handler] of Object.entries(routes)) {
+        const match = url.match(new RegExp(path));
+        if (match) {
+          const params = match.slice(1);
+          handler(...params);
+          return;
+        }
+      }
+    }
+    function handleIndex() {
+      store.current.dispatch({
+        type: 'STORE_MODAL_REPLACE',
+        route: 'index'
+      });
+    }
+    function handleCart() {
+      if (store.current.getState().storeModalHistory) store.current.dispatch({
+        type: 'STORE_MODAL_REPLACE',
+        route: 'cart'
+      });
+    }
+    function handleProduct(productId) {
+      store.current.dispatch({
+        type: 'STORE_MODAL_REPLACE',
+        route: 'product',
+        variables: {
+          productId
+        }
+      });
+    }
+    function fontdueClickHandler(target, _event) {
+      if (target.getAttribute('fontdue-click') === 'open-store-modal') {
+        store.current.dispatch({
+          type: 'OPEN_CART'
+        });
+        const route = target.getAttribute('fontdue-store-route');
+        if (route) handleRoute(route);
+        const selectSkuId = target.getAttribute('fontdue-store-select');
+        if (selectSkuId) {
+          store.current.dispatch({
+            type: 'SELECT_SKU_ID',
+            skuId: selectSkuId,
+            selected: true
+          });
+        }
+      }
+    }
+    function handleClick(event) {
+      // search all parents of target for the click attribute
+      var target = event.target;
+      while (target && target instanceof Element) {
+        if (target.hasAttribute('fontdue-click')) {
+          fontdueClickHandler(target, event);
+          return;
+        }
+        target = target.parentNode;
+      }
+    }
+    document.body.addEventListener('click', handleClick);
+    return () => {
+      mutationObserver.disconnect();
+      document.body.removeEventListener('click', handleClick);
+    };
   }, []);
   return /*#__PURE__*/_react.default.createElement(_FontdueProvider.default, {
     url: props.url,
     stripeIntegration: props.stripeIntegration,
     config: props.config,
-    components: props.components
+    components: props.components,
+    store: store.current
   }, /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, Array.from(elements).map(_ref => {
     let [el, key] = _ref;
     return renderCustomElement(el, key);

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

@@ -1,11 +1,10 @@
-import { RelayRefetchProp } from 'react-relay';
+import React from 'react';
 import { Price_props } from '../Price';
-import { SKUPrice_sku } from '__generated__/SKUPrice_sku.graphql';
+import { SKUPrice_sku$key } from '__generated__/SKUPrice_sku.graphql';
 interface SKUPrice_props {
-    sku: SKUPrice_sku;
-    relay: RelayRefetchProp;
+    sku: SKUPrice_sku$key;
     format?: Price_props['format'];
     showCollectionSavings?: boolean;
 }
-declare const _default: import("react-relay").Container<SKUPrice_props>;
-export default _default;
+declare function SKUPrice({ sku: skuKey, showCollectionSavings, ...rest }: SKUPrice_props): React.JSX.Element | null;
+export default SKUPrice;

package/dist/components/SKUPrice/index.js

@@ -7,9 +7,10 @@ exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _reactRelay = require("react-relay");
 var _reactRedux = require("react-redux");
+var _fastDeepEqual = _interopRequireDefault(require("fast-deep-equal"));
 var _Price = _interopRequireDefault(require("../Price"));
 var _reducer = require("../../reducer");
-var _SKUPrice_sku, _SKUPrice_RefetchQuery;
+var _SKUPrice_sku;
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -26,36 +27,41 @@ const getSavingsMultiplier = (state, options) => {
   // shouldn't matter?
   return collectionWithSavings ? differences[collectionWithSavings] / baseSkuPrice : 1;
 };
-const SKUPrice = _ref => {
+function SKUPrice(_ref) {
   let {
-    sku,
-    relay,
+    sku: skuKey,
     showCollectionSavings,
     ...rest
   } = _ref;
+  const [isPending, startTransition] = (0, _react.useTransition)();
+  const [sku, refetch] = (0, _reactRelay.useRefetchableFragment)(_SKUPrice_sku !== void 0 ? _SKUPrice_sku : (_SKUPrice_sku = require("../../__generated__/SKUPrice_sku.graphql"), _SKUPrice_sku.hash && _SKUPrice_sku.hash !== "9792a6074c64fb4bb018e42df5045514" && console.error("The definition of 'SKUPrice_sku' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _SKUPrice_sku), skuKey);
   const savingsMultiplier = (0, _reactRedux.useSelector)(state => getSavingsMultiplier(state, {
     showCollectionSavings,
     sku
   }));
-  const licenseOptions = (0, _reactRedux.useSelector)(state => state.licenseOptions);
+  const licenseOptionsSpecs = (0, _reactRedux.useSelector)(state => state.licenseOptions.map(spec => ({
+    licenseId: spec.licenseId,
+    licenseOptionIds: Object.values(spec.licenseOptions).filter(Boolean)
+  })));
+  const prevLicenseOptionsSpecs = (0, _react.useRef)(licenseOptionsSpecs);
   (0, _react.useEffect)(() => {
     if (!sku) return;
-    const licenseOptionsSpecs = licenseOptions.map(spec => ({
-      licenseId: spec.licenseId,
-      licenseOptionIds: Object.values(spec.licenseOptions).filter(Boolean)
-    }));
-    relay.refetch({
-      id: sku.id,
-      licenseOptionsSpecs
-    });
-  }, [licenseOptions]);
+    if (!(0, _fastDeepEqual.default)(prevLicenseOptionsSpecs.current, licenseOptionsSpecs)) {
+      startTransition(() => {
+        refetch({
+          id: sku.id,
+          licenseOptionsSpecs
+        });
+      });
+    }
+    prevLicenseOptionsSpecs.current = licenseOptionsSpecs;
+  }, [sku, licenseOptionsSpecs]);
   if (!(sku !== null && sku !== void 0 && sku.price)) return null;
   return /*#__PURE__*/_react.default.createElement(_Price.default, _extends({}, rest, {
     price: sku.price,
-    multiplier: savingsMultiplier
+    multiplier: savingsMultiplier,
+    isLoading: isPending
   }));
-};
-var _default = (0, _reactRelay.createRefetchContainer)(SKUPrice, {
-  sku: _SKUPrice_sku !== void 0 ? _SKUPrice_sku : (_SKUPrice_sku = require("../../__generated__/SKUPrice_sku.graphql"), _SKUPrice_sku.hash && _SKUPrice_sku.hash !== "67281e010f670044ce13ef96f6899b41" && console.error("The definition of 'SKUPrice_sku' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _SKUPrice_sku)
-}, _SKUPrice_RefetchQuery !== void 0 ? _SKUPrice_RefetchQuery : (_SKUPrice_RefetchQuery = require("../../__generated__/SKUPrice_RefetchQuery.graphql"), _SKUPrice_RefetchQuery.hash && _SKUPrice_RefetchQuery.hash !== "41e330fec481396276d7808b1b918a35" && console.error("The definition of 'SKUPrice_RefetchQuery' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _SKUPrice_RefetchQuery));
+}
+var _default = SKUPrice;
 exports.default = _default;

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

@@ -7,6 +7,6 @@ interface Select_props {
         text: string;
     }[];
 }
-declare type SelectHTMLProps = React.DetailedHTMLProps<React.SelectHTMLAttributes<HTMLSelectElement>, HTMLSelectElement>;
-declare const Select: ({ options, value, nullText, ...rest }: Select_props & Omit<SelectHTMLProps, 'value'>) => JSX.Element;
+type SelectHTMLProps = React.DetailedHTMLProps<React.SelectHTMLAttributes<HTMLSelectElement>, HTMLSelectElement>;
+declare const Select: ({ options, value, nullText, ...rest }: Select_props & Omit<SelectHTMLProps, 'value'>) => React.JSX.Element;
 export default Select;

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

@@ -1,10 +1,10 @@
 import React from 'react';
 import { RelayProp } from 'react-relay';
-import { SelectButton_sku } from '__generated__/SelectButton_sku.graphql';
+import { SelectButton_sku$data } from '__generated__/SelectButton_sku.graphql';
 interface SelectButton_props {
     relay: RelayProp;
     productId: string;
-    sku: SelectButton_sku;
+    sku: SelectButton_sku$data;
 }
-declare const _default: import("react-relay").Container<SelectButton_props & React.HTMLAttributes<HTMLButtonElement>>;
+declare const _default: import("react-relay").Container<Omit<SelectButton_props & React.HTMLAttributes<HTMLButtonElement>, "relay">>;
 export default _default;

package/dist/components/SelectButton/index.js

@@ -72,9 +72,11 @@ const SelectButton = _ref2 => {
       ...rest
     }
   }, {
-    price: /*#__PURE__*/_react.default.createElement(_SKUPrice.default, {
+    price: /*#__PURE__*/_react.default.createElement(_react.Suspense, {
+      fallback: null
+    }, /*#__PURE__*/_react.default.createElement(_SKUPrice.default, {
       sku: sku
-    })
+    }))
   });
 };
 var _default = (0, _reactRelay.createFragmentContainer)(SelectButton, {

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

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from 'react';
 interface SelectField_props {
     label: string;
     value: string | null;
@@ -9,5 +9,5 @@ interface SelectField_props {
     }[];
     errors?: string[];
 }
-declare const SelectField: ({ label, value, onChange, options, errors }: SelectField_props) => JSX.Element;
+declare const SelectField: ({ label, value, onChange, options, errors }: SelectField_props) => React.JSX.Element;
 export default SelectField;

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

@@ -0,0 +1,6 @@
+import React from 'react';
+interface SpecimenLink_props {
+    collectionId: string;
+}
+declare const SpecimenLink: ({ collectionId }: SpecimenLink_props) => React.JSX.Element | null;
+export default SpecimenLink;