[email protected]

Patch Changes

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

@shopify/[email protected]

Patch Changes

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

@shopify/[email protected]

Patch Changes

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

@shopify/[email protected]

Patch Changes

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

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

[email protected]

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/[email protected]
  • @Shopify/hydrogen@2024.7.3
  • @shopify/[email protected]

@shopify/[email protected]

Patch Changes

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

@shopify/[email protected]

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/[email protected]

@shopify/[email protected]

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

@shopify/[email protected]

Patch Changes

• starter template updated (#2333) by @michenly

• 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.server.jsx file to include this check:

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

@shopify/[email protected]

Minor Changes

• Support --env-file in env:pull, dev, and preview commands to specify custom .env files. (#2392) by @frandiox

Patch Changes

• Allow passing customLogger in vite.config.js. (#2341) by @frandiox

• Ignore remix.config.js file when vite.config.js is present, and warn about it. (#2379) by @frandiox

• Support special versions like next or experimental in CLI. (#2417) by @frandiox