Releases: Shopify/hydrogen-v1
@shopify/hydrogen@1.2.0
Minor Changes
-
Add a new experimental Forms and mutations feature. Read more https://shopify.dev/custom-storefronts/hydrogen/framework/forms (#1552) by @blittle
-
CartLineQuantityAdjustButton,BuyNowButton, andAddToCartButtonnow have anasproperty. The types for these components have also been improved. (#1827) by @blittle -
Added a new experimental CSS approach to support importing styles directly in React Server Components. This feature must be enabled manually. (#1843) by @frandiox
Until now, we had experimental support for CSS Modules with some minor restrictions and drawbacks:
- Only server components that were the default export had access to the CSS Module automatically (i.e. it required extra work for named exports).
- CSS Module was duplicated when used in multiple components.
- RSC responses had all the CSS inlined, making them much larger.
The new CSS approach adds full support for CSS Modules without the previous restrictions and drawbacks.
Aside from that, it also adds support for pure CSS and enables a way to integrate with tools that provide CSS-in-JS at build time. All the CSS imported in both client and server components will be extracted in a CSS file at build time and downloaded with a
<link rel="stylesheet">tag. During development, styles will be inlined in the DOM to better support HMR.To activate this new experimental feature, pass the
experimental.css: 'global'option to Hydrogen's Vite plugin:// vite.config.js export default { plugins: [hydrogen({experimental: {css: 'global'}})], };
Examples:
// App.server.jsx using pure CSS with global classes import './my-red-style.css'; function App() { return <div className="red">...</div>; }
// App.server.jsx using CSS Modules with scoped classes import {red} from './my-red.module.css'; function App() { return <div className={red}>...</div>; }
-
loadScriptanduseLoadScriptcan now inject in the<head />(#1870) by @juanpprieto -
Add support for custom 500 error pages. If an unexpected error occurs while rendering a route, Hydrogen will respond with a 500 HTTP error and render a default error page. Define a custom error page with the
serverErrorPageconfiguration property: (#1867) by @blittleimport {defineConfig} from '@shopify/hydrogen/config'; export default defineConfig({ ... serverErrorPage: '/src/Error.jsx', });
The
serverErrorPageproperty defaults to/src/Error.{jsx,tsx}. The custom error page is passed anErrorproperty:export default function Error({error}) { return ( <div> <h1>An unknown error occured!</h1> <h2>{error.message}</h2> <h3>{error.stack}</h3> </div> ); }
Patch Changes
-
Log detailed error message for Storefront API root errors (#1822) by @wizardlyhel
-
localecalculation logic and docs have been updated to support Shopify languages with extended language subtags. (#1836) by @lordofthecactusThe following is how we calculate
locale:
If the Shopifylanguageincludes a region, then this value is used to calculate thelocaleandcountryCodeis disregarded. For example, iflanguageisPT_BR(Brazilian Portuguese), thenlocaleis calculated asPT-BR.
If the Shopifylanguagedoesn't include a region, then this value is merged with thecountryCodeto calculate thelocale. For example, iflanguageisEN(English) andcountryCodeisUS(United States), thenlocaleis calculated asEN-US. -
Added optional sellingPlanId prop to AddToCartButton.client.tsx (#1821) by @ChrisKG32
-
Fix: Hydrogen no longer caches error responses. Any 400 or 500 level response will not have a cache control-header, nor will Hydrogen cache it internally. (#1873) by @blittle
-
Allow
sourcePropsto be passed to<Video/>'s underlying<source>elements. (#1847) by @frehner
create-hydrogen-app@1.1.0
create-hydrogen-app@1.1.0
@shopify/hydrogen@1.1.0
Minor Changes
-
Replace graphiql with graphql/graphql-playground in local development at '/graphql` route. (#1710) by @cartogram
-
Expose utilities for integrating Hydrogen with 3rd party platforms in
@shopify/hydrogen/platforms. These utilities can resolve the project build path automatically and also find the client build assets. (#1772) by @frandioximport { handleRequest, // Instead of './src/App.server' indexTemplate, // Instead of './dist/client/index.html?raw' isAsset, // Access a list of files in './dist/client/**/*' } from '@shopify/hydrogen/platforms'; // Platform entry handler export default function(request) { if (isAsset(new URL(request.url).pathname)) { return platformAssetHandler(request); } return handleRequest(request, {indexTemplate}); }
Note that user apps don't need to be changed.
Patch Changes
-
Fix server props to properly reset on page navigation. Fixes Shopify/hydrogen#1817 (#1830) by @blittle
-
Serve assets in
publicdirectory from the same origin when deploying to Oxygen. (#1815) by @frandioxNormally, public assets are served from a CDN domain that is different from the storefront URL. This creates issues in some situations where the assets need to be served from the same origin, such as when using service workers in PWA or tools like Partytown. This change adds a proxy so that the browser can download assets from the same origin.
Note that, for performance reasons, it is still recommended placing assets in
/src/assetsinstead of/publicwhenever possible. -
The payload returned by
fetchSyncwas supposed to mimicreact-fetchbut it wrongly moved the Response data to a sub-propertyresponse. This has been fixed to have the Response at the top level. Also, cached responses are now correctly serialized and retrieved to avoid issues on cache hit. (#1760) by @frandioxconst response = fetchSync('...'); -response.response.headers.get('...'); +response.headers.get('...'); const jsonData = response.json();Note that the sub-property
responseis still available but marked as deprecated. -
Improve error messaging when there is an error in the Storefront API's GraphQL response. (#1837) by @frehner
-
nullshopId fix on thePerformanceMetricscomponent (#1722) by @wizardlyhel -
Make sure full page caching only caches on GET request (#1839) by @wizardlyhel
-
Fix server props when using non UTF-8 characters in URL. (#1780) by @frandiox
-
Fix HMR in client components. It should now update only the modified client component in the browser instead of refreshing the entire page. (#1818) by @frandiox
create-hydrogen-app@1.0.2
create-hydrogen-app@1.0.2
@shopify/hydrogen@1.0.2
Patch Changes
-
<Image/>component has improved handling forwidthas a string. It also corrects an issue with thescaleprop and its usage with the Shopify CDN. The generatedsrcsetis also updated and improved. (#1723) by @frehner -
We've decided to deprecate the
<LocalizationProvider>, and instead put all its functionality into<ShopifyProvider>. The justification is that both providers are required by many components and hooks, and we think it's easier to have a single required<ShopifyProvider>instead of two. The same props available to the<LocalizationProvider>are now available on the<ShopifyProvider>. (#1735) by @blittle// App.server.tsx function App({routes, request}: HydrogenRouteProps) { ... return ( <Suspense fallback={<HeaderFallback isHome={isHome} />}> + <ShopifyProvider countryCode={countryCode as CountryCode}> - <ShopifyProvider> - <LocalizationProvider countryCode={countryCode as CountryCode}> <CartProvider countryCode={countryCode as CountryCode}> ... </CartProvider> <PerformanceMetrics /> {import.meta.env.DEV && <PerformanceMetricsDebug />} <ShopifyAnalytics /> - </LocalizationProvider> </ShopifyProvider> </Suspense> ); }Note: this is not a breaking change.
<LocalizationProvider>will still be available, but all documentation will now point to<ShopifyProvider>. -
Remove
formDatapolyfill in worker environments. (#1740) by @frandiox -
Fix
useProductOptionsexport to avoid errors at build time. (#1738) by @frandiox
create-hydrogen-app@1.0.1
create-hydrogen-app@1.0.1
create-hydrogen-app@0.27.2
create-hydrogen-app@0.27.2
create-hydrogen-app@0.27.1
create-hydrogen-app@0.27.1