| /** |
| * Command line application to run Lottie-Web perf on a Lottie file in the |
| * browser and then exporting that result. |
| * |
| */ |
| const puppeteer = require('puppeteer'); |
| const express = require('express'); |
| const fs = require('fs'); |
| const commandLineArgs = require('command-line-args'); |
| const commandLineUsage= require('command-line-usage'); |
| const fetch = require('node-fetch'); |
| |
| const opts = [ |
| { |
| name: 'input', |
| typeLabel: '{underline file}', |
| description: 'The Lottie JSON file to process.' |
| }, |
| { |
| name: 'output', |
| typeLabel: '{underline file}', |
| description: 'The perf file to write. Defaults to perf.json', |
| }, |
| { |
| name: 'port', |
| description: 'The port number to use, defaults to 8081.', |
| type: Number, |
| }, |
| { |
| name: 'lottie_player', |
| description: 'The path to lottie.min.js, defaults to a local npm install location.', |
| type: String, |
| }, |
| { |
| name: 'help', |
| alias: 'h', |
| type: Boolean, |
| description: 'Print this usage guide.' |
| }, |
| ]; |
| |
| const usage = [ |
| { |
| header: 'Lottie-Web Perf', |
| content: 'Command line application to run Lottie-Web perf.', |
| }, |
| { |
| header: 'Options', |
| optionList: opts, |
| }, |
| ]; |
| |
| // Parse and validate flags. |
| const options = commandLineArgs(opts); |
| |
| if (!options.output) { |
| options.output = 'perf.json'; |
| } |
| if (!options.port) { |
| options.port = 8081; |
| } |
| if (!options.lottie_player) { |
| options.lottie_player = 'node_modules/lottie-web/build/player/lottie.min.js'; |
| } |
| |
| if (options.help) { |
| console.log(commandLineUsage(usage)); |
| process.exit(0); |
| } |
| |
| if (!options.input) { |
| console.error('You must supply a Lottie JSON filename.'); |
| console.log(commandLineUsage(usage)); |
| process.exit(1); |
| } |
| |
| // Start up a web server to serve the three files we need. |
| let lottieJS = fs.readFileSync(options.lottie_player, 'utf8'); |
| let driverHTML = fs.readFileSync('lottie-web-perf.html', 'utf8'); |
| let lottieJSON = fs.readFileSync(options.input, 'utf8'); |
| |
| const app = express(); |
| app.get('/', (req, res) => res.send(driverHTML)); |
| app.get('/res/lottie.js', (req, res) => res.send(lottieJS)); |
| app.get('/res/lottie.json', (req, res) => res.send(lottieJSON)); |
| app.listen(options.port, () => console.log('- Local web server started.')) |
| |
| // Utility function. |
| async function wait(ms) { |
| await new Promise(resolve => setTimeout(() => resolve(), ms)); |
| return ms; |
| } |
| |
| const targetURL = "http://localhost:" + options.port + "/"; |
| |
| // Drive chrome to load the web page from the server we have running. |
| async function driveBrowser() { |
| console.log('- Launching chrome .'); |
| const browser = await puppeteer.launch( |
| {headless: true, args: ['--no-sandbox', '--disable-setuid-sandbox']}); |
| const page = await browser.newPage(); |
| console.log("Loading " + targetURL); |
| try { |
| await page.goto(targetURL, { |
| timeout: 20000, |
| waitUntil: 'networkidle0' |
| }); |
| console.log('- Waiting 20s for run to be done.'); |
| await page.waitForFunction('window._lottieWebDone === true', { |
| timeout: 20000, |
| }); |
| } catch(e) { |
| console.log('Timed out while loading or drawing. Either the JSON file was ' + |
| 'too big or hit a bug in the player.', e); |
| await browser.close(); |
| process.exit(0); |
| } |
| |
| // Write results. |
| var extractResults = function() { |
| return { |
| 'frame_avg_us': window._avgFrameTimeUs, |
| 'frame_max_us': window._maxFrameTimeUs, |
| 'frame_min_us': window._minFrameTimeUs, |
| }; |
| } |
| var data = await page.evaluate(extractResults); |
| console.log(data) |
| fs.writeFileSync(options.output, JSON.stringify(data), 'utf-8'); |
| |
| await browser.close(); |
| // Need to call exit() because the web server is still running. |
| process.exit(0); |
| } |
| |
| driveBrowser(); |