@shopify/hydrogen 0.17.1 → 0.18.0

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

@@ -1,4 +1,4 @@
-import { ImportGlobEagerOutput, ShopifyConfig } from '../types';
+import { HydrogenConfig, HydrogenConfigRoutes } from '../types';
 import type { ServerComponentRequest } from '../framework/Hydration/ServerComponentRequest.server';
 import type { ASTNode } from 'graphql';
 import { SessionApi, SessionStorageAdapter } from '../foundation/session/session';
@@ -19,7 +19,8 @@ export declare type ApiRouteMatch = {
     hasServerComponent: boolean;
     params: RouteParams;
 };
-export declare function getApiRoutes(pages: ImportGlobEagerOutput | undefined, topLevelPath?: string): Array<HydrogenApiRoute>;
+export declare function extractPathFromRoutesKey(routesKey: string, dirPrefix: string | RegExp): string;
+export declare function getApiRoutes(rawRoutes: HydrogenConfigRoutes): Array<HydrogenApiRoute>;
 export declare function getApiRouteFromURL(url: URL, routes: Array<HydrogenApiRoute>): ApiRouteMatch | null;
 /** The `queryShop` utility is a function that helps you query the Storefront API.
  * It's similar to the `useShopQuery` hook, which is available in server components.
@@ -33,5 +34,5 @@ interface QueryShopArgs {
     /** An object of the variables for the GraphQL query. */
     variables?: Record<string, any>;
 }
-export declare function renderApiRoute(request: ServerComponentRequest, route: ApiRouteMatch, shopifyConfig: ShopifyConfig, session?: SessionStorageAdapter): Promise<Response | Request>;
+export declare function renderApiRoute(request: ServerComponentRequest, route: ApiRouteMatch, shopifyConfig: HydrogenConfig['shopify'], session?: SessionStorageAdapter): Promise<Response | Request>;
 export {};

package/dist/node/utilities/apiRoutes.js

@@ -1,38 +1,51 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.renderApiRoute = exports.getApiRouteFromURL = exports.getApiRoutes = void 0;
+exports.renderApiRoute = exports.getApiRouteFromURL = exports.getApiRoutes = exports.extractPathFromRoutesKey = void 0;
 const matchPath_1 = require("./matchPath");
 const log_1 = require("../utilities/log/");
 const fetch_1 = require("./fetch");
+const findRoutePrefix_1 = require("./findRoutePrefix");
 const storefrontApi_1 = require("./storefrontApi");
 const session_1 = require("../foundation/session/session");
