Releases: Shopify/hydrogen
skeleton@2024.7.3
Patch Changes
- Updated dependencies [
150854ed
]:- @Shopify/hydrogen@2024.7.2
skeleton@2024.7.2
@shopify/hydrogen@2024.7.2
@shopify/create-hydrogen@5.0.2
@shopify/create-hydrogen@5.0.1
Patch Changes
- Fix auth flow. (#2331) by @graygilmore
@shopify/cli-hydrogen@8.3.0
Minor Changes
- The Hydrogen CLI can now read the Codegen configuration from the GraphQL config file (e.g.
.graphqlrc.js
or.graphqlrc.yml
). (#2311) by @frandiox
Patch Changes
- Fix auth flow. (#2331) by @graygilmore
skeleton@2024.7.1
Patch Changes
-
Update
@shopify/oxygen-workers-types
to fix issues on Windows. (#2252) by @michenly -
Breaking change by @blittle
Previously the
VariantSelector
component would filter out options that only had one value. This is undesireable for some apps. We've removed that filter, if you'd like to retain the existing functionality, simply filter the options prop before it is passed to theVariantSelector
component:<VariantSelector handle={product.handle} + options={product.options.filter((option) => option.values.length > 1)} - options={product.options} variants={variants}> </VariantSelector>
Fixes #1198
-
Update root to use Remix's Layout Export pattern and eliminate the use of
useLoaderData
in root. (#2292) by @michenlyThe diff below showcase how you can make this refactor in existing application.
import { Outlet, - useLoaderData, + useRouteLoaderData, } from '@remix-run/react'; -import {Layout} from '~/components/Layout'; +import {PageLayout} from '~/components/PageLayout'; -export default function App() { +export function Layout({children}: {children?: React.ReactNode}) { const nonce = useNonce(); - const data = useLoaderData<typeof loader>(); + const data = useRouteLoaderData<typeof loader>('root'); return ( <html> ... <body> - <Layout {...data}> - <Outlet /> - </Layout> + {data? ( + <PageLayout {...data}>{children}</PageLayout> + ) : ( + children + )} </body> </html> ); } +export default function App() { + return <Outlet />; +} export function ErrorBoundary() { - const rootData = useLoaderData<typeof loader>(); return ( - <html> - ... - <body> - <Layout {...rootData}> - <div className="route-error"> - <h1>Error</h1> - ... - </div> - </Layout> - </body> - </html> + <div className="route-error"> + <h1>Error</h1> + ... + </div> ); }
-
Refactor the cart and product form components (#2132) by @blittle
-
Remove manual setting of session in headers and recommend setting it in server after response is created. (#2137) by @michenly
Step 1: Add
isPending
implementation in session// in app/lib/session.ts export class AppSession implements HydrogenSession { + public isPending = false; get unset() { + this.isPending = true; return this.#session.unset; } get set() { + this.isPending = true; return this.#session.set; } commit() { + this.isPending = false; return this.#sessionStorage.commitSession(this.#session); } }
Step 2: update response header if
session.isPending
is true// in server.ts export default { async fetch(request: Request): Promise<Response> { try { const response = await handleRequest(request); + if (session.isPending) { + response.headers.set('Set-Cookie', await session.commit()); + } return response; } catch (error) { ... } }, };
Step 3: remove setting cookie with session.commit() in routes
// in route files export async function loader({context}: LoaderFunctionArgs) { return json({}, - { - headers: { - 'Set-Cookie': await context.session.commit(), - }, }, ); }
-
Moved
@shopify/cli
fromdependencies
todevDependencies
. (#2312) by @frandiox -
The
@shopify/cli
package now bundles the@shopify/cli-hydrogen
plugin. Therefore, you can now remove the latter from your local dependencies: (#2306) by @frandiox"@shopify/cli": "3.64.0", - "@shopify/cli-hydrogen": "^8.1.1", "@shopify/hydrogen": "2024.7.0",
-
Updated dependencies [
a0e84d76
,426bb390
,4337200c
,710625c7
,8b9c726d
,10a419bf
,6a6278bb
,66236ca6
,dcbd0bbf
,a5e03e2a
,c2690653
,54c2f7ad
,4337200c
,e96b332b
,f3065371
,6cd5554b
,9eb60d73
,e432533e
,de3f70be
,83cb96f4
]:- @shopify/remix-oxygen@2.0.5
- @shopify/cli-hydrogen@8.2.0
- @Shopify/hydrogen@2024.7.1
@shopify/remix-oxygen@2.0.5
@shopify/mini-oxygen@3.0.4
Patch Changes
- Security updates (#2263) by @dependabot
@shopify/hydrogen@2024.7.1
Patch Changes
-
Breaking change by @michenly
customerAccount
no longer commit session automatically. -
Breaking change by @blittle
Previously the
VariantSelector
component would filter out options that only had one value. This is undesireable for some apps. We've removed that filter, if you'd like to retain the existing functionality, simply filter the options prop before it is passed to theVariantSelector
component:<VariantSelector handle={product.handle} + options={product.options.filter((option) => option.values.length > 1)} - options={product.options} variants={variants}> </VariantSelector>
Fixes #1198
-
Improve the types for
useOptimisticCart()
(#2269) by @blittle -
Fix a small rounding issue when checking stale-while-revalidate timing. (#2220) by @frandiox
-
Update virtual route to use Layout component in the root file. (#2292) by @michenly
-
Add
sellingPlanId
support toBuyNowButton
. (#2254) by @dvisockas -
Fix customData from Analytics.Provider not being passed to page view events (#2224) by @wizardlyhel
-
Auto cookie domain detection for customer privacy api and better error message for missing analytics fields (#2256) by @wizardlyhel
-
New Features by @blittle
Add a
useOptimisticVariant
hook for optimistically rendering product variant changes. This makes switching product variants instantaneous. Example usage:function Product() { const {product, variants} = useLoaderData<typeof loader>(); // The selectedVariant optimistically changes during page // transitions with one of the preloaded product variants const selectedVariant = useOptimisticVariant( product.selectedVariant, variants, ); return <ProductMain selectedVariant={selectedVariant} />; }
This also introduces a small breaking change to the
VariantSelector
component, which now immediately updates which variant is active. If you'd like to retain the current functionality, and have theVariantSelector
wait for the page navigation to complete before updating, use thewaitForNavigation
prop:<VariantSelector handle={product.handle} options={product.options} waitForNavigation > ... </VariantSelector>
-
Return
null
instead of empty object fromcart.get()
when the cart id is invalid. (#2258) by @frandiox -
Updated dependencies [
54c2f7ad
]:- @shopify/hydrogen-react@2024.7.1