Hydrogen lets you build faster headless storefronts in less time, on Shopify.
Stop inlining the favicon in base64 to avoid issues with the Content-Security-Policy. In vite.config.js: (#2006) by @frandiox
export default defineConfig({
plugins: [
...
],
+ build: {
+ assetsInlineLimit: 0,
+ },
});
To improve HMR in Vite, move the useRootLoaderData function from app/root.tsx to a separate file like app/lib/root-data.ts. This change avoids circular imports: (#2014) by @frandiox
// app/lib/root-data.ts
import {useMatches} from '@remix-run/react';
import type {SerializeFrom} from '@shopify/remix-oxygen';
import type {loader} from '~/root';
/**
* Access the result of the root loader from a React component.
*/
export const useRootLoaderData = () => {
const [root] = useMatches();
return root?.data as SerializeFrom<typeof loader>;
};
Import this hook from ~/lib/root-data instead of ~/root in your components.
Updated dependencies [b4dfda32, ffa57bdb, ac4e1670, 0af624d5, 9723eaf3, e842f68c]:
Clean up messaging around unlinked storefronts when running CLI commands (#1937) by @aswamy
env list, env pull, or deploy against a storefront that isn't linked, it will show a warning message instead of an error message.env list, env pull, or deploy.Add @return JSDoc tag to functions in JavaScript projects. (#2014) by @frandiox
Fix --quickstart flag to support overwritting it with other flags. Example: h2 init --quickstart --no-install-deps. (#2023) by @frandiox
Show error in h2 debug cpu command for Vite projects until we support it.
Remove deprecated --styling flag from the h2 init command.
Fix a warning when combining mock.shop and customer-account-push (#1992) by @frandiox
Updated dependencies [7e8cf055, a335afc1]:
Update internal libraries for parsing .env files. (#1946) by @aswamy
Please update the @shopify/cli dependency in your app to avoid duplicated subdependencies:
"dependencies": {
- "@shopify/cli": "3.56.3",
+ "@shopify/cli": "3.58.0",
}
Add Adds magic Catalog route (#1967) by @juanpprieto
Update Vite plugin imports, and how their options are passed to Remix: (#1935) by @frandiox
-import {hydrogen, oxygen} from '@shopify/cli-hydrogen/experimental-vite';
+import {hydrogen} from '@shopify/hydrogen/vite';
+import {oxygen} from '@shopify/mini-oxygen/vite';
import {vitePlugin as remix} from '@remix-run/dev';
export default defineConfig({
hydrogen(),
oxygen(),
remix({
- buildDirectory: 'dist',
+ presets: [hydrogen.preset()],
future: {
Add @shopify/mini-oxygen as a dev dependency for local development: (#1891) by @frandiox
"devDependencies": {
"@remix-run/dev": "^2.8.0",
"@remix-run/eslint-config": "^2.8.0",
+ "@shopify/mini-oxygen": "^3.0.0",
"@shopify/oxygen-workers-types": "^4.0.0",
...
},
Add the customer-account push command to the Hydrogen CLI. This allows you to push the current --dev-origin URL to the Shopify admin to enable secure connection to the Customer Account API for local development. (#1804) by @michenly
Fix types returned by the session object. (#1869) by @frandiox
In remix.env.d.ts or env.d.ts, add the following types:
import type {
// ...
HydrogenCart,
+ HydrogenSessionData,
} from '@shopify/hydrogen';
// ...
declare module '@shopify/remix-oxygen' {
// ...
+ interface SessionData extends HydrogenSessionData {}
}
Codegen dependencies must be now listed explicitly in package.json: (#1962) by @frandiox
{
"devDependencies": {
+ "@graphql-codegen/cli": "5.0.2",
"@remix-run/dev": "^2.8.0",
"@remix-run/eslint-config": "^2.8.0",
+ "@shopify/hydrogen-codegen": "^0.3.0",
"@shopify/mini-oxygen": "^2.2.5",
"@shopify/oxygen-workers-types": "^4.0.0",
...
}
}
Updated dependencies [4eaec272, 14bb5df1, 646b78d4, 87072950, 5f1295fe, 3c8a7313, ca1dcbb7, 11879b17, f4d6e5b0, 788d86b3, ebaf5529, da95bb1c, 5bb43304, 140e4768, 062d6be7, b3323e59, ab0df5a5, ebaf5529, ebaf5529, 9e899218, a209019f, d007b7bc, a5511cd7, 4afedb4d, 34fbae23, e3baaba5, 99d72f7a, 9351f9f5]:
The default runtime exported from @shopify/mini-oxygen is now based on workerd. (#1891) by @frandiox
The previous Node.js sandbox runtime has been moved to the @shopify/mini-oxygen/node export.
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();
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 storeDomain to createStorefrontClient in development. (#1971) by @frandiox
Expose cartReady state from the cart context. (#1885) by @celsowhite