Skip to content

Commit

Permalink
Remove unnecessary wrapper from Performance/PerformanceObserver examp…
Browse files Browse the repository at this point in the history 
…les screen in RNTester (facebook#43706)

Summary:

Changelog: [internal]

Just a small improvement of the UI for the Performance API examples in RNTester.

Differential Revision: D55489933
  • Loading branch information
@rubennorte @facebook-github-bot
rubennorte authored and facebook-github-bot committed Mar 28, 2024
1 parent 7daa931 commit f39d6f6
Showing 1 changed file with 65 additions and 78 deletions.
143 changes: 65 additions & 78 deletions packages/rn-tester/js/examples/Performance/PerformanceApiExample.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,11 +9,9 @@
* @oncall react_native
*/

'use strict';
import type MemoryInfo from 'react-native/src/private/webapis/performance/MemoryInfo';
import type ReactNativeStartupTiming from 'react-native/src/private/webapis/performance/ReactNativeStartupTiming';

import RNTesterPage from '../../components/RNTesterPage';
import {RNTesterThemeContext} from '../../components/RNTesterTheme';
import * as React from 'react';
import {useContext, useEffect} from 'react';
Expand All @@ -37,22 +35,20 @@ function MemoryExample(): React.Node {
setMemoryInfo(performance.memory);
}, []);
return (
<RNTesterPage noScroll={true} title="performance.memory">
<View style={styles.container}>
<Button onPress={onGetMemoryInfo} title="Click to update memory info" />
<View>
<Text style={{color: theme.LabelColor}}>
{`jsHeapSizeLimit: ${String(memoryInfo?.jsHeapSizeLimit)} bytes`}
</Text>
<Text style={{color: theme.LabelColor}}>
{`totalJSHeapSize: ${String(memoryInfo?.totalJSHeapSize)} bytes`}
</Text>
<Text style={{color: theme.LabelColor}}>
{`usedJSHeapSize: ${String(memoryInfo?.usedJSHeapSize)} bytes`}
</Text>
</View>
<View style={styles.container}>
<Button onPress={onGetMemoryInfo} title="Click to update memory info" />
<View>
<Text style={{color: theme.LabelColor}}>
{`jsHeapSizeLimit: ${String(memoryInfo?.jsHeapSizeLimit)} bytes`}
</Text>
<Text style={{color: theme.LabelColor}}>
{`totalJSHeapSize: ${String(memoryInfo?.totalJSHeapSize)} bytes`}
</Text>
<Text style={{color: theme.LabelColor}}>
{`usedJSHeapSize: ${String(memoryInfo?.usedJSHeapSize)} bytes`}
</Text>
</View>
</RNTesterPage>
</View>
);
}

Expand All @@ -68,45 +64,43 @@ function StartupTimingExample(): React.Node {
setStartUpTiming(performance.rnStartupTiming);
}, []);
return (
<RNTesterPage noScroll={true} title="performance.reactNativeStartupTiming">
<View style={styles.container}>
<Button
onPress={onGetStartupTiming}
title="Click to update React startup timing"
/>
<View>
<Text
style={{
color: theme.LabelColor,
}}>{`startTime: ${String(startUpTiming?.startTime)} ms`}</Text>
<Text
style={{
color: theme.LabelColor,
}}>{`initializeRuntimeStart: ${String(
startUpTiming?.initializeRuntimeStart,
)} ms`}</Text>
<Text style={{color: theme.LabelColor}}>
{`executeJavaScriptBundleEntryPointStart: ${String(
startUpTiming?.executeJavaScriptBundleEntryPointStart,
)} ms`}
</Text>
<Text
style={{
color: theme.LabelColor,
}}>{`executeJavaScriptBundleEntryPointEnd: ${String(
startUpTiming?.executeJavaScriptBundleEntryPointEnd,
)} ms`}</Text>
<Text
style={{color: theme.LabelColor}}>{`initializeRuntimeEnd: ${String(
startUpTiming?.initializeRuntimeEnd,
)} ms`}</Text>
<Text
style={{
color: theme.LabelColor,
}}>{`endTime: ${String(startUpTiming?.endTime)} ms`}</Text>
</View>
<View style={styles.container}>
<Button
onPress={onGetStartupTiming}
title="Click to update React startup timing"
/>
<View>
<Text
style={{
color: theme.LabelColor,
}}>{`startTime: ${String(startUpTiming?.startTime)} ms`}</Text>
<Text
style={{
color: theme.LabelColor,
}}>{`initializeRuntimeStart: ${String(
startUpTiming?.initializeRuntimeStart,
)} ms`}</Text>
<Text style={{color: theme.LabelColor}}>
{`executeJavaScriptBundleEntryPointStart: ${String(
startUpTiming?.executeJavaScriptBundleEntryPointStart,
)} ms`}
</Text>
<Text
style={{
color: theme.LabelColor,
}}>{`executeJavaScriptBundleEntryPointEnd: ${String(
startUpTiming?.executeJavaScriptBundleEntryPointEnd,
)} ms`}</Text>
<Text
style={{color: theme.LabelColor}}>{`initializeRuntimeEnd: ${String(
startUpTiming?.initializeRuntimeEnd,
)} ms`}</Text>
<Text
style={{
color: theme.LabelColor,
}}>{`endTime: ${String(startUpTiming?.endTime)} ms`}</Text>
</View>
</RNTesterPage>
</View>
);
}

Expand All @@ -132,30 +126,23 @@ function PerformanceObserverUserTimingExample(): React.Node {
}, []);

return (
<RNTesterPage
noScroll={true}
title="PerformanceObserver (marks and measures)">
<View style={styles.container}>
<Button
onPress={onPress}
title="Click to log some marks and measures"
/>
<View>
{entries.map((entry, index) =>
entry.entryType === 'mark' ? (
<Text style={{color: theme.LabelColor}} key={index}>
Mark {entry.name}: {entry.startTime}
</Text>
) : (
<Text style={{color: theme.LabelColor}} key={index}>
Measure {entry.name}: {entry.startTime} -{' '}
{entry.startTime + entry.duration} ({entry.duration}ms)
</Text>
),
)}
</View>
<View style={styles.container}>
<Button onPress={onPress} title="Click to log some marks and measures" />
<View>
{entries.map((entry, index) =>
entry.entryType === 'mark' ? (
<Text style={{color: theme.LabelColor}} key={index}>
Mark {entry.name}: {entry.startTime}
</Text>
) : (
<Text style={{color: theme.LabelColor}} key={index}>
Measure {entry.name}: {entry.startTime} -{' '}
{entry.startTime + entry.duration} ({entry.duration}ms)
</Text>
),
)}
</View>
</RNTesterPage>
</View>
);
}

Expand Down

0 comments on commit f39d6f6

Please sign in to comment.