core(stack-packs): move to lighthouse-stack-packs npm package (#11370)

Co-authored-by: Ward Peeters <ward@coding-tech.com>

lighthouse-core/lib/stack-packs.js

@@ -5,8 +5,21 @@
  */
 'use strict';
 
-const stackPacks = require('../../stack-packs/index.js');
 const log = require('lighthouse-logger');
+const stackPacks = require('lighthouse-stack-packs');
+const i18n = require('./i18n/i18n.js');
+
+/**
+ * Resolve a module on web and node
+ * @param {string} module
+ */
+function resolve(module) {
+  if (!require.resolve) {
+    return `node_modules/${module}`;
+  }
+
+  return require.resolve(module);
+}
 
 /**
  * Pairs consisting of a stack pack's ID and the set of stacks needed to be
@@ -52,19 +65,37 @@ function getStackPacks(pageStacks) {
       continue;
     }
 
-    // Grab the full pack definition
+    // Grab the full pack definition.
     const matchedPack = stackPacks.find(pack => pack.id === stackPackToIncl.packId);
     if (!matchedPack) {
       log.warn('StackPacks',
         `'${stackPackToIncl.packId}' stack pack was matched but is not found in stack-packs lib`);
       continue;
     }
 
+    // Create i18n handler to get translated strings.
+    const str_ = i18n.createMessageInstanceIdFn(
+      resolve(`lighthouse-stack-packs/packs/${matchedPack.id}`),
+      matchedPack.UIStrings
+    );
+
+    /** @type {Record<string, string>} */
+    const descriptions = {};
+    /** @type {Record<string, string>} */
+    const UIStrings = matchedPack.UIStrings;
+
+    // Convert all strings into the correct translation.
+    for (const key in UIStrings) {
+      if (UIStrings[key]) {
+        descriptions[key] = str_(UIStrings[key]);
+      }
+    }
+
     packs.push({
       id: matchedPack.id,
       title: matchedPack.title,
-      iconDataURL: matchedPack.iconDataURL,
-      descriptions: matchedPack.descriptions,
+      iconDataURL: matchedPack.icon,
+      descriptions,
     });
   }
 

lighthouse-core/scripts/i18n/collect-strings.js

@@ -26,10 +26,16 @@ const UISTRINGS_REGEX = /UIStrings = .*?\};\n/s;
 /** @typedef {Required<Pick<CtcMessage, 'message'|'placeholders'>>} IncrementalCtc */
 /** @typedef {{message: string, description: string, examples: Record<string, string>}} ParsedUIString */
 
+const foldersWithStrings = [
+  `${LH_ROOT}/lighthouse-core`,
+  path.dirname(require.resolve('lighthouse-stack-packs')) + '/packs',
+];
+
 const ignoredPathComponents = [
   '**/.git/**',
   '**/scripts/**',
-  '**/node_modules/**',
+  '**/node_modules/!(lighthouse-stack-packs)/**', // ignore all node modules *except* stack packs
+  '**/lighthouse-core/lib/stack-packs.js',
   '**/test/**',
   '**/*-test.js',
   '**/*-renderer.js',
@@ -530,6 +536,7 @@ function collectAllStringsInDir(dir) {
     cwd: LH_ROOT,
     ignore: ignoredPathComponents,
   });
