Merge pull request #443 from martinbooth/remove_legacy_context_usage

Update project to work with latest react

Author: gre

.gitignore

@@ -13,3 +13,4 @@ packages/gl-react-dom/gl-react-dom.js
 packages/tests/node_modules_to_test/
 packages/cookbook/src/API.json
 examples/*/shared/
+.yarn

package.json

@@ -8,7 +8,7 @@
   "license": "MIT",
   "scripts": {
     "preinstall": "node -e \"if (process.env.npm_execpath.indexOf('yarn') === -1) { console.log('\u001b[31mPlease use yarn\u001b[0m'); process.exit(1); }\"",
-    "build": "./scripts/build.sh",
+    "build": "export NODE_OPTIONS=--openssl-legacy-provider && ./scripts/build.sh",
     "watch": "./scripts/watch.sh",
     "prettier": "prettier --write 'packages/{gl-react,gl-react-dom,gl-react-expo,gl-react-headless,gl-react-native}/src/*.js'",
     "test": "cd packages/tests && yarn test",

packages/gl-react-dom/src/GLViewDOM.js

@@ -3,7 +3,6 @@ import React, { Component } from "react";
 import PropTypes from "prop-types";
 import invariant from "invariant";
 import getContext from "./getContext";
-import loseGL from "./loseGL";
 
 const __DEV__ = process.env.NODE_ENV === "development";
 
@@ -114,7 +113,6 @@ export default class GLViewDOM extends Component<
 
   componentWillUnmount() {
     if (this.gl) {
-      loseGL(this.gl);
       this.gl = null;
     }
     const { canvas } = this;

packages/gl-react-dom/src/loseGL.js

@@ -17,7 +17,7 @@
     "react": "*"
   },
   "dependencies": {
-    "gl": "^5.0.0",
+    "gl": "^8.1.6",
     "invariant": "^2.2.4",
     "prop-types": "^15.7.2",
     "raf": "^3.4.1"

packages/gl-react-headless/package.json

@@ -28,7 +28,7 @@
     "react": "*"
   },
   "dependencies": {
-    "gl-shader": "^4.2.1",
+    "gl-shader": "^4.3.1",
     "invariant": "^2.2.4",
     "ndarray": "^1.0.19",
     "prop-types": "^15.7.2",

packages/gl-react/package.json

@@ -8,6 +8,7 @@ import genId from "./genId";
 
 import type { Surface } from "./createSurface";
 import type { NDArray } from "ndarray";
+import GLContext from "./GLContext";
 
 type Props = {|
   children?: React$Element<*> | ((redraw?: () => void) => React$Element<*>),
@@ -45,6 +46,8 @@ type Props = {|
  */
 export default class Bus extends Component<Props, *> {
   id: number = genId();
+  static contextType = GLContext;
+
   context: {
     glParent: Surface | Node,
     glSurface: Surface,
@@ -55,15 +58,6 @@ export default class Bus extends Component<Props, *> {
     index: 0,
   };
 
-  static contextTypes = {
-    glParent: PropTypes.object.isRequired,
-    glSurface: PropTypes.object.isRequired,
-  };
-
-  static childContextTypes = {
-    glParent: PropTypes.object.isRequired,
-  };
-
   componentDidMount() {
     const { uniform, index } = this.props;
     if (uniform) {
@@ -103,12 +97,6 @@ export default class Bus extends Component<Props, *> {
     this.redraw();
   }
 
-  getChildContext(): { glParent: Bus } {
-    return {
-      glParent: this,
-    };
-  }
-
   glNode: ?Node = null;
   _addGLNodeChild(node: Node) {
     this.glNode = node;
@@ -204,9 +192,17 @@ export default class Bus extends Component<Props, *> {
       glSurface: { RenderLessElement, mapRenderableContent },
     } = this.context;
     return (
-      <RenderLessElement ref={mapRenderableContent ? this.onRef : undefined}>
-        {typeof children === "function" ? children(this.redraw) : children}
-      </RenderLessElement>
+      <GLContext.Provider
+        value={{
+          glParent: this,
+          glSurface: this.context.glSurface,
+          glSizable: this.context.glSizable,
+        }}
+      >
+        <RenderLessElement ref={mapRenderableContent ? this.onRef : undefined}>
+          {typeof children === "function" ? children(this.redraw) : children}
+        </RenderLessElement>
+      </GLContext.Provider>
     );
   }
 }

packages/gl-react/src/Bus.js

@@ -0,0 +1,8 @@
+//@flow
+import React from "react";
+
+export default React.createContext<{
+  glParent: any,
+  glSurface: any,
+  glSizable: any,
+}>();

packages/gl-react/src/GLContext.js

@@ -18,6 +18,7 @@ import type { Shader } from "gl-shader";
 import type { NDArray } from "ndarray";
 import type { ShaderIdentifier, ShaderInfo, ShaderDefinition } from "./Shaders";
 import type { Surface, SurfaceContext } from "./createSurface";
+import GLContext from "./GLContext";
 
 const blendFuncAliases = {
   zero: "ZERO",
@@ -418,23 +419,7 @@ export default class Node extends Component<Props, *> {
     },
   };
 
-  static contextTypes = {
-    glParent: PropTypes.object.isRequired,
-    glSurface: PropTypes.object.isRequired,
-    glSizable: PropTypes.object.isRequired,
-  };
-
-  static childContextTypes = {
-    glParent: PropTypes.object.isRequired,
-    glSizable: PropTypes.object.isRequired,
-  };
-
-  getChildContext() {
-    return {
-      glParent: this,
-      glSizable: this,
-    };
-  }
+  static contextType = GLContext;
 
   componentDidMount() {
     const {
@@ -512,10 +497,18 @@ export default class Node extends Component<Props, *> {
       glSurface: { RenderLessElement },
     } = this.context;
     return (
-      <RenderLessElement>
-        {children}
-        {Object.keys(uniforms).map(this._renderUniformElement)}
-      </RenderLessElement>
+      <GLContext.Provider
+        value={{
+          glParent: this,
+          glSurface: this.context.glSurface,
+          glSizable: this,
+        }}
+      >
+        <RenderLessElement>
+          {children}
+          {Object.keys(uniforms).map(this._renderUniformElement)}
+        </RenderLessElement>
+      </GLContext.Provider>
     );
   }
 
@@ -725,10 +718,10 @@ export default class Node extends Component<Props, *> {
     newdeps: Array<Node | Bus>
   ): [Array<Bus | Node>, Array<Bus | Node>] {
     const olddeps = this.dependencies;
-    const additions = newdeps.filter((node) => olddeps.indexOf(node) === -1);
-    const deletions = olddeps.filter((node) => newdeps.indexOf(node) === -1);
-    additions.forEach((d) => d._addDependent(this));
-    deletions.forEach((d) => d._removeDependent(this));
+    const additions = newdeps.filter(node => olddeps.indexOf(node) === -1);
+    const deletions = olddeps.filter(node => newdeps.indexOf(node) === -1);
+    olddeps.forEach(d => d._removeDependent(this));
+    newdeps.forEach(d => d._addDependent(this));
     this.dependencies = newdeps;
     return [additions, deletions];
   }

packages/gl-react/src/Node.js

@@ -1,6 +1,7 @@
 //@flow
 import React, { Component } from "react";
 import PropTypes from "prop-types";
+import GLContext from "./GLContext";
 
 /**
  * A High Order Component (HOC) function that provides
@@ -33,12 +34,8 @@ const connectSize = (GLComponent: *) =>
       width: PropTypes.number,
       height: PropTypes.number,
     };
-    static contextTypes = {
-      glSizable: PropTypes.object.isRequired,
-    };
-    static childContextTypes = {
-      glSizable: PropTypes.object.isRequired,
-    };
+    static contextType = GLContext;
+
     getGLSize(): [number, number] {
       const {
         props: { width, height },
@@ -48,21 +45,24 @@ const connectSize = (GLComponent: *) =>
       const [cw, ch] = glSizable.getGLSize();
       return [width || cw, height || ch];
     }
-    getChildContext() {
-      return {
-        glSizable: this,
-      };
-    }
     render() {
       const { onConnectSizeComponentRef } = this.props;
       const [width, height] = this.getGLSize();
       return (
-        <GLComponent
-          ref={onConnectSizeComponentRef}
-          {...this.props}
-          width={width}
-          height={height}
-        />
+        <GLContext.Provider
+          value={{
+            glSizable: this,
+            glParent: this.context.glParent,
+            glSurface: this.context.glSurface,
+          }}
+        >
+          <GLComponent
+            ref={onConnectSizeComponentRef}
+            {...this.props}
+            width={width}
+            height={height}
+          />
+        </GLContext.Provider>
       );
     }
   };