ntroducing GL.createComponent(props => glView, {...staticFields})

Examples/AdvancedEffects/src/Banner.js

@@ -24,7 +24,7 @@ void main( void ) {
   }
 });
 
-class Banner extends GL.Component {
+class Banner extends React.Component {
   render () {
     const { width, height, time } = this.props;
     return <GL.View

Examples/AdvancedEffects/src/Intro.js

@@ -37,7 +37,7 @@ void main() {
   }
 });
 
-class Intro extends GL.Component {
+class Intro extends React.Component {
   render () {
     const { time, fps, width, height } = this.props;
     return <GL.View

Examples/AdvancedEffects/src/Transition.js

 const React = require("react-native");
 const GL = require("gl-react-native");
 
-class Transition extends GL.Component {
-  render () {
-    const { width, height, shader, progress, from, to, uniforms } = this.props;
+module.exports = GL.createComponent(
+  ({ width, height, shader, progress, from, to, uniforms }) => {
     const scale = React.PixelRatio.get();
     return <GL.View
       preload
@@ -19,7 +18,5 @@ class Transition extends GL.Component {
         resolution: [ width * scale, height * scale ]
       }}
     />;
-  }
-}
-
-module.exports = Transition;
+  },
+  { displayName: "Transition" });

Examples/AdvancedEffects/src/Vignette.js

@@ -38,7 +38,7 @@ void main() {
 });
 
 
-class Vignette extends GL.Component {
+class Vignette extends React.Component {
   constructor (props) {
     super(props);
     this.onResponderMove = this.onResponderMove.bind(this);

Examples/Simple/Blur.js

@@ -2,15 +2,12 @@ const React = require("react-native");
 const GL = require("gl-react-native");
 const Blur1D = require("./Blur1D");
 
-class Blur extends GL.Component {
-  render () {
-    const { width, height, factor, children, ...rest } = this.props;
-    return <Blur1D {...rest} width={width} height={height} direction={[ factor, 0 ]}>
+module.exports = GL.createComponent(({ width, height, factor, children }) =>
+    <Blur1D width={width} height={height} direction={[ factor, 0 ]}>
       <Blur1D width={width} height={height} direction={[ 0, factor ]}>
         {children}
       </Blur1D>
-    </Blur1D>;
-  }
-}
-
-module.exports = Blur;
+    </Blur1D>
+, {
+  displayName: "Blur"
+});

Examples/Simple/Blur1D.js

@@ -33,21 +33,18 @@ void main () {
   }
 });
 
-class Blur1D extends GL.Component {
-  render () {
-    const { width, height, direction, children: t, ...rest } = this.props;
-    return <GL.View
-      {...rest}
+module.exports = GL.createComponent(
+  ({ width, height, direction, children }) =>
+    <GL.View
       shader={shaders.blur1D}
       width={width}
       height={height}
       uniforms={{
         direction,
-        resolution: [ width, height ],
-        t
-      }}
-    />;
-  }
-}
-
-module.exports = Blur1D;
+        resolution: [ width, height ]
+      }}>
+      <GL.Uniform name="t">{children}</GL.Uniform>
+    </GL.View>
+, {
+  displayName: "Blur1D"
+});

Examples/Simple/HelloGL.js

@@ -14,15 +14,11 @@ void main () { // This function is called FOR EACH PIXEL
   }
 });
 
-class HelloGL extends React.Component {
-  render () {
-    const { width, height } = this.props;
-    return <GL.View
+module.exports = GL.createComponent(({ width, height }) =>
+  <GL.View
     shader={shaders.helloGL}
     width={width}
     height={height}
-    />;
-  }
-}
-
-module.exports = HelloGL;
+  />,
+  { displayName: "HelloGL" }
+);

Examples/Simple/HueRotate.js

@@ -24,17 +24,12 @@ void main() {
   }
 });
 