+
   for (const relativeToRootPath of files) {
     const absolutePath = path.join(LH_ROOT, relativeToRootPath);
     if (!process.env.CI) console.log('Collecting from', relativeToRootPath);
@@ -611,18 +618,20 @@ function writeStringsToCtcFiles(locale, strings) {
 
 // @ts-expect-error Test if called from the CLI or as a module.
 if (require.main === module) {
-  const coreStrings = collectAllStringsInDir(path.join(LH_ROOT, 'lighthouse-core'));
-  console.log('Collected from LH core!');
+  /** @type {Record<string, CtcMessage>} */
+  const strings = {};
 
-  const stackPackStrings = collectAllStringsInDir(path.join(LH_ROOT, 'stack-packs/packs'));
-  console.log('Collected from Stack Packs!');
+  for (const folderWithStrings of foldersWithStrings) {
+    console.log(`\n====\nCollecting strings from ${folderWithStrings}\n====`);
+    const moreStrings = collectAllStringsInDir(folderWithStrings);
+    Object.assign(strings, moreStrings);
+  }
 
-  if ((collisions) > 0) {
+  if (collisions > 0) {
     console.log(`MEANING COLLISION: ${collisions} string(s) have the same content.`);
     assert.equal(collisions, 16, `The number of duplicate strings have changed, update this assertion if that is expected, or reword strings. Collisions: ${collisionStrings}`);
   }
 
-  const strings = {...coreStrings, ...stackPackStrings};
   writeStringsToCtcFiles('en-US', strings);
   console.log('Written to disk!', 'en-US.ctc.json');
   // Generate local pseudolocalized files for debugging while translating

lighthouse-core/test/results/sample_v2.json

@@ -7940,70 +7940,70 @@
       "lighthouse-core/config/default-config.js | bestPracticesGeneralGroupTitle": [
         "categoryGroups[best-practices-general].title"
       ],
-      "stack-packs/packs/wordpress.js | unused_css_rules": [
-        "stackPacks[0].descriptions[unused-css-rules]"
+      "node_modules/lighthouse-stack-packs/packs/wordpress.js | unused_css_rules": [
+        "stackPacks[0].descriptions[unused_css_rules]"
       ],
-      "stack-packs/packs/wordpress.js | uses_webp_images": [
-        "stackPacks[0].descriptions[uses-webp-images]"
+      "node_modules/lighthouse-stack-packs/packs/wordpress.js | uses_webp_images": [
+        "stackPacks[0].descriptions[uses_webp_images]"
       ],
-      "stack-packs/packs/wordpress.js | offscreen_images": [
-        "stackPacks[0].descriptions[offscreen-images]"
+      "node_modules/lighthouse-stack-packs/packs/wordpress.js | offscreen_images": [
+        "stackPacks[0].descriptions[offscreen_images]"
       ],
-      "stack-packs/packs/wordpress.js | total_byte_weight": [
-        "stackPacks[0].descriptions[total-byte-weight]"
+      "node_modules/lighthouse-stack-packs/packs/wordpress.js | total_byte_weight": [
+        "stackPacks[0].descriptions[total_byte_weight]"
       ],
-      "stack-packs/packs/wordpress.js | render_blocking_resources": [
-        "stackPacks[0].descriptions[render-blocking-resources]"
+      "node_modules/lighthouse-stack-packs/packs/wordpress.js | render_blocking_resources": [
+        "stackPacks[0].descriptions[render_blocking_resources]"
       ],
-      "stack-packs/packs/wordpress.js | unminified_css": [
-        "stackPacks[0].descriptions[unminified-css]"
+      "node_modules/lighthouse-stack-packs/packs/wordpress.js | unminified_css": [
+        "stackPacks[0].descriptions[unminified_css]"
       ],
-      "stack-packs/packs/wordpress.js | unminified_javascript": [
-        "stackPacks[0].descriptions[unminified-javascript]"
+      "node_modules/lighthouse-stack-packs/packs/wordpress.js | unminified_javascript": [
+        "stackPacks[0].descriptions[unminified_javascript]"
       ],
-      "stack-packs/packs/wordpress.js | efficient_animated_content": [
-        "stackPacks[0].descriptions[efficient-animated-content]"
+      "node_modules/lighthouse-stack-packs/packs/wordpress.js | efficient_animated_content": [
+        "stackPacks[0].descriptions[efficient_animated_content]"
       ],
-      "stack-packs/packs/wordpress.js | unused_javascript": [
-        "stackPacks[0].descriptions[unused-javascript]"
+      "node_modules/lighthouse-stack-packs/packs/wordpress.js | unused_javascript": [
+        "stackPacks[0].descriptions[unused_javascript]"
       ],
-      "stack-packs/packs/wordpress.js | uses_long_cache_ttl": [
-        "stackPacks[0].descriptions[uses-long-cache-ttl]"
+      "node_modules/lighthouse-stack-packs/packs/wordpress.js | uses_long_cache_ttl": [
+        "stackPacks[0].descriptions[uses_long_cache_ttl]"
       ],
-      "stack-packs/packs/wordpress.js | uses_optimized_images": [
-        "stackPacks[0].descriptions[uses-optimized-images]"
+      "node_modules/lighthouse-stack-packs/packs/wordpress.js | uses_optimized_images": [
+        "stackPacks[0].descriptions[uses_optimized_images]"
       ],
-      "stack-packs/packs/wordpress.js | uses_text_compression": [
-        "stackPacks[0].descriptions[uses-text-compression]"
+      "node_modules/lighthouse-stack-packs/packs/wordpress.js | uses_text_compression": [
+        "stackPacks[0].descriptions[uses_text_compression]"
       ],
-      "stack-packs/packs/wordpress.js | uses_responsive_images": [
-        "stackPacks[0].descriptions[uses-responsive-images]"
+      "node_modules/lighthouse-stack-packs/packs/wordpress.js | uses_responsive_images": [
+        "stackPacks[0].descriptions[uses_responsive_images]"
       ],
-      "stack-packs/packs/wordpress.js | server_response_time": [
-        "stackPacks[0].descriptions[server-response-time]"
+      "node_modules/lighthouse-stack-packs/packs/wordpress.js | time_to_first_byte": [
+        "stackPacks[0].descriptions[time_to_first_byte]"
       ]
     }
   },
   "stackPacks": [
     {
       "id": "wordpress",
       "title": "WordPress",
-      "iconDataURL": "data:image/svg+xml,%3Csvg viewBox='0 0 122.5 122.5' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%232f3439'%3E%3Cpath d='M8.7 61.3c0 20.8 12.1 38.7 29.6 47.3l-25-68.7c-3 6.5-4.6 13.7-4.6 21.4zM96.7 58.6c0-6.5-2.3-11-4.3-14.5-2.7-4.3-5.2-8-5.2-12.3 0-4.8 3.7-9.3 8.9-9.3h.7a52.4 52.4 0 0 0-79.4 9.9h3.3c5.5 0 14-.6 14-.6 2.9-.2 3.2 4 .4 4.3 0 0-2.9.4-6 .5l19.1 57L59.7 59l-8.2-22.5c-2.8-.1-5.5-.5-5.5-.5-2.8-.1-2.5-4.5.3-4.3 0 0 8.7.7 13.9.7 5.5 0 14-.7 14-.7 2.8-.2 3.2 4 .3 4.3 0 0-2.8.4-6 .5l19 56.5 5.2-17.5c2.3-7.3 4-12.5 4-17z'/%3E%3Cpath d='M62.2 65.9l-15.8 45.8a52.6 52.6 0 0 0 32.3-.9l-.4-.7zM107.4 36a49.6 49.6 0 0 1-3.6 24.2l-16.1 46.5A52.5 52.5 0 0 0 107.4 36z'/%3E%3Cpath d='M61.3 0a61.3 61.3 0 1 0 .1 122.7A61.3 61.3 0 0 0 61.3 0zm0 119.7a58.5 58.5 0 1 1 .1-117 58.5 58.5 0 0 1-.1 117z'/%3E%3C/g%3E%3C/svg%3E",
+      "iconDataURL": "data:image/svg+xml,%3Csvg viewBox=\"0 0 122.5 122.5\" xmlns=\"http://www.w3.org/2000/svg\"%3E%3Cg fill=\"%232f3439\"%3E%3Cpath d=\"M8.7 61.3c0 20.8 12.1 38.7 29.6 47.3l-25-68.7c-3 6.5-4.6 13.7-4.6 21.4zM96.7 58.6c0-6.5-2.3-11-4.3-14.5-2.7-4.3-5.2-8-5.2-12.3 0-4.8 3.7-9.3 8.9-9.3h.7a52.4 52.4 0 0 0-79.4 9.9h3.3c5.5 0 14-.6 14-.6 2.9-.2 3.2 4 .4 4.3 0 0-2.9.4-6 .5l19.1 57L59.7 59l-8.2-22.5c-2.8-.1-5.5-.5-5.5-.5-2.8-.1-2.5-4.5.3-4.3 0 0 8.7.7 13.9.7 5.5 0 14-.7 14-.7 2.8-.2 3.2 4 .3 4.3 0 0-2.8.4-6 .5l19 56.5 5.2-17.5c2.3-7.3 4-12.5 4-17z\"/%3E%3Cpath d=\"M62.2 65.9l-15.8 45.8a52.6 52.6 0 0 0 32.3-.9l-.4-.7zM107.4 36a49.6 49.6 0 0 1-3.6 24.2l-16.1 46.5A52.5 52.5 0 0 0 107.4 36z\"/%3E%3Cpath d=\"M61.3 0a61.3 61.3 0 1 0 .1 122.7A61.3 61.3 0 0 0 61.3 0zm0 119.7a58.5 58.5 0 1 1 .1-117 58.5 58.5 0 0 1-.1 117z\"/%3E%3C/g%3E%3C/svg%3E",
       "descriptions": {
-        "unused-css-rules": "Consider reducing, or switching, the number of [WordPress plugins](https://wordpress.org/plugins/) loading unused CSS in your page. To identify plugins that are adding extraneous CSS, try running [code coverage](https://developers.google.com/web/updates/2017/04/devtools-release-notes#coverage) in Chrome DevTools. You can identify the theme/plugin responsible from the URL of the stylesheet. Look out for plugins that have many stylesheets in the list which have a lot of red in code coverage. A plugin should only enqueue a stylesheet if it is actually used on the page.",
-        "uses-webp-images": "Consider using a [plugin](https://wordpress.org/plugins/search/convert+webp/) or service that will automatically convert your uploaded images to the optimal formats.",
-        "offscreen-images": "Install a [lazy-load WordPress plugin](https://wordpress.org/plugins/search/lazy+load/) that provides the ability to defer any offscreen images, or switch to a theme that provides that functionality. Also consider using [the AMP plugin](https://wordpress.org/plugins/amp/).",
-        "total-byte-weight": "Consider showing excerpts in your post lists (e.g. via the more tag), reducing the number of posts shown on a given page, breaking your long posts into multiple pages, or using a plugin to lazy-load comments.",
-        "render-blocking-resources": "There are a number of WordPress plugins that can help you [inline critical assets](https://wordpress.org/plugins/search/critical+css/) or [defer less important resources](https://wordpress.org/plugins/search/defer+css+javascript/). Beware that optimizations provided by these plugins may break features of your theme or plugins, so you will likely need to make code changes.",
-        "unminified-css": "A number of [WordPress plugins](https://wordpress.org/plugins/search/minify+css/) can speed up your site by concatenating, minifying, and compressing your styles. You may also want to use a build process to do this minification up-front if possible.",
-        "unminified-javascript": "A number of [WordPress plugins](https://wordpress.org/plugins/search/minify+javascript/) can speed up your site by concatenating, minifying, and compressing your scripts. You may also want to use a build process to do this minification up front if possible.",
-        "efficient-animated-content": "Consider uploading your GIF to a service which will make it available to embed as an HTML5 video.",
-        "unused-javascript": "Consider reducing, or switching, the number of [WordPress plugins](https://wordpress.org/plugins/) loading unused JavaScript in your page. To identify plugins that are adding extraneous JS, try running [code coverage](https://developers.google.com/web/updates/2017/04/devtools-release-notes#coverage) in Chrome DevTools. You can identify the theme/plugin responsible from the URL of the script. Look out for plugins that have many scripts in the list which have a lot of red in code coverage. A plugin should only enqueue a script if it is actually used on the page.",
-        "uses-long-cache-ttl": "Read about [Browser Caching in WordPress](https://wordpress.org/support/article/optimization/#browser-caching).",
-        "uses-optimized-images": "Consider using an [image optimization WordPress plugin](https://wordpress.org/plugins/search/optimize+images/) that compresses your images while retaining quality.",
-        "uses-text-compression": "You can enable text compression in your web server configuration.",
-        "uses-responsive-images": "Upload images directly through the [media library](https://wordpress.org/support/article/media-library-screen/) to ensure that the required image sizes are available, and then insert them from the media library or use the image widget to ensure the optimal image sizes are used (including those for the responsive breakpoints). Avoid using `Full Size` images unless the dimensions are adequate for their usage. [Learn More](https://wordpress.org/support/article/inserting-images-into-posts-and-pages/).",
-        "server-response-time": "Themes, plugins, and server specifications all contribute to server response time. Consider finding a more optimized theme, carefully selecting an optimization plugin, and/or upgrading your server."
+        "unused_css_rules": "Consider reducing, or switching, the number of [WordPress plugins](https://wordpress.org/plugins/) loading unused CSS in your page. To identify plugins that are adding extraneous CSS, try running [code coverage](https://developers.google.com/web/updates/2017/04/devtools-release-notes#coverage) in Chrome DevTools. You can identify the theme/plugin responsible from the URL of the stylesheet. Look out for plugins that have many stylesheets in the list which have a lot of red in code coverage. A plugin should only enqueue a stylesheet if it is actually used on the page.",
+        "uses_webp_images": "Consider using a [plugin](https://wordpress.org/plugins/search/convert+webp/) or service that will automatically convert your uploaded images to the optimal formats.",
+        "offscreen_images": "Install a [lazy-load WordPress plugin](https://wordpress.org/plugins/search/lazy+load/) that provides the ability to defer any offscreen images, or switch to a theme that provides that functionality. Also consider using [the AMP plugin](https://wordpress.org/plugins/amp/).",
+        "total_byte_weight": "Consider showing excerpts in your post lists (e.g. via the more tag), reducing the number of posts shown on a given page, breaking your long posts into multiple pages, or using a plugin to lazy-load comments.",
+        "render_blocking_resources": "There are a number of WordPress plugins that can help you [inline critical assets](https://wordpress.org/plugins/search/critical+css/) or [defer less important resources](https://wordpress.org/plugins/search/defer+css+javascript/). Beware that optimizations provided by these plugins may break features of your theme or plugins, so you will likely need to make code changes.",
+        "unminified_css": "A number of [WordPress plugins](https://wordpress.org/plugins/search/minify+css/) can speed up your site by concatenating, minifying, and compressing your styles. You may also want to use a build process to do this minification up-front if possible.",
+        "unminified_javascript": "A number of [WordPress plugins](https://wordpress.org/plugins/search/minify+javascript/) can speed up your site by concatenating, minifying, and compressing your scripts. You may also want to use a build process to do this minification up front if possible.",
+        "efficient_animated_content": "Consider uploading your GIF to a service which will make it available to embed as an HTML5 video.",
+        "unused_javascript": "Consider reducing, or switching, the number of [WordPress plugins](https://wordpress.org/plugins/) loading unused JavaScript in your page. To identify plugins that are adding extraneous JS, try running [code coverage](https://developers.google.com/web/updates/2017/04/devtools-release-notes#coverage) in Chrome DevTools. You can identify the theme/plugin responsible from the URL of the script. Look out for plugins that have many scripts in the list which have a lot of red in code coverage. A plugin should only enqueue a script if it is actually used on the page.",
+        "uses_long_cache_ttl": "Read about [Browser Caching in WordPress](https://wordpress.org/support/article/optimization/#browser-caching).",
+        "uses_optimized_images": "Consider using an [image optimization WordPress plugin](https://wordpress.org/plugins/search/optimize+images/) that compresses your images while retaining quality.",
+        "uses_text_compression": "You can enable text compression in your web server configuration.",
+        "uses_responsive_images": "Upload images directly through the [media library](https://wordpress.org/support/article/media-library-screen/) to ensure that the required image sizes are available, and then insert them from the media library or use the image widget to ensure the optimal image sizes are used (including those for the responsive breakpoints). Avoid using `Full Size` images unless the dimensions are adequate for their usage. [Learn More](https://wordpress.org/support/article/inserting-images-into-posts-and-pages/).",
+        "time_to_first_byte": "Themes, plugins, and server specifications all contribute to server response time. Consider finding a more optimized theme, carefully selecting an optimization plugin, and/or upgrading your server."
       }
     }
   ]

package.json

@@ -160,6 +160,7 @@
     "jsonld": "^1.5.0",
     "jsonlint-mod": "^1.7.5",
     "lighthouse-logger": "^1.2.0",
+    "lighthouse-stack-packs": "^1.0.0",
     "lodash.isequal": "^4.5.0",
     "lodash.set": "^4.3.2",
     "lookup-closest-locale": "6.0.4",