i18n: stack-pack i18n

[exterkamp]

Summary
Converts stack packs to use UIStrings for i18n.

[brendankenny]

Summary

Related Issues/PRs

can you fill this in, please :)

[brendankenny]

also, can we merge this into master after #7243 lands rather than continuing to grow that PR?

[exterkamp]

Sure, just land that one and I'll change this to merge 2 master.

[paulirish]

seems good.

[brendankenny]

to fix Travis, I think we won't be able to call out from stack-packs code to lighthouse, at least as long as we're treating stack-packs as a separate module.

I think we'll have to remove @lighthouse/stack-packs from package.json and in stack-packs.js switch const stackPacks = require('@lighthouse/stack-packs'); to const stackPacks = require('../../stack-packs/index.js');.

Maybe others have a different solution? Even as a separate module I'm not sure how we're going to have it call back into lighthouse when it's a lighthouse dep.

[patrickhulce]

Maybe others have a different solution? Even as a separate module I'm not sure how we're going to have it call back into lighthouse when it's a lighthouse dep.

What if we turned this into a function and LH passed in the i18n object?

We could still keep UIStrings at the top level so we can statically extract them but the runtime piece is addressed at least.

[paulirish]

What if we turned this into a function and LH passed in the i18n object?

interesting idea. i just tried it and it does work.

diff --git a/lighthouse-core/lib/stack-packs.js b/lighthouse-core/lib/stack-packs.js
index b2a04fc4..591eb91b 100644
--- a/lighthouse-core/lib/stack-packs.js
+++ b/lighthouse-core/lib/stack-packs.js
@@ -6,8 +6,8 @@
 'use strict';
 
 const stackPacks = require('../../stack-packs/index.js');
+const i18n = require('./i18n/i18n.js');
 const log = require('lighthouse-logger');
-
 /**
  * Pairs consisting of a stack pack's ID and the set of stacks needed to be
  * detected in a page to display that pack's advice.
@@ -35,12 +35,13 @@ function getStackPacks(pageStacks) {
     }
 
     // Grab the full pack definition
-    const matchedPack = stackPacks.find(pack => pack.id === stackPackToIncl.packId);
-    if (!matchedPack) {
+    const matchedPackFn = stackPacks.find(pack => pack.id === stackPackToIncl.packId);
+    if (!matchedPackFn) {
       log.warn('StackPacks',
         `'${stackPackToIncl.packId}' stack pack was matched but is not found in stack-packs lib`);
       continue;
     }
+    const matchedPack = matchedPackFn(i18n);
 
     packs.push({
       id: matchedPack.id,
diff --git a/stack-packs/packs/wordpress.js b/stack-packs/packs/wordpress.js
index a15194ac..e5b204b6 100644
--- a/stack-packs/packs/wordpress.js
+++ b/stack-packs/packs/wordpress.js
@@ -7,8 +7,6 @@
 
 'use strict';
 
-const i18n = require('../../lighthouse-core/lib/i18n/i18n.js');
-
 
@@ -42,9 +40,11 @@ const UIStrings = {
   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.',
 };
 
-const str_ = i18n.createMessageInstanceIdFn(__filename, UIStrings);
 
-module.exports = {
+module.exports = function(i18n) {
+  const str_ = i18n.createMessageInstanceIdFn(__filename, UIStrings);
+
+return {
   id: 'wordpress',
   iconDataURL: wordpressIcon,
   title: 'WordPress',
@@ -65,4 +65,5 @@ module.exports = {
     'time-to-first-byte': str_(UIStrings.time_to_first_byte),
   },
 };
+};
 module.exports.UIStrings = UIStrings;

[exterkamp]

I'm extracting these and sending for translation!

[exterkamp]

Changed based on @brendankenny's ideas. I didn't commit the yarn.lock changes b/c i couldn't remember if that was just my local getting messed up with all this git merging or not.

[paulirish]

Looks good. @brendankenny ya?

[brendankenny]

yep, LGTM!