@shopify/hydrogen 0.14.0 → 0.16.1

package/dist/node/utilities/isServer/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.isServer = void 0;
+var isServer_1 = require("./isServer");
+Object.defineProperty(exports, "isServer", { enumerable: true, get: function () { return isServer_1.isServer; } });

package/dist/node/utilities/isServer/isServer.d.ts

@@ -0,0 +1,4 @@
+/** The `isServer` utility is a function that returns a `boolean` indicating
+ * if the code was run on the server.
+ */
+export declare function isServer(): boolean;

package/dist/node/utilities/isServer/isServer.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.isServer = void 0;
+const isClient_1 = require("../isClient");
+/** The `isServer` utility is a function that returns a `boolean` indicating
+ * if the code was run on the server.
+ */
+function isServer() {
+    return !(0, isClient_1.isClient)();
+}
+exports.isServer = isServer;

package/dist/node/utilities/load_script.d.ts

@@ -0,0 +1,3 @@
+export declare function loadScript(src: string, options?: {
+    module?: boolean;
+}): Promise<boolean>;

package/dist/node/utilities/load_script.js

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.loadScript = void 0;
+const SCRIPTS_LOADED = {};
+function loadScript(src, options) {
+    const isScriptLoaded = SCRIPTS_LOADED[src];
+    if (isScriptLoaded) {
+        return isScriptLoaded;
+    }
+    const promise = new Promise((resolve, reject) => {
+        const script = document.createElement('script');
+        if (options === null || options === void 0 ? void 0 : options.module) {
+            script.type = 'module';
+        }
+        script.src = src;
+        script.onload = () => {
+            resolve(true);
+        };
+        script.onerror = () => {
+            reject(false);
+        };
+        document.body.appendChild(script);
+    });
+    SCRIPTS_LOADED[src] = promise;
+    return promise;
+}
+exports.loadScript = loadScript;

package/dist/node/utilities/log/log-cache-api-status.js

@@ -8,6 +8,6 @@ function logCacheApiStatus(status, url) {
     if (!_1.log.options().showCacheApiStatus) {
         return;
     }
-    _1.log.debug((0, kolorist_1.gray)(`[Cache] ${status === null || status === void 0 ? void 0 : status.padEnd(6)} query ${(0, utils_1.findQueryName)(url)}`));
+    _1.log.debug((0, kolorist_1.gray)(`[Cache] ${status === null || status === void 0 ? void 0 : status.padEnd(8)} query ${(0, utils_1.findQueryName)(url)}`));
 }
 exports.logCacheApiStatus = logCacheApiStatus;

package/dist/node/utilities/log/log-cache-header.js

@@ -1,14 +1,14 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.logCacheControlHeaders = exports.collectQueryCacheControlHeaders = void 0;
-const cache_1 = require("../../framework/cache");
+const hash_1 = require("../hash");
 const utils_1 = require("./utils");
 const kolorist_1 = require("kolorist");
 const log_1 = require("./log");
 const color = kolorist_1.gray;
 function collectQueryCacheControlHeaders(request, queryKey, cacheControlHeader) {
     request.ctx.queryCacheControl.push({
-        name: (0, utils_1.findQueryName)((0, cache_1.hashKey)(queryKey)),
+        name: (0, utils_1.findQueryName)((0, hash_1.hashKey)(queryKey)),
         header: cacheControlHeader,
     });
 }

package/dist/node/utilities/log/log-query-timeline.js

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.logQueryTimings = exports.collectQueryTimings = void 0;
-const cache_1 = require("../../framework/cache");
+const hash_1 = require("../hash");
 const utils_1 = require("./utils");
 const kolorist_1 = require("kolorist");
 const log_1 = require("./log");
@@ -15,7 +15,7 @@ const TIMING_MAPPING = {
 };
 function collectQueryTimings(request, queryKey, timingType, duration) {
     request.ctx.queryTimings.push({
-        name: (0, utils_1.findQueryName)((0, cache_1.hashKey)(queryKey)),
+        name: (0, utils_1.findQueryName)((0, hash_1.hashKey)(queryKey)),
         timingType,
         timestamp: (0, timing_1.getTime)(),
         duration,

package/dist/node/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/node/utilities/measurement.js

@@ -0,0 +1,103 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getMeasurementAsParts = exports.getMeasurementAsString = void 0;
+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',
+};
+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);
+}
+exports.getMeasurementAsString = getMeasurementAsString;
+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);
+}
+exports.getMeasurementAsParts = getMeasurementAsParts;
+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/node/utilities/parseMetafieldValue/index.d.ts

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

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

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.parseMetafieldValue = void 0;
+var parseMetafieldValue_1 = require("./parseMetafieldValue");
+Object.defineProperty(exports, "parseMetafieldValue", { enumerable: true, get: function () { return parseMetafieldValue_1.parseMetafieldValue; } });

