npm - @shopify/cli - Versions diffs - 3.61.0 → 3.61.2 - Mend

@shopify/cli 3.61.0 → 3.61.2

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

package/dist/assets/hydrogen/starter/.eslintrc.cjs CHANGED Viewed

@@ -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/assets/hydrogen/starter/CHANGELOG.md CHANGED Viewed

@@ -1,91 +1,91 @@
 # skeleton
-## 0.0.0-next-ca7f288-20240530103543
+## 0.0.0-next-9eb60d7-20240607102913
 ### Patch Changes
-- Update remix to v2.9.2 ([#2135](https://github.com/Shopify/hydrogen/pull/2135)) by [@michenly](https://github.com/michenly)
+- 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
-- Refactor root to use [Remix's Layout Export pattern](https://remix.run/docs/en/main/file-conventions/root#layout-export). ([#2152](https://github.com/Shopify/hydrogen/pull/2152)) by [@michenly](https://github.com/michenly)
+  ```diff
+  // in app/lib/session.ts
+  export class AppSession implements HydrogenSession {
+  +  public isPending = false;
-  This will also fix below error ahead of Single Fetch future flag.
+    get unset() {
+  +    this.isPending = true;
+      return this.#session.unset;
+    }
-  > You cannot `useLoaderData` in an errorElement
+    get set() {
+  +    this.isPending = true;
+      return this.#session.set;
+    }
+    commit() {
+  +    this.isPending = false;
+      return this.#sessionStorage.commitSession(this.#session);
+    }
+  }
+  ```
-  The diff below showcase how you can make this refactor in your existing application.
+  Step 2: update response header if `session.isPending` is true
   ```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');
+  // 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) {
+        ...
+      }
+    },
+  };
+  ```
-    return (
-      <html>
-      ...
-        <body>
-  -        <Layout {...data}>
-  -          <Outlet />
-  -        </Layout>
-  +        {data? (
-  +          <PageLayout {...data}>
-  +            {children}
-  +          </PageLayout>
-  +         ) : (
-  +          children
-  +        )}
-        </body>
-      </html>
+  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(),
+  -      },
+      },
     );
   }
