motiondivision / motiondivision/motion

[FEATURE] Support rendering `PopChild` to a separate `document`

Open
#2,319 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

feature
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

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.