npm - @shopify/cli-hydrogen - Versions diffs - 8.1.1 → 8.3.0 - Mend

@shopify/cli-hydrogen 8.1.1 → 8.3.0

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 (105) hide show

package/dist/assets/hydrogen/starter/.graphqlrc.ts +27 -0
package/dist/assets/hydrogen/starter/CHANGELOG.md +166 -8
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/lib/session.ts +5 -0
package/dist/assets/hydrogen/starter/app/root.tsx +23 -36
package/dist/assets/hydrogen/starter/app/routes/account.$.tsx +1 -5
package/dist/assets/hydrogen/starter/app/routes/account.addresses.tsx +12 -70
package/dist/assets/hydrogen/starter/app/routes/account.orders.$id.tsx +7 -14
package/dist/assets/hydrogen/starter/app/routes/account.orders._index.tsx +1 -8
package/dist/assets/hydrogen/starter/app/routes/account.profile.tsx +5 -22
package/dist/assets/hydrogen/starter/app/routes/account.tsx +0 -1
package/dist/assets/hydrogen/starter/app/routes/cart.tsx +1 -3
package/dist/assets/hydrogen/starter/app/routes/products.$handle.tsx +51 -232
package/dist/assets/hydrogen/starter/package.json +10 -11
package/dist/assets/hydrogen/starter/server.ts +4 -0
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/components/RequestDetails.jsx +1 -2
package/dist/assets/hydrogen/virtual-routes/components/RequestTable.jsx +1 -2
package/dist/assets/hydrogen/virtual-routes/routes/index.jsx +1 -2
package/dist/assets/hydrogen/virtual-routes/virtual-root.jsx +8 -30
package/dist/commands/hydrogen/build.js +33 -10
package/dist/commands/hydrogen/customer-account/push.js +3 -6
package/dist/commands/hydrogen/debug/cpu.js +3 -3
package/dist/commands/hydrogen/deploy.js +14 -3
package/dist/commands/hydrogen/dev.js +3 -6
package/dist/commands/hydrogen/env/list.js +1 -2
package/dist/commands/hydrogen/env/pull.js +2 -4
package/dist/commands/hydrogen/env/push.js +6 -12
package/dist/commands/hydrogen/init.d.ts +18 -15
package/dist/commands/hydrogen/init.js +12 -24
package/dist/commands/hydrogen/link.js +1 -2
package/dist/commands/hydrogen/login.js +4 -0
package/dist/commands/hydrogen/logout.js +2 -0
package/dist/commands/hydrogen/preview.js +4 -6
package/dist/commands/hydrogen/setup/css.js +29 -12
package/dist/commands/hydrogen/setup/vite.js +3 -6
package/dist/commands/hydrogen/setup.js +8 -7
package/dist/commands/hydrogen/upgrade.js +16 -32
package/dist/hooks/init.js +53 -6
package/dist/index.d.ts +46 -46
package/dist/lib/auth.js +4 -65
package/dist/lib/build.js +1 -2
package/dist/lib/bundle/analyzer.js +39 -24
package/dist/lib/bundle/vite-plugin.js +161 -0
package/dist/lib/check-cli-version.js +61 -0
package/dist/lib/check-lockfile.js +2 -2
package/dist/lib/classic-compiler/build.js +3 -3
package/dist/lib/classic-compiler/dev.js +5 -10
package/dist/lib/codegen.js +75 -49
package/dist/lib/defer.js +2 -4
package/dist/lib/environment-variables.js +2 -4
package/dist/lib/file.js +15 -7
package/dist/lib/flags.js +10 -0
package/dist/lib/get-oxygen-deployment-data.js +1 -2
package/dist/lib/graphiql-url.js +1 -2
package/dist/lib/import-utils.js +8 -2
package/dist/lib/log.js +17 -53
package/dist/lib/mini-oxygen/common.js +1 -2
package/dist/lib/mini-oxygen/node.js +1 -2
package/dist/lib/missing-routes.js +1 -2
package/dist/lib/onboarding/common.js +62 -15
package/dist/lib/onboarding/local.js +14 -13
package/dist/lib/onboarding/remote.js +16 -9
package/dist/lib/onboarding/setup-template.mocks.js +6 -3
package/dist/lib/remix-config.js +2 -4
package/dist/lib/remix-version-check.js +1 -2
package/dist/lib/request-events.js +3 -6
package/dist/lib/setups/css/assets.js +1 -1
package/dist/lib/setups/css/index.js +17 -10
package/dist/lib/setups/css/replacers.js +74 -76
package/dist/lib/setups/css/tailwind.js +16 -20
package/dist/lib/setups/css/vanilla-extract.js +8 -5
package/dist/lib/setups/i18n/replacers.js +1 -2
package/dist/lib/setups/routes/generate.js +18 -19
package/dist/lib/shell.js +5 -10
package/dist/lib/template-diff.js +83 -104
package/dist/lib/template-downloader.js +2 -2
package/dist/lib/transpile/morph/functions.js +3 -6
package/dist/lib/transpile/morph/index.js +2 -4
package/dist/lib/transpile/morph/typedefs.js +3 -6
package/dist/lib/transpile/morph/utils.js +2 -4
package/dist/lib/transpile/project.js +4 -3
package/oclif.manifest.json +51 -4
package/package.json +8 -12
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/lib/check-version.js +0 -75
package/dist/lib/setups/css/css-modules.js +0 -23
package/dist/lib/setups/css/postcss.js +0 -31

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,21 +1,179 @@
 # skeleton
-## 2024.4.7
+## 2024.7.2
 ### Patch Changes
-- Fix paths on Windows. ([#2243](https://github.com/Shopify/hydrogen/pull/2243)) by [@michenly](https://github.com/michenly)
+- 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 [[`31452380`](https://github.com/Shopify/hydrogen/commit/31452380340e079cd4ec1f8c10cdab5e5313e921)]:
-  - @shopify/hydrogen@2024.4.5
-  - @shopify/cli-hydrogen@8.1.1
+- 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.4.6
+## 2024.7.1
 ### Patch Changes
-- Updated dependencies [[`707afb96`](https://github.com/Shopify/hydrogen/commit/707afb96fd1ef64a59a14182f60ca61718b372d1)]:
-  - @shopify/hydrogen@2024.4.4
+- 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
+  ```diff
+  // in app/lib/session.ts
+  export class AppSession implements HydrogenSession {
+  +  public isPending = false;
+    get unset() {
+  +    this.isPending = true;
+      return this.#session.unset;
+    }
+    get set() {
+  +    this.isPending = true;
+      return this.#session.set;
+    }
+    commit() {
+  +    this.isPending = false;
+      return this.#sessionStorage.commitSession(this.#session);
+    }
+  }
+  ```
+  Step 2: update response header if `session.isPending` is true
+  ```diff
+  // in server.ts
+  export default {
+    async fetch(request: Request): Promise<Response> {
+      try {
+        const response = await handleRequest(request);
+  +      if (session.isPending) {
+  +        response.headers.set('Set-Cookie', await session.commit());
+  +      }
+        return response;
+      } catch (error) {
+        ...
+      }
+    },
+  };
+  ```
+  Step 3: remove setting cookie with session.commit() in routes
+  ```diff
+  // in route files
+  export async function loader({context}: LoaderFunctionArgs) {
+    return json({},
+  -    {
+  -      headers: {
+  -        'Set-Cookie': await context.session.commit(),
+  -      },
+      },
+    );
+  }
+  ```
+- 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 [[`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>