@shopify/hydrogen 0.0.0-experimental-20220526194818

package/dist/esnext/utilities/matchPath.js

@@ -0,0 +1,54 @@
+import { pathToRegexp } from 'path-to-regexp';
+// Modified from React Router v5
+// https://github.com/remix-run/react-router/blob/v5/packages/react-router/modules/matchPath.js
+const cache = {};
+const cacheLimit = 10000;
+let cacheCount = 0;
+function compilePath(path, options) {
+    const cacheKey = `${options.end}${options.strict}${options.sensitive}`;
+    const pathCache = cache[cacheKey] || (cache[cacheKey] = {});
+    if (pathCache[path])
+        return pathCache[path];
+    const keys = [];
+    const regexp = pathToRegexp(path, keys, options);
+    const result = { regexp, keys };
+    if (cacheCount < cacheLimit) {
+        pathCache[path] = result;
+        cacheCount++;
+    }
+    return result;
+}
+/**
+ * Public API for matching a URL pathname to a path.
+ */
+export function matchPath(pathname, options = {}) {
+    const { path, exact = false, strict = false, sensitive = false } = options;
+    const paths = [].concat(path);
+    return paths.reduce((matched, path) => {
+        if (!path && path !== '')
+            return null;
+        if (matched)
+            return matched;
+        const { regexp, keys } = compilePath(path, {
+            end: exact,
+            strict,
+            sensitive,
+        });
+        const match = regexp.exec(pathname);
+        if (!match)
+            return null;
+        const [url, ...values] = match;
+        const isExact = pathname === url;
+        if (exact && !isExact)
+            return null;
+        return {
+            path,
+            url: path === '/' && url === '' ? '/' : url,
+            isExact,
+            params: keys.reduce((memo, key, index) => {
+                memo[key.name] = values[index];
+                return memo;
+            }, {}),
+        };
+    }, null);
+}

package/dist/esnext/utilities/measurement.d.ts

@@ -0,0 +1,3 @@
+import { Measurement } from '../types';
+export declare function getMeasurementAsString(measurement: Measurement, locale?: string, options?: Intl.NumberFormatOptions): string;
+export declare function getMeasurementAsParts(measurement: Measurement, locale?: string, options?: Intl.NumberFormatOptions): Intl.NumberFormatPart[];

package/dist/esnext/utilities/measurement.js

@@ -0,0 +1,98 @@
+const UNIT_MAPPING = {
+    // Dimension
+    mm: 'millimeter',
+    cm: 'centimeter',
+    m: 'meter',
+    in: 'inch',
+    ft: 'foot',
+    yd: 'yard',
+    // Volume
+    ml: 'milliliter',
+    l: 'liter',
+    us_fl_oz: 'fluid-ounce',
+    us_gal: 'gallon',
+    // Weight
+    kg: 'kilogram',
+    g: 'gram',
+    lb: 'pound',
+    oz: 'ounce',
+};
+export function getMeasurementAsString(measurement, locale = 'en-us', options = {}) {
+    let measure = {
+        value: measurement.value,
+        unit: UNIT_MAPPING[measurement.unit],
+    };
+    if (measure.unit == null) {
+        measure = convertToSupportedUnit(measurement.value, measurement.unit);
+    }
+    return new Intl.NumberFormat(locale, {
+        ...options,
+        unit: measure.unit,
+        style: 'unit',
+    }).format(measure.value);
+}
+export function getMeasurementAsParts(measurement, locale = 'en-us', options = {}) {
+    let measure = {
+        value: measurement.value,
+        unit: UNIT_MAPPING[measurement.unit],
+    };
+    if (measure.unit == null) {
+        measure = convertToSupportedUnit(measurement.value, measurement.unit);
+    }
+    return new Intl.NumberFormat(locale, {
+        ...options,
+        unit: measure.unit,
+        style: 'unit',
+    }).formatToParts(measure.value);
+}
+function convertToSupportedUnit(value, unit) {
+    switch (unit) {
+        case 'cl':
+            return {
+                value: value / 1000,
+                unit: 'liter',
+            };
+        case 'm3':
+            return {
+                value: value * 1000,
+                unit: 'liter',
+            };
+        case 'us_pt':
+            return {
+                value: value * 0.125,
+                unit: 'gallon',
+            };
+        case 'us_qt':
+            return {
+                value: value * 0.5,
+                unit: 'gallon',
+            };
+        case 'us_oz':
+            return {
+                value: value / 128,
+                unit: 'gallon',
+            };
+        case 'imp_pt':
+            return {
+                value: value / 6.661,
+                unit: 'gallon',
+            };
+        case 'imp_qt':
+            return {
+                value: value / 3.331,
+                unit: 'gallon',
+            };
+        case 'imp_gal':
+            return {
+                value: value / 1.201,
+                unit: 'gallon',
+            };
+        case 'imp_fl_oz':
+            return {
+                value: value * 0.96076,
+                unit: 'fluid-ounce',
+            };
+        default:
+            throw new Error(`Unit not supported: ${unit}`);
+    }
+}

