improved prop type testing, README improvements, 100% test coverage!

Author: baseten

README.md

@@ -156,6 +156,10 @@ to pass scale in as an object rather than a number (otherwise z will be scaled t
 
 ### Performance
 
+When running in development mode, `propTypes` checking can cause significant performance 
+bottlenecks particularly if running `render` in a `requestAnimationFrame`. If you're 
+seeing performance issues, try running a production build first.
+
 With standard React apps you've probably got used to declaring lambdas and object literals
 inline in your render method. People sometimes talk about how this is a performance hit, 
 but realistically for standard UI where renders are mostly limited to user interaction, 
@@ -171,8 +175,9 @@ performance optimization don't do it unless you need to. Just sayin' :)
 
 IE10 and IE11 famously don't support `preserve-3d`. To a certain extent this library can
 help with issues here because it won't create any nested DOM elements, but will compute
-the correct matrices to use on a single set of children. Realistically doing complex 3D 
-transformations in these browsers is not possible - but is nothing to do with this library :)
+the correct matrices to use on a single set of children. However, you will still very
+likely run into z order issues as IE will maintain DOM / z-index order over 3D z position, 
+so doing complex 3D transformations in these browsers is not really possible.
 
 ## How it works
 

examples/3d-cubes/package-lock.json

@@ -6,7 +6,6 @@
     "gl-matrix": "^3.0.0",
     "prop-types": "^15.7.2",
     "react": "^16.8.6",
