@shopify/hydrogen 0.0.0-experimental-20220526194818

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

@@ -0,0 +1,24 @@
+import type { Writable } from 'stream';
+export declare const rscRenderToReadableStream: (App: JSX.Element) => ReadableStream<Uint8Array>;
+export declare const createFromReadableStream: (rs: ReadableStream<Uint8Array>) => {
+    readRoot: () => JSX.Element;
+};
+declare type StreamOptions = {
+    nonce?: string;
+    bootstrapScripts?: string[];
+    bootstrapModules?: string[];
+    onError?: (error: Error) => void;
+};
+export declare const ssrRenderToPipeableStream: (App: JSX.Element, options: StreamOptions & {
+    onAllReady?: (() => void) | undefined;
+    onShellReady?: (() => void) | undefined;
+    onShellError?: ((error: Error) => void) | undefined;
+}) => {
+    pipe: Writable['pipe'];
+};
+export declare const ssrRenderToReadableStream: (App: JSX.Element, options: StreamOptions) => Promise<ReadableStream<Uint8Array> & {
+    allReady: Promise<void>;
+}>;
+export declare function isStreamingSupported(): Promise<boolean>;
+export declare function bufferReadableStream(reader: ReadableStreamDefaultReader, cb?: (chunk: string) => void): Promise<string>;
+export {};

package/dist/esnext/streaming.server.js

