[Draft] Support for multiple windows/iframes #2185
Draft
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
This PR is just a DRAFT and placeholder with description. The code changes will be spited into smaller, easier to review PRs.
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.