@shopify/hydrogen 1.0.0-alpha.21 → 1.0.1

package/dist/esnext/streaming.server.d.ts

@@ -0,0 +1,16 @@
+export { renderToPipeableStream as ssrRenderToPipeableStream, // Only available in Node context
+renderToReadableStream as ssrRenderToReadableStream, } from 'react-dom/server';
+declare type ServerContextJSONValue = string | boolean | number | null | Readonly<ServerContextJSONValueCircular> | {
+    [key: string]: ServerContextJSONValueCircular;
+};
+interface ServerContextJSONValueCircular extends Array<ServerContextJSONValue> {
+}
+export declare const rscRenderToReadableStream: (App: JSX.Element, options?: {
+    onError?: ((error: Error) => void) | undefined;
+    context?: [string, ServerContextJSONValue][] | undefined;
+    identifierPrefix?: string | undefined;
+} | undefined) => ReadableStream<Uint8Array>;
+export declare const createFromReadableStream: (rs: ReadableStream<Uint8Array>) => {
+    readRoot: () => JSX.Element;
+};
+export declare function bufferReadableStream(reader: ReadableStreamDefaultReader, cb?: (chunk: string) => void): Promise<string>;

package/dist/esnext/streaming.server.js

@@ -0,0 +1,24 @@
+export { renderToPipeableStream as ssrRenderToPipeableStream, // Only available in Node context
+renderToReadableStream as ssrRenderToReadableStream, // Only available in Browser/Worker context
+ } from 'react-dom/server';
+// @ts-ignore
+import { renderToReadableStream as _rscRenderToReadableStream } from '@shopify/hydrogen/vendor/react-server-dom-vite/writer.browser.server';
+// @ts-ignore
+import { createFromReadableStream as _createFromReadableStream } from '@shopify/hydrogen/vendor/react-server-dom-vite';
+export const rscRenderToReadableStream = _rscRenderToReadableStream;
+export const createFromReadableStream = _createFromReadableStream;
+export async function bufferReadableStream(reader, cb) {
+    const decoder = new TextDecoder();
+    let result = '';
+    while (true) {
+        const { done, value } = await reader.read();
+        if (done)
+            break;
+        const stringValue = typeof value === 'string' ? value : decoder.decode(value);
+        result += stringValue;
+        if (cb) {
+            cb(stringValue);
+        }
+    }
+    return result;
+}

package/dist/esnext/types.d.ts

@@ -1,48 +1,115 @@
 /// <reference types="node" />
+export * from './shared-types';
+import { ShopifyConfig } from './shared-types';
 import type { ServerResponse } from 'http';
