@shopify/hydrogen 1.0.0-alpha.22 → 1.0.0

package/dist/esnext/foundation/Hydration/Cache.client.js

@@ -1,131 +0,0 @@
-import { createElement, Fragment } from 'react';
-import { wrapPromise } from '../../utilities';
-const cache = new Map();
-/**
- * Much of this is borrowed from React's demo implementation:
- * @see https://github.com/reactjs/server-components-demo/blob/main/src/Cache.client.js
- *
- * Note that we'd want to add some other constraints and controls around caching here.
- */
-export function useServerResponse(state) {
-    const key = JSON.stringify(state);
-    let response = cache.get(key);
-    if (response) {
-        return response;
-    }
-    response = createFromFetch(fetch('/react?state=' + encodeURIComponent(key)));
-    cache.set(key, response);
-    return response;
-}
-/**
- * Similar to the RSC demo, `createFromFetch` wraps around a fetch call and throws
- * promise events to the Suspense boundary until the content has loaded.
- */
-function createFromFetch(fetchPromise) {
-    return wrapPromise(fetchPromise
-        .then((response) => {
-        if (!response.ok) {
-            throw new Error(`Hydration request failed: ${response.statusText}`);
-        }
-        return response.text();
-    })
-        .then((payload) => {
-        return convertHydrationResponseToReactComponents(payload);
-    })
-        .catch((e) => {
-        console.error(e);
-    }));
-}
-export async function convertHydrationResponseToReactComponents(response) {
-    const manifest = createManifestFromWirePayload(response);
-    /**
-     * Eager-load all the modules referenced in the manifest. Otherwise,
-     * Hydration errors crop up and show in the console.
-     */
-    const modules = await eagerLoadModules(manifest);
-    function isReactTuple(item) {
-        return item instanceof Array && item.length === 4 && item[0] === '$';
-    }
-    function isReactTupleOrString(item) {
-        return typeof item === 'string' || isReactTuple(item);
-    }
-    function isReactTupleOrArrayOfTuples(item) {
-        return isReactTupleOrString(item) || isReactTupleOrString(item[0]);
-    }
-    function wireSyntaxToReactElement(item, key) {
-        if (typeof item === 'string')
-            return item;
-        if (typeof item !== 'object')
-            return null;
-        // Assume it's an array of tuples, defined in the component as a fragment.
-        if (!isReactTuple(item)) {
-            return createElement(Fragment, {
-                children: item.map(wireSyntaxToReactElement),
-            });
-        }
-        let [, type, , props] = item;
-        const allProps = { ...props };
-        /**
-         * Convert all props (including children) that may be serialized as tuples
-         * or arrays of tuples into React elements.
-         */
-        Object.entries(allProps).map(([key, prop]) => {
-            if (prop instanceof Array && isReactTupleOrArrayOfTuples(prop)) {
-                /**
-                 * - Array of children tuples
-                 * - ...or a list of children, combo of strings and tuples, produced by dangerouslySetInnerHtml
-                 */
-                if (prop.every(isReactTupleOrString)) {
-                    allProps[key] = prop.map(wireSyntaxToReactElement);
-                    /**
-                     * - Single tuple
-                     */
-                }
-                else {
-                    allProps[key] = wireSyntaxToReactElement(prop);
-                }
-            }
-        });
-        /**
-         * If the type is a module and not a React Symbol, reference the component
-         * listed in the manifest as `M<number>` and lazy-load it.
-         * `lazy()` throws Suspense promises until the component has loaded.
-         */
-        if (type.startsWith('@')) {
-            const module = manifest[type.replace('@', 'M')];
-            const mod = modules[type.replace('@', 'M')];
-            type = module.named ? mod[module.name] : mod.default;
-        }
-        return createElement(type, { ...allProps, key });
-    }
-    /**
-     * The manifest is listed as `J0` for some reason. This is how React does it.
-     * Maybe this is to support for additional model trees like `J1`?
-     *
-     * Regardless, this is guaranteed to exist from our server response.
-     */
-    return wireSyntaxToReactElement(manifest.J0);
-}
-function createManifestFromWirePayload(payload) {
-    return payload.split('\n').reduce((memo, row) => {
-        const [key, ...values] = row.split(':');
-        memo[key] = JSON.parse(values.join(':'));
-        return memo;
-    }, {});
-}
-async function eagerLoadModules(manifest) {
-    const modules = await Promise.all(Object.entries(manifest)
-        .map(([key, module]) => {
-        if (!key.startsWith('M'))
-            return;
-        return import(/* @vite-ignore */ module.id);
-    })
-        .filter(Boolean));
-    return Object.keys(manifest)
-        .filter((key) => key.startsWith('M'))
-        .map((key, idx) => [key, modules[idx]])
-        .reduce((memo, item) => {
-        memo[item[0]] = item[1];
-        return memo;
-    }, {});
-}

