rename 'passes' to 'data' with a object tree structure

src/GLCanvas.js

@@ -29,12 +29,11 @@ class GLCanvas extends Component {
   }
 
   render () {
-    const { width, height, style } = this.props;
+    const { width, height } = this.props;
     const { devicePixelRatio } = this.state;
     const styles = {
       width: width+"px",
-      height: height+"px",
-      ...style
+      height: height+"px"
     };
     return <canvas
       {...this.props}
@@ -71,7 +70,7 @@ class GLCanvas extends Component {
     this.buffer = buffer;
 
     this.syncBlendMode(this.props);
-    this.syncShader(this.props.passes[0]);
+    this.syncShader(this.props.data);
   }
 
   componentWillUnmount () {
@@ -91,11 +90,11 @@ class GLCanvas extends Component {
     if (props.opaque !== this.props.opaque)
       this.syncBlendMode(props);
 
-    if (props.passes[0].shader !== this.props.passes[0].shader)
-      this.syncShader(props.passes[0]);
+    if (props.data.shader !== this.props.data.shader)
+      this.syncShader(props.data);
     else { // syncShader will call other syncs so we can save some calls
-      if (!sameUniforms(props.passes[0].uniforms, this.props.passes[0].uniforms))
-        this.syncUniforms(props.passes[0]);
+      if (!sameUniforms(props.data.uniforms, this.props.data.uniforms))
+        this.syncUniforms(props.data);
     }
   }
 
@@ -197,7 +196,7 @@ class GLCanvas extends Component {
           let image = this._images[src];
           if (!image) {
             image = new GLImage(() => {
-              this.syncUniforms(this.props.passes[0]);
+              this.syncUniforms(this.props.data);
             });
             this._images[src] = image;
           }
@@ -271,7 +270,7 @@ class GLCanvas extends Component {
     if (!shader) return;
     const props = this.props;
 
-    this.syncTargetUniforms(props.passes[0]);
+    this.syncTargetUniforms(props.data);
 
     // Bind the textures
     for (const uniformName in this._textures) {
@@ -285,7 +284,7 @@ class GLCanvas extends Component {
 GLCanvas.propTypes = {
   width: PropTypes.number.isRequired,
   height: PropTypes.number.isRequired,
-  passes: PropTypes.array.isRequired
+  data: PropTypes.object.isRequired
 };
 
 module.exports = GLCanvas;

src/View.js

@@ -17,15 +17,16 @@ const renderVtarget = function (style, width, height, id, target) {
   return <div key={"target-"+id} style={{ ...childrenStyle, ...style }}>{target}</div>;
 };
 
-const renderVGL = function (props, passes) {
+const renderVGL = function (props, width, height, data) {
   return <GLCanvas
     {...props}
-    passes={passes}
+    width={width}
+    height={height}
+    data={data}
   />;
 };
 
-const renderVcontainer = function (props, targets, renderer) {
-  const { style, width, height } = props;
+const renderVcontainer = function (style, width, height, targets, renderer) {
   if (targets) {
     const parentStyle = {
       ...style,

src/core/createView.js

@@ -23,8 +23,11 @@ module.exports = function (React, Shaders, Target, renderVcontainer, renderVtarg
   class GLView extends Component {
     render() {
       const props = this.props;
-      const { width, height, children, shader, uniforms: uniformsOriginal } = props;
+      const { style, width, height, children, shader, uniforms: uniformsOriginal } = props;
       const cleanedProps = { ...props };
+      delete cleanedProps.style;
+      delete cleanedProps.width;
+      delete cleanedProps.height;
       delete cleanedProps.shader;
       delete cleanedProps.uniforms;
       delete cleanedProps.children;
@@ -40,10 +43,11 @@ module.exports = function (React, Shaders, Target, renderVcontainer, renderVtarg
         uniforms[key] = value;
       }
 
-      const passes = [
-        { shader, uniforms: uniforms },
-        [] // children passes
-      ];
+      const data = {
+        shader,
+        uniforms,
+        children: []
+      };
 
       let targetId = 0;
       let targets = [];
@@ -65,9 +69,15 @@ module.exports = function (React, Shaders, Target, renderVcontainer, renderVtarg
       });
 
       return renderVcontainer(
-        cleanedProps,
+        style,
+        width,
+        height,
         targets,
-        renderVGL(cleanedProps, passes)
+        renderVGL(
+          cleanedProps,
+          width,
+          height,
+          data)
       );
     }
   }