clients(devtools): tsc type override bug workaround (#12933)

GoogleChrome · Aug 18, 2021 · a1dfe6c · a1dfe6c
1 parent 8a3f755
commit a1dfe6c
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 34 deletions.
diff --git a/build/build-report-components.js b/build/build-report-components.js
@@ -152,7 +152,7 @@ function compileTemplate(tmpEl) {
   const functionName = `create${upperFirst(componentName)}Component`;
   const jsdoc = `
 /**
- * @param {DOM_} dom
+ * @param {DOM} dom
  */`;
   const functionCode = jsdoc + '\n' + createFunctionCode(functionName, lines, ['dom']);
   return {tmpEl, componentName, functionName, functionCode};
@@ -176,7 +176,7 @@ function makeGenericCreateComponentFunctionCode(compiledTemplates) {
   const jsdoc = `
 /** @typedef {${paramType}} ComponentName */
 /**
- * @param {DOM_} dom
+ * @param {DOM} dom
  * @param {ComponentName} componentName
  * @return {DocumentFragment}
  */`;
@@ -192,9 +192,7 @@ async function main() {
 
     // auto-generated by build/build-report-components.js
 
-    // must import as DOM_ to avoid redeclaring 'DOM' export in bundle.d.ts, otherwise
-    // yarn test-devtools will fail.
-    /** @typedef {import('./dom.js').DOM} DOM_ */
+    /** @typedef {import('./dom.js').DOM} DOM */
 
     /* eslint-disable max-len */
 

diff --git a/lighthouse-core/scripts/roll-to-devtools.sh b/lighthouse-core/scripts/roll-to-devtools.sh
@@ -48,6 +48,10 @@ echo -e "$check lighthouse-dt-bundle copied."
 
 # generate bundle.d.ts
 npx tsc --allowJs --declaration --emitDeclarationOnly dist/report/bundle.esm.js
+# Exports of report/clients/bundle.js can possibly be mistakenly overriden by tsc.
+sed -i '' 's/export type DOM = any;//' dist/report/bundle.esm.d.ts
+sed -i '' 's/export type ReportRenderer = any;//' dist/report/bundle.esm.d.ts
+sed -i '' 's/export type ReportUIFeatures = any;//' dist/report/bundle.esm.d.ts
 
 # copy report code $fe_lh_dir
 fe_lh_report_dir="$fe_lh_dir/report/"

diff --git a/report/clients/bundle.js b/report/clients/bundle.js
@@ -11,6 +11,7 @@
 // until we work out a common rendering interface.
 // See: https://github.com/GoogleChrome/lighthouse/pull/12623
 
+// Modify lighthouse-core/scripts/roll-to-devtools.sh if exports change.
 export {DOM} from '../renderer/dom.js';
 export {ReportRenderer} from '../renderer/report-renderer.js';
 export {ReportUIFeatures} from '../renderer/report-ui-features.js';
diff --git a/report/renderer/components.js b/report/renderer/components.js
@@ -2,15 +2,13 @@
 
 // auto-generated by build/build-report-components.js
 
-// must import as DOM_ to avoid redeclaring 'DOM' export in bundle.d.ts, otherwise
-// yarn test-devtools will fail.
-/** @typedef {import('./dom.js').DOM} DOM_ */
+/** @typedef {import('./dom.js').DOM} DOM */
 
 /* eslint-disable max-len */
 
 
 /**
- * @param {DOM_} dom
+ * @param {DOM} dom
  */
 function create3pFilterComponent(dom) {
   const el0 = dom.document().createDocumentFragment();
@@ -32,7 +30,7 @@ function create3pFilterComponent(dom) {
 }
 
 /**
- * @param {DOM_} dom
+ * @param {DOM} dom
  */
 function createAuditComponent(dom) {
   const el0 = dom.document().createDocumentFragment();
@@ -57,7 +55,7 @@ function createAuditComponent(dom) {
 }
 
 /**
- * @param {DOM_} dom
+ * @param {DOM} dom
  */
 function createCategoryHeaderComponent(dom) {
   const el0 = dom.document().createDocumentFragment();
@@ -72,7 +70,7 @@ function createCategoryHeaderComponent(dom) {
 }
 
 /**
- * @param {DOM_} dom
+ * @param {DOM} dom
  */
 function createChevronComponent(dom) {
   const el0 = dom.document().createDocumentFragment();
@@ -90,7 +88,7 @@ function createChevronComponent(dom) {
 }
 
 /**
- * @param {DOM_} dom
+ * @param {DOM} dom
  */
 function createClumpComponent(dom) {
   const el0 = dom.document().createDocumentFragment();
@@ -109,7 +107,7 @@ function createClumpComponent(dom) {
 }
 
 /**
- * @param {DOM_} dom
+ * @param {DOM} dom
  */
 function createCrcComponent(dom) {
   const el0 = dom.document().createDocumentFragment();
@@ -131,7 +129,7 @@ function createCrcComponent(dom) {
 }
 
 /**
- * @param {DOM_} dom
+ * @param {DOM} dom
  */
 function createCrcChainComponent(dom) {
   const el0 = dom.document().createDocumentFragment();
@@ -144,7 +142,7 @@ function createCrcChainComponent(dom) {
 }
 
 /**
- * @param {DOM_} dom
+ * @param {DOM} dom
  */
 function createElementScreenshotComponent(dom) {
   const el0 = dom.document().createDocumentFragment();
@@ -169,7 +167,7 @@ function createElementScreenshotComponent(dom) {
 }
 
 /**
- * @param {DOM_} dom
+ * @param {DOM} dom
  */
 function createEnvItemComponent(dom) {
   const el0 = dom.document().createDocumentFragment();
@@ -182,7 +180,7 @@ function createEnvItemComponent(dom) {
 }
 
 /**
- * @param {DOM_} dom
+ * @param {DOM} dom
  */
 function createFooterComponent(dom) {
   const el0 = dom.document().createDocumentFragment();
@@ -212,7 +210,7 @@ function createFooterComponent(dom) {
 }
 
 /**
- * @param {DOM_} dom
+ * @param {DOM} dom
  */
 function createGaugeComponent(dom) {
   const el0 = dom.document().createDocumentFragment();
@@ -241,7 +239,7 @@ function createGaugeComponent(dom) {
 }
 
 /**
- * @param {DOM_} dom
+ * @param {DOM} dom
  */
 function createGaugePwaComponent(dom) {
   const el0 = dom.document().createDocumentFragment();
@@ -342,7 +340,7 @@ function createGaugePwaComponent(dom) {
 }
 
 /**
- * @param {DOM_} dom
+ * @param {DOM} dom
  */
 function createHeadingComponent(dom) {
   const el0 = dom.document().createDocumentFragment();
@@ -357,7 +355,7 @@ function createHeadingComponent(dom) {
 }
 
 /**
- * @param {DOM_} dom
+ * @param {DOM} dom
  */
 function createMetricComponent(dom) {
   const el0 = dom.document().createDocumentFragment();
@@ -373,7 +371,7 @@ function createMetricComponent(dom) {
 }
 
 /**
- * @param {DOM_} dom
+ * @param {DOM} dom
  */
 function createMetricsToggleComponent(dom) {
   const el0 = dom.document().createDocumentFragment();
@@ -411,7 +409,7 @@ function createMetricsToggleComponent(dom) {
 }
 
 /**
- * @param {DOM_} dom
+ * @param {DOM} dom
  */
 function createOpportunityComponent(dom) {
   const el0 = dom.document().createDocumentFragment();
@@ -445,7 +443,7 @@ function createOpportunityComponent(dom) {
 }
 
 /**
- * @param {DOM_} dom
+ * @param {DOM} dom
  */
 function createOpportunityHeaderComponent(dom) {
   const el0 = dom.document().createDocumentFragment();
@@ -458,7 +456,7 @@ function createOpportunityHeaderComponent(dom) {
 }
 
 /**
- * @param {DOM_} dom
+ * @param {DOM} dom
  */
 function createScorescaleComponent(dom) {
   const el0 = dom.document().createDocumentFragment();
@@ -475,7 +473,7 @@ function createScorescaleComponent(dom) {
 }
 
 /**
- * @param {DOM_} dom
+ * @param {DOM} dom
  */
 function createScoresWrapperComponent(dom) {
   const el0 = dom.document().createDocumentFragment();
@@ -495,7 +493,7 @@ function createScoresWrapperComponent(dom) {
 }
 
 /**
- * @param {DOM_} dom
+ * @param {DOM} dom
  */
 function createSnippetComponent(dom) {
   const el0 = dom.document().createDocumentFragment();
@@ -508,7 +506,7 @@ function createSnippetComponent(dom) {
 }
 
 /**
- * @param {DOM_} dom
+ * @param {DOM} dom
  */
 function createSnippetContentComponent(dom) {
   const el0 = dom.document().createDocumentFragment();
@@ -520,7 +518,7 @@ function createSnippetContentComponent(dom) {
 }
 
 /**
- * @param {DOM_} dom
+ * @param {DOM} dom
  */
 function createSnippetHeaderComponent(dom) {
   const el0 = dom.document().createDocumentFragment();
@@ -537,7 +535,7 @@ function createSnippetHeaderComponent(dom) {
 }
 
 /**
- * @param {DOM_} dom
+ * @param {DOM} dom
  */
 function createSnippetLineComponent(dom) {
   const el0 = dom.document().createDocumentFragment();
@@ -551,7 +549,7 @@ function createSnippetLineComponent(dom) {
 }
 
 /**
- * @param {DOM_} dom
+ * @param {DOM} dom
  */
 function createTopbarComponent(dom) {
   const el0 = dom.document().createDocumentFragment();
@@ -741,7 +739,7 @@ function createTopbarComponent(dom) {
 }
 
 /**
- * @param {DOM_} dom
+ * @param {DOM} dom
  */
 function createWarningsToplevelComponent(dom) {
   const el0 = dom.document().createDocumentFragment();
@@ -756,7 +754,7 @@ function createWarningsToplevelComponent(dom) {
 
 /** @typedef {'3pFilter'|'audit'|'categoryHeader'|'chevron'|'clump'|'crc'|'crcChain'|'elementScreenshot'|'envItem'|'footer'|'gauge'|'gaugePwa'|'heading'|'metric'|'metricsToggle'|'opportunity'|'opportunityHeader'|'scorescale'|'scoresWrapper'|'snippet'|'snippetContent'|'snippetHeader'|'snippetLine'|'topbar'|'warningsToplevel'} ComponentName */
 /**
- * @param {DOM_} dom
+ * @param {DOM} dom
  * @param {ComponentName} componentName
  * @return {DocumentFragment}
  */