@shopify/create-hydrogen@5.0.5

Patch Changes

• Update Shopify CLI and cli-kit dependencies to 3.66.1 (#2512) by @frandiox

• createCartHandler supplies updateGiftCardCodes method (#2298) by @wizardlyhel

• Fix menu links in side panel not working on mobile devices (#2450) by @wizardlyhel

  // /app/components/Header.tsx
  
  export function HeaderMenu({
    menu,
    primaryDomainUrl,
    viewport,
    publicStoreDomain,
  }: {
    menu: HeaderProps['header']['menu'];
    primaryDomainUrl: HeaderProps['header']['shop']['primaryDomain']['url'];
    viewport: Viewport;
    publicStoreDomain: HeaderProps['publicStoreDomain'];
  }) {
    const className = `header-menu-${viewport}`;
  +  const {close} = useAside();
  
  -  function closeAside(event: React.MouseEvent<HTMLAnchorElement>) {
  -    if (viewport === 'mobile') {
  -      event.preventDefault();
  -      window.location.href = event.currentTarget.href;
  -    }
  -  }
  
    return (
      <nav className={className} role="navigation">
        {viewport === 'mobile' && (
          <NavLink
            end
  -          onClick={closeAside}
  +          onClick={close}
            prefetch="intent"
            style={activeLinkStyle}
            to="/"
          >
            Home
          </NavLink>
        )}
        {(menu || FALLBACK_HEADER_MENU).items.map((item) => {
          if (!item.url) return null;
  
          // if the url is internal, we strip the domain
          const url =
            item.url.includes('myshopify.com') ||
            item.url.includes(publicStoreDomain) ||
            item.url.includes(primaryDomainUrl)
              ? new URL(item.url).pathname
              : item.url;
          return (
            <NavLink
              className="header-menu-item"
              end
              key={item.id}
  -            onClick={closeAside}
  +            onClick={close}
              prefetch="intent"
              style={activeLinkStyle}
              to={url}
            >
              {item.title}
            </NavLink>
          );
        })}
      </nav>
    );
  }

@shopify/cli-hydrogen@8.4.2

Patch Changes

• Update Shopify CLI and cli-kit dependencies to 3.66.1 (#2512) by @frandiox

• Add --force-client-sourcemap flag. Client sourcemapping is avoided by default because it makes backend code visible in the browser. Use this flag to force enabling it. (#2477) by @frandiox

  It is recommended to delete client sourcemaps before deploying the app to production.

• Updated dependencies [664a09d5, 9dd4c615]:

  • @shopify/mini-oxygen@3.0.5

skeleton@2024.7.5

Patch Changes

• Updated dependencies [b0d3bc06]:
  • @Shopify/hydrogen@2024.7.4

@shopify/hydrogen@2024.7.4

Patch Changes

• Fix the Script component to not throw when using it for inline scripts with dangerouslySetInnerHTML (#2428) by @blittle

@shopify/create-hydrogen@5.0.4

Patch Changes

• Update starter template with latest Hydrogen version. (#2432) by @frandiox

@shopify/cli-hydrogen@8.4.1

Patch Changes

• Update starter template with latest Hydrogen version. (#2432) by @frandiox

• Fix upgrade notification right after scaffolding a new project. (#2432) by @frandiox

skeleton@2024.7.4

Patch Changes

• Search & Predictive Search improvements (#2363) by @juanpprieto

• Simplified creation of app context. #2333 by @michenly

  1. Create a app/lib/context file and use createHydrogenContext in it.

  // in app/lib/context
  
  import {createHydrogenContext} from '@shopify/hydrogen';
  
  export async function createAppLoadContext(
    request: Request,
    env: Env,
    executionContext: ExecutionContext,
  ) {
      const hydrogenContext = createHydrogenContext({
        env,
        request,
        cache,
        waitUntil,
        session,
        i18n: {language: 'EN', country: 'US'},
        cart: {
          queryFragment: CART_QUERY_FRAGMENT,
        },
        // ensure to overwrite any options that is not using the default values from your server.ts
      });
  
    return {
      ...hydrogenContext,
      // declare additional Remix loader context
    };
  }

  2. Use createAppLoadContext method in server.ts Ensure to overwrite any options that is not using the default values in createHydrogenContext.

  // in server.ts
  
  - import {
  -   createCartHandler,
  -   createStorefrontClient,
  -   createCustomerAccountClient,
  - } from '@shopify/hydrogen';
  + import {createAppLoadContext} from '~/lib/context';
  
  export default {
    async fetch(
      request: Request,
      env: Env,
      executionContext: ExecutionContext,
    ): Promise<Response> {
  
  -   const {storefront} = createStorefrontClient(
  -     ...
  -   );
  
  -   const customerAccount = createCustomerAccountClient(
  -     ...
  -   );
  
  -   const cart = createCartHandler(
  -     ...
  -   );
  
  +   const appLoadContext = await createAppLoadContext(
  +      request,
  +      env,
  +      executionContext,
  +   );
  
      /**
        * Create a Remix request handler and pass
        * Hydrogen's Storefront client to the loader context.
        */
      const handleRequest = createRequestHandler({
        build: remixBuild,
        mode: process.env.NODE_ENV,
  -      getLoadContext: (): AppLoadContext => ({
  -        session,
  -        storefront,
  -        customerAccount,
  -        cart,
  -        env,
  -        waitUntil,
  -      }),
  +      getLoadContext: () => appLoadContext,
      });
    }

  3. Use infer type for AppLoadContext in env.d.ts

  // in env.d.ts
  
  + import type {createAppLoadContext} from '~/lib/context';
  
  + interface AppLoadContext extends Awaited<ReturnType<typeof createAppLoadContext>> {
  - interface AppLoadContext {
  -  env: Env;
  -  cart: HydrogenCart;
  -  storefront: Storefront;
  -  customerAccount: CustomerAccount;
  -  session: AppSession;
  -  waitUntil: ExecutionContext['waitUntil'];
  }
  

• Use type HydrogenEnv for all the env.d.ts (#2333) by @michenly

  // in env.d.ts
  
  + import type {HydrogenEnv} from '@shopify/hydrogen';
  
  + interface Env extends HydrogenEnv {}
  - interface Env {
  -   SESSION_SECRET: string;
  -  PUBLIC_STOREFRONT_API_TOKEN: string;
  -  PRIVATE_STOREFRONT_API_TOKEN: string;
  -  PUBLIC_STORE_DOMAIN: string;
  -  PUBLIC_STOREFRONT_ID: string;
  -  PUBLIC_CUSTOMER_ACCOUNT_API_CLIENT_ID: string;
  -  PUBLIC_CUSTOMER_ACCOUNT_API_URL: string;
  -  PUBLIC_CHECKOUT_DOMAIN: string;
  - }
  

• Add a hydration check for google web cache. This prevents an infinite redirect when viewing the cached version of a hydrogen site on Google. (#2334) by @blittle

  Update your entry.client.jsx file to include this check:

  + if (!window.location.origin.includes("webcache.googleusercontent.com")) {
     startTransition(() => {
       hydrateRoot(
         document,
         <StrictMode>
           <RemixBrowser />
         </StrictMode>
       );
     });
  + }

• Updated dependencies [a2d9acf9, c0d7d917, b09e9a4c, c204eacf, bf4e3d3c, 20a8e63b, 6e5d8ea7, 7c4f67a6, dfb9be77, 31ea19e8]:

  • @shopify/cli-hydrogen@8.4.0
  • @Shopify/hydrogen@2024.7.3
  • @shopify/remix-oxygen@2.0.6

@shopify/remix-oxygen@2.0.6

Patch Changes

• Return a 400 BadRequest for HEAD and GET requests that include a body (#2360) by @blittle

@shopify/hydrogen@2024.7.3

Patch Changes

• Prevent sending analytics data to Shopify when Chrome-Lighthouse user agent is detected (#2401) by @wizardlyhel

• Create createHydrogenContext that combined createStorefrontClient, createCustomerAccountClient and createCartHandler. (#2333) by @michenly

• Add a waitForHydration prop to the Script component to delay loading until after hydration. This fixes third-party scripts that modify the DOM and cause hydration errors. (#2389) by @blittle

  Note: For security, nonce is not supported when using waitForHydration. Instead you need to add the domain of the script directly to your Content Securitiy Policy directives.

• Fix the OptimisticCart type to properly retain the generic of line items. The OptimisticCartLine type now takes a cart or cart line item generic. (#2327) by @blittle

• Export ShopAnalytics type (#2384) by @Braedencraig

• Updated dependencies [cfbfc827, b09e9a4c]:

  • @shopify/hydrogen-react@2024.7.2

@shopify/hydrogen-react@2024.7.2

Patch Changes

• Improve performance of currency formatting (#2372) by @blittle

• Prevent sending analytics data to Shopify when Chrome-Lighthouse user agent is detected (#2401) by @wizardlyhel