npm - @shopify/hydrogen - Versions diffs - 0.17.1 → 0.18.0 - Mend

@shopify/hydrogen 0.17.1 → 0.18.0

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

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

@@ -17,17 +17,27 @@ import { stripScriptsFromTemplate } from './utilities/template';
 import { Analytics } from './foundation/Analytics/Analytics.server';
 import { ServerAnalyticsRoute } from './foundation/Analytics/ServerAnalyticsRoute.server';
 import { getSyncSessionApi } from './foundation/session/session';
+import { parseJSON } from './utilities/parse';
 const DOCTYPE = '<!DOCTYPE html>';
 const CONTENT_TYPE = 'Content-Type';
 const HTML_CONTENT_TYPE = 'text/html; charset=UTF-8';
-export const renderHydrogen = (App, { shopifyConfig, routes, serverAnalyticsConnectors, session, }) => {
+export const renderHydrogen = (App, hydrogenConfig) => {
     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);
+        if (!hydrogenConfig) {
+            // @ts-ignore
+            // eslint-disable-next-line node/no-missing-import
+            const configFile = await import('virtual:hydrogen-config');
+            hydrogenConfig = configFile.default;
+        }
+        request.ctx.hydrogenConfig = hydrogenConfig;
+        request.ctx.buyerIpHeader = buyerIpHeader;
         const log = getLoggerWithContext(request);
-        const sessionApi = session ? session(log) : undefined;
+        const sessionApi = hydrogenConfig.session
+            ? hydrogenConfig.session(log)
+            : undefined;
         const componentResponse = new ServerComponentResponse();
         request.ctx.session = getSyncSessionApi(request, componentResponse, log, sessionApi);
         /**
@@ -38,16 +48,16 @@ export const renderHydrogen = (App, { shopifyConfig, routes, serverAnalyticsConn
         setConfig({ dev });
         if (url.pathname === EVENT_PATHNAME ||
             EVENT_PATHNAME_REGEX.test(url.pathname)) {
-            return ServerAnalyticsRoute(request, serverAnalyticsConnectors);
+            return ServerAnalyticsRoute(request, hydrogenConfig.serverAnalyticsConnectors);
         }
         const isReactHydrationRequest = url.pathname === RSC_PATHNAME;
-        if (!isReactHydrationRequest && routes) {
-            const apiRoute = getApiRoute(url, { routes });
+        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 renderApiRoute(request, apiRoute, shopifyConfig, sessionApi);
+                const apiResponse = await renderApiRoute(request, apiRoute, hydrogenConfig.shopify, sessionApi);
                 return apiResponse instanceof Request
                     ? handleRequest(apiResponse, options)
                     : apiResponse;
@@ -65,7 +75,6 @@ export const renderHydrogen = (App, { shopifyConfig, routes, serverAnalyticsConn
             App,
             log,
             dev,
-            routes,
             nonce,
             request,
             template,
@@ -88,7 +97,7 @@ export const renderHydrogen = (App, { shopifyConfig, routes, serverAnalyticsConn
     };
     return handleRequest;
 };
-function getApiRoute(url, { routes }) {
+function getApiRoute(url, routes) {
     const apiRoutes = getApiRoutes(routes);
     return getApiRouteFromURL(url, apiRoutes);
 }
@@ -97,15 +106,14 @@ function getApiRoute(url, { routes }) {
  * 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, routes, request, componentResponse, log, template, nonce, dev, }) {
+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,
-        routes,
-        log,
     }, { template });
     function onErrorShell(error) {
         log.error(error);
@@ -121,7 +129,7 @@ async function render(url, { App, routes, request, componentResponse, log, templ
      * 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['cache-control'] = componentResponse.cacheControlHeader;
+    headers.set('cache-control', componentResponse.cacheControlHeader);
     if (componentResponse.customBody) {
         // This can be used to return sitemap.xml or any other custom response.
         postRequestTasks('ssr', status, request, componentResponse);
@@ -131,7 +139,7 @@ async function render(url, { App, routes, request, componentResponse, log, templ
             headers,
         });
     }
-    headers[CONTENT_TYPE] = HTML_CONTENT_TYPE;
+    headers.set(CONTENT_TYPE, HTML_CONTENT_TYPE);
     html = applyHtmlHead(html, request.ctx.head, template);
     if (flight) {
         html = html.replace('</body>', () => `${flightContainer({
@@ -151,18 +159,17 @@ async function render(url, { App, routes, request, componentResponse, log, templ
  * 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, routes, request, response, componentResponse, log, template, nonce, dev, }) {
+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 } = stripScriptsFromTemplate(template);
     const { AppSSR, rscReadable } = buildAppSSR({
         App,
+        log,
         state,
         request,
         response: componentResponse,
-        log,
-        routes,
     }, { template: noScriptTemplate });
     const rscToScriptTagReadable = new ReadableStream({
         start(controller) {
@@ -213,6 +220,7 @@ async function stream(url, { App, routes, request, response, componentResponse,
             log.trace('worker complete stream');
             onCompleteAll.resolve(true);
         });
+        /* eslint-disable no-inner-declarations */
         async function prepareForStreaming(flush) {
             Object.assign(responseOptions, getResponseOptions(componentResponse, didError));
             /**
@@ -220,8 +228,7 @@ async function stream(url, { App, routes, request, response, componentResponse,
              * queries which might be caught behind Suspense. Clarify this or add
              * additional checks downstream?
              */
-            responseOptions.headers['cache-control'] =
-                componentResponse.cacheControlHeader;
+            responseOptions.headers.set('cache-control', componentResponse.cacheControlHeader);
             if (isRedirect(responseOptions)) {
                 return false;
             }
@@ -230,7 +237,7 @@ async function stream(url, { App, routes, request, response, componentResponse,
                     writable.write(encoder.encode(await componentResponse.customBody));
                     return false;
                 }
-                responseOptions.headers[CONTENT_TYPE] = HTML_CONTENT_TYPE;
+                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.
@@ -239,6 +246,7 @@ async function stream(url, { App, routes, request, response, componentResponse,
                 return true;
             }
         }
+        /* eslint-enable no-inner-declarations */
         const shouldReturnApp = (_a = (await prepareForStreaming(componentResponse.canStream()))) !== null && _a !== void 0 ? _a : (await onCompleteAll.promise.then(prepareForStreaming));
         if (shouldReturnApp) {
             let bufferedSsr = '';
@@ -353,15 +361,14 @@ async function stream(url, { App, routes, request, response, componentResponse,
 /**
  * Stream a hydration response to the client.
  */
-async function hydrate(url, { App, routes, request, response, componentResponse, isStreamable, log, }) {
-    const state = JSON.parse(url.searchParams.get('state') || '{}');
+async function hydrate(url, { App, log, request, response, isStreamable, componentResponse, }) {
+    const state = parseJSON(url.searchParams.get('state') || '{}');
     const { AppRSC } = buildAppRSC({
         App,
+        log,
         state,
         request,
         response: componentResponse,
-        log,
-        routes,
     });
     if (__WORKER__) {
         const rscReadable = rscRenderToReadableStream(AppRSC);
@@ -392,9 +399,12 @@ async function hydrate(url, { App, routes, request, response, componentResponse,
         });
     }
 }
-function buildAppRSC({ App, state, request, response, log, routes, }) {
+function buildAppRSC({ App, log, state, request, response }) {
     const hydrogenServerProps = { request, response, log };
-    const serverProps = { ...state, ...hydrogenServerProps, routes };
+    const serverProps = {
+        ...state,
+        ...hydrogenServerProps,
+    };
     request.ctx.router.serverProps = serverProps;
     const AppRSC = (React.createElement(ServerRequestProvider, { request: request, isRSC: true },
         React.createElement(PreloadQueries, { request: request },
@@ -403,14 +413,13 @@ function buildAppRSC({ App, state, request, response, log, routes, }) {
                 React.createElement(Analytics, null)))));
     return { AppRSC };
 }
-function buildAppSSR({ App, state, request, response, log, routes }, htmlOptions) {
+function buildAppSSR({ App, state, request, response, log }, htmlOptions) {
     const { AppRSC } = buildAppRSC({
         App,
+        log,
         state,
         request,
         response,
-        log,
-        routes,
     });
     const [rscReadableForFizz, rscReadableForFlight] = rscRenderToReadableStream(AppRSC).tee();
     const rscResponse = createFromReadableStream(rscReadableForFizz);
@@ -431,28 +440,23 @@ function PreloadQueries({ request, children, }) {
     return React.createElement(React.Fragment, null, children);
 }
 async function renderToBufferedString(ReactApp, { log, nonce }) {
-    return new Promise(async (resolve, reject) => {
-        if (__WORKER__) {
-            try {
-                const ssrReadable = await 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;
-                resolve(bufferReadableStream(ssrReadable.getReader()));
-            }
-            catch (error) {
-                reject(error);
-            }
-        }
-        else {
-            const writer = await createNodeWriter();
+    if (__WORKER__) {
+        const ssrReadable = await 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 bufferReadableStream(ssrReadable.getReader());
+    }
+    else {
+        const writer = await createNodeWriter();
+        return new Promise((resolve, reject) => {
             const { pipe } = ssrRenderToPipeableStream(ReactApp, {
                 nonce,
                 /**
@@ -470,8 +474,8 @@ async function renderToBufferedString(ReactApp, { log, nonce }) {
                 onShellError: reject,
                 onError: (error) => log.error(error),
             });
-        }
-    });
+        });
+    }
 }
 export default renderHydrogen;
 function startWritingHtmlToServerResponse(response, error) {
@@ -487,8 +491,7 @@ function startWritingHtmlToServerResponse(response, error) {
 function getResponseOptions({ headers, status, customStatus }, error) {
     var _a, _b;
     const responseInit = {};
-    // @ts-ignore
-    responseInit.headers = Object.fromEntries(headers.entries());
+    responseInit.headers = headers;
     if (error) {
         responseInit.status = 500;
     }
@@ -509,7 +512,7 @@ function writeHeadToServerResponse(response, serverComponentResponse, log, error
     if (statusText) {
         response.statusMessage = statusText;
     }
-    Object.entries(headers).forEach(([key, value]) => response.setHeader(key, value));
+    Object.entries(headers.raw()).forEach(([key, value]) => response.setHeader(key, value));
 }
 function isRedirect(response) {
     var _a, _b;

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

@@ -19,6 +19,7 @@ export declare const ClientAnalytics: {
         REMOVE_FROM_CART: string;
         UPDATE_CART: string;
         DISCOUNT_CODE_UPDATED: string;
+        PERFORMANCE: string;
     };
 };
 export {};

package/dist/esnext/foundation/Analytics/ClientAnalytics.js CHANGED Viewed

@@ -78,7 +78,13 @@ function subscribe(eventname, callbackFunction) {
     };
 }
 function pushToServer(init, searchParam) {
-    return fetch(`${EVENT_PATHNAME}${searchParam ? `?${searchParam}` : ''}`, init);
+    return fetch(`${EVENT_PATHNAME}${searchParam ? `?${searchParam}` : ''}`, Object.assign({
+        method: 'post',
+        headers: {
+            'cache-control': 'no-cache',
+            'Content-Type': 'application/json',
+        },
+    }, init));
 }
 export const ClientAnalytics = {
     pushToPageAnalyticsData,

package/dist/esnext/foundation/Analytics/connectors/PerformanceMetrics/PerformanceMetrics.client.d.ts ADDED Viewed

@@ -0,0 +1,7 @@
+declare global {
+    interface Window {
+        BOOMR: any;
+        BOOMR_onload: any;
+    }
+}
+export declare function PerformanceMetrics(): null;

package/dist/esnext/foundation/Analytics/connectors/PerformanceMetrics/PerformanceMetrics.client.js ADDED Viewed

@@ -0,0 +1,64 @@
+import { useEffect } from 'react';
+import { loadScript } from '../../../../utilities';
+import { ClientAnalytics } from '../../index';
+import { useShop } from '../../../useShop';
+const URL = 'https://cdn.shopify.com/shopifycloud/boomerang/shopify-boomerang-hydrogen.min.js';
+export function PerformanceMetrics() {
+    const { storeDomain } = useShop();
+    useEffect(() => {
+        try {
+            (function () {
+                if (window.BOOMR &&
+                    (window.BOOMR.version || window.BOOMR.snippetExecuted)) {
+                    return;
+                }
+                // Executes only on first mount
+                window.BOOMR = window.BOOMR || {};
+                window.BOOMR.hydrogenPerformanceEvent = (data) => {
+                    ClientAnalytics.publish(ClientAnalytics.eventNames.PERFORMANCE, true, data);
+                    ClientAnalytics.pushToServer({
+                        body: JSON.stringify(data),
+                    }, ClientAnalytics.eventNames.PERFORMANCE);
+                };
+                window.BOOMR.storeDomain = storeDomain;
+                function boomerangSaveLoadTime(e) {
+                    window.BOOMR_onload = (e && e.timeStamp) || Date.now();
+                }
+                // @ts-ignore
+                function boomerangInit(e) {
+                    e.detail.BOOMR.init();
+                    e.detail.BOOMR.t_end = Date.now();
+                }
+                if (window.addEventListener) {
+                    window.addEventListener('load', boomerangSaveLoadTime, false);
+                    // @ts-ignore
+                }
+                else if (window.attachEvent) {
+                    // @ts-ignore
+                    window.attachEvent('onload', boomerangSaveLoadTime);
+                }
+                if (document.addEventListener) {
+                    document.addEventListener('onBoomerangLoaded', boomerangInit);
+                    // @ts-ignore
+                }
+                else if (document.attachEvent) {
+                    // @ts-ignore
+                    document.attachEvent('onpropertychange', function (e) {
+                        if (!e)
+                            e = event;
+                        if (e.propertyName === 'onBoomerangLoaded')
+                            boomerangInit(e);
+                    });
+                }
+            })();
+            loadScript(URL).catch(() => {
+                // ignore if boomerang doesn't load
+                // most likely because of an ad blocker
+            });
+        }
+        catch (err) {
+            // Do nothing
+        }
+    }, [storeDomain]);
+    return null;
+}

package/dist/esnext/foundation/Analytics/connectors/PerformanceMetrics/PerformanceMetrics.server.d.ts ADDED Viewed

	@@ -0,0 +1 @@
1	+ export declare function request(request: Request, data?: any, contentType?: string): void;

package/dist/esnext/foundation/Analytics/connectors/PerformanceMetrics/PerformanceMetrics.server.js ADDED Viewed

@@ -0,0 +1,24 @@
+export function request(request, data, contentType) {
+    const url = new URL(request.url);
+    if (url.search === '?performance' && contentType === 'json') {
+        const initTime = new Date().getTime();
+        fetch('https://monorail-edge.shopifysvc.com/v1/produce', {
+            method: 'post',
+            headers: {
+                'content-type': 'text/plain',
+                'x-forwarded-for': request.headers.get('x-forwarded-for') || '',
+                'user-agent': request.headers.get('user-agent') || '',
+            },
+            body: JSON.stringify({
+                schema_id: 'hydrogen_buyer_performance/2.0',
+                payload: data,
+                metadata: {
+                    event_created_at_ms: initTime,
+                    event_sent_at_ms: new Date().getTime(),
+                },
+            }),
+        }).catch((error) => {
+            // send to bugsnag? oxygen?
+        });
+    }
+}

package/dist/esnext/foundation/Analytics/connectors/PerformanceMetrics/PerformanceMetricsDebug.client.d.ts ADDED Viewed

	@@ -0,0 +1 @@
1	+ export declare function PerformanceMetricsDebug(): null;

package/dist/esnext/foundation/Analytics/connectors/PerformanceMetrics/PerformanceMetricsDebug.client.js ADDED Viewed

@@ -0,0 +1,23 @@
+import { useEffect } from 'react';
+import { ClientAnalytics } from '../../index';
+const PAD = 10;
+let isInit = false;
+export function PerformanceMetricsDebug() {
+    useEffect(() => {
+        if (!isInit) {
+            isInit = true;
+            ClientAnalytics.subscribe(ClientAnalytics.eventNames.PERFORMANCE, (data) => {
+                console.group(`Performance - ${data.page_load_type} load`);
+                logMetricIf('TTFB:', data.response_start - data.navigation_start);
+                logMetricIf('FCP:', data.first_contentful_paint);
+                logMetricIf('LCP:', data.largest_contentful_paint);
+                logMetricIf('Duration:', data.response_end - data.navigation_start);
+                console.groupEnd();
+            });
+        }
+    });
+    return null;
+}
+function logMetricIf(lable, data) {
+    data && console.log(`${lable.padEnd(PAD)}${Math.round(data)} ms`);
+}

package/dist/esnext/foundation/Analytics/const.d.ts CHANGED Viewed

@@ -5,4 +5,5 @@ export declare const eventNames: {
     REMOVE_FROM_CART: string;
     UPDATE_CART: string;
     DISCOUNT_CODE_UPDATED: string;
+    PERFORMANCE: string;
 };

package/dist/esnext/foundation/Analytics/const.js CHANGED Viewed

@@ -5,4 +5,5 @@ export const eventNames = {
     REMOVE_FROM_CART: 'remove-from-cart',
     UPDATE_CART: 'update-cart',
     DISCOUNT_CODE_UPDATED: 'discount-code-updated',
+    PERFORMANCE: 'performance',
 };

package/dist/esnext/foundation/Cookie/Cookie.js CHANGED Viewed

@@ -1,5 +1,6 @@
 import { parse, stringify as stringifyCookie } from 'worktop/cookie';
 import { log } from '../../utilities/log';
+import { parseJSON } from '../../utilities/parse';
 const reservedCookieNames = ['mac', 'user_session_id'];
 /** The `Cookie` component helps you build your own custom cookie and session implementations. All
  * [Hydrogen session storage mechanisms](https://shopify.dev/custom-storefronts/hydrogen/framework/sessions#types-of-session-storage) use the
@@ -26,7 +27,7 @@ export class Cookie {
     }
     parse(cookie) {
         try {
-            const data = JSON.parse(parse(cookie)[this.name]);
+            const data = parseJSON(parse(cookie)[this.name]);
             this.data = data;
         }
         catch (e) {

package/dist/esnext/foundation/FileRoutes/FileRoutes.server.d.ts CHANGED Viewed

@@ -1,22 +1,22 @@
 import type { ImportGlobEagerOutput } from '../../types';
 interface FileRoutesProps {
     /** The routes defined by Vite's [import.meta.globEager](https://vitejs.dev/guide/features.html#glob-import) method. */
-    routes: ImportGlobEagerOutput;
+    routes?: ImportGlobEagerOutput;
     /** A path that's prepended to all file routes. You can modify `basePath` if you want to prefix all file routes. For example, you can prefix all file routes with a locale. */
     basePath?: string;
     /** The portion of the file route path that shouldn't be a part of the URL. You need to modify this if you want to import routes from a location other than the default `src/routes`. */
-    dirPrefix?: string;
+    dirPrefix?: string | RegExp;
 }
 /**
  * The `FileRoutes` component builds a set of default Hydrogen routes based on the output provided by Vite's
  * [import.meta.globEager](https://vitejs.dev/guide/features.html#glob-import) method. You can have multiple
  * instances of this component to source file routes from multiple locations.
  */
-export declare function FileRoutes({ routes, basePath, dirPrefix, }: FileRoutesProps): JSX.Element | null;
+export declare function FileRoutes({ routes, basePath, dirPrefix }: FileRoutesProps): JSX.Element | null;
 interface HydrogenRoute {
     component: any;
     path: string;
     exact: boolean;
 }
-export declare function createPageRoutes(pages: ImportGlobEagerOutput, topLevelPath: string | undefined, dirPrefix: string): HydrogenRoute[];
+export declare function createPageRoutes(pages: ImportGlobEagerOutput, topLevelPath?: string, dirPrefix?: string | RegExp): HydrogenRoute[];
 export {};

package/dist/esnext/foundation/FileRoutes/FileRoutes.server.js CHANGED Viewed

@@ -1,19 +1,31 @@
 import React, { useMemo } from 'react';
 import { matchPath } from '../../utilities/matchPath';
 import { log } from '../../utilities/log';
+import { extractPathFromRoutesKey } from '../../utilities/apiRoutes';
 import { useServerRequest } from '../ServerRequestProvider';
 import { RouteParamsProvider } from '../useRouteParams/RouteParamsProvider.client';
+import { findRoutePrefix } from '../../utilities/findRoutePrefix';
 /**
  * The `FileRoutes` component builds a set of default Hydrogen routes based on the output provided by Vite's
  * [import.meta.globEager](https://vitejs.dev/guide/features.html#glob-import) method. You can have multiple
  * instances of this component to source file routes from multiple locations.
  */
-export function FileRoutes({ routes, basePath = '/', dirPrefix = './routes', }) {
+export function FileRoutes({ routes, basePath, dirPrefix }) {
+    var _a;
     const request = useServerRequest();
     const { routeRendered, serverProps } = request.ctx.router;
     if (routeRendered)
         return null;
-    const pageRoutes = useMemo(() => createPageRoutes(routes, basePath, dirPrefix), [routes, basePath]);
+    if (!routes) {
+        const fileRoutes = request.ctx.hydrogenConfig.routes;
+        routes = (_a = fileRoutes === null || fileRoutes === void 0 ? void 0 : fileRoutes.files) !== null && _a !== void 0 ? _a : fileRoutes;
+        dirPrefix !== null && dirPrefix !== void 0 ? dirPrefix : (dirPrefix = fileRoutes === null || fileRoutes === void 0 ? void 0 : fileRoutes.dirPrefix);
+        basePath !== null && basePath !== void 0 ? basePath : (basePath = fileRoutes === null || fileRoutes === void 0 ? void 0 : fileRoutes.basePath);
+    }
+    basePath !== null && basePath !== void 0 ? basePath : (basePath = '/');
+    /* eslint-disable react-hooks/rules-of-hooks */
+    const pageRoutes = useMemo(() => createPageRoutes(routes, basePath, dirPrefix), [routes, basePath, dirPrefix]);
+    /* eslint-enable react-hooks/rules-of-hooks */
     let foundRoute, foundRouteDetails;
     for (let i = 0; i < pageRoutes.length; i++) {
         foundRouteDetails = matchPath(serverProps.pathname, pageRoutes[i]);
@@ -32,26 +44,11 @@ export function FileRoutes({ routes, basePath = '/', dirPrefix = './routes', })
 }
 export function createPageRoutes(pages, topLevelPath = '*', dirPrefix) {
     const topLevelPrefix = topLevelPath.replace('*', '').replace(/\/$/, '');
-    const routes = Object.keys(pages)
+    const keys = Object.keys(pages);
+    const commonRoutePrefix = dirPrefix !== null && dirPrefix !== void 0 ? dirPrefix : findRoutePrefix(keys);
+    const routes = keys
         .map((key) => {
-        let path = key
-            .replace(dirPrefix, '')
-            .replace(/\.server\.(t|j)sx?$/, '')
-            /**
-             * Replace /index with /
-             */
-            .replace(/\/index$/i, '/')
-            /**
-             * Only lowercase the first letter. This allows the developer to use camelCase
-             * dynamic paths while ensuring their standard routes are normalized to lowercase.
-             */
-            .replace(/\b[A-Z]/, (firstLetter) => firstLetter.toLowerCase())
-            /**
-             * Convert /[handle].jsx and /[...handle].jsx to /:handle.jsx for react-router-dom
-             */
-            .replace(/\[(?:[.]{3})?(\w+?)\]/g, (_match, param) => `:${param}`);
-        if (path.endsWith('/') && path !== '/')
-            path = path.substring(0, path.length - 1);
+        const path = extractPathFromRoutesKey(key, commonRoutePrefix);
         /**
          * Catch-all routes [...handle].jsx don't need an exact match
          * https://reactrouter.com/core/api/Route/exact-bool

package/dist/esnext/foundation/FileSessionStorage/FileSessionStorage.js CHANGED Viewed

@@ -2,6 +2,7 @@ import { Cookie } from '../Cookie/Cookie';
 import { v4 as uid } from 'uuid';
 import path from 'path';
 import { promises as fsp } from 'fs';
+import { parseJSON } from '../../utilities/parse';
 async function wait() {
     return new Promise((resolve) => setTimeout(resolve));
 }
@@ -77,7 +78,7 @@ async function getFile(file, expires, log) {
         try {
             const textContent = await fsp.readFile(file, { encoding: 'utf-8' });
             try {
-                content = JSON.parse(textContent);
+                content = parseJSON(textContent);
             }
             catch (error) {
                 log.warn(`Cannot parse existing session file: ${file}`);

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

@@ -9,6 +9,7 @@ export default function Redirect({ to }) {
         else {
             navigate(to);
         }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
     return null;
 }

package/dist/esnext/foundation/Route/Route.server.js CHANGED Viewed

@@ -1,15 +1,12 @@
 import React, { cloneElement } from 'react';
 import { useServerRequest } from '../ServerRequestProvider';
 import { matchPath } from '../../utilities/matchPath';
-import { Boomerang } from '../Boomerang/Boomerang.client';
 import { RouteParamsProvider } from '../useRouteParams/RouteParamsProvider.client';
-import { useServerAnalytics } from '../Analytics';
 /**
  * The `Route` component is used to set up a route in Hydrogen that's independent of the file system. Routes are
  * matched in the order that they're defined.
  */
 export function Route({ path, page }) {
-    var _a;
     const request = useServerRequest();
     const { routeRendered, serverProps } = request.ctx.router;
     if (routeRendered)
@@ -25,13 +22,7 @@ export function Route({ path, page }) {
     if (match) {
         request.ctx.router.routeRendered = true;
         request.ctx.router.routeParams = match.params;
-        const name = (_a = page === null || page === void 0 ? void 0 : page.type) === null || _a === void 0 ? void 0 : _a.name;
-        useServerAnalytics({
-            templateName: name,
-        });
-        return (React.createElement(RouteParamsProvider, { routeParams: match.params },
-            cloneElement(page, { params: match.params || {}, ...serverProps }),
-            name ? React.createElement(Boomerang, { pageTemplate: name }) : null));
+        return (React.createElement(RouteParamsProvider, { routeParams: match.params }, cloneElement(page, { params: match.params || {}, ...serverProps })));
     }
     return null;
 }