package/dist/node/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](/api/storefront/reference/common-objects/metafield)'s `value` from a string into a sensible type corresponding to the [Metafield](/api/storefront/reference/common-objects/metafield)'s `type`.
+ */
+export declare function parseMetafieldValue(metafield: PartialDeep<Metafield>): any;

package/dist/node/utilities/parseMetafieldValue/parseMetafieldValue.js

@@ -0,0 +1,39 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.parseMetafieldValue = void 0;
+/**
+ * The `parseMetafieldValue` function parses a [Metafield](/api/storefront/reference/common-objects/metafield)'s `value` from a string into a sensible type corresponding to the [Metafield](/api/storefront/reference/common-objects/metafield)'s `type`.
+ */
+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 JSON.parse(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;
+    }
+}
+exports.parseMetafieldValue = parseMetafieldValue;

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

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

package/dist/node/utilities/storefrontApi.js

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getStorefrontApiRequestHeaders = void 0;
+const constants_1 = require("../constants");
+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[constants_1.OXYGEN_SECRET_TOKEN_ENVIRONMENT_VARIABLE]
+        : null;
+    /**
+     * Only pass one type of storefront token at a time.
+     */
+    if (secretToken) {
+        headers[constants_1.STOREFRONT_API_SECRET_TOKEN_HEADER] = secretToken;
+    }
+    else {
+        headers[constants_1.STOREFRONT_API_PUBLIC_TOKEN_HEADER] = storefrontToken;
+    }
+    if (buyerIp) {
+        headers[constants_1.STOREFRONT_API_BUYER_IP_HEADER] = buyerIp;
+    }
+    return headers;
+}
+exports.getStorefrontApiRequestHeaders = getStorefrontApiRequestHeaders;

package/dist/node/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/node/utilities/suspense.js

@@ -0,0 +1,64 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.preloadFunction = exports.suspendFunction = exports.wrapPromise = void 0;
+const hash_1 = require("./hash");
+/**
+ * Wrap the fetch promise in a way that React Suspense understands.
+ * Essentially, keep throwing something until you have legit data.
+ */
+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 };
+}
+exports.wrapPromise = wrapPromise;
+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 = (0, hash_1.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;
+}
+const suspendFunction = (key, fn) => query(key, fn);
+exports.suspendFunction = suspendFunction;
+const preloadFunction = (key, fn) => query(key, fn, true);
+exports.preloadFunction = preloadFunction;

package/dist/node/utilities/template.js

@@ -9,7 +9,7 @@ function stripScriptsFromTemplate(template) {
     var _a;
     const bootstrapScripts = [];
     const bootstrapModules = [];
-    const scripts = template.matchAll(/<script.+?src="(?<script>([^"]+?))".*?><\/script>/g);
+    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)

