@shopify/hydrogen 0.11.1 → 0.13.1

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

@@ -5,17 +5,20 @@ export declare const createFromReadableStream: (rs: ReadableStream<Uint8Array>)
 };
 declare type StreamOptions = {
     nonce?: string;
-    onCompleteShell?: () => void;
-    onCompleteAll?: () => void;
-    onError?: (error: Error) => void;
     bootstrapScripts?: string[];
     bootstrapModules?: string[];
+    onError?: (error: Error) => void;
 };
-export declare const ssrRenderToPipeableStream: (App: JSX.Element, options: StreamOptions) => {
+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) => ReadableStream<Uint8Array>;
-export declare function supportsReadableStream(): boolean;
+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/node/streaming.server.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.bufferReadableStream = exports.isStreamingSupported = exports.supportsReadableStream = exports.ssrRenderToReadableStream = exports.ssrRenderToPipeableStream = exports.createFromReadableStream = exports.rscRenderToReadableStream = void 0;
+exports.bufferReadableStream = exports.isStreamingSupported = exports.ssrRenderToReadableStream = exports.ssrRenderToPipeableStream = exports.createFromReadableStream = exports.rscRenderToReadableStream = void 0;
 const server_1 = require("react-dom/server");
 // @ts-ignore
 const writer_browser_server_1 = require("@shopify/hydrogen/vendor/react-server-dom-vite/writer.browser.server");
@@ -10,35 +10,9 @@ exports.rscRenderToReadableStream = writer_browser_server_1.renderToReadableStre
 exports.createFromReadableStream = react_server_dom_vite_1.createFromReadableStream;
 exports.ssrRenderToPipeableStream = server_1.renderToPipeableStream;
 exports.ssrRenderToReadableStream = server_1.renderToReadableStream;