package/dist/esnext/foundation/Hydration/ClientComponents.server.d.ts

@@ -1,13 +0,0 @@
-export interface ClientModule {
-    name: string;
-    id: string;
-}
-/**
- * Track the client components discovered while rendering SSR output to wire syntax.
- */
-export declare class ClientComponents {
-    modules: string[];
-    add(module: ClientModule): number;
-    indexOf(module: ClientModule): number;
-    all(): any[];
-}

package/dist/esnext/foundation/Hydration/ClientComponents.server.js

@@ -1,18 +0,0 @@
-/**
- * Track the client components discovered while rendering SSR output to wire syntax.
- */
-export class ClientComponents {
-    constructor() {
-        this.modules = [];
-    }
-    add(module) {
-        this.modules.push(JSON.stringify(module));
-        return this.modules.length;
-    }
-    indexOf(module) {
-        return this.modules.indexOf(JSON.stringify(module)) + 1;
-    }
-    all() {
-        return this.modules.map((module) => JSON.parse(module));
-    }
-}

package/dist/esnext/foundation/Hydration/Html.d.ts

@@ -1,5 +0,0 @@
-import { ReactNode } from 'react';
-export declare function Html({ children, head }: {
-    children: ReactNode;
-    head: string;
-}): JSX.Element;

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

@@ -1,9 +0,0 @@
-/// <reference types="vite/client" />
-import React from 'react';
-export function Html({ children, head }) {
-    return (React.createElement("html", { lang: "en" },
-        React.createElement("head", { dangerouslySetInnerHTML: { __html: head } }),
-        React.createElement("body", null,
-            React.createElement("div", { id: "root" }, children),
-            import.meta.env.DEV && (React.createElement("script", { type: "module", src: "/src/entry-client.jsx" })))));
-}

package/dist/esnext/foundation/Hydration/HydrationContext.server.d.ts

@@ -1 +0,0 @@
-export declare const HydrationContext: import("react").Context<boolean>;

package/dist/esnext/foundation/Hydration/HydrationContext.server.js

@@ -1,2 +0,0 @@
-import { createContext } from 'react';
-export const HydrationContext = createContext(false);

package/dist/esnext/foundation/Hydration/ServerComponentRequest.server.d.ts

@@ -1,13 +0,0 @@
-/**
- * This augments the `Request` object from the Fetch API:
- * @see https://developer.mozilla.org/en-US/docs/Web/API/Request
- *
- * - Adds a `cookies` map for easy access
- * - Adds a static constructor to convert a Node.js `IncomingMessage` to a Request.
- */
-export declare class ServerComponentRequest extends Request {
-    cookies: Map<string, string>;
-    constructor(input: any);
-    constructor(input: RequestInfo, init?: RequestInit);
-    private parseCookies;
-}

package/dist/esnext/foundation/Hydration/ServerComponentRequest.server.js

