@shopify/hydrogen 0.8.2 → 0.8.3

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.
@@ -84,7 +84,7 @@ const renderHydrogen = (App, hook) => {
84
84
  });
85
85
  let didError;
86
86
  const head = template.match(/<head>(.+?)<\/head>/s)[1];
87
- const { pipe, abort } = renderToPipeableStream(React.createElement(Html, { head: head },
87
+ const { pipe } = renderToPipeableStream(React.createElement(Html, { head: head },
88
88
  React.createElement(ReactApp, { ...state })), {
89
89
  onCompleteShell() {
90
90
  /**
@@ -135,11 +135,7 @@ const renderHydrogen = (App, hook) => {
135
135
  });
136
136
  const streamTimeout = setTimeout(() => {
137
137
  const errorMessage = `The app failed to stream after ${STREAM_ABORT_TIMEOUT_MS} ms`;
138
- log.error(errorMessage);
139
- if (dev && response.headersSent) {
140
- response.write(getErrorMarkup(new Error(errorMessage)));
141
- }
142
- abort();
138
+ log.warn(errorMessage);
143
139
  }, STREAM_ABORT_TIMEOUT_MS);
144
140
  };
145
141
  /**
@@ -161,7 +157,7 @@ const renderHydrogen = (App, hook) => {
161
157
  });
162
158
  let didError;
163
159
  const writer = new HydrationWriter();
164
- const { pipe, abort } = renderToPipeableStream(React.createElement(HydrationContext.Provider, { value: true },
160
+ const { pipe } = renderToPipeableStream(React.createElement(HydrationContext.Provider, { value: true },
165
161
  React.createElement(ReactApp, { ...state })), {
166
162
  /**
167
163
  * When hydrating, we have to wait until `onCompleteAll` to avoid having
@@ -184,10 +180,7 @@ const renderHydrogen = (App, hook) => {
184
180
  },
185
181
  });
186
182
  const renderTimeout = setTimeout(() => {
187
- const errorMessage = `The app failed to render RSC after ${STREAM_ABORT_TIMEOUT_MS} ms`;
188
- didError = new Error(errorMessage);
189
- log.error(errorMessage);
190
- abort();
183
+ log.error(`The app failed to render RSC after ${STREAM_ABORT_TIMEOUT_MS} ms`);
191
184
  }, STREAM_ABORT_TIMEOUT_MS);
192
185
  };
193
186
  return {
@@ -248,7 +241,7 @@ async function renderApp(ReactApp, state, log, isReactHydrationRequest) {
248
241
  function renderAppFromBufferedStream(app, log, isReactHydrationRequest) {
249
242
  return new Promise((resolve, reject) => {
250
243
  const errorTimeout = setTimeout(() => {
251
- reject(new Error(`The app failed to SSR after ${STREAM_ABORT_TIMEOUT_MS} ms`));
244
+ log.warn(`The app failed to SSR after ${STREAM_ABORT_TIMEOUT_MS} ms`);
252
245
  }, STREAM_ABORT_TIMEOUT_MS);
253
246
  if (isWorker) {
254
247
  let isComplete = false;
@@ -8,7 +8,7 @@ export interface UseShopQueryResponse<T> {
8
8
  /**
9
9
  * The `useShopQuery` hook allows you to make server-only GraphQL queries to the Storefront API. It must be a descendent of a `ShopifyProvider` component.
10
10
  */
11
- export declare function useShopQuery<T>({ query, variables, cache, }: {
11
+ export declare function useShopQuery<T>({ query, variables, cache, locale, }: {
12
12
  /** A string of the GraphQL query.
13
13
  * If no query is provided, useShopQuery will make no calls to the Storefront API.
14
14
  */
@@ -17,4 +17,6 @@ export declare function useShopQuery<T>({ query, variables, cache, }: {
17
17
  variables?: Record<string, any>;
18
18
  /** An object containing cache-control options for the sub-request. */
19
19
  cache?: CacheOptions;
20
+ /** A string corresponding to a valid locale identifier like `en-us` used to make the request. */
21
+ locale?: string;
20
22
  }): UseShopQueryResponse<T>;
@@ -6,12 +6,12 @@ import { getConfig } from '../../framework/config';
6
6
  /**
7
7
  * The `useShopQuery` hook allows you to make server-only GraphQL queries to the Storefront API. It must be a descendent of a `ShopifyProvider` component.
8
8
  */
9
- export function useShopQuery({ query, variables = {}, cache = {}, }) {
9
+ export function useShopQuery({ query, variables = {}, cache = {}, locale = '', }) {
10
10
  if (isClient()) {
11
11
  throw new Error('Shopify Storefront API requests should only be made from the server.');
12
12
  }
13
13
  const body = query ? graphqlRequestBody(query, variables) : '';
14
- const { request, key } = createShopRequest(body);
14
+ const { request, key } = createShopRequest(body, locale);
15
15
  const { data, error: fetchError } = useQuery(key, query
16
16
  ? fetchBuilder(request)
17
17
  : // If no query, avoid calling SFAPI & return nothing
@@ -52,8 +52,9 @@ export function useShopQuery({ query, variables = {}, cache = {}, }) {
52
52
  }
53
53
  return data;
54
54
  }
55
- function createShopRequest(body) {
56
- const { storeDomain, storefrontToken, graphqlApiVersion } = useShop();
55
+ function createShopRequest(body, locale) {
56
+ var _a;
57
+ const { storeDomain, storefrontToken, graphqlApiVersion, locale: defaultLocale, } = useShop();
57
58
  const url = `https://${storeDomain}/api/${graphqlApiVersion}/graphql.json`;
58
59
  return {
59
60
  request: new Request(url, {
@@ -61,9 +62,10 @@ function createShopRequest(body) {
61
62
  headers: {
62
63
  'X-Shopify-Storefront-Access-Token': storefrontToken,
63
64
  'content-type': 'application/json',
65
+ 'Accept-Language': (_a = locale) !== null && _a !== void 0 ? _a : defaultLocale,
64
66
  },
65
67
  body,
66
68
  }),
67
- key: [storeDomain, graphqlApiVersion, body],
69
+ key: [storeDomain, graphqlApiVersion, body, locale],
68
70
  };
69
71
  }
@@ -58,7 +58,12 @@ export function logServerResponse(type, log, request, responseStatus) {
58
58
  : responseStatus >= 300
59
59
  ? lightBlue(responseStatus)
60
60
  : green(responseStatus);
61
- const styledType = italic(type);
61
+ const fullType = type === 'str'
62
+ ? 'streaming SSR'
63
+ : type === 'rsc'
64
+ ? 'server components'
65
+ : 'buffered SSR';
66
+ const styledType = italic(pad(fullType, ' '));
62
67
  const paddedTiming = pad((getTime() - request.time).toFixed(2) + ' ms', ' ');
63
68
  const url = type === 'rsc'
64
69
  ? decodeURIComponent(request.url.substring(request.url.indexOf('=') + 1))
@@ -1 +1 @@
1
- export declare const LIB_VERSION = "0.8.2";
1
+ export declare const LIB_VERSION = "0.8.3";
@@ -1 +1 @@
1
- export const LIB_VERSION = '0.8.2';
1
+ export const LIB_VERSION = '0.8.3';
@@ -1 +1 @@
1
- export declare const LIB_VERSION = "0.8.2";
1
+ export declare const LIB_VERSION = "0.8.3";
@@ -1,4 +1,4 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
3
  exports.LIB_VERSION = void 0;
4
- exports.LIB_VERSION = '0.8.2';
4
+ exports.LIB_VERSION = '0.8.3';
package/package.json CHANGED
@@ -4,7 +4,7 @@
4
4
  "access": "public",
5
5
  "@shopify:registry": "https://registry.npmjs.org"
6
6
  },
7
- "version": "0.8.2",
7
+ "version": "0.8.3",
8
8
  "description": "Modern custom Shopify storefronts",
9
9
  "license": "MIT",
10
10
  "main": "dist/esnext/index.js",
@@ -72,6 +72,7 @@
72
72
  "babel-loader": "^8.2.2",
73
73
  "cpy-cli": "3.1.1",
74
74
  "mkdirp": "^1.0.4",
75
+ "npm-run-all": "^4.1.5",
75
76
  "postcss": "^8",
76
77
  "raw-loader": "^4.0.2",
77
78
  "rimraf": "^3.0.2"
@@ -99,5 +100,5 @@
99
100
  "react-ssr-prepass": "^1.4.0",
100
101
  "vite-plugin-inspect": "^0.3.6"
101
102
  },
102
- "gitHead": "587f117221ab94a06165e69602658c4e561f5723"
103
+ "gitHead": "9c591cfc4bc149a6b808aaec68366cbad06fdb79"
103
104
  }