-class HueRotate extends GL.Component {
-  render () {
-    const { width, height, hue, children: tex, ...rest } = this.props;
-    return <GL.View
+module.exports = GL.createComponent(
+  ({ hue, children, ...rest }) =>
+  <GL.View
     {...rest}
     shader={shaders.hueRotate}
-      width={width}
-      height={height}
-      uniforms={{ hue, tex }}
-    />;
-  }
-}
-
-module.exports = HueRotate;
+    uniforms={{ hue }}>
+    <GL.Uniform name="tex">{children}</GL.Uniform>
+  </GL.View>
+, { displayName: "HueRotate" });

Examples/Simple/PieProgress.js

@@ -32,17 +32,16 @@ void main () {
   }
 });
 
-class PieProgress extends React.Component {
-  render () {
-    const {
+module.exports = GL.createComponent(
+  ({
     width,
     height,
     progress,
     colorInside,
     colorOutside,
     radius
-    } = this.props;
-    return <GL.View
+  }) =>
+  <GL.View
     width={width}
     height={height}
     shader={shaders.pieProgress}
@@ -54,13 +53,12 @@ class PieProgress extends React.Component {
       colorOutside,
       radius
     }}
-    />;
-  }
-}
-PieProgress.defaultProps = {
+  />,
+  {
+    displayName: "PieProgress",
+    defaultProps: {
       colorInside: [0, 0, 0, 0],
       colorOutside: [0, 0, 0, 0.5],
       radius: 0.4
-};
-
-module.exports = PieProgress;
+    }
+  });

Examples/Simple/Saturation.js

@@ -19,16 +19,11 @@ void main () {
   }
 });
 
-class Saturation extends React.Component {
-  render () {
-    const { width, height, factor, image } = this.props;
-    return <GL.View
+module.exports = GL.createComponent(
+  ({ factor, image, ...rest }) =>
+  <GL.View
+    {...rest}
     shader={shaders.saturation}
-      width={width}
-      height={height}
     uniforms={{ factor, image }}
-    />;
-  }
-}
-
-module.exports = Saturation;
+  />,
+{ displayName: "Saturation" });

Examples/Tests/Add.js

@@ -19,9 +19,8 @@ void main () {
   }
 });
 
-class Add extends GL.Component {
-  render () {
-    const { width, height, children } = this.props;
+module.exports = GL.createComponent(
+  ({ width, height, children }) => {
     if (!children || children.length !== 2) throw new Error("You must provide 2 children to Add");
     const [t1, t2] = children;
     return <GL.View
@@ -30,7 +29,4 @@ class Add extends GL.Component {
       height={height}
       uniforms={{ t1, t2 }}
     />;
-  }
-}
-
-module.exports = Add;
+  }, { displayName: "Add" });

Examples/Tests/Blur.js

@@ -26,28 +26,25 @@ function directionForPass (p, factor, total) {
  - Powerful blur:
  <Blur factor={20} passes={6} width={w} height={h}>{url}</Blur>
  */
-class Blur extends GL.Component {
-  render () {
-    const { width, height, factor, children, passes } = this.props;
+
+module.exports = GL.createComponent(
+  ({ width, height, factor, children, passes }) => {
     const rec = p => p <= 0 ? children :
     <Blur1D width={width} height={height} direction={directionForPass(p, factor, passes)}>
       {rec(p-1)}
     </Blur1D>;
-
-    return rec(passes || 0);
-  }
-}
-
-Blur.defaultProps = {
+    return rec(passes);
+  },
+  {
+    displayName: "Blur",
+    defaultProps: {
       passes: 2
-};
-
-Blur.propTypes = {
+    },
+    propTypes: {
       width: PropTypes.number,
       height: PropTypes.number,
       factor: PropTypes.number.isRequired,
       children: PropTypes.any.isRequired,
       passes: PropTypes.number
-};
-
-module.exports = Blur;
+    }
+  });

Examples/Tests/Blur1D.js

@@ -32,10 +32,9 @@ void main () {
   }
 });
 
