From db5669b5c8903a57a91227f605923ca215a539c1 Mon Sep 17 00:00:00 2001 From: bholmesdev Date: Tue, 10 May 2022 16:20:23 -0600 Subject: [PATCH 1/5] feat: pass "client" directive to clientEntrypoints --- packages/astro/src/runtime/server/hydration.ts | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/astro/src/runtime/server/hydration.ts b/packages/astro/src/runtime/server/hydration.ts index e7267fe16e3c..dd2b2d2fcf05 100644 --- a/packages/astro/src/runtime/server/hydration.ts +++ b/packages/astro/src/runtime/server/hydration.ts @@ -110,15 +110,15 @@ export async function generateHydrateScript( ); } - let hydrationSource = ``; - - hydrationSource += renderer.clientEntrypoint + const hydrationSource = renderer.clientEntrypoint ? `const [{ ${ componentExport.value }: Component }, { default: hydrate }] = await Promise.all([import("${await result.resolve( componentUrl )}"), import("${await result.resolve(renderer.clientEntrypoint)}")]); - return (el, children) => hydrate(el)(Component, ${serializeProps(props)}, children); + return (el, children) => hydrate(el)(Component, ${serializeProps( + props + )}, children, ${JSON.stringify(hydrate)}); ` : `await import("${await result.resolve(componentUrl)}"); return () => {}; From 981e0c4ea0649e69508da697bb3690001410cd01 Mon Sep 17 00:00:00 2001 From: bholmesdev Date: Tue, 10 May 2022 16:20:38 -0600 Subject: [PATCH 2/5] refactor: remove hydration warning suppression react 17 --- packages/integrations/react/client-v17.js | 19 +++++++++++-------- 1 file changed, 11 insertions(+), 8 deletions(-) diff --git a/packages/integrations/react/client-v17.js b/packages/integrations/react/client-v17.js index 64284a0b0190..a2635be6b7d9 100644 --- a/packages/integrations/react/client-v17.js +++ b/packages/integrations/react/client-v17.js @@ -1,15 +1,18 @@ import { createElement } from 'react'; -import { hydrate } from 'react-dom'; +import { render, hydrate } from 'react-dom'; import StaticHtml from './static-html.js'; export default (element) => (Component, props, children) => - hydrate( - createElement( + { + const componentEl = createElement( Component, - { ...props, suppressHydrationWarning: true }, + props, children != null - ? createElement(StaticHtml, { value: children, suppressHydrationWarning: true }) + ? createElement(StaticHtml, { value: children }) : children - ), - element - ); + ); + if (client === 'only') { + return render(componentEl, element); + } + return hydrate(componentEl, element); + }; From 4b64dd174b058e68948dd95a05f9e63217bd3f4c Mon Sep 17 00:00:00 2001 From: bholmesdev Date: Tue, 10 May 2022 16:20:48 -0600 Subject: [PATCH 3/5] feat: remove hydration warning suppression react 18 --- packages/integrations/react/client.js | 21 ++++++++++++--------- 1 file changed, 12 insertions(+), 9 deletions(-) diff --git a/packages/integrations/react/client.js b/packages/integrations/react/client.js index 7eba8984c4d8..2236ae40bd4d 100644 --- a/packages/integrations/react/client.js +++ b/packages/integrations/react/client.js @@ -1,15 +1,18 @@ import { createElement } from 'react'; -import { hydrateRoot } from 'react-dom/client'; +import { createRoot, hydrateRoot } from 'react-dom/client'; import StaticHtml from './static-html.js'; -export default (element) => (Component, props, children) => - hydrateRoot( - element, - createElement( +export default (element) => (Component, props, children, client) => + { + const componentEl = createElement( Component, - { ...props, suppressHydrationWarning: true }, + props, children != null - ? createElement(StaticHtml, { value: children, suppressHydrationWarning: true }) + ? createElement(StaticHtml, { value: children }) : children - ) - ); + ); + if (client === 'only') { + return createRoot(element).render(componentEl); + } + return hydrateRoot(element, componentEl); + }; From a67dacbe9e3514c7be7181524d32d94fad5eef53 Mon Sep 17 00:00:00 2001 From: bholmesdev Date: Tue, 10 May 2022 16:28:35 -0600 Subject: [PATCH 4/5] chore: changeset --- .changeset/small-maps-cough.md | 6 ++++++ 1 file changed, 6 insertions(+) create mode 100644 .changeset/small-maps-cough.md diff --git a/.changeset/small-maps-cough.md b/.changeset/small-maps-cough.md new file mode 100644 index 000000000000..aadc443d29fc --- /dev/null +++ b/.changeset/small-maps-cough.md @@ -0,0 +1,6 @@ +--- +'astro': patch +'@astrojs/react': patch +--- + +Fix: remove hydration failures on React v18 by exposing the "client" directive from Astro core. From b04de83ddb2c364726eeceb6e75dca2ccd7d30f7 Mon Sep 17 00:00:00 2001 From: bholmesdev Date: Wed, 11 May 2022 16:04:50 -0600 Subject: [PATCH 5/5] fix: change metadata to options bag --- packages/astro/src/runtime/server/hydration.ts | 2 +- packages/integrations/react/client-v17.js | 2 +- packages/integrations/react/client.js | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/astro/src/runtime/server/hydration.ts b/packages/astro/src/runtime/server/hydration.ts index dd2b2d2fcf05..4d8ab48f0b68 100644 --- a/packages/astro/src/runtime/server/hydration.ts +++ b/packages/astro/src/runtime/server/hydration.ts @@ -118,7 +118,7 @@ export async function generateHydrateScript( )}"), import("${await result.resolve(renderer.clientEntrypoint)}")]); return (el, children) => hydrate(el)(Component, ${serializeProps( props - )}, children, ${JSON.stringify(hydrate)}); + )}, children, ${JSON.stringify({ client: hydrate })}); ` : `await import("${await result.resolve(componentUrl)}"); return () => {}; diff --git a/packages/integrations/react/client-v17.js b/packages/integrations/react/client-v17.js index a2635be6b7d9..32ba875586cc 100644 --- a/packages/integrations/react/client-v17.js +++ b/packages/integrations/react/client-v17.js @@ -2,7 +2,7 @@ import { createElement } from 'react'; import { render, hydrate } from 'react-dom'; import StaticHtml from './static-html.js'; -export default (element) => (Component, props, children) => +export default (element) => (Component, props, children, { client }) => { const componentEl = createElement( Component, diff --git a/packages/integrations/react/client.js b/packages/integrations/react/client.js index 2236ae40bd4d..0579f4a08d3c 100644 --- a/packages/integrations/react/client.js +++ b/packages/integrations/react/client.js @@ -2,7 +2,7 @@ import { createElement } from 'react'; import { createRoot, hydrateRoot } from 'react-dom/client'; import StaticHtml from './static-html.js'; -export default (element) => (Component, props, children, client) => +export default (element) => (Component, props, children, { client }) => { const componentEl = createElement( Component,