[email protected]

[email protected]

@shopify/[email protected]

Patch Changes

• #1096 0a15376e Thanks @wizardlyhel! - Make performance data available with ClientAnalytics and optional for developers to include

• #1209 d0dada0a Thanks @blittle! - Make metafields optional within the ProductProvider. Fixes #1127

[email protected]

[email protected]

@shopify/[email protected]

Patch Changes

• #1161 6b963fb1 Thanks @merwan7! - Adds ability to add multiple cookies in one response

• #1162 5446d544 Thanks @arlyxiao! - Upgrade body-parser

• #1200 7fb7ee49 Thanks @blittle! - Add bot user agents for Seoradar and Adresults, resolves #1199

• #1167 0a5ac1cb Thanks @benjaminsehl! - Only warn in console on missing Model3D alt tag, do not throw error

• #1152 d3e3e695 Thanks @jplhomer! - Fix scroll restoration when server props are changed

[email protected]

[email protected]

@shopify/[email protected]

Patch Changes

• #1145 865b66e9 Thanks @jplhomer! - Fix search params on navigation

• #1139 93525637 Thanks @blittle! - Fix the scroll restoration on page transitions

• #1144 dec5eb8e Thanks @wizardlyhel! - fix 0.17 build

[email protected]

Minor Changes

• #1044 c8f5934d Thanks @blittle! - Hydrogen now has a built in session and cookie implementation. Read more about how sessions work in Hydrogen. The starter template also includes a cookie session storage implementation. To use the new session implementation within an existing Hydrogen app:

  import renderHydrogen from '@shopify/hydrogen/entry-server';
  import {
    Router,
    Route,
    FileRoutes,
    ShopifyProvider,
  +  CookieSessionStorage,
  } from '@shopify/hydrogen';
  import {Suspense} from 'react';
  import shopifyConfig from '../shopify.config';
  import DefaultSeo from './components/DefaultSeo.server';
  import NotFound from './components/NotFound.server';
  import LoadingFallback from './components/LoadingFallback';
  import CartProvider from './components/CartProvider.client';
  
  function App({routes}) {
    return (
      <Suspense fallback={<LoadingFallback />}>
        <ShopifyProvider shopifyConfig={shopifyConfig}>
          <CartProvider>
            <DefaultSeo />
            <Router>
              <FileRoutes routes={routes} />
              <Route path="*" page={<NotFound />} />
            </Router>
          </CartProvider>
        </ShopifyProvider>
      </Suspense>
    );
  }
  
  const routes = import.meta.globEager('./routes/**/*.server.[jt](s|sx)');
  
  export default renderHydrogen(App, {
    routes,
    shopifyConfig,
  +  session: CookieSessionStorage('__session', {
  +    path: '/',
  +    httpOnly: true,
  +    secure: process.env.NODE_ENV === 'production',
  +    sameSite: 'strict',
  +    maxAge: 60 * 60 * 24 * 30,
  +  }),
  });
  

• #1134 7138bb1d Thanks @michenly! - Upgrade @shopify/cli-hydrogen to v2.0.0

