Export lighthouse report renderer as a standalone ES Module

[dvelasquez]

Feature request summary

Export the lighthouse-viewer code as a standalone ES Module, so we can easily integrate it in other types of projects.
For the moment I have some automated script that copies the files from lighthouse/lighthouse-core/report/html, and replace some parts of the code to make it ES Modules compatible. Then all the internals are exported as ES Modules, so whoever is interested can use it as is, or create a wrapper, like this: https://github.com/dvelasquez/lighthouse-viewer/tree/master/packages/vue-lighthouse-viewer

Yes I'm willing to work on this, I just need to know what would be the best way to export this. In this repository.

• Should I create a custom NPM script to generate this?
• Should we move the code to a different repository?

I'm willing to, if needed, to rewrite the code in TypeScript too.

What is the motivation or use case for changing this?
Many of us are using lighthouse to evaluate pages in bulk, and we would like to explore the results and recommendations and also keep the code up to date whenever lighthouse updates itself.

How is this beneficial to Lighthouse?
This gives a clear access to the features of lighthouse (like the viewer) to other developers, removing the hassle of copying manually the source code and get outdated whenever a new version of lighthouse came, eg: react-lighthouse-viewer

[patrickhulce]

Thanks for filing @dvelasquez! Very relevant to your ask is an old issue about making parts of Lighthouse more consumable. Some relevant discussion in #9519

[dvelasquez]

No problem @patrickhulce I understand that the decision on how to manage the packages is a high level discussion between the lighthouse authors. Once that's decided I can jump in and help.

Anyway, based on my experience, using lerna for this is very straightforward, and even with only NPM and without yarn workspaces is very easy to manage (I prefer yarn, but I used only npm in my monorepo because I wanted to gather some experience with this).

[connorjclark]

If you checkout our repo and run yarn build-report, you can grab dist/report/bundle.esm.js. You could also use report/ directly (which is now ES modules, and is published). This shouldn't be considered a stable API surface.

#12254 aims to eventually provide a better renderer API.

[dvelasquez]

Thanks @connorjclark I noticed the changes in the version 8.3.0 and I've been refactoring my code accordingly.

Once the API is stable I would like to deprecate my lighthouse viewer package in favour of the original package.