react-plugin
react-plugin copied to clipboard
Feature/shadow dom style support
As a developer working on a project that leverages web components (specifically using Lit for component creation), I've recently integrated rete.js into our setup. While the library wonderfully fits our needs, I encountered a challenge with styling components when using the rete-react-render-plugin. The styles were appended to document.head by styled-components, leading to unstyled components within my shadow DOM.
After investigating, I found that styled-components allows specifying a target for appending styles. I managed to work around this issue by extending the ReactPlugin as shown below:
export class ShadowDomPlugin<Schemes extends BaseSchemes, T = Requires<Schemes>> extends ReactPlugin<Schemes, T> {
constructor(props: Props & { createRoot: (container: HTMLElement) => any }, styleRoot: HTMLElement) {
super({
...props,
createRoot: container => {
const root = props.createRoot(container);
const render: (typeof root)['render'] = (children: any) => root.render(
React.createElement(StyleSheetManager, { target: styleRoot }, children),
);
return { ...root, render };
},
});
}
}
usage: const render = new ShadowDomPlugin<Schemes, AreaExtra>({ createRoot }, reteRoot);
This approach, however, may not be immediately obvious to other developers and requires extending the library. To streamline the development experience and potentially broaden the appeal of rete.js for projects using shadow DOM, I propose an additional Prop-Flag within the ReactPlugin to facilitate this adjustment directly.
Here's how developers could use the new flag:
const render = new ReactPlugin<Schemes, AreaExtra>({ createRoot, localStyles: true });
This enhancement minimizes friction for developers integrating rete.js into web component environments and encourages broader adoption of this powerful library.
Regarding automated testing, the CONTRIBUTING.md emphasizes the importance of tests, but I found no existing test framework in the project to integrate my tests. Despite this, I've manually tested the changes in my project, confirming they work as intended by directing styles into the shadow DOM effectively. I acknowledge the value of automated testing and am open to suggestions or future collaboration to align with the project's testing standards. At least I cared about the linting in the renderer.
I'm eager to hear your thoughts on this proposal and welcome any feedback or suggestions for improvement.
Quality Gate passed
Issues
0 New issues
0 Accepted issues
Measures
0 Security Hotspots
No data about Coverage
0.0% Duplication on New Code
This PR is stale because it has been open 60 days with no activity. Remove stale label or comment or this will be closed in 20 days.
This PR was closed because it has been stalled for 20 days with no activity.