core(legacy-javascript): add focus-visible polyfill (#14827)

GoogleChrome · Mar 15, 2023 · 91d457b · 91d457b
1 parent c2b6a0d
commit 91d457b
Show file tree

Hide file tree

Showing 5 changed files with 135 additions and 82 deletions.
diff --git a/core/audits/byte-efficiency/legacy-javascript.js b/core/audits/byte-efficiency/legacy-javascript.js
@@ -177,7 +177,12 @@ class LegacyJavascript extends ByteEfficiencyAudit {
   }
 
   static getPolyfillData() {
-    return [
+    /** @type {Array<{name: string, modules: string[], corejs?: boolean}>} */
+    const data = [
+      {name: 'focus-visible', modules: ['focus-visible']},
+    ];
+
+    const coreJsPolyfills = [
       ['Array.prototype.fill', 'es6.array.fill'],
       ['Array.prototype.filter', 'es6.array.filter'],
       ['Array.prototype.find', 'es6.array.find'],
@@ -225,15 +230,32 @@ class LegacyJavascript extends ByteEfficiencyAudit {
       ['Object.entries', 'es7.object.entries'],
       ['Object.getOwnPropertyDescriptors', 'es7.object.get-own-property-descriptors'],
       ['Object.values', 'es7.object.values'],
-    ].map(data => {
-      const [name, coreJs2Module] = data;
-      return {
+    ];
+
+    for (const [name, coreJs2Module] of coreJsPolyfills) {
+      data.push({
         name,
-        coreJs2Module,
-        coreJs3Module: coreJs2Module
-          .replace('es6.', 'es.')
-          .replace('es7.', 'es.')
-          .replace('typed.', 'typed-array.'),
+        modules: [
+          coreJs2Module,
+          // corejs 3 module name
+          coreJs2Module
+            .replace('es6.', 'es.')
+            .replace('es7.', 'es.')
+            .replace('typed.', 'typed-array.'),
+        ],
+        corejs: true,
+      });
+    }
+
+    return data;
+  }
+
+  static getCoreJsPolyfillData() {
+    return this.getPolyfillData().filter(d => d.corejs).map(d => {
+      return {
+        name: d.name,
+        coreJs2Module: d.modules[0],
+        coreJs3Module: d.modules[1],
       };
     });
   }
@@ -242,15 +264,20 @@ class LegacyJavascript extends ByteEfficiencyAudit {
    * @return {Pattern[]}
    */
   static getPolyfillPatterns() {
-    return this.getPolyfillData().map(({name}) => {
+    /** @type {Pattern[]} */
+    const patterns = [];
+
+    for (const {name} of this.getCoreJsPolyfillData()) {
       const parts = name.split('.');
       const object = parts.length > 1 ? parts.slice(0, parts.length - 1).join('.') : null;
       const property = parts[parts.length - 1];
-      return {
+      patterns.push({
         name,
         expression: this.buildPolyfillExpression(object, property),
-      };
-    });
+      });
+    }
+
+    return patterns;
   }
 
   /**
@@ -301,12 +328,12 @@ class LegacyJavascript extends ByteEfficiencyAudit {
       // If it's a bundle with source maps, add in the polyfill modules by name too.
       const bundle = bundles.find(b => b.script.scriptId === script.scriptId);
       if (bundle) {
-        for (const {coreJs2Module, coreJs3Module, name} of polyfillData) {
+        for (const {name, modules} of polyfillData) {
           // Skip if the pattern matching found a match for this polyfill.
           if (matches.some(m => m.name === name)) continue;
 
           const source = bundle.rawMap.sources.find(source =>
-            source.endsWith(`${coreJs2Module}.js`) || source.endsWith(`${coreJs3Module}.js`));
+            modules.some(module => source.endsWith(`${module}.js`)));
           if (!source) continue;
 
           const mapping = bundle.map.mappings().find(m => m.sourceURL === source);
@@ -344,7 +371,6 @@ class LegacyJavascript extends ByteEfficiencyAudit {
       }
     }
 
-    if (polyfillResults.length > 0) estimatedWastedBytesFromPolyfills += graph.baseSize;
     estimatedWastedBytesFromPolyfills += [...modulesSeen].reduce((acc, moduleIndex) => {
       return acc + graph.moduleSizes[moduleIndex];
     }, 0);