package/dist/node/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/node/utilities/video_parameters.js

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useEmbeddedVideoUrl = exports.addParametersToEmbeddedVideoUrl = void 0;
+const react_1 = require("react");
+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}`;
+}
+exports.addParametersToEmbeddedVideoUrl = addParametersToEmbeddedVideoUrl;
+function useEmbeddedVideoUrl(url, parameters) {
+    return (0, react_1.useMemo)(() => {
+        if (!parameters) {
+            return url;
+        }
+        return addParametersToEmbeddedVideoUrl(url, parameters);
+    }, [url, parameters]);
+}
+exports.useEmbeddedVideoUrl = useEmbeddedVideoUrl;

package/dist/node/version.d.ts

@@ -1 +1 @@
-export declare const LIB_VERSION = "0.14.0";
+export declare const LIB_VERSION = "0.16.1";

package/dist/node/version.js

@@ -1,4 +1,4 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.LIB_VERSION = void 0;
-exports.LIB_VERSION = '0.14.0';
+exports.LIB_VERSION = '0.16.1';

package/package.json

@@ -7,7 +7,7 @@
   "engines": {
     "node": ">=14"
   },
-  "version": "0.14.0",
+  "version": "0.16.1",
   "description": "Modern custom Shopify storefronts",
   "license": "MIT",
   "main": "dist/esnext/index.js",

package/vendor/react-server-dom-vite/cjs/react-server-dom-vite-plugin.js

@@ -82,25 +82,14 @@ function ReactFlightVitePlugin() {
         var CLIENT_COMPONENT_GLOB = '**/*.client.[jt]s?(x)';
         var importerPath = path.dirname(id);
         var importerToRootPath = vite.normalizePath(path.relative(importerPath, config.root));
-
-        var _ref2 = importerToRootPath.match(/(\.\.\/)+(\.\.)?/) || [],
-            importerToRootNested = _ref2[0];
-
-        var userPrefix = path.normalize(path.join(importerPath, importerToRootNested.replace(/\/?$/, path.sep)));
         var userGlob = path.join(importerToRootPath, CLIENT_COMPONENT_GLOB);
-        var importers = [[userGlob, userPrefix]];
+        var importers = [userGlob];
         clientComponentPaths.forEach(function (componentPath) {
-          var libPrefix = componentPath + path.sep;
-          var libGlob = path.join(path.relative(importerPath, componentPath), CLIENT_COMPONENT_GLOB);
-          importers.push([libGlob, libPrefix]);
+          importers.push(path.join(path.relative(importerPath, componentPath), CLIENT_COMPONENT_GLOB));
         });
-        var injectedGlobs = "Object.assign(Object.create(null), " + importers.map(function (_ref3) {
-          var glob = _ref3[0],
-              prefix = _ref3[1];
+        var injectedGlobs = "Object.assign(Object.create(null), " + importers.map(function (glob) {
           return (// Mark the globs to modify the result after Vite resolves them.
-            // The prefix is used later to turn relative imports
-            // into absolute imports, and then into hashes.
-            "/* HASH_BEGIN " + vite.normalizePath(prefix) + " */ " + ("import.meta.glob('" + vite.normalizePath(glob) + "') /* HASH_END */")
+            "/* HASH_BEGIN */ " + ("import.meta.glob('" + vite.normalizePath(glob) + "') /* HASH_END */")
           );
         }).join(', ') + ");";
         return code.replace(INJECTING_RE, injectedGlobs);
@@ -157,8 +146,8 @@ async function proxyClientComponent(filepath, src) {
   exportStatements.forEach(function (key) {
     var isDefault = key === DEFAULT_EXPORT;
     var componentName = isDefault ? getComponentFilename(filepath) : key;
-    proxyCode += "export " + (isDefault ? DEFAULT_EXPORT : "const " + componentName + " =") + " wrapInClientProxy({ name: '" + componentName + "', id: '" + getComponentId(filepath) + "', component: allImports['" + key + "'], named: " + // eslint-disable-next-line react-internal/safe-string-coercion
-    String(!isDefault) + " });\n";
+    proxyCode += "export " + (isDefault ? DEFAULT_EXPORT : "const " + componentName + " =") + " wrapInClientProxy({ name: '" + componentName + "', id: '" + getComponentId(filepath) + "', value: allImports['" + key + "'], isDefault: " + // eslint-disable-next-line react-internal/safe-string-coercion
+    String(isDefault) + " });\n";
   });
   return proxyCode;
 }
@@ -168,11 +157,10 @@ var hashImportsPlugin = {
   transform: function (code, id) {
     // Turn relative import paths to lossy hashes
     if (rscViteFileRE.test(id)) {
-      var nestedRE = /\.\.\//gm;
-      return code.replace(/\/\*\s*HASH_BEGIN\s*(.+?)\s*\*\/\s*([^]+?)\/\*\s*HASH_END\s*\*\//gm, function (_, prefix, imports) {
+      return code.replace(/\/\*\s*HASH_BEGIN\s*\*\/\s*([^]+?)\/\*\s*HASH_END\s*\*\//gm, function (_, imports) {
         return imports.trim().replace(/"([^"]+?)":/gm, function (__, relativePath) {
-          var absolutePath = prefix + relativePath.replace(nestedRE, '');
-          return "\"" + getComponentId(absolutePath) + "\":";
+          var absolutePath = path.resolve(path.dirname(id.split('?')[0]), relativePath);
+          return "\"" + getComponentId(vite.normalizePath(absolutePath)) + "\":";
         });
       });
     }