Merge remote-tracking branch 'react-native-render-html/migrate-render-html-with-history' into chore/migrate-render-html-with-history

Author: 5ZYSZ3K

apps/benchmarking/.expo-shared/assets.json

@@ -0,0 +1,4 @@
+{
+  "12bb71342c6255bbf50437ec8f4441c083f47cdb74bd89160c15e4f43e52a1cb": true,
+  "40b842e832070c58deac6aa9e08fa459302ee3f9da492c7e77d93d2fbf4a56fd": true
+}

apps/benchmarking/.gitignore

@@ -0,0 +1,13 @@
+node_modules/
+.expo/
+npm-debug.*
+*.jks
+*.p8
+*.p12
+*.key
+*.mobileprovision
+*.orig.*
+web-build/
+
+# macOS
+.DS_Store

apps/benchmarking/App.js

@@ -0,0 +1,32 @@
+import React from 'react';
+import { SafeAreaView } from 'react-native-safe-area-context';
+import { useKeepAwake } from 'expo-keep-awake';
+import html from './source';
+import {
+  TRenderEngineProvider,
+  RenderHTMLConfigProvider
+} from 'react-native-render-html';
+
+import Benchmark from './Benchmark';
+
+const config = {
+  samples: 50,
+  ignoredTags: ['svg', 'button', 'input', 'form', 'img', 'ol', 'table']
+};
+
+const props = {
+  renderers: {}
+};
+
+export default function App() {
+  useKeepAwake();
+  return (
+    <SafeAreaView style={{ flexGrow: 1 }}>
+      <TRenderEngineProvider ignoredDomTags={config.ignoredTags}>
+        <RenderHTMLConfigProvider {...props}>
+          <Benchmark html={html} {...config} />
+        </RenderHTMLConfigProvider>
+      </TRenderEngineProvider>
+    </SafeAreaView>
+  );
+}

apps/benchmarking/Benchmark.js

@@ -0,0 +1,63 @@
+/* eslint-disable no-undef */
+import * as React from 'react';
+import { ScrollView, StyleSheet, View, Text, Button } from 'react-native';
+import { mean } from 'ramda';
+import { match } from 'react-states';
+import useBenchmark from './useBenchmark';
+
+function Benchmarks({ benchmarks }) {
+  return (
+    <View>
+      <Text>
+        Average Time to Render:{'\n'}
+        {benchmarks.map((e) => `${e.name}: ${mean(e.values).toFixed(2)}ms\n`)}
+      </Text>
+    </View>
+  );
+}
+
+export default function Benchmark({ samples, html, ignoredTags }) {
+  const { onLayout, launch, ...state } = useBenchmark({
+    runs: samples
+  });
+  const renderHtml = React.useCallback(
+    ({ runId, profile }) => (
+      <View key={runId} onLayout={onLayout}>
+        <profile.component
+          ignoredTags={ignoredTags}
+          running={true}
+          html={html}
+          {...profile.props}
+        />
+      </View>
+    ),
+    [html, ignoredTags, onLayout]
+  );
+  return (
+    <View>
+      <Button
+        title="Run Benchmark"
+        onPress={launch}
+        disabled={state.state !== 'WAIT_BENCH'}
+      />
+      <ScrollView contentContainerStyle={styles.container}>
+        {match(state, {
+          WAIT_BENCH: ({ benchmarks }) =>
+            benchmarks ? (
+              <Benchmarks benchmarks={benchmarks} />
+            ) : (
+              <Text>Waiting for benchmark to launch</Text>
+            ),
+          WAIT_RUN: renderHtml,
+          RUNNING: renderHtml
+        })}
+      </ScrollView>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flexGrow: 1
+  }
+});

apps/benchmarking/app.json

@@ -0,0 +1,34 @@
+{
+  "expo": {
+    "name": "benchmarking",
+    "slug": "benchmarking",
+    "version": "1.0.0",
+    "orientation": "portrait",
+    "icon": "./assets/icon.png",
+    "splash": {
+      "image": "./assets/splash.png",
+      "resizeMode": "contain",
+      "backgroundColor": "#ffffff"
+    },
+    "updates": {
+      "fallbackToCacheTimeout": 0
+    },
+    "assetBundlePatterns": [
+      "**/*"
+    ],
+    "ios": {
+      "supportsTablet": true,
+      "bundleIdentifier": "org.nativehtml.benchmarking"
+    },
+    "android": {
+      "adaptiveIcon": {
+        "foregroundImage": "./assets/adaptive-icon.png",
+        "backgroundColor": "#FFFFFF"
+      },
+      "package": "org.nativehtml.benchmarking"
+    },
+    "web": {
+      "favicon": "./assets/favicon.png"
+    }
+  }
+}

apps/benchmarking/assets/adaptive-icon.png

@@ -0,0 +1,6 @@
+module.exports = function(api) {
+  api.cache(true);
+  return {
+    presets: ['babel-preset-expo'],
+  };
+};