@shopify/cli-hydrogen 8.0.4 → 8.1.1

package/dist/{lib/setups/i18n/templates → assets/hydrogen/i18n}/domains.ts

@@ -1,4 +1,4 @@
-import type {LanguageCode, CountryCode} from '../mock-i18n-types.js';
+import type {LanguageCode, CountryCode} from './mock-i18n-types.js';
 
 export type I18nLocale = {language: LanguageCode; country: CountryCode};
 

package/dist/assets/hydrogen/i18n/mock-i18n-types.ts

@@ -0,0 +1,3 @@
+// Mock types so we don't need to depend on Hydrogen React
+export type CountryCode = 'US' | 'ES' | 'FR' | 'DE' | 'JP';
+export type LanguageCode = 'EN' | 'ES' | 'FR' | 'DE' | 'JA';

package/dist/{lib/setups/i18n/templates → assets/hydrogen/i18n}/subdomains.ts

@@ -1,4 +1,4 @@
-import type {LanguageCode, CountryCode} from '../mock-i18n-types.js';
+import type {LanguageCode, CountryCode} from './mock-i18n-types.js';
 
 export type I18nLocale = {language: LanguageCode; country: CountryCode};
 

package/dist/{lib/setups/i18n/templates → assets/hydrogen/i18n}/subfolders.ts

@@ -1,4 +1,4 @@
-import type {LanguageCode, CountryCode} from '../mock-i18n-types.js';
+import type {LanguageCode, CountryCode} from './mock-i18n-types.js';
 
 export type I18nLocale = {
   language: LanguageCode;

package/dist/{generator-templates → assets/hydrogen}/starter/.eslintrc.cjs

@@ -14,5 +14,6 @@ module.exports = {
     'no-useless-escape': 'off',
     '@typescript-eslint/no-non-null-asserted-optional-chain': 'off',
     'no-case-declarations': 'off',
+    'no-console': ['warn', {allow: ['warn', 'error']}],
   },
 };

package/dist/{generator-templates → assets/hydrogen}/starter/CHANGELOG.md

@@ -1,5 +1,36 @@
 # skeleton
 
