@shopify/hydrogen 0.0.0-experimental-20220526194818

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

@@ -0,0 +1,146 @@
+import { getTime } from '../../utilities/timing';
+import { hashKey } from '../../utilities/hash';
+import { HelmetData as HeadData } from 'react-helmet-async';
+import { RSC_PATHNAME } from '../../constants';
+import { parseJSON } from '../../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.
+ */
+export class ServerComponentRequest extends Request {
+    constructor(input, init) {
+        if (input instanceof Request) {
+            super(input, init);
+        }
+        else {
+            super(getUrlFromNodeRequest(input), getInitFromNodeRequest(input));
+        }
+        this.time = getTime();
+        this.id = generateId();
+        this.normalizedUrl = this.isRscRequest()
+            ? normalizeUrl(this.url)
+            : this.url;
+        this.ctx = {
+            cache: new Map(),
+            head: new HeadData({}),
+            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 === RSC_PATHNAME;
+    }
+    savePreloadQuery(query) {
+        if (typeof query.preload === 'string' && query.preload === PRELOAD_ALL) {
+            saveToPreloadAllPreload(query);
+        }
+        else if (query.preload) {
+            this.ctx.preloadQueries.set(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');
+    }
+}
+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(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 = 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/esnext/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/esnext/framework/Hydration/ServerComponentResponse.server.js

@@ -0,0 +1,42 @@
+import { CacheSeconds, generateCacheControlHeader } from '../CachingStrategy';
+import Redirect from '../../foundation/Redirect/Redirect.client';
+import React from 'react';
+export class ServerComponentResponse extends Response {
+    constructor() {
+        super(...arguments);
+        this.wait = false;
+        this.cacheOptions = 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 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.createElement(Redirect, { to: location });
+    }
+}

package/dist/esnext/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/esnext/framework/Hydration/rsc.js

@@ -0,0 +1,100 @@
+// TODO should we move this file to src/foundation
+// so it is considered ESM instead of CJS?
+import { createFromFetch, createFromReadableStream,
+// @ts-ignore
+ } from '@shopify/hydrogen/vendor/react-server-dom-vite';
+import { RSC_PATHNAME } from '../../constants';
+import { htmlDecode } from '../../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(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.
+ */
+export 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 = 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 = createFromFetch(fetch(`${RSC_PATHNAME}?state=` + encodeURIComponent(key)));
+    }
+    cache.clear();
+    cache.set(key, response);
+    return response;
+}
+export function useRefresh() {
+    cache.clear();
+}

package/dist/esnext/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/esnext/framework/cache/in-memory.js

@@ -0,0 +1,52 @@
+/**
+ * This is an in-memory implementation of `Cache` that *barely*
+ * works and is only meant to be used during development.
+ */
+export 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);
+    }
+}

package/dist/esnext/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/esnext/framework/cache-sub-request.js

@@ -0,0 +1,64 @@
+import { getCache } from './runtime';
+import { hashKey } from '../utilities/hash';
+import * as CacheApi from './cache';
+import { CacheSeconds } from './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 || CacheSeconds();
+}
+export function generateSubRequestCacheControlHeader(userCacheOptions) {
+    return CacheApi.generateDefaultCacheControlHeader(getCacheOption(userCacheOptions));
+}
+/**
+ * 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 async function getItemFromCache(key) {
+    const cache = getCache();
+    if (!cache) {
+        return;
+    }
+    const url = getKeyUrl(hashKey(key));
+    const request = new Request(url);
+    const response = await CacheApi.getItemFromCache(request);
+    if (!response) {
+        return;
+    }
+    return [await response.json(), response];
+}
+/**
+ * Put an item into the cache.
+ */
+export async function setItemInCache(key, value, userCacheOptions) {
+    const cache = getCache();
+    if (!cache) {
+        return;
+    }
+    const url = getKeyUrl(hashKey(key));
+    const request = new Request(url);
+    const response = new Response(JSON.stringify(value));
+    await CacheApi.setItemInCache(request, response, getCacheOption(userCacheOptions));
+}
+export async function deleteItemFromCache(key) {
+    const cache = getCache();
+    if (!cache)
+        return;
+    const url = getKeyUrl(hashKey(key));
+    const request = new Request(url);
+    await CacheApi.deleteItemFromCache(request);
+}
+/**
+ * Manually check the response to see if it's stale.
+ */
+export function isStale(key, response) {
+    return CacheApi.isStale(new Request(getKeyUrl(hashKey(key))), response);
+}

package/dist/esnext/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;

package/dist/esnext/framework/cache.js

