@shopify/cli-hydrogen 5.1.2 → 5.2.1

package/dist/generator-templates/starter/app/routes/products.$handle.tsx

@@ -1,8 +1,12 @@
 import {Suspense} from 'react';
-import type {V2_MetaFunction} from '@shopify/remix-oxygen';
 import {defer, redirect, type LoaderArgs} from '@shopify/remix-oxygen';
-import type {FetcherWithComponents} from '@remix-run/react';
-import {Await, Link, useLoaderData} from '@remix-run/react';
+import {
+  Await,
+  Link,
+  useLoaderData,
+  type V2_MetaFunction,
+  type FetcherWithComponents,
+} from '@remix-run/react';
 import type {
   ProductFragment,
   ProductVariantsQuery,
@@ -17,7 +21,10 @@ import {
   getSelectedProductOptions,
   CartForm,
 } from '@shopify/hydrogen';
-import type {CartLineInput} from '@shopify/hydrogen/storefront-api-types';
+import type {
+  CartLineInput,
+  SelectedOption,
+} from '@shopify/hydrogen/storefront-api-types';
 import {getVariantUrl} from '~/utils';
 
 export const meta: V2_MetaFunction = ({data}) => {
@@ -47,15 +54,6 @@ export async function loader({params, request, context}: LoaderArgs) {
     variables: {handle, selectedOptions},
   });
 
-  // In order to show which variants are available in the UI, we need to query
-  // all of them. But there might be a *lot*, so instead separate the variants
-  // into it's own separate query that is deferred. So there's a brief moment
-  // where variant options might show as available when they're not, but after
-  // this deffered query resolves, the UI will update.
-  const variants = storefront.query(VARIANTS_QUERY, {
-    variables: {handle},
-  });
-
   if (!product?.id) {
     throw new Response(null, {status: 404});
   }
@@ -63,7 +61,8 @@ export async function loader({params, request, context}: LoaderArgs) {
   const firstVariant = product.variants.nodes[0];
   const firstVariantIsDefault = Boolean(
     firstVariant.selectedOptions.find(
-      (option) => option.name === 'Title' && option.value === 'Default Title',
+      (option: SelectedOption) =>
+        option.name === 'Title' && option.value === 'Default Title',
     ),
   );
 
@@ -76,6 +75,16 @@ export async function loader({params, request, context}: LoaderArgs) {
       return redirectToFirstVariant({product, request});
     }
   }
+
+  // In order to show which variants are available in the UI, we need to query
+  // all of them. But there might be a *lot*, so instead separate the variants
+  // into it's own separate query that is deferred. So there's a brief moment
+  // where variant options might show as available when they're not, but after
+  // this deffered query resolves, the UI will update.
+  const variants = storefront.query(VARIANTS_QUERY, {
+    variables: {handle},
+  });
+
   return defer({product, variants});
 }
 