-import type { ServerComponentResponse } from './foundation/Hydration/ServerComponentResponse.server';
-import type { ServerComponentRequest } from './foundation/Hydration/ServerComponentRequest.server';
-export declare type Renderer = (url: URL, options: {
-    request: ServerComponentRequest;
-    context?: Record<string, any>;
-    isReactHydrationRequest?: boolean;
-}) => Promise<{
-    body: string;
-    componentResponse: ServerComponentResponse;
-} & Record<string, any>>;
-export declare type Streamer = (url: URL, options: {
-    context: any;
-    request: ServerComponentRequest;
-    response: ServerResponse;
+import type { Logger, LoggerConfig } from './utilities/log/log';
+import type { HydrogenRequest } from './foundation/HydrogenRequest/HydrogenRequest.server';
+import type { HydrogenResponse } from './foundation/HydrogenResponse/HydrogenResponse.server';
+import type { Metafield } from './storefront-api-types';
+import type { SessionStorageAdapter } from './foundation/session/session';
+import type { PartialDeep, JsonValue } from 'type-fest';
+export declare type AssembleHtmlParams = {
+    ssrHtml: string;
+    rscPayload?: string;
+    routes?: ImportGlobEagerOutput;
+    request: HydrogenRequest;
     template: string;
-}) => void;
-export declare type Hydrator = (url: URL, options: {
-    context: any;
-    request: ServerComponentRequest;
-    response: ServerResponse;
-}) => void;
-export declare type EntryServerHandler = {
-    render: Renderer;
-    stream: Streamer;
-    hydrate: Hydrator;
-};
-export declare type ShopifyConfig = {
-    locale?: string;
-    storeDomain: string;
-    storefrontToken: string;
-    graphqlApiVersion?: string;
+};
+export declare type RunSsrParams = {
+    state: Record<string, any>;
+    rsc: {
+        readable: ReadableStream;
+        didError: () => Error | undefined;
+    };
+    routes?: ImportGlobEagerOutput;
+    request: HydrogenRequest;
+    response: HydrogenResponse;
+    log: Logger;
+    dev?: boolean;
+    template: string;
+    nonce?: string;
+    nodeResponse?: ServerResponse;
+    revalidate?: Boolean;
+};
+export declare type RunRscParams = {
+    App: any;
+    state: Record<string, any>;
+    log: Logger;
+    request: HydrogenRequest;
+    response: HydrogenResponse;
 };
 export declare type Hook = (params: {
     url: URL;
 } & Record<string, any>) => any | Promise<any>;
-export declare type ServerHandler = (App: any, hook?: Hook) => {
-    render: Renderer;
-    stream: Streamer;
-    hydrate: Hydrator;
+export declare type ImportGlobEagerOutput = Record<string, Record<'default' | 'api', any>>;
+export declare type InlineHydrogenRoutes = string | {
+    files: string;
+    basePath?: string;
+};
+export declare type ResolvedHydrogenRoutes = {
+    files: ImportGlobEagerOutput;
+    dirPrefix: string;
+    basePath: string;
+};
+declare type ConfigFetcher<T> = (request: HydrogenRequest) => T | Promise<T>;
+export declare type ShopifyConfigFetcher = ConfigFetcher<ShopifyConfig>;
+export declare type ServerAnalyticsConnector = {
+    request: (requestUrl: string, requestHeader: Headers, data?: any, contentType?: 'json' | 'text') => Promise<any>;
+};
+export declare type InlineHydrogenConfig = ClientConfig & {
+    routes?: InlineHydrogenRoutes;
+    shopify?: ShopifyConfig | ShopifyConfigFetcher;
+    serverAnalyticsConnectors?: Array<ServerAnalyticsConnector>;
+    logger?: LoggerConfig;
+    session?: (log: Logger) => SessionStorageAdapter;
+    poweredByHeader?: boolean;
+    __EXPERIMENTAL__devTools?: boolean;
+};
+export declare type ResolvedHydrogenConfig = Omit<InlineHydrogenConfig, 'routes'> & {
+    routes: ResolvedHydrogenRoutes;
 };
-export declare type ClientHandler = (App: any, hook?: Hook) => Promise<void>;
+export declare type ClientConfig = {
+    /** React's StrictMode is on by default for your client side app; if you want to turn it off (not recommended), you can pass `false` */
+    strictMode?: boolean;
+};
+export declare type ClientHandler = (App: React.ElementType, config: ClientConfig) => Promise<void>;
 export interface GraphQLConnection<T> {
     edges?: {
         node: T;
     }[];
+    nodes?: T[];
+}
+export declare type ParsedMetafield = Omit<PartialDeep<Metafield>, 'value'> & {
+    value?: string | number | boolean | JsonValue | Date | Rating | Measurement;
+};
+export interface Rating {
+    value: number;
+    scale_min: number;
+    scale_max: number;
+}
+export interface Measurement {
+    unit: string;
+    value: number;
 }
+export declare type QueryKey = string | readonly unknown[];
+export declare type NoStoreStrategy = {
+    mode: string;
+};
+export interface AllCacheOptions {
+    mode?: string;
+    maxAge?: number;
+    staleWhileRevalidate?: number;
+    sMaxAge?: number;
+    staleIfError?: number;
+}
+export declare type CachingStrategy = AllCacheOptions;
+export declare type PreloadOptions = boolean | string;
+export declare type HydrogenRouteProps = {
+    request: HydrogenRequest;
+    response: HydrogenResponse;
+    log: Logger;
+    params: Record<string, any>;
+    pathname: string;
+    search: string;
+    [key: string]: any;
+};

package/dist/esnext/types.js

@@ -1 +1 @@
-export {};
+export * from './shared-types';

package/dist/esnext/utilities/apiRoutes.d.ts

@@ -0,0 +1,42 @@
+import { ResolvedHydrogenConfig, ResolvedHydrogenRoutes } from '../types';
+import type { HydrogenRequest } from '../foundation/HydrogenRequest/HydrogenRequest.server';
+import { SessionApi, SessionStorageAdapter } from '../foundation/session/session';
+import { UseShopQueryResponse } from '../hooks/useShopQuery/hooks';
+declare type RouteParams = Record<string, string>;
+export declare type RequestOptions = {
+    params: RouteParams;
+    queryShop: <T>(args: QueryShopArgs) => Promise<UseShopQueryResponse<T>>;
+    session: SessionApi | null;
+    hydrogenConfig: ResolvedHydrogenConfig;
+};
+export declare type ResourceGetter = (request: HydrogenRequest, requestOptions: RequestOptions) => Promise<Response | Object | String>;
+interface HydrogenApiRoute {
+    path: string;
+    resource: ResourceGetter;
+    hasServerComponent: boolean;
+}
+export declare type ApiRouteMatch = {
+    resource: ResourceGetter;
+    hasServerComponent: boolean;
+    params: RouteParams;
+};
+export declare function extractPathFromRoutesKey(routesKey: string, dirPrefix: string | RegExp): string;
+export declare function getApiRoutes({ files: routes, basePath: topLevelPath, dirPrefix, }: Partial<ResolvedHydrogenRoutes>): Array<HydrogenApiRoute>;
+export declare function getApiRouteFromURL(url: URL, routes: Array<HydrogenApiRoute>): ApiRouteMatch | null;
+/** The `queryShop` utility is a function that helps you query the Storefront API.
+ * It's similar to the `useShopQuery` hook, which is available in server components.
+ * To use `queryShop`, pass `shopifyConfig` to `renderHydrogen` inside `App.server.jsx`.
+ */
+interface QueryShopArgs {
+    /** A string of the GraphQL query.
+     * If no query is provided, then the `useShopQuery` makes no calls to the Storefront API.
+     */
+    query: string;
+    /** An object of the variables for the GraphQL query. */
+    variables?: Record<string, any>;
+}
+export declare function renderApiRoute(request: HydrogenRequest, route: ApiRouteMatch, hydrogenConfig: ResolvedHydrogenConfig, { session, suppressLog, }: {
+    session?: SessionStorageAdapter;
+    suppressLog?: boolean;
+}): Promise<Response | Request>;
+export {};

package/dist/esnext/utilities/apiRoutes.js

@@ -0,0 +1,152 @@
+import { matchPath } from './matchPath';
+import { getLoggerWithContext, logServerResponse } from '../utilities/log/';
+import { fetchBuilder, graphqlRequestBody } from './fetch';
+import { getStorefrontApiRequestHeaders } from './storefrontApi';
+import { emptySessionImplementation, } from '../foundation/session/session';
+let memoizedApiRoutes = [];
+let memoizedRawRoutes = {};
+export function extractPathFromRoutesKey(routesKey, dirPrefix) {
+    let path = routesKey
+        .replace(dirPrefix, '')
+        .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}`);
+    if (path.endsWith('/') && path !== '/') {
+        path = path.substring(0, path.length - 1);
+    }
+    return path;
+}
+export function getApiRoutes({ files: routes, basePath: topLevelPath = '', dirPrefix = '', }) {
+    if (!routes || memoizedRawRoutes === routes)
+        return memoizedApiRoutes;
+    const topLevelPrefix = topLevelPath.replace('*', '').replace(/\/$/, '');
+    const keys = Object.keys(routes);
+    const apiRoutes = keys
+        .filter((key) => routes[key].api)
+        .map((key) => {
+        const path = extractPathFromRoutesKey(key, dirPrefix);
+        /**
+         * 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,
+            resource: routes[key].api,
+            hasServerComponent: !!routes[key].default,
+            exact,
+        };
+    });
+    memoizedApiRoutes = [
+        ...apiRoutes.filter((route) => !route.path.includes(':')),
+        ...apiRoutes.filter((route) => route.path.includes(':')),
+    ];
+    memoizedRawRoutes = routes;
+    return memoizedApiRoutes;
+}
+export function getApiRouteFromURL(url, routes) {
+    let foundRoute, foundRouteDetails;
+    for (let i = 0; i < routes.length; i++) {
+        foundRouteDetails = matchPath(url.pathname, routes[i]);
+        if (foundRouteDetails) {
+            foundRoute = routes[i];
+            break;
+        }
+    }
+    if (!foundRoute)
+        return null;
+    return {
+        resource: foundRoute.resource,
+        params: foundRouteDetails.params,
+        hasServerComponent: foundRoute.hasServerComponent,
+    };
+}
+function queryShopBuilder(shopifyConfigGetter, request) {
+    return async function queryShop({ query, variables, }) {
+        const shopifyConfig = typeof shopifyConfigGetter === 'function'
+            ? await shopifyConfigGetter(request)
+            : shopifyConfigGetter;
+        if (!shopifyConfig) {
+            throw new Error('Shopify connection info was not found in Hydrogen config');
+        }
+        const { storeDomain, storefrontApiVersion, storefrontToken } = shopifyConfig;
+        const buyerIp = request.getBuyerIp();
+        const extraHeaders = getStorefrontApiRequestHeaders({
+            buyerIp,
+            storefrontToken,
+        });
+        const fetcher = fetchBuilder(`https://${storeDomain}/api/${storefrontApiVersion}/graphql.json`, {
+            method: 'POST',
+            body: graphqlRequestBody(query, variables),
+            headers: {
+                'Content-Type': 'application/json',
+                ...extraHeaders,
+            },
+        });
+        return await fetcher();
+    };
+}
+export async function renderApiRoute(request, route, hydrogenConfig, { session, suppressLog, }) {
+    let response;
+    const log = getLoggerWithContext(request);
+    let cookieToSet = '';
+    try {
+        response = await route.resource(request, {
+            params: route.params,
+            queryShop: queryShopBuilder(hydrogenConfig.shopify, request),
+            hydrogenConfig,
+            session: session
+                ? {
+                    async get() {
+                        return session.get(request);
+                    },
+                    async set(key, value) {
+                        const data = await session.get(request);
+                        data[key] = value;
+                        cookieToSet = await session.set(request, data);
+                    },
+                    async destroy() {
+                        cookieToSet = await session.destroy(request);
+                    },
+                }
+                : emptySessionImplementation(log),
+        });
+        if (!(response instanceof Response || response instanceof Request)) {
+            if (typeof response === 'string' || response instanceof String) {
+                response = new Response(response);
+            }
+            else if (typeof response === 'object') {
+                response = new Response(JSON.stringify(response), {
+                    headers: {
+                        'Content-Type': 'application/json',
+                    },
+                });
+            }
+        }
+        if (!response) {
+            response = new Response(null);
+        }
+        if (cookieToSet) {
+            response.headers.set('Set-Cookie', cookieToSet);
+        }
+    }
+    catch (e) {
+        log.error(e);
+        response = new Response('Error processing: ' + request.url, { status: 500 });
+    }
+    if (!suppressLog) {
+        logServerResponse('api', request, response.status ?? 200);
+    }
+    return response;
+}

