Skip to content

Commit 4751ce9

Browse files
stibelstibel
committed
feat(benchmarking): add CSS to rendered HTML
1 parent 2b7d25b commit 4751ce9

5 files changed

Lines changed: 221 additions & 25 deletions

File tree

‎apps/benchmarking/App.js‎

Lines changed: 171 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -16,16 +16,182 @@ const config = {
1616
};
1717

1818
const props = {
19-
renderers: {}
19+
renderers: {},
20+
baseStyle: {
21+
fontSize: 16,
22+
color: '#000000'
23+
},
24+
tagsStyles: {
25+
body: {
26+
fontSize: 16,
27+
lineHeight: 24,
28+
color: '#000000',
29+
backgroundColor: '#ffffff'
30+
},
31+
h1: {
32+
fontSize: 32,
33+
fontWeight: 'bold',
34+
marginVertical: 16,
35+
color: '#20232a'
36+
},
37+
h2: {
38+
fontSize: 24,
39+
fontWeight: 'bold',
40+
marginVertical: 14,
41+
color: '#20232a'
42+
},
43+
h3: {
44+
fontSize: 20,
45+
fontWeight: 'bold',
46+
marginVertical: 12,
47+
color: '#20232a'
48+
},
49+
p: {
50+
marginVertical: 8,
51+
fontSize: 16,
52+
lineHeight: 24
53+
},
54+
a: {
55+
color: '#61dafb',
56+
textDecorationLine: 'underline'
57+
},
58+
code: {
59+
backgroundColor: '#f5f5f5',
60+
fontFamily: 'monospace',
61+
padding: 2,
62+
borderRadius: 3
63+
},
64+
pre: {
65+
backgroundColor: '#282c34',
66+
padding: 16,
67+
borderRadius: 8,
68+
marginVertical: 12
69+
},
70+
ul: {
71+
marginVertical: 8,
72+
paddingLeft: 20
73+
},
74+
ol: {
75+
marginVertical: 8,
76+
paddingLeft: 20
77+
},
78+
li: {
79+
marginVertical: 4
80+
},
81+
blockquote: {
82+
borderLeftWidth: 4,
83+
borderLeftColor: '#61dafb',
84+
paddingLeft: 16,
85+
marginVertical: 12,
86+
fontStyle: 'italic'
87+
},
88+
table: {
89+
marginVertical: 12
90+
},
91+
th: {
92+
fontWeight: 'bold',
93+
padding: 8,
94+
backgroundColor: '#f5f5f5'
95+
},
96+
td: {
97+
padding: 8
98+
}
99+
},
100+
classesStyles: {
101+
navbar: {
102+
backgroundColor: '#20232a',
103+
padding: 12
104+
},
105+
navbar__brand: {
106+
fontSize: 18,
107+
fontWeight: 'bold',
108+
color: '#61dafb'
109+
},
110+
navbar__title: {
111+
fontSize: 18,
112+
fontWeight: 'bold',
113+
color: '#ffffff'
114+
},
115+
navbar__link: {
116+
color: '#ffffff',
117+
marginHorizontal: 8
118+
},
119+
menu__link: {
120+
color: '#20232a',
121+
padding: 8
122+
},
123+
'menu__link--active': {
124+
color: '#61dafb',
125+
fontWeight: 'bold'
126+
},
127+
docTitle_1vX4: {
128+
fontSize: 28,
129+
fontWeight: 'bold',
130+
marginVertical: 16
131+
},
132+
markdown: {
133+
fontSize: 16,
134+
lineHeight: 24
135+
},
136+
badge: {
137+
fontSize: 12,
138+
paddingHorizontal: 8,
139+
paddingVertical: 4,
140+
borderRadius: 12,
141+
backgroundColor: '#e3f2fd',
142+
color: '#1976d2'
143+
},
144+
button: {
145+
backgroundColor: '#61dafb',
146+
padding: 12,
147+
borderRadius: 6,
148+
color: '#20232a'
149+
},
150+
footer: {
151+
backgroundColor: '#20232a',
152+
padding: 24,
153+
marginTop: 32
154+
},
155+
footer__title: {
156+
fontSize: 16,
157+
fontWeight: 'bold',
158+
color: '#ffffff',
159+
marginBottom: 8
160+
},
161+
'footer__link-item': {
162+
color: '#61dafb',
163+
marginVertical: 4
164+
},
165+
tabs: {
166+
marginVertical: 12
167+
},
168+
tabs__item: {
169+
padding: 12,
170+
backgroundColor: '#f5f5f5'
171+
},
172+
'tabs__item--active': {
173+
backgroundColor: '#61dafb',
174+
color: '#ffffff'
175+
}
176+
}
20177
};
21178