• #881 a31babfb Thanks @jplhomer! - ## Change from serverState to serverProps

  Breaking changes:

  1. useServerState() is gone. Use useServerProps() instead
  2. useServerProps() is reset on each page navigation. Previously useServerState() was not.
  3. useServerProps() does not contain pathname and search. Use the useNavigate hook to programmatically navigate instead.

  Explanation:

  The current behavior of server state is to persist indefinitely (until a hard page reload). This works great for things like the CountrySelector, where the updated state is meant to persist across navigations. This breaks down for many other use cases. Consider a collection paginator: if you paginate through to the second page of a collection using server state, visit a product page, and then go to a different collection page, the new collection page will use that same pagination variable in server state. This will result in a wonky or errored experience.

  Additionally, we have found that the term for serverState is confusing. The hook is used within client components, yet the state is passed as a prop to server components.

  As a result, serverState is now gone. Instead communicating between client and server components is through serverProps. If a client component wants to re-render server content, it just calls setServerProps('some', 'data'). Those props will be serialized to the server, and the server component will re-render. Additionally, the server props are reset on page navigation. So that they will not bleed between pages (fixes #331).

  If you previously relied on serverState for global state in your app, you shouldn't use serverProps anymore. Instead we'll introduce a new session based mechanism for global state (in the meantime you could manually manage a cookie).

  Lastly, serverProps no longer include the pathname and search parameters. Programmatically navigate in hydrogen instead with the useNavigate hook.

Patch Changes

• #1124 737237d2 Thanks @cartogram! - Changing the casing on the fetchpriority attribute to all lowercase on Gallery images to prevent a React warning.

• #1125 552d627b Thanks @cartogram! - Fixed a bug where the price on the product details was not updating when the variant changed.

@shopify/[email protected]

Minor Changes

• #1044 c8f5934d Thanks @blittle! - Hydrogen now has a built in session and cookie implementation. Read more about how sessions work in Hydrogen. The starter template also includes a cookie session storage implementation. To use the new session implementation within an existing Hydrogen app:

  import renderHydrogen from '@shopify/hydrogen/entry-server';
  import {
    Router,
    Route,
    FileRoutes,
    ShopifyProvider,
  +  CookieSessionStorage,
  } from '@shopify/hydrogen';
  import {Suspense} from 'react';
  import shopifyConfig from '../shopify.config';
  import DefaultSeo from './components/DefaultSeo.server';
  import NotFound from './components/NotFound.server';
  import LoadingFallback from './components/LoadingFallback';
  import CartProvider from './components/CartProvider.client';
  
  function App({routes}) {
    return (
      <Suspense fallback={<LoadingFallback />}>
        <ShopifyProvider shopifyConfig={shopifyConfig}>
          <CartProvider>
            <DefaultSeo />
            <Router>
              <FileRoutes routes={routes} />
              <Route path="*" page={<NotFound />} />
            </Router>
          </CartProvider>
        </ShopifyProvider>
      </Suspense>
    );
  }
  
  const routes = import.meta.globEager('./routes/**/*.server.[jt](s|sx)');
  
  export default renderHydrogen(App, {
    routes,
    shopifyConfig,
  +  session: CookieSessionStorage('__session', {
  +    path: '/',
  +    httpOnly: true,
  +    secure: process.env.NODE_ENV === 'production',
  +    sameSite: 'strict',
  +    maxAge: 60 * 60 * 24 * 30,
  +  }),
  });
  

• #881 a31babfb Thanks @jplhomer! - ## Change from serverState to serverProps

  Breaking changes:

  1. useServerState() is gone. Use useServerProps() instead
  2. useServerProps() is reset on each page navigation. Previously useServerState() was not.
  3. useServerProps() does not contain pathname and search. Use the useNavigate hook to programmatically navigate instead.

  Explanation:

  The current behavior of server state is to persist indefinitely (until a hard page reload). This works great for things like the CountrySelector, where the updated state is meant to persist across navigations. This breaks down for many other use cases. Consider a collection paginator: if you paginate through to the second page of a collection using server state, visit a product page, and then go to a different collection page, the new collection page will use that same pagination variable in server state. This will result in a wonky or errored experience.

  Additionally, we have found that the term for serverState is confusing. The hook is used within client components, yet the state is passed as a prop to server components.

  As a result, serverState is now gone. Instead communicating between client and server components is through serverProps. If a client component wants to re-render server content, it just calls setServerProps('some', 'data'). Those props will be serialized to the server, and the server component will re-render. Additionally, the server props are reset on page navigation. So that they will not bleed between pages (fixes #331).

  If you previously relied on serverState for global state in your app, you shouldn't use serverProps anymore. Instead we'll introduce a new session based mechanism for global state (in the meantime you could manually manage a cookie).

  Lastly, serverProps no longer include the pathname and search parameters. Programmatically navigate in hydrogen instead with the useNavigate hook.

• #1098 f3dafec4 Thanks @wizardlyhel! - Obfuscate chunk filename on production build

Patch Changes

• #1131 8199023b Thanks @blittle! - Fix hydration issue where strings with $ would get converted to a single $

• #1105 57ececf8 Thanks @frehner! - Regenerate the graphql.schema.json which should fix the sudden end-of-line termination, and makes the schema valid again.

• #1099 6b50d371 Thanks @blittle! - Fix Hydrogen to not hard fail when client analytics doesn't load. Analytics might fail to load due to client-side adblockers.

[email protected]

[email protected]

@shopify/[email protected]

Patch Changes

• #1102 59ee791a Thanks @frandiox! - Do not call client exported functions during RSC.