@shopify/hydrogen 0.0.0-experimental-20220526194818

package/dist/node/framework/Hydration/ServerComponentRequest.server.d.ts

@@ -0,0 +1,58 @@
+import type { ShopifyContextValue } from '../../foundation/ShopifyProvider/types';
+import type { QueryCacheControlHeaders } from '../../utilities/log/log-cache-header';
+import type { QueryTiming } from '../../utilities/log/log-query-timeline';
+import type { HydrogenConfig, PreloadOptions, QueryKey } from '../../types';
+import { HelmetData as HeadData } from 'react-helmet-async';
+import { SessionSyncApi } from '../../foundation/session/session';
+export declare type PreloadQueryEntry = {
+    key: QueryKey;
+    fetcher: () => Promise<unknown>;
+    preload?: PreloadOptions;
+};
+export declare type PreloadQueriesByURL = Map<string, PreloadQueryEntry>;
+export declare type AllPreloadQueries = Map<string, PreloadQueriesByURL>;
+export declare type RouterContextData = {
+    routeRendered: boolean;
+    serverProps: Record<string, any>;
+    routeParams: Record<string, string>;
+};
+/**
+ * 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>;
+    id: string;
+    time: number;
+    normalizedUrl: string;
+    ctx: {
+        cache: Map<string, any>;
+        head: HeadData;
+        hydrogenConfig?: HydrogenConfig;
+        shopifyConfig?: ShopifyContextValue;
+        queryCacheControl: Array<QueryCacheControlHeaders>;
+        queryTimings: Array<QueryTiming>;
+        preloadQueries: PreloadQueriesByURL;
+        analyticsData: any;
+        router: RouterContextData;
+        buyerIpHeader?: string;
+        session?: SessionSyncApi;
+        [key: string]: any;
+    };
+    constructor(input: any);
+    constructor(input: RequestInfo, init?: RequestInit);
+    private parseCookies;
+    isRscRequest(): boolean;
+    savePreloadQuery(query: PreloadQueryEntry): void;
+    getPreloadQueries(): PreloadQueriesByURL | undefined;
+    savePreloadQueries(): void;
+    /**
+     * Buyer IP varies by hosting provider and runtime. The developer should provide this
+     * as an argument to the `handleRequest` function for their runtime.
+     * Defaults to `x-forwarded-for` header value.
+     */
+    getBuyerIp(): string | null;
+}

package/dist/node/framework/Hydration/ServerComponentRequest.server.js

