Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Merged
merged 2 commits into from
Aug 18, 2021
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
1d4092f
report: document typedef/import bug workaround
connorjclark Aug 18, 2021
4f0c426
simpler
connorjclark Aug 18, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 3 additions & 5 deletions build/build-report-components.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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};
Expand All @@ -176,7 +176,7 @@ function makeGenericCreateComponentFunctionCode(compiledTemplates) {
const jsdoc = `
/** @typedef {${paramType}} ComponentName */
/**
* @param {DOM_} dom
* @param {DOM} dom
* @param {ComponentName} componentName
* @return {DocumentFragment}
*/`;
Expand All @@ -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 */

Expand Down
4 changes: 4 additions & 0 deletions lighthouse-core/scripts/roll-to-devtools.sh
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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/"
Expand Down
1 change: 1 addition & 0 deletions report/clients/bundle.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
56 changes: 27 additions & 29 deletions report/renderer/components.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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();
Expand All @@ -32,7 +30,7 @@ function create3pFilterComponent(dom) {
}

/**
* @param {DOM_} dom
* @param {DOM} dom
*/
function createAuditComponent(dom) {
const el0 = dom.document().createDocumentFragment();
Expand All @@ -57,7 +55,7 @@ function createAuditComponent(dom) {
}

/**
* @param {DOM_} dom
* @param {DOM} dom
*/
function createCategoryHeaderComponent(dom) {
const el0 = dom.document().createDocumentFragment();
Expand All @@ -72,7 +70,7 @@ function createCategoryHeaderComponent(dom) {
}

/**
* @param {DOM_} dom
* @param {DOM} dom
*/
function createChevronComponent(dom) {
const el0 = dom.document().createDocumentFragment();
Expand All @@ -90,7 +88,7 @@ function createChevronComponent(dom) {
}

/**
* @param {DOM_} dom
* @param {DOM} dom
*/
function createClumpComponent(dom) {
const el0 = dom.document().createDocumentFragment();
Expand All @@ -109,7 +107,7 @@ function createClumpComponent(dom) {
}

/**
* @param {DOM_} dom
* @param {DOM} dom
*/
function createCrcComponent(dom) {
const el0 = dom.document().createDocumentFragment();
Expand All @@ -131,7 +129,7 @@ function createCrcComponent(dom) {
}

/**
* @param {DOM_} dom
* @param {DOM} dom
*/
function createCrcChainComponent(dom) {
const el0 = dom.document().createDocumentFragment();
Expand All @@ -144,7 +142,7 @@ function createCrcChainComponent(dom) {
}

/**
* @param {DOM_} dom
* @param {DOM} dom
*/
function createElementScreenshotComponent(dom) {
const el0 = dom.document().createDocumentFragment();
Expand All @@ -169,7 +167,7 @@ function createElementScreenshotComponent(dom) {
}

/**
* @param {DOM_} dom
* @param {DOM} dom
*/
function createEnvItemComponent(dom) {
const el0 = dom.document().createDocumentFragment();
Expand All @@ -182,7 +180,7 @@ function createEnvItemComponent(dom) {
}

/**
* @param {DOM_} dom
* @param {DOM} dom
*/
function createFooterComponent(dom) {
const el0 = dom.document().createDocumentFragment();
Expand Down Expand Up @@ -212,7 +210,7 @@ function createFooterComponent(dom) {
}

/**
* @param {DOM_} dom
* @param {DOM} dom
*/
function createGaugeComponent(dom) {
const el0 = dom.document().createDocumentFragment();
Expand Down Expand Up @@ -241,7 +239,7 @@ function createGaugeComponent(dom) {
}

/**
* @param {DOM_} dom
* @param {DOM} dom
*/
function createGaugePwaComponent(dom) {
const el0 = dom.document().createDocumentFragment();
Expand Down Expand Up @@ -342,7 +340,7 @@ function createGaugePwaComponent(dom) {
}

/**
* @param {DOM_} dom
* @param {DOM} dom
*/
function createHeadingComponent(dom) {
const el0 = dom.document().createDocumentFragment();
Expand All @@ -357,7 +355,7 @@ function createHeadingComponent(dom) {
}

/**
* @param {DOM_} dom
* @param {DOM} dom
*/
function createMetricComponent(dom) {
const el0 = dom.document().createDocumentFragment();
Expand All @@ -373,7 +371,7 @@ function createMetricComponent(dom) {
}

/**
* @param {DOM_} dom
* @param {DOM} dom
*/
function createMetricsToggleComponent(dom) {
const el0 = dom.document().createDocumentFragment();
Expand Down Expand Up @@ -411,7 +409,7 @@ function createMetricsToggleComponent(dom) {
}

/**
* @param {DOM_} dom
* @param {DOM} dom
*/
function createOpportunityComponent(dom) {
const el0 = dom.document().createDocumentFragment();
Expand Down Expand Up @@ -445,7 +443,7 @@ function createOpportunityComponent(dom) {
}

/**
* @param {DOM_} dom
* @param {DOM} dom
*/
function createOpportunityHeaderComponent(dom) {
const el0 = dom.document().createDocumentFragment();
Expand All @@ -458,7 +456,7 @@ function createOpportunityHeaderComponent(dom) {
}

/**
* @param {DOM_} dom
* @param {DOM} dom
*/
function createScorescaleComponent(dom) {
const el0 = dom.document().createDocumentFragment();
Expand All @@ -475,7 +473,7 @@ function createScorescaleComponent(dom) {
}

/**
* @param {DOM_} dom
* @param {DOM} dom
*/
function createScoresWrapperComponent(dom) {
const el0 = dom.document().createDocumentFragment();
Expand All @@ -495,7 +493,7 @@ function createScoresWrapperComponent(dom) {
}

/**
* @param {DOM_} dom
* @param {DOM} dom
*/
function createSnippetComponent(dom) {
const el0 = dom.document().createDocumentFragment();
Expand All @@ -508,7 +506,7 @@ function createSnippetComponent(dom) {
}

/**
* @param {DOM_} dom
* @param {DOM} dom
*/
function createSnippetContentComponent(dom) {
const el0 = dom.document().createDocumentFragment();
Expand All @@ -520,7 +518,7 @@ function createSnippetContentComponent(dom) {
}

/**
* @param {DOM_} dom
* @param {DOM} dom
*/
function createSnippetHeaderComponent(dom) {
const el0 = dom.document().createDocumentFragment();
Expand All @@ -537,7 +535,7 @@ function createSnippetHeaderComponent(dom) {
}

/**
* @param {DOM_} dom
* @param {DOM} dom
*/
function createSnippetLineComponent(dom) {
const el0 = dom.document().createDocumentFragment();
Expand All @@ -551,7 +549,7 @@ function createSnippetLineComponent(dom) {
}

/**
* @param {DOM_} dom
* @param {DOM} dom
*/
function createTopbarComponent(dom) {
const el0 = dom.document().createDocumentFragment();
Expand Down Expand Up @@ -741,7 +739,7 @@ function createTopbarComponent(dom) {
}

/**
* @param {DOM_} dom
* @param {DOM} dom
*/
function createWarningsToplevelComponent(dom) {
const el0 = dom.document().createDocumentFragment();
Expand All @@ -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}
*/
Expand Down