core(hreflang): remove eval, import axe valid-langs.js directly

.github/workflows/ci.yml

@@ -50,6 +50,7 @@ jobs:
     - run: yarn i18n:checks
     - run: yarn dogfood-lhci
     - run: bash lighthouse-core/scripts/copy-util-commonjs.sh
+    - run: bash lighthouse-core/scripts/copy-axe-valid-langs.sh
 
     # Fail if any changes were written to any source files or generated untracked files (ex, from: build/build-cdt-lib.js).
     - run: git add -A && git diff --cached --exit-code

lighthouse-core/audits/seo/hreflang.js

@@ -11,9 +11,7 @@
 
 const Audit = require('../audit.js');
 const i18n = require('../../lib/i18n/i18n.js');
-const axeLibSource = require('../../lib/axe.js').source;
 
-const VALID_LANGS = importValidLangs();
 const NO_LANGUAGE = 'x-default';
 
 const UIStrings = {
@@ -33,20 +31,6 @@ const UIStrings = {
 
 const str_ = i18n.createMessageInstanceIdFn(__filename, UIStrings);
 
-/**
- * Import list of valid languages from axe core.
- * This is a huge array of language codes that can be stored more efficiently if we will need to
- * shrink the bundle size.
- * @return {Array<string>}
- */
-function importValidLangs() {
-  // Define a window-ish object so axe will export to it.
-  const window = {getComputedStyle: () => {}};
-  eval(axeLibSource);
-  // @ts-expect-error
-  return window.axe.utils.validLangs();
-}
-
 /**
  * @param {string} href
  * @return {boolean}
@@ -57,16 +41,17 @@ function isFullyQualified(href) {
 
 /**
  * @param {string} hreflang
+ * @param {(lang: string) => boolean} isValidLang From axe.
  * @return {boolean}
  */
-function isExpectedLanguageCode(hreflang) {
+function isExpectedLanguageCode(hreflang, isValidLang) {
   if (hreflang.toLowerCase() === NO_LANGUAGE) {
     return true;
   }
 
   // hreflang can consist of language-script-region, we are validating only language
   const [lang] = hreflang.split('-');
-  return VALID_LANGS.includes(lang.toLowerCase());
+  return isValidLang(lang.toLowerCase());
 }
 
 class Hreflang extends Audit {
@@ -86,9 +71,11 @@ class Hreflang extends Audit {
 
   /**
    * @param {LH.Artifacts} artifacts
-   * @return {LH.Audit.Product}
+   * @return {Promise<LH.Audit.Product>}
    */
-  static audit({LinkElements}) {
+  static async audit({LinkElements}) {
+    const isValidLang = (await import('../../../third-party/axe/valid-langs.js')).default;
+
     /** @type {InvalidHreflang[]} */
     const invalidHreflangs = [];
 
@@ -105,7 +92,7 @@ class Hreflang extends Audit {
       /** @type {Source} */
       let source;
 
-      if (!isExpectedLanguageCode(link.hreflang)) {
+      if (!isExpectedLanguageCode(link.hreflang, isValidLang)) {
         reasons.push(str_(UIStrings.unexpectedLanguage));
       }
 

lighthouse-core/scripts/copy-axe-valid-langs.sh

@@ -0,0 +1,18 @@
+#!/usr/bin/env bash
+
+##
+# @license Copyright 2021 The Lighthouse Authors. All Rights Reserved.
+# Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0
+# Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.
+##
+
+# Necessary because axe-core does not publish as type: 'module', even though axe-core/lib/ is esmodules.
+
+SCRIPT_DIR="$( cd "$( dirname "${BASH_SOURCE[0]}" )" && pwd )"
+LH_ROOT_DIR="$SCRIPT_DIR/../.."
+
+OUT_FILE="$LH_ROOT_DIR"/third-party/axe/valid-langs.js
+
+echo '// @ts-nocheck' > "$OUT_FILE"
+echo '// Auto-generated by lighthouse-core/scripts/copy-axe-valid-langs.sh' >> "$OUT_FILE"
+sed 's/Sting/string/' "$LH_ROOT_DIR"/node_modules/axe-core/lib/core/utils/valid-langs.js >> "$OUT_FILE"

lighthouse-core/test/audits/seo/hreflang-test.js

@@ -13,7 +13,7 @@ const node = {};
 /* eslint-env jest */
 
 describe('SEO: Document has valid hreflang code', () => {
-  it('fails when the language code provided in hreflang via link element is invalid', () => {
+  it('fails when the language code provided in hreflang via link element is invalid', async () => {
     const artifacts = {
       LinkElements: [
         {rel: 'alternate', hreflang: 'xx1', hrefRaw: 'http://example.com/', source: 'headers', node},
@@ -24,12 +24,12 @@ describe('SEO: Document has valid hreflang code', () => {
       ],
     };
 
-    const {score, details} = HreflangAudit.audit(artifacts);
+    const {score, details} = await HreflangAudit.audit(artifacts);
     assert.equal(score, 0);
     assert.equal(details.items.length, 5);
   });
 
-  it('succeeds when the language code provided in hreflang via body is invalid', () => {
+  it('succeeds when the language code provided in hreflang via body is invalid', async () => {
     const hreflangValues = ['xx', 'XX-be', 'XX-be-Hans', '', '  es'];
 
     for (const hreflangValue of hreflangValues) {
@@ -44,12 +44,12 @@ describe('SEO: Document has valid hreflang code', () => {
         ],
       };
 
-      const {score} = HreflangAudit.audit(artifacts);
+      const {score} = await HreflangAudit.audit(artifacts);
       assert.equal(score, 1);
     }
   });
 
-  it('succeeds when language code provided via head/headers is valid', () => {
+  it('succeeds when language code provided via head/headers is valid', async () => {
     const hreflangValues = ['pl', 'nl-be', 'zh-Hans', 'x-default', 'FR-BE'];
 
     let inHead = false;
@@ -66,17 +66,18 @@ describe('SEO: Document has valid hreflang code', () => {
         ],
       };
 
-      const {score} = HreflangAudit.audit(artifacts);
+      const {score} = await HreflangAudit.audit(artifacts);
       assert.equal(score, 1);
       inHead = !inHead;
     }
   });
 
-  it('succeeds when there are no rel=alternate link elements nor headers', () => {
-    assert.equal(HreflangAudit.audit({LinkElements: []}).score, 1);
+  it('succeeds when there are no rel=alternate link elements nor headers', async () => {
+    const {score} = await HreflangAudit.audit({LinkElements: []});
+    assert.equal(score, 1);
   });
 
-  it('returns all failing items', () => {
+  it('returns all failing items', async () => {
     const artifacts = {
       LinkElements: [
         {rel: 'alternate', hreflang: 'xx1', hrefRaw: 'http://xx1.example.com/', source: 'headers', node},
@@ -86,37 +87,37 @@ describe('SEO: Document has valid hreflang code', () => {
       ],
     };
 
-    const {score, details} = HreflangAudit.audit(artifacts);
+    const {score, details} = await HreflangAudit.audit(artifacts);
     assert.equal(score, 0);
     assert.equal(details.items.length, 4);
   });
 
-  it('fails when the hreflang url is not fully-qualified', () => {
+  it('fails when the hreflang url is not fully-qualified', async () => {
     const artifacts = {
       LinkElements: [
         {rel: 'alternate', hreflang: 'es', hrefRaw: 'example.com', source: 'head', node},
         {rel: 'alternate', hreflang: 'es', hrefRaw: '//example.com', source: 'headers', node},
       ],
     };
 
-    const {score, details} = HreflangAudit.audit(artifacts);
+    const {score, details} = await HreflangAudit.audit(artifacts);
     assert.equal(score, 0);
     assert.equal(details.items.length, 2);
   });
 
-  it('fails with an invalid language code and a href which is not fully-qualified', () => {
+  it('fails with an invalid language code and a href which is not fully-qualified', async () => {
     const artifacts = {
       LinkElements: [
         {rel: 'alternate', hreflang: ' es', hrefRaw: 'example.com', source: 'head', node},
         {rel: 'alternate', hreflang: 'xx1', hrefRaw: '//example.com', source: 'headers', node},
       ],
     };
 
-    const {score} = HreflangAudit.audit(artifacts);
+    const {score} = await HreflangAudit.audit(artifacts);
     assert.equal(score, 0);
   });
 
-  it('outputs the reasons for which a hreflang failed', () => {
+  it('outputs the reasons for which a hreflang failed', async () => {
     const artifacts = {
       LinkElements: [
         {rel: 'alternate', hreflang: '@@', hrefRaw: 'example.com', source: 'head', node},
@@ -126,7 +127,7 @@ describe('SEO: Document has valid hreflang code', () => {
       ],
     };
 
-    const {details: {items}} = HreflangAudit.audit(artifacts);
+    const {details: {items}} = await HreflangAudit.audit(artifacts);
 
     assert.equal(items.length, 3);
     assert.equal(items[0].subItems.items.length, 2);

third-party/axe/package.json

@@ -0,0 +1,4 @@
+{
+  "type": "module",
+  "//": "Any directory that uses `import ... from` or `export ...` must be type module. Temporary file until root package.json is type: module"
+}

tsconfig.json

@@ -20,6 +20,7 @@
     "build/**/*.js",
     "./types/**/*.d.ts",
     "eslint-local-rules.js",
+    "third-party/axe/valid-langs.js",
 
     // TODO(esmodules): JSON files included via resolveJsonModule. Removable on the switch to ES Modules.
     "package.json",