@shopify/hydrogen 0.18.0 → 0.21.0

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

@@ -9,50 +9,155 @@
  */
 
 import { init, parse } from 'es-module-lexer';
+import MagicString from 'magic-string';
 import { normalizePath, transformWithEsbuild } from 'vite';
 import { promises } from 'fs';
 import path from 'path';
 
-// $FlowFixMe[module-missing]
+function _unsupportedIterableToArray(o, minLen) {
+  if (!o) return;
+  if (typeof o === "string") return _arrayLikeToArray(o, minLen);
+  var n = Object.prototype.toString.call(o).slice(8, -1);
+  if (n === "Object" && o.constructor) n = o.constructor.name;
+  if (n === "Map" || n === "Set") return Array.from(o);
+  if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
+}
+
+function _arrayLikeToArray(arr, len) {
+  if (len == null || len > arr.length) len = arr.length;
+
+  for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
+
+  return arr2;
+}
+
+function _createForOfIteratorHelper(o, allowArrayLike) {
+  var it;
+
+  if (typeof Symbol === "undefined" || o[Symbol.iterator] == null) {
+    if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") {
+      if (it) o = it;
+      var i = 0;
+
+      var F = function () {};
+
+      return {
+        s: F,
+        n: function () {
+          if (i >= o.length) return {
+            done: true
+          };
+          return {
+            done: false,
+            value: o[i++]
+          };
+        },
+        e: function (e) {
+          throw e;
+        },
+        f: F
+      };
+    }
+
+    throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+  }
+
+  var normalCompletion = true,
+      didErr = false,
+      err;
+  return {
+    s: function () {
+      it = o[Symbol.iterator]();
+    },
+    n: function () {
+      var step = it.next();
+      normalCompletion = step.done;
+      return step;
+    },
+    e: function (e) {
+      didErr = true;
+      err = e;
+    },
+    f: function () {
+      try {
+        if (!normalCompletion && it.return != null) it.return();
+      } finally {
+        if (didErr) throw err;
+      }
+    }
+  };
+}
+
 var rscViteFileRE = /\/react-server-dom-vite.js/;
 function ReactFlightVitePlugin() {
   var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
-      _ref$clientComponentP = _ref.clientComponentPaths,
-      clientComponentPaths = _ref$clientComponentP === void 0 ? [] : _ref$clientComponentP,
       _ref$isServerComponen = _ref.isServerComponentImporterAllowed,
       isServerComponentImporterAllowed = _ref$isServerComponen === void 0 ? function (importer) {
     return false;
-  } : _ref$isServerComponen;
+  } : _ref$isServerComponen,
+      _ref$isClientComponen = _ref.isClientComponent,
+      isClientComponent = _ref$isClientComponen === void 0 ? function (id) {
+    return /\.client\.[jt]sx?($|\?)/.test(id);
+  } : _ref$isClientComponen,
+      findClientComponentsForClientBuild = _ref.findClientComponentsForClientBuild;
 
   var config;
