npm - @shopify/cli - Versions diffs - 3.63.2 → 3.64.1 - Mend

@shopify/cli 3.63.2 → 3.64.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (131) hide show

package/dist/assets/cli-ruby/lib/shopify_cli/reporting_configuration_controller.rb +2 -37
package/dist/assets/cli-ruby/lib/shopify_cli/theme/file.rb +5 -1
package/dist/assets/dev-console/extensions/dev-console/assets/index-Cgb-oKsM.css +1 -0
package/dist/assets/dev-console/extensions/dev-console/assets/{index-Dui3DO9f.js → index-D7F9wNys.js} +12 -12
package/dist/assets/dev-console/index.html +2 -2
package/dist/assets/hydrogen/starter/.graphqlrc.ts +27 -0
package/dist/assets/hydrogen/starter/CHANGELOG.md +108 -6
package/dist/assets/hydrogen/starter/app/components/AddToCartButton.tsx +37 -0
package/dist/assets/hydrogen/starter/app/components/CartLineItem.tsx +150 -0
package/dist/assets/hydrogen/starter/app/components/CartMain.tsx +68 -0
package/dist/assets/hydrogen/starter/app/components/CartSummary.tsx +101 -0
package/dist/assets/hydrogen/starter/app/components/Header.tsx +3 -3
package/dist/assets/hydrogen/starter/app/components/PageLayout.tsx +2 -2
package/dist/assets/hydrogen/starter/app/components/ProductForm.tsx +80 -0
package/dist/assets/hydrogen/starter/app/components/ProductImage.tsx +23 -0
package/dist/assets/hydrogen/starter/app/components/ProductPrice.tsx +27 -0
package/dist/assets/hydrogen/starter/app/root.tsx +11 -17
package/dist/assets/hydrogen/starter/app/routes/cart.tsx +1 -1
package/dist/assets/hydrogen/starter/app/routes/products.$handle.tsx +51 -232
package/dist/assets/hydrogen/starter/package.json +11 -11
package/dist/assets/hydrogen/tailwind/package.json +1 -6
package/dist/assets/hydrogen/tailwind/tailwind.css +6 -3
package/dist/assets/hydrogen/vanilla-extract/package.json +2 -3
package/dist/assets/hydrogen/virtual-routes/components/{Layout.jsx → PageLayout.jsx} +2 -2
package/dist/assets/hydrogen/virtual-routes/virtual-root.jsx +8 -30
package/dist/{chunk-YAYFJITA.js → chunk-2DXCIFDK.js} +3 -3
package/dist/{chunk-EQR6CWKL.js → chunk-63D4EGTO.js} +3 -3
package/dist/{chunk-EZYMDZPN.js → chunk-6PJAGL2L.js} +5 -5
package/dist/{chunk-S4VBXFXP.js → chunk-7PVTYKQI.js} +220 -16
package/dist/{chunk-IRWSC76I.js → chunk-7TIDA343.js} +3 -3
package/dist/{chunk-NPLAQVTF.js → chunk-7W6SRTYP.js} +3 -3
package/dist/{chunk-UJYIV6JP.js → chunk-ARCFCLME.js} +5 -5
package/dist/{chunk-DIZHFZTJ.js → chunk-ATGUMSCJ.js} +4 -4
package/dist/chunk-B3D5VLUA.js +12 -0
package/dist/{chunk-UNPXLODI.js → chunk-B7RN7IRD.js} +3 -4
package/dist/{chunk-5BLMIE7F.js → chunk-DX43V2L4.js} +4 -4
package/dist/{chunk-6UDFXWNE.js → chunk-EJITPGUJ.js} +21 -4
package/dist/chunk-FDLU3RD4.js +29 -0
package/dist/{chunk-7OCUVNSF.js → chunk-H6AQTECB.js} +1485 -2977
package/dist/{chunk-T54B5GJP.js → chunk-JNUJZFQL.js} +2 -2
package/dist/{chunk-XER2L725.js → chunk-KUVX423E.js} +2 -2
package/dist/{chunk-R5KML52V.js → chunk-KZTALMEV.js} +4 -4
package/dist/{chunk-CM4H6QMH.js → chunk-M6KGRVDD.js} +3 -3
package/dist/{chunk-3MDI6LZT.js → chunk-NLE3ZLU6.js} +905 -896
package/dist/{chunk-WADS2TV5.js → chunk-NO7MYZEO.js} +5 -4
package/dist/{chunk-LH533WG4.js → chunk-NPH2SXRO.js} +2 -2
package/dist/{chunk-VZUWS5IH.js → chunk-OVWFZSJT.js} +3 -3
package/dist/{chunk-UQUO22Q5.js → chunk-OXMHVKM3.js} +5 -5
package/dist/{chunk-PNFEODLY.js → chunk-QNI6VLVR.js} +3 -3
package/dist/{chunk-MCT2524Y.js → chunk-QYT42J3T.js} +4 -4
package/dist/{chunk-VQTHQBEC.js → chunk-S3HWVIGJ.js} +9 -14
package/dist/{chunk-23OKKZ5V.js → chunk-S7A7BHNA.js} +4 -4
package/dist/{chunk-3TGMDPDI.js → chunk-SSAUIEBT.js} +2 -2
package/dist/{chunk-YMPGWFWU.js → chunk-UQQI7TQG.js} +3 -3
package/dist/{chunk-UZUD5DRI.js → chunk-UXA5YROL.js} +2 -2
package/dist/{chunk-K3CVGV3F.js → chunk-V7NH4SZB.js} +3 -3
package/dist/{chunk-7AVKIH7O.js → chunk-WVY52EEZ.js} +5 -5
package/dist/{chunk-QEOBHRRQ.js → chunk-X3OUSYUQ.js} +17912 -17444
package/dist/{chunk-EARPFFS7.js → chunk-XNCQBHNR.js} +241 -4
package/dist/{chunk-EQPYUHNM.js → chunk-ZIGJPI5N.js} +1497 -112
package/dist/{chunk-A2UVOX6O.js → chunk-ZKWHKX2C.js} +7066 -6051
package/dist/{chunk-GPMHDCWK.js → chunk-ZRGD2HUL.js} +3 -3
package/dist/{chunk-PQKGBYDC.js → chunk-ZVT2WZZF.js} +3 -3
package/dist/cli/commands/auth/logout.js +14 -19
package/dist/cli/commands/auth/logout.test.js +17 -21
package/dist/cli/commands/debug/command-flags.js +11 -15
package/dist/cli/commands/demo/catalog.js +13 -18
package/dist/cli/commands/demo/generate-file.js +13 -18
package/dist/cli/commands/demo/index.js +13 -18
package/dist/cli/commands/demo/print-ai-prompt.js +13 -18
package/dist/cli/commands/docs/generate.js +11 -15
package/dist/cli/commands/docs/generate.test.js +11 -15
package/dist/cli/commands/help.js +11 -15
package/dist/cli/commands/kitchen-sink/async.js +12 -16
package/dist/cli/commands/kitchen-sink/async.test.js +12 -16
package/dist/cli/commands/kitchen-sink/index.js +14 -18
package/dist/cli/commands/kitchen-sink/index.test.js +14 -18
package/dist/cli/commands/kitchen-sink/prompts.js +12 -16
package/dist/cli/commands/kitchen-sink/prompts.test.js +12 -16
package/dist/cli/commands/kitchen-sink/static.js +12 -16
package/dist/cli/commands/kitchen-sink/static.test.js +12 -16
package/dist/cli/commands/search.js +12 -16
package/dist/cli/commands/upgrade.js +11 -15
package/dist/cli/commands/version.js +12 -16
package/dist/cli/commands/version.test.js +12 -16
package/dist/cli/services/commands/search.js +4 -4
package/dist/cli/services/commands/search.test.js +4 -4
package/dist/cli/services/commands/version.js +6 -7
package/dist/cli/services/commands/version.test.js +7 -8
package/dist/cli/services/demo.js +5 -6
package/dist/cli/services/demo.test.js +5 -6
package/dist/cli/services/kitchen-sink/async.js +4 -4
package/dist/cli/services/kitchen-sink/prompts.js +4 -4
package/dist/cli/services/kitchen-sink/static.js +4 -4
package/dist/cli/services/upgrade.js +5 -6
package/dist/cli/services/upgrade.test.js +7 -8
package/dist/{constants-3CLHB4LQ.js → constants-EVER32LA.js} +3 -3
package/dist/{custom-oclif-loader-D4H5EJW6.js → custom-oclif-loader-BQAFOUNG.js} +13 -6
package/dist/{error-handler-HUI4HW3X.js → error-handler-S56KHSGD.js} +10 -8
package/dist/hooks/postrun.js +12 -14
package/dist/hooks/prerun.js +8 -11
package/dist/index.js +7811 -7490
package/dist/{local-7IRDZWLW.js → local-UQAQKOVL.js} +4 -4
package/dist/{morph-6NYGHGNT.js → morph-DN4AZJZW.js} +9 -9
package/dist/{node-UIH7JP3D.js → node-GZYZUMBW.js} +21 -19
package/dist/{node-package-manager-2LWT2MNN.js → node-package-manager-AOVZD6TP.js} +5 -6
package/dist/{path-JVVXOELJ.js → path-KUSF6CYC.js} +2 -2
package/dist/{system-4HHX42JS.js → system-G7DVECOP.js} +4 -4
package/dist/templates/ui-extensions/projects/web_pixel_extension/package.json.liquid +1 -1
package/dist/tsconfig.tsbuildinfo +1 -1
package/dist/{ui-NFBKMC4P.js → ui-2AOZFYFM.js} +4 -4
package/dist/{workerd-4HFD3PS4.js → workerd-2MO23YDQ.js} +22 -19
package/oclif.manifest.json +265 -4
package/package.json +7 -10
package/dist/assets/dev-console/extensions/dev-console/assets/index-Bi7y6lI5.css +0 -1
package/dist/assets/hydrogen/css-modules/package.json +0 -6
package/dist/assets/hydrogen/postcss/package.json +0 -10
package/dist/assets/hydrogen/postcss/postcss.config.js +0 -8
package/dist/assets/hydrogen/starter/.graphqlrc.yml +0 -12
package/dist/assets/hydrogen/starter/app/components/Cart.tsx +0 -364
package/dist/assets/hydrogen/tailwind/postcss.config.js +0 -10
package/dist/assets/hydrogen/tailwind/tailwind.config.js +0 -8
package/dist/chunk-4WBV3WP3.js +0 -221
package/dist/chunk-OWICSMFV.js +0 -12
package/dist/chunk-QCDYZY46.js +0 -1070
package/dist/chunk-QEKTVN5A.js +0 -4385
package/dist/chunk-QOUOFEGO.js +0 -35
package/dist/chunk-WP234IUO.js +0 -265
package/dist/chunk-XLPMGRR3.js +0 -496
package/dist/chunk-XSKJYEAZ.js +0 -1453
package/dist/error-handler-QDDLQDOJ.js +0 -43