-let memoizedRoutes = [];
-let memoizedPages = {};
-function getApiRoutes(pages, topLevelPath = '*') {
-    if (!pages || memoizedPages === pages)
-        return memoizedRoutes;
+let memoizedApiRoutes = [];
+let memoizedRawRoutes = {};
+function extractPathFromRoutesKey(routesKey, dirPrefix) {
+    let path = routesKey
+        .replace(dirPrefix, '')
+        .replace(/\.server\.(t|j)sx?$/, '')
+        /**
+         * Replace /index with /
+         */
+        .replace(/\/index$/i, '/')
+        /**
+         * Only lowercase the first letter. This allows the developer to use camelCase
+         * dynamic paths while ensuring their standard routes are normalized to lowercase.
+         */
+        .replace(/\b[A-Z]/, (firstLetter) => firstLetter.toLowerCase())
+        /**
+         * Convert /[handle].jsx and /[...handle].jsx to /:handle.jsx for react-router-dom
+         */
+        .replace(/\[(?:[.]{3})?(\w+?)\]/g, (_match, param) => `:${param}`);
+    if (path.endsWith('/') && path !== '/') {
+        path = path.substring(0, path.length - 1);
+    }
+    return path;
+}
+exports.extractPathFromRoutesKey = extractPathFromRoutesKey;
+function getApiRoutes(rawRoutes) {
+    var _a, _b;
+    const routes = ((_a = rawRoutes.files) !== null && _a !== void 0 ? _a : rawRoutes);
+    const topLevelPath = ((_b = rawRoutes.basePath) !== null && _b !== void 0 ? _b : '*');
+    const dirPrefix = rawRoutes.dirPrefix;
+    if (!routes || memoizedRawRoutes === routes)
+        return memoizedApiRoutes;
     const topLevelPrefix = topLevelPath.replace('*', '').replace(/\/$/, '');
-    const routes = Object.keys(pages)
-        .filter((key) => pages[key].api)
+    const keys = Object.keys(routes);
+    const commonRoutePrefix = dirPrefix !== null && dirPrefix !== void 0 ? dirPrefix : (0, findRoutePrefix_1.findRoutePrefix)(keys);
+    const apiRoutes = keys
+        .filter((key) => routes[key].api)
         .map((key) => {
-        let path = key
-            .replace('./routes', '')
-            .replace(/\.server\.(t|j)sx?$/, '')
-            /**
-             * Replace /index with /
-             */
-            .replace(/\/index$/i, '/')
-            /**
-             * Only lowercase the first letter. This allows the developer to use camelCase
-             * dynamic paths while ensuring their standard routes are normalized to lowercase.
-             */
-            .replace(/\b[A-Z]/, (firstLetter) => firstLetter.toLowerCase())
-            /**
-             * Convert /[handle].jsx and /[...handle].jsx to /:handle.jsx for react-router-dom
-             */
-            .replace(/\[(?:[.]{3})?(\w+?)\]/g, (_match, param) => `:${param}`);
-        if (path.endsWith('/') && path !== '/')
-            path = path.substring(0, path.length - 1);
+        const path = extractPathFromRoutesKey(key, commonRoutePrefix);
         /**
          * Catch-all routes [...handle].jsx don't need an exact match
          * https://reactrouter.com/core/api/Route/exact-bool
@@ -40,17 +53,17 @@ function getApiRoutes(pages, topLevelPath = '*') {
         const exact = !/\[(?:[.]{3})(\w+?)\]/.test(key);
         return {
             path: topLevelPrefix + path,
-            resource: pages[key].api,
-            hasServerComponent: !!pages[key].default,
+            resource: routes[key].api,
+            hasServerComponent: !!routes[key].default,
             exact,
         };
     });
-    memoizedRoutes = [
-        ...routes.filter((route) => !route.path.includes(':')),
-        ...routes.filter((route) => route.path.includes(':')),
+    memoizedApiRoutes = [
+        ...apiRoutes.filter((route) => !route.path.includes(':')),
+        ...apiRoutes.filter((route) => route.path.includes(':')),
     ];
-    memoizedPages = pages;
-    return memoizedRoutes;
+    memoizedRawRoutes = routes;
+    return memoizedApiRoutes;
 }
 exports.getApiRoutes = getApiRoutes;
 function getApiRouteFromURL(url, routes) {
@@ -71,8 +84,14 @@ function getApiRouteFromURL(url, routes) {
     };
 }
 exports.getApiRouteFromURL = getApiRouteFromURL;
-function queryShopBuilder(shopifyConfig, request) {
+function queryShopBuilder(shopifyConfigGetter, request) {
     return async function queryShop({ query, variables, }) {
+        const shopifyConfig = typeof shopifyConfigGetter === 'function'
+            ? await shopifyConfigGetter(request)
+            : shopifyConfigGetter;
+        if (!shopifyConfig) {
+            throw new Error('Shopify connection info was not found in Hydrogen config');
+        }
         const { storeDomain, storefrontApiVersion, storefrontToken } = shopifyConfig;
         const buyerIp = request.getBuyerIp();
         const extraHeaders = (0, storefrontApi_1.getStorefrontApiRequestHeaders)({

package/dist/node/utilities/bot-ua.js

@@ -44,6 +44,9 @@ const botUserAgents = [
     'W3C_Validator',
     'WhatsApp',
     'yandex',
+    // SEO Tools
+    'Seoradar',
+    'W3C html2txt',
 ];
 /**
  * Creates a regex based on the botUserAgents array

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

@@ -0,0 +1 @@
+export declare function findRoutePrefix([first, ...rest]: string[]): string | RegExp;

package/dist/node/utilities/findRoutePrefix.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.findRoutePrefix = void 0;
+const DEFAULT_ROUTE_PREFIX = /^\.(\/src)?\/routes/;
+function findRoutePrefix([first, ...rest]) {
+    if (!(first === null || first === void 0 ? void 0 : first.startsWith('./')))
+        return '';
+    let commonPrefix = '.';
+    if (rest.length > 0) {
+        const parts = first.split('/');
+        parts.pop(); // Last part is always different and has extension
+        for (const string of rest) {
+            const tmp = string.split('/');
+            const diffIndex = parts.findIndex((part, index) => part !== tmp[index]);
+            diffIndex >= 0 && parts.splice(diffIndex);
+        }
+        commonPrefix = parts.join('/');
+    }
+    return commonPrefix === '.' ? DEFAULT_ROUTE_PREFIX : commonPrefix;
+}
+exports.findRoutePrefix = findRoutePrefix;

package/dist/node/utilities/log/utils.js

@@ -6,7 +6,7 @@ function findQueryName(key) {
     if (key.length < 100) {
         return key.replace('"__QUERY_CACHE_ID__"', '').replace(/"/g, '');
     }
-    const match = decodeKey.match(/query ([^\s\()]*)\s?(|\(\{)/);
+    const match = decodeKey.match(/query ([^\s()]*)\s?(|\(\{)/);
     if (match && match.length > 1) {
         return match[1];
     }

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

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

package/dist/node/utilities/parse.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.parseJSON = void 0;
+function parseJSON(json) {
+    if (String(json).includes('__proto__'))
+        return JSON.parse(json, noproto);
+    return JSON.parse(json);
+}
+exports.parseJSON = parseJSON;
+function noproto(k, v) {
+    if (k !== '__proto__')
+        return v;
+}

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

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.parseMetafieldValue = void 0;
+const parse_1 = require("../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`.
  */
@@ -23,7 +24,7 @@ function parseMetafieldValue(metafield) {
         case 'dimension':
         case 'volume':
         case 'rating':
-            return JSON.parse(metafield.value);
+            return (0, parse_1.parseJSON)(metafield.value);
         case 'color':
         case 'single_line_text_field':
         case 'multi_line_text_field':

package/dist/node/utilities/storefrontApi.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getStorefrontApiRequestHeaders = void 0;
+/* global Oxygen */
 const constants_1 = require("../constants");
 function getStorefrontApiRequestHeaders({ buyerIp, storefrontToken, }) {
     var _a;

package/dist/node/version.d.ts

@@ -1 +1 @@
-export declare const LIB_VERSION = "0.17.1";
+export declare const LIB_VERSION = "0.18.0";

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.17.1';
+exports.LIB_VERSION = '0.18.0';

package/package.json

@@ -7,7 +7,7 @@
   "engines": {
     "node": ">=14"
   },
-  "version": "0.17.1",
+  "version": "0.18.0",
   "description": "Modern custom Shopify storefronts",
   "license": "MIT",
   "main": "dist/esnext/index.js",
@@ -21,6 +21,8 @@
     "entry-server.d.ts",
     "client.js",
     "client.d.ts",
+    "config.js",
+    "config.d.ts",
     "entry-client.js",
     "entry-client.d.ts",
     "marker.js",
@@ -70,8 +72,8 @@
     "@types/node-fetch": "^2.5.9",
     "@types/react": "^17.0.3",
     "@types/react-dom": "^17.0.3",
-    "@types/ws": "^8.2.0",
     "@types/uuid": "^8.3.4",
+    "@types/ws": "^8.2.0",
     "babel-loader": "^8.2.2",
     "cpy-cli": "3.1.1",
     "mkdirp": "^1.0.4",
@@ -81,7 +83,7 @@
     "rimraf": "^3.0.2"
   },
   "peerDependencies": {
-    "body-parser": "^1.19.1",
+    "body-parser": "^1.20.0",
     "compression": "^1.7.4",
     "react": "0.0.0-experimental-2bf7c02f0-20220314",
     "react-dom": "0.0.0-experimental-2bf7c02f0-20220314",
@@ -102,9 +104,7 @@
   "dependencies": {
     "@vitejs/plugin-react": "^1.3.0",
     "abort-controller": "^3.0.0",
-    "worktop": "^0.7.3",
-    "uuid": "^8.3.2",
-    "body-parser": "^1.19.2",
+    "body-parser": "^1.20.0",
     "connect": "^3.7.0",
     "es-module-lexer": "^0.10.0",
     "fast-glob": "^3.2.11",
@@ -116,7 +116,9 @@
     "path-to-regexp": "^6.2.0",
     "react-error-boundary": "^3.1.3",
     "react-helmet-async": "^1.2.3",
+    "uuid": "^8.3.2",
     "vite-plugin-inspect": "^0.3.6",
-    "web-streams-polyfill": "^3.2.0"
+    "web-streams-polyfill": "^3.2.0",
+    "worktop": "^0.7.3"
   }
 }

package/dist/esnext/foundation/Boomerang/Boomerang.client.d.ts

@@ -1,9 +0,0 @@
-declare global {
-    interface Window {
-        BOOMR: any;
-        BOOMR_onload: any;
-    }
-}
-export declare function Boomerang({ pageTemplate }: {
-    pageTemplate: string | null;
-}): null;

package/dist/esnext/foundation/Boomerang/Boomerang.client.js

@@ -1,66 +0,0 @@
-import { useEffect } from 'react';
-import { loadScript } from '../../utilities';
-import { useShop } from '../useShop';
-const URL = 'https://cdn.shopify.com/shopifycloud/boomerang/shopify-boomerang-hydrogen.min.js';
-export function Boomerang({ pageTemplate }) {
-    const { storeDomain } = useShop();
-    const templateName = pageTemplate && pageTemplate !== null
-        ? pageTemplate.toLowerCase()
-        : 'not-set';
-    useEffect(() => {
-        (function () {
-            function boomerangAddVar() {
-                if (window.BOOMR && window.BOOMR.addVar) {
-                    window.BOOMR.addVar('page_template', templateName);
-                }
-            }
-            // Executes on every mount
-            boomerangAddVar();
-            if (window.BOOMR &&
-                (window.BOOMR.version || window.BOOMR.snippetExecuted)) {
-                return;
-            }
-            // Executes only on first mount
-            window.BOOMR = window.BOOMR || {};
-            window.BOOMR.storeDomain = storeDomain;
-            window.BOOMR.pageTemplate = templateName;
-            function boomerangSaveLoadTime(e) {
-                window.BOOMR_onload = (e && e.timeStamp) || Date.now();
-            }
-            // @ts-ignore
-            function boomerangInit(e) {
-                e.detail.BOOMR.init({
-                    producer_url: 'https://monorail-edge.shopifysvc.com/v1/produce',
-                });
-                e.detail.BOOMR.t_end = Date.now();
-                boomerangAddVar();
-            }
-            if (window.addEventListener) {
-                window.addEventListener('load', boomerangSaveLoadTime, false);
-                // @ts-ignore
-            }
-            else if (window.attachEvent) {
-                // @ts-ignore
-                window.attachEvent('onload', boomerangSaveLoadTime);
-            }
-            if (document.addEventListener) {
-                document.addEventListener('onBoomerangLoaded', boomerangInit);
-                // @ts-ignore
-            }
-            else if (document.attachEvent) {
-                // @ts-ignore
-                document.attachEvent('onpropertychange', function (e) {
-                    if (!e)
-                        e = event;
-                    if (e.propertyName === 'onBoomerangLoaded')
-                        boomerangInit(e);
-                });
-            }
-        })();
-        loadScript(URL).catch(() => {
-            // ignore if boomerang doesn't load
-            // most likely because of a ad blocker
-        });
-    }, [storeDomain, pageTemplate]);
-    return null;
-}