core(js-libraries): hide fast path items from table, put all in debugData (#10176)

lighthouse-cli/test/smokehouse/test-definitions/dobetterweb/dbw-expectations.js

@@ -377,9 +377,6 @@ const expectations = [
             items: [{
               name: 'jQuery',
             },
-            {
-              name: 'jQuery (Fast path)',
-            },
             {
               name: 'WordPress',
             }],

lighthouse-core/audits/dobetterweb/js-libraries.js

@@ -44,6 +44,8 @@ class JsLibrariesAudit extends Audit {
   static audit(artifacts) {
     const libDetails = artifacts.Stacks
       .filter(stack => stack.detector === 'js')
+      // Don't show the fast paths in the table.
+      .filter(stack => !stack.id.endsWith('-fast'))
       .map(stack => ({
         name: stack.name,
         version: stack.version,
@@ -57,9 +59,22 @@ class JsLibrariesAudit extends Audit {
     ];
     const details = Audit.makeTableDetails(headings, libDetails, {});
 
+    const debugData = {
+      type: /** @type {'debugdata'} */ ('debugdata'),
+      stacks: artifacts.Stacks.map(stack => {
+        return {
+          id: stack.id,
+          version: stack.version,
+        };
+      }),
+    };
+
     return {
       score: 1, // Always pass for now.
-      details,
+      details: {
+        ...details,
+        debugData,
+      },
     };
   }
 }

lighthouse-core/test/audits/dobetterweb/js-libraries-test.js

@@ -20,8 +20,8 @@ describe('Returns detected front-end JavaScript libraries', () => {
     // duplicates. TODO: consider failing in this case
     const auditResult2 = JsLibrariesAudit.audit({
       Stacks: [
-        {detector: 'js', name: 'lib1', version: '3.10.1', npm: 'lib1'},
-        {detector: 'js', name: 'lib2', version: undefined, npm: 'lib2'},
+        {detector: 'js', id: 'lib1', name: 'lib1', version: '3.10.1', npm: 'lib1'},
+        {detector: 'js', id: 'lib2', name: 'lib2', version: undefined, npm: 'lib2'},
       ],
     });
     assert.equal(auditResult2.score, 1);
@@ -29,11 +29,11 @@ describe('Returns detected front-end JavaScript libraries', () => {
     // LOTS of frontend libs
     const auditResult3 = JsLibrariesAudit.audit({
       Stacks: [
-        {detector: 'js', name: 'React', version: undefined, npm: 'react'},
-        {detector: 'js', name: 'Polymer', version: undefined, npm: 'polymer-core'},
-        {detector: 'js', name: 'Preact', version: undefined, npm: 'preact'},
-        {detector: 'js', name: 'Angular', version: undefined, npm: 'angular'},
-        {detector: 'js', name: 'jQuery', version: undefined, npm: 'jquery'},
+        {detector: 'js', id: 'react', name: 'React', version: undefined, npm: 'react'},
+        {detector: 'js', id: 'polymer', name: 'Polymer', version: undefined, npm: 'polymer-core'},
+        {detector: 'js', id: 'preact', name: 'Preact', version: undefined, npm: 'preact'},
+        {detector: 'js', id: 'angular', name: 'Angular', version: undefined, npm: 'angular'},
+        {detector: 'js', id: 'jquery', name: 'jQuery', version: undefined, npm: 'jquery'},
       ],
     });
     assert.equal(auditResult3.score, 1);
@@ -42,8 +42,9 @@ describe('Returns detected front-end JavaScript libraries', () => {
   it('generates expected details', () => {
     const auditResult = JsLibrariesAudit.audit({
       Stacks: [
-        {detector: 'js', name: 'lib1', version: '3.10.1', npm: 'lib1'},
-        {detector: 'js', name: 'lib2', version: undefined, npm: 'lib2'},
+        {detector: 'js', id: 'lib1', name: 'lib1', version: '3.10.1', npm: 'lib1'},
+        {detector: 'js', id: 'lib2', name: 'lib2', version: undefined, npm: 'lib2'},
+        {detector: 'js', id: 'lib2-fast', name: 'lib2', version: undefined, npm: 'lib2'},
       ],
     });
     const expected = [
@@ -60,5 +61,9 @@ describe('Returns detected front-end JavaScript libraries', () => {
     ];
     assert.equal(auditResult.score, 1);
     assert.deepStrictEqual(auditResult.details.items, expected);
+    assert.deepStrictEqual(auditResult.details.debugData.stacks[2], {
+      id: 'lib2-fast',
+      version: undefined,
+    });
   });
 });

lighthouse-core/test/results/artifacts/artifacts.json

@@ -1840,7 +1840,7 @@
     },
     {
       "detector": "js",
-      "id": "jquery",
+      "id": "jquery-fast",
       "name": "jQuery (Fast path)",
       "npm": "jquery"
     },

lighthouse-core/test/results/sample_v2.json

@@ -2989,15 +2989,26 @@
             "version": "2.1.1",
             "npm": "jquery"
           },
-          {
-            "name": "jQuery (Fast path)",
-            "npm": "jquery"
-          },
           {
             "name": "WordPress"
           }
         ],
-        "summary": {}
+        "summary": {},
+        "debugData": {
+          "type": "debugdata",
+          "stacks": [
+            {
+              "id": "jquery",
+              "version": "2.1.1"
+            },
+            {
+              "id": "jquery-fast"
+            },
+            {
+              "id": "wordpress"
+            }
+          ]
+        }
       }
     },
     "notification-on-start": {

package.json

@@ -141,7 +141,7 @@
     "intl-messageformat": "^4.4.0",
     "intl-pluralrules": "^1.0.3",
     "jpeg-js": "0.1.2",
-    "js-library-detector": "^5.6.0",
+    "js-library-detector": "^5.7.0",
     "jsonld": "^1.5.0",
     "jsonlint-mod": "^1.7.5",
     "lighthouse-logger": "^1.2.0",

proto/sample_v2_round_trip.json

@@ -1176,6 +1176,21 @@
         "js-libraries": {
             "description": "All front-end JavaScript libraries detected on the page. [Learn more](https://web.dev/js-libraries).",
             "details": {
+                "debugData": {
+                    "stacks": [
+                        {
+                            "id": "jquery",
+                            "version": "2.1.1"
+                        },
+                        {
+                            "id": "jquery-fast"
+                        },
+                        {
+                            "id": "wordpress"
+                        }
+                    ],
+                    "type": "debugdata"
+                },
                 "headings": [
                     {
                         "itemType": "text",
@@ -1194,10 +1209,6 @@
                         "npm": "jquery",
                         "version": "2.1.1"
                     },
-                    {
-                        "name": "jQuery (Fast path)",
-                        "npm": "jquery"
-                    },
                     {
                         "name": "WordPress"
                     }

yarn.lock

@@ -4783,10 +4783,10 @@ jpeg-js@0.1.2, jpeg-js@^0.1.2:
   resolved "https://registry.yarnpkg.com/jpeg-js/-/jpeg-js-0.1.2.tgz#135b992c0575c985cfa0f494a3227ed238583ece"
   integrity sha1-E1uZLAV1yYXPoPSUoyJ+0jhYPs4=
 
-js-library-detector@^5.6.0:
-  version "5.6.0"
-  resolved "https://registry.yarnpkg.com/js-library-detector/-/js-library-detector-5.6.0.tgz#a44c95237870b5e4f66f0aff948270df7ec9f277"
-  integrity sha512-s9LeTXee2J+7qXQHJ1EHPbK4Mk5ZU820Wrw+EOxDRQcn2Tay4n+SvZaqJa6T8UpKu5mIomSh6nXoyuP1j2DzUw==
+js-library-detector@^5.7.0:
+  version "5.7.0"
+  resolved "https://registry.yarnpkg.com/js-library-detector/-/js-library-detector-5.7.0.tgz#27199e0728273de9333d69b2be92f144cad94380"
+  integrity sha512-pUHR7ryXqiew2agkQ3NppopqJDi5qkJtI86PyQ9LLtg1iGzwIsMz+QNq3ky5bPogSie7AkL/xvcObXu3Veh61Q==
 
 js-tokens@^1.0.1:
   version "1.0.3"