-    "react-css-transform": "^1.1.0",
     "react-dom": "^16.8.6"
   },
   "devDependencies": {

examples/3d-cubes/package.json

@@ -2,17 +2,17 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { mat2d, vec2 } from 'gl-matrix';
 
-import { MULTIPLICATION_ORDER, vec2Shape, glMatrixType } from './constants';
+import { MULTIPLICATION_ORDER, vec2Obj, vec2GlMatrix, mat2dGlMatrix } from './constants';
 import { setVec2FromProp } from './utils';
 
 export default class Transform2d extends React.Component {
   static propTypes = {
-    parentMatrixWorld: glMatrixType,
+    parentMatrixWorld: mat2dGlMatrix,
     multiplicationOrder: PropTypes.oneOf([MULTIPLICATION_ORDER.PRE, MULTIPLICATION_ORDER.POST]),
-    translate: PropTypes.oneOfType([glMatrixType, vec2Shape]),
-    scale: PropTypes.oneOfType([glMatrixType, vec2Shape, PropTypes.number]),
+    translate: PropTypes.oneOfType([vec2GlMatrix, vec2Obj]),
+    scale: PropTypes.oneOfType([vec2GlMatrix, vec2Obj, PropTypes.number]),
     rotate: PropTypes.number,
-    children: PropTypes.node.isRequired,
+    children: PropTypes.oneOfType([PropTypes.node, PropTypes.func]).isRequired,
   };
 
   static defaultProps = {
@@ -43,7 +43,7 @@ export default class Transform2d extends React.Component {
 
     if (multiplicationOrder === MULTIPLICATION_ORDER.PRE) {
       mat2d.multiply(matrixWorld, matrix, parentMatrixWorld);
-    } else if (multiplicationOrder === MULTIPLICATION_ORDER.POST) {
+    } else {
       mat2d.multiply(matrixWorld, parentMatrixWorld, matrix);
     }
 
@@ -52,7 +52,7 @@ export default class Transform2d extends React.Component {
         parentMatrixWorld: matrixWorld,
         multiplicationOrder,
         style: {
-          transform: matrixWorld.join(','),
+          transform: `matrix(${matrixWorld.join(',')}`,
         },
       });
     }

package-lock.json

@@ -2,17 +2,17 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { mat4, vec3 } from 'gl-matrix';
 
-import { MULTIPLICATION_ORDER, vec3Shape, glMatrixType } from './constants';
+import { MULTIPLICATION_ORDER, vec3Obj, vec3GlMatrix, mat4GlMatrix } from './constants';
 import { setVec3FromProp } from './utils';
 
 export default class Transform3d extends React.Component {
   static propTypes = {
-    parentMatrixWorld: glMatrixType,
+    parentMatrixWorld: mat4GlMatrix,
     multiplicationOrder: PropTypes.oneOf([MULTIPLICATION_ORDER.PRE, MULTIPLICATION_ORDER.POST]),
-    translate: PropTypes.oneOfType([glMatrixType, vec3Shape]),
-    scale: PropTypes.oneOfType([glMatrixType, vec3Shape, PropTypes.number]),
+    translate: PropTypes.oneOfType([vec3GlMatrix, vec3Obj]),
+    scale: PropTypes.oneOfType([vec3GlMatrix, vec3Obj, PropTypes.number]),
     rotate: PropTypes.number,
-    rotateAxis: PropTypes.oneOfType([glMatrixType, vec3Shape]),
+    rotateAxis: PropTypes.oneOfType([vec3GlMatrix, vec3Obj]),
     children: PropTypes.oneOfType([PropTypes.node, PropTypes.func]).isRequired,
   };
 
@@ -51,7 +51,7 @@ export default class Transform3d extends React.Component {
 
     if (multiplicationOrder === MULTIPLICATION_ORDER.PRE) {
       mat4.multiply(matrixWorld, matrix, parentMatrixWorld);
-    } else if (multiplicationOrder === MULTIPLICATION_ORDER.POST) {
+    } else {
       mat4.multiply(matrixWorld, parentMatrixWorld, matrix);
     }
 
@@ -60,7 +60,7 @@ export default class Transform3d extends React.Component {
         parentMatrixWorld: matrixWorld,
         multiplicationOrder,
         style: {
-          transform: matrixWorld.join(','),
+          transform: `matrix3d(${matrixWorld.join(',')})`,
         },
       });
     }

src/Transform2d.js

@@ -1,5 +1,4 @@
-import PropTypes from 'prop-types';
-import { glMatrix } from 'gl-matrix';
+import { isVec2, isVec3, isMat2d, isMat4, isVec2Shape, isVec3Shape } from './utils';
 
 export const MULTIPLICATION_ORDER = {
   /**
@@ -41,15 +40,32 @@ export const MULTIPLICATION_ORDER = {
   PRE: 'PRE',
 };
 
-export const vec2Shape = PropTypes.shape({
-  x: PropTypes.number,
-  y: PropTypes.number,
-});
+export const vec2Obj = (props, propName, componentName) => {
+  const passes = isVec2Shape(props[propName]);
+  return passes ? null : new Error(`${propName} in ${componentName} is not a vec2 shape`);
+};
 
-export const vec3Shape = PropTypes.shape({
-  x: PropTypes.number,
-  y: PropTypes.number,
-  z: PropTypes.number,
-});
+export const vec3Obj = (props, propName, componentName) => {
+  const passes = isVec3Shape(props[propName]);
+  return passes ? null : new Error(`${propName} in ${componentName} is not a vec3 shape`);
+};
 
-export const glMatrixType = PropTypes.instanceOf(glMatrix.ARRAY_TYPE);
+export const vec2GlMatrix = (props, propName, componentName) => {
+  const passes = isVec2(props[propName]);
+  return passes ? null : new Error(`${propName} in ${componentName} is not a gl-matrix vec2`);
+};
+
+export const vec3GlMatrix = (props, propName, componentName) => {
+  const passes = isVec3(props[propName]);
+  return passes ? null : new Error(`${propName} in ${componentName} is not a gl-matrix vec3`);
+};
+
+export const mat2dGlMatrix = (props, propName, componentName) => {
+  const passes = isMat2d(props[propName]);
+  return passes ? null : new Error(`${propName} in ${componentName} is not a gl-matrix mat2d`);
+};
+
+export const mat4GlMatrix = (props, propName, componentName) => {
+  const passes = isMat4(props[propName]);
+  return passes ? null : new Error(`${propName} in ${componentName} is not a gl-matrix mat4`);
+};

src/Transform3d.js

@@ -1,3 +1,11 @@
-export { MULTIPLICATION_ORDER, glMatrixType, vec2Shape, vec3Shape } from './constants';
+export {
+  MULTIPLICATION_ORDER,
+  vec2Obj,
+  vec3Obj,
+  vec2GlMatrix,
+  vec3GlMatrix,
+  mat2dGlMatrix,
+  mat4GlMatrix,
+} from './constants';
 export { default as Transform2d } from './Transform2d';
 export { default as Transform3d } from './Transform3d';

src/constants.js

@@ -1,26 +1,59 @@
 import { vec2, vec3, glMatrix } from 'gl-matrix';
 
+export function isGlMatrixType(prop, length) {
+  if (prop === null || prop === undefined) {
+    return false;
+  }
+
+  const usingTypedArray = glMatrix.ARRAY_TYPE === Float32Array;
+  const isArray = usingTypedArray ? typeof prop === 'object' && prop.byteLength !== undefined : Array.isArray(prop);
+
+  return isArray && prop.length === length;
+}
+
+export const isVec2 = prop => isGlMatrixType(prop, 2);
+export const isVec3 = prop => isGlMatrixType(prop, 3);
+export const isMat2d = prop => isGlMatrixType(prop, 6);
+export const isMat4 = prop => isGlMatrixType(prop, 16);
+
+export function isVec2Shape(prop) {
+  if (prop === null || prop === undefined) {
+    return false;
+  }
+
+  const allowedKeys = ['x', 'y'];
+
+  return !!Object.keys(prop).filter(key => allowedKeys.includes(key)).length;
+}
+
+export function isVec3Shape(prop) {
+  if (prop === null || prop === undefined) {
+    return false;
+  }
+
+  const allowedKeys = ['x', 'y', 'z'];
+
+  return !!Object.keys(prop).filter(key => allowedKeys.includes(key)).length;
+}
+
 export function setVec2FromProp(v, prop, defaultValue = 0) {
   let x = defaultValue;
   let y = defaultValue;
 
-  if (!prop) {
+  if (prop === undefined) {
     return vec2.set(v, x, y);
   }
 
   if (typeof prop === 'number') {
     x = prop;
     y = prop;
-  } else {
-    const usingTypedArray = glMatrix.ARRAY_TYPE === Float32Array;
-    const isArray = usingTypedArray ? prop.byteLength !== undefined : Array.isArray(prop);
-
-    if (isArray) {
-      [x, y] = prop;
-    } else if (typeof prop === 'object') {
-      x = prop.x !== undefined ? prop.x : defaultValue;
-      y = prop.y !== undefined ? prop.y : defaultValue;
+  } else if (typeof prop === 'object') {
+    if (isVec2(prop)) {
+      return vec2.copy(v, prop);
     }
+
+    x = prop.x !== undefined ? prop.x : defaultValue;
+    y = prop.y !== undefined ? prop.y : defaultValue;
   }
 
   return vec2.set(v, x, y);
@@ -31,25 +64,22 @@ export function setVec3FromProp(v, prop, defaultX = 0, defaultY = 0, defaultZ =
   let y = defaultY;
   let z = defaultZ;
 
-  if (!prop) {
+  if (prop === undefined) {
     return vec3.set(v, x, y, z);
   }
 
   if (typeof prop === 'number') {
     x = prop;
     y = prop;
     z = prop;
-  } else {
-    const usingTypedArray = glMatrix.ARRAY_TYPE === Float32Array;
-    const isArray = usingTypedArray ? prop.byteLength !== undefined : Array.isArray(prop);
-
-    if (isArray) {
-      [x, y, z] = prop;
-    } else if (typeof prop === 'object') {
-      x = prop.x !== undefined ? prop.x : defaultX;
-      y = prop.y !== undefined ? prop.y : defaultY;
-      z = prop.z !== undefined ? prop.z : defaultZ;
+  } else if (typeof prop === 'object') {
+    if (isVec3(prop)) {
+      return vec3.copy(v, prop);
     }
+
+    x = prop.x !== undefined ? prop.x : defaultX;
+    y = prop.y !== undefined ? prop.y : defaultY;
+    z = prop.z !== undefined ? prop.z : defaultZ;
   }
 
   return vec3.set(v, x, y, z);