22179
export default function App() {
23180
useKeepAwake();
24181
return (
25182
<SafeAreaView style={styles.container}>
26-
<TRenderEngineProvider ignoredDomTags={config.ignoredTags}>
27-
<RenderHTMLConfigProvider {...props}>
28-
<Benchmark html={html} {...config} />
183+
<TRenderEngineProvider
184+
ignoredDomTags={config.ignoredTags}
185+
baseStyle={props.baseStyle}
186+
tagsStyles={props.tagsStyles}
187+
classesStyles={props.classesStyles}>
188+
<RenderHTMLConfigProvider renderers={props.renderers}>
189+
<Benchmark
190+
html={html}
191+
samples={config.samples}
192+
tagsStyles={props.tagsStyles}
193+
classesStyles={props.classesStyles}
194+
/>
29195
</RenderHTMLConfigProvider>
30196
</TRenderEngineProvider>
31197
</SafeAreaView>
@@ -34,6 +200,7 @@ export default function App() {
34200

35201
const styles = StyleSheet.create({
36202
container: {
203+
padding: 16,
37204
flex: 1,
38205
backgroundColor: '#fff'
39206
}

‎apps/benchmarking/Benchmark.js‎

Lines changed: 32 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -52,7 +52,18 @@ function ProgressIndicator({
5252
);
5353
}
5454

55-
export default function Benchmark({ samples, html, ignoredTags }) {
55+
function WaitingIndicator() {
56+
return (
57+
<Text style={styles.waitingText}>Waiting for benchmark to launch</Text>
58+
);
59+
}
60+
61+
export default function Benchmark({
62+
samples,
63+
html,
64+
tagsStyles,
65+
classesStyles
66+
}) {
5667
const {
5768
onLayout,
5869
launch,
@@ -67,15 +78,26 @@ export default function Benchmark({ samples, html, ignoredTags }) {
6778
return (
6879
<View key={runId} onLayout={onLayout}>
6980
<currentProfile.component
70-
ignoredTags={ignoredTags}
7181
running={true}
7282
html={html}
83+
tagsStyles={tagsStyles}
84+
classesStyles={classesStyles}
7385
{...currentProfile.props}
7486
/>
7587
</View>
7688
);
7789
},
78-
[html, ignoredTags, onLayout, currentProfile]
90+
[html, onLayout, currentProfile, tagsStyles, classesStyles]
91+
);
92+
93+
const renderWaitBench = React.useCallback(
94+
({ benchmarks }) =>
95+
benchmarks ? (
96+
<Benchmarks benchmarks={benchmarks} />
97+
) : (
98+
<WaitingIndicator />
99+
),
100+
[]
79101
);
80102

81103
const isRunning = state.state === 'RUNNING' || state.state === 'WAIT_RUN';
@@ -102,14 +124,7 @@ export default function Benchmark({ samples, html, ignoredTags }) {
102124

103125
<ScrollView contentContainerStyle={styles.scrollContainer}>
104126
{match(state, {
105-
WAIT_BENCH: ({ benchmarks }) =>
106-
benchmarks ? (
107-
<Benchmarks benchmarks={benchmarks} />
108-
) : (
109-
<Text style={styles.waitingText}>
110-
Waiting for benchmark to launch
111-
</Text>
112-
),
127+
WAIT_BENCH: renderWaitBench,
113128
WAIT_RUN: renderHtml,
114129
RUNNING: renderHtml
115130
})}
@@ -123,12 +138,15 @@ const styles = StyleSheet.create({
123138
flex: 1
124139
},
125140
buttonContainer: {
141+
paddingTop: 40,
126142
marginBottom: 16,
127-
paddingHorizontal: 16
143+
paddingHorizontal: 16,
144+
backgroundColor: '#fff',
145+
zIndex: 10
128146
},
129147
scrollContainer: {
130-
flexGrow: 1,
131-
paddingHorizontal: 16
148+
paddingHorizontal: 16,
149+
paddingBottom: 20
132150
},
133151
progressContainer: {
134152
backgroundColor: '#E3F2FD',

‎apps/benchmarking/profiles.js‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,11 +10,15 @@ const profiles = [
1010
// },
1111
{
1212
name: 'V5',
13-
component: ProfileV5
13+
component: ProfileV5,
14+
props: {
15+
ignoredTags: ['svg', 'button', 'input', 'form', 'img', 'ol', 'table']
16+
}
1417
},
1518
{
1619
name: 'V6',
17-
component: ProfileV6Source
20+
component: ProfileV6Source,
21+
props: {}
1822
}
1923
];
2024

‎apps/benchmarking/profiles/ProfileV5.js‎

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,16 @@
11
import React from 'react';
22
import RenderHtmlv5 from 'react-native-render-html-v5';
33

4-
export default function ProfileV5({ running, ignoredTags, html }) {
4+
export default function ProfileV5({ running, ignoredTags, html, tagsStyles, classesStyles }) {
55
return (
66
html &&
7-
running && <RenderHtmlv5 ignoredTags={ignoredTags} source={{ html }} />
7+
running && (
8+
<RenderHtmlv5
9+
ignoredTags={ignoredTags}
10+
source={{ html }}
11+
tagsStyles={tagsStyles}
12+
classesStyles={classesStyles}
13+
/>
14+
)
815
);
916
}

‎apps/benchmarking/profiles/ProfileV6Source.js‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,16 +2,16 @@ import React from 'react';
22
import { useWindowDimensions } from 'react-native';
33
import { RenderHTMLSource } from 'react-native-render-html';
44

5-
export default function ProfileV6Source({ running, html, ignoredTags, props }) {
5+
export default function ProfileV6Source({ running, html, ...otherProps }) {
66
const { width } = useWindowDimensions();
7+
78
return (
89
html &&
910
running && (
1011
<RenderHTMLSource
1112
contentWidth={width}
12-
ignoredTags={ignoredTags}
1313
source={{ html }}
14-
{...props}
14+
{...otherProps}
1515
/>
1616
)
1717
);

0 commit comments

Comments
 (0)