Remove mock.shop from .env (#1971)

* Make mock.shop default in storefront client

* Show warning as info

* Enhance log in CLI

* Remove mock.shop from templates

* Changesets

* Fix lint

* Update packages/hydrogen-react/src/storefront-client.ts

Co-authored-by: Graham F. Scott <gfscott@users.noreply.github.com>

---------

Co-authored-by: Juan P. Prieto <jp@calltheguys.co>
Co-authored-by: Graham F. Scott <gfscott@users.noreply.github.com>

.changeset/spicy-lemons-impress.md

@@ -0,0 +1,6 @@
+---
+'@shopify/hydrogen-react': patch
+'@shopify/hydrogen': patch
+---
+
+Fall back to "mock.shop" when no value is passed in `storeDomain` to `createStorefrontClient`.

packages/cli/src/lib/log.ts

@@ -62,8 +62,9 @@ function debounceMessage(args: unknown[], debounceFor?: true | number) {
 function warningDebouncer([first]: unknown[]) {
   return typeof first === 'string' &&
     // Show these warnings only once.
-    (first.includes('[h2:warn:createStorefrontClient]') ||
-      first.includes('[h2:warn:createCustomerAccountClient]'))
+    /\[h2:(warn|info):(createStorefrontClient|createCustomerAccountClient)\]/.test(
+      first,
+    )
     ? true
     : undefined;
 }
@@ -325,6 +326,7 @@ export function enhanceH2Logs(options: {
   injectLogReplacer('error');
   injectLogReplacer('warn', warningDebouncer);
   injectLogReplacer('log', warningDebouncer);
+  injectLogReplacer('info', warningDebouncer);
 
   addMessageReplacers('h2-warn', [
     ([first]) => {
@@ -338,7 +340,15 @@ export function enhanceH2Logs(options: {
           ? (firstArg as Error)
           : undefined;
 
-      const stringArg = errorObject?.message ?? (firstArg as string);
+      let stringArg = errorObject?.message ?? (firstArg as string);
+
+      if (
+        stringArg.startsWith('[h2:info:createStorefrontClient]') &&
+        stringArg.includes('"mock.shop"')
+      ) {
+        // This message comes from hydrogen-react. Let's enhance it:
+        stringArg += '\nRun `h2 link` to link your store.';
+      }
 
       const [, type, scope, message] =
         stringArg.match(/\[h2:([^:]+):([^\]]+)\]\s+(.*)$/ims) || [];

packages/hydrogen-react/src/storefront-client.test.ts

@@ -200,11 +200,9 @@ describe(`createStorefrontClient`, () => {
 
 type StorefrontClientProps = Parameters<typeof createStorefrontClient>[0];
 
-function generateConfig(
-  props?: Partial<StorefrontClientProps>,
-): StorefrontClientProps {
+function generateConfig(props?: Partial<StorefrontClientProps>) {
   return {
     storeDomain: 'https://testing.myshopify.com',
     ...props,
-  };
+  } satisfies StorefrontClientProps;
 }

packages/hydrogen-react/src/storefront-client.ts

@@ -2,7 +2,7 @@ import {SFAPI_VERSION} from './storefront-api-constants.js';
 
 export type StorefrontClientProps = {
   /** The host name of the domain (eg: `{shop}.myshopify.com`). */
-  storeDomain: string;
+  storeDomain?: string;
   /** The Storefront API delegate access token. Refer to the [authentication](https://shopify.dev/api/storefront#authentication) and [delegate access token](https://shopify.dev/apps/auth/oauth/delegate-access-tokens) documentation for more details. */
   privateStorefrontToken?: string;
   /** The Storefront API access token. Refer to the [authentication](https://shopify.dev/api/storefront#authentication) documentation for more details. */
@@ -17,28 +17,27 @@ export type StorefrontClientProps = {
   contentType?: 'json' | 'graphql';
 };
 
-const isMockShop = (domain: string): boolean => domain.includes('mock.shop');
+const MOCK_SHOP_DOMAIN = 'mock.shop';
+const isMockShop = (domain: string): boolean =>
+  domain.includes(MOCK_SHOP_DOMAIN);
 
 /**
  * The `createStorefrontClient()` function creates helpers that enable you to quickly query the Shopify Storefront API.
  *
  * When used on the server, it is recommended to use the `privateStorefrontToken` prop. When used on the client, it is recommended to use the `publicStorefrontToken` prop.
  */
-export function createStorefrontClient(
-  props: StorefrontClientProps,
-): StorefrontClientReturn {
-  const {
-    storeDomain,
-    privateStorefrontToken,
-    publicStorefrontToken,
-    storefrontApiVersion = SFAPI_VERSION,
-    contentType,
-  } = props;
-
+export function createStorefrontClient({
+  storeDomain,
+  privateStorefrontToken,
+  publicStorefrontToken,
+  storefrontApiVersion = SFAPI_VERSION,
+  contentType,
+}: StorefrontClientProps): StorefrontClientReturn {
   if (!storeDomain) {
-    throw new Error(
-      H2_PREFIX_ERROR +
-        `\`storeDomain\` is required when creating a new Storefront client.\nReceived "${storeDomain}".`,
+    storeDomain = MOCK_SHOP_DOMAIN;
+    warnOnce(
+      `storeDomain missing, defaulting to ${MOCK_SHOP_DOMAIN}`,
+      'info',
     );
   }
 
@@ -173,10 +172,9 @@ export function getPublicTokenHeadersRaw(
 
 const warnings = new Set<string>();
 const H2_PREFIX_ERROR = '[h2:error:createStorefrontClient] ';
-const H2_PREFIX_WARN = '[h2:warn:createStorefrontClient] ';
-const warnOnce = (string: string): void => {
+const warnOnce = (string: string, type: 'warn' | 'info' = 'warn'): void => {
   if (!warnings.has(string)) {
-    console.warn(H2_PREFIX_WARN + string);
+    console[type](`[h2:${type}:createStorefrontClient] ` + string);
     warnings.add(string);
   }
 };

templates/hello-world/.env

@@ -1,4 +1,3 @@
 # These variables are only available locally in MiniOxygen
 
 SESSION_SECRET="foobar"
-PUBLIC_STORE_DOMAIN="mock.shop"

templates/skeleton/.env

@@ -1,4 +1,3 @@
 # These variables are only available locally in MiniOxygen
 
 SESSION_SECRET="foobar"
-PUBLIC_STORE_DOMAIN="mock.shop"