package/dist/esnext/utilities/object.d.ts

@@ -0,0 +1,5 @@
+declare type Descriptor = Parameters<typeof Object.defineProperty>[2];
+export declare function createObject<T = object>(properties: T, { prototype, ...descriptor }?: {
+    prototype?: any;
+} & Exclude<Descriptor, 'value'>): T;
+export {};

package/dist/esnext/utilities/object.js

@@ -0,0 +1,7 @@
+// Create objects with null prototypes for faster access
+export function createObject(properties, { prototype = null, ...descriptor } = {}) {
+    return Object.create(prototype, Object.entries(properties).reduce((acc, [key, value]) => {
+        acc[key] = { enumerable: true, ...descriptor, value };
+        return acc;
+    }, {}));
+}

package/dist/esnext/utilities/parse.d.ts

@@ -0,0 +1 @@
+export declare function parseJSON(json: any): any;

package/dist/esnext/utilities/parse.js

@@ -0,0 +1,9 @@
+export function parseJSON(json) {
+    if (String(json).includes('__proto__'))
+        return JSON.parse(json, noproto);
+    return JSON.parse(json);
+}
+function noproto(k, v) {
+    if (k !== '__proto__')
+        return v;
+}

package/dist/esnext/utilities/parseMetafieldValue/index.d.ts

@@ -0,0 +1 @@
+export { parseMetafieldValue } from './parseMetafieldValue';

package/dist/esnext/utilities/parseMetafieldValue/index.js

@@ -0,0 +1 @@
+export { parseMetafieldValue } from './parseMetafieldValue';

package/dist/esnext/utilities/parseMetafieldValue/parseMetafieldValue.d.ts

@@ -0,0 +1,6 @@
+import type { Metafield } from '../../storefront-api-types';
+import type { PartialDeep } from 'type-fest';
+/**
+ * The `parseMetafieldValue` function parses a [Metafield](https://shopify.dev/api/storefront/reference/common-objects/metafield)'s `value` from a string into a sensible type corresponding to the [Metafield](https://shopify.dev/api/storefront/reference/common-objects/metafield)'s `type`.
+ */
+export declare function parseMetafieldValue(metafield: PartialDeep<Metafield>): any;

package/dist/esnext/utilities/parseMetafieldValue/parseMetafieldValue.js

@@ -0,0 +1,36 @@
+import { parseJSON } from '../parse';
+/**
+ * The `parseMetafieldValue` function parses a [Metafield](https://shopify.dev/api/storefront/reference/common-objects/metafield)'s `value` from a string into a sensible type corresponding to the [Metafield](https://shopify.dev/api/storefront/reference/common-objects/metafield)'s `type`.
+ */
+export function parseMetafieldValue(metafield) {
+    if (metafield.value == null) {
+        return metafield.value;
+    }
+    switch (metafield.type) {
+        case 'boolean':
+            return metafield.value == 'true';
+        case 'number_integer':
+            return parseInt(metafield.value);
+        case 'number_decimal':
+            return parseFloat(metafield.value);
+        case 'date':
+        case 'date_time':
+            return new Date(metafield.value);
+        case 'json':
+        case 'weight':
+        case 'dimension':
+        case 'volume':
+        case 'rating':
+            return parseJSON(metafield.value);
+        case 'color':
+        case 'single_line_text_field':
+        case 'multi_line_text_field':
+        case 'product_reference':
+        case 'page_reference':
+        case 'variant_reference':
+        case 'file_reference':
+        case 'url':
+        default:
+            return metafield.value;
+    }
+}

package/dist/esnext/utilities/storefrontApi.d.ts

@@ -0,0 +1,4 @@
+export declare function getStorefrontApiRequestHeaders({ buyerIp, storefrontToken, }: {
+    buyerIp?: string | null;
+    storefrontToken: string;
+}): Record<string, any>;

package/dist/esnext/utilities/storefrontApi.js