package/dist/esnext/utilities/bot-ua.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Determines if the request is from a bot, using the URL and User Agent
+ */
+export declare function isBotUA(url: URL, userAgent: string | null): boolean;

package/dist/esnext/utilities/bot-ua.js

@@ -0,0 +1,61 @@
+/**
+ * An alphabetized list of User Agents of known bots, combined from lists found at:
+ * https://github.com/vercel/next.js/blob/d87dc2b5a0b3fdbc0f6806a47be72bad59564bd0/packages/next/server/utils.ts#L18-L22
+ * https://github.com/GoogleChrome/rendertron/blob/6f681688737846b28754fbfdf5db173846a826df/middleware/src/middleware.ts#L24-L41
+ */
+const botUserAgents = [
+    'AdsBot-Google',
+    'applebot',
+    'Baiduspider',
+    'baiduspider',
+    'Bytespider',
+    '360Spider',
+    'PetalBot',
+    'Yisouspider',
+    'bingbot',
+    'Bingbot',
+    'BingPreview',
+    'bitlybot',
+    'Discordbot',
+    'DuckDuckBot',
+    'Embedly',
+    'facebookcatalog',
+    'facebookexternalhit',
+    'Google-PageRenderer',
+    'Googlebot',
+    'googleweblight',
+    'ia_archive',
+    'LinkedInBot',
+    'Mediapartners-Google',
+    'outbrain',
+    'pinterest',
+    'quora link preview',
+    'redditbot',
+    'rogerbot',
+    'showyoubot',
+    'SkypeUriPreview',
+    'Slackbot',
+    'Slurp',
+    'sogou',
+    'Storebot-Google',
+    'TelegramBot',
+    'tumblr',
+    'Twitterbot',
+    'vkShare',
+    'W3C_Validator',
+    'WhatsApp',
+    'yandex',
+    // SEO Tools
+    'Seoradar',
+    'W3C html2txt',
+];
+/**
+ * Creates a regex based on the botUserAgents array
+ */
+const botUARegex = new RegExp(botUserAgents.join('|'), 'i');
+/**
+ * Determines if the request is from a bot, using the URL and User Agent
+ */
+export function isBotUA(url, userAgent) {
+    return (url.searchParams.has('_bot') || (!!userAgent && botUARegex.test(userAgent)));
+}

