npm - @shopify/hydrogen - Versions diffs - 0.8.0 → 0.8.1 - Mend

@shopify/hydrogen 0.8.0 → 0.8.1

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 (59) hide show

package/dist/esnext/components/CartLineQuantityAdjustButton/CartLineQuantityAdjustButton.js CHANGED Viewed

@@ -17,6 +17,10 @@ export function CartLineQuantityAdjustButton(props) {
                 return;
             }
             const quantity = adjust === 'decrease' ? cartLine.quantity - 1 : cartLine.quantity + 1;
+            if (quantity <= 0) {
+                removeLines([cartLine.id]);
+                return;
+            }
             updateLines([{ id: cartLine.id, quantity }]);
         }, ...passthroughProps }, children));
 }

package/dist/esnext/entry-server.js CHANGED Viewed

@@ -1,7 +1,11 @@
 import React from 'react';
-import { renderToReadableStream, pipeToNodeWritable,
+import {
 // @ts-ignore
- } from 'react-dom/unstable-fizz';
+renderToPipeableStream, // Only available in Node context
+// @ts-ignore
+renderToReadableStream, // Only available in Browser/Worker context
+ } from 'react-dom/server';
+import { logServerResponse } from './utilities/log/log';
 import { renderToString } from 'react-dom/server';
 import { getErrorMarkup } from './utilities/error';
 import ssrPrepass from 'react-ssr-prepass';