@@ -0,0 +1,127 @@
+import { getCache } from './runtime';
+import { CacheSeconds, generateCacheControlHeader, } from '../framework/CachingStrategy';
+import { logCacheApiStatus } from '../utilities/log';
+function getCacheControlSetting(userCacheOptions, options) {
+    if (userCacheOptions && options) {
+        return {
+            ...userCacheOptions,
+            ...options,
+        };
+    }
+    else {
+        return userCacheOptions || CacheSeconds();
+    }
+}
+export function generateDefaultCacheControlHeader(userCacheOptions) {
+    return generateCacheControlHeader(getCacheControlSetting(userCacheOptions));
+}
+/**
+ * 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 async function getItemFromCache(request) {
+    const cache = getCache();
+    if (!cache) {
+        return;
+    }
+    const response = await cache.match(request);
+    if (!response) {
+        logCacheApiStatus('MISS', request.url);
+        return;
+    }
+    logCacheApiStatus('HIT', request.url);
+    return response;
+}
+/**
+ * Put an item into the cache.
+ */
+export async function setItemInCache(request, response, userCacheOptions) {
+    const cache = getCache();
+    if (!cache) {
+        return;
+    }
+    /**
+     * We are manually managing staled request by adding this workaround.
+     * Why? cache control header support is dependent on hosting platform
+     *
+     * For example:
+     *
+     * Cloudflare's Cache API does not support `stale-while-revalidate`.
+     * Cloudflare cache control header has a very odd behaviour.
+     * Say we have the following cache control header on a request:
+     *
+     *   public, max-age=15, stale-while-revalidate=30
+     *
+     * When there is a cache.match HIT, the cache control header would become
+     *
+     *   public, max-age=14400, stale-while-revalidate=30
+     *
+     * == `stale-while-revalidate` workaround ==
+     * Update response max-age so that:
+     *
+     *   max-age = max-age + stale-while-revalidate
+     *
+     * For example:
+     *
+     *   public, max-age=1, stale-while-revalidate=9
+     *                    |
+     *                    V
+     *   public, max-age=10, stale-while-revalidate=9
+     *
+     * Store the following information in the response header:
+     *
+     *   cache-put-date   - UTC time string of when this request is PUT into cache
+     *
+     * Note on `cache-put-date`: The `response.headers.get('date')` isn't static. I am
+     * not positive what date this is returning but it is never over 500 ms
+     * after subtracting from the current timestamp.
+     *
+     * `isStale` function will use the above information to test for stale-ness of a cached response
+     */
+    const cacheControl = getCacheControlSetting(userCacheOptions);
+    // The padded cache-control to mimic stale-while-revalidate
+    request.headers.set('cache-control', generateDefaultCacheControlHeader(getCacheControlSetting(cacheControl, {
+        maxAge: (cacheControl.maxAge || 0) + (cacheControl.staleWhileRevalidate || 0),
+    })));
+    // The cache-control we want to set on response
+    const cacheControlString = generateDefaultCacheControlHeader(getCacheControlSetting(cacheControl));
+    // CF will override cache-control, so we need to keep a
+    // non-modified real-cache-control
+    response.headers.set('cache-control', cacheControlString);
+    response.headers.set('real-cache-control', cacheControlString);
+    response.headers.set('cache-put-date', new Date().toUTCString());
+    logCacheApiStatus('PUT', request.url);
+    await cache.put(request, response);
+}
+export async function deleteItemFromCache(request) {
+    const cache = getCache();
+    if (!cache)
+        return;
+    logCacheApiStatus('DELETE', request.url);
+    await cache.delete(request);
+}
+/**
+ * Manually check the response to see if it's stale.
+ */
+export function isStale(request, response) {
+    const responseDate = response.headers.get('cache-put-date');
+    const cacheControl = response.headers.get('real-cache-control');
+    let responseMaxAge = 0;
+    if (cacheControl) {
+        const maxAgeMatch = cacheControl.match(/max-age=(\d*)/);
+        if (maxAgeMatch && maxAgeMatch.length > 1) {
+            responseMaxAge = parseFloat(maxAgeMatch[1]);
+        }
+    }
+    if (!responseDate) {
+        return false;
+    }
+    const ageInMs = new Date().valueOf() - new Date(responseDate).valueOf();
+    const age = ageInMs / 1000;
+    const result = age > responseMaxAge;
+    if (result) {
+        logCacheApiStatus('STALE', request.url);
+    }
+    return result;
+}

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

@@ -0,0 +1,6 @@
+declare type HydrogenConfig = {
+    dev?: boolean;
+};
+export declare function setConfig(config: HydrogenConfig): void;
+export declare function getConfig(): HydrogenConfig;
+export {};

package/dist/esnext/framework/config.js

@@ -0,0 +1,6 @@
+export function setConfig(config) {
+    globalThis.__config = config;
+}
+export function getConfig() {
+    return globalThis.__config || {};
+}

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,38 @@
+export function graphiqlHtml(shop, token, apiVersion) {
+    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>
+`;
+}