diff --git a/.changeset/chilled-baboons-deny.md b/.changeset/chilled-baboons-deny.md new file mode 100644 index 0000000000..731371347d --- /dev/null +++ b/.changeset/chilled-baboons-deny.md @@ -0,0 +1,9 @@ +--- +'@shopify/hydrogen': minor +--- + +**Breaking change** + +The utility `isClient` has been renamed to `isBrowser`. This is because the utility really checks if the running context is a browser, _not_ if the context is a client component. + +All client components by default also run on the server when they are server rendered. If you don't want that to happen, use the `isBrowser()` hook. Remember that anything not server rendered will be unavailable for SEO bots. diff --git a/.changeset/clean-lies-greet.md b/.changeset/clean-lies-greet.md new file mode 100644 index 0000000000..0b4feb09ac --- /dev/null +++ b/.changeset/clean-lies-greet.md @@ -0,0 +1,5 @@ +--- +'@shopify/hydrogen': patch +--- + +Rename internal Hydrogen global variables that could conflict with third party libraries that use the same names. diff --git a/.changeset/cool-spies-study.md b/.changeset/cool-spies-study.md new file mode 100644 index 0000000000..d5fe62437a --- /dev/null +++ b/.changeset/cool-spies-study.md @@ -0,0 +1,25 @@ +--- +'@shopify/hydrogen': minor +--- + +Add `scroll` prop to `Link` and `navigate` to allow the scroll restoration behavior to be disabled. + +By default, when a `` component is clicked, Hydrogen emulates default browser behavior and attempts to restore the scroll position previously used in the visitor's session. For new pages, this defaults to scrolling to the top of the page. + +However, if you are building a user interface that should fetch a new server components request and update the URL but not modify scroll position, then you can disable scroll restoration using the `scroll` prop: + +```jsx +import {Link} from '@shopify/hydrogen'; +export default function Index({request}) { + const url = new URL(request.normalizedUrl); + + return ( + <> +

Current param is: {url.searchParams.get('param')}

+ + Update param to foo + + + ); +} +``` diff --git a/.changeset/fair-rats-sort.md b/.changeset/fair-rats-sort.md new file mode 100644 index 0000000000..bdea1e53fc --- /dev/null +++ b/.changeset/fair-rats-sort.md @@ -0,0 +1,9 @@ +--- +'@shopify/hydrogen': minor +--- + +With the introduction of authenticated pages, we also now provide the ability to prevent pages from being indexed by bots. You can do so by passing `noindex` to the `Seo` component: + +```jsx + +``` diff --git a/.changeset/famous-lobsters-enjoy.md b/.changeset/famous-lobsters-enjoy.md new file mode 100644 index 0000000000..4acf990379 --- /dev/null +++ b/.changeset/famous-lobsters-enjoy.md @@ -0,0 +1,5 @@ +--- +'@shopify/hydrogen': patch +--- + +Improve component bundling to reduce the total amount of JS files downloaded in the browser. diff --git a/.changeset/five-cougars-begin.md b/.changeset/five-cougars-begin.md new file mode 100644 index 0000000000..2b290e764b --- /dev/null +++ b/.changeset/five-cougars-begin.md @@ -0,0 +1,5 @@ +--- +'@shopify/hydrogen': patch +--- + +Reduce CPU consumption when rendering React Server Components. diff --git a/.changeset/fresh-cooks-poke.md b/.changeset/fresh-cooks-poke.md new file mode 100644 index 0000000000..59501a2737 --- /dev/null +++ b/.changeset/fresh-cooks-poke.md @@ -0,0 +1,5 @@ +--- +'@shopify/hydrogen': patch +--- + +Confusing warnings that are not actionable have been removed. diff --git a/.changeset/gorgeous-forks-type.md b/.changeset/gorgeous-forks-type.md new file mode 100644 index 0000000000..7d823b070f --- /dev/null +++ b/.changeset/gorgeous-forks-type.md @@ -0,0 +1,5 @@ +--- +'create-hydrogen-app': patch +--- + +Small styling fix to country selector in demo store template diff --git a/.changeset/polite-years-rhyme.md b/.changeset/polite-years-rhyme.md new file mode 100644 index 0000000000..2de26ccd4d --- /dev/null +++ b/.changeset/polite-years-rhyme.md @@ -0,0 +1,5 @@ +--- +'@shopify/hydrogen': patch +--- + +Propagate a better error message when the response from the storefront API is not JSON parseable diff --git a/.changeset/rich-seals-switch.md b/.changeset/rich-seals-switch.md new file mode 100644 index 0000000000..15df09b605 --- /dev/null +++ b/.changeset/rich-seals-switch.md @@ -0,0 +1,5 @@ +--- +'@shopify/hydrogen': patch +--- + +Enable streaming by default for all platforms diff --git a/.changeset/rotten-nails-complain.md b/.changeset/rotten-nails-complain.md new file mode 100644 index 0000000000..97c06142bc --- /dev/null +++ b/.changeset/rotten-nails-complain.md @@ -0,0 +1,44 @@ +--- +'@shopify/hydrogen': minor +--- + +**Breaking change**: The `setLogger` and `setLoggerOptions` utilities have been removed. The same information can now be passed under the `logger` property in Hydrogen config: + +```diff +// App.server.jsx + +-import {setLogger, setLoggerOptions} from '@shopify/hydrogen'; + +-setLogger({ +- trace() {}, +- error() {}, +- // ... +-}); + +-setLoggerOptions({ +- showQueryTiming: true, +- showCacheControlHeader: true, +- // ... +-}); + +function App() { + // ... +} + +export default renderHydrogen(App); +``` + +```diff +// hydrogen.config.js + +export default defineConfig({ + // ... ++ logger: { ++ trace() {}, ++ error() {}, ++ showQueryTiming: true, ++ showCacheControlHeader: true, ++ // ... ++ }, +}); +``` diff --git a/.changeset/rude-yaks-obey.md b/.changeset/rude-yaks-obey.md new file mode 100644 index 0000000000..e389657b06 --- /dev/null +++ b/.changeset/rude-yaks-obey.md @@ -0,0 +1,16 @@ +--- +'@shopify/hydrogen': minor +--- + +The `response.writeHead` method has been removed, while `response.status` and `response.statusText` are now writable. + +```diff +function App({response}) { +- response.writeHead({ +- headers: {'custom-header': 'value'}, +- status: 404, +- }); ++ response.headers.set('custom-header', 'value'); ++ response.status = 404; +} +``` diff --git a/.changeset/sharp-rice-marry.md b/.changeset/sharp-rice-marry.md new file mode 100644 index 0000000000..a09cfce49c --- /dev/null +++ b/.changeset/sharp-rice-marry.md @@ -0,0 +1,5 @@ +--- +'@shopify/hydrogen': patch +--- + +Properly support Node v18 diff --git a/.changeset/soft-tools-lay.md b/.changeset/soft-tools-lay.md new file mode 100644 index 0000000000..25b4a9a73b --- /dev/null +++ b/.changeset/soft-tools-lay.md @@ -0,0 +1,5 @@ +--- +'@shopify/hydrogen': patch +--- + +Custom loggers can return promises from their methods. Hydrogen will await for them after the current request is over but before the runtime instance ends. diff --git a/.changeset/spicy-pans-turn.md b/.changeset/spicy-pans-turn.md new file mode 100644 index 0000000000..f56702c1f1 --- /dev/null +++ b/.changeset/spicy-pans-turn.md @@ -0,0 +1,30 @@ +--- +'@shopify/hydrogen': minor +--- + +**Breaking change**: The client configuration, including the `strictMode` option, has been moved from custom client entry handlers to the Hydrogen configuration file. If you had a custom client entry file just to pass client options, you can remove it and do the same in `hydrogen.config.js`: + +```diff +// Custom client entry handler + +-renderHydrogen(ClientWrapper, {strictMode: false}); ++renderHydrogen(ClientWrapper); +``` + +```diff +// hydrogen.config.jsx + +export default defineConfig({ ++ strictMode: false, +}); +``` + +To remove a custom client entry handler in case it's not needed anymore, delete the custom file and change `index.html`: + +```diff + +
+- ++ + +``` diff --git a/.changeset/ten-knives-tickle.md b/.changeset/ten-knives-tickle.md new file mode 100644 index 0000000000..a090f4a0c8 --- /dev/null +++ b/.changeset/ten-knives-tickle.md @@ -0,0 +1,5 @@ +--- +'@shopify/hydrogen': patch +--- + +Workers context (e.g. `waitUntil`) is now scoped to the current request instead of globally available. diff --git a/.changeset/violet-peaches-notice.md b/.changeset/violet-peaches-notice.md new file mode 100644 index 0000000000..c14156f112 --- /dev/null +++ b/.changeset/violet-peaches-notice.md @@ -0,0 +1,33 @@ +--- +'@shopify/hydrogen': minor +--- + +**Breaking change**: The `enableStreaming` config option has been deprecated. The same feature can be done directly in the app: + +```diff +// hydrogen.config.js + +export default defineConfig({ + shopify: { + // ... + }, +- enableStreaming: (req) => { +- return req.headers.get('user-agent') !== 'custom bot'; +- }, +}); +``` + +```diff +// App.server.jsx + +-function App() { ++function App({request, response}) { ++ if (request.headers.get('user-agent') === 'custom bot') { ++ response.doNotStream(); ++ } + + return {/*...*/}; +} + +export default renderHydrogen(App); +``` diff --git a/.changeset/wild-rabbits-reflect.md b/.changeset/wild-rabbits-reflect.md new file mode 100644 index 0000000000..71acb9788d --- /dev/null +++ b/.changeset/wild-rabbits-reflect.md @@ -0,0 +1,5 @@ +--- +'@shopify/hydrogen': patch +--- + +[#1245] - Generate a default srcset for an image returned by the Shopify CDN on the Image component and allow using a custom set of `widths.` diff --git a/packages/create-hydrogen-app/CHANGELOG.md b/packages/create-hydrogen-app/CHANGELOG.md index 4c07f52857..ac93787b14 100644 --- a/packages/create-hydrogen-app/CHANGELOG.md +++ b/packages/create-hydrogen-app/CHANGELOG.md @@ -1,11 +1,5 @@ # Changelog -## 0.23.0 - -### Patch Changes - -- [#1415](https://github.com/Shopify/hydrogen/pull/1415) [`43f96465`](https://github.com/Shopify/hydrogen/commit/43f964653ea3b08c11c2482ae71da1726694be2a) Thanks [@BradMurchison](https://github.com/BradMurchison)! - Small styling fix to country selector in demo store template - ## 0.22.1 ## 0.22.0 diff --git a/packages/create-hydrogen-app/package.json b/packages/create-hydrogen-app/package.json index 7f7f9a1a91..3335f93789 100644 --- a/packages/create-hydrogen-app/package.json +++ b/packages/create-hydrogen-app/package.json @@ -4,7 +4,7 @@ "access": "public", "@shopify:registry": "https://registry.npmjs.org" }, - "version": "0.23.0", + "version": "0.22.1", "main": "index.js", "license": "MIT", "bin": { diff --git a/packages/hydrogen/CHANGELOG.md b/packages/hydrogen/CHANGELOG.md index 5d1982b4cb..a86d7ebd65 100644 --- a/packages/hydrogen/CHANGELOG.md +++ b/packages/hydrogen/CHANGELOG.md @@ -1,176 +1,5 @@ # Changelog -## 0.23.0 - -### Minor Changes - -- [#1389](https://github.com/Shopify/hydrogen/pull/1389) [`9a21108f`](https://github.com/Shopify/hydrogen/commit/9a21108f6ff89474db9ff8bec26733fcbe744bdc) Thanks [@blittle](https://github.com/blittle)! - **Breaking change** - - The utility `isClient` has been renamed to `isBrowser`. This is because the utility really checks if the running context is a browser, _not_ if the context is a client component. - - All client components by default also run on the server when they are server rendered. If you don't want that to happen, use the `isBrowser()` hook. Remember that anything not server rendered will be unavailable for SEO bots. - -* [#1431](https://github.com/Shopify/hydrogen/pull/1431) [`6975bdb9`](https://github.com/Shopify/hydrogen/commit/6975bdb90cfdc03562d21cec09150c52ff31ff78) Thanks [@jplhomer](https://github.com/jplhomer)! - Add `scroll` prop to `Link` and `navigate` to allow the scroll restoration behavior to be disabled. - - By default, when a `` component is clicked, Hydrogen emulates default browser behavior and attempts to restore the scroll position previously used in the visitor's session. For new pages, this defaults to scrolling to the top of the page. - - However, if you are building a user interface that should fetch a new server components request and update the URL but not modify scroll position, then you can disable scroll restoration using the `scroll` prop: - - ```jsx - import {Link} from '@shopify/hydrogen'; - export default function Index({request}) { - const url = new URL(request.normalizedUrl); - - return ( - <> -

