Ravi Mistry | 6ac3795 | 2019-06-19 11:26:00 -0400 | [diff] [blame] | 1 | /** |
| 2 | * Command line application to run Lottie-Web perf on a Lottie file in the |
| 3 | * browser and then exporting that result. |
| 4 | * |
| 5 | */ |
| 6 | const puppeteer = require('puppeteer'); |
| 7 | const express = require('express'); |
| 8 | const fs = require('fs'); |
| 9 | const commandLineArgs = require('command-line-args'); |
| 10 | const commandLineUsage= require('command-line-usage'); |
| 11 | const fetch = require('node-fetch'); |
| 12 | |
| 13 | const opts = [ |
| 14 | { |
| 15 | name: 'input', |
| 16 | typeLabel: '{underline file}', |
| 17 | description: 'The Lottie JSON file to process.' |
| 18 | }, |
| 19 | { |
| 20 | name: 'output', |
| 21 | typeLabel: '{underline file}', |
| 22 | description: 'The perf file to write. Defaults to perf.json', |
| 23 | }, |
| 24 | { |
| 25 | name: 'port', |
| 26 | description: 'The port number to use, defaults to 8081.', |
| 27 | type: Number, |
| 28 | }, |
| 29 | { |
| 30 | name: 'lottie_player', |
| 31 | description: 'The path to lottie.min.js, defaults to a local npm install location.', |
| 32 | type: String, |
| 33 | }, |
| 34 | { |
| 35 | name: 'help', |
| 36 | alias: 'h', |
| 37 | type: Boolean, |
| 38 | description: 'Print this usage guide.' |
| 39 | }, |
| 40 | ]; |
| 41 | |
| 42 | const usage = [ |
| 43 | { |
| 44 | header: 'Lottie-Web Perf', |
| 45 | content: 'Command line application to run Lottie-Web perf.', |
| 46 | }, |
| 47 | { |
| 48 | header: 'Options', |
| 49 | optionList: opts, |
| 50 | }, |
| 51 | ]; |
| 52 | |
| 53 | // Parse and validate flags. |
| 54 | const options = commandLineArgs(opts); |
| 55 | |
| 56 | if (!options.output) { |
| 57 | options.output = 'perf.json'; |
| 58 | } |
| 59 | if (!options.port) { |
| 60 | options.port = 8081; |
| 61 | } |
Ravi Mistry | 0233b1e | 2019-06-19 14:47:59 -0400 | [diff] [blame] | 62 | if (!options.lottie_player) { |
| 63 | options.lottie_player = 'node_modules/lottie-web/build/player/lottie.min.js'; |
| 64 | } |
Ravi Mistry | 6ac3795 | 2019-06-19 11:26:00 -0400 | [diff] [blame] | 65 | |
| 66 | if (options.help) { |
| 67 | console.log(commandLineUsage(usage)); |
| 68 | process.exit(0); |
| 69 | } |
| 70 | |
| 71 | if (!options.input) { |
| 72 | console.error('You must supply a Lottie JSON filename.'); |
| 73 | console.log(commandLineUsage(usage)); |
| 74 | process.exit(1); |
| 75 | } |
| 76 | |
| 77 | // Start up a web server to serve the three files we need. |
| 78 | let lottieJS = fs.readFileSync(options.lottie_player, 'utf8'); |
| 79 | let driverHTML = fs.readFileSync('lottie-web-perf.html', 'utf8'); |
| 80 | let lottieJSON = fs.readFileSync(options.input, 'utf8'); |
| 81 | |
| 82 | const app = express(); |
| 83 | app.get('/', (req, res) => res.send(driverHTML)); |
| 84 | app.get('/res/lottie.js', (req, res) => res.send(lottieJS)); |
| 85 | app.get('/res/lottie.json', (req, res) => res.send(lottieJSON)); |
| 86 | app.listen(options.port, () => console.log('- Local web server started.')) |
| 87 | |
| 88 | // Utility function. |
| 89 | async function wait(ms) { |
| 90 | await new Promise(resolve => setTimeout(() => resolve(), ms)); |
| 91 | return ms; |
| 92 | } |
| 93 | |
| 94 | const targetURL = "http://localhost:" + options.port + "/"; |
| 95 | |
| 96 | // Drive chrome to load the web page from the server we have running. |
| 97 | async function driveBrowser() { |
Ravi Mistry | b2ca006 | 2019-06-20 15:56:24 +0000 | [diff] [blame] | 98 | console.log('- Launching chrome for ' + options.input); |
Ravi Mistry | 6ac3795 | 2019-06-19 11:26:00 -0400 | [diff] [blame] | 99 | const browser = await puppeteer.launch( |
| 100 | {headless: true, args: ['--no-sandbox', '--disable-setuid-sandbox']}); |
| 101 | const page = await browser.newPage(); |
| 102 | console.log("Loading " + targetURL); |
| 103 | try { |
| 104 | await page.goto(targetURL, { |
| 105 | timeout: 20000, |
| 106 | waitUntil: 'networkidle0' |
| 107 | }); |
| 108 | console.log('- Waiting 20s for run to be done.'); |
| 109 | await page.waitForFunction('window._lottieWebDone === true', { |
| 110 | timeout: 20000, |
| 111 | }); |
| 112 | } catch(e) { |
| 113 | console.log('Timed out while loading or drawing. Either the JSON file was ' + |
| 114 | 'too big or hit a bug in the player.', e); |
| 115 | await browser.close(); |
| 116 | process.exit(0); |
| 117 | } |
| 118 | |
| 119 | // Write results. |
| 120 | var extractResults = function() { |
| 121 | return { |
| 122 | 'frame_avg_us': window._avgFrameTimeUs, |
| 123 | 'frame_max_us': window._maxFrameTimeUs, |
| 124 | 'frame_min_us': window._minFrameTimeUs, |
| 125 | }; |
| 126 | } |
| 127 | var data = await page.evaluate(extractResults); |
| 128 | console.log(data) |
| 129 | fs.writeFileSync(options.output, JSON.stringify(data), 'utf-8'); |
| 130 | |
| 131 | await browser.close(); |
| 132 | // Need to call exit() because the web server is still running. |
| 133 | process.exit(0); |
| 134 | } |
| 135 | |
| 136 | driveBrowser(); |