@@ -0,0 +1,150 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ServerComponentRequest = void 0;
+const timing_1 = require("../../utilities/timing");
+const hash_1 = require("../../utilities/hash");
+const react_helmet_async_1 = require("react-helmet-async");
+const constants_1 = require("../../constants");
+const parse_1 = require("../../utilities/parse");
+let reqCounter = 0; // For debugging
+const generateId = typeof crypto !== 'undefined' &&
+    // @ts-ignore
+    !!crypto.randomUUID
+    ? // @ts-ignore
+        () => crypto.randomUUID()
+    : () => `req${++reqCounter}`;
+// Stores queries by url or '*'
+const preloadCache = new Map();
+const PRELOAD_ALL = '*';
+/**
+ * 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.
+ */
+class ServerComponentRequest extends Request {
+    constructor(input, init) {
+        if (input instanceof Request) {
+            super(input, init);
+        }
+        else {
+            super(getUrlFromNodeRequest(input), getInitFromNodeRequest(input));
+        }
+        this.time = (0, timing_1.getTime)();
+        this.id = generateId();
+        this.normalizedUrl = this.isRscRequest()
+            ? normalizeUrl(this.url)
+            : this.url;
+        this.ctx = {
+            cache: new Map(),
+            head: new react_helmet_async_1.HelmetData({}),
+            router: {
+                routeRendered: false,
+                serverProps: {},
+                routeParams: {},
+            },
+            queryCacheControl: [],
+            queryTimings: [],
+            analyticsData: {
+                url: this.url,
+                normalizedRscUrl: this.normalizedUrl,
+            },
+            preloadQueries: new Map(),
+        };
+        this.cookies = this.parseCookies();
+    }
+    parseCookies() {
+        const cookieString = this.headers.get('cookie') || '';
+        return new Map(cookieString
+            .split(';')
+            .map((chunk) => chunk.trim())
+            .filter((chunk) => chunk !== '')
+            .map((chunk) => chunk.split(/=(.+)/)));
+    }
+    isRscRequest() {
+        const url = new URL(this.url);
+        return url.pathname === constants_1.RSC_PATHNAME;
+    }
+    savePreloadQuery(query) {
+        if (typeof query.preload === 'string' && query.preload === PRELOAD_ALL) {
+            saveToPreloadAllPreload(query);
+        }
+        else if (query.preload) {
+            this.ctx.preloadQueries.set((0, hash_1.hashKey)(query.key), query);
+        }
+    }
+    getPreloadQueries() {
+        if (preloadCache.has(this.normalizedUrl)) {
+            const combinedPreloadQueries = new Map();
+            const urlPreloadCache = preloadCache.get(this.normalizedUrl);
+            mergeMapEntries(combinedPreloadQueries, urlPreloadCache);
+            mergeMapEntries(combinedPreloadQueries, preloadCache.get(PRELOAD_ALL));
+            return combinedPreloadQueries;
+        }
+        else if (preloadCache.has(PRELOAD_ALL)) {
+            return preloadCache.get(PRELOAD_ALL);
+        }
+    }
+    savePreloadQueries() {
+        preloadCache.set(this.normalizedUrl, this.ctx.preloadQueries);
+    }
+    /**
+     * Buyer IP varies by hosting provider and runtime. The developer should provide this
+     * as an argument to the `handleRequest` function for their runtime.
+     * Defaults to `x-forwarded-for` header value.
+     */
+    getBuyerIp() {
+        var _a;
+        return this.headers.get((_a = this.ctx.buyerIpHeader) !== null && _a !== void 0 ? _a : 'x-forwarded-for');
+    }
+}
+exports.ServerComponentRequest = ServerComponentRequest;
+function mergeMapEntries(map1, map2) {
+    map2 && map2.forEach((v, k) => map1.set(k, v));
+}
+function saveToPreloadAllPreload(query) {
+    let setCache = preloadCache.get(PRELOAD_ALL);
+    if (!setCache) {
+        setCache = new Map();
+    }
+    setCache === null || setCache === void 0 ? void 0 : setCache.set((0, hash_1.hashKey)(query.key), query);
+    preloadCache.set(PRELOAD_ALL, setCache);
+}
+/**
+ * @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;
+    const url = (_a = request.originalUrl) !== null && _a !== void 0 ? _a : request.url;
+    if (url && !url.startsWith('/'))
+        return url;
+    // 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 + url}`).toString();
+}
+function getInitFromNodeRequest(request) {
+    const init = {
+        headers: new Headers(request.headers),
+        method: request.method,
+        body: request.method !== 'GET' && request.method !== 'HEAD'
+            ? request.body
+            : undefined,
+    };
+    const remoteAddress = request.socket.remoteAddress;
+    if (!init.headers.has('x-forwarded-for') && remoteAddress) {
+        init.headers.set('x-forwarded-for', remoteAddress);
+    }
+    return init;
+}
+function normalizeUrl(rawUrl) {
+    var _a, _b;
+    const url = new URL(rawUrl);
+    const state = (0, parse_1.parseJSON)((_a = url.searchParams.get('state')) !== null && _a !== void 0 ? _a : '');
+    const normalizedUrl = new URL((_b = state === null || state === void 0 ? void 0 : state.pathname) !== null && _b !== void 0 ? _b : '', url.origin);
+    normalizedUrl.search = state === null || state === void 0 ? void 0 : state.search;
+    return normalizedUrl.toString();
+}

package/dist/node/framework/Hydration/ServerComponentResponse.server.d.ts

@@ -0,0 +1,26 @@
+import type { CachingStrategy } from '../../types';
+import React from 'react';
+export declare class ServerComponentResponse extends Response {
+    private wait;
+    private cacheOptions;
+    customStatus?: {
+        code?: number;
+        text?: string;
+    };
+    /**
+     * Buffer the current response until all queries have resolved,
+     * and prevent it from streaming back early.
+     */
+    doNotStream(): void;
+    canStream(): boolean;
+    cache(options: CachingStrategy): void;
+    get cacheControlHeader(): string;
+    writeHead({ status, statusText, headers, }?: {
+        status?: number;
+        statusText?: string;
+        headers?: Record<string, any>;
+    }): void;
+    redirect(location: string, status?: number): React.FunctionComponentElement<{
+        to: string;
+    }>;
+}

