Skip to content

[Draft] Support for multiple windows/iframes#2185

Closed
zarubond wants to merge 5 commits intonecolas:masterfrom
zarubond:zarubond/multi_root
Closed

[Draft] Support for multiple windows/iframes#2185
zarubond wants to merge 5 commits intonecolas:masterfrom
zarubond:zarubond/multi_root

Conversation

@zarubond
Copy link
Contributor

@zarubond zarubond commented Dec 30, 2021

This PR is just a DRAFT and placeholder with description. The code changes will be spited into smaller, easier to review PRs.

image

This PR adds the multi-window (also iframe) support into the RNW. This feature is useful in desktop app scenarios (think PWA or Electron) where the program functionality can be splinted into multiple native OS windows (program settings window, separate chat window in Skype, toolbox window in Photoshop). Having native OS windows is more convenient for users opposed to modal windows inside web browser window as they allow you to have them in taskbar, navigate through OS keyboard shortcuts and have multiple of them opened at once.

This PR starts with refactoring of existing code to avoid singletons and switch to instantiated classes. Functionality like styling and event handling has to be handled separately for each window which resulted into turning content of files StyleResolver.js ResponderSystem.js ResponderTouchHistoryStore.js into classes.

All the above classes and the rootTag (for document and window global objects access) has to be propagated through the React tree to each component, so each component is aware to which window it belongs. This is achieved through new ReactRootView component which is new mandatory root of every RNW component. This component provides through RootContext access to the StyleResolver, ResponderSystem, root HTMLElement of the window. All the UI components are also refactored to use RootContext to access these.

By default AppRegistry create an the ReactRootView component, but if you want to use RNW without it you need to provide it by yourself as you can see in _app.js when it is added for Next.js support. Also for testing, default render function had to be replaced with renderRootContext which provides the ReactRootView. This is the only API change visible to the user.

With these changes you can create a child window which is still member of the React tree and all the code it still running in main window. To demonstrate this new functionality a multi-window example was created.

@necolas
Copy link
Owner

necolas commented Dec 30, 2021

There are too many major changes throughout the codebase to even begin reviewing this PR

@zarubond
Copy link
Contributor Author

There are too many major changes throughout the codebase to even begin reviewing this PR

Yeah its big :D. At first I thought, it will be just a few lines but this is the result. I am doing this work for one of the Microsoft applications and we would rely like to add this feature into the mainline. To get this merged I would create multiple PRs which are review-able.

But first, would you be even willing to accept this feature into the mainline at all and would it be possible to have some real-time chat (Skype call) where I can explain the inner workings and discuss how to get it in?

@zarubond zarubond closed this by deleting the head repository Jun 14, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants