@shopify/cli-hydrogen 7.0.0 → 7.1.0

package/dist/generator-templates/starter/app/components/Cart.tsx

@@ -15,7 +15,7 @@ export function CartMain({layout, cart}: CartMainProps) {
   const linesCount = Boolean(cart?.lines?.nodes?.length || 0);
   const withDiscount =
     cart &&
-    Boolean(cart.discountCodes.filter((code) => code.applicable).length);
+    Boolean(cart?.discountCodes?.filter((code) => code.applicable)?.length);
   const className = `cart-main ${withDiscount ? 'with-discount' : ''}`;
 
   return (
@@ -179,7 +179,7 @@ function CartLineQuantity({line}: {line: CartLine}) {
   const nextQuantity = Number((quantity + 1).toFixed(0));
 
   return (
-    <div className="cart-line-quantiy">
+    <div className="cart-line-quantity">
       <small>Quantity: {quantity} &nbsp;&nbsp;</small>
       <CartLineUpdateButton lines={[{id: lineId, quantity: prevQuantity}]}>
         <button

package/dist/generator-templates/starter/app/components/Layout.tsx

@@ -76,7 +76,15 @@ function SearchAside() {
                 type="search"
               />
                
-              <button type="submit">Search</button>
+              <button
+                onClick={() => {
+                  window.location.href = inputRef?.current?.value
+                    ? `/search?q=${inputRef.current.value}`
+                    : `/search`;
+                }}
+              >
+                Search
+              </button>
             </div>
           )}
         </PredictiveSearchForm>

package/dist/generator-templates/starter/app/components/Search.tsx

@@ -3,11 +3,11 @@ import {
   Form,
   useParams,
   useFetcher,
-  useFetchers,
   type FormProps,
 } from '@remix-run/react';
 import {Image, Money, Pagination} from '@shopify/hydrogen';
 import React, {useRef, useEffect} from 'react';
+import {applyTrackingParams} from '~/lib/search';
 
 import type {
   PredictiveProductFragment,
@@ -104,7 +104,10 @@ export function SearchForm({searchTerm}: {searchTerm: string}) {
 
 export function SearchResults({
   results,
-}: Pick<FetchSearchResultsReturn['searchResults'], 'results'>) {
+  searchTerm,
+}: Pick<FetchSearchResultsReturn['searchResults'], 'results'> & {
+  searchTerm: string;
+}) {
   if (!results) {
     return null;
   }
@@ -128,6 +131,7 @@ export function SearchResults({
               <SearchResultsProductsGrid
                 key="products"
                 products={productResults}
+                searchTerm={searchTerm}
               />
             ) : null;
           }
@@ -148,19 +152,44 @@ export function SearchResults({
   );
 }
 
-function SearchResultsProductsGrid({products}: Pick<SearchQuery, 'products'>) {
+function SearchResultsProductsGrid({
+  products,
+  searchTerm,
+}: Pick<SearchQuery, 'products'> & {searchTerm: string}) {
   return (
     <div className="search-result">
       <h2>Products</h2>
       <Pagination connection={products}>
         {({nodes, isLoading, NextLink, PreviousLink}) => {
-          const itemsMarkup = nodes.map((product) => (
-            <div className="search-results-item" key={product.id}>
-              <Link prefetch="intent" to={`/products/${product.handle}`}>
-                <span>{product.title}</span>
-              </Link>
-            </div>
-          ));
+          const ItemsMarkup = nodes.map((product) => {
+            const trackingParams = applyTrackingParams(
+              product,
+              `q=${encodeURIComponent(searchTerm)}`,
+            );
+
+            return (
+              <div className="search-results-item" key={product.id}>
+                <Link
+                  prefetch="intent"
+                  to={`/products/${product.handle}${trackingParams}`}
+                >
+                  {product.variants.nodes[0].image && (
+                    <Image
+                      data={product.variants.nodes[0].image}
+                      alt={product.title}
+                      width={50}
+                    />
+                  )}
+                  <div>
+                    <p>{product.title}</p>
+                    <small>
+                      <Money data={product.variants.nodes[0].price} />
+                    </small>
+                  </div>
+                </Link>
+              </div>
+            );
+          });
           return (
             <div>
               <div>
@@ -169,7 +198,7 @@ function SearchResultsProductsGrid({products}: Pick<SearchQuery, 'products'>) {
                 </PreviousLink>
               </div>
               <div>
-                {itemsMarkup}
+                {ItemsMarkup}
                 <br />
               </div>
               <div>
@@ -251,7 +280,9 @@ export function PredictiveSearchForm({
   ...props
 }: SearchFromProps) {
   const params = useParams();
-  const fetcher = useFetcher<NormalizedPredictiveSearchResults>();
+  const fetcher = useFetcher<NormalizedPredictiveSearchResults>({
+    key: 'search',
+  });
   const inputRef = useRef<HTMLInputElement | null>(null);
 
   function fetchResults(event: React.ChangeEvent<HTMLInputElement>) {
@@ -318,7 +349,6 @@ export function PredictiveSearchResults() {
           />
         ))}
       </div>
-      {/* view all results /search?q=term */}
       {searchTerm.current && (
         <Link onClick={goToSearchResult} to={`/search?q=${searchTerm.current}`}>
           <p>
@@ -425,10 +455,9 @@ type UseSearchReturn = NormalizedPredictiveSearch & {
 };
 
 function usePredictiveSearch(): UseSearchReturn {
-  const fetchers = useFetchers();
+  const searchFetcher = useFetcher<FetchSearchResultsReturn>({key: 'search'});
   const searchTerm = useRef<string>('');
   const searchInputRef = useRef<HTMLInputElement | null>(null);
-  const searchFetcher = fetchers.find((fetcher) => fetcher.data?.searchResults);
 
   if (searchFetcher?.state === 'loading') {
     searchTerm.current = (searchFetcher.formData?.get('q') || '') as string;

package/dist/generator-templates/starter/app/lib/search.ts

@@ -0,0 +1,29 @@
+import type {
+  PredictiveQueryFragment,
+  SearchProductFragment,
+  PredictiveProductFragment,
+  PredictiveCollectionFragment,
+  PredictivePageFragment,
+  PredictiveArticleFragment,
+} from 'storefrontapi.generated';
+
+export function applyTrackingParams(
+  resource:
+    | PredictiveQueryFragment
+    | SearchProductFragment
+    | PredictiveProductFragment
+    | PredictiveCollectionFragment
+    | PredictiveArticleFragment
+    | PredictivePageFragment,
+  params?: string,
+) {
+  if (params) {
+    return resource?.trackingParameters
+      ? `?${params}&${resource.trackingParameters}`
+      : `?${params}`;
+  } else {
+    return resource?.trackingParameters
+      ? `?${resource.trackingParameters}`
+      : '';
+  }
+}

package/dist/generator-templates/starter/app/root.tsx

@@ -73,8 +73,6 @@ export async function loader({context}: LoaderFunctionArgs) {
   const publicStoreDomain = context.env.PUBLIC_STORE_DOMAIN;
 
   const isLoggedInPromise = customerAccount.isLoggedIn();
-
-  // defer the cart query by not awaiting it
   const cartPromise = cart.get();
 
   // defer the footer query (below the fold)

package/dist/generator-templates/starter/app/routes/account.orders._index.tsx

@@ -95,7 +95,7 @@ function EmptyOrders() {
 }
 
 function OrderItem({order}: {order: OrderItemFragment}) {
-  const fulfillmentStatus = flattenConnection(order.fulfillments)[0].status;
+  const fulfillmentStatus = flattenConnection(order.fulfillments)[0]?.status;
   return (
     <>
       <fieldset>
@@ -104,7 +104,7 @@ function OrderItem({order}: {order: OrderItemFragment}) {
         </Link>
         <p>{new Date(order.processedAt).toDateString()}</p>
         <p>{order.financialStatus}</p>
-        <p>{fulfillmentStatus}</p>
+        {fulfillmentStatus && <p>{fulfillmentStatus}</p>}
         <Money data={order.totalPrice} />
         <Link to={`/account/orders/${btoa(order.id)}`}>View Order →</Link>
       </fieldset>

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

@@ -4,6 +4,7 @@ import type {
   NormalizedPredictiveSearchResults,
 } from '~/components/Search';
 import {NO_PREDICTIVE_SEARCH_RESULTS} from '~/components/Search';
+import {applyTrackingParams} from '~/lib/search';
 
 import type {
   PredictiveArticleFragment,
@@ -14,12 +15,6 @@ import type {
   PredictiveSearchQuery,
 } from 'storefrontapi.generated';
 
-type PredictiveSearchResultItem =
-  | PredictiveArticleFragment
-  | PredictiveCollectionFragment
-  | PredictivePageFragment
-  | PredictiveProductFragment;
-
 type PredictiveSearchTypes =
   | 'ARTICLE'
   | 'COLLECTION'
@@ -121,21 +116,6 @@ export function normalizePredictiveSearchResults(
     };
   }
 
-  function applyTrackingParams(
-    resource: PredictiveSearchResultItem | PredictiveQueryFragment,
-    params?: string,
-  ) {
-    if (params) {
-      return resource.trackingParameters
-        ? `?${params}&${resource.trackingParameters}`
-        : `?${params}`;
-    } else {
-      return resource.trackingParameters
-        ? `?${resource.trackingParameters}`
-        : '';
-    }
-  }
-
   const localePrefix = locale ? `/${locale}` : '';
   const results: NormalizedPredictiveSearchResults = [];
 

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

@@ -13,10 +13,7 @@ export const meta: MetaFunction = () => {
 export async function action({request, context}: ActionFunctionArgs) {
   const {cart} = context;
 
-  const [formData, customerAccessToken] = await Promise.all([
-    request.formData(),
-    await context.customerAccount.getAccessToken(),
-  ]);
+  const formData = await request.formData();
 
   const {action, inputs} = CartForm.getFormInput(formData);
 
@@ -54,7 +51,6 @@ export async function action({request, context}: ActionFunctionArgs) {
     case CartForm.ACTIONS.BuyerIdentityUpdate: {
       result = await cart.updateBuyerIdentity({
         ...inputs.buyerIdentity,
-        customerAccessToken,
       });
       break;
     }

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

@@ -41,7 +41,10 @@ export async function loader({request, context}: LoaderFunctionArgs) {
     totalResults,
   };
 
-  return defer({searchTerm, searchResults});
+  return defer({
+    searchTerm,
+    searchResults,
+  });
 }
 
 export default function SearchPage() {
@@ -54,7 +57,10 @@ export default function SearchPage() {
       {!searchTerm || !searchResults.totalResults ? (
         <NoSearchResults />
       ) : (
-        <SearchResults results={searchResults.results} />
+        <SearchResults
+          results={searchResults.results}
+          searchTerm={searchTerm}
+        />
       )}
     </div>
   );

package/dist/generator-templates/starter/app/styles/app.css

@@ -181,11 +181,6 @@ aside li {
   margin-top: auto;
 }
 
-.footer-menu-missing {
-  display: inline-block;
-  margin: 1rem;
-}
-
 .footer-menu {
   align-items: center;
   display: flex;
@@ -237,7 +232,7 @@ aside li {
   width: calc(var(--aside-width) - 40px);
 }
 
-.cart-line-quantiy {
+.cart-line-quantity {
   display: flex;
 }
 
@@ -297,6 +292,15 @@ aside li {
   margin-bottom: 0.5rem;
 }
 
+.search-results-item a {
+  display: flex;
+  flex: row;
+  align-items: center;
+  gap: 1rem;
+}
+
+
+
 /*
 * --------------------------------------------------
 * routes/__index
@@ -392,11 +396,6 @@ aside li {
   margin-top: 0;
 }
 
-.product-images {
-  display: grid;
-  grid-gap: 1rem;
-}
-
 .product-image img {
   height: auto;
   width: 100%;
@@ -463,10 +462,6 @@ aside li {
 * routes/account
 * --------------------------------------------------
 */
-.account-profile-marketing {
-  display: flex;
-  align-items: center;
-}
 
 .account-logout {
   display: inline-block;

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

@@ -2,7 +2,7 @@
   "name": "skeleton",
   "private": true,
   "sideEffects": false,
-  "version": "1.0.2",
+  "version": "1.0.4",
   "scripts": {
     "build": "shopify hydrogen build",
     "dev": "shopify hydrogen dev --codegen",
@@ -13,11 +13,11 @@
   },
   "prettier": "@shopify/prettier-config",
   "dependencies": {
-    "@remix-run/react": "^2.5.1",
-    "@remix-run/server-runtime": "^2.5.1",
+    "@remix-run/react": "^2.6.0",
+    "@remix-run/server-runtime": "^2.6.0",
     "@shopify/cli": "3.52.0",
-    "@shopify/cli-hydrogen": "^7.0.0",
-    "@shopify/hydrogen": "~2024.1.0",
+    "@shopify/cli-hydrogen": "^7.1.0",
+    "@shopify/hydrogen": "~2024.1.2",
     "@shopify/remix-oxygen": "^2.0.3",
     "graphql": "^16.6.0",
     "graphql-tag": "^2.12.6",
@@ -26,8 +26,8 @@
     "react-dom": "^18.2.0"
   },
   "devDependencies": {
-    "@remix-run/dev": "^2.5.1",
-    "@remix-run/eslint-config": "^2.5.1",
+    "@remix-run/dev": "^2.6.0",
+    "@remix-run/eslint-config": "^2.6.0",
     "@shopify/oxygen-workers-types": "^4.0.0",
     "@shopify/prettier-config": "^1.1.2",
     "@total-typescript/ts-reset": "^0.4.2",

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

@@ -19,5 +19,6 @@ module.exports = {
   future: {
     v3_fetcherPersist: true,
     v3_relativeSplatpath: true,
+    v3_throwAbortReason: true,
   },
 };

package/dist/generator-templates/starter/remix.env.d.ts

@@ -5,7 +5,11 @@
 // Enhance TypeScript's built-in typings.
 import '@total-typescript/ts-reset';
 
-import type {Storefront, CustomerClient, HydrogenCart} from '@shopify/hydrogen';
+import type {
+  Storefront,
+  CustomerAccount,
+  HydrogenCart,
+} from '@shopify/hydrogen';
 import type {AppSession} from '~/lib/session';
 
 declare global {
@@ -36,7 +40,7 @@ declare module '@shopify/remix-oxygen' {
     env: Env;
     cart: HydrogenCart;
     storefront: Storefront;
-    customerAccount: CustomerClient;
+    customerAccount: CustomerAccount;
     session: AppSession;
     waitUntil: ExecutionContext['waitUntil'];
   }

package/dist/generator-templates/starter/server.ts

@@ -70,6 +70,7 @@ export default {
        */
       const cart = createCartHandler({
         storefront,
+        customerAccount,
         getCartId: cartGetIdDefault(request.headers),
         setCartId: cartSetIdDefault(),
         cartQueryFragment: CART_QUERY_FRAGMENT,

package/dist/hooks/init.js

@@ -3,7 +3,7 @@ import { outputDebug } from '@shopify/cli-kit/node/output';
 
 const EXPERIMENTAL_VM_MODULES_FLAG = "--experimental-vm-modules";
 function commandNeedsVM(id = "", argv = []) {
-  return "hydrogen:debug:cpu";
+  return id === "hydrogen:debug:cpu" || ["hydrogen:dev", "hydrogen:preview"].includes(id) && argv.includes("--legacy-runtime");
 }
 const hook = async function(options) {
   if (commandNeedsVM(options.id, options.argv) && !process.execArgv.includes(EXPERIMENTAL_VM_MODULES_FLAG) && !(process.env.NODE_OPTIONS ?? "").includes(EXPERIMENTAL_VM_MODULES_FLAG)) {
@@ -12,8 +12,8 @@ const hook = async function(options) {
     );
     const [command, ...args] = process.argv;
     args.unshift(EXPERIMENTAL_VM_MODULES_FLAG);
-    spawnSync(command, args, { stdio: "inherit" });
-    process.exit(0);
+    const result = spawnSync(command, args, { stdio: "inherit" });
+    process.exit(result.status ?? 1);
   }
 };
 var init_default = hook;

package/dist/lib/codegen.js

@@ -63,14 +63,7 @@ function spawnCodegenProcess({
   });
   return child;
 }
-async function codegen(options) {
-  await import('@shopify/hydrogen-codegen/patch').catch((error) => {
-    throw new AbortError(
-      `Failed to patch dependencies for codegen.
-${error.stack}`,
-      "Please report this issue."
-    );
-  });
+function codegen(options) {
   return generateTypes(options).catch((error) => {
     const { message, details } = normalizeCodegenError(
       error.message,

package/dist/lib/file.js

@@ -84,7 +84,10 @@ async function mergePackageJson(sourceDir, targetDir, options) {
       }, {});
     }
   }
-  await writePackageJSON(targetDir, targetPkgJson);
+  await writePackageJSON(
+    targetDir,
+    options?.onResult?.(targetPkgJson) ?? targetPkgJson
+  );
 }
 
 export { findFileWithExtension, mergePackageJson, replaceFileContent };

package/dist/lib/flags.js

@@ -92,6 +92,12 @@ const commonFlags = {
     description: "Applies the current files on top of Hydrogen's starter template in a temporary directory.",
     default: false,
     required: false
+  }),
+  lockfileCheck: Flags.boolean({
+    allowNo: true,
+    default: true,
+    description: "Checks that there is exactly 1 valid lockfile in the project. Defaults to true, use `--no-lockfile-check` to disable.",
+    env: "SHOPIFY_HYDROGEN_FLAG_LOCKFILE_CHECK"
   })
 };
 function flagsToCamelObject(obj) {

package/dist/lib/graphiql-url.js

@@ -8,6 +8,9 @@ function getGraphiQLUrl({
     if (typeof variables !== "string")
       variables = JSON.stringify(variables);
     url += `?query=${encodeURIComponent(query)}${variables ? `&variables=${encodeURIComponent(variables)}` : ""}`;
+    if (graphql.schema) {
+      url += `&schema=${graphql.schema}`;
+    }
   }
   return url;
 }

package/dist/lib/mini-oxygen/assets.js

@@ -1,5 +1,6 @@
 import fs from 'node:fs/promises';
 import path from 'node:path';
+import { createRequire } from 'node:module';
 import { createServer } from 'node:http';
 import { lookupMimeType } from '@shopify/cli-kit/node/mimes';
 
@@ -10,13 +11,28 @@ function buildAssetsUrl(assetsPort) {
 }
 function createAssetsServer(buildPathClient) {
   return createServer(async (req, res) => {
+    if (req.method === "OPTIONS") {
+      res.setHeader("Access-Control-Allow-Origin", req.headers.origin || "*");
+      res.setHeader("Access-Control-Allow-Credentials", "true");
+      res.setHeader("Access-Control-Allow-Private-Network", "true");
+      res.setHeader("Access-Control-Max-Age", "86400");
+      res.writeHead(204);
+      res.end();
+      return;
+    }
     res.setHeader("Access-Control-Allow-Origin", "*");
     res.setHeader("X-Content-Type-Options", "nosniff");
     const pathname = req.url?.split("?")[0] || "";
     const isValidAssetPath = pathname.startsWith(`/${artificialAssetPrefix}/`) && !pathname.includes("..");
     const relativeAssetPath = isValidAssetPath ? pathname.replace(`/${artificialAssetPrefix}`, "") : pathname;
     if (isValidAssetPath) {
-      const filePath = path.join(buildPathClient, relativeAssetPath);
+      let filePath = path.join(buildPathClient, relativeAssetPath);
+      if (relativeAssetPath === "/graphiql/customer-account.schema.json") {
+        const require2 = createRequire(import.meta.url);
+        filePath = require2.resolve(
+          "@shopify/hydrogen/customer-account.schema.json"
+        );
+      }
       const file = await fs.open(filePath).catch(() => {
       });
       const stat = await file?.stat().catch(() => {

package/dist/lib/onboarding/common.js

@@ -11,7 +11,7 @@ import colors from '@shopify/cli-kit/node/colors';
 import { login, renderLoginSuccess } from '../auth.js';
 import { renderI18nPrompt, setupI18nStrategy, I18N_STRATEGY_NAME_MAP } from '../setups/i18n/index.js';
 import { titleize } from '../string.js';
-import { ALIAS_NAME, createPlatformShortcut, getCliCommand } from '../shell.js';
+import { ALIAS_NAME, createPlatformShortcut } from '../shell.js';
 import { transpileProject } from '../transpile/index.js';
 import { renderCssPrompt, setupCssStrategy, CSS_STRATEGY_NAME_MAP } from '../setups/css/index.js';
 import { renderRoutePrompt, generateRoutes, generateProjectFile } from '../setups/routes/generate.js';
@@ -75,6 +75,8 @@ function generateProjectEntries(options) {
   );
 }
 async function handleCliShortcut(controller, cliCommand, flagShortcut) {
+  if (cliCommand === ALIAS_NAME)
+    return {};
   const shouldCreateShortcut = flagShortcut ?? await renderConfirmationPrompt({
     confirmationMessage: "Yes",
     cancellationMessage: "No",
@@ -329,7 +331,7 @@ async function renderProjectReady(project, {
   packageManager,
   depsInstalled,
   cssStrategy,
-  hasCreatedShortcut,
+  cliCommand,
   routes,
   i18n,
   depsError,
@@ -369,7 +371,6 @@ async function renderProjectReady(project, {
     }
   }
   const padMin = 1 + bodyLines.reduce((max, [label]) => Math.max(max, label.length), 0);
-  const cliCommand = hasCreatedShortcut ? ALIAS_NAME : await getCliCommand(project.directory, packageManager);
   const render = hasErrors ? renderWarning : renderSuccess;
   render({
     headline: `Storefront setup complete` + (hasErrors ? " with errors (see warnings below)." : "!"),

package/dist/lib/onboarding/local.js

@@ -156,7 +156,7 @@ async function setupLocalStarterTemplate(options, controller) {
     packageManager,
     cssStrategy,
     depsInstalled: false,
-    hasCreatedShortcut: false
+    cliCommand: await getCliCommand("", packageManager)
   };
   if (shouldInstallDeps) {
     const installingDepsPromise = backgroundWorkPromise.then(async () => {
@@ -174,19 +174,19 @@ async function setupLocalStarterTemplate(options, controller) {
       }
     });
   }
-  const pkgManagerCommand = await getCliCommand("", packageManager);
   const { createShortcut, showShortcutBanner } = await handleCliShortcut(
     controller,
-    pkgManagerCommand,
+    setupSummary.cliCommand,
     options.shortcut
   );
   if (createShortcut) {
     backgroundWorkPromise = backgroundWorkPromise.then(async () => {
-      setupSummary.hasCreatedShortcut = await createShortcut();
+      if (await createShortcut()) {
+        setupSummary.cliCommand = ALIAS_NAME;
+      }
     });
     showShortcutBanner();
   }
-  const cliCommand = createShortcut ? ALIAS_NAME : pkgManagerCommand;
   renderSuccess({
     headline: [
       { userInput: storefrontInfo?.title ?? project.name },
@@ -196,13 +196,13 @@ async function setupLocalStarterTemplate(options, controller) {
   const continueWithSetup = (options.i18n ?? options.routes) !== void 0 || await renderConfirmationPrompt({
     message: "Do you want to scaffold routes and core functionality?",
     confirmationMessage: "Yes, set up now",
-    cancellationMessage: "No, set up later " + colors.dim(`(run \`${cliCommand} setup\`)`),
+    cancellationMessage: "No, set up later " + colors.dim(`(run \`${setupSummary.cliCommand} setup\`)`),
     abortSignal: controller.signal
   });
   if (continueWithSetup) {
     const { i18nStrategy, setupI18n } = await handleI18n(
       controller,
-      cliCommand,
+      setupSummary.cliCommand,
       options.i18n
     );
     const { setupRoutes } = await handleRouteGeneration(

package/dist/lib/onboarding/remote.js

@@ -5,6 +5,7 @@ import { joinPath } from '@shopify/cli-kit/node/path';
 import { renderTasks, renderInfo } from '@shopify/cli-kit/node/ui';
 import { getLatestTemplates } from '../template-downloader.js';
 import { applyTemplateDiff } from '../template-diff.js';
+import { getCliCommand } from '../shell.js';
 import { createAbortHandler, handleProjectLocation, handleLanguage, createInitialCommit, handleDependencies, commitAll, renderProjectReady } from './common.js';
 
 async function setupRemoteTemplate(options, controller) {
@@ -65,7 +66,7 @@ async function setupRemoteTemplate(options, controller) {
     language,
     packageManager,
     depsInstalled: false,
-    hasCreatedShortcut: false
+    cliCommand: await getCliCommand("", packageManager)
   };
   const tasks = [
     {