diff --git a/.changeset/angry-months-pay.md b/.changeset/angry-months-pay.md deleted file mode 100644 index 080e84229b..0000000000 --- a/.changeset/angry-months-pay.md +++ /dev/null @@ -1,51 +0,0 @@ ---- -'demo-store': patch ---- - -Adopt Remix [`v2_meta`](https://remix.run/docs/en/main/route/meta#metav2) future flag - -### `v2_meta` migration steps - -1. For any routes that you used `meta` route export, convert it to the `V2_MetaFunction` equivalent. Notice that the package name in the import statement has also changed to `'@remix-run/react'`: - - ```diff - - import {type MetaFunction} from '@shopify/remix-oxygen'; - + import {type V2_MetaFunction} from '@remix-run/react'; - - - export const meta: MetaFunction = () => { - + export const meta: V2_MetaFunction = () => { - - return {title: 'Login'}; - + return [{title: 'Login'}]; - }; - ``` - -2. If you are using data from loaders, pass the loader type to the `V2_MetaFunction` generic: - - ```diff - - export const meta: MetaFunction = ({data}) => { - + export const meta: V2_MetaFunction = ({data}) => { - - return {title: `Order ${data?.order?.name}`}; - + return [{title: `Order ${data?.order?.name}`}]; - }; - ``` - -3. If you are using `meta` route export in `root`, convert it to [Global Meta](https://remix.run/docs/en/main/route/meta#global-meta) - - ```diff - // app/root.tsx - - - export const meta: MetaFunction = () => ({ - - charset: 'utf-8', - - viewport: 'width=device-width,initial-scale=1', - - }); - - export default function App() { - - return ( - - - + - + - - - ``` diff --git a/.changeset/clever-buses-cry.md b/.changeset/clever-buses-cry.md deleted file mode 100644 index b153019048..0000000000 --- a/.changeset/clever-buses-cry.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'@shopify/cli-hydrogen': patch ---- - -Add support for the Remix future flags `v2_meta`, `v2_errorBoundary` and `v2_routeConvention` to the `generate` command. If these flags are enabled in your project, the new generated files will follow the v2 conventions. diff --git a/.changeset/dry-snails-relax.md b/.changeset/dry-snails-relax.md deleted file mode 100644 index c745ae11b7..0000000000 --- a/.changeset/dry-snails-relax.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'@shopify/hydrogen-react': patch ---- - -Fix `parseGid()` to return a query string if it was a part of the original GID. diff --git a/.changeset/early-jobs-fail.md b/.changeset/early-jobs-fail.md deleted file mode 100644 index 3786638f99..0000000000 --- a/.changeset/early-jobs-fail.md +++ /dev/null @@ -1,118 +0,0 @@ ---- -'demo-store': patch ---- - -Adopt `v2_routeConvention` future flag - -## `v2_routeConventions` migration steps - -Remix v2 route conventions are just file renames. We just need to ensure when changing file name and file location, the import paths of other files are also updated. - -Go to Remix docs for more details on the [V2 route convention](https://remix.run/docs/en/main/file-conventions/route-files-v2). - -Rename and move the following files in the `routes` folder to adopt to V2 route convention. - - - - - - - - - - -
BeforeAfter (V2 route convention)
- -```txt -app/routes/ - ├─ [sitemap.xml].tsx - ├─ [robots.txt].tsx - └─ ($lang)/ - ├─ $shopid/orders/$token/ - │ └─ authenticate.tsx - ├─ account/ - │ ├─ __private/ - │ │ ├─ address/ - │ │ │ └─ $id.tsx - │ │ ├─ orders.$id.tsx - │ │ ├─ edit.tsx - │ │ └─ logout.ts - │ └─ __public/ - │ ├─ recover.tsx - │ ├─ login.tsx - │ ├─ register.tsx - │ ├─ activate.$id.$activationToken.tsx - │ └─ reset.$id.$resetToken.tsx - ├─ api/ - │ ├─ countries.tsx - │ └─ products.tsx - ├─ collections/ - │ ├─ index.tsx - │ ├─ $collectionHandle.tsx - │ └─ all.tsx - ├─ journal/ - │ ├─ index.tsx - │ └─ $journalHandle.tsx - ├─ pages - │ └─ $pageHandle.tsx - ├─ policies/ - │ ├─ index.tsx - │ └─ $policyHandle.tsx - ├─ products/ - │ ├─ index.tsx - │ └─ $productHandle.tsx - ├─ $.tsx - ├─ account.tsx - ├─ cart.tsx - ├─ cart.$lines.tsx - ├─ discount.$code.tsx - ├─ featured-products.tsx - ├─ index.tsx - └─ search.tsx -``` - - - -```txt -app/routes/ - ├─ [sitemap.xml].tsx - ├─ [robots.txt].tsx - ├─ ($lang).$shopid.orders.$token.authenticate.tsx - ├─ ($lang).account.address.$id.tsx - ├─ ($lang).account.orders.$id.tsx - ├─ ($lang).account.edit.tsx - ├─ ($lang).account.logout.ts - ├─ ($lang).account.recover.tsx - ├─ ($lang).account.login.tsx - ├─ ($lang).account.register.tsx - ├─ ($lang).account.activate.$id.$activationToken.tsx - ├─ ($lang).account.reset.$id.$resetToken.tsx - ├─ ($lang).api.countries.tsx - ├─ ($lang).api.products.tsx - ├─ ($lang).collections._index.tsx - ├─ ($lang).collections.$collectionHandle.tsx - ├─ ($lang).collections.all.tsx - ├─ ($lang).journal._index.tsx - ├─ ($lang).journal.$journalHandle.tsx - ├─ ($lang).pages.$pageHandle.tsx - ├─ ($lang).policies._index.tsx - ├─ ($lang).policies.$policyHandle.tsx - ├─ ($lang).products._index.tsx - ├─ ($lang).products.$productHandle.tsx - ├─ $.tsx - ├─ ($lang)._index.tsx - ├─ ($lang).account.tsx - ├─ ($lang).cart.tsx - ├─ ($lang).cart.$lines.tsx - ├─ ($lang).discount.$code.tsx - ├─ ($lang).featured-products.tsx - └─ ($lang).search.tsx -``` - -
- -### Optional - -If you want to continue using nested folder routes but have the `v2_routeConvention` flag turned on, you may consider using the npm package [`@remix-run/v1-route-convention`](https://www.npmjs.com/package/@remix-run/v1-route-convention). - -If you like the flat route convention but still wants a hybrid style of nested route folder, you may consider using the npm package [`remix-flat-routes`](https://www.npmjs.com/package/remix-flat-routes) diff --git a/.changeset/famous-candles-begin.md b/.changeset/famous-candles-begin.md deleted file mode 100644 index f96b2aaab1..0000000000 --- a/.changeset/famous-candles-begin.md +++ /dev/null @@ -1,37 +0,0 @@ ---- -'demo-store': patch ---- - -Adopt Remix [`unstable_tailwind`](https://remix.run/docs/en/1.15.0/guides/styling#built-in-tailwind-support) and [`unstable_postcss`](https://remix.run/docs/en/1.15.0/guides/styling#built-in-postcss-support) future flags for the Demo Store template. - -### `unstable_tailwind` and `unstable_postcss` migration steps - -1. Move the file `/styles/app.css` to `/app/styles/app.css`, and remove it from `.gitignore`. - -2. Add `"browserslist": ["defaults"]` to your `package.json`, or your preferred [value from Browserslist](https://browsersl.ist/). - -3. Replace the `build` and `dev` scripts in your `package.json` with the following: - - **Before** - - ```json - "scripts": { - "build": "npm run build:css && shopify hydrogen build", - "build:css": "postcss styles --base styles --dir app/styles --env production", - "dev": "npm run build:css && concurrently -g --kill-others-on-fail -r npm:dev:css \"shopify hydrogen dev\"", - "dev:css": "postcss styles --base styles --dir app/styles -w", - ... - } - ``` - - **After** - - ```json - "scripts": { - "dev": "shopify hydrogen dev", - "build": "shopify hydrogen build", - ... - } - ``` - -You can also remove dependencies like `concurrently` if you don't use them anywhere else. diff --git a/.changeset/famous-eagles-rhyme.md b/.changeset/famous-eagles-rhyme.md deleted file mode 100644 index 55ee6efed3..0000000000 --- a/.changeset/famous-eagles-rhyme.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'@shopify/cli-hydrogen': patch ---- - -Update virtual route to use Remix V2 route name conventions diff --git a/.changeset/few-yaks-admire.md b/.changeset/few-yaks-admire.md deleted file mode 100644 index 22e19a1eac..0000000000 --- a/.changeset/few-yaks-admire.md +++ /dev/null @@ -1,18 +0,0 @@ ---- -'@shopify/hydrogen-react': patch ---- - -Add the raw product returned from the Storefront API to also return from `useProduct()`: - -```ts -function SomeComponent() { - const {product} = useProduct(); - - return ( -
-

{product.title}

-

{product.description}

-
- ); -} -``` diff --git a/.changeset/gorgeous-seahorses-call.md b/.changeset/gorgeous-seahorses-call.md deleted file mode 100644 index 4f4ab9f64e..0000000000 --- a/.changeset/gorgeous-seahorses-call.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'demo-store': minor ---- - -Fix scroll issues on Product Detail Page for small screens diff --git a/.changeset/great-lamps-tell.md b/.changeset/great-lamps-tell.md deleted file mode 100644 index 1cdad83c16..0000000000 --- a/.changeset/great-lamps-tell.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'demo-store': patch ---- - -Forwards search params of `/discount/` route to a redirect route. diff --git a/.changeset/kind-countries-return.md b/.changeset/kind-countries-return.md deleted file mode 100644 index 9df42efbce..0000000000 --- a/.changeset/kind-countries-return.md +++ /dev/null @@ -1,7 +0,0 @@ ---- -'demo-store': patch ---- - -Carts created in liquid will soon be compatible with the Storefront API and vice versa, making it possible to share carts between channels. - -This change updates the Demo Store to use Online Store's `cart` cookie (instead of sessions) which prevents customers from losing carts when merchants migrate to/from Hydrogen. diff --git a/.changeset/red-wolves-brake.md b/.changeset/red-wolves-brake.md deleted file mode 100644 index ac5556e94a..0000000000 --- a/.changeset/red-wolves-brake.md +++ /dev/null @@ -1,13 +0,0 @@ ---- -'@shopify/hydrogen': patch -'@shopify/remix-oxygen': patch -'@shopify/cli-hydrogen': patch -'demo-store': patch ---- - -Bump internal Remix dependencies to 1.15.0. - -Recommendations to follow: - -- Upgrade all the Remix packages in your app to 1.15.0. -- Enable Remix v2 future flags at your earliest convenience following [the official guide](https://remix.run/docs/en/1.15.0/pages/v2). diff --git a/.changeset/six-ways-approve.md b/.changeset/six-ways-approve.md deleted file mode 100644 index 42ebe7eaff..0000000000 --- a/.changeset/six-ways-approve.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'demo-store': minor ---- - -Fix Layout title on mobile when title is long diff --git a/.changeset/small-elephants-jam.md b/.changeset/small-elephants-jam.md deleted file mode 100644 index d269510ce3..0000000000 --- a/.changeset/small-elephants-jam.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'@shopify/cli-hydrogen': patch ---- - -Improve type safety in SEO data generators. diff --git a/.changeset/swift-glasses-remain.md b/.changeset/swift-glasses-remain.md deleted file mode 100644 index 92bf4a5532..0000000000 --- a/.changeset/swift-glasses-remain.md +++ /dev/null @@ -1,52 +0,0 @@ ---- -'@shopify/hydrogen': patch ---- - -Add an experimental `createWithCache_unstable` utility, which creates a function similar to `useQuery` from Hydrogen v1. Use this utility to query third-party APIs and apply custom cache options. - -To setup the utility, update your `server.ts`: - -```js -import { - createStorefrontClient, - createWithCache_unstable, - CacheLong, -} from '@shopify/hydrogen'; - -// ... - - const cache = await caches.open('hydrogen'); - const withCache = createWithCache_unstable({cache, waitUntil}); - - // Create custom utilities to query third-party APIs: - const fetchMyCMS = (query) => { - // Prefix the cache key and make it unique based on arguments. - return withCache(['my-cms', query], CacheLong(), () => { - const cmsData = await (await fetch('my-cms.com/api', { - method: 'POST', - body: query - })).json(); - - const nextPage = (await fetch('my-cms.com/api', { - method: 'POST', - body: cmsData1.nextPageQuery, - })).json(); - - return {...cmsData, nextPage} - }); - }; - - const handleRequest = createRequestHandler({ - build: remixBuild, - mode: process.env.NODE_ENV, - getLoadContext: () => ({ - session, - waitUntil, - storefront, - env, - fetchMyCMS, - }), - }); -``` - -**Note:** The utility is unstable and subject to change before stabalizing in the 2023.04 release. diff --git a/.changeset/tender-plums-hang.md b/.changeset/tender-plums-hang.md deleted file mode 100644 index ea3d254dae..0000000000 --- a/.changeset/tender-plums-hang.md +++ /dev/null @@ -1,14 +0,0 @@ ---- -'@shopify/cli-hydrogen': minor -'@shopify/create-hydrogen': minor -'demo-store': patch ---- - -Updated CLI prompts. It's recommended to update your version of `@shopify/cli` to `3.45.0` when updating `@shopify/cli-hydrogen`. - -```diff -"dependencies": { -- "@shopify/cli": "3.x.x", -+ "@shopify/cli": "3.45.0", -} -``` diff --git a/.changeset/tidy-papayas-check.md b/.changeset/tidy-papayas-check.md deleted file mode 100644 index 63eefec37f..0000000000 --- a/.changeset/tidy-papayas-check.md +++ /dev/null @@ -1,99 +0,0 @@ ---- -'demo-store': patch ---- - -Adopt Remix [`v2_errorBoundary`](https://remix.run/docs/en/release-next/route/error-boundary-v2) future flag - -### `v2_errorBoundary` migration steps - -1. Remove all `CatchBoundary` route exports - -2. Handle route level errors with `ErrorBoundary` - - Before: - - ```jsx - // app/root.tsx - export function ErrorBoundary({error}: {error: Error}) { - const [root] = useMatches(); - const locale = root?.data?.selectedLocale ?? DEFAULT_LOCALE; - - return ( - - - Error - - - - - - - - - - - ); - } - ``` - - After: - - ```jsx - // app/root.tsx - import {isRouteErrorResponse, useRouteError} from '@remix-run/react'; - - export function ErrorBoundary({error}: {error: Error}) { - const [root] = useMatches(); - const locale = root?.data?.selectedLocale ?? DEFAULT_LOCALE; - const routeError = useRouteError(); - const isRouteError = isRouteErrorResponse(routeError); - - let title = 'Error'; - let pageType = 'page'; - - // We have an route error - if (isRouteError) { - title = 'Not found'; - - // We have a page not found error - if (routeError.status === 404) { - pageType = routeError.data || pageType; - } - } - - return ( - - - {title} - - - - - - {isRouteError ? ( - <> - {routeError.status === 404 ? ( - - ) : ( - - )} - - ) : ( - - )} - - - - - ); - } - ``` diff --git a/.changeset/tricky-llamas-call.md b/.changeset/tricky-llamas-call.md deleted file mode 100644 index 7d02737c91..0000000000 --- a/.changeset/tricky-llamas-call.md +++ /dev/null @@ -1,17 +0,0 @@ ---- -'@shopify/cli-hydrogen': minor ---- - -Added a new `shortcut` command that creates a global `h2` alias for the Hydrogen CLI: - -```sh -$> npx shopify hydrogen shortcut -``` - -After that, you can run commands using the new alias: - -```sh -$> h2 generate route home -$> h2 g r home # Same as the above -$> h2 check routes -``` diff --git a/packages/cli/CHANGELOG.md b/packages/cli/CHANGELOG.md index 43de5be3df..021f0f1970 100644 --- a/packages/cli/CHANGELOG.md +++ b/packages/cli/CHANGELOG.md @@ -1,5 +1,51 @@ # @shopify/cli-hydrogen +## 4.1.0 + +### Minor Changes + +- Updated CLI prompts. It's recommended to update your version of `@shopify/cli` to `3.45.0` when updating `@shopify/cli-hydrogen`. ([#733](https://github.com/Shopify/hydrogen/pull/733)) by [@frandiox](https://github.com/frandiox) + + ```diff + "dependencies": { + - "@shopify/cli": "3.x.x", + + "@shopify/cli": "3.45.0", + } + ``` + +- Added a new `shortcut` command that creates a global `h2` alias for the Hydrogen CLI: ([#679](https://github.com/Shopify/hydrogen/pull/679)) by [@frandiox](https://github.com/frandiox) + + ```sh + $> npx shopify hydrogen shortcut + ``` + + After that, you can run commands using the new alias: + + ```sh + $> h2 generate route home + $> h2 g r home # Same as the above + $> h2 check routes + ``` + +### Patch Changes + +- Add support for the Remix future flags `v2_meta`, `v2_errorBoundary` and `v2_routeConvention` to the `generate` command. If these flags are enabled in your project, the new generated files will follow the v2 conventions. ([#756](https://github.com/Shopify/hydrogen/pull/756)) by [@frandiox](https://github.com/frandiox) + +- Update virtual route to use Remix V2 route name conventions ([#792](https://github.com/Shopify/hydrogen/pull/792)) by [@DavidWittness](https://github.com/DavidWittness) + +- Bump internal Remix dependencies to 1.15.0. ([#728](https://github.com/Shopify/hydrogen/pull/728)) by [@wizardlyhel](https://github.com/wizardlyhel) + + Recommendations to follow: + + - Upgrade all the Remix packages in your app to 1.15.0. + - Enable Remix v2 future flags at your earliest convenience following [the official guide](https://remix.run/docs/en/1.15.0/pages/v2). + +- Improve type safety in SEO data generators. ([#763](https://github.com/Shopify/hydrogen/pull/763)) by [@davidhousedev](https://github.com/davidhousedev) + +- Updated dependencies [[`85ae63a`](https://github.com/Shopify/hydrogen/commit/85ae63ac37e5c4200919d8ae6c861c60effb4ded), [`5e26503`](https://github.com/Shopify/hydrogen/commit/5e2650374441fb5ae4840215fefdd5d547a378c0), [`1f8526c`](https://github.com/Shopify/hydrogen/commit/1f8526c750dc1d5aa7ea02e196fffdd14d17a536)]: + - @shopify/hydrogen-react@2023.1.8 + - @shopify/remix-oxygen@1.0.5 + ## 4.0.9 ### Patch Changes diff --git a/packages/cli/oclif.manifest.json b/packages/cli/oclif.manifest.json index 69a72e30e2..e35b0c969a 100644 --- a/packages/cli/oclif.manifest.json +++ b/packages/cli/oclif.manifest.json @@ -1 +1 @@ -{"version":"4.0.9","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":"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 diff --git a/packages/cli/package.json b/packages/cli/package.json index 38bd83f73e..e75fa30121 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.0.9", + "version": "4.1.0", "license": "SEE LICENSE IN LICENSE.md", "type": "module", "scripts": { @@ -27,8 +27,8 @@ }, "peerDependencies": { "@remix-run/react": "^1.15.0", - "@shopify/hydrogen-react": "^2023.1.7", - "@shopify/remix-oxygen": "^1.0.4" + "@shopify/hydrogen-react": "^2023.1.8", + "@shopify/remix-oxygen": "^1.0.5" }, "dependencies": { "@oclif/core": "2.1.4", diff --git a/packages/create-hydrogen/CHANGELOG.md b/packages/create-hydrogen/CHANGELOG.md index e7561de3f3..6f221d321e 100644 --- a/packages/create-hydrogen/CHANGELOG.md +++ b/packages/create-hydrogen/CHANGELOG.md @@ -1,5 +1,23 @@ # @shopify/create-hydrogen +## 4.1.0 + +### Minor Changes + +- Updated CLI prompts. It's recommended to update your version of `@shopify/cli` to `3.45.0` when updating `@shopify/cli-hydrogen`. ([#733](https://github.com/Shopify/hydrogen/pull/733)) by [@frandiox](https://github.com/frandiox) + + ```diff + "dependencies": { + - "@shopify/cli": "3.x.x", + + "@shopify/cli": "3.45.0", + } + ``` + +### Patch Changes + +- Updated dependencies [[`e6e6c2d`](https://github.com/Shopify/hydrogen/commit/e6e6c2da274d0582c6b3b9f298dfd2e86dd4bfbe), [`475a39c`](https://github.com/Shopify/hydrogen/commit/475a39c867b0851bba0358b6db9208b664aec68c), [`1f8526c`](https://github.com/Shopify/hydrogen/commit/1f8526c750dc1d5aa7ea02e196fffdd14d17a536), [`0f4d562`](https://github.com/Shopify/hydrogen/commit/0f4d562a2129e8e03ed123dc572a14a72e487a1b), [`2d4c5d9`](https://github.com/Shopify/hydrogen/commit/2d4c5d9340c5a2458c682aa3f9b12352dacdd759), [`68a6028`](https://github.com/Shopify/hydrogen/commit/68a60285a3d563d6e98fb79c3ba6d98eb4ee6be0)]: + - @shopify/cli-hydrogen@4.1.0 + ## 4.0.5 ### Patch Changes diff --git a/packages/create-hydrogen/package.json b/packages/create-hydrogen/package.json index 36e5bc3442..88ea4a2111 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.0.5", + "version": "4.1.0", "type": "module", "scripts": { "build": "tsup --clean --config ./tsup.config.ts", @@ -13,7 +13,7 @@ "typecheck": "tsc --noEmit" }, "dependencies": { - "@shopify/cli-hydrogen": "^4.0.9" + "@shopify/cli-hydrogen": "^4.1.0" }, "bin": "dist/create-app.js", "files": [ diff --git a/packages/hydrogen-react/CHANGELOG.md b/packages/hydrogen-react/CHANGELOG.md index 9541042e31..b7d79a5b7f 100644 --- a/packages/hydrogen-react/CHANGELOG.md +++ b/packages/hydrogen-react/CHANGELOG.md @@ -1,5 +1,26 @@ # @shopify/hydrogen-react +## 2023.1.8 + +### Patch Changes + +- Fix `parseGid()` to return a query string if it was a part of the original GID. ([#723](https://github.com/Shopify/hydrogen/pull/723)) by [@wizardlyhel](https://github.com/wizardlyhel) + +- Add the raw product returned from the Storefront API to also return from `useProduct()`: ([#735](https://github.com/Shopify/hydrogen/pull/735)) by [@blittle](https://github.com/blittle) + + ```ts + function SomeComponent() { + const {product} = useProduct(); + + return ( +
+

