Changes made to react-three-renderer-fiber to just get it working in react-native

changes.diff

diff --git a/src/bridge/React3.tsx b/src/bridge/React3.tsx
index 00d63f5..05b1ac5 100644
--- a/src/bridge/React3.tsx
+++ b/src/bridge/React3.tsx
@@ -1,8 +1,8 @@
 import * as React from "react";
 import {PureComponent} from "react";
-
 import * as ReactDOM from "react-dom";
 import ReactThreeRenderer from "../core/renderer/reactThreeRenderer";
+import { WebGLView } from 'react-native-webgl';

 declare global {
   namespace JSX {
@@ -12,6 +12,10 @@ declare global {
   }
 }

+class Foo {
+  static DEMO = 1;
+}
+
 interface IContextWrapperProps {
   testProps: number;
   onContextUpdate: (newContext: any) => void;
@@ -62,6 +66,7 @@ export interface IReact3Properties {
 }

 class React3 extends PureComponent<IReact3Properties, any> {
+
   private renderCount: number;
   private div: any;
   private fakeDOMContainerInfo: any;
@@ -98,7 +103,7 @@ class React3 extends PureComponent<IReact3Properties, any> {
       appendChild(/* */) {
         // Doing nothing here but still need to have a stub
       },
-      nodeType: document.ELEMENT_NODE,
+      nodeType: typeof document === 'undefined' ? null : document.ELEMENT_NODE,
       ownerDocument: {
         createElement: createFakeElement, // fake element gets created here
       },
@@ -114,16 +119,18 @@ class React3 extends PureComponent<IReact3Properties, any> {
   }

   public componentDidMount() {
-    if (this.props.contextPassThrough) {
-      ReactThreeRendererContext.childContextTypes = this.props.contextPassThrough;
-
-      ReactThreeRenderer.render(<ReactThreeRendererContext
-        context={this.passThroughContext}>
-        {this.props.children}
-      </ReactThreeRendererContext>, this.div);
-    } else {
-      ReactThreeRenderer.render(this.props.children as any, this.div);
-    }
+    // ReactThreeRenderer.render(this.props.children as any, this.div, gl);
+    // if (this.props.contextPassThrough) {
+    //   ReactThreeRendererContext.childContextTypes = this.props.contextPassThrough;
+
+    //   ReactThreeRenderer.render(<ReactThreeRendererContext
+    //     context={this.passThroughContext}>
+    //     {this.props.children}
+    //   </ReactThreeRendererContext>, this.div);
+    // } else {
+    //   // ReactThreeRenderer.render(this.props.children as any, this.div);
+    // }
+    // ReactThreeRenderer.render(this.props.children as any, this.div, new Foo());
   }

   public componentWillUnmount() {
@@ -134,6 +141,10 @@ class React3 extends PureComponent<IReact3Properties, any> {
     this.passThroughContext = newContext;
   }

+  public onContextCreate = (gl: WebGLRenderingContext) => {
+    ReactThreeRenderer.render(this.props.children as any, this.div, gl);
+  }
+
   public render() {
     this.renderCount++;

@@ -144,26 +155,34 @@ class React3 extends PureComponent<IReact3Properties, any> {

     const implementation: any = null;

-    if (this.props.contextPassThrough) {
-      ContextReceiver.contextTypes = this.props.contextPassThrough;
-
-      return (<div ref={this.divRef}>{
-        (ReactDOM as any).createPortal(
-          <ContextReceiver testProps={this.renderCount}
-                           onContextUpdate={this.onContextUpdate} />,
-          this.fakeDOMContainerInfo,
-          implementation,
-        )
-      }</div>);
-    } else {
-      return (<div ref={this.divRef}>{
-        (ReactDOM as any).createPortal(
-          <react-three-renderer-proxy testProps={this.renderCount} />,
-          this.fakeDOMContainerInfo,
-          implementation,
-        )
-      }</div>);
-    }
+    return  (
+      <WebGLView
+        ref={this.divRef}
+        style={{ width: 100, height: 100 }}
+        onContextCreate={this.onContextCreate}
+      />
+    );
+
+  //   if (this.props.contextPassThrough) {
+  //     ContextReceiver.contextTypes = this.props.contextPassThrough;
+
+  //     return (<div ref={this.divRef}>{
+  //       (ReactDOM as any).createPortal(
+  //         <ContextReceiver testProps={this.renderCount}
+  //                          onContextUpdate={this.onContextUpdate} />,
+  //         this.fakeDOMContainerInfo,
+  //         implementation,
+  //       )
+  //     }</div>);
+  //   } else {
+  //     return (<div ref={this.divRef}>{
+  //       (ReactDOM as any).createPortal(
+  //         <react-three-renderer-proxy testProps={this.renderCount} />,
+  //         this.fakeDOMContainerInfo,
+  //         implementation,
+  //       )
+  //     }</div>);
+  //   }
   }
 }

diff --git a/src/core/customRenderer/customReactRenderer.ts b/src/core/customRenderer/customReactRenderer.ts
index b883fd9..51748bb 100644
--- a/src/core/customRenderer/customReactRenderer.ts
+++ b/src/core/customRenderer/customReactRenderer.ts
@@ -1,13 +1,13 @@
 import {IFiber, IRenderer, ReactFiberReconciler} from "react-fiber-export";
 import {RenderAction} from "../renderer/hostDescriptors/descriptors/render";
 import {CustomReconcilerConfig} from "./createReconciler";
-import {hookDevtools} from "./utils/DevtoolsHelpers";
+// import {hookDevtools} from "./utils/DevtoolsHelpers";
 import isNonProduction from "./utils/isNonProduction";

 export interface IHostContext {
   triggerRender(): void;
-
   renderActionFound?(action: RenderAction): void;
+  gl: WebGLRenderingContext
 }

 function renderSubtreeIntoContainer(reconciler: IRenderer,
@@ -17,7 +17,8 @@ function renderSubtreeIntoContainer(reconciler: IRenderer,
                                     children: any,
                                     container: any,
                                     forceHydrate: boolean,
-                                    callback: () => void) {
+                                    callback: () => void,
+                                    gl: WebGLRenderingContext) {
   if (forceHydrate) {
     throw new Error("forceHydrate not implemented yet");
   }
@@ -45,9 +46,11 @@ function renderSubtreeIntoContainer(reconciler: IRenderer,
           // console.log("render action found", action);
           renderActionsForContainer.push(action);
         },
+        gl,
       };

       container[contextSymbol] = rootContext;
+      container.gl = gl;
     }

     root = newRoot;
@@ -67,7 +70,7 @@ export default class CustomReactRenderer {

   constructor(private reconcilerConfig: CustomReconcilerConfig<any>, wantsDevtools: boolean = true) {
     if (wantsDevtools && isNonProduction) {
-      hookDevtools(reconcilerConfig);
+      // hookDevtools(reconcilerConfig);
     }

     this.reconciler = ReactFiberReconciler(reconcilerConfig);
@@ -75,10 +78,12 @@ export default class CustomReactRenderer {

   public render<TProps>(element: React.ReactElement<TProps> | null,
                         container: any,
+                        gl: WebGLRenderingContext,
                         callback?: any): any | null;

   public render(elements: Array<React.ReactElement<any> | null>,
                 container: any,
+                gl: WebGLRenderingContext,
                 callback?: any): any[] | null ;

   public render<TProps>(element: //
@@ -86,6 +91,7 @@ export default class CustomReactRenderer {
                           | Array<React.ReactElement<any> | null>
                           | null,
                         container: any,
+                        gl: WebGLRenderingContext,
                         callback?: any): any | null {
     return renderSubtreeIntoContainer(this.reconciler,
       this.reconcilerConfig.getContextSymbol(),
@@ -94,10 +100,12 @@ export default class CustomReactRenderer {
       element,
       container,
       false,
-      callback);
+      callback,
+      gl);
   }

   public unmountComponentAtNode(container: any, callback?: () => void): any {
+    return;
     if (container[this.reconcilerConfig.getRootContainerSymbol()]) {
       // if (__DEV__) {
       //   const rootEl = getReactRootElementInContainer(container);
diff --git a/src/core/renderer/hostDescriptors/descriptors/webGLRenderer.ts b/src/core/renderer/hostDescriptors/descriptors/webGLRenderer.ts
index 7026942..36a0f51 100644
--- a/src/core/renderer/hostDescriptors/descriptors/webGLRenderer.ts
+++ b/src/core/renderer/hostDescriptors/descriptors/webGLRenderer.ts
@@ -1,3 +1,9 @@
+global.document = {
+  addEventListener() {},
+  removeEventListener() {},
+  createElementNS() {},
+};
+
 import {
   Camera,
   PerspectiveCamera,
@@ -5,20 +11,35 @@ import {
   Scene,
   WebGLRenderer,
   WebGLRendererParameters,
-} from "three";
-import * as THREE from "three";
+} from 'three';
+import * as THREE from 'three';
 import ReactThreeRenderer from "../../reactThreeRenderer";
 import {IThreeElementPropsBase} from "../common/IReactThreeRendererElement";
 import {getWrappedAttributes, WrappedEntityDescriptor, WrapperDetails} from "../common/ObjectWrapper";

-function createRendererWithoutLogging(parameters: IWebGLRendererProps): WebGLRenderer {
+
+
+const HTMLCanvasElement = () => {};
+
+function createRendererWithoutLogging(parameters: IWebGLRendererProps, context): WebGLRenderer {
+
   const oldLog = window.console.log;

   window.console.log = () => {
     /* no-op on purpose */
   };

-  const renderer = new WebGLRenderer(parameters);
+  const renderer = new WebGLRenderer({
+    canvas: {
+      width: 100,
+      height: 100,
+      style: {},
+      addEventListener: () => {},
+      removeEventListener: () => {},
+      clientHeight: 100
+    },
+    context,
+  });

   renderer.autoClear = parameters.autoClear !== false;

@@ -35,6 +56,7 @@ export class RendererWrapperDetails extends WrapperDetails<IWebGLRendererProps,
   private containerIsCanvas: boolean;

   public willBeAddedToParent(instance: WebGLRenderer, parent: Node): boolean {
+
     if ((this.wrappedObject != null)) {
       throw new Error("Something really funky is going on here");
     }
@@ -47,11 +69,11 @@ export class RendererWrapperDetails extends WrapperDetails<IWebGLRendererProps,
       propsToUse.canvas = parent;
     }

-    const webglRenderer = createRendererWithoutLogging(propsToUse);
+    const webglRenderer = createRendererWithoutLogging(propsToUse, parent.gl);

-    if (!this.containerIsCanvas) {
-      parent.appendChild(webglRenderer.domElement);
-    }
+    // if (!this.containerIsCanvas) {
+    //   parent.appendChild(webglRenderer.domElement);
+    // }

     this.wrapObject(webglRenderer);

@@ -59,6 +81,7 @@ export class RendererWrapperDetails extends WrapperDetails<IWebGLRendererProps,
   }

   public willBeAddedToParentBefore(instance: WebGLRenderer, parent: Node, before: any): boolean {
+    console.log('props', this);
     if (this.wrappedObject !== null || this.wrappedObject !== undefined) {
       throw new Error("Something really funky is going on here");
     }
diff --git a/src/core/renderer/reconciler/r3rReconcilerConfig.ts b/src/core/renderer/reconciler/r3rReconcilerConfig.ts
index 708b2aa..c7ffffc 100644
--- a/src/core/renderer/reconciler/r3rReconcilerConfig.ts
+++ b/src/core/renderer/reconciler/r3rReconcilerConfig.ts
@@ -2,22 +2,16 @@ import ContainerUnawareReconcilerConfig from "../../customRenderer/ContainerUnaw
 import {IPropMap} from "../../customRenderer/createReconciler";
 import {IHostContext} from "../../customRenderer/customReactRenderer";
 import ReactThreeRendererDescriptor from "../hostDescriptors/common/ReactThreeRendererDescriptor";
+import descriptors from '../hostDescriptors/descriptors';

 declare function require(filename: string): any;

-const descriptorsRequireContext = (require as any).context("../hostDescriptors/descriptors/", true, /\.ts$/);
-
 export class ReactThreeReconcilerConfig extends ContainerUnawareReconcilerConfig<ReactThreeRendererDescriptor> {
   constructor() {
     super();
-
-    descriptorsRequireContext
-      .keys()
-      .forEach((key: string) => {
-        const name = key.match(/(\w+)\.ts$/);
-        if (name !== null) {
-          this.defineHostDescriptor(name[1], new (descriptorsRequireContext(key).default)());
-        }
+    Object.entries(descriptors)
+      .forEach(([name, Module]) => {
+        this.defineHostDescriptor(name, new Module());
       });
   }

descriptors.ts

/**
 * require.context is not available for react-native
 * so we have to manually import the descriptors. It sucks.
 */
import viewport from './viewport';
import render from './render';
import webGLRenderer from './webGLRenderer';
// materials
import lineBasicMaterial from './materials/lineBasicMaterial';
import meshLambertMaterial from './materials/meshLambertMaterial';
import meshBasicMaterial from './materials/meshBasicMaterial';
import pointsMaterial from './materials/pointsMaterial';
import material from './materials/material';
// objects
import threeLine from './objects/threeLine';
import cameraHelper from './objects/cameraHelper'
import group from './objects/group';
import object3D from './objects/object3D';
import mesh from './objects/mesh';
import scene from './objects/scene';
import orthographicCamera from './objects/orthographicCamera';
import points from './objects/points';
import perspectiveCamera from './objects/perspectiveCamera';
// objects/lights
import pointLight from './objects/lights/pointLight';
// objects/lights/shadows
import pointLightShadow from './objects/lights/shadows/pointLightShadow';
// geometries
import boxGeometry from './geometries/boxGeometry';
import dodecahedronGeometry from './geometries/dodecahedronGeometry';
import geometry from './geometries/geometry';
import cylinderGeometry from './geometries/cylinderGeometry';
import extrudeGeometry from './geometries/extrudeGeometry';
import coneGeometry from './geometries/coneGeometry';
import circleGeometry from './geometries/circleGeometry';
import sphereGeometry from './geometries/sphereGeometry';
import icosahedronGeometry from './geometries/icosahedronGeometry';
import latheGeometry from './geometries/latheGeometry';

export default {
 'viewport': viewport,
 'render': render,
 'webGLRenderer': webGLRenderer,
 'lineBasicMaterial': lineBasicMaterial,
 'meshLambertMaterial': meshLambertMaterial,
 'meshBasicMaterial': meshBasicMaterial,
 'pointsMaterial': pointsMaterial,
 'material': material,
 'threeLine': threeLine,
 'group': group,
 'object3D': object3D,
 'mesh': mesh,
 'scene': scene,
 'orthographicCamera': orthographicCamera,
 'points': points,
 'perspectiveCamera': perspectiveCamera,
 'pointLight': pointLight,
 'pointLightShadow': pointLightShadow,
 'boxGeometry': boxGeometry,
 'dodecahedronGeometry': dodecahedronGeometry,
 'geometry': geometry,
 'cylinderGeometry': cylinderGeometry,
 'extrudeGeometry': extrudeGeometry,
 'coneGeometry': coneGeometry,
 'circleGeometry': circleGeometry,
 'sphereGeometry': sphereGeometry,
 'icosahedronGeometry': icosahedronGeometry,
 'latheGeometry': latheGeometry,
};