npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@cnumr/lighthouse-eco-index-aggregator

v1.1.0

Published

Tool for aggregating lighthouse and eco-index results

Downloads

3

Readme

Lighthouse EcoIndex Aggregator

This generator tool can be used if you need to generate a global reports for all pages audited by lighthouse and ecoindex tools. After the generation, we will have access to a global HTML report. As an example, you can use this tool at the end of a Cypress test suite in order to generate the final report of your tests.

image

At the end of the readme, we will explain how to generate lighthouse and ecoindex reports, used by this aggregator.

Package

  • lighthouse-eco-index-aggregator npm version
npm install -D @cnumr/lighthouse-eco-index-aggregator

Options

| Nom | Type | Description | | ------------- | -------- | ------------------------------------------------------------------------------------------------------------ | | config | string | Option is used for define configuration file (JSON or JavaScript) | | fail | number | Option is used for define limit fail | | h | boolean | Option is used for see informations cli | | lang | string | Option is used for translated report values possible used is "fr-FR" or "en-GB" default is "en-GB" | | m | boolean | Option is used for minify file output it's true by default | | outputPath | string | Option is used in order to define the target folder when the report will be generated | | pass | number | Option is used for define limit pass | | reports | string[] | Option is used for defined the format of the generated report. Possible values "html", "sonar" or a funciton | | sonarFilePath | string | Option is used when generating the sonar report, in order to make the issue visible on SonarCloud | | srcEcoIndex | string | Option is used for defined ecoIndex reports path | | srcLighthouse | string | Option is used for defined lighthouse reports path | | v | boolean | Option is used for verbose task |

Example usage

npx @cnumr/lighthouse-eco-index-aggregator --srcLighthouse="./reports/lighthouse" --srcEcoIndex="./reports/ecoindex" --reports="html" --outputPath="report_final"

You can also used this module programmatically

const aggregate = require("@cnumr/lighthouse-eco-index-aggregator/src/main");

console.log(
  aggregate({
    srcLighthouse: "./reports/lighthouse",
    srcEcoIndex: "./reports/ecoindex",
    outputPath: "report_final",
  })
);

How to generate Lighthouse and EcoIndex reports

This aggregator tool can also be used directly inside a cypress test. For example, we can generate the global report once the Cypress tests suite has finished.

// cypress.config.js
const aggregate = require("@cnumr/lighthouse-eco-index-aggregator/src/main");
const path = require("path");

const lighthouseOutputPathDir = path.join(__dirname, "reports/lighthouse");
const ecoIndexOutputPathDir = path.join(__dirname, "reports/ecoindex");
const globalOutputPathDir = path.join(__dirname, "report_final");

module.exports = defineConfig({
  e2e: {
    setupNodeEvents(on, config) {
      on("after:run", async () => {
        await aggregate({
          reports: ["html"],
          verbose: true,
          srcLighthouse: lighthouseOutputPathDir,
          srcEcoIndex: ecoIndexOutputPathDir,
          outputPath: globalOutputPathDir,
        });
      });
    },
  },
});

But in order to generate this global report, we need the lighthouse and ecoindex reports available in the lighthouse and ecoindex subfolders. In order to do so, we will use two extra NPM packages :

You will find a sample Cypress tests suite in the cypress-demo folder. Please have a look to the demo.cy.js and cypress.config.js.

In order to run the Cypress tests suite, you have to execute the following commands :

cd cypress-demo
npm i
npx cypress run -b chrome

Sonar report

This tool can also generate a external sonar report you can add to the Sonar configuration (via the sonar.externalIssuesReportPaths option).

You need to define the path to one of your file managed by Sonar, in order to make the rule visible in Sonar Cloud and use the sonar reporter.

node ./src/cli.js  --srcLighthouse="./reports/lighthouse" --srcEcoIndex="./reports/ecoindex" --reports="sonar" --sonarFilePath="./package.json"

Generate any type of report

In fact, the output option can receive a javaScript function. Thanks to this possibility, you can send the result anywhere (Elastic, DataDog, ...)

// cypress.config.js
const aggregate = require("@cnumr/lighthouse-eco-index-aggregator/src/main");
const path = require("path");

const lighthouseOutputPathDir = path.join(__dirname, "reports/lighthouse");
const ecoIndexOutputPathDir = path.join(__dirname, "reports/ecoindex");
const globalOutputPathDir = path.join(__dirname, "report_final");

module.exports = defineConfig({
  e2e: {
    setupNodeEvents(on, config) {
      on("after:run", async () => {
        await aggregate({
          reports: [
            "html",
            (options, results) => {
              const { Client } = require("@elastic/elasticsearch");
              const client = new Client();
              return client.index({
                index: "lighthouse-ecoindex",
                document: {
                  ...results,
                  "@timestamp": new Date(),
                },
              });
            },
          ],
          verbose: true,
          srcLighthouse: lighthouseOutputPathDir,
          srcEcoIndex: ecoIndexOutputPathDir,
          outputPath: globalOutputPathDir,
        });
      });
    },
  },
});