package/dist/assets/dev-console/index.html CHANGED Viewed

@@ -12,8 +12,8 @@
     <meta name="theme-color" content="#ffffff">
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>UI Extensions DevConsole</title>
-    <script type="module" crossorigin src="/extensions/dev-console/assets/index-Dui3DO9f.js"></script>
-    <link rel="stylesheet" crossorigin href="/extensions/dev-console/assets/index-Bi7y6lI5.css">
+    <script type="module" crossorigin src="/extensions/dev-console/assets/index-D7F9wNys.js"></script>
+    <link rel="stylesheet" crossorigin href="/extensions/dev-console/assets/index-Cgb-oKsM.css">
   </head>
   <body>
     <div id="root"></div>

package/dist/assets/hydrogen/starter/.graphqlrc.ts ADDED Viewed

@@ -0,0 +1,27 @@
+import type {IGraphQLConfig} from 'graphql-config';
+import {getSchema} from '@shopify/hydrogen-codegen';
+/**
+ * GraphQL Config
+ * @see https://the-guild.dev/graphql/config/docs/user/usage
+ * @type {IGraphQLConfig}
+ */
+export default {
+  projects: {
+    default: {
+      schema: getSchema('storefront'),
+      documents: [
+        './*.{ts,tsx,js,jsx}',
+        './app/**/*.{ts,tsx,js,jsx}',
+        '!./app/graphql/**/*.{ts,tsx,js,jsx}',
+      ],
+    },
+    customer: {
+      schema: getSchema('customer-account'),
+      documents: ['./app/graphql/customer-account/*.{ts,tsx,js,jsx}'],
+    },
+    // Add your own GraphQL projects here for CMS, Shopify Admin API, etc.
+  },
+} as IGraphQLConfig;

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