@@ -1,39 +0,0 @@
-/**
- * This augments the `Request` object from the Fetch API:
- * @see https://developer.mozilla.org/en-US/docs/Web/API/Request
- *
- * - Adds a `cookies` map for easy access
- * - Adds a static constructor to convert a Node.js `IncomingMessage` to a Request.
- */
-export class ServerComponentRequest extends Request {
-    constructor(input, init) {
-        if (input instanceof Request) {
-            super(input, init);
-        }
-        else {
-            super(getUrlFromNodeRequest(input), {
-                headers: new Headers(input.headers),
-                method: input.method,
-            });
-        }
-        this.cookies = this.parseCookies();
-    }
-    parseCookies() {
-        const cookieString = this.headers.get('cookie') || '';
-        return new Map(cookieString
-            .split(';')
-            .map((chunk) => chunk.trim().split('=')));
-    }
-}
-/**
- * @see https://github.com/frandiox/vitedge/blob/17f3cd943e86d7c0c71a862985ddd6caa2899425/src/node/utils.js#L19-L24
- *
- * Note: Request can sometimes be an instance of Express request, where `originalUrl` is the true source of what the
- * URL pathname is. We want to use that if it's present, so we union type this to `any`.
- */
-function getUrlFromNodeRequest(request) {
-    var _a;
-    // TODO: Find out how to determine https from `request` object without forwarded proto
-    const secure = request.headers['x-forwarded-proto'] === 'https';
-    return new URL(`${secure ? 'https' : 'http'}://${request.headers.host + ((_a = request.originalUrl) !== null && _a !== void 0 ? _a : request.url)}`).toString();
-}

package/dist/esnext/foundation/Hydration/ServerComponentResponse.server.d.ts

@@ -1,18 +0,0 @@
-export declare class ServerComponentResponse extends Response {
-    private wait;
-    /**
-     * Allow custom body to be a string or a Promise.
-     */
-    customBody: string | Promise<string>;
-    /**
-     * Buffer the current response until all queries have resolved,
-     * and prevent it from streaming back early.
-     */
-    doNotStream(): void;
-    canStream(): boolean;
-    /**
-     * Send the response from a Server Component. Renders React components to string,
-     * and returns `null` to make React happy.
-     */
-    send(body: any): null;
-}

package/dist/esnext/foundation/Hydration/ServerComponentResponse.server.js

@@ -1,35 +0,0 @@
-import { renderToString } from 'react-dom/server';
-export class ServerComponentResponse extends Response {
-    constructor() {
-        super(...arguments);
-        this.wait = false;
-        /**
-         * Allow custom body to be a string or a Promise.
-         */
-        this.customBody = '';
-    }
-    /**
-     * Buffer the current response until all queries have resolved,
-     * and prevent it from streaming back early.
-     */
-    doNotStream() {
-        this.wait = true;
-    }
-    canStream() {
-        return !this.wait;
-    }
-    /**
-     * Send the response from a Server Component. Renders React components to string,
-     * and returns `null` to make React happy.
-     */
-    send(body) {
-        if (typeof body === 'object' &&
-            body.$$typeof === Symbol.for('react.element')) {
-            this.customBody = renderToString(body);
-        }
-        else {
-            this.customBody = body;
-        }
-        return null;
-    }
-}

package/dist/esnext/foundation/Hydration/react-utils.d.ts

@@ -1,5 +0,0 @@
-/**
- * Iterate through each prop in an object and render it to an object.
- */
-export declare function renderReactProps(props: any): Record<string, any>;
-export declare function parseReactFromString(input: string, options?: any): string | JSX.Element | JSX.Element[];

package/dist/esnext/foundation/Hydration/react-utils.js

