From 236121e32c36571dce5469d763c5f7ee5ecc4f05 Mon Sep 17 00:00:00 2001
From: Nicolas Gallagher <nicolasgallagher@gmail.com>
Date: Mon, 2 Jan 2017 22:46:38 -0800
Subject: [PATCH] Add unregistered styles benchmark

---
 performance/benchmark.js                          |  4 ++--
 performance/benchmarks/deepTree/createDeepTree.js |  9 ++++++---
 performance/benchmarks/deepTree/index.js          | 12 ++++++------
 performance/index.js                              |  7 ++++++-
 4 files changed, 20 insertions(+), 12 deletions(-)

diff --git a/performance/benchmark.js b/performance/benchmark.js
index aa4c9066..7b2fefe0 100644
--- a/performance/benchmark.js
+++ b/performance/benchmark.js
@@ -56,8 +56,8 @@ const benchmark = ({ name, description, setup, teardown, task, runs }) => {
       }
     };
 
-    console.group();
-    console.log(`[benchmark] ${name}: ${description}`);
+    console.group(`[benchmark] ${name}`);
+    console.log(description);
     window.requestAnimationFrame(a);
   });
 };
diff --git a/performance/benchmarks/deepTree/createDeepTree.js b/performance/benchmarks/deepTree/createDeepTree.js
index 8a494df9..a526d8db 100644
--- a/performance/benchmarks/deepTree/createDeepTree.js
+++ b/performance/benchmarks/deepTree/createDeepTree.js
@@ -1,6 +1,6 @@
 import React, { Component, PropTypes } from 'react';
 
-const createDeepTree = ({ StyleSheet, View }) => {
+const createDeepTree = ({ StyleSheet, View }, options = {}) => {
   class DeepTree extends Component {
     static propTypes = {
       breadth: PropTypes.number.isRequired,
@@ -11,6 +11,7 @@ const createDeepTree = ({ StyleSheet, View }) => {
 
     render() {
       const { breadth, depth, id, wrap } = this.props;
+
       let result = (
         <View
           style={[
@@ -45,7 +46,7 @@ const createDeepTree = ({ StyleSheet, View }) => {
     }
   }
 
-  const styles = StyleSheet.create({
+  const stylesObject = {
     outer: {
       padding: 4
     },
@@ -77,7 +78,9 @@ const createDeepTree = ({ StyleSheet, View }) => {
     terminal2: {
       backgroundColor: 'red'
     }
-  });
+  };
+
+  const styles = options.registerStyles ? StyleSheet.create(stylesObject) : stylesObject;
 
   return DeepTree;
 };
diff --git a/performance/benchmarks/deepTree/index.js b/performance/benchmarks/deepTree/index.js
index 7f851070..11d5fcb2 100644
--- a/performance/benchmarks/deepTree/index.js
+++ b/performance/benchmarks/deepTree/index.js
@@ -4,16 +4,16 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import ReactNative from 'react-native';
 
-// React Native for Web implementation of the tree
-const DeepTree = createDeepTree(ReactNative);
+const deepTreeBenchmark = ({ breadth, depth, registerStyles = true, runs, wrap }, node) => () => {
+  // React Native for Web implementation of the tree
+  const DeepTree = createDeepTree(ReactNative, { registerStyles });
 
-const deepTreeBenchmark = ({ breadth, depth, wrap, runs }, node) => () => {
-  const setup = () => { };
+  const setup = () => {};
   const teardown = () => ReactDOM.unmountComponentAtNode(node);
 
   return benchmark({
-    name: 'DeepTree',
-    description: `depth=${depth}, breadth=${breadth}, wrap=${wrap})`,
+    name: `DeepTree (${registerStyles ? 'registered' : 'unregistered'}) styles)`,
+    description: `depth=${depth}, breadth=${breadth}, wrap=${wrap}`,
     runs,
     setup,
     teardown,
diff --git a/performance/index.js b/performance/index.js
index c05f6c07..23b8a432 100644
--- a/performance/index.js
+++ b/performance/index.js
@@ -1,11 +1,16 @@
+import createDeepTree from './benchmarks/deepTree/createDeepTree';
 import deepTree from './benchmarks/deepTree';
 import React from 'react';
 import ReactDOM from 'react-dom';
+import ReactNative from 'react-native';
 
 const node = document.querySelector('.root');
+const DeepTree = createDeepTree(ReactNative);
 
 Promise.resolve()
+  .then(deepTree({ wrap: 4, depth: 3, breadth: 10, runs: 10, registerStyles: false }, node))
+  .then(deepTree({ wrap: 1, depth: 5, breadth: 3, runs: 20, registerStyles: false }, node))
   .then(deepTree({ wrap: 4, depth: 3, breadth: 10, runs: 10 }, node))
   .then(deepTree({ wrap: 1, depth: 5, breadth: 3, runs: 20 }, node))
-  .then(() => ReactDOM.render(<div>Complete</div>, node));
+  .then(() => ReactDOM.render(<DeepTree breadth={3} depth={5} id={0} wrap={1} />, node));