@shopify/hydrogen-react 2022.10.8 → 2023.1.5

package/dist/browser-dev/ShopifyProvider.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ShopifyProvider.mjs","sources":["../../src/ShopifyProvider.tsx"],"sourcesContent":["import {createContext, useContext, useMemo, type ReactNode} from 'react';\nimport type {LanguageCode, CountryCode} from './storefront-api-types.js';\nimport {SFAPI_VERSION} from './storefront-api-constants.js';\nimport {getPublicTokenHeadersRaw} from './storefront-client.js';\n\nconst ShopifyContext = createContext<ShopifyContextValue>({\n  storeDomain: 'test',\n  storefrontToken: 'abc123',\n  storefrontApiVersion: SFAPI_VERSION,\n  country: {\n    isoCode: 'US',\n  },\n  language: {\n    isoCode: 'EN',\n  },\n  locale: 'EN-US',\n  getStorefrontApiUrl() {\n    return '';\n  },\n  getPublicTokenHeaders() {\n    return {};\n  },\n  getShopifyDomain() {\n    return '';\n  },\n});\n\n/**\n * The `<ShopifyProvider/>` component enables use of the `useShop()` hook. The component should wrap your app.\n */\nexport function ShopifyProvider({\n  children,\n  shopifyConfig,\n}: {\n  children: ReactNode;\n  shopifyConfig: ShopifyContextProps;\n}) {\n  if (!shopifyConfig) {\n    throw new Error(\n      `The 'shopifyConfig' prop must be passed to '<ShopifyProvider/>'`\n    );\n  }\n\n  if (shopifyConfig.storefrontApiVersion !== SFAPI_VERSION) {\n    console.warn(\n      `<ShopifyProvider/>: This version of Hydrogen-UI is built for Shopify's Storefront API version ${SFAPI_VERSION}, but it looks like you're using version ${shopifyConfig.storefrontApiVersion}. There may be issues or bugs if you use a mismatched version of Hydrogen-UI and the Storefront API.`\n    );\n  }\n\n  const finalConfig = useMemo<ShopifyContextValue>(() => {\n    const storeDomain = shopifyConfig.storeDomain.replace(/^https?:\\/\\//, '');\n\n    // @deprecated remove the ability to pass in '.myshopify.com' strings in the future\n    if (storeDomain.includes('.myshopify.com')) {\n      if (__HYDROGEN_DEV__) {\n        console.warn(\n          `<ShopifyProvider/>: passing a 'storeDomain' prop that includes '.myshopify.com' will be unsupported in the future. Passing only the subdomain (for example, if the URL is 'test.myshopify.com', passing in 'test') will be the supported way going forward.`\n        );\n      }\n    }\n\n    function getShopifyDomain(overrideProps?: {storeDomain?: string}) {\n      let subDomain = overrideProps?.storeDomain ?? storeDomain;\n      subDomain = subDomain.replace('.myshopify.com', '');\n\n      return `https://${subDomain}.myshopify.com`;\n    }\n\n    return {\n      ...shopifyConfig,\n      storeDomain,\n      getPublicTokenHeaders(overrideProps) {\n        return getPublicTokenHeadersRaw(\n          overrideProps.contentType,\n          shopifyConfig.storefrontApiVersion,\n          overrideProps.storefrontToken ?? shopifyConfig.storefrontToken\n        );\n      },\n      getShopifyDomain,\n      getStorefrontApiUrl(overrideProps) {\n        if (overrideProps?.storeDomain?.includes('.myshopify.com')) {\n          if (__HYDROGEN_DEV__) {\n            console.warn(\n              `<ShopifyProvider/>: passing a 'storeDomain' prop that includes '.myshopify.com' will be unsupported in the future. Passing only the subdomain (for example, if the URL is 'test.myshopify.com', passing in 'test') will be the supported way going forward.`\n            );\n          }\n        }\n        return `${getShopifyDomain({\n          storeDomain: overrideProps?.storeDomain ?? storeDomain,\n        })}/api/${\n          overrideProps?.storefrontApiVersion ??\n          shopifyConfig.storefrontApiVersion\n        }/graphql.json`;\n      },\n    };\n  }, [shopifyConfig]);\n\n  return (\n    <ShopifyContext.Provider value={finalConfig}>\n      {children}\n    </ShopifyContext.Provider>\n  );\n}\n\n/**\n * Provides access to the `shopifyConfig` prop of `<ShopifyProvider/>`. Must be a descendent of `<ShopifyProvider/>`.\n */\nexport function useShop() {\n  const shopContext = useContext(ShopifyContext);\n  if (!shopContext) {\n    throw new Error(`'useShop()' must be a descendent of <ShopifyProvider/>`);\n  }\n  return shopContext;\n}\n\n/**\n * Shopify-specific values that are used in various Hydrogen-UI components and hooks.\n */\nexport type ShopifyContextProps = {\n  /** The globally-unique identifier for the Shop */\n  storefrontId?: string;\n  /** The subdomain of your Shopify storefront URL (eg: `{subdomain}.myshopify.com`). */\n  storeDomain: string;\n  /** The Storefront API public access token. Refer to the [authentication](https://shopify.dev/api/storefront#authentication) documentation for more details. */\n  storefrontToken: string;\n  /** The Storefront API version. This should almost always be the same as the version Hydrogen-UI was built for. Learn more about Shopify [API versioning](https://shopify.dev/api/usage/versioning) for more details.  */\n  storefrontApiVersion: string;\n  country?: {\n    /**\n     * The code designating a country, which generally follows ISO 3166-1 alpha-2 guidelines. If a territory doesn't have a country code value in the `CountryCode` enum, it might be considered a subdivision of another country. For example, the territories associated with Spain are represented by the country code `ES`, and the territories associated with the United States of America are represented by the country code `US`.\n     */\n    isoCode: CountryCode;\n  };\n  language?: {\n    /**\n     * `ISO 369` language codes supported by Shopify.\n     */\n    isoCode: LanguageCode;\n  };\n  /**\n   * The locale string based on `country` and `language`.\n   */\n  locale?: string;\n};\n\nexport type ShopifyContextValue = ShopifyContextProps & {\n  /**\n   * Creates the fully-qualified URL to your store's GraphQL endpoint.\n   *\n   * By default, it will use the config you passed in when creating `<ShopifyProvider/>`. However, you can override the following settings on each invocation of `getStorefrontApiUrl({...})`:\n   *\n   * - `storeDomain`\n   * - `storefrontApiVersion`\n   */\n  getStorefrontApiUrl: (props?: {\n    /** The host name of the domain (eg: `{shop}.myshopify.com`). */\n    storeDomain?: string;\n    /** The Storefront API version. This should almost always be the same as the version Hydrogen-UI was built for. Learn more about Shopify [API versioning](https://shopify.dev/api/usage/versioning) for more details. */\n    storefrontApiVersion?: string;\n  }) => string;\n  /**\n   * Returns an object that contains headers that are needed for each query to Storefront API GraphQL endpoint. This uses the public Storefront API token.\n   *\n   * By default, it will use the config you passed in when creating `<ShopifyProvider/>`. However, you can override the following settings on each invocation of `getPublicTokenHeaders({...})`:\n   *\n   * - `contentType`\n   * - `storefrontToken`\n   *\n   */\n  getPublicTokenHeaders: (props: {\n    /**\n     * Customizes which `\"content-type\"` header is added when using `getPrivateTokenHeaders()` and `getPublicTokenHeaders()`. When fetching with a `JSON.stringify()`-ed `body`, use `\"json\"`. When fetching with a `body` that is a plain string, use `\"graphql\"`. Defaults to `\"json\"`\n     */\n    contentType: 'json' | 'graphql';\n    /** The Storefront API access token. Refer to the [authentication](https://shopify.dev/api/storefront#authentication) documentation for more details. */\n    storefrontToken?: string;\n  }) => Record<string, string>;\n  /**\n   * Creates the fully-qualified URL to your myshopify.com domain.\n   *\n   * By default, it will use the config you passed in when calling `<ShopifyProvider/>`. However, you can override the following settings on each invocation of `getShopifyDomain({...})`:\n   *\n   * - `storeDomain`\n   */\n  getShopifyDomain: (props?: {storeDomain?: string}) => string;\n};\n"],"names":["ShopifyContext","createContext","storeDomain","storefrontToken","storefrontApiVersion","SFAPI_VERSION","country","isoCode","language","locale","getStorefrontApiUrl","getPublicTokenHeaders","getShopifyDomain","ShopifyProvider","children","shopifyConfig","Error","console","warn","finalConfig","useMemo","replace","includes","overrideProps","subDomain","getPublicTokenHeadersRaw","contentType","_jsx","useShop","shopContext","useContext"],"mappings":";;;;AAKA,MAAMA,iBAAiBC,cAAmC;AAAA,EACxDC,aAAa;AAAA,EACbC,iBAAiB;AAAA,EACjBC,sBAAsBC;AAAAA,EACtBC,SAAS;AAAA,IACPC,SAAS;AAAA,EACX;AAAA,EACAC,UAAU;AAAA,IACRD,SAAS;AAAA,EACX;AAAA,EACAE,QAAQ;AAAA,EACRC,sBAAsB;AACb,WAAA;AAAA,EACT;AAAA,EACAC,wBAAwB;AACtB,WAAO;EACT;AAAA,EACAC,mBAAmB;AACV,WAAA;AAAA,EACT;AACF,CAAC;AAKM,SAASC,gBAAgB;AAAA,EAC9BC;AAAAA,EACAC;AAIF,GAAG;AACD,MAAI,CAACA,eAAe;AACZ,UAAA,IAAIC,MACP,iEAAgE;AAAA,EAErE;AAEID,MAAAA,cAAcX,yBAAyBC,eAAe;AACxDY,YAAQC,KACL,iGAAgGb,yDAAyDU,cAAcX,0HAA0H;AAAA,EAEtS;AAEMe,QAAAA,cAAcC,QAA6B,MAAM;AACrD,UAAMlB,cAAca,cAAcb,YAAYmB,QAAQ,gBAAgB,EAAE;AAGpEnB,QAAAA,YAAYoB,SAAS,gBAAgB,GAAG;AACpB;AACpBL,gBAAQC,KACL,6PAA4P;AAAA,MAEjQ;AAAA,IACF;AAEA,aAASN,iBAAiBW,eAAwC;;AAC5DC,UAAAA,aAAYD,oDAAerB,gBAAfqB,YAA8BrB;AAClCsB,kBAAAA,UAAUH,QAAQ,kBAAkB,EAAE;AAElD,aAAQ,WAAUG;AAAAA,IACpB;AAEO,WAAA;AAAA,MACL,GAAGT;AAAAA,MACHb;AAAAA,MACAS,sBAAsBY,eAAe;;AAC5BE,eAAAA,yBACLF,cAAcG,aACdX,cAAcX,uBACdmB,mBAAcpB,oBAAdoB,YAAiCR,cAAcZ,eAAe;AAAA,MAElE;AAAA,MACAS;AAAAA,MACAF,oBAAoBa,eAAe;;AACjC,aAAIA,oDAAerB,gBAAfqB,mBAA4BD,SAAS,mBAAmB;AACpC;AACpBL,oBAAQC,KACL,6PAA4P;AAAA,UAEjQ;AAAA,QACF;AACA,eAAQ,GAAEN,iBAAiB;AAAA,UACzBV,cAAaqB,oDAAerB,gBAAfqB,YAA8BrB;AAAAA,QAAAA,CAC5C,UACCqB,oDAAenB,yBAAfmB,YACAR,cAAcX;AAAAA,MAElB;AAAA,IAAA;AAAA,EACF,GACC,CAACW,aAAa,CAAC;AAGhB,SAAAY,oBAAC,eAAe,UAAQ;AAAA,IAAC,OAAOR;AAAAA,IAAY;AAAA,EAAA,CAElB;AAE9B;AAKO,SAASS,UAAU;AAClBC,QAAAA,cAAcC,WAAW9B,cAAc;AAC7C,MAAI,CAAC6B,aAAa;AACV,UAAA,IAAIb,MAAO,wDAAuD;AAAA,EAC1E;AACOa,SAAAA;AACT;"}
+{"version":3,"file":"ShopifyProvider.mjs","sources":["../../src/ShopifyProvider.tsx"],"sourcesContent":["import {createContext, useContext, useMemo, type ReactNode} from 'react';\nimport type {LanguageCode, CountryCode} from './storefront-api-types.js';\nimport {SFAPI_VERSION} from './storefront-api-constants.js';\nimport {getPublicTokenHeadersRaw} from './storefront-client.js';\n\nconst ShopifyContext = createContext<ShopifyContextValue>({\n  storeDomain: 'test',\n  storefrontToken: 'abc123',\n  storefrontApiVersion: SFAPI_VERSION,\n  countryIsoCode: 'US',\n  languageIsoCode: 'EN',\n  getStorefrontApiUrl() {\n    return '';\n  },\n  getPublicTokenHeaders() {\n    return {};\n  },\n  getShopifyDomain() {\n    return '';\n  },\n});\n\n/**\n * The `<ShopifyProvider/>` component enables use of the `useShop()` hook. The component should wrap your app.\n */\nexport function ShopifyProvider({\n  children,\n  ...shopifyConfig\n}: ShopifyProviderProps): JSX.Element {\n  if (\n    !shopifyConfig.countryIsoCode ||\n    !shopifyConfig.languageIsoCode ||\n    !shopifyConfig.storeDomain ||\n    !shopifyConfig.storefrontToken ||\n    !shopifyConfig.storefrontApiVersion\n  ) {\n    throw new Error(\n      `Please provide the necessary props to '<ShopifyProvider/>'`\n    );\n  }\n\n  if (shopifyConfig.storefrontApiVersion !== SFAPI_VERSION) {\n    console.warn(\n      `<ShopifyProvider/>: This version of Hydrogen React is built for Shopify's Storefront API version ${SFAPI_VERSION}, but it looks like you're using version ${shopifyConfig.storefrontApiVersion}. There may be issues or bugs if you use a mismatched version of Hydrogen React and the Storefront API.`\n    );\n  }\n\n  const finalConfig = useMemo<ShopifyContextValue>(() => {\n    function getShopifyDomain(overrideProps?: {storeDomain?: string}): string {\n      return overrideProps?.storeDomain ?? shopifyConfig.storeDomain;\n    }\n\n    return {\n      ...shopifyConfig,\n      getPublicTokenHeaders(overrideProps): Record<string, string> {\n        return getPublicTokenHeadersRaw(\n          overrideProps.contentType,\n          shopifyConfig.storefrontApiVersion,\n          overrideProps.storefrontToken ?? shopifyConfig.storefrontToken\n        );\n      },\n      getShopifyDomain,\n      getStorefrontApiUrl(overrideProps): string {\n        const finalDomainUrl = getShopifyDomain({\n          storeDomain: overrideProps?.storeDomain ?? shopifyConfig.storeDomain,\n        });\n        return `${finalDomainUrl}${\n          finalDomainUrl.endsWith('/') ? '' : '/'\n        }api/${\n          overrideProps?.storefrontApiVersion ??\n          shopifyConfig.storefrontApiVersion\n        }/graphql.json`;\n      },\n    };\n  }, [shopifyConfig]);\n\n  return (\n    <ShopifyContext.Provider value={finalConfig}>\n      {children}\n    </ShopifyContext.Provider>\n  );\n}\n\n/**\n * Provides access to the `shopifyConfig` prop of `<ShopifyProvider/>`. Must be a descendent of `<ShopifyProvider/>`.\n */\nexport function useShop(): ShopifyContextValue {\n  const shopContext = useContext(ShopifyContext);\n  if (!shopContext) {\n    throw new Error(`'useShop()' must be a descendent of <ShopifyProvider/>`);\n  }\n  return shopContext;\n}\n\nexport interface ShopifyProviderBase {\n  /** The globally-unique identifier for the Shop */\n  storefrontId?: string;\n  /** The full domain of your Shopify storefront URL (eg: the complete string of `{subdomain}.myshopify.com`). */\n  storeDomain: string;\n  /** The Storefront API public access token. Refer to the [authentication](https://shopify.dev/api/storefront#authentication) documentation for more details. */\n  storefrontToken: string;\n  /** The Storefront API version. This should almost always be the same as the version Hydrogen React was built for. Learn more about Shopify [API versioning](https://shopify.dev/api/usage/versioning) for more details.  */\n  storefrontApiVersion: string;\n  /**\n   * The code designating a country, which generally follows ISO 3166-1 alpha-2 guidelines. If a territory doesn't have a country code value in the `CountryCode` enum, it might be considered a subdivision of another country. For example, the territories associated with Spain are represented by the country code `ES`, and the territories associated with the United States of America are represented by the country code `US`.\n   */\n  countryIsoCode: CountryCode;\n  /**\n   * `ISO 369` language codes supported by Shopify.\n   */\n  languageIsoCode: LanguageCode;\n}\n\n/**\n * Shopify-specific values that are used in various Hydrogen React components and hooks.\n */\nexport interface ShopifyProviderProps extends ShopifyProviderBase {\n  /** React children to render. */\n  children?: ReactNode;\n}\n\nexport interface ShopifyContextValue\n  extends ShopifyProviderBase,\n    ShopifyContextReturn {}\n\ntype ShopifyContextReturn = {\n  /**\n   * Creates the fully-qualified URL to your store's GraphQL endpoint.\n   *\n   * By default, it will use the config you passed in when creating `<ShopifyProvider/>`. However, you can override the following settings on each invocation of `getStorefrontApiUrl({...})`:\n   *\n   * - `storeDomain`\n   * - `storefrontApiVersion`\n   */\n  getStorefrontApiUrl: (props?: GetStorefrontApiUrlProps) => string;\n  /**\n   * Returns an object that contains headers that are needed for each query to Storefront API GraphQL endpoint. This uses the public Storefront API token.\n   *\n   * By default, it will use the config you passed in when creating `<ShopifyProvider/>`. However, you can override the following settings on each invocation of `getPublicTokenHeaders({...})`:\n   *\n   * - `contentType`\n   * - `storefrontToken`\n   *\n   */\n  getPublicTokenHeaders: (\n    props: GetPublicTokenHeadersProps\n  ) => Record<string, string>;\n  /**\n   * Creates the fully-qualified URL to your myshopify.com domain.\n   *\n   * By default, it will use the config you passed in when calling `<ShopifyProvider/>`. However, you can override the following settings on each invocation of `getShopifyDomain({...})`:\n   *\n   * - `storeDomain`\n   */\n  getShopifyDomain: (props?: GetShopifyDomainProps) => string;\n};\n\ntype GetStorefrontApiUrlProps = {\n  /** The host name of the domain (eg: `{shop}.myshopify.com`). */\n  storeDomain?: string;\n  /** The Storefront API version. This should almost always be the same as the version Hydrogen-UI was built for. Learn more about Shopify [API versioning](https://shopify.dev/api/usage/versioning) for more details. */\n  storefrontApiVersion?: string;\n};\n\ntype GetPublicTokenHeadersProps = {\n  /**\n   * Customizes which `\"content-type\"` header is added when using `getPrivateTokenHeaders()` and `getPublicTokenHeaders()`. When fetching with a `JSON.stringify()`-ed `body`, use `\"json\"`. When fetching with a `body` that is a plain string, use `\"graphql\"`. Defaults to `\"json\"`\n   */\n  contentType: 'json' | 'graphql';\n  /** The Storefront API access token. Refer to the [authentication](https://shopify.dev/api/storefront#authentication) documentation for more details. */\n  storefrontToken?: string;\n};\n\ntype GetShopifyDomainProps = {storeDomain?: string};\n"],"names":[],"mappings":";;;;AAKA,MAAM,iBAAiB,cAAmC;AAAA,EACxD,aAAa;AAAA,EACb,iBAAiB;AAAA,EACjB,sBAAsB;AAAA,EACtB,gBAAgB;AAAA,EAChB,iBAAiB;AAAA,EACjB,sBAAsB;AACb,WAAA;AAAA,EACT;AAAA,EACA,wBAAwB;AACtB,WAAO;EACT;AAAA,EACA,mBAAmB;AACV,WAAA;AAAA,EACT;AACF,CAAC;AAKM,SAAS,gBAAgB;AAAA,EAC9B;AAAA,EACA,GAAG;AACL,GAAsC;AACpC,MACE,CAAC,cAAc,kBACf,CAAC,cAAc,mBACf,CAAC,cAAc,eACf,CAAC,cAAc,mBACf,CAAC,cAAc,sBACf;AACA,UAAM,IAAI;AAAA,MACR;AAAA,IAAA;AAAA,EAEJ;AAEI,MAAA,cAAc,yBAAyB,eAAe;AAChD,YAAA;AAAA,MACN,oGAAoG,yDAAyD,cAAc;AAAA,IAAA;AAAA,EAE/K;AAEM,QAAA,cAAc,QAA6B,MAAM;AACrD,aAAS,iBAAiB,eAAgD;AACjE,cAAA,+CAAe,gBAAe,cAAc;AAAA,IACrD;AAEO,WAAA;AAAA,MACL,GAAG;AAAA,MACH,sBAAsB,eAAuC;AACpD,eAAA;AAAA,UACL,cAAc;AAAA,UACd,cAAc;AAAA,UACd,cAAc,mBAAmB,cAAc;AAAA,QAAA;AAAA,MAEnD;AAAA,MACA;AAAA,MACA,oBAAoB,eAAuB;AACzC,cAAM,iBAAiB,iBAAiB;AAAA,UACtC,cAAa,+CAAe,gBAAe,cAAc;AAAA,QAAA,CAC1D;AACM,eAAA,GAAG,iBACR,eAAe,SAAS,GAAG,IAAI,KAAK,WAEpC,+CAAe,yBACf,cAAc;AAAA,MAElB;AAAA,IAAA;AAAA,EACF,GACC,CAAC,aAAa,CAAC;AAElB,6BACG,eAAe,UAAf,EAAwB,OAAO,aAC7B,SACH,CAAA;AAEJ;AAKO,SAAS,UAA+B;AACvC,QAAA,cAAc,WAAW,cAAc;AAC7C,MAAI,CAAC,aAAa;AACV,UAAA,IAAI,MAAM,wDAAwD;AAAA,EAC1E;AACO,SAAA;AACT;"}

package/dist/browser-dev/Video.mjs

@@ -1,8 +1,8 @@
-import { shopifyImageLoader } from "./image-size.mjs";
-import { createElement } from "react";
 import { jsx } from "react/jsx-runtime";
+import { createElement } from "react";
+import { shopifyImageLoader } from "./image-size.mjs";
 function Video(props) {
-  var _a, _b;
+  var _a;
   const {
     data,
     previewImageOptions,
@@ -13,30 +13,39 @@ function Video(props) {
     ...passthroughProps
   } = props;
   const posterUrl = shopifyImageLoader({
-    src: (_b = (_a = data.previewImage) == null ? void 0 : _a.url) != null ? _b : "",
+    src: ((_a = data.previewImage) == null ? void 0 : _a.url) ?? "",
     ...previewImageOptions
   });
   if (!data.sources) {
     throw new Error(`<Video/> requires a 'data.sources' array`);
   }
-  return /* @__PURE__ */ jsx("video", {
-    ...passthroughProps,
-    id,
-    playsInline,
-    controls,
-    poster: posterUrl,
-    children: data.sources.map((source) => {
-      if (!((source == null ? void 0 : source.url) && (source == null ? void 0 : source.mimeType))) {
-        throw new Error(`<Video/> needs 'source.url' and 'source.mimeType'`);
+  return (
+    // eslint-disable-next-line jsx-a11y/media-has-caption
+    /* @__PURE__ */ jsx(
+      "video",
+      {
+        ...passthroughProps,
+        id,
+        playsInline,
+        controls,
+        poster: posterUrl,
+        children: data.sources.map((source) => {
+          if (!((source == null ? void 0 : source.url) && (source == null ? void 0 : source.mimeType))) {
+            throw new Error(`<Video/> needs 'source.url' and 'source.mimeType'`);
+          }
+          return /* @__PURE__ */ createElement(
+            "source",
+            {
+              ...sourceProps,
+              key: source.url,
+              src: source.url,
+              type: source.mimeType
+            }
+          );
+        })
       }
-      return /* @__PURE__ */ createElement("source", {
-        ...sourceProps,
-        key: source.url,
-        src: source.url,
-        type: source.mimeType
-      });
-    })
-  });
+    )
+  );
 }
 export {
   Video

package/dist/browser-dev/Video.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Video.mjs","sources":["../../src/Video.tsx"],"sourcesContent":["import {type HTMLAttributes} from 'react';\nimport {shopifyImageLoader} from './image-size.js';\nimport type {Video as VideoType} from './storefront-api-types.js';\nimport type {PartialDeep} from 'type-fest';\n\nexport interface VideoProps {\n  /** An object with fields that correspond to the Storefront API's [Video object](https://shopify.dev/api/storefront/latest/objects/video). */\n  data: PartialDeep<VideoType, {recurseIntoArrays: true}>;\n  /** An object of image size options for the video's `previewImage`. Uses `shopifyImageLoader` to generate the `poster` URL. */\n  previewImageOptions?: Parameters<typeof shopifyImageLoader>[0];\n  /** Props that will be passed to the `video` element's `source` children elements. */\n  sourceProps?: HTMLAttributes<HTMLSourceElement> & {\n    'data-testid'?: string;\n  };\n}\n\n/**\n * The `Video` component renders a `video` for the Storefront API's [Video object](https://shopify.dev/api/storefront/reference/products/video).\n */\nexport function Video(props: JSX.IntrinsicElements['video'] & VideoProps) {\n  const {\n    data,\n    previewImageOptions,\n    id = data.id,\n    playsInline = true,\n    controls = true,\n    sourceProps = {},\n    ...passthroughProps\n  } = props;\n\n  const posterUrl = shopifyImageLoader({\n    src: data.previewImage?.url ?? '',\n    ...previewImageOptions,\n  });\n\n  if (!data.sources) {\n    throw new Error(`<Video/> requires a 'data.sources' array`);\n  }\n\n  return (\n    // eslint-disable-next-line jsx-a11y/media-has-caption\n    <video\n      {...passthroughProps}\n      id={id}\n      playsInline={playsInline}\n      controls={controls}\n      poster={posterUrl}\n    >\n      {data.sources.map((source) => {\n        if (!(source?.url && source?.mimeType)) {\n          throw new Error(`<Video/> needs 'source.url' and 'source.mimeType'`);\n        }\n        return (\n          <source\n            {...sourceProps}\n            key={source.url}\n            src={source.url}\n            type={source.mimeType}\n          />\n        );\n      })}\n    </video>\n  );\n}\n"],"names":["Video","props","data","previewImageOptions","id","playsInline","controls","sourceProps","passthroughProps","posterUrl","shopifyImageLoader","src","previewImage","url","sources","Error","map","source","mimeType"],"mappings":";;;AAmBO,SAASA,MAAMC,OAAoD;;AAClE,QAAA;AAAA,IACJC;AAAAA,IACAC;AAAAA,IACAC,KAAKF,KAAKE;AAAAA,IACVC,cAAc;AAAA,IACdC,WAAW;AAAA,IACXC,cAAc,CAAC;AAAA,OACZC;AAAAA,EACDP,IAAAA;AAEJ,QAAMQ,YAAYC,mBAAmB;AAAA,IACnCC,MAAKT,gBAAKU,iBAALV,mBAAmBW,QAAnBX,YAA0B;AAAA,IAC/B,GAAGC;AAAAA,EAAAA,CACJ;AAEG,MAAA,CAACD,KAAKY,SAAS;AACX,UAAA,IAAIC,MAAO,0CAAyC;AAAA,EAC5D;AAEA,6BAEE,SAAA;AAAA,IAAA,GACMP;AAAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA,QAAQC;AAAAA,IAAU,UAEjBP,KAAKY,QAAQE,IAAKC,CAAW,WAAA;AAC5B,UAAI,GAAEA,iCAAQJ,SAAOI,iCAAQC,YAAW;AAChC,cAAA,IAAIH,MAAO,mDAAkD;AAAA,MACrE;AACA,2CACE,UAAA;AAAA,QAAA,GACMR;AAAAA,QACJ,KAAKU,OAAOJ;AAAAA,QACZ,KAAKI,OAAOJ;AAAAA,QACZ,MAAMI,OAAOC;AAAAA,MAAAA,CACb;AAAA,IAAA,CAEL;AAAA,EAAA,CAAC;AAGR;"}
+{"version":3,"file":"Video.mjs","sources":["../../src/Video.tsx"],"sourcesContent":["import {type HTMLAttributes} from 'react';\nimport {shopifyImageLoader} from './image-size.js';\nimport type {Video as VideoType} from './storefront-api-types.js';\nimport type {PartialDeep} from 'type-fest';\n\nexport interface VideoProps {\n  /** An object with fields that correspond to the Storefront API's [Video object](https://shopify.dev/api/storefront/latest/objects/video). */\n  data: PartialDeep<VideoType, {recurseIntoArrays: true}>;\n  /** An object of image size options for the video's `previewImage`. Uses `shopifyImageLoader` to generate the `poster` URL. */\n  previewImageOptions?: Parameters<typeof shopifyImageLoader>[0];\n  /** Props that will be passed to the `video` element's `source` children elements. */\n  sourceProps?: HTMLAttributes<HTMLSourceElement> & {\n    'data-testid'?: string;\n  };\n}\n\n/**\n * The `Video` component renders a `video` for the Storefront API's [Video object](https://shopify.dev/api/storefront/reference/products/video).\n */\nexport function Video(\n  props: JSX.IntrinsicElements['video'] & VideoProps\n): JSX.Element {\n  const {\n    data,\n    previewImageOptions,\n    id = data.id,\n    playsInline = true,\n    controls = true,\n    sourceProps = {},\n    ...passthroughProps\n  } = props;\n\n  const posterUrl = shopifyImageLoader({\n    src: data.previewImage?.url ?? '',\n    ...previewImageOptions,\n  });\n\n  if (!data.sources) {\n    throw new Error(`<Video/> requires a 'data.sources' array`);\n  }\n\n  return (\n    // eslint-disable-next-line jsx-a11y/media-has-caption\n    <video\n      {...passthroughProps}\n      id={id}\n      playsInline={playsInline}\n      controls={controls}\n      poster={posterUrl}\n    >\n      {data.sources.map((source) => {\n        if (!(source?.url && source?.mimeType)) {\n          throw new Error(`<Video/> needs 'source.url' and 'source.mimeType'`);\n        }\n        return (\n          <source\n            {...sourceProps}\n            key={source.url}\n            src={source.url}\n            type={source.mimeType}\n          />\n        );\n      })}\n    </video>\n  );\n}\n"],"names":[],"mappings":";;;AAmBO,SAAS,MACd,OACa;;AACP,QAAA;AAAA,IACJ;AAAA,IACA;AAAA,IACA,KAAK,KAAK;AAAA,IACV,cAAc;AAAA,IACd,WAAW;AAAA,IACX,cAAc,CAAC;AAAA,IACf,GAAG;AAAA,EACD,IAAA;AAEJ,QAAM,YAAY,mBAAmB;AAAA,IACnC,OAAK,UAAK,iBAAL,mBAAmB,QAAO;AAAA,IAC/B,GAAG;AAAA,EAAA,CACJ;AAEG,MAAA,CAAC,KAAK,SAAS;AACX,UAAA,IAAI,MAAM,0CAA0C;AAAA,EAC5D;AAEA;AAAA;AAAA,IAEE;AAAA,MAAC;AAAA,MAAA;AAAA,QACE,GAAG;AAAA,QACJ;AAAA,QACA;AAAA,QACA;AAAA,QACA,QAAQ;AAAA,QAEP,UAAK,KAAA,QAAQ,IAAI,CAAC,WAAW;AAC5B,cAAI,GAAE,iCAAQ,SAAO,iCAAQ,YAAW;AAChC,kBAAA,IAAI,MAAM,mDAAmD;AAAA,UACrE;AAEE,iBAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACE,GAAG;AAAA,cACJ,KAAK,OAAO;AAAA,cACZ,KAAK,OAAO;AAAA,cACZ,MAAM,OAAO;AAAA,YAAA;AAAA,UAAA;AAAA,QACf,CAEH;AAAA,MAAA;AAAA,IACH;AAAA;AAEJ;"}

package/dist/browser-dev/_virtual/index.mjs

@@ -1,5 +1,14 @@
-var shim = { exports: {} };
+var shimExports = {};
+var shim = {
+  get exports() {
+    return shimExports;
+  },
+  set exports(v) {
+    shimExports = v;
+  }
+};
 export {
-  shim as s
+  shim as __module,
+  shimExports as exports
 };
 //# sourceMappingURL=index.mjs.map

package/dist/browser-dev/_virtual/index.mjs.map

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

package/dist/browser-dev/_virtual/with-selector.mjs

@@ -1,5 +1,14 @@
-var withSelector = { exports: {} };
+var withSelectorExports = {};
+var withSelector = {
+  get exports() {
+    return withSelectorExports;
+  },
+  set exports(v) {
+    withSelectorExports = v;
+  }
+};
 export {
-  withSelector as w
+  withSelector as __module,
+  withSelectorExports as exports
 };
 //# sourceMappingURL=with-selector.mjs.map

package/dist/browser-dev/_virtual/with-selector.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"with-selector.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";"}
+{"version":3,"file":"with-selector.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;"}

package/dist/browser-dev/analytics-constants.mjs

@@ -0,0 +1,43 @@
+const AnalyticsEventName = {
+  PAGE_VIEW: "PAGE_VIEW",
+  ADD_TO_CART: "ADD_TO_CART"
+};
+const AnalyticsPageType = {
+  article: "article",
+  blog: "blog",
+  captcha: "captcha",
+  cart: "cart",
+  collection: "collection",
+  customersAccount: "customers/account",
+  customersActivateAccount: "customers/activate_account",
+  customersAddresses: "customers/addresses",
+  customersLogin: "customers/login",
+  customersOrder: "customers/order",
+  customersRegister: "customers/register",
+  customersResetPassword: "customers/reset_password",
+  giftCard: "gift_card",
+  home: "index",
+  listCollections: "list-collections",
+  forbidden: "403",
+  notFound: "404",
+  page: "page",
+  password: "password",
+  product: "product",
+  policy: "policy",
+  search: "search"
+};
+const ShopifySalesChannel = {
+  hydrogen: "hydrogen",
+  headless: "headless"
+};
+const ShopifyAppId = {
+  hydrogen: "6167201",
+  headless: "12875497473"
+};
+export {
+  AnalyticsEventName,
+  AnalyticsPageType,
+  ShopifyAppId,
+  ShopifySalesChannel
+};
+//# sourceMappingURL=analytics-constants.mjs.map

package/dist/browser-dev/analytics-constants.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"analytics-constants.mjs","sources":["../../src/analytics-constants.ts"],"sourcesContent":["export const AnalyticsEventName: AnalyticsEventName = {\n  PAGE_VIEW: 'PAGE_VIEW',\n  ADD_TO_CART: 'ADD_TO_CART',\n} as const;\n\nexport const AnalyticsPageType: AnalyticsPageType = {\n  article: 'article',\n  blog: 'blog',\n  captcha: 'captcha',\n  cart: 'cart',\n  collection: 'collection',\n  customersAccount: 'customers/account',\n  customersActivateAccount: 'customers/activate_account',\n  customersAddresses: 'customers/addresses',\n  customersLogin: 'customers/login',\n  customersOrder: 'customers/order',\n  customersRegister: 'customers/register',\n  customersResetPassword: 'customers/reset_password',\n  giftCard: 'gift_card',\n  home: 'index',\n  listCollections: 'list-collections',\n  forbidden: '403',\n  notFound: '404',\n  page: 'page',\n  password: 'password',\n  product: 'product',\n  policy: 'policy',\n  search: 'search',\n} as const;\n\nexport const ShopifySalesChannel: ShopifySalesChannel = {\n  hydrogen: 'hydrogen',\n  headless: 'headless',\n} as const;\n\nexport const ShopifyAppId = {\n  hydrogen: '6167201',\n  headless: '12875497473',\n} as const;\n\n/**\n * These duplicated interface declaration is so that we can generate proper documentation\n * for these public facing constants\n */\ninterface AnalyticsEventName {\n  /** Page view */\n  PAGE_VIEW: 'PAGE_VIEW';\n  /** Add to cart */\n  ADD_TO_CART: 'ADD_TO_CART';\n}\n\ninterface AnalyticsPageType {\n  article: 'article';\n  blog: 'blog';\n  captcha: 'captcha';\n  cart: 'cart';\n  collection: 'collection';\n  customersAccount: 'customers/account';\n  customersActivateAccount: 'customers/activate_account';\n  customersAddresses: 'customers/addresses';\n  customersLogin: 'customers/login';\n  customersOrder: 'customers/order';\n  customersRegister: 'customers/register';\n  customersResetPassword: 'customers/reset_password';\n  giftCard: 'gift_card';\n  home: 'index';\n  listCollections: 'list-collections';\n  forbidden: '403';\n  notFound: '404';\n  page: 'page';\n  password: 'password';\n  product: 'product';\n  policy: 'policy';\n  search: 'search';\n}\n\ninterface ShopifySalesChannel {\n  /** Shopify Hydrogen sales channel */\n  hydrogen: 'hydrogen';\n  /** Shopify Headless sales channel */\n  headless: 'headless';\n}\n"],"names":[],"mappings":"AAAO,MAAM,qBAAyC;AAAA,EACpD,WAAW;AAAA,EACX,aAAa;AACf;AAEO,MAAM,oBAAuC;AAAA,EAClD,SAAS;AAAA,EACT,MAAM;AAAA,EACN,SAAS;AAAA,EACT,MAAM;AAAA,EACN,YAAY;AAAA,EACZ,kBAAkB;AAAA,EAClB,0BAA0B;AAAA,EAC1B,oBAAoB;AAAA,EACpB,gBAAgB;AAAA,EAChB,gBAAgB;AAAA,EAChB,mBAAmB;AAAA,EACnB,wBAAwB;AAAA,EACxB,UAAU;AAAA,EACV,MAAM;AAAA,EACN,iBAAiB;AAAA,EACjB,WAAW;AAAA,EACX,UAAU;AAAA,EACV,MAAM;AAAA,EACN,UAAU;AAAA,EACV,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,QAAQ;AACV;AAEO,MAAM,sBAA2C;AAAA,EACtD,UAAU;AAAA,EACV,UAAU;AACZ;AAEO,MAAM,eAAe;AAAA,EAC1B,UAAU;AAAA,EACV,UAAU;AACZ;"}

package/dist/browser-dev/analytics-schema-custom-storefront-customer-tracking.mjs

@@ -0,0 +1,145 @@
+import { AnalyticsPageType, ShopifySalesChannel } from "./analytics-constants.mjs";
+import { schemaWrapper, addDataIf, parseGid } from "./analytics-utils.mjs";
+import { buildUUID } from "./cookies-utils.mjs";
+const SCHEMA_ID = "custom_storefront_customer_tracking/1.0";
+const PAGE_RENDERED_EVENT_NAME = "page_rendered";
+const COLLECTION_PAGE_RENDERED_EVENT_NAME = "collection_page_rendered";
+const PRODUCT_PAGE_RENDERED_EVENT_NAME = "product_page_rendered";
+const PRODUCT_ADDED_TO_CART_EVENT_NAME = "product_added_to_cart";
+const SEARCH_SUBMITTED_EVENT_NAME = "search_submitted";
+function pageView(payload) {
+  const pageViewPayload = payload;
+  const additionalPayload = {
+    canonical_url: pageViewPayload.canonicalUrl || pageViewPayload.url,
+    customer_id: pageViewPayload.customerId
+  };
+  const pageType = pageViewPayload.pageType;
+  const pageViewEvents = [];
+  pageViewEvents.push(
+    schemaWrapper(
+      SCHEMA_ID,
+      addDataIf(
+        {
+          event_name: PAGE_RENDERED_EVENT_NAME,
+          ...additionalPayload
+        },
+        formatPayload(pageViewPayload)
+      )
+    )
+  );
+  switch (pageType) {
+    case AnalyticsPageType.collection:
+      pageViewEvents.push(
+        schemaWrapper(
+          SCHEMA_ID,
+          addDataIf(
+            {
+              event_name: COLLECTION_PAGE_RENDERED_EVENT_NAME,
+              ...additionalPayload,
+              collection_name: pageViewPayload.collectionHandle
+            },
+            formatPayload(pageViewPayload)
+          )
+        )
+      );
+      break;
+    case AnalyticsPageType.product:
+      pageViewEvents.push(
+        schemaWrapper(
+          SCHEMA_ID,
+          addDataIf(
+            {
+              event_name: PRODUCT_PAGE_RENDERED_EVENT_NAME,
+              ...additionalPayload,
+              products: formatProductPayload(pageViewPayload.products),
+              total_value: pageViewPayload.totalValue
+            },
+            formatPayload(pageViewPayload)
+          )
+        )
+      );
+      break;
+    case AnalyticsPageType.search:
+      pageViewEvents.push(
+        schemaWrapper(
+          SCHEMA_ID,
+          addDataIf(
+            {
+              event_name: SEARCH_SUBMITTED_EVENT_NAME,
+              ...additionalPayload,
+              search_string: pageViewPayload.searchString
+            },
+            formatPayload(pageViewPayload)
+          )
+        )
+      );
+      break;
+  }
+  return pageViewEvents;
+}
+function addToCart(payload) {
+  const addToCartPayload = payload;
+  const cartToken = parseGid(addToCartPayload.cartId);
+  const cart_token = (cartToken == null ? void 0 : cartToken.id) ? `${cartToken.id}` : null;
+  return [
+    schemaWrapper(
+      SCHEMA_ID,
+      addDataIf(
+        {
+          event_name: PRODUCT_ADDED_TO_CART_EVENT_NAME,
+          customerId: addToCartPayload.customerId,
+          cart_token,
+          total_value: addToCartPayload.totalValue,
+          products: formatProductPayload(addToCartPayload.products)
+        },
+        formatPayload(addToCartPayload)
+      )
+    )
+  ];
+}
+function formatPayload(payload) {
+  return {
+    source: payload.shopifySalesChannel || ShopifySalesChannel.headless,
+    hydrogenSubchannelId: payload.storefrontId || "0",
+    is_persistent_cookie: payload.hasUserConsent,
+    ccpa_enforced: false,
+    gdpr_enforced: false,
+    unique_token: payload.uniqueToken,
+    event_time: Date.now(),
+    event_id: buildUUID(),
+    event_source_url: payload.url,
+    referrer: payload.referrer,
+    user_agent: payload.userAgent,
+    navigation_type: payload.navigationType,
+    navigation_api: payload.navigationApi,
+    shop_id: parseInt(parseGid(payload.shopId).id),
+    currency: payload.currency
+  };
+}
+function formatProductPayload(products) {
+  return products ? products.map((p) => {
+    const product = addDataIf(
+      {
+        variant_gid: p.variantGid,
+        category: p.category,
+        sku: p.sku,
+        product_id: parseInt(parseGid(p.productGid).id),
+        variant_id: parseInt(parseGid(p.variantGid).id)
+      },
+      {
+        product_gid: p.productGid,
+        name: p.name,
+        variant: p.variantName || "",
+        brand: p.brand,
+        price: p.price,
+        quantity: Number(p.quantity || 0)
+      }
+    );
+    return JSON.stringify(product);
+  }) : [];
+}
+export {
+  addToCart,
+  pageView
+};
+//# sourceMappingURL=analytics-schema-custom-storefront-customer-tracking.mjs.map

package/dist/browser-dev/analytics-schema-custom-storefront-customer-tracking.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"analytics-schema-custom-storefront-customer-tracking.mjs","sources":["../../src/analytics-schema-custom-storefront-customer-tracking.ts"],"sourcesContent":["import {\n  ShopifyAnalyticsPayload,\n  ShopifyPageViewPayload,\n  ShopifyAddToCartPayload,\n  ShopifyMonorailPayload,\n  ShopifyAnalyticsProduct,\n  ShopifyMonorailEvent,\n} from './analytics-types.js';\nimport {AnalyticsPageType, ShopifySalesChannel} from './analytics-constants.js';\nimport {addDataIf, schemaWrapper, parseGid} from './analytics-utils.js';\nimport {buildUUID} from './cookies-utils.js';\n\nconst SCHEMA_ID = 'custom_storefront_customer_tracking/1.0';\nconst PAGE_RENDERED_EVENT_NAME = 'page_rendered';\nconst COLLECTION_PAGE_RENDERED_EVENT_NAME = 'collection_page_rendered';\nconst PRODUCT_PAGE_RENDERED_EVENT_NAME = 'product_page_rendered';\nconst PRODUCT_ADDED_TO_CART_EVENT_NAME = 'product_added_to_cart';\nconst SEARCH_SUBMITTED_EVENT_NAME = 'search_submitted';\n\nexport function pageView(\n  payload: ShopifyPageViewPayload\n): ShopifyMonorailEvent[] {\n  const pageViewPayload = payload;\n  const additionalPayload = {\n    canonical_url: pageViewPayload.canonicalUrl || pageViewPayload.url,\n    customer_id: pageViewPayload.customerId,\n  };\n  const pageType = pageViewPayload.pageType;\n  const pageViewEvents = [];\n\n  pageViewEvents.push(\n    schemaWrapper(\n      SCHEMA_ID,\n      addDataIf(\n        {\n          event_name: PAGE_RENDERED_EVENT_NAME,\n          ...additionalPayload,\n        },\n        formatPayload(pageViewPayload)\n      )\n    )\n  );\n\n  switch (pageType) {\n    case AnalyticsPageType.collection:\n      pageViewEvents.push(\n        schemaWrapper(\n          SCHEMA_ID,\n          addDataIf(\n            {\n              event_name: COLLECTION_PAGE_RENDERED_EVENT_NAME,\n              ...additionalPayload,\n              collection_name: pageViewPayload.collectionHandle,\n            },\n            formatPayload(pageViewPayload)\n          )\n        )\n      );\n      break;\n    case AnalyticsPageType.product:\n      pageViewEvents.push(\n        schemaWrapper(\n          SCHEMA_ID,\n          addDataIf(\n            {\n              event_name: PRODUCT_PAGE_RENDERED_EVENT_NAME,\n              ...additionalPayload,\n              products: formatProductPayload(pageViewPayload.products),\n              total_value: pageViewPayload.totalValue,\n            },\n            formatPayload(pageViewPayload)\n          )\n        )\n      );\n      break;\n    case AnalyticsPageType.search:\n      pageViewEvents.push(\n        schemaWrapper(\n          SCHEMA_ID,\n          addDataIf(\n            {\n              event_name: SEARCH_SUBMITTED_EVENT_NAME,\n              ...additionalPayload,\n              search_string: pageViewPayload.searchString,\n            },\n            formatPayload(pageViewPayload)\n          )\n        )\n      );\n      break;\n  }\n\n  return pageViewEvents;\n}\n\nexport function addToCart(\n  payload: ShopifyAddToCartPayload\n): ShopifyMonorailEvent[] {\n  const addToCartPayload = payload;\n  const cartToken = parseGid(addToCartPayload.cartId);\n  const cart_token = cartToken?.id ? `${cartToken.id}` : null;\n  return [\n    schemaWrapper(\n      SCHEMA_ID,\n      addDataIf(\n        {\n          event_name: PRODUCT_ADDED_TO_CART_EVENT_NAME,\n          customerId: addToCartPayload.customerId,\n          cart_token,\n          total_value: addToCartPayload.totalValue,\n          products: formatProductPayload(addToCartPayload.products),\n        },\n        formatPayload(addToCartPayload)\n      )\n    ),\n  ];\n}\n\nfunction formatPayload(\n  payload: ShopifyAnalyticsPayload\n): ShopifyMonorailPayload {\n  return {\n    source: payload.shopifySalesChannel || ShopifySalesChannel.headless,\n    hydrogenSubchannelId: payload.storefrontId || '0',\n\n    is_persistent_cookie: payload.hasUserConsent,\n    ccpa_enforced: false,\n    gdpr_enforced: false,\n    unique_token: payload.uniqueToken,\n    event_time: Date.now(),\n    event_id: buildUUID(),\n\n    event_source_url: payload.url,\n    referrer: payload.referrer,\n    user_agent: payload.userAgent,\n    navigation_type: payload.navigationType,\n    navigation_api: payload.navigationApi,\n\n    shop_id: parseInt(parseGid(payload.shopId).id),\n    currency: payload.currency,\n  };\n}\n\nfunction formatProductPayload(products?: ShopifyAnalyticsProduct[]): string[] {\n  return products\n    ? products.map((p: ShopifyAnalyticsProduct) => {\n        const product = addDataIf(\n          {\n            variant_gid: p.variantGid,\n            category: p.category,\n            sku: p.sku,\n            product_id: parseInt(parseGid(p.productGid).id),\n            variant_id: parseInt(parseGid(p.variantGid).id),\n          },\n          {\n            product_gid: p.productGid,\n            name: p.name,\n            variant: p.variantName || '',\n            brand: p.brand,\n            price: p.price,\n            quantity: Number(p.quantity || 0),\n          }\n        );\n        return JSON.stringify(product);\n      })\n    : [];\n}\n"],"names":[],"mappings":"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"}

package/dist/browser-dev/analytics-schema-trekkie-storefront-page-view.mjs

@@ -0,0 +1,58 @@
+import { ShopifyAppId } from "./analytics-constants.mjs";
+import { parseGid, schemaWrapper, addDataIf } from "./analytics-utils.mjs";
+import { buildUUID } from "./cookies-utils.mjs";
+const SCHEMA_ID = "trekkie_storefront_page_view/1.4";
+const OXYGEN_DOMAIN = "myshopify.dev";
+function pageView(payload) {
+  const pageViewPayload = payload;
+  const { id, resource } = parseGid(pageViewPayload.resourceId);
+  const resourceType = resource ? resource.toLowerCase() : void 0;
+  return [
+    schemaWrapper(
+      SCHEMA_ID,
+      addDataIf(
+        {
+          pageType: pageViewPayload.pageType,
+          customerId: pageViewPayload.customerId,
+          resourceType,
+          resourceId: parseInt(id)
+        },
+        formatPayload(pageViewPayload)
+      )
+    )
+  ];
+}
+function formatPayload(payload) {
+  return {
+    appClientId: payload.shopifySalesChannel ? ShopifyAppId[payload.shopifySalesChannel] : ShopifyAppId.headless,
+    isMerchantRequest: isMerchantRequest(payload.url),
+    hydrogenSubchannelId: payload.storefrontId || "0",
+    isPersistentCookie: payload.hasUserConsent,
+    uniqToken: payload.uniqueToken,
+    visitToken: payload.visitToken,
+    microSessionId: buildUUID(),
+    microSessionCount: 1,
+    url: payload.url,
+    path: payload.path,
+    search: payload.search,
+    referrer: payload.referrer,
+    title: payload.title,
+    shopId: parseInt(parseGid(payload.shopId).id),
+    currency: payload.currency,
+    contentLanguage: payload.acceptedLanguage || "en"
+  };
+}
+function isMerchantRequest(url) {
+  if (typeof url !== "string") {
+    return false;
+  }
+  const hostname = new URL(url).hostname;
+  if (hostname.indexOf(OXYGEN_DOMAIN) !== -1 || hostname === "localhost") {
+    return true;
+  }
+  return false;
+}
+export {
+  pageView
+};
+//# sourceMappingURL=analytics-schema-trekkie-storefront-page-view.mjs.map

package/dist/browser-dev/analytics-schema-trekkie-storefront-page-view.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"analytics-schema-trekkie-storefront-page-view.mjs","sources":["../../src/analytics-schema-trekkie-storefront-page-view.ts"],"sourcesContent":["import {\n  ShopifyPageViewPayload,\n  ShopifyMonorailPayload,\n  ShopifyMonorailEvent,\n} from './analytics-types.js';\nimport {ShopifyAppId} from './analytics-constants.js';\nimport {addDataIf, schemaWrapper, parseGid} from './analytics-utils.js';\nimport {buildUUID} from './cookies-utils.js';\n\nconst SCHEMA_ID = 'trekkie_storefront_page_view/1.4';\nconst OXYGEN_DOMAIN = 'myshopify.dev';\n\nexport function pageView(\n  payload: ShopifyPageViewPayload\n): ShopifyMonorailEvent[] {\n  const pageViewPayload = payload;\n  const {id, resource} = parseGid(pageViewPayload.resourceId);\n  const resourceType = resource ? resource.toLowerCase() : undefined;\n  return [\n    schemaWrapper(\n      SCHEMA_ID,\n      addDataIf(\n        {\n          pageType: pageViewPayload.pageType,\n          customerId: pageViewPayload.customerId,\n          resourceType,\n          resourceId: parseInt(id),\n        },\n        formatPayload(pageViewPayload)\n      )\n    ),\n  ];\n}\n\nfunction formatPayload(\n  payload: ShopifyPageViewPayload\n): ShopifyMonorailPayload {\n  return {\n    appClientId: payload.shopifySalesChannel\n      ? ShopifyAppId[payload.shopifySalesChannel]\n      : ShopifyAppId.headless,\n    isMerchantRequest: isMerchantRequest(payload.url),\n    hydrogenSubchannelId: payload.storefrontId || '0',\n\n    isPersistentCookie: payload.hasUserConsent,\n    uniqToken: payload.uniqueToken,\n    visitToken: payload.visitToken,\n    microSessionId: buildUUID(),\n    microSessionCount: 1,\n\n    url: payload.url,\n    path: payload.path,\n    search: payload.search,\n    referrer: payload.referrer,\n    title: payload.title,\n\n    shopId: parseInt(parseGid(payload.shopId).id),\n    currency: payload.currency,\n    contentLanguage: payload.acceptedLanguage || 'en',\n  };\n}\n\nfunction isMerchantRequest(url: string): boolean {\n  if (typeof url !== 'string') {\n    return false;\n  }\n  const hostname = new URL(url).hostname;\n  if (hostname.indexOf(OXYGEN_DOMAIN) !== -1 || hostname === 'localhost') {\n    return true;\n  }\n  return false;\n}\n"],"names":[],"mappings":";;;AASA,MAAM,YAAY;AAClB,MAAM,gBAAgB;AAEf,SAAS,SACd,SACwB;AACxB,QAAM,kBAAkB;AACxB,QAAM,EAAC,IAAI,SAAA,IAAY,SAAS,gBAAgB,UAAU;AAC1D,QAAM,eAAe,WAAW,SAAS,YAAgB,IAAA;AAClD,SAAA;AAAA,IACL;AAAA,MACE;AAAA,MACA;AAAA,QACE;AAAA,UACE,UAAU,gBAAgB;AAAA,UAC1B,YAAY,gBAAgB;AAAA,UAC5B;AAAA,UACA,YAAY,SAAS,EAAE;AAAA,QACzB;AAAA,QACA,cAAc,eAAe;AAAA,MAC/B;AAAA,IACF;AAAA,EAAA;AAEJ;AAEA,SAAS,cACP,SACwB;AACjB,SAAA;AAAA,IACL,aAAa,QAAQ,sBACjB,aAAa,QAAQ,mBAAmB,IACxC,aAAa;AAAA,IACjB,mBAAmB,kBAAkB,QAAQ,GAAG;AAAA,IAChD,sBAAsB,QAAQ,gBAAgB;AAAA,IAE9C,oBAAoB,QAAQ;AAAA,IAC5B,WAAW,QAAQ;AAAA,IACnB,YAAY,QAAQ;AAAA,IACpB,gBAAgB,UAAU;AAAA,IAC1B,mBAAmB;AAAA,IAEnB,KAAK,QAAQ;AAAA,IACb,MAAM,QAAQ;AAAA,IACd,QAAQ,QAAQ;AAAA,IAChB,UAAU,QAAQ;AAAA,IAClB,OAAO,QAAQ;AAAA,IAEf,QAAQ,SAAS,SAAS,QAAQ,MAAM,EAAE,EAAE;AAAA,IAC5C,UAAU,QAAQ;AAAA,IAClB,iBAAiB,QAAQ,oBAAoB;AAAA,EAAA;AAEjD;AAEA,SAAS,kBAAkB,KAAsB;AAC3C,MAAA,OAAO,QAAQ,UAAU;AACpB,WAAA;AAAA,EACT;AACA,QAAM,WAAW,IAAI,IAAI,GAAG,EAAE;AAC9B,MAAI,SAAS,QAAQ,aAAa,MAAM,MAAM,aAAa,aAAa;AAC/D,WAAA;AAAA,EACT;AACO,SAAA;AACT;"}

package/dist/browser-dev/analytics-utils.mjs

@@ -0,0 +1,49 @@
+function schemaWrapper(schemaId, payload) {
+  return {
+    schema_id: schemaId,
+    payload,
+    metadata: {
+      event_created_at_ms: Date.now()
+    }
+  };
+}
+function parseGid(gid) {
+  const defaultReturn = { id: "", resource: null };
+  if (typeof gid !== "string") {
+    return defaultReturn;
+  }
+  const matches = gid.match(/^gid:\/\/shopify\/(\w+)\/([a-z0-9]+)/);
+  if (!matches || matches.length === 1) {
+    return defaultReturn;
+  }
+  const id = matches[2] ?? null;
+  const resource = matches[1] ?? null;
+  return { id, resource };
+}
+function addDataIf(keyValuePairs, formattedData) {
+  if (typeof keyValuePairs !== "object") {
+    return {};
+  }
+  Object.entries(keyValuePairs).forEach(([key, value]) => {
+    if (value) {
+      formattedData[key] = value;
+    }
+  });
+  return formattedData;
+}
+function errorIfServer(fnName) {
+  if (typeof document === "undefined") {
+    console.error(
+      `${fnName} should only be used within the useEffect callback or event handlers`
+    );
+    return true;
+  }
+  return false;
+}
+export {
+  addDataIf,
+  errorIfServer,
+  parseGid,
+  schemaWrapper
+};
+//# sourceMappingURL=analytics-utils.mjs.map

package/dist/browser-dev/analytics-utils.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"analytics-utils.mjs","sources":["../../src/analytics-utils.ts"],"sourcesContent":["import type {\n  ShopifyMonorailPayload,\n  ShopifyMonorailEvent,\n  ShopifyGId,\n} from './analytics-types.js';\n\n/**\n * Builds a Shopify Monorail event from a Shopify Monorail payload and a schema ID.\n * @param payload - The Monorail payload\n * @param schemaId - The schema ID to use\n * @returns The formatted payload\n **/\nexport function schemaWrapper(\n  schemaId: string,\n  payload: ShopifyMonorailPayload\n): ShopifyMonorailEvent {\n  return {\n    schema_id: schemaId,\n    payload,\n    metadata: {\n      event_created_at_ms: Date.now(),\n    },\n  };\n}\n\n/**\n * Parses global id (gid) and returns the resource type and id.\n * @see https://shopify.dev/api/usage/gids\n * @param gid - A shopify GID (string)\n *\n * @example\n * ```ts\n * const {id, resource} = parseGid('gid://shopify/Order/123')\n * // => id = \"123\", resource = 'Order'\n *\n *  * const {id, resource} = parseGid('gid://shopify/Cart/abc123')\n * // => id = \"abc123\", resource = 'Cart'\n * ```\n **/\nexport function parseGid(gid: string | undefined): ShopifyGId {\n  const defaultReturn = {id: '', resource: null};\n\n  if (typeof gid !== 'string') {\n    return defaultReturn;\n  }\n\n  // TODO: add support for parsing query parameters on complex gids\n  // Reference: https://shopify.dev/api/usage/gids\n  const matches = gid.match(/^gid:\\/\\/shopify\\/(\\w+)\\/([a-z0-9]+)/);\n\n  if (!matches || matches.length === 1) {\n    return defaultReturn;\n  }\n  const id = matches[2] ?? null;\n  const resource = matches[1] ?? null;\n\n  return {id, resource};\n}\n\n/**\n * Filters properties from an object and returns a new object with only the properties that have a truthy value.\n * @param keyValuePairs - An object of key-value pairs\n * @param formattedData - An object which will hold the truthy values\n * @returns The formatted object\n **/\nexport function addDataIf(\n  keyValuePairs: ShopifyMonorailPayload,\n  formattedData: ShopifyMonorailPayload\n): ShopifyMonorailPayload {\n  if (typeof keyValuePairs !== 'object') {\n    return {};\n  }\n  Object.entries(keyValuePairs).forEach(([key, value]) => {\n    if (value) {\n      formattedData[key] = value;\n    }\n  });\n  return formattedData;\n}\n\n/**\n * Utility that errors if a function is called on the server.\n * @param fnName - The name of the function\n * @returns A boolean\n **/\nexport function errorIfServer(fnName: string): boolean {\n  if (typeof document === 'undefined') {\n    console.error(\n      `${fnName} should only be used within the useEffect callback or event handlers`\n    );\n    return true;\n  }\n  return false;\n}\n"],"names":[],"mappings":"AAYgB,SAAA,cACd,UACA,SACsB;AACf,SAAA;AAAA,IACL,WAAW;AAAA,IACX;AAAA,IACA,UAAU;AAAA,MACR,qBAAqB,KAAK,IAAI;AAAA,IAChC;AAAA,EAAA;AAEJ;AAgBO,SAAS,SAAS,KAAqC;AAC5D,QAAM,gBAAgB,EAAC,IAAI,IAAI,UAAU,KAAI;AAEzC,MAAA,OAAO,QAAQ,UAAU;AACpB,WAAA;AAAA,EACT;AAIM,QAAA,UAAU,IAAI,MAAM,sCAAsC;AAEhE,MAAI,CAAC,WAAW,QAAQ,WAAW,GAAG;AAC7B,WAAA;AAAA,EACT;AACM,QAAA,KAAK,QAAQ,CAAC,KAAK;AACnB,QAAA,WAAW,QAAQ,CAAC,KAAK;AAExB,SAAA,EAAC,IAAI;AACd;AAQgB,SAAA,UACd,eACA,eACwB;AACpB,MAAA,OAAO,kBAAkB,UAAU;AACrC,WAAO;EACT;AACO,SAAA,QAAQ,aAAa,EAAE,QAAQ,CAAC,CAAC,KAAK,KAAK,MAAM;AACtD,QAAI,OAAO;AACT,oBAAc,GAAG,IAAI;AAAA,IACvB;AAAA,EAAA,CACD;AACM,SAAA;AACT;AAOO,SAAS,cAAc,QAAyB;AACjD,MAAA,OAAO,aAAa,aAAa;AAC3B,YAAA;AAAA,MACN,GAAG;AAAA,IAAA;AAEE,WAAA;AAAA,EACT;AACO,SAAA;AACT;"}