Merge pull request #52 from nodegui/feature/hot-reload

Adds hot reloading support for react nodegui

Author: a7ul

extras/assets/nodegui.png

@@ -20,10 +20,12 @@
     "docs": "typedoc"
   },
   "dependencies": {
+    "react-deep-force-update": "^2.1.3",
+    "react-proxy": "^2.0.8",
     "react-reconciler": "^0.21.0"
   },
   "peerDependencies": {
-    "@nodegui/nodegui": "*",
+    "@nodegui/nodegui": ">=0.3.0",
     "@nodegui/qode": "*",
     "react": "^16.9.0"
   },

extras/assets/nodegui_white.png

@@ -20,6 +20,7 @@ class WindowConfig extends ComponentConfig {
     const rootViewLayout = new FlexLayout();
     rootViewLayout.setFlexNode(rootView.getFlexNode());
     rootView.setLayout(rootViewLayout);
+    rootView.setInlineStyle("width:'100%'; height:'100%';");
     window.setCentralWidget(rootView);
     window.setProps(newProps, {});
     return window;

package-lock.json

@@ -5,7 +5,15 @@ import { AppContainer } from "../reconciler";
 type UpdatePayload = any;
 
 export interface RNProps {}
-export abstract class RNWidget extends NodeWidget {
+export abstract class RNWidget extends NodeWidget implements RNComponent {
+  static tagName: string;
+  abstract setProps(newProps: RNProps, oldProps: RNProps): void;
+  abstract appendInitialChild(child: NodeWidget): void;
+  abstract appendChild(child: NodeWidget): void;
+  abstract insertBefore(child: NodeWidget, beforeChild: NodeWidget): void;
+  abstract removeChild(child: NodeWidget): void;
+}
+export abstract class RNComponent {
   static tagName: string;
   abstract setProps(newProps: RNProps, oldProps: RNProps): void;
   abstract appendInitialChild(child: NodeWidget): void;
@@ -24,25 +32,25 @@ export abstract class ComponentConfig {
     rootInstance: AppContainer,
     context: any,
     workInProgress: Fiber
-  ): NodeWidget;
+  ): RNComponent;
   finalizeInitialChildren(
-    instance: NodeWidget,
+    instance: RNComponent,
     newProps: RNProps,
     rootContainerInstance: AppContainer,
     context: any
   ) {
     return false;
   }
   commitMount(
-    instance: NodeWidget,
+    instance: RNComponent,
     newProps: RNProps,
     internalInstanceHandle: any
   ) {
     return;
   }
   // Update methods:
   prepareUpdate(
-    instance: NodeWidget,
+    instance: RNComponent,
     oldProps: RNProps,
     newProps: RNProps,
     rootContainerInstance: AppContainer,
@@ -51,7 +59,7 @@ export abstract class ComponentConfig {
     return true;
   }
   abstract commitUpdate(
-    instance: NodeWidget,
+    instance: RNComponent,
     updatePayload: any,
     oldProps: RNProps,
     newProps: RNProps,

package.json

@@ -0,0 +1,13 @@
+import createProxy, { ReactProxyComponent } from "react-proxy";
+import React from "react";
+
+export let appProxy: ReactProxyComponent; // need to export it so that it stays without being gc'd
+
+export function hot(Component: React.ComponentType): React.ComponentType {
+  if (appProxy) {
+    appProxy.update(Component);
+  } else {
+    appProxy = createProxy(Component);
+  }
+  return appProxy.get();
+}

src/components/Window/index.ts

@@ -0,0 +1,9 @@
+declare module "react-proxy" {
+  interface ReactProxyComponent {
+    update(Component: React.ComponentType): void;
+    get(): React.ComponentType;
+  }
+  export default function createProxy(
+    Component: React.ComponentType
+  ): ReactProxyComponent;
+}

src/components/config.ts

@@ -13,3 +13,4 @@ export { Dial } from "./components/Dial";
 export { SpinBox } from "./components/SpinBox";
 export { ScrollArea } from "./components/ScrollArea";
 export { useEventHandler } from "./hooks";
+export { hot, appProxy } from "./development/hot-reload";

src/development/hot-reload/index.ts

@@ -1,6 +1,11 @@
 import Reconciler from "react-reconciler";
 import { NodeWidget } from "@nodegui/nodegui";
-import { getComponentByTagName, RNWidget, RNProps } from "../components/config";
+import {
+  getComponentByTagName,
+  RNWidget,
+  RNProps,
+  RNComponent
+} from "../components/config";
 
 export type AppContainer = Set<NodeWidget>;
 export const appContainer: AppContainer = new Set<NodeWidget>();
@@ -9,7 +14,7 @@ const HostConfig: Reconciler.HostConfig<
   string,
   RNProps,
   AppContainer,
-  NodeWidget,
+  RNComponent,
   any,
   any,
   any,