@shopify/hydrogen 0.23.0 → 0.25.1

package/dist/esnext/foundation/Analytics/connectors/Shopify/ShopifyAnalytics.server.js

@@ -7,15 +7,14 @@ import { useShop } from '../../../useShop';
 import { SHOPIFY_S, SHOPIFY_Y } from './const';
 import { ShopifyAnalyticsClient } from './ShopifyAnalytics.client';
 export function ShopifyAnalytics({ cookieDomain }) {
-    var _a, _b, _c;
     const { storeDomain } = useShop();
     const request = useServerRequest();
     const cookies = parse(request.headers.get('Cookie') || '');
     const domain = cookieDomain || storeDomain;
     useServerAnalytics({
         shopify: {
-            storefrontId: ((_b = (_a = globalThis.Oxygen) === null || _a === void 0 ? void 0 : _a.env) === null || _b === void 0 ? void 0 : _b.SHOPIFY_STOREFRONT_ID) || '0',
-            acceptedLanguage: ((_c = request.headers.get('Accept-Language')) === null || _c === void 0 ? void 0 : _c.replace(/-.*/, '')) || 'en',
+            storefrontId: globalThis.Oxygen?.env?.SHOPIFY_STOREFRONT_ID || '0',
+            acceptedLanguage: request.headers.get('Accept-Language')?.replace(/-.*/, '') || 'en',
             isPersistentCookie: !!cookies[SHOPIFY_S] || !!cookies[SHOPIFY_Y],
         },
     });

package/dist/esnext/foundation/BuiltInRoutes/BuiltInRoutes.d.ts

@@ -0,0 +1,2 @@
+import { ResourceGetter } from '../../utilities/apiRoutes';
+export declare function getBuiltInRoute(url: URL): ResourceGetter | null;

package/dist/esnext/foundation/BuiltInRoutes/BuiltInRoutes.js

@@ -0,0 +1,23 @@
+import { EVENT_PATHNAME, EVENT_PATHNAME_REGEX } from '../../constants';
+import { ServerAnalyticsRoute } from '../Analytics/ServerAnalyticsRoute';
+import { HealthCheck } from './healthCheck';
+const builtInRoutes = [
+    {
+        pathname: EVENT_PATHNAME,
+        regex: EVENT_PATHNAME_REGEX,
+        resource: ServerAnalyticsRoute,
+    },
+    {
+        pathname: '/__health',
+        resource: HealthCheck,
+    },
+];
+export function getBuiltInRoute(url) {
+    for (const route of builtInRoutes) {
+        if (url.pathname === route.pathname ||
+            (route.regex && route.regex.test(url.pathname))) {
+            return route.resource;
+        }
+    }
+    return null;
+}

package/dist/esnext/foundation/BuiltInRoutes/healthCheck.d.ts

@@ -0,0 +1 @@
+export declare function HealthCheck(): Promise<Response>;

package/dist/esnext/foundation/BuiltInRoutes/healthCheck.js

@@ -0,0 +1,3 @@
+export async function HealthCheck() {
+    return new Response(null, { status: 200 });
+}

package/dist/esnext/foundation/Cache/cache-sub-request.js

@@ -1,7 +1,7 @@
 import { getCache } from '../runtime';
 import { hashKey } from '../../utilities/hash';
 import * as CacheApi from './cache';
-import { CacheSeconds } from './strategies';
+import { CacheShort } from './strategies';
 /**
  * Wrapper Cache functions for sub queries
  */
@@ -12,7 +12,7 @@ function getKeyUrl(key) {
     return `https://shopify.dev/?${key}`;
 }
 function getCacheOption(userCacheOptions) {
-    return userCacheOptions || CacheSeconds();
+    return userCacheOptions || CacheShort();
 }
 export function generateSubRequestCacheControlHeader(userCacheOptions) {
     return CacheApi.generateDefaultCacheControlHeader(getCacheOption(userCacheOptions));

package/dist/esnext/foundation/Cache/cache.js

@@ -1,5 +1,5 @@
 import { getCache } from '../runtime';
-import { CacheSeconds, generateCacheControlHeader } from './strategies';
+import { CacheShort, generateCacheControlHeader } from './strategies';
 import { logCacheApiStatus } from '../../utilities/log';
 function getCacheControlSetting(userCacheOptions, options) {
     if (userCacheOptions && options) {
@@ -9,7 +9,7 @@ function getCacheControlSetting(userCacheOptions, options) {
         };
     }
     else {
-        return userCacheOptions || CacheSeconds();
+        return userCacheOptions || CacheShort();
     }
 }
 export function generateDefaultCacheControlHeader(userCacheOptions) {

package/dist/esnext/foundation/Cache/strategies/index.d.ts

@@ -1,10 +1,7 @@
 import type { CachingStrategy, AllCacheOptions, NoStoreStrategy } from '../../../types';
+export declare const NO_STORE = "no-store";
 export declare function generateCacheControlHeader(cacheOptions: CachingStrategy): string;
-export declare function NoStore(): NoStoreStrategy;
-export declare function CacheSeconds(overrideOptions?: CachingStrategy): AllCacheOptions;
-export declare function CacheMinutes(overrideOptions?: CachingStrategy): AllCacheOptions;
-export declare function CacheHours(overrideOptions?: CachingStrategy): AllCacheOptions;
-export declare function CacheDays(overrideOptions?: CachingStrategy): AllCacheOptions;
-export declare function CacheWeeks(overrideOptions?: CachingStrategy): AllCacheOptions;
-export declare function CacheMonths(overrideOptions?: CachingStrategy): AllCacheOptions;
+export declare function CacheNone(): NoStoreStrategy;
+export declare function CacheShort(overrideOptions?: CachingStrategy): AllCacheOptions;
+export declare function CacheLong(overrideOptions?: CachingStrategy): AllCacheOptions;
 export declare function CacheCustom(overrideOptions: CachingStrategy): AllCacheOptions;

package/dist/esnext/foundation/Cache/strategies/index.js

@@ -1,6 +1,6 @@
 const PUBLIC = 'public';
 const PRIVATE = 'private';
-const NO_STORE = 'no-store';
+export const NO_STORE = 'no-store';
 const optionMapping = {
     maxAge: 'max-age',
     staleWhileRevalidate: 'stale-while-revalidate',
@@ -19,20 +19,19 @@ export function generateCacheControlHeader(cacheOptions) {
     });
     return cacheControl.join(', ');
 }
-export function NoStore() {
+export function CacheNone() {
     return {
         mode: NO_STORE,
     };
 }
 function guardExpirableModeType(overrideOptions) {
-    if ((overrideOptions === null || overrideOptions === void 0 ? void 0 : overrideOptions.mode) &&
-        (overrideOptions === null || overrideOptions === void 0 ? void 0 : overrideOptions.mode) !== PUBLIC &&
-        (overrideOptions === null || overrideOptions === void 0 ? void 0 : overrideOptions.mode) !== PRIVATE) {
+    if (overrideOptions?.mode &&
+        overrideOptions?.mode !== PUBLIC &&
+        overrideOptions?.mode !== PRIVATE) {
         throw Error("'mode' must be either 'public' or 'private'");
     }
 }
-// 10 seconds
-export function CacheSeconds(overrideOptions) {
+export function CacheShort(overrideOptions) {
     guardExpirableModeType(overrideOptions);
     return {
         mode: PUBLIC,
@@ -41,28 +40,7 @@ export function CacheSeconds(overrideOptions) {
         ...overrideOptions,
     };
 }
-// 30 minutes
-export function CacheMinutes(overrideOptions) {
-    guardExpirableModeType(overrideOptions);
-    return {
-        mode: PUBLIC,
-        maxAge: 900,
-        staleWhileRevalidate: 900,
-        ...overrideOptions,
-    };
-}
-// 1 hour
-export function CacheHours(overrideOptions) {
-    guardExpirableModeType(overrideOptions);
-    return {
-        mode: PUBLIC,
-        maxAge: 1800,
-        staleWhileRevalidate: 1800,
-        ...overrideOptions,
-    };
-}
-// 1 day
-export function CacheDays(overrideOptions) {
+export function CacheLong(overrideOptions) {
     guardExpirableModeType(overrideOptions);
     return {
         mode: PUBLIC,
@@ -71,26 +49,6 @@ export function CacheDays(overrideOptions) {
         ...overrideOptions,
     };
 }
-// 2 weeks
-export function CacheWeeks(overrideOptions) {
-    guardExpirableModeType(overrideOptions);
-    return {
-        mode: PUBLIC,
-        maxAge: 604800,
-        staleWhileRevalidate: 604800,
-        ...overrideOptions,
-    };
-}
-// 1 month
-export function CacheMonths(overrideOptions) {
-    guardExpirableModeType(overrideOptions);
-    return {
-        mode: PUBLIC,
-        maxAge: 1296000,
-        staleWhileRevalidate: 1296000,
-        ...overrideOptions,
-    };
-}
 export function CacheCustom(overrideOptions) {
     return overrideOptions;
 }

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

@@ -7,6 +7,11 @@ const reservedCookieNames = ['mac', 'user_session_id'];
  * same configuration options as what's available in `Cookie`.
  */
 export class Cookie {
+    /** The name of the cookie stored in the browser. */
+    name;
+    /** An optional object to configure [how the cookie is persisted in the browser](https://shopify.dev/api/hydrogen/components/framework/cookie#cookie-options). */
+    options;
+    data;
     constructor(name, options = {}) {
         if (reservedCookieNames.includes(name)) {
             log.warn(`Warning "${name}" is a reserved cookie name by oxygen!`);

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

@@ -0,0 +1,3 @@
+export declare function DevTools({ dataFromServer }: {
+    dataFromServer: any;
+}): JSX.Element | null;

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

@@ -0,0 +1,17 @@
+import React, { useState, useEffect, useCallback } from 'react';
+import { Interface, Panels } from './components';
+export function DevTools({ dataFromServer }) {
+    const [open, setOpen] = useState(false);
+    const toggleOpen = useCallback(() => {
+        setOpen((state) => !state);
+    }, []);
+    const [hasMounted, setHasMounted] = useState(false);
+    useEffect(() => {
+        setHasMounted(true);
+    }, []);
+    if (hasMounted) {
+        return (React.createElement(Interface, { open: open, onClose: toggleOpen, onOpen: toggleOpen },
+            React.createElement(Panels, { ...dataFromServer })));
+    }
+    return null;
+}

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

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

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

@@ -0,0 +1,14 @@
+import React from 'react';
+import { DevTools as DevToolsClient } from './DevTools.client';
+import { useServerRequest } from '../ServerRequestProvider';
+export function DevTools() {
+    const serverRequest = useServerRequest();
+    const { shopifyConfig } = serverRequest.ctx;
+    const { locale, storeDomain, storefrontApiVersion } = shopifyConfig || {};
+    const settings = {
+        locale,
+        storeDomain,
+        storefrontApiVersion,
+    };
+    return React.createElement(DevToolsClient, { dataFromServer: { settings } });
+}

package/dist/esnext/foundation/DevTools/components/GraphQL.client.d.ts

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

package/dist/esnext/foundation/DevTools/components/GraphQL.client.js

@@ -0,0 +1,25 @@
+import React, { useEffect, useState } from 'react';
+export function GraphQL() {
+    const [warnings, setWarnings] = useState(null);
+    useEffect(() => {
+        if (import.meta.hot) {
+            import.meta.hot.on('hydrogen-dev-tools', ({ type, data }) => {
+                if (type === 'warn') {
+                    setWarnings((state) => [...(state || []), data]);
+                }
+            });
+        }
+    }, []);
+    const warningsMarkup = warnings
+        ? warnings.map((war, i) => (
+        // eslint-disable-next-line react/no-array-index-key
+        React.createElement("li", { key: war + i },
+            React.createElement("pre", null, war))))
+        : null;
+    return (React.createElement("div", null,
+        React.createElement("ul", { style: {
+                fontFamily: 'monospace',
+                paddingTop: '1em',
+                fontSize: '0.9em',
+            } }, warningsMarkup)));
+}

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

@@ -0,0 +1,5 @@
+export declare function Heading({ linkText, url, children, }: {
+    linkText?: string;
+    url?: string;
+    children: string;
+}): JSX.Element;

package/dist/esnext/foundation/DevTools/components/Heading.js

@@ -0,0 +1,12 @@
+import React from 'react';
+export function Heading({ linkText, url, children, }) {
+    return (React.createElement("span", { style: { display: 'flex', alignItems: 'baseline', padding: '0 0 0.5em' } },
+        React.createElement("span", { style: { paddingRight: '0em', flex: 1, fontWeight: 'bold' } },
+            children,
+            ' '),
+        React.createElement("a", { style: {
+                color: 'blue',
+                fontFamily: 'monospace',
+                textDecoration: 'underline',
+            }, href: url }, linkText)));
+}

package/dist/esnext/foundation/DevTools/components/Interface.client.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+interface Props {
+    open?: boolean;
+    title?: string | React.ReactNode;
+    onClose?: () => void;
+    onOpen?: () => void;
+    activator?: React.ReactElement;
+    children?: React.ReactNode;
+}
+export declare function Interface({ children, onClose, onOpen, ...props }: Props): JSX.Element;
+export {};

package/dist/esnext/foundation/DevTools/components/Interface.client.js

@@ -0,0 +1,47 @@
+import React from 'react';
+import { CloseIcon, HydrogenIcon } from './icons';
+export function Interface({ children, onClose, onOpen, ...props }) {
+    const open = false || props.open;
+    return (React.createElement("div", { id: "hydrogen-dev-tools", "aria-hidden": true, style: {
+            position: 'fixed',
+            zIndex: 100,
+            display: 'flex',
+            flexDirection: 'column',
+            right: 0,
+            bottom: 0,
+            padding: '1.5em',
+            maxWidth: '100%',
+            flexWrap: 'wrap',
+        } },
+        React.createElement("button", { type: "button", style: {
+                position: 'relative',
+                background: 'white',
+                border: '1px solid',
+                padding: '0em 0.5em 0.25em 1.25em',
+                boxShadow: '10px 10px 0px black',
+                display: 'flex',
+                alignItems: 'center',
+                color: 'black',
+            }, onClick: onOpen },
+            React.createElement("div", { style: { textAlign: 'left', flex: 1 } },
+                React.createElement("span", { style: {
+                        fontFamily: 'monospace',
+                        fontWeight: 'bold',
+                        paddingRight: '0.5em',
+                    } }, "Dev tools")),
+            ' ',
+            open ? React.createElement(CloseIcon, null) : React.createElement(HydrogenIcon, null)),
+        React.createElement("div", { style: {
+                display: open ? 'block' : 'none',
+                position: 'relative',
+                top: '-1px',
+                overflow: 'scroll',
+                color: 'black',
+                background: 'white',
+                border: '1px solid',
+                boxShadow: '10px 10px 0px black',
+                maxWidth: '50em',
+                width: '100vw',
+                height: '50vh',
+            } }, children)));
+}

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

@@ -0,0 +1,8 @@
+import { ComponentProps } from 'react';
+import { Performance } from './Performance.client';
+import { Settings } from './Settings.client';
+export interface Props {
+    settings: ComponentProps<typeof Settings>;
+    performance: ComponentProps<typeof Performance>;
+}
+export declare function Panels({ settings }: Props): JSX.Element;

package/dist/esnext/foundation/DevTools/components/Panels.js

@@ -0,0 +1,60 @@
+import React, { useState, useEffect } from 'react';
+import { ClientAnalytics } from '../../Analytics';
+import { Performance } from './Performance.client';
+import { Settings } from './Settings.client';
+export function Panels({ settings }) {
+    const [selectedPanel, setSelectedPanel] = useState(0);
+    const [navigations, setNavigations] = useState([]);
+    useEffect(() => {
+        ClientAnalytics.subscribe(ClientAnalytics.eventNames.PERFORMANCE, ({ response_start, navigation_start, first_contentful_paint, largest_contentful_paint, response_end, page_load_type, url, transfer_size, }) => {
+            setNavigations([
+                ...navigations,
+                {
+                    ttfb: response_start - navigation_start,
+                    fcp: first_contentful_paint,
+                    lcp: largest_contentful_paint,
+                    duration: response_end - navigation_start,
+                    type: `${page_load_type} load`,
+                    size: transfer_size,
+                    url,
+                },
+            ]);
+        });
+    }, [setNavigations, navigations]);
+    const panels = getPanels({ settings, performance: { navigations } });
+    const panelComponents = panels.map((obj, index) => (React.createElement("div", { key: obj.content, style: { display: selectedPanel === index ? 'block' : 'none' } }, obj.panel)));
+    return (React.createElement("div", { style: { display: 'flex', height: '100%' } },
+        React.createElement("div", { style: { borderRight: '1px solid', padding: '1em 0em' } }, panels.map(({ content, icon, id }, index) => {
+            const active = selectedPanel === index;
+            return (React.createElement("button", { key: id, type: "button", style: {
+                    lineHeight: 2,
+                    padding: '0em 1.25em',
+                    fontWeight: active ? 'bold' : 'normal',
+                    display: 'flex',
+                    alignItems: 'center',
+                }, onClick: () => setSelectedPanel(index) },
+                React.createElement("span", { style: { paddingRight: '0.4em' } }, icon),
+                React.createElement("span", { style: { fontFamily: 'monospace' } }, content)));
+        })),
+        React.createElement("div", { style: { padding: '1.25em', width: '100%' } }, panelComponents[selectedPanel ? selectedPanel : 0])));
+}
+function Panel({ children }) {
+    return React.createElement("div", null, children);
+}
+function getPanels({ settings, performance }) {
+    const panels = {
+        settings: {
+            content: 'Settings',
+            panel: React.createElement(Settings, { ...settings }),
+            icon: '🎛',
+        },
+        performance: {
+            content: 'Performance',
+            panel: React.createElement(Performance, { ...performance }),
+            icon: '⏱',
+        },
+    };
+    return Object.keys(panels).map((key) => {
+        return { ...panels[key], id: key };
+    });
+}

package/dist/esnext/foundation/DevTools/components/Performance.client.d.ts

@@ -0,0 +1,14 @@
+interface Navigation {
+    url: string;
+    type: string;
+    ttfb: number;
+    fcp: number;
+    lcp: number;
+    duration: number;
+    size: number;
+}
+interface Props {
+    navigations: Navigation[];
+}
+export declare function Performance({ navigations }: Props): JSX.Element;
+export {};

package/dist/esnext/foundation/DevTools/components/Performance.client.js

@@ -0,0 +1,26 @@
+import React from 'react';
+import { Heading } from './Heading';
+export function Performance({ navigations }) {
+    const navigationsMarkup = navigations.map(({ url, ttfb, fcp, size, duration, type }) => (React.createElement("li", { key: url, style: { padding: '0.5em 0', borderBottom: '1px solid' } },
+        React.createElement(Item, { label: type, value: url.replace('http://localhost:3000', '') }),
+        React.createElement("div", { style: { display: 'flex' } },
+            React.createElement(Item, { label: "TTFB", value: ttfb }),
+            React.createElement(Item, { label: "Duration", value: duration }),
+            React.createElement(Item, { label: "FCP", value: fcp })))));
+    return (React.createElement(React.Fragment, null,
+        React.createElement(Heading, null, "Performance"),
+        React.createElement("ul", null, navigationsMarkup)));
+}
+const Item = ({ label, value, unit }) => {
+    if (!value) {
+        return null;
+    }
+    const val = typeof value === 'string' ? (React.createElement("span", { style: { fontWeight: 'bold' } }, value)) : (`${Math.round(value)}${unit || 'ms'}`);
+    return (React.createElement("span", { style: {
+            fontFamily: 'monospace',
+            padding: '0 2em 0 0',
+            fontSize: '0.75em',
+        } },
+        label && label.padEnd(10),
+        val));
+};

package/dist/esnext/foundation/DevTools/components/Settings.client.d.ts

@@ -0,0 +1,7 @@
+interface Props {
+    locale: string;
+    storeDomain: string;
+    storefrontApiVersion: string;
+}
+export declare function Settings(props: Props): JSX.Element;
+export {};

package/dist/esnext/foundation/DevTools/components/Settings.client.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import { Heading } from './Heading';
+import { Table } from './Table';
+const KEY_MAP = {
+    locale: 'Locale',
+    storeDomain: 'Domain',
+    storefrontApiVersion: 'API Version',
+};
+export function Settings(props) {
+    const items = Object.entries(props).map(([key, value]) => {
+        return {
+            key: KEY_MAP[key],
+            value,
+            type: typeof value,
+        };
+    });
+    return (React.createElement(React.Fragment, null,
+        React.createElement(Heading, null, "Config"),
+        React.createElement(Table, { items: items })));
+}

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

@@ -0,0 +1,9 @@
+interface Item {
+    key: string;
+    value: string;
+}
+interface TableProps {
+    items: Item[];
+}
+export declare function Table({ items }: TableProps): JSX.Element;
+export {};

package/dist/esnext/foundation/DevTools/components/Table.js

@@ -0,0 +1,7 @@
+import React from 'react';
+export function Table({ items }) {
+    const itemsMarkup = items.map(({ key, value }) => (React.createElement("div", { key: key, style: { display: 'flex' } },
+        React.createElement("span", { style: { width: '30%', fontFamily: 'monospace', paddingRight: '1em' } }, key),
+        React.createElement("span", { style: { width: '70%', fontFamily: 'monospace', fontWeight: 'bold' } }, value))));
+    return React.createElement("ul", null, itemsMarkup);
+}

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

@@ -0,0 +1,2 @@
+export declare const CloseIcon: () => JSX.Element;
+export declare const HydrogenIcon: () => JSX.Element;

package/dist/esnext/foundation/DevTools/components/icons.js

@@ -0,0 +1,13 @@
+import React from 'react';
+export const CloseIcon = () => (React.createElement("svg", { style: {
+        height: '2.75em',
+        width: '2.75em',
+        padding: '1em',
+    }, viewBox: "0 0 460.775 460.775", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+    React.createElement("path", { fill: "black", d: "M285.08,230.397L456.218,59.27c6.076-6.077,6.076-15.911,0-21.986L423.511,4.565c-2.913-2.911-6.866-4.55-10.992-4.55\n\tc-4.127,0-8.08,1.639-10.993,4.55l-171.138,171.14L59.25,4.565c-2.913-2.911-6.866-4.55-10.993-4.55\n\tc-4.126,0-8.08,1.639-10.992,4.55L4.558,37.284c-6.077,6.075-6.077,15.909,0,21.986l171.138,171.128L4.575,401.505\n\tc-6.074,6.077-6.074,15.911,0,21.986l32.709,32.719c2.911,2.911,6.865,4.55,10.992,4.55c4.127,0,8.08-1.639,10.994-4.55\n\tl171.117-171.12l171.118,171.12c2.913,2.911,6.866,4.55,10.993,4.55c4.128,0,8.081-1.639,10.992-4.55l32.709-32.719\n\tc6.074-6.075,6.074-15.909,0-21.986L285.08,230.397z" })));
+export const HydrogenIcon = () => (React.createElement("svg", { style: {
+        height: '2.5em',
+        width: '2.5em',
+    }, 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: "black" }),
+    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: "black" })));

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

@@ -0,0 +1,2 @@
+export { Interface } from './Interface.client';
+export { Panels } from './Panels';

package/dist/esnext/foundation/DevTools/components/index.js

@@ -0,0 +1,2 @@
+export { Interface } from './Interface.client';
+export { Panels } from './Panels';

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

@@ -17,10 +17,10 @@ export function FileRoutes({ routes, basePath, dirPrefix }) {
     if (!routes) {
         const fileRoutes = request.ctx.hydrogenConfig.routes;
         routes = fileRoutes.files;
-        dirPrefix !== null && dirPrefix !== void 0 ? dirPrefix : (dirPrefix = fileRoutes.dirPrefix);
-        basePath !== null && basePath !== void 0 ? basePath : (basePath = fileRoutes.basePath);
+        dirPrefix ??= fileRoutes.dirPrefix;
+        basePath ??= fileRoutes.basePath;
     }
-    basePath !== null && basePath !== void 0 ? basePath : (basePath = '/');
+    basePath ??= '/';
     const pageRoutes = useMemo(() => createPageRoutes(routes, basePath, dirPrefix), [routes, basePath, dirPrefix]);
     let foundRoute, foundRouteDetails;
     for (let i = 0; i < pageRoutes.length; i++) {
@@ -50,7 +50,7 @@ export function createPageRoutes(pages, topLevelPath = '*', dirPrefix = '') {
          */
         const exact = !/\[(?:[.]{3})(\w+?)\]/.test(key);
         if (!pages[key].default && !pages[key].api) {
-            log === null || log === void 0 ? void 0 : log.warn(`${key} doesn't export a default React component or an API function`);
+            log?.warn(`${key} doesn't export a default React component or an API function`);
         }
         return {
             path: topLevelPrefix + path,

package/dist/esnext/foundation/Html/Html.js

@@ -1,13 +1,13 @@
 /// <reference types="vite/client" />
 import React from 'react';
 const HTML_ATTR_SEP_RE = /(?<!=)"\s+/gim;
-const getHtmlAttrs = (template) => { var _a; return ((_a = template.match(/<html\s+([^>]+?)\s*>/s)) === null || _a === void 0 ? void 0 : _a[1]) || ''; };
-const getBodyAttrs = (template) => { var _a; return ((_a = template.match(/<body\s+([^>]+?)\s*>/s)) === null || _a === void 0 ? void 0 : _a[1]) || ''; };
+const getHtmlAttrs = (template) => template.match(/<html\s+([^>]+?)\s*>/s)?.[1] || '';
+const getBodyAttrs = (template) => template.match(/<body\s+([^>]+?)\s*>/s)?.[1] || '';
 const REACT_ATTR_MAP = Object.create(null);
 REACT_ATTR_MAP.class = 'className';
 REACT_ATTR_MAP.style = 'data-style'; // Ignore string styles, it breaks React
 function attrsToProps(attrs) {
-    attrs = attrs === null || attrs === void 0 ? void 0 : attrs.trim();
+    attrs = attrs?.trim();
     // Assume all attributes are surrounded by double quotes.
     return attrs
         ? Object.fromEntries(attrs.split(HTML_ATTR_SEP_RE).map((attr) => {
@@ -21,10 +21,7 @@ function propsToAttrs(props) {
         .map(([key, value]) => `${key === REACT_ATTR_MAP.class ? 'class' : key}="${value}"`)
         .join(' ');
 }
-const clientConfigOptions = [
-    'strictMode',
-    'showDevTools',
-];
+const clientConfigOptions = ['strictMode'];
 export function Html({ children, template, htmlAttrs, bodyAttrs, hydrogenConfig, }) {
     let head = template.match(/<head>(.+?)<\/head>/s)[1] || '';
     // @ts-ignore