@@ -1,9 +1,103 @@
 # skeleton
-## 0.0.0-next-9eb60d7-20240607102913
+## 2024.7.2
 ### Patch Changes
+- Changed the GraphQL config file format to be TS/JS instead of YAML. ([#2311](https://github.com/Shopify/hydrogen/pull/2311)) by [@frandiox](https://github.com/frandiox)
+- Updated dependencies [[`18ea233c`](https://github.com/Shopify/hydrogen/commit/18ea233cd327bf3001ec9b107ad66b05c9c78584), [`8b2322d7`](https://github.com/Shopify/hydrogen/commit/8b2322d783078298cd5d20ec5f3b1faf99b7895b)]:
+  - @shopify/cli-hydrogen@8.3.0
+## 2024.7.1
+### Patch Changes
+- Update `@shopify/oxygen-workers-types` to fix issues on Windows. ([#2252](https://github.com/Shopify/hydrogen/pull/2252)) by [@michenly](https://github.com/michenly)
+- [**Breaking change**] ([#2113](https://github.com/Shopify/hydrogen/pull/2113)) by [@blittle](https://github.com/blittle)
+  Previously the `VariantSelector` component would filter out options that only had one value. This is undesireable for some apps. We've removed that filter, if you'd like to retain the existing functionality, simply filter the options prop before it is passed to the `VariantSelector` component:
+  ```diff
+   <VariantSelector
+     handle={product.handle}
+  +  options={product.options.filter((option) => option.values.length > 1)}
+  -  options={product.options}
+     variants={variants}>
+   </VariantSelector>
+  ```
+  Fixes [#1198](https://github.com/Shopify/hydrogen/discussions/1198)
+- Update remix to v2.10.1 ([#2290](https://github.com/Shopify/hydrogen/pull/2290)) by [@michenly](https://github.com/michenly)
+- Update root to use [Remix's Layout Export pattern](https://remix.run/docs/en/main/file-conventions/root#layout-export) and eliminate the use of `useLoaderData` in root. ([#2292](https://github.com/Shopify/hydrogen/pull/2292)) by [@michenly](https://github.com/michenly)
+  The diff below showcase how you can make this refactor in existing application.
+  ```diff
+  import {
+    Outlet,
+  -  useLoaderData,
+  +  useRouteLoaderData,
+  } from '@remix-run/react';
+  -import {Layout} from '~/components/Layout';
+  +import {PageLayout} from '~/components/PageLayout';
+  -export default function App() {
+  +export function Layout({children}: {children?: React.ReactNode}) {
+    const nonce = useNonce();
+  -  const data = useLoaderData<typeof loader>();
+  +  const data = useRouteLoaderData<typeof loader>('root');
+    return (
+      <html>
+      ...
+        <body>
+  -        <Layout {...data}>
+  -          <Outlet />
+  -        </Layout>
+  +        {data? (
+  +          <PageLayout {...data}>{children}</PageLayout>
+  +         ) : (
+  +          children
+  +        )}
+        </body>
+      </html>
+    );
+  }
+  +export default function App() {
+  +  return <Outlet />;
+  +}
+  export function ErrorBoundary() {
+  - const rootData = useLoaderData<typeof loader>();
+    return (
+  -    <html>
+  -    ...
+  -      <body>
+  -        <Layout {...rootData}>
+  -          <div className="route-error">
+  -            <h1>Error</h1>
+  -            ...
+  -          </div>
+  -        </Layout>
+  -      </body>
+  -    </html>
+  +    <div className="route-error">
+  +      <h1>Error</h1>
+  +      ...
+  +    </div>
+    );
+  }
+  ```
+- Refactor the cart and product form components ([#2132](https://github.com/Shopify/hydrogen/pull/2132)) by [@blittle](https://github.com/blittle)
 - Remove manual setting of session in headers and recommend setting it in server after response is created. ([#2137](https://github.com/Shopify/hydrogen/pull/2137)) by [@michenly](https://github.com/michenly)
   Step 1: Add `isPending` implementation in session
@@ -66,12 +160,20 @@
   }
   ```
-- Trigger changeset for all packages for next release
+- Moved `@shopify/cli` from `dependencies` to `devDependencies`. ([#2312](https://github.com/Shopify/hydrogen/pull/2312)) by [@frandiox](https://github.com/frandiox)
+- The `@shopify/cli` package now bundles the `@shopify/cli-hydrogen` plugin. Therefore, you can now remove the latter from your local dependencies: ([#2306](https://github.com/Shopify/hydrogen/pull/2306)) by [@frandiox](https://github.com/frandiox)
+  ```diff
+      "@shopify/cli": "3.64.0",
+  -   "@shopify/cli-hydrogen": "^8.1.1",
+      "@shopify/hydrogen": "2024.7.0",
+  ```
-- Updated dependencies [[`4337200c`](https://github.com/Shopify/hydrogen/commit/4337200c7908d56c039171c283a4d92c31a8b7b6), [`10a419bf`](https://github.com/Shopify/hydrogen/commit/10a419bf1db79cdfd8c41c0223ce695959f60da9), [`4337200c`](https://github.com/Shopify/hydrogen/commit/4337200c7908d56c039171c283a4d92c31a8b7b6), [`9eb60d73`](https://github.com/Shopify/hydrogen/commit/9eb60d73e552c3d22b9325ecbcd5878810893ad3)]:
-  - @shopify/hydrogen@0.0.0-next-9eb60d7-20240607102913
-  - @shopify/cli-hydrogen@0.0.0-next-9eb60d7-20240607102913
-  - @shopify/remix-oxygen@0.0.0-next-9eb60d7-20240607102913
+- Updated dependencies [[`a0e84d76`](https://github.com/Shopify/hydrogen/commit/a0e84d76b67d4c57c4defee06185949c41782eab), [`426bb390`](https://github.com/Shopify/hydrogen/commit/426bb390b25f51e57499ff6673aef70ded935e87), [`4337200c`](https://github.com/Shopify/hydrogen/commit/4337200c7908d56c039171c283a4d92c31a8b7b6), [`710625c7`](https://github.com/Shopify/hydrogen/commit/710625c740a6656488d4b419e2d2451bef9d076f), [`8b9c726d`](https://github.com/Shopify/hydrogen/commit/8b9c726d34f3482b5b5a0da4c7c0c2f20e2c9caa), [`10a419bf`](https://github.com/Shopify/hydrogen/commit/10a419bf1db79cdfd8c41c0223ce695959f60da9), [`6a6278bb`](https://github.com/Shopify/hydrogen/commit/6a6278bb9187b3b5a98cd98ec9dd278882d03c0d), [`66236ca6`](https://github.com/Shopify/hydrogen/commit/66236ca65ddefac99eaa553c7877c85863d84cc2), [`dcbd0bbf`](https://github.com/Shopify/hydrogen/commit/dcbd0bbf4073a3e35e96f3cce257f7b19b2b2aea), [`a5e03e2a`](https://github.com/Shopify/hydrogen/commit/a5e03e2a1e99fcd83ee5a2be7bf6f5f6b47984b3), [`c2690653`](https://github.com/Shopify/hydrogen/commit/c2690653b6b24f7318e9088551a37195255a2247), [`54c2f7ad`](https://github.com/Shopify/hydrogen/commit/54c2f7ad3d0d52e6be10b2a54a1a4fd0cc107a35), [`4337200c`](https://github.com/Shopify/hydrogen/commit/4337200c7908d56c039171c283a4d92c31a8b7b6), [`e96b332b`](https://github.com/Shopify/hydrogen/commit/e96b332ba1aba79aa3d5c2ce18001292070faf49), [`f3065371`](https://github.com/Shopify/hydrogen/commit/f3065371c1dda222c6e40bd8c20528dc9fdea9a5), [`6cd5554b`](https://github.com/Shopify/hydrogen/commit/6cd5554b160d314d35964a5ee8976ed60972bf17), [`9eb60d73`](https://github.com/Shopify/hydrogen/commit/9eb60d73e552c3d22b9325ecbcd5878810893ad3), [`e432533e`](https://github.com/Shopify/hydrogen/commit/e432533e7391ec3fe16a4a24f2b3363206842580), [`de3f70be`](https://github.com/Shopify/hydrogen/commit/de3f70be1a838eda746903cbb38cc25cf0e09fa3), [`83cb96f4`](https://github.com/Shopify/hydrogen/commit/83cb96f42078bf79b20a153d8a8461f75d573ab1)]:
+  - @shopify/remix-oxygen@2.0.5
+  - @shopify/cli-hydrogen@8.2.0
+  - @shopify/hydrogen@2024.7.1
 ## 2024.4.5

package/dist/assets/hydrogen/starter/app/components/AddToCartButton.tsx ADDED Viewed

@@ -0,0 +1,37 @@
+import {type FetcherWithComponents} from '@remix-run/react';
+import {CartForm, type OptimisticCartLineInput} from '@shopify/hydrogen';
+export function AddToCartButton({
+  analytics,
+  children,
+  disabled,
+  lines,
+  onClick,
+}: {
+  analytics?: unknown;
+  children: React.ReactNode;
+  disabled?: boolean;
+  lines: Array<OptimisticCartLineInput>;
+  onClick?: () => void;
+}) {
+  return (
+    <CartForm route="/cart" inputs={{lines}} action={CartForm.ACTIONS.LinesAdd}>
+      {(fetcher: FetcherWithComponents<any>) => (
+        <>
+          <input
+            name="analytics"
+            type="hidden"
+            value={JSON.stringify(analytics)}
+          />
+          <button
+            type="submit"
+            onClick={onClick}
+            disabled={disabled ?? fetcher.state !== 'idle'}
+          >
+            {children}
+          </button>
+        </>
+      )}
+    </CartForm>
+  );
+}

package/dist/assets/hydrogen/starter/app/components/CartLineItem.tsx ADDED Viewed

@@ -0,0 +1,150 @@
+import type {CartLineUpdateInput} from '@shopify/hydrogen/storefront-api-types';
+import type {CartLayout} from '~/components/CartMain';
+import {CartForm, Image, type OptimisticCartLine} from '@shopify/hydrogen';
+import {useVariantUrl} from '~/lib/variants';
+import {Link} from '@remix-run/react';
+import {ProductPrice} from './ProductPrice';
+import {useAside} from './Aside';
+/**
+ * A single line item in the cart. It displays the product image, title, price.
+ * It also provides controls to update the quantity or remove the line item.
+ */
+export function CartLineItem({
+  layout,
+  line,
+}: {
+  layout: CartLayout;
+  line: OptimisticCartLine;
+}) {
+  const {id, merchandise} = line;
+  const {product, title, image, selectedOptions} = merchandise;
+  const lineItemUrl = useVariantUrl(product.handle, selectedOptions);
+  const {close} = useAside();
+  return (
+    <li key={id} className="cart-line">
+      {image && (
+        <Image
+          alt={title}
+          aspectRatio="1/1"
+          data={image}
+          height={100}
+          loading="lazy"
+          width={100}
+        />
+      )}
+      <div>
+        <Link
+          prefetch="intent"
+          to={lineItemUrl}
+          onClick={() => {
+            if (layout === 'aside') {
+              close();
+            }
+          }}
+        >
+          <p>
+            <strong>{product.title}</strong>
+          </p>
+        </Link>
+        <ProductPrice price={line?.cost?.totalAmount} />
+        <ul>
+          {selectedOptions.map((option) => (
+            <li key={option.name}>
+              <small>
+                {option.name}: {option.value}
+              </small>
+            </li>
+          ))}
+        </ul>
+        <CartLineQuantity line={line} />
+      </div>
+    </li>
+  );
+}
+/**
+ * Provides the controls to update the quantity of a line item in the cart.
+ * These controls are disabled when the line item is new, and the server
+ * hasn't yet responded that it was successfully added to the cart.
+ */
+function CartLineQuantity({line}: {line: OptimisticCartLine}) {
+  if (!line || typeof line?.quantity === 'undefined') return null;
+  const {id: lineId, quantity, isOptimistic} = line;
+  const prevQuantity = Number(Math.max(0, quantity - 1).toFixed(0));
+  const nextQuantity = Number((quantity + 1).toFixed(0));
+  return (
+    <div className="cart-line-quantity">
+      <small>Quantity: {quantity} &nbsp;&nbsp;</small>
+      <CartLineUpdateButton lines={[{id: lineId, quantity: prevQuantity}]}>
+        <button
+          aria-label="Decrease quantity"
+          disabled={quantity <= 1 || !!isOptimistic}
+          name="decrease-quantity"
+          value={prevQuantity}
+        >
+          <span>&#8722; </span>
+        </button>
+      </CartLineUpdateButton>
+      &nbsp;
+      <CartLineUpdateButton lines={[{id: lineId, quantity: nextQuantity}]}>
+        <button
+          aria-label="Increase quantity"
+          name="increase-quantity"
+          value={nextQuantity}
+          disabled={!!isOptimistic}
+        >
+          <span>&#43;</span>
+        </button>
+      </CartLineUpdateButton>
+      &nbsp;
+      <CartLineRemoveButton lineIds={[lineId]} disabled={!!isOptimistic} />
+    </div>
+  );
+}
+/**
+ * A button that removes a line item from the cart. It is disabled
+ * when the line item is new, and the server hasn't yet responded
+ * that it was successfully added to the cart.
+ */
+function CartLineRemoveButton({
+  lineIds,
+  disabled,
+}: {
+  lineIds: string[];
+  disabled: boolean;
+}) {
+  return (
+    <CartForm
+      route="/cart"
+      action={CartForm.ACTIONS.LinesRemove}
+      inputs={{lineIds}}
+    >
+      <button disabled={disabled} type="submit">
+        Remove
+      </button>
+    </CartForm>
+  );
+}
+function CartLineUpdateButton({
+  children,
+  lines,
+}: {
+  children: React.ReactNode;
+  lines: CartLineUpdateInput[];
+}) {
+  return (
+    <CartForm
+      route="/cart"
+      action={CartForm.ACTIONS.LinesUpdate}
+      inputs={{lines}}
+    >
+      {children}
+    </CartForm>
+  );
+}

package/dist/assets/hydrogen/starter/app/components/CartMain.tsx ADDED Viewed

@@ -0,0 +1,68 @@
+import {type OptimisticCartLine, useOptimisticCart} from '@shopify/hydrogen';
+import {Link} from '@remix-run/react';
+import type {CartApiQueryFragment} from 'storefrontapi.generated';
+import {useAside} from '~/components/Aside';
+import {CartLineItem} from '~/components/CartLineItem';
+import {CartSummary} from './CartSummary';
+export type CartLayout = 'page' | 'aside';
+export type CartMainProps = {
+  cart: CartApiQueryFragment | null;
+  layout: CartLayout;
+};
+/**
+ * The main cart component that displays the cart items and summary.
+ * It is used by both the /cart route and the cart aside dialog.
+ */
+export function CartMain({layout, cart: originalCart}: CartMainProps) {
+  // The useOptimisticCart hook applies pending actions to the cart
+  // so the user immediately sees feedback when they modify the cart.
+  const cart = useOptimisticCart(originalCart);
+  const linesCount = Boolean(cart?.lines?.nodes?.length || 0);
+  const withDiscount =
+    cart &&
+    Boolean(cart?.discountCodes?.filter((code) => code.applicable)?.length);
+  const className = `cart-main ${withDiscount ? 'with-discount' : ''}`;
+  const cartHasItems = cart?.totalQuantity! > 0;
+  return (
+    <div className={className}>
+      <CartEmpty hidden={linesCount} layout={layout} />
+      <div className="cart-details">
+        <div aria-labelledby="cart-lines">
+          <ul>
+            {(cart?.lines?.nodes ?? []).map((line: OptimisticCartLine) => (
+              <CartLineItem key={line.id} line={line} layout={layout} />
+            ))}
+          </ul>
+        </div>
+        {cartHasItems && <CartSummary cart={cart} layout={layout} />}
+      </div>
+    </div>
+  );
+}
+function CartEmpty({
+  hidden = false,
+}: {
+  hidden: boolean;
+  layout?: CartMainProps['layout'];
+}) {
+  const {close} = useAside();
+  return (
+    <div hidden={hidden}>
+      <br />
+      <p>
+        Looks like you haven&rsquo;t added anything yet, let&rsquo;s get you
+        started!
+      </p>
+      <br />
+      <Link to="/collections" onClick={close} prefetch="viewport">
+        Continue shopping →
+      </Link>
+    </div>
+  );
+}

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

@@ -0,0 +1,101 @@
+import type {CartApiQueryFragment} from 'storefrontapi.generated';
+import type {CartLayout} from '~/components/CartMain';
+import {CartForm, Money, type OptimisticCart} from '@shopify/hydrogen';
+type CartSummaryProps = {
+  cart: OptimisticCart<CartApiQueryFragment | null>;
+  layout: CartLayout;
+};
+export function CartSummary({cart, layout}: CartSummaryProps) {
+  const className =
+    layout === 'page' ? 'cart-summary-page' : 'cart-summary-aside';
+  return (
+    <div aria-labelledby="cart-summary" className={className}>
+      <h4>Totals</h4>
+      <dl className="cart-subtotal">
+        <dt>Subtotal</dt>
+        <dd>
+          {cart.cost?.subtotalAmount?.amount ? (
+            <Money data={cart.cost?.subtotalAmount} />
+          ) : (
+            '-'
+          )}
+        </dd>
+      </dl>
+      <CartDiscounts discountCodes={cart.discountCodes} />
+      <CartCheckoutActions checkoutUrl={cart.checkoutUrl} />
+    </div>
+  );
+}
+function CartCheckoutActions({checkoutUrl}: {checkoutUrl?: string}) {
+  if (!checkoutUrl) return null;
+  return (
+    <div>
+      <a href={checkoutUrl} target="_self">
+        <p>Continue to Checkout &rarr;</p>
+      </a>
+      <br />
+    </div>
+  );
+}
+function CartDiscounts({
+  discountCodes,
+}: {
+  discountCodes?: CartApiQueryFragment['discountCodes'];
+}) {
+  const codes: string[] =
+    discountCodes
+      ?.filter((discount) => discount.applicable)
+      ?.map(({code}) => code) || [];
+  return (
+    <div>
+      {/* Have existing discount, display it with a remove option */}
+      <dl hidden={!codes.length}>
+        <div>
+          <dt>Discount(s)</dt>
+          <UpdateDiscountForm>
+            <div className="cart-discount">
+              <code>{codes?.join(', ')}</code>
+              &nbsp;
+              <button>Remove</button>
+            </div>
+          </UpdateDiscountForm>
+        </div>
+      </dl>
+      {/* Show an input to apply a discount */}
+      <UpdateDiscountForm discountCodes={codes}>
+        <div>
+          <input type="text" name="discountCode" placeholder="Discount code" />
+          &nbsp;
+          <button type="submit">Apply</button>
+        </div>
+      </UpdateDiscountForm>
+    </div>
+  );
+}
+function UpdateDiscountForm({
+  discountCodes,
+  children,
+}: {
+  discountCodes?: string[];
+  children: React.ReactNode;
+}) {
+  return (
+    <CartForm
+      route="/cart"
+      action={CartForm.ACTIONS.DiscountCodesUpdate}
+      inputs={{
+        discountCodes: discountCodes || [],
+      }}
+    >
+      {children}
+    </CartForm>
+  );
+}

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

@@ -138,7 +138,7 @@ function SearchToggle() {
   );
 }
-function CartBadge({count}: {count: number}) {
+function CartBadge({count}: {count: number | null}) {
   const {open} = useAside();
   const {publish, shop, cart, prevCart} = useAnalytics();
@@ -156,14 +156,14 @@ function CartBadge({count}: {count: number}) {
         } as CartViewPayload);
       }}
     >
-      Cart {count}
+      Cart {count === null ? <span>&nbsp;</span> : count}
     </a>
   );
 }
 function CartToggle({cart}: Pick<HeaderProps, 'cart'>) {
   return (
-    <Suspense fallback={<CartBadge count={0} />}>
+    <Suspense fallback={<CartBadge count={null} />}>
       <Await resolve={cart}>
         {(cart) => {
           if (!cart) return <CartBadge count={0} />;

package/dist/assets/hydrogen/starter/app/components/PageLayout.tsx CHANGED Viewed

@@ -8,7 +8,7 @@ import type {
 import {Aside} from '~/components/Aside';
 import {Footer} from '~/components/Footer';
 import {Header, HeaderMenu} from '~/components/Header';
-import {CartMain} from '~/components/Cart';
+import {CartMain} from '~/components/CartMain';
 import {
   PredictiveSearchForm,
   PredictiveSearchResults,
@@ -60,7 +60,7 @@ function CartAside({cart}: {cart: PageLayoutProps['cart']}) {
       <Suspense fallback={<p>Loading cart ...</p>}>
         <Await resolve={cart}>
           {(cart) => {
-            return <CartMain cart={cart!} layout="aside" />;
+            return <CartMain cart={cart} layout="aside" />;
           }}
         </Await>
       </Suspense>

package/dist/assets/hydrogen/starter/app/components/ProductForm.tsx ADDED Viewed

@@ -0,0 +1,80 @@
+import {Link} from '@remix-run/react';
+import {type VariantOption, VariantSelector} from '@shopify/hydrogen';
+import type {
+  ProductFragment,
+  ProductVariantFragment,
+} from 'storefrontapi.generated';
+import {AddToCartButton} from '~/components/AddToCartButton';
+import {useAside} from '~/components/Aside';
+export function ProductForm({
+  product,
+  selectedVariant,
+  variants,
+}: {
+  product: ProductFragment;
+  selectedVariant: ProductFragment['selectedVariant'];
+  variants: Array<ProductVariantFragment>;
+}) {
+  const {open} = useAside();
+  return (
+    <div className="product-form">
+      <VariantSelector
+        handle={product.handle}
+        options={product.options.filter((option) => option.values.length > 1)}
+        variants={variants}
+      >
+        {({option}) => <ProductOptions key={option.name} option={option} />}
+      </VariantSelector>
+      <br />
+      <AddToCartButton
+        disabled={!selectedVariant || !selectedVariant.availableForSale}
+        onClick={() => {
+          open('cart');
+        }}
+        lines={
+          selectedVariant
+            ? [
+                {
+                  merchandiseId: selectedVariant.id,
+                  quantity: 1,
+                  selectedVariant,
+                },
+              ]
+            : []
+        }
+      >
+        {selectedVariant?.availableForSale ? 'Add to cart' : 'Sold out'}
+      </AddToCartButton>
+    </div>
+  );
+}
+function ProductOptions({option}: {option: VariantOption}) {
+  return (
+    <div className="product-options" key={option.name}>
+      <h5>{option.name}</h5>
+      <div className="product-options-grid">
+        {option.values.map(({value, isAvailable, isActive, to}) => {
+          return (
+            <Link
+              className="product-options-item"
+              key={option.name + value}
+              prefetch="intent"
+              preventScrollReset
+              replace
+              to={to}
+              style={{
+                border: isActive ? '1px solid black' : '1px solid transparent',
+                opacity: isAvailable ? 1 : 0.3,
+              }}
+            >
+              {value}
+            </Link>
+          );
+        })}
+      </div>
+      <br />
+    </div>
+  );
+}

package/dist/assets/hydrogen/starter/app/components/ProductImage.tsx ADDED Viewed

@@ -0,0 +1,23 @@
+import type {ProductVariantFragment} from 'storefrontapi.generated';
+import {Image} from '@shopify/hydrogen';
+export function ProductImage({
+  image,
+}: {
+  image: ProductVariantFragment['image'];
+}) {
+  if (!image) {
+    return <div className="product-image" />;
+  }
+  return (
+    <div className="product-image">
+      <Image
+        alt={image.altText || 'Product Image'}
+        aspectRatio="1/1"
+        data={image}
+        key={image.id}
+        sizes="(min-width: 45em) 50vw, 100vw"
+      />
+    </div>
+  );
+}