-class Blur1D extends GL.Component {
-  render () {
-    const { width, height, direction, children } = this.props;
-    return <GL.View
+module.exports = GL.createComponent(
+  ({ width, height, direction, children }) =>
+    <GL.View
       shader={shaders.blur1D}
       width={width}
       height={height}
@@ -44,15 +43,7 @@ class Blur1D extends GL.Component {
         resolution: [ width, height ]
       }}>
       <GL.Uniform name="t">{children}</GL.Uniform>
-    </GL.View>;
-  }
-}
-
-Blur1D.propTypes = {
-  width: PropTypes.number,
-  height: PropTypes.number,
-  direction: PropTypes.array.isRequired,
-  children: PropTypes.any.isRequired
-};
-
-module.exports = Blur1D;
+    </GL.View>
+, {
+  displayName: "Blur1D"
+});

Examples/Tests/Copy.js

@@ -21,17 +21,14 @@ void main () {
   }
 });
 
-class Copy extends GL.Component {
-  render () {
-    const { width, height, children: t, last, ...rest } = this.props;
-    return <GL.View
+module.exports = GL.createComponent(
+  ({ width, height, children: t, last, ...rest }) =>
+  <GL.View
     {...rest}
     shader={shaders.Copy}
     width={width}
     height={height}
     uniforms={{ t, preventAlphaMult: !last }}
-    />;
-  }
-}
-
-module.exports = Copy;
+  />,
+  { displayName: "Copy" }
+);

Examples/Tests/Display2.js

@@ -22,9 +22,8 @@ void main () {
   }
 });
 
-class Display2 extends GL.Component {
-  render () {
-    const { width, height, children, vertical, ...rest } = this.props;
+module.exports = GL.createComponent(
+  ({ width, height, children, vertical, ...rest }) => {
     if (!children || children.length !== 2) throw new Error("You must provide 2 children to Display2");
     let [t1, t2] = children;
     if (vertical) [t1,t2]=[t2,t1]; // just because webgl y's is reversed
@@ -33,14 +32,11 @@ class Display2 extends GL.Component {
       shader={shaders.display2}
       width={width}
       height={height}
-      uniforms={{ t1, t2, vertical }}
+      uniforms={{ t1, t2, vertical: !!vertical }}
       debug={true}
     />;
+  },
+  {
+    displayName: "Display2"
   }
-}
-
-Display2.defaultProps = {
-  vertical: false
-};
-
-module.exports = Display2;
+);

Examples/Tests/HelloGL.js

@@ -14,15 +14,12 @@ void main () { // This function is called FOR EACH PIXEL
   }
 });
 
-class HelloGL extends GL.Component {
-  render () {
-    const { width, height } = this.props;
-    return <GL.View
+module.exports = GL.createComponent(
+  ({ width, height }) =>
+  <GL.View
     shader={shaders.helloGL}
     width={width}
     height={height}
-    />;
-  }
-}
-
-module.exports = HelloGL;
+  />,
+  { displayName: "HelloGL" }
+);

Examples/Tests/Layer.js

@@ -19,9 +19,8 @@ void main () {
   }
 });
 
-class Layer extends GL.Component {
-  render () {
-    const { children, ...rest } = this.props;
+module.exports = GL.createComponent(
+  ({ children, ...rest }) => {
     if (!children || children.length !== 2) throw new Error("You must provide 2 children to Layer");
     const [t1, t2] = children;
     return <GL.View
@@ -29,7 +28,8 @@ class Layer extends GL.Component {
       shader={shaders.layer}
       uniforms={{ t1, t2 }}
     />;
+  },
+  {
+    displayName: "Layer"
   }
-}
-
-module.exports = Layer;
+);

Examples/Tests/Multiply.js

@@ -19,9 +19,8 @@ void main () {
   }
 });
 
