Skip to content

Commit

Permalink
misc(build): refactor viewer bundler into reusable GhPagesApp (#11564)
Browse files Browse the repository at this point in the history
  • Loading branch information
connorjclark authored Nov 5, 2020
1 parent b22b509 commit 165e492
Show file tree
Hide file tree
Showing 9 changed files with 206 additions and 173 deletions.
2 changes: 1 addition & 1 deletion build-tracker.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ module.exports = {
'dist/lightrider/lighthouse-lr-bundle.js',
'dist/extension/scripts/lighthouse-ext-bundle.js',
'dist/lighthouse-dt-bundle.js',
'dist/viewer/src/viewer.js',
'dist/gh-pages/viewer/src/bundled.js',
'dist/lightrider/report-generator-bundle.js',
'dist/dt-report-resources/report.js',
'dist/dt-report-resources/report-generator.js',
Expand Down
181 changes: 27 additions & 154 deletions build/build-viewer.js
Original file line number Diff line number Diff line change
Expand Up @@ -6,106 +6,17 @@
'use strict';

const fs = require('fs');
const path = require('path');
const {promisify} = require('util');
const readFileAsync = promisify(fs.readFile);
const writeFileAsync = promisify(fs.writeFile);
const mkdir = fs.promises.mkdir;

const browserify = require('browserify');
const cpy = require('cpy');
const ghPages = require('gh-pages');
const glob = promisify(require('glob'));
const lighthousePackage = require('../package.json');
const rimraf = require('rimraf');
const terser = require('terser');
const GhPagesApp = require('./gh-pages-app.js');
const {minifyFileTransform} = require('./build-utils.js');

const htmlReportAssets = require('../lighthouse-core/report/html/html-report-assets.js');
const sourceDir = `${__dirname}/../lighthouse-viewer`;
const distDir = `${__dirname}/../dist/viewer`;

const license = `/*
* @license Copyright 2018 The Lighthouse Authors. All Rights Reserved.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express
* or implied. See the License for the specific language governing
* permissions and limitations under the License.
*/`;

/**
* Evaluates path glob and loads all identified files as an array of strings.
* @param {string} pattern
* @return {Promise<Array<string>>}
*/
async function loadFiles(pattern) {
const filePaths = await glob(pattern);
return Promise.all(filePaths.map(path => readFileAsync(path, {encoding: 'utf8'})));
}

/**
* Write a file to filePath, creating parent directories if needed.
* @param {string} filePath
* @param {string} data
* @return {Promise<void>}
*/
async function safeWriteFileAsync(filePath, data) {
const fileDir = path.dirname(filePath);
await mkdir(fileDir, {recursive: true});
return writeFileAsync(filePath, data);
}

/**
* Copy static assets.
* @return {Promise<void>}
*/
function copyAssets() {
return cpy([
'images/**/*',
'sw.js',
'manifest.json',
], distDir, {
cwd: `${sourceDir}/app/`,
parents: true,
});
}

/**
* Concat report and viewer stylesheets into single viewer.css file.
* @return {Promise<void>}
*/
async function css() {
const reportCss = htmlReportAssets.REPORT_CSS;
const viewerCss = await readFileAsync(`${sourceDir}/app/styles/viewer.css`, {encoding: 'utf8'});
await safeWriteFileAsync(`${distDir}/styles/viewer.css`, [reportCss, viewerCss].join('\n'));
}

/**
* Insert report templates into html and copy to dist.
* @return {Promise<void>}
*/
async function html() {
let htmlSrc = await readFileAsync(`${sourceDir}/app/index.html`, {encoding: 'utf8'});
htmlSrc = htmlSrc.replace(/%%LIGHTHOUSE_TEMPLATES%%/, htmlReportAssets.REPORT_TEMPLATES);

await safeWriteFileAsync(`${distDir}/index.html`, htmlSrc);
}

/**
* Combine multiple JS files into single viewer.js file.
* @return {Promise<void>}
* Build viewer, optionally deploying to gh-pages if `--deploy` flag was set.
*/
async function compileJs() {
async function run() {
// JS bundle from browserified ReportGenerator.
const generatorFilename = `${sourceDir}/../lighthouse-core/report/report-generator.js`;
const generatorFilename = `${__dirname}/../lighthouse-core/report/report-generator.js`;
const generatorBrowserify = browserify(generatorFilename, {standalone: 'ReportGenerator'})
.transform('@wardpeet/brfs', {
readFileSyncTransform: minifyFileTransform,
Expand All @@ -118,73 +29,35 @@ async function compileJs() {
resolve(src.toString());
});
});
const generatorJs = await generatorJsPromise;

// Report renderer scripts.
const rendererJs = htmlReportAssets.REPORT_JAVASCRIPT;

// idb-keyval dependency.
const idbKeyvalPath = require.resolve('idb-keyval/dist/idb-keyval-min.js');
const idbKeyvalJs = await readFileAsync(idbKeyvalPath, 'utf8');

// Current Lighthouse version as a global variable.
const versionJs = `window.LH_CURRENT_VERSION = '${lighthousePackage.version}';`;

// Viewer-specific JS files.
const viewJsFiles = await loadFiles(`${sourceDir}/app/src/*.js`);

const contents = [
`"use strict";`,
generatorJs,
rendererJs,
idbKeyvalJs,
versionJs,
...viewJsFiles,
];
const options = {
output: {preamble: license}, // Insert license at top.
};
const uglified = terser.minify(contents, options);
if (uglified.error || !uglified.code) {
throw uglified.error;
}

await safeWriteFileAsync(`${distDir}/src/viewer.js`, uglified.code);
}

/**
* Publish viewer to gh-pages branch.
* @return {Promise<void>}
*/
async function deploy() {
return new Promise((resolve, reject) => {
ghPages.publish(distDir, {
add: true, // keep existing files
dest: 'viewer',
message: `Update viewer to lighthouse@${lighthousePackage.version}`,
}, err => {
if (err) return reject(err);
resolve();
});
const app = new GhPagesApp({
name: 'viewer',
appDir: `${__dirname}/../lighthouse-viewer/app`,
html: {path: 'index.html'},
htmlReplacements: {
'%%LIGHTHOUSE_TEMPLATES%%': htmlReportAssets.REPORT_TEMPLATES,
},
stylesheets: [
htmlReportAssets.REPORT_CSS,
{path: 'styles/*'},
],
javascripts: [
await generatorJsPromise,
htmlReportAssets.REPORT_JAVASCRIPT,
fs.readFileSync(require.resolve('idb-keyval/dist/idb-keyval-min.js'), 'utf8'),
{path: 'src/*'},
],
assets: [
{path: 'images/**/*'},
{path: 'manifest.json'},
],
});
}

/**
* Build viewer, optionally deploying to gh-pages if `--deploy` flag was set.
*/
async function run() {
// Clean and build.
rimraf.sync(distDir);
await Promise.all([
compileJs(),
html(),
css(),
copyAssets(),
]);
await app.build();

const argv = process.argv.slice(2);
if (argv.includes('--deploy')) {
await deploy();
await app.deploy();
}
}

Expand Down
168 changes: 168 additions & 0 deletions build/gh-pages-app.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,168 @@
/**
* @license Copyright 2020 The Lighthouse Authors. All Rights Reserved.
* Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0
* Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.
*/
'use strict';

const fs = require('fs');
const path = require('path');

const cpy = require('cpy');
const ghPages = require('gh-pages');
const glob = require('glob');
const lighthousePackage = require('../package.json');
const rimraf = require('rimraf');
const terser = require('terser');

const ghPagesDistDir = `${__dirname}/../dist/gh-pages`;

const license = `/*
* @license Copyright 2020 The Lighthouse Authors. All Rights Reserved.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express
* or implied. See the License for the specific language governing
* permissions and limitations under the License.
*/`;

/**
* Literal string (representing JS, CSS, etc...), or an object with a path, which would
* be interpreted relative to opts.appDir and be glob-able.
* @typedef {{path: string} | string} Source
*/

/**
* @typedef BuildOptions
* @property {string} name Name of app, used for hosted path (`googlechrome.github.io/lighthouse/{name}/`) and output directory (`dist/gh-pages/{name}`).
* @property {string} appDir Path to directory where source lives, used as a base for other paths in options.
* @property {Source} html
* @property {Record<string, string>=} htmlReplacements Needle -> Replacement mapping, used on html source.
* @property {Source[]} stylesheets
* @property {Source[]} javascripts
* @property {Array<{path: string}>} assets List of paths to copy. Glob-able, maintains directory structure.
*/

/**
* Evaluates path glob and loads all identified files as an array of strings.
* @param {string} pattern
* @return {string[]}
*/
function loadFiles(pattern) {
const filePaths = glob.sync(pattern);
return filePaths.map(path => fs.readFileSync(path, {encoding: 'utf8'}));
}

/**
* Write a file to filePath, creating parent directories if needed.
* @param {string} filePath
* @param {string} data
*/
function safeWriteFile(filePath, data) {
const fileDir = path.dirname(filePath);
fs.mkdirSync(fileDir, {recursive: true});
fs.writeFileSync(filePath, data);
}

class GhPagesApp {
/**
* @param {BuildOptions} opts
*/
constructor(opts) {
this.opts = opts;
this.distDir = `${ghPagesDistDir}/${opts.name}`;
}

async build() {
rimraf.sync(this.distDir);

const html = this._compileHtml();
safeWriteFile(`${this.distDir}/index.html`, html);

const css = this._compileCss();
safeWriteFile(`${this.distDir}/styles/bundled.css`, css);

const bundledJs = this._compileJs();
safeWriteFile(`${this.distDir}/src/bundled.js`, bundledJs);

await cpy(this.opts.assets.map(asset => asset.path), this.distDir, {
cwd: this.opts.appDir,
parents: true,
});
}

deploy() {
return new Promise((resolve, reject) => {
ghPages.publish(this.distDir, {
add: true, // keep existing files
dest: this.opts.name,
message: `Update ${this.opts.name} to lighthouse@${lighthousePackage.version}`,
}, err => {
if (err) return reject(err);
resolve();
});
});
}

/**
* @param {Source[]} sources
*/
_resolveSourcesList(sources) {
const result = [];

for (const source of sources) {
if (typeof source === 'string') {
result.push(source);
} else {
result.push(...loadFiles(`${this.opts.appDir}/${source.path}`));
}
}

return result;
}

_compileHtml() {
let htmlSrc = this._resolveSourcesList([this.opts.html])[0];

if (this.opts.htmlReplacements) {
for (const [key, value] of Object.entries(this.opts.htmlReplacements)) {
htmlSrc = htmlSrc.replace(key, value);
}
}

return htmlSrc;
}

_compileCss() {
return this._resolveSourcesList(this.opts.stylesheets).join('\n');
}

_compileJs() {
// Current Lighthouse version as a global variable.
const versionJs = `window.LH_CURRENT_VERSION = '${lighthousePackage.version}';`;

const contents = [
`"use strict";`,
versionJs,
...this._resolveSourcesList(this.opts.javascripts),
];
const options = {
output: {preamble: license}, // Insert license at top.
};
const uglified = terser.minify(contents, options);
if (uglified.error || !uglified.code) {
throw uglified.error;
}

return uglified.code;
}
}

module.exports = GhPagesApp;
2 changes: 1 addition & 1 deletion lighthouse-cli/test/fixtures/static-server.js
Original file line number Diff line number Diff line change
Expand Up @@ -158,7 +158,7 @@ class Server {
return;
}

if (filePath.startsWith('/dist/viewer')) {
if (filePath.startsWith('/dist/gh-pages/viewer')) {
// Rewrite lighthouse-viewer paths to point to that location.
absoluteFilePath = path.join(__dirname, '/../../../', filePath);
}
Expand Down
Loading

0 comments on commit 165e492

Please sign in to comment.