@@ -1,55 +0,0 @@
-import { renderToString } from 'react-dom/server';
-/**
- * Load `domToReact` from within the library so it doesn't try to load `htmlToDom`
- * which seems to always resolve to the client version, even though we want server.
- */
-import domToReact from 'html-react-parser/lib/dom-to-react';
-import htmlToDOM from 'html-dom-parser';
-/**
- * Iterate through each prop in an object and render it to an object.
- */
-export function renderReactProps(props) {
-    return Object.entries(props).reduce((memo, [key, prop]) => {
-        if (prop instanceof Array) {
-            memo[key] = prop.map((p) => renderReactProp(p));
-        }
-        else {
-            memo[key] = renderReactProp(prop);
-        }
-        return memo;
-    }, {});
-}
-/**
- * If a prop is a React element (determined by the `$$typeof` property),
- * check to see if it's a Function and call it. Otherwise, recursively
- * render React props to support nested components.
- */
-function renderReactProp(prop) {
-    if (typeof prop === 'object' &&
-        prop['$$typeof'] === Symbol.for('react.element')) {
-        if (prop.type instanceof Function) {
-            /**
-             * We can't simply call prop.type(), since this does funky things
-             * with hooks, etc. Instead, we render it to string and convert
-             * it to a React object. This *still* isn't a perfect approach
-             * because the component isn't wrapped in the same context
-             * that the developer may have intended. However, we can
-             * set expectations as thus when passing components as
-             * props within Server Components.
-             */
-            return parseReactFromString(renderToString(prop));
-        }
-        else {
-            return {
-                ...prop,
-                props: renderReactProps(prop.props),
-            };
-        }
-    }
-    return prop;
-}
-export function parseReactFromString(input, options = {}) {
-    return domToReact(
-    // @ts-ignore
-    htmlToDOM(input, { lowerCaseAttributeNames: false }), options);
-}

package/dist/esnext/foundation/Hydration/wire.server.d.ts

@@ -1,4 +0,0 @@
-/**
- * Parse the HTML and convert it to wire syntax model.
- */
-export declare function generateWireSyntaxFromRenderedHtml(html: string): string;

package/dist/esnext/foundation/Hydration/wire.server.js

@@ -1,75 +0,0 @@
-import { ClientComponents } from './ClientComponents.server';
-import { parseReactFromString } from './react-utils';
-/**
- * Parse the HTML and convert it to wire syntax model.
- */
-export function generateWireSyntaxFromRenderedHtml(html) {
-    const clientComponents = new ClientComponents();
-    const wireModel = parseReactFromString(html, {
-        library: {
-            // @ts-ignore
-            createElement: convertToWireSyntax,
-        },
-    });
-    /**
-     * Converts each DOM element to React's "wire" syntax. (I came up with this name; not sure what it's called).
-     * This is a terse syntax that records the model tree as an array of tuples. It also lists the client
-     * components used with their corresponding IDs to import dynamically.
-     */
-    function convertToWireSyntax(type, props, children) {
-        let componentType = type;
-        let componentProps = props;
-        if (props && props['data-client-component']) {
-            const component = {
-                name: props['data-client-component'],
-                id: props['data-id'],
-                named: props['data-named'] === 'true',
-            };
-            const index = clientComponents.indexOf(component) > 0
-                ? clientComponents.indexOf(component)
-                : clientComponents.add(component);
-            componentType = `@${index}`;
-            componentProps = JSON.parse(props['data-props']);
-        }
-        convertComponentPropsToWireSyntax(componentProps !== null && componentProps !== void 0 ? componentProps : {});
-        if (isDomNode(children) ||
-            (children instanceof Array && children.some(isDomNode))) {
-            if (children instanceof Array) {
-                children = children.map((child) => {
-                    if (typeof child === 'string') {
-                        return child;
-                    }
-                    const { children, ...props } = child.props;
-                    return convertToWireSyntax(child.type, props, children);
-                });
-            }
-            else {
-                const { children: childrenChildren, ...childrenProps } = children.props;
-                children = convertToWireSyntax(children.type, childrenProps, childrenChildren);
-            }
-        }
-        /**
-         * TODO: The third position is actually supposed to be `key` I think.
-         * It's usually `null` which is what confused me. Find a way to pass
-         * through `key` here if we have one in `props`.
-         */
-        return ['$', componentType, null, { ...componentProps, children }];
-    }
-    function convertComponentPropsToWireSyntax(componentProps) {
-        Object.entries(componentProps).forEach(([key, prop]) => {
-            if (isDomNode(prop)) {
-                const { children, ...props } = prop.props;
-                componentProps[key] = convertToWireSyntax(prop.type, props, children);
-            }
-        });
-    }
-    return (clientComponents
-        .all()
-        .map((component, idx) => {
-        return `M${idx + 1}:${JSON.stringify(component)}`;
-    })
-        .join('\n') + `\nJ0:${JSON.stringify(wireModel)}`);
-}
-function isDomNode(item) {
-    return item !== null && typeof item === 'object' && '_owner' in item;
-}

