@shopify/hydrogen 1.4.3 → 1.5.0

package/dist/esnext/storefront-api-types.js

@@ -137,6 +137,8 @@ export var CheckoutErrorCode;
     CheckoutErrorCode["LineItemNotFound"] = "LINE_ITEM_NOT_FOUND";
     /** Checkout is locked. */
     CheckoutErrorCode["Locked"] = "LOCKED";
+    /** Maximum number of discount codes limit reached. */
+    CheckoutErrorCode["MaximumDiscountCodeLimitReached"] = "MAXIMUM_DISCOUNT_CODE_LIMIT_REACHED";
     /** Missing payment input. */
     CheckoutErrorCode["MissingPaymentInput"] = "MISSING_PAYMENT_INPUT";
     /** Not enough in stock. */
@@ -1119,7 +1121,7 @@ export var DiscountApplicationTargetType;
  * The type of data that the filter group represents.
  *
  * For more information, refer to [Filter products in a collection with the Storefront API]
- * (https://shopify.dev/api/examples/filter-products).
+ * (https://shopify.dev/custom-storefronts/products-collections/filter-products).
  *
  */
 export var FilterType;

package/dist/esnext/testing.d.ts

@@ -0,0 +1,2 @@
+export { MockedServerRequestProvider } from './utilities/tests/MockedServerRequestProvider.server.js';
+export { ShopifyTestProviders } from './utilities/tests/provider-helpers.js';

package/dist/esnext/testing.js

@@ -0,0 +1,2 @@
+export { MockedServerRequestProvider } from './utilities/tests/MockedServerRequestProvider.server.js';
+export { ShopifyTestProviders } from './utilities/tests/provider-helpers.js';

package/dist/esnext/utilities/tests/MockedServerRequestProvider.server.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import { ShopifyProviderOptions } from '../../utilities/tests/provider-helpers.js';
+export declare function MockedServerRequestProvider({ children, setServerProps, serverProps, requestUrl, }: Omit<ShopifyProviderOptions, 'history'> & {
+    children: React.ReactElement;
+    requestUrl?: string;
+}): JSX.Element;

package/dist/esnext/utilities/tests/MockedServerRequestProvider.server.js

@@ -0,0 +1,9 @@
+import React from 'react';
+import { ServerRequestProvider } from '../../foundation/ServerRequestProvider/ServerRequestProvider.js';
+import { ServerPropsProvider } from '../../foundation/ServerPropsProvider/ServerPropsProvider.js';
+import { HydrogenRequest } from '../../foundation/HydrogenRequest/HydrogenRequest.server.js';
+export function MockedServerRequestProvider({ children, setServerProps = () => { }, serverProps = { pathname: '', search: '' }, requestUrl = 'https://examples.com', }) {
+    const request = new HydrogenRequest(new Request(requestUrl));
+    return (React.createElement(ServerRequestProvider, { request: request },
+        React.createElement(ServerPropsProvider, { setServerPropsForRsc: setServerProps, initialServerProps: serverProps, setRscResponseFromApiRoute: () => { } }, children)));
+}

package/dist/esnext/utilities/tests/price.d.ts

@@ -0,0 +1,5 @@
+import { CurrencyCode, MoneyV2 } from '../../storefront-api-types.js';
+export declare function getPrice(price?: Partial<MoneyV2>): {
+    currencyCode: CurrencyCode;
+    amount: string;
+};

package/dist/esnext/utilities/tests/price.js

@@ -0,0 +1,9 @@
+// eslint-disable-next-line node/no-extraneous-import
+import faker from 'faker';
+import { CurrencyCode } from '../../storefront-api-types.js';
+export function getPrice(price = {}) {
+    return {
+        currencyCode: price.currencyCode ?? CurrencyCode.Cad,
+        amount: price.amount ?? faker.finance.amount(),
+    };
+}

package/dist/esnext/utilities/tests/provider-helpers.d.ts

@@ -0,0 +1,31 @@
+import React from 'react';
+import { BrowserHistory } from 'history';
+import { ShopifyConfig } from '../../types.js';
+import { LocationServerProps, ServerProps } from '../../foundation/ServerPropsProvider/ServerPropsProvider.js';
+import { type CartWithActions, type Cart } from '../../components/CartProvider/types.js';
+export declare function ShopifyTestProviders({ children, setServerProps, serverProps, shopifyConfig, history, }: ShopifyProviderOptions & {
+    children: React.ReactNode;
+}): JSX.Element;
+export declare function CartTestProviders({ children, cartProviderValues, }: {
+    children: React.ReactNode;
+    cartProviderValues?: Parameters<typeof getCartProviderValues>[0];
+}): JSX.Element;
+export declare function getShopifyConfig(config?: Partial<ShopifyConfig>): {
+    countryCode: string;
+    languageCode: string;
+    storeDomain: string;
+    storefrontToken: string;
+    storefrontApiVersion: string;
+};
+declare function getCartProviderValues({ cart, ...config }?: CartProviderOptions): CartWithActions;
+declare type SetServerProps = React.Dispatch<React.SetStateAction<ServerProps>>;
+export interface ShopifyProviderOptions {
+    shopifyConfig?: Partial<ShopifyConfig>;
+    setServerProps?: SetServerProps;
+    serverProps?: LocationServerProps;
+    history?: BrowserHistory;
+}
+declare type CartProviderOptions = {
+    cart?: Partial<Cart>;
+} & Partial<CartWithActions>;
+export {};

package/dist/esnext/utilities/tests/provider-helpers.js

@@ -0,0 +1,36 @@
+import React from 'react';
+import { DEFAULT_COUNTRY, DEFAULT_LANGUAGE } from '../../foundation/constants.js';
+import { ShopifyProvider } from '../../foundation/ShopifyProvider/ShopifyProvider.server.js';
+import { BrowserRouter } from '../../foundation/Router/BrowserRouter.client.js';
+import { ServerPropsProvider, } from '../../foundation/ServerPropsProvider/ServerPropsProvider.js';
+import { CartContext } from '../../components/CartProvider/context.js';
+import { CART_ACTIONS } from '../../components/CartProvider/tests/fixtures.js';
+export function ShopifyTestProviders({ children, setServerProps = (() => { }), serverProps = { pathname: '', search: '' }, shopifyConfig, history, }) {
+    const finalShopifyConfig = getShopifyConfig(shopifyConfig);
+    return (React.createElement(ServerPropsProvider, { setServerPropsForRsc: setServerProps, initialServerProps: serverProps, setRscResponseFromApiRoute: () => { } },
+        React.createElement(ShopifyProvider, { shopifyConfig: finalShopifyConfig, languageCode: "EN", countryCode: "US" },
+            React.createElement(BrowserRouter, { history: history }, children))));
+}
+export function CartTestProviders({ children, cartProviderValues, }) {
+    const finalValue = getCartProviderValues(cartProviderValues);
+    return (React.createElement(CartContext.Provider, { value: finalValue }, children));
+}
+export function getShopifyConfig(config = {}) {
+    const languageCode = config.defaultLanguageCode ?? DEFAULT_LANGUAGE;
+    const countryCode = config.defaultCountryCode ?? DEFAULT_COUNTRY;
+    return {
+        countryCode: countryCode.toUpperCase(),
+        languageCode: languageCode.toUpperCase(),
+        storeDomain: config.storeDomain ?? 'notashop.myshopify.io',
+        storefrontToken: config.storefrontToken ?? 'abc123',
+        storefrontApiVersion: config.storefrontApiVersion ?? '2022-07',
+    };
+}
+function getCartProviderValues({ cart = {}, ...config } = {}) {
+    const finalConfig = {
+        ...CART_ACTIONS,
+        ...cart,
+        ...config,
+    };
+    return finalConfig;
+}

package/dist/esnext/version.d.ts

@@ -1 +1 @@
-export declare const LIB_VERSION = "1.4.3";
+export declare const LIB_VERSION = "1.5.0";

package/dist/esnext/version.js

@@ -1 +1 @@
-export const LIB_VERSION = '1.4.3';
+export const LIB_VERSION = '1.5.0';

package/dist/node/framework/plugins/vite-plugin-css-rsc.d.ts

@@ -1,2 +1,2 @@
-import { Plugin } from 'vite';
+import { type Plugin } from 'vite';
 export default function cssRsc(): Plugin;

package/dist/node/framework/plugins/vite-plugin-css-rsc.js

@@ -8,6 +8,31 @@ const magic_string_1 = __importDefault(require("magic-string"));
 const vite_1 = require("vite");
 const VITE_CSS_CHUNK_NAME = 'style.css';
 const INJECT_STYLES_COMMENT = '<!--__INJECT_STYLES__-->';
+const CSS_EXTENSIONS_RE = /\.(css|sass|scss|stylus|less)(\.|\?|$)/;
+const CSS_MODULES_EXTENSIONS_RE = /\.module\.(css|sass|scss|stylus|less)(\?|$)/;
+const EVENT_CSS_IMPORT = 'hydrogen-css-modules-update-imports';
+const EVENT_CSS_CLASSES = 'hydrogen-css-modules-update-classes';
+const CSS_MODULES_HMR_INJECT = `
+import {createHotContext, injectQuery} from "/@vite/client";
+
+if (!import.meta.hot) {
+  import.meta.hot = createHotContext("/index.html");
+}
+
+import.meta.hot.on('${EVENT_CSS_IMPORT}', ({ids, timestamp}) => {
+  ids.forEach((id) => {
+    import(injectQuery(id, 't=' + timestamp));
+  });
+});
+
+import.meta.hot.on('${EVENT_CSS_CLASSES}', ({replacements}) => {
+  replacements.forEach(([oldClass, newClass]) => {
+    document.querySelectorAll('.' + oldClass).forEach(node => {
+      node.classList.replace(oldClass, newClass);
+    })
+  });
+});
+`;
 // Keep this in the outer scope to share it
 // across client <> server builds.
 let clientBuildPath;
@@ -21,6 +46,10 @@ let clientBuildPath;
  */
 function cssRsc() {
     let config;
+    let server;
+    let isUsingCssModules = false;
+    const hmrCssCopy = new Map();
+    const hmrCssQueue = new Set();
     return {
         name: 'hydrogen:css-rsc',
         enforce: 'post',
@@ -32,6 +61,9 @@ function cssRsc() {
         configResolved(_config) {
             config = _config;
         },
+        configureServer(_server) {
+            server = _server;
+        },
         transform(code, id, options) {
             if (options?.ssr && id.includes('index.html?raw')) {
                 // Mark the client build index.html to inject styles later
@@ -42,17 +74,63 @@ function cssRsc() {
                     map: s.generateMap({ file: id, source: id }),
                 };
             }
+            // Manual HMR for CSS Modules
+            if (server && CSS_MODULES_EXTENSIONS_RE.test(id)) {
+                isUsingCssModules = true;
+                const file = id.split('?')[0];
+                // Note: this "CSS" file is actually JavaScript code.
+                // Get a copy of how this CSS was before the current update
+                const oldCode = hmrCssCopy.get(file);
+                // Save a copy of the current CSS for future updates
+                hmrCssCopy.set(file, code);
+                if (!oldCode || !hmrCssQueue.has(file))
+                    return;
+                hmrCssQueue.delete(file);
+                // Diff old code with new code and use the exported class names as a reference
+                // to find out how the resulting CSS classes are renamed.  With this, we can
+                // update classes in the DOM without requesting a full rendering from the server.
+                // Example:
+                // Previous code => export const red = ".red_k3tz4_module";
+                // New code      => export const red = ".red_t93kw_module";
+                const classRE = /export const (.+?) = "(.+?)"/g;
+                const oldClasses = [...oldCode.matchAll(classRE)];
+                const replacements = [];
+                for (const [, newKey, newClass] of code.matchAll(classRE)) {
+                    const oldClass = oldClasses.find(([, oldKey]) => oldKey === newKey)?.[2];
+                    if (oldClass && oldClass !== newClass) {
+                        replacements.push([oldClass, newClass]);
+                    }
+                }
+                if (replacements.length > 0) {
+                    // This event asks the browser to replace old
+                    // hash-based CSS classes with new ones.
+                    // Example: from `.red_k3tz4_module` to `.red_t93kw_module`
+                    server.ws.send({
+                        type: 'custom',
+                        event: EVENT_CSS_CLASSES,
+                        data: { replacements },
+                    });
+                }
+            }
         },
         transformIndexHtml(html, { server }) {
             // Add discovered styles during dev
             if (server) {
-                const tags = [];
+                const tags = (isUsingCssModules
+                    ? [
+                        {
+                            tag: 'script',
+                            attrs: { type: 'module' },
+                            children: CSS_MODULES_HMR_INJECT,
+                        },
+                    ]
+                    : []);
                 const foundCssFiles = new Set();
                 for (const [key, value] of server.moduleGraph.idToModuleMap.entries()) {
                     if (
                     // Note: Some CSS-in-JS libraries use `.css.js`
                     // extension and we should match it here:
-                    /\.(css|sass|scss|stylus|less)(\.|\?|$)/.test((0, vite_1.normalizePath)(key).split('/').pop())) {
+                    CSS_EXTENSIONS_RE.test((0, vite_1.normalizePath)(key).split('/').pop())) {
                         let { url, file, lastHMRTimestamp, importers } = value;
                         if (!foundCssFiles.has(file) &&
                             !Array.from(importers).some((importer) => foundCssFiles.has(importer.file))) {
@@ -117,6 +195,25 @@ function cssRsc() {
                 }
             }
         },
+        async handleHotUpdate({ modules, server }) {
+            if (modules.every((m) => CSS_MODULES_EXTENSIONS_RE.test(m.file || ''))) {
+                // Opt-out of Vite's default HMR for CSS Modules, we'll handle this manually
+                const file = modules[0].file;
+                hmrCssQueue.add(file);
+                // This event asks the browser to download fresh CSS files.
+                // Fetching these fresh CSS files will trigger another event
+                // from the `transform` hook to replace classes in the DOM.
+                server.ws.send({
+                    type: 'custom',
+                    event: EVENT_CSS_IMPORT,
+                    data: {
+                        ids: modules.map((m) => m.id),
+                        timestamp: modules[0].lastHMRTimestamp || Date.now(),
+                    },
+                });
+                return [];
+            }
+        },
     };
 }
 exports.default = cssRsc;

package/dist/node/framework/plugins/vite-plugin-hydrogen-rsc.js

@@ -18,10 +18,10 @@ function default_1(options) {
             // Always allow the entry server (e.g. App.server.jsx) to be imported
             // in other files such as worker.js or server.js.
             source.includes(vite_plugin_hydrogen_middleware_js_1.HYDROGEN_DEFAULT_SERVER_ENTRY) ||
-                /(index|entry-server|hydrogen\.config)\.[jt]s/.test(importer) ||
+                /(index|provider-helpers|entry-server|testing|hydrogen\.config)\.[jt]s/.test(importer) ||
                 // Support importing server components for testing
                 // TODO: revisit this when RSC splits into two bundles
-                /\.test\.[tj]sx?$/.test(importer));
+                /\.(test|vitest|spec)\.[tj]sx?$/.test(importer));
         },
         ...options,
     });

package/dist/node/framework/plugins/vite-plugin-platform-entry.js

@@ -54,7 +54,7 @@ exports.default = () => {
         async transform(code, id, options) {
             if (config.command === 'build' &&
                 options?.ssr &&
-                /@shopify\/hydrogen\/.+platforms\/virtual\./.test((0, vite_1.normalizePath)(id))) {
+                /\/hydrogen\/.+platforms\/virtual\./.test((0, vite_1.normalizePath)(id))) {
                 const ms = new magic_string_1.default(code);
                 ms.replace('__HYDROGEN_ENTRY__', vite_plugin_hydrogen_middleware_js_1.HYDROGEN_DEFAULT_SERVER_ENTRY);
                 if (!clientBuildPath) {

package/package.json

@@ -7,16 +7,14 @@
   "engines": {
     "node": ">=14"
   },
-  "version": "1.4.3",
+  "version": "1.5.0",
   "description": "Modern custom Shopify storefronts",
   "license": "MIT",
   "main": "dist/esnext/index.js",
   "exports": {
     ".": "./dist/esnext/index.js",
-    "./experimental": {
-      "import": "./dist/esnext/experimental.js",
-      "require": "./dist/node/experimental.js"
-    },
+    "./experimental": "./dist/esnext/experimental.js",
+    "./testing": "./dist/esnext/testing.js",
     "./plugin": {
       "import": "./dist/esnext/framework/plugin.js",
       "require": "./dist/node/framework/plugin.js"