feat(RCTRootView): Begin work on decoupling the root view from the do…

…cument's body

As of now, RNDom assumes that the application takes up the entirety of the window and is the sole
application on the page. This begins the work of being able to embed an RNDom application into a
subview of an existing app, allowing for incremental adoption.

packages/react-native-dom/ReactDom/DevSupport/RCTDevLoadingView.js

@@ -54,9 +54,7 @@ class RCTDevLoadingView {
  transform: "translateY(-22px)",
  overflow: "hidden"
  });
- if (document.documentElement) {
- document.documentElement.appendChild(this.view);
- }
+ this.bridge.parent.appendChild(this.view);
  }
 
  updateView() {

packages/react-native-dom/ReactDom/bridge/RCTBridge.js

@@ -157,6 +157,7 @@ export default class RCTBridge {
  moduleName: string;
  bundleLocation: string;
  loading: boolean;
+ parent: HTMLElement;
 
  _uiManager: ?RCTUIManager;
  _eventDispatcher: ?RCTEventDispatcher;
@@ -171,12 +172,14 @@ export default class RCTBridge {
  constructor(
  moduleName: string,
  bundle: string,
- nativeModules: NativeModuleImports
+ nativeModules: NativeModuleImports,
+ parent: HTMLElement
  ) {
  this.loading = true;
  this.moduleName = moduleName;
  this.bundleLocation = bundle;
  this.nativeModules = nativeModules;
+ this.parent = parent;
 
  const bridgeCodeBlob = new Blob([WORKER_SRC]);
  const worker = new Worker(URL.createObjectURL(bridgeCodeBlob));

packages/react-native-dom/ReactDom/bridge/RCTRootView.js

@@ -16,13 +16,6 @@ import type { NativeModuleImports } from "RCTModule";
 
 declare var __DEV__: boolean;
 
-function getAvailableSize() {
- return {
- width: window.innerWidth,
- height: window.innerHeight
- };
-}
-
 @CustomElement("rct-root-view")
 // $FlowFixMe
 class RCTRootView extends UIView {
@@ -64,7 +57,7 @@ class RCTRootView extends UIView {
  this.updateHostStyle("touchAction", "none");
  this.setAttribute("touch-action", "none");
 
- const bridge = new RCTBridge(moduleName, bundle, nativeModules);
+ const bridge = new RCTBridge(moduleName, bundle, nativeModules, parent);
  this.initialization = this.initializeBridge(bridge);
  }
 

packages/react-native-dom/ReactDom/index.js

@@ -95,7 +95,8 @@ if (__DEV__) {
 
 type RNDomInstanceOptions = {
  enableHotReload?: boolean,
- nativeModules?: any[]
+ nativeModules?: any[],
+ bundleFromRoot?: boolean
 };
 
 // React Native Web Entrypoint instance
@@ -116,8 +117,12 @@ export class RNDomInstance {
  ? options.nativeModules
  : [];
 
+ const shouldBundleFromRoot = options.shouldBundleFromRoot
+ ? options.shouldBundleFromRoot
+ : true;
+
  this.rootView = new RCTRootView(
- bundleFromRoot(bundle),
+ shouldBundleFromRoot ? bundleFromRoot(bundle) : bundle,
  moduleName,
  parent,
  enableHotReload,

packages/react-native-dom/ReactDom/modules/RCTDeviceInfo.js

@@ -3,20 +3,28 @@
  * @flow
  */
 
+import ResizeObserver from "resize-observer-polyfill";
+
 import RCTBridge, { RCT_EXPORT_METHOD, RCT_EXPORT_MODULE } from "RCTBridge";
 import RCTEventEmitter from "RCTNativeEventEmitter";
 
 @RCT_EXPORT_MODULE("RCTDeviceInfo")
 class RCTDeviceInfo extends RCTEventEmitter {
+ didUpdateDimensions = () => {
+ this.sendEventWithName("didUpdateDimensions", this.exportedDimensions());
+ };
+
+ resizeObserver = new ResizeObserver(this.didUpdateDimensions);
+
  startObserving() {
- window.addEventListener("resize", this.didUpdateDimensions, false);
+ this.resizeObserver.observe(this.bridge.parent);
  window
  .matchMedia("screen and (min-resolution: 2dppx)")
  .addListener(this.didUpdateDimensions);
  }
 
  stopObserving() {
- window.removeEventListener("resize", this.didUpdateDimensions, false);
+ this.resizeObserver.unobserve(this.bridge.parent);
  window
  .matchMedia("screen and (min-resolution: 2dppx)")
  .removeEventListener(this.didUpdateDimensions);
@@ -34,8 +42,8 @@ class RCTDeviceInfo extends RCTEventEmitter {
 
  exportedDimensions() {
  const dims = {
- width: Math.ceil(window.innerWidth),
- height: Math.ceil(window.innerHeight),
+ width: Math.ceil(this.bridge.parent.offsetWidth),
+ height: Math.ceil(this.bridge.parent.offsetHeight),
  scale: this.getDevicePixelRatio(),
  fontScale: 1
  };
@@ -64,10 +72,6 @@ class RCTDeviceInfo extends RCTEventEmitter {
  // so set max ratio to 2
  return Math.min(ratio, 2);
  }
-
- didUpdateDimensions = () => {
- this.sendEventWithName("didUpdateDimensions", this.exportedDimensions());
- };
 }
 
 export default RCTDeviceInfo;

packages/react-native-dom/ReactDom/modules/RedBox/RCTRedBox.js

@@ -33,9 +33,8 @@ class RCTRedBox {
 
  this.domRoot = document.createElement("div");
  this.domRoot.setAttribute("id", "redbox");
- if (document.documentElement) {
- document.documentElement.appendChild(this.domRoot);
- }
+
+ bridge.parent.appendChild(this.domRoot);
  }
 
  dismiss = () => {

packages/react-native-dom/package.json

@@ -62,6 +62,7 @@
  "normalize-css-color": "^1.0.2",
  "opn": "^5.2.0",
  "pepjs": "^0.4.3",
+ "resize-observer-polyfill": "^1.5.0",
  "rndom-redbox": "0.1.1",
  "rndom-switch": "0.1.1",
  "tinycolor2": "^1.4.1",

yarn.lock

@@ -7404,6 +7404,10 @@ require-uncached@^1.0.3:
  caller-path "^0.1.0"
  resolve-from "^1.0.0"
 
+resize-observer-polyfill@^1.5.0:
+ version "1.5.0"
+ resolved "https://registry.yarnpkg.com/resize-observer-polyfill/-/resize-observer-polyfill-1.5.0.tgz#660ff1d9712a2382baa2cad450a4716209f9ca69"
+
 resolve-from@^1.0.0:
  version "1.0.1"
  resolved "https://registry.yarnpkg.com/resolve-from/-/resolve-from-1.0.1.tgz#26cbfe935d1aeeeabb29bc3fe5aeb01e93d44226"