@@ -32,7 +36,7 @@ const renderHydrogen = (App, hook) => {
      * and returning any initial state that needs to be hydrated into the client version of the app.
      * NOTE: This is currently only used for SEO bots or Worker runtime (where Stream is not yet supported).
      */
-    const render = async function (url, { context, request, isReactHydrationRequest, dev }) {
+    const render = async function (url, { context, request, isReactHydrationRequest, dev, log }) {
         var _a, _b;
         const state = isReactHydrationRequest
             ? JSON.parse((_b = (_a = url.searchParams) === null || _a === void 0 ? void 0 : _a.get('state')) !== null && _b !== void 0 ? _b : '{}')
@@ -43,8 +47,9 @@ const renderHydrogen = (App, hook) => {
             context,
             request,
             dev,
+            log,
         });
-        const body = await renderApp(ReactApp, state, isReactHydrationRequest);
+        const body = await renderApp(ReactApp, state, log, isReactHydrationRequest);
         if (componentResponse.customBody) {
             return { body: await componentResponse.customBody, url, componentResponse };
         }
@@ -61,7 +66,7 @@ const renderHydrogen = (App, hook) => {
      * Stream a response to the client. NOTE: This omits custom `<head>`
      * information, so this method should not be used by crawlers.
      */
-    const stream = function (url, { context, request, response, template, dev }) {
+    const stream = function (url, { context, request, response, template, dev, log }) {
         const state = { pathname: url.pathname, search: url.search };
         const { ReactApp, componentResponse } = buildReactApp({
             App,
@@ -69,34 +74,36 @@ const renderHydrogen = (App, hook) => {
             context,
             request,
             dev,
+            log,
         });
         response.socket.on('error', (error) => {
-            console.error('Fatal', error);
+            log.fatal(error);
         });
         let didError;
         const head = template.match(/<head>(.+?)<\/head>/s)[1];
-        const { startWriting, abort } = pipeToNodeWritable(React.createElement(Html, { head: head },
-            React.createElement(ReactApp, { ...state })), response, {
-            onReadyToStream() {
+        const { pipe, abort } = renderToPipeableStream(React.createElement(Html, { head: head },
+            React.createElement(ReactApp, { ...state })), {
+            onCompleteShell() {
                 /**
                  * TODO: This assumes `response.cache()` has been called _before_ any
                  * queries which might be caught behind Suspense. Clarify this or add
                  * additional checks downstream?
                  */
                 response.setHeader(getCacheControlHeader({ dev }), componentResponse.cacheControlHeader);
-                writeHeadToServerResponse(response, componentResponse, didError);
+                writeHeadToServerResponse(request, response, componentResponse, log, didError);
                 if (isRedirect(response)) {
                     // Return redirects early without further rendering/streaming
                     return response.end();
                 }
                 if (!componentResponse.canStream())
                     return;
-                startWritingHtmlToServerResponse(response, startWriting, dev ? didError : undefined);
+                startWritingHtmlToServerResponse(response, pipe, dev ? didError : undefined);
             },
             onCompleteAll() {
+                clearTimeout(streamTimeout);
                 if (componentResponse.canStream() || response.writableEnded)
                     return;
-                writeHeadToServerResponse(response, componentResponse, didError);
+                writeHeadToServerResponse(request, response, componentResponse, log, didError);
                 if (isRedirect(response)) {
                     // Redirects found after any async code
                     return response.end();
@@ -110,7 +117,7 @@ const renderHydrogen = (App, hook) => {
                     }
                 }
                 else {
-                    startWritingHtmlToServerResponse(response, startWriting, dev ? didError : undefined);
+                    startWritingHtmlToServerResponse(response, pipe, dev ? didError : undefined);
                 }
             },
             onError(error) {
@@ -120,15 +127,22 @@ const renderHydrogen = (App, hook) => {
                     // Delay this error until headers are properly sent.
                     response.write(getErrorMarkup(error));
                 }
-                console.error(error);
+                log.error(error);
             },
         });
-        setTimeout(abort, STREAM_ABORT_TIMEOUT_MS);
+        const streamTimeout = setTimeout(() => {
+            const errorMessage = `The app failed to stream after ${STREAM_ABORT_TIMEOUT_MS} ms`;
+            log.error(errorMessage);
+            if (dev && response.headersSent) {
+                response.write(getErrorMarkup(new Error(errorMessage)));
+            }
+            abort();
+        }, STREAM_ABORT_TIMEOUT_MS);
     };
     /**
      * Stream a hydration response to the client.
      */
-    const hydrate = function (url, { context, request, response, dev }) {
+    const hydrate = function (url, { context, request, response, dev, log }) {
         const state = JSON.parse(url.searchParams.get('state') || '{}');
         const { ReactApp, componentResponse } = buildReactApp({
             App,
@@ -136,33 +150,41 @@ const renderHydrogen = (App, hook) => {
             context,
             request,
             dev,
+            log,
         });
         response.socket.on('error', (error) => {
-            console.error('Fatal', error);
+            log.fatal(error);
         });
         let didError;
         const writer = new HydrationWriter();
-        const { startWriting, abort } = pipeToNodeWritable(React.createElement(HydrationContext.Provider, { value: true },
-            React.createElement(ReactApp, { ...state })), writer, {
+        const { pipe, abort } = renderToPipeableStream(React.createElement(HydrationContext.Provider, { value: true },
+            React.createElement(ReactApp, { ...state })), {
             /**
              * When hydrating, we have to wait until `onCompleteAll` to avoid having
              * `template` and `script` tags inserted and rendered as part of the hydration response.
              */
             onCompleteAll() {
+                clearTimeout(renderTimeout);
                 // Tell React to start writing to the writer
-                startWriting();
+                pipe(writer);
                 // Tell React that the writer is ready to drain, which sometimes results in a last "chunk" being written.
                 writer.drain();
                 response.statusCode = didError ? 500 : 200;
                 response.setHeader(getCacheControlHeader({ dev }), componentResponse.cacheControlHeader);
                 response.end(generateWireSyntaxFromRenderedHtml(writer.toString()));
+                logServerResponse('rsc', log, request, response.statusCode);
             },
             onError(error) {
                 didError = error;
-                console.error(error);
+                log.error(error);
             },
         });
-        setTimeout(abort, STREAM_ABORT_TIMEOUT_MS);
+        const renderTimeout = setTimeout(() => {
+            const errorMessage = `The app failed to render RSC after ${STREAM_ABORT_TIMEOUT_MS} ms`;
+            didError = new Error(errorMessage);
+            log.error(errorMessage);
+            abort();
+        }, STREAM_ABORT_TIMEOUT_MS);
     };
     return {
         render,
@@ -170,14 +192,19 @@ const renderHydrogen = (App, hook) => {
         hydrate,
     };
 };
-function buildReactApp({ App, state, context, request, dev, }) {
+function buildReactApp({ App, state, context, request, dev, log, }) {
+    const renderCache = {};
     const helmetContext = {};
     const componentResponse = new ServerComponentResponse();
-    const renderCache = {};
+    const hydrogenServerProps = {
+        request,
+        response: componentResponse,
+        log,
+    };
     const ReactApp = (props) => (React.createElement(RenderCacheProvider, { cache: renderCache },
         React.createElement(StaticRouter, { location: { pathname: state.pathname, search: state.search }, context: context },
             React.createElement(HelmetProvider, { context: helmetContext },
-                React.createElement(App, { ...props, request: request, response: componentResponse })))));
+                React.createElement(App, { ...props, ...hydrogenServerProps })))));
     return { helmetContext, ReactApp, componentResponse };
 }
 function extractHeadElements(helmetContext) {
@@ -203,27 +230,31 @@ function supportsReadableStream() {
         return false;
     }
 }
-async function renderApp(ReactApp, state, isReactHydrationRequest) {
+async function renderApp(ReactApp, state, log, isReactHydrationRequest) {
     /**
      * Temporary workaround until all Worker runtimes support ReadableStream
      */
     if (isWorker && !supportsReadableStream()) {
-        return renderAppFromStringWithPrepass(ReactApp, state, isReactHydrationRequest);
+        return renderAppFromStringWithPrepass(ReactApp, state, log, isReactHydrationRequest);
     }
     const app = isReactHydrationRequest ? (React.createElement(HydrationContext.Provider, { value: true },
         React.createElement(ReactApp, { ...state }))) : (React.createElement(ReactApp, { ...state }));
-    return renderAppFromBufferedStream(app, isReactHydrationRequest);
+    return renderAppFromBufferedStream(app, log, isReactHydrationRequest);
 }
-function renderAppFromBufferedStream(app, isReactHydrationRequest) {
+function renderAppFromBufferedStream(app, log, isReactHydrationRequest) {
     return new Promise((resolve, reject) => {
+        const errorTimeout = setTimeout(() => {
+            reject(new Error(`The app failed to SSR after ${STREAM_ABORT_TIMEOUT_MS} ms`));
+        }, STREAM_ABORT_TIMEOUT_MS);
         if (isWorker) {
             let isComplete = false;
             const stream = renderToReadableStream(app, {
                 onCompleteAll() {
+                    clearTimeout(errorTimeout);
                     isComplete = true;
                 },
                 onError(error) {
-                    console.error(error);
+                    log.error(error);
                     reject(error);
                 },
             });
@@ -254,14 +285,15 @@ function renderAppFromBufferedStream(app, isReactHydrationRequest) {
         }
         else {
             const writer = new HydrationWriter();
-            const { startWriting } = pipeToNodeWritable(app, writer, {
+            const { pipe } = renderToPipeableStream(app, {
                 /**
                  * When hydrating, we have to wait until `onCompleteAll` to avoid having
                  * `template` and `script` tags inserted and rendered as part of the hydration response.
                  */
                 onCompleteAll() {
+                    clearTimeout(errorTimeout);
                     // Tell React to start writing to the writer
-                    startWriting();
+                    pipe(writer);
                     // Tell React that the writer is ready to drain, which sometimes results in a last "chunk" being written.
                     writer.drain();
                     if (isReactHydrationRequest) {
@@ -272,7 +304,7 @@ function renderAppFromBufferedStream(app, isReactHydrationRequest) {
                     }
                 },
                 onError(error) {
-                    console.error(error);
+                    log.error(error);
                     reject(error);
                 },
             });
@@ -288,7 +320,7 @@ function renderAppFromBufferedStream(app, isReactHydrationRequest) {
  * use ssr-prepass to fetch all the queries once, store
  * the results in a context object, and re-render.
  */
-async function renderAppFromStringWithPrepass(ReactApp, state, isReactHydrationRequest) {
+async function renderAppFromStringWithPrepass(ReactApp, state, log, isReactHydrationRequest) {
     const app = isReactHydrationRequest ? (React.createElement(HydrationContext.Provider, { value: true },
         React.createElement(ReactApp, { ...state }))) : (React.createElement(ReactApp, { ...state }));
     await ssrPrepass(app);
@@ -298,18 +330,18 @@ async function renderAppFromStringWithPrepass(ReactApp, state, isReactHydrationR
         : body;
 }
 export default renderHydrogen;
-function startWritingHtmlToServerResponse(response, startWriting, error) {
+function startWritingHtmlToServerResponse(response, pipe, error) {
     if (!response.headersSent) {
         response.setHeader('Content-type', 'text/html');
         response.write('<!DOCTYPE html>');
     }
-    startWriting();
+    pipe(response);
     if (error) {
         // This error was delayed until the headers were properly sent.
         response.write(getErrorMarkup(error));
     }
 }
-function writeHeadToServerResponse(response, { headers, status, customStatus }, error) {
+function writeHeadToServerResponse(request, response, { headers, status, customStatus }, log, error) {
     var _a, _b;
     if (response.headersSent)
         return;
@@ -323,6 +355,7 @@ function writeHeadToServerResponse(response, { headers, status, customStatus },
             response.statusMessage = customStatus.text;
         }
     }
+    logServerResponse('str', log, request, response.statusCode);
 }
 function isRedirect(response) {
     return response.statusCode >= 300 && response.statusCode < 400;

package/dist/esnext/foundation/Router/DefaultRoutes.d.ts CHANGED Viewed

@@ -1,4 +1,5 @@
 import { ReactElement } from 'react';
+import { Logger } from '../../utilities/log/log';
 export declare type ImportGlobEagerOutput = Record<string, Record<'default', any>>;
 /**
  * Build a set of default Hydrogen routes based on the output provided by Vite's
@@ -6,10 +7,11 @@ export declare type ImportGlobEagerOutput = Record<string, Record<'default', any
  *
  * @see https://vitejs.dev/guide/features.html#glob-import
  */
-export declare function DefaultRoutes({ pages, serverState, fallback, }: {
+export declare function DefaultRoutes({ pages, serverState, fallback, log, }: {
     pages: ImportGlobEagerOutput;
     serverState: Record<string, any>;
     fallback?: ReactElement;
+    log: Logger;
 }): JSX.Element;
 interface HydrogenRoute {
     component: any;

package/dist/esnext/foundation/Router/DefaultRoutes.js CHANGED Viewed

@@ -6,12 +6,12 @@ import { Route, Switch, useRouteMatch } from 'react-router-dom';
  *
  * @see https://vitejs.dev/guide/features.html#glob-import
  */
-export function DefaultRoutes({ pages, serverState, fallback, }) {
+export function DefaultRoutes({ pages, serverState, fallback, log, }) {
     const { path } = useRouteMatch();
     const routes = useMemo(() => createRoutesFromPages(pages, path), [pages, path]);
     return (React.createElement(Switch, null,
         routes.map((route) => (React.createElement(Route, { key: route.path, exact: route.exact, path: route.path },
-            React.createElement(route.component, { ...serverState })))),
+            React.createElement(route.component, { ...serverState, log: log })))),
         fallback && React.createElement(Route, { path: "*" }, fallback)));
 }
 export function createRoutesFromPages(pages, topLevelPath = '*') {

package/dist/esnext/foundation/ServerStateProvider/ServerStateProvider.client.js CHANGED Viewed

@@ -1,6 +1,7 @@
 import React, { createContext, useMemo, useCallback,
 // @ts-ignore
 useTransition, } from 'react';
+const PRIVATE_PROPS = ['request', 'response'];
 export const ServerStateContext = createContext(null);
 export function ServerStateProvider({ serverState, setServerState, children, }) {
     const [pending, startTransition] = useTransition();
@@ -25,8 +26,9 @@ export function ServerStateProvider({ serverState, setServerState, children, })
                     newValue = input;
                 }
                 if (__DEV__) {
-                    if ('request' in newValue || 'response' in newValue) {
-                        console.warn(`Custom "request" and "response" properties in server state are ignored. Use a different name.`);
+                    const privateProp = PRIVATE_PROPS.find((prop) => prop in newValue);
+                    if (privateProp) {
+                        console.warn(`Custom "${privateProp}" property in server state is ignored. Use a different name.`);
                     }
                 }
                 return {

package/dist/esnext/foundation/useQuery/hooks.js CHANGED Viewed

@@ -1,3 +1,4 @@
+import { log } from '../../utilities';
 import { deleteItemFromCache, getItemFromCache, isStale, setItemInCache, } from '../../framework/cache';
 import { runDelayedFunction } from '../../framework/runtime';
 import { useRenderCacheData } from '../RenderCacheProvider/hook';
@@ -33,10 +34,10 @@ function cachedQueryFnBuilder(key, queryFn, queryOptions) {
              * Important: Do this async
              */
             if (isStale(response)) {
-                console.log('[useQuery] cache stale; generating new response in background');
+                log.debug('[useQuery] cache stale; generating new response in background');
                 const lockKey = `lock-${key}`;
                 runDelayedFunction(async () => {
-                    console.log(`[stale regen] fetching cache lock`);
+                    log.debug(`[stale regen] fetching cache lock`);
                     const lockExists = await getItemFromCache(lockKey);
                     if (lockExists)
                         return;
@@ -46,7 +47,7 @@ function cachedQueryFnBuilder(key, queryFn, queryOptions) {
                         await setItemInCache(key, output, resolvedQueryOptions === null || resolvedQueryOptions === void 0 ? void 0 : resolvedQueryOptions.cache);
                     }
                     catch (e) {
-                        console.error(`Error generating async response: ${e.message}`);
+                        log.error(`Error generating async response: ${e.message}`);
                     }
                     finally {
                         await deleteItemFromCache(lockKey);

package/dist/esnext/foundation/useShop/use-shop.d.ts CHANGED Viewed

@@ -1,5 +1,5 @@
 import { ShopifyProviderValue } from '../ShopifyProvider/types';
 /**
- * The `useShop` hook provides access to values within `shopify.config.js`.The `useShop` hook provides access to values within `shopify.config.js`. It must be a descendent of a `ShopifyProvider` component.
+ * The `useShop` hook provides access to values within `shopify.config.js`. It must be a descendent of a `ShopifyProvider` component.
  */
 export declare function useShop(): ShopifyProviderValue;

package/dist/esnext/foundation/useShop/use-shop.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import { useContext } from 'react';
 import { ShopifyContext } from '../ShopifyProvider/ShopifyContext';
 /**
- * The `useShop` hook provides access to values within `shopify.config.js`.The `useShop` hook provides access to values within `shopify.config.js`. It must be a descendent of a `ShopifyProvider` component.
+ * The `useShop` hook provides access to values within `shopify.config.js`. It must be a descendent of a `ShopifyProvider` component.
  */
 export function useShop() {
     const context = useContext(ShopifyContext);

package/dist/esnext/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/esnext/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/esnext/framework/plugins/vite-plugin-hydrogen-config.d.ts CHANGED Viewed

@@ -1,3 +1,3 @@
-import type { Plugin } from 'vite';
+import { Plugin } from 'vite';
 declare const _default: () => Plugin;
 export default _default;

package/dist/esnext/framework/plugins/vite-plugin-hydrogen-config.js CHANGED Viewed

@@ -1,7 +1,7 @@
 export default () => {
     return {
         name: 'vite-plugin-hydrogen-config',
-        config: (_, env) => ({
+        config: async (config, env) => ({
             resolve: {
                 alias: {
                     /**
@@ -66,6 +66,7 @@ export default () => {
             define: {
                 __DEV__: env.mode !== 'production',
             },
+            envPrefix: ['VITE_', 'PUBLIC_'],
         }),
     };
 };

package/dist/esnext/framework/plugins/vite-plugin-hydrogen-middleware.d.ts CHANGED Viewed

@@ -1,4 +1,10 @@
-import type { Plugin } from 'vite';
+import { Plugin } from 'vite';
 import type { HydrogenVitePluginOptions, ShopifyConfig } from '../../types';
 declare const _default: (shopifyConfig: ShopifyConfig, pluginOptions: HydrogenVitePluginOptions) => Plugin;
 export default _default;
+declare global {
+    var Oxygen: {
+        env: Record<string, string | undefined>;
+        [key: string]: any;
+    };
+}

package/dist/esnext/framework/plugins/vite-plugin-hydrogen-middleware.js CHANGED Viewed

@@ -1,3 +1,4 @@
+import { loadEnv } from 'vite';
 import path from 'path';
 import { promises as fs } from 'fs';
 import { hydrogenMiddleware, graphiqlMiddleware } from '../middleware';
@@ -11,12 +12,13 @@ export default (shopifyConfig, pluginOptions) => {
          * loading them in an SSR context, rendering them using the `entry-server` endpoint in the
          * user's project, and injecting the static HTML into the template.
          */
-        configureServer(server) {
+        async configureServer(server) {
             const resolve = (p) => path.resolve(server.config.root, p);
             async function getIndexTemplate(url) {
                 const indexHtml = await fs.readFile(resolve('index.html'), 'utf-8');
                 return await server.transformIndexHtml(url, indexHtml);
             }
+            await polyfillOxygenEnv(server.config);
             // The default vite middleware rewrites the URL `/graphqil` to `/index.html`
             // By running this middleware first, we avoid that.
             server.middlewares.use(graphiqlMiddleware({
@@ -36,3 +38,15 @@ export default (shopifyConfig, pluginOptions) => {
         },
     };
 };
+async function polyfillOxygenEnv(config) {
+    const env = await loadEnv(config.mode, config.root, '');
+    const publicPrefixes = Array.isArray(config.envPrefix)
+        ? config.envPrefix
+        : [config.envPrefix || ''];
+    for (const key of Object.keys(env)) {
+        if (publicPrefixes.some((prefix) => key.startsWith(prefix))) {
+            delete env[key];
+        }
+    }
+    globalThis.Oxygen = { env };
+}

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

@@ -1,6 +1,7 @@
 import { getCacheControlHeader } from './framework/cache';
 import { setContext, setCache } from './framework/runtime';
 import { setConfig } from './framework/config';
+import { getLoggerFromContext, logServerResponse } from './utilities/log';
 export default async function handleEvent(event, { request, entrypoint, indexTemplate, assetHandler, streamableResponse, dev, cache, context, }) {
     var _a, _b, _c, _d, _e;
     const url = new URL(request.url);
@@ -27,7 +28,9 @@ 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);
+    const logger = getLoggerFromContext(request);
     /**
      * Stream back real-user responses, but for bots/etc,
      * use `render` instead. This is because we need to inject <head>
@@ -35,7 +38,13 @@ 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,
+                log: logger,
+            });
         }
         else {
             stream(url, {
@@ -44,11 +53,18 @@ export default async function handleEvent(event, { request, entrypoint, indexTem
                 response: streamableResponse,
                 template,
                 dev,
+                log: logger,
             });
         }
         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,
+        log: logger,
+    });
     const headers = componentResponse.headers;
     /**
      * TODO: Also add `Vary` headers for `accept-language` and any other keys
@@ -84,15 +100,9 @@ export default async function handleEvent(event, { request, entrypoint, indexTem
             headers,
         });
     }
+    logServerResponse('ssr', logger, request, response.status);
     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 +127,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/esnext/hooks/useShopQuery/hooks.d.ts CHANGED Viewed

@@ -6,9 +6,7 @@ export interface UseShopQueryResponse<T> {
     errors: any;
 }
 /**
- * The `useShopQuery` hook allows you to make server-only GraphQL queries to the Storefront API.
- * \> Note:
- * \> It must be a descendent of a `ShopifyProvider` component.
+ * The `useShopQuery` hook allows you to make server-only GraphQL queries to the Storefront API. It must be a descendent of a `ShopifyProvider` component.
  */
 export declare function useShopQuery<T>({ query, variables, cache, }: {
     /** A string of the GraphQL query.