Refactor Attribute Processing (Step 4)

Summary:This avoids flattening styles in most common cases. It diffs against the nested
arrays. The special case is when a property gets removed, it creates an object
that stores the removed keys which then gets resolved using a second pass
through the nested array.

You can conceptually think of this algorithm as:
1) Diff and store changes as you go
2) If something was removed, flatten as necessary

I also merged in another commit that renames the StyleSheetRegistry to ReactNativePropRegistry. There is nothing in here that makes it specific to styles anymore. That's just a decoupled view attribute configuration option. This registry can be used for any set of nested props, if we even want to keep this feature at all.

Reviewed By: vjeux

Differential Revision: D2492885

fb-gh-sync-id: c976ac28b7e63545132c36da0ee0c1c562e7c9e5
shipit-source-id: c976ac28b7e63545132c36da0ee0c1c562e7c9e5

Libraries/StyleSheet/StyleSheet.js

@@ -12,7 +12,7 @@
 'use strict';
 
 var PixelRatio = require('PixelRatio');
-var StyleSheetRegistry = require('StyleSheetRegistry');
+var ReactNativePropRegistry = require('ReactNativePropRegistry');
 var StyleSheetValidation = require('StyleSheetValidation');
 
 var flatten = require('flattenStyle');
@@ -95,7 +95,7 @@ module.exports = {
     var result = {};
     for (var key in obj) {
       StyleSheetValidation.validateStyle(key, obj);
-      result[key] = StyleSheetRegistry.registerStyle(obj[key]);
+      result[key] = ReactNativePropRegistry.register(obj[key]);
     }
     return result;
   }

Libraries/StyleSheet/StyleSheetRegistry.js

@@ -1,44 +0,0 @@
-/**
- * Copyright (c) 2015-present, Facebook, Inc.
- * All rights reserved.
- *
- * This source code is licensed under the BSD-style license found in the
- * LICENSE file in the root directory of this source tree. An additional grant
- * of patent rights can be found in the PATENTS file in the same directory.
- *
- * @providesModule StyleSheetRegistry
- * @flow
- */
-'use strict';
-
-var styles = {};
-var uniqueID = 1;
-var emptyStyle = {};
-
-class StyleSheetRegistry {
-  static registerStyle(style: Object): number {
-    var id = ++uniqueID;
-    if (__DEV__) {
-      Object.freeze(style);
-    }
-    styles[id] = style;
-    return id;
-  }
-
-  static getStyleByID(id: number): Object {
-    if (!id) {
-      // Used in the style={[condition && id]} pattern,
-      // we want it to be a no-op when the value is false or null
-      return emptyStyle;
-    }
-
-    var style = styles[id];
-    if (!style) {
-      console.warn('Invalid style with id `' + id + '`. Skipping ...');
-      return emptyStyle;
-    }
-    return style;
-  }
-}
-
-module.exports = StyleSheetRegistry;

Libraries/StyleSheet/flattenStyle.js

@@ -11,14 +11,14 @@
  */
 'use strict';
 
-var StyleSheetRegistry = require('StyleSheetRegistry');
+var ReactNativePropRegistry = require('ReactNativePropRegistry');
 var invariant = require('fbjs/lib/invariant');
 
 import type { StyleObj } from 'StyleSheetTypes';
 
 function getStyle(style) {
   if (typeof style === 'number') {
-    return StyleSheetRegistry.getStyleByID(style);
+    return ReactNativePropRegistry.getByID(style);
   }
   return style;
 }
@@ -39,10 +39,6 @@ function flattenStyle(style: ?StyleObj): ?Object {
     if (computedStyle) {
       for (var key in computedStyle) {
         result[key] = computedStyle[key];
-
-        if (__DEV__) {
-          var value = computedStyle[key];
-        }
       }
     }
   }

Libraries/StyleSheet/styleDiffer.js

@@ -1,61 +0,0 @@
-/**
- * Copyright (c) 2015-present, Facebook, Inc.
- * All rights reserved.
- *
- * This source code is licensed under the BSD-style license found in the
- * LICENSE file in the root directory of this source tree. An additional grant
- * of patent rights can be found in the PATENTS file in the same directory.
- *
- * @providesModule styleDiffer
- * @flow
- */
-'use strict';
-
-var deepDiffer = require('deepDiffer');
-
-function styleDiffer(a: any, b: any): bool {
-  return !styleEqual(a, b);
-}
-
-function styleEqual(a: any, b: any): bool {
-  if (!a) {
-    return !b;
-  }
-  if (!b) {
-    return !a;
-  }
-  if (typeof a !== typeof b) {
-    return false;
-  }
-  if (typeof a === 'number') {
-    return a === b;
-  }
-
-  if (Array.isArray(a)) {
-    if (!Array.isArray(b) || a.length !== b.length) {
-      return false;
-    }
-    for (var i = 0; i < a.length; ++i) {
-      if (!styleEqual(a[i], b[i])) {
-        return false;
-      }
-    }
-    return true;
-  }
-
-  for (var key in a) {
-    if (deepDiffer(a[key], b[key])) {
-      return false;
-    }
-  }
-
-  for (var key in b) {
-    if (!a.hasOwnProperty(key)) {
-      return false;
-    }
-  }
-
-  return true;
-}
-
-module.exports = styleDiffer;