@shopify/cli-hydrogen 8.4.0 → 8.4.2

package/dist/assets/hydrogen/starter/CHANGELOG.md

@@ -1,5 +1,96 @@
 # skeleton
 
+## 2024.7.6
+
+### Patch Changes
+
+- Update Shopify CLI and cli-kit dependencies to 3.66.1 ([#2512](https://github.com/Shopify/hydrogen/pull/2512)) by [@frandiox](https://github.com/frandiox)
+
+- createCartHandler supplies updateGiftCardCodes method ([#2298](https://github.com/Shopify/hydrogen/pull/2298)) by [@wizardlyhel](https://github.com/wizardlyhel)
+
+- Fix menu links in side panel not working on mobile devices ([#2450](https://github.com/Shopify/hydrogen/pull/2450)) by [@wizardlyhel](https://github.com/wizardlyhel)
+
+  ```diff
+  // /app/components/Header.tsx
+
+  export function HeaderMenu({
+    menu,
+    primaryDomainUrl,
+    viewport,
+    publicStoreDomain,
+  }: {
+    menu: HeaderProps['header']['menu'];
+    primaryDomainUrl: HeaderProps['header']['shop']['primaryDomain']['url'];
+    viewport: Viewport;
+    publicStoreDomain: HeaderProps['publicStoreDomain'];
+  }) {
+    const className = `header-menu-${viewport}`;
+  +  const {close} = useAside();
+
+  -  function closeAside(event: React.MouseEvent<HTMLAnchorElement>) {
+  -    if (viewport === 'mobile') {
+  -      event.preventDefault();
+  -      window.location.href = event.currentTarget.href;
+  -    }
+  -  }
+
+    return (
+      <nav className={className} role="navigation">
+        {viewport === 'mobile' && (
+          <NavLink
+            end
+  -          onClick={closeAside}
+  +          onClick={close}
+            prefetch="intent"
+            style={activeLinkStyle}
+            to="/"
+          >
+            Home
+          </NavLink>
+        )}
+        {(menu || FALLBACK_HEADER_MENU).items.map((item) => {
+          if (!item.url) return null;
+
+          // if the url is internal, we strip the domain
+          const url =
+            item.url.includes('myshopify.com') ||
+            item.url.includes(publicStoreDomain) ||
+            item.url.includes(primaryDomainUrl)
+              ? new URL(item.url).pathname
+              : item.url;
+          return (
+            <NavLink
+              className="header-menu-item"
+              end
+              key={item.id}
+  -            onClick={closeAside}
+  +            onClick={close}
+              prefetch="intent"
+              style={activeLinkStyle}
+              to={url}
+            >
+              {item.title}
+            </NavLink>
+          );
+        })}
+      </nav>
+    );
+  }
+  ```
+
+- Add localization support to consent privacy banner ([#2457](https://github.com/Shopify/hydrogen/pull/2457)) by [@juanpprieto](https://github.com/juanpprieto)
+
+- Updated dependencies [[`d633e49a`](https://github.com/Shopify/hydrogen/commit/d633e49aff244a985c58ec77fc2796c9c1cd5df4), [`1b217cd6`](https://github.com/Shopify/hydrogen/commit/1b217cd68ffd5362d201d4bd225ec72e99713461), [`d929b561`](https://github.com/Shopify/hydrogen/commit/d929b5612ec28e53ec216844add33682f131aba7), [`664a09d5`](https://github.com/Shopify/hydrogen/commit/664a09d57ef5d3c67da947a4e8546527c01e37c4), [`0c1e511d`](https://github.com/Shopify/hydrogen/commit/0c1e511df72e9605534bb9c960e86d5c9a4bf2ea), [`eefa8203`](https://github.com/Shopify/hydrogen/commit/eefa820383fa93657ca214991f6099ce9268a4ee)]:
+  - @shopify/hydrogen@2024.7.5
+  - @shopify/remix-oxygen@2.0.7
+
+## 2024.7.5
+
+### Patch Changes
+
+- Updated dependencies [[`b0d3bc06`](https://github.com/Shopify/hydrogen/commit/b0d3bc0696d266fcfc4eb93d0a4adb9ccb56ade6)]:
+  - @shopify/hydrogen@2024.7.4
+
 ## 2024.7.4
 
 ### Patch Changes

package/dist/assets/hydrogen/starter/app/components/CartSummary.tsx

@@ -1,6 +1,8 @@
 import type {CartApiQueryFragment} from 'storefrontapi.generated';
 import type {CartLayout} from '~/components/CartMain';
 import {CartForm, Money, type OptimisticCart} from '@shopify/hydrogen';
+import { useRef } from 'react';
+import { FetcherWithComponents } from '@remix-run/react';
 
 type CartSummaryProps = {
   cart: OptimisticCart<CartApiQueryFragment | null>;
@@ -25,6 +27,7 @@ export function CartSummary({cart, layout}: CartSummaryProps) {
         </dd>
       </dl>
       <CartDiscounts discountCodes={cart.discountCodes} />
+      <CartGiftCard giftCardCodes={cart.appliedGiftCards} />
       <CartCheckoutActions checkoutUrl={cart.checkoutUrl} />
     </div>
   );
@@ -99,3 +102,79 @@ function UpdateDiscountForm({
     </CartForm>
   );
 }
+
+function CartGiftCard({
+  giftCardCodes,
+}: {
+  giftCardCodes: CartApiQueryFragment['appliedGiftCards'] | undefined;
+}) {
+  const appliedGiftCardCodes = useRef<string[]>([]);
+  const giftCardCodeInput = useRef<HTMLInputElement>(null);
+  const codes: string[] = giftCardCodes?.map(({lastCharacters}) => `***${lastCharacters}`) || [];
+
+  function saveAppliedCode(code: string) {
+    const formattedCode = code.replace(/\s/g, ''); // Remove spaces
+    if (!appliedGiftCardCodes.current.includes(formattedCode)) {
+      appliedGiftCardCodes.current.push(formattedCode);
+    }
+    giftCardCodeInput.current!.value = '';
+  }
+
+  function removeAppliedCode() {
+    appliedGiftCardCodes.current = [];
+  }
+
+  return (
+    <div>
+      {/* Have existing gift card applied, display it with a remove option */}
+      <dl hidden={!codes.length}>
+        <div>
+          <dt>Applied Gift Card(s)</dt>
+          <UpdateGiftCardForm>
+            <div className="cart-discount">
+              <code>{codes?.join(', ')}</code>
+              &nbsp;
+              <button onSubmit={() => removeAppliedCode}>Remove</button>
+            </div>
+          </UpdateGiftCardForm>
+        </div>
+      </dl>
+
+      {/* Show an input to apply a discount */}
+      <UpdateGiftCardForm giftCardCodes={appliedGiftCardCodes.current} saveAppliedCode={saveAppliedCode}>
+        <div>
+          <input type="text" name="giftCardCode" placeholder="Gift card code" ref={giftCardCodeInput} />
+          &nbsp;
+          <button type="submit">Apply</button>
+        </div>
+      </UpdateGiftCardForm>
+    </div>
+  );
+}
+
+function UpdateGiftCardForm({
+  giftCardCodes,
+  saveAppliedCode,
+  children,
+}: {
+  giftCardCodes?: string[];
+  saveAppliedCode?: (code: string) => void;
+  removeAppliedCode?: () => void;
+  children: React.ReactNode;
+}) {
+  return (
+    <CartForm
+      route="/cart"
+      action={CartForm.ACTIONS.GiftCardCodesUpdate}
+      inputs={{
+        giftCardCodes: giftCardCodes || [],
+      }}
+    >
+      {(fetcher: FetcherWithComponents<any>) => {
+        const code = fetcher.formData?.get('giftCardCode');
+        if (code) saveAppliedCode && saveAppliedCode(code as string);
+        return children;
+      }}
+    </CartForm>
+  );
+}

package/dist/assets/hydrogen/starter/app/components/Header.tsx

@@ -48,20 +48,14 @@ export function HeaderMenu({
   publicStoreDomain: HeaderProps['publicStoreDomain'];
 }) {
   const className = `header-menu-${viewport}`;
-
-  function closeAside(event: React.MouseEvent<HTMLAnchorElement>) {
-    if (viewport === 'mobile') {
-      event.preventDefault();
-      window.location.href = event.currentTarget.href;
-    }
-  }
+  const {close} = useAside();
 
   return (
     <nav className={className} role="navigation">
       {viewport === 'mobile' && (
         <NavLink
           end
-          onClick={closeAside}
+          onClick={close}
           prefetch="intent"
           style={activeLinkStyle}
           to="/"
@@ -84,7 +78,7 @@ export function HeaderMenu({
             className="header-menu-item"
             end
             key={item.id}
-            onClick={closeAside}
+            onClick={close}
             prefetch="intent"
             style={activeLinkStyle}
             to={url}

package/dist/assets/hydrogen/starter/app/lib/fragments.ts

@@ -108,6 +108,12 @@ export const CART_QUERY_FRAGMENT = `#graphql
   fragment CartApiQuery on Cart {
     updatedAt
     id
+    appliedGiftCards {
+      lastCharacters
+      amountUsed {
+        ...Money
+      }
+    }
     checkoutUrl
     totalQuantity
     buyerIdentity {

package/dist/assets/hydrogen/starter/app/lib/search.ts

@@ -48,10 +48,10 @@ interface UrlWithTrackingParams {
 
 /**
  * A utility function that appends tracking parameters to a URL. Tracking parameters are
- * used internally by shopify to enhance search results and admin dashboards.
+ * used internally by Shopify to enhance search results and admin dashboards.
  * @example
  * ```ts
- * const url = 'www.example.com';
+ * const baseUrl = 'www.example.com';
  * const trackingParams = 'utm_source=shopify&utm_medium=shopify_app&utm_campaign=storefront';
  * const params = { foo: 'bar' };
  * const term = 'search term';

package/dist/assets/hydrogen/starter/app/root.tsx

@@ -73,6 +73,10 @@ export async function loader(args: LoaderFunctionArgs) {
     consent: {
       checkoutDomain: env.PUBLIC_CHECKOUT_DOMAIN,
       storefrontAccessToken: env.PUBLIC_STOREFRONT_API_TOKEN,
+      withPrivacyBanner: true,
+      // localize the privacy banner
+      country: args.context.storefront.i18n.country,
+      language: args.context.storefront.i18n.language,
     },
   });
 }
@@ -94,9 +98,7 @@ async function loadCriticalData({context}: LoaderFunctionArgs) {
     // Add other queries here, so that they are loaded in parallel
   ]);
 
-  return {
-    header,
-  };
+  return {header};
 }
 
 /**

package/dist/assets/hydrogen/starter/app/routes/cart.tsx

@@ -48,6 +48,20 @@ export async function action({request, context}: ActionFunctionArgs) {
       result = await cart.updateDiscountCodes(discountCodes);
       break;
     }
+    case CartForm.ACTIONS.GiftCardCodesUpdate: {
+      const formGiftCardCode = inputs.giftCardCode;
+
+      // User inputted gift card code
+      const giftCardCodes = (
+        formGiftCardCode ? [formGiftCardCode] : []
+      ) as string[];
+
+      // Combine gift card codes already applied on cart
+      giftCardCodes.push(...inputs.giftCardCodes);
+
+      result = await cart.updateGiftCardCodes(giftCardCodes);
+      break;
+    }
     case CartForm.ACTIONS.BuyerIdentityUpdate: {
       result = await cart.updateBuyerIdentity({
         ...inputs.buyerIdentity,

package/dist/assets/hydrogen/starter/package.json

@@ -2,7 +2,7 @@
   "name": "skeleton",
   "private": true,
   "sideEffects": false,
-  "version": "2024.7.4",
+  "version": "2024.7.6",
   "type": "module",
   "scripts": {
     "build": "shopify hydrogen build --codegen",
@@ -16,8 +16,8 @@
   "dependencies": {
     "@remix-run/react": "^2.10.1",
     "@remix-run/server-runtime": "^2.10.1",
-    "@shopify/hydrogen": "2024.7.3",
-    "@shopify/remix-oxygen": "^2.0.6",
+    "@shopify/hydrogen": "2024.7.5",
+    "@shopify/remix-oxygen": "^2.0.7",
     "graphql": "^16.6.0",
     "graphql-tag": "^2.12.6",
     "isbot": "^3.8.0",
@@ -28,9 +28,9 @@
     "@graphql-codegen/cli": "5.0.2",
     "@remix-run/dev": "^2.10.1",
     "@remix-run/eslint-config": "^2.10.1",
-    "@shopify/cli": "3.65.1",
+    "@shopify/cli": "~3.66.1",
     "@shopify/hydrogen-codegen": "^0.3.1",
-    "@shopify/mini-oxygen": "^3.0.4",
+    "@shopify/mini-oxygen": "^3.0.5",
     "@shopify/oxygen-workers-types": "^4.1.2",
     "@shopify/prettier-config": "^1.1.2",
     "@total-typescript/ts-reset": "^0.4.2",

package/dist/assets/hydrogen/starter/storefrontapi.generated.d.ts

@@ -72,6 +72,11 @@ export type CartApiQueryFragment = Pick<
   StorefrontAPI.Cart,
   'updatedAt' | 'id' | 'checkoutUrl' | 'totalQuantity' | 'note'
 > & {
+  appliedGiftCards: Array<
+    Pick<StorefrontAPI.AppliedGiftCard, 'lastCharacters'> & {
+      amountUsed: Pick<StorefrontAPI.MoneyV2, 'currencyCode' | 'amount'>;
+    }
+  >;
   buyerIdentity: Pick<
     StorefrontAPI.CartBuyerIdentity,
     'countryCode' | 'email' | 'phone'

package/dist/commands/hydrogen/build.js

@@ -33,10 +33,13 @@ class Build extends Command {
       description: "Watches for changes and rebuilds the project writing output to disk.",
       env: "SHOPIFY_HYDROGEN_FLAG_WATCH"
     }),
-    // For the classic compiler:
     "bundle-stats": Flags.boolean({
       description: "Show a bundle size summary after building. Defaults to true, use `--no-bundle-stats` to disable.",
       allowNo: true
+    }),
+    "force-client-sourcemap": Flags.boolean({
+      description: "Client sourcemapping is avoided by default because it makes backend code visible in the browser. Use this flag to force enabling it.",
+      env: "SHOPIFY_HYDROGEN_FLAG_FORCE_CLIENT_SOURCEMAP"
     })
   };
   async run() {
@@ -78,6 +81,7 @@ async function runBuild({
   useCodegen = false,
   codegenConfigPath,
   sourcemap = true,
+  forceClientSourcemap,
   disableRouteWarning = false,
   lockfileCheck = true,
   assetPath = "/",
@@ -121,8 +125,8 @@ async function runBuild({
     build: {
       emptyOutDir: true,
       copyPublicDir: true,
-      // Disable client sourcemaps in production
-      sourcemap: process.env.NODE_ENV !== "production" && sourcemap,
+      // Disable client sourcemaps in production by default
+      sourcemap: forceClientSourcemap ?? (process.env.NODE_ENV !== "production" && sourcemap),
       watch: watch ? {} : null
     },
     plugins: [

package/dist/commands/hydrogen/upgrade.js

@@ -187,6 +187,7 @@ function hasOutdatedDependencies({
     ...release.dependencies,
     ...release.devDependencies
   }).some(([name, version]) => {
+    if (name === "@shopify/cli") return false;
     const currentDependencyVersion = currentDependencies?.[name];
     if (!currentDependencyVersion) return false;
     const isDependencyOutdated = semver.gt(

package/dist/index.d.ts

@@ -11,6 +11,7 @@ declare class Build extends Command {
     static flags: {
         watch: _oclif_core_lib_interfaces_parser_js.BooleanFlag<boolean>;
         'bundle-stats': _oclif_core_lib_interfaces_parser_js.BooleanFlag<boolean>;
+        'force-client-sourcemap': _oclif_core_lib_interfaces_parser_js.BooleanFlag<boolean>;
         diff: _oclif_core_lib_interfaces_parser_js.BooleanFlag<boolean>;
         codegen: _oclif_core_lib_interfaces_parser_js.BooleanFlag<boolean>;
         'codegen-config-path': _oclif_core_lib_interfaces_parser_js.OptionFlag<string | undefined, _oclif_core_lib_interfaces_parser_js.CustomOptions>;

package/dist/lib/flags.js

@@ -77,7 +77,7 @@ const commonFlags = {
   },
   sourcemap: {
     sourcemap: Flags.boolean({
-      description: "Controls whether sourcemaps are generated. Default to `true`. Deactivate `--no-sourcemaps`.",
+      description: "Controls whether server sourcemaps are generated. Default to `true`. Deactivate `--no-sourcemaps`.",
       env: "SHOPIFY_HYDROGEN_FLAG_SOURCEMAP",
       default: true,
       allowNo: true

package/dist/lib/onboarding/remote.js

@@ -7,7 +7,6 @@ import { renderTasks, renderInfo } from '@shopify/cli-kit/node/ui';
 import { downloadExternalRepo, downloadMonorepoTemplates } from '../template-downloader.js';
 import { applyTemplateDiff } from '../template-diff.js';
 import { getCliCommand } from '../shell.js';
-import { replaceFileContent } from '../file.js';
 import { createAbortHandler, handleProjectLocation, handleLanguage, createInitialCommit, handleDependencies, commitAll, renderProjectReady } from './common.js';
 
 const DEMO_STORE_REPO = "shopify/hydrogen-demo-store";
@@ -30,16 +29,6 @@ async function setupRemoteTemplate(options, controller) {
       return applyTemplateDiff(project.directory, sourcePath, skeletonPath);
     }
     await copyFile(sourcePath, project.directory);
-    await replaceFileContent(
-      joinPath(project.directory, "package.json"),
-      false,
-      (content) => (
-        // Remove the cli plugin dependency from the package.json because it's
-        // only used for monorepo development. This line is present in non-diff
-        // examples like `express` when scaffolding a new project:
-        content.replace(/^\s*"@shopify\/cli-hydrogen": "[^"]+",?\n/m, "")
-      )
-    );
   }).catch(abort);
   const supportsTranspilation = await fileExists(
     joinPath(downloaded.sourcePath, "tsconfig.json")

package/dist/lib/template-diff.js

@@ -126,16 +126,10 @@ ${colors.dim(
     async copyDiffBuild() {
       const target = joinPath(diffDirectory, "dist");
       await removeFile(target);
-      await Promise.all([
-        cp(joinPath(targetDirectory, "dist"), target, {
-          force: true,
-          recursive: true
-        }),
-        copyFile(
-          joinPath(targetDirectory, ".env"),
-          joinPath(diffDirectory, ".env")
-        )
-      ]);
+      await cp(joinPath(targetDirectory, "dist"), target, {
+        force: true,
+        recursive: true
+      });
     },
     /**
      * Brings the generated d.ts files back to the original project.
@@ -183,9 +177,6 @@ async function applyTemplateDiff(targetDirectory, diffDirectory, templateDir) {
   await mergePackageJson(diffDirectory, targetDirectory, {
     ignoredKeys: ["h2:diff"],
     onResult: (pkgJson) => {
-      if (pkgJson.dependencies) {
-        delete pkgJson.dependencies["@shopify/cli-hydrogen"];
-      }
       for (const key of ["build", "dev", "preview"]) {
         const scriptLine = pkgJson.scripts?.[key];
         if (pkgJson.scripts?.[key] && typeof scriptLine === "string") {

package/oclif.manifest.json

@@ -22,7 +22,7 @@
           "type": "option"
         },
         "sourcemap": {
-          "description": "Controls whether sourcemaps are generated. Default to `true`. Deactivate `--no-sourcemaps`.",
+          "description": "Controls whether server sourcemaps are generated. Default to `true`. Deactivate `--no-sourcemaps`.",
           "env": "SHOPIFY_HYDROGEN_FLAG_SOURCEMAP",
           "name": "sourcemap",
           "allowNo": true,
@@ -80,6 +80,13 @@
           "name": "bundle-stats",
           "allowNo": true,
           "type": "boolean"
+        },
+        "force-client-sourcemap": {
+          "description": "Client sourcemapping is avoided by default because it makes backend code visible in the browser. Use this flag to force enabling it.",
+          "env": "SHOPIFY_HYDROGEN_FLAG_FORCE_CLIENT_SOURCEMAP",
+          "name": "force-client-sourcemap",
+          "allowNo": false,
+          "type": "boolean"
         }
       },
       "hasDynamicHelp": false,
@@ -675,7 +682,7 @@
           "type": "boolean"
         },
         "sourcemap": {
-          "description": "[Classic Remix Compiler] Controls whether sourcemaps are generated. Default to `true`. Deactivate `--no-sourcemaps`.",
+          "description": "[Classic Remix Compiler] Controls whether server sourcemaps are generated. Default to `true`. Deactivate `--no-sourcemaps`.",
           "env": "SHOPIFY_HYDROGEN_FLAG_SOURCEMAP",
           "name": "sourcemap",
           "allowNo": true,
@@ -1751,5 +1758,5 @@
       ]
     }
   },
-  "version": "8.4.0"
+  "version": "8.4.2"
 }

package/package.json

@@ -4,7 +4,7 @@
     "access": "public",
     "@shopify:registry": "https://registry.npmjs.org"
   },
-  "version": "8.4.0",
+  "version": "8.4.2",
   "license": "MIT",
   "type": "module",
   "scripts": {
@@ -34,9 +34,9 @@
   "dependencies": {
     "@ast-grep/napi": "0.11.0",
     "@oclif/core": "3.26.5",
-    "@shopify/cli-kit": "3.65.1",
+    "@shopify/cli-kit": "3.66.1",
     "@shopify/oxygen-cli": "4.4.9",
-    "@shopify/plugin-cloudflare": "3.65.1",
+    "@shopify/plugin-cloudflare": "3.66.1",
     "ansi-escapes": "^6.2.0",
     "chokidar": "3.5.3",
     "cli-truncate": "^4.0.0",
@@ -56,7 +56,7 @@
     "@graphql-codegen/cli": "^5.0.2",
     "@remix-run/dev": "^2.1.0",
     "@shopify/hydrogen-codegen": "^0.3.1",
-    "@shopify/mini-oxygen": "^3.0.4",
+    "@shopify/mini-oxygen": "^3.0.5",
     "graphql-config": "^5.0.3",
     "vite": "^5.1.0"
   },