package/dist/esnext/utilities/defer.d.ts

@@ -0,0 +1,6 @@
+export declare function defer<T = unknown | undefined>(): {
+    promise: Promise<T>;
+    status: 'pending' | 'resolved' | 'rejected';
+    resolve: (value: T) => void;
+    reject: (reason?: any) => void;
+};

package/dist/esnext/utilities/defer.js

@@ -0,0 +1,14 @@
+export function defer() {
+    const deferred = { status: 'pending' };
+    deferred.promise = new Promise((resolve, reject) => {
+        deferred.resolve = (value) => {
+            deferred.status = 'resolved';
+            return resolve(value);
+        };
+        deferred.reject = (error) => {
+            deferred.status = 'rejected';
+            return reject(error);
+        };
+    });
+    return deferred;
+}

package/dist/esnext/utilities/devtools.d.ts

@@ -0,0 +1,11 @@
+export declare type DevServerMessage = {
+    type: 'warn';
+    data: string;
+} | {
+    type: 'error';
+    data: {
+        message: string;
+        stack: string;
+    };
+};
+export declare function sendMessageToClient(client: "browser-console" | "dev-tools" | undefined, payload: DevServerMessage): void;

package/dist/esnext/utilities/devtools.js

@@ -0,0 +1,11 @@
+export function sendMessageToClient(client = 'browser-console', payload) {
+    // @ts-ignore
+    const devServer = globalThis.__viteDevServer;
+    if (devServer) {
+        devServer.ws.send({
+            type: 'custom',
+            event: `hydrogen-${client}`,
+            data: payload,
+        });
+    }
+}

