@shopify/hydrogen 0.1.0

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

@@ -0,0 +1,35 @@
+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

@@ -0,0 +1,5 @@
+/**
+ * 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

@@ -0,0 +1,55 @@
+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

@@ -0,0 +1,4 @@
+/**
+ * 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

@@ -0,0 +1,75 @@
+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

@@ -0,0 +1,14 @@
+/**
+ * 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

@@ -0,0 +1,29 @@
+/**
+ * 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

@@ -0,0 +1,20 @@
+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

@@ -0,0 +1,54 @@
+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

@@ -0,0 +1,6 @@
+/**
+ * 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

@@ -0,0 +1,27 @@
+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

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

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

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

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

@@ -0,0 +1,11 @@
+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

@@ -0,0 +1,48 @@
+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 : {};
+}

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

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

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

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

package/dist/esnext/foundation/ShopifyProvider/ShopifyContext.d.ts

@@ -0,0 +1 @@
+export declare const ShopifyContext: import("react").Context<import("../../types").ShopifyConfig | null>;

package/dist/esnext/foundation/ShopifyProvider/ShopifyContext.js

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

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

@@ -0,0 +1,3 @@
+import { ShopifyProviderProps } from './types';
+export declare const DEFAULT_API_VERSION = "2021-10";
+export declare function ShopifyProvider({ shopifyConfig, children, }: ShopifyProviderProps): JSX.Element;

package/dist/esnext/foundation/ShopifyProvider/ShopifyProvider.js

@@ -0,0 +1,11 @@
+import React, { useMemo } from 'react';
+import { ShopifyContext } from './ShopifyContext';
+export const DEFAULT_API_VERSION = '2021-10';
+export function ShopifyProvider({ shopifyConfig, children, }) {
+    const shopifyProviderValue = useMemo(() => ({
+        locale: 'en-us',
+        graphqlApiVersion: DEFAULT_API_VERSION,
+        ...shopifyConfig,
+    }), [shopifyConfig]);
+    return (React.createElement(ShopifyContext.Provider, { value: shopifyProviderValue }, children));
+}

package/dist/esnext/foundation/ShopifyProvider/ShopifyServerProvider.server.d.ts

@@ -0,0 +1,8 @@
+import { ReactElement } from 'react';
+import { ShopifyConfig } from '../../types';
+import { ReactQueryHydrationContext } from './types';
+export declare function ShopifyServerProvider({ children, shopifyConfig, hydrationContext, }: {
+    children: ReactElement;
+    shopifyConfig: ShopifyConfig;
+    hydrationContext: ReactQueryHydrationContext;
+}): JSX.Element;

package/dist/esnext/foundation/ShopifyProvider/ShopifyServerProvider.server.js

@@ -0,0 +1,7 @@
+import React from 'react';
+import { ShopifyProvider } from './ShopifyProvider';
+import { QueryProvider } from '../../hooks/useQuery';
+export function ShopifyServerProvider({ children, shopifyConfig, hydrationContext, }) {
+    return (React.createElement(ShopifyProvider, { shopifyConfig: shopifyConfig },
+        React.createElement(QueryProvider, { hydrationContext: hydrationContext }, children)));
+}

package/dist/esnext/foundation/ShopifyProvider/hooks.d.ts

@@ -0,0 +1,2 @@
+import { ShopifyProviderValue } from './types';
+export declare function useShop(): ShopifyProviderValue;

package/dist/esnext/foundation/ShopifyProvider/hooks.js

@@ -0,0 +1,9 @@
+import { useContext } from 'react';
+import { ShopifyContext } from './ShopifyContext';
+export function useShop() {
+    const context = useContext(ShopifyContext);
+    if (!context) {
+        throw new Error('No Shopify Context found');
+    }
+    return context;
+}

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

@@ -0,0 +1,2 @@
+export { ShopifyProvider, DEFAULT_API_VERSION } from './ShopifyProvider';
+export { useShop } from './hooks';

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

@@ -0,0 +1,2 @@
+export { ShopifyProvider, DEFAULT_API_VERSION } from './ShopifyProvider';
+export { useShop } from './hooks';

package/dist/esnext/foundation/ShopifyProvider/types.d.ts

@@ -0,0 +1,12 @@
+import type { QueryClient } from 'react-query';
+import { ShopifyConfig } from '../../types';
+export declare type ShopifyProviderValue = ShopifyConfig;
+export declare type ShopifyProviderProps = {
+    shopifyConfig: ShopifyConfig;
+    children?: React.ReactNode;
+    manager?: any;
+};
+export interface ReactQueryHydrationContext {
+    queryClient?: QueryClient;
+    dehydratedState?: any;
+}

package/dist/esnext/foundation/ShopifyProvider/types.js

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

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

@@ -0,0 +1,4 @@
+export { ShopifyProvider, useShop, DEFAULT_API_VERSION } from './ShopifyProvider';
+export { ShopifyServerProvider } from './ShopifyProvider/ShopifyServerProvider.server';
+export { DefaultRoutes } from './Router';
+export { ClientMarker } from './ClientMarker';

package/dist/esnext/foundation/index.js

@@ -0,0 +1,4 @@
+export { ShopifyProvider, useShop, DEFAULT_API_VERSION } from './ShopifyProvider';
+export { ShopifyServerProvider } from './ShopifyProvider/ShopifyServerProvider.server';
+export { DefaultRoutes } from './Router';
+export { ClientMarker } from './ClientMarker';

package/dist/esnext/framework/graphiql.d.ts

@@ -0,0 +1 @@
+export declare function graphiqlHtml(shop: string, token: string, apiVersion?: string): string;

package/dist/esnext/framework/graphiql.js

@@ -0,0 +1,39 @@
+import { DEFAULT_API_VERSION } from '../foundation';
+export function graphiqlHtml(shop, token, apiVersion = DEFAULT_API_VERSION) {
+    return `<html>
+  <head>
+    <title>Shopify Storefront API</title>
+    <link href="https://unpkg.com/graphiql/graphiql.min.css" rel="stylesheet" />
+  </head>
+  <body style="margin: 0;">
+    <div id="graphiql" style="height: 100vh;"></div>
+    <script
+      crossorigin
+      src="https://unpkg.com/react/umd/react.production.min.js"
+    ></script>
+    <script
+      crossorigin
+      src="https://unpkg.com/react-dom/umd/react-dom.production.min.js"
+    ></script>
+    <script
+      crossorigin
+      src="https://unpkg.com/graphiql/graphiql.min.js"
+    ></script>
+    <script>
+      const fetcher = GraphiQL.createFetcher({
+        url: 'https://${shop}/api/${apiVersion}/graphql.json',
+        headers: {
+          Accept: 'application/json',
+          'Content-Type': 'application/graphql',
+          'X-Shopify-Storefront-Access-Token': '${token}'
+        }
+      });
+      ReactDOM.render(
+        React.createElement(GraphiQL, { fetcher: fetcher }),
+        document.getElementById('graphiql'),
+      );
+    </script>
+  </body>
+</html>
+`;
+}

package/dist/esnext/framework/middleware.d.ts

@@ -0,0 +1,17 @@
+import { IncomingMessage, NextFunction } from 'connect';
+import http from 'http';
+import { ViteDevServer } from 'vite';
+import { ShopifyConfig } from '../types';
+declare type HydrogenMiddlewareArgs = {
+    dev?: boolean;
+    shopifyConfig?: ShopifyConfig;
+    indexTemplate: string | ((url: string) => Promise<string>);
+    getServerEntrypoint: () => Record<string, any> | Promise<Record<string, any>>;
+    devServer?: ViteDevServer;
+};
+/**
+ * Provides middleware to Node.js Express-like servers. Used by the Hydrogen
+ * Vite dev server plugin as well as production Node.js implementation.
+ */
+export default function hydrogenMiddleware({ dev, shopifyConfig, indexTemplate, getServerEntrypoint, devServer, }: HydrogenMiddlewareArgs): (request: IncomingMessage, response: http.ServerResponse, next: NextFunction) => Promise<void>;
+export {};