npm - @shopify/hydrogen - Versions diffs - 0.5.1 → 0.6.1 - Mend

@shopify/hydrogen 0.5.1 → 0.6.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (186) hide show

package/dist/node/handle-event.js CHANGED Viewed

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const cache_1 = require("./framework/cache");
 const runtime_1 = require("./framework/runtime");
+const config_1 = require("./framework/config");
 async function handleEvent(event, { request, entrypoint, indexTemplate, assetHandler, streamableResponse, dev, cache, context, }) {
     var _a, _b, _c;
     const url = new URL(request.url);
@@ -10,86 +11,78 @@ async function handleEvent(event, { request, entrypoint, indexTemplate, assetHan
      */
     runtime_1.setCache(cache);
     runtime_1.setContext(context);
+    config_1.setConfig({ dev });
     const isReactHydrationRequest = url.pathname === '/react';
-    try {
-        const template = typeof indexTemplate === 'function'
-            ? await indexTemplate(url.toString())
-            : indexTemplate;
-        /**
-         * If this is a request for an asset, and an asset handler is present, call it.
-         */
-        if (/\.(png|jpe?g|gif|css|js|svg|ico|map)$/i.test(url.pathname) &&
-            assetHandler) {
-            return assetHandler(event, url);
-        }
-        const { render, hydrate, stream } = entrypoint.default || entrypoint;
-        // @ts-ignore
-        if (dev && !(render && hydrate && stream)) {
-            throw new Error(`entry-server.jsx could not be loaded. This likely occurred because of a Vite compilation error.\n` +
-                `Please check your server logs for more information.`);
-        }
-        const isStreamable = streamableResponse && isStreamableRequest(url);
-        const context = {};
-        /**
-         * Stream back real-user responses, but for bots/etc,
-         * use `render` instead. This is because we need to inject <head>
-         * things for SEO reasons.
-         */
-        if (isStreamable) {
-            if (isReactHydrationRequest) {
-                hydrate(url, { context, request, response: streamableResponse, dev });
-            }
-            else {
-                stream(url, {
-                    context,
-                    request,
-                    response: streamableResponse,
-                    template,
-                    dev,
-                });
-            }
-            return;
-        }
-        const { body, bodyAttributes, htmlAttributes, componentResponse, ...head } = await render(url, { request, context, isReactHydrationRequest });
-        const headers = componentResponse.headers;
-        /**
-         * TODO: Also add `Vary` headers for `accept-language` and any other keys
-         * we want to shard our full-page cache for all Hydrogen storefronts.
-         */
-        headers.set(cache_1.getCacheControlHeader({ dev }), componentResponse.cacheControlHeader);
-        if (componentResponse.customBody) {
-            return new Response(await componentResponse.customBody, {
-                status: (_a = componentResponse.status) !== null && _a !== void 0 ? _a : 200,
-                headers,
-            });
-        }
-        let response;
+    const template = typeof indexTemplate === 'function'
+        ? await indexTemplate(url.toString())
+        : indexTemplate;
+    /**
+     * If this is a request for an asset, and an asset handler is present, call it.
+     */
+    if (/\.(png|jpe?g|gif|css|js|svg|ico|map)$/i.test(url.pathname) &&
+        assetHandler) {
+        return assetHandler(event, url);
+    }
+    const { render, hydrate, stream } = entrypoint.default || entrypoint;
+    // @ts-ignore
+    if (dev && !(render && hydrate && stream)) {
+        throw new Error(`entry-server.jsx could not be loaded. This likely occurred because of a Vite compilation error.\n` +
+            `Please check your server logs for more information.`);
+    }
+    const isStreamable = streamableResponse && isStreamableRequest(url);
+    /**
+     * Stream back real-user responses, but for bots/etc,
+     * use `render` instead. This is because we need to inject <head>
+     * things for SEO reasons.
+     */
+    if (isStreamable) {
         if (isReactHydrationRequest) {
-            response = new Response(body, {
-                status: (_b = componentResponse.status) !== null && _b !== void 0 ? _b : 200,
-                headers,
-            });
+            hydrate(url, { context: {}, request, response: streamableResponse, dev });
         }
         else {
-            const html = template
-                .replace(`<div id="root"></div>`, `<div id="root" data-server-rendered="true">${body}</div>`)
-                .replace(/<head>(.*?)<\/head>/s, generateHeadTag(head))
-                .replace('<body', bodyAttributes ? `<body ${bodyAttributes}` : '$&')
-                .replace('<html', htmlAttributes ? `<html ${htmlAttributes}` : '$&');
-            headers.append('content-type', 'text/html');
-            response = new Response(html, {
-                status: (_c = componentResponse.status) !== null && _c !== void 0 ? _c : 200,
-                headers,
+            stream(url, {
+                context: {},
+                request,
+                response: streamableResponse,
+                template,
+                dev,
             });
         }
-        return response;
+        return;
+    }
+    const { body, bodyAttributes, htmlAttributes, componentResponse, ...head } = await render(url, { request, context: {}, isReactHydrationRequest, dev });
+    const headers = componentResponse.headers;
+    /**
+     * TODO: Also add `Vary` headers for `accept-language` and any other keys
+     * we want to shard our full-page cache for all Hydrogen storefronts.
+     */
+    headers.set(cache_1.getCacheControlHeader({ dev }), componentResponse.cacheControlHeader);
+    if (componentResponse.customBody) {
+        return new Response(await componentResponse.customBody, {
+            status: (_a = componentResponse.status) !== null && _a !== void 0 ? _a : 200,
+            headers,
+        });
+    }
+    let response;
+    if (isReactHydrationRequest) {
+        response = new Response(body, {
+            status: (_b = componentResponse.status) !== null && _b !== void 0 ? _b : 200,
+            headers,
+        });
     }
-    catch (e) {
-        console.log(e.stack);
-        return new Response(e.message || e.toString(), {
-            status: 500,
+    else {
+        const html = template
+            .replace(`<div id="root"></div>`, `<div id="root" data-server-rendered="true">${body}</div>`)
+            .replace(/<head>(.*?)<\/head>/s, generateHeadTag(head))
+            .replace('<body', bodyAttributes ? `<body ${bodyAttributes}` : '$&')
+            .replace('<html', htmlAttributes ? `<html ${htmlAttributes}` : '$&');
+        headers.append('content-type', 'text/html');
+        response = new Response(html, {
+            status: (_c = componentResponse.status) !== null && _c !== void 0 ? _c : 200,
+            headers,
         });
     }
+    return response;
 }
 exports.default = handleEvent;
 function isStreamableRequest(url) {

package/dist/node/hooks/useQuery/hooks.d.ts CHANGED Viewed

@@ -1,13 +1,15 @@
 import type { UseQueryOptions, QueryKey, QueryFunction } from 'react-query';
 import { CacheOptions } from '../../types';
-interface HydrogenUseQueryOptions<TQueryFnData = unknown, TError = unknown, TData = TQueryFnData, TQueryKey extends QueryKey = QueryKey> extends UseQueryOptions<TQueryFnData, TError, TData, TQueryKey> {
+export interface HydrogenUseQueryOptions<TQueryFnData = unknown, TError = unknown, TData = TQueryFnData, TQueryKey extends QueryKey = QueryKey> extends UseQueryOptions<TQueryFnData, TError, TData, TQueryKey> {
     cache: CacheOptions;
 }
 /**
- * useQuery is a wrapper around `useQuery` from `react-query` which supports Suspense calls on the server
- * and on the client.
- *
- * @see https://react-query.tanstack.com/reference/useQuery
+ * The `useQuery` hook is a wrapper around `useQuery` from `react-query`. It supports Suspense calls on the server and on the client.
  */
-export declare function useQuery<T>(key: QueryKey, queryFn: QueryFunction<T>, queryOptions?: HydrogenUseQueryOptions<T, Error, T, QueryKey>): import("react-query").UseQueryResult<T, Error>;
-export {};
+export declare function useQuery<T>(
+/** A string or array to uniquely identify the current query. */
+key: QueryKey,
+/** An asynchronous query function like `fetch` which returns data. */
+queryFn: QueryFunction<T>,
+/** Options including `cache` to manage the cache behavior of the sub-request. */
+queryOptions?: HydrogenUseQueryOptions<T, Error, T, QueryKey>): import("react-query").UseQueryResult<T, Error>;

package/dist/node/hooks/useQuery/hooks.js CHANGED Viewed

@@ -5,12 +5,15 @@ const react_query_1 = require("react-query");
 const cache_1 = require("../../framework/cache");
 const runtime_1 = require("../../framework/runtime");
 /**
- * useQuery is a wrapper around `useQuery` from `react-query` which supports Suspense calls on the server
- * and on the client.
- *
- * @see https://react-query.tanstack.com/reference/useQuery
+ * The `useQuery` hook is a wrapper around `useQuery` from `react-query`. It supports Suspense calls on the server and on the client.
  */
-function useQuery(key, queryFn, queryOptions) {
+function useQuery(
+/** A string or array to uniquely identify the current query. */
+key,
+/** An asynchronous query function like `fetch` which returns data. */
+queryFn,
+/** Options including `cache` to manage the cache behavior of the sub-request. */
+queryOptions) {
     /**
      * Attempt to read the query from cache. If it doesn't exist or if it's stale, regenerate it.
      */
@@ -25,21 +28,28 @@ function useQuery(key, queryFn, queryOptions) {
              * Important: Do this async
              */
             if (cache_1.isStale(response)) {
+                console.log('[useQuery] cache stale; generating new response in background');
                 const lockKey = `lock-${key}`;
                 runtime_1.runDelayedFunction(async () => {
+                    console.log(`[stale regen] fetching cache lock`);
                     const lockExists = await cache_1.getItemFromCache(lockKey);
                     if (lockExists)
                         return;
+                    console.log(`[stale regen] no cache lock`);
                     await cache_1.setItemInCache(lockKey, true);
+                    console.log(`[stale regen] set cache lock`);
                     try {
                         const output = await generateNewOutput();
+                        console.log(`[stale regen] got new output`);
                         await cache_1.setItemInCache(key, output, queryOptions === null || queryOptions === void 0 ? void 0 : queryOptions.cache);
+                        console.log(`[stale regen] set new output`);
                     }
                     catch (e) {
                         console.error(`Error generating async response: ${e.message}`);
                     }
                     finally {
                         await cache_1.deleteItemFromCache(lockKey);
+                        console.log(`[stale regen] deleted lock`);
                     }
                 });
             }

package/dist/node/types.d.ts CHANGED Viewed

@@ -7,6 +7,7 @@ export declare type Renderer = (url: URL, options: {
     request: ServerComponentRequest;
     context?: Record<string, any>;
     isReactHydrationRequest?: boolean;
+    dev?: boolean;
 }) => Promise<{
     body: string;
     componentResponse: ServerComponentResponse;

package/dist/node/utilities/flattenConnection/flattenConnection.d.ts ADDED Viewed

@@ -0,0 +1,12 @@
+import { GraphQLConnection } from '../../types';
+/**
+ * The `flattenConnection` utility transforms a connection object from the Storefront API (for example, [Product-related connections](api/storefront/reference/products/product#connections)) into a flat array of nodes.
+ * ## Arguments
+ * | Description | Required |
+ * | ------------| --------- |
+ * | A connection object with the field `edges` whose value is an array of objects corresponding to `{node: Value}`. For example, any of the [Product connections](api/storefront/reference/products/product#connections) | Yes |
+ *
+ * ## Return type
+ * A flat array whose elements correspond to the `node` value in each element of the original `edges` array.
+ */
+export declare function flattenConnection<T>(connection: GraphQLConnection<T>): T[];

package/dist/node/utilities/flattenConnection/flattenConnection.js ADDED Viewed

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.flattenConnection = void 0;
+/**
+ * The `flattenConnection` utility transforms a connection object from the Storefront API (for example, [Product-related connections](api/storefront/reference/products/product#connections)) into a flat array of nodes.
+ * ## Arguments
+ * | Description | Required |
+ * | ------------| --------- |
+ * | A connection object with the field `edges` whose value is an array of objects corresponding to `{node: Value}`. For example, any of the [Product connections](api/storefront/reference/products/product#connections) | Yes |
+ *
+ * ## Return type
+ * A flat array whose elements correspond to the `node` value in each element of the original `edges` array.
+ */
+function flattenConnection(connection) {
+    var _a;
+    return ((_a = connection.edges) !== null && _a !== void 0 ? _a : []).map((edge) => edge.node);
+}
+exports.flattenConnection = flattenConnection;

package/dist/node/utilities/flattenConnection/index.d.ts ADDED Viewed

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

package/dist/node/utilities/flattenConnection/index.js ADDED Viewed

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.flattenConnection = void 0;
+var flattenConnection_1 = require("./flattenConnection");
+Object.defineProperty(exports, "flattenConnection", { enumerable: true, get: function () { return flattenConnection_1.flattenConnection; } });

package/dist/node/utilities/image_size.d.ts CHANGED Viewed

@@ -23,7 +23,7 @@ export interface ImageLoaderOptions {
 export declare function addImageSizeParametersToUrl(url: string, { width, height, crop, scale, format }: ImageSizeOptions): string;
 export declare function shopifyImageLoader({ src, options }: ImageLoaderOptions): string;
 export declare function useImageUrl(src?: string, options?: ImageSizeOptions): string | undefined;
-export declare function getShopifyImageDimensions(image: Pick<ImageType, 'altText' | 'originalSrc' | 'id' | 'width' | 'height'>, options?: ImageSizeOptions): {
+export declare function getShopifyImageDimensions(image: Pick<ImageType, 'altText' | 'url' | 'id' | 'width' | 'height'>, options?: ImageSizeOptions): {
     width: import("../graphql/types/types").Maybe<number> | undefined;
     height: import("../graphql/types/types").Maybe<number> | undefined;
 };

package/dist/node/utilities/index.d.ts CHANGED Viewed

@@ -2,9 +2,9 @@ export { addImageSizeParametersToUrl, ImageSizeOptions, ImageLoaderOptions, useI
 export { YouTube, Vimeo, addParametersToEmbeddedVideoUrl, useEmbeddedVideoUrl, } from './video_parameters';
 export { loadScript } from './script_loader';
 export { wrapPromise } from './suspense';
-export { flattenConnection } from './connections';
+export { flattenConnection } from './flattenConnection';
 export { isClient } from './isClient';
 export { isServer } from './isServer';
-export { getMeasurementAsParts, getMeasurementAsString } from './meaurement';
-export { parseMetafieldValue } from './metafields';
+export { getMeasurementAsParts, getMeasurementAsString } from './measurement';
+export { parseMetafieldValue } from './parseMetafieldValue';
 export { fetchBuilder, graphqlRequestBody, decodeShopifyId } from './fetch';

package/dist/node/utilities/index.js CHANGED Viewed

@@ -13,17 +13,17 @@ var script_loader_1 = require("./script_loader");
 Object.defineProperty(exports, "loadScript", { enumerable: true, get: function () { return script_loader_1.loadScript; } });
 var suspense_1 = require("./suspense");
 Object.defineProperty(exports, "wrapPromise", { enumerable: true, get: function () { return suspense_1.wrapPromise; } });
-var connections_1 = require("./connections");
-Object.defineProperty(exports, "flattenConnection", { enumerable: true, get: function () { return connections_1.flattenConnection; } });
+var flattenConnection_1 = require("./flattenConnection");
+Object.defineProperty(exports, "flattenConnection", { enumerable: true, get: function () { return flattenConnection_1.flattenConnection; } });
 var isClient_1 = require("./isClient");
 Object.defineProperty(exports, "isClient", { enumerable: true, get: function () { return isClient_1.isClient; } });
 var isServer_1 = require("./isServer");
 Object.defineProperty(exports, "isServer", { enumerable: true, get: function () { return isServer_1.isServer; } });
-var meaurement_1 = require("./meaurement");
-Object.defineProperty(exports, "getMeasurementAsParts", { enumerable: true, get: function () { return meaurement_1.getMeasurementAsParts; } });
-Object.defineProperty(exports, "getMeasurementAsString", { enumerable: true, get: function () { return meaurement_1.getMeasurementAsString; } });
-var metafields_1 = require("./metafields");
-Object.defineProperty(exports, "parseMetafieldValue", { enumerable: true, get: function () { return metafields_1.parseMetafieldValue; } });
+var measurement_1 = require("./measurement");
+Object.defineProperty(exports, "getMeasurementAsParts", { enumerable: true, get: function () { return measurement_1.getMeasurementAsParts; } });
+Object.defineProperty(exports, "getMeasurementAsString", { enumerable: true, get: function () { return measurement_1.getMeasurementAsString; } });
+var parseMetafieldValue_1 = require("./parseMetafieldValue");
+Object.defineProperty(exports, "parseMetafieldValue", { enumerable: true, get: function () { return parseMetafieldValue_1.parseMetafieldValue; } });
 var fetch_1 = require("./fetch");
 Object.defineProperty(exports, "fetchBuilder", { enumerable: true, get: function () { return fetch_1.fetchBuilder; } });
 Object.defineProperty(exports, "graphqlRequestBody", { enumerable: true, get: function () { return fetch_1.graphqlRequestBody; } });

package/dist/node/utilities/{meaurement.d.ts → measurement.d.ts} RENAMED Viewed

File without changes

package/dist/node/utilities/{meaurement.js → measurement.js} RENAMED Viewed

File without changes

package/dist/node/utilities/{metafields → parseMetafieldValue}/index.d.ts RENAMED Viewed

File without changes

package/dist/node/utilities/{metafields → parseMetafieldValue}/index.js RENAMED Viewed

File without changes

package/dist/node/utilities/{metafields → parseMetafieldValue}/parseMetafieldValue.d.ts RENAMED Viewed

@@ -8,7 +8,7 @@ import { Metafield } from '../../graphql/types/types';
  * | ------------------------------------------------------------------------- | -------- |
  * | A [Metafield object](/api/storefront/reference/common-objects/metafield). | Yes      |
  *
- * ## Return Type
+ * ## Return type
  *
  * Depending on the `type` specified in the passed [Metafield](/api/storefront/reference/common-objects/metafield), the following type is returned:
  *
@@ -32,10 +32,5 @@ import { Metafield } from '../../graphql/types/types';
  * | `page_reference`         | string                                                                                        |
  * | `variant_reference`      | string                                                                                        |
  * | `url`                    | string                                                                                        |
- *
- *
- * ## Related hook
- *
- * - [`useParsedMetafields`](/beta/hydrogen/reference/hooks/metafield/useparsedmetafields)
  */
 export declare function parseMetafieldValue(metafield: Partial<Metafield>): any;

package/dist/node/utilities/{metafields → parseMetafieldValue}/parseMetafieldValue.js RENAMED Viewed

@@ -10,7 +10,7 @@ exports.parseMetafieldValue = void 0;
  * | ------------------------------------------------------------------------- | -------- |
  * | A [Metafield object](/api/storefront/reference/common-objects/metafield). | Yes      |
  *
- * ## Return Type
+ * ## Return type
  *
  * Depending on the `type` specified in the passed [Metafield](/api/storefront/reference/common-objects/metafield), the following type is returned:
  *
@@ -34,11 +34,6 @@ exports.parseMetafieldValue = void 0;
  * | `page_reference`         | string                                                                                        |
  * | `variant_reference`      | string                                                                                        |
  * | `url`                    | string                                                                                        |
- *
- *
- * ## Related hook
- *
- * - [`useParsedMetafields`](/beta/hydrogen/reference/hooks/metafield/useparsedmetafields)
  */
 function parseMetafieldValue(metafield) {
     if (metafield.value == null) {

package/dist/node/version.d.ts CHANGED Viewed

	@@ -1 +1 @@
1	- export declare const LIB_VERSION = "0.5.1";
1	+ export declare const LIB_VERSION = "0.6.1";

package/dist/node/version.js CHANGED Viewed

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

package/dist/worker/framework/cache.js CHANGED Viewed

@@ -41,8 +41,9 @@ function getKeyUrl(key) {
  */
 export async function getItemFromCache(key) {
     const cache = getCache();
-    if (!cache)
+    if (!cache) {
         return;
+    }
     const url = getKeyUrl(hashKey(key));
     const request = new Request(url);
     const response = await cache.match(request);
@@ -55,8 +56,9 @@ export async function getItemFromCache(key) {
  */
 export async function setItemInCache(key, value, userCacheOptions) {
     const cache = getCache();
-    if (!cache)
+    if (!cache) {
         return;
+    }
     const url = getKeyUrl(hashKey(key));
     const request = new Request(url);
     const cacheOptions = {

package/dist/worker/framework/config.d.ts ADDED Viewed

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

package/dist/worker/framework/config.js ADDED Viewed

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

package/dist/worker/framework/runtime.d.ts CHANGED Viewed

@@ -1,5 +1,5 @@
 export interface RuntimeContext {
-    waitUntil: (fn: Function) => void;
+    waitUntil: (fn: Promise<any>) => void;
 }
 /**
  * Set a global runtime context for the current request.
@@ -10,4 +10,4 @@ export declare function setContext(ctx?: RuntimeContext): void;
 export declare function getContext(): RuntimeContext | undefined;
 export declare function setCache(cache?: Cache): void;
 export declare function getCache(): Cache | undefined;
-export declare function runDelayedFunction(fn: () => void): Promise<void>;
+export declare function runDelayedFunction(fn: () => Promise<any>): void | Promise<any>;

package/dist/worker/framework/runtime.js CHANGED Viewed

@@ -15,12 +15,13 @@ export function setCache(cache) {
 export function getCache() {
     return globalThis.__cache;
 }
-export async function runDelayedFunction(fn) {
+export function runDelayedFunction(fn) {
     const context = getContext();
     /**
      * Runtimes (Oxygen, Node.js) might not have this.
      */
-    if (!(context === null || context === void 0 ? void 0 : context.waitUntil))
+    if (!(context === null || context === void 0 ? void 0 : context.waitUntil)) {
         return fn();
-    return context.waitUntil(fn);
+    }
+    return context.waitUntil(fn());
 }