diff --git a/.changeset/bright-impalas-swim.md b/.changeset/bright-impalas-swim.md deleted file mode 100644 index b3f3cd8260..0000000000 --- a/.changeset/bright-impalas-swim.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'@shopify/cli-hydrogen': patch ---- - -Fix the `check routes` command to match optional segments. diff --git a/.changeset/bright-shrimps-hear.md b/.changeset/bright-shrimps-hear.md deleted file mode 100644 index 393d66fded..0000000000 --- a/.changeset/bright-shrimps-hear.md +++ /dev/null @@ -1,6 +0,0 @@ ---- -'@shopify/hydrogen': major -'@shopify/hydrogen-react': major ---- - -Releases 2023-04 diff --git a/.changeset/thirty-rice-sin.md b/.changeset/thirty-rice-sin.md deleted file mode 100644 index d152b32cf8..0000000000 --- a/.changeset/thirty-rice-sin.md +++ /dev/null @@ -1,193 +0,0 @@ ---- -'@shopify/hydrogen-react': major -'@shopify/hydrogen': major ---- - -Adds a new `Image` component, replacing the existing one. While your existing implementation won't break, props `widths` and `loaderOptions` are now deprecated disregarded, with a new `aspectRatio` prop added. - -### Migrating to the new `Image` - -The new `Image` component is responsive by default, and requires less configuration to ensure the right image size is being rendered on all screen sizes. - -**Before** - -```jsx - -``` - -**After** - -```jsx - -``` - -Note that `widths` and `loaderOptions` have now been deprecated, declaring `width` is no longer necessary, and we’ve added an `aspectRatio` prop: - -- `widths` is now calculated automatically based on a new `srcSetOptions` prop (see below for details). -- `loaderOptions` has been removed in favour of declaring `crop` and `src` as props. `width` and `height` should only be set as props if rendering a fixed image size, with `width` otherwise defaulting to `100%`, and the loader calculating each dynamically. -- `aspectRatio` is calculated automatically using `data.width` and `data.height` (if available) — but if you want to present an image with an aspect ratio other than what was uploaded, you can set using the format `Int/Int` (e.g. `3/2`, [see MDN docs for more info](https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio), note that you must use the _fraction_ style of declaring aspect ratio, decimals are not supported); if you've set an `aspectRatio`, we will default the crop to be `crop: center` (in the example above we've specified this to use `left` instead). - -### Examples - - - -#### Basic Usage - -```jsx - -``` - -This would use all default props, which if exhaustively declared would be the same as typing: - -```jsx - -``` - -An alternative way to write this without using `data` would be to use the `src`, `alt`, and `aspectRatio` props. For example: - -```jsx -{data.altText} -``` - -Assuming `data` had the following shape: - -```json -{ - "url": "https://cdn.shopify.com/s/files/1/0551/4566/0472/products/Main.jpg", - "altText": "alt text", - "width": "4000", - "height": "4000" -} -``` - -All three above examples would result in the following HTML: - -```html -alt text -``` - -#### Fixed-size Images - -When using images that are meant to be a fixed size, like showing a preview image of a product in the cart, instead of using `aspectRatio`, you'll instead declare `width` and `height` manually with fixed values. For example: - -```jsx - -``` - -Instead of generating 15 images for a broad range of screen sizes, `Image` will instead only generate 3, for various screen pixel densities (1x, 2x, and 3x). The above example would result in the following HTML: - -```html -alt text -``` - -If you don't want to have a fixed aspect ratio, and instead respect whatever is returned from your query, the following syntax can also be used: - -```jsx - -``` - -Which would result in the same HTML as above, however the generated URLs inside the `src` and `srcset` attributes would not have `height` or `crop` parameters appended to them, and the generated `aspect-ratio` in `style` would be `4000 / 4000` (if using the same `data` values as our original example). - -#### Custom Loaders - -If your image isn't coming from the Storefront API, but you still want to take advantage of the `Image` component, you can pass a custom `loader` prop, provided the CDN you're working with supports URL-based transformations. - -The `loader` is a function which expects a `params` argument of the following type: - -```ts -type LoaderParams = { - /** The base URL of the image */ - src?: ImageType['url']; - /** The URL param that controls width */ - width?: number; - /** The URL param that controls height */ - height?: number; - /** The URL param that controls the cropping region */ - crop?: Crop; -}; -``` - -Here is an example of using `Image` with a custom loader function: - -```jsx -const customLoader = ({src, width, height, crop}) => { - return `${src}?w=${width}&h=${height}&gravity=${crop}`; -}; - -export default function CustomImage(props) { - ; -} - -// In Use: - -; -``` - -If your CDN happens to support the same semantics as Shopify (URL params of `width`, `height`, and `crop`) — the default loader will work a non-Shopify `src` attribute. - -An example output might look like: `https://mycdn.com/image.jpeg?width=100&height=100&crop=center` - -### Additional changes - -- Added the `srcSetOptions` prop used to create the image URLs used in `srcset`. It’s an object with the following keys and defaults: - - ```js - srcSetOptions = { - intervals: 15, // The number of sizes to generate - startingWidth: 200, // The smalles image size - incrementSize: 200, // The increment by to increase for each size, in pixesl - placeholderWidth: 100, // The size used for placeholder fallback images - }; - ``` - -- Added an export for `IMAGE_FRAGMENT`, which can be imported from Hydrogen and used in any Storefront API query, which will fetch the required fields needed by the component. - -- Added an export for `shopifyLoader` for using Storefront API responses in conjunction with alternative frameworks that already have their own `Image` component, like Next.js diff --git a/packages/cli/CHANGELOG.md b/packages/cli/CHANGELOG.md index 021f0f1970..9febe11e84 100644 --- a/packages/cli/CHANGELOG.md +++ b/packages/cli/CHANGELOG.md @@ -1,5 +1,14 @@ # @shopify/cli-hydrogen +## 5.0.0 + +### Patch Changes + +- Fix the `check routes` command to match optional segments. ([#774](https://github.com/Shopify/hydrogen/pull/774)) by [@frandiox](https://github.com/frandiox) + +- Updated dependencies [[`82b6af7`](https://github.com/Shopify/hydrogen/commit/82b6af71cafe1f88c24630178e61cd09e5a59f5e), [`361879e`](https://github.com/Shopify/hydrogen/commit/361879ee11dfe8f1ee916b022165b1e7f0e45964)]: + - @shopify/hydrogen-react@2024.0.0 + ## 4.1.0 ### Minor Changes diff --git a/packages/cli/oclif.manifest.json b/packages/cli/oclif.manifest.json index e35b0c969a..089a4a356d 100644 --- a/packages/cli/oclif.manifest.json +++ b/packages/cli/oclif.manifest.json @@ -1 +1 @@ -{"version":"4.1.0","commands":{"hydrogen:build":{"id":"hydrogen:build","description":"Builds a Hydrogen storefront for production.","strict":true,"pluginName":"@shopify/cli-hydrogen","pluginAlias":"@shopify/cli-hydrogen","pluginType":"core","aliases":[],"flags":{"path":{"name":"path","type":"option","description":"The path to the directory of the Hydrogen storefront. The default is the current directory.","multiple":false},"sourcemap":{"name":"sourcemap","type":"boolean","description":"Generate sourcemaps for the build.","allowNo":false},"disable-route-warning":{"name":"disable-route-warning","type":"boolean","description":"Disable warning about missing standard routes.","allowNo":false},"base":{"name":"base","type":"option","hidden":true,"multiple":false},"entry":{"name":"entry","type":"option","hidden":true,"multiple":false},"target":{"name":"target","type":"option","hidden":true,"multiple":false}},"args":[]},"hydrogen:check":{"id":"hydrogen:check","description":"Returns diagnostic information about a Hydrogen storefront.","strict":true,"pluginName":"@shopify/cli-hydrogen","pluginAlias":"@shopify/cli-hydrogen","pluginType":"core","aliases":[],"flags":{"path":{"name":"path","type":"option","description":"The path to the directory of the Hydrogen storefront. The default is the current directory.","multiple":false}},"args":[{"name":"resource","description":"The resource to check. Currently only 'routes' is supported.","required":true,"options":["routes"]}]},"hydrogen:dev":{"id":"hydrogen:dev","description":"Runs Hydrogen storefront in an Oxygen worker for development.","strict":true,"pluginName":"@shopify/cli-hydrogen","pluginAlias":"@shopify/cli-hydrogen","pluginType":"core","aliases":[],"flags":{"path":{"name":"path","type":"option","description":"The path to the directory of the Hydrogen storefront. The default is the current directory.","multiple":false},"port":{"name":"port","type":"option","description":"Port to run the server on.","multiple":false,"default":3000},"disable-virtual-routes":{"name":"disable-virtual-routes","type":"boolean","description":"Disable rendering fallback routes when a route file doesn't exist","allowNo":false},"host":{"name":"host","type":"option","hidden":true,"multiple":false}},"args":[]},"hydrogen:g":{"id":"hydrogen:g","description":"Shortcut for `hydrogen generate`. See `hydrogen generate --help` for more information.","strict":false,"pluginName":"@shopify/cli-hydrogen","pluginAlias":"@shopify/cli-hydrogen","pluginType":"core","hidden":true,"aliases":[],"flags":{},"args":[]},"hydrogen:init":{"id":"hydrogen:init","description":"Creates a new Hydrogen storefront.","strict":true,"pluginName":"@shopify/cli-hydrogen","pluginAlias":"@shopify/cli-hydrogen","pluginType":"core","aliases":[],"flags":{"force":{"name":"force","type":"boolean","char":"f","description":"Overwrite the destination directory and files if they already exist.","allowNo":false},"path":{"name":"path","type":"option","description":"The path to the directory of the new Hydrogen storefront.","multiple":false},"language":{"name":"language","type":"option","description":"Sets the template language to use. One of `js` or `ts`.","multiple":false},"template":{"name":"template","type":"option","description":"Sets the template to use. One of `demo-store` or `hello-world`.","multiple":false},"install-deps":{"name":"install-deps","type":"boolean","description":"Auto install dependencies using the active package manager","allowNo":true}},"args":[]},"hydrogen:preview":{"id":"hydrogen:preview","description":"Runs a Hydrogen storefront in an Oxygen worker for production.","strict":true,"pluginName":"@shopify/cli-hydrogen","pluginAlias":"@shopify/cli-hydrogen","pluginType":"core","aliases":[],"flags":{"path":{"name":"path","type":"option","description":"The path to the directory of the Hydrogen storefront. The default is the current directory.","multiple":false},"port":{"name":"port","type":"option","description":"Port to run the server on.","multiple":false,"default":3000}},"args":[]},"hydrogen:shortcut":{"id":"hydrogen:shortcut","description":"Creates a global `h2` shortcut for the Hydrogen CLI","strict":true,"pluginName":"@shopify/cli-hydrogen","pluginAlias":"@shopify/cli-hydrogen","pluginType":"core","aliases":[],"flags":{},"args":[]},"hydrogen:generate:route":{"id":"hydrogen:generate:route","description":"Generates a standard Shopify route.","strict":true,"pluginName":"@shopify/cli-hydrogen","pluginAlias":"@shopify/cli-hydrogen","pluginType":"core","aliases":[],"flags":{"adapter":{"name":"adapter","type":"option","description":"Remix adapter used in the route. The default is `@shopify/remix-oxygen`.","multiple":false},"typescript":{"name":"typescript","type":"boolean","description":"Generate TypeScript files","allowNo":false},"force":{"name":"force","type":"boolean","char":"f","description":"Overwrite the destination directory and files if they already exist.","allowNo":false},"path":{"name":"path","type":"option","description":"The path to the directory of the Hydrogen storefront. The default is the current directory.","multiple":false}},"args":[{"name":"route","description":"The route to generate. One of home,page,cart,products,collections,policies,robots,sitemap,account,all.","required":true,"options":["home","page","cart","products","collections","policies","robots","sitemap","account","all"]}]},"hydrogen:generate:routes":{"id":"hydrogen:generate:routes","description":"Generates all supported standard shopify routes.","strict":true,"pluginName":"@shopify/cli-hydrogen","pluginAlias":"@shopify/cli-hydrogen","pluginType":"core","aliases":[],"flags":{"adapter":{"name":"adapter","type":"option","description":"Remix adapter used in the route. The default is `@shopify/remix-oxygen`.","multiple":false},"typescript":{"name":"typescript","type":"boolean","description":"Generate TypeScript files","allowNo":false},"force":{"name":"force","type":"boolean","char":"f","description":"Overwrite the destination directory and files if they already exist.","allowNo":false},"path":{"name":"path","type":"option","description":"The path to the directory of the Hydrogen storefront. The default is the current directory.","multiple":false}},"args":[]}}} \ No newline at end of file +{"version":"5.0.0","commands":{"hydrogen:build":{"id":"hydrogen:build","description":"Builds a Hydrogen storefront for production.","strict":true,"pluginName":"@shopify/cli-hydrogen","pluginAlias":"@shopify/cli-hydrogen","pluginType":"core","aliases":[],"flags":{"path":{"name":"path","type":"option","description":"The path to the directory of the Hydrogen storefront. The default is the current directory.","multiple":false},"sourcemap":{"name":"sourcemap","type":"boolean","description":"Generate sourcemaps for the build.","allowNo":false},"disable-route-warning":{"name":"disable-route-warning","type":"boolean","description":"Disable warning about missing standard routes.","allowNo":false},"base":{"name":"base","type":"option","hidden":true,"multiple":false},"entry":{"name":"entry","type":"option","hidden":true,"multiple":false},"target":{"name":"target","type":"option","hidden":true,"multiple":false}},"args":[]},"hydrogen:check":{"id":"hydrogen:check","description":"Returns diagnostic information about a Hydrogen storefront.","strict":true,"pluginName":"@shopify/cli-hydrogen","pluginAlias":"@shopify/cli-hydrogen","pluginType":"core","aliases":[],"flags":{"path":{"name":"path","type":"option","description":"The path to the directory of the Hydrogen storefront. The default is the current directory.","multiple":false}},"args":[{"name":"resource","description":"The resource to check. Currently only 'routes' is supported.","required":true,"options":["routes"]}]},"hydrogen:dev":{"id":"hydrogen:dev","description":"Runs Hydrogen storefront in an Oxygen worker for development.","strict":true,"pluginName":"@shopify/cli-hydrogen","pluginAlias":"@shopify/cli-hydrogen","pluginType":"core","aliases":[],"flags":{"path":{"name":"path","type":"option","description":"The path to the directory of the Hydrogen storefront. The default is the current directory.","multiple":false},"port":{"name":"port","type":"option","description":"Port to run the server on.","multiple":false,"default":3000},"disable-virtual-routes":{"name":"disable-virtual-routes","type":"boolean","description":"Disable rendering fallback routes when a route file doesn't exist","allowNo":false},"host":{"name":"host","type":"option","hidden":true,"multiple":false}},"args":[]},"hydrogen:g":{"id":"hydrogen:g","description":"Shortcut for `hydrogen generate`. See `hydrogen generate --help` for more information.","strict":false,"pluginName":"@shopify/cli-hydrogen","pluginAlias":"@shopify/cli-hydrogen","pluginType":"core","hidden":true,"aliases":[],"flags":{},"args":[]},"hydrogen:init":{"id":"hydrogen:init","description":"Creates a new Hydrogen storefront.","strict":true,"pluginName":"@shopify/cli-hydrogen","pluginAlias":"@shopify/cli-hydrogen","pluginType":"core","aliases":[],"flags":{"force":{"name":"force","type":"boolean","char":"f","description":"Overwrite the destination directory and files if they already exist.","allowNo":false},"path":{"name":"path","type":"option","description":"The path to the directory of the new Hydrogen storefront.","multiple":false},"language":{"name":"language","type":"option","description":"Sets the template language to use. One of `js` or `ts`.","multiple":false},"template":{"name":"template","type":"option","description":"Sets the template to use. One of `demo-store` or `hello-world`.","multiple":false},"install-deps":{"name":"install-deps","type":"boolean","description":"Auto install dependencies using the active package manager","allowNo":true}},"args":[]},"hydrogen:preview":{"id":"hydrogen:preview","description":"Runs a Hydrogen storefront in an Oxygen worker for production.","strict":true,"pluginName":"@shopify/cli-hydrogen","pluginAlias":"@shopify/cli-hydrogen","pluginType":"core","aliases":[],"flags":{"path":{"name":"path","type":"option","description":"The path to the directory of the Hydrogen storefront. The default is the current directory.","multiple":false},"port":{"name":"port","type":"option","description":"Port to run the server on.","multiple":false,"default":3000}},"args":[]},"hydrogen:shortcut":{"id":"hydrogen:shortcut","description":"Creates a global `h2` shortcut for the Hydrogen CLI","strict":true,"pluginName":"@shopify/cli-hydrogen","pluginAlias":"@shopify/cli-hydrogen","pluginType":"core","aliases":[],"flags":{},"args":[]},"hydrogen:generate:route":{"id":"hydrogen:generate:route","description":"Generates a standard Shopify route.","strict":true,"pluginName":"@shopify/cli-hydrogen","pluginAlias":"@shopify/cli-hydrogen","pluginType":"core","aliases":[],"flags":{"adapter":{"name":"adapter","type":"option","description":"Remix adapter used in the route. The default is `@shopify/remix-oxygen`.","multiple":false},"typescript":{"name":"typescript","type":"boolean","description":"Generate TypeScript files","allowNo":false},"force":{"name":"force","type":"boolean","char":"f","description":"Overwrite the destination directory and files if they already exist.","allowNo":false},"path":{"name":"path","type":"option","description":"The path to the directory of the Hydrogen storefront. The default is the current directory.","multiple":false}},"args":[{"name":"route","description":"The route to generate. One of home,page,cart,products,collections,policies,robots,sitemap,account,all.","required":true,"options":["home","page","cart","products","collections","policies","robots","sitemap","account","all"]}]},"hydrogen:generate:routes":{"id":"hydrogen:generate:routes","description":"Generates all supported standard shopify routes.","strict":true,"pluginName":"@shopify/cli-hydrogen","pluginAlias":"@shopify/cli-hydrogen","pluginType":"core","aliases":[],"flags":{"adapter":{"name":"adapter","type":"option","description":"Remix adapter used in the route. The default is `@shopify/remix-oxygen`.","multiple":false},"typescript":{"name":"typescript","type":"boolean","description":"Generate TypeScript files","allowNo":false},"force":{"name":"force","type":"boolean","char":"f","description":"Overwrite the destination directory and files if they already exist.","allowNo":false},"path":{"name":"path","type":"option","description":"The path to the directory of the Hydrogen storefront. The default is the current directory.","multiple":false}},"args":[]}}} \ No newline at end of file diff --git a/packages/cli/package.json b/packages/cli/package.json index e75fa30121..1e0abaf56b 100644 --- a/packages/cli/package.json +++ b/packages/cli/package.json @@ -4,7 +4,7 @@ "access": "public", "@shopify:registry": "https://registry.npmjs.org" }, - "version": "4.1.0", + "version": "5.0.0", "license": "SEE LICENSE IN LICENSE.md", "type": "module", "scripts": { @@ -27,7 +27,7 @@ }, "peerDependencies": { "@remix-run/react": "^1.15.0", - "@shopify/hydrogen-react": "^2023.1.8", + "@shopify/hydrogen-react": "^2024.0.0", "@shopify/remix-oxygen": "^1.0.5" }, "dependencies": { diff --git a/packages/create-hydrogen/CHANGELOG.md b/packages/create-hydrogen/CHANGELOG.md index 6f221d321e..83aebdaf42 100644 --- a/packages/create-hydrogen/CHANGELOG.md +++ b/packages/create-hydrogen/CHANGELOG.md @@ -1,5 +1,12 @@ # @shopify/create-hydrogen +## 4.1.1 + +### Patch Changes + +- Updated dependencies [[`2039a4a`](https://github.com/Shopify/hydrogen/commit/2039a4a534cf75ebcf39bab6d2f95a535bb5d390)]: + - @shopify/cli-hydrogen@5.0.0 + ## 4.1.0 ### Minor Changes diff --git a/packages/create-hydrogen/package.json b/packages/create-hydrogen/package.json index 88ea4a2111..b2c69cd6bc 100644 --- a/packages/create-hydrogen/package.json +++ b/packages/create-hydrogen/package.json @@ -5,7 +5,7 @@ "@shopify:registry": "https://registry.npmjs.org" }, "license": "SEE LICENSE IN LICENSE.md", - "version": "4.1.0", + "version": "4.1.1", "type": "module", "scripts": { "build": "tsup --clean --config ./tsup.config.ts", @@ -13,7 +13,7 @@ "typecheck": "tsc --noEmit" }, "dependencies": { - "@shopify/cli-hydrogen": "^4.1.0" + "@shopify/cli-hydrogen": "^5.0.0" }, "bin": "dist/create-app.js", "files": [ diff --git a/packages/hydrogen-react/CHANGELOG.md b/packages/hydrogen-react/CHANGELOG.md index b7d79a5b7f..73bbf5267d 100644 --- a/packages/hydrogen-react/CHANGELOG.md +++ b/packages/hydrogen-react/CHANGELOG.md @@ -1,5 +1,200 @@ # @shopify/hydrogen-react +## 2024.0.0 + +### Major Changes + +- Releases 2023-04 ([#797](https://github.com/Shopify/hydrogen/pull/797)) by [@github-actions](https://github.com/apps/github-actions) + +- Adds a new `Image` component, replacing the existing one. While your existing implementation won't break, props `widths` and `loaderOptions` are now deprecated disregarded, with a new `aspectRatio` prop added. ([#787](https://github.com/Shopify/hydrogen/pull/787)) by [@benjaminsehl](https://github.com/benjaminsehl) + + ### Migrating to the new `Image` + + The new `Image` component is responsive by default, and requires less configuration to ensure the right image size is being rendered on all screen sizes. + + **Before** + + ```jsx + + ``` + + **After** + + ```jsx + + ``` + + Note that `widths` and `loaderOptions` have now been deprecated, declaring `width` is no longer necessary, and we’ve added an `aspectRatio` prop: + + - `widths` is now calculated automatically based on a new `srcSetOptions` prop (see below for details). + - `loaderOptions` has been removed in favour of declaring `crop` and `src` as props. `width` and `height` should only be set as props if rendering a fixed image size, with `width` otherwise defaulting to `100%`, and the loader calculating each dynamically. + - `aspectRatio` is calculated automatically using `data.width` and `data.height` (if available) — but if you want to present an image with an aspect ratio other than what was uploaded, you can set using the format `Int/Int` (e.g. `3/2`, [see MDN docs for more info](https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio), note that you must use the _fraction_ style of declaring aspect ratio, decimals are not supported); if you've set an `aspectRatio`, we will default the crop to be `crop: center` (in the example above we've specified this to use `left` instead). + + ### Examples + + + + #### Basic Usage + + ```jsx + + ``` + + This would use all default props, which if exhaustively declared would be the same as typing: + + ```jsx + + ``` + + An alternative way to write this without using `data` would be to use the `src`, `alt`, and `aspectRatio` props. For example: + + ```jsx + {data.altText} + ``` + + Assuming `data` had the following shape: + + ```json + { + "url": "https://cdn.shopify.com/s/files/1/0551/4566/0472/products/Main.jpg", + "altText": "alt text", + "width": "4000", + "height": "4000" + } + ``` + + All three above examples would result in the following HTML: + + ```html + alt text + ``` + + #### Fixed-size Images + + When using images that are meant to be a fixed size, like showing a preview image of a product in the cart, instead of using `aspectRatio`, you'll instead declare `width` and `height` manually with fixed values. For example: + + ```jsx + + ``` + + Instead of generating 15 images for a broad range of screen sizes, `Image` will instead only generate 3, for various screen pixel densities (1x, 2x, and 3x). The above example would result in the following HTML: + + ```html + alt text + ``` + + If you don't want to have a fixed aspect ratio, and instead respect whatever is returned from your query, the following syntax can also be used: + + ```jsx + + ``` + + Which would result in the same HTML as above, however the generated URLs inside the `src` and `srcset` attributes would not have `height` or `crop` parameters appended to them, and the generated `aspect-ratio` in `style` would be `4000 / 4000` (if using the same `data` values as our original example). + + #### Custom Loaders + + If your image isn't coming from the Storefront API, but you still want to take advantage of the `Image` component, you can pass a custom `loader` prop, provided the CDN you're working with supports URL-based transformations. + + The `loader` is a function which expects a `params` argument of the following type: + + ```ts + type LoaderParams = { + /** The base URL of the image */ + src?: ImageType['url']; + /** The URL param that controls width */ + width?: number; + /** The URL param that controls height */ + height?: number; + /** The URL param that controls the cropping region */ + crop?: Crop; + }; + ``` + + Here is an example of using `Image` with a custom loader function: + + ```jsx + const customLoader = ({src, width, height, crop}) => { + return `${src}?w=${width}&h=${height}&gravity=${crop}`; + }; + + export default function CustomImage(props) { + ; + } + + // In Use: + + ; + ``` + + If your CDN happens to support the same semantics as Shopify (URL params of `width`, `height`, and `crop`) — the default loader will work a non-Shopify `src` attribute. + + An example output might look like: `https://mycdn.com/image.jpeg?width=100&height=100&crop=center` + + ### Additional changes + + - Added the `srcSetOptions` prop used to create the image URLs used in `srcset`. It’s an object with the following keys and defaults: + + ```js + srcSetOptions = { + intervals: 15, // The number of sizes to generate + startingWidth: 200, // The smalles image size + incrementSize: 200, // The increment by to increase for each size, in pixesl + placeholderWidth: 100, // The size used for placeholder fallback images + }; + ``` + + - Added an export for `IMAGE_FRAGMENT`, which can be imported from Hydrogen and used in any Storefront API query, which will fetch the required fields needed by the component. + + - Added an export for `shopifyLoader` for using Storefront API responses in conjunction with alternative frameworks that already have their own `Image` component, like Next.js + ## 2023.1.8 ### Patch Changes diff --git a/packages/hydrogen-react/package.json b/packages/hydrogen-react/package.json index 5742dbd834..4db55d63d5 100644 --- a/packages/hydrogen-react/package.json +++ b/packages/hydrogen-react/package.json @@ -1,6 +1,6 @@ { "name": "@shopify/hydrogen-react", - "version": "2023.1.8", + "version": "2024.0.0", "description": "React components, hooks, and utilities for creating custom Shopify storefronts", "homepage": "https://github.com/Shopify/hydrogen/tree/main/packages/hydrogen-react", "license": "MIT", diff --git a/packages/hydrogen/CHANGELOG.md b/packages/hydrogen/CHANGELOG.md index 1c95d244c8..cc12606aae 100644 --- a/packages/hydrogen/CHANGELOG.md +++ b/packages/hydrogen/CHANGELOG.md @@ -1,5 +1,205 @@ # @shopify/hydrogen +## 2024.0.0 + +### Major Changes + +- Releases 2023-04 ([#797](https://github.com/Shopify/hydrogen/pull/797)) by [@github-actions](https://github.com/apps/github-actions) + +- Adds a new `Image` component, replacing the existing one. While your existing implementation won't break, props `widths` and `loaderOptions` are now deprecated disregarded, with a new `aspectRatio` prop added. ([#787](https://github.com/Shopify/hydrogen/pull/787)) by [@benjaminsehl](https://github.com/benjaminsehl) + + ### Migrating to the new `Image` + + The new `Image` component is responsive by default, and requires less configuration to ensure the right image size is being rendered on all screen sizes. + + **Before** + + ```jsx + + ``` + + **After** + + ```jsx + + ``` + + Note that `widths` and `loaderOptions` have now been deprecated, declaring `width` is no longer necessary, and we’ve added an `aspectRatio` prop: + + - `widths` is now calculated automatically based on a new `srcSetOptions` prop (see below for details). + - `loaderOptions` has been removed in favour of declaring `crop` and `src` as props. `width` and `height` should only be set as props if rendering a fixed image size, with `width` otherwise defaulting to `100%`, and the loader calculating each dynamically. + - `aspectRatio` is calculated automatically using `data.width` and `data.height` (if available) — but if you want to present an image with an aspect ratio other than what was uploaded, you can set using the format `Int/Int` (e.g. `3/2`, [see MDN docs for more info](https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio), note that you must use the _fraction_ style of declaring aspect ratio, decimals are not supported); if you've set an `aspectRatio`, we will default the crop to be `crop: center` (in the example above we've specified this to use `left` instead). + + ### Examples + + + + #### Basic Usage + + ```jsx + + ``` + + This would use all default props, which if exhaustively declared would be the same as typing: + + ```jsx + + ``` + + An alternative way to write this without using `data` would be to use the `src`, `alt`, and `aspectRatio` props. For example: + + ```jsx + {data.altText} + ``` + + Assuming `data` had the following shape: + + ```json + { + "url": "https://cdn.shopify.com/s/files/1/0551/4566/0472/products/Main.jpg", + "altText": "alt text", + "width": "4000", + "height": "4000" + } + ``` + + All three above examples would result in the following HTML: + + ```html + alt text + ``` + + #### Fixed-size Images + + When using images that are meant to be a fixed size, like showing a preview image of a product in the cart, instead of using `aspectRatio`, you'll instead declare `width` and `height` manually with fixed values. For example: + + ```jsx + + ``` + + Instead of generating 15 images for a broad range of screen sizes, `Image` will instead only generate 3, for various screen pixel densities (1x, 2x, and 3x). The above example would result in the following HTML: + + ```html + alt text + ``` + + If you don't want to have a fixed aspect ratio, and instead respect whatever is returned from your query, the following syntax can also be used: + + ```jsx + + ``` + + Which would result in the same HTML as above, however the generated URLs inside the `src` and `srcset` attributes would not have `height` or `crop` parameters appended to them, and the generated `aspect-ratio` in `style` would be `4000 / 4000` (if using the same `data` values as our original example). + + #### Custom Loaders + + If your image isn't coming from the Storefront API, but you still want to take advantage of the `Image` component, you can pass a custom `loader` prop, provided the CDN you're working with supports URL-based transformations. + + The `loader` is a function which expects a `params` argument of the following type: + + ```ts + type LoaderParams = { + /** The base URL of the image */ + src?: ImageType['url']; + /** The URL param that controls width */ + width?: number; + /** The URL param that controls height */ + height?: number; + /** The URL param that controls the cropping region */ + crop?: Crop; + }; + ``` + + Here is an example of using `Image` with a custom loader function: + + ```jsx + const customLoader = ({src, width, height, crop}) => { + return `${src}?w=${width}&h=${height}&gravity=${crop}`; + }; + + export default function CustomImage(props) { + ; + } + + // In Use: + + ; + ``` + + If your CDN happens to support the same semantics as Shopify (URL params of `width`, `height`, and `crop`) — the default loader will work a non-Shopify `src` attribute. + + An example output might look like: `https://mycdn.com/image.jpeg?width=100&height=100&crop=center` + + ### Additional changes + + - Added the `srcSetOptions` prop used to create the image URLs used in `srcset`. It’s an object with the following keys and defaults: + + ```js + srcSetOptions = { + intervals: 15, // The number of sizes to generate + startingWidth: 200, // The smalles image size + incrementSize: 200, // The increment by to increase for each size, in pixesl + placeholderWidth: 100, // The size used for placeholder fallback images + }; + ``` + + - Added an export for `IMAGE_FRAGMENT`, which can be imported from Hydrogen and used in any Storefront API query, which will fetch the required fields needed by the component. + + - Added an export for `shopifyLoader` for using Storefront API responses in conjunction with alternative frameworks that already have their own `Image` component, like Next.js + +### Patch Changes + +- Updated dependencies [[`82b6af7`](https://github.com/Shopify/hydrogen/commit/82b6af71cafe1f88c24630178e61cd09e5a59f5e), [`361879e`](https://github.com/Shopify/hydrogen/commit/361879ee11dfe8f1ee916b022165b1e7f0e45964)]: + - @shopify/hydrogen-react@2024.0.0 + ## 2023.1.7 ### Patch Changes diff --git a/packages/hydrogen/package.json b/packages/hydrogen/package.json index 0206e9e8eb..3e6c4363b7 100644 --- a/packages/hydrogen/package.json +++ b/packages/hydrogen/package.json @@ -5,7 +5,7 @@ "@shopify:registry": "https://registry.npmjs.org" }, "type": "module", - "version": "2023.1.7", + "version": "2024.0.0", "license": "SEE LICENSE IN LICENSE.md", "main": "dist/index.cjs", "module": "dist/production/index.js", @@ -52,7 +52,7 @@ "dist" ], "dependencies": { - "@shopify/hydrogen-react": "2023.1.8", + "@shopify/hydrogen-react": "2024.0.0", "react": "^18.2.0" }, "peerDependencies": { diff --git a/packages/hydrogen/src/version.ts b/packages/hydrogen/src/version.ts index 7aa71f2711..ba9399663c 100644 --- a/packages/hydrogen/src/version.ts +++ b/packages/hydrogen/src/version.ts @@ -1 +1 @@ -export const LIB_VERSION = '2023.1.7'; +export const LIB_VERSION = '2024.0.0'; diff --git a/templates/demo-store/CHANGELOG.md b/templates/demo-store/CHANGELOG.md index 64ea487559..c74c4d103c 100644 --- a/templates/demo-store/CHANGELOG.md +++ b/templates/demo-store/CHANGELOG.md @@ -1,5 +1,13 @@ # demo-store +## 0.2.1 + +### Patch Changes + +- Updated dependencies [[`2039a4a`](https://github.com/Shopify/hydrogen/commit/2039a4a534cf75ebcf39bab6d2f95a535bb5d390), [`82b6af7`](https://github.com/Shopify/hydrogen/commit/82b6af71cafe1f88c24630178e61cd09e5a59f5e), [`361879e`](https://github.com/Shopify/hydrogen/commit/361879ee11dfe8f1ee916b022165b1e7f0e45964)]: + - @shopify/cli-hydrogen@5.0.0 + - @shopify/hydrogen@2024.0.0 + ## 0.2.0 ### Minor Changes diff --git a/templates/demo-store/package.json b/templates/demo-store/package.json index 299fca59f5..3fc0f26fce 100644 --- a/templates/demo-store/package.json +++ b/templates/demo-store/package.json @@ -2,7 +2,7 @@ "name": "demo-store", "private": true, "sideEffects": false, - "version": "0.2.0", + "version": "0.2.1", "scripts": { "dev": "shopify hydrogen dev", "build": "shopify hydrogen build", @@ -20,8 +20,8 @@ "@headlessui/react": "^1.7.2", "@remix-run/react": "1.15.0", "@shopify/cli": "3.45.0", - "@shopify/cli-hydrogen": "^4.1.0", - "@shopify/hydrogen": "^2023.1.7", + "@shopify/cli-hydrogen": "^5.0.0", + "@shopify/hydrogen": "^2024.0.0", "@shopify/remix-oxygen": "^1.0.5", "clsx": "^1.2.1", "cross-env": "^7.0.3", diff --git a/templates/hello-world/package.json b/templates/hello-world/package.json index c3d5b1220c..7141b5fcd8 100644 --- a/templates/hello-world/package.json +++ b/templates/hello-world/package.json @@ -15,8 +15,8 @@ "dependencies": { "@remix-run/react": "1.15.0", "@shopify/cli": "3.45.0", - "@shopify/cli-hydrogen": "^4.1.0", - "@shopify/hydrogen": "^2023.1.7", + "@shopify/cli-hydrogen": "^5.0.0", + "@shopify/hydrogen": "^2024.0.0", "@shopify/remix-oxygen": "^1.0.5", "graphql": "^16.6.0", "graphql-tag": "^2.12.6", diff --git a/templates/skeleton/package.json b/templates/skeleton/package.json index 13c2f2e345..8f80e5db16 100644 --- a/templates/skeleton/package.json +++ b/templates/skeleton/package.json @@ -14,8 +14,8 @@ "dependencies": { "@remix-run/react": "1.15.0", "@shopify/cli": "3.45.0", - "@shopify/cli-hydrogen": "^4.1.0", - "@shopify/hydrogen": "^2023.1.7", + "@shopify/cli-hydrogen": "^5.0.0", + "@shopify/hydrogen": "^2024.0.0", "@shopify/remix-oxygen": "^1.0.5", "graphql": "^16.6.0", "graphql-tag": "^2.12.6",