report(psi): stub out locale swapping (#13885)

GoogleChrome · May 9, 2022 · 0381f11 · 0381f11
1 parent ff52c9d
commit 0381f11
Show file tree

Hide file tree

Showing 4 changed files with 39 additions and 3 deletions.
diff --git a/build/build-report.js b/build/build-report.js
@@ -96,6 +96,11 @@ async function buildEsModulesBundle() {
     input: 'report/clients/bundle.js',
     plugins: [
       rollupPlugins.commonjs(),
+      // Exclude this 30kb from the devtools bundle for now.
+      rollupPlugins.shim({
+        [`${LH_ROOT}/shared/localization/i18n-module.js`]:
+            'export const swapLocale = _ => {}; export const format = _ => {};',
+      }),
     ],
   });
 
@@ -110,19 +115,27 @@ async function buildUmdBundle() {
   const bundle = await rollup.rollup({
     input: 'report/clients/bundle.js',
     plugins: [
+      rollupPlugins.inlineFs({verbose: true}),
       rollupPlugins.commonjs(),
       rollupPlugins.terser({
         format: {
           beautify: true,
         },
       }),
+      // Shim this empty to ensure the bundle isn't 10MB
+      rollupPlugins.shim({
+        [`${LH_ROOT}/shared/localization/locales.js`]: 'export default {}',
+        'fs': 'export default {}',
+      }),
+      rollupPlugins.nodeResolve({preferBuiltins: true}),
     ],
   });
 
   await bundle.write({
     file: 'dist/report/bundle.umd.js',
     format: 'umd',
     name: 'report',
+    sourcemap: Boolean(process.env.DEBUG),
   });
   await bundle.close();
 }

diff --git a/report/clients/bundle.js b/report/clients/bundle.js
@@ -16,3 +16,4 @@ export {DOM} from '../renderer/dom.js';
 export {ReportRenderer} from '../renderer/report-renderer.js';
 export {ReportUIFeatures} from '../renderer/report-ui-features.js';
 export {renderReport} from '../renderer/api.js';
+export {swapLocale, format} from '../../shared/localization/i18n-module.js';
diff --git a/report/test-assets/faux-psi-template.html b/report/test-assets/faux-psi-template.html
@@ -119,7 +119,7 @@
   border-width: 1px 0;
   padding: 4px;
 }
-button {
+#reanalyze {
   background-color: hsl(216deg 100% 50%);
   border-radius: 4px;
   color: white;
@@ -133,8 +133,9 @@
 </head>
 <body >
   <noscript>PSI requires JavaScript. Please enable.</noscript>
+  <button type=button id="translate">→ Español</button>
   <div class="page">
-    <button type=button>Reanalyze</button>
+    <button type=button id="reanalyze">Reanalyze</button>
     <div class="tabset">
       <input type="radio" name="tabset" id="tab1" aria-controls="mobile" checked />
       <label for="tab1">Mobile</label>

diff --git a/report/test-assets/faux-psi.js b/report/test-assets/faux-psi.js
@@ -18,7 +18,12 @@ const wait = (ms = 100) => new Promise(resolve => setTimeout(resolve, ms));
 (async function __initPsiReports__() {
   renderLHReport();
 
-  document.querySelector('button')?.addEventListener('click', () => {
+  document.querySelector('button#reanalyze')?.addEventListener('click', () => {
+    renderLHReport();
+  });
+
+  document.querySelector('button#translate')?.addEventListener('click', async () => {
+    await swapLhrLocale('es');
     renderLHReport();
   });
 })();
@@ -81,6 +86,22 @@ async function renderLHReport() {
   }
 }
 
+/**
+ * @param {LH.Locale} locale
+ */
+async function swapLhrLocale(locale) {
+  const response = await fetch(`https://www.gstatic.com/pagespeed/insights/ui/locales/${locale}.json`);
+  /** @type {import('../../shared/localization/locales').LhlMessages} */
+  const lhlMessages = await response.json();
+  console.log(lhlMessages);
+  if (!lhlMessages) throw new Error(`could not fetch data for locale: ${locale}`);
+
+  lighthouseRenderer.format.registerLocaleData(locale, lhlMessages);
+  // @ts-expect-error LHR global
+  window.__LIGHTHOUSE_JSON__ = lighthouseRenderer.swapLocale(window.__LIGHTHOUSE_JSON__, locale)
+    .lhr;
+}
+
 
 /**
  * Tweak the LHR to make the desktop and mobile reports easier to identify.