Refactor: unroll static loop

.eslintrc

@@ -83,7 +83,7 @@
         "curly": 1,                      // specify curly brace conventions for all control statements
         "default-case": 0,               // require default case in switch statements (off by default)
         "dot-notation": 1,               // encourages use of dot notation whenever possible
-        "eqeqeq": 1,                     // require the use of === and !==
+        "eqeqeq": 0,                     // require the use of === and !==
         "guard-for-in": 0,               // make sure for-in loops have an if statement (off by default)
         "no-alert": 0,                   // disallow the use of alert, confirm, and prompt
         "no-caller": 1,                  // disallow use of arguments.caller or arguments.callee

elements/Text.js

@@ -15,7 +15,8 @@ export default class Text extends Shape {
     if (matrix) {
       props.matrix = matrix;
     }
-    const text = pickNotNil(extractText(props, true));
+    const prop = propsAndStyles(props);
+    const text = pickNotNil(extractText(prop, true));
     this.root.setNativeProps({
       ...props,
       ...text,

lib/Matrix2D.js

@@ -4,6 +4,8 @@
  */
 const DEG_TO_RAD = Math.PI / 180;
 
+export const identity = [1, 0, 0, 1, 0, 0];
+
 /**
  * Represents an affine transformation matrix, and provides tools for constructing and concatenating matrices.
  *
@@ -85,6 +87,9 @@ export default class Matrix2D {
    * @return {Array} an array with current matrix values.
    **/
   toArray = function() {
+    if (this.hasInitialState) {
+      return identity;
+    }
     return [this.a, this.b, this.c, this.d, this.tx, this.ty];
   };
 

lib/extract/extractFill.js

@@ -8,21 +8,22 @@ const fillRules = {
   nonzero: 1,
 };
 
-const fillProps = ['fill', 'fillOpacity', 'fillRule'];
-const numFillProps = fillProps.length;
-
 // default fill is black
+const black = colorNames.black;
 const defaultFill = [
   0,
-  Platform.OS === 'android' ? colorNames.black | 0x0 : colorNames.black,
+  Platform.OS === 'android' ? black | 0x0 : black,
 ];
 
 export default function extractFill(props, styleProperties) {
-  for (let i = 0; i < numFillProps; i++) {
+  if (props.fill != null) {
-    const name = fillProps[i];
+    styleProperties.push('fill');
-    if (props.hasOwnProperty(name)) {
+  }
-      styleProperties.push(name);
+  if (props.fillOpacity != null) {
-    }
+    styleProperties.push('fillOpacity');
+  }
+  if (props.fillRule != null) {
+    styleProperties.push('fillRule');
   }
 
   const { fill, fillRule, fillOpacity } = props;

lib/extract/extractResponder.js

@@ -3,29 +3,21 @@ import { PanResponder } from 'react-native';
 const responderProps = Object.keys(PanResponder.create({}).panHandlers);
 const numResponderProps = responderProps.length;
 
-const touchableProps = [
-  'disabled',
-  'onPress',
-  'onPressIn',
-  'onPressOut',
-  'onLongPress',
-  'delayPressIn',
-  'delayPressOut',
-  'delayLongPress',
-];
-const numTouchableProps = touchableProps.length;
-
 function hasTouchableProperty(props) {
-  for (let i = 0; i < numTouchableProps; i++) {
+  return (
-    if (props.hasOwnProperty(touchableProps[i])) {
+    props.disabled != null ||
-      return true;
+    props.onPress ||
-    }
+    props.onPressIn ||
-  }
+    props.onPressOut ||
-  return false;
+    props.onLongPress ||
+    props.delayPressIn ||
+    props.delayPressOut ||
+    props.delayLongPress
+  );
 }
 
 export default function extractResponder(props, ref) {
-  const extractedProps = {};
+  const o = {};
 
   let responsible = false;
   for (let i = 0; i < numResponderProps; i++) {
@@ -33,31 +25,28 @@ export default function extractResponder(props, ref) {
     const value = props[key];
     if (value) {
       responsible = true;
-      extractedProps[key] = value;
+      o[key] = value;
     }
   }
 
   const pointerEvents = props.pointerEvents;
   if (pointerEvents) {
-    extractedProps.pointerEvents = pointerEvents;
+    o.pointerEvents = pointerEvents;
   }
 
   if (hasTouchableProperty(props)) {
     responsible = true;
-    Object.assign(extractedProps, {
+    o.onResponderMove = ref.touchableHandleResponderMove;
-      onStartShouldSetResponder: ref.touchableHandleStartShouldSetResponder,
+    o.onResponderGrant = ref.touchableHandleResponderGrant;
-      onResponderTerminationRequest:
+    o.onResponderRelease = ref.touchableHandleResponderRelease;
-        ref.touchableHandleResponderTerminationRequest,
+    o.onResponderTerminate = ref.touchableHandleResponderTerminate;
-      onResponderGrant: ref.touchableHandleResponderGrant,
+    o.onStartShouldSetResponder = ref.touchableHandleStartShouldSetResponder;
-      onResponderMove: ref.touchableHandleResponderMove,
+    o.onResponderTerminationRequest = ref.touchableHandleResponderTerminationRequest;
-      onResponderRelease: ref.touchableHandleResponderRelease,
-      onResponderTerminate: ref.touchableHandleResponderTerminate,
-    });
   }
 
   if (responsible) {
-    extractedProps.responsible = true;
+    o.responsible = true;
   }
 
-  return extractedProps;
+  return o;
 }

lib/extract/extractStroke.js

@@ -14,24 +14,30 @@ const joins = {
   round: 1,
 };
 
-const strokeProps = [
-  'stroke',
-  'strokeWidth',
-  'strokeOpacity',
-  'strokeDasharray',
-  'strokeDashoffset',
-  'strokeLinecap',
-  'strokeLinejoin',
-  'strokeMiterlimit',
-];
-const numStrokeProps = strokeProps.length;
-
 export default function extractStroke(props, styleProperties) {
-  for (let i = 0; i < numStrokeProps; i++) {
+  if (props.stroke != null) {
-    const name = strokeProps[i];
+    styleProperties.push('stroke');
-    if (props.hasOwnProperty(name)) {
+  }
-      styleProperties.push(name);
+  if (props.strokeWidth != null) {
-    }
+    styleProperties.push('strokeWidth');
+  }
+  if (props.strokeOpacity != null) {
+    styleProperties.push('strokeOpacity');
+  }
+  if (props.strokeDasharray != null) {
+    styleProperties.push('strokeDasharray');
+  }
+  if (props.strokeDashoffset != null) {
+    styleProperties.push('strokeDashoffset');
+  }
+  if (props.strokeLinecap != null) {
+    styleProperties.push('strokeLinecap');
+  }
+  if (props.strokeLinejoin != null) {
+    styleProperties.push('strokeLinejoin');
+  }
+  if (props.strokeMiterlimit != null) {
+    styleProperties.push('strokeMiterlimit');
   }
 
   const { stroke, strokeWidth = 1, strokeDasharray } = props;

lib/extract/extractTransform.js

@@ -1,4 +1,4 @@
-import Matrix2D from '../Matrix2D';
+import Matrix2D, { identity } from '../Matrix2D';
 import transformParser from './transform';
 
 const pooledMatrix = new Matrix2D();
@@ -51,9 +51,7 @@ export function props2transform(props) {
   const skew = universal2axis(props.skew, props.skewX, props.skewY);
   const translate = universal2axis(
     props.translate,
-    // eslint-disable-next-line eqeqeq
     props.translateX == null ? props.x || 0 : props.translateX,
-    // eslint-disable-next-line eqeqeq
     props.translateY == null ? props.y || 0 : props.translateY,
   );
 
@@ -102,8 +100,6 @@ export function transformToMatrix(props, transform) {
   return pooledMatrix.toArray();
 }
 
-const identity = [1, 0, 0, 1, 0, 0];
-
 export default function extractTransform(props) {
   if (Array.isArray(props)) {
     return props;