npm - @shopify/hydrogen - Versions diffs - 0.7.0 → 0.8.2 - Mend

@shopify/hydrogen 0.7.0 → 0.8.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (132) hide show

package/dist/node/handle-event.d.ts CHANGED Viewed

@@ -1,5 +1,5 @@
 /// <reference types="node" />
-import type { ServerResponse } from 'http';
+import { ServerResponse } from 'http';
 import type { ServerComponentRequest } from './framework/Hydration/ServerComponentRequest.server';
 import { RuntimeContext } from './framework/runtime';
 interface HydrogenFetchEvent {

package/dist/node/handle-event.js CHANGED Viewed

@@ -9,9 +9,9 @@ async function handleEvent(event, { request, entrypoint, indexTemplate, assetHan
     /**
      * Inject the cache & context into the module loader so we can pull it out for subrequests.
      */
-    runtime_1.setCache(cache);
-    runtime_1.setContext(context);
-    config_1.setConfig({ dev });
+    (0, runtime_1.setCache)(cache);
+    (0, runtime_1.setContext)(context);
+    (0, config_1.setConfig)({ dev });
     const isReactHydrationRequest = url.pathname === '/react';
     const template = typeof indexTemplate === 'function'
         ? await indexTemplate(url.toString())
@@ -29,7 +29,8 @@ async function handleEvent(event, { request, entrypoint, indexTemplate, assetHan
         throw new Error(`entry-server.jsx could not be loaded. This likely occurred because of a Vite compilation error.\n` +
             `Please check your server logs for more information.`);
     }
-    const isStreamable = streamableResponse && isStreamableRequest(url);
+    const userAgent = request.headers.get('user-agent');
+    const isStreamable = streamableResponse && !isBotUA(url, userAgent);
     /**
      * Stream back real-user responses, but for bots/etc,
      * use `render` instead. This is because we need to inject <head>
@@ -37,7 +38,12 @@ async function handleEvent(event, { request, entrypoint, indexTemplate, assetHan
      */
     if (isStreamable) {
         if (isReactHydrationRequest) {
-            hydrate(url, { context: {}, request, response: streamableResponse, dev });
+            hydrate(url, {
+                context: {},
+                request,
+                response: streamableResponse,
+                dev,
+            });
         }
         else {
             stream(url, {
@@ -50,13 +56,18 @@ async function handleEvent(event, { request, entrypoint, indexTemplate, assetHan
         }
         return;
     }
-    const { body, bodyAttributes, htmlAttributes, componentResponse, ...head } = await render(url, { request, context: {}, isReactHydrationRequest, dev });
+    const { body, bodyAttributes, htmlAttributes, componentResponse, ...head } = await render(url, {
+        request,
+        context: {},
+        isReactHydrationRequest,
+        dev,
+    });
     const headers = componentResponse.headers;
     /**
      * TODO: Also add `Vary` headers for `accept-language` and any other keys
      * we want to shard our full-page cache for all Hydrogen storefronts.
      */
-    headers.set(cache_1.getCacheControlHeader({ dev }), componentResponse.cacheControlHeader);
+    headers.set((0, cache_1.getCacheControlHeader)({ dev }), componentResponse.cacheControlHeader);
     if (componentResponse.customBody) {
         const { status, customStatus } = componentResponse;
         return new Response(await componentResponse.customBody, {
@@ -89,13 +100,6 @@ async function handleEvent(event, { request, entrypoint, indexTemplate, assetHan
     return response;
 }
 exports.default = handleEvent;
-function isStreamableRequest(url) {
-    /**
-     * TODO: Add UA detection.
-     */
-    const isBot = url.searchParams.has('_bot');
-    return !isBot;
-}
 /**
  * Generate the contents of the `head` tag, and update the existing `<title>` tag
  * if one exists, and if a title is passed.
@@ -120,3 +124,57 @@ function generateHeadTag(head) {
         return `<head>${headHtml}</head>`;
     };
 }
+/**
+ * Determines if the request is from a bot, using the URL and User Agent
+ */
+function isBotUA(url, userAgent) {
+    return (url.searchParams.has('_bot') || (!!userAgent && botUARegex.test(userAgent)));
+}
+/**
+ * An alphabetized list of User Agents of known bots, combined from lists found at:
+ * https://github.com/vercel/next.js/blob/d87dc2b5a0b3fdbc0f6806a47be72bad59564bd0/packages/next/server/utils.ts#L18-L22
+ * https://github.com/GoogleChrome/rendertron/blob/6f681688737846b28754fbfdf5db173846a826df/middleware/src/middleware.ts#L24-L41
+ */
+const botUserAgents = [
+    'AdsBot-Google',
+    'applebot',
+    'Baiduspider',
+    'baiduspider',
+    'bingbot',
+    'Bingbot',
+    'BingPreview',
+    'bitlybot',
+    'Discordbot',
+    'DuckDuckBot',
+    'Embedly',
+    'facebookcatalog',
+    'facebookexternalhit',
+    'Google-PageRenderer',
+    'Googlebot',
+    'googleweblight',
+    'ia_archive',
+    'LinkedInBot',
+    'Mediapartners-Google',
+    'outbrain',
+    'pinterest',
+    'quora link preview',
+    'redditbot',
+    'rogerbot',
+    'showyoubot',
+    'SkypeUriPreview',
+    'Slackbot',
+    'Slurp',
+    'sogou',
+    'Storebot-Google',
+    'TelegramBot',
+    'tumblr',
+    'Twitterbot',
+    'vkShare',
+    'W3C_Validator',
+    'WhatsApp',
+    'yandex',
+];
+/**
+ * Creates a regex based on the botUserAgents array
+ */
+const botUARegex = new RegExp(botUserAgents.join('|'), 'i');

package/dist/node/types.d.ts CHANGED Viewed

@@ -1,5 +1,5 @@
 /// <reference types="node" />
-import type { ServerResponse } from 'http';
+import { ServerResponse } from 'http';
 import type { ServerComponentResponse } from './framework/Hydration/ServerComponentResponse.server';
 import type { ServerComponentRequest } from './framework/Hydration/ServerComponentRequest.server';
 import type { Metafield, Image, MediaContentType } from './graphql/types/types';
@@ -78,6 +78,7 @@ export interface Measurement {
     unit: string;
     value: number;
 }
+export declare type QueryKey = string | readonly unknown[];
 export interface CacheOptions {
     private?: boolean;
     maxAge?: number;

package/dist/node/utilities/fetch.js CHANGED Viewed

@@ -41,13 +41,16 @@ function fetchBuilder(request) {
             headers,
             method: clonedRequest.method,
         });
+        if (!response.ok) {
+            throw response;
+        }
         const data = await response.json();
         return data;
     };
 }
 exports.fetchBuilder = fetchBuilder;
 function graphqlRequestBody(query, variables) {
-    const queryString = typeof query === 'string' ? query : graphql_1.print(query);
+    const queryString = typeof query === 'string' ? query : (0, graphql_1.print)(query);
     return JSON.stringify({
         query: queryString,
         variables,
@@ -55,12 +58,6 @@ function graphqlRequestBody(query, variables) {
 }
 exports.graphqlRequestBody = graphqlRequestBody;
 function decodeShopifyId(id) {
-    if (!id.startsWith('gid://')) {
-        id =
-            typeof btoa !== 'undefined'
-                ? btoa(id)
-                : Buffer.from(id, 'base64').toString('ascii');
-    }
     if (!id.startsWith('gid://')) {
         throw new Error('invalid Shopify ID');
     }

package/dist/node/utilities/index.d.ts CHANGED Viewed

@@ -8,3 +8,4 @@ export { isServer } from './isServer';
 export { getMeasurementAsParts, getMeasurementAsString } from './measurement';
 export { parseMetafieldValue } from './parseMetafieldValue';
 export { fetchBuilder, graphqlRequestBody, decodeShopifyId } from './fetch';
+export { getTime } from './timing';

package/dist/node/utilities/index.js CHANGED Viewed

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.decodeShopifyId = exports.graphqlRequestBody = exports.fetchBuilder = exports.parseMetafieldValue = exports.getMeasurementAsString = exports.getMeasurementAsParts = exports.isServer = exports.isClient = exports.flattenConnection = exports.wrapPromise = exports.loadScript = exports.useEmbeddedVideoUrl = exports.addParametersToEmbeddedVideoUrl = exports.shopifyImageLoader = exports.getShopifyImageDimensions = exports.useImageUrl = exports.addImageSizeParametersToUrl = void 0;
+exports.getTime = exports.decodeShopifyId = exports.graphqlRequestBody = exports.fetchBuilder = exports.parseMetafieldValue = exports.getMeasurementAsString = exports.getMeasurementAsParts = exports.isServer = exports.isClient = exports.flattenConnection = exports.wrapPromise = exports.loadScript = exports.useEmbeddedVideoUrl = exports.addParametersToEmbeddedVideoUrl = exports.shopifyImageLoader = exports.getShopifyImageDimensions = exports.useImageUrl = exports.addImageSizeParametersToUrl = void 0;
 var image_size_1 = require("./image_size");
 Object.defineProperty(exports, "addImageSizeParametersToUrl", { enumerable: true, get: function () { return image_size_1.addImageSizeParametersToUrl; } });
 Object.defineProperty(exports, "useImageUrl", { enumerable: true, get: function () { return image_size_1.useImageUrl; } });
@@ -28,3 +28,5 @@ var fetch_1 = require("./fetch");
 Object.defineProperty(exports, "fetchBuilder", { enumerable: true, get: function () { return fetch_1.fetchBuilder; } });
 Object.defineProperty(exports, "graphqlRequestBody", { enumerable: true, get: function () { return fetch_1.graphqlRequestBody; } });
 Object.defineProperty(exports, "decodeShopifyId", { enumerable: true, get: function () { return fetch_1.decodeShopifyId; } });
+var timing_1 = require("./timing");
+Object.defineProperty(exports, "getTime", { enumerable: true, get: function () { return timing_1.getTime; } });

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

@@ -6,6 +6,6 @@ const isClient_1 = require("../isClient");
  * if the code was run on the server.
  */
 function isServer() {
-    return !isClient_1.isClient();
+    return !(0, isClient_1.isClient)();
 }
 exports.isServer = isServer;

package/dist/node/utilities/suspense.d.ts CHANGED Viewed

@@ -2,6 +2,6 @@
  * Wrap the fetch promise in a way that React Suspense understands.
  * Essentially, keep throwing something until you have legit data.
  */
-export declare function wrapPromise(promise: Promise<any>): {
-    read: () => any;
+export declare function wrapPromise<T>(promise: Promise<T>): {
+    read: () => T;
 };

package/dist/node/utilities/suspense.js CHANGED Viewed

@@ -14,14 +14,8 @@ function wrapPromise(promise) {
     }, (err) => {
         status = 'error';
         response = err;
-        throw err;
     });
     const read = () => {
-        /**
-         * TODO: This logic doesn't hold up when an error is thrown. For some reason.
-         * We instead throw the exception above in the suspender. We should revisit
-         * this and add a better server fetch implementation.
-         */
         switch (status) {
             case 'pending':
                 throw suspender;

package/dist/node/utilities/timing.d.ts ADDED Viewed

@@ -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/node/utilities/timing.js ADDED Viewed

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getTime = void 0;
+/**
+ * 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
+ */
+function getTime() {
+    if (typeof performance !== 'undefined' && performance.now) {
+        return performance.now();
+    }
+    else {
+        return Date.now();
+    }
+}
+exports.getTime = getTime;

package/dist/node/utilities/video_parameters.js CHANGED Viewed

@@ -17,7 +17,7 @@ function addParametersToEmbeddedVideoUrl(url, parameters) {
 }
 exports.addParametersToEmbeddedVideoUrl = addParametersToEmbeddedVideoUrl;
 function useEmbeddedVideoUrl(url, parameters) {
-    return react_1.useMemo(() => {
+    return (0, react_1.useMemo)(() => {
         if (!parameters) {
             return url;
         }

package/dist/node/version.d.ts CHANGED Viewed

	@@ -1 +1 @@
1	- export declare const LIB_VERSION = "0.7.0";
1	+ export declare const LIB_VERSION = "0.8.2";

package/dist/node/version.js CHANGED Viewed

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

package/dist/worker/framework/Hydration/ServerComponentRequest.server.d.ts CHANGED Viewed

@@ -7,6 +7,7 @@
  */
 export declare class ServerComponentRequest extends Request {
     cookies: Map<string, string>;
+    time: number;
     constructor(input: any);
     constructor(input: RequestInfo, init?: RequestInit);
     private parseCookies;

package/dist/worker/framework/Hydration/ServerComponentRequest.server.js CHANGED Viewed

@@ -1,3 +1,4 @@
+import { getTime } from '../../utilities/timing';
 /**
  * This augments the `Request` object from the Fetch API:
  * @see https://developer.mozilla.org/en-US/docs/Web/API/Request
@@ -16,6 +17,7 @@ export class ServerComponentRequest extends Request {
                 method: input.method,
             });
         }
+        this.time = getTime();
         this.cookies = this.parseCookies();
     }
     parseCookies() {

package/dist/worker/framework/cache.d.ts CHANGED Viewed

@@ -1,5 +1,4 @@
-import type { QueryKey } from 'react-query';
-import type { CacheOptions } from '../types';
+import type { CacheOptions, QueryKey } from '../types';
 export declare function generateCacheControlHeader(options: CacheOptions): string;
 /**
  * Use a preview header during development.
@@ -9,6 +8,7 @@ export declare function generateCacheControlHeader(options: CacheOptions): strin
 export declare function getCacheControlHeader({ dev }: {
     dev?: boolean;
 }): "cache-control-preview" | "cache-control";
+export declare function hashKey(key: QueryKey): string;
 /**
  * Get an item from the cache. If a match is found, returns a tuple
  * containing the `JSON.parse` version of the response as well

package/dist/worker/framework/cache.js CHANGED Viewed

@@ -21,7 +21,7 @@ export function generateCacheControlHeader(options) {
 export function getCacheControlHeader({ dev }) {
     return dev ? 'cache-control-preview' : 'cache-control';
 }
-function hashKey(key) {
+export function hashKey(key) {
     const rawKey = key instanceof Array ? key : [key];
     /**
      * TODO: Smarter hash

package/dist/worker/handle-event.d.ts CHANGED Viewed

@@ -1,5 +1,5 @@
 /// <reference types="@types/node" />
-import type { ServerResponse } from 'http';
+import { ServerResponse } from 'http';
 import type { ServerComponentRequest } from './framework/Hydration/ServerComponentRequest.server';
 import { RuntimeContext } from './framework/runtime';
 interface HydrogenFetchEvent {

package/dist/worker/handle-event.js CHANGED Viewed

@@ -27,7 +27,8 @@ export default async function handleEvent(event, { request, entrypoint, indexTem
         throw new Error(`entry-server.jsx could not be loaded. This likely occurred because of a Vite compilation error.\n` +
             `Please check your server logs for more information.`);
     }
-    const isStreamable = streamableResponse && isStreamableRequest(url);
+    const userAgent = request.headers.get('user-agent');
+    const isStreamable = streamableResponse && !isBotUA(url, userAgent);
     /**
      * Stream back real-user responses, but for bots/etc,
      * use `render` instead. This is because we need to inject <head>
@@ -35,7 +36,12 @@ export default async function handleEvent(event, { request, entrypoint, indexTem
      */
     if (isStreamable) {
         if (isReactHydrationRequest) {
-            hydrate(url, { context: {}, request, response: streamableResponse, dev });
+            hydrate(url, {
+                context: {},
+                request,
+                response: streamableResponse,
+                dev,
+            });
         }
         else {
             stream(url, {
@@ -48,7 +54,12 @@ export default async function handleEvent(event, { request, entrypoint, indexTem
         }
         return;
     }
-    const { body, bodyAttributes, htmlAttributes, componentResponse, ...head } = await render(url, { request, context: {}, isReactHydrationRequest, dev });
+    const { body, bodyAttributes, htmlAttributes, componentResponse, ...head } = await render(url, {
+        request,
+        context: {},
+        isReactHydrationRequest,
+        dev,
+    });
     const headers = componentResponse.headers;
     /**
      * TODO: Also add `Vary` headers for `accept-language` and any other keys
@@ -86,13 +97,6 @@ export default async function handleEvent(event, { request, entrypoint, indexTem
     }
     return response;
 }
-function isStreamableRequest(url) {
-    /**
-     * TODO: Add UA detection.
-     */
-    const isBot = url.searchParams.has('_bot');
-    return !isBot;
-}
 /**
  * Generate the contents of the `head` tag, and update the existing `<title>` tag
  * if one exists, and if a title is passed.
@@ -117,3 +121,57 @@ function generateHeadTag(head) {
         return `<head>${headHtml}</head>`;
     };
 }
+/**
+ * Determines if the request is from a bot, using the URL and User Agent
+ */
+function isBotUA(url, userAgent) {
+    return (url.searchParams.has('_bot') || (!!userAgent && botUARegex.test(userAgent)));
+}
+/**
+ * An alphabetized list of User Agents of known bots, combined from lists found at:
+ * https://github.com/vercel/next.js/blob/d87dc2b5a0b3fdbc0f6806a47be72bad59564bd0/packages/next/server/utils.ts#L18-L22
+ * https://github.com/GoogleChrome/rendertron/blob/6f681688737846b28754fbfdf5db173846a826df/middleware/src/middleware.ts#L24-L41
+ */
+const botUserAgents = [
+    'AdsBot-Google',
+    'applebot',
+    'Baiduspider',
+    'baiduspider',
+    'bingbot',
+    'Bingbot',
+    'BingPreview',
+    'bitlybot',
+    'Discordbot',
+    'DuckDuckBot',
+    'Embedly',
+    'facebookcatalog',
+    'facebookexternalhit',
+    'Google-PageRenderer',
+    'Googlebot',
+    'googleweblight',
+    'ia_archive',
+    'LinkedInBot',
+    'Mediapartners-Google',
+    'outbrain',
+    'pinterest',
+    'quora link preview',
+    'redditbot',
+    'rogerbot',
+    'showyoubot',
+    'SkypeUriPreview',
+    'Slackbot',
+    'Slurp',
+    'sogou',
+    'Storebot-Google',
+    'TelegramBot',
+    'tumblr',
+    'Twitterbot',
+    'vkShare',
+    'W3C_Validator',
+    'WhatsApp',
+    'yandex',
+];
+/**
+ * Creates a regex based on the botUserAgents array
+ */
+const botUARegex = new RegExp(botUserAgents.join('|'), 'i');

package/dist/worker/types.d.ts CHANGED Viewed

@@ -1,5 +1,5 @@
 /// <reference types="@types/node" />
-import type { ServerResponse } from 'http';
+import { ServerResponse } from 'http';
 import type { ServerComponentResponse } from './framework/Hydration/ServerComponentResponse.server';
 import type { ServerComponentRequest } from './framework/Hydration/ServerComponentRequest.server';
 import type { Metafield, Image, MediaContentType } from './graphql/types/types';
@@ -78,6 +78,7 @@ export interface Measurement {
     unit: string;
     value: number;
 }
+export declare type QueryKey = string | readonly unknown[];
 export interface CacheOptions {
     private?: boolean;
     maxAge?: number;

package/dist/worker/utilities/timing.d.ts ADDED Viewed

@@ -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/worker/utilities/timing.js ADDED Viewed

@@ -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/package.json CHANGED Viewed

@@ -4,7 +4,7 @@
     "access": "public",
     "@shopify:registry": "https://registry.npmjs.org"
   },
-  "version": "0.7.0",
+  "version": "0.8.2",
   "description": "Modern custom Shopify storefronts",
   "license": "MIT",
   "main": "dist/esnext/index.js",
@@ -68,36 +68,36 @@
     "@types/react": "^17.0.3",
     "@types/react-dom": "^17.0.3",
     "@types/react-router-dom": "^5.1.7",
+    "@types/ws": "^8.2.0",
     "babel-loader": "^8.2.2",
     "cpy-cli": "3.1.1",
     "mkdirp": "^1.0.4",
     "postcss": "^8",
     "raw-loader": "^4.0.2",
-    "rimraf": "^3.0.2",
-    "tailwindcss": "^2.1.1"
+    "rimraf": "^3.0.2"
   },
   "peerDependencies": {
-    "react": "^18",
-    "react-dom": "^18",
+    "react": "0.0.0-experimental-0cc724c77-20211125",
+    "react-dom": "0.0.0-experimental-0cc724c77-20211125",
     "react-router-dom": "^5.2.0",
-    "vite": "^2.6.14"
+    "vite": "^2.7.0"
   },
   "dependencies": {
-    "@vitejs/plugin-react": "^1.0.8",
+    "@vitejs/plugin-react": "^1.1.1",
     "connect": "^3.7.0",
     "es-module-lexer": "^0.9.0",
     "fast-glob": "^3.2.5",
-    "graphql": "^15.5.0",
+    "graphql": "^16.0.1",
     "html-dom-parser": "^1.0.1",
     "html-react-parser": "^1.2.6",
     "isomorphic-dompurify": "^0.13.0",
+    "kolorist": "^1.5.1",
     "magic-string": "^0.25.7",
     "node-fetch": "^2.6.1",
     "react-error-boundary": "^3.1.3",
     "react-helmet-async": "^1.0.9",
-    "react-query": "^3.18.1",
     "react-ssr-prepass": "^1.4.0",
     "vite-plugin-inspect": "^0.3.6"
   },
-  "gitHead": "29de6d971edb5f91199362723594d29ed4765260"
+  "gitHead": "587f117221ab94a06165e69602658c4e561f5723"
 }

package/dist/esnext/foundation/useQuery/QueryProvider.d.ts DELETED Viewed

@@ -1,6 +0,0 @@
-import { ReactNode } from 'react';
-import type { ReactQueryHydrationContext } from '../../foundation/ShopifyProvider/types';
-export declare function QueryProvider({ children, hydrationContext, }: {
-    children: ReactNode;
-    hydrationContext?: ReactQueryHydrationContext;
-}): JSX.Element;

package/dist/esnext/foundation/useQuery/QueryProvider.js DELETED Viewed

@@ -1,13 +0,0 @@
-import React from 'react';
-import { QueryClientProvider, QueryClient } from 'react-query';
-import { Hydrate } from 'react-query/hydration';
-export function QueryProvider({ children, hydrationContext, }) {
-    const queryClient = new QueryClient({
-        defaultOptions: { queries: { suspense: true } },
-    });
-    if (hydrationContext) {
-        hydrationContext.queryClient = queryClient;
-    }
-    return (React.createElement(QueryClientProvider, { client: queryClient },
-        React.createElement(Hydrate, { state: hydrationContext === null || hydrationContext === void 0 ? void 0 : hydrationContext.dehydratedState }, children)));
-}