clients: simplify viewer build process (GoogleChrome#6426)

.appveyor.yml

@@ -22,7 +22,6 @@ install:
   - ps: Install-Product node $env:nodejs_version $env:platform
   - npm install yarn -g
   - yarn
-  - yarn install-all
 
 before_test:
   - set "PATH=C:\MinGW\msys\1.0\bin;%PATH%"
@@ -48,5 +47,4 @@ test_script:
 cache:
   #- chrome-win32 -> appveyor.yml,package.json
   - node_modules -> appveyor.yml,package.json,yarn.lock
-  - lighthouse-viewer\node_modules -> appveyor.yml,package.json,yarn.lock,lighthouse-viewer\package.json,lighthouse-viewer\yarn.lock
   - '%LOCALAPPDATA%\Yarn -> appveyor.yml,package.json,yarn.lock'

.eslintignore

@@ -5,7 +5,7 @@
 **/node_modules/**
 **/third_party/**
 
-**/dist/**
+/dist/**
 
 coverage/**
 

.gitignore

@@ -4,7 +4,7 @@ npm-debug.log
 .vscode
 .tmp
 
-dist
+/dist
 coverage
 lcov.info
 .nyc_output

.npmignore

@@ -6,6 +6,7 @@
 assets/
 build/
 coverage/
+dist/
 
 lighthouse-core/scripts/*
 lighthouse-core/test/

.travis.yml

@@ -14,16 +14,13 @@ cache:
   directories:
     - node_modules
     - lantern-data
-    - lighthouse-viewer/node_modules
     - /home/travis/.rvm/gems/
 install:
   # if our e2e tests fail in the future it might be that we are not compatible
   # with the latest puppeteer api so we probably need to run on chromimum
   # @see https://github.com/GoogleChrome/lighthouse/pull/4640/files#r171425004
   - export PUPPETEER_SKIP_CHROMIUM_DOWNLOAD=1
   - yarn
-  # travis can't handle the parallel install (without caches)
-  - yarn run install-all:task:windows
 before_script:
   - export DISPLAY=:99.0
   # see comment above about puppeteer

build/build-viewer.js

@@ -0,0 +1,172 @@
+/**
+ * @license Copyright 2018 Google Inc. 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 {promisify} = require('util');
+const readFileAsync = promisify(fs.readFile);
+const writeFileAsync = promisify(fs.writeFile);
+
+const browserify = require('browserify');
+const cpy = require('cpy');
+const ghPages = promisify(require('gh-pages').publish);
+const glob = promisify(require('glob'));
+const lighthousePackage = require('../package.json');
+const makeDir = require('make-dir');
+const rimraf = require('rimraf');
+const uglifyEs = require('uglify-es'); // Use uglify-es to get ES6 support.
+
+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 Google Inc. 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 makeDir(fileDir);
+  return writeFileAsync(filePath, data);
+}
+
+/**
+ * Copy static assets.
+ * @return {Promise<void>}
+ */
+async function copyAssets() {
+  await cpy([
+    'images/**/*',
+    'sw.js',
+    'manifest.json',
+  ], distDir, {
+    cwd: `${sourceDir}/app/`,
+    parents: true,
+  });
+
+  // Copy polyfills.
+  return cpy([
+    '../node_modules/url-search-params/build/url-search-params.js',
+    '../node_modules/whatwg-fetch/fetch.js',
+  ], `${distDir}/src/polyfills`, {cwd: sourceDir});
+}
+
+/**
+ * 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>}
+ */
+async function compileJs() {
+  // JS bundle from browserified ReportGenerator.
+  const generatorFilename = `${sourceDir}/../lighthouse-core/report/report-generator.js`;
+  const generatorBrowserify = browserify(generatorFilename, {standalone: 'ReportGenerator'})
+    .transform('brfs');
+  const generatorBundle = promisify(generatorBrowserify.bundle.bind(generatorBrowserify));
+  const generatorJs = (await generatorBundle()).toString();
+
+  // 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 = [
+    generatorJs,
+    rendererJs,
+    idbKeyvalJs,
+    versionJs,
+    ...viewJsFiles,
+  ];
+  const options = {
+    output: {preamble: license}, // Insert license at top.
+  };
+  const uglified = uglifyEs.minify(contents, options);
+  if (uglified.error) {
+    throw uglified.error;
+  }
+
+  await safeWriteFileAsync(`${distDir}/src/viewer.js`, uglified.code);
+}
+
+/**
+ * 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(),
+  ]);
+
+  const argv = process.argv.slice(2);
+  if (argv.includes('--deploy')) {
+    await ghPages(`${distDir}/**/*`, {
+      add: true, // keep existing files
+      dest: 'viewer',
+    }, () => {});
+  }
+}
+
+run();

docs/releasing.md

@@ -33,15 +33,15 @@ We follow [semver](https://semver.org/) versioning semantics (`vMajor.Minor.Patc
 ```sh
 # use a custom lighthouse-pristine checkout to make sure your dev files aren't involved.
 
-# * Install the latest. This also builds the cli, extension, and viewer *
-yarn install-all
+# * Install the latest.*
+yarn
 
 # * Bump it *
 yarn version --no-git-tag-version
 # manually bump extension v in clients/extension/manifest.json
 yarn update:sample-json
 
-# * Build it *
+# * Build it. This also builds the cli, extension, and viewer. *
 yarn build-all
 
 # * Test err'thing *
@@ -67,7 +67,7 @@ cd ../lighthouse-pristine; command rm -f lighthouse-*.tgz
 
 echo "Test the lighthouse-viewer build"
 # Manual test for now:
-# Start a server in lighthouse-viewer/dist/ and open the page in a tab. You should see the viewer.
+# Start a server in dist/viewer/ and open the page in a tab. You should see the viewer.
 # Drop in a results.json or paste an existing gist url (e.g. https://gist.github.com/ebidel/b9fd478b5f40bf5fab174439dc18f83a).
 # Check for errors!
 

lighthouse-cli/test/fixtures/static-server.js

@@ -24,7 +24,7 @@ function requestHandler(request, response) {
   const queryString = requestUrl.search && parseQueryString(requestUrl.search.slice(1));
   let absoluteFilePath = path.join(__dirname, filePath);
 
-  if (filePath.startsWith('/lighthouse-viewer')) {
+  if (filePath.startsWith('/dist/viewer')) {
     // Rewrite lighthouse-viewer paths to point to that location.
     absoluteFilePath = path.join(__dirname, '/../../../', filePath);
   }

lighthouse-viewer/README.md

@@ -4,22 +4,19 @@ Online at https://googlechrome.github.io/lighthouse/viewer/
 
 ## Development
 
-* `npm i`
-* Build: `gulp`, Watch: `gulp watch`
+Run the following in the root folder of a Lighthouse checkout:
 
-For development, `gulp watch` will browserify `dist/src/main.js` and create a
-runnable script in all modern browsers. Use this for quick iterations when developing.
+* `yarn`
+* `yarn build-viewer`
 
-For production, run `gulp`. This compiles and minifies `dist/src/main.js` using Closure.
+This compiles and minifies `app/src/main.js` using uglify-es. Results are written to `dist/viewer/`.
 
 ## Deploy
 
-Deploys should be done as part of the Lighthouse release process. To update GitHub pages,
-run the following in the root folder of a Lighthouse checkout:
+Deploys should be done as part of the Lighthouse release process. To push the viewer to the `gh-pages` branch under `viewer/`, run the following in the root folder of a Lighthouse checkout:
 
 ```sh
-npm run deploy-viewer
+yarn deploy-viewer
 ```
 
-This builds `lighthouse-viewer/dist/src/main.js` and pushes the contents of `dist` folder
-to the `gh-pages` branch.
+For more information on deployment, see `releasing.md`.