@@ -0,0 +1,22 @@
+/* global Oxygen */
+import { OXYGEN_SECRET_TOKEN_ENVIRONMENT_VARIABLE, STOREFRONT_API_SECRET_TOKEN_HEADER, STOREFRONT_API_PUBLIC_TOKEN_HEADER, STOREFRONT_API_BUYER_IP_HEADER, } from '../constants';
+export function getStorefrontApiRequestHeaders({ buyerIp, storefrontToken, }) {
+    var _a;
+    const headers = {};
+    const secretToken = typeof Oxygen !== 'undefined'
+        ? (_a = Oxygen === null || Oxygen === void 0 ? void 0 : Oxygen.env) === null || _a === void 0 ? void 0 : _a[OXYGEN_SECRET_TOKEN_ENVIRONMENT_VARIABLE]
+        : null;
+    /**
+     * Only pass one type of storefront token at a time.
+     */
+    if (secretToken) {
+        headers[STOREFRONT_API_SECRET_TOKEN_HEADER] = secretToken;
+    }
+    else {
+        headers[STOREFRONT_API_PUBLIC_TOKEN_HEADER] = storefrontToken;
+    }
+    if (buyerIp) {
+        headers[STOREFRONT_API_BUYER_IP_HEADER] = buyerIp;
+    }
+    return headers;
+}

package/dist/esnext/utilities/suspense.d.ts

@@ -0,0 +1,12 @@
+import { QueryKey } from '../types';
+/**
+ * Wrap the fetch promise in a way that React Suspense understands.
+ * Essentially, keep throwing something until you have legit data.
+ */
+export declare function wrapPromise<T>(promise: Promise<T>): {
+    read: () => T;
+};
+declare type Await<T> = T extends Promise<infer V> ? V : never;
+export declare const suspendFunction: <Fn extends () => Promise<unknown>>(key: QueryKey, fn: Fn) => Await<ReturnType<Fn>>;
+export declare const preloadFunction: (key: QueryKey, fn: () => Promise<unknown>) => unknown;
+export {};

package/dist/esnext/utilities/suspense.js

@@ -0,0 +1,58 @@
+import { hashKey } from './hash';
+/**
+ * Wrap the fetch promise in a way that React Suspense understands.
+ * Essentially, keep throwing something until you have legit data.
+ */
+export function wrapPromise(promise) {
+    let status = 'pending';
+    let response;
+    const suspender = promise.then((res) => {
+        status = 'success';
+        response = res;
+    }, (err) => {
+        status = 'error';
+        response = err;
+    });
+    const read = () => {
+        switch (status) {
+            case 'pending':
+                throw suspender;
+            case 'error':
+                throw response;
+            default:
+                return response;
+        }
+    };
+    return { read };
+}
+const browserCache = {};
+/**
+ * Perform an async function in a synchronous way for Suspense support.
+ * To be used only in the client.
+ * Inspired by https://github.com/pmndrs/suspend-react
+ */
+function query(key, fn, preload = false) {
+    const stringKey = hashKey(key);
+    if (browserCache[stringKey]) {
+        const entry = browserCache[stringKey];
+        if (preload)
+            return undefined;
+        if (entry.error)
+            throw entry.error;
+        if (entry.response)
+            return entry.response;
+        if (!preload)
+            throw entry.promise;
+    }
+    const entry = {
+        promise: fn()
+            .then((response) => (entry.response = response))
+            .catch((error) => (entry.error = error)),
+    };
+    browserCache[stringKey] = entry;
+    if (!preload)
+        throw entry.promise;
+    return undefined;
+}
+export const suspendFunction = (key, fn) => query(key, fn);
+export const preloadFunction = (key, fn) => query(key, fn, true);

package/dist/esnext/utilities/template.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Strip out script `src` values from <script> tags in a given HTML template.
+ * Returns two lists of scripts, split based on whether they are `type="module"`.
+ */
+export declare function stripScriptsFromTemplate(template: string): {
+    noScriptTemplate: string;
+    bootstrapScripts: string[];
+    bootstrapModules: string[];
+};

package/dist/esnext/utilities/template.js

@@ -0,0 +1,23 @@
+/**
+ * Strip out script `src` values from <script> tags in a given HTML template.
+ * Returns two lists of scripts, split based on whether they are `type="module"`.
+ */
+export function stripScriptsFromTemplate(template) {
+    var _a;
+    const bootstrapScripts = [];
+    const bootstrapModules = [];
+    const scripts = template.matchAll(/<script\n*?.+?src="(?<script>([^"]+?))"\n*.*?><\/script>/g);
+    for (const match of scripts) {
+        const scriptName = (_a = match.groups) === null || _a === void 0 ? void 0 : _a.script;
+        if (!scriptName)
+            continue;
+        if (match[0].includes(`type="module"`)) {
+            bootstrapModules.push(scriptName);
+        }
+        else {
+            bootstrapScripts.push(scriptName);
+        }
+        template = template.replace(match[0], '');
+    }
+    return { noScriptTemplate: template, bootstrapScripts, bootstrapModules };
+}

