@shopify/[email protected]

Patch Changes

• • Added <ProductProvider/> (which is equivalent to <ProductOptionsProvider/> in Hydrogen) (#2099) by @frehner

  • Added useProduct() (which is equivalent to useProductOptions() in Hydrogen)

• Added (#2089) by @frehner

  • <Metafields /> component
  • flattenConnection() function
  • parseMetafield() function
  • parseMetafieldValue() function

• Fix package exports and remove the browser field. (#2120) by @frehner

• • Migrated <ModelViewer />, and also improved the types for it as well - the types now come directly from the @google/model-viewer repo. (#2115) by @frehner

  • Migrated <MediaFile /> and implemented the mediaOptions prop for it as outlined in https://github.com/Shopify/hydrogen/issues/686

• Add createStorefrontClient and related documentation, to improve the developer experience when querying the Storefront API. (#2140) by @frehner

• Add TypeScript type helpers for correctly setting the return types from the Storefront API. (#2122) by @frehner

[email protected]

[email protected]

@shopify/[email protected]

Patch Changes

• Whenever using fetchSync, make sure to handle the error state. Though we've made changes to the error thrown by the JSON parser to also tell you that the request was unsuccessful: (#2070) by @blittle

  function MyComponent() {
    const response = fetchSync('/api');
  
    // Make sure the error state is handled!
    if (!response.ok) {
      console.error(
        `Unable to load ${response.url} returned ${response.status}`,
      );
      return <div>Error. Please try again</div>;
    }
  
    // Check `response.ok` before parsing the response
    const json = response.json();
  
    return ...

• Update undici to the latest (#2015) by @dependabot

• Added experimental support for Vite 3. By default, Hydrogen will still use Vite 2. However, it is possible to upgrade apps to Vite 3 by changing devDependencies in the app package.json. Beware that this is experimental and it might break. (#1992) by @frandiox

• Hydrogen responses now contain a Link header to preload stylesheets. (#2075) by @frandiox

• Improvements and fixes to hydrogen logging: (#2084) by @blittle

  1. API Routes are now passed a reference to the logger bound to the current request:

  export async function api(request, {log}) {
    log.warn("Here's a warning!");
    return new Request('Hello World');
  }

  2. If you define a custom logging implementation within your Hydrogen config, we'll now warn you when your logging implementation itself errors.

• When a route is rendering, if Hydrogen has already started streaming, it is invalid to call response.doNotStream(). Disabling streaming should always happen before any async operation in your route server component. This change fixes Hydrogen to warn if you try to disable streaming after the stream has already begun. (#2081) by @frandiox

@shopify/[email protected]

Patch Changes

• Update Image to better handle no data sources in production builds (#2069) by @frehner

[email protected]

[email protected]

@shopify/[email protected]

Patch Changes

• <ExternalVideo/> now has a default prop of loading="lazy" to improve performance of the rendered <iframe>. (#2044) by @frehner

  If you're using <ExternalVideo/> above the fold, then we recommend setting this prop to eager.

• Improve error handling: (#2049) by @blittle

  1. Improve how errors are default presented in the logs.
  2. Make sure that when useShopQuery fails, that an Error object is propagated.

  If you have implemented your own logging handler, it is recommended that you only print strings, as printing objects (including Error objects) will result in unhelpful logs in many runtimes (Oxygen included):

  // Example custom logging for errors
  export default defineConfig({
    logger: {
      error: (context, error) => {
        const url = context ? ` ${context.url}` : '';
  
        if (error instanceof Error) {
          // Do NOT directly just print the error, instead
          // print the error.messag or error.stack
          console.error(`Error:${url}\n${error.stack}`);
        } else {
          console.error(`Error:${url} ${error}`);
        }
      },
    },
  });

@shopify/[email protected]

Patch Changes

• Publish for reals this time. by @frehner

[email protected]

Patch Changes

• Update links to Stackblitz for starter templates (#1966) by @blittle

• Update templates to use the latest CLI and have a minimum node version (#1911) by @blittle

@shopify/[email protected]

Minor Changes

• Add the experimental useFlashSession hook. This hook reads and clears a session value. It is useful for request validation within the experimental <Form> component: (#1878) by @blittle

  import {Form, useFlashSession} from '@shopify/hydrogen/experimental';
  
  export default function Login() {
    const loginError = useFlashSession('loginError');
  
    return (
      <Form action="/login">
        {loginError ? <div>Invalid user!</div> : null}
        <input type="text" name="username" />
        <input type="password" name="password" />
        <button type="submit">Login</button>
      </Form>
    );
  }
  
  export async function api(request, {session}) {
    const data = await request.formData();
    const username = data.get('username');
    const password = data.get('password');
  
    const userId = await getUser(username, password);
  
    if (!userId) {
      await session.set('loginError', 'INVALID_USER');
      return new Request('/login');
    } else {
      await session.set('userId', userId);
      return new Request('/account');
    }
  }

  Note, useFlashSession is experimental, and subject to change at any time.

Patch Changes

• Pass root to all Vite instances to support building projects from different directories. (#1987) by @frandiox

• Added a new option assetHashVersion to the Hydrogen plugin in vite.config.js. This option can be used to manually change the assets file hash. (#2000) by @frandiox

  // vite.config.js
  export default {
    plugins: [hydrogen({assetHashVersion: 'v2'})],
  };

• Fix accessing Oxygen.env in hydrogen.config.js file in production. (#1977) by @frandiox

• Add null check for runtime.waitUntil (#1958) by @ascorbic

• <Image/> now sets the attribute decoding='async' by default, to potentially improve performance. (#1969) by @sanjaiyan-dev

• Fix stale while revalidate when custom cache value is supplied (#1967) by @wizardlyhel

• The Typescript types for the <Image/> component are now available to import directly from Hydrogen. (#1913) by @frehner

  import {
    type ShopifyImageProps,
    type ExternalImageProps,
  } from '@shopify/hydrogen';

• Change how the RSC plugin communicates with other plugins to support vanilla-extract. (#1944) by @frandiox

• Adds merchandise.product.id to cart line items query (#1988) by @juanpprieto

• Fix __rsc requests to have a cache-control header (#2010) by @blittle

• Adds prevCart to cart event payloads (#1982) by @juanpprieto

[email protected]

[email protected]