11/* eslint no-console: 0 */
22'use strict'
33
4- const path = require ( 'path' )
5- const puppeteer = require ( 'puppeteer' )
6- const fs = require ( 'fs' )
7- const Table = require ( 'cli-table2' )
8- const _ = require ( 'lodash' )
9- const glob = require ( 'glob' )
10- const yargs = require ( 'yargs/yargs' )
11-
12- const serverUtils = require ( './utils/server.js' )
13-
14- const readFolderNames = ( searchDir ) => {
4+ import path from 'path'
5+ import puppeteer from 'puppeteer'
6+ import playwright from 'playwright'
7+ import fs from 'fs'
8+ import Table from 'cli-table2'
9+ import _ from 'lodash'
10+ import glob from 'glob'
11+ import yargs from 'yargs/yargs'
12+
13+ import {
14+ capturePageStats ,
15+ ProcessedFPSEntry ,
16+ runServer ,
17+ PageStatsResult ,
18+ RenderResult ,
19+ } from './utils/server'
20+
21+ const readFolderNames = ( searchDir : string ) => {
1522 return glob . sync ( '*/' , { cwd : searchDir } ) . map ( ( s ) => s . replace ( '/' , '' ) )
1623}
1724
@@ -51,26 +58,27 @@ const args = yargs(process.argv.slice(2))
5158
5259// Given an array of items such as ["a", "b", "c", "d"], return the pairwise entries
5360// in the form [ ["a","b"], ["b","c"], ["c","d"] ]
54- function pairwise ( list ) {
61+ function pairwise < T > ( list : T [ ] ) : [ T , T ] [ ] {
5562 // Create a new list offset by 1
56- var allButFirst = _ . rest ( list )
63+ // @ts -ignore
64+ const allButFirst : T [ ] = _ . rest ( list )
5765 // Pair up entries at each index
58- var zipped = _ . zip ( list , allButFirst )
66+ const zipped = _ . zip ( list , allButFirst )
5967 // Remove last entry, as there's a mismatch from the offset
60- var pairwiseEntries = _ . initial ( zipped )
68+ const pairwiseEntries = _ . initial ( zipped ) as [ T , T ] [ ]
6169 return pairwiseEntries
6270}
6371
6472function printBenchmarkResults ( benchmark , versionPerfEntries , trace ) {
6573 console . log ( `\nResults for benchmark ${ benchmark } )
6674
67- let traceCategories = [ ]
75+ let traceCategories : string [ ] = [ ]
6876
6977 if ( trace ) {
7078 traceCategories = [ 'Scripting' , 'Rendering' , 'Painting' ]
7179 }
7280
73- const table = new Table ( {
81+ const table : any = new Table ( {
7482 head : [
7583 'Version' ,
7684 'Avg FPS' ,
@@ -87,7 +95,7 @@ function printBenchmarkResults(benchmark, versionPerfEntries, trace) {
8795
8896 const { fps, profile, mountTime, averageUpdateTime } = versionResults
8997
90- let traceResults = [ ]
98+ let traceResults : number [ ] = [ ]
9199
92100 if ( trace ) {
93101 traceResults = [
@@ -112,10 +120,15 @@ function printBenchmarkResults(benchmark, versionPerfEntries, trace) {
112120}
113121
114122function calculateBenchmarkStats (
115- fpsRunResults ,
116- categories ,
123+ fpsRunResults : {
124+ fpsValues : ProcessedFPSEntry [ ]
125+ start : number
126+ end : number
127+ reactTimingEntries : RenderResult [ ]
128+ } ,
129+ categories : string [ ] ,
117130 traceRunResults ,
118- trace
131+ trace : boolean
119132) {
120133 const { fpsValues, start, end } = fpsRunResults
121134
@@ -138,19 +151,24 @@ function calculateBenchmarkStats(
138151 const duration = second . timestamp - first . timestamp
139152 const durationSeconds = duration / 1000.0
140153
141- return { FPS : first . FPS , durationSeconds }
154+ return { FPS : first . FPS , durationSeconds, weightedFPS : 0 }
142155 } )
143156
144157 const sums = fpsValuesWithDurations . reduce (
145158 ( prev , current ) => {
146159 const weightedFPS = current . FPS * current . durationSeconds
147160
148161 return {
162+ FPS : current . FPS ,
149163 weightedFPS : prev . weightedFPS + weightedFPS ,
150164 durationSeconds : prev . durationSeconds + current . durationSeconds ,
151165 }
152166 } ,
153- { FPS : 0 , weightedFPS : 0 , durationSeconds : 0 }
167+ { FPS : 0 , weightedFPS : 0 , durationSeconds : 0 } as {
168+ FPS : number
169+ weightedFPS : number
170+ durationSeconds : number
171+ }
154172 )
155173
156174 const weightedFPS = sums . weightedFPS / sums . durationSeconds
@@ -170,10 +188,20 @@ function calculateBenchmarkStats(
170188 return { fps, profile : { categories } , mountTime, averageUpdateTime }
171189}
172190
173- async function runBenchmarks ( { scenarios, versions, length, trace } ) {
191+ async function runBenchmarks ( {
192+ scenarios,
193+ versions,
194+ length,
195+ trace,
196+ } : {
197+ scenarios : string [ ]
198+ versions : string [ ]
199+ length : number
200+ trace : boolean
201+ } ) {
174202 console . log ( 'Scenarios: ' , scenarios )
175203 const distFolder = path . resolve ( 'dist' )
176- const server = await serverUtils . runServer ( 9999 , distFolder )
204+ const server = await runServer ( 9999 , distFolder )
177205
178206 for ( let scenario of scenarios ) {
179207 const versionPerfEntries = { }
@@ -182,8 +210,8 @@ async function runBenchmarks({ scenarios, versions, length, trace }) {
182210
183211 for ( let version of versions ) {
184212 console . log ( ` React-Redux version: ${ version } )
185- const browser = await puppeteer . launch ( {
186- // headless: false
213+ const browser = await playwright . chromium . launch ( {
214+ headless : true ,
187215 } )
188216
189217 const folderPath = path . join ( distFolder , version , scenario )
@@ -198,14 +226,15 @@ async function runBenchmarks({ scenarios, versions, length, trace }) {
198226 const URL = `http://localhost:9999/${ version } ${ scenario }
199227 try {
200228 console . log ( ` Checking max FPS... (${ length } )
201- const fpsRunResults = await serverUtils . capturePageStats (
229+ const fpsRunResults = await capturePageStats (
202230 browser ,
203231 URL ,
204232 null ,
205233 length * 1000
206234 )
207235
208- let traceRunResults , categories
236+ let traceRunResults : PageStatsResult | undefined
237+ let categories : string [ ] = [ ]
209238
210239 if ( trace ) {
211240 console . log ( ` Running trace... (${ length } )
@@ -214,7 +243,7 @@ async function runBenchmarks({ scenarios, versions, length, trace }) {
214243 'runs' ,
215244 `trace-${ scenario } ${ version }
216245 )
217- traceRunResults = await serverUtils . capturePageStats (
246+ traceRunResults = await capturePageStats (
218247 browser ,
219248 URL ,
220249 traceFilename ,
@@ -242,4 +271,5 @@ async function runBenchmarks({ scenarios, versions, length, trace }) {
242271 process . exit ( 0 )
243272}
244273
274+ // @ts -ignore
245275runBenchmarks ( args . argv )
0 commit comments