+  var server;
+  var invalidateTimeout;
+  var absoluteImporterPath;
+
+  function invalidateImporter() {
+    clearTimeout(invalidateTimeout);
+    invalidateTimeout = setTimeout(function () {
+      return server.watcher.emit('change', absoluteImporterPath);
+    }, 100);
+  }
+
+  function wrapIfClientComponent(id) {
+    var handle = function (isClient) {
+      if (!isClient) return null;
+
+      if (server) {
+        var moduleNode = server.moduleGraph.getModuleById(id);
+
+        if (!moduleNode.__isClientComponent) {
+          moduleNode.__isClientComponent = true;
+          if (absoluteImporterPath) invalidateImporter();
+        }
+      }
+
+      return proxyClientComponent(id.split('?')[0]);
+    };
+
+    var tmp = isClientComponent(id);
+    return typeof tmp === 'boolean' ? handle(tmp) : tmp.then(handle);
+  }
+
   return {
     name: 'vite-plugin-react-server-components',
     enforce: 'pre',
+    configureServer: function (_server) {
+      server = _server;
+    },
     configResolved: function (_config) {
       config = _config; // By pushing this plugin at the end of the existing array,
       // we enforce running it *after* Vite resolves import.meta.glob.
 
       config.plugins.push(hashImportsPlugin);
     },
-    resolveId: async function (source, importer) {
+    resolveId: function (source, importer) {
       if (!importer) return null;
       /**
        * Throw errors when non-Server Components try to load Server Components.
        */
 
-      if (/\.server(\.[jt]sx?)?$/.test(source) && !(/(\.server\.[jt]sx?|entry-server\.[jt]sx?|index\.html)$/.test(importer) || isServerComponentImporterAllowed(importer, source))) {
+      if (/\.server(\.[jt]sx?)?$/.test(source) && !(/(\.server\.[jt]sx?|index\.html)$/.test(importer) || isServerComponentImporterAllowed(importer, source))) {
         throw new Error("Cannot import " + source + " from \"" + importer + "\". " + 'By react-server convention, .server.js files can only be imported from other .server.js files. ' + 'That way nobody accidentally sends these to the client by indirectly importing it.');
       }
     },
-    load: async function (id) {
+    load: function (id) {
       var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-      if (!options.ssr) return null; // Wrapped components won't match this becase they end in ?no-proxy
-
-      if (/\.client\.[jt]sx?$/.test(id)) {
-        return proxyClientComponent(id);
-      }
-
-      return null;
+      return options.ssr && shouldCheckClientComponent(id) ? wrapIfClientComponent(id) : null;
     },
     transform: function (code, id) {
       var options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
@@ -68,27 +173,53 @@ function ReactFlightVitePlugin() {
        */
       if (rscViteFileRE.test(id)) {
         var INJECTING_RE = /\{\s*__INJECTED_CLIENT_IMPORTERS__[:\s]*null[,\s]*\}\s*;/;
+        var s = new MagicString(code);
+        id = id.split('?')[0];
 
         if (options && options.ssr) {
           // In SSR, directly use components already discovered by RSC
           // instead of globs to avoid bundling unused components.
-          return code.replace(INJECTING_RE, 'globalThis.__COMPONENT_INDEX');
+          s.replace(INJECTING_RE, 'globalThis.__COMPONENT_INDEX');
+          return {
+            code: s.toString(),
+            map: s.generateMap({
+              file: id,
+              source: id
+            })
+          };
         }
 
-        var CLIENT_COMPONENT_GLOB = '**/*.client.[jt]s?(x)';
-        var importerPath = path.dirname(id);
-        var importerToRootPath = normalizePath(path.relative(importerPath, config.root));
-        var userGlob = path.join(importerToRootPath, CLIENT_COMPONENT_GLOB);
-        var importers = [userGlob];
-        clientComponentPaths.forEach(function (componentPath) {
-          importers.push(path.join(path.relative(importerPath, componentPath), CLIENT_COMPONENT_GLOB));
-        });
-        var injectedGlobs = "Object.assign(Object.create(null), " + importers.map(function (glob) {
-          return (// Mark the globs to modify the result after Vite resolves them.
-            "/* HASH_BEGIN */ " + ("import.meta.glob('" + normalizePath(glob) + "') /* HASH_END */")
-          );
-        }).join(', ') + ");";
-        return code.replace(INJECTING_RE, injectedGlobs);
+        var injectGlobs = function (clientComponents) {
+          var importerPath = path.dirname(id);
+          var importers = clientComponents.map(function (absolutePath) {
+            return normalizePath(path.relative(importerPath, absolutePath));
+          });
+          var injectedGlobs = "Object.assign(Object.create(null), " + importers.map(function (glob) {
+            return (// Mark the globs to modify the result after Vite resolves them.
+              "/* HASH_BEGIN */ " + ("import.meta.glob('" + normalizePath(glob) + "') /* HASH_END */")
+            );
+          }).join(', ') + ");";
+          s.replace(INJECTING_RE, injectedGlobs);
+          return {
+            code: s.toString(),
+            map: s.generateMap({
+              file: id,
+              source: id
+            })
+          };
+        };
+
+        if (config.command === 'serve') {
+          absoluteImporterPath = id;
+          return injectGlobs(findClientComponentsForDev(server));
+        }
+
+        if (!findClientComponentsForClientBuild) {
+          throw new Error('[react-server-dom-vite] Parameter findClientComponentsForClientBuild is required for client build');
+        }
+
+        var tmp = findClientComponentsForClientBuild(config);
+        return Array.isArray(tmp) ? injectGlobs(tmp) : tmp.then(injectGlobs);
       }
     }
   };
@@ -147,20 +278,58 @@ async function proxyClientComponent(filepath, src) {
   });
   return proxyCode;
 }
+
+function shouldCheckClientComponent(id) {
+  return /\.[jt]sx?($|\?)/.test(id) && !/[&?]no-proxy($|&)/.test(id);
+}
+
+function findClientComponentsForDev(server) {
+  var clientComponents = []; // eslint-disable-next-line no-for-of-loops/no-for-of-loops
+
+  var _iterator = _createForOfIteratorHelper(server.moduleGraph.fileToModulesMap.values()),
+      _step;
+
+  try {
+    for (_iterator.s(); !(_step = _iterator.n()).done;) {
+      var set = _step.value;
+      var clientModule = Array.from(set).find(function (moduleNode) {
+        return moduleNode.__isClientComponent;
+      });
+      if (clientModule) clientComponents.push(clientModule.file);
+    }
+  } catch (err) {
+    _iterator.e(err);
+  } finally {
+    _iterator.f();
+  }
+
+  return clientComponents;
+}
+
 var hashImportsPlugin = {
   name: 'vite-plugin-react-server-components-hash-imports',
   enforce: 'post',
   transform: function (code, id) {
     // Turn relative import paths to lossy hashes
     if (rscViteFileRE.test(id)) {
-      return code.replace(/\/\*\s*HASH_BEGIN\s*\*\/\s*([^]+?)\/\*\s*HASH_END\s*\*\//gm, function (_, imports) {
+      var s = new MagicString(code);
+      s.replace(/\/\*\s*HASH_BEGIN\s*\*\/\s*([^]+?)\/\*\s*HASH_END\s*\*\//gm, function (_, imports) {
         return imports.trim().replace(/"([^"]+?)":/gm, function (__, relativePath) {
           var absolutePath = path.resolve(path.dirname(id.split('?')[0]), relativePath);
           return "\"" + getComponentId(normalizePath(absolutePath)) + "\":";
         });
       });
+      return {
+        code: s.toString(),
+        map: s.generateMap({
+          file: id,
+          source: id
+        })
+      };
     }
   }
