Merge pull request #30751 from jussikinnula/change-gl-react-subpackages-props-optional

Change gl-react + gl-react subpackages some props to optional + add tests

types/gl-react-dom/GLViewDOM.d.ts

@@ -4,10 +4,10 @@ export type SupportedImage = 'image/png' | 'image/jpeg' | 'image/bmp' | 'image/w
 export type ValidQuality = 0.0 | 0.1 | 0.2 | 0.3 | 0.4 | 0.5 | 0.6 | 0.7 | 0.8 | 0.9 | 1.0;
 
 export interface GLViewDOMProps {
-  onContextCreate: (gl: WebGLRenderingContext) => void;
-  onContextFailure: (e: Error) => void;
-  onContextLost: () => void;
-  onContextRestored: (gl: WebGLRenderingContext) => void;
+  onContextCreate?: (gl: WebGLRenderingContext) => void;
+  onContextFailure?: (e: Error) => void;
+  onContextLost?: () => void;
+  onContextRestored?: (gl: WebGLRenderingContext) => void;
   webglContextAttributes?: WebGLContextAttributes;
   pixelRatio?: number;
   width: number;

types/gl-react-dom/gl-react-dom-tests.tsx

@@ -0,0 +1,27 @@
+import * as React from 'react';
+import * as ReactDOM from 'react-dom';
+import { Surface } from 'gl-react-dom';
+import { Shaders, GLSL, Node } from 'gl-react';
+
+const shaders = Shaders.create({
+  Test: {
+    frag: GLSL`
+      precision highp float;
+      varying vec2 uv;
+      void main() {
+        gl_FragColor = vec4(uv.x, uv.y, 0.5, 1.0);
+      }`
+  }
+});
+
+const App = () => (
+  <div>
+    <Surface width={640} height={480}>
+      <Node shader={shaders.HelloBlue} />
+    </Surface>
+  </div>
+);
+
+const element = document.createElement('div');
+document.body.appendChild(element);
+ReactDOM.render(<App />, element);

types/gl-react-dom/tsconfig.json

@@ -1,6 +1,7 @@
 {
   "files": [
-    "index.d.ts"
+    "index.d.ts",
+    "gl-react-dom-tests.tsx"
   ],
   "compilerOptions": {
     "module": "commonjs",

types/gl-react-expo/GLViewNative.d.ts

@@ -3,7 +3,7 @@ import * as React from 'react';
 // import { GLView as EXGLView } from 'expo';
 
 export interface GLViewNativeProps {
-  onContextCreate: (gl: WebGLRenderingContext) => void;
+  onContextCreate?: (gl: WebGLRenderingContext) => void;
   style?: any;
   children?: any;
 }

types/gl-react-expo/gl-react-expo-tests.tsx

@@ -0,0 +1,27 @@
+import * as React from 'react';
+import * as ReactDOM from 'react-dom';
+import { Surface } from 'gl-react-expo';
+import { Shaders, GLSL, Node } from 'gl-react';
+
+const shaders = Shaders.create({
+  Test: {
+    frag: GLSL`
+      precision highp float;
+      varying vec2 uv;
+      void main() {
+        gl_FragColor = vec4(uv.x, uv.y, 0.5, 1.0);
+      }`
+  }
+});
+
+const App = () => (
+  <div>
+    <Surface>
+      <Node shader={shaders.HelloBlue} />
+    </Surface>
+  </div>
+);
+
+const element = document.createElement('div');
+document.body.appendChild(element);
+ReactDOM.render(<App />, element);

types/gl-react-expo/tsconfig.json

@@ -1,6 +1,7 @@
 {
   "files": [
-    "index.d.ts"
+    "index.d.ts",
+    "gl-react-expo-tests.tsx"
   ],
   "compilerOptions": {
     "module": "commonjs",

types/gl-react-headless/GLViewHeadless.d.ts

@@ -1,10 +1,10 @@
 import * as React from 'react';
 
 export interface GLViewHeadlessProps {
-  onContextCreate: (gl: WebGLRenderingContext) => void;
-  onContextFailure: (e: Error) => void;
-  onContextLost: () => void;
-  onContextRestored: (gl: WebGLRenderingContext) => void;
+  onContextCreate?: (gl: WebGLRenderingContext) => void;
+  onContextFailure?: (e: Error) => void;
+  onContextLost?: () => void;
+  onContextRestored?: (gl: WebGLRenderingContext) => void;
   webglContextAttributes?: WebGLContextAttributes;
   pixelRatio?: number;
   width: number;

types/gl-react-headless/gl-react-headless-tests.tsx

@@ -0,0 +1,27 @@
+import * as React from 'react';
+import * as ReactDOM from 'react-dom';
+import { Surface } from 'gl-react-headless';
+import { Shaders, GLSL, Node } from 'gl-react';
+
+const shaders = Shaders.create({
+  Test: {
+    frag: GLSL`
+      precision highp float;
+      varying vec2 uv;
+      void main() {
+        gl_FragColor = vec4(uv.x, uv.y, 0.5, 1.0);
+      }`
+  }
+});
+
+const App = () => (
+  <div>
+    <Surface width={640} height={480}>
+      <Node shader={shaders.HelloBlue} />
+    </Surface>
+  </div>
+);
+
+const element = document.createElement('div');
+document.body.appendChild(element);
+ReactDOM.render(<App />, element);

types/gl-react-headless/tsconfig.json

@@ -1,6 +1,7 @@
 {
   "files": [
-    "index.d.ts"
+    "index.d.ts",
+    "gl-react-headless-tests.tsx"
   ],
   "compilerOptions": {
     "module": "commonjs",

types/gl-react-native/GLViewNative.d.ts

@@ -1,8 +1,8 @@
 import * as React from 'react';
 
 export interface GLViewNativeProps {
-  onContextCreate: (gl: WebGLRenderingContext) => void;
-  onContextFailure: (e: Error) => void;
+  onContextCreate?: (gl: WebGLRenderingContext) => void;
+  onContextFailure?: (e: Error) => void;
   style?: any;
   children?: any;
 }

types/gl-react-native/gl-react-native-tests.tsx

@@ -0,0 +1,27 @@
+import * as React from 'react';
+import * as ReactDOM from 'react-dom';
+import { Surface } from 'gl-react-native';
+import { Shaders, GLSL, Node } from 'gl-react';
+
+const shaders = Shaders.create({
+  Test: {
+    frag: GLSL`
+      precision highp float;
+      varying vec2 uv;
+      void main() {
+        gl_FragColor = vec4(uv.x, uv.y, 0.5, 1.0);
+      }`
+  }
+});
+
+const App = () => (
+  <div>
+    <Surface>
+      <Node shader={shaders.HelloBlue} />
+    </Surface>
+  </div>
+);
+
+const element = document.createElement('div');
+document.body.appendChild(element);
+ReactDOM.render(<App />, element);

types/gl-react-native/tsconfig.json

@@ -1,6 +1,7 @@
 {
   "files": [
-    "index.d.ts"
+    "index.d.ts",
+    "gl-react-native-tests.tsx"
   ],
   "compilerOptions": {
     "module": "commonjs",

types/gl-react/index.d.ts

@@ -124,7 +124,7 @@ export interface Framebuffer {
 export interface NodeProps {
   shader: ShaderIdentifier | ShaderDefinition;
   uniformsOptions?: any;
-  uniforms: { [key: string]: any };
+  uniforms?: { [key: string]: any };
   ignoreUnusedUniforms?: string[] | boolean;
   sync?: boolean;
   width?: number;