-function supportsReadableStream() {
-    try {
-        new ReadableStream();
-        return true;
-    }
-    catch (_) {
-        return false;
-    }
-}
-exports.supportsReadableStream = supportsReadableStream;
-let cachedStreamingSupport;
 async function isStreamingSupported() {
-    if (cachedStreamingSupport === undefined) {
-        try {
-            const rs = new ReadableStream({
-                start(controller) {
-                    controller.close();
-                },
-            });
-            // This will throw in CFW until streaming
-            // is supported. It works in Miniflare.
-            await new Response(rs).text();
-            cachedStreamingSupport = true;
-        }
-        catch (_) {
-            cachedStreamingSupport = false;
-        }
-    }
-    return cachedStreamingSupport;
+    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);
 }
 exports.isStreamingSupported = isStreamingSupported;
 async function bufferReadableStream(reader, cb) {

package/dist/node/types.d.ts

@@ -3,10 +3,10 @@ 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, Image, MediaContentType } from './graphql/types/types';
+import type { Metafield, ProductVariant, Product, MediaImage } from './storefront-api-types';
 declare type CommonOptions = {
     App: any;
-    pages?: ImportGlobEagerOutput;
+    routes?: ImportGlobEagerOutput;
     request: ServerComponentRequest;
     componentResponse: ServerComponentResponse;
     log: Logger;
@@ -36,7 +36,7 @@ export declare type Hook = (params: {
 } & Record<string, any>) => any | Promise<any>;
 export declare type ImportGlobEagerOutput = Record<string, Record<'default' | 'api', any>>;
 export declare type ServerHandlerConfig = {
-    pages?: ImportGlobEagerOutput;
+    routes?: ImportGlobEagerOutput;
     shopifyConfig: ShopifyConfig;
 };
 export declare type ClientHandlerConfig = {
@@ -50,21 +50,6 @@ export interface GraphQLConnection<T> {
         node: T;
     }[];
 }
-export interface MediaImage {
-    __typename?: string;
-    id?: string;
-    mediaContentType?: MediaContentType;
-    data?: Pick<Image, 'altText' | 'url' | 'id' | 'width' | 'height'>;
-}
-interface ProductVariant {
-    __typename?: string;
-}
-interface Product {
-    __typename?: string;
-}
-export declare type RawMetafield = Omit<Partial<Metafield>, 'reference'> & {
-    reference?: MediaImage | ProductVariant | Product | null;
-};
 export declare type ParsedMetafield = Omit<Partial<Metafield>, 'value' | 'reference'> & {
     value?: string | number | boolean | Record<any, string> | Date | Rating | Measurement;
     reference?: MediaImage | ProductVariant | Product | null;

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

@@ -1,7 +1,9 @@
-import { ImportGlobEagerOutput } from '../types';
+import { ImportGlobEagerOutput, ShopifyConfig } from '../types';
+import type { ASTNode } from 'graphql';
 declare type RouteParams = Record<string, string>;
 declare type RequestOptions = {
     params: RouteParams;
+    queryShop: (args: QueryShopArgs) => Promise<any>;
 };
 declare type ResourceGetter = (request: Request, requestOptions: RequestOptions) => Promise<Response | Object | String>;
 interface HydrogenApiRoute {
@@ -14,7 +16,21 @@ export declare type ApiRouteMatch = {
     hasServerComponent: boolean;
     params: RouteParams;
 };
-export declare function getApiRoutesFromPages(pages: ImportGlobEagerOutput | undefined, topLevelPath?: string): Array<HydrogenApiRoute>;
+export declare function getApiRoutes(pages: ImportGlobEagerOutput | undefined, topLevelPath?: string): Array<HydrogenApiRoute>;
 export declare function getApiRouteFromURL(url: URL, routes: Array<HydrogenApiRoute>): ApiRouteMatch | null;
-export declare function renderApiRoute(request: Request, route: ApiRouteMatch): Promise<Response>;
+/** 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: ASTNode | string;
+    /** An object of the variables for the GraphQL query. */
+    variables?: Record<string, any>;
+    /** A string corresponding to a valid locale identifier like `en-us` used to make the request. */
+    locale?: string;
+}
+export declare function renderApiRoute(request: Request, route: ApiRouteMatch, shopifyConfig: ShopifyConfig): Promise<Response>;
 export {};

package/dist/node/utilities/apiRoutes.js

@@ -1,19 +1,20 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.renderApiRoute = exports.getApiRouteFromURL = exports.getApiRoutesFromPages = void 0;
+exports.renderApiRoute = exports.getApiRouteFromURL = exports.getApiRoutes = void 0;
 const matchPath_1 = require("./matchPath");
 const log_1 = require("../utilities/log/");
+const fetch_1 = require("./fetch");
 let memoizedRoutes = [];
 let memoizedPages = {};
-function getApiRoutesFromPages(pages, topLevelPath = '*') {
+function getApiRoutes(pages, topLevelPath = '*') {
     if (!pages || memoizedPages === pages)
         return memoizedRoutes;
     const topLevelPrefix = topLevelPath.replace('*', '').replace(/\/$/, '');
     const routes = Object.keys(pages)
         .filter((key) => pages[key].api)
         .map((key) => {
-        const path = key
-            .replace('./pages', '')
+        let path = key
+            .replace('./routes', '')
             .replace(/\.server\.(t|j)sx?$/, '')
             /**
              * Replace /index with /
@@ -28,6 +29,8 @@ function getApiRoutesFromPages(pages, topLevelPath = '*') {
              * 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);
         /**
          * Catch-all routes [...handle].jsx don't need an exact match
          * https://reactrouter.com/core/api/Route/exact-bool
@@ -47,7 +50,7 @@ function getApiRoutesFromPages(pages, topLevelPath = '*') {
     memoizedPages = pages;
     return memoizedRoutes;
 }
-exports.getApiRoutesFromPages = getApiRoutesFromPages;
+exports.getApiRoutes = getApiRoutes;
 function getApiRouteFromURL(url, routes) {
     let foundRoute, foundRouteDetails;
     for (let i = 0; i < routes.length; i++) {
@@ -66,11 +69,30 @@ function getApiRouteFromURL(url, routes) {
     };
 }
 exports.getApiRouteFromURL = getApiRouteFromURL;
-async function renderApiRoute(request, route) {
+function queryShopBuilder(shopifyConfig) {
+    return async function queryShop({ query, variables, locale, }) {
+        var _a;
+        const { storeDomain, storefrontApiVersion, storefrontToken, defaultLocale } = shopifyConfig;
+        const fetcher = (0, fetch_1.fetchBuilder)(`https://${storeDomain}/api/${storefrontApiVersion}/graphql.json`, {
+            method: 'POST',
+            body: (0, fetch_1.graphqlRequestBody)(query, variables),
+            headers: {
+                'X-Shopify-Storefront-Access-Token': storefrontToken,
+                'Accept-Language': (_a = locale) !== null && _a !== void 0 ? _a : defaultLocale,
+                'Content-Type': 'application/json',
+            },
+        });
+        return await fetcher();
+    };
+}
+async function renderApiRoute(request, route, shopifyConfig) {
     let response;
     const log = (0, log_1.getLoggerWithContext)(request);
     try {
-        response = await route.resource(request, { params: route.params });
+        response = await route.resource(request, {
+            params: route.params,
+            queryShop: queryShopBuilder(shopifyConfig),
+        });
         if (!(response instanceof Response)) {
             if (typeof response === 'string' || response instanceof String) {
                 response = new Response(response);

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

@@ -0,0 +1,10 @@
+import { ASTNode } from 'graphql';
+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: ASTNode | string, variables?: Record<string, any>): string;
+export declare function decodeShopifyId(id: string): string;
+export {};

package/dist/node/utilities/fetch.js

@@ -0,0 +1,39 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.decodeShopifyId = exports.graphqlRequestBody = exports.fetchBuilder = void 0;
+const graphql_1 = require("graphql");
+const version_1 = require("../version");
+const defaultHeaders = {
+    'content-type': 'application/json',
+    'user-agent': `Hydrogen ${version_1.LIB_VERSION}`,
+};
+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;
+    };
+}
+exports.fetchBuilder = fetchBuilder;
+function graphqlRequestBody(query, variables) {
+    const queryString = typeof query === 'string' ? query : (0, graphql_1.print)(query);
+    return JSON.stringify({
+        query: queryString,
+        variables,
+    });
+}
+exports.graphqlRequestBody = graphqlRequestBody;
+function decodeShopifyId(id) {
+    if (!id.startsWith('gid://')) {
+        throw new Error('invalid Shopify ID');
+    }
+    return id;
+}
+exports.decodeShopifyId = decodeShopifyId;

package/dist/node/utilities/log/log-query-timeline.d.ts

@@ -1,7 +1,7 @@
 import { ServerComponentRequest } from '../../framework/Hydration/ServerComponentRequest.server';
 import { QueryKey } from '../../types';
 import type { RenderType } from './log';
-export declare type TimingType = 'requested' | 'resolved' | 'rendered' | 'preload' | 'expired';
+export declare type TimingType = 'requested' | 'resolved' | 'rendered' | 'preload';
 export declare type QueryTiming = {
     name: string;
     timingType: TimingType;

package/dist/node/utilities/log/log-query-timeline.js

@@ -12,7 +12,6 @@ const TIMING_MAPPING = {
     rendered: 'Rendered',
     resolved: 'Resolved',
     preload: 'Preload',
-    expired: 'Expired',
 };
 function collectQueryTimings(request, queryKey, timingType, duration) {
     request.ctx.queryTimings.push({
@@ -49,7 +48,7 @@ function logQueryTimings(type, request) {
             }
             const loadColor = query.timingType === 'preload' ? kolorist_1.green : color;
             const duration = query.duration;
-            log.debug(color(`│ ${`${(query.timestamp - requestStartTime).toFixed(2)}ms`.padEnd(10)} ${loadColor(TIMING_MAPPING[query.timingType].padEnd(10))} ${query.name}${query.timingType === 'resolved' || query.timingType === 'expired'
+            log.debug(color(`│ ${`${(query.timestamp - requestStartTime).toFixed(2)}ms`.padEnd(10)} ${loadColor(TIMING_MAPPING[query.timingType].padEnd(10))} ${query.name}${query.timingType === 'resolved'
                 ? ` (Took ${duration === null || duration === void 0 ? void 0 : duration.toFixed(2)}ms)`
                 : ''}`));
             // SSR + RSC render path generates 2 `load` and `render` for each query

package/dist/node/utilities/log/log.d.ts

@@ -11,6 +11,7 @@ export declare type LoggerOptions = {
     showCacheControlHeader?: boolean;
     showCacheApiStatus?: boolean;
     showQueryTiming?: boolean;
+    showUnusedQueryProperties?: boolean;
 };
 export declare type RenderType = 'str' | 'rsc' | 'ssr' | 'api';
 export declare const log: Logger;

package/dist/node/utilities/log/utils.js

@@ -3,6 +3,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.parseUrl = exports.findQueryName = void 0;
 function findQueryName(key) {
     const decodeKey = decodeURIComponent(key);
+    if (key.length < 100) {
+        return key.replace('"__QUERY_CACHE_ID__"', '').replace(/"/g, '');
+    }
     const match = decodeKey.match(/query ([^\s\()]*)\s?(|\(\{)/);
     if (match && match.length > 1) {
         return match[1];

package/dist/node/utilities/web-api-polyfill.js

@@ -1,7 +1,11 @@
 "use strict";
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[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];

package/dist/node/version.d.ts

@@ -0,0 +1 @@
+export declare const LIB_VERSION = "0.13.1";

package/dist/node/version.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LIB_VERSION = void 0;
+exports.LIB_VERSION = '0.13.1';

package/package.json

@@ -7,7 +7,7 @@
   "engines": {
     "node": ">=14"
   },
-  "version": "0.11.1",
+  "version": "0.13.1",
   "description": "Modern custom Shopify storefronts",
   "license": "MIT",
   "main": "dist/esnext/index.js",
@@ -33,6 +33,7 @@
     "dev-esnext": "tsc -w --incremental --p tsconfig.build.json",
     "dev-node": "tsc -w --incremental --p tsconfig.cjs.json",
     "dev-copy": "cpy --parents *.[jt]s *.json vendor ../../node_modules/@shopify/hydrogen",
+    "dev-graphql": "graphql-codegen --config codegen.yml --watch",
     "prebuild": "rimraf dist ../../node_modules/@shopify/hydrogen && mkdirp ../../node_modules/@shopify/hydrogen",
     "build": "run-p build-esnext build-node && yarn build-copy",
     "build-esnext": "tsc --p tsconfig.build.json",
@@ -49,17 +50,17 @@
     "directory": "packages/hydrogen"
   },
   "devDependencies": {
-    "@babel/core": "^7.13.16",
-    "@graphql-codegen/cli": "^1.21.4",
-    "@graphql-codegen/graphql-modules-preset": "^1.2.5",
-    "@graphql-codegen/import-types-preset": "^1.18.1",
-    "@graphql-codegen/introspection": "1.18.2",
-    "@graphql-codegen/near-operation-file-preset": "^1.18.0",
-    "@graphql-codegen/typed-document-node": "^1.18.5",
-    "@graphql-codegen/typescript": "^1.22.0",
-    "@graphql-codegen/typescript-graphql-files-modules": "1.18.1",
-    "@graphql-codegen/typescript-operations": "^1.17.16",
-    "@graphql-codegen/typescript-react-apollo": "2.2.4",
+    "@babel/core": "^7.17.5",
+    "@graphql-codegen/add": "^3.1.1",
+    "@graphql-codegen/cli": "2.6.2",
+    "@graphql-codegen/graphql-modules-preset": "^2.3.5",
+    "@graphql-codegen/import-types-preset": "^2.1.12",
+    "@graphql-codegen/introspection": "2.1.1",
+    "@graphql-codegen/near-operation-file-preset": "^2.2.6",
+    "@graphql-codegen/typed-document-node": "^2.2.5",
+    "@graphql-codegen/typescript": "2.4.5",
+    "@graphql-codegen/typescript-graphql-files-modules": "2.1.1",
+    "@graphql-codegen/typescript-operations": "2.3.2",
     "@graphql-typed-document-node/core": "^3.1.0",
     "@rollup/plugin-graphql": "^1.0.0",
     "@types/body-parser": "^1.19.2",
@@ -81,8 +82,8 @@
   "peerDependencies": {
     "body-parser": "^1.19.1",
     "compression": "^1.7.4",
-    "react": "0.0.0-experimental-529dc3ce8-20220124",
-    "react-dom": "0.0.0-experimental-529dc3ce8-20220124",
+    "react": "0.0.0-experimental-2bf7c02f0-20220314",
+    "react-dom": "0.0.0-experimental-2bf7c02f0-20220314",
     "serve-static": "^1.14.1",
     "vite": "^2.8.0"
   },
@@ -100,15 +101,14 @@
   "dependencies": {
     "@vitejs/plugin-react": "^1.1.1",
     "abort-controller": "^3.0.0",
-    "body-parser": "^1.19.1",
+    "body-parser": "^1.19.2",
     "connect": "^3.7.0",
-    "es-module-lexer": "^0.9.0",
-    "fast-glob": "^3.2.5",
-    "graphql": "^16.0.1",
-    "history": "^5.2.0",
-    "isomorphic-dompurify": "^0.13.0",
+    "es-module-lexer": "^0.10.0",
+    "fast-glob": "^3.2.11",
+    "graphql": "^16.3.0",
+    "history": "^5.3.0",
     "kolorist": "^1.5.1",
-    "magic-string": "^0.25.7",
+    "magic-string": "^0.26.1",
     "node-fetch": "^2.6.7",
     "path-to-regexp": "^6.2.0",
     "react-error-boundary": "^3.1.3",