michael/astro
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

First pass at supporting React 18 in @astrojs/react

Browse source
This commit is contained in:
delucis 2022-03-30 11:28:32 +02:00
parent fff83bb5c2
commit 99513c3703
No known key found for this signature in database
GPG key ID: 52DB15DC07051619
2 changed files with 22 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

25
packages/integrations/react/client.js
View file

@ -1,13 +1,28 @@
import { createElement } from 'react';
import { hydrate } from 'react-dom';
import { version } from 'react-dom/package.json';
import StaticHtml from './static-html.js';
export default (element) => (Component, props, children) =>
hydrate(
const usingReact18 = version.startsWith('18.');
// Import the correct hydration method based on the version of React.
const hydrateFn = (
async () => usingReact18
? (await import('react-dom/client')).hydrateRoot
: (await import('react-dom')).hydrate
)();
export default (element) => async (Component, props, children) => {
const args = [
createElement(
Component,
{ ...props, suppressHydrationWarning: true },
children != null ? createElement(StaticHtml, { value: children, suppressHydrationWarning: true }) : children
),
element
);
element,
];
// `hydrateRoot` expects [container, component] instead of [component, container].
if (usingReact18) args.reverse();
return (await hydrateFn)(...args);
};

4
packages/integrations/react/package.json
View file

@ -40,8 +40,8 @@
"react-dom": "^17.0.2"
},
"peerDependencies": {
"react": "^17.0.2",
"react-dom": "^17.0.2"
"react": "^17.0.2 || ^18.0.0",
"react-dom": "^17.0.2 || ^18.0.0"
},
"engines": {
"node": "^14.15.0 || >=16.0.0"