package/dist/esnext/utilities/empty-hydrogen-config.d.ts

@@ -0,0 +1,2 @@
+declare const _default: {};
+export default _default;

package/dist/esnext/utilities/empty-hydrogen-config.js

@@ -0,0 +1,2 @@
+// Hydrogen config fallback when not found in filesystem.
+export default {};

package/dist/esnext/utilities/error.d.ts

@@ -0,0 +1 @@
+export declare function getErrorMarkup(error: Error): string;

package/dist/esnext/utilities/error.js

@@ -0,0 +1,6 @@
+export function getErrorMarkup(error) {
+    return `<script type="module">
+    import {ErrorOverlay} from '/@vite/client';
+    document.body.appendChild(new ErrorOverlay(${JSON.stringify(error, Object.getOwnPropertyNames(error)).replace(/</g, '\\u003c')}));
+</script>`;
+}

package/dist/esnext/utilities/fetch.d.ts

@@ -0,0 +1,9 @@
+declare type FetchInit = {
+    body?: string;
+    method?: string;
+    headers?: Record<string, string>;
+};
+export declare function fetchBuilder<T>(url: string, options?: FetchInit): () => Promise<T>;
+export declare function graphqlRequestBody(query: string, variables?: Record<string, any>): string;
+export declare function decodeShopifyId(id: string): string;
+export {};