@@ -0,0 +1,33 @@
+import { 
+// @ts-ignore
+renderToPipeableStream as _ssrRenderToPipeableStream, // Only available in Node context
+// @ts-ignore
+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 const ssrRenderToPipeableStream = _ssrRenderToPipeableStream;
+export const ssrRenderToReadableStream = _ssrRenderToReadableStream;
+export async function isStreamingSupported() {
+    var _a, _b;
+    return Boolean((_b = (_a = globalThis.Oxygen) === null || _a === void 0 ? void 0 : _a.env) === null || _b === void 0 ? void 0 : _b.HYDROGEN_ENABLE_WORKER_STREAMING);
+}
+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

@@ -0,0 +1,98 @@
+/// <reference types="node" />
+import type { ServerResponse } from 'http';
+import type { Logger } from './utilities/log/log';
+import type { ServerComponentRequest } from './framework/Hydration/ServerComponentRequest.server';
+import type { ServerComponentResponse } from './framework/Hydration/ServerComponentResponse.server';
+import type { Metafield, ProductVariant, Product, MediaImage } from './storefront-api-types';
+import type { SessionStorageAdapter } from './foundation/session/session';
+declare type CommonOptions = {
+    App: any;
+    routes?: ImportGlobEagerOutput;
+    request: ServerComponentRequest;
+    componentResponse: ServerComponentResponse;
+    log: Logger;
+    dev?: boolean;
+};
+export declare type RendererOptions = CommonOptions & {
+    template: string;
+    nonce?: string;
+};
+export declare type StreamerOptions = CommonOptions & {
+    response?: ServerResponse;
+    template: string;
+    nonce?: string;
+};
+export declare type HydratorOptions = CommonOptions & {
+    response?: ServerResponse;
+    isStreamable: boolean;
+};
+export declare type ShopifyConfig = {
+    defaultLocale?: string;
+    storeDomain: string;
+    storefrontToken: string;
+    storefrontApiVersion: string;
+};
+export declare type Hook = (params: {
+    url: URL;
+} & Record<string, any>) => any | Promise<any>;
+export declare type ImportGlobEagerOutput = Record<string, Record<'default' | 'api', any>>;
+export declare type HydrogenConfigRoutes = {
+    files?: ImportGlobEagerOutput;
+    basePath?: string;
+    dirPrefix?: string;
+};
+declare type ConfigFetcher<T> = (request: ServerComponentRequest) => T | Promise<T>;
+export declare type ShopifyConfigFetcher = ConfigFetcher<ShopifyConfig>;
+export declare type ServerAnalyticsConnector = {
+    request: (request: Request, data?: any, contentType?: 'json' | 'text') => void;
+};
+export declare type HydrogenConfig = {
+    routes?: HydrogenConfigRoutes | ImportGlobEagerOutput;
+    shopify?: ShopifyConfig | ShopifyConfigFetcher;
+    serverAnalyticsConnectors?: Array<ServerAnalyticsConnector>;
+    session?: (log: Logger) => SessionStorageAdapter;
+    enableStreaming?: (request: ServerComponentRequest) => boolean;
+};
+export declare type ClientHandlerConfig = {
+    /** 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;
+    showDevTools?: boolean;
+};
+export declare type ClientHandler = (App: React.ElementType, config: ClientHandlerConfig) => Promise<void>;
+export interface GraphQLConnection<T> {
+    edges?: {
+        node: T;
+    }[];
+}
+export declare type ParsedMetafield = Omit<Partial<Metafield>, 'value' | 'reference'> & {
+    value?: string | number | boolean | Record<any, string> | Date | Rating | Measurement;
+    reference?: MediaImage | ProductVariant | Product | null;
+};
+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 interface HydrogenVitePluginOptions {
+    devCache?: boolean;
+    purgeQueryCacheOnBuild?: boolean;
+    configPath?: string;
+}
+export declare type PreloadOptions = boolean | string;
+export {};

package/dist/esnext/types.js

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

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

@@ -0,0 +1,37 @@
+import { HydrogenConfig, HydrogenConfigRoutes } from '../types';
+import type { ServerComponentRequest } from '../framework/Hydration/ServerComponentRequest.server';
+import { SessionApi, SessionStorageAdapter } from '../foundation/session/session';
+declare type RouteParams = Record<string, string>;
+declare type RequestOptions = {
+    params: RouteParams;
+    queryShop: (args: QueryShopArgs) => Promise<any>;
+    session: SessionApi | null;
+};
+declare type ResourceGetter = (request: Request, 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(rawRoutes: HydrogenConfigRoutes): 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: ServerComponentRequest, route: ApiRouteMatch, shopifyConfig: HydrogenConfig['shopify'], session?: SessionStorageAdapter): Promise<Response | Request>;
+export {};

package/dist/esnext/utilities/apiRoutes.js

@@ -0,0 +1,156 @@
+import { matchPath } from './matchPath';
+import { getLoggerWithContext, logServerResponse } from '../utilities/log/';
+import { fetchBuilder, graphqlRequestBody } from './fetch';
+import { findRoutePrefix } from './findRoutePrefix';
+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(rawRoutes) {
+    var _a, _b;
+    const routes = ((_a = rawRoutes.files) !== null && _a !== void 0 ? _a : rawRoutes);
+    const topLevelPath = ((_b = rawRoutes.basePath) !== null && _b !== void 0 ? _b : '*');
+    const dirPrefix = rawRoutes.dirPrefix;
+    if (!routes || memoizedRawRoutes === routes)
+        return memoizedApiRoutes;
+    const topLevelPrefix = topLevelPath.replace('*', '').replace(/\/$/, '');
+    const keys = Object.keys(routes);
+    const commonRoutePrefix = dirPrefix !== null && dirPrefix !== void 0 ? dirPrefix : findRoutePrefix(keys);
+    const apiRoutes = keys
+        .filter((key) => routes[key].api)
+        .map((key) => {
+        const path = extractPathFromRoutesKey(key, commonRoutePrefix);
+        /**
+         * 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, shopifyConfig, session) {
+    var _a;
+    let response;
+    const log = getLoggerWithContext(request);
+    let cookieToSet = '';
+    try {
+        response = await route.resource(request, {
+            params: route.params,
+            queryShop: queryShopBuilder(shopifyConfig, request),
+            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 });
+    }
+    logServerResponse('api', request, (_a = response.status) !== null && _a !== void 0 ? _a : 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(message: DevServerMessage): void;

package/dist/esnext/utilities/devtools.js

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

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/findRoutePrefix.d.ts

@@ -0,0 +1 @@
+export declare function findRoutePrefix([first, ...rest]: string[]): string | RegExp;

package/dist/esnext/utilities/findRoutePrefix.js

@@ -0,0 +1,17 @@
+const DEFAULT_ROUTE_PREFIX = /^\.(\/src)?\/routes/;
+export function findRoutePrefix([first, ...rest]) {
+    if (!(first === null || first === void 0 ? void 0 : first.startsWith('./')))
+        return '';
+    let commonPrefix = '.';
+    if (rest.length > 0) {
+        const parts = first.split('/');
+        parts.pop(); // Last part is always different and has extension
+        for (const string of rest) {
+            const tmp = string.split('/');
+            const diffIndex = parts.findIndex((part, index) => part !== tmp[index]);
+            diffIndex >= 0 && parts.splice(diffIndex);
+        }
+        commonPrefix = parts.join('/');
+    }
+    return commonPrefix === '.' ? DEFAULT_ROUTE_PREFIX : commonPrefix;
+}

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

@@ -0,0 +1,6 @@
+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.
+ */
+export declare function flattenConnection<T>(connection: PartialDeep<GraphQLConnection<T>>): PartialDeep<T>[];

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

@@ -0,0 +1,11 @@
+/**
+ * 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.
+ */
+export function flattenConnection(connection) {
+    return (connection.edges || []).map((edge) => {
+        if (!(edge === null || edge === void 0 ? void 0 : edge.node)) {
+            throw new Error('Connection edges must contain nodes');
+        }
+        return edge.node;
+    });
+}

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