package/dist/node/framework/Hydration/ServerComponentResponse.server.js

@@ -0,0 +1,49 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ServerComponentResponse = void 0;
+const CachingStrategy_1 = require("../CachingStrategy");
+const Redirect_client_1 = __importDefault(require("../../foundation/Redirect/Redirect.client"));
+const react_1 = __importDefault(require("react"));
+class ServerComponentResponse extends Response {
+    constructor() {
+        super(...arguments);
+        this.wait = false;
+        this.cacheOptions = (0, CachingStrategy_1.CacheSeconds)();
+    }
+    /**
+     * Buffer the current response until all queries have resolved,
+     * and prevent it from streaming back early.
+     */
+    doNotStream() {
+        this.wait = true;
+    }
+    canStream() {
+        return !this.wait;
+    }
+    cache(options) {
+        this.cacheOptions = options;
+    }
+    get cacheControlHeader() {
+        return (0, CachingStrategy_1.generateCacheControlHeader)(this.cacheOptions);
+    }
+    writeHead({ status, statusText, headers, } = {}) {
+        if (status || statusText) {
+            this.customStatus = { code: status, text: statusText };
+        }
+        if (headers) {
+            for (const [key, value] of Object.entries(headers)) {
+                this.headers.set(key, value);
+            }
+        }
+    }
+    redirect(location, status = 307) {
+        // writeHead is used for SSR, so that the server responds with a redirect
+        this.writeHead({ status, headers: { location } });
+        // in the case of an RSC request, instead render a client component that will redirect
+        return react_1.default.createElement(Redirect_client_1.default, { to: location });
+    }
+}
+exports.ServerComponentResponse = ServerComponentResponse;

package/dist/node/framework/Hydration/rsc.d.ts

@@ -0,0 +1,8 @@
+/**
+ * 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 useRefresh(): void;

package/dist/node/framework/Hydration/rsc.js

@@ -0,0 +1,103 @@
+"use strict";
+// TODO should we move this file to src/foundation
+// so it is considered ESM instead of CJS?
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useRefresh = exports.useServerResponse = void 0;
+const react_server_dom_vite_1 = require("@shopify/hydrogen/vendor/react-server-dom-vite");
+const constants_1 = require("../../constants");
+const utilities_1 = require("../../utilities");
+let rscReader;
+// Hydrate an SSR response from <meta> tags placed in the DOM.
+const flightChunks = [];
+const FLIGHT_ATTRIBUTE = 'data-flight';
+function addElementToFlightChunks(el) {
+    const chunk = el.getAttribute(FLIGHT_ATTRIBUTE);
+    if (chunk) {
+        flightChunks.push((0, utilities_1.htmlDecode)(chunk));
+    }
+}
+// Get initial payload
+document
+    .querySelectorAll('[' + FLIGHT_ATTRIBUTE + ']')
+    .forEach(addElementToFlightChunks);
+// Create a mutation observer on the document to detect when new
+// <meta data-flight> tags are added, and add them to the array.
+const observer = new MutationObserver((mutations) => {
+    mutations.forEach((mutation) => {
+        mutation.addedNodes.forEach((node) => {
+            if (node instanceof HTMLElement &&
+                node.tagName === 'META' &&
+                node.hasAttribute(FLIGHT_ATTRIBUTE)) {
+                addElementToFlightChunks(node);
+            }
+        });
+    });
+});
+observer.observe(document.documentElement, {
+    childList: true,
+    subtree: true,
+});
+if (flightChunks.length > 0) {
+    const contentLoaded = new Promise((resolve) => document.addEventListener('DOMContentLoaded', resolve));
+    try {
+        rscReader = new ReadableStream({
+            start(controller) {
+                const encoder = new TextEncoder();
+                const write = (chunk) => {
+                    controller.enqueue(encoder.encode(chunk));
+                    return 0;
+                };
+                flightChunks.forEach(write);
+                flightChunks.push = write;
+                contentLoaded.then(() => {
+                    controller.close();
+                    observer.disconnect();
+                });
+            },
+        });
+    }
+    catch (_) {
+        // Old browser, will try a new hydration request later
+    }
+}
+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.
+ */
+function useServerResponse(state) {
+    const key = JSON.stringify(state);
+    let response = cache.get(key);
+    if (response) {
+        return response;
+    }
+    if (rscReader) {
+        // The flight response was inlined during SSR, use it directly.
+        response = (0, react_server_dom_vite_1.createFromReadableStream)(rscReader);
+        rscReader = null;
+    }
+    else {
+        if (
+        /* @ts-ignore */
+        window.BOOMR &&
+            /* @ts-ignore */
+            window.BOOMR.plugins &&
+            /* @ts-ignore */
+            window.BOOMR.plugins.Hydrogen) {
+            /* @ts-ignore */
+            window.BOOMR.plugins.Hydrogen.trackSubPageLoadPerformance();
+        }
+        // Request a new flight response.
+        response = (0, react_server_dom_vite_1.createFromFetch)(fetch(`${constants_1.RSC_PATHNAME}?state=` + encodeURIComponent(key)));
+    }
+    cache.clear();
+    cache.set(key, response);
+    return response;
+}
+exports.useServerResponse = useServerResponse;
+function useRefresh() {
+    cache.clear();
+}
+exports.useRefresh = useRefresh;