-class Multiply extends GL.Component {
-  render () {
-    const { width, height, children } = this.props;
+module.exports = GL.createComponent(
+  ({ width, height, children }) => {
     if (!children || children.length !== 2) throw new Error("You must provide 2 children to Multiply");
     const [t1, t2] = children;
     return <GL.View
@@ -30,7 +29,5 @@ class Multiply extends GL.Component {
       height={height}
       uniforms={{ t1, t2 }}
     />;
-  }
-}
-
-module.exports = Multiply;
+  },
+  { displayName: "Multiply" });

Examples/Tests/Premultiply.js

-const React = require("react-native");
-const GL = require("gl-react-native");
-
-const shaders = GL.Shaders.create({
-  Premultiply: {
-    frag: `
-precision highp float;
-
-varying vec2 uv;
-uniform sampler2D t;
-
-void main () {
-  vec4 c = texture2D(t, uv);
-  c.rgb *= c.a;
-  gl_FragColor = c;
-}
-`
-  }
-});
-
-class Premultiply extends GL.Component {
-  render () {
-    const { children: t, ...rest } = this.props;
-    return <GL.View
-      {...rest}
-      opaque={false}
-      shader={shaders.Premultiply}
-      uniforms={{ t }}
-    />;
-  }
-}
-
-module.exports = Premultiply;

Examples/Tests/TransparentNonPremultiplied.js

@@ -16,16 +16,12 @@ void main () {
   }
 });
 
-class TransparentNonPremultiplied extends GL.Component {
-  render () {
-    const { children: t, ...rest } = this.props;
-    return <GL.View
+module.exports = GL.createComponent(
+  ({ children: t, ...rest }) =>
+  <GL.View
     {...rest}
     opaque={false}
     shader={shaders.TransparentNonPremultiplied}
     uniforms={{ t }}
-    />;
-  }
-}
-
-module.exports = TransparentNonPremultiplied;
+  />,
+{ displayName: "TransparentNonPremultiplied" });

Examples/build.sh

 
 for ex in */; do
   cd $ex;
-  rm -rf node_modules;
-  npm i;
+  #rm -rf node_modules;
+  #npm i;
+  npm i gl-react-native;
   react-native bundle --minify;
   cd ..;
 done;

package.json

@@ -23,9 +23,9 @@
     "react-native": ">=0.9.0 <0.13.0"
   },
   "dependencies": {
-    "invariant": "2.1.0",
+    "invariant": "2.1.1",
     "react-native": ">=0.9.0 <0.13.0",
-    "gl-react-core": "1.1.x"
+    "gl-react-core": "1.2.x"
   },
   "devDependencies": {
     "eslint": "^1.3.1",

src/ComponentDeprecated.js

+const React = require("react-native");
+const {createComponentDeprecated} = require("gl-react-core");
+module.exports = createComponentDeprecated(React);

src/View.js

@@ -2,7 +2,6 @@ const {createView} = require("gl-react-core");
 const React = require("react-native");
 const Shaders = require("./Shaders");
 const Uniform = require("./Uniform");
-const Component = require("./Component");
 
 const {
   requireNativeComponent,
@@ -46,7 +45,7 @@ const renderVcontainer = function ({ style, width, height }, contents, renderer)
   </View>;
 };
 
-const GLView = createView(React, Shaders, Uniform, Component, renderVcontainer, renderVcontent, renderVGL);
+const GLView = createView(React, Shaders, Uniform, renderVcontainer, renderVcontent, renderVGL);
 
 GLView.prototype.setNativeProps = function (props) {
   this.refs.native.setNativeProps(props);

src/Component.js → src/createComponent.js

 const React = require("react-native");
+const View = require("./View");
 const {createComponent} = require("gl-react-core");
-module.exports = createComponent(React);
+module.exports = createComponent(React, View);

src/index.js

 const Shaders = require("./Shaders");
 const View = require("./View");
 const Uniform = require("./Uniform");
-const Component = require("./Component");
+const Component = require("./ComponentDeprecated");
+const createComponent = require("./createComponent");
 
 module.exports = {
   Shaders,
   View,
   Uniform,
-  Component
+  Component,
+  createComponent
 };