Skip to content

Commit 37821b4

Browse files
martinboothmartinbooth
committed
Replace usage of legacy context api and remove loseGL
React double mounts/unmounts components and loseGL is not compatible with that Moved usage of the legacy context to newer context apis
1 parent d5845f3 commit 37821b4

File tree

12 files changed

+3779
-2938
lines changed

12 files changed

+3779
-2938
lines changed

‎.gitignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,3 +13,4 @@ packages/gl-react-dom/gl-react-dom.js
1313
packages/tests/node_modules_to_test/
1414
packages/cookbook/src/API.json
1515
examples/*/shared/
16+
.yarn

‎package.json‎

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

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

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@ import React, { Component } from "react";
33
import PropTypes from "prop-types";
44
import invariant from "invariant";
55
import getContext from "./getContext";
6-
import loseGL from "./loseGL";
76

87
const __DEV__ = process.env.NODE_ENV === "development";
98

@@ -114,7 +113,6 @@ export default class GLViewDOM extends Component<
114113

115114
componentWillUnmount() {
116115
if (this.gl) {
117-
loseGL(this.gl);
118116
this.gl = null;
119117
}
120118
const { canvas } = this;

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

Lines changed: 0 additions & 5 deletions
This file was deleted.

‎packages/gl-react-headless/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@
1717
"react": "*"
1818
},
1919
"dependencies": {
20-
"gl": "^5.0.0",
20+
"gl": "^8.1.6",
2121
"invariant": "^2.2.4",
2222
"prop-types": "^15.7.2",
2323
"raf": "^3.4.1"

‎packages/gl-react/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@
2828
"react": "*"
2929
},
3030
"dependencies": {
31-
"gl-shader": "^4.2.1",
31+
"gl-shader": "^4.3.1",
3232
"invariant": "^2.2.4",
3333
"ndarray": "^1.0.19",
3434
"prop-types": "^15.7.2",

‎packages/gl-react/src/Bus.js‎

Lines changed: 14 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import genId from "./genId";
88

99
import type { Surface } from "./createSurface";
1010
import type { NDArray } from "ndarray";
11+
import GLContext from "./GLContext";
1112

1213
type Props = {|
1314
children?: React$Element<*> | ((redraw?: () => void) => React$Element<*>),
@@ -45,6 +46,8 @@ type Props = {|
4546
*/
4647
export default class Bus extends Component<Props, *> {
4748
id: number = genId();
49+
static contextType = GLContext;
50+
4851
context: {
4952
glParent: Surface | Node,
5053
glSurface: Surface,
@@ -55,15 +58,6 @@ export default class Bus extends Component<Props, *> {
5558
index: 0,
5659
};
5760

58-
static contextTypes = {
59-
glParent: PropTypes.object.isRequired,
60-
glSurface: PropTypes.object.isRequired,
61-
};
62-
63-
static childContextTypes = {
64-
glParent: PropTypes.object.isRequired,
65-
};
66-
6761
componentDidMount() {
6862
const { uniform, index } = this.props;
6963
if (uniform) {
@@ -103,12 +97,6 @@ export default class Bus extends Component<Props, *> {
10397
this.redraw();
10498
}
10599

106-
getChildContext(): { glParent: Bus } {
107-
return {
108-
glParent: this,
109-
};
110-
}
111-
112100
glNode: ?Node = null;
113101
_addGLNodeChild(node: Node) {
114102
this.glNode = node;
@@ -204,9 +192,17 @@ export default class Bus extends Component<Props, *> {
204192
glSurface: { RenderLessElement, mapRenderableContent },
205193
} = this.context;
206194
return (
207-
<RenderLessElement ref={mapRenderableContent ? this.onRef : undefined}>
208-
{typeof children === "function" ? children(this.redraw) : children}
209-
</RenderLessElement>
195+
<GLContext.Provider
196+
value={{
197+
glParent: this,
198+
glSurface: this.context.glSurface,
199+
glSizable: this.context.glSizable,
200+
}}
201+
>
202+
<RenderLessElement ref={mapRenderableContent ? this.onRef : undefined}>
203+
{typeof children === "function" ? children(this.redraw) : children}
204+
</RenderLessElement>
205+
</GLContext.Provider>
210206
);
211207
}
212208
}

‎packages/gl-react/src/GLContext.js‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
//@flow
2+
import React from "react";
3+
4+
export default React.createContext<{
5+
glParent: any,
6+
glSurface: any,
7+
glSizable: any,
8+
}>();

‎packages/gl-react/src/Node.js‎

Lines changed: 14 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@ import type { Shader } from "gl-shader";
1818
import type { NDArray } from "ndarray";
1919
import type { ShaderIdentifier, ShaderInfo, ShaderDefinition } from "./Shaders";
2020
import type { Surface, SurfaceContext } from "./createSurface";
21+
import GLContext from "./GLContext";
2122

2223
const blendFuncAliases = {
2324
zero: "ZERO",
@@ -418,23 +419,7 @@ export default class Node extends Component<Props, *> {
418419
},
419420
};
420421

421-
static contextTypes = {
422-
glParent: PropTypes.object.isRequired,
423-
glSurface: PropTypes.object.isRequired,
424-
glSizable: PropTypes.object.isRequired,
425-
};
426-
427-
static childContextTypes = {
428-
glParent: PropTypes.object.isRequired,
429-
glSizable: PropTypes.object.isRequired,
430-
};
431-
432-
getChildContext() {
433-
return {
434-
glParent: this,
435-
glSizable: this,
436-
};
437-
}
422+
static contextType = GLContext;
438423

439424
componentDidMount() {
440425
const {
@@ -512,10 +497,18 @@ export default class Node extends Component<Props, *> {
512497
glSurface: { RenderLessElement },
513498
} = this.context;
514499
return (
515-
<RenderLessElement>
516-
{children}
517-
{Object.keys(uniforms).map(this._renderUniformElement)}
518-
</RenderLessElement>
500+
<GLContext.Provider
501+
value={{
502+
glParent: this,
503+
glSurface: this.context.glSurface,
504+
glSizable: this,
505+
}}
506+
>
507+
<RenderLessElement>
508+
{children}
509+
{Object.keys(uniforms).map(this._renderUniformElement)}
510+
</RenderLessElement>
511+
</GLContext.Provider>
519512
);
520513
}
521514

‎packages/gl-react/src/connectSize.js‎

Lines changed: 17 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
//@flow
22
import React, { Component } from "react";
33
import PropTypes from "prop-types";
4+
import GLContext from "./GLContext";
45

56
/**
67
* A High Order Component (HOC) function that provides
@@ -33,12 +34,8 @@ const connectSize = (GLComponent: *) =>
3334
width: PropTypes.number,
3435
height: PropTypes.number,
3536
};
36-
static contextTypes = {
37-
glSizable: PropTypes.object.isRequired,
38-
};
39-
static childContextTypes = {
40-
glSizable: PropTypes.object.isRequired,
41-
};
37+
static contextType = GLContext;
38+
4239
getGLSize(): [number, number] {
4340
const {
4441
props: { width, height },
@@ -48,21 +45,24 @@ const connectSize = (GLComponent: *) =>
4845
const [cw, ch] = glSizable.getGLSize();
4946
return [width || cw, height || ch];
5047
}
51-
getChildContext() {
52-
return {
53-
glSizable: this,
54-
};
55-
}
5648
render() {
5749
const { onConnectSizeComponentRef } = this.props;
5850
const [width, height] = this.getGLSize();
5951
return (
60-
<GLComponent
61-
ref={onConnectSizeComponentRef}
62-
{...this.props}
63-
width={width}
64-
height={height}
65-
/>
52+
<GLContext.Provider
53+
value={{
54+
glSizable: this,
55+
glParent: this.context.glParent,
56+
glSurface: this.context.glSurface,
57+
}}
58+
>
59+
<GLComponent
60+
ref={onConnectSizeComponentRef}
61+
{...this.props}
62+
width={width}
63+
height={height}
64+
/>
65+
</GLContext.Provider>
6666
);
6767
}
6868
};

0 commit comments

Comments
 (0)