Add coexistence checks to all enqueue methods to prevent loading both React and Grid.js assets simultaneously. Changes: - ReactAdmin.php: Only enqueue React assets when ?react=1 - Init.php: Skip Grid.js when React active on admin pages - Form.php, Coupon.php, Access.php: Restore classic assets when ?react=0 - Customer.php, Product.php, License.php: Add coexistence checks Now the toggle between Classic and React versions works correctly. Co-authored-by: Claude Opus 4.7 <noreply@anthropic.com>
Lighthouse HTML Report Renderer
Overview
Lighthouse has an independent report renderer that takes the LHR (Lighthouse Result object) and creates a DOM tree of the report. It's all done client-side.
Example standalone HTML report, delivered by the CLI: dbwtest-3.0.3.html (View the source! 📖)
Report Renderer components
report/generator/report-generator.jsis the entry point for generating the HTML from Node. It compiles together the HTML string with everything required within it.- It runs natively in Node.js but can run in the browser after a compile step is applied during our bundling pipeline. That compile step uses
inline-fs, which takes anyfs.readFileSync()calls and replaces them with the stringified file content.
- It runs natively in Node.js but can run in the browser after a compile step is applied during our bundling pipeline. That compile step uses
report/rendererare all client-side JS files. They transform an LHR object into a report DOM tree. They are all executed within the browser.report/assets/standalone-template.htmlis where the client-side build of the DOM report is typically kicked off (with these four lines) However, see Current Uses.. below for more possibilities.
Data Hydration
innerHTML is deliberately not used. The renderer relies on basic createElement as well as multiple components defined in <template> tags that are added via document.importNode() and filled in via the querySelector/textContent combo.
Examples:
Current uses of report renderer
The renderer was designed to be portable across various environments.
- LH CLI: It creates the HTML as the runner finishes up and saves it to disk.
- Chrome DevTools Lighthouse Panel: The
rendererfiles are rolled into the Chromium repo, and they execute within the DevTools context. The Lighthouse panel receives the LHR object from a WebWorker, through apostMessageand then runs the renderer within DevTools UI, making a few simplifications. - Hosted Lighthouse Viewer: It's a webapp that has the renderer (along with some additional features) all compiled into a
main-XXX.jsfile. Same basic approach there.