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
-      shader={shaders.helloGL}
-      width={width}
-      height={height}
-    />;
-  }
-}
-
-module.exports = HelloGL;
+module.exports = GL.createComponent(({ width, height }) =>
+  <GL.View
+    shader={shaders.helloGL}
+    width={width}
+    height={height}
+  />,
+  { 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
-      {...rest}
-      shader={shaders.hueRotate}
-      width={width}
-      height={height}
-      uniforms={{ hue, tex }}
-    />;
-  }
-}
-
-module.exports = HueRotate;
+module.exports = GL.createComponent(
+  ({ hue, children, ...rest }) =>
+  <GL.View
+    {...rest}
+    shader={shaders.hueRotate}
+    uniforms={{ hue }}>
+    <GL.Uniform name="tex">{children}</GL.Uniform>
+  </GL.View>
+, { displayName: "HueRotate" });

Examples/Simple/PieProgress.js

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

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
-      shader={shaders.saturation}
-      width={width}
-      height={height}
-      uniforms={{ factor, image }}
-    />;
-  }
-}
-
-module.exports = Saturation;
+module.exports = GL.createComponent(
+  ({ factor, image, ...rest }) =>
+  <GL.View
+    {...rest}
+    shader={shaders.saturation}
+    uniforms={{ factor, image }}
+  />,
+{ 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;
-    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 = {
-  passes: 2
-};
-
-Blur.propTypes = {
-  width: PropTypes.number,
-  height: PropTypes.number,
-  factor: PropTypes.number.isRequired,
-  children: PropTypes.any.isRequired,
-  passes: PropTypes.number
-};
-
-module.exports = Blur;
+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);
+  },
+  {
+    displayName: "Blur",
+    defaultProps: {
+      passes: 2
+    },
+    propTypes: {
+      width: PropTypes.number,
+      height: PropTypes.number,
+      factor: PropTypes.number.isRequired,
+      children: PropTypes.any.isRequired,
+      passes: PropTypes.number
+    }
+  });

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
-      {...rest}
-      shader={shaders.Copy}
-      width={width}
-      height={height}
-      uniforms={{ t, preventAlphaMult: !last }}
-    />;
-  }
-}
-
-module.exports = Copy;
+module.exports = GL.createComponent(
+  ({ width, height, children: t, last, ...rest }) =>
+  <GL.View
+    {...rest}
+    shader={shaders.Copy}
+    width={width}
+    height={height}
+    uniforms={{ t, preventAlphaMult: !last }}
+  />,
+  { 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
-      shader={shaders.helloGL}
-      width={width}
-      height={height}
-    />;
-  }
-}
-
-module.exports = HelloGL;
+module.exports = GL.createComponent(
+  ({ width, height }) =>
+  <GL.View
+    shader={shaders.helloGL}
+    width={width}
+    height={height}
+  />,
+  { 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
-      {...rest}
-      opaque={false}
-      shader={shaders.TransparentNonPremultiplied}
-      uniforms={{ t }}
-    />;
-  }
-}
-
-module.exports = TransparentNonPremultiplied;
+module.exports = GL.createComponent(
+  ({ children: t, ...rest }) =>
+  <GL.View
+    {...rest}
+    opaque={false}
+    shader={shaders.TransparentNonPremultiplied}
+    uniforms={{ t }}
+  />,
+{ 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
 };