{product.title}

+

{product.description}

+
+ ); + } + ``` + ## 2023.1.7 ### Patch Changes diff --git a/packages/hydrogen-react/package.json b/packages/hydrogen-react/package.json index bfa6efcd7d..5742dbd834 100644 --- a/packages/hydrogen-react/package.json +++ b/packages/hydrogen-react/package.json @@ -1,6 +1,6 @@ { "name": "@shopify/hydrogen-react", - "version": "2023.1.7", + "version": "2023.1.8", "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 e0f57db8e4..1c95d244c8 100644 --- a/packages/hydrogen/CHANGELOG.md +++ b/packages/hydrogen/CHANGELOG.md @@ -1,5 +1,68 @@ # @shopify/hydrogen +## 2023.1.7 + +### Patch Changes + +- Bump internal Remix dependencies to 1.15.0. ([#728](https://github.com/Shopify/hydrogen/pull/728)) by [@wizardlyhel](https://github.com/wizardlyhel) + + Recommendations to follow: + + - Upgrade all the Remix packages in your app to 1.15.0. + - Enable Remix v2 future flags at your earliest convenience following [the official guide](https://remix.run/docs/en/1.15.0/pages/v2). + +- Add an experimental `createWithCache_unstable` utility, which creates a function similar to `useQuery` from Hydrogen v1. Use this utility to query third-party APIs and apply custom cache options. ([#600](https://github.com/Shopify/hydrogen/pull/600)) by [@frandiox](https://github.com/frandiox) + + To setup the utility, update your `server.ts`: + + ```js + import { + createStorefrontClient, + createWithCache_unstable, + CacheLong, + } from '@shopify/hydrogen'; + + // ... + + const cache = await caches.open('hydrogen'); + const withCache = createWithCache_unstable({cache, waitUntil}); + + // Create custom utilities to query third-party APIs: + const fetchMyCMS = (query) => { + // Prefix the cache key and make it unique based on arguments. + return withCache(['my-cms', query], CacheLong(), () => { + const cmsData = await (await fetch('my-cms.com/api', { + method: 'POST', + body: query + })).json(); + + const nextPage = (await fetch('my-cms.com/api', { + method: 'POST', + body: cmsData1.nextPageQuery, + })).json(); + + return {...cmsData, nextPage} + }); + }; + + const handleRequest = createRequestHandler({ + build: remixBuild, + mode: process.env.NODE_ENV, + getLoadContext: () => ({ + session, + waitUntil, + storefront, + env, + fetchMyCMS, + }), + }); + ``` + + **Note:** The utility is unstable and subject to change before stabalizing in the 2023.04 release. + +- Updated dependencies [[`85ae63a`](https://github.com/Shopify/hydrogen/commit/85ae63ac37e5c4200919d8ae6c861c60effb4ded), [`5e26503`](https://github.com/Shopify/hydrogen/commit/5e2650374441fb5ae4840215fefdd5d547a378c0)]: + - @shopify/hydrogen-react@2023.1.8 + ## 2023.1.6 ### Patch Changes diff --git a/packages/hydrogen/package.json b/packages/hydrogen/package.json index 340c487116..0206e9e8eb 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.6", + "version": "2023.1.7", "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.7", + "@shopify/hydrogen-react": "2023.1.8", "react": "^18.2.0" }, "peerDependencies": { diff --git a/packages/hydrogen/src/version.ts b/packages/hydrogen/src/version.ts index 9bfd2d74dc..7aa71f2711 100644 --- a/packages/hydrogen/src/version.ts +++ b/packages/hydrogen/src/version.ts @@ -1 +1 @@ -export const LIB_VERSION = '2023.1.6'; +export const LIB_VERSION = '2023.1.7'; diff --git a/packages/remix-oxygen/CHANGELOG.md b/packages/remix-oxygen/CHANGELOG.md index 745313cf55..010801abcc 100644 --- a/packages/remix-oxygen/CHANGELOG.md +++ b/packages/remix-oxygen/CHANGELOG.md @@ -1,5 +1,16 @@ # @shopify/remix-oxygen +## 1.0.5 + +### Patch Changes + +- Bump internal Remix dependencies to 1.15.0. ([#728](https://github.com/Shopify/hydrogen/pull/728)) by [@wizardlyhel](https://github.com/wizardlyhel) + + Recommendations to follow: + + - Upgrade all the Remix packages in your app to 1.15.0. + - Enable Remix v2 future flags at your earliest convenience following [the official guide](https://remix.run/docs/en/1.15.0/pages/v2). + ## 1.0.4 ### Patch Changes diff --git a/packages/remix-oxygen/package.json b/packages/remix-oxygen/package.json index 2eabd7c940..5d319cb9d7 100644 --- a/packages/remix-oxygen/package.json +++ b/packages/remix-oxygen/package.json @@ -5,7 +5,7 @@ "@shopify:registry": "https://registry.npmjs.org" }, "type": "module", - "version": "1.0.4", + "version": "1.0.5", "license": "SEE LICENSE IN LICENSE.md", "main": "dist/index.cjs", "module": "dist/production/index.js", diff --git a/templates/demo-store/CHANGELOG.md b/templates/demo-store/CHANGELOG.md new file mode 100644 index 0000000000..64ea487559 --- /dev/null +++ b/templates/demo-store/CHANGELOG.md @@ -0,0 +1,331 @@ +# demo-store + +## 0.2.0 + +### Minor Changes + +- Fix scroll issues on Product Detail Page for small screens ([#782](https://github.com/Shopify/hydrogen/pull/782)) by [@lifeiscontent](https://github.com/lifeiscontent) + +- Fix Layout title on mobile when title is long ([#781](https://github.com/Shopify/hydrogen/pull/781)) by [@lifeiscontent](https://github.com/lifeiscontent) + +### Patch Changes + +- Adopt Remix [`v2_meta`](https://remix.run/docs/en/main/route/meta#metav2) future flag ([#738](https://github.com/Shopify/hydrogen/pull/738)) by [@wizardlyhel](https://github.com/wizardlyhel) + + ### `v2_meta` migration steps + + 1. For any routes that you used `meta` route export, convert it to the `V2_MetaFunction` equivalent. Notice that the package name in the import statement has also changed to `'@remix-run/react'`: + + ```diff + - import {type MetaFunction} from '@shopify/remix-oxygen'; + + import {type V2_MetaFunction} from '@remix-run/react'; + + - export const meta: MetaFunction = () => { + + export const meta: V2_MetaFunction = () => { + - return {title: 'Login'}; + + return [{title: 'Login'}]; + }; + ``` + + 2. If you are using data from loaders, pass the loader type to the `V2_MetaFunction` generic: + + ```diff + - export const meta: MetaFunction = ({data}) => { + + export const meta: V2_MetaFunction = ({data}) => { + - return {title: `Order ${data?.order?.name}`}; + + return [{title: `Order ${data?.order?.name}`}]; + }; + ``` + + 3. If you are using `meta` route export in `root`, convert it to [Global Meta](https://remix.run/docs/en/main/route/meta#global-meta) + + ```diff + // app/root.tsx + + - export const meta: MetaFunction = () => ({ + - charset: 'utf-8', + - viewport: 'width=device-width,initial-scale=1', + - }); + + export default function App() { + + return ( + + + + + + + + + ``` + +- Adopt `v2_routeConvention` future flag ([#747](https://github.com/Shopify/hydrogen/pull/747)) by [@wizardlyhel](https://github.com/wizardlyhel) + + ## `v2_routeConventions` migration steps + + Remix v2 route conventions are just file renames. We just need to ensure when changing file name and file location, the import paths of other files are also updated. + + Go to Remix docs for more details on the [V2 route convention](https://remix.run/docs/en/main/file-conventions/route-files-v2). + + Rename and move the following files in the `routes` folder to adopt to V2 route convention. + + + + + + + + + + +
BeforeAfter (V2 route convention)
+ + ```txt + app/routes/ + ├─ [sitemap.xml].tsx + ├─ [robots.txt].tsx + └─ ($lang)/ + ├─ $shopid/orders/$token/ + │ └─ authenticate.tsx + ├─ account/ + │ ├─ __private/ + │ │ ├─ address/ + │ │ │ └─ $id.tsx + │ │ ├─ orders.$id.tsx + │ │ ├─ edit.tsx + │ │ └─ logout.ts + │ └─ __public/ + │ ├─ recover.tsx + │ ├─ login.tsx + │ ├─ register.tsx + │ ├─ activate.$id.$activationToken.tsx + │ └─ reset.$id.$resetToken.tsx + ├─ api/ + │ ├─ countries.tsx + │ └─ products.tsx + ├─ collections/ + │ ├─ index.tsx + │ ├─ $collectionHandle.tsx + │ └─ all.tsx + ├─ journal/ + │ ├─ index.tsx + │ └─ $journalHandle.tsx + ├─ pages + │ └─ $pageHandle.tsx + ├─ policies/ + │ ├─ index.tsx + │ └─ $policyHandle.tsx + ├─ products/ + │ ├─ index.tsx + │ └─ $productHandle.tsx + ├─ $.tsx + ├─ account.tsx + ├─ cart.tsx + ├─ cart.$lines.tsx + ├─ discount.$code.tsx + ├─ featured-products.tsx + ├─ index.tsx + └─ search.tsx + ``` + + + + ```txt + app/routes/ + ├─ [sitemap.xml].tsx + ├─ [robots.txt].tsx + ├─ ($lang).$shopid.orders.$token.authenticate.tsx + ├─ ($lang).account.address.$id.tsx + ├─ ($lang).account.orders.$id.tsx + ├─ ($lang).account.edit.tsx + ├─ ($lang).account.logout.ts + ├─ ($lang).account.recover.tsx + ├─ ($lang).account.login.tsx + ├─ ($lang).account.register.tsx + ├─ ($lang).account.activate.$id.$activationToken.tsx + ├─ ($lang).account.reset.$id.$resetToken.tsx + ├─ ($lang).api.countries.tsx + ├─ ($lang).api.products.tsx + ├─ ($lang).collections._index.tsx + ├─ ($lang).collections.$collectionHandle.tsx + ├─ ($lang).collections.all.tsx + ├─ ($lang).journal._index.tsx + ├─ ($lang).journal.$journalHandle.tsx + ├─ ($lang).pages.$pageHandle.tsx + ├─ ($lang).policies._index.tsx + ├─ ($lang).policies.$policyHandle.tsx + ├─ ($lang).products._index.tsx + ├─ ($lang).products.$productHandle.tsx + ├─ $.tsx + ├─ ($lang)._index.tsx + ├─ ($lang).account.tsx + ├─ ($lang).cart.tsx + ├─ ($lang).cart.$lines.tsx + ├─ ($lang).discount.$code.tsx + ├─ ($lang).featured-products.tsx + └─ ($lang).search.tsx + ``` + +
+ + ### Optional + + If you want to continue using nested folder routes but have the `v2_routeConvention` flag turned on, you may consider using the npm package [`@remix-run/v1-route-convention`](https://www.npmjs.com/package/@remix-run/v1-route-convention). + + If you like the flat route convention but still wants a hybrid style of nested route folder, you may consider using the npm package [`remix-flat-routes`](https://www.npmjs.com/package/remix-flat-routes) + +- Adopt Remix [`unstable_tailwind`](https://remix.run/docs/en/1.15.0/guides/styling#built-in-tailwind-support) and [`unstable_postcss`](https://remix.run/docs/en/1.15.0/guides/styling#built-in-postcss-support) future flags for the Demo Store template. ([#751](https://github.com/Shopify/hydrogen/pull/751)) by [@frandiox](https://github.com/frandiox) + + ### `unstable_tailwind` and `unstable_postcss` migration steps + + 1. Move the file `/styles/app.css` to `/app/styles/app.css`, and remove it from `.gitignore`. + + 2. Add `"browserslist": ["defaults"]` to your `package.json`, or your preferred [value from Browserslist](https://browsersl.ist/). + + 3. Replace the `build` and `dev` scripts in your `package.json` with the following: + + **Before** + + ```json + "scripts": { + "build": "npm run build:css && shopify hydrogen build", + "build:css": "postcss styles --base styles --dir app/styles --env production", + "dev": "npm run build:css && concurrently -g --kill-others-on-fail -r npm:dev:css \"shopify hydrogen dev\"", + "dev:css": "postcss styles --base styles --dir app/styles -w", + ... + } + ``` + + **After** + + ```json + "scripts": { + "dev": "shopify hydrogen dev", + "build": "shopify hydrogen build", + ... + } + ``` + + You can also remove dependencies like `concurrently` if you don't use them anywhere else. + +- Forwards search params of `/discount/` route to a redirect route. ([#766](https://github.com/Shopify/hydrogen/pull/766)) by [@lneicelis](https://github.com/lneicelis) + +- Carts created in liquid will soon be compatible with the Storefront API and vice versa, making it possible to share carts between channels. ([#721](https://github.com/Shopify/hydrogen/pull/721)) by [@scottdixon](https://github.com/scottdixon) + + This change updates the Demo Store to use Online Store's `cart` cookie (instead of sessions) which prevents customers from losing carts when merchants migrate to/from Hydrogen. + +- Bump internal Remix dependencies to 1.15.0. ([#728](https://github.com/Shopify/hydrogen/pull/728)) by [@wizardlyhel](https://github.com/wizardlyhel) + + Recommendations to follow: + + - Upgrade all the Remix packages in your app to 1.15.0. + - Enable Remix v2 future flags at your earliest convenience following [the official guide](https://remix.run/docs/en/1.15.0/pages/v2). + +- Updated CLI prompts. It's recommended to update your version of `@shopify/cli` to `3.45.0` when updating `@shopify/cli-hydrogen`. ([#733](https://github.com/Shopify/hydrogen/pull/733)) by [@frandiox](https://github.com/frandiox) + + ```diff + "dependencies": { + - "@shopify/cli": "3.x.x", + + "@shopify/cli": "3.45.0", + } + ``` + +- Adopt Remix [`v2_errorBoundary`](https://remix.run/docs/en/release-next/route/error-boundary-v2) future flag ([#729](https://github.com/Shopify/hydrogen/pull/729)) by [@wizardlyhel](https://github.com/wizardlyhel) + + ### `v2_errorBoundary` migration steps + + 1. Remove all `CatchBoundary` route exports + + 2. Handle route level errors with `ErrorBoundary` + + Before: + + ```jsx + // app/root.tsx + export function ErrorBoundary({error}: {error: Error}) { + const [root] = useMatches(); + const locale = root?.data?.selectedLocale ?? DEFAULT_LOCALE; + + return ( + + + Error + + + + + + + + + + + ); + } + ``` + + After: + + ```jsx + // app/root.tsx + import {isRouteErrorResponse, useRouteError} from '@remix-run/react'; + + export function ErrorBoundary({error}: {error: Error}) { + const [root] = useMatches(); + const locale = root?.data?.selectedLocale ?? DEFAULT_LOCALE; + const routeError = useRouteError(); + const isRouteError = isRouteErrorResponse(routeError); + + let title = 'Error'; + let pageType = 'page'; + + // We have an route error + if (isRouteError) { + title = 'Not found'; + + // We have a page not found error + if (routeError.status === 404) { + pageType = routeError.data || pageType; + } + } + + return ( + + + {title} + + + + + + {isRouteError ? ( + <> + {routeError.status === 404 ? ( + + ) : ( + + )} + + ) : ( + + )} + + + + + ); + } + ``` + +- Updated dependencies [[`e6e6c2d`](https://github.com/Shopify/hydrogen/commit/e6e6c2da274d0582c6b3b9f298dfd2e86dd4bfbe), [`475a39c`](https://github.com/Shopify/hydrogen/commit/475a39c867b0851bba0358b6db9208b664aec68c), [`1f8526c`](https://github.com/Shopify/hydrogen/commit/1f8526c750dc1d5aa7ea02e196fffdd14d17a536), [`0f4d562`](https://github.com/Shopify/hydrogen/commit/0f4d562a2129e8e03ed123dc572a14a72e487a1b), [`737f83e`](https://github.com/Shopify/hydrogen/commit/737f83ebb72fccc2f367532ebaa19ea00b1b3436), [`2d4c5d9`](https://github.com/Shopify/hydrogen/commit/2d4c5d9340c5a2458c682aa3f9b12352dacdd759), [`68a6028`](https://github.com/Shopify/hydrogen/commit/68a60285a3d563d6e98fb79c3ba6d98eb4ee6be0)]: + - @shopify/cli-hydrogen@4.1.0 + - @shopify/hydrogen@2023.1.7 + - @shopify/remix-oxygen@1.0.5 diff --git a/templates/demo-store/package.json b/templates/demo-store/package.json index 1a9f07cb1a..299fca59f5 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.1.0", + "version": "0.2.0", "scripts": { "dev": "shopify hydrogen dev", "build": "shopify hydrogen build", @@ -20,9 +20,9 @@ "@headlessui/react": "^1.7.2", "@remix-run/react": "1.15.0", "@shopify/cli": "3.45.0", - "@shopify/cli-hydrogen": "^4.0.9", - "@shopify/hydrogen": "^2023.1.6", - "@shopify/remix-oxygen": "^1.0.4", + "@shopify/cli-hydrogen": "^4.1.0", + "@shopify/hydrogen": "^2023.1.7", + "@shopify/remix-oxygen": "^1.0.5", "clsx": "^1.2.1", "cross-env": "^7.0.3", "graphql": "^16.6.0", diff --git a/templates/hello-world/package.json b/templates/hello-world/package.json index 074a764330..c3d5b1220c 100644 --- a/templates/hello-world/package.json +++ b/templates/hello-world/package.json @@ -15,9 +15,9 @@ "dependencies": { "@remix-run/react": "1.15.0", "@shopify/cli": "3.45.0", - "@shopify/cli-hydrogen": "^4.0.9", - "@shopify/hydrogen": "^2023.1.6", - "@shopify/remix-oxygen": "^1.0.4", + "@shopify/cli-hydrogen": "^4.1.0", + "@shopify/hydrogen": "^2023.1.7", + "@shopify/remix-oxygen": "^1.0.5", "graphql": "^16.6.0", "graphql-tag": "^2.12.6", "isbot": "^3.6.6", diff --git a/templates/skeleton/package.json b/templates/skeleton/package.json index 2855535ae9..13c2f2e345 100644 --- a/templates/skeleton/package.json +++ b/templates/skeleton/package.json @@ -14,9 +14,9 @@ "dependencies": { "@remix-run/react": "1.15.0", "@shopify/cli": "3.45.0", - "@shopify/cli-hydrogen": "^4.0.9", - "@shopify/hydrogen": "^2023.1.6", - "@shopify/remix-oxygen": "^1.0.4", + "@shopify/cli-hydrogen": "^4.1.0", + "@shopify/hydrogen": "^2023.1.7", + "@shopify/remix-oxygen": "^1.0.5", "graphql": "^16.6.0", "graphql-tag": "^2.12.6", "isbot": "^3.6.6",