npm - @shopify/hydrogen - Versions diffs - 0.11.1 → 0.13.1 - Mend

@shopify/hydrogen 0.11.1 → 0.13.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 (318) hide show

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

@@ -1,7 +1,11 @@
 "use strict";
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[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];
@@ -40,10 +44,13 @@ 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 DOCTYPE = '<!DOCTYPE html>';
+const CONTENT_TYPE = 'Content-Type';
 const HTML_CONTENT_TYPE = 'text/html; charset=UTF-8';
-const renderHydrogen = (App, { pages }) => {
-    const handleRequest = async function (rawRequest, { indexTemplate, streamableResponse, dev, cache, context, nonce }) {
+const renderHydrogen = (App, { shopifyConfig, routes }) => {
+    const handleRequest = async function (rawRequest, { indexTemplate, streamableResponse, dev, cache, context, nonce, buyerIpHeader, }) {
         const request = new ServerComponentRequest_server_1.ServerComponentRequest(rawRequest);
+        request.ctx.buyerIpHeader = buyerIpHeader;
         const url = new URL(request.url);
         const log = (0, log_1.getLoggerWithContext)(request);
         const componentResponse = new ServerComponentResponse_server_1.ServerComponentResponse();
@@ -60,22 +67,22 @@ const renderHydrogen = (App, { pages }) => {
         if (template && typeof template !== 'string') {
             template = template.default;
         }
-        if (!isReactHydrationRequest && pages) {
-            const apiRoute = getApiRoute(url, { pages });
+        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 (0, apiRoutes_1.renderApiRoute)(request, apiRoute);
+                return (0, apiRoutes_1.renderApiRoute)(request, apiRoute, shopifyConfig);
             }
         }
         const isStreamable = !(0, bot_ua_1.isBotUA)(url, request.headers.get('user-agent')) &&
-            (!!streamableResponse || (0, streaming_server_1.supportsReadableStream)());
+            (!!streamableResponse || (await (0, streaming_server_1.isStreamingSupported)()));
         const params = {
             App,
             log,
             dev,
-            pages,
+            routes,
             nonce,
             request,
             template,
@@ -99,28 +106,33 @@ const renderHydrogen = (App, { pages }) => {
     return handleRequest;
 };
 exports.renderHydrogen = renderHydrogen;
-function getApiRoute(url, { pages }) {
-    const routes = (0, apiRoutes_1.getApiRoutesFromPages)(pages);
-    return (0, apiRoutes_1.getApiRouteFromURL)(url, routes);
+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, pages, request, componentResponse, log, template, nonce, dev, }) {
+async function render(url, { App, routes, request, componentResponse, log, template, nonce, dev, }) {
     const state = { pathname: url.pathname, search: url.search };
     const { AppSSR, rscReadable } = buildAppSSR({
         App,
         state,
         request,
         response: componentResponse,
-        pages,
+        routes,
         log,
     }, { template });
+    function onErrorShell(error) {
+        log.error(error);
+        componentResponse.writeHead({ status: 500 });
+        return template;
+    }
     let [html, flight] = await Promise.all([
-        renderToBufferedString(AppSSR, { log, nonce }),
-        (0, streaming_server_1.bufferReadableStream)(rscReadable.getReader()),
+        renderToBufferedString(AppSSR, { log, nonce }).catch(onErrorShell),
+        (0, streaming_server_1.bufferReadableStream)(rscReadable.getReader()).catch(() => null),
     ]);
     const { headers, status, statusText } = getResponseOptions(componentResponse);
     /**
@@ -137,15 +149,11 @@ async function render(url, { App, pages, request, componentResponse, log, templa
             headers,
         });
     }
-    headers['Content-type'] = HTML_CONTENT_TYPE;
-    const { bodyAttributes, htmlAttributes, ...head } = extractHeadElements(request.ctx.head);
-    html = html
-        .replace(/<head>(.*?)<\/head>/s, generateHeadTag(head))
-        .replace('<html', htmlAttributes ? `<html ${htmlAttributes}` : '$&')
-        .replace('<body', bodyAttributes ? `<body ${bodyAttributes}` : '$&')
-        .replace('</body>', flight
-        ? `${flightContainer({ init: true, nonce, chunk: flight })}</body>`
-        : '$&');
+    headers[CONTENT_TYPE] = HTML_CONTENT_TYPE;
+    html = (0, Html_1.applyHtmlHead)(html, request.ctx.head, template);
+    if (flight) {
+        html = html.replace('</body>', `${flightContainer({ init: true, nonce, chunk: flight })}</body>`);
+    }
     postRequestTasks('ssr', status, request, componentResponse);
     return new Response(html, {
         status,
@@ -157,7 +165,8 @@ async function render(url, { App, pages, request, componentResponse, log, templa
  * 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, pages, request, response, componentResponse, log, template, nonce, dev, }) {
+async function stream(url, { App, routes, request, response, componentResponse, log, template, nonce, dev, }) {
+    var _a;
     const state = { pathname: url.pathname, search: url.search };
     log.trace('start stream');
     const { noScriptTemplate, bootstrapScripts, bootstrapModules } = (0, template_1.stripScriptsFromTemplate)(template);
@@ -167,11 +176,8 @@ async function stream(url, { App, pages, request, response, componentResponse, l
         request,
         response: componentResponse,
         log,
-        pages,
-    }, {
-        template: noScriptTemplate,
-        htmlAttrs: { lang: 'en' },
-    });
+        routes,
+    }, { template: noScriptTemplate });
     const rscToScriptTagReadable = new ReadableStream({
         start(controller) {
             log.trace('rsc start chunks');
@@ -189,59 +195,66 @@ async function stream(url, { App, pages, request, response, componentResponse, l
     });
     let didError;
     if (__WORKER__) {
-        const deferredShouldReturnApp = (0, defer_1.defer)();
+        const onCompleteAll = (0, defer_1.defer)();
         const encoder = new TextEncoder();
         const transform = new TransformStream();
         const writable = transform.writable.getWriter();
         const responseOptions = {};
-        const ssrReadable = (0, streaming_server_1.ssrRenderToReadableStream)(AppSSR, {
-            nonce,
-            bootstrapScripts,
-            bootstrapModules,
-            onCompleteShell() {
-                log.trace('worker ready to stream');
-                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[(0, cache_1.getCacheControlHeader)({ dev })] =
-                    componentResponse.cacheControlHeader;
-                if (isRedirect(responseOptions)) {
-                    // Return redirects early without further rendering/streaming
-                    return deferredShouldReturnApp.resolve(false);
-                }
-                if (!componentResponse.canStream())
-                    return;
-                startWritingHtmlToStream(responseOptions, writable, encoder, dev ? didError : undefined);
-                deferredShouldReturnApp.resolve(true);
-            },
-            async onCompleteAll() {
-                log.trace('worker complete stream');
-                if (componentResponse.canStream())
-                    return;
-                Object.assign(responseOptions, getResponseOptions(componentResponse, didError));
-                if (isRedirect(responseOptions)) {
-                    // Redirects found after any async code
-                    return deferredShouldReturnApp.resolve(false);
-                }
+        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);
+        });
+        async 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[(0, cache_1.getCacheControlHeader)({ dev })] =
+                componentResponse.cacheControlHeader;
+            if (isRedirect(responseOptions)) {
+                return false;
+            }
+            if (flush) {
                 if (componentResponse.customBody) {
                     writable.write(encoder.encode(await componentResponse.customBody));
-                    return deferredShouldReturnApp.resolve(false);
+                    return false;
                 }
-                startWritingHtmlToStream(responseOptions, writable, encoder, dev ? didError : undefined);
-                deferredShouldReturnApp.resolve(true);
-            },
-            onError(error) {
-                didError = error;
-                if (dev && deferredShouldReturnApp.status === 'pending') {
-                    writable.write((0, error_1.getErrorMarkup)(error));
+                responseOptions.headers[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)));
                 }
-                log.error(error);
-            },
-        });
-        if (await deferredShouldReturnApp.promise) {
+                return true;
+            }
+        }
+        const shouldReturnApp = (_a = (await 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) => {
@@ -278,12 +291,11 @@ async function stream(url, { App, pages, request, response, componentResponse, l
         return new Response(bufferedBody, responseOptions);
     }
     else if (response) {
-        response.socket.on('error', log.fatal);
         const { pipe } = (0, streaming_server_1.ssrRenderToPipeableStream)(AppSSR, {
             nonce,
             bootstrapScripts,
             bootstrapModules,
-            onCompleteShell() {
+            onShellReady() {
                 log.trace('node ready to stream');
                 /**
                  * TODO: This assumes `response.cache()` has been called _before_ any
@@ -292,7 +304,6 @@ async function stream(url, { App, pages, request, response, componentResponse, l
                  */
                 response.setHeader((0, cache_1.getCacheControlHeader)({ dev }), componentResponse.cacheControlHeader);
                 writeHeadToServerResponse(response, componentResponse, log, didError);
-                (0, log_1.logServerResponse)('str', request, response.statusCode);
                 if (isRedirect(response)) {
                     // Return redirects early without further rendering/streaming
                     return response.end();
@@ -309,7 +320,7 @@ async function stream(url, { App, pages, request, response, componentResponse, l
                     return response.write(chunk);
                 });
             },
-            async onCompleteAll() {
+            async onAllReady() {
                 log.trace('node complete stream');
                 if (componentResponse.canStream() || response.writableEnded) {
                     postRequestTasks('str', response.statusCode, request, componentResponse);
@@ -332,6 +343,15 @@ async function stream(url, { App, pages, request, response, componentResponse, l
                     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) {
@@ -347,7 +367,7 @@ async function stream(url, { App, pages, request, response, componentResponse, l
 /**
  * Stream a hydration response to the client.
  */
-async function hydrate(url, { App, pages, request, response, componentResponse, isStreamable, log, }) {
+async function hydrate(url, { App, routes, request, response, componentResponse, isStreamable, log, }) {
     const state = JSON.parse(url.searchParams.get('state') || '{}');
     const { AppRSC } = buildAppRSC({
         App,
@@ -355,7 +375,7 @@ async function hydrate(url, { App, pages, request, response, componentResponse,
         request,
         response: componentResponse,
         log,
-        pages,
+        routes,
     });
     if (__WORKER__) {
         const rscReadable = (0, streaming_server_1.rscRenderToReadableStream)(AppRSC);
@@ -369,7 +389,6 @@ async function hydrate(url, { App, pages, request, response, componentResponse,
         return new Response(bufferedBody);
     }
     else if (response) {
-        response.socket.on('error', log.fatal);
         const rscWriter = await Promise.resolve().then(() => __importStar(require(
         // @ts-ignore
         '@shopify/hydrogen/vendor/react-server-dom-vite/writer.node.server')));
@@ -381,21 +400,23 @@ async function hydrate(url, { App, pages, request, response, componentResponse,
         });
     }
 }
-function buildAppRSC({ App, state, request, response, log, pages, }) {
+function buildAppRSC({ App, state, request, response, log, routes, }) {
     const hydrogenServerProps = { request, response, log };
+    const serverProps = { ...state, ...hydrogenServerProps, routes };
+    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, { ...state, ...hydrogenServerProps, pages: pages }))));
+            react_1.default.createElement(App, { ...serverProps }))));
     return { AppRSC };
 }
-function buildAppSSR({ App, state, request, response, log, pages }, htmlOptions) {
+function buildAppSSR({ App, state, request, response, log, routes }, htmlOptions) {
     const { AppRSC } = buildAppRSC({
         App,
         state,
         request,
         response,
         log,
-        pages,
+        routes,
     });
     const [rscReadableForFizz, rscReadableForFlight] = (0, streaming_server_1.rscRenderToReadableStream)(AppRSC).tee();
     const rscResponse = (0, streaming_server_1.createFromReadableStream)(rscReadableForFizz);
@@ -413,43 +434,26 @@ function PreloadQueries({ request, children, }) {
     (0, ServerRequestProvider_1.preloadRequestCacheData)(request, preloadQueries);
     return children;
 }
-function extractHeadElements({ context: { helmet } }) {
-    return helmet
-        ? {
-            base: helmet.base.toString(),
-            bodyAttributes: helmet.bodyAttributes.toString(),
-            htmlAttributes: helmet.htmlAttributes.toString(),
-            link: helmet.link.toString(),
-            meta: helmet.meta.toString(),
-            noscript: helmet.noscript.toString(),
-            script: helmet.script.toString(),
-            style: helmet.style.toString(),
-            title: helmet.title.toString(),
-        }
-        : {};
-}
 async function renderToBufferedString(ReactApp, { log, nonce }) {
     return new Promise(async (resolve, reject) => {
         if (__WORKER__) {
-            const deferred = (0, defer_1.defer)();
-            const readable = (0, streaming_server_1.ssrRenderToReadableStream)(ReactApp, {
-                nonce,
-                onCompleteAll() {
-                    /**
-                     * We want to wait until `onCompleteAll` has been called 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.
-                     */
-                    deferred.resolve(null);
-                },
-                onError(error) {
-                    log.error(error);
-                    deferred.reject(error);
-                },
-            });
-            await deferred.promise.catch(reject);
-            resolve(await (0, streaming_server_1.bufferReadableStream)(readable.getReader()));
+            try {
+                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;
+                resolve((0, streaming_server_1.bufferReadableStream)(ssrReadable.getReader()));
+            }
+            catch (error) {
+                reject(error);
+            }
         }
         else {
             const writer = await createNodeWriter();
@@ -459,7 +463,7 @@ async function renderToBufferedString(ReactApp, { log, 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.
                  */
-                onCompleteAll() {
+                onAllReady() {
                     let data = '';
                     writer.on('data', (chunk) => (data += chunk.toString()));
                     writer.once('error', reject);
@@ -467,10 +471,8 @@ async function renderToBufferedString(ReactApp, { log, nonce }) {
                     // Tell React to start writing to the writer
                     pipe(writer);
                 },
-                onError(error) {
-                    log.error(error);
-                    reject(error);
-                },
+                onShellError: reject,
+                onError: (error) => log.error(error),
             });
         }
     });
@@ -478,22 +480,14 @@ async function renderToBufferedString(ReactApp, { log, nonce }) {
 exports.default = exports.renderHydrogen;
 function startWritingHtmlToServerResponse(response, error) {
     if (!response.headersSent) {
-        response.setHeader('Content-type', HTML_CONTENT_TYPE);
-        response.write('<!DOCTYPE html>');
+        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 startWritingHtmlToStream(responseOptions, writable, encoder, error) {
-    responseOptions.headers['Content-type'] = HTML_CONTENT_TYPE;
-    writable.write(encoder.encode('<!DOCTYPE html>'));
-    if (error) {
-        // This error was delayed until the headers were properly sent.
-        writable.write(encoder.encode((0, error_1.getErrorMarkup)(error)));
-    }
-}
 function getResponseOptions({ headers, status, customStatus }, error) {
     var _a, _b;
     const responseInit = {};
@@ -526,29 +520,6 @@ function isRedirect(response) {
     const status = (_b = (_a = response.status) !== null && _a !== void 0 ? _a : response.statusCode) !== null && _b !== void 0 ? _b : 0;
     return status >= 300 && status < 400;
 }
-/**
- * Generate the contents of the `head` tag, and update the existing `<title>` tag
- * if one exists, and if a title is passed.
- */
-function generateHeadTag({ title, ...rest }) {
-    const headProps = ['base', 'meta', 'style', 'noscript', 'script', 'link'];
-    const otherHeadProps = headProps
-        .map((prop) => rest[prop])
-        .filter(Boolean)
-        .join('\n');
-    return (_outerHtml, innerHtml) => {
-        let headHtml = otherHeadProps + innerHtml;
-        if (title) {
-            if (headHtml.includes('<title>')) {
-                headHtml = headHtml.replace(/(<title>(?:.|\n)*?<\/title>)/, title);
-            }
-            else {
-                headHtml += title;
-            }
-        }
-        return `<head>${headHtml}</head>`;
-    };
-}
 async function createNodeWriter() {
     // Importing 'stream' directly breaks Vite resolve
     // when building for workers, even though this code

package/dist/node/foundation/Redirect/Redirect.client.d.ts ADDED Viewed

@@ -0,0 +1,5 @@
+declare type RedirectProps = {
+    to: string;
+};
+export default function Redirect({ to }: RedirectProps): null;
+export {};

package/dist/node/foundation/Redirect/Redirect.client.js ADDED Viewed

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = require("react");
+const useNavigate_1 = require("../../foundation/useNavigate/useNavigate");
+function Redirect({ to }) {
+    const navigate = (0, useNavigate_1.useNavigate)();
+    (0, react_1.useEffect)(() => {
+        if (to.startsWith('http')) {
+            window.location.href = to;
+        }
+        else {
+            navigate(to);
+        }
+    }, []);
+    return null;
+}
+exports.default = Redirect;

package/dist/node/foundation/Router/BrowserRouter.client.d.ts ADDED Viewed

@@ -0,0 +1,13 @@
+import { BrowserHistory, Location } from 'history';
+import React, { FC } from 'react';
+declare type RouterContextValue = {
+    history: BrowserHistory;
+    location: Location;
+};
+export declare const RouterContext: React.Context<{} | RouterContextValue>;
+export declare const BrowserRouter: FC<{
+    history?: BrowserHistory;
+}>;
+export declare function useRouter(): RouterContextValue;
+export declare function useLocation(): Location;
+export {};

package/dist/node/foundation/Router/BrowserRouter.client.js ADDED Viewed

@@ -0,0 +1,77 @@
+"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.useLocation = exports.useRouter = exports.BrowserRouter = exports.RouterContext = void 0;
+const history_1 = require("history");
+const react_1 = __importStar(require("react"));
+const ssr_interop_1 = require("../ssr-interop");
+const useServerState_1 = require("../useServerState");
+exports.RouterContext = (0, react_1.createContext)({});
+let currentPath = '';
+let isFirstLoad = true;
+const BrowserRouter = ({ history: pHistory, children, }) => {
+    if (ssr_interop_1.META_ENV_SSR)
+        return react_1.default.createElement(react_1.default.Fragment, null, children);
+    const history = (0, react_1.useMemo)(() => pHistory || (0, history_1.createBrowserHistory)(), [pHistory]);
+    const [location, setLocation] = (0, react_1.useState)(history.location);
+    const { pending, serverState, setServerState } = (0, useServerState_1.useServerState)();
+    (0, react_1.useEffect)(() => {
+        // The app has just loaded
+        if (isFirstLoad)
+            isFirstLoad = false;
+        // A navigation event has just happened
+        else if (!pending && currentPath !== serverState.pathname) {
+            window.scrollTo(0, 0);
+        }
+        currentPath = serverState.pathname;
+    }, [pending]);
+    (0, react_1.useEffect)(() => {
+        const unlisten = history.listen(({ location: newLocation }) => {
+            setServerState({
+                pathname: newLocation.pathname,
+                search: location.search || undefined,
+            });
+            setLocation(newLocation);
+        });
+        return () => unlisten();
+    }, [history]);
+    return (react_1.default.createElement(exports.RouterContext.Provider, { value: {
+            history,
+            location,
+        } }, children));
+};
+exports.BrowserRouter = BrowserRouter;
+function useRouter() {
+    const router = (0, react_1.useContext)(exports.RouterContext);
+    if (!router && ssr_interop_1.META_ENV_SSR) {
+        throw new Error('useRouter must be used within a <Router> component');
+    }
+    return router;
+}
+exports.useRouter = useRouter;
+function useLocation() {
+    return useRouter().location;
+}
+exports.useLocation = useLocation;