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

a7ul · web-flow · commit c4a23d866e24 · 2019-11-03T15:26:18.000+01:00
Adds hot reloading support for react nodegui
diff --git a/extras/assets/nodegui.png b/extras/assets/nodegui.png
diff --git a/extras/assets/nodegui_white.png b/extras/assets/nodegui_white.png
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -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"
   },
diff --git a/src/components/Window/index.ts b/src/components/Window/index.ts
@@ -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;
diff --git a/src/components/config.ts b/src/components/config.ts
@@ -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,
diff --git a/src/development/hot-reload/index.ts b/src/development/hot-reload/index.ts
@@ -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();
+}
diff --git a/src/development/hot-reload/react-proxy.d.ts b/src/development/hot-reload/react-proxy.d.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;
+}
diff --git a/src/index.ts b/src/index.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";
diff --git a/src/reconciler/index.ts b/src/reconciler/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,
diff --git a/src/renderer/index.ts b/src/renderer/index.ts
@@ -1,8 +1,12 @@
 import reconciler, { appContainer } from "../reconciler";
-import { Reconciler } from "react-reconciler";
+import ReactReconciler, { Reconciler } from "react-reconciler";
+import React from "react";
 import { NodeWidget } from "@nodegui/nodegui";
+import { RNComponent } from "../components/config";
+//@ts-ignore
+import deepForceUpdate from "react-deep-force-update";
 
-type NodeGuiReconciler = Reconciler<NodeWidget, any, Set<NodeWidget>, any>;
+type NodeGuiReconciler = Reconciler<RNComponent, any, Set<NodeWidget>, any>;
 
 export type RendererOptions = {
   onRender?: () => void;
@@ -13,15 +17,23 @@ const defaultOptions = {
   onRender: () => {}
 };
 
-export const Renderer = {
-  render(element: React.ReactNode, options?: RendererOptions) {
+export class Renderer {
+  static container?: ReactReconciler.FiberRoot;
+  static forceUpdate() {
+    if (Renderer.container) {
+      //@ts-ignore
+      Renderer.container._reactInternalInstance = Renderer.container.current;
+      deepForceUpdate(Renderer.container);
+    }
+  }
+  static render(element: React.ReactNode, options?: RendererOptions) {
     const containerInfo = appContainer;
     const isConcurrent = false; //disabling since there seems to be a bug with onclick listeneres (when called without a console.log inside them)
     const hydrate = false;
 
     const rendererOptions = Object.assign({}, defaultOptions, options);
 
-    const container = reconciler.createContainer(
+    Renderer.container = reconciler.createContainer(
       containerInfo,
       isConcurrent,
       hydrate
@@ -30,8 +42,13 @@ export const Renderer = {
     rendererOptions.onInit(reconciler);
 
     const parentComponent = null; // Since there is no parent (since this is the root fiber). We set parentComponent to null.
-    reconciler.updateContainer(element, container, parentComponent, () => {
-      rendererOptions.onRender();
-    }); // Start reconcilation and render the result
+    reconciler.updateContainer(
+      element,
+      Renderer.container,
+      parentComponent,
+      () => {
+        rendererOptions.onRender();
+      }
+    ); // Start reconcilation and render the result
   }
-};
+}
diff --git a/tsconfig.json b/tsconfig.json
@@ -11,7 +11,7 @@
     "esModuleInterop": true,
     "resolveJsonModule": true
   },
-  "include": ["src"],
+  "include": ["./src/**/*"],
   "exclude": ["dist"],
   "typedocOptions": {
     "mode": "file",
