@shopify/cli-hydrogen 7.1.2 → 8.0.1

package/dist/generator-templates/starter/CHANGELOG.md

@@ -1,5 +1,134 @@
 # skeleton
 
+## 1.0.8
+
+### Patch Changes
+
+- Stop inlining the favicon in base64 to avoid issues with the Content-Security-Policy. In `vite.config.js`: ([#2006](https://github.com/Shopify/hydrogen/pull/2006)) by [@frandiox](https://github.com/frandiox)
+
+  ```diff
+  export default defineConfig({
+    plugins: [
+      ...
+    ],
+  + build: {
+  +   assetsInlineLimit: 0,
+  + },
+  });
+  ```
+
+- To improve HMR in Vite, move the `useRootLoaderData` function from `app/root.tsx` to a separate file like `app/lib/root-data.ts`. This change avoids circular imports: ([#2014](https://github.com/Shopify/hydrogen/pull/2014)) by [@frandiox](https://github.com/frandiox)
+
+  ```tsx
+  // app/lib/root-data.ts
+  import {useMatches} from '@remix-run/react';
+  import type {SerializeFrom} from '@shopify/remix-oxygen';
+  import type {loader} from '~/root';
+
+  /**
+   * Access the result of the root loader from a React component.
+   */
+  export const useRootLoaderData = () => {
+    const [root] = useMatches();
+    return root?.data as SerializeFrom<typeof loader>;
+  };
+  ```
+
+  Import this hook from `~/lib/root-data` instead of `~/root` in your components.
+
+- Updated dependencies [[`b4dfda32`](https://github.com/Shopify/hydrogen/commit/b4dfda320ca52855b2d4493a4306d15a883ca843), [`ffa57bdb`](https://github.com/Shopify/hydrogen/commit/ffa57bdbcdf51e03d565736f9388b5bb4f46292c), [`ac4e1670`](https://github.com/Shopify/hydrogen/commit/ac4e1670f0361a2cd2c6827e4162bbbee0ca37f3), [`0af624d5`](https://github.com/Shopify/hydrogen/commit/0af624d51afc7250db889ba5e736c85a6070c8b2), [`9723eaf3`](https://github.com/Shopify/hydrogen/commit/9723eaf3e5a42c30e657d1cadb123ed775d620e4), [`e842f68c`](https://github.com/Shopify/hydrogen/commit/e842f68c8e879d4c54e0730f3cb55214a760d7f5)]:
+  - @shopify/cli-hydrogen@8.0.1
+  - @shopify/hydrogen@2024.4.1
+
+## 1.0.7
+
+### Patch Changes
+
+- Update internal libraries for parsing `.env` files. ([#1946](https://github.com/Shopify/hydrogen/pull/1946)) by [@aswamy](https://github.com/aswamy)
+
+  Please update the `@shopify/cli` dependency in your app to avoid duplicated subdependencies:
+
+  ```diff
+  "dependencies": {
+  -   "@shopify/cli": "3.56.3",
+  +   "@shopify/cli": "3.58.0",
+  }
+  ```
+
+- Add Adds magic Catalog route ([#1967](https://github.com/Shopify/hydrogen/pull/1967)) by [@juanpprieto](https://github.com/juanpprieto)
+
+- Update Vite plugin imports, and how their options are passed to Remix: ([#1935](https://github.com/Shopify/hydrogen/pull/1935)) by [@frandiox](https://github.com/frandiox)
+
+  ```diff
+  -import {hydrogen, oxygen} from '@shopify/cli-hydrogen/experimental-vite';
+  +import {hydrogen} from '@shopify/hydrogen/vite';
+  +import {oxygen} from '@shopify/mini-oxygen/vite';
+  import {vitePlugin as remix} from '@remix-run/dev';
+
+  export default defineConfig({
+      hydrogen(),
+      oxygen(),
+      remix({
+  -     buildDirectory: 'dist',
+  +     presets: [hydrogen.preset()],
+        future: {
+  ```
+
+- Add `@shopify/mini-oxygen` as a dev dependency for local development: ([#1891](https://github.com/Shopify/hydrogen/pull/1891)) by [@frandiox](https://github.com/frandiox)
+
+  ```diff
+    "devDependencies": {
+      "@remix-run/dev": "^2.8.0",
+      "@remix-run/eslint-config": "^2.8.0",
+  +   "@shopify/mini-oxygen": "^3.0.0",
+      "@shopify/oxygen-workers-types": "^4.0.0",
+      ...
+    },
+  ```
+
+- Add the `customer-account push` command to the Hydrogen CLI. This allows you to push the current `--dev-origin` URL to the Shopify admin to enable secure connection to the Customer Account API for local development. ([#1804](https://github.com/Shopify/hydrogen/pull/1804)) by [@michenly](https://github.com/michenly)
+
+- Fix types returned by the `session` object. ([#1869](https://github.com/Shopify/hydrogen/pull/1869)) by [@frandiox](https://github.com/frandiox)
+
+  In `remix.env.d.ts` or `env.d.ts`, add the following types:
+
+  ```diff
+  import type {
+    // ...
+    HydrogenCart,
+  + HydrogenSessionData,
+  } from '@shopify/hydrogen';
+
+  // ...
+
+  declare module '@shopify/remix-oxygen' {
+    // ...
+
+  + interface SessionData extends HydrogenSessionData {}
+  }
+  ```
+
+- Codegen dependencies must be now listed explicitly in `package.json`: ([#1962](https://github.com/Shopify/hydrogen/pull/1962)) by [@frandiox](https://github.com/frandiox)
+
+  ```diff
+  {
+    "devDependencies": {
+  +   "@graphql-codegen/cli": "5.0.2",
+      "@remix-run/dev": "^2.8.0",
+      "@remix-run/eslint-config": "^2.8.0",
+  +   "@shopify/hydrogen-codegen": "^0.3.0",
+      "@shopify/mini-oxygen": "^2.2.5",
+      "@shopify/oxygen-workers-types": "^4.0.0",
+      ...
+    }
+  }
+  ```
+
+- Updated dependencies [[`4eaec272`](https://github.com/Shopify/hydrogen/commit/4eaec272696f1a718aa7cab1070a54385ebc3686), [`14bb5df1`](https://github.com/Shopify/hydrogen/commit/14bb5df1c1513a7991183d34e72220cb2b139cf5), [`646b78d4`](https://github.com/Shopify/hydrogen/commit/646b78d4bc26310121b16000ed4d1c5d5e63957d), [`87072950`](https://github.com/Shopify/hydrogen/commit/870729505f7eb1f1c709799dd036ad02fd94be95), [`5f1295fe`](https://github.com/Shopify/hydrogen/commit/5f1295fe60b86396f364fefef339248a444c988a), [`3c8a7313`](https://github.com/Shopify/hydrogen/commit/3c8a7313cafb0ca21bbca19ac0b3f8ef4ab12655), [`ca1dcbb7`](https://github.com/Shopify/hydrogen/commit/ca1dcbb7d69c458006e25892c86c4478d394a428), [`11879b17`](https://github.com/Shopify/hydrogen/commit/11879b175d78e3326de090a56a044d1e55d0bae8), [`f4d6e5b0`](https://github.com/Shopify/hydrogen/commit/f4d6e5b0244392a7c13b9fa51c5046fd103c3e4f), [`788d86b3`](https://github.com/Shopify/hydrogen/commit/788d86b3a737bff53b4ec3aa9667458b2d45ade7), [`ebaf5529`](https://github.com/Shopify/hydrogen/commit/ebaf5529287b24a70b3146444b18f95b64f9f336), [`da95bb1c`](https://github.com/Shopify/hydrogen/commit/da95bb1c8c644f450053ce649b40dc380e7375dc), [`5bb43304`](https://github.com/Shopify/hydrogen/commit/5bb43304c08427786cfd4f2529e59bd38f593252), [`140e4768`](https://github.com/Shopify/hydrogen/commit/140e4768c880aaed4ba95b1d4c707df6963e011c), [`062d6be7`](https://github.com/Shopify/hydrogen/commit/062d6be7e031c388498ec3d359de51a4bfdfdfd8), [`b3323e59`](https://github.com/Shopify/hydrogen/commit/b3323e59a4381647f1df797c5dc54793f6e0a29a), [`ab0df5a5`](https://github.com/Shopify/hydrogen/commit/ab0df5a52bc587515880ae26f4edd18ba2be83cd), [`ebaf5529`](https://github.com/Shopify/hydrogen/commit/ebaf5529287b24a70b3146444b18f95b64f9f336), [`ebaf5529`](https://github.com/Shopify/hydrogen/commit/ebaf5529287b24a70b3146444b18f95b64f9f336), [`9e899218`](https://github.com/Shopify/hydrogen/commit/9e8992181ce7d27548d35f98b5a4f78b80795ce8), [`a209019f`](https://github.com/Shopify/hydrogen/commit/a209019f722ece4b65f8d5f37c8018c949956b1e), [`d007b7bc`](https://github.com/Shopify/hydrogen/commit/d007b7bc6f6c36e984d937108230ecc7c202fa42), [`a5511cd7`](https://github.com/Shopify/hydrogen/commit/a5511cd7bf9b0f0c4ef0e52cd72418f78c04785b), [`4afedb4d`](https://github.com/Shopify/hydrogen/commit/4afedb4d7202715df9a153e877e8eb281cc3e928), [`34fbae23`](https://github.com/Shopify/hydrogen/commit/34fbae23999eefbd1af1dff44816a52813d75b44), [`e3baaba5`](https://github.com/Shopify/hydrogen/commit/e3baaba54c701a48923ab3fe8078278f2db2c53f), [`99d72f7a`](https://github.com/Shopify/hydrogen/commit/99d72f7afc354abb66ed0e4ffb020bede2781286), [`9351f9f5`](https://github.com/Shopify/hydrogen/commit/9351f9f564267124bcbf986f5550a542c4bf1e30)]:
+  - @shopify/cli-hydrogen@8.0.0
+  - @shopify/hydrogen@2024.4.0
+  - @shopify/remix-oxygen@2.0.4
+
 ## 1.0.6
 
 ### Patch Changes

package/dist/generator-templates/starter/README.md

@@ -10,6 +10,7 @@ Hydrogen is Shopify’s stack for headless commerce. Hydrogen is designed to dov
 - Remix
 - Hydrogen
 - Oxygen
+- Vite
 - Shopify CLI
 - ESLint
 - Prettier
@@ -21,7 +22,7 @@ Hydrogen is Shopify’s stack for headless commerce. Hydrogen is designed to dov
 
 **Requirements:**
 
-- Node.js version 16.14.0 or higher
+- Node.js version 18.0.0 or higher
 
 ```bash
 npm create @shopify/hydrogen@latest
@@ -41,46 +42,4 @@ npm run dev
 
 ## Setup for using Customer Account API (`/account` section)
 
-### Enabled new Customer Account Experience
-
-1. Go to your Shopify admin => Settings => Customer accounts => New customer account
-
-### Setup public domain using ngrok
-
-1. Setup a [ngrok](https://ngrok.com/) account and add a permanent domain (ie. `https://<your-ngrok-domain>.app`).
-1. Install the [ngrok CLI](https://ngrok.com/download) to use in terminal
-1. Start ngrok using `ngrok http --domain=<your-ngrok-domain>.app 3000`
-
-> [!IMPORTANT]
-> To successfully interact with the Customer Account API routes you will need to use the ngrok domain during development instead of localhost
-### Include public domain in Customer Account API settings
-
-1. Go to your Shopify admin => `Hydrogen` or `Headless` app/channel => Customer Account API => Application setup
-1. Edit `Callback URI(s)` to include `https://<your-ngrok-domain>.app/account/authorize`
-1. Edit `Javascript origin(s)` to include your public domain `https://<your-ngrok-domain>.app` or keep it blank
-1. Edit `Logout URI` to include your public domain `https://<your-ngrok-domain>.app` or keep it blank
-
-### Add the ngrok domain to the CSP policy
-
-Modify your `/app/entry.server.tsx` to allow the ngrok domain as a connect-src
-
-```diff
--  const {nonce, header, NonceProvider} = createContentSecurityPolicy()
-+  const {nonce, header, NonceProvider} = createContentSecurityPolicy({
-+   connectSrc: [
-+     'wss://<your-ngrok-domain>.app:*', // Your ngrok websocket domain
-+   ],
-+ });
-```
-
-### Prepare Environment variables
-
-Run [`npx shopify hydrogen link`](https://shopify.dev/docs/custom-storefronts/hydrogen/cli#link) or [`npx shopify hydrogen env pull`](https://shopify.dev/docs/custom-storefronts/hydrogen/cli#env-pull) to link this app to your own test shop.
-
-Alternately, the values of the required environment variables "PUBLIC_CUSTOMER_ACCOUNT_API_CLIENT_ID" and "PUBLIC_CUSTOMER_ACCOUNT_API_URL" can be found in customer account api settings in the Hydrogen admin channel.
-
-> [!IMPORTANT]
-> Note that `mock.shop` doesn't supply these variables automatically and your own test shop is required for using Customer Account API
-
-> [!NOTE]
-> B2B features such as contextual pricing is not available in SF API with Customer Account API login. If you require this feature, we suggest using the [legacy-customer-account-flow](https://github.com/Shopify/hydrogen/tree/main/examples/legacy-customer-account-flow). This feature should be available in the Customer Account API in the 2024-04 release.
+Follow step 1 and 2 of <https://shopify.dev/docs/custom-storefronts/building-with-the-customer-account-api/hydrogen#step-1-set-up-a-public-domain-for-local-development>

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

@@ -1,6 +1,6 @@
 import {NavLink} from '@remix-run/react';
 import type {FooterQuery, HeaderQuery} from 'storefrontapi.generated';
-import {useRootLoaderData} from '~/root';
+import {useRootLoaderData} from '~/lib/root-data';
 
 export function Footer({
   menu,

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

@@ -2,7 +2,7 @@ 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 '~/root';
+import {useRootLoaderData} from '~/lib/root-data';
 
 type HeaderProps = Pick<LayoutProps, 'header' | 'cart' | 'isLoggedIn'>;
 

package/dist/generator-templates/starter/app/graphql/customer-account/CustomerDetailsQuery.ts

@@ -1,6 +1,7 @@
 // NOTE: https://shopify.dev/docs/api/customer/latest/objects/Customer
 export const CUSTOMER_FRAGMENT = `#graphql
   fragment Customer on Customer {
+    id
     firstName
     lastName
     defaultAddress {

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

@@ -46,6 +46,7 @@ export const CART_QUERY_FRAGMENT = `#graphql
           handle
           title
           id
+          vendor
         }
         selectedOptions {
           name
@@ -55,6 +56,7 @@ export const CART_QUERY_FRAGMENT = `#graphql
     }
   }
   fragment CartApiQuery on Cart {
+    updatedAt
     id
     checkoutUrl
     totalQuantity

package/dist/generator-templates/starter/app/lib/root-data.ts

@@ -0,0 +1,11 @@
+import {useMatches} from '@remix-run/react';
+import type {SerializeFrom} from '@shopify/remix-oxygen';
+import type {loader} from '~/root';
+
+/**
+ * Access the result of the root loader from a React component.
+ */
+export function useRootLoaderData() {
+  const [root] = useMatches();
+  return root?.data as SerializeFrom<typeof loader>;
+}

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

@@ -1,16 +1,10 @@
 import {useNonce} from '@shopify/hydrogen';
-import {
-  defer,
-  type SerializeFrom,
-  type LoaderFunctionArgs,
-} from '@shopify/remix-oxygen';
+import {defer, type LoaderFunctionArgs} from '@shopify/remix-oxygen';
 import {
   Links,
   Meta,
   Outlet,
   Scripts,
-  LiveReload,
-  useMatches,
   useRouteError,
   useLoaderData,
   ScrollRestoration,
@@ -18,8 +12,8 @@ import {
   type ShouldRevalidateFunction,
 } from '@remix-run/react';
 import favicon from './assets/favicon.svg';
-import resetStyles from './styles/reset.css';
-import appStyles from './styles/app.css';
+import resetStyles from './styles/reset.css?url';
+import appStyles from './styles/app.css?url';
 import {Layout} from '~/components/Layout';
 
 /**
@@ -59,14 +53,6 @@ export function links() {
   ];
 }
 
-/**
- * Access the result of the root loader from a React component.
- */
-export const useRootLoaderData = () => {
-  const [root] = useMatches();
-  return root?.data as SerializeFrom<typeof loader>;
-};
-
 export async function loader({context}: LoaderFunctionArgs) {
   const {storefront, customerAccount, cart} = context;
   const publicStoreDomain = context.env.PUBLIC_STORE_DOMAIN;
@@ -124,7 +110,6 @@ export default function App() {
         </Layout>
         <ScrollRestoration nonce={nonce} />
         <Scripts nonce={nonce} />
-        <LiveReload nonce={nonce} />
       </body>
     </html>
   );
@@ -132,7 +117,7 @@ export default function App() {
 
 export function ErrorBoundary() {
   const error = useRouteError();
-  const rootData = useRootLoaderData();
+  const rootData = useLoaderData<typeof loader>();
   const nonce = useNonce();
   let errorMessage = 'Unknown error';
   let errorStatus = 500;
@@ -166,7 +151,6 @@ export function ErrorBoundary() {
         </Layout>
         <ScrollRestoration nonce={nonce} />
         <Scripts nonce={nonce} />
-        <LiveReload nonce={nonce} />
       </body>
     </html>
   );

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

@@ -99,7 +99,7 @@ function OrderItem({order}: {order: OrderItemFragment}) {
   return (
     <>
       <fieldset>
-        <Link to={`/account/orders/${order.id}`}>
+        <Link to={`/account/orders/${btoa(order.id)}`}>
           <strong>#{order.number}</strong>
         </Link>
         <p>{new Date(order.processedAt).toDateString()}</p>

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

@@ -1,4 +1,4 @@
-import {json, redirect, type LoaderFunctionArgs} from '@shopify/remix-oxygen';
+import {json, type LoaderFunctionArgs} from '@shopify/remix-oxygen';
 import {Form, NavLink, Outlet, useLoaderData} from '@remix-run/react';
 import {CUSTOMER_DETAILS_QUERY} from '~/graphql/customer-account/CustomerDetailsQuery';
 

package/dist/generator-templates/starter/app/routes/blogs.$blogHandle._index.tsx

@@ -7,11 +7,11 @@ export const meta: MetaFunction<typeof loader> = ({data}) => {
   return [{title: `Hydrogen | ${data?.blog.title ?? ''} blog`}];
 };
 
-export const loader = async ({
+export async function loader({
   request,
   params,
   context: {storefront},
-}: LoaderFunctionArgs) => {
+}: LoaderFunctionArgs) {
   const paginationVariables = getPaginationVariables(request, {
     pageBy: 4,
   });
@@ -32,7 +32,7 @@ export const loader = async ({
   }
 
   return json({blog});
-};
+}
 
 export default function Blog() {
   const {blog} = useLoaderData<typeof loader>();

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

@@ -4,7 +4,7 @@ import type {CartQueryDataReturn} from '@shopify/hydrogen';
 import {CartForm} from '@shopify/hydrogen';
 import {json, type ActionFunctionArgs} from '@shopify/remix-oxygen';
 import {CartMain} from '~/components/Cart';
-import {useRootLoaderData} from '~/root';
+import {useRootLoaderData} from '~/lib/root-data';
 
 export const meta: MetaFunction = () => {
   return [{title: `Hydrogen | Cart`}];

package/dist/generator-templates/starter/app/routes/collections.all.tsx

@@ -0,0 +1,160 @@
+import {json, type LoaderFunctionArgs} from '@shopify/remix-oxygen';
+import {useLoaderData, Link, type MetaFunction} from '@remix-run/react';
+import {
+  Pagination,
+  getPaginationVariables,
+  Image,
+  Money,
+} from '@shopify/hydrogen';
+import type {ProductItemFragment} from 'storefrontapi.generated';
+import {useVariantUrl} from '~/lib/variants';
+
+export const meta: MetaFunction<typeof loader> = () => {
+  return [{title: `Hydrogen | Products`}];
+};
+
+export async function loader({request, context}: LoaderFunctionArgs) {
+  const {storefront} = context;
+  const paginationVariables = getPaginationVariables(request, {
+    pageBy: 8,
+  });
+
+  const {products} = await storefront.query(CATALOG_QUERY, {
+    variables: {...paginationVariables},
+  });
+
+  return json({products});
+}
+
+export default function Collection() {
+  const {products} = useLoaderData<typeof loader>();
+
+  return (
+    <div className="collection">
+      <h1>Products</h1>
+      <Pagination connection={products}>
+        {({nodes, isLoading, PreviousLink, NextLink}) => (
+          <>
+            <PreviousLink>
+              {isLoading ? 'Loading...' : <span>↑ Load previous</span>}
+            </PreviousLink>
+            <ProductsGrid products={nodes} />
+            <br />
+            <NextLink>
+              {isLoading ? 'Loading...' : <span>Load more ↓</span>}
+            </NextLink>
+          </>
+        )}
+      </Pagination>
+    </div>
+  );
+}
+
+function ProductsGrid({products}: {products: ProductItemFragment[]}) {
+  return (
+    <div className="products-grid">
+      {products.map((product, index) => {
+        return (
+          <ProductItem
+            key={product.id}
+            product={product}
+            loading={index < 8 ? 'eager' : undefined}
+          />
+        );
+      })}
+    </div>
+  );
+}
+
+function ProductItem({
+  product,
+  loading,
+}: {
+  product: ProductItemFragment;
+  loading?: 'eager' | 'lazy';
+}) {
+  const variant = product.variants.nodes[0];
+  const variantUrl = useVariantUrl(product.handle, variant.selectedOptions);
+  return (
+    <Link
+      className="product-item"
+      key={product.id}
+      prefetch="intent"
+      to={variantUrl}
+    >
+      {product.featuredImage && (
+        <Image
+          alt={product.featuredImage.altText || product.title}
+          aspectRatio="1/1"
+          data={product.featuredImage}
+          loading={loading}
+          sizes="(min-width: 45em) 400px, 100vw"
+        />
+      )}
+      <h4>{product.title}</h4>
+      <small>
+        <Money data={product.priceRange.minVariantPrice} />
+      </small>
+    </Link>
+  );
+}
+
+const PRODUCT_ITEM_FRAGMENT = `#graphql
+  fragment MoneyProductItem on MoneyV2 {
+    amount
+    currencyCode
+  }
+  fragment ProductItem on Product {
+    id
+    handle
+    title
+    featuredImage {
+      id
+      altText
+      url
+      width
+      height
+    }
+    priceRange {
+      minVariantPrice {
+        ...MoneyProductItem
+      }
+      maxVariantPrice {
+        ...MoneyProductItem
+      }
+    }
+    variants(first: 1) {
+      nodes {
+        selectedOptions {
+          name
+          value
+        }
+      }
+    }
+  }
+` as const;
+
+// NOTE: https://shopify.dev/docs/api/storefront/2024-01/objects/product
+const CATALOG_QUERY = `#graphql
+  query Catalog(
+    $country: CountryCode
+    $language: LanguageCode
+    $first: Int
+    $last: Int
+    $startCursor: String
+    $endCursor: String
+  ) @inContext(country: $country, language: $language) {
+    products(first: $first, last: $last, before: $startCursor, after: $endCursor) {
+      nodes {
+        ...ProductItem
+      }
+      pageInfo {
+        hasPreviousPage
+        hasNextPage
+        startCursor
+        endCursor
+      }
+    }
+  }
+  ${PRODUCT_ITEM_FRAGMENT}
+` as const;

package/dist/generator-templates/starter/app/routes/products.$handle.tsx

@@ -12,7 +12,6 @@ import type {
   ProductVariantsQuery,
   ProductVariantFragment,
 } from 'storefrontapi.generated';
-
 import {
   Image,
   Money,
@@ -27,7 +26,7 @@ import type {
 } from '@shopify/hydrogen/storefront-api-types';
 import {getVariantUrl} from '~/lib/variants';
 
-export const meta: MetaFunction<typeof loader> = ({data}) => {
+export const meta: MetaFunction<typeof loader> = ({data, location}) => {
   return [{title: `Hydrogen | ${data?.product.title ?? ''}`}];
 };
 

package/dist/generator-templates/starter/customer-accountapi.generated.d.ts

@@ -68,7 +68,7 @@ export type CustomerAddressCreateMutation = {
 
 export type CustomerFragment = Pick<
   CustomerAccountAPI.Customer,
-  'firstName' | 'lastName'
+  'id' | 'firstName' | 'lastName'
 > & {
   defaultAddress?: CustomerAccountAPI.Maybe<
     Pick<
@@ -129,7 +129,10 @@ export type CustomerDetailsQueryVariables = CustomerAccountAPI.Exact<{
 }>;
 
 export type CustomerDetailsQuery = {
-  customer: Pick<CustomerAccountAPI.Customer, 'firstName' | 'lastName'> & {
+  customer: Pick<
+    CustomerAccountAPI.Customer,
+    'id' | 'firstName' | 'lastName'
+  > & {
     defaultAddress?: CustomerAccountAPI.Maybe<
       Pick<
         CustomerAccountAPI.CustomerAddress,
@@ -467,7 +470,7 @@ export type CustomerUpdateMutation = {
 };
 
 interface GeneratedQueryTypes {
-  '#graphql\n  query CustomerDetails {\n    customer {\n      ...Customer\n    }\n  }\n  #graphql\n  fragment Customer on Customer {\n    firstName\n    lastName\n    defaultAddress {\n      ...Address\n    }\n    addresses(first: 6) {\n      nodes {\n        ...Address\n      }\n    }\n  }\n  fragment Address on CustomerAddress {\n    id\n    formatted\n    firstName\n    lastName\n    company\n    address1\n    address2\n    territoryCode\n    zoneCode\n    city\n    zip\n    phoneNumber\n  }\n\n': {
+  '#graphql\n  query CustomerDetails {\n    customer {\n      ...Customer\n    }\n  }\n  #graphql\n  fragment Customer on Customer {\n    id\n    firstName\n    lastName\n    defaultAddress {\n      ...Address\n    }\n    addresses(first: 6) {\n      nodes {\n        ...Address\n      }\n    }\n  }\n  fragment Address on CustomerAddress {\n    id\n    formatted\n    firstName\n    lastName\n    company\n    address1\n    address2\n    territoryCode\n    zoneCode\n    city\n    zip\n    phoneNumber\n  }\n\n': {
     return: CustomerDetailsQuery;
     variables: CustomerDetailsQueryVariables;
   };

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

@@ -1,4 +1,4 @@
-/// <reference types="@remix-run/dev" />
+/// <reference types="vite/client" />
 /// <reference types="@shopify/remix-oxygen" />
 /// <reference types="@shopify/oxygen-workers-types" />
 
@@ -9,6 +9,7 @@ import type {
   Storefront,
   CustomerAccount,
   HydrogenCart,
+  HydrogenSessionData,
 } from '@shopify/hydrogen';
 import type {AppSession} from '~/lib/session';
 
@@ -36,7 +37,7 @@ declare module '@shopify/remix-oxygen' {
   /**
    * Declare local additions to the Remix loader context.
    */
-  export interface AppLoadContext {
+  interface AppLoadContext {
     env: Env;
     cart: HydrogenCart;
     storefront: Storefront;
@@ -44,4 +45,9 @@ declare module '@shopify/remix-oxygen' {
     session: AppSession;
     waitUntil: ExecutionContext['waitUntil'];
   }
+
+  /**
+   * Declare local additions to the Remix session data.
+   */
+  interface SessionData extends HydrogenSessionData {}
 }

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

@@ -2,10 +2,10 @@
   "name": "skeleton",
   "private": true,
   "sideEffects": false,
-  "version": "1.0.6",
-  "type": "commonjs",
+  "version": "1.0.8",
+  "type": "module",
   "scripts": {
-    "build": "shopify hydrogen build",
+    "build": "shopify hydrogen build --codegen",
     "dev": "shopify hydrogen dev --codegen",
     "preview": "npm run build && shopify hydrogen preview",
     "lint": "eslint --no-error-on-unmatched-pattern --ext .js,.ts,.jsx,.tsx .",
@@ -16,19 +16,22 @@
   "dependencies": {
     "@remix-run/react": "^2.8.0",
     "@remix-run/server-runtime": "^2.8.0",
-    "@shopify/cli": "3.56.3",
-    "@shopify/cli-hydrogen": "^7.1.2",
-    "@shopify/hydrogen": "~2024.1.4",
-    "@shopify/remix-oxygen": "^2.0.3",
+    "@shopify/cli": "3.58.0",
+    "@shopify/cli-hydrogen": "^8.0.1",
+    "@shopify/hydrogen": "2024.4.1",
+    "@shopify/remix-oxygen": "^2.0.4",
     "graphql": "^16.6.0",
     "graphql-tag": "^2.12.6",
-    "isbot": "^3.6.6",
+    "isbot": "^3.8.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
   "devDependencies": {
+    "@graphql-codegen/cli": "5.0.2",
     "@remix-run/dev": "^2.8.0",
     "@remix-run/eslint-config": "^2.8.0",
+    "@shopify/hydrogen-codegen": "^0.3.0",
+    "@shopify/mini-oxygen": "^3.0.1",
     "@shopify/oxygen-workers-types": "^4.0.0",
     "@shopify/prettier-config": "^1.1.2",
     "@total-typescript/ts-reset": "^0.4.2",
@@ -38,7 +41,9 @@
     "eslint": "^8.20.0",
     "eslint-plugin-hydrogen": "0.12.2",
     "prettier": "^2.8.4",
-    "typescript": "^5.2.2"
+    "typescript": "^5.2.2",
+    "vite": "^5.1.0",
+    "vite-tsconfig-paths": "^4.3.1"
   },
   "engines": {
     "node": ">=18.0.0"