@shopify/hydrogen-react 2022.10.7 → 2023.1.4

package/dist/node-dev/ProductProvider.js

@@ -1,59 +1,65 @@
 "use strict";
-Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
 const require$$0 = require("react");
 const flattenConnection = require("./flatten-connection.js");
-const jsxRuntime = require("react/jsx-runtime");
 const ProductOptionsContext = require$$0.createContext(null);
 function ProductProvider({
   children,
   data: product,
   initialVariantId: explicitVariantId
 }) {
-  const variants = require$$0.useMemo(() => {
-    var _a;
-    return flattenConnection.flattenConnection((_a = product.variants) != null ? _a : {});
-  }, [product.variants]);
+  const variants = require$$0.useMemo(
+    () => flattenConnection.flattenConnection(product.variants ?? {}),
+    [product.variants]
+  );
   if (!isProductVariantArray(variants)) {
-    throw new Error(`<ProductProvider/> requires 'product.variants.nodes' or 'product.variants.edges'`);
+    throw new Error(
+      `<ProductProvider/> requires 'product.variants.nodes' or 'product.variants.edges'`
+    );
   }
   const options = require$$0.useMemo(() => getOptions(variants), [variants]);
   const [selectedVariant, setSelectedVariant] = require$$0.useState(() => getVariantBasedOnIdProp(explicitVariantId, variants));
-  const [selectedOptions, setSelectedOptions] = require$$0.useState(() => getSelectedOptions(selectedVariant));
+  const [selectedOptions, setSelectedOptions] = require$$0.useState(
+    () => getSelectedOptions(selectedVariant)
+  );
   require$$0.useEffect(() => {
-    const newSelectedVariant = getVariantBasedOnIdProp(explicitVariantId, variants);
+    const newSelectedVariant = getVariantBasedOnIdProp(
+      explicitVariantId,
+      variants
+    );
     setSelectedVariant(newSelectedVariant);
     setSelectedOptions(getSelectedOptions(newSelectedVariant));
   }, [explicitVariantId, variants]);
-  const setSelectedOption = require$$0.useCallback((name, value2) => {
-    setSelectedOptions((selectedOptions2) => {
-      const opts = {
-        ...selectedOptions2,
-        [name]: value2
-      };
-      setSelectedVariant(getSelectedVariant(variants, opts));
-      return opts;
-    });
-  }, [setSelectedOptions, variants]);
-  const isOptionInStock = require$$0.useCallback((option, value2) => {
-    var _a;
-    const proposedVariant = getSelectedVariant(variants, {
-      ...selectedOptions,
-      ...{
-        [option]: value2
-      }
-    });
-    return (_a = proposedVariant == null ? void 0 : proposedVariant.availableForSale) != null ? _a : true;
-  }, [selectedOptions, variants]);
-  const sellingPlanGroups = require$$0.useMemo(() => {
-    var _a;
-    return flattenConnection.flattenConnection((_a = product.sellingPlanGroups) != null ? _a : {}).map((sellingPlanGroup) => {
-      var _a2;
-      return {
+  const setSelectedOption = require$$0.useCallback(
+    (name, value2) => {
+      setSelectedOptions((selectedOptions2) => {
+        const opts = { ...selectedOptions2, [name]: value2 };
+        setSelectedVariant(getSelectedVariant(variants, opts));
+        return opts;
+      });
+    },
+    [setSelectedOptions, variants]
+  );
+  const isOptionInStock = require$$0.useCallback(
+    (option, value2) => {
+      const proposedVariant = getSelectedVariant(variants, {
+        ...selectedOptions,
+        ...{ [option]: value2 }
+      });
+      return (proposedVariant == null ? void 0 : proposedVariant.availableForSale) ?? true;
+    },
+    [selectedOptions, variants]
+  );
+  const sellingPlanGroups = require$$0.useMemo(
+    () => flattenConnection.flattenConnection(product.sellingPlanGroups ?? {}).map(
+      (sellingPlanGroup) => ({
         ...sellingPlanGroup,
-        sellingPlans: flattenConnection.flattenConnection((_a2 = sellingPlanGroup == null ? void 0 : sellingPlanGroup.sellingPlans) != null ? _a2 : {})
-      };
-    });
-  }, [product.sellingPlanGroups]);
+        sellingPlans: flattenConnection.flattenConnection((sellingPlanGroup == null ? void 0 : sellingPlanGroup.sellingPlans) ?? {})
+      })
+    ),
+    [product.sellingPlanGroups]
+  );
   const [selectedSellingPlan, setSelectedSellingPlan] = require$$0.useState(void 0);
   const selectedSellingPlanAllocation = require$$0.useMemo(() => {
     var _a, _b;
@@ -61,33 +67,49 @@ function ProductProvider({
       return;
     }
     if (!((_a = selectedVariant.sellingPlanAllocations) == null ? void 0 : _a.nodes) && !((_b = selectedVariant.sellingPlanAllocations) == null ? void 0 : _b.edges)) {
-      throw new Error(`<ProductProvider/>: You must include 'sellingPlanAllocations.nodes' or 'sellingPlanAllocations.edges' in your variants in order to calculate selectedSellingPlanAllocation`);
+      throw new Error(
+        `<ProductProvider/>: You must include 'sellingPlanAllocations.nodes' or 'sellingPlanAllocations.edges' in your variants in order to calculate selectedSellingPlanAllocation`
+      );
     }
-    return flattenConnection.flattenConnection(selectedVariant.sellingPlanAllocations).find((allocation) => {
-      var _a2;
-      return ((_a2 = allocation == null ? void 0 : allocation.sellingPlan) == null ? void 0 : _a2.id) === selectedSellingPlan.id;
-    });
+    return flattenConnection.flattenConnection(selectedVariant.sellingPlanAllocations).find(
+      (allocation) => {
+        var _a2;
+        return ((_a2 = allocation == null ? void 0 : allocation.sellingPlan) == null ? void 0 : _a2.id) === selectedSellingPlan.id;
+      }
+    );
   }, [selectedVariant, selectedSellingPlan]);
-  const value = require$$0.useMemo(() => ({
-    variants,
-    variantsConnection: product.variants,
-    options,
-    selectedVariant,
-    setSelectedVariant,
-    selectedOptions,
-    setSelectedOption,
-    setSelectedOptions,
-    isOptionInStock,
-    selectedSellingPlan,
-    setSelectedSellingPlan,
-    selectedSellingPlanAllocation,
-    sellingPlanGroups,
-    sellingPlanGroupsConnection: product.sellingPlanGroups
-  }), [isOptionInStock, options, product.sellingPlanGroups, product.variants, selectedOptions, selectedSellingPlan, selectedSellingPlanAllocation, selectedVariant, sellingPlanGroups, setSelectedOption, variants]);
-  return /* @__PURE__ */ jsxRuntime.jsx(ProductOptionsContext.Provider, {
-    value,
-    children
-  });
+  const value = require$$0.useMemo(
+    () => ({
+      variants,
+      variantsConnection: product.variants,
+      options,
+      selectedVariant,
+      setSelectedVariant,
+      selectedOptions,
+      setSelectedOption,
+      setSelectedOptions,
+      isOptionInStock,
+      selectedSellingPlan,
+      setSelectedSellingPlan,
+      selectedSellingPlanAllocation,
+      sellingPlanGroups,
+      sellingPlanGroupsConnection: product.sellingPlanGroups
+    }),
+    [
+      isOptionInStock,
+      options,
+      product.sellingPlanGroups,
+      product.variants,
+      selectedOptions,
+      selectedSellingPlan,
+      selectedSellingPlanAllocation,
+      selectedVariant,
+      sellingPlanGroups,
+      setSelectedOption,
+      variants
+    ]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(ProductOptionsContext.Provider, { value, children });
 }
 function useProduct() {
   const context = require$$0.useContext(ProductOptionsContext);
@@ -104,7 +126,9 @@ function getSelectedVariant(variants, choices) {
   return variants == null ? void 0 : variants.find((variant) => {
     return Object.entries(choices).every(([name, value]) => {
       var _a2;
-      return (_a2 = variant == null ? void 0 : variant.selectedOptions) == null ? void 0 : _a2.some((option) => (option == null ? void 0 : option.name) === name && (option == null ? void 0 : option.value) === value);
+      return (_a2 = variant == null ? void 0 : variant.selectedOptions) == null ? void 0 : _a2.some(
+        (option) => (option == null ? void 0 : option.name) === name && (option == null ? void 0 : option.value) === value
+      );
     });
   });
 }
@@ -115,9 +139,8 @@ function getOptions(variants) {
       throw new Error(`'getOptions' requires 'variant.selectedOptions'`);
     }
     (_a = variant == null ? void 0 : variant.selectedOptions) == null ? void 0 : _a.forEach((opt) => {
-      var _a2, _b, _c, _d;
-      memo[(_a2 = opt == null ? void 0 : opt.name) != null ? _a2 : ""] = memo[(_b = opt == null ? void 0 : opt.name) != null ? _b : ""] || /* @__PURE__ */ new Set();
-      memo[(_c = opt == null ? void 0 : opt.name) != null ? _c : ""].add((_d = opt == null ? void 0 : opt.value) != null ? _d : "");
+      memo[(opt == null ? void 0 : opt.name) ?? ""] = memo[(opt == null ? void 0 : opt.name) ?? ""] || /* @__PURE__ */ new Set();
+      memo[(opt == null ? void 0 : opt.name) ?? ""].add((opt == null ? void 0 : opt.value) ?? "");
     });
     return memo;
   }, {});
@@ -130,9 +153,13 @@ function getOptions(variants) {
 }
 function getVariantBasedOnIdProp(explicitVariantId, variants) {
   if (explicitVariantId) {
-    const foundVariant = variants.find((variant) => (variant == null ? void 0 : variant.id) === explicitVariantId);
+    const foundVariant = variants.find(
+      (variant) => (variant == null ? void 0 : variant.id) === explicitVariantId
+    );
     if (!foundVariant) {
-      console.warn(`<ProductProvider/> received a 'initialVariantId' prop, but could not actually find a variant with that ID`);
+      console.warn(
+        `<ProductProvider/> received a 'initialVariantId' prop, but could not actually find a variant with that ID`
+      );
     }
     return foundVariant;
   }
@@ -144,11 +171,13 @@ function getVariantBasedOnIdProp(explicitVariantId, variants) {
   }
 }
 function getSelectedOptions(selectedVariant) {
-  return (selectedVariant == null ? void 0 : selectedVariant.selectedOptions) ? selectedVariant.selectedOptions.reduce((memo, optionSet) => {
-    var _a, _b;
-    memo[(_a = optionSet == null ? void 0 : optionSet.name) != null ? _a : ""] = (_b = optionSet == null ? void 0 : optionSet.value) != null ? _b : "";
-    return memo;
-  }, {}) : {};
+  return (selectedVariant == null ? void 0 : selectedVariant.selectedOptions) ? selectedVariant.selectedOptions.reduce(
+    (memo, optionSet) => {
+      memo[(optionSet == null ? void 0 : optionSet.name) ?? ""] = (optionSet == null ? void 0 : optionSet.value) ?? "";
+      return memo;
+    },
+    {}
+  ) : {};
 }
 function isProductVariantArray(maybeVariantArray) {
   if (!maybeVariantArray || !Array.isArray(maybeVariantArray)) {

package/dist/node-dev/ProductProvider.js.map

@@ -1 +1 @@
-{"version":3,"file":"ProductProvider.js","sources":["../../src/ProductProvider.tsx"],"sourcesContent":["import {\n  useMemo,\n  useState,\n  useEffect,\n  useCallback,\n  createContext,\n  useContext,\n} from 'react';\nimport type {\n  SelectedOption as SelectedOptionType,\n  SellingPlan,\n  SellingPlanAllocation,\n  Product,\n  ProductVariant as ProductVariantType,\n  ProductVariantConnection,\n  SellingPlan as SellingPlanType,\n  SellingPlanAllocation as SellingPlanAllocationType,\n  SellingPlanGroup as SellingPlanGroupType,\n  SellingPlanGroupConnection,\n} from './storefront-api-types.js';\nimport type {PartialDeep} from 'type-fest';\nimport {flattenConnection} from './flatten-connection.js';\n\nconst ProductOptionsContext = createContext<ProductHookValue | null>(null);\n\ntype InitialVariantId = ProductVariantType['id'] | null;\n\ninterface ProductProviderProps {\n  /** A [Product object](https://shopify.dev/api/storefront/reference/products/product). */\n  data: PartialDeep<Product, {recurseIntoArrays: true}>;\n  /** A `ReactNode` element. */\n  children: React.ReactNode;\n  /**\n   * The initially selected variant.\n   * The following logic applies to `initialVariantId`:\n   * 1. If `initialVariantId` is provided, then it's used even if it's out of stock.\n   * 2. If `initialVariantId` is provided but is `null`, then no variant is used.\n   * 3. If nothing is passed to `initialVariantId` then the first available / in-stock variant is used.\n   * 4. If nothing is passed to `initialVariantId` and no variants are in stock, then the first variant is used.\n   */\n  initialVariantId?: InitialVariantId;\n}\n\n/**\n * `<ProductProvider />` is a context provider that enables use of the `useProduct()` hook.\n *\n * It helps manage selected options and variants for a product.\n */\nexport function ProductProvider({\n  children,\n  data: product,\n  initialVariantId: explicitVariantId,\n}: ProductProviderProps) {\n  // The flattened variants\n  const variants = useMemo(\n    () => flattenConnection(product.variants ?? {}),\n    [product.variants]\n  );\n\n  if (!isProductVariantArray(variants)) {\n    throw new Error(\n      `<ProductProvider/> requires 'product.variants.nodes' or 'product.variants.edges'`\n    );\n  }\n\n  // All the options available for a product, based on all the variants\n  const options = useMemo(() => getOptions(variants), [variants]);\n\n  /**\n   * Track the selectedVariant within the provider.\n   */\n  const [selectedVariant, setSelectedVariant] = useState<\n    | PartialDeep<ProductVariantType, {recurseIntoArrays: true}>\n    | undefined\n    | null\n  >(() => getVariantBasedOnIdProp(explicitVariantId, variants));\n\n  /**\n   * Track the selectedOptions within the provider. If a `initialVariantId`\n   * is passed, use that to select initial options.\n   */\n  const [selectedOptions, setSelectedOptions] = useState<SelectedOptions>(() =>\n    getSelectedOptions(selectedVariant)\n  );\n\n  /**\n   * When the initialVariantId changes, we need to make sure we\n   * update the selected variant and selected options. If not,\n   * then the selected variant and options will reference incorrect\n   * values.\n   */\n  useEffect(() => {\n    const newSelectedVariant = getVariantBasedOnIdProp(\n      explicitVariantId,\n      variants\n    );\n    setSelectedVariant(newSelectedVariant);\n    setSelectedOptions(getSelectedOptions(newSelectedVariant));\n  }, [explicitVariantId, variants]);\n\n  /**\n   * Allow the developer to select an option.\n   */\n  const setSelectedOption = useCallback(\n    (name: string, value: string) => {\n      setSelectedOptions((selectedOptions) => {\n        const opts = {...selectedOptions, [name]: value};\n        setSelectedVariant(getSelectedVariant(variants, opts));\n        return opts;\n      });\n    },\n    [setSelectedOptions, variants]\n  );\n\n  const isOptionInStock = useCallback(\n    (option: string, value: string) => {\n      const proposedVariant = getSelectedVariant(variants, {\n        ...selectedOptions,\n        ...{[option]: value},\n      });\n\n      return proposedVariant?.availableForSale ?? true;\n    },\n    [selectedOptions, variants]\n  );\n\n  const sellingPlanGroups = useMemo(\n    () =>\n      flattenConnection(product.sellingPlanGroups ?? {}).map(\n        (sellingPlanGroup) => ({\n          ...sellingPlanGroup,\n          sellingPlans: flattenConnection(sellingPlanGroup?.sellingPlans ?? {}),\n        })\n      ),\n    [product.sellingPlanGroups]\n  );\n\n  /**\n   * Track the selectedSellingPlan within the hook. If `initialSellingPlanId`\n   * is passed, use that as an initial value. Look it up from the `selectedVariant`, since\n   * that is also a requirement.\n   */\n  const [selectedSellingPlan, setSelectedSellingPlan] = useState<\n    PartialDeep<SellingPlan, {recurseIntoArrays: true}> | undefined\n  >(undefined);\n\n  const selectedSellingPlanAllocation = useMemo<\n    PartialDeep<SellingPlanAllocation, {recurseIntoArrays: true}> | undefined\n  >(() => {\n    if (!selectedVariant || !selectedSellingPlan) {\n      return;\n    }\n\n    if (\n      !selectedVariant.sellingPlanAllocations?.nodes &&\n      !selectedVariant.sellingPlanAllocations?.edges\n    ) {\n      throw new Error(\n        `<ProductProvider/>: You must include 'sellingPlanAllocations.nodes' or 'sellingPlanAllocations.edges' in your variants in order to calculate selectedSellingPlanAllocation`\n      );\n    }\n\n    return flattenConnection(selectedVariant.sellingPlanAllocations).find(\n      (allocation) => allocation?.sellingPlan?.id === selectedSellingPlan.id\n    );\n  }, [selectedVariant, selectedSellingPlan]);\n\n  const value = useMemo<ProductHookValue>(\n    () => ({\n      variants,\n      variantsConnection: product.variants,\n      options,\n      selectedVariant,\n      setSelectedVariant,\n      selectedOptions,\n      setSelectedOption,\n      setSelectedOptions,\n      isOptionInStock,\n      selectedSellingPlan,\n      setSelectedSellingPlan,\n      selectedSellingPlanAllocation,\n      sellingPlanGroups,\n      sellingPlanGroupsConnection: product.sellingPlanGroups,\n    }),\n    [\n      isOptionInStock,\n      options,\n      product.sellingPlanGroups,\n      product.variants,\n      selectedOptions,\n      selectedSellingPlan,\n      selectedSellingPlanAllocation,\n      selectedVariant,\n      sellingPlanGroups,\n      setSelectedOption,\n      variants,\n    ]\n  );\n\n  return (\n    <ProductOptionsContext.Provider value={value}>\n      {children}\n    </ProductOptionsContext.Provider>\n  );\n}\n\n/**\n * Provides access to the context value provided by `<ProductProvider />`. Must be a descendent of `<ProductProvider />`.\n */\nexport function useProduct() {\n  const context = useContext(ProductOptionsContext);\n\n  if (!context) {\n    throw new Error(`'useProduct' must be a child of <ProductProvider />`);\n  }\n\n  return context;\n}\n\nfunction getSelectedVariant(\n  variants: PartialDeep<ProductVariantType, {recurseIntoArrays: true}>[],\n  choices: SelectedOptions\n): PartialDeep<ProductVariantType, {recurseIntoArrays: true}> | undefined {\n  /**\n   * Ensure the user has selected all the required options, not just some.\n   */\n  if (\n    !variants.length ||\n    variants?.[0]?.selectedOptions?.length !== Object.keys(choices).length\n  ) {\n    return;\n  }\n\n  return variants?.find((variant) => {\n    return Object.entries(choices).every(([name, value]) => {\n      return variant?.selectedOptions?.some(\n        (option) => option?.name === name && option?.value === value\n      );\n    });\n  });\n}\n\nfunction getOptions(\n  variants: PartialDeep<ProductVariantType, {recurseIntoArrays: true}>[]\n): OptionWithValues[] {\n  const map = variants.reduce((memo, variant) => {\n    if (!variant.selectedOptions) {\n      throw new Error(`'getOptions' requires 'variant.selectedOptions'`);\n    }\n    variant?.selectedOptions?.forEach((opt) => {\n      memo[opt?.name ?? ''] = memo[opt?.name ?? ''] || new Set();\n      memo[opt?.name ?? ''].add(opt?.value ?? '');\n    });\n\n    return memo;\n  }, {} as Record<string, Set<string>>);\n\n  return Object.keys(map).map((option) => {\n    return {\n      name: option,\n      values: Array.from(map[option]),\n    };\n  });\n}\n\nfunction getVariantBasedOnIdProp(\n  explicitVariantId: InitialVariantId | undefined,\n  variants: Array<\n    PartialDeep<ProductVariantType, {recurseIntoArrays: true}> | undefined\n  >\n) {\n  // get the initial variant based on the logic outlined in the comments for 'initialVariantId' above\n  // * 1. If `initialVariantId` is provided, then it's used even if it's out of stock.\n  if (explicitVariantId) {\n    const foundVariant = variants.find(\n      (variant) => variant?.id === explicitVariantId\n    );\n    if (!foundVariant) {\n      console.warn(\n        `<ProductProvider/> received a 'initialVariantId' prop, but could not actually find a variant with that ID`\n      );\n    }\n    return foundVariant;\n  }\n  // * 2. If `initialVariantId` is provided but is `null`, then no variant is used.\n  if (explicitVariantId === null) {\n    return null;\n  }\n  // * 3. If nothing is passed to `initialVariantId` then the first available / in-stock variant is used.\n  // * 4. If nothing is passed to `initialVariantId` and no variants are in stock, then the first variant is used.\n  if (explicitVariantId === undefined) {\n    return variants.find((variant) => variant?.availableForSale) || variants[0];\n  }\n}\n\nfunction getSelectedOptions(\n  selectedVariant:\n    | PartialDeep<ProductVariantType, {recurseIntoArrays: true}>\n    | undefined\n    | null\n): SelectedOptions {\n  return selectedVariant?.selectedOptions\n    ? selectedVariant.selectedOptions.reduce<SelectedOptions>(\n        (memo, optionSet) => {\n          memo[optionSet?.name ?? ''] = optionSet?.value ?? '';\n          return memo;\n        },\n        {}\n      )\n    : {};\n}\n\nfunction isProductVariantArray(\n  maybeVariantArray:\n    | (PartialDeep<ProductVariantType, {recurseIntoArrays: true}> | undefined)[]\n    | undefined\n): maybeVariantArray is PartialDeep<\n  ProductVariantType,\n  {recurseIntoArrays: true}\n>[] {\n  if (!maybeVariantArray || !Array.isArray(maybeVariantArray)) {\n    return false;\n  }\n\n  return true;\n}\n\nexport interface OptionWithValues {\n  name: SelectedOptionType['name'];\n  values: SelectedOptionType['value'][];\n}\n\ntype ProductHookValue = PartialDeep<\n  {\n    /** An array of the variant `nodes` from the `VariantConnection`. */\n    variants: ProductVariantType[];\n    variantsConnection?: ProductVariantConnection;\n    /** An array of the product's options and values. */\n    options: OptionWithValues[];\n    /** The selected variant. */\n    selectedVariant?: ProductVariantType | null;\n    selectedOptions: SelectedOptions;\n    /** The selected selling plan. */\n    selectedSellingPlan?: SellingPlanType;\n    /** The selected selling plan allocation. */\n    selectedSellingPlanAllocation?: SellingPlanAllocationType;\n    /** The selling plan groups. */\n    sellingPlanGroups?: (Omit<SellingPlanGroupType, 'sellingPlans'> & {\n      sellingPlans: SellingPlanType[];\n    })[];\n    sellingPlanGroupsConnection?: SellingPlanGroupConnection;\n  },\n  {recurseIntoArrays: true}\n> & {\n  /** A callback to set the selected variant to the variant passed as an argument. */\n  setSelectedVariant: (\n    variant: PartialDeep<ProductVariantType, {recurseIntoArrays: true}> | null\n  ) => void;\n  /** A callback to set the selected option. */\n  setSelectedOption: (\n    name: SelectedOptionType['name'],\n    value: SelectedOptionType['value']\n  ) => void;\n  /** A callback to set multiple selected options at once. */\n  setSelectedOptions: (options: SelectedOptions) => void;\n  /** A callback to set the selected selling plan to the one passed as an argument. */\n  setSelectedSellingPlan: (\n    sellingPlan: PartialDeep<SellingPlanType, {recurseIntoArrays: true}>\n  ) => void;\n  /** A callback that returns a boolean indicating if the option is in stock. */\n  isOptionInStock: (\n    name: SelectedOptionType['name'],\n    value: SelectedOptionType['value']\n  ) => boolean;\n};\n\nexport type SelectedOptions = {\n  [key: string]: string;\n};\n"],"names":["ProductOptionsContext","createContext","ProductProvider","children","data","product","initialVariantId","explicitVariantId","variants","useMemo","flattenConnection","isProductVariantArray","Error","options","getOptions","selectedVariant","setSelectedVariant","useState","getVariantBasedOnIdProp","selectedOptions","setSelectedOptions","getSelectedOptions","useEffect","newSelectedVariant","setSelectedOption","useCallback","name","value","opts","getSelectedVariant","isOptionInStock","option","proposedVariant","availableForSale","sellingPlanGroups","map","sellingPlanGroup","sellingPlans","selectedSellingPlan","setSelectedSellingPlan","undefined","selectedSellingPlanAllocation","sellingPlanAllocations","nodes","edges","find","allocation","sellingPlan","id","variantsConnection","sellingPlanGroupsConnection","_jsx","useProduct","context","useContext","choices","length","Object","keys","variant","entries","every","some","reduce","memo","forEach","opt","Set","add","values","Array","from","foundVariant","console","warn","optionSet","maybeVariantArray","isArray"],"mappings":"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"}
+{"version":3,"file":"ProductProvider.js","sources":["../../src/ProductProvider.tsx"],"sourcesContent":["import {\n  useMemo,\n  useState,\n  useEffect,\n  useCallback,\n  createContext,\n  useContext,\n} from 'react';\nimport type {\n  SelectedOption as SelectedOptionType,\n  SellingPlan,\n  SellingPlanAllocation,\n  Product,\n  ProductVariant as ProductVariantType,\n  ProductVariantConnection,\n  SellingPlan as SellingPlanType,\n  SellingPlanAllocation as SellingPlanAllocationType,\n  SellingPlanGroup as SellingPlanGroupType,\n  SellingPlanGroupConnection,\n} from './storefront-api-types.js';\nimport type {PartialDeep} from 'type-fest';\nimport {flattenConnection} from './flatten-connection.js';\n\nconst ProductOptionsContext = createContext<ProductHookValue | null>(null);\n\ntype InitialVariantId = ProductVariantType['id'] | null;\n\ninterface ProductProviderProps {\n  /** A Storefront API [Product object](https://shopify.dev/api/storefront/reference/products/product). */\n  data: PartialDeep<Product, {recurseIntoArrays: true}>;\n  /** A `ReactNode` element. */\n  children: React.ReactNode;\n  /**\n   * The initially selected variant.\n   * The following logic applies to `initialVariantId`:\n   * 1. If `initialVariantId` is provided, then it's used even if it's out of stock.\n   * 2. If `initialVariantId` is provided but is `null`, then no variant is used.\n   * 3. If nothing is passed to `initialVariantId` then the first available / in-stock variant is used.\n   * 4. If nothing is passed to `initialVariantId` and no variants are in stock, then the first variant is used.\n   */\n  initialVariantId?: InitialVariantId;\n}\n\n/**\n * `<ProductProvider />` is a context provider that enables use of the `useProduct()` hook.\n *\n * It helps manage selected options and variants for a product.\n */\nexport function ProductProvider({\n  children,\n  data: product,\n  initialVariantId: explicitVariantId,\n}: ProductProviderProps) {\n  // The flattened variants\n  const variants = useMemo(\n    () => flattenConnection(product.variants ?? {}),\n    [product.variants]\n  );\n\n  if (!isProductVariantArray(variants)) {\n    throw new Error(\n      `<ProductProvider/> requires 'product.variants.nodes' or 'product.variants.edges'`\n    );\n  }\n\n  // All the options available for a product, based on all the variants\n  const options = useMemo(() => getOptions(variants), [variants]);\n\n  /**\n   * Track the selectedVariant within the provider.\n   */\n  const [selectedVariant, setSelectedVariant] = useState<\n    | PartialDeep<ProductVariantType, {recurseIntoArrays: true}>\n    | undefined\n    | null\n  >(() => getVariantBasedOnIdProp(explicitVariantId, variants));\n\n  /**\n   * Track the selectedOptions within the provider. If a `initialVariantId`\n   * is passed, use that to select initial options.\n   */\n  const [selectedOptions, setSelectedOptions] = useState<SelectedOptions>(() =>\n    getSelectedOptions(selectedVariant)\n  );\n\n  /**\n   * When the initialVariantId changes, we need to make sure we\n   * update the selected variant and selected options. If not,\n   * then the selected variant and options will reference incorrect\n   * values.\n   */\n  useEffect(() => {\n    const newSelectedVariant = getVariantBasedOnIdProp(\n      explicitVariantId,\n      variants\n    );\n    setSelectedVariant(newSelectedVariant);\n    setSelectedOptions(getSelectedOptions(newSelectedVariant));\n  }, [explicitVariantId, variants]);\n\n  /**\n   * Allow the developer to select an option.\n   */\n  const setSelectedOption = useCallback(\n    (name: string, value: string) => {\n      setSelectedOptions((selectedOptions) => {\n        const opts = {...selectedOptions, [name]: value};\n        setSelectedVariant(getSelectedVariant(variants, opts));\n        return opts;\n      });\n    },\n    [setSelectedOptions, variants]\n  );\n\n  const isOptionInStock = useCallback(\n    (option: string, value: string) => {\n      const proposedVariant = getSelectedVariant(variants, {\n        ...selectedOptions,\n        ...{[option]: value},\n      });\n\n      return proposedVariant?.availableForSale ?? true;\n    },\n    [selectedOptions, variants]\n  );\n\n  const sellingPlanGroups = useMemo(\n    () =>\n      flattenConnection(product.sellingPlanGroups ?? {}).map(\n        (sellingPlanGroup) => ({\n          ...sellingPlanGroup,\n          sellingPlans: flattenConnection(sellingPlanGroup?.sellingPlans ?? {}),\n        })\n      ),\n    [product.sellingPlanGroups]\n  );\n\n  /**\n   * Track the selectedSellingPlan within the hook. If `initialSellingPlanId`\n   * is passed, use that as an initial value. Look it up from the `selectedVariant`, since\n   * that is also a requirement.\n   */\n  const [selectedSellingPlan, setSelectedSellingPlan] = useState<\n    PartialDeep<SellingPlan, {recurseIntoArrays: true}> | undefined\n  >(undefined);\n\n  const selectedSellingPlanAllocation = useMemo<\n    PartialDeep<SellingPlanAllocation, {recurseIntoArrays: true}> | undefined\n  >(() => {\n    if (!selectedVariant || !selectedSellingPlan) {\n      return;\n    }\n\n    if (\n      !selectedVariant.sellingPlanAllocations?.nodes &&\n      !selectedVariant.sellingPlanAllocations?.edges\n    ) {\n      throw new Error(\n        `<ProductProvider/>: You must include 'sellingPlanAllocations.nodes' or 'sellingPlanAllocations.edges' in your variants in order to calculate selectedSellingPlanAllocation`\n      );\n    }\n\n    return flattenConnection(selectedVariant.sellingPlanAllocations).find(\n      (allocation) => allocation?.sellingPlan?.id === selectedSellingPlan.id\n    );\n  }, [selectedVariant, selectedSellingPlan]);\n\n  const value = useMemo<ProductHookValue>(\n    () => ({\n      variants,\n      variantsConnection: product.variants,\n      options,\n      selectedVariant,\n      setSelectedVariant,\n      selectedOptions,\n      setSelectedOption,\n      setSelectedOptions,\n      isOptionInStock,\n      selectedSellingPlan,\n      setSelectedSellingPlan,\n      selectedSellingPlanAllocation,\n      sellingPlanGroups,\n      sellingPlanGroupsConnection: product.sellingPlanGroups,\n    }),\n    [\n      isOptionInStock,\n      options,\n      product.sellingPlanGroups,\n      product.variants,\n      selectedOptions,\n      selectedSellingPlan,\n      selectedSellingPlanAllocation,\n      selectedVariant,\n      sellingPlanGroups,\n      setSelectedOption,\n      variants,\n    ]\n  );\n\n  return (\n    <ProductOptionsContext.Provider value={value}>\n      {children}\n    </ProductOptionsContext.Provider>\n  );\n}\n\n/**\n * Provides access to the context value provided by `<ProductProvider />`. Must be a descendent of `<ProductProvider />`.\n */\nexport function useProduct() {\n  const context = useContext(ProductOptionsContext);\n\n  if (!context) {\n    throw new Error(`'useProduct' must be a child of <ProductProvider />`);\n  }\n\n  return context;\n}\n\nfunction getSelectedVariant(\n  variants: PartialDeep<ProductVariantType, {recurseIntoArrays: true}>[],\n  choices: SelectedOptions\n): PartialDeep<ProductVariantType, {recurseIntoArrays: true}> | undefined {\n  /**\n   * Ensure the user has selected all the required options, not just some.\n   */\n  if (\n    !variants.length ||\n    variants?.[0]?.selectedOptions?.length !== Object.keys(choices).length\n  ) {\n    return;\n  }\n\n  return variants?.find((variant) => {\n    return Object.entries(choices).every(([name, value]) => {\n      return variant?.selectedOptions?.some(\n        (option) => option?.name === name && option?.value === value\n      );\n    });\n  });\n}\n\nfunction getOptions(\n  variants: PartialDeep<ProductVariantType, {recurseIntoArrays: true}>[]\n): OptionWithValues[] {\n  const map = variants.reduce((memo, variant) => {\n    if (!variant.selectedOptions) {\n      throw new Error(`'getOptions' requires 'variant.selectedOptions'`);\n    }\n    variant?.selectedOptions?.forEach((opt) => {\n      memo[opt?.name ?? ''] = memo[opt?.name ?? ''] || new Set();\n      memo[opt?.name ?? ''].add(opt?.value ?? '');\n    });\n\n    return memo;\n  }, {} as Record<string, Set<string>>);\n\n  return Object.keys(map).map((option) => {\n    return {\n      name: option,\n      values: Array.from(map[option]),\n    };\n  });\n}\n\nfunction getVariantBasedOnIdProp(\n  explicitVariantId: InitialVariantId | undefined,\n  variants: Array<\n    PartialDeep<ProductVariantType, {recurseIntoArrays: true}> | undefined\n  >\n) {\n  // get the initial variant based on the logic outlined in the comments for 'initialVariantId' above\n  // * 1. If `initialVariantId` is provided, then it's used even if it's out of stock.\n  if (explicitVariantId) {\n    const foundVariant = variants.find(\n      (variant) => variant?.id === explicitVariantId\n    );\n    if (!foundVariant) {\n      console.warn(\n        `<ProductProvider/> received a 'initialVariantId' prop, but could not actually find a variant with that ID`\n      );\n    }\n    return foundVariant;\n  }\n  // * 2. If `initialVariantId` is provided but is `null`, then no variant is used.\n  if (explicitVariantId === null) {\n    return null;\n  }\n  // * 3. If nothing is passed to `initialVariantId` then the first available / in-stock variant is used.\n  // * 4. If nothing is passed to `initialVariantId` and no variants are in stock, then the first variant is used.\n  if (explicitVariantId === undefined) {\n    return variants.find((variant) => variant?.availableForSale) || variants[0];\n  }\n}\n\nfunction getSelectedOptions(\n  selectedVariant:\n    | PartialDeep<ProductVariantType, {recurseIntoArrays: true}>\n    | undefined\n    | null\n): SelectedOptions {\n  return selectedVariant?.selectedOptions\n    ? selectedVariant.selectedOptions.reduce<SelectedOptions>(\n        (memo, optionSet) => {\n          memo[optionSet?.name ?? ''] = optionSet?.value ?? '';\n          return memo;\n        },\n        {}\n      )\n    : {};\n}\n\nfunction isProductVariantArray(\n  maybeVariantArray:\n    | (PartialDeep<ProductVariantType, {recurseIntoArrays: true}> | undefined)[]\n    | undefined\n): maybeVariantArray is PartialDeep<\n  ProductVariantType,\n  {recurseIntoArrays: true}\n>[] {\n  if (!maybeVariantArray || !Array.isArray(maybeVariantArray)) {\n    return false;\n  }\n\n  return true;\n}\n\nexport interface OptionWithValues {\n  name: SelectedOptionType['name'];\n  values: SelectedOptionType['value'][];\n}\n\ntype ProductHookValue = PartialDeep<\n  {\n    /** An array of the variant `nodes` from the `VariantConnection`. */\n    variants: ProductVariantType[];\n    variantsConnection?: ProductVariantConnection;\n    /** An array of the product's options and values. */\n    options: OptionWithValues[];\n    /** The selected variant. */\n    selectedVariant?: ProductVariantType | null;\n    selectedOptions: SelectedOptions;\n    /** The selected selling plan. */\n    selectedSellingPlan?: SellingPlanType;\n    /** The selected selling plan allocation. */\n    selectedSellingPlanAllocation?: SellingPlanAllocationType;\n    /** The selling plan groups. */\n    sellingPlanGroups?: (Omit<SellingPlanGroupType, 'sellingPlans'> & {\n      sellingPlans: SellingPlanType[];\n    })[];\n    sellingPlanGroupsConnection?: SellingPlanGroupConnection;\n  },\n  {recurseIntoArrays: true}\n> & {\n  /** A callback to set the selected variant to the variant passed as an argument. */\n  setSelectedVariant: (\n    variant: PartialDeep<ProductVariantType, {recurseIntoArrays: true}> | null\n  ) => void;\n  /** A callback to set the selected option. */\n  setSelectedOption: (\n    name: SelectedOptionType['name'],\n    value: SelectedOptionType['value']\n  ) => void;\n  /** A callback to set multiple selected options at once. */\n  setSelectedOptions: (options: SelectedOptions) => void;\n  /** A callback to set the selected selling plan to the one passed as an argument. */\n  setSelectedSellingPlan: (\n    sellingPlan: PartialDeep<SellingPlanType, {recurseIntoArrays: true}>\n  ) => void;\n  /** A callback that returns a boolean indicating if the option is in stock. */\n  isOptionInStock: (\n    name: SelectedOptionType['name'],\n    value: SelectedOptionType['value']\n  ) => boolean;\n};\n\nexport type SelectedOptions = {\n  [key: string]: string;\n};\n"],"names":["createContext","useMemo","flattenConnection","useState","useEffect","useCallback","value","selectedOptions","_a","jsx","useContext"],"mappings":"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"}

package/dist/node-dev/ProductProvider.mjs

@@ -1,57 +1,63 @@
+import { jsx } from "react/jsx-runtime";
 import { createContext, useMemo, useState, useEffect, useCallback, useContext } from "react";
 import { flattenConnection } from "./flatten-connection.mjs";
-import { jsx } from "react/jsx-runtime";
 const ProductOptionsContext = createContext(null);
 function ProductProvider({
   children,
   data: product,
   initialVariantId: explicitVariantId
 }) {
-  const variants = useMemo(() => {
-    var _a;
-    return flattenConnection((_a = product.variants) != null ? _a : {});
-  }, [product.variants]);
+  const variants = useMemo(
+    () => flattenConnection(product.variants ?? {}),
+    [product.variants]
+  );
   if (!isProductVariantArray(variants)) {
-    throw new Error(`<ProductProvider/> requires 'product.variants.nodes' or 'product.variants.edges'`);
+    throw new Error(
+      `<ProductProvider/> requires 'product.variants.nodes' or 'product.variants.edges'`
+    );
   }
   const options = useMemo(() => getOptions(variants), [variants]);
   const [selectedVariant, setSelectedVariant] = useState(() => getVariantBasedOnIdProp(explicitVariantId, variants));
-  const [selectedOptions, setSelectedOptions] = useState(() => getSelectedOptions(selectedVariant));
+  const [selectedOptions, setSelectedOptions] = useState(
+    () => getSelectedOptions(selectedVariant)
+  );
   useEffect(() => {
-    const newSelectedVariant = getVariantBasedOnIdProp(explicitVariantId, variants);
+    const newSelectedVariant = getVariantBasedOnIdProp(
+      explicitVariantId,
+      variants
+    );
     setSelectedVariant(newSelectedVariant);
     setSelectedOptions(getSelectedOptions(newSelectedVariant));
   }, [explicitVariantId, variants]);
-  const setSelectedOption = useCallback((name, value2) => {
-    setSelectedOptions((selectedOptions2) => {
-      const opts = {
-        ...selectedOptions2,
-        [name]: value2
-      };
-      setSelectedVariant(getSelectedVariant(variants, opts));
-      return opts;
-    });
-  }, [setSelectedOptions, variants]);
-  const isOptionInStock = useCallback((option, value2) => {
-    var _a;
-    const proposedVariant = getSelectedVariant(variants, {
-      ...selectedOptions,
-      ...{
-        [option]: value2
-      }
-    });
-    return (_a = proposedVariant == null ? void 0 : proposedVariant.availableForSale) != null ? _a : true;
-  }, [selectedOptions, variants]);
-  const sellingPlanGroups = useMemo(() => {
-    var _a;
-    return flattenConnection((_a = product.sellingPlanGroups) != null ? _a : {}).map((sellingPlanGroup) => {
-      var _a2;
-      return {
+  const setSelectedOption = useCallback(
+    (name, value2) => {
+      setSelectedOptions((selectedOptions2) => {
+        const opts = { ...selectedOptions2, [name]: value2 };
+        setSelectedVariant(getSelectedVariant(variants, opts));
+        return opts;
+      });
+    },
+    [setSelectedOptions, variants]
+  );
+  const isOptionInStock = useCallback(
+    (option, value2) => {
+      const proposedVariant = getSelectedVariant(variants, {
+        ...selectedOptions,
+        ...{ [option]: value2 }
+      });
+      return (proposedVariant == null ? void 0 : proposedVariant.availableForSale) ?? true;
+    },
+    [selectedOptions, variants]
+  );
+  const sellingPlanGroups = useMemo(
+    () => flattenConnection(product.sellingPlanGroups ?? {}).map(
+      (sellingPlanGroup) => ({
         ...sellingPlanGroup,
-        sellingPlans: flattenConnection((_a2 = sellingPlanGroup == null ? void 0 : sellingPlanGroup.sellingPlans) != null ? _a2 : {})
-      };
-    });
-  }, [product.sellingPlanGroups]);
+        sellingPlans: flattenConnection((sellingPlanGroup == null ? void 0 : sellingPlanGroup.sellingPlans) ?? {})
+      })
+    ),
+    [product.sellingPlanGroups]
+  );
   const [selectedSellingPlan, setSelectedSellingPlan] = useState(void 0);
   const selectedSellingPlanAllocation = useMemo(() => {
     var _a, _b;
@@ -59,33 +65,49 @@ function ProductProvider({
       return;
     }
     if (!((_a = selectedVariant.sellingPlanAllocations) == null ? void 0 : _a.nodes) && !((_b = selectedVariant.sellingPlanAllocations) == null ? void 0 : _b.edges)) {
-      throw new Error(`<ProductProvider/>: You must include 'sellingPlanAllocations.nodes' or 'sellingPlanAllocations.edges' in your variants in order to calculate selectedSellingPlanAllocation`);
+      throw new Error(
+        `<ProductProvider/>: You must include 'sellingPlanAllocations.nodes' or 'sellingPlanAllocations.edges' in your variants in order to calculate selectedSellingPlanAllocation`
+      );
     }
-    return flattenConnection(selectedVariant.sellingPlanAllocations).find((allocation) => {
-      var _a2;
-      return ((_a2 = allocation == null ? void 0 : allocation.sellingPlan) == null ? void 0 : _a2.id) === selectedSellingPlan.id;
-    });
+    return flattenConnection(selectedVariant.sellingPlanAllocations).find(
+      (allocation) => {
+        var _a2;
+        return ((_a2 = allocation == null ? void 0 : allocation.sellingPlan) == null ? void 0 : _a2.id) === selectedSellingPlan.id;
+      }
+    );
   }, [selectedVariant, selectedSellingPlan]);
-  const value = useMemo(() => ({
-    variants,
-    variantsConnection: product.variants,
-    options,
-    selectedVariant,
-    setSelectedVariant,
-    selectedOptions,
-    setSelectedOption,
-    setSelectedOptions,
-    isOptionInStock,
-    selectedSellingPlan,
-    setSelectedSellingPlan,
-    selectedSellingPlanAllocation,
-    sellingPlanGroups,
-    sellingPlanGroupsConnection: product.sellingPlanGroups
-  }), [isOptionInStock, options, product.sellingPlanGroups, product.variants, selectedOptions, selectedSellingPlan, selectedSellingPlanAllocation, selectedVariant, sellingPlanGroups, setSelectedOption, variants]);
-  return /* @__PURE__ */ jsx(ProductOptionsContext.Provider, {
-    value,
-    children
-  });
+  const value = useMemo(
+    () => ({
+      variants,
+      variantsConnection: product.variants,
+      options,
+      selectedVariant,
+      setSelectedVariant,
+      selectedOptions,
+      setSelectedOption,
+      setSelectedOptions,
+      isOptionInStock,
+      selectedSellingPlan,
+      setSelectedSellingPlan,
+      selectedSellingPlanAllocation,
+      sellingPlanGroups,
+      sellingPlanGroupsConnection: product.sellingPlanGroups
+    }),
+    [
+      isOptionInStock,
+      options,
+      product.sellingPlanGroups,
+      product.variants,
+      selectedOptions,
+      selectedSellingPlan,
+      selectedSellingPlanAllocation,
+      selectedVariant,
+      sellingPlanGroups,
+      setSelectedOption,
+      variants
+    ]
+  );
+  return /* @__PURE__ */ jsx(ProductOptionsContext.Provider, { value, children });
 }
 function useProduct() {
   const context = useContext(ProductOptionsContext);
@@ -102,7 +124,9 @@ function getSelectedVariant(variants, choices) {
   return variants == null ? void 0 : variants.find((variant) => {
     return Object.entries(choices).every(([name, value]) => {
       var _a2;
-      return (_a2 = variant == null ? void 0 : variant.selectedOptions) == null ? void 0 : _a2.some((option) => (option == null ? void 0 : option.name) === name && (option == null ? void 0 : option.value) === value);
+      return (_a2 = variant == null ? void 0 : variant.selectedOptions) == null ? void 0 : _a2.some(
+        (option) => (option == null ? void 0 : option.name) === name && (option == null ? void 0 : option.value) === value
+      );
     });
   });
 }
@@ -113,9 +137,8 @@ function getOptions(variants) {
       throw new Error(`'getOptions' requires 'variant.selectedOptions'`);
     }
     (_a = variant == null ? void 0 : variant.selectedOptions) == null ? void 0 : _a.forEach((opt) => {
-      var _a2, _b, _c, _d;
-      memo[(_a2 = opt == null ? void 0 : opt.name) != null ? _a2 : ""] = memo[(_b = opt == null ? void 0 : opt.name) != null ? _b : ""] || /* @__PURE__ */ new Set();
-      memo[(_c = opt == null ? void 0 : opt.name) != null ? _c : ""].add((_d = opt == null ? void 0 : opt.value) != null ? _d : "");
+      memo[(opt == null ? void 0 : opt.name) ?? ""] = memo[(opt == null ? void 0 : opt.name) ?? ""] || /* @__PURE__ */ new Set();
+      memo[(opt == null ? void 0 : opt.name) ?? ""].add((opt == null ? void 0 : opt.value) ?? "");
     });
     return memo;
   }, {});
@@ -128,9 +151,13 @@ function getOptions(variants) {
 }
 function getVariantBasedOnIdProp(explicitVariantId, variants) {
   if (explicitVariantId) {
-    const foundVariant = variants.find((variant) => (variant == null ? void 0 : variant.id) === explicitVariantId);
+    const foundVariant = variants.find(
+      (variant) => (variant == null ? void 0 : variant.id) === explicitVariantId
+    );
     if (!foundVariant) {
-      console.warn(`<ProductProvider/> received a 'initialVariantId' prop, but could not actually find a variant with that ID`);
+      console.warn(
+        `<ProductProvider/> received a 'initialVariantId' prop, but could not actually find a variant with that ID`
+      );
     }
     return foundVariant;
   }
@@ -142,11 +169,13 @@ function getVariantBasedOnIdProp(explicitVariantId, variants) {
   }
 }
 function getSelectedOptions(selectedVariant) {
-  return (selectedVariant == null ? void 0 : selectedVariant.selectedOptions) ? selectedVariant.selectedOptions.reduce((memo, optionSet) => {
-    var _a, _b;
-    memo[(_a = optionSet == null ? void 0 : optionSet.name) != null ? _a : ""] = (_b = optionSet == null ? void 0 : optionSet.value) != null ? _b : "";
-    return memo;
-  }, {}) : {};
+  return (selectedVariant == null ? void 0 : selectedVariant.selectedOptions) ? selectedVariant.selectedOptions.reduce(
+    (memo, optionSet) => {
+      memo[(optionSet == null ? void 0 : optionSet.name) ?? ""] = (optionSet == null ? void 0 : optionSet.value) ?? "";
+      return memo;
+    },
+    {}
+  ) : {};
 }
 function isProductVariantArray(maybeVariantArray) {
   if (!maybeVariantArray || !Array.isArray(maybeVariantArray)) {