Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Draft] Support for multiple windows/iframes #2185

Draft
wants to merge 5 commits into
base: master
Choose a base branch
from

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?

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.

None yet

2 participants