fix: make yarn build work cleanly (node-modules linker + TypeScript)

.yarnrc.yml

@@ -0,0 +1 @@
+nodeLinker: node-modules

babel.config.js

@@ -10,6 +10,6 @@ module.exports = {
       },
     ],
     "@babel/preset-react",
-    "@babel/preset-typescript",
+    ["@babel/preset-typescript", { allowDeclareFields: true }],
   ],
 };

package.json

@@ -24,7 +24,8 @@
     "fast-uri": "^3.1.2",
     "follow-redirects": "^1.16.0",
     "ip-address": "^10.2.0",
-    "@xmldom/xmldom": "^0.8.13"
+    "@xmldom/xmldom": "^0.8.13",
+    "gl": "9.0.0-rc.9"
   },
   "devDependencies": {
     "@babel/cli": "^7.26.0",

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

@@ -145,7 +145,7 @@ export default class GLViewDOM extends Component<
       );
     for (let k in propTypes) {
       if (rest.hasOwnProperty(k)) {
-        delete rest[k];
+        delete (rest as any)[k];
       }
     }
     return (
@@ -177,7 +177,7 @@ export default class GLViewDOM extends Component<
       debug
         ? { ...webglContextAttributes, preserveDrawingBuffer: true }
         : webglContextAttributes,
-      version || "auto"
+      (version || "auto") as "webgl" | "webgl2" | "auto"
     );
     this.webglContextAttributes = webglContextAttributes || {};
     return gl;

packages/gl-react-dom/src/getContext.ts

@@ -5,19 +5,19 @@ const getContext = (
 ) => {
   let gl: WebGLRenderingContext | null = null;
   if (version === "webgl2" || version === "auto") {
-    gl = canvas.getContext("webgl2", opts) as WebGLRenderingContext | null;
+    gl = canvas.getContext("webgl2", opts) as unknown as WebGLRenderingContext | null;
   }
   if (!gl && (version === "webgl" || version === "auto")) {
     gl =
-      (canvas.getContext("webgl", opts) as WebGLRenderingContext | null) ||
+      (canvas.getContext("webgl", opts) as unknown as WebGLRenderingContext | null) ||
       (canvas.getContext(
         "webgl-experimental" as any,
         opts
-      ) as WebGLRenderingContext | null) ||
+      ) as unknown as WebGLRenderingContext | null) ||
       (canvas.getContext(
         "experimental-webgl" as any,
         opts
-      ) as WebGLRenderingContext | null);
+      ) as unknown as WebGLRenderingContext | null);
   }
   return gl;
 };

packages/gl-react-expo/src/GLViewNative.tsx

@@ -55,6 +55,7 @@ export default class GLViewNative extends Component<{
         style={[{ position: "relative", overflow: "hidden" }, style]}
       >
         <EXGLView
+          {...({} as any)}
           style={[
             style,
             {

packages/gl-react-expo/src/globals.d.ts

@@ -0,0 +1,8 @@
+declare module "react-native" {
+  export const View: any;
+}
+declare const __DEV__: boolean;
+declare var global: typeof globalThis & {
+  requestAnimationFrame: (callback: FrameRequestCallback) => number;
+  cancelAnimationFrame: (id: number) => void;
+};

packages/gl-react-headless/src/index.tsx

@@ -91,7 +91,7 @@ class GLView extends Component<{
   render() {
     const { width, height, debug, children, ...rest } = this.props;
     for (let k in propTypes) {
-      delete rest[k];
+      delete (rest as any)[k];
     }
     return (
       <canvas ref={this.onRef} width={width} height={height} {...rest}>

packages/gl-react-native/src/globals.d.ts

@@ -0,0 +1,7 @@
+declare module "react-native" {
+  export const View: any;
+}
+declare var global: typeof globalThis & {
+  requestAnimationFrame: (callback: FrameRequestCallback) => number;
+  cancelAnimationFrame: (id: number) => void;
+};

packages/gl-react/src/Bus.tsx

@@ -22,7 +22,7 @@ export default class Bus extends Component<Props, any> {
   id: number = genId();
   static contextType = GLContext;
 
-  context!: {
+  declare context: {
     glParent: any;
     glSurface: any;
     glSizable: any;

packages/gl-react/src/Node.tsx

@@ -286,7 +286,7 @@ const NodePropTypes = {
  */
 export default class Node extends Component<Props, any> {
   drawProps: Props = this.props;
-  context!: SurfaceContext;
+  declare context: SurfaceContext;
   framebuffer?: Framebuffer;
   backbuffer?: Framebuffer;
   _needsRedraw: boolean = false;

packages/gl-react/src/connectSize.tsx

@@ -13,7 +13,7 @@ const connectSize = (GLComponent: any) =>
     children?: any;
     onConnectSizeComponentRef?: (ref: any) => void;
   }> {
-    context!: {
+    declare context: {
       glSizable: { getGLSize: () => [number, number] };
       glParent: any;
       glSurface: any;

packages/gl-react/tsconfig.json

@@ -14,7 +14,7 @@
     "outDir": "lib",
     "rootDir": "src",
     "composite": true,
-    "typeRoots": ["./src/types"]
+    "typeRoots": ["./src/types", "../../node_modules/@types"]
   },
   "include": ["src/**/*.ts", "src/**/*.tsx"],
   "exclude": ["lib", "node_modules"]

packages/tests/package.json

@@ -18,8 +18,8 @@
   },
   "version": "5.2.1",
   "dependencies": {
-    "gl-react": "^5.2.0",
-    "gl-react-headless": "^5.2.1",
+    "gl-react": "^6.0.0",
+    "gl-react-headless": "^6.0.0",
     "gl-texture2d": "^2.0.12",
     "invariant": "^2.2.4",
     "jest": "^29.7.0",

scripts/build.sh

@@ -7,7 +7,7 @@ export BABEL_ENV=production
 
 for d in ./packages/gl-react*; do
   cd $d
-  rm -rf lib
+  rm -rf lib *.tsbuildinfo
   babel --root-mode upward --source-maps --extensions '.ts,.tsx' -d lib src
   cd - 1> /dev/null
 done