Current param is: {url.searchParams.get('param')}

- - Update param to foo - - - ); - } - ``` - -- [#1334](https://github.com/Shopify/hydrogen/pull/1334) [`58e039d4`](https://github.com/Shopify/hydrogen/commit/58e039d45cf69b670628f9f7ea62cb7c2d8425d9) Thanks [@blittle](https://github.com/blittle)! - With the introduction of authenticated pages, we also now provide the ability to prevent pages from being indexed by bots. You can do so by passing `noindex` to the `Seo` component: - - ```jsx - - ``` - -* [#1403](https://github.com/Shopify/hydrogen/pull/1403) [`979f8177`](https://github.com/Shopify/hydrogen/commit/979f81775a4bfa83276030da07cb012e6cb08e2f) Thanks [@frandiox](https://github.com/frandiox)! - **Breaking change**: The `setLogger` and `setLoggerOptions` utilities have been removed. The same information can now be passed under the `logger` property in Hydrogen config: - - ```diff - // App.server.jsx - - -import {setLogger, setLoggerOptions} from '@shopify/hydrogen'; - - -setLogger({ - - trace() {}, - - error() {}, - - // ... - -}); - - -setLoggerOptions({ - - showQueryTiming: true, - - showCacheControlHeader: true, - - // ... - -}); - - function App() { - // ... - } - - export default renderHydrogen(App); - ``` - - ```diff - // hydrogen.config.js - - export default defineConfig({ - // ... - + logger: { - + trace() {}, - + error() {}, - + showQueryTiming: true, - + showCacheControlHeader: true, - + // ... - + }, - }); - ``` - -- [#1433](https://github.com/Shopify/hydrogen/pull/1433) [`cd354d3a`](https://github.com/Shopify/hydrogen/commit/cd354d3a6205b5a8ef14426040121ac620c8c158) Thanks [@frandiox](https://github.com/frandiox)! - The `response.writeHead` method has been removed, while `response.status` and `response.statusText` are now writable. - - ```diff - function App({response}) { - - response.writeHead({ - - headers: {'custom-header': 'value'}, - - status: 404, - - }); - + response.headers.set('custom-header', 'value'); - + response.status = 404; - } - ``` - -* [#1418](https://github.com/Shopify/hydrogen/pull/1418) [`512cb009`](https://github.com/Shopify/hydrogen/commit/512cb009fadeb1907fafa2cef8b568081799335f) Thanks [@frandiox](https://github.com/frandiox)! - **Breaking change**: The client configuration, including the `strictMode` option, has been moved from custom client entry handlers to the Hydrogen configuration file. If you had a custom client entry file just to pass client options, you can remove it and do the same in `hydrogen.config.js`: - - ```diff - // Custom client entry handler - - -renderHydrogen(ClientWrapper, {strictMode: false}); - +renderHydrogen(ClientWrapper); - ``` - - ```diff - // hydrogen.config.jsx - - export default defineConfig({ - + strictMode: false, - }); - ``` - - To remove a custom client entry handler in case it's not needed anymore, delete the custom file and change `index.html`: - - ```diff - -
- - - + - - ``` - -- [#1401](https://github.com/Shopify/hydrogen/pull/1401) [`335b70ce`](https://github.com/Shopify/hydrogen/commit/335b70ce67f9f137875fcd18f32e00c1b1b4c533) Thanks [@frandiox](https://github.com/frandiox)! - **Breaking change**: The `enableStreaming` config option has been deprecated. The same feature can be done directly in the app: - - ```diff - // hydrogen.config.js - - export default defineConfig({ - shopify: { - // ... - }, - - enableStreaming: (req) => { - - return req.headers.get('user-agent') !== 'custom bot'; - - }, - }); - ``` - - ```diff - // App.server.jsx - - -function App() { - +function App({request, response}) { - + if (request.headers.get('user-agent') === 'custom bot') { - + response.doNotStream(); - + } - - return {/*...*/}; - } - - export default renderHydrogen(App); - ``` - -### Patch Changes - -- [#1425](https://github.com/Shopify/hydrogen/pull/1425) [`e213aa86`](https://github.com/Shopify/hydrogen/commit/e213aa8656b17bf649fef714befa99b9618aae45) Thanks [@frandiox](https://github.com/frandiox)! - Rename internal Hydrogen global variables that could conflict with third party libraries that use the same names. - -* [#1361](https://github.com/Shopify/hydrogen/pull/1361) [`cf2ef664`](https://github.com/Shopify/hydrogen/commit/cf2ef664cd1e91bc53fc34698ac23797c398e74f) Thanks [@frandiox](https://github.com/frandiox)! - Improve component bundling to reduce the total amount of JS files downloaded in the browser. - -- [#1452](https://github.com/Shopify/hydrogen/pull/1452) [`ed1586a7`](https://github.com/Shopify/hydrogen/commit/ed1586a758fd36bddcc422a75db8a7971ce946d5) Thanks [@frandiox](https://github.com/frandiox)! - Reduce CPU consumption when rendering React Server Components. - -* [#1399](https://github.com/Shopify/hydrogen/pull/1399) [`583ce40c`](https://github.com/Shopify/hydrogen/commit/583ce40c97391bb22e6e15e736e6237e9a1ea085) Thanks [@frandiox](https://github.com/frandiox)! - Confusing warnings that are not actionable have been removed. - -- [#1444](https://github.com/Shopify/hydrogen/pull/1444) [`0b4ee487`](https://github.com/Shopify/hydrogen/commit/0b4ee4876998923f206f6d28b1a3ef95c9616e59) Thanks [@blittle](https://github.com/blittle)! - Propagate a better error message when the response from the storefront API is not JSON parseable - -* [#1227](https://github.com/Shopify/hydrogen/pull/1227) [`8eae0a07`](https://github.com/Shopify/hydrogen/commit/8eae0a07ab02e61ac8742e42488825090ca0aa37) Thanks [@jplhomer](https://github.com/jplhomer)! - Enable streaming by default for all platforms - -- [#1427](https://github.com/Shopify/hydrogen/pull/1427) [`7115d7d8`](https://github.com/Shopify/hydrogen/commit/7115d7d8dc291b7e5b4dda200baf8a906a005cc8) Thanks [@jplhomer](https://github.com/jplhomer)! - Properly support Node v18 - -* [#1424](https://github.com/Shopify/hydrogen/pull/1424) [`446c12bf`](https://github.com/Shopify/hydrogen/commit/446c12bffa08eadccfd27afe8b5f34c77a61d134) Thanks [@frandiox](https://github.com/frandiox)! - Custom loggers can return promises from their methods. Hydrogen will await for them after the current request is over but before the runtime instance ends. - -- [#1423](https://github.com/Shopify/hydrogen/pull/1423) [`aaf9efa4`](https://github.com/Shopify/hydrogen/commit/aaf9efa45dc9453e95be8e3020c259368ac5f4d0) Thanks [@frandiox](https://github.com/frandiox)! - Workers context (e.g. `waitUntil`) is now scoped to the current request instead of globally available. - -* [#1330](https://github.com/Shopify/hydrogen/pull/1330) [`c7dc6440`](https://github.com/Shopify/hydrogen/commit/c7dc644059206e7080c33d9f7e0096c168ae593e) Thanks [@ejfranco06](https://github.com/ejfranco06)! - [#1245] - Generate a default srcset for an image returned by the Shopify CDN on the Image component and allow using a custom set of `widths.` - ## 0.22.1 ### Patch Changes diff --git a/packages/hydrogen/package.json b/packages/hydrogen/package.json index 05da67b933..6cb98299b6 100644 --- a/packages/hydrogen/package.json +++ b/packages/hydrogen/package.json @@ -7,7 +7,7 @@ "engines": { "node": ">=14" }, - "version": "0.23.0", + "version": "0.22.1", "description": "Modern custom Shopify storefronts", "license": "MIT", "main": "dist/esnext/index.js", diff --git a/packages/hydrogen/src/version.ts b/packages/hydrogen/src/version.ts index 3b702c1251..06a9eb5d41 100644 --- a/packages/hydrogen/src/version.ts +++ b/packages/hydrogen/src/version.ts @@ -1 +1 @@ -export const LIB_VERSION = '0.23.0'; +export const LIB_VERSION = '0.22.1'; diff --git a/packages/playground/async-config/package.json b/packages/playground/async-config/package.json index a510b6c6c4..595f5b5f15 100644 --- a/packages/playground/async-config/package.json +++ b/packages/playground/async-config/package.json @@ -17,7 +17,7 @@ }, "dependencies": { "@cloudflare/kv-asset-handler": "*", - "@shopify/hydrogen": "^0.23.0", + "@shopify/hydrogen": "^0.22.1", "miniflare": "^1.3.3", "react": "^18.1.0", "react-dom": "^18.1.0" diff --git a/packages/playground/server-components/package.json b/packages/playground/server-components/package.json index 9fca3733b1..fd0edeffb8 100644 --- a/packages/playground/server-components/package.json +++ b/packages/playground/server-components/package.json @@ -17,7 +17,7 @@ }, "dependencies": { "@cloudflare/kv-asset-handler": "*", - "@shopify/hydrogen": "^0.23.0", + "@shopify/hydrogen": "^0.22.1", "miniflare": "^1.3.3", "react": "^18.1.0", "react-dom": "^18.1.0" diff --git a/templates/demo-store/package.json b/templates/demo-store/package.json index 269a05ca25..3b03c7d348 100644 --- a/templates/demo-store/package.json +++ b/templates/demo-store/package.json @@ -31,7 +31,7 @@ }, "dependencies": { "@headlessui/react": "^1.5.0", - "@shopify/hydrogen": "^0.23.0", + "@shopify/hydrogen": "^0.22.1", "body-parser": "^1.20.0", "compression": "^1.7.4", "react": "^18.1.0", diff --git a/templates/hello-world/package.json b/templates/hello-world/package.json index 5386d07ae4..3a81be0a5d 100644 --- a/templates/hello-world/package.json +++ b/templates/hello-world/package.json @@ -15,7 +15,7 @@ "vite": "^2.9.0" }, "dependencies": { - "@shopify/hydrogen": "^0.23.0", + "@shopify/hydrogen": "^0.22.1", "react": "^18.1.0", "react-dom": "^18.1.0" }