diff --git a/.husky/commit-msg b/.husky/commit-msg index b3a85d9a..00fe3c87 100755 --- a/.husky/commit-msg +++ b/.husky/commit-msg @@ -1,5 +1 @@ -#!/bin/sh -. "$(dirname "$0")/_/husky.sh" - yarn commitlint --edit "$1" - diff --git a/.nvmrc b/.nvmrc index 728f7de5..2bd5a0a9 100644 --- a/.nvmrc +++ b/.nvmrc @@ -1 +1 @@ -22.9.0 +22 diff --git a/apps/benchmarking/App.js b/apps/benchmarking/App.js index 47321ee7..fcc29b13 100644 --- a/apps/benchmarking/App.js +++ b/apps/benchmarking/App.js @@ -1,4 +1,5 @@ import React from 'react'; +import { StyleSheet } from 'react-native'; import { SafeAreaView } from 'react-native-safe-area-context'; import { useKeepAwake } from 'expo-keep-awake'; import html from './source'; @@ -14,19 +15,225 @@ const config = { ignoredTags: ['svg', 'button', 'input', 'form', 'img', 'ol', 'table'] }; -const props = { - renderers: {} -}; - export default function App() { useKeepAwake(); return ( - - - - + + + + ); } + +const styles = StyleSheet.create({ + container: { + padding: 16, + flex: 1, + backgroundColor: '#fff' + }, + baseStyle: { + fontSize: 16, + color: '#000000' + }, + body: { + fontSize: 16, + lineHeight: 24, + color: '#000000', + backgroundColor: '#ffffff' + }, + h1: { + fontSize: 32, + fontWeight: 'bold', + marginVertical: 16, + color: '#20232a' + }, + h2: { + fontSize: 24, + fontWeight: 'bold', + marginVertical: 14, + color: '#20232a' + }, + h3: { + fontSize: 20, + fontWeight: 'bold', + marginVertical: 12, + color: '#20232a' + }, + p: { + marginVertical: 8, + fontSize: 16, + lineHeight: 24 + }, + a: { + color: '#61dafb', + textDecorationLine: 'underline' + }, + code: { + backgroundColor: '#f5f5f5', + fontFamily: 'monospace', + padding: 2, + borderRadius: 3 + }, + pre: { + backgroundColor: '#282c34', + padding: 16, + borderRadius: 8, + marginVertical: 12 + }, + ul: { + marginVertical: 8, + paddingLeft: 20 + }, + ol: { + marginVertical: 8, + paddingLeft: 20 + }, + li: { + marginVertical: 4 + }, + blockquote: { + borderLeftWidth: 4, + borderLeftColor: '#61dafb', + paddingLeft: 16, + marginVertical: 12, + fontStyle: 'italic' + }, + table: { + marginVertical: 12 + }, + th: { + fontWeight: 'bold', + padding: 8, + backgroundColor: '#f5f5f5' + }, + td: { + padding: 8 + }, + navbar: { + backgroundColor: '#20232a', + padding: 12 + }, + navbarBrand: { + fontSize: 18, + fontWeight: 'bold', + color: '#61dafb' + }, + navbarTitle: { + fontSize: 18, + fontWeight: 'bold', + color: '#ffffff' + }, + navbarLink: { + color: '#ffffff', + marginHorizontal: 8 + }, + menuLink: { + color: '#20232a', + padding: 8 + }, + menuLinkActive: { + color: '#61dafb', + fontWeight: 'bold' + }, + docTitle1vX4: { + fontSize: 28, + fontWeight: 'bold', + marginVertical: 16 + }, + markdown: { + fontSize: 16, + lineHeight: 24 + }, + badge: { + fontSize: 12, + paddingHorizontal: 8, + paddingVertical: 4, + borderRadius: 12, + backgroundColor: '#e3f2fd', + color: '#1976d2' + }, + button: { + backgroundColor: '#61dafb', + padding: 12, + borderRadius: 6, + color: '#20232a' + }, + footer: { + backgroundColor: '#20232a', + padding: 24, + marginTop: 32 + }, + footerTitle: { + fontSize: 16, + fontWeight: 'bold', + color: '#ffffff', + marginBottom: 8 + }, + footerLinkItem: { + color: '#61dafb', + marginVertical: 4 + }, + tabs: { + marginVertical: 12 + }, + tabsItem: { + padding: 12, + backgroundColor: '#f5f5f5' + }, + tabsItemActive: { + backgroundColor: '#61dafb', + color: '#ffffff' + } +}); + +const props = { + renderers: {}, + baseStyle: styles.baseStyle, + tagsStyles: { + body: styles.body, + h1: styles.h1, + h2: styles.h2, + h3: styles.h3, + p: styles.p, + a: styles.a, + code: styles.code, + pre: styles.pre, + ul: styles.ul, + ol: styles.ol, + li: styles.li, + blockquote: styles.blockquote, + table: styles.table, + th: styles.th, + td: styles.td + }, + classesStyles: { + navbar: styles.navbar, + navbar__brand: styles.navbarBrand, + navbar__title: styles.navbarTitle, + navbar__link: styles.navbarLink, + menu__link: styles.menuLink, + 'menu__link--active': styles.menuLinkActive, + docTitle_1vX4: styles.docTitle1vX4, + markdown: styles.markdown, + badge: styles.badge, + button: styles.button, + footer: styles.footer, + footer__title: styles.footerTitle, + 'footer__link-item': styles.footerLinkItem, + tabs: styles.tabs, + tabs__item: styles.tabsItem, + 'tabs__item--active': styles.tabsItemActive + } +}; diff --git a/apps/benchmarking/Benchmark.js b/apps/benchmarking/Benchmark.js index 398b0518..6826d90b 100644 --- a/apps/benchmarking/Benchmark.js +++ b/apps/benchmarking/Benchmark.js @@ -1,53 +1,130 @@ /* eslint-disable no-undef */ import * as React from 'react'; -import { ScrollView, StyleSheet, View, Text, Button } from 'react-native'; +import { + ScrollView, + StyleSheet, + View, + Text, + Button, + ActivityIndicator +} from 'react-native'; import { mean } from 'ramda'; import { match } from 'react-states'; import useBenchmark from './useBenchmark'; function Benchmarks({ benchmarks }) { return ( - - - Average Time to Render:{'\n'} - {benchmarks.map((e) => `${e.name}: ${mean(e.values).toFixed(2)}ms\n`)} + + Average Time to Render: + {benchmarks.map((e) => ( + + {e.name}: {mean(e.values).toFixed(2)}ms + + ))} + + ); +} + +function ProgressIndicator({ + runId, + runs, + profileId, + numOfProfiles, + profileName +}) { + const overallProgress = ( + ((profileId * runs + runId + 1) / (numOfProfiles * runs)) * + 100 + ).toFixed(0); + + return ( + + + Benchmarking in Progress... + + Profile: {profileName} ({profileId + 1}/{numOfProfiles}) + + Run: {runId + 1}/{runs} + + {overallProgress}% Complete ); } -export default function Benchmark({ samples, html, ignoredTags }) { - const { onLayout, launch, ...state } = useBenchmark({ +function WaitingIndicator() { + return ( + Waiting for benchmark to launch + ); +} + +export default function Benchmark({ + samples, + html, + tagsStyles, + classesStyles +}) { + const { + onLayout, + launch, + profile: currentProfile, + ...state + } = useBenchmark({ runs: samples }); const renderHtml = React.useCallback( - ({ runId, profile }) => ( - - - - ), - [html, ignoredTags, onLayout] + ({ runId }) => { + if (!currentProfile) return null; + return ( + + + + ); + }, + [html, onLayout, currentProfile, tagsStyles, classesStyles] + ); + + const renderWaitBench = React.useCallback( + ({ benchmarks }) => + benchmarks ? ( + + ) : ( + + ), + [] ); + + const isRunning = state.state === 'RUNNING' || state.state === 'WAIT_RUN'; + return ( - -