Releases: Shopify/hydrogen
@shopify/mini-oxygen@3.0.0
Major Changes
-
The default runtime exported from
@shopify/mini-oxygenis now based on workerd. (#1891) by @frandioxThe previous Node.js sandbox runtime has been moved to the
@shopify/mini-oxygen/nodeexport.Example usage:
import {createMiniOxygen} from '@shopify/mini-oxygen'; const miniOxygen = createMiniOxygen({ workers: [ { name: 'main', modules: true, script: `export default { async fetch() { const response = await fetch("https://hydrogen.shopify.dev"); return response; } }`, }, ], }); const response = await miniOxygen.dispatchFetch('http://placeholder'); console.log(await response.text()); await miniOxygen.dispose();
Minor Changes
@shopify/hydrogen@2024.4.0
Minor Changes
-
Change
storefrontRedirectto ignore query parameters when matching redirects. For example, a redirect in the admin from/snowboardsto/collections/snowboardswill now match on the URL/snowboards?utm_campaign=bufferand redirect the user to/collections/snowboards?utm_campaign=buffer. (#1900) by @blittleThis is a breaking change. If you want to retain the legacy functionality that is query parameter sensitive, pass
matchQueryParamstostorefrontRedirect():storefrontRedirect({ request, response, storefront, matchQueryParams: true, });
Patch Changes
-
Make
StorefrontRedirectcase insensitive when querying redirect URLs from the Storefront API. (#1941) by @blittle -
Fix bug where
storefrontRedirectwould return an error on soft page navigations. (#1880) by @blittle -
Fix a bug where
cartcould be null, even though a new cart was created by adding a line item. (#1865) by @blittleThis allows calling the cart
.get()method right after creating a new cart with
one of the mutation methods:create(),addLines(),updateDiscountCodes(),updateBuyerIdentity(),updateNote(),updateAttributes(),setMetafields().import { createCartHandler, cartGetIdDefault, cartSetIdDefault, } from '@shopify/hydrogen'; const cartHandler = createCartHandler({ storefront, getCartId: cartGetIdDefault(request.headers), setCartId: cartSetIdDefault(), cartQueryFragment: CART_QUERY_FRAGMENT, cartMutateFragment: CART_MUTATE_FRAGMENT, }); await cartHandler.addLines([{merchandiseId: '...'}]); // .get() now returns the cart as expected const cart = await cartHandler.get();
-
Add
postLogoutRedirectUrioption to the Customer Account API client's logout method. (#1871) by @michenly -
Introducing
<UNSTABLE_Analytics.Provider>that also includes Shopify analytics, Customer Privacy API and Privacy banner (#1789) by @wizardlyhel -
Export new Hydrogen Vite plugin from
@shopify/hydrogen/vite. (#1935) by @frandiox -
Add the
customer-account pushcommand to the Hydrogen CLI. This allows you to push the current--dev-originURL to the Shopify admin to enable secure connection to the Customer Account API for local development. (#1804) by @michenly -
Fix default content security policy directive for
frameAncestors. (#1883) by @blittle -
Fall back to "mock.shop" when no value is passed in
storeDomaintocreateStorefrontClientin development. (#1971) by @frandiox -
Allow
ui_localeto be passed to the customer account login page. (#1842) by @wizardlyhel -
Deprecate the
<Seo />component in favor of directly using Remix meta route exports. Add thegetSeoMetato make migration easier. (#1875) by @blittleMigration steps:
1. Remove the
<Seo />component fromroot.jsx:export default function App() { const nonce = useNonce(); const data = useLoaderData<typeof loader>(); return ( <html lang="en"> <head> <meta charSet="utf-8" /> <meta name="viewport" content="width=device-width,initial-scale=1" /> - <Seo /> <Meta /> <Links /> </head> <body> <Layout {...data}> <Outlet /> </Layout> <ScrollRestoration nonce={nonce} /> <Scripts nonce={nonce} /> <LiveReload nonce={nonce} /> </body> </html> ); }2. Add a Remix meta export to each route that returns an
seoproperty from aloaderorhandle:+import {getSeoMeta} from '@shopify/hydrogen'; export async function loader({context}) { const {shop} = await context.storefront.query(` query layout { shop { name description } } `); return { seo: { title: shop.title, description: shop.description, }, }; } +export const meta = ({data}) => { + return getSeoMeta(data.seo); +};
3. Merge root route meta data
If your root route loader also returns an
seoproperty, make sure to merge that data:export const meta = ({data, matches}) => { return getSeoMeta( matches[0].data.seo, // the current route seo data overrides the root route data data.seo, ); };
Or more simply:
export const meta = ({data, matches}) => { return getSeoMeta(...matches.map((match) => match.data.seo)); };
4. Override meta
Sometimes
getSeoMetamight produce a property in a way you'd like to change. Map over the resulting array to change it. For example, Hydrogen removes query parameters from canonical URLs, add them back:export const meta = ({data, location}) => { return getSeoMeta(data.seo).map((meta) => { if (meta.rel === 'canonical') { return { ...meta, href: meta.href + location.search, }; } return meta; }); };
-
Updated dependencies [
f4d6e5b0,a209019f,e50f4349]:- @shopify/hydrogen-react@2024.4.0
@shopify/hydrogen-react@2024.4.0
Patch Changes
-
Introducing
<UNSTABLE_Analytics.Provider>that also includes Shopify analytics, Customer Privacy API and Privacy banner (#1789) by @wizardlyhel -
Fall back to "mock.shop" when no value is passed in
storeDomaintocreateStorefrontClientin development. (#1971) by @frandiox -
Expose
cartReadystate from the cart context. (#1885) by @celsowhite
@shopify/hydrogen-codegen@0.3.0
@shopify/create-hydrogen@4.3.6
@shopify/cli-hydrogen@8.0.0
Major Changes
-
Hydrogen CLI now requires
@shopify/mini-oxygento be installed separately as a dev dependency. It is still used automatically under the hood so there is no need to change your application code aside from installing the dependency. (#1891) by @frandioxAlso, if a port provided via
--portor--inspector-portflags is already in use, the CLI will now exit with an error message instead of finding a new open port. When the flags are not provided, the CLI will still find an open port.
Minor Changes
-
Move the Hydrogen CLI's
env pushcommand to stable. (#1946) by @aswamy -
Deprecate the
--env-branchflag, in favor of--env. (#1841) by @aswamy--envaccepts the environment's handle, instead of the environment's associated branch name- Run
env listto display all environments and their handles
- Run
- Any CLI commands that accepted the
--env-branchflag now accept the--envflag.
-
Support scaffolding projects from external repositories using the
--templateflag. (#1867) by @frandioxThe following examples are equivalent:
npm create @shopify/hydrogen -- --template shopify/hydrogen-demo-store npm create @shopify/hydrogen -- --template github.com/shopify/hydrogen-demo-store npm create @shopify/hydrogen -- --template https://github.com/shopify/hydrogen-demo-store
-
Add the
customer-account pushcommand to the Hydrogen CLI. This allows you to push the current--dev-originURL to the Shopify admin to enable secure connection to the Customer Account API for local development. (#1804) by @michenly -
Remove the
@shopify/cli-hydrogen/experimental-viteimport path in favor of@shopify/hydrogen/viteand@shopify/mini-oxygen/vite. (#1935) by @frandiox
Patch Changes
-
Avoid throwing error in
h2 dev --codegenwhen the Customer Account schema is not found. (#1962) by @frandiox -
Bump internal workerd dependency to fix a bug when running on Node 21. (#1866) by @frandiox
-
Support Node's
NODE_TLS_REJECT_UNAUTHORIZEDandNODE_EXTRA_CA_CERTSenvironment variables in the worker environment. (#1882) by @frandioxUse this at your own risk to disable certificate validation or provide additional CA certificates when making HTTPS requests from the worker:
# Disable certificate validation NODE_TLS_REJECT_UNAUTHORIZED=0 npm run dev # Provide additional CA certificates NODE_EXTRA_CA_CERTS=/usr/.../ca-certificates/my-file.crt npm run dev
-
Add
--quickstartflag option to init/create command. (#1822) by @gfscott -
Add a newline after the
h2alias created in ZSH/Bash profiles. (#1950) by @madmath -
Fix the
--marketsflag when usingnpm create @shopify/hydrogen. (#1916) by @frandiox -
Handle duplicate storefront names when running
linkcommand. (#1860) by @gfscott -
List uncommitted files in the
deploycommand's "uncommitted changes" error message. (#1944) by @graygilmore -
Improve
h2 setup vitecommand to cover more migration steps (e.g. vanilla-extract, css-modules, etc.) and keep Remix future flags. (#1915) by @frandiox -
Add
--verboseflag toh2 devandh2 previewcommands to enable verbose logging. (#1928) by @frandioxOnly CLI logs become verbose by default. If you also want to see verbose logs from Vite as well, use
DEBUG=* h2 devinstead. -
Updated dependencies [
646b78d4,140e4768,ebaf5529]:- @shopify/hydrogen-codegen@0.3.0
- @shopify/mini-oxygen@3.0.0