From 7265b3b2b3c4416be9ee6048c4d6a29711fe1ece Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ga=C3=ABtan=20Renaudeau?= Date: Fri, 9 Oct 2015 21:38:57 +0200 Subject: [PATCH] ntroducing GL.createComponent(props => glView, {...staticFields}) --- Examples/AdvancedEffects/src/Banner.js | 2 +- Examples/AdvancedEffects/src/Intro.js | 2 +- Examples/AdvancedEffects/src/Transition.js | 11 ++-- Examples/AdvancedEffects/src/Vignette.js | 2 +- Examples/Simple/Blur.js | 15 +++--- Examples/Simple/Blur1D.js | 23 ++++---- Examples/Simple/HelloGL.js | 20 +++---- Examples/Simple/HueRotate.js | 23 ++++---- Examples/Simple/PieProgress.js | 54 +++++++++---------- Examples/Simple/Saturation.js | 21 +++----- Examples/Tests/Add.js | 10 ++-- Examples/Tests/Blur.js | 45 ++++++++-------- Examples/Tests/Blur1D.js | 23 +++----- Examples/Tests/Copy.js | 25 ++++----- Examples/Tests/Display2.js | 18 +++---- Examples/Tests/HelloGL.js | 21 ++++---- Examples/Tests/Layer.js | 12 ++--- Examples/Tests/Multiply.js | 11 ++-- Examples/Tests/Premultiply.js | 33 ------------ Examples/Tests/TransparentNonPremultiplied.js | 22 ++++---- Examples/build.sh | 5 +- package.json | 4 +- src/ComponentDeprecated.js | 3 ++ src/View.js | 3 +- src/{Component.js => createComponent.js} | 3 +- src/index.js | 6 ++- 26 files changed, 166 insertions(+), 251 deletions(-) delete mode 100644 Examples/Tests/Premultiply.js create mode 100644 src/ComponentDeprecated.js rename src/{Component.js => createComponent.js} (53%) diff --git a/Examples/AdvancedEffects/src/Banner.js b/Examples/AdvancedEffects/src/Banner.js index dd6ac41..e05bab6 100644 --- a/Examples/AdvancedEffects/src/Banner.js +++ b/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 { const scale = React.PixelRatio.get(); return ; - } -} - -module.exports = Transition; + }, + { displayName: "Transition" }); diff --git a/Examples/AdvancedEffects/src/Vignette.js b/Examples/AdvancedEffects/src/Vignette.js index 7c0b7c9..1a03cc3 100644 --- a/Examples/AdvancedEffects/src/Vignette.js +++ b/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); diff --git a/Examples/Simple/Blur.js b/Examples/Simple/Blur.js index ccda710..234c0cc 100644 --- a/Examples/Simple/Blur.js +++ b/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 +module.exports = GL.createComponent(({ width, height, factor, children }) => + {children} - ; - } -} - -module.exports = Blur; + +, { + displayName: "Blur" +}); diff --git a/Examples/Simple/Blur1D.js b/Examples/Simple/Blur1D.js index 4d0499e..b9a7337 100644 --- a/Examples/Simple/Blur1D.js +++ b/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 + ; - } -} - -module.exports = Blur1D; + resolution: [ width, height ] + }}> + {children} + +, { + displayName: "Blur1D" +}); diff --git a/Examples/Simple/HelloGL.js b/Examples/Simple/HelloGL.js index 76530bf..30ac478 100644 --- a/Examples/Simple/HelloGL.js +++ b/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 ; - } -} - -module.exports = HelloGL; +module.exports = GL.createComponent(({ width, height }) => + , + { displayName: "HelloGL" } +); diff --git a/Examples/Simple/HueRotate.js b/Examples/Simple/HueRotate.js index e5ddd5d..cc1e0d2 100644 --- a/Examples/Simple/HueRotate.js +++ b/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 ; - } -} - -module.exports = HueRotate; +module.exports = GL.createComponent( + ({ hue, children, ...rest }) => + + {children} + +, { displayName: "HueRotate" }); diff --git a/Examples/Simple/PieProgress.js b/Examples/Simple/PieProgress.js index 8c21603..53637af 100644 --- a/Examples/Simple/PieProgress.js +++ b/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 + }) => + ; - } -} -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 + } + }); diff --git a/Examples/Simple/Saturation.js b/Examples/Simple/Saturation.js index a2ff9e2..fefd99d 100644 --- a/Examples/Simple/Saturation.js +++ b/Examples/Simple/Saturation.js @@ -19,16 +19,11 @@ void main () { } }); -class Saturation extends React.Component { - render () { - const { width, height, factor, image } = this.props; - return ; - } -} - -module.exports = Saturation; +module.exports = GL.createComponent( + ({ factor, image, ...rest }) => + , +{ displayName: "Saturation" }); diff --git a/Examples/Tests/Add.js b/Examples/Tests/Add.js index c206217..348abd7 100644 --- a/Examples/Tests/Add.js +++ b/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 ; - } -} - -module.exports = Add; + }, { displayName: "Add" }); diff --git a/Examples/Tests/Blur.js b/Examples/Tests/Blur.js index c541b60..5987379 100644 --- a/Examples/Tests/Blur.js +++ b/Examples/Tests/Blur.js @@ -26,28 +26,25 @@ function directionForPass (p, factor, total) { - Powerful blur: {url} */ -class Blur extends GL.Component { - render () { - const { width, height, factor, children, passes } = this.props; - const rec = p => p <= 0 ? children : - - {rec(p-1)} - ; - - 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 : + + {rec(p-1)} + ; + 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 + } + }); diff --git a/Examples/Tests/Blur1D.js b/Examples/Tests/Blur1D.js index 39b9a05..afdb9e7 100644 --- a/Examples/Tests/Blur1D.js +++ b/Examples/Tests/Blur1D.js @@ -32,10 +32,9 @@ void main () { } }); -class Blur1D extends GL.Component { - render () { - const { width, height, direction, children } = this.props; - return + {children} - ; - } -} - -Blur1D.propTypes = { - width: PropTypes.number, - height: PropTypes.number, - direction: PropTypes.array.isRequired, - children: PropTypes.any.isRequired -}; - -module.exports = Blur1D; + +, { + displayName: "Blur1D" +}); diff --git a/Examples/Tests/Copy.js b/Examples/Tests/Copy.js index c789ff2..85da293 100644 --- a/Examples/Tests/Copy.js +++ b/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 ; - } -} - -module.exports = Copy; +module.exports = GL.createComponent( + ({ width, height, children: t, last, ...rest }) => + , + { displayName: "Copy" } +); diff --git a/Examples/Tests/Display2.js b/Examples/Tests/Display2.js index 74939fc..018db35 100644 --- a/Examples/Tests/Display2.js +++ b/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; +); diff --git a/Examples/Tests/HelloGL.js b/Examples/Tests/HelloGL.js index 84393e1..bd3cf99 100644 --- a/Examples/Tests/HelloGL.js +++ b/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 ; - } -} - -module.exports = HelloGL; +module.exports = GL.createComponent( + ({ width, height }) => + , + { displayName: "HelloGL" } +); diff --git a/Examples/Tests/Layer.js b/Examples/Tests/Layer.js index b1163bb..521b457 100644 --- a/Examples/Tests/Layer.js +++ b/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 ; + }, + { + displayName: "Layer" } -} - -module.exports = Layer; +); diff --git a/Examples/Tests/Multiply.js b/Examples/Tests/Multiply.js index 44e7bd4..12979f2 100644 --- a/Examples/Tests/Multiply.js +++ b/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 ; - } -} - -module.exports = Multiply; + }, + { displayName: "Multiply" }); diff --git a/Examples/Tests/Premultiply.js b/Examples/Tests/Premultiply.js deleted file mode 100644 index 08bfcbd..0000000 --- a/Examples/Tests/Premultiply.js +++ /dev/null @@ -1,33 +0,0 @@ -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 ; - } -} - -module.exports = Premultiply; diff --git a/Examples/Tests/TransparentNonPremultiplied.js b/Examples/Tests/TransparentNonPremultiplied.js index 0951ff7..f9efaf7 100644 --- a/Examples/Tests/TransparentNonPremultiplied.js +++ b/Examples/Tests/TransparentNonPremultiplied.js @@ -16,16 +16,12 @@ void main () { } }); -class TransparentNonPremultiplied extends GL.Component { - render () { - const { children: t, ...rest } = this.props; - return ; - } -} - -module.exports = TransparentNonPremultiplied; +module.exports = GL.createComponent( + ({ children: t, ...rest }) => + , +{ displayName: "TransparentNonPremultiplied" }); diff --git a/Examples/build.sh b/Examples/build.sh index b2cdab9..3746580 100755 --- a/Examples/build.sh +++ b/Examples/build.sh @@ -1,8 +1,9 @@ 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; diff --git a/package.json b/package.json index 6433f0f..5c88a4b 100644 --- a/package.json +++ b/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", diff --git a/src/ComponentDeprecated.js b/src/ComponentDeprecated.js new file mode 100644 index 0000000..55810f3 --- /dev/null +++ b/src/ComponentDeprecated.js @@ -0,0 +1,3 @@ +const React = require("react-native"); +const {createComponentDeprecated} = require("gl-react-core"); +module.exports = createComponentDeprecated(React); diff --git a/src/View.js b/src/View.js index 99e2ba9..d04365b 100644 --- a/src/View.js +++ b/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) ; }; -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); diff --git a/src/Component.js b/src/createComponent.js similarity index 53% rename from src/Component.js rename to src/createComponent.js index 89ac8c6..71f8341 100644 --- a/src/Component.js +++ b/src/createComponent.js @@ -1,3 +1,4 @@ const React = require("react-native"); +const View = require("./View"); const {createComponent} = require("gl-react-core"); -module.exports = createComponent(React); +module.exports = createComponent(React, View); diff --git a/src/index.js b/src/index.js index 37c3339..c46d43b 100644 --- a/src/index.js +++ b/src/index.js @@ -1,11 +1,13 @@ 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 }; -- 2.26.2