v1.2.0

This release note applies both for [email protected] and [email protected]

Add GL.createComponent function

A new API has been added to create GL Components.

Comp = GL.createComponent(
  props => glViewOrGlComponent,
  staticFields?)

• GL.createComponent takes, in first parameter, a render function (from props to Virtual DOM). More precisely, that render function must returns either a GL.View or another GL Component.
• It can also optionally take, in second parameter, a staticFields object to set into the React component (for instance defaultProps, propTypes, displayName).
• Finally, it returns a React Component (that you can use in JSX: <Comp />).

This function is to replace the former GL.Component class to extend (still working but deprecated).

Usage Example

const React = require("react");
const GL = require("gl-react");

const shaders = GL.Shaders.create({
  helloGL: {
    frag: `
precision highp float;
varying vec2 uv;
uniform float blue;
void main () {
  gl_FragColor = vec4(uv.x, uv.y, blue, 1.0);
}`
  }
});

module.exports = GL.createComponent(
  ({ blue, ...rest }) =>
  <GL.View
    {...rest}
    shader={shaders.helloGL}
    uniforms={{ blue }}
  />,
  { displayName: "HelloGL" });

<HelloGL width={511} height={341} blue={0.5} />

renders

Reasons for this change

We embrace "pure function" style as introduced by React 0.14.
But this is not the main reason for this change.

We call "GL Component", a React Component that always either renders a GL.View or another GL Component.
This constraint was not validated and you could have written a GL.Component that wasn't really one.

This new API emphasizes the real purpose of GL Components. We just need the render function to create a GL Component. Also a GL Component should have a minimal lifecycle and no state to be consistent between either being the root of the effects stack or not (if you are not familiar with how effects stack works, we will write more about it later).

The previous way of creating GL Components via inheritence of GL.Component class felt bad and hacky and you could easily forget about using GL.Component and not React.Component. It was also exclusively working using ES6 Classes.

Finally, the main reason we moved to this API is to be able to add methods on a GL Components consistenly with the ones we introduce on GL.View.
That way we automatically provides captureFrame method to all GL Components created with GL.createComponent.

Currently there is only captureFrame (in gl-react only) which allows to get a snapshot of the GL canvas content.

The fact that GL.createComponent API is more precise with a render function we can call ourself allows us to decorate GL.View (basically just using a ref) so we can expose these methods.