Skip to content

Commit

Permalink
misc(build): add build step for report (#12707)
Browse files Browse the repository at this point in the history
  • Loading branch information
connorjclark authored Jun 30, 2021
1 parent 557c527 commit b877878
Show file tree
Hide file tree
Showing 16 changed files with 124 additions and 68 deletions.
2 changes: 2 additions & 0 deletions .github/workflows/devtools.yml
Original file line number Diff line number Diff line change
Expand Up @@ -42,6 +42,8 @@ jobs:

- run: yarn --frozen-lockfile
working-directory: ${{ github.workspace }}/lighthouse
- run: yarn build-report
working-directory: ${{ github.workspace }}/lighthouse
- run: yarn build-devtools
working-directory: ${{ github.workspace }}/lighthouse

Expand Down
3 changes: 3 additions & 0 deletions .github/workflows/smoke.yml
Original file line number Diff line number Diff line change
Expand Up @@ -46,6 +46,7 @@ jobs:
run: bash $GITHUB_WORKSPACE/lighthouse-core/scripts/download-chrome.sh && mv chrome-linux chrome-linux-tot

- run: yarn install --frozen-lockfile --network-timeout 1000000
- run: yarn build-report

- run: sudo apt-get install xvfb
- name: Run smoke tests
Expand Down Expand Up @@ -78,6 +79,7 @@ jobs:
node-version: 12.x

- run: yarn install --frozen-lockfile --network-timeout 1000000
- run: yarn build-report

- name: Run smoke tests
# Windows bots are slow, so only run enough tests to verify matching behavior.
Expand All @@ -100,6 +102,7 @@ jobs:
node-version: 12.x

- run: yarn install --frozen-lockfile --network-timeout 1000000
- run: yarn build-report
- run: yarn build-devtools

- run: sudo apt-get install xvfb
Expand Down
2 changes: 2 additions & 0 deletions .github/workflows/unit.yml
Original file line number Diff line number Diff line change
Expand Up @@ -44,6 +44,7 @@ jobs:
pip install protobuf==3.7.1
- run: yarn install --frozen-lockfile --network-timeout 1000000
- run: yarn build-report

- run: yarn test-proto # Run before unit-core because the roundtrip json is needed for proto tests.

Expand Down Expand Up @@ -81,6 +82,7 @@ jobs:
node-version: 12.x

- run: yarn install --frozen-lockfile --network-timeout 1000000
- run: yarn build-report

- name: yarn unit-cli
run: yarn unit-cli
Expand Down
2 changes: 2 additions & 0 deletions .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,8 @@ last-run-results.html
*.artifacts.log
*.ctc.json

report/generated

!lighthouse-core/test/results/artifacts/*.trace.json
!lighthouse-core/test/results/artifacts/*.devtoolslog.json
!lighthouse-core/test/fixtures/artifacts/**/*.trace.json
Expand Down
3 changes: 3 additions & 0 deletions .npmignore
Original file line number Diff line number Diff line change
Expand Up @@ -53,6 +53,9 @@ yarn-error.log
results.html
*.lcov

# generated files needed for publish
!dist/report/standalone.js

# large files
changelog.md

Expand Down
46 changes: 46 additions & 0 deletions build/build-report.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,46 @@
/**
* @license Copyright 2021 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');

function concatRendererCode() {
return [
fs.readFileSync(__dirname + '/../report/renderer/util.js', 'utf8'),
fs.readFileSync(__dirname + '/../report/renderer/dom.js', 'utf8'),
fs.readFileSync(__dirname + '/../report/renderer/details-renderer.js', 'utf8'),
fs.readFileSync(__dirname + '/../report/renderer/crc-details-renderer.js', 'utf8'),
fs.readFileSync(__dirname + '/../report/renderer/snippet-renderer.js', 'utf8'),
fs.readFileSync(__dirname + '/../report/renderer/element-screenshot-renderer.js', 'utf8'),
fs.readFileSync(__dirname + '/../lighthouse-core/lib/file-namer.js', 'utf8'),
fs.readFileSync(__dirname + '/../report/renderer/logger.js', 'utf8'),
fs.readFileSync(__dirname + '/../report/renderer/report-ui-features.js', 'utf8'),
fs.readFileSync(__dirname + '/../report/renderer/category-renderer.js', 'utf8'),
fs.readFileSync(__dirname + '/../report/renderer/performance-category-renderer.js', 'utf8'),
fs.readFileSync(__dirname + '/../report/renderer/pwa-category-renderer.js', 'utf8'),
fs.readFileSync(__dirname + '/../report/renderer/report-renderer.js', 'utf8'),
fs.readFileSync(__dirname + '/../report/renderer/i18n.js', 'utf8'),
fs.readFileSync(__dirname + '/../report/renderer/text-encoding.js', 'utf8'),
].join(';\n');
}

async function buildStandaloneReport() {
const REPORT_JAVASCRIPT = [
concatRendererCode(),
fs.readFileSync(__dirname + '/../report/clients/standalone.js', 'utf8'),
].join(';\n');
fs.mkdirSync(__dirname + '/../dist/report', {recursive: true});
fs.writeFileSync(__dirname + '/../dist/report/standalone.js', REPORT_JAVASCRIPT);
}

if (require.main === module) {
buildStandaloneReport();
}

module.exports = {
buildStandaloneReport,
concatRendererCode,
};
3 changes: 2 additions & 1 deletion build/build-viewer.js
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ const fs = require('fs');
const browserify = require('browserify');
const GhPagesApp = require('./gh-pages-app.js');
const {minifyFileTransform} = require('./build-utils.js');
const {concatRendererCode} = require('./build-report.js');
const htmlReportAssets = require('../report/report-assets.js');

/**
Expand Down Expand Up @@ -43,7 +44,7 @@ async function run() {
],
javascripts: [
await generatorJsPromise,
htmlReportAssets.REPORT_JAVASCRIPT,
concatRendererCode(),
fs.readFileSync(require.resolve('idb-keyval/dist/idb-keyval-min.js'), 'utf8'),
{path: 'src/*'},
],
Expand Down
2 changes: 1 addition & 1 deletion build/readme.md
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ Additionally, there are build processes for:
To build the devtools files and roll them into a local checkout of Chromium:

```sh
yarn build-devtools && yarn devtools
yarn devtools
```


Expand Down
1 change: 0 additions & 1 deletion docs/releasing.md
Original file line number Diff line number Diff line change
Expand Up @@ -154,7 +154,6 @@ echo "Complete the _Release publicity_ tasks documented above"

```sh
git checkout vx.x.x # Checkout the specific version.
yarn build-devtools
yarn devtools ~/src/devtools/devtools-frontend

cd ~/src/devtools/devtools-frontend
Expand Down
2 changes: 1 addition & 1 deletion lighthouse-core/scripts/i18n/collect-strings.js
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ const UISTRINGS_REGEX = /UIStrings = .*?\};\n/s;

const foldersWithStrings = [
`${LH_ROOT}/lighthouse-core`,
`${LH_ROOT}/report`,
`${LH_ROOT}/report/renderer`,
`${LH_ROOT}/lighthouse-treemap`,
path.dirname(require.resolve('lighthouse-stack-packs')) + '/packs',
];
Expand Down
1 change: 0 additions & 1 deletion lighthouse-core/scripts/open-devtools.sh
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,6 @@ if ! which gn ; then
export PYTHONPATH="${PYTHONPATH:-}:$BLINK_TOOLS_PATH/latest/third_party/typ"
fi

yarn build-devtools
yarn devtools "$DEVTOOLS_PATH"

cd "$DEVTOOLS_PATH"
Expand Down
3 changes: 3 additions & 0 deletions lighthouse-core/scripts/roll-to-devtools.sh
Original file line number Diff line number Diff line change
Expand Up @@ -39,6 +39,9 @@ mkdir -p "$fe_lh_dir"

lh_bg_js="dist/lighthouse-dt-bundle.js"

yarn build-report
yarn build-devtools

# copy lighthouse-dt-bundle (potentially stale)
cp -pPR "$lh_bg_js" "$fe_lh_dir/lighthouse-dt-bundle.js"
echo -e "$check (Potentially stale) lighthouse-dt-bundle copied."
Expand Down
7 changes: 4 additions & 3 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -13,8 +13,8 @@
},
"scripts": {
"build-all": "npm-run-posix-or-windows build-all:task",
"build-all:task": "yarn build-cdt-lib && yarn build-devtools && (yarn build-extension & yarn build-lr & yarn build-viewer & yarn build-treemap & yarn build-smokehouse-bundle & wait) && yarn build-pack",
"build-all:task:windows": "yarn build-cdt-lib && yarn build-extension && yarn build-devtools && yarn build-lr && yarn build-viewer && yarn build-treemap && yarn build-smokehouse-bundle",
"build-all:task": "yarn build-report && yarn build-cdt-lib && yarn build-devtools && (yarn build-extension & yarn build-lr & yarn build-viewer & yarn build-treemap & yarn build-smokehouse-bundle & wait) && yarn build-pack",
"build-all:task:windows": "yarn build-report && yarn build-cdt-lib && yarn build-extension && yarn build-devtools && yarn build-lr && yarn build-viewer && yarn build-treemap && yarn build-smokehouse-bundle",
"build-cdt-lib": "node ./build/build-cdt-lib.js",
"build-extension": "yarn build-extension-chrome && yarn build-extension-firefox",
"build-extension-chrome": "node ./build/build-extension.js chrome",
Expand All @@ -23,6 +23,7 @@
"build-smokehouse-bundle": "node ./build/build-smokehouse-bundle.js",
"build-lr": "yarn reset-link && node ./build/build-lightrider-bundles.js",
"build-pack": "bash build/build-pack.sh",
"build-report": "node build/build-report.js",
"build-treemap": "node ./build/build-treemap.js",
"build-viewer": "node ./build/build-viewer.js",
"reset-link": "(yarn unlink || true) && yarn link && yarn link lighthouse",
Expand All @@ -31,7 +32,7 @@
"lint": "[ \"$CI\" = true ] && eslint --quiet -f codeframe . || eslint .",
"smoke": "node lighthouse-cli/test/smokehouse/frontends/smokehouse-bin.js",
"debug": "node --inspect-brk ./lighthouse-cli/index.js",
"start": "node ./lighthouse-cli/index.js",
"start": "yarn build-report && node ./lighthouse-cli/index.js",
"test": "yarn diff:sample-json && yarn lint --quiet && yarn unit && yarn type-check",
"test-bundle": "yarn smoke --runner bundle -j=1 --retries=2 --invert-match forms",
"test-clients": "jest \"clients/\"",
Expand Down
42 changes: 1 addition & 41 deletions report/assets/standalone-template.html
Original file line number Diff line number Diff line change
Expand Up @@ -31,50 +31,10 @@

<div id="lh-log"></div>

<script>window.__LIGHTHOUSE_JSON__ = %%LIGHTHOUSE_JSON%%;</script>
<script>%%LIGHTHOUSE_JAVASCRIPT%%
//# sourceURL=compiled-reportrenderer.js
</script>
<script>window.__LIGHTHOUSE_JSON__ = %%LIGHTHOUSE_JSON%%;</script>
<script>console.log('window.__LIGHTHOUSE_JSON__', __LIGHTHOUSE_JSON__);</script>
<script>
function __initLighthouseReport__() {
const dom = new DOM(document);
const renderer = new ReportRenderer(dom);

const container = document.querySelector('main');
renderer.renderReport(window.__LIGHTHOUSE_JSON__, container);

// Hook in JS features and page-level event listeners after the report
// is in the document.
const features = new ReportUIFeatures(dom);
features.initFeatures(window.__LIGHTHOUSE_JSON__);
}
window.addEventListener('DOMContentLoaded', __initLighthouseReport__);

document.addEventListener('lh-analytics', e => {
if (window.ga) {
ga(e.detail.cmd, e.detail.fields);
}
});

document.addEventListener('lh-log', e => {
const logger = new Logger(document.querySelector('#lh-log'));

switch (e.detail.cmd) {
case 'log':
logger.log(e.detail.msg);
break;
case 'warn':
logger.warn(e.detail.msg);
break;
case 'error':
logger.error(e.detail.msg);
break;
case 'hide':
logger.hide();
break;
}
});
</script>
</body>
</html>
52 changes: 52 additions & 0 deletions report/clients/standalone.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,52 @@
/**
* @license Copyright 2021 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';

/* global document window ga DOM ReportRenderer ReportUIFeatures Logger */

(function __initLighthouseReport__() {
const dom = new DOM(document);
const renderer = new ReportRenderer(dom);
const container = dom.find('main', document);
/** @type {LH.ReportResult} */
// @ts-expect-error
const lhr = window.__LIGHTHOUSE_JSON__;
renderer.renderReport(lhr, container);

// Hook in JS features and page-level event listeners after the report
// is in the document.
const features = new ReportUIFeatures(dom);
features.initFeatures(lhr);
})();

document.addEventListener('lh-analytics', /** @param {Event} e */ e => {
// @ts-expect-error
if (window.ga) ga(e.detail.cmd, e.detail.fields);
});

document.addEventListener('lh-log', /** @param {Event} e */ e => {
const el = document.querySelector('#lh-log');
if (!el) return;

const logger = new Logger(el);
// @ts-expect-error
const detail = e.detail;

switch (detail.cmd) {
case 'log':
logger.log(detail.msg);
break;
case 'warn':
logger.warn(detail.msg);
break;
case 'error':
logger.error(detail.msg);
break;
case 'hide':
logger.hide();
break;
}
});
21 changes: 2 additions & 19 deletions report/report-assets.js
Original file line number Diff line number Diff line change
Expand Up @@ -7,25 +7,8 @@

const fs = require('fs');

const REPORT_TEMPLATE =
fs.readFileSync(__dirname + '/assets/standalone-template.html', 'utf8');
const REPORT_JAVASCRIPT = [
fs.readFileSync(__dirname + '/renderer/util.js', 'utf8'),
fs.readFileSync(__dirname + '/renderer/dom.js', 'utf8'),
fs.readFileSync(__dirname + '/renderer/details-renderer.js', 'utf8'),
fs.readFileSync(__dirname + '/renderer/crc-details-renderer.js', 'utf8'),
fs.readFileSync(__dirname + '/renderer/snippet-renderer.js', 'utf8'),
fs.readFileSync(__dirname + '/renderer/element-screenshot-renderer.js', 'utf8'),
fs.readFileSync(__dirname + '/../lighthouse-core/lib/file-namer.js', 'utf8'),
fs.readFileSync(__dirname + '/renderer/logger.js', 'utf8'),
fs.readFileSync(__dirname + '/renderer/report-ui-features.js', 'utf8'),
fs.readFileSync(__dirname + '/renderer/category-renderer.js', 'utf8'),
fs.readFileSync(__dirname + '/renderer/performance-category-renderer.js', 'utf8'),
fs.readFileSync(__dirname + '/renderer/pwa-category-renderer.js', 'utf8'),
fs.readFileSync(__dirname + '/renderer/report-renderer.js', 'utf8'),
fs.readFileSync(__dirname + '/renderer/i18n.js', 'utf8'),
fs.readFileSync(__dirname + '/renderer/text-encoding.js', 'utf8'),
].join(';\n');
const REPORT_TEMPLATE = fs.readFileSync(__dirname + '/assets/standalone-template.html', 'utf8');
const REPORT_JAVASCRIPT = fs.readFileSync(__dirname + '/../dist/report/standalone.js', 'utf8');
const REPORT_CSS = fs.readFileSync(__dirname + '/assets/styles.css', 'utf8');
const REPORT_TEMPLATES = fs.readFileSync(__dirname + '/assets/templates.html', 'utf8');

Expand Down

0 comments on commit b877878

Please sign in to comment.