@shopify/hydrogen 0.0.0-experimental-20220526194818

package/dist/node/entry-server.js

@@ -0,0 +1,556 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.renderHydrogen = void 0;
+const react_1 = __importStar(require("react"));
+const log_1 = require("./utilities/log");
+const error_1 = require("./utilities/error");
+const defer_1 = require("./utilities/defer");
+const Html_1 = require("./framework/Hydration/Html");
+const ServerComponentResponse_server_1 = require("./framework/Hydration/ServerComponentResponse.server");
+const ServerComponentRequest_server_1 = require("./framework/Hydration/ServerComponentRequest.server");
+const ServerRequestProvider_1 = require("./foundation/ServerRequestProvider");
+const apiRoutes_1 = require("./utilities/apiRoutes");
+const ServerPropsProvider_1 = require("./foundation/ServerPropsProvider");
+const bot_ua_1 = require("./utilities/bot-ua");
+const runtime_1 = require("./framework/runtime");
+const config_1 = require("./framework/config");
+const streaming_server_1 = require("./streaming.server");
+const constants_1 = require("./constants");
+const template_1 = require("./utilities/template");
+const Analytics_server_1 = require("./foundation/Analytics/Analytics.server");
+const ServerAnalyticsRoute_server_1 = require("./foundation/Analytics/ServerAnalyticsRoute.server");
+const session_1 = require("./foundation/session/session");
+const parse_1 = require("./utilities/parse");
+const utilities_1 = require("./utilities");
+const DOCTYPE = '<!DOCTYPE html>';
+const CONTENT_TYPE = 'Content-Type';
+const HTML_CONTENT_TYPE = 'text/html; charset=UTF-8';
+const renderHydrogen = (App, hydrogenConfig) => {
+    const handleRequest = async function (rawRequest, options) {
+        const { indexTemplate, streamableResponse, dev, cache, context, nonce, buyerIpHeader, } = options;
+        const request = new ServerComponentRequest_server_1.ServerComponentRequest(rawRequest);
+        const url = new URL(request.url);
+        if (!hydrogenConfig) {
+            // @ts-ignore
+            // eslint-disable-next-line node/no-missing-import
+            const configFile = await Promise.resolve().then(() => __importStar(require('virtual:hydrogen-config')));
+            hydrogenConfig = configFile.default;
+        }
+        request.ctx.hydrogenConfig = hydrogenConfig;
+        request.ctx.buyerIpHeader = buyerIpHeader;
+        const log = (0, log_1.getLoggerWithContext)(request);
+        const sessionApi = hydrogenConfig.session
+            ? hydrogenConfig.session(log)
+            : undefined;
+        const componentResponse = new ServerComponentResponse_server_1.ServerComponentResponse();
+        request.ctx.session = (0, session_1.getSyncSessionApi)(request, componentResponse, log, sessionApi);
+        /**
+         * Inject the cache & context into the module loader so we can pull it out for subrequests.
+         */
+        (0, runtime_1.setCache)(cache);
+        (0, runtime_1.setContext)(context);
+        (0, config_1.setConfig)({ dev });
+        if (url.pathname === constants_1.EVENT_PATHNAME ||
+            constants_1.EVENT_PATHNAME_REGEX.test(url.pathname)) {
+            return (0, ServerAnalyticsRoute_server_1.ServerAnalyticsRoute)(request, hydrogenConfig.serverAnalyticsConnectors);
+        }
+        const isReactHydrationRequest = url.pathname === constants_1.RSC_PATHNAME;
+        if (!isReactHydrationRequest && hydrogenConfig.routes) {
+            const apiRoute = getApiRoute(url, hydrogenConfig.routes);
+            // The API Route might have a default export, making it also a server component
+            // If it does, only render the API route if the request method is GET
+            if (apiRoute &&
+                (!apiRoute.hasServerComponent || request.method !== 'GET')) {
+                const apiResponse = await (0, apiRoutes_1.renderApiRoute)(request, apiRoute, hydrogenConfig.shopify, sessionApi);
+                return apiResponse instanceof Request
+                    ? handleRequest(apiResponse, options)
+                    : apiResponse;
+            }
+        }
+        const isStreamable = (hydrogenConfig.enableStreaming
+            ? hydrogenConfig.enableStreaming(request)
+            : true) &&
+            !(0, bot_ua_1.isBotUA)(url, request.headers.get('user-agent')) &&
+            (!!streamableResponse || (await (0, streaming_server_1.isStreamingSupported)()));
+        let template = typeof indexTemplate === 'function'
+            ? await indexTemplate(url.toString())
+            : indexTemplate;
+        if (template && typeof template !== 'string') {
+            template = template.default;
+        }
+        const params = {
+            App,
+            log,
+            dev,
+            nonce,
+            request,
+            template,
+            isStreamable,
+            componentResponse,
+            response: streamableResponse,
+        };
+        if (isReactHydrationRequest) {
+            return hydrate(url, params);
+        }
+        /**
+         * Stream back real-user responses, but for bots/etc,
+         * use `render` instead. This is because we need to inject <head>
+         * things for SEO reasons.
+         */
+        if (isStreamable) {
+            return stream(url, params);
+        }
+        return render(url, params);
+    };
+    if (__WORKER__)
+        return handleRequest;
+    return ((rawRequest, options) => handleFetchResponseInNode(handleRequest(rawRequest, options), options.streamableResponse));
+};
+exports.renderHydrogen = renderHydrogen;
+function getApiRoute(url, routes) {
+    const apiRoutes = (0, apiRoutes_1.getApiRoutes)(routes);
+    return (0, apiRoutes_1.getApiRouteFromURL)(url, apiRoutes);
+}
+/**
+ * The render function is responsible for turning the provided `App` into an HTML string,
+ * 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).
+ */
+async function render(url, { App, request, template, componentResponse, nonce, log }) {
+    const state = { pathname: url.pathname, search: url.search };
+    const { AppSSR, rscReadable } = buildAppSSR({
+        App,
+        log,
+        state,
+        request,
+        response: componentResponse,
+    }, { template });
+    function onErrorShell(error) {
+        log.error(error);
+        componentResponse.writeHead({ status: 500 });
+        return template;
+    }
+    let [html, flight] = await Promise.all([
+        renderToBufferedString(AppSSR, { log, nonce }).catch(onErrorShell),
+        (0, streaming_server_1.bufferReadableStream)(rscReadable.getReader()).catch(() => null),
+    ]);
+    const { headers, status, statusText } = getResponseOptions(componentResponse);
+    /**
+     * 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-control', componentResponse.cacheControlHeader);
+    headers.set(CONTENT_TYPE, HTML_CONTENT_TYPE);
+    html = (0, Html_1.applyHtmlHead)(html, request.ctx.head, template);
+    if (flight) {
+        html = html.replace('</body>', () => flightContainer(flight) + '</body>');
+    }
+    postRequestTasks('ssr', status, request, componentResponse);
+    return new Response(html, {
+        status,
+        statusText,
+        headers,
+    });
+}
+/**
+ * Stream a response to the client. NOTE: This omits custom `<head>`
+ * information, so this method should not be used by crawlers.
+ */
+async function stream(url, { App, request, response, componentResponse, template, nonce, dev, log, }) {
+    var _a;
+    const state = { pathname: url.pathname, search: url.search };
+    log.trace('start stream');
+    const { noScriptTemplate, bootstrapScripts, bootstrapModules } = (0, template_1.stripScriptsFromTemplate)(template);
+    const { AppSSR, rscReadable } = buildAppSSR({
+        App,
+        log,
+        state,
+        request,
+        response: componentResponse,
+    }, { template: noScriptTemplate });
+    const rscToScriptTagReadable = new ReadableStream({
+        start(controller) {
+            log.trace('rsc start chunks');
+            const encoder = new TextEncoder();
+            (0, streaming_server_1.bufferReadableStream)(rscReadable.getReader(), (chunk) => {
+                const metaTag = flightContainer(chunk);
+                controller.enqueue(encoder.encode(metaTag));
+            }).then(() => {
+                log.trace('rsc finish chunks');
+                return controller.close();
+            });
+        },
+    });
+    let didError;
+    if (__WORKER__) {
+        const onCompleteAll = (0, defer_1.defer)();
+        const encoder = new TextEncoder();
+        const transform = new TransformStream();
+        const writable = transform.writable.getWriter();
+        const responseOptions = {};
+        let ssrReadable;
+        try {
+            ssrReadable = await (0, streaming_server_1.ssrRenderToReadableStream)(AppSSR, {
+                nonce,
+                bootstrapScripts,
+                bootstrapModules,
+                onError(error) {
+                    didError = error;
+                    if (dev && !writable.closed && !!responseOptions.status) {
+                        writable.write((0, error_1.getErrorMarkup)(error));
+                    }
+                    log.error(error);
+                },
+            });
+        }
+        catch (error) {
+            log.error(error);
+            return new Response(template + (dev ? (0, error_1.getErrorMarkup)(error) : ''), {
+                status: 500,
+                headers: { [CONTENT_TYPE]: HTML_CONTENT_TYPE },
+            });
+        }
+        log.trace('worker ready to stream');
+        ssrReadable.allReady.then(() => {
+            log.trace('worker complete stream');
+            onCompleteAll.resolve(true);
+        });
+        /* eslint-disable no-inner-declarations */
+        function prepareForStreaming(flush) {
+            Object.assign(responseOptions, getResponseOptions(componentResponse, didError));
+            /**
+             * TODO: This assumes `response.cache()` has been called _before_ any
+             * queries which might be caught behind Suspense. Clarify this or add
+             * additional checks downstream?
+             */
+            responseOptions.headers.set('cache-control', componentResponse.cacheControlHeader);
+            if (isRedirect(responseOptions)) {
+                return false;
+            }
+            if (flush) {
+                responseOptions.headers.set(CONTENT_TYPE, HTML_CONTENT_TYPE);
+                writable.write(encoder.encode(DOCTYPE));
+                if (didError) {
+                    // This error was delayed until the headers were properly sent.
+                    writable.write(encoder.encode((0, error_1.getErrorMarkup)(didError)));
+                }
+                return true;
+            }
+        }
+        /* eslint-enable no-inner-declarations */
+        const shouldReturnApp = (_a = prepareForStreaming(componentResponse.canStream())) !== null && _a !== void 0 ? _a : (await onCompleteAll.promise.then(prepareForStreaming));
+        if (shouldReturnApp) {
+            let bufferedSsr = '';
+            let isPendingSsrWrite = false;
+            const writingSSR = (0, streaming_server_1.bufferReadableStream)(ssrReadable.getReader(), (chunk) => {
+                bufferedSsr += chunk;
+                if (!isPendingSsrWrite) {
+                    isPendingSsrWrite = true;
+                    setTimeout(() => {
+                        isPendingSsrWrite = false;
+                        // React can write fractional chunks synchronously.
+                        // This timeout ensures we only write full HTML tags
+                        // in order to allow RSC writing concurrently.
+                        if (bufferedSsr) {
+                            writable.write(encoder.encode(bufferedSsr));
+                            bufferedSsr = '';
+                        }
+                    }, 0);
+                }
+            });
+            const writingRSC = (0, streaming_server_1.bufferReadableStream)(rscToScriptTagReadable.getReader(), (scriptTag) => writable.write(encoder.encode(scriptTag)));
+            Promise.all([writingSSR, writingRSC]).then(() => {
+                // Last SSR write might be pending, delay closing the writable one tick
+                setTimeout(() => writable.close(), 0);
+                postRequestTasks('str', responseOptions.status, request, componentResponse);
+            });
+        }
+        else {
+            writable.close();
+            postRequestTasks('str', responseOptions.status, request, componentResponse);
+        }
+        if (await (0, streaming_server_1.isStreamingSupported)()) {
+            return new Response(transform.readable, responseOptions);
+        }
+        const bufferedBody = await (0, streaming_server_1.bufferReadableStream)(transform.readable.getReader());
+        return new Response(bufferedBody, responseOptions);
+    }
+    else if (response) {
+        const { pipe } = (0, streaming_server_1.ssrRenderToPipeableStream)(AppSSR, {
+            nonce,
+            bootstrapScripts,
+            bootstrapModules,
+            onShellReady() {
+                log.trace('node ready to stream');
+                /**
+                 * 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('cache-control', componentResponse.cacheControlHeader);
+                writeHeadToServerResponse(response, componentResponse, log, didError);
+                if (isRedirect(response)) {
+                    // Return redirects early without further rendering/streaming
+                    return response.end();
+                }
+                if (!componentResponse.canStream())
+                    return;
+                startWritingHtmlToServerResponse(response, dev ? didError : undefined);
+                setTimeout(() => {
+                    log.trace('node pipe response');
+                    pipe(response);
+                }, 0);
+                (0, streaming_server_1.bufferReadableStream)(rscToScriptTagReadable.getReader(), (chunk) => {
+                    log.trace('rsc chunk');
+                    return response.write(chunk);
+                });
+            },
+            onAllReady() {
+                log.trace('node complete stream');
+                if (componentResponse.canStream() || response.writableEnded) {
+                    postRequestTasks('str', response.statusCode, request, componentResponse);
+                    return;
+                }
+                writeHeadToServerResponse(response, componentResponse, log, didError);
+                postRequestTasks('str', response.statusCode, request, componentResponse);
+                if (isRedirect(response)) {
+                    // Redirects found after any async code
+                    return response.end();
+                }
+                startWritingHtmlToServerResponse(response, dev ? didError : undefined);
+                (0, streaming_server_1.bufferReadableStream)(rscToScriptTagReadable.getReader()).then((scriptTags) => {
+                    // Piping ends the response so script tags
+                    // must be written before that.
+                    response.write(scriptTags);
+                    pipe(response);
+                });
+            },
+            onShellError(error) {
+                log.error(error);
+                if (!response.writableEnded) {
+                    writeHeadToServerResponse(response, componentResponse, log, error);
+                    startWritingHtmlToServerResponse(response, dev ? error : undefined);
+                    response.write(template);
+                    response.end();
+                }
+            },
+            onError(error) {
+                didError = error;
+                if (dev && response.headersSent) {
+                    // Calling write would flush headers automatically.
+                    // Delay this error until headers are properly sent.
+                    response.write((0, error_1.getErrorMarkup)(error));
+                }
+                log.error(error);
+            },
+        });
+    }
+}
+/**
+ * Stream a hydration response to the client.
+ */
+async function hydrate(url, { App, log, request, response, isStreamable, componentResponse, }) {
+    const state = (0, parse_1.parseJSON)(url.searchParams.get('state') || '{}');
+    const { AppRSC } = buildAppRSC({
+        App,
+        log,
+        state,
+        request,
+        response: componentResponse,
+    });
+    const rscReadable = (0, streaming_server_1.rscRenderToReadableStream)(AppRSC);
+    // Note: CFW does not support reader.piteTo nor iterable syntax
+    const bufferedBody = await (0, streaming_server_1.bufferReadableStream)(rscReadable.getReader());
+    postRequestTasks('rsc', 200, request, componentResponse);
+    return new Response(bufferedBody, {
+        headers: {
+            'cache-control': componentResponse.cacheControlHeader,
+        },
+    });
+}
+function buildAppRSC({ App, log, state, request, response }) {
+    const hydrogenServerProps = { request, response, log };
+    const serverProps = {
+        ...state,
+        ...hydrogenServerProps,
+    };
+    request.ctx.router.serverProps = serverProps;
+    const AppRSC = (react_1.default.createElement(ServerRequestProvider_1.ServerRequestProvider, { request: request, isRSC: true },
+        react_1.default.createElement(PreloadQueries, { request: request },
+            react_1.default.createElement(App, { ...serverProps }),
+            react_1.default.createElement(react_1.Suspense, { fallback: null },
+                react_1.default.createElement(Analytics_server_1.Analytics, null)))));
+    return { AppRSC };
+}
+function buildAppSSR({ App, state, request, response, log }, htmlOptions) {
+    const { AppRSC } = buildAppRSC({
+        App,
+        log,
+        state,
+        request,
+        response,
+    });
+    const [rscReadableForFizz, rscReadableForFlight] = (0, streaming_server_1.rscRenderToReadableStream)(AppRSC).tee();
+    const rscResponse = (0, streaming_server_1.createFromReadableStream)(rscReadableForFizz);
+    const RscConsumer = () => rscResponse.readRoot();
+    const AppSSR = (react_1.default.createElement(Html_1.Html, { ...htmlOptions },
+        react_1.default.createElement(ServerRequestProvider_1.ServerRequestProvider, { request: request, isRSC: false },
+            react_1.default.createElement(ServerPropsProvider_1.ServerPropsProvider, { initialServerProps: state, setServerPropsForRsc: () => { } },
+                react_1.default.createElement(PreloadQueries, { request: request },
+                    react_1.default.createElement(react_1.Suspense, { fallback: null },
+                        react_1.default.createElement(RscConsumer, null)),
+                    react_1.default.createElement(react_1.Suspense, { fallback: null },
+                        react_1.default.createElement(Analytics_server_1.Analytics, null)))))));
+    return { AppSSR, rscReadable: rscReadableForFlight };
+}
+function PreloadQueries({ request, children, }) {
+    const preloadQueries = request.getPreloadQueries();
+    (0, ServerRequestProvider_1.preloadRequestCacheData)(request, preloadQueries);
+    return react_1.default.createElement(react_1.default.Fragment, null, children);
+}
+async function renderToBufferedString(ReactApp, { log, nonce }) {
+    if (__WORKER__) {
+        const ssrReadable = await (0, streaming_server_1.ssrRenderToReadableStream)(ReactApp, {
+            nonce,
+            onError: (error) => log.error(error),
+        });
+        /**
+         * We want to wait until `allReady` resolves before fetching the
+         * stream body. Otherwise, React 18's streaming JS script/template tags
+         * will be included in the output and cause issues when loading
+         * the Client Components in the browser.
+         */
+        await ssrReadable.allReady;
+        return (0, streaming_server_1.bufferReadableStream)(ssrReadable.getReader());
+    }
+    else {
+        const writer = await createNodeWriter();
+        return new Promise((resolve, reject) => {
+            const { pipe } = (0, streaming_server_1.ssrRenderToPipeableStream)(ReactApp, {
+                nonce,
+                /**
+                 * When hydrating, we have to wait until `onCompleteAll` to avoid having
+                 * `template` and `script` tags inserted and rendered as part of the hydration response.
+                 */
+                onAllReady() {
+                    let data = '';
+                    writer.on('data', (chunk) => (data += chunk.toString()));
+                    writer.once('error', reject);
+                    writer.once('end', () => resolve(data));
+                    // Tell React to start writing to the writer
+                    pipe(writer);
+                },
+                onShellError: reject,
+                onError: (error) => log.error(error),
+            });
+        });
+    }
+}
+exports.default = exports.renderHydrogen;
+function startWritingHtmlToServerResponse(response, error) {
+    if (!response.headersSent) {
+        response.setHeader(CONTENT_TYPE, HTML_CONTENT_TYPE);
+        response.write(DOCTYPE);
+    }
+    if (error) {
+        // This error was delayed until the headers were properly sent.
+        response.write((0, error_1.getErrorMarkup)(error));
+    }
+}
+function getResponseOptions({ headers, status, customStatus }, error) {
+    var _a, _b;
+    const responseInit = {};
+    responseInit.headers = headers;
+    if (error) {
+        responseInit.status = 500;
+    }
+    else {
+        responseInit.status = (_b = (_a = customStatus === null || customStatus === void 0 ? void 0 : customStatus.code) !== null && _a !== void 0 ? _a : status) !== null && _b !== void 0 ? _b : 200;
+        if (customStatus === null || customStatus === void 0 ? void 0 : customStatus.text) {
+            responseInit.statusText = customStatus.text;
+        }
+    }
+    return responseInit;
+}
+function writeHeadToServerResponse(response, serverComponentResponse, log, error) {
+    if (response.headersSent)
+        return;
+    log.trace('writeHeadToServerResponse');
+    const { headers, status, statusText } = getResponseOptions(serverComponentResponse, error);
+    response.statusCode = status;
+    if (statusText) {
+        response.statusMessage = statusText;
+    }
+    setServerHeaders(headers, response);
+}
+function isRedirect(response) {
+    var _a, _b;
+    const status = (_b = (_a = response.status) !== null && _a !== void 0 ? _a : response.statusCode) !== null && _b !== void 0 ? _b : 0;
+    return status >= 300 && status < 400;
+}
+async function createNodeWriter() {
+    // Importing 'stream' directly breaks Vite resolve
+    // when building for workers, even though this code
+    // does not run in a worker. Looks like tree-shaking
+    // kicks in after the import analysis/bundle.
+    const streamImport = __WORKER__ ? '' : 'stream';
+    const { PassThrough } = await Promise.resolve().then(() => __importStar(require(streamImport)));
+    return new PassThrough();
+}
+function flightContainer(chunk) {
+    return `<meta data-flight="${(0, utilities_1.htmlEncode)(chunk)}" />`;
+}
+function postRequestTasks(type, status, request, componentResponse) {
+    (0, log_1.logServerResponse)(type, request, status);
+    (0, log_1.logCacheControlHeaders)(type, request, componentResponse);
+    (0, log_1.logQueryTimings)(type, request);
+    request.savePreloadQueries();
+}
+/**
+ * Ensure Node.js environments handle the fetch Response correctly.
+ */
+function handleFetchResponseInNode(fetchResponsePromise, nodeResponse) {
+    if (nodeResponse) {
+        fetchResponsePromise.then((response) => {
+            if (!response)
+                return;
+            setServerHeaders(response.headers, nodeResponse);
+            nodeResponse.statusCode = response.status;
+            if (response.body) {
+                nodeResponse.write(response.body);
+            }
+            nodeResponse.end();
+        });
+    }
+    return fetchResponsePromise;
+}
+// From fetch Headers to Node Response
+function setServerHeaders(headers, nodeResponse) {
+    // Headers.raw is only implemented in node-fetch, which is used by Hydrogen in dev and prod.
+    // It is the only way for now to access `set-cookie` header as an array.
+    // https://github.com/Shopify/hydrogen/issues/1228
+    Object.entries(headers.raw()).forEach(([key, value]) => nodeResponse.setHeader(key, value));
+}

package/dist/node/foundation/Analytics/Analytics.client.d.ts

@@ -0,0 +1,3 @@
+export declare function Analytics({ analyticsDataFromServer, }: {
+    analyticsDataFromServer: any;
+}): null;

package/dist/node/foundation/Analytics/Analytics.client.js

@@ -0,0 +1,32 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Analytics = void 0;
+const react_1 = require("react");
+const index_1 = require("./index");
+function Analytics({ analyticsDataFromServer, }) {
+    (0, react_1.useEffect)(() => {
+        const urlParams = new URLSearchParams(window.location.search);
+        if (urlParams.has('utm_source')) {
+            index_1.ClientAnalytics.pushToPageAnalyticsData({
+                id: urlParams.get('utm_id'),
+                source: urlParams.get('utm_source'),
+                campaign: urlParams.get('utm_campaign'),
+                medium: urlParams.get('utm_medium'),
+                content: urlParams.get('utm_content'),
+                term: urlParams.get('utm_term'),
+            }, 'utm');
+        }
+        index_1.ClientAnalytics.pushToPageAnalyticsData(analyticsDataFromServer);
+        index_1.ClientAnalytics.publish(index_1.ClientAnalytics.eventNames.PAGE_VIEW, true);
+        if (analyticsDataFromServer.publishEventsOnNavigate) {
+            analyticsDataFromServer.publishEventsOnNavigate.forEach((eventName) => {
+                index_1.ClientAnalytics.publish(eventName, true);
+            });
+        }
+        return function cleanup() {
+            index_1.ClientAnalytics.resetPageAnalyticsData();
+        };
+    }, [analyticsDataFromServer]);
+    return null;
+}
+exports.Analytics = Analytics;

package/dist/node/foundation/Analytics/Analytics.server.d.ts

@@ -0,0 +1 @@
+export declare function Analytics(): JSX.Element;

package/dist/node/foundation/Analytics/Analytics.server.js

@@ -0,0 +1,70 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Analytics = void 0;
+const React = __importStar(require("react"));
+const hook_1 = require("./hook");
+const Analytics_client_1 = require("./Analytics.client");
+const ServerRequestProvider_1 = require("../ServerRequestProvider");
+const AnalyticsErrorBoundary_client_1 = __importDefault(require("../AnalyticsErrorBoundary.client"));
+const DELAY_KEY = 'analytics-delay';
+function Analytics() {
+    const cache = (0, ServerRequestProvider_1.useServerRequest)().ctx.cache;
+    // If render cache is empty, create a 50 ms delay so that React doesn't resolve this
+    // component too early and potentially cause a mismatch in hydration
+    if (cache.size === 0 && !cache.has(DELAY_KEY)) {
+        let result;
+        let promise;
+        cache.set(DELAY_KEY, () => {
+            if (result !== undefined) {
+                return result;
+            }
+            if (!promise) {
+                promise = new Promise((resolve) => {
+                    setTimeout(() => {
+                        result = true;
+                        resolve(true);
+                    }, 50);
+                });
+            }
+            throw promise;
+        });
+    }
+    // Make sure all queries have returned before rendering the Analytics server component
+    cache.forEach((cacheFn) => {
+        if (cacheFn && typeof cacheFn === 'function') {
+            const result = cacheFn.call();
+            if (result instanceof Promise)
+                throw result;
+        }
+    });
+    const analyticsData = (0, hook_1.useServerAnalytics)();
+    return (React.createElement(AnalyticsErrorBoundary_client_1.default, null,
+        React.createElement(Analytics_client_1.Analytics, { analyticsDataFromServer: analyticsData })));
+}
+exports.Analytics = Analytics;