@shopify/hydrogen 0.26.1 → 0.27.2

package/CHANGELOG.md

@@ -1,5 +1,51 @@
 # Changelog
 
+## 0.27.2
+
+### Patch Changes
+
+- [`f1af7c3a`](https://github.com/Shopify/hydrogen/commit/f1af7c3a70e957a924c886b72450f5f5482bc19e) Thanks [@jplhomer](https://github.com/jplhomer)! - This is another patch test. Please ignore this version.
+
+## 0.27.1
+
+### Patch Changes
+
+- [#1728](https://github.com/Shopify/hydrogen/pull/1728) [`e8d4980a`](https://github.com/Shopify/hydrogen/commit/e8d4980a691c68e71c56762596a59415f59600c6) Thanks [@jplhomer](https://github.com/jplhomer)! - This is an example of backporting a fix. You can ignore this version.
+
+## 0.27.0
+
+### Minor Changes
+
+- [#1697](https://github.com/Shopify/hydrogen/pull/1697) [`85aab092`](https://github.com/Shopify/hydrogen/commit/85aab092b2f47d77bb917659918a011783cd8c34) Thanks [@blittle](https://github.com/blittle)! - Remove `defaultLocale` from the Hydrogen Config and instead add `defaultCountryCode` and `defaultLanguageCode`. Both of which are also now available by the `useShop()` hook:
+
+  ```diff
+  export default defineConfig({
+    shopify: {
+  -    defaultLocale: 'EN-US',
+  +    defaultCountryCode: 'US',
+  +    defaultLanguageCode: 'EN',
+      storeDomain: 'hydrogen-preview.myshopify.com',
+      storefrontToken: '3b580e70970c4528da70c98e097c2fa0',
+      storefrontApiVersion: '2022-07',
+    },
+  }
+  ```
+
+* [#1662](https://github.com/Shopify/hydrogen/pull/1662) [`4262b319`](https://github.com/Shopify/hydrogen/commit/4262b3196afb96415d3b0f8f874f351030e6a734) Thanks [@wizardlyhel](https://github.com/wizardlyhel)! - Fix server analytics route
+
+  - Fix ServerAnalyticsRoute so that it does complete all async work
+  - Move Performance and Shopify analytic reporting to client side
+  - Make sure `ShopifyAnalytics` make its own query for shop id and currency
+  - Remove query for shop id and currency from `DefaultSeo` component
+  - Make Performance and Shopify server analytics connector do nothing
+
+  ### Deprecated components
+
+  Remove the following components from `hydrogen.config.js`
+
+  - `PerformanceMetricsServerAnalyticsConnector`
+  - `ShopifyServerAnalyticsConnector`
+
 ## 0.26.1
 
 ### Patch Changes
@@ -1541,11 +1587,11 @@
 
   `queryShop` accepts a single argument object with the following properties:
 
-  | Property    | Type                                   | Required |
-  | ----------- | -------------------------------------- | -------- |
-  | `query`     | `string \| ASTNode`                    | Yes      |
-  | `variables` | `Record<string, any>`                  | No       |
-  | `locale`    | `string` (defaults to `defaultLocale`) | No       |
+  | Property    | Type                                                                                                                                                             | Required |
+  | ----------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- |
+  | `query`     | `string \| ASTNode`                                                                                                                                              | Yes      |
+  | `variables` | `Record<string, any>`                                                                                                                                            | No       |
+  | `locale`    | `string`. Defaults to the locale value from the [LocalizationProvider](https://shopify.dev/api/hydrogen/components/localization/localizationprovider) component. | No       |
 
   **Important**: In order to use `queryShop`, you should pass `shopifyConfig` to `renderHydrogen` inside `App.server.jsx`:
 

package/dist/esnext/components/LocalizationProvider/LocalizationProvider.server.js

@@ -2,7 +2,6 @@ import React from 'react';
 import LocalizationClientProvider from './LocalizationClientProvider.client';
 import { useShop } from '../../foundation/useShop';
 import { useServerRequest } from '../../foundation/ServerRequestProvider';
-import { CountryCode } from '../../storefront-api-types';
 /**
  * The `LocalizationProvider` component automatically queries the Storefront API's
  * [`localization`](https://shopify.dev/api/storefront/reference/common-objects/queryroot) field
@@ -11,8 +10,7 @@ import { CountryCode } from '../../storefront-api-types';
  * Any descendents of this provider can use the `useLocalization` hook.
  */
 export function LocalizationProvider(props) {
-    const { languageCode: defaultLanguageCode, locale } = useShop();
-    const defaultCountryCode = locale.split(/[-_]/)[1] || CountryCode.Us;
+    const { defaultLanguageCode, defaultCountryCode } = useShop();
     const languageCode = (props.languageCode ?? defaultLanguageCode).toUpperCase();
     const countryCode = (props.countryCode ?? defaultCountryCode).toUpperCase();
     const request = useServerRequest();

package/dist/esnext/components/Money/Money.client.d.ts

@@ -19,7 +19,7 @@ declare type MoneyProps<ComponentGeneric extends React.ElementType> = CustomProp
 /**
  * The `Money` component renders a string of the Storefront API's
  * [MoneyV2 object](https://shopify.dev/api/storefront/reference/common-objects/moneyv2) according to the
- * `defaultLocale` in [the `hydrogen.config.js` file](https://shopify.dev/custom-storefronts/hydrogen/framework/hydrogen-config).
+ * `locale` in [the `LocalizationProvider` component](https://shopify.dev/api/hydrogen/components/localization/localizationprovider).
  */
 export declare function Money<TTag extends React.ElementType>({ data, as, withoutCurrency, withoutTrailingZeros, measurement, measurementSeparator, ...passthroughProps }: MoneyProps<TTag>): JSX.Element;
 export {};

package/dist/esnext/components/Money/Money.client.js

@@ -3,7 +3,7 @@ import { useMoney } from '../../hooks';
 /**
  * The `Money` component renders a string of the Storefront API's
  * [MoneyV2 object](https://shopify.dev/api/storefront/reference/common-objects/moneyv2) according to the
- * `defaultLocale` in [the `hydrogen.config.js` file](https://shopify.dev/custom-storefronts/hydrogen/framework/hydrogen-config).
+ * `locale` in [the `LocalizationProvider` component](https://shopify.dev/api/hydrogen/components/localization/localizationprovider).
  */
 export function Money({ data, as, withoutCurrency, withoutTrailingZeros, measurement, measurementSeparator = '/', ...passthroughProps }) {
     if (!isMoney(data)) {

package/dist/esnext/foundation/Analytics/ServerAnalyticsRoute.js

@@ -1,36 +1,51 @@
 import { log } from '../../utilities/log';
+const analyticsDefaultResponse = new Response(null, {
+    status: 200,
+});
 export async function ServerAnalyticsRoute(request, { hydrogenConfig }) {
+    const serverAnalyticsConnectors = hydrogenConfig.serverAnalyticsConnectors;
+    if (!serverAnalyticsConnectors) {
+        return analyticsDefaultResponse;
+    }
     const requestHeader = request.headers;
     const requestUrl = request.url;
-    const serverAnalyticsConnectors = hydrogenConfig.serverAnalyticsConnectors;
+    let analyticsPromise;
     if (requestHeader.get('Content-Length') === '0') {
-        serverAnalyticsConnectors?.forEach((connector) => {
-            connector.request(requestUrl, request.headers);
+        analyticsPromise = Promise.resolve(true)
+            .then(async () => {
+            return Promise.all(serverAnalyticsConnectors.map(async (connector) => {
+                return await connector.request(requestUrl, requestHeader);
+            }));
+        })
+            .catch((error) => {
+            log.warn('Failed to resolve server analytics (no content length): ', error);
         });
     }
     else if (requestHeader.get('Content-Type') === 'application/json') {
-        Promise.resolve(request.json())
+        analyticsPromise = Promise.resolve(request.json())
             .then((data) => {
-            serverAnalyticsConnectors?.forEach((connector) => {
-                connector.request(requestUrl, requestHeader, data, 'json');
-            });
+            return Promise.all(serverAnalyticsConnectors.map(async (connector) => {
+                return await connector.request(requestUrl, requestHeader, data, 'json');
+            }));
         })
             .catch((error) => {
-            log.warn('Fail to resolve server analytics: ', error);
+            log.warn('Fail to resolve server analytics (json): ', error);
         });
     }
     else {
-        Promise.resolve(request.text())
-            .then((data) => {
-            serverAnalyticsConnectors?.forEach((connector) => {
-                connector.request(requestUrl, requestHeader, data, 'text');
+        analyticsPromise = Promise.resolve(request.text())
+            .then(async (data) => {
+            await serverAnalyticsConnectors.forEach(async (connector) => {
+                await connector.request(requestUrl, requestHeader, data, 'text');
             });
+            return Promise.all(serverAnalyticsConnectors.map(async (connector) => {
+                return await connector.request(requestUrl, requestHeader, data, 'text');
+            }));
         })
             .catch((error) => {
-            log.warn('Fail to resolve server analytics: ', error);
+            log.warn('Failed to resolve server analytics (text): ', error);
         });
     }
-    return new Response(null, {
-        status: 200,
-    });
+    await analyticsPromise;
+    return analyticsDefaultResponse;
 }

package/dist/esnext/foundation/Analytics/connectors/PerformanceMetrics/PerformanceMetrics.client.js

@@ -15,10 +15,27 @@ export function PerformanceMetrics() {
                 // Executes only on first mount
                 window.BOOMR = window.BOOMR || {};
                 window.BOOMR.hydrogenPerformanceEvent = (data) => {
+                    const initTime = new Date().getTime();
                     ClientAnalytics.publish(ClientAnalytics.eventNames.PERFORMANCE, true, data);
-                    ClientAnalytics.pushToServer({
-                        body: JSON.stringify(data),
-                    }, ClientAnalytics.eventNames.PERFORMANCE);
+                    const pageData = ClientAnalytics.getPageAnalyticsData();
+                    const shopId = pageData.shopify.shopId || '';
+                    fetch('https://monorail-edge.shopifysvc.com/v1/produce', {
+                        method: 'post',
+                        headers: {
+                            'content-type': 'text/plain',
+                        },
+                        body: JSON.stringify({
+                            schema_id: 'hydrogen_buyer_performance/2.0',
+                            payload: {
+                                ...data,
+                                shop_id: shopId.substring(shopId.lastIndexOf('/') + 1) || '',
+                            },
+                            metadata: {
+                                event_created_at_ms: initTime,
+                                event_sent_at_ms: new Date().getTime(),
+                            },
+                        }),
+                    });
                 };
                 window.BOOMR.storeDomain = storeDomain;
                 function boomerangSaveLoadTime(e) {

package/dist/esnext/foundation/Analytics/connectors/PerformanceMetrics/ServerAnalyticsConnector.d.ts

@@ -1,3 +1,3 @@
 export declare const PerformanceMetricsServerAnalyticsConnector: {
-    request(requestUrl: string, requestHeader: Headers, data?: any, contentType?: string): void;
+    request(): Promise<any>;
 };

package/dist/esnext/foundation/Analytics/connectors/PerformanceMetrics/ServerAnalyticsConnector.js

@@ -1,27 +1,7 @@
 import { log } from '../../../../utilities/log';
 export const PerformanceMetricsServerAnalyticsConnector = {
-    request(requestUrl, requestHeader, data, contentType) {
-        const url = new URL(requestUrl);
-        if (url.search === '?performance' && contentType === 'json') {
-            const initTime = new Date().getTime();
-            fetch('https://monorail-edge.shopifysvc.com/v1/produce', {
-                method: 'post',
-                headers: {
-                    'content-type': 'text/plain',
-                    'x-forwarded-for': requestHeader.get('x-forwarded-for') || '',
-                    'user-agent': requestHeader.get('user-agent') || '',
-                },
-                body: JSON.stringify({
-                    schema_id: 'hydrogen_buyer_performance/2.0',
-                    payload: data,
-                    metadata: {
-                        event_created_at_ms: initTime,
-                        event_sent_at_ms: new Date().getTime(),
-                    },
-                }),
-            }).catch((err) => {
-                log.error(err);
-            });
-        }
+    request() {
+        log.warn('PerformanceMetricsServerAnalyticsConnector has been removed - please remove its reference from hydrogen.config.js');
+        return Promise.resolve();
     },
 };

package/dist/esnext/foundation/Analytics/connectors/Shopify/ServerAnalyticsConnector.d.ts

@@ -1,3 +1,3 @@
 export declare const ShopifyServerAnalyticsConnector: {
-    request(requestUrl: string, requestHeader: Headers, data?: any, contentType?: string): void;
+    request(): Promise<any>;
 };

package/dist/esnext/foundation/Analytics/connectors/Shopify/ServerAnalyticsConnector.js

@@ -1,21 +1,7 @@
 import { log } from '../../../../utilities/log';
 export const ShopifyServerAnalyticsConnector = {
-    request(requestUrl, requestHeader, data, contentType) {
-        const url = new URL(requestUrl);
-        if (url.search === '?shopify' && contentType === 'json') {
-            data.events.forEach((event) => {
-                event.payload.client_ip_address = requestHeader.get('x-forwarded-for');
-                event.payload.client_user_agent = requestHeader.get('user-agent');
-            });
-            fetch('https://monorail-edge.shopifysvc.com/unstable/produce_batch', {
-                method: 'post',
-                headers: {
-                    'content-type': 'text/plain',
-                },
-                body: JSON.stringify(data),
-            }).catch((err) => {
-                log.error(err);
-            });
-        }
+    request() {
+        log.warn('ShopifyServerAnalyticsConnector has been removed - please remove its reference from hydrogen.config.js');
+        return Promise.resolve();
     },
 };

package/dist/esnext/foundation/Analytics/connectors/Shopify/ShopifyAnalytics.client.js

@@ -165,19 +165,8 @@ function sendToServer(data) {
         };
         batchedData = [];
         batchedTimeout = null;
-        // Send to server
+        // Send to Shopify
         try {
-            fetch('/__event?shopify', {
-                method: 'post',
-                headers: {
-                    'cache-control': 'no-cache',
-                    'Content-Type': 'application/json',
-                },
-                body: JSON.stringify(batchedDataToBeSent),
-            });
-        }
-        catch (error) {
-            // Fallback to client-side
             fetch('https://monorail-edge.shopifysvc.com/unstable/produce_batch', {
                 method: 'post',
                 headers: {
@@ -186,5 +175,8 @@ function sendToServer(data) {
                 body: JSON.stringify(batchedDataToBeSent),
             });
         }
+        catch (error) {
+            // Do nothing
+        }
     }, BATCH_SENT_TIMEOUT);
 }

package/dist/esnext/foundation/Analytics/connectors/Shopify/ShopifyAnalytics.server.js

@@ -6,13 +6,23 @@ import { useServerAnalytics } from '../../hook';
 import { useShop } from '../../../useShop';
 import { SHOPIFY_S, SHOPIFY_Y } from './const';
 import { ShopifyAnalyticsClient } from './ShopifyAnalytics.client';
+import { useShopQuery } from '../../../../hooks/useShopQuery';
+import { CacheLong } from '../../../Cache/strategies';
+import { gql } from '../../../../utilities/graphql-tag';
 export function ShopifyAnalytics({ cookieDomain }) {
     const { storeDomain } = useShop();
     const request = useServerRequest();
     const cookies = parse(request.headers.get('Cookie') || '');
     const domain = cookieDomain || storeDomain;
+    const { data: { shop: { id, paymentSettings: { currencyCode }, }, }, } = useShopQuery({
+        query: SHOP_QUERY,
+        cache: CacheLong(),
+        preload: '*',
+    });
     useServerAnalytics({
         shopify: {
+            shopId: id,
+            currency: currencyCode,
             storefrontId: globalThis.Oxygen?.env?.SHOPIFY_STOREFRONT_ID || '0',
             acceptedLanguage: request.headers.get('Accept-Language')?.replace(/-.*/, '') || 'en',
             isPersistentCookie: !!cookies[SHOPIFY_S] || !!cookies[SHOPIFY_Y],
@@ -21,3 +31,13 @@ export function ShopifyAnalytics({ cookieDomain }) {
     return (React.createElement(AnalyticsErrorBoundary, null,
         React.createElement(ShopifyAnalyticsClient, { cookieDomain: domain })));
 }
+const SHOP_QUERY = gql `
+  query shopAnalyticsInfo {
+    shop {
+      id
+      paymentSettings {
+        currencyCode
+      }
+    }
+  }
+`;

package/dist/esnext/foundation/DevTools/DevTools.server.js

@@ -4,9 +4,9 @@ import { useServerRequest } from '../ServerRequestProvider';
 export function DevTools() {
     const serverRequest = useServerRequest();
     const { shopifyConfig } = serverRequest.ctx;
-    const { locale, storeDomain, storefrontApiVersion } = shopifyConfig || {};
+    const { defaultLanguageCode: languageCode, defaultCountryCode: countryCode, storeDomain, storefrontApiVersion, } = shopifyConfig || {};
     const settings = {
-        locale,
+        locale: `${languageCode}-${countryCode}`,
         storeDomain,
         storefrontApiVersion,
     };

package/dist/esnext/foundation/ShopifyProvider/ShopifyProvider.server.js

@@ -1,16 +1,16 @@
 import React, { useMemo } from 'react';
 import { ShopifyProviderClient } from './ShopifyProvider.client';
-import { DEFAULT_LOCALE } from '../constants';
+import { DEFAULT_COUNTRY, DEFAULT_LANGUAGE } from '../constants';
 import { useRequestCacheData, useServerRequest } from '../ServerRequestProvider';
 import { getOxygenVariable } from '../../utilities/storefrontApi';
 import { SHOPIFY_STOREFRONT_ID_VARIABLE } from '../../constants';
 function makeShopifyContext(shopifyConfig) {
-    const locale = shopifyConfig.defaultLocale ?? DEFAULT_LOCALE;
-    const languageCode = locale.split(/[-_]/)[0];
+    const countryCode = shopifyConfig.defaultCountryCode ?? DEFAULT_COUNTRY;
+    const languageCode = shopifyConfig.defaultLanguageCode ?? DEFAULT_LANGUAGE;
     const storefrontId = getOxygenVariable(SHOPIFY_STOREFRONT_ID_VARIABLE);
     return {
-        locale: locale.toUpperCase(),
-        languageCode: languageCode.toUpperCase(),
+        defaultCountryCode: countryCode.toUpperCase(),
+        defaultLanguageCode: languageCode.toUpperCase(),
         storeDomain: shopifyConfig?.storeDomain?.replace(/^https?:\/\//, ''),
         storefrontToken: shopifyConfig.storefrontToken,
         storefrontApiVersion: shopifyConfig.storefrontApiVersion,

package/dist/esnext/foundation/ShopifyProvider/types.d.ts

@@ -1,9 +1,9 @@
 import type { CountryCode, LanguageCode } from '../../storefront-api-types';
 import type { ReactNode } from 'react';
 import type { ShopifyConfigFetcher, ShopifyConfig } from '../../types';
-export interface ShopifyContextValue extends Omit<ShopifyConfig, 'defaultLocale'> {
-    locale: `${LanguageCode}-${CountryCode}`;
-    languageCode: `${LanguageCode}`;
+export interface ShopifyContextValue extends Omit<ShopifyConfig, 'defaultLanguageCode' | 'defaultCountryCode'> {
+    defaultLanguageCode: `${LanguageCode}`;
+    defaultCountryCode: `${CountryCode}`;
     storefrontId: string | null;
 }
 export declare type ShopifyProviderProps = {

package/dist/esnext/foundation/constants.d.ts

@@ -1 +1,2 @@
-export declare const DEFAULT_LOCALE = "EN-US";
+export declare const DEFAULT_COUNTRY = "US";
+export declare const DEFAULT_LANGUAGE = "EN";

package/dist/esnext/foundation/constants.js

@@ -1,3 +1,4 @@
 // Note: do not mix this export with other app-only logic
 // to avoid importing unnecessary code in the plugins.
-export const DEFAULT_LOCALE = 'EN-US';
+export const DEFAULT_COUNTRY = 'US';
+export const DEFAULT_LANGUAGE = 'EN';

package/dist/esnext/hooks/useMoney/hooks.d.ts

@@ -26,7 +26,7 @@ export declare type UseMoneyValue = {
     parts: Intl.NumberFormatPart[];
     /**
      * A string returned by `new Intl.NumberFormat` for the amount and currency code,
-     * using the `defaultLocale` value in [`hydrogenConfig.shopify`](https://shopify.dev/custom-storefronts/hydrogen/framework/hydrogen-config).
+     * using the `locale` value in the [`LocalizationProvider` component](https://shopify.dev/api/hydrogen/components/localization/localizationprovider).
      */
     localizedString: string;
     /**

package/dist/esnext/shared-types.d.ts

@@ -18,7 +18,8 @@ export interface RequestHandler {
     (request: Request | IncomingMessage, options: RequestHandlerOptions): Promise<Response | undefined>;
 }
 export declare type ShopifyConfig = {
-    defaultLocale?: string;
+    defaultLanguageCode?: string;
+    defaultCountryCode?: string;
     storeDomain: string;
     storefrontToken: string;
     storefrontApiVersion: string;

package/dist/esnext/types.d.ts

@@ -54,7 +54,7 @@ export declare type ResolvedHydrogenRoutes = {
 declare type ConfigFetcher<T> = (request: HydrogenRequest) => T | Promise<T>;
 export declare type ShopifyConfigFetcher = ConfigFetcher<ShopifyConfig>;
 export declare type ServerAnalyticsConnector = {
-    request: (requestUrl: string, requestHeader: Headers, data?: any, contentType?: 'json' | 'text') => void;
+    request: (requestUrl: string, requestHeader: Headers, data?: any, contentType?: 'json' | 'text') => Promise<any>;
 };
 export declare type InlineHydrogenConfig = ClientConfig & {
     routes?: InlineHydrogenRoutes;

package/dist/esnext/version.d.ts

@@ -1 +1 @@
-export declare const LIB_VERSION = "0.26.1";
+export declare const LIB_VERSION = "0.27.2";

package/dist/esnext/version.js

@@ -1 +1 @@
-export const LIB_VERSION = '0.26.1';
+export const LIB_VERSION = '0.27.2';

package/dist/node/shared-types.d.ts

@@ -18,7 +18,8 @@ export interface RequestHandler {
     (request: Request | IncomingMessage, options: RequestHandlerOptions): Promise<Response | undefined>;
 }
 export declare type ShopifyConfig = {
-    defaultLocale?: string;
+    defaultLanguageCode?: string;
+    defaultCountryCode?: string;
     storeDomain: string;
     storefrontToken: string;
     storefrontApiVersion: string;

package/package.json

@@ -7,7 +7,7 @@
   "engines": {
     "node": ">=14"
   },
-  "version": "0.26.1",
+  "version": "0.27.2",
   "description": "Modern custom Shopify storefronts",
   "license": "MIT",
   "main": "dist/esnext/index.js",