@@ -337,7 +346,6 @@ const PRODUCT_VARIANT_FRAGMENT = `#graphql
       title
       handle
     }
-    quantityAvailable
     selectedOptions {
       name
       value

package/dist/generator-templates/starter/app/routes/search.tsx

@@ -1,6 +1,5 @@
-import type {V2_MetaFunction} from '@shopify/remix-oxygen';
 import {defer, type LoaderArgs} from '@shopify/remix-oxygen';
-import {useLoaderData} from '@remix-run/react';
+import {useLoaderData, type V2_MetaFunction} from '@remix-run/react';
 import {getPaginationVariables} from '@shopify/hydrogen';
 
 import {SearchForm, SearchResults, NoSearchResults} from '~/components/Search';

package/dist/generator-templates/starter/package.json

@@ -15,8 +15,8 @@
   "dependencies": {
     "@remix-run/react": "1.19.1",
     "@shopify/cli": "3.48.0",
-    "@shopify/cli-hydrogen": "^5.1.2",
-    "@shopify/hydrogen": "^2023.7.2",
+    "@shopify/cli-hydrogen": "^5.2.1",
+    "@shopify/hydrogen": "^2023.7.4",
     "@shopify/remix-oxygen": "^1.1.3",
     "graphql": "^16.6.0",
     "graphql-tag": "^2.12.6",
@@ -30,12 +30,12 @@
     "@shopify/prettier-config": "^1.1.2",
     "@total-typescript/ts-reset": "^0.4.2",
     "@types/eslint": "^8.4.10",
-    "@types/react": "^18.0.20",
-    "@types/react-dom": "^18.0.6",
+    "@types/react": "^18.2.20",
+    "@types/react-dom": "^18.2.7",
     "eslint": "^8.20.0",
     "eslint-plugin-hydrogen": "0.12.2",
     "prettier": "^2.8.4",
-    "typescript": "^4.9.5"
+    "typescript": "^5.2.2"
   },
   "engines": {
     "node": ">=16.13"

package/dist/generator-templates/starter/remix.config.js

@@ -17,6 +17,7 @@ module.exports = {
   serverPlatform: 'neutral',
   serverMinify: process.env.NODE_ENV === 'production',
   future: {
+    v2_dev: true,
     v2_meta: true,
     v2_headers: true,
     v2_errorBoundary: true,

package/dist/generator-templates/starter/storefrontapi.generated.d.ts

@@ -1350,7 +1350,7 @@ export type PoliciesQuery = {
 
 export type ProductVariantFragment = Pick<
   StorefrontAPI.ProductVariant,
-  'availableForSale' | 'id' | 'quantityAvailable' | 'sku' | 'title'
+  'availableForSale' | 'id' | 'sku' | 'title'
 > & {
   compareAtPrice?: StorefrontAPI.Maybe<
     Pick<StorefrontAPI.MoneyV2, 'amount' | 'currencyCode'>
@@ -1377,7 +1377,7 @@ export type ProductFragment = Pick<
   selectedVariant?: StorefrontAPI.Maybe<
     Pick<
       StorefrontAPI.ProductVariant,
-      'availableForSale' | 'id' | 'quantityAvailable' | 'sku' | 'title'
+      'availableForSale' | 'id' | 'sku' | 'title'
     > & {
       compareAtPrice?: StorefrontAPI.Maybe<
         Pick<StorefrontAPI.MoneyV2, 'amount' | 'currencyCode'>
@@ -1402,7 +1402,7 @@ export type ProductFragment = Pick<
     nodes: Array<
       Pick<
         StorefrontAPI.ProductVariant,
-        'availableForSale' | 'id' | 'quantityAvailable' | 'sku' | 'title'
+        'availableForSale' | 'id' | 'sku' | 'title'
       > & {
         compareAtPrice?: StorefrontAPI.Maybe<
           Pick<StorefrontAPI.MoneyV2, 'amount' | 'currencyCode'>
@@ -1446,7 +1446,7 @@ export type ProductQuery = {
       selectedVariant?: StorefrontAPI.Maybe<
         Pick<
           StorefrontAPI.ProductVariant,
-          'availableForSale' | 'id' | 'quantityAvailable' | 'sku' | 'title'
+          'availableForSale' | 'id' | 'sku' | 'title'
         > & {
           compareAtPrice?: StorefrontAPI.Maybe<
             Pick<StorefrontAPI.MoneyV2, 'amount' | 'currencyCode'>
@@ -1471,7 +1471,7 @@ export type ProductQuery = {
         nodes: Array<
           Pick<
             StorefrontAPI.ProductVariant,
-            'availableForSale' | 'id' | 'quantityAvailable' | 'sku' | 'title'
+            'availableForSale' | 'id' | 'sku' | 'title'
           > & {
             compareAtPrice?: StorefrontAPI.Maybe<
               Pick<StorefrontAPI.MoneyV2, 'amount' | 'currencyCode'>
@@ -1503,7 +1503,7 @@ export type ProductVariantsFragment = {
     nodes: Array<
       Pick<
         StorefrontAPI.ProductVariant,
-        'availableForSale' | 'id' | 'quantityAvailable' | 'sku' | 'title'
+        'availableForSale' | 'id' | 'sku' | 'title'
       > & {
         compareAtPrice?: StorefrontAPI.Maybe<
           Pick<StorefrontAPI.MoneyV2, 'amount' | 'currencyCode'>
@@ -1539,7 +1539,7 @@ export type ProductVariantsQuery = {
       nodes: Array<
         Pick<
           StorefrontAPI.ProductVariant,
-          'availableForSale' | 'id' | 'quantityAvailable' | 'sku' | 'title'
+          'availableForSale' | 'id' | 'sku' | 'title'
         > & {
           compareAtPrice?: StorefrontAPI.Maybe<
             Pick<StorefrontAPI.MoneyV2, 'amount' | 'currencyCode'>
@@ -1839,11 +1839,11 @@ interface GeneratedQueryTypes {
     return: PoliciesQuery;
     variables: PoliciesQueryVariables;
   };
-  '#graphql\n  query Product(\n    $country: CountryCode\n    $handle: String!\n    $language: LanguageCode\n    $selectedOptions: [SelectedOptionInput!]!\n  ) @inContext(country: $country, language: $language) {\n    product(handle: $handle) {\n      ...Product\n    }\n  }\n  #graphql\n  fragment Product on Product {\n    id\n    title\n    vendor\n    handle\n    descriptionHtml\n    description\n    options {\n      name\n      values\n    }\n    selectedVariant: variantBySelectedOptions(selectedOptions: $selectedOptions) {\n      ...ProductVariant\n    }\n    variants(first: 1) {\n      nodes {\n        ...ProductVariant\n      }\n    }\n    seo {\n      description\n      title\n    }\n  }\n  #graphql\n  fragment ProductVariant on ProductVariant {\n    availableForSale\n    compareAtPrice {\n      amount\n      currencyCode\n    }\n    id\n    image {\n      __typename\n      id\n      url\n      altText\n      width\n      height\n    }\n    price {\n      amount\n      currencyCode\n    }\n    product {\n      title\n      handle\n    }\n    quantityAvailable\n    selectedOptions {\n      name\n      value\n    }\n    sku\n    title\n    unitPrice {\n      amount\n      currencyCode\n    }\n  }\n\n\n': {
+  '#graphql\n  query Product(\n    $country: CountryCode\n    $handle: String!\n    $language: LanguageCode\n    $selectedOptions: [SelectedOptionInput!]!\n  ) @inContext(country: $country, language: $language) {\n    product(handle: $handle) {\n      ...Product\n    }\n  }\n  #graphql\n  fragment Product on Product {\n    id\n    title\n    vendor\n    handle\n    descriptionHtml\n    description\n    options {\n      name\n      values\n    }\n    selectedVariant: variantBySelectedOptions(selectedOptions: $selectedOptions) {\n      ...ProductVariant\n    }\n    variants(first: 1) {\n      nodes {\n        ...ProductVariant\n      }\n    }\n    seo {\n      description\n      title\n    }\n  }\n  #graphql\n  fragment ProductVariant on ProductVariant {\n    availableForSale\n    compareAtPrice {\n      amount\n      currencyCode\n    }\n    id\n    image {\n      __typename\n      id\n      url\n      altText\n      width\n      height\n    }\n    price {\n      amount\n      currencyCode\n    }\n    product {\n      title\n      handle\n    }\n    selectedOptions {\n      name\n      value\n    }\n    sku\n    title\n    unitPrice {\n      amount\n      currencyCode\n    }\n  }\n\n\n': {
     return: ProductQuery;
     variables: ProductQueryVariables;
   };
-  '#graphql\n  #graphql\n  fragment ProductVariants on Product {\n    variants(first: 250) {\n      nodes {\n        ...ProductVariant\n      }\n    }\n  }\n  #graphql\n  fragment ProductVariant on ProductVariant {\n    availableForSale\n    compareAtPrice {\n      amount\n      currencyCode\n    }\n    id\n    image {\n      __typename\n      id\n      url\n      altText\n      width\n      height\n    }\n    price {\n      amount\n      currencyCode\n    }\n    product {\n      title\n      handle\n    }\n    quantityAvailable\n    selectedOptions {\n      name\n      value\n    }\n    sku\n    title\n    unitPrice {\n      amount\n      currencyCode\n    }\n  }\n\n\n  query ProductVariants(\n    $country: CountryCode\n    $language: LanguageCode\n    $handle: String!\n  ) @inContext(country: $country, language: $language) {\n    product(handle: $handle) {\n      ...ProductVariants\n    }\n  }\n': {
+  '#graphql\n  #graphql\n  fragment ProductVariants on Product {\n    variants(first: 250) {\n      nodes {\n        ...ProductVariant\n      }\n    }\n  }\n  #graphql\n  fragment ProductVariant on ProductVariant {\n    availableForSale\n    compareAtPrice {\n      amount\n      currencyCode\n    }\n    id\n    image {\n      __typename\n      id\n      url\n      altText\n      width\n      height\n    }\n    price {\n      amount\n      currencyCode\n    }\n    product {\n      title\n      handle\n    }\n    selectedOptions {\n      name\n      value\n    }\n    sku\n    title\n    unitPrice {\n      amount\n      currencyCode\n    }\n  }\n\n\n  query ProductVariants(\n    $country: CountryCode\n    $language: LanguageCode\n    $handle: String!\n  ) @inContext(country: $country, language: $language) {\n    product(handle: $handle) {\n      ...ProductVariants\n    }\n  }\n': {
     return: ProductVariantsQuery;
     variables: ProductVariantsQueryVariables;
   };

package/dist/generator-templates/starter/tsconfig.json

@@ -7,6 +7,7 @@
     "jsx": "react-jsx",
     "moduleResolution": "node",
     "resolveJsonModule": true,
+    "module": "ES2022",
     "target": "ES2022",
     "strict": true,
     "allowJs": true,

package/dist/lib/ast.js

@@ -0,0 +1,9 @@
+async function importLangAstGrep(lang) {
+  const astGrep = await import('@ast-grep/napi');
+  if (!(lang in astGrep)) {
+    throw new Error(`Wrong language for AST: ${lang}`);
+  }
+  return astGrep[lang];
+}
+
+export { importLangAstGrep };

package/dist/lib/check-version.test.js

@@ -34,6 +34,7 @@ describe("checkHydrogenVersion()", () => {
       await checkHydrogenVersion("dir");
       expect(checkForNewVersion).toHaveBeenCalledWith(
         "@shopify/hydrogen",
+        // Calver
         expect.stringMatching(/20\d{2}\.\d{1,2}\.\d{1,3}/)
       );
     });

package/dist/lib/codegen.js

@@ -2,7 +2,7 @@ import { loadCodegenConfig, generate } from '@graphql-codegen/cli';
 import { patchGqlPluck, pluckConfig, preset, schema } from '@shopify/hydrogen-codegen';
 import { getCodeFormatOptions, formatCode } from './format-code.js';
 import { renderWarning, renderFatalError } from '@shopify/cli-kit/node/ui';
-import { joinPath } from '@shopify/cli-kit/node/path';
+import { relativePath, joinPath } from '@shopify/cli-kit/node/path';
 import { AbortError } from '@shopify/cli-kit/node/error';
 import { spawn } from 'node:child_process';
 import { fileURLToPath } from 'node:url';
@@ -82,16 +82,22 @@ async function generateTypes({
   forceSfapiVersion,
   ...dirs
 }) {
-  const { config: codegenConfig } = await loadCodegenConfig({
-    configFilePath,
-    searchPlaces: [dirs.rootDirectory]
-  }) || generateDefaultConfig(dirs, forceSfapiVersion);
+  const { config: codegenConfig } = (
+    // Load <root>/codegen.ts if available
+    await loadCodegenConfig({
+      configFilePath,
+      searchPlaces: [dirs.rootDirectory]
+    }) || // Fall back to default config
+    generateDefaultConfig(dirs, forceSfapiVersion)
+  );
   await addHooksToHydrogenOptions(codegenConfig, dirs);
   await generate(
     {
       ...codegenConfig,
       cwd: dirs.rootDirectory,
       watch,
+      // Note: do not use `silent` without `watch`, it will swallow errors and
+      // won't hide all logs. `errorsOnly` flag doesn't work either.
       silent: !watch
     },
     true
@@ -100,6 +106,7 @@ async function generateTypes({
 }
 function generateDefaultConfig({ rootDirectory, appDirectory }, forceSfapiVersion) {
   const tsDefaultGlob = "*!(*.d).{ts,tsx}";
+  const appDirRelative = relativePath(rootDirectory, appDirectory);
   return {
     filepath: "virtual:codegen",
     config: {
@@ -110,8 +117,10 @@ function generateDefaultConfig({ rootDirectory, appDirectory }, forceSfapiVersio
           preset,
           schema,
           documents: [
-            joinPath(rootDirectory, tsDefaultGlob),
-            joinPath(appDirectory, "**", tsDefaultGlob)
+            tsDefaultGlob,
+            // E.g. ./server.ts
+            joinPath(appDirRelative, "**", tsDefaultGlob)
+            // E.g. app/routes/_index.tsx
           ],
           ...!!forceSfapiVersion && {
             presetConfig: { importTypes: false },
@@ -142,6 +151,7 @@ async function addHooksToHydrogenOptions(codegenConfig, { rootDirectory }) {
     const formatConfig = await getCodeFormatOptions(rootDirectory);
     hydrogenOptions.hooks = {
       beforeOneFileWrite: (file, content) => formatCode(content, formatConfig, file),
+      // Run Prettier before writing files
       ...hydrogenOptions.hooks
     };
   }

package/dist/lib/environment-variables.js

@@ -8,6 +8,10 @@ import colors from '@shopify/cli-kit/node/colors';
 import { getStorefrontEnvVariables } from './graphql/admin/pull-variables.js';
 import { login } from './auth.js';
 
+const createEmptyRemoteVars = () => ({
+  remoteVariables: {},
+  remoteSecrets: {}
+});
 async function getAllEnvironmentVariables({
   root,
   envBranch,
@@ -15,7 +19,15 @@ async function getAllEnvironmentVariables({
 }) {
   const dotEnvPath = resolvePath(root, ".env");
   const [{ remoteVariables, remoteSecrets }, { variables: localVariables }] = await Promise.all([
-    fetchRemote ? getRemoteVariables(root, envBranch) : { remoteVariables: {}, remoteSecrets: {} },
+    // Get remote vars
+    fetchRemote ? getRemoteVariables(root, envBranch).catch((error) => {
+      renderWarning({
+        headline: "Failed to load environment variables from Shopify. The development server will still start, but the following error occurred:",
+        body: [error.message, error.tryMessage, error.nextSteps].filter(Boolean).join("\n\n")
+      });
+      return createEmptyRemoteVars();
+    }) : createEmptyRemoteVars(),
+    // Get local vars
     fileExists(dotEnvPath).then(
       (exists) => exists ? readAndParseDotEnv(dotEnvPath) : { variables: {} }
     )
@@ -29,6 +41,7 @@ async function getAllEnvironmentVariables({
       linesToColumns([
         ...remotePublicKeys.filter((key) => !localKeys.includes(key)).map((key) => [key, "from Oxygen"]),
         ...localKeys.map((key) => [key, "from local .env"]),
+        // Ensure secret variables always get added to the bottom of the list
         ...remoteSecretKeys.filter((key) => !localKeys.includes(key)).map((key) => [
           colors.dim(key),
           colors.dim("from Oxygen (Marked as secret)")
@@ -44,16 +57,7 @@ async function getAllEnvironmentVariables({
 }
 async function getRemoteVariables(root, envBranch) {
   const { session, config } = await login(root);
-  const envVariables = (await getStorefrontEnvVariables(
-    session,
-    config.storefront.id,
-    envBranch
-  ).catch((error) => {
-    renderWarning({
-      headline: `Failed to load environment variables. The development server will still start, but the following error occurred:`,
-      body: error?.stack ?? error?.message ?? error
-    });
-  }))?.environmentVariables || [];
+  const envVariables = (await getStorefrontEnvVariables(session, config.storefront.id, envBranch))?.environmentVariables || [];
   const remoteVariables = {};
   const remoteSecrets = {};
   for (const { key, value, isSecret } of envVariables) {

package/dist/lib/file.js

@@ -8,7 +8,7 @@ async function replaceFileContent(filepath, formatConfig, replacer) {
   if (typeof content !== "string")
     return;
   if (formatConfig) {
-    content = formatCode(content, formatConfig, filepath);
+    content = await formatCode(content, formatConfig, filepath);
   }
   return writeFile(filepath, content);
 }

package/dist/lib/find-port.js

@@ -0,0 +1,9 @@
+import getPort, { portNumbers } from 'get-port';
+
+function findPort(portPreference, range = 100) {
+  return getPort({
+    port: portNumbers(portPreference, portPreference + range)
+  });
+}
+
+export { findPort };

package/dist/lib/flags.js

@@ -3,9 +3,10 @@ import { camelize } from '@shopify/cli-kit/common/string';
 import { renderInfo } from '@shopify/cli-kit/node/ui';
 import { normalizeStoreFqdn } from '@shopify/cli-kit/node/context/fqdn';
 import colors from '@shopify/cli-kit/node/colors';
-import { SETUP_CSS_STRATEGIES } from './setups/css/index.js';
+import { STYLING_CHOICES } from './setups/css/index.js';
 import { I18N_CHOICES } from './setups/i18n/index.js';
 
+const DEFAULT_PORT = 3e3;
 const commonFlags = {
   path: Flags.string({
     description: "The path to the directory of the Hydrogen storefront. The default is the current directory.",
@@ -14,7 +15,7 @@ const commonFlags = {
   port: Flags.integer({
     description: "Port to run the server on.",
     env: "SHOPIFY_HYDROGEN_FLAG_PORT",
-    default: 3e3
+    default: DEFAULT_PORT
   }),
   force: Flags.boolean({
     description: "Overwrite the destination directory and files if they already exist.",
@@ -49,10 +50,10 @@ const commonFlags = {
     dependsOn: ["codegen-unstable"]
   }),
   styling: Flags.string({
-    description: `Sets the styling strategy to use. One of ${SETUP_CSS_STRATEGIES.map(
+    description: `Sets the styling strategy to use. One of ${STYLING_CHOICES.map(
       (item) => `\`${item}\``
     ).join(", ")}.`,
-    choices: SETUP_CSS_STRATEGIES,
+    choices: STYLING_CHOICES,
     env: "SHOPIFY_HYDROGEN_FLAG_STYLING"
   }),
   markets: Flags.string({
@@ -112,4 +113,4 @@ function overrideFlag(flag, extra) {
   };
 }
 
-export { commonFlags, deprecated, flagsToCamelObject, overrideFlag, parseProcessFlags };
+export { DEFAULT_PORT, commonFlags, deprecated, flagsToCamelObject, overrideFlag, parseProcessFlags };

package/dist/lib/format-code.js

@@ -1,4 +1,3 @@
-import prettier from 'prettier';
 import { extname } from '@shopify/cli-kit/node/path';
 
 const DEFAULT_PRETTIER_CONFIG = {
@@ -9,18 +8,22 @@ const DEFAULT_PRETTIER_CONFIG = {
 };
 async function getCodeFormatOptions(filePath = process.cwd()) {
   try {
+    const prettier = await import('prettier');
     return await prettier.resolveConfig(filePath) || DEFAULT_PRETTIER_CONFIG;
   } catch {
     return DEFAULT_PRETTIER_CONFIG;
   }
 }
-function formatCode(content, config = DEFAULT_PRETTIER_CONFIG, filePath = "") {
+async function formatCode(content, config = DEFAULT_PRETTIER_CONFIG, filePath = "") {
   const ext = extname(filePath);
-  const formattedContent = prettier.format(content, {
+  const prettier = await import('prettier');
+  return prettier.format(content, {
+    // Specify the TypeScript parser for ts/tsx files. Otherwise
+    // we need to use the babel parser because the default parser
+    // Otherwise prettier will print a warning.
     parser: ext === ".tsx" || ext === ".ts" ? "typescript" : "babel",
     ...config
   });
-  return formattedContent;
 }
 
 export { formatCode, getCodeFormatOptions };

package/dist/lib/graphql/admin/client.js

@@ -20,6 +20,24 @@ async function adminRequest(query, session, variables) {
         "Install the Hydrogen sales channel on your store to start creating and linking Hydrogen storefronts: https://apps.shopify.com/hydrogen"
       );
     }
+    if (errors?.some?.(
+      (error2) => error2.message.includes(
+        "Access denied for hydrogenStorefrontCreate field"
+      )
+    )) {
+      throw new AbortError("Couldn't connect storefront to Shopify", [
+        "Common reasons for this error include:",
+        {
+          list: {
+            items: [
+              "The Hydrogen sales channel isn't installed on the store.",
+              "You don't have the required account permission to manage apps or channels.",
+              "You're trying to connect to an ineligible store type (Trial, Development store)"
+            ]
+          }
+        }
+      ]);
+    }
     throw error;
   }
 }

package/dist/lib/graphql/admin/client.test.js

@@ -16,8 +16,8 @@ describe("adminRequest", () => {
     });
     expect(response).toContain(fakeResponse);
   });
-  describe("error response", () => {
-    it("sends a query to the Admin API and returns an unknown error response", async () => {
+  describe("when there is an unknown error response", () => {
+    it("passes along the error message", async () => {
       const fakeGraphqlError = {
         errors: [
           {
@@ -32,7 +32,9 @@ describe("adminRequest", () => {
       });
       await expect(response).rejects.toContain(fakeGraphqlError);
     });
-    it("sends a query to the Admin API and returns an error where app isn't installed", async () => {
+  });
+  describe("when the app isn't installed", () => {
+    it("throws an AbortError", async () => {
       const fakeGraphqlError = {
         errors: [
           {
@@ -46,6 +48,29 @@ describe("adminRequest", () => {
         storeFqdn: ""
       });
       await expect(response).rejects.toThrowError(AbortError);
+      await expect(response).rejects.toMatch(
+        /Hydrogen sales channel isn\'t installed/
+      );
+    });
+  });
+  describe("when the user doesn't have access to hydrogenStorefrontCreate", () => {
+    it("throws an AbortError", async () => {
+      const fakeGraphqlError = {
+        errors: [
+          {
+            message: "Access denied for hydrogenStorefrontCreate field"
+          }
+        ]
+      };
+      vi.mocked(graphqlRequest).mockRejectedValue(fakeGraphqlError);
+      const response = adminRequest("", {
+        token: "",
+        storeFqdn: ""
+      });
+      await expect(response).rejects.toThrowError(AbortError);
+      await expect(response).rejects.toMatch(
+        /Couldn\'t connect storefront to Shopify/
+      );
     });
   });
 });

package/dist/lib/live-reload.js

@@ -0,0 +1,62 @@
+import http from 'node:http';
+
+async function setupLiveReload(devServerPort) {
+  try {
+    const [{ updates: hmrUpdates }, { serve }, { detectLoaderChanges }, { ok, err }] = await Promise.all([
+      import('@remix-run/dev/dist/devServer_unstable/hmr.js'),
+      import('@remix-run/dev/dist/devServer_unstable/socket.js'),
+      import('@remix-run/dev/dist/devServer_unstable/hdr.js'),
+      import('@remix-run/dev/dist/result.js')
+    ]);
+    const state = {};
+    const server = http.createServer(function(req, res) {
+      res.writeHead(200);
+      res.end();
+    }).listen(devServerPort);
+    const socket = serve(server);
+    return {
+      onBuildStart: (ctx) => {
+        state.loaderChanges = detectLoaderChanges(ctx).then(ok, err);
+      },
+      onBuildManifest: (manifest) => {
+        state.manifest = manifest;
+      },
+      onAppReady: async (ctx) => {
+        const nextState = { prevManifest: state.manifest };
+        try {
+          const loaderChanges = await state.loaderChanges;
+          if (loaderChanges.ok) {
+            nextState.prevLoaderHashes = loaderChanges.value;
+          }
+          if (loaderChanges.ok && state.manifest && state.prevManifest) {
+            socket.hmr(
+              state.manifest,
+              hmrUpdates(
+                ctx.config,
+                state.manifest,
+                state.prevManifest,
+                loaderChanges.value,
+                state.prevLoaderHashes
+              )
+            );
+          } else if (state.prevManifest) {
+            socket.reload();
+          }
+        } finally {
+          Object.assign(state, nextState);
+        }
+      },
+      close: () => {
+        socket.close();
+        server.close();
+      }
+    };
+  } catch (error) {
+    console.warn(
+      "Could not start HMR server. Please make sure your Remix packages are in sync with Hydrogen. Defaulting to regular live reload.",
+      error.stack
+    );
+  }
+}
+
+export { setupLiveReload };

package/dist/lib/log.js

@@ -121,7 +121,10 @@ function enhanceH2Logs(options) {
   injectLogReplacer("error");
   injectLogReplacer(
     "warn",
-    ([first]) => first?.includes?.("[h2:warn:createStorefrontClient]") ? true : void 0
+    ([first]) => (
+      // Show createStorefrontClient warnings only once.
+      first?.includes?.("[h2:warn:createStorefrontClient]") ? true : void 0
+    )
   );
   addMessageReplacers("h2-warn", [
     ([first]) => {
@@ -164,7 +167,9 @@ function enhanceH2Logs(options) {
         if (firstAppLineIndex > 0 && lastAppLineIndex > firstAppLineIndex) {
           stack = [
             stackLines[0],
+            // Error message
             ...stackLines.slice(firstAppLineIndex, lastAppLineIndex)
+            // App code
           ].join("\n").trim() || void 0;
         }
         const error = new BugError(