-};
+}; // This can be used in custom findClientComponentsForClientBuild implementations
+
+ReactFlightVitePlugin.findClientComponentsFromServer = findClientComponentsForDev;
 
 export default ReactFlightVitePlugin;

package/vendor/react-server-dom-vite/package.json

@@ -58,7 +58,8 @@
     "vite": "^2.7.1"
   },
   "dependencies": {
-    "es-module-lexer": "^0.9.3"
+    "es-module-lexer": "^0.9.3",
+    "magic-string": "^0.25.2"
   },
   "devDependencies": {
     "vite": "^2.7.1"

package/dist/esnext/components/ProductDescription/ProductDescription.client.d.ts

@@ -1,13 +0,0 @@
-import { ElementType } from 'react';
-import { Props } from '../types';
-/**
- * The `ProductDescription` component renders a `div` with
- * the product's [`descriptionHtml`](https://shopify.dev/api/storefront/reference/products/product).
- * It must be a descendent of the `ProductProvider` component.
- */
-export declare function ProductDescription<TTag extends ElementType = 'div'>(props: Props<TTag> & {
-    /** An HTML tag to wrap the description. If not specified, then the
-     * description is wrapped in a `div` element.
-     */
-    as?: TTag;
-}): JSX.Element | null;

package/dist/esnext/components/ProductDescription/ProductDescription.client.js

@@ -1,16 +0,0 @@
-import React from 'react';
-import { useProduct } from '../ProductProvider';
-/**
- * The `ProductDescription` component renders a `div` with
- * the product's [`descriptionHtml`](https://shopify.dev/api/storefront/reference/products/product).
- * It must be a descendent of the `ProductProvider` component.
- */
-export function ProductDescription(props) {
-    var _a;
-    const product = useProduct();
-    if (product == null) {
-        throw new Error('Expected a ProductProvider context, but none was found');
-    }
-    const Wrapper = (_a = props.as) !== null && _a !== void 0 ? _a : 'div';
-    return product.descriptionHtml ? (React.createElement(Wrapper, { dangerouslySetInnerHTML: { __html: product.descriptionHtml }, ...props })) : null;
-}

package/dist/esnext/components/ProductDescription/index.d.ts

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

package/dist/esnext/components/ProductDescription/index.js

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

package/dist/esnext/components/ProductMetafield/ProductMetafield.client.d.ts

@@ -1,21 +0,0 @@
-import { ElementType } from 'react';
-import { Props } from '../types';
-import { MetafieldProps } from '../Metafield/Metafield.client';
-export interface ProductMetafieldProps<TTag> extends Omit<MetafieldProps<TTag>, 'metafield'> {
-    /** A string corresponding to the [key](https://shopify.dev/api/storefront/reference/common-objects/metafield) of the product's
-     * metafield.
-     */
-    keyName: string;
-    /** A string corresponding to the [namespace](https://shopify.dev/api/storefront/reference/common-objects/metafield) of the
-     * product's metafield.
-     */
-    namespace: string;
-    /** The ID of the variant. If provided, then use the metafield corresponding to the variant ID instead of the product's metafield. */
-    variantId?: string;
-}
-/**
- * The `ProductMetafield` component renders a
- * [`Metafield`](https://shopify.dev/api/hydrogen/components/primitive/metafield) component with the product metafield.
- * It must be a descendent of a `ProductProvider` component.
- */
-export declare function ProductMetafield<TTag extends ElementType>(props: Props<TTag> & Omit<ProductMetafieldProps<TTag>, 'data'>): JSX.Element | null;

package/dist/esnext/components/ProductMetafield/ProductMetafield.client.js

@@ -1,42 +0,0 @@
-import React from 'react';
-import { Metafield } from '../Metafield';
-import { useProduct } from '../../hooks/useProduct/useProduct';
-import { flattenConnection } from '../../utilities';
-/**
- * The `ProductMetafield` component renders a
- * [`Metafield`](https://shopify.dev/api/hydrogen/components/primitive/metafield) component with the product metafield.
- * It must be a descendent of a `ProductProvider` component.
- */
-export function ProductMetafield(props) {
-    var _a, _b, _c;
-    const product = useProduct();
-    if (product == null) {
-        throw new Error('Expected a ProductProvider context, but none was found');
-    }
-    if (product.metafields == null) {
-        console.warn('No metafields available for product');
-        return null;
-    }
-    const { namespace, keyName, variantId, ...passthroughProps } = props;
-    const metafields = (variantId
-        ? flattenConnection((_c = (_b = (_a = product.variants) === null || _a === void 0 ? void 0 : _a.find((variant) => (variant === null || variant === void 0 ? void 0 : variant.id) === variantId)) === null || _b === void 0 ? void 0 : _b.metafields) !== null && _c !== void 0 ? _c : {})
-        : product.metafields); // TODO: fix the typing here and ensure it's correct
-    const field = metafields === null || metafields === void 0 ? void 0 : metafields.find((metafield) => metafield.namespace === namespace && metafield.key === keyName);
-    if (field === null || field === undefined) {
-        const message = 'does not have a value for metafield.';
-        const productOrVariant = variantId ? `Variant` : 'Product';
-        const logItems = {
-            variantId,
-            ProductId: product.id,
-            namespace,
-            keyName,
-        };
-        console.warn([
-            productOrVariant,
-            message,
-            ...Object.entries(logItems).map(([key, val]) => `${key}: ${val}`),
-        ].join(' '));
-        return null;
-    }
-    return React.createElement(Metafield, { data: field, ...passthroughProps });
-}

package/dist/esnext/components/ProductMetafield/index.d.ts

@@ -1,2 +0,0 @@
-export { ProductMetafield } from './ProductMetafield.client';
-export type { ProductMetafieldProps } from './ProductMetafield.client';

package/dist/esnext/components/ProductMetafield/index.js

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

package/dist/esnext/components/ProductTitle/ProductTitle.client.d.ts

@@ -1,13 +0,0 @@
-import { ElementType } from 'react';
-import { Props } from '../types';
-/**
- * The `ProductTitle` component renders a `span` element (or the type of
- * HTML element specified by the `as` prop) with the product's [`title`](https://shopify.dev/api/storefront/reference/products/product).
- * It must be a descendent of the `ProductProvider` component.
- */
-export declare function ProductTitle<TTag extends ElementType = 'span'>(props: Props<TTag> & {
-    /** An HTML tag to wrap the title. If not specified, then the
-     * title is wrapped in a `span` element.
-     */
-    as?: TTag;
-}): JSX.Element | null;

package/dist/esnext/components/ProductTitle/ProductTitle.client.js

@@ -1,16 +0,0 @@
-import React from 'react';
-import { useProduct } from '../ProductProvider';
-/**
- * The `ProductTitle` component renders a `span` element (or the type of
- * HTML element specified by the `as` prop) with the product's [`title`](https://shopify.dev/api/storefront/reference/products/product).
- * It must be a descendent of the `ProductProvider` component.
- */
-export function ProductTitle(props) {
-    const product = useProduct();
-    if (product == null) {
-        throw new Error('Expected a ProductProvider context, but none was found');
-    }
-    const { as, ...passthroughProps } = props;
-    const Wrapper = as ? as : 'span';
-    return product.title ? (React.createElement(Wrapper, { ...passthroughProps }, product.title)) : null;
-}

package/dist/esnext/components/ProductTitle/index.d.ts

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

package/dist/esnext/components/ProductTitle/index.js

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

package/dist/esnext/components/UnitPrice/UnitPrice.client.d.ts

@@ -1,15 +0,0 @@
-import type { UnitPriceMeasurement, MoneyV2 } from '../../storefront-api-types';
-import type { PartialDeep } from 'type-fest';
-export interface UnitPriceProps<TTag> {
-    /** An object with fields that correspond to the Storefront API's [MoneyV2 object](https://shopify.dev/api/storefront/reference/common-objects/moneyv2). */
-    data: PartialDeep<MoneyV2>;
-    /** A [UnitPriceMeasurement object](https://shopify.dev/api/storefront/reference/products/unitpricemeasurement). */
-    measurement: PartialDeep<UnitPriceMeasurement>;
-    /** An HTML tag to be rendered as the base element wrapper. The default is `div`. */
-    as?: TTag;
-}
-/**
- * The `UnitPrice` component renders a string with a [UnitPrice](https://shopify.dev/themes/pricing-payments/unit-pricing) as the
- * Storefront API's [MoneyV2 object](https://shopify.dev/api/storefront/reference/common-objects/moneyv2) with a reference unit from the Storefront API's [UnitPriceMeasurement object](/api/storefront/reference/products/unitpricemeasurement).
- */
-export declare function UnitPrice<TTag extends keyof JSX.IntrinsicElements = 'div'>(props: JSX.IntrinsicElements[TTag] & UnitPriceProps<TTag>): JSX.Element | null;

package/dist/esnext/components/UnitPrice/UnitPrice.client.js

@@ -1,22 +0,0 @@
-import React from 'react';
-import { Money } from '../Money';
-/**
- * The `UnitPrice` component renders a string with a [UnitPrice](https://shopify.dev/themes/pricing-payments/unit-pricing) as the
- * Storefront API's [MoneyV2 object](https://shopify.dev/api/storefront/reference/common-objects/moneyv2) with a reference unit from the Storefront API's [UnitPriceMeasurement object](/api/storefront/reference/products/unitpricemeasurement).
- */
-export function UnitPrice(props) {
-    const { data, measurement, as, ...passthroughProps } = props;
-    if (!data) {
-        console.warn(`No "data" prop was passed to <UnitPrice/>`);
-        return null;
-    }
-    if (!measurement) {
-        console.warn(`No "measurement" prop was passed to <UnitPrice/>`);
-        return null;
-    }
-    const Wrapper = as !== null && as !== void 0 ? as : 'div';
-    return (React.createElement(Wrapper, { ...passthroughProps },
-        React.createElement(Money, { data: data }),
-        "/",
-        measurement.referenceUnit));
-}

package/dist/esnext/components/UnitPrice/index.d.ts

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

package/dist/esnext/components/UnitPrice/index.js

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