Add RenderComponentThroughput benchmark

Author: Kudo

App.js

@@ -1,96 +1,61 @@
 /**
- * Sample React Native App
- * https://github.com/facebook/react-native
- *
  * @format
  * @flow
  */
 
-import React, {Fragment} from 'react';
-import {
-  SafeAreaView,
-  StyleSheet,
-  ScrollView,
-  View,
-  Text,
-  StatusBar,
-} from 'react-native';
+import React, { useEffect, useState } from 'react';
+import { View, Text, Linking, StyleSheet } from 'react-native';
+import URL from 'url-parse';
 
-import {
-  Header,
-  LearnMoreLinks,
-  Colors,
-  DebugInstructions,
-  ReloadInstructions,
-} from 'react-native/Libraries/NewAppScreen';
+const ROUTES = {
+  '/RenderComponentThroughput': require('./src/ReactRender/RenderComponentThroughput').default,
+};
+
+const NotFoundView = () => (
+  <View style={styles.notFoundView}>
+    <Text style={styles.notFoundText}>View not found</Text>
+  </View>
+);
 
 const App = () => {
+  const [route, setRoute] = useState(null);
+  useEffect(() => {
+    async function setupInitialRoute() {
+      const initialUrl = await Linking.getInitialURL();
+      if (initialUrl && initialUrl.startsWith('rnbench://')) {
+        const url = new URL(initialUrl, '', true);
+        setRoute(url);
+      }
+    }
+
+    setupInitialRoute();
+  }, []);
+
   return (
-    <Fragment>
-      <StatusBar barStyle="dark-content" />
-      <SafeAreaView>
-        <ScrollView
-          contentInsetAdjustmentBehavior="automatic"
-          style={styles.scrollView}>
-          <Header />
-          <View style={styles.body}>
-            <View style={styles.sectionContainer}>
-              <Text style={styles.sectionTitle}>Step One</Text>
-              <Text style={styles.sectionDescription}>
-                Edit <Text style={styles.highlight}>App.js</Text> to change this
-                screen and then come back to see your edits.
-              </Text>
-            </View>
-            <View style={styles.sectionContainer}>
-              <Text style={styles.sectionTitle}>See Your Changes</Text>
-              <Text style={styles.sectionDescription}>
-                <ReloadInstructions />
-              </Text>
-            </View>
-            <View style={styles.sectionContainer}>
-              <Text style={styles.sectionTitle}>Debug</Text>
-              <Text style={styles.sectionDescription}>
-                <DebugInstructions />
-              </Text>
-            </View>
-            <View style={styles.sectionContainer}>
-              <Text style={styles.sectionTitle}>Learn More</Text>
-              <Text style={styles.sectionDescription}>
-                Read the docs to discover what to do next:
-              </Text>
-            </View>
-            <LearnMoreLinks />
-          </View>
-        </ScrollView>
-      </SafeAreaView>
-    </Fragment>
+    <View style={styles.container}>
+      {route != null && ROUTES[route.pathname] != null ? (
+        React.createElement(ROUTES[route.pathname], route.query)
+      ) : (
+        <NotFoundView />
+      )}
+    </View>
   );
 };
 
 const styles = StyleSheet.create({
-  scrollView: {
-    backgroundColor: Colors.lighter,
-  },
-  body: {
-    backgroundColor: Colors.white,
-  },
-  sectionContainer: {
-    marginTop: 32,
-    paddingHorizontal: 24,
-  },
-  sectionTitle: {
-    fontSize: 24,
-    fontWeight: '600',
-    color: Colors.black,
+  container: {
+    flex: 1,
   },
-  sectionDescription: {
-    marginTop: 8,
-    fontSize: 18,
-    fontWeight: '400',
-    color: Colors.dark,
+  notFoundView: {
+    flex: 1,
+    backgroundColor: 'rgb(192, 186, 48)',
+    flexDirection: 'column',
+    justifyContent: 'center',
   },
-  highlight: {
-    fontWeight: '700',
+  notFoundText: {
+    color: 'rgb(255, 255, 255)',
+    fontSize: 32,
+    textAlign: 'center',
   },
 });
 

android/jsc/build.gradle

@@ -5,6 +5,13 @@ repositories {
         // All of React Native (JS, Obj-C sources, Android binaries) is installed from npm
         url("$rootDir/../node_modules/react-native/android")
     }
+
+    if (project.hasProperty("JSC_DIST_REPO")) {
+        maven {
+            url(project.findProperty("JSC_DIST_REPO"))
+        }
+    }
+
     maven {
         // Android JSC is installed from npm
         url("$rootDir/../node_modules/jsc-android/dist")

android/jsc/src/main/AndroidManifest.xml

@@ -19,6 +19,12 @@
             <action android:name="android.intent.action.MAIN" />
             <category android:name="android.intent.category.LAUNCHER" />
         </intent-filter>
+
+        <intent-filter>
+            <action android:name="android.intent.action.VIEW" />
+            <category android:name="android.intent.category.DEFAULT" />
+            <data android:scheme="rnbench" android:host="jsc" />
+        </intent-filter>
       </activity>
       <activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />
     </application>

android/v8/build.gradle

@@ -1,6 +1,12 @@
 apply plugin: "com.android.application"
 
 repositories {
+    if (project.hasProperty("V8_DIST_REPO")) {
+        maven {
+            url(project.findProperty("V8_DIST_REPO"))
+        }
+    }
+
     maven {
         url("$rootDir/../node_modules/react-native-v8/dist")
     }

android/v8/src/main/AndroidManifest.xml

@@ -19,6 +19,12 @@
             <action android:name="android.intent.action.MAIN" />
             <category android:name="android.intent.category.LAUNCHER" />
         </intent-filter>
+
+        <intent-filter>
+            <action android:name="android.intent.action.VIEW" />
+            <category android:name="android.intent.category.DEFAULT" />
+            <data android:scheme="rnbench" android:host="v8" />
+        </intent-filter>
       </activity>
       <activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />
     </application>

package.json

@@ -8,8 +8,11 @@
     "lint": "eslint ."
   },
   "dependencies": {
+    "jsc-android": "^245459.0.0",
     "react": "16.8.6",
-    "react-native": "0.60.0-rc.2"
+    "react-native": "0.60.0-rc.2",
+    "react-native-v8": "^0.60.0-rc.2",
+    "url-parse": "^1.4.7"
   },
   "devDependencies": {
     "@babel/core": "^7.4.5",

prettier.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  'trailingComma': 'es5',
+  'singleQuote': true,
+  'printWidth': 100,
+  'requirePragma': true,
+};

src/ReactRender/RenderComponentThroughput.js

@@ -0,0 +1,74 @@
+/**
+ * @format
+ * @flow
+ */
+
+import React, { useEffect, useLayoutEffect, useState, useRef } from 'react';
+import { ScrollView, View, Text, StyleSheet } from 'react-native';
+
+const Child = ({ id, onMount }) => {
+  useLayoutEffect(() => {
+    onMount(id);
+  }, [id, onMount]);
+
+  return (
+    <View style={styles.child}>
+      <Text style={styles.childText}>{id}</Text>
+    </View>
+  );
+};
+
+const RenderComponentThroughput = ({ interval }) => {
+  const [children, setChildren] = useState([0]);
+  const [shouldContinue, setShouldContinue] = useState(true);
+  const latestChildren = useRef(children);
+
+  function appendChild(id) {
+    setTimeout(() => setChildren(array => [...array, id]), 0);
+  }
+
+  function handleChildDidMount(id) {
+    if (shouldContinue && id === children.length - 1) {
+      appendChild(id + 1);
+    }
+  }
+
+  useEffect(() => {
+    latestChildren.current = children;
+  });
+
+  useEffect(() => {
+    // eslint-disable-next-line no-bitwise
+    const intervalInt = interval | 0;
+    setTimeout(() => {
+      setShouldContinue(false);
+      console.log(`count=${latestChildren.current.length}`);
+    }, intervalInt);
+  }, [interval]);
+
+  return (
+    <ScrollView style={styles.scrollView}>
+      {children.map(i => (
+        <Child key={i} id={i} onMount={handleChildDidMount} />
+      ))}
+    </ScrollView>
+  );
+};
+
+const styles = StyleSheet.create({
+  scrollView: {
+    flex: 1,
+  },
+  child: {
+    alignSelf: 'center',
+    width: 120,
+    height: 16,
+    marginVertical: 8,
+    backgroundColor: 'lightblue',
+  },
+  childText: {
+    textAlign: 'center',
+  },
+});
+
+export default RenderComponentThroughput;

start.py

@@ -0,0 +1,88 @@
+#!/usr/bin/env python
+import os
+import re
+import subprocess
+
+class AdbTool:
+    @classmethod
+    def wait_for_console_log(cls, regex):
+        pattern = re.compile(r'ReactNativeJS: ' + regex)
+        cmd = ['adb', 'logcat']
+        with subprocess.Popen(cmd, stdout=subprocess.PIPE) as proc:
+            for line_in_bytes in iter(proc.stdout.readline, ''):
+                line = line_in_bytes.decode('utf8')
+                search = pattern.search(line)
+                if search is not None:
+                    proc.terminate()
+                    return search
+
+    @classmethod
+    def clear_log(cls):
+        os.system('adb logcat -c')
+
+
+    @classmethod
+    def stop_app(cls, app_id):
+        os.system('adb shell am force-stop com.rnbenchmark.{}'.format(app_id))
+        os.system('adb shell am kill com.rnbenchmark.{}'.format(app_id))
+
+    @classmethod
+    def stop_apps(cls):
+        cls.stop_app('jsc')
+        cls.stop_app('v8')
+
+    @classmethod
+    def start_with_link(cls, app_id, path_with_query):
+        os.system( \
+'adb shell am start -a android.intent.action.VIEW -d "rnbench://{}{}"' \
+' > /dev/null'
+.format(app_id, path_with_query))
+
+class ApkTool:
+    @classmethod
+    def reinstall(cls, app_id):
+        os.chdir('android')
+        os.system( \
+'./gradlew :{app}:clean :{app}:uninstallRelease :{app}:installRelease'
+.format(app=app_id))
+        os.chdir('../')
+
+
+class RenderComponentThroughput:
+    def __init__(self, app_id, interval):
+        self._app_id = app_id
+        self._interval = interval
+
+    def run(self):
+        AdbTool.stop_apps()
+        AdbTool.clear_log()
+        AdbTool.start_with_link(
+            self._app_id,
+            '/RenderComponentThroughput?interval={}'.format(self._interval))
+        result = AdbTool.wait_for_console_log(r'count=(\d+)').group(1)
+        return result
+
+
+def main():
+    ApkTool.reinstall('jsc')
+    ApkTool.reinstall('v8')
+
+    for _ in range(3):
+        print('=========== RenderComponentThroughput 10s ===========')
+        print('jsc', RenderComponentThroughput('jsc', 10000).run())
+        print('v8', RenderComponentThroughput('v8', 10000).run())
+
+        print('=========== RenderComponentThroughput 60s ===========')
+        print('jsc', RenderComponentThroughput('jsc', 60000).run())
+        print('v8', RenderComponentThroughput('v8', 60000).run())
+
+        print('=========== RenderComponentThroughput 180s ===========')
+        print('jsc', RenderComponentThroughput('jsc', 180000).run())
+        print('v8', RenderComponentThroughput('v8', 180000).run())
+
+    return 0
+
+if __name__ == '__main__':
+    root_dir = os.path.dirname(os.path.realpath(__file__))
+    os.chdir(root_dir)
+    main()