package/dist/node/framework/cache/in-memory.d.ts

@@ -0,0 +1,12 @@
+/**
+ * This is an in-memory implementation of `Cache` that *barely*
+ * works and is only meant to be used during development.
+ */
+export declare class InMemoryCache {
+    private store;
+    constructor();
+    put(request: Request, response: Response): void;
+    match(request: Request): Response | undefined;
+    delete(request: Request): void;
+    keys(request?: Request): Promise<Request[]>;
+}

package/dist/node/framework/cache/in-memory.js

@@ -0,0 +1,56 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.InMemoryCache = void 0;
+/**
+ * This is an in-memory implementation of `Cache` that *barely*
+ * works and is only meant to be used during development.
+ */
+class InMemoryCache {
+    constructor() {
+        this.store = new Map();
+    }
+    put(request, response) {
+        this.store.set(request.url, {
+            value: response,
+            date: new Date(),
+        });
+    }
+    match(request) {
+        var _a, _b;
+        const match = this.store.get(request.url);
+        if (!match) {
+            return;
+        }
+        const { value, date } = match;
+        const cacheControl = value.headers.get('cache-control') || '';
+        const maxAge = parseInt(((_a = cacheControl.match(/max-age=(\d+)/)) === null || _a === void 0 ? void 0 : _a[1]) || '0', 10);
+        const swr = parseInt(((_b = cacheControl.match(/stale-while-revalidate=(\d+)/)) === null || _b === void 0 ? void 0 : _b[1]) || '0', 10);
+        const age = (new Date().valueOf() - date.valueOf()) / 1000;
+        const isMiss = age > maxAge + swr;
+        if (isMiss) {
+            this.store.delete(request.url);
+            return;
+        }
+        const isStale = age > maxAge;
+        const headers = new Headers(value.headers);
+        headers.set('cache', isStale ? 'STALE' : 'HIT');
+        headers.set('date', date.toUTCString());
+        const response = new Response(value.body, {
+            headers,
+        });
+        return response;
+    }
+    delete(request) {
+        this.store.delete(request.url);
+    }
+    keys(request) {
+        const cacheKeys = [];
+        for (const url of this.store.keys()) {
+            if (!request || request.url === url) {
+                cacheKeys.push(new Request(url));
+            }
+        }
+        return Promise.resolve(cacheKeys);
+    }
+}
+exports.InMemoryCache = InMemoryCache;

package/dist/node/framework/cache-sub-request.d.ts

