@shopify/hydrogen 0.14.0 → 0.15.0

package/CHANGELOG.md

@@ -1,5 +1,101 @@
 # Changelog
 
+## 0.15.0
+
+### Minor Changes
+
+- [#983](https://github.com/Shopify/hydrogen/pull/983) [`52af261b`](https://github.com/Shopify/hydrogen/commit/52af261ba2bf6ed08e232b9fb2d75e69905f4cc6) Thanks [@jplhomer](https://github.com/jplhomer)! - Introduce Suspense-friendly `fetchSync` API for server and client components.
+
+  When using `fetchSync` in server components, you provide options for caching and preloading. This is similar to the [`useQuery` hook](<[/api/hydrogen/hooks/global/useQuery](https://shopify.dev/api/hydrogen/hooks/global/usequery)>):
+
+  ```jsx
+  import {fetchSync, CacheMinutes} from '@shopify/hydrogen';
+  import {Suspense} from 'react';
+
+  export function MyServerComponent() {
+    return (
+      <Suspense fallback="Loading...">
+        <MyThings />
+      </Suspense>
+    );
+  }
+
+  function MyThings() {
+    const things = fetchSync('https://3p.api.com/things.json', {
+      preload: true,
+      cache: CacheMinutes(),
+    }).json();
+
+    return <h2>{things.title}</h2>;
+  }
+  ```
+
+  When using `fetchSync` in client components, you cannot provide options for caching and preloading. You must import `fetchSync` from `@shopify/hydrogen/client`:
+
+  ```jsx
+  import {fetchSync} from '@shopify/hydrogen/client';
+  import {Suspense} from 'react';
+
+  export function MyClientComponent() {
+    return (
+      <Suspense fallback="Loading...">
+        <MyThings />
+      </Suspense>
+    );
+  }
+
+  function MyThings() {
+    const things = fetchSync('https://3p.api.com/things.json').json();
+
+    return <h2>{things.title}</h2>;
+  }
+  ```
+
+* [#890](https://github.com/Shopify/hydrogen/pull/890) [`a4c6d6c4`](https://github.com/Shopify/hydrogen/commit/a4c6d6c4d31337cecbd4d5afb76887bcd31ceb65) Thanks [@wizardlyhel](https://github.com/wizardlyhel)! - Analytics instrumentation - this provides integration points for both server
+  and client side analytics instrumentations
+
+  - [Usage documentation](https://shopify.dev/custom-storefronts/hydrogen/framework/analytics)
+
+### Patch Changes
+
+- [#1061](https://github.com/Shopify/hydrogen/pull/1061) [`a4aa3887`](https://github.com/Shopify/hydrogen/commit/a4aa3887be9f448ec1f4322fadb9821e0d19a0b5) Thanks [@jplhomer](https://github.com/jplhomer)! - Support script tags in index.html that contain line breaks
+
+* [#1057](https://github.com/Shopify/hydrogen/pull/1057) [`06d92ddc`](https://github.com/Shopify/hydrogen/commit/06d92ddc44e03d37d2dd8a9bbeaa5fab4c4bbbd1) Thanks [@frandiox](https://github.com/frandiox)! - Ability to concatenate requests in API route handlers without leaving the server by returning a new Request instance.
+
+  ```jsx
+  // src/routes/my-page.server.jsx
+
+  export async function api(request) {
+    if (request.method === 'POST') {
+      // do some work here...
+    }
+
+    return new Request(request.url, {method: 'GET'});
+  }
+
+  export default function Page() {
+    return (
+      <form action="/my-page" method="POST">
+        ...
+      </form>
+    );
+  }
+  ```
+
+  In the previous example, a POST request to `/my-page` would run the API handler and automatically continue with the server component rendering (GET). This is useful for handling HTML forms without waterfall requests.
+
+- [#1049](https://github.com/Shopify/hydrogen/pull/1049) [`b88a885d`](https://github.com/Shopify/hydrogen/commit/b88a885d6b062209497a97d8ce7bcd438787d53c) Thanks [@wizardlyhel](https://github.com/wizardlyhel)! - Support sub request cache control header `stale-while-revalidate` everywhere
+
+* [#1047](https://github.com/Shopify/hydrogen/pull/1047) [`5268bf85`](https://github.com/Shopify/hydrogen/commit/5268bf85f61f8abf0e97788b7ae925ad4f3183b2) Thanks [@jplhomer](https://github.com/jplhomer)! - Restore scroll position when navigating using the back and forward buttons.
+
+- [#1062](https://github.com/Shopify/hydrogen/pull/1062) [`cc172ae7`](https://github.com/Shopify/hydrogen/commit/cc172ae778bad0d654adcd2f41d4a548d1d94a0a) Thanks [@jplhomer](https://github.com/jplhomer)! - Fix encoding of quotes in CSS Modules which caused hydration errors
+
+* [#1046](https://github.com/Shopify/hydrogen/pull/1046) [`3947d53a`](https://github.com/Shopify/hydrogen/commit/3947d53a99868a1e218bfab958b824ce0484615a) Thanks [@michenly](https://github.com/michenly)! - Fixed server Cookie bug where initializing with empty string will resulted in 1 item in the Cookies Map.
+
+- [#1059](https://github.com/Shopify/hydrogen/pull/1059) [`401f329d`](https://github.com/Shopify/hydrogen/commit/401f329d331bebc4842204d4df39c4dd6797b4e1) Thanks [@frandiox](https://github.com/frandiox)! - Fix link prefetch mismatch due to query-string
+
+* [#1072](https://github.com/Shopify/hydrogen/pull/1072) [`47c0c184`](https://github.com/Shopify/hydrogen/commit/47c0c18411eb20fa6652a981b09fd65cbed38304) Thanks [@michenly](https://github.com/michenly)! - Improve type for ShopifyContextValue to be based on ShopifyConfig.
+
 ## 0.14.0
 
 ### Minor Changes

package/dist/esnext/client.d.ts

@@ -5,5 +5,8 @@ export * from './foundation/useShop';
 export * from './foundation/ServerStateProvider';
 export { Head } from './foundation/Head';
 export * from './utilities';
+export { ClientAnalytics } from './foundation/Analytics';
 export { useRouteParams } from './foundation/useRouteParams/useRouteParams';
 export { useNavigate } from './foundation/useNavigate/useNavigate';
+export { fetchSync } from './foundation/fetchSync/client/fetchSync';
+export { suspendFunction, preloadFunction } from './utilities/suspense';

package/dist/esnext/client.js

@@ -5,5 +5,8 @@ export * from './foundation/useShop';
 export * from './foundation/ServerStateProvider';
 export { Head } from './foundation/Head';
 export * from './utilities';
+export { ClientAnalytics } from './foundation/Analytics';
 export { useRouteParams } from './foundation/useRouteParams/useRouteParams';
 export { useNavigate } from './foundation/useNavigate/useNavigate';
+export { fetchSync } from './foundation/fetchSync/client/fetchSync';
+export { suspendFunction, preloadFunction } from './utilities/suspense';

package/dist/esnext/components/CartProvider/CartProvider.client.js

@@ -5,6 +5,7 @@ import { useCartFetch } from './hooks';
 import { CartContext } from './context';
 import { CART_ID_STORAGE_KEY } from './constants';
 import { useServerState } from '../../foundation/useServerState';
+import { ClientAnalytics } from '../../foundation/Analytics';
 function cartReducer(state, action) {
     switch (action.type) {
         case 'cartFetch': {
@@ -200,6 +201,12 @@ export function CartProvider({ children, numCartLines, onCreate, onLineAdd, onLi
             });
         }
         if ((_b = data === null || data === void 0 ? void 0 : data.cartCreate) === null || _b === void 0 ? void 0 : _b.cart) {
+            if (cart.lines) {
+                ClientAnalytics.publish(ClientAnalytics.eventNames.ADD_TO_CART, true, {
+                    addedCartLines: cart.lines,
+                    cart: data.cartCreate.cart,
+                });
+            }
             dispatch({
                 type: 'resolve',
                 cart: cartFromGraphQL(data.cartCreate.cart),
@@ -228,6 +235,10 @@ export function CartProvider({ children, numCartLines, onCreate, onLineAdd, onLi
                 });
             }
             if ((_a = data === null || data === void 0 ? void 0 : data.cartLinesAdd) === null || _a === void 0 ? void 0 : _a.cart) {
+                ClientAnalytics.publish(ClientAnalytics.eventNames.ADD_TO_CART, true, {
+                    addedCartLines: lines,
+                    cart: data.cartLinesAdd.cart,
+                });
                 dispatch({
                     type: 'resolve',
                     cart: cartFromGraphQL(data.cartLinesAdd.cart),
@@ -256,6 +267,10 @@ export function CartProvider({ children, numCartLines, onCreate, onLineAdd, onLi
                 });
             }
             if ((_a = data === null || data === void 0 ? void 0 : data.cartLinesRemove) === null || _a === void 0 ? void 0 : _a.cart) {
+                ClientAnalytics.publish(ClientAnalytics.eventNames.REMOVE_FROM_CART, true, {
+                    removedCartLines: lines,
+                    cart: data.cartLinesRemove.cart,
+                });
                 dispatch({
                     type: 'resolve',
                     cart: cartFromGraphQL(data.cartLinesRemove.cart),
@@ -284,6 +299,10 @@ export function CartProvider({ children, numCartLines, onCreate, onLineAdd, onLi
                 });
             }
             if ((_a = data === null || data === void 0 ? void 0 : data.cartLinesUpdate) === null || _a === void 0 ? void 0 : _a.cart) {
+                ClientAnalytics.publish(ClientAnalytics.eventNames.UPDATE_CART, true, {
+                    updatedCartLines: lines,
+                    oldCart: state.cart,
+                });
                 dispatch({
                     type: 'resolve',
                     cart: cartFromGraphQL(data.cartLinesUpdate.cart),
@@ -396,6 +415,10 @@ export function CartProvider({ children, numCartLines, onCreate, onLineAdd, onLi
                 });
             }
             if ((_a = data === null || data === void 0 ? void 0 : data.cartDiscountCodesUpdate) === null || _a === void 0 ? void 0 : _a.cart) {
+                ClientAnalytics.publish(ClientAnalytics.eventNames.DISCOUNT_CODE_UPDATED, true, {
+                    updatedDiscountCodes: discountCodes,
+                    cart: data.cartDiscountCodesUpdate.cart,
+                });
                 dispatch({
                     type: 'resolve',
                     cart: cartFromGraphQL(data.cartDiscountCodesUpdate.cart),

package/dist/esnext/components/DevTools.d.ts

@@ -0,0 +1 @@
+export default function DevTools(): JSX.Element | null;

package/dist/esnext/components/DevTools.js

@@ -0,0 +1,128 @@
+import React, { useEffect, useState, useCallback } from 'react';
+export default function DevTools() {
+    const [warnings, setWarnings] = useState(null);
+    const [open, setOpen] = useState(false);
+    const [activePanel, setActivePanel] = useState('warnings');
+    const toggleOpen = useCallback(() => setOpen((state) => !state), []);
+    const [hasMounted, setHasMounted] = React.useState(false);
+    useEffect(() => {
+        setHasMounted(true);
+        if (import.meta.hot) {
+            import.meta.hot.on('hydrogen', ({ type, data }) => {
+                if (type === 'warn') {
+                    setWarnings((state) => [...(state || []), data]);
+                }
+            });
+        }
+    }, []);
+    const perfData = performance.getEntriesByType('navigation');
+    const entry = perfData[0];
+    let activePanelContent = null;
+    switch (activePanel) {
+        case 'warnings':
+            const warningsMarkup = warnings
+                ? warnings.map((war, i) => React.createElement("li", { key: war + i }, war))
+                : null;
+            activePanelContent = (React.createElement(React.Fragment, null,
+                React.createElement(PanelHeading, null, "Overfetched graphQL fields"),
+                React.createElement("ul", { style: {
+                        fontFamily: 'monospace',
+                        paddingTop: '1em',
+                        fontSize: '0.9em',
+                    } }, warningsMarkup)));
+            break;
+        case 'network':
+            activePanelContent = (React.createElement(React.Fragment, null,
+                React.createElement(PanelHeading, null, "Metrics"),
+                React.createElement("ul", { style: {
+                        fontFamily: 'monospace',
+                        paddingTop: '1em',
+                        fontSize: '0.9em',
+                    } }, Object.entries(entry.toJSON())
+                    .filter(([key]) => ['duration', 'domInteractive'].includes(key))
+                    .map(([key, value]) => (React.createElement("li", { key: key },
+                    React.createElement("strong", null, key),
+                    " ",
+                    (value / 1000).toFixed(2),
+                    "s"))))));
+            break;
+    }
+    const buttonText = (React.createElement("svg", { style: {
+            height: '3em',
+            width: '3em',
+        }, width: "131", height: "130", viewBox: "0 0 131 130", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+        React.createElement("path", { d: "M64.9548 106.281L27.1377 86.1894L40.0714 79.3723L54.6329 87.1049L66.851 80.6638L52.2895 72.9313L65.2231 66.0979L103.04 86.1894L90.1065 93.0064L76.35 85.6989L64.114 92.1563L77.8884 99.4638L64.9548 106.281Z", fill: "white" }),
+        React.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M65.2247 25L105.178 46.2267L90.105 54.1716L76.3488 46.8642L66.2525 52.1924L80.028 59.5005L64.9532 67.446L25 46.2196L40.0734 38.2748L54.6349 46.0073L64.713 40.6944L50.1533 32.9628L65.2247 25ZM54.4262 32.9673L68.9896 40.7008L54.6315 48.27L40.0699 40.5374L29.276 46.2267L64.9569 65.1833L75.7495 59.4947L61.9761 52.1878L76.3518 44.6012L90.1087 51.9088L100.902 46.2196L65.2221 27.2634L54.4262 32.9673Z", fill: "white" })));
+    if (import.meta.env.DEV && hasMounted) {
+        return (React.createElement("div", { style: {
+                position: 'fixed',
+                right: open ? 0 : '2em',
+                left: open ? 0 : '2em',
+                bottom: open ? 0 : '-2em',
+                borderRadius: open ? 0 : '2em',
+                top: '100%',
+                zIndex: 10000,
+                display: 'flex',
+                flexDirection: 'column',
+                overflow: 'hidden',
+                height: open ? '75%' : '4em',
+                transform: open ? 'translateY(-100%)' : 'translateY(-5em)',
+            } },
+            React.createElement("button", { style: {
+                    position: 'absolute',
+                    top: '0.35em',
+                    right: '1em',
+                    overflow: 'hidden',
+                    zIndex: 10,
+                }, onClick: toggleOpen }, buttonText),
+            React.createElement("div", { style: {
+                    overflow: 'scroll',
+                    color: 'white',
+                    height: '100%',
+                    padding: '2em',
+                    background: 'rgba(0, 0, 0, 0.95)',
+                    borderRadius: open ? 0 : '2em',
+                } },
+                React.createElement("div", { style: {
+                        position: 'absolute',
+                        padding: '1.2em 2em',
+                        top: 0,
+                        left: '-0.5em',
+                        right: 0,
+                        background: 'rgba(0, 0, 0, 0.95)',
+                        borderRadius: open ? 0 : '2em',
+                        display: 'flex',
+                        alignItems: 'center',
+                    } },
+                    warnings && warnings.length > 0 && (React.createElement("button", { onClick: () => {
+                            setOpen(true);
+                            setActivePanel('warnings');
+                        }, style: {
+                            margin: '0 0.5em',
+                            textDecoration: open && activePanel === 'warnings' ? 'underline' : 'none',
+                        } },
+                        "Warnings",
+                        ' ',
+                        warnings && (React.createElement("strong", { style: {
+                                borderRadius: '2em',
+                                padding: '.25em 0.5em',
+                                background: 'white',
+                                margin: '0 0.25em',
+                                color: 'black',
+                                textAlign: 'center',
+                            } }, warnings.length)))),
+                    React.createElement("button", { onClick: () => {
+                            setOpen(true);
+                            setActivePanel('network');
+                        }, disabled: activePanel === 'network', style: {
+                            margin: '0 0.5em',
+                            textDecoration: open && activePanel === 'network' ? 'underline' : 'none',
+                        } }, "Network")),
+                React.createElement("div", { style: { paddingTop: '2em' } }, activePanelContent))));
+    }
+    return null;
+}
+const PanelHeading = ({ children }) => (React.createElement("h1", { style: {
+        paddingTop: '1em',
+        fontWeight: 'bold',
+    } }, children));

package/dist/esnext/components/Link/Link.client.js

@@ -95,7 +95,7 @@ function Prefetch({ pathname }) {
     const newLocation = new URL(newPath, window.location.href);
     const proposedServerState = getProposedServerState({
         pathname: newLocation.pathname,
-        search: newLocation.search || undefined,
+        search: newLocation.search,
     });
     const href = `${RSC_PATHNAME}?state=` +
         encodeURIComponent(JSON.stringify(proposedServerState));

package/dist/esnext/constants.d.ts

@@ -1 +1,3 @@
 export declare const RSC_PATHNAME = "/__rsc";
+export declare const EVENT_PATHNAME = "/__event";
+export declare const EVENT_PATHNAME_REGEX: RegExp;

package/dist/esnext/constants.js

@@ -1 +1,3 @@
 export const RSC_PATHNAME = '/__rsc';
+export const EVENT_PATHNAME = '/__event';
+export const EVENT_PATHNAME_REGEX = new RegExp(`^${EVENT_PATHNAME}\/`);

package/dist/esnext/entry-client.js

@@ -4,6 +4,7 @@ import { hydrateRoot } from 'react-dom/client';
 import { ErrorBoundary } from 'react-error-boundary';
 import { useServerResponse } from './framework/Hydration/rsc';
 import { ServerStateProvider } from './foundation/ServerStateProvider';
+const DevTools = React.lazy(() => import('./components/DevTools'));
 const renderHydrogen = async (ClientWrapper, config) => {
     const root = document.getElementById('root');
     if (!root) {
@@ -20,10 +21,12 @@ const renderHydrogen = async (ClientWrapper, config) => {
     // default to StrictMode on, unless explicitly turned off
     const RootComponent = (config === null || config === void 0 ? void 0 : config.strictMode) !== false ? StrictMode : Fragment;
     let hasCaughtError = false;
-    hydrateRoot(root, React.createElement(RootComponent, null,
-        React.createElement(ErrorBoundary, { FallbackComponent: Error },
-            React.createElement(Suspense, { fallback: null },
-                React.createElement(Content, { clientWrapper: ClientWrapper })))), {
+    hydrateRoot(root, React.createElement(React.Fragment, null,
+        React.createElement(RootComponent, null,
+            React.createElement(ErrorBoundary, { FallbackComponent: Error },
+                React.createElement(Suspense, { fallback: null },
+                    React.createElement(Content, { clientWrapper: ClientWrapper })))),
+        typeof DevTools !== 'undefined' && (config === null || config === void 0 ? void 0 : config.showDevTools) ? (React.createElement(DevTools, null)) : null), {
         onRecoverableError(e) {
             if (__DEV__ && !hasCaughtError) {
                 hasCaughtError = true;

package/dist/esnext/entry-server.d.ts

@@ -19,5 +19,5 @@ interface RequestHandlerOptions {
 export interface RequestHandler {
     (request: Request | IncomingMessage, options: RequestHandlerOptions): Promise<Response | undefined>;
 }
-export declare const renderHydrogen: (App: any, { shopifyConfig, routes }: ServerHandlerConfig) => RequestHandler;
+export declare const renderHydrogen: (App: any, { shopifyConfig, routes, serverAnalyticsConnectors }: ServerHandlerConfig) => RequestHandler;
 export default renderHydrogen;

package/dist/esnext/entry-server.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { Suspense } from 'react';
 import { logServerResponse, logCacheControlHeaders, logQueryTimings, getLoggerWithContext, } from './utilities/log';
 import { getErrorMarkup } from './utilities/error';
 import { defer } from './utilities/defer';
@@ -12,13 +12,16 @@ import { isBotUA } from './utilities/bot-ua';
 import { setContext, setCache } from './framework/runtime';
 import { setConfig } from './framework/config';
 import { ssrRenderToPipeableStream, ssrRenderToReadableStream, rscRenderToReadableStream, createFromReadableStream, isStreamingSupported, bufferReadableStream, } from './streaming.server';
-import { RSC_PATHNAME } from './constants';
+import { RSC_PATHNAME, EVENT_PATHNAME, EVENT_PATHNAME_REGEX } from './constants';
 import { stripScriptsFromTemplate } from './utilities/template';
+import { Analytics } from './foundation/Analytics/Analytics.server';
+import { ServerAnalyticsRoute } from './foundation/Analytics/ServerAnalyticsRoute.server';
 const DOCTYPE = '<!DOCTYPE html>';
 const CONTENT_TYPE = 'Content-Type';
 const HTML_CONTENT_TYPE = 'text/html; charset=UTF-8';
-export const renderHydrogen = (App, { shopifyConfig, routes }) => {
-    const handleRequest = async function (rawRequest, { indexTemplate, streamableResponse, dev, cache, context, nonce, buyerIpHeader, }) {
+export const renderHydrogen = (App, { shopifyConfig, routes, serverAnalyticsConnectors }) => {
+    const handleRequest = async function (rawRequest, options) {
+        const { indexTemplate, streamableResponse, dev, cache, context, nonce, buyerIpHeader, } = options;
         const request = new ServerComponentRequest(rawRequest);
         request.ctx.buyerIpHeader = buyerIpHeader;
         const url = new URL(request.url);
@@ -30,24 +33,31 @@ export const renderHydrogen = (App, { shopifyConfig, routes }) => {
         setCache(cache);
         setContext(context);
         setConfig({ dev });
-        const isReactHydrationRequest = url.pathname === RSC_PATHNAME;
-        let template = typeof indexTemplate === 'function'
-            ? await indexTemplate(url.toString())
-            : indexTemplate;
-        if (template && typeof template !== 'string') {
-            template = template.default;
+        if (url.pathname === EVENT_PATHNAME ||
+            EVENT_PATHNAME_REGEX.test(url.pathname)) {
+            return ServerAnalyticsRoute(request, serverAnalyticsConnectors);
         }
+        const isReactHydrationRequest = url.pathname === RSC_PATHNAME;
         if (!isReactHydrationRequest && routes) {
             const apiRoute = getApiRoute(url, { 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')) {
-                return renderApiRoute(request, apiRoute, shopifyConfig);
+                const apiResponse = await renderApiRoute(request, apiRoute, shopifyConfig);
+                return apiResponse instanceof Request
+                    ? handleRequest(apiResponse, options)
+                    : apiResponse;
             }
         }
         const isStreamable = !isBotUA(url, request.headers.get('user-agent')) &&
             (!!streamableResponse || (await isStreamingSupported()));
+        let template = typeof indexTemplate === 'function'
+            ? await indexTemplate(url.toString())
+            : indexTemplate;
+        if (template && typeof template !== 'string') {
+            template = template.default;
+        }
         const params = {
             App,
             log,
@@ -381,7 +391,9 @@ function buildAppRSC({ App, state, request, response, log, routes, }) {
     request.ctx.router.serverProps = serverProps;
     const AppRSC = (React.createElement(ServerRequestProvider, { request: request, isRSC: true },
         React.createElement(PreloadQueries, { request: request },
-            React.createElement(App, { ...serverProps }))));
+            React.createElement(App, { ...serverProps }),
+            React.createElement(Suspense, { fallback: null },
+                React.createElement(Analytics, null)))));
     return { AppRSC };
 }
 function buildAppSSR({ App, state, request, response, log, routes }, htmlOptions) {
@@ -400,14 +412,16 @@ function buildAppSSR({ App, state, request, response, log, routes }, htmlOptions
         React.createElement(ServerRequestProvider, { request: request, isRSC: false },
             React.createElement(ServerStateProvider, { serverState: state, setServerState: () => { } },
                 React.createElement(PreloadQueries, { request: request },
-                    React.createElement(React.Suspense, { fallback: null },
-                        React.createElement(RscConsumer, null)))))));
+                    React.createElement(Suspense, { fallback: null },
+                        React.createElement(RscConsumer, null)),
+                    React.createElement(Suspense, { fallback: null },
+                        React.createElement(Analytics, null)))))));
     return { AppSSR, rscReadable: rscReadableForFlight };
 }
 function PreloadQueries({ request, children, }) {
     const preloadQueries = request.getPreloadQueries();
     preloadRequestCacheData(request, preloadQueries);
-    return children;
+    return React.createElement(React.Fragment, null, children);
 }
 async function renderToBufferedString(ReactApp, { log, nonce }) {
     return new Promise(async (resolve, reject) => {

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

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

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

@@ -0,0 +1,28 @@
+import { useEffect } from 'react';
+import { ClientAnalytics } from './index';
+export function Analytics({ analyticsDataFromServer, }) {
+    useEffect(() => {
+        const urlParams = new URLSearchParams(window.location.search);
+        if (urlParams.has('utm_source')) {
+            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');
+        }
+        ClientAnalytics.pushToPageAnalyticsData(analyticsDataFromServer);
+        ClientAnalytics.publish(ClientAnalytics.eventNames.PAGE_VIEW, true);
+        if (analyticsDataFromServer.publishEventsOnNavigate) {
+            analyticsDataFromServer.publishEventsOnNavigate.forEach((eventName) => {
+                ClientAnalytics.publish(eventName, true);
+            });
+        }
+        return function cleanup() {
+            ClientAnalytics.resetPageAnalyticsData();
+        };
+    }, [analyticsDataFromServer]);
+    return null;
+}

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

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

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

@@ -0,0 +1,38 @@
+import React from 'react';
+import { useServerAnalytics } from './hook';
+import { Analytics as AnalyticsClient } from './Analytics.client';
+import { useServerRequest } from '../ServerRequestProvider';
+const DELAY_KEY = 'analytics-delay';
+export function Analytics() {
+    const cache = 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 = useServerAnalytics();
+    return React.createElement(AnalyticsClient, { analyticsDataFromServer: analyticsData });
+}

package/dist/esnext/foundation/Analytics/ClientAnalytics.d.ts

@@ -0,0 +1,24 @@
+import type { Subscriber, SubscriberFunction } from './types';
+declare function pushToPageAnalyticsData(data: any, namespace?: string): void;
+declare function getPageAnalyticsData(): any;
+declare function resetPageAnalyticsData(): void;
+declare function publish(eventname: string, guardDup?: boolean, payload?: any): void;
+declare function subscribe(eventname: string, callbackFunction: SubscriberFunction): Subscriber;
+declare function pushToServer(init?: RequestInit, searchParam?: string): Promise<Response>;
+export declare const ClientAnalytics: {
+    pushToPageAnalyticsData: typeof pushToPageAnalyticsData;
+    getPageAnalyticsData: typeof getPageAnalyticsData;
+    resetPageAnalyticsData: typeof resetPageAnalyticsData;
+    publish: typeof publish;
+    subscribe: typeof subscribe;
+    pushToServer: typeof pushToServer;
+    eventNames: {
+        PAGE_VIEW: string;
+        VIEWED_PRODUCT: string;
+        ADD_TO_CART: string;
+        REMOVE_FROM_CART: string;
+        UPDATE_CART: string;
+        DISCOUNT_CODE_UPDATED: string;
+    };
+};
+export {};