package/dist/esnext/utilities/timing.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Not all environments have access to Performance.now(). This is to prevent
+ * timing side channel attacks.
+ *
+ * See: https://community.cloudflare.com/t/cloudflare-workers-how-do-i-measure-execution-time-of-my-method/69672
+ */
+export declare function getTime(): number;

package/dist/esnext/utilities/timing.js

@@ -0,0 +1,14 @@
+/**
+ * Not all environments have access to Performance.now(). This is to prevent
+ * timing side channel attacks.
+ *
+ * See: https://community.cloudflare.com/t/cloudflare-workers-how-do-i-measure-execution-time-of-my-method/69672
+ */
+export function getTime() {
+    if (typeof performance !== 'undefined' && performance.now) {
+        return performance.now();
+    }
+    else {
+        return Date.now();
+    }
+}

package/dist/esnext/utilities/video_parameters.d.ts

@@ -0,0 +1,47 @@
+export interface YouTube {
+    autoplay?: 0 | 1;
+    cc_lang_pref?: string;
+    cc_load_policy?: 1;
+    color?: 'red' | 'white';
+    controls?: 0 | 1;
+    disablekb?: 0 | 1;
+    enablejsapi?: 0 | 1;
+    end?: number;
+    fs?: 0 | 1;
+    hl?: string;
+    iv_load_policy?: 1 | 3;
+    list?: string;
+    list_type?: 'playlist' | 'user_uploads';
+    loop?: 0 | 1;
+    modest_branding?: 1;
+    origin?: string;
+    playlist?: string;
+    plays_inline?: 0 | 1;
+    rel?: 0 | 1;
+    start?: number;
+    widget_referrer?: string;
+}
+declare type VimeoBoolean = 0 | 1 | boolean;
+export interface Vimeo {
+    autopause?: VimeoBoolean;
+    autoplay?: VimeoBoolean;
+    background?: VimeoBoolean;
+    byline?: VimeoBoolean;
+    color?: string;
+    controls?: VimeoBoolean;
+    dnt?: VimeoBoolean;
+    loop?: VimeoBoolean;
+    muted?: VimeoBoolean;
+    pip?: VimeoBoolean;
+    playsinline?: VimeoBoolean;
+    portrait?: VimeoBoolean;
+    quality?: '240p' | '360p' | '540p' | '720p' | '1080p' | '2k' | '4k';
+    speed?: VimeoBoolean;
+    '#t'?: string;
+    texttrack?: string;
+    title?: VimeoBoolean;
+    transparent?: VimeoBoolean;
+}
+export declare function addParametersToEmbeddedVideoUrl(url: string, parameters?: YouTube | Vimeo): string;
+export declare function useEmbeddedVideoUrl(url: string, parameters?: YouTube | Vimeo): string;
+export {};

package/dist/esnext/utilities/video_parameters.js

@@ -0,0 +1,22 @@
+import { useMemo } from 'react';
+export function addParametersToEmbeddedVideoUrl(url, parameters) {
+    if (parameters == null) {
+        return url;
+    }
+    const params = Object.keys(parameters).reduce((accumulator, param) => {
+        const value = parameters[param];
+        if (value == null) {
+            return accumulator;
+        }
+        return accumulator + `&${param}=${value}`;
+    }, '');
+    return `${url}?${params}`;
+}
+export function useEmbeddedVideoUrl(url, parameters) {
+    return useMemo(() => {
+        if (!parameters) {
+            return url;
+        }
+        return addParametersToEmbeddedVideoUrl(url, parameters);
+    }, [url, parameters]);
+}

package/dist/esnext/utilities/web-api-polyfill.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/esnext/utilities/web-api-polyfill.js

@@ -0,0 +1,19 @@
+import fetch, { Request, Response, Headers } from 'node-fetch';
+import AbortController from 'abort-controller';
+import { ReadableStream, WritableStream, TransformStream, } from 'web-streams-polyfill/ponyfill';
+if (!globalThis.fetch) {
+    Object.assign(globalThis, {
+        fetch,
+        Request,
+        Response,
+        Headers,
+        AbortController,
+    });
+}
+if (!globalThis.ReadableStream) {
+    Object.assign(globalThis, {
+        ReadableStream,
+        WritableStream,
+        TransformStream,
+    });
+}

package/dist/esnext/version.d.ts

@@ -0,0 +1 @@
+export declare const LIB_VERSION = "0.21.0";

