@code-pushup/lighthouse-plugin 0.46.0 → 0.47.0

package/index.js

@@ -1,3 +1,7 @@
+// packages/plugin-lighthouse/package.json
+var name = "@code-pushup/lighthouse-plugin";
+var version = "0.47.0";
+
 // packages/plugin-lighthouse/src/lib/constants.ts
 import { join } from "node:path";
 
@@ -66,7 +70,7 @@ function missingRefsForCategoriesErrorMsg(categories2, plugins) {
 }
 
 // packages/models/src/lib/implementation/schemas.ts
-var primitiveValueSchema = z.union([z.string(), z.number()]);
+var tableCellValueSchema = z.union([z.string(), z.number(), z.boolean(), z.null()]).default(null);
 function executionMetaSchema(options = {
   descriptionDate: "Execution start date and time",
   descriptionDuration: "Execution duration in ms"
@@ -230,10 +234,10 @@ var tableColumnObjectSchema = z4.object({
   label: z4.string().optional(),
   align: tableAlignmentSchema.optional()
 });
-var tableRowObjectSchema = z4.record(primitiveValueSchema, {
+var tableRowObjectSchema = z4.record(tableCellValueSchema, {
   description: "Object row"
 });
-var tableRowPrimitiveSchema = z4.array(primitiveValueSchema, {
+var tableRowPrimitiveSchema = z4.array(tableCellValueSchema, {
   description: "Primitive row"
 });
 var tableSharedSchema = z4.object({
@@ -707,13 +711,52 @@ var LIGHTHOUSE_OUTPUT_PATH = join(
 );
 
 // packages/plugin-lighthouse/src/lib/normalize-flags.ts
-import chalk6 from "chalk";
+import chalk8 from "chalk";
 
 // packages/utils/src/lib/file-system.ts
 import { bundleRequire } from "bundle-require";
 import chalk2 from "chalk";
 import { mkdir, readFile, readdir, rm, stat } from "node:fs/promises";
 
+// packages/utils/src/lib/formatting.ts
+function formatBytes(bytes, decimals = 2) {
+  const positiveBytes = Math.max(bytes, 0);
+  if (positiveBytes === 0) {
+    return "0 B";
+  }
+  const k = 1024;
+  const dm = decimals < 0 ? 0 : decimals;
+  const sizes = ["B", "kB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"];
+  const i = Math.floor(Math.log(positiveBytes) / Math.log(k));
+  return `${Number.parseFloat((positiveBytes / Math.pow(k, i)).toFixed(dm))} ${sizes[i]}`;
+}
+function formatDuration(duration, granularity = 0) {
+  if (duration < 1e3) {
+    return `${granularity ? duration.toFixed(granularity) : duration} ms`;
+  }
+  return `${(duration / 1e3).toFixed(2)} s`;
+}
+function truncateText(text, options) {
+  const {
+    maxChars,
+    position = "end",
+    ellipsis = "..."
+  } = typeof options === "number" ? { maxChars: options } : options;
+  if (text.length <= maxChars) {
+    return text;
+  }
+  const maxLength = maxChars - ellipsis.length;
+  switch (position) {
+    case "start":
+      return ellipsis + text.slice(-maxLength).trim();
+    case "middle":
+      const halfMaxChars = Math.floor(maxLength / 2);
+      return text.slice(0, halfMaxChars).trim() + ellipsis + text.slice(-halfMaxChars).trim();
+    case "end":
+      return text.slice(0, maxLength).trim() + ellipsis;
+  }
+}
+
 // packages/utils/src/lib/logging.ts
 import isaacs_cliui from "@isaacs/cliui";
 import { cliui } from "@poppinss/cliui";
@@ -766,20 +809,12 @@ async function ensureDirectoryExists(baseDir) {
     }
   }
 }
-var NoExportError = class extends Error {
-  constructor(filepath) {
-    super(`No default export found in ${filepath}`);
-  }
-};
-async function importEsmModule(options) {
-  const { mod } = await bundleRequire({
-    format: "esm",
-    ...options
-  });
-  if (!("default" in mod)) {
-    throw new NoExportError(options.filepath);
+async function importModule(options) {
+  const { mod } = await bundleRequire(options);
+  if (typeof mod === "object" && "default" in mod) {
+    return mod.default;
   }
-  return mod.default;
+  return mod;
 }
 
 // packages/utils/src/lib/text-formats/constants.ts
@@ -811,7 +846,7 @@ function code(text) {
 
 // packages/utils/src/lib/text-formats/html/link.ts
 function link(href, text) {
-  return `<a href="${href}">${text || href}"</a>`;
+  return `<a href="${href}">${text || href}</a>`;
 }
 
 // packages/utils/src/lib/transform.ts
@@ -824,7 +859,7 @@ function capitalize(text) {
   )}`;
 }
 
-// packages/utils/src/lib/table.ts
+// packages/utils/src/lib/text-formats/table.ts
 function rowToStringArray({ rows, columns = [] }) {
   if (Array.isArray(rows.at(0)) && typeof columns.at(0) === "object") {
     throw new TypeError(
@@ -837,14 +872,19 @@ function rowToStringArray({ rows, columns = [] }) {
     }
     const objectRow = row;
     if (columns.length === 0 || typeof columns.at(0) === "string") {
-      return Object.values(objectRow).map(String);
+      return Object.values(objectRow).map(
+        (value) => value == null ? "" : String(value)
+      );
     }
     return columns.map(
-      ({ key }) => String(objectRow[key])
+      ({ key }) => objectRow[key] == null ? "" : String(objectRow[key])
     );
   });
 }
-function columnsToStringArray({ rows, columns = [] }) {
+function columnsToStringArray({
+  rows,
+  columns = []
+}) {
   const firstRow = rows.at(0);
   const primitiveRows = Array.isArray(firstRow);
   if (typeof columns.at(0) === "string" && !primitiveRows) {
@@ -884,10 +924,8 @@ function getColumnAlignmentForIndex(targetIdx, columns = []) {
     return "center";
   }
 }
-function getColumnAlignments({
-  rows,
-  columns = []
-}) {
+function getColumnAlignments(tableData) {
+  const { rows, columns = [] } = tableData;
   if (rows.at(0) == null) {
     throw new Error("first row can`t be undefined.");
   }
@@ -897,10 +935,17 @@ function getColumnAlignments({
       (_, idx) => getColumnAlignmentForIndex(idx, columns)
     );
   }
-  const firstObject = rows.at(0);
-  return Object.keys(firstObject).map(
-    (key, idx) => getColumnAlignmentForKeyAndIndex(key, idx, columns)
-  );
+  const biggestRow = [...rows].sort((a, b) => Object.keys(a).length - Object.keys(b).length).at(-1);
+  if (columns.length > 0) {
+    return columns.map(
+      (column, idx) => typeof column === "string" ? column : getColumnAlignmentForKeyAndIndex(
+        column.key,
+        idx,
+        columns
+      )
+    );
+  }
+  return Object.keys(biggestRow ?? {}).map((_) => "center");
 }
 
 // packages/utils/src/lib/text-formats/html/table.ts
@@ -997,7 +1042,10 @@ function section(...contents) {
   return `${lines(...contents)}${NEW_LINE}`;
 }
 function lines(...contents) {
-  return `${contents.filter(Boolean).join(NEW_LINE)}`;
+  const filteredContent = contents.filter(
+    (value) => value != null && value !== "" && value !== false
+  );
+  return `${filteredContent.join(NEW_LINE)}`;
 }
 
 // packages/utils/src/lib/text-formats/md/table.ts
@@ -1184,20 +1232,235 @@ var DEFAULT_CLI_FLAGS = {
 };
 
 // packages/plugin-lighthouse/src/lib/runner/utils.ts
-import chalk5 from "chalk";
+import chalk7 from "chalk";
 import log from "lighthouse-logger";
 import desktopConfig from "lighthouse/core/config/desktop-config.js";
 import experimentalConfig from "lighthouse/core/config/experimental-config.js";
 import perfConfig from "lighthouse/core/config/perf-config.js";
+
+// packages/plugin-lighthouse/src/lib/runner/details/details.ts
+import chalk6 from "chalk";
+
+// packages/plugin-lighthouse/src/lib/runner/details/item-value.ts
+import chalk5 from "chalk";
+function trimSlice(item, maxLength = 0) {
+  const str = String(item).trim();
+  return maxLength > 0 ? str.slice(0, maxLength) : str;
+}
+function parseNodeValue(node) {
+  const { selector = "" } = node ?? {};
+  return selector;
+}
+function formatTableItemPropertyValue(itemValue, itemValueFormat) {
+  if (itemValue == null) {
+    return "";
+  }
+  if (itemValueFormat == null) {
+    if (typeof itemValue === "string") {
+      return trimSlice(itemValue);
+    }
+    if (typeof itemValue === "number") {
+      return Number(itemValue);
+    }
+    if (typeof itemValue === "boolean") {
+      return itemValue;
+    }
+  }
+  const parsedItemValue = parseTableItemPropertyValue(itemValue);
+  switch (itemValueFormat) {
+    case "bytes":
+      return formatBytes(Number(parsedItemValue));
+    case "code":
+      return html.code(trimSlice(parsedItemValue));
+    case "link":
+      const link8 = parsedItemValue;
+      return html.link(link8.url, link8.text);
+    case "url":
+      const url = parsedItemValue;
+      return html.link(url);
+    case "timespanMs":
+    case "ms":
+      return formatDuration(Number(parsedItemValue));
+    case "node":
+      return parseNodeValue(itemValue);
+    case "source-location":
+      return truncateText(String(parsedItemValue), 200);
+    case "numeric":
+      const num = Number(parsedItemValue);
+      if (num.toFixed(3).toString().endsWith(".000")) {
+        return String(num);
+      }
+      return String(num.toFixed(3));
+    case "text":
+      return truncateText(String(parsedItemValue), 500);
+    case "multi":
+      ui().logger.info(`Format type ${chalk5.bold("multi")} is not implemented`);
+      return "";
+    case "thumbnail":
+      ui().logger.info(
+        `Format type ${chalk5.bold("thumbnail")} is not implemented`
+      );
+      return "";
+    case null:
+      return "";
+    default:
+      return itemValue;
+  }
+}
+function parseSimpleItemValue(item) {
+  if (typeof item === "object") {
+    const value = item.value;
+    if (typeof value === "object") {
+      return value.formattedDefault;
+    }
+    return value;
+  }
+  return item;
+}
+function parseTableItemPropertyValue(itemValue) {
+  if (itemValue == null) {
+    return "";
+  }
+  if (typeof itemValue === "string" || typeof itemValue === "number" || typeof itemValue === "boolean") {
+    return parseSimpleItemValue(itemValue);
+  }
+  const objectValue = itemValue;
+  const { type } = objectValue;
+  switch (type) {
+    case "code":
+    case "url":
+      return String(parseSimpleItemValue(objectValue));
+    case "node":
+      return parseNodeValue(objectValue);
+    case "link":
+      return objectValue;
+    case "numeric":
+      return Number(parseSimpleItemValue(objectValue));
+    case "source-location":
+      const { url } = objectValue;
+      return String(url);
+    case "subitems":
+      ui().logger.info(
+        `Value type ${chalk5.bold("subitems")} is not implemented`
+      );
+      return "";
+    case "debugdata":
+      ui().logger.info(
+        `Value type ${chalk5.bold("debugdata")} is not implemented`,
+        { silent: true }
+      );
+      return "";
+  }
+  return parseSimpleItemValue(objectValue);
+}
+
+// packages/plugin-lighthouse/src/lib/runner/details/table.type.ts
+function parseTableToAuditDetailsTable(details4) {
+  const { headings: rawHeadings, items } = details4;
+  if (items.length === 0) {
+    return void 0;
+  }
+  return {
+    columns: parseTableColumns(rawHeadings),
+    rows: items.map((row) => parseTableRow(row, rawHeadings))
+  };
+}
+function parseTableColumns(rawHeadings) {
+  return rawHeadings.map(({ key, label }) => ({
+    key: key ?? "",
+    label: typeof label === "string" ? label : void 0,
+    align: "left"
+  }));
+}
+function parseTableRow(tableItem, headings) {
+  const keys = new Set(headings.map(({ key }) => key));
+  const valueTypesByKey = new Map(
+    headings.map(({ key, valueType }) => [key, valueType])
+  );
+  return Object.fromEntries(
+    Object.entries(tableItem).filter(([key]) => keys.has(key)).map(([key, value]) => {
+      const valueType = valueTypesByKey.get(key);
+      return parseTableEntry([key, value], valueType);
+    })
+  );
+}
+function parseTableEntry([key, value], valueType) {
+  if (value == null) {
+    return [key, value];
+  }
+  return [key, formatTableItemPropertyValue(value, valueType)];
+}
+
+// packages/plugin-lighthouse/src/lib/runner/details/details.ts
+function toAuditDetails(details4) {
+  if (details4 == null) {
+    return void 0;
+  }
+  const { type } = details4;
+  if (type !== "table") {
+    return void 0;
+  }
+  const rawTable = parseTableToAuditDetailsTable(details4);
+  if (rawTable != null) {
+    const result = tableSchema().safeParse(rawTable);
+    if (result.success) {
+      return {
+        table: result.data
+      };
+    }
+    throw new Error(
+      `Parsing details ${chalk6.bold(
+        type
+      )} failed: 
+Raw data:
+ ${JSON.stringify(
+        rawTable,
+        null,
+        2
+      )}
+${result.error.toString()}`
+    );
+  }
+  return void 0;
+}
+var unsupportedDetailTypes = /* @__PURE__ */ new Set([
+  "opportunity",
+  "debugdata",
+  "treemap-data",
+  "screenshot",
+  "filmstrip",
+  "criticalrequestchain"
+]);
+function logUnsupportedDetails(lhrAudits, { displayCount = 3 } = {}) {
+  const slugsWithDetailParsingErrors = [
+    ...new Set(
+      lhrAudits.filter(
+        ({ details: details4 }) => unsupportedDetailTypes.has(details4?.type)
+      ).map(({ details: details4 }) => details4?.type)
+    )
+  ];
+  if (slugsWithDetailParsingErrors.length > 0) {
+    const postFix = (count) => count > displayCount ? ` and ${count - displayCount} more.` : "";
+    ui().logger.debug(
+      `${chalk6.yellow("\u26A0")} Plugin ${chalk6.bold(
+        PLUGIN_SLUG
+      )} skipped parsing of unsupported audit details: ${chalk6.bold(
+        slugsWithDetailParsingErrors.slice(0, displayCount).join(", ")
+      )}${postFix(slugsWithDetailParsingErrors.length)}`
+    );
+  }
+}
+
+// packages/plugin-lighthouse/src/lib/runner/utils.ts
 function normalizeAuditOutputs(auditOutputs, flags = { skipAudits: [] }) {
   const toSkip = new Set(flags.skipAudits ?? []);
   return auditOutputs.filter(({ slug }) => {
     const doSkip = toSkip.has(slug);
     if (doSkip) {
       ui().logger.info(
-        `Audit ${chalk5.bold(
+        `Audit ${chalk7.bold(
           slug
-        )} was included in audit outputs of lighthouse but listed under ${chalk5.bold(
+        )} was included in audit outputs of lighthouse but listed under ${chalk7.bold(
           "skipAudits"
         )}.`
       );
@@ -1222,44 +1485,25 @@ function toAuditOutputs(lhrAudits, { verbose = false } = {}) {
         slug,
         score: score ?? 1,
         // score can be null
-        value: Number.parseInt(value.toString(), 10),
+        value,
         displayValue
       };
-      if (details4 == null) {
-        return auditOutput;
+      if (details4 != null) {
+        try {
+          const parsedDetails = toAuditDetails(details4);
+          return parsedDetails ? { ...auditOutput, details: parsedDetails } : auditOutput;
+        } catch (error) {
+          throw new Error(
+            `
+Audit ${chalk7.bold(slug)} failed parsing details: 
+${error.message}`
+          );
+        }
       }
       return auditOutput;
     }
   );
 }
-var unsupportedDetailTypes = /* @__PURE__ */ new Set([
-  "opportunity",
-  "table",
-  "treemap-data",
-  "screenshot",
-  "filmstrip",
-  "debugdata",
-  "criticalrequestchain"
-]);
-function logUnsupportedDetails(lhrAudits, { displayCount = 3 } = {}) {
-  const slugsWithDetailParsingErrors = [
-    ...new Set(
-      lhrAudits.filter(
-        ({ details: details4 }) => unsupportedDetailTypes.has(details4?.type)
-      ).map(({ details: details4 }) => details4?.type)
-    )
-  ];
-  if (slugsWithDetailParsingErrors.length > 0) {
-    const postFix = (count) => count > displayCount ? ` and ${count - displayCount} more.` : "";
-    ui().logger.debug(
-      `${chalk5.yellow("\u26A0")} Plugin ${chalk5.bold(
-        PLUGIN_SLUG
-      )} skipped parsing of unsupported audit details: ${chalk5.bold(
-        slugsWithDetailParsingErrors.slice(0, displayCount).join(", ")
-      )}${postFix(slugsWithDetailParsingErrors.length)}`
-    );
-  }
-}
 function determineAndSetLogLevel({
   verbose,
   quiet
@@ -1275,11 +1519,11 @@ function determineAndSetLogLevel({
 }
 async function getConfig(options = {}) {
   const { configPath: filepath, preset } = options;
-  if (typeof filepath === "string") {
+  if (filepath != null) {
     if (filepath.endsWith(".json")) {
       return readJsonFile(filepath);
     } else if (/\.(ts|js|mjs)$/.test(filepath)) {
-      return importEsmModule({ filepath });
+      return importModule({ filepath, format: "esm" });
     } else {
       ui().logger.info(`Format of file ${filepath} not supported`);
     }
@@ -1385,9 +1629,9 @@ function logUnsupportedFlagsInUse(flags, displayCount = 3) {
   if (unsupportedFlagsInUse.length > 0) {
     const postFix = (count) => count > displayCount ? ` and ${count - displayCount} more.` : "";
     ui().logger.debug(
-      `${chalk6.yellow("\u26A0")} Plugin ${chalk6.bold(
+      `${chalk8.yellow("\u26A0")} Plugin ${chalk8.bold(
         LIGHTHOUSE_PLUGIN_SLUG
-      )} used unsupported flags: ${chalk6.bold(
+      )} used unsupported flags: ${chalk8.bold(
         unsupportedFlagsInUse.slice(0, displayCount).join(", ")
       )}${postFix(unsupportedFlagsInUse.length)}`
     );
@@ -1494,6 +1738,8 @@ function lighthousePlugin(url, flags) {
   );
   return {
     slug: LIGHTHOUSE_PLUGIN_SLUG,
+    packageName: name,
+    version,
     title: "Lighthouse",
     icon: "lighthouse",
     audits: audits2,

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "@code-pushup/lighthouse-plugin",
-  "version": "0.46.0",
+  "version": "0.47.0",
   "license": "MIT",
   "dependencies": {
-    "@code-pushup/models": "0.46.0",
+    "@code-pushup/models": "0.47.0",
     "lighthouse": "^12.0.0",
-    "@code-pushup/utils": "0.46.0",
+    "@code-pushup/utils": "0.47.0",
     "lighthouse-logger": "2.0.1",
     "chalk": "^5.3.0"
   },

package/src/lib/runner/details/details.d.ts

@@ -0,0 +1,9 @@
+import type { FormattedIcu } from 'lighthouse';
+import type Details from 'lighthouse/types/lhr/audit-details';
+import { Result } from 'lighthouse/types/lhr/audit-result';
+import { AuditDetails } from '@code-pushup/models';
+export declare function toAuditDetails<T extends FormattedIcu<Details>>(details: T | undefined): AuditDetails | undefined;
+export declare const unsupportedDetailTypes: Set<string>;
+export declare function logUnsupportedDetails(lhrAudits: Result[], { displayCount }?: {
+    displayCount?: number;
+}): void;

package/src/lib/runner/details/item-value.d.ts

@@ -0,0 +1,10 @@
+import type { IcuMessage } from 'lighthouse';
+import type Details from 'lighthouse/types/lhr/audit-details';
+export type PrimitiveItemValue = string | number | boolean;
+export type ObjectItemValue = Exclude<Details.ItemValue, PrimitiveItemValue | IcuMessage>;
+export type SimpleItemValue = Extract<ObjectItemValue, Details.NumericValue | Details.CodeValue | Details.UrlValue> | PrimitiveItemValue;
+export declare function trimSlice(item?: PrimitiveItemValue, maxLength?: number): string;
+export declare function parseNodeValue(node?: Details.NodeValue): string;
+export declare function formatTableItemPropertyValue(itemValue?: Details.ItemValue, itemValueFormat?: Details.ItemValueType): Details.ItemValue;
+export declare function parseSimpleItemValue(item: SimpleItemValue): PrimitiveItemValue;
+export declare function parseTableItemPropertyValue(itemValue?: Details.ItemValue): PrimitiveItemValue | Details.LinkValue;

package/src/lib/runner/details/table.type.d.ts

@@ -0,0 +1,6 @@
+import type Details from 'lighthouse/types/lhr/audit-details';
+import { Table, TableColumnObject, TableRowObject } from '@code-pushup/models';
+export declare function parseTableToAuditDetailsTable(details: Details.Table): Table | undefined;
+export declare function parseTableColumns(rawHeadings: Details.TableColumnHeading[]): TableColumnObject[];
+export declare function parseTableRow(tableItem: Details.TableItem, headings: Details.TableColumnHeading[]): TableRowObject;
+export declare function parseTableEntry<T extends Details.TableItem>([key, value]: [keyof T, T[keyof T]], valueType?: Details.ItemValueType): [keyof T, Details.ItemValue | undefined];

package/src/lib/runner/details/types.d.ts

@@ -0,0 +1,4 @@
+export type DOM = {
+    append: (v: string) => string;
+    createComponent: (type: 'crcChain', opt: Record<string, unknown>) => string;
+};

package/src/lib/runner/utils.d.ts

@@ -8,9 +8,6 @@ export declare function toAuditOutputs(lhrAudits: Result[], { verbose }?: {
     verbose?: boolean;
 }): AuditOutputs;
 export declare const unsupportedDetailTypes: Set<string>;
-export declare function logUnsupportedDetails(lhrAudits: Result[], { displayCount }?: {
-    displayCount?: number;
-}): void;
 export type LighthouseLogLevel = 'verbose' | 'error' | 'info' | 'silent' | 'warn' | undefined;
 export declare function determineAndSetLogLevel({ verbose, quiet, }?: {
     verbose?: boolean;