First pass at supporting React 18 in @astrojs/react
This commit is contained in:
parent
fff83bb5c2
commit
99513c3703
2 changed files with 22 additions and 7 deletions
|
@ -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);
|
||||
};
|
||||
|
|
|
@ -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"
|
||||
|
|
Loading…
Add table
Reference in a new issue