package/dist/esnext/version.js

@@ -0,0 +1 @@
+export const LIB_VERSION = '0.21.0';

package/dist/node/components/Image/Image.d.ts

@@ -0,0 +1,84 @@
+import * as React from 'react';
+import type { Image as ImageType } from '../../storefront-api-types';
+import type { PartialDeep, Simplify, SetRequired } from 'type-fest';
+declare type HtmlImageProps = React.ImgHTMLAttributes<HTMLImageElement>;
+declare type ImageProps<GenericLoaderOpts> = Simplify<ShopifyImageProps | ExternalImageProps<GenericLoaderOpts>>;
+export declare function Image<GenericLoaderOpts>(props: ImageProps<GenericLoaderOpts>): JSX.Element;
+export declare type ShopifyLoaderOptions = {
+    crop?: 'top' | 'bottom' | 'left' | 'right' | 'center';
+    scale?: 2 | 3;
+    width?: HtmlImageProps['width'] | ImageType['width'];
+    height?: HtmlImageProps['height'] | ImageType['height'];
+};
+export declare type ShopifyLoaderParams = Simplify<ShopifyLoaderOptions & {
+    src: ImageType['url'];
+}>;
+export declare type ShopifyImageProps = Omit<HtmlImageProps, 'src'> & {
+    /** An object with fields that correspond to the Storefront API's
+     * [Image object](https://shopify.dev/api/storefront/reference/common-objects/image).
+     * The `data` prop is required if `src` isn't used, but both props shouldn't be used
+     * at the same time. If both `src` and `data` are passed, then `data` takes priority.
+     */
+    data: PartialDeep<ImageType>;
+    /** A custom function that generates the image URL. Parameters passed in
+     * are either `ShopifyLoaderParams` if using the `data` prop, or the
+     * `LoaderOptions` object that you pass to `loaderOptions`.
+     */
+    loader?: (params: ShopifyLoaderParams) => string;
+    /** An object of `loader` function options. For example, if the `loader` function
+     * requires a `scale` option, then the value can be a property of the
+     * `loaderOptions` object (for example, `{scale: 2}`). When the `data` prop
+     * is used, the object shape will be `ShopifyLoaderOptions`. When the `src`
+     * prop is used, the data shape is whatever you define it to be, and this shape
+     * will be passed to `loader`.
+     */
+    loaderOptions?: ShopifyLoaderOptions;
+    /**
+     * 'src' shouldn't be passed when 'data' is used.
+     */
+    src?: never;
+};
+declare type LoaderProps<GenericLoaderOpts> = {
+    /** A URL string. This string can be an absolute path or a relative path depending
+     * on the `loader`. The `src` prop is required if `data` isn't used, but both
+     * props shouldn't be used at the same time. If both `src` and `data` are passed,
+     * then `data` takes priority.
+     */
+    src: HtmlImageProps['src'];
+    /** The integer or string value for the width of the image. This is a required prop
+     * when `src` is present.
+     */
+    width: HtmlImageProps['width'];
+    /** The integer or string value for the height of the image. This is a required prop
+     * when `src` is present.
+     */
+    height: HtmlImageProps['height'];
+    /** An object of `loader` function options. For example, if the `loader` function
+     * requires a `scale` option, then the value can be a property of the
+     * `loaderOptions` object (for example, `{scale: 2}`). When the `data` prop
+     * is used, the object shape will be `ShopifyLoaderOptions`. When the `src`
+     * prop is used, the data shape is whatever you define it to be, and this shape
+     * will be passed to `loader`.
+     */
+    loaderOptions?: GenericLoaderOpts;
+};
+declare type ExternalImageProps<GenericLoaderOpts> = SetRequired<HtmlImageProps, 'src' | 'width' | 'height'> & {
+    /** A custom function that generates the image URL. Parameters passed in
+     * are either `ShopifyLoaderParams` if using the `data` prop, or the
+     * `LoaderOptions` object that you pass to `loaderOptions`.
+     */
+    loader?: (params: LoaderProps<GenericLoaderOpts>) => string;
+    /** An object of `loader` function options. For example, if the `loader` function
+     * requires a `scale` option, then the value can be a property of the
+     * `loaderOptions` object (for example, `{scale: 2}`). When the `data` prop
+     * is used, the object shape will be `ShopifyLoaderOptions`. When the `src`
+     * prop is used, the data shape is whatever you define it to be, and this shape
+     * will be passed to `loader`.
+     */
+    loaderOptions?: GenericLoaderOpts;
+    /**
+     * 'data' shouldn't be passed when 'src' is used.
+     */
+    data?: never;
+};
+export {};