+  ```
-  +export default function App() {
-  +  return <Outlet />;
-  +}
+- Trigger changeset for all packages for next release
-  export function ErrorBoundary() {
-    const rootData = useLoaderData<typeof loader>();
+- 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
-    return (
-  -    <html>
-  -    ...
-  -      <body>
-  -        <Layout {...rootData}>
-  -          <div className="route-error">
-  -            <h1>Error</h1>
-  -            ...
-  -          </div>
-  -        </Layout>
-  -      </body>
-  -    </html>
-  +    <div className="route-error">
-  +      <h1>Error</h1>
-  +      ...
-  +    </div>
-    );
-  }
+## 2024.4.5
-  ```
+### Patch Changes
-- `<Analytics>` and `useAnalytics` are now stable. ([#2141](https://github.com/Shopify/hydrogen/pull/2141)) by [@wizardlyhel](https://github.com/wizardlyhel)
+- Update remix to v2.9.2 ([#2135](https://github.com/Shopify/hydrogen/pull/2135)) by [@michenly](https://github.com/michenly)
-- Trigger changeset for all packages for next release
+- `<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), [`ca4cf045`](https://github.com/Shopify/hydrogen/commit/ca4cf045f7fb72ad98b62af7bd172ff8cf553de2), [`5a554b2e`](https://github.com/Shopify/hydrogen/commit/5a554b2e9d91894c2db8032f0c29666dce1ea3f2), [`27e51abf`](https://github.com/Shopify/hydrogen/commit/27e51abfc1f5444afa952c503886bfa12fc55c7e), [`e29ecf03`](https://github.com/Shopify/hydrogen/commit/e29ecf03e158242d09045917dbef556bd456889a), [`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@0.0.0-next-ca7f288-20240530103543
-  - @shopify/cli-hydrogen@0.0.0-next-ca7f288-20240530103543
-  - @shopify/remix-oxygen@0.0.0-next-ca7f288-20240530103543
+- 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

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

@@ -3,7 +3,7 @@ import {Await, NavLink} from '@remix-run/react';
 import type {FooterQuery, HeaderQuery} from 'storefrontapi.generated';
 interface FooterProps {
-  footer: Promise<FooterQuery>;
+  footer: Promise<FooterQuery | null>;
   header: HeaderQuery;
   publicStoreDomain: string;
 }
@@ -18,7 +18,7 @@ export function Footer({
       <Await resolve={footerPromise}>
         {(footer) => (
           <footer className="footer">
-            {footer.menu && header.shop.primaryDomain?.url && (
+            {footer?.menu && header.shop.primaryDomain?.url && (
               <FooterMenu
                 menu={footer.menu}
                 primaryDomainUrl={header.shop.primaryDomain.url}
@@ -37,7 +37,7 @@ function FooterMenu({
   primaryDomainUrl,
   publicStoreDomain,
 }: {
-  menu: Awaited<FooterProps['footer']>['menu'];
+  menu: FooterQuery['menu'];
   primaryDomainUrl: FooterProps['header']['shop']['primaryDomain']['url'];
   publicStoreDomain: string;
 }) {

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

@@ -16,7 +16,7 @@ import {
 interface PageLayoutProps {
   cart: Promise<CartApiQueryFragment | null>;
-  footer: Promise<FooterQuery>;
+  footer: Promise<FooterQuery | null>;
   header: HeaderQuery;
   isLoggedIn: Promise<boolean>;
   publicStoreDomain: string;

package/dist/assets/hydrogen/starter/app/lib/session.ts CHANGED Viewed

@@ -11,6 +11,8 @@ import {
  * swap out the cookie-based implementation with something else!
  */
 export class AppSession implements HydrogenSession {
+  public isPending = false;
   #sessionStorage;
   #session;
@@ -50,10 +52,12 @@ export class AppSession implements HydrogenSession {
   }
   get unset() {
+    this.isPending = true;
     return this.#session.unset;
   }
   get set() {
+    this.isPending = true;
     return this.#session.set;
   }
@@ -62,6 +66,7 @@ export class AppSession implements HydrogenSession {
   }
   commit() {
+    this.isPending = false;
     return this.#sessionStorage.commitSession(this.#session);
   }
 }

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

@@ -56,54 +56,81 @@ export function links() {
   ];
 }
-export async function loader({context}: LoaderFunctionArgs) {
-  const {storefront, customerAccount, cart, env} = context;
-  const publicStoreDomain = env.PUBLIC_STORE_DOMAIN;
-  const isLoggedInPromise = customerAccount.isLoggedIn();
-  const cartPromise = cart.get();
-  // defer the footer query (below the fold)
-  const footerPromise = storefront.query(FOOTER_QUERY, {
-    cache: storefront.CacheLong(),
-    variables: {
-      footerMenuHandle: 'footer', // Adjust to your footer menu handle
-    },
-  });
-  // await the header query (above the fold)
-  const headerPromise = storefront.query(HEADER_QUERY, {
-    cache: storefront.CacheLong(),
-    variables: {
-      headerMenuHandle: 'main-menu', // Adjust to your header menu handle
+export async function loader(args: LoaderFunctionArgs) {
+  // Start fetching non-critical data without blocking time to first byte
+  const deferredData = loadDeferredData(args);
+  // Await the critical data required to render initial state of the page
+  const criticalData = await loadCriticalData(args);
+  const {storefront, env} = args.context;
+  return defer({
+    ...deferredData,
+    ...criticalData,
+    publicStoreDomain: env.PUBLIC_STORE_DOMAIN,
+    shop: getShopAnalytics({
+      storefront,
+      publicStorefrontId: env.PUBLIC_STOREFRONT_ID,
+    }),
+    consent: {
+      checkoutDomain: env.PUBLIC_CHECKOUT_DOMAIN,
+      storefrontAccessToken: env.PUBLIC_STOREFRONT_API_TOKEN,
     },
   });
+}
-  return defer(
-    {
-      cart: cartPromise,
-      footer: footerPromise,
-      header: await headerPromise,
-      isLoggedIn: isLoggedInPromise,
-      publicStoreDomain,
-      shop: getShopAnalytics({
-        storefront,
-        publicStorefrontId: env.PUBLIC_STOREFRONT_ID,
-      }),
-      consent: {
-        checkoutDomain: env.PUBLIC_CHECKOUT_DOMAIN,
-        storefrontAccessToken: env.PUBLIC_STOREFRONT_API_TOKEN,
+/**
+ * Load data necessary for rendering content above the fold. This is the critical data
+ * needed to render the page. If it's unavailable, the whole page should 400 or 500 error.
+ */
+async function loadCriticalData({context}: LoaderFunctionArgs) {
+  const {storefront} = context;
+  const [header] = await Promise.all([
+    storefront.query(HEADER_QUERY, {
+      cache: storefront.CacheLong(),
+      variables: {
+        headerMenuHandle: 'main-menu', // Adjust to your header menu handle
       },
-    },
-    {
-      headers: {
-        'Set-Cookie': await context.session.commit(),
+    }),
+    // Add other queries here, so that they are loaded in parallel
+  ]);
+  return {
+    header,
+  };
+}
+/**
+ * Load data for rendering content below the fold. This data is deferred and will be
+ * fetched after the initial page load. If it's unavailable, the page should still 200.
+ * Make sure to not throw any errors here, as it will cause the page to 500.
+ */
+function loadDeferredData({context}: LoaderFunctionArgs) {
+  const {storefront, customerAccount, cart} = context;
+  // defer the footer query (below the fold)
+  const footer = storefront
+    .query(FOOTER_QUERY, {
+      cache: storefront.CacheLong(),
+      variables: {
+        footerMenuHandle: 'footer', // Adjust to your footer menu handle
       },
-    },
-  );
+    })
+    .catch((error) => {
+      // Log query errors, but don't throw them so the page can still render
+      console.error(error);
+      return null;
+    });
+  return {
+    cart: cart.get(),
+    isLoggedIn: customerAccount.isLoggedIn(),
+    footer,
+  };
 }
-export function Layout({children}: {children?: React.ReactNode}) {
+function Layout({children}: {children?: React.ReactNode}) {
   const nonce = useNonce();
   const data = useRouteLoaderData<RootLoader>('root');
@@ -135,7 +162,11 @@ export function Layout({children}: {children?: React.ReactNode}) {
 }
 export default function App() {
-  return <Outlet />;
+  return (
+    <Layout>
+      <Outlet />
+    </Layout>
+  );
 }
 export function ErrorBoundary() {
@@ -151,14 +182,16 @@ export function ErrorBoundary() {
   }
   return (
-    <div className="route-error">
-      <h1>Oops</h1>
-      <h2>{errorStatus}</h2>
-      {errorMessage && (
-        <fieldset>
-          <pre>{errorMessage}</pre>
-        </fieldset>
-      )}
-    </div>
+    <Layout>
+      <div className="route-error">
+        <h1>Oops</h1>
+        <h2>{errorStatus}</h2>
+        {errorMessage && (
+          <fieldset>
+            <pre>{errorMessage}</pre>
+          </fieldset>
+        )}
+      </div>
+    </Layout>
   );
 }

package/dist/assets/hydrogen/starter/app/routes/_index.tsx CHANGED Viewed

@@ -11,13 +11,48 @@ export const meta: MetaFunction = () => {
   return [{title: 'Hydrogen | Home'}];
 };
-export async function loader({context}: LoaderFunctionArgs) {
-  const {storefront} = context;
-  const {collections} = await storefront.query(FEATURED_COLLECTION_QUERY);
-  const featuredCollection = collections.nodes[0];
-  const recommendedProducts = storefront.query(RECOMMENDED_PRODUCTS_QUERY);
+export async function loader(args: LoaderFunctionArgs) {
+  // Start fetching non-critical data without blocking time to first byte
+  const deferredData = loadDeferredData(args);
-  return defer({featuredCollection, recommendedProducts});
+  // Await the critical data required to render initial state of the page
+  const criticalData = await loadCriticalData(args);
+  return defer({...deferredData, ...criticalData});
+}
+/**
+ * Load data necessary for rendering content above the fold. This is the critical data
+ * needed to render the page. If it's unavailable, the whole page should 400 or 500 error.
+ */
+async function loadCriticalData({context}: LoaderFunctionArgs) {
+  const [{collections}] = await Promise.all([
+    context.storefront.query(FEATURED_COLLECTION_QUERY),
+    // Add other queries here, so that they are loaded in parallel
+  ]);
+  return {
+    featuredCollection: collections.nodes[0],
+  };
+}
+/**
+ * Load data for rendering content below the fold. This data is deferred and will be
+ * fetched after the initial page load. If it's unavailable, the page should still 200.
+ * Make sure to not throw any errors here, as it will cause the page to 500.
+ */
+function loadDeferredData({context}: LoaderFunctionArgs) {
+  const recommendedProducts = context.storefront
+    .query(RECOMMENDED_PRODUCTS_QUERY)
+    .catch((error) => {
+      // Log query errors, but don't throw them so the page can still render
+      console.error(error);
+      return null;
+    });
+  return {
+    recommendedProducts,
+  };
 }
 export default function Homepage() {
@@ -55,32 +90,34 @@ function FeaturedCollection({
 function RecommendedProducts({
   products,
 }: {
-  products: Promise<RecommendedProductsQuery>;
+  products: Promise<RecommendedProductsQuery | null>;
 }) {
   return (
     <div className="recommended-products">
       <h2>Recommended Products</h2>
       <Suspense fallback={<div>Loading...</div>}>
         <Await resolve={products}>
-          {({products}) => (
+          {(response) => (
             <div className="recommended-products-grid">
-              {products.nodes.map((product) => (
-                <Link
-                  key={product.id}
-                  className="recommended-product"
-                  to={`/products/${product.handle}`}
-                >
-                  <Image
-                    data={product.images.nodes[0]}
-                    aspectRatio="1/1"
-                    sizes="(min-width: 45em) 20vw, 50vw"
-                  />
-                  <h4>{product.title}</h4>
-                  <small>
-                    <Money data={product.priceRange.minVariantPrice} />
-                  </small>
-                </Link>
-              ))}
+              {response
+                ? response.products.nodes.map((product) => (
+                    <Link
+                      key={product.id}
+                      className="recommended-product"
+                      to={`/products/${product.handle}`}
+                    >
+                      <Image
+                        data={product.images.nodes[0]}
+                        aspectRatio="1/1"
+                        sizes="(min-width: 45em) 20vw, 50vw"
+                      />
+                      <h4>{product.title}</h4>
+                      <small>
+                        <Money data={product.priceRange.minVariantPrice} />
+                      </small>
+                    </Link>
+                  ))
+                : null}
             </div>
           )}
         </Await>

package/dist/assets/hydrogen/starter/app/routes/account.$.tsx CHANGED Viewed

@@ -4,9 +4,5 @@ import {redirect, type LoaderFunctionArgs} from '@shopify/remix-oxygen';
 export async function loader({context}: LoaderFunctionArgs) {
   await context.customerAccount.handleAuthStatus();
-  return redirect('/account', {
-    headers: {
-      'Set-Cookie': await context.session.commit(),
-    },
-  });
+  return redirect('/account');
 }