package/dist/esnext/foundation/Hydration/writer.server.d.ts

@@ -1,14 +0,0 @@
-/**
- * HydrationWriter is an implementation of `WritableStream` which
- * keeps track of chunks emitted from React's `pipeToNodeWritable`.
- */
-export declare class HydrationWriter {
-    private chunks;
-    drainCallback: () => any;
-    write(chunk: any): void;
-    on(event: string, callback: any): void;
-    drain(): void;
-    destroy(): void;
-    end(): void;
-    toString(): string;
-}

package/dist/esnext/foundation/Hydration/writer.server.js

@@ -1,29 +0,0 @@
-/**
- * HydrationWriter is an implementation of `WritableStream` which
- * keeps track of chunks emitted from React's `pipeToNodeWritable`.
- */
-export class HydrationWriter {
-    constructor() {
-        this.chunks = [];
-        this.drainCallback = () => { };
-    }
-    write(chunk) {
-        this.chunks.push(chunk.toString());
-    }
-    on(event, callback) {
-        if (event === Events.drain) {
-            this.drainCallback = callback;
-        }
-    }
-    drain() {
-        this.drainCallback();
-    }
-    destroy() { }
-    end() { }
-    toString() {
-        return this.chunks.join('');
-    }
-}
-const Events = {
-    drain: 'drain',
-};

package/dist/esnext/foundation/Router/DefaultRoutes.d.ts

@@ -1,20 +0,0 @@
-import { ReactElement } from 'react';
-export declare type ImportGlobEagerOutput = Record<string, Record<'default', any>>;
-/**
- * Build a set of default Hydrogen routes based on the output provided by Vite's
- * import.meta.globEager method.
- *
- * @see https://vitejs.dev/guide/features.html#glob-import
- */
-export declare function DefaultRoutes({ pages, serverState, fallback, }: {
-    pages: ImportGlobEagerOutput;
-    serverState: Record<string, any>;
-    fallback?: ReactElement;
-}): JSX.Element;
-interface HydrogenRoute {
-    component: any;
-    path: string;
-    exact: boolean;
-}
-export declare function createRoutesFromPages(pages: ImportGlobEagerOutput, topLevelPath?: string): HydrogenRoute[];
-export {};

package/dist/esnext/foundation/Router/DefaultRoutes.js

