-
Notifications
You must be signed in to change notification settings - Fork 28
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
🏝 React Islands: Can we only hydrate selected components? [ON PAUSE UNTIL APRIL] #445
Conversation
PRbuilds results: LightHouse Reporting --automated message |
Could probably use https://www.npmjs.com/package/babel-plugin-dynamic-import-node-sync |
// const hello = document.getElementById('hello'); | ||
// hydrateApp(React.createElement(c.default, {}), hello); | ||
// }); | ||
const islands = [...document.querySelectorAll('.js-island')]; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
let's use <gu-island>
it looks cooler
@@ -104,3 +124,5 @@ if (window.guardian.polyfilled) { | |||
} else { | |||
window.guardian.onPolyfilled = go; | |||
} | |||
|
|||
console.log('HELLO IM RUNNIGN'); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
😹
}); | ||
return ( | ||
<div className="js-island" data-island={c} data-data={JSON.stringify(data)}> | ||
{s(data)} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
you need to use React.createElement()
here or things will get weird
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
{s(data)} | |
{React.createElement(s, data, data.children?)} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
💯
Moving the create element into the loaded script would allow this to load any component. We could SSR anything into it with dangerouslySet and optionally jsdom maybe? |
What
This provides a way to selectively hydrate only parts of the React tree.
Each part which must be hydrated and sent to the client is wrapped in a div which has it's props and filename included in data-attributes. These are then used to hydrate the component into the div.
Islands introduces a component which takes a component, the import path of the component and a serialisable object which takes the props of the component- and adds them to the DOM wrapped such that they can be automatically rehydrated.
TODO