motiondivision / motiondivision/motion
[FEATURE] Support rendering `PopChild` to a separate `document`
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 33.7k
- Forks
- 1.4k
- Avg merge
- 1d 10h
- Merged PRs (30d)
- 14
Description
Is your feature request related to a problem? Please describe.
For an app I'm developing we render UI to a separate window opened via window.open(). The React hierarchy for the components rendered in that UI live in a main window but the components themselves are rendered to the separate window.
Currently the PopChild component creates a style element in the document corresponding to the window in which its code is running. In the case of the component being rendered to a separate window this results in the style element not taking effect for the rendered element.
Describe the solution you'd like
I'd like to modify the code to support adding the style element to the document in which the component is actually rendered. One simple solution would be to use the ownerDocument from the DOM element being rendered.
Describe alternatives you've considered
There are many alternative approaches used by various libraries. For example, styled-components has a StyleSheetManager concept which allows specifying an alternative DOM in which to inject styles for a React component hierarchy. Emotion supports a similar concept via CacheProvider. Lexical uses the ownerDocument approach.
I've already implemented the change and would be happy to submit a pull request if this feature is desirable.
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start at the PopChild component where the style element is created, then review the proposed implementation in commit fa699c8f578781427e1b1169fd29d1066958be68. The work is done when styles for a component rendered in a separate window are inserted into that element's ownerDocument rather than the executing window's document.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- frontend
- Issue type
- Feature
- Difficulty
- 2/5
- Estimated time
- 1-3 hours
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 42/100