@@ -1,54 +0,0 @@
-import React, { useMemo } from 'react';
-import { Route, Switch, useRouteMatch } from 'react-router-dom';
-/**
- * Build a set of default Hydrogen routes based on the output provided by Vite's
- * import.meta.globEager method.
- *
- * @see https://vitejs.dev/guide/features.html#glob-import
- */
-export function DefaultRoutes({ pages, serverState, fallback, }) {
-    const { path } = useRouteMatch();
-    const routes = useMemo(() => createRoutesFromPages(pages, path), [pages, path]);
-    return (React.createElement(Switch, null,
-        routes.map((route) => (React.createElement(Route, { key: route.path, exact: route.exact, path: route.path },
-            React.createElement(route.component, { ...serverState })))),
-        fallback && React.createElement(Route, { path: "*" }, fallback)));
-}
-export function createRoutesFromPages(pages, topLevelPath = '*') {
-    const topLevelPrefix = topLevelPath.replace('*', '').replace(/\/$/, '');
-    const routes = Object.keys(pages).map((key) => {
-        const path = key
-            .replace('./pages', '')
-            .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}`);
-        /**
-         * Catch-all routes [...handle].jsx don't need an exact match
-         * https://reactrouter.com/core/api/Route/exact-bool
-         */
-        const exact = !/\[(?:[.]{3})(\w+?)\]/.test(key);
-        return {
-            path: topLevelPrefix + path,
-            component: pages[key].default,
-            exact,
-        };
-    });
-    /**
-     * Place static paths BEFORE dynamic paths to grant priority.
-     */
-    return [
-        ...routes.filter((route) => !route.path.includes(':')),
-        ...routes.filter((route) => route.path.includes(':')),
-    ];
-}

package/dist/esnext/foundation/Router/ServerStateRouter.client.d.ts

@@ -1,6 +0,0 @@
-/**
- * Since we don't render each <Route> on the client like React Router expects,
- * this listens for changes to `location` and proxies the new pathname to
- * server state, which in turn fetches the correct server component.
- */
-export declare function ServerStateRouter(): null;

package/dist/esnext/foundation/Router/ServerStateRouter.client.js

@@ -1,27 +0,0 @@
-import { useEffect, useState } from 'react';
-import { useLocation } from 'react-router-dom';
-import { useServerState } from '../ServerStateProvider';
-/**
- * Since we don't render each <Route> on the client like React Router expects,
- * this listens for changes to `location` and proxies the new pathname to
- * server state, which in turn fetches the correct server component.
- */
-export function ServerStateRouter() {
-    const { setServerState, pending } = useServerState();
-    const [isNavigating, setIsNavigating] = useState(false);
-    const location = useLocation();
-    useEffect(() => {
-        setIsNavigating(true);
-        setServerState('page', location.pathname);
-    }, [location.pathname, setServerState]);
-    useEffect(() => {
-        /**
-         * Indicates navigation has occurred
-         */
-        if (isNavigating && !pending) {
-            window.scrollTo(0, 0);
-            setIsNavigating(false);
-        }
-    }, [isNavigating, pending]);
-    return null;
-}

package/dist/esnext/foundation/Router/index.d.ts

@@ -1 +0,0 @@
-export { DefaultRoutes } from './DefaultRoutes';

package/dist/esnext/foundation/Router/index.js

@@ -1 +0,0 @@
-export { DefaultRoutes } from './DefaultRoutes';

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

@@ -1,11 +0,0 @@
-import React, { ReactNode } from 'react';
-interface Props {
-    serverState: Record<string, any>;
-    setServerState: React.Dispatch<React.SetStateAction<{
-        page: string;
-    }>>;
-    children: ReactNode;
-}
-export declare function ServerStateProvider({ serverState, setServerState, children, }: Props): JSX.Element;
-export declare function useServerState(): any;
-export {};

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

@@ -1,48 +0,0 @@
-import React, { createContext, useContext, useMemo, useCallback, 
-// @ts-ignore
-useTransition, } from 'react';
-const ServerStateContext = createContext(null);
-export function ServerStateProvider({ serverState, setServerState, children, }) {
-    const [pending, startTransition] = useTransition();
-    const setServerStateCallback = useCallback((input, value) => {
-        /**
-         * By wrapping this state change in a transition, React renders the new state
-         * concurrently in a new "tree" instead of Suspending and showing the (blank)
-         * fallback. This is preferred behavior, though we may want to revisit how
-         * we make this decision globally for the developer - and consider providing
-         * the `pending` flag also provided by the hook to display in the UI.
-         */
-        startTransition(() => {
-            // Support callback-style setState
-            if (typeof input === 'function') {
-                // @ts-ignore
-                return setServerState(input);
-            }
-            // Support a simple object, and spread it into the existing object.
-            if (typeof input === 'object') {
-                return setServerState((prev) => ({
-                    ...prev,
-                    // @ts-ignore
-                    ...input,
-                }));
-            }
-            // Support a key, value as well.
-            if (typeof input === 'string') {
-                return setServerState((prev) => ({
-                    ...prev,
-                    [input]: value,
-                }));
-            }
-        });
-    }, [setServerState, startTransition]);
-    const value = useMemo(() => ({
-        pending,
-        serverState,
-        setServerState: setServerStateCallback,
-    }), [serverState, setServerStateCallback, pending]);
-    return (React.createElement(ServerStateContext.Provider, { value: value }, children));
-}
-export function useServerState() {
-    var _a;
-    return (_a = useContext(ServerStateContext)) !== null && _a !== void 0 ? _a : {};
-}