@@ -0,0 +1,17 @@
+import type { QueryKey, CachingStrategy } from '../types';
+export declare function generateSubRequestCacheControlHeader(userCacheOptions?: CachingStrategy): string;
+/**
+ * Get an item from the cache. If a match is found, returns a tuple
+ * containing the `JSON.parse` version of the response as well
+ * as the response itself so it can be checked for staleness.
+ */
+export declare function getItemFromCache(key: QueryKey): Promise<undefined | [any, Response]>;
+/**
+ * Put an item into the cache.
+ */
+export declare function setItemInCache(key: QueryKey, value: any, userCacheOptions?: CachingStrategy): Promise<void>;
+export declare function deleteItemFromCache(key: QueryKey): Promise<void>;
+/**
+ * Manually check the response to see if it's stale.
+ */
+export declare function isStale(key: QueryKey, response: Response): boolean;

package/dist/node/framework/cache-sub-request.js

@@ -0,0 +1,95 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.isStale = exports.deleteItemFromCache = exports.setItemInCache = exports.getItemFromCache = exports.generateSubRequestCacheControlHeader = void 0;
+const runtime_1 = require("./runtime");
+const hash_1 = require("../utilities/hash");
+const CacheApi = __importStar(require("./cache"));
+const CachingStrategy_1 = require("./CachingStrategy");
+/**
+ * Wrapper Cache functions for sub queries
+ */
+/**
+ * Cache API is weird. We just need a full URL, so we make one up.
+ */
+function getKeyUrl(key) {
+    return `https://shopify.dev/?${key}`;
+}
+function getCacheOption(userCacheOptions) {
+    return userCacheOptions || (0, CachingStrategy_1.CacheSeconds)();
+}
+function generateSubRequestCacheControlHeader(userCacheOptions) {
+    return CacheApi.generateDefaultCacheControlHeader(getCacheOption(userCacheOptions));
+}
+exports.generateSubRequestCacheControlHeader = generateSubRequestCacheControlHeader;
+/**
+ * Get an item from the cache. If a match is found, returns a tuple
+ * containing the `JSON.parse` version of the response as well
+ * as the response itself so it can be checked for staleness.
+ */
+async function getItemFromCache(key) {
+    const cache = (0, runtime_1.getCache)();
+    if (!cache) {
+        return;
+    }
+    const url = getKeyUrl((0, hash_1.hashKey)(key));
+    const request = new Request(url);
+    const response = await CacheApi.getItemFromCache(request);
+    if (!response) {
+        return;
+    }
+    return [await response.json(), response];
+}
+exports.getItemFromCache = getItemFromCache;
+/**
+ * Put an item into the cache.
+ */
+async function setItemInCache(key, value, userCacheOptions) {
+    const cache = (0, runtime_1.getCache)();
+    if (!cache) {
+        return;
+    }
+    const url = getKeyUrl((0, hash_1.hashKey)(key));
+    const request = new Request(url);
+    const response = new Response(JSON.stringify(value));
+    await CacheApi.setItemInCache(request, response, getCacheOption(userCacheOptions));
+}
+exports.setItemInCache = setItemInCache;
+async function deleteItemFromCache(key) {
+    const cache = (0, runtime_1.getCache)();
+    if (!cache)
+        return;
+    const url = getKeyUrl((0, hash_1.hashKey)(key));
+    const request = new Request(url);
+    await CacheApi.deleteItemFromCache(request);
+}
+exports.deleteItemFromCache = deleteItemFromCache;
+/**
+ * Manually check the response to see if it's stale.
+ */
+function isStale(key, response) {
+    return CacheApi.isStale(new Request(getKeyUrl((0, hash_1.hashKey)(key))), response);
+}
+exports.isStale = isStale;

package/dist/node/framework/cache.d.ts

@@ -0,0 +1,17 @@
+import type { CachingStrategy } from '../types';
+export declare function generateDefaultCacheControlHeader(userCacheOptions?: CachingStrategy): string;
+/**
+ * Get an item from the cache. If a match is found, returns a tuple
+ * containing the `JSON.parse` version of the response as well
+ * as the response itself so it can be checked for staleness.
+ */
+export declare function getItemFromCache(request: Request): Promise<Response | undefined>;
+/**
+ * Put an item into the cache.
+ */
+export declare function setItemInCache(request: Request, response: Response, userCacheOptions: CachingStrategy): Promise<void>;
+export declare function deleteItemFromCache(request: Request): Promise<void>;
+/**
+ * Manually check the response to see if it's stale.
+ */
+export declare function isStale(request: Request, response: Response): boolean;