@shopify/hydrogen 1.0.0-alpha.21 → 1.0.1

package/dist/esnext/components/SelectedVariantUnitPrice/index.d.ts

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

package/dist/esnext/components/SelectedVariantUnitPrice/index.js

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

package/dist/esnext/components/UnitPrice/UnitPrice.client.d.ts

@@ -1,8 +0,0 @@
-import { ElementType } from 'react';
-import { Props } from '../types';
-import { UnitPriceMeasurement, MoneyV2 } from '../../graphql/types/types';
-export interface UnitPriceProps {
-    unitPrice: MoneyV2;
-    unitPriceMeasurement: UnitPriceMeasurement;
-}
-export declare function UnitPrice<TTag extends ElementType>(props: Props<TTag> & UnitPriceProps): JSX.Element;

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

@@ -1,16 +0,0 @@
-import React from 'react';
-import { useMoney } from '../../hooks';
-import { Money } from '../Money';
-export function UnitPrice(props) {
-    const { unitPrice, unitPriceMeasurement, children, as, ...passthroughProps } = props;
-    const Wrapper = as !== null && as !== void 0 ? as : 'div';
-    const unitPriceMoneyObject = useMoney(unitPrice);
-    const unitPriceAndMeasurementObject = {
-        ...unitPriceMoneyObject,
-        ...unitPriceMeasurement,
-    };
-    return (React.createElement(Wrapper, { ...passthroughProps }, typeof children === 'function' ? (children(unitPriceAndMeasurementObject)) : (React.createElement(React.Fragment, null,
-        React.createElement(Money, { money: unitPrice }),
-        "/",
-        unitPriceMeasurement.referenceUnit))));
-}

package/dist/esnext/components/UnitPrice/index.d.ts

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

package/dist/esnext/components/UnitPrice/index.js

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

package/dist/esnext/components/Video/VideoFragment.d.ts

@@ -1,11 +0,0 @@
-import * as Types from '../../graphql/types/types';
-export declare type VideoFragmentFragment = {
-    __typename?: 'Video';
-} & Pick<Types.Video, 'id'> & {
-    previewImage?: Types.Maybe<{
-        __typename?: 'Image';
-    } & Pick<Types.Image, 'originalSrc'>>;
-    sources: Array<{
-        __typename?: 'VideoSource';
-    } & Pick<Types.VideoSource, 'mimeType' | 'url'>>;
-};

package/dist/esnext/components/Video/VideoFragment.js

@@ -1 +0,0 @@
-export {};

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

@@ -1,10 +0,0 @@
-import { FunctionComponent } from 'react';
-interface Props {
-    name: string;
-    id: string;
-    props: any;
-    component: FunctionComponent;
-    named: boolean;
-}
-export declare function ClientMarker({ name, id, props: allProps, component: Component, named, }: Props): JSX.Element;
-export {};

package/dist/esnext/foundation/ClientMarker/ClientMarker.js

@@ -1,25 +0,0 @@
-import React, { useContext } from 'react';
-import { HydrationContext } from '../Hydration/HydrationContext.server';
-import { renderReactProps } from '../Hydration/react-utils';
-export function ClientMarker({ name, id, props: allProps, component: Component, named, }) {
-    const isHydrating = useContext(HydrationContext);
-    if (!isHydrating)
-        return React.createElement(Component, { ...allProps });
-    let { children, ...props } = allProps;
-    /**
-     * Convert props that happen to be React components to actual
-     * objects representing DOM elements. This is because we
-     * serialize props to JSON below, and React element Functions
-     * cannot be serialized.
-     */
-    props = renderReactProps(props);
-    /**
-     * Components ending in *Provider are special components to
-     * Hydrogen's RSC implementation. They are rendered during
-     * the hydration process in the state tree even though they
-     * don't output any DOM. This is key to supporting crossing
-     * the server/client context boundary.
-     */
-    const shouldRenderDuringHydration = name.endsWith('Provider');
-    return (React.createElement("span", { "data-client-component": name, "data-id": id, "data-props": JSON.stringify(props), "data-named": named }, shouldRenderDuringHydration ? (React.createElement(Component, { ...allProps }, children)) : (children)));
-}

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

@@ -1 +0,0 @@
-export * from './ClientMarker';

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

@@ -1 +0,0 @@
-export * from './ClientMarker';

package/dist/esnext/foundation/Hydration/Cache.client.d.ts

@@ -1,9 +0,0 @@
-import { ReactElement } from 'react';
-/**
- * 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 declare function useServerResponse(state: any): any;
-export declare function convertHydrationResponseToReactComponents(response: string): Promise<ReactElement>;

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 {};