+## 2024.4.7
+
+### Patch Changes
+
+- Fix paths on Windows. ([#2243](https://github.com/Shopify/hydrogen/pull/2243)) by [@michenly](https://github.com/michenly)
+
+- Updated dependencies [[`31452380`](https://github.com/Shopify/hydrogen/commit/31452380340e079cd4ec1f8c10cdab5e5313e921)]:
+  - @shopify/hydrogen@2024.4.5
+  - @shopify/cli-hydrogen@8.1.1
+
+## 2024.4.6
+
+### Patch Changes
+
+- Updated dependencies [[`707afb96`](https://github.com/Shopify/hydrogen/commit/707afb96fd1ef64a59a14182f60ca61718b372d1)]:
+  - @shopify/hydrogen@2024.4.4
+
+## 2024.4.5
+
+### Patch Changes
+
+- Update remix to v2.9.2 ([#2135](https://github.com/Shopify/hydrogen/pull/2135)) by [@michenly](https://github.com/michenly)
+
+- `<Analytics>` and `useAnalytics` are now stable. ([#2141](https://github.com/Shopify/hydrogen/pull/2141)) by [@wizardlyhel](https://github.com/wizardlyhel)
+
+- Update the skeleton template to use React state in the aside dialogs ([#2088](https://github.com/Shopify/hydrogen/pull/2088)) by [@blittle](https://github.com/blittle)
+
+- Updated dependencies [[`fe82119f`](https://github.com/Shopify/hydrogen/commit/fe82119f5e75df5a0f727bab6a2186e679abc73d), [`32d4c33e`](https://github.com/Shopify/hydrogen/commit/32d4c33e4421a9c56f62a8c392f5417edddd0402), [`8eea75ec`](https://github.com/Shopify/hydrogen/commit/8eea75ec5ead4de98d7d1b2baedce8511029bcae), [`27e51abf`](https://github.com/Shopify/hydrogen/commit/27e51abfc1f5444afa952c503886bfa12fc55c7e), [`f29c9085`](https://github.com/Shopify/hydrogen/commit/f29c9085eb1adbde9e01226484eba8a85b5074ed), [`7b838beb`](https://github.com/Shopify/hydrogen/commit/7b838beb7c43380ffc9c32c2bb9f34291912fa42), [`d702aec2`](https://github.com/Shopify/hydrogen/commit/d702aec2214646a78cdafc2c25d510489db73f6d), [`ca4cf045`](https://github.com/Shopify/hydrogen/commit/ca4cf045f7fb72ad98b62af7bd172ff8cf553de2), [`5a554b2e`](https://github.com/Shopify/hydrogen/commit/5a554b2e9d91894c2db8032f0c29666dce1ea3f2), [`27e51abf`](https://github.com/Shopify/hydrogen/commit/27e51abfc1f5444afa952c503886bfa12fc55c7e), [`5d6465b3`](https://github.com/Shopify/hydrogen/commit/5d6465b32d90052e5580fcb81d98427bcb8ad528), [`608389d6`](https://github.com/Shopify/hydrogen/commit/608389d6d69c6a9801935d528507c165d1dd4ccf), [`9dfd1cfe`](https://github.com/Shopify/hydrogen/commit/9dfd1cfeb3e96c6d3426427a4b5d97ef475dab6d), [`7def3e9f`](https://github.com/Shopify/hydrogen/commit/7def3e9fa6e28f4fde7af43e2f346aa32267c38e), [`65239c76`](https://github.com/Shopify/hydrogen/commit/65239c76ca1d0b294b59b1ad53624485859c4da5), [`ca7f2888`](https://github.com/Shopify/hydrogen/commit/ca7f28887367a4882e57a67c4e248b0f0bba1c9b)]:
+  - @shopify/hydrogen@2024.4.3
+  - @shopify/cli-hydrogen@8.1.0
+
 ## 2024.4.4
 
 ### Patch Changes

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

@@ -0,0 +1,76 @@
+import {createContext, type ReactNode, useContext, useState} from 'react';
+
+type AsideType = 'search' | 'cart' | 'mobile' | 'closed';
+type AsideContextValue = {
+  type: AsideType;
+  open: (mode: AsideType) => void;
+  close: () => void;
+};
+
+/**
+ * A side bar component with Overlay
+ * @example
+ * ```jsx
+ * <Aside type="search" heading="SEARCH">
+ *  <input type="search" />
+ *  ...
+ * </Aside>
+ * ```
+ */
+export function Aside({
+  children,
+  heading,
+  type,
+}: {
+  children?: React.ReactNode;
+  type: AsideType;
+  heading: React.ReactNode;
+}) {
+  const {type: activeType, close} = useAside();
+  const expanded = type === activeType;
+
+  return (
+    <div
+      aria-modal
+      className={`overlay ${expanded ? 'expanded' : ''}`}
+      role="dialog"
+    >
+      <button className="close-outside" onClick={close} />
+      <aside>
+        <header>
+          <h3>{heading}</h3>
+          <button className="close reset" onClick={close}>
+            &times;
+          </button>
+        </header>
+        <main>{children}</main>
+      </aside>
+    </div>
+  );
+}
+
+const AsideContext = createContext<AsideContextValue | null>(null);
+
+Aside.Provider = function AsideProvider({children}: {children: ReactNode}) {
+  const [type, setType] = useState<AsideType>('closed');
+
+  return (
+    <AsideContext.Provider
+      value={{
+        type,
+        open: setType,
+        close: () => setType('closed'),
+      }}
+    >
+      {children}
+    </AsideContext.Provider>
+  );
+};
+
+export function useAside() {
+  const aside = useContext(AsideContext);
+  if (!aside) {
+    throw new Error('useAside must be used within an AsideProvider');
+  }
+  return aside;
+}

package/dist/{generator-templates → assets/hydrogen}/starter/app/components/Cart.tsx

@@ -1,17 +1,25 @@
-import {CartForm, Image, Money} from '@shopify/hydrogen';
+import {
+  CartForm,
+  Image,
+  Money,
+  useOptimisticCart,
+  type OptimisticCart,
+} from '@shopify/hydrogen';
 import type {CartLineUpdateInput} from '@shopify/hydrogen/storefront-api-types';
 import {Link} from '@remix-run/react';
 import type {CartApiQueryFragment} from 'storefrontapi.generated';
 import {useVariantUrl} from '~/lib/variants';
 
-type CartLine = CartApiQueryFragment['lines']['nodes'][0];
+type CartLine = OptimisticCart<CartApiQueryFragment>['lines']['nodes'][0];
 
 type CartMainProps = {
   cart: CartApiQueryFragment | null;
   layout: 'page' | 'aside';
 };
 
-export function CartMain({layout, cart}: CartMainProps) {
+export function CartMain({layout, cart: originalCart}: CartMainProps) {
+  const cart = useOptimisticCart(originalCart);
+
   const linesCount = Boolean(cart?.lines?.nodes?.length || 0);
   const withDiscount =
     cart &&
@@ -26,12 +34,18 @@ export function CartMain({layout, cart}: CartMainProps) {
   );
 }
 
-function CartDetails({layout, cart}: CartMainProps) {
+function CartDetails({
+  layout,
+  cart,
+}: {
+  cart: OptimisticCart<CartApiQueryFragment>;
+  layout: 'page' | 'aside';
+}) {
   const cartHasItems = !!cart && cart.totalQuantity > 0;
 
   return (
     <div className="cart-details">
-      <CartLines lines={cart?.lines} layout={layout} />
+      <CartLines lines={cart?.lines?.nodes} layout={layout} />
       {cartHasItems && (
         <CartSummary cost={cart.cost} layout={layout}>
           <CartDiscounts discountCodes={cart.discountCodes} />
@@ -47,14 +61,14 @@ function CartLines({
   layout,
 }: {
   layout: CartMainProps['layout'];
-  lines: CartApiQueryFragment['lines'] | undefined;
+  lines: CartLine[];
 }) {
   if (!lines) return null;
 
   return (
     <div aria-labelledby="cart-lines">
       <ul>
-        {lines.nodes.map((line) => (
+        {lines.map((line) => (
           <CartLineItem key={line.id} line={line} layout={layout} />
         ))}
       </ul>
@@ -160,21 +174,29 @@ export function CartSummary({
   );
 }
 
-function CartLineRemoveButton({lineIds}: {lineIds: string[]}) {
+function CartLineRemoveButton({
+  lineIds,
+  disabled,
+}: {
+  lineIds: string[];
+  disabled: boolean;
+}) {
   return (
     <CartForm
       route="/cart"
       action={CartForm.ACTIONS.LinesRemove}
       inputs={{lineIds}}
     >
-      <button type="submit">Remove</button>
+      <button disabled={disabled} type="submit">
+        Remove
+      </button>
     </CartForm>
   );
 }
 
 function CartLineQuantity({line}: {line: CartLine}) {
   if (!line || typeof line?.quantity === 'undefined') return null;
-  const {id: lineId, quantity} = line;
+  const {id: lineId, quantity, isOptimistic} = line;
   const prevQuantity = Number(Math.max(0, quantity - 1).toFixed(0));
   const nextQuantity = Number((quantity + 1).toFixed(0));
 
@@ -184,7 +206,7 @@ function CartLineQuantity({line}: {line: CartLine}) {
       <CartLineUpdateButton lines={[{id: lineId, quantity: prevQuantity}]}>
         <button
           aria-label="Decrease quantity"
-          disabled={quantity <= 1}
+          disabled={quantity <= 1 || !!isOptimistic}
           name="decrease-quantity"
           value={prevQuantity}
         >
@@ -197,12 +219,13 @@ function CartLineQuantity({line}: {line: CartLine}) {
           aria-label="Increase quantity"
           name="increase-quantity"
           value={nextQuantity}
+          disabled={!!isOptimistic}
         >
           <span>&#43;</span>
         </button>
       </CartLineUpdateButton>
       &nbsp;
-      <CartLineRemoveButton lineIds={[lineId]} />
+      <CartLineRemoveButton lineIds={[lineId]} disabled={!!isOptimistic} />
     </div>
   );
 }
@@ -216,7 +239,8 @@ function CartLinePrice({
   priceType?: 'regular' | 'compareAt';
   [key: string]: any;
 }) {
-  if (!line?.cost?.amountPerQuantity || !line?.cost?.totalAmount) return null;
+  if (!line?.cost?.amountPerQuantity || !line?.cost?.totalAmount)
+    return <div style={{visibility: 'hidden'}}>&nbsp;</div>;
 
   const moneyV2 =
     priceType === 'regular'
@@ -224,7 +248,7 @@ function CartLinePrice({
       : line.cost.compareAtAmountPerQuantity;
 
   if (moneyV2 == null) {
-    return null;
+    return <div style={{visibility: 'hidden'}}>&nbsp;</div>;
   }
 
   return (

package/dist/{generator-templates → assets/hydrogen}/starter/app/components/Footer.tsx

@@ -1,29 +1,46 @@
-import {NavLink} from '@remix-run/react';
+import {Suspense} from 'react';
+import {Await, NavLink} from '@remix-run/react';
 import type {FooterQuery, HeaderQuery} from 'storefrontapi.generated';
-import {useRootLoaderData} from '~/lib/root-data';
+
+interface FooterProps {
+  footer: Promise<FooterQuery | null>;
+  header: HeaderQuery;
+  publicStoreDomain: string;
+}
 
 export function Footer({
-  menu,
-  shop,
-}: FooterQuery & {shop: HeaderQuery['shop']}) {
+  footer: footerPromise,
+  header,
+  publicStoreDomain,
+}: FooterProps) {
   return (
-    <footer className="footer">
-      {menu && shop?.primaryDomain?.url && (
-        <FooterMenu menu={menu} primaryDomainUrl={shop.primaryDomain.url} />
-      )}
-    </footer>
+    <Suspense>
+      <Await resolve={footerPromise}>
+        {(footer) => (
+          <footer className="footer">
+            {footer?.menu && header.shop.primaryDomain?.url && (
+              <FooterMenu
+                menu={footer.menu}
+                primaryDomainUrl={header.shop.primaryDomain.url}
+                publicStoreDomain={publicStoreDomain}
+              />
+            )}
+          </footer>
+        )}
+      </Await>
+    </Suspense>
   );
 }
 
 function FooterMenu({
   menu,
   primaryDomainUrl,
+  publicStoreDomain,
 }: {
   menu: FooterQuery['menu'];
-  primaryDomainUrl: HeaderQuery['shop']['primaryDomain']['url'];
+  primaryDomainUrl: FooterProps['header']['shop']['primaryDomain']['url'];
+  publicStoreDomain: string;
 }) {
-  const {publicStoreDomain} = useRootLoaderData();
-
   return (
     <nav className="footer-menu" role="navigation">
       {(menu || FALLBACK_FOOTER_MENU).items.map((item) => {

package/dist/{generator-templates → assets/hydrogen}/starter/app/components/Header.tsx

@@ -1,14 +1,24 @@
-import {Await, NavLink} from '@remix-run/react';
 import {Suspense} from 'react';
-import type {HeaderQuery} from 'storefrontapi.generated';
-import type {LayoutProps} from './Layout';
-import {useRootLoaderData} from '~/lib/root-data';
+import {Await, NavLink} from '@remix-run/react';
+import {type CartViewPayload, useAnalytics} from '@shopify/hydrogen';
+import type {HeaderQuery, CartApiQueryFragment} from 'storefrontapi.generated';
+import {useAside} from '~/components/Aside';
 
-type HeaderProps = Pick<LayoutProps, 'header' | 'cart' | 'isLoggedIn'>;
+interface HeaderProps {
+  header: HeaderQuery;
+  cart: Promise<CartApiQueryFragment | null>;
+  isLoggedIn: Promise<boolean>;
+  publicStoreDomain: string;
+}
 
 type Viewport = 'desktop' | 'mobile';
 
-export function Header({header, isLoggedIn, cart}: HeaderProps) {
+export function Header({
+  header,
+  isLoggedIn,
+  cart,
+  publicStoreDomain,
+}: HeaderProps) {
   const {shop, menu} = header;
   return (
     <header className="header">
@@ -19,6 +29,7 @@ export function Header({header, isLoggedIn, cart}: HeaderProps) {
         menu={menu}
         viewport="desktop"
         primaryDomainUrl={header.shop.primaryDomain.url}
+        publicStoreDomain={publicStoreDomain}
       />
       <HeaderCtas isLoggedIn={isLoggedIn} cart={cart} />
     </header>
@@ -29,12 +40,13 @@ export function HeaderMenu({
   menu,
   primaryDomainUrl,
   viewport,
+  publicStoreDomain,
 }: {
   menu: HeaderProps['header']['menu'];
-  primaryDomainUrl: HeaderQuery['shop']['primaryDomain']['url'];
+  primaryDomainUrl: HeaderProps['header']['shop']['primaryDomain']['url'];
   viewport: Viewport;
+  publicStoreDomain: HeaderProps['publicStoreDomain'];
 }) {
-  const {publicStoreDomain} = useRootLoaderData();
   const className = `header-menu-${viewport}`;
 
   function closeAside(event: React.MouseEvent<HTMLAnchorElement>) {
@@ -106,19 +118,47 @@ function HeaderCtas({
 }
 
 function HeaderMenuMobileToggle() {
+  const {open} = useAside();
   return (
-    <a className="header-menu-mobile-toggle" href="#mobile-menu-aside">
+    <button
+      className="header-menu-mobile-toggle reset"
+      onClick={() => open('mobile')}
+    >
       <h3>☰</h3>
-    </a>
+    </button>
   );
 }
 
 function SearchToggle() {
-  return <a href="#search-aside">Search</a>;
+  const {open} = useAside();
+  return (
+    <button className="reset" onClick={() => open('search')}>
+      Search
+    </button>
+  );
 }
 
 function CartBadge({count}: {count: number}) {
-  return <a href="#cart-aside">Cart {count}</a>;
+  const {open} = useAside();
+  const {publish, shop, cart, prevCart} = useAnalytics();
+
+  return (
+    <a
+      href="/cart"
+      onClick={(e) => {
+        e.preventDefault();
+        open('cart');
+        publish('cart_viewed', {
+          cart,
+          prevCart,
+          shop,
+          url: window.location.href || '',
+        } as CartViewPayload);
+      }}
+    >
+      Cart {count}
+    </a>
+  );
 }
 
 function CartToggle({cart}: Pick<HeaderProps, 'cart'>) {

package/dist/{generator-templates/starter/app/components/Layout.tsx → assets/hydrogen/starter/app/components/PageLayout.tsx}

@@ -14,44 +14,53 @@ import {
   PredictiveSearchResults,
 } from '~/components/Search';
 
-export type LayoutProps = {
+interface PageLayoutProps {
   cart: Promise<CartApiQueryFragment | null>;
-  children?: React.ReactNode;
-  footer: Promise<FooterQuery>;
+  footer: Promise<FooterQuery | null>;
   header: HeaderQuery;
   isLoggedIn: Promise<boolean>;
-};
+  publicStoreDomain: string;
+  children?: React.ReactNode;
+}
 
-export function Layout({
+export function PageLayout({
   cart,
   children = null,
   footer,
   header,
   isLoggedIn,
-}: LayoutProps) {
+  publicStoreDomain,
+}: PageLayoutProps) {
   return (
-    <>
+    <Aside.Provider>
       <CartAside cart={cart} />
       <SearchAside />
-      <MobileMenuAside menu={header?.menu} shop={header?.shop} />
-      {header && <Header header={header} cart={cart} isLoggedIn={isLoggedIn} />}
+      <MobileMenuAside header={header} publicStoreDomain={publicStoreDomain} />
+      {header && (
+        <Header
+          header={header}
+          cart={cart}
+          isLoggedIn={isLoggedIn}
+          publicStoreDomain={publicStoreDomain}
+        />
+      )}
       <main>{children}</main>
-      <Suspense>
-        <Await resolve={footer}>
-          {(footer) => <Footer menu={footer?.menu} shop={header?.shop} />}
-        </Await>
-      </Suspense>
-    </>
+      <Footer
+        footer={footer}
+        header={header}
+        publicStoreDomain={publicStoreDomain}
+      />
+    </Aside.Provider>
   );
 }
 
-function CartAside({cart}: {cart: LayoutProps['cart']}) {
+function CartAside({cart}: {cart: PageLayoutProps['cart']}) {
   return (
-    <Aside id="cart-aside" heading="CART">
+    <Aside type="cart" heading="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>
@@ -61,7 +70,7 @@ function CartAside({cart}: {cart: LayoutProps['cart']}) {
 
 function SearchAside() {
   return (
-    <Aside id="search-aside" heading="SEARCH">
+    <Aside type="search" heading="SEARCH">
       <div className="predictive-search">
         <br />
         <PredictiveSearchForm>
@@ -95,20 +104,21 @@ function SearchAside() {
 }
 
 function MobileMenuAside({
-  menu,
-  shop,
+  header,
+  publicStoreDomain,
 }: {
-  menu: HeaderQuery['menu'];
-  shop: HeaderQuery['shop'];
+  header: PageLayoutProps['header'];
+  publicStoreDomain: PageLayoutProps['publicStoreDomain'];
 }) {
   return (
-    menu &&
-    shop?.primaryDomain?.url && (
-      <Aside id="mobile-menu-aside" heading="MENU">
+    header.menu &&
+    header.shop.primaryDomain?.url && (
+      <Aside type="mobile" heading="MENU">
         <HeaderMenu
-          menu={menu}
+          menu={header.menu}
           viewport="mobile"
-          primaryDomainUrl={shop.primaryDomain.url}
+          primaryDomainUrl={header.shop.primaryDomain.url}
+          publicStoreDomain={publicStoreDomain}
         />
       </Aside>
     )

package/dist/{generator-templates → assets/hydrogen}/starter/app/components/Search.tsx

@@ -16,6 +16,8 @@ import type {
   SearchQuery,
 } from 'storefrontapi.generated';
 
+import type {PredictiveSearchAPILoader} from '../routes/api.predictive-search';
+
 type PredicticeSearchResultItemImage =
   | PredictiveCollectionFragment['image']
   | PredictiveArticleFragment['image']
@@ -257,7 +259,7 @@ export function NoSearchResults() {
 
 type ChildrenRenderProps = {
   fetchResults: (event: React.ChangeEvent<HTMLInputElement>) => void;
-  fetcher: ReturnType<typeof useFetcher<NormalizedPredictiveSearchResults>>;
+  fetcher: ReturnType<typeof useFetcher<PredictiveSearchAPILoader>>;
   inputRef: React.MutableRefObject<HTMLInputElement | null>;
 };
 
@@ -278,7 +280,7 @@ export function PredictiveSearchForm({
   ...props
 }: SearchFromProps) {
   const params = useParams();
-  const fetcher = useFetcher<NormalizedPredictiveSearchResults>({
+  const fetcher = useFetcher<PredictiveSearchAPILoader>({
     key: 'search',
   });
   const inputRef = useRef<HTMLInputElement | null>(null);
@@ -456,7 +458,7 @@ function SearchResultItem({goToSearchResult, item}: SearchResultItemProps) {
 type UseSearchReturn = NormalizedPredictiveSearch & {
   searchInputRef: React.MutableRefObject<HTMLInputElement | null>;
   searchTerm: React.MutableRefObject<string>;
-  state: ReturnType<typeof useFetcher>['state'];
+  state: ReturnType<typeof useFetcher<PredictiveSearchAPILoader>>['state'];
 };
 
 function usePredictiveSearch(): UseSearchReturn {

package/dist/{generator-templates → assets/hydrogen}/starter/app/entry.server.tsx

@@ -1,4 +1,4 @@
-import type {EntryContext} from '@shopify/remix-oxygen';
+import type {EntryContext, AppLoadContext} from '@shopify/remix-oxygen';
 import {RemixServer} from '@remix-run/react';
 import isbot from 'isbot';
 import {renderToReadableStream} from 'react-dom/server';
@@ -9,8 +9,14 @@ export default async function handleRequest(
   responseStatusCode: number,
   responseHeaders: Headers,
   remixContext: EntryContext,
+  context: AppLoadContext,
 ) {
-  const {nonce, header, NonceProvider} = createContentSecurityPolicy();
+  const {nonce, header, NonceProvider} = createContentSecurityPolicy({
+    shop: {
+      checkoutDomain: context.env.PUBLIC_CHECKOUT_DOMAIN,
+      storeDomain: context.env.PUBLIC_STORE_DOMAIN,
+    }
+  });
 
   const body = await renderToReadableStream(
     <NonceProvider>