🏝 React Islands: Can we only hydrate selected components? [ON PAUSE UNTIL APRIL]

[AWare]

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.

 <Island
                    from="ClientComponent"
                    component={ClientComponent}
                    data={{ hello: 'world' }}
                />

TODO

• The filename is directly set in the Island as a prop.
• Only default exports are supported.
• Server only js needs to be more thoroughly separated,
• It needs to be type safe.
• Should props be sent like this?

[PRBuilds]

PRbuilds results:

LightHouse Reporting
1551443235.report.html

--automated message

[AWare]

Could probably use https://www.npmjs.com/package/babel-plugin-dynamic-import-node-sync

[walaura]

let's use <gu-island> it looks cooler

[walaura]

😹

[walaura]

you need to use React.createElement() here or things will get weird

[walaura]

Suggested change

	{s(data)}
	{React.createElement(s, data, data.children?)}

[AWare]

💯

[AWare]

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?

[nicl]

Hey both @walaura and @AWare I'm going to close this as we're not planning on working on it at the moment, but we can easily resurrent if it becomes relevant again in the future!