Releases: Shopify/hydrogen
@shopify/create-hydrogen@5.0.3
Patch Changes
-
Add a hydration check for google web cache. This prevents an infinite redirect when viewing the cached version of a hydrogen site on Google. (#2334) by @blittle
Update your entry.server.jsx file to include this check:
+ if (!window.location.origin.includes("webcache.googleusercontent.com")) { startTransition(() => { hydrateRoot( document, <StrictMode> <RemixBrowser /> </StrictMode> ); }); + }
@shopify/cli-hydrogen@8.4.0
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.jsor.graphqlrc.yml). (#2311) by @frandiox
Patch Changes
- Fix auth flow. (#2331) by @graygilmore
skeleton@2024.7.1
Patch Changes
-
Update
@shopify/oxygen-workers-typesto fix issues on Windows. (#2252) by @michenly -
Breaking change by @blittle
Previously the
VariantSelectorcomponent 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 theVariantSelectorcomponent:<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
useLoaderDatain 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
isPendingimplementation 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.isPendingis 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/clifromdependenciestodevDependencies. (#2312) by @frandiox -
The
@shopify/clipackage now bundles the@shopify/cli-hydrogenplugin. 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