package/dist/esnext/utilities/fetch.js

@@ -0,0 +1,31 @@
+import { LIB_VERSION } from '../version';
+const defaultHeaders = {
+    'content-type': 'application/json',
+    'user-agent': `Hydrogen ${LIB_VERSION}`,
+};
+export function fetchBuilder(url, options = {}) {
+    const requestInit = {
+        ...options,
+        headers: { ...defaultHeaders, ...options.headers },
+    };
+    return async () => {
+        const response = await fetch(url, requestInit);
+        if (!response.ok) {
+            throw response;
+        }
+        const data = await response.json();
+        return data;
+    };
+}
+export function graphqlRequestBody(query, variables) {
+    return JSON.stringify({
+        query,
+        variables,
+    });
+}
+export function decodeShopifyId(id) {
+    if (!id.startsWith('gid://')) {
+        throw new Error('invalid Shopify ID');
+    }
+    return id;
+}

package/dist/esnext/utilities/flattenConnection/flattenConnection.d.ts

@@ -0,0 +1,7 @@
+import type { GraphQLConnection } from '../../types';
+import type { PartialDeep } from 'type-fest';
+/**
+ * The `flattenConnection` utility transforms a connection object from the Storefront API (for example, [Product-related connections](https://shopify.dev/api/storefront/reference/products/product)) into a flat array of nodes.
+ * The utility works with either `nodes` or `edges.node`.
+ */
+export declare function flattenConnection<T>(connection: PartialDeep<GraphQLConnection<T>>): PartialDeep<T>[];

package/dist/esnext/utilities/flattenConnection/flattenConnection.js

@@ -0,0 +1,18 @@
+/**
+ * The `flattenConnection` utility transforms a connection object from the Storefront API (for example, [Product-related connections](https://shopify.dev/api/storefront/reference/products/product)) into a flat array of nodes.
+ * The utility works with either `nodes` or `edges.node`.
+ */
+export function flattenConnection(connection) {
+    if (connection.nodes) {
+        return connection.nodes;
+    }
+    if (connection.edges) {
+        return connection.edges.map((edge) => {
+            if (!edge?.node) {
+                throw new Error('Connection edges must contain nodes');
+            }
+            return edge.node;
+        });
+    }
+    return [];
+}

package/dist/esnext/utilities/flattenConnection/index.d.ts

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

package/dist/esnext/utilities/flattenConnection/index.js

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

package/dist/esnext/utilities/graphql-tag.d.ts

@@ -0,0 +1 @@
+export declare const gql: (s: TemplateStringsArray, ...args: any[]) => string;

package/dist/esnext/utilities/graphql-tag.js

@@ -0,0 +1,6 @@
+export const gql = (s, ...args) => s
+    .map((ss, i) => `${ss}${args[i] || ''}`)
+    .join('')
+    .replace(/\s+#.*$/gm, '') // Remove GQL comments
+    .replace(/\s+/gm, ' ') // Minify spaces
+    .trim();

package/dist/esnext/utilities/graphql-tracker.d.ts

@@ -0,0 +1,17 @@
+import type { ASTNode } from 'graphql';
+export declare const TIMEOUT_MS = 2000;
+declare type TrackerParams = {
+    query: ASTNode | string;
+    data: {
+        data: unknown;
+    };
+    onUnusedData?: (params: {
+        queryName: string;
+        properties: string[];
+    }) => void;
+};
+export declare function injectGraphQLTracker({ query, data, onUnusedData, }: TrackerParams): (check?: (params: {
+    queryName: string;
+    properties: string[];
+}) => void) => void;
+export {};