lighthouse 9.0.0-dev.20211117 → 9.0.0-dev.20211121

package/dist/report/standalone.js

@@ -47,7 +47,7 @@ class s{constructor(e,t){this._document=e,this._lighthouseChannel="unknown",this
    * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
    * See the License for the specific language governing permissions and
    * limitations under the License.
-   */class c{constructor(e,t){this.dom=e,this.detailsRenderer=t}get _clumpTitles(){return{warning:l.i18n.strings.warningAuditsGroupTitle,manual:l.i18n.strings.manualAuditsGroupTitle,passed:l.i18n.strings.passedAuditsGroupTitle,notApplicable:l.i18n.strings.notApplicableAuditsGroupTitle}}renderAudit(e){const t=this.dom.createComponent("audit");return this.populateAuditValues(e,t)}populateAuditValues(e,t){const n=l.i18n.strings,r=this.dom.find(".lh-audit",t);r.id=e.result.id;const o=e.result.scoreDisplayMode;e.result.displayValue&&(this.dom.find(".lh-audit__display-text",r).textContent=e.result.displayValue);const i=this.dom.find(".lh-audit__title",r);i.appendChild(this.dom.convertMarkdownCodeSnippets(e.result.title));const a=this.dom.find(".lh-audit__description",r);a.appendChild(this.dom.convertMarkdownLinkSnippets(e.result.description));for(const t of e.relevantMetrics||[]){const e=this.dom.createChildOf(a,"span","lh-audit__adorn");e.title=`Relevant to ${t.result.title}`,e.textContent=t.acronym||t.id}e.stackPacks&&e.stackPacks.forEach((e=>{const t=this.dom.createElement("div");t.classList.add("lh-audit__stackpack");const n=this.dom.createElement("img");n.classList.add("lh-audit__stackpack__img"),n.src=e.iconDataURL,n.alt=e.title,t.appendChild(n),t.appendChild(this.dom.convertMarkdownLinkSnippets(e.description)),this.dom.find(".lh-audit__stackpacks",r).appendChild(t)}));const s=this.dom.find("details",r);if(e.result.details){const t=this.detailsRenderer.render(e.result.details);t&&(t.classList.add("lh-details"),s.appendChild(t))}if(this.dom.find(".lh-chevron-container",r).appendChild(this._createChevron()),this._setRatingClass(r,e.result.score,o),"error"===e.result.scoreDisplayMode){r.classList.add("lh-audit--error");const t=this.dom.find(".lh-audit__display-text",r);t.textContent=n.errorLabel,t.classList.add("lh-tooltip-boundary");this.dom.createChildOf(t,"div","lh-tooltip lh-tooltip--error").textContent=e.result.errorMessage||n.errorMissingAuditInfo}else if(e.result.explanation){this.dom.createChildOf(i,"div","lh-audit-explanation").textContent=e.result.explanation}const c=e.result.warnings;if(!c||0===c.length)return r;const d=this.dom.find("summary",s),h=this.dom.createChildOf(d,"div","lh-warnings");if(this.dom.createChildOf(h,"span").textContent=n.warningHeader,1===c.length)h.appendChild(this.dom.createTextNode(c.join("")));else{const e=this.dom.createChildOf(h,"ul");for(const t of c){this.dom.createChildOf(e,"li").textContent=t}}return r}injectFinalScreenshot(e,t,n){const r=t["final-screenshot"];if(!r||"error"===r.scoreDisplayMode)return null;if(!r.details||"screenshot"!==r.details.type)return null;const o=this.dom.createElement("img","lh-final-ss-image"),i=r.details.data;o.src=i,o.alt=r.title;const a=this.dom.find(".lh-category .lh-category-header",e),l=this.dom.createElement("div","lh-category-headercol"),s=this.dom.createElement("div","lh-category-headercol lh-category-headercol--separator"),c=this.dom.createElement("div","lh-category-headercol");l.append(...a.childNodes),l.append(n),c.append(o),a.append(l,s,c),a.classList.add("lh-category-header__finalscreenshot")}_createChevron(){const e=this.dom.createComponent("chevron");return this.dom.find("svg.lh-chevron",e)}_setRatingClass(e,t,n){const r=l.calculateRating(t,n);return e.classList.add(`lh-audit--${n.toLowerCase()}`),"informative"!==n&&e.classList.add(`lh-audit--${r}`),e}renderCategoryHeader(e,t,n){const r=this.dom.createComponent("categoryHeader"),o=this.dom.find(".lh-score__gauge",r),i=this.renderCategoryScore(e,t,n);if(o.appendChild(i),e.description){const t=this.dom.convertMarkdownLinkSnippets(e.description);this.dom.find(".lh-category-header__description",r).appendChild(t)}return r}renderAuditGroup(e){const t=this.dom.createElement("div","lh-audit-group"),n=this.dom.createElement("div","lh-audit-group__header");this.dom.createChildOf(n,"span","lh-audit-group__title").textContent=e.title,t.appendChild(n);let r=null;return e.description&&(r=this.dom.convertMarkdownLinkSnippets(e.description),r.classList.add("lh-audit-group__description","lh-audit-group__footer"),t.appendChild(r)),[t,r]}_renderGroupedAudits(e,t){const n=new Map,r="NotAGroup";n.set(r,[]);for(const t of e){const e=t.group||r,o=n.get(e)||[];o.push(t),n.set(e,o)}const o=[];for(const[e,i]of n){if(e===r){for(const e of i)o.push(this.renderAudit(e));continue}const n=t[e],[a,l]=this.renderAuditGroup(n);for(const e of i)a.insertBefore(this.renderAudit(e),l);a.classList.add(`lh-audit-group--${e}`),o.push(a)}return o}renderUnexpandableClump(e,t){const n=this.dom.createElement("div");return this._renderGroupedAudits(e,t).forEach((e=>n.appendChild(e))),n}renderClump(e,{auditRefs:t,description:n}){const r=this.dom.createComponent("clump"),o=this.dom.find(".lh-clump",r);"warning"===e&&o.setAttribute("open","");const i=this.dom.find(".lh-audit-group__header",o),a=this._clumpTitles[e];this.dom.find(".lh-audit-group__title",i).textContent=a;this.dom.find(".lh-audit-group__itemcount",o).textContent=`(${t.length})`;const s=t.map(this.renderAudit.bind(this));o.append(...s);const c=this.dom.find(".lh-audit-group",r);if(n){const e=this.dom.convertMarkdownLinkSnippets(n);e.classList.add("lh-audit-group__description","lh-audit-group__footer"),c.appendChild(e)}return this.dom.find(".lh-clump-toggletext--show",c).textContent=l.i18n.strings.show,this.dom.find(".lh-clump-toggletext--hide",c).textContent=l.i18n.strings.hide,o.classList.add(`lh-clump--${e.toLowerCase()}`),c}renderCategoryScore(e,t,n){return n&&l.shouldDisplayAsFraction(n.gatherMode)?this.renderCategoryFraction(e):this.renderScoreGauge(e,t)}renderScoreGauge(e,t){const n=this.dom.createComponent("gauge"),r=this.dom.find("a.lh-gauge__wrapper",n);l.isPluginCategory(e.id)&&r.classList.add("lh-gauge__wrapper--plugin");const o=Number(e.score),i=this.dom.find(".lh-gauge",n),a=this.dom.find("circle.lh-gauge-arc",i);a&&this._setGaugeArc(a,o);const s=Math.round(100*o),c=this.dom.find("div.lh-gauge__percentage",n);return c.textContent=s.toString(),null===e.score&&(c.textContent="?",c.title=l.i18n.strings.errorLabel),0===e.auditRefs.length||this.hasApplicableAudits(e)?r.classList.add(`lh-gauge__wrapper--${l.calculateRating(e.score)}`):(r.classList.add("lh-gauge__wrapper--not-applicable"),c.textContent="-",c.title=l.i18n.strings.notApplicableAuditsGroupTitle),this.dom.find(".lh-gauge__label",n).textContent=e.title,n}renderCategoryFraction(e){const t=this.dom.createComponent("fraction"),n=this.dom.find("a.lh-fraction__wrapper",t),{numPassed:r,numPassableAudits:o,totalWeight:i}=l.calculateCategoryFraction(e),a=r/o,s=this.dom.find(".lh-fraction__content",t),c=this.dom.createElement("span");c.textContent=`${r}/${o}`,s.appendChild(c);let d=l.calculateRating(a);return 0===i&&(d="null"),n.classList.add(`lh-fraction__wrapper--${d}`),this.dom.find(".lh-fraction__label",t).textContent=e.title,t}hasApplicableAudits(e){return e.auditRefs.some((e=>"notApplicable"!==e.result.scoreDisplayMode))}_setGaugeArc(e,t){const n=2*Math.PI*Number(e.getAttribute("r")),r=Number(e.getAttribute("stroke-width")),o=.25*r/n;e.style.transform=`rotate(${360*o-90}deg)`;let i=t*n-r/2;0===t&&(e.style.opacity="0"),1===t&&(i=n),e.style.strokeDasharray=`${Math.max(i,0)} ${n}`}_auditHasWarning(e){return Boolean(e.result.warnings&&e.result.warnings.length)}_getClumpIdForAuditRef(e){const t=e.result.scoreDisplayMode;return"manual"===t||"notApplicable"===t?t:l.showAsPassed(e.result)?this._auditHasWarning(e)?"warning":"passed":"failed"}render(e,t={},n){const r=this.dom.createElement("div","lh-category");r.id=e.id,r.appendChild(this.renderCategoryHeader(e,t,n));const o=new Map;o.set("failed",[]),o.set("warning",[]),o.set("manual",[]),o.set("passed",[]),o.set("notApplicable",[]);for(const t of e.auditRefs){const e=this._getClumpIdForAuditRef(t),n=o.get(e);n.push(t),o.set(e,n)}for(const e of o.values())e.sort(((e,t)=>t.weight-e.weight));for(const[n,i]of o){if(0===i.length)continue;if("failed"===n){const e=this.renderUnexpandableClump(i,t);e.classList.add("lh-clump--failed"),r.appendChild(e);continue}const o="manual"===n?e.manualDescription:void 0,a=this.renderClump(n,{auditRefs:i,description:o});r.appendChild(a)}return r}}
+   */class c{constructor(e,t){this.dom=e,this.detailsRenderer=t}get _clumpTitles(){return{warning:l.i18n.strings.warningAuditsGroupTitle,manual:l.i18n.strings.manualAuditsGroupTitle,passed:l.i18n.strings.passedAuditsGroupTitle,notApplicable:l.i18n.strings.notApplicableAuditsGroupTitle}}renderAudit(e){const t=this.dom.createComponent("audit");return this.populateAuditValues(e,t)}populateAuditValues(e,t){const n=l.i18n.strings,r=this.dom.find(".lh-audit",t);r.id=e.result.id;const o=e.result.scoreDisplayMode;e.result.displayValue&&(this.dom.find(".lh-audit__display-text",r).textContent=e.result.displayValue);const i=this.dom.find(".lh-audit__title",r);i.appendChild(this.dom.convertMarkdownCodeSnippets(e.result.title));const a=this.dom.find(".lh-audit__description",r);a.appendChild(this.dom.convertMarkdownLinkSnippets(e.result.description));for(const t of e.relevantMetrics||[]){const e=this.dom.createChildOf(a,"span","lh-audit__adorn");e.title=`Relevant to ${t.result.title}`,e.textContent=t.acronym||t.id}e.stackPacks&&e.stackPacks.forEach((e=>{const t=this.dom.createElement("div");t.classList.add("lh-audit__stackpack");const n=this.dom.createElement("img");n.classList.add("lh-audit__stackpack__img"),n.src=e.iconDataURL,n.alt=e.title,t.appendChild(n),t.appendChild(this.dom.convertMarkdownLinkSnippets(e.description)),this.dom.find(".lh-audit__stackpacks",r).appendChild(t)}));const s=this.dom.find("details",r);if(e.result.details){const t=this.detailsRenderer.render(e.result.details);t&&(t.classList.add("lh-details"),s.appendChild(t))}if(this.dom.find(".lh-chevron-container",r).appendChild(this._createChevron()),this._setRatingClass(r,e.result.score,o),"error"===e.result.scoreDisplayMode){r.classList.add("lh-audit--error");const t=this.dom.find(".lh-audit__display-text",r);t.textContent=n.errorLabel,t.classList.add("lh-tooltip-boundary");this.dom.createChildOf(t,"div","lh-tooltip lh-tooltip--error").textContent=e.result.errorMessage||n.errorMissingAuditInfo}else if(e.result.explanation){this.dom.createChildOf(i,"div","lh-audit-explanation").textContent=e.result.explanation}const c=e.result.warnings;if(!c||0===c.length)return r;const d=this.dom.find("summary",s),h=this.dom.createChildOf(d,"div","lh-warnings");if(this.dom.createChildOf(h,"span").textContent=n.warningHeader,1===c.length)h.appendChild(this.dom.createTextNode(c.join("")));else{const e=this.dom.createChildOf(h,"ul");for(const t of c){this.dom.createChildOf(e,"li").textContent=t}}return r}injectFinalScreenshot(e,t,n){const r=t["final-screenshot"];if(!r||"error"===r.scoreDisplayMode)return null;if(!r.details||"screenshot"!==r.details.type)return null;const o=this.dom.createElement("img","lh-final-ss-image"),i=r.details.data;o.src=i,o.alt=r.title;const a=this.dom.find(".lh-category .lh-category-header",e),l=this.dom.createElement("div","lh-category-headercol"),s=this.dom.createElement("div","lh-category-headercol lh-category-headercol--separator"),c=this.dom.createElement("div","lh-category-headercol");l.append(...a.childNodes),l.append(n),c.append(o),a.append(l,s,c),a.classList.add("lh-category-header__finalscreenshot")}_createChevron(){const e=this.dom.createComponent("chevron");return this.dom.find("svg.lh-chevron",e)}_setRatingClass(e,t,n){const r=l.calculateRating(t,n);return e.classList.add(`lh-audit--${n.toLowerCase()}`),"informative"!==n&&e.classList.add(`lh-audit--${r}`),e}renderCategoryHeader(e,t,n){const r=this.dom.createComponent("categoryHeader"),o=this.dom.find(".lh-score__gauge",r),i=this.renderCategoryScore(e,t,n);if(o.appendChild(i),e.description){const t=this.dom.convertMarkdownLinkSnippets(e.description);this.dom.find(".lh-category-header__description",r).appendChild(t)}return r}renderAuditGroup(e){const t=this.dom.createElement("div","lh-audit-group"),n=this.dom.createElement("div","lh-audit-group__header");this.dom.createChildOf(n,"span","lh-audit-group__title").textContent=e.title,t.appendChild(n);let r=null;return e.description&&(r=this.dom.convertMarkdownLinkSnippets(e.description),r.classList.add("lh-audit-group__description","lh-audit-group__footer"),t.appendChild(r)),[t,r]}_renderGroupedAudits(e,t){const n=new Map,r="NotAGroup";n.set(r,[]);for(const t of e){const e=t.group||r,o=n.get(e)||[];o.push(t),n.set(e,o)}const o=[];for(const[e,i]of n){if(e===r){for(const e of i)o.push(this.renderAudit(e));continue}const n=t[e],[a,l]=this.renderAuditGroup(n);for(const e of i)a.insertBefore(this.renderAudit(e),l);a.classList.add(`lh-audit-group--${e}`),o.push(a)}return o}renderUnexpandableClump(e,t){const n=this.dom.createElement("div");return this._renderGroupedAudits(e,t).forEach((e=>n.appendChild(e))),n}renderClump(e,{auditRefs:t,description:n}){const r=this.dom.createComponent("clump"),o=this.dom.find(".lh-clump",r);"warning"===e&&o.setAttribute("open","");const i=this.dom.find(".lh-audit-group__header",o),a=this._clumpTitles[e];this.dom.find(".lh-audit-group__title",i).textContent=a;this.dom.find(".lh-audit-group__itemcount",o).textContent=`(${t.length})`;const s=t.map(this.renderAudit.bind(this));o.append(...s);const c=this.dom.find(".lh-audit-group",r);if(n){const e=this.dom.convertMarkdownLinkSnippets(n);e.classList.add("lh-audit-group__description","lh-audit-group__footer"),c.appendChild(e)}return this.dom.find(".lh-clump-toggletext--show",c).textContent=l.i18n.strings.show,this.dom.find(".lh-clump-toggletext--hide",c).textContent=l.i18n.strings.hide,o.classList.add(`lh-clump--${e.toLowerCase()}`),c}renderCategoryScore(e,t,n){let r;if(r=n&&l.shouldDisplayAsFraction(n.gatherMode)?this.renderCategoryFraction(e):this.renderScoreGauge(e,t),n?.omitLabel){this.dom.find(".lh-gauge__label,.lh-fraction__label",r).remove()}if(n?.onPageAnchorRendered){const e=this.dom.find("a",r);n.onPageAnchorRendered(e)}return r}renderScoreGauge(e,t){const n=this.dom.createComponent("gauge"),r=this.dom.find("a.lh-gauge__wrapper",n);l.isPluginCategory(e.id)&&r.classList.add("lh-gauge__wrapper--plugin");const o=Number(e.score),i=this.dom.find(".lh-gauge",n),a=this.dom.find("circle.lh-gauge-arc",i);a&&this._setGaugeArc(a,o);const s=Math.round(100*o),c=this.dom.find("div.lh-gauge__percentage",n);return c.textContent=s.toString(),null===e.score&&(c.textContent="?",c.title=l.i18n.strings.errorLabel),0===e.auditRefs.length||this.hasApplicableAudits(e)?r.classList.add(`lh-gauge__wrapper--${l.calculateRating(e.score)}`):(r.classList.add("lh-gauge__wrapper--not-applicable"),c.textContent="-",c.title=l.i18n.strings.notApplicableAuditsGroupTitle),this.dom.find(".lh-gauge__label",n).textContent=e.title,n}renderCategoryFraction(e){const t=this.dom.createComponent("fraction"),n=this.dom.find("a.lh-fraction__wrapper",t),{numPassed:r,numPassableAudits:o,totalWeight:i}=l.calculateCategoryFraction(e),a=r/o,s=this.dom.find(".lh-fraction__content",t),c=this.dom.createElement("span");c.textContent=`${r}/${o}`,s.appendChild(c);let d=l.calculateRating(a);return 0===i&&(d="null"),n.classList.add(`lh-fraction__wrapper--${d}`),this.dom.find(".lh-fraction__label",t).textContent=e.title,t}hasApplicableAudits(e){return e.auditRefs.some((e=>"notApplicable"!==e.result.scoreDisplayMode))}_setGaugeArc(e,t){const n=2*Math.PI*Number(e.getAttribute("r")),r=Number(e.getAttribute("stroke-width")),o=.25*r/n;e.style.transform=`rotate(${360*o-90}deg)`;let i=t*n-r/2;0===t&&(e.style.opacity="0"),1===t&&(i=n),e.style.strokeDasharray=`${Math.max(i,0)} ${n}`}_auditHasWarning(e){return Boolean(e.result.warnings&&e.result.warnings.length)}_getClumpIdForAuditRef(e){const t=e.result.scoreDisplayMode;return"manual"===t||"notApplicable"===t?t:l.showAsPassed(e.result)?this._auditHasWarning(e)?"warning":"passed":"failed"}render(e,t={},n){const r=this.dom.createElement("div","lh-category");r.id=e.id,r.appendChild(this.renderCategoryHeader(e,t,n));const o=new Map;o.set("failed",[]),o.set("warning",[]),o.set("manual",[]),o.set("passed",[]),o.set("notApplicable",[]);for(const t of e.auditRefs){const e=this._getClumpIdForAuditRef(t),n=o.get(e);n.push(t),o.set(e,n)}for(const e of o.values())e.sort(((e,t)=>t.weight-e.weight));for(const[n,i]of o){if(0===i.length)continue;if("failed"===n){const e=this.renderUnexpandableClump(i,t);e.classList.add("lh-clump--failed"),r.appendChild(e);continue}const o="manual"===n?e.manualDescription:void 0,a=this.renderClump(n,{auditRefs:i,description:o});r.appendChild(a)}return r}}
 /**
    * @license
    * Copyright 2017 The Lighthouse Authors. All Rights Reserved.
@@ -145,7 +145,7 @@ class s{constructor(e,t){this._document=e,this._lighthouseChannel="unknown",this
    *
    * Dummy text for ensuring report robustness: <\/script> pre$`post %%LIGHTHOUSE_JSON%%
    * (this is handled by terser)
-   */class N{constructor(e){this._dom=e,this._opts={}}renderReport(e,t,n){if(!this._dom.rootEl&&t){console.warn("Please adopt the new report API in renderer/api.js.");const e=t.closest(".lh-root");e?this._dom.rootEl=e:(t.classList.add("lh-root","lh-vars"),this._dom.rootEl=t)}else this._dom.rootEl&&t&&(this._dom.rootEl=t);n&&(this._opts=n),this._dom.setLighthouseChannel(e.configSettings.channel||"unknown");const r=l.prepareReportResult(e);return this._dom.rootEl.textContent="",this._dom.rootEl.appendChild(this._renderReport(r)),this._dom.rootEl}_renderReportTopbar(e){const t=this._dom.createComponent("topbar"),n=this._dom.find("a.lh-topbar__url",t);return n.textContent=e.finalUrl,n.title=e.finalUrl,this._dom.safelySetHref(n,e.finalUrl),t}_renderReportHeader(){const e=this._dom.createComponent("heading"),t=this._dom.createComponent("scoresWrapper");return this._dom.find(".lh-scores-wrapper-placeholder",e).replaceWith(t),e}_renderReportFooter(e){const t=this._dom.createComponent("footer");return this._renderMetaBlock(e,t),this._dom.find(".lh-footer__version_issue",t).textContent=l.i18n.strings.footerIssue,this._dom.find(".lh-footer__version",t).textContent=e.lighthouseVersion,t}_renderMetaBlock(e,t){const n=l.getEmulationDescriptions(e.configSettings||{}),r=e.userAgent.match(/(\w*Chrome\/[\d.]+)/),o=Array.isArray(r)?r[1].replace("/"," ").replace("Chrome","Chromium"):"Chromium",i=e.configSettings.channel,a=e.environment.benchmarkIndex.toFixed(0),s=e.environment.credits?.["axe-core"],c=[["date",`Captured at ${l.i18n.formatDateTime(e.fetchTime)}`],["devices",`${n.deviceEmulation} with Lighthouse ${e.lighthouseVersion}`,`${l.i18n.strings.runtimeSettingsBenchmark}: ${a}\n${l.i18n.strings.runtimeSettingsCPUThrottling}: ${n.cpuThrottling}`+(s?`\n${l.i18n.strings.runtimeSettingsAxeVersion}: ${s}`:"")],["samples-one",l.i18n.strings.runtimeSingleLoad,l.i18n.strings.runtimeSingleLoadTooltip],["stopwatch",l.i18n.strings.runtimeAnalysisWindow],["networkspeed",`${n.summary}`,`${l.i18n.strings.runtimeSettingsNetworkThrottling}: ${n.networkThrottling}`],["chrome",`Using ${o}`+(i?` with ${i}`:""),`${l.i18n.strings.runtimeSettingsUANetwork}: "${e.environment.networkUserAgent}"`]],d=this._dom.find(".lh-meta__items",t);for(const[e,t,n]of c){const r=this._dom.createChildOf(d,"li","lh-meta__item");if(r.textContent=t,n){r.classList.add("lh-tooltip-boundary");this._dom.createChildOf(r,"div","lh-tooltip").textContent=n}r.classList.add("lh-report-icon",`lh-report-icon--${e}`)}}_renderReportWarnings(e){if(!e.runWarnings||0===e.runWarnings.length)return this._dom.createElement("div");const t=this._dom.createComponent("warningsToplevel");this._dom.find(".lh-warnings__msg",t).textContent=l.i18n.strings.toplevelWarningsMessage;const n=this._dom.find("ul",t);for(const t of e.runWarnings){n.appendChild(this._dom.createElement("li")).appendChild(this._dom.convertMarkdownLinkSnippets(t))}return t}_renderScoreGauges(e,t,n){const r=[],o=[],i=[];for(const a of Object.values(e.categories)){const s=n[a.id]||t,c=s.renderCategoryScore(a,e.categoryGroups||{},{gatherMode:e.gatherMode}),d=this._dom.find("a.lh-gauge__wrapper, a.lh-fraction__wrapper",c);d&&(this._dom.safelySetHref(d,`#${a.id}`),d.addEventListener("click",(e=>{if(!d.matches('[href^="#"]'))return;const t=d.getAttribute("href"),n=this._dom.rootEl;if(!t||!n)return;const r=this._dom.find(t,n);e.preventDefault(),r.scrollIntoView()}))),l.isPluginCategory(a.id)?i.push(c):s.renderCategoryScore===t.renderCategoryScore?r.push(c):o.push(c)}return[...r,...o,...i]}_renderReport(e){const t=new L(e.configSettings.locale,{...l.UIStrings,...e.i18n.rendererFormattedStrings});l.i18n=t,l.reportJson=e;const n=e.audits["full-page-screenshot"]&&e.audits["full-page-screenshot"].details&&"full-page-screenshot"===e.audits["full-page-screenshot"].details.type?e.audits["full-page-screenshot"].details:void 0,r=new z(this._dom,{fullPageScreenshot:n}),o=new c(this._dom,r),i={performance:new M(this._dom,r),pwa:new F(this._dom,r)},a=this._dom.createElement("div");a.appendChild(this._renderReportHeader());const s=this._dom.createElement("div","lh-container"),d=this._dom.createElement("div","lh-report");let h;d.appendChild(this._renderReportWarnings(e));1===Object.keys(e.categories).length?a.classList.add("lh-header--solo-category"):h=this._dom.createElement("div","lh-scores-header");const p=this._dom.createElement("div");if(p.classList.add("lh-scorescale-wrap"),p.append(this._dom.createComponent("scorescale")),h){const t=this._dom.find(".lh-scores-container",a);h.append(...this._renderScoreGauges(e,o,i)),t.appendChild(h),t.appendChild(p);const n=this._dom.createElement("div","lh-sticky-header");n.append(...this._renderScoreGauges(e,o,i)),s.appendChild(n)}const u=d.appendChild(this._dom.createElement("div","lh-categories")),g={gatherMode:e.gatherMode};for(const t of Object.values(e.categories)){const n=i[t.id]||o;n.dom.createChildOf(u,"div","lh-category-wrapper").appendChild(n.render(t,e.categoryGroups,g))}o.injectFinalScreenshot(u,e.audits,p);const m=this._dom.createFragment();return m.append(this._dom.createComponent("styles")),this._opts.omitTopbar||m.appendChild(this._renderReportTopbar(e)),m.appendChild(s),s.appendChild(a),s.appendChild(d),d.appendChild(this._renderReportFooter(e)),n&&A.installFullPageScreenshot(this._dom.rootEl,n.screenshot),m}}
+   */class N{constructor(e){this._dom=e,this._opts={}}renderReport(e,t,n){if(!this._dom.rootEl&&t){console.warn("Please adopt the new report API in renderer/api.js.");const e=t.closest(".lh-root");e?this._dom.rootEl=e:(t.classList.add("lh-root","lh-vars"),this._dom.rootEl=t)}else this._dom.rootEl&&t&&(this._dom.rootEl=t);n&&(this._opts=n),this._dom.setLighthouseChannel(e.configSettings.channel||"unknown");const r=l.prepareReportResult(e);return this._dom.rootEl.textContent="",this._dom.rootEl.appendChild(this._renderReport(r)),this._dom.rootEl}_renderReportTopbar(e){const t=this._dom.createComponent("topbar"),n=this._dom.find("a.lh-topbar__url",t);return n.textContent=e.finalUrl,n.title=e.finalUrl,this._dom.safelySetHref(n,e.finalUrl),t}_renderReportHeader(){const e=this._dom.createComponent("heading"),t=this._dom.createComponent("scoresWrapper");return this._dom.find(".lh-scores-wrapper-placeholder",e).replaceWith(t),e}_renderReportFooter(e){const t=this._dom.createComponent("footer");return this._renderMetaBlock(e,t),this._dom.find(".lh-footer__version_issue",t).textContent=l.i18n.strings.footerIssue,this._dom.find(".lh-footer__version",t).textContent=e.lighthouseVersion,t}_renderMetaBlock(e,t){const n=l.getEmulationDescriptions(e.configSettings||{}),r=e.userAgent.match(/(\w*Chrome\/[\d.]+)/),o=Array.isArray(r)?r[1].replace("/"," ").replace("Chrome","Chromium"):"Chromium",i=e.configSettings.channel,a=e.environment.benchmarkIndex.toFixed(0),s=e.environment.credits?.["axe-core"],c=[["date",`Captured at ${l.i18n.formatDateTime(e.fetchTime)}`],["devices",`${n.deviceEmulation} with Lighthouse ${e.lighthouseVersion}`,`${l.i18n.strings.runtimeSettingsBenchmark}: ${a}\n${l.i18n.strings.runtimeSettingsCPUThrottling}: ${n.cpuThrottling}`+(s?`\n${l.i18n.strings.runtimeSettingsAxeVersion}: ${s}`:"")],["samples-one",l.i18n.strings.runtimeSingleLoad,l.i18n.strings.runtimeSingleLoadTooltip],["stopwatch",l.i18n.strings.runtimeAnalysisWindow],["networkspeed",`${n.summary}`,`${l.i18n.strings.runtimeSettingsNetworkThrottling}: ${n.networkThrottling}`],["chrome",`Using ${o}`+(i?` with ${i}`:""),`${l.i18n.strings.runtimeSettingsUANetwork}: "${e.environment.networkUserAgent}"`]],d=this._dom.find(".lh-meta__items",t);for(const[e,t,n]of c){const r=this._dom.createChildOf(d,"li","lh-meta__item");if(r.textContent=t,n){r.classList.add("lh-tooltip-boundary");this._dom.createChildOf(r,"div","lh-tooltip").textContent=n}r.classList.add("lh-report-icon",`lh-report-icon--${e}`)}}_renderReportWarnings(e){if(!e.runWarnings||0===e.runWarnings.length)return this._dom.createElement("div");const t=this._dom.createComponent("warningsToplevel");this._dom.find(".lh-warnings__msg",t).textContent=l.i18n.strings.toplevelWarningsMessage;const n=this._dom.find("ul",t);for(const t of e.runWarnings){n.appendChild(this._dom.createElement("li")).appendChild(this._dom.convertMarkdownLinkSnippets(t))}return t}_renderScoreGauges(e,t,n){const r=[],o=[],i=[];for(const a of Object.values(e.categories)){const s=n[a.id]||t,c=s.renderCategoryScore(a,e.categoryGroups||{},{gatherMode:e.gatherMode}),d=this._dom.find("a.lh-gauge__wrapper, a.lh-fraction__wrapper",c);d&&(this._dom.safelySetHref(d,`#${a.id}`),d.addEventListener("click",(e=>{if(!d.matches('[href^="#"]'))return;const t=d.getAttribute("href"),n=this._dom.rootEl;if(!t||!n)return;const r=this._dom.find(t,n);e.preventDefault(),r.scrollIntoView()})),this._opts.onPageAnchorRendered?.(d)),l.isPluginCategory(a.id)?i.push(c):s.renderCategoryScore===t.renderCategoryScore?r.push(c):o.push(c)}return[...r,...o,...i]}_renderReport(e){const t=new L(e.configSettings.locale,{...l.UIStrings,...e.i18n.rendererFormattedStrings});l.i18n=t,l.reportJson=e;const n=e.audits["full-page-screenshot"]&&e.audits["full-page-screenshot"].details&&"full-page-screenshot"===e.audits["full-page-screenshot"].details.type?e.audits["full-page-screenshot"].details:void 0,r=new z(this._dom,{fullPageScreenshot:n}),o=new c(this._dom,r),i={performance:new M(this._dom,r),pwa:new F(this._dom,r)},a=this._dom.createElement("div");a.appendChild(this._renderReportHeader());const s=this._dom.createElement("div","lh-container"),d=this._dom.createElement("div","lh-report");let h;d.appendChild(this._renderReportWarnings(e));1===Object.keys(e.categories).length?a.classList.add("lh-header--solo-category"):h=this._dom.createElement("div","lh-scores-header");const p=this._dom.createElement("div");if(p.classList.add("lh-scorescale-wrap"),p.append(this._dom.createComponent("scorescale")),h){const t=this._dom.find(".lh-scores-container",a);h.append(...this._renderScoreGauges(e,o,i)),t.appendChild(h),t.appendChild(p);const n=this._dom.createElement("div","lh-sticky-header");n.append(...this._renderScoreGauges(e,o,i)),s.appendChild(n)}const u=d.appendChild(this._dom.createElement("div","lh-categories")),g={gatherMode:e.gatherMode};for(const t of Object.values(e.categories)){const n=i[t.id]||o;n.dom.createChildOf(u,"div","lh-category-wrapper").appendChild(n.render(t,e.categoryGroups,g))}o.injectFinalScreenshot(u,e.audits,p);const m=this._dom.createFragment();return m.append(this._dom.createComponent("styles")),this._opts.omitTopbar||m.appendChild(this._renderReportTopbar(e)),m.appendChild(s),s.appendChild(a),s.appendChild(d),d.appendChild(this._renderReportFooter(e)),n&&A.installFullPageScreenshot(this._dom.rootEl,n.screenshot),m}}
 /**
    * @license Copyright 2021 The Lighthouse Authors. All Rights Reserved.
    * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0

package/flow-report/assets/standalone-flow-template.html

@@ -28,12 +28,10 @@ limitations under the License.
 <body>
   <noscript>Lighthouse report requires JavaScript. Please enable.</noscript>
 
-  <main class="flow-vars lh-root lh-vars"><!-- report populated here --></main>
+  <main><!-- report populated here --></main>
 
   <script>window.__LIGHTHOUSE_FLOW_JSON__ = %%LIGHTHOUSE_FLOW_JSON%%;</script>
-  <script>%%LIGHTHOUSE_FLOW_JAVASCRIPT%%
-  __initLighthouseFlowReport__();
-  </script>
+  <script>%%LIGHTHOUSE_FLOW_JAVASCRIPT%%</script>
   <script>console.log('window.__LIGHTHOUSE_FLOW_JSON__', __LIGHTHOUSE_FLOW_JSON__);</script>
 </body>
 </html>

package/flow-report/src/app.tsx

@@ -7,7 +7,6 @@
 import {FunctionComponent} from 'preact';
 import {useLayoutEffect, useRef, useState} from 'preact/hooks';
 
-import {ReportRendererProvider} from './wrappers/report-renderer';
 import {Sidebar} from './sidebar/sidebar';
 import {Summary} from './summary/summary';
 import {classNames, FlowResultContext, useHashState} from './util';
@@ -52,15 +51,13 @@ export const App: FunctionComponent<{flowResult: LH.FlowResult}> = ({flowResult}
   const [collapsed, setCollapsed] = useState(false);
   return (
     <FlowResultContext.Provider value={flowResult}>
-      <ReportRendererProvider>
-        <I18nProvider>
-          <div className={classNames('App', {'App--collapsed': collapsed})} data-testid="App">
-            <Topbar onMenuClick={() => setCollapsed(c => !c)} />
-            <Sidebar/>
-            <Content/>
-          </div>
-        </I18nProvider>
-      </ReportRendererProvider>
+      <I18nProvider>
+        <div className={classNames('App', {'App--collapsed': collapsed})} data-testid="App">
+          <Topbar onMenuClick={() => setCollapsed(c => !c)} />
+          <Sidebar/>
+          <Content/>
+        </div>
+      </I18nProvider>
     </FlowResultContext.Provider>
   );
 };

package/flow-report/src/topbar.tsx

@@ -12,11 +12,9 @@ import {getFilenamePrefix} from '../../report/generator/file-namer';
 import {useLocalizedStrings} from './i18n/i18n';
 import {HamburgerIcon, InfoIcon} from './icons';
 import {useFlowResult} from './util';
-import {useReportRenderer} from './wrappers/report-renderer';
+import {saveFile} from '../../report/renderer/api';
 
-import type {DOM} from '../../report/renderer/dom';
-
-function saveHtml(flowResult: LH.FlowResult, dom: DOM) {
+function saveHtml(flowResult: LH.FlowResult) {
   const htmlStr = document.documentElement.outerHTML;
   const blob = new Blob([htmlStr], {type: 'text/html'});
 
@@ -24,7 +22,7 @@ function saveHtml(flowResult: LH.FlowResult, dom: DOM) {
   const name = flowResult.name.replace(/\s/g, '-');
   const filename = getFilenamePrefix(name, lhr.fetchTime);
 
-  dom.saveFile(blob, filename);
+  saveFile(blob, filename);
 }
 
 /* eslint-disable max-len */
@@ -78,7 +76,6 @@ const TopbarButton: FunctionComponent<{
 export const Topbar: FunctionComponent<{onMenuClick: JSX.MouseEventHandler<HTMLButtonElement>}> =
 ({onMenuClick}) => {
   const flowResult = useFlowResult();
-  const {dom} = useReportRenderer();
   const strings = useLocalizedStrings();
   const [showHelpDialog, setShowHelpDialog] = useState(false);
 
@@ -92,7 +89,7 @@ export const Topbar: FunctionComponent<{onMenuClick: JSX.MouseEventHandler<HTMLB
       </div>
       <div className="Topbar__title">{strings.title}</div>
       <TopbarButton
-        onClick={() => saveHtml(flowResult, dom)}
+        onClick={() => saveHtml(flowResult)}
         label="Button that saves the report as HTML"
       >{strings.save}</TopbarButton>
       <div style={{flexGrow: 1}} />

package/flow-report/src/util.ts

@@ -5,7 +5,7 @@
  */
 
 import {createContext} from 'preact';
-import {useContext, useEffect, useMemo, useState} from 'preact/hooks';
+import {useContext, useEffect, useLayoutEffect, useMemo, useRef, useState} from 'preact/hooks';
 
 import type {UIStringsType} from './i18n/ui-strings';
 
@@ -121,6 +121,32 @@ function useHashState(): LH.FlowResult.HashState|null {
   }, [indexString, flowResult, anchor]);
 }
 
+/**
+ * Creates a DOM subtree from non-preact code (e.g. LH report renderer).
+ * @param renderCallback Callback that renders a DOM subtree.
+ * @param inputs Changes to these values will trigger a re-render of the DOM subtree.
+ * @return Reference to the element that will contain the DOM subtree.
+ */
+function useExternalRenderer<T extends Element>(
+  renderCallback: () => Node,
+  inputs?: ReadonlyArray<unknown>
+) {
+  const ref = useRef<T>(null);
+
+  useLayoutEffect(() => {
+    if (!ref.current) return;
+
+    const root = renderCallback();
+    ref.current.appendChild(root);
+
+    return () => {
+      if (ref.current?.contains(root)) ref.current.removeChild(root);
+    };
+  }, inputs);
+
+  return ref;
+}
+
 export {
   FlowResultContext,
   classNames,
@@ -131,4 +157,5 @@ export {
   useFlowResult,
   useHashParams,
   useHashState,
+  useExternalRenderer,
 };

package/flow-report/src/wrappers/category-score.tsx

@@ -5,37 +5,22 @@
  */
 
 import {FunctionComponent} from 'preact';
-import {useEffect, useLayoutEffect, useRef} from 'preact/hooks';
 
-import {useReportRenderer} from './report-renderer';
+import {renderCategoryScore} from '../../../report/renderer/api';
+import {useExternalRenderer} from '../util';
 
 export const CategoryScore: FunctionComponent<{
   category: LH.ReportResult.Category,
   href: string,
   gatherMode: LH.Result.GatherMode,
 }> = ({category, href, gatherMode}) => {
-  const {categoryRenderer} = useReportRenderer();
-  const ref = useRef<HTMLDivElement>(null);
-
-  useLayoutEffect(() => {
-    const el = categoryRenderer.renderCategoryScore(category, {}, {gatherMode});
-
-    // Category label is displayed in the navigation header.
-    const label = el.querySelector('.lh-gauge__label,.lh-fraction__label');
-    if (label) label.remove();
-
-    if (ref.current) ref.current.append(el);
-    return () => {
-      if (ref.current && ref.current.contains(el)) {
-        ref.current.removeChild(el);
-      }
-    };
-  }, [categoryRenderer, category]);
-
-  useEffect(() => {
-    const anchor = ref.current && ref.current.querySelector('a') as HTMLAnchorElement;
-    if (anchor) anchor.href = href;
-  }, [href]);
+  const ref = useExternalRenderer<HTMLDivElement>(() => {
+    return renderCategoryScore(category, {
+      gatherMode,
+      omitLabel: true,
+      onPageAnchorRendered: link => link.href = href,
+    });
+  }, [category, href]);
 
   return (
     <div ref={ref} data-testid="CategoryScore"/>

package/flow-report/src/wrappers/markdown.tsx

@@ -5,22 +5,13 @@
  */
 
 import {FunctionComponent} from 'preact';
-import {useLayoutEffect, useRef} from 'preact/hooks';
 
-import {useReportRenderer} from '../wrappers/report-renderer';
+import {convertMarkdownCodeSnippets} from '../../../report/renderer/api';
+import {useExternalRenderer} from '../util';
 
 export const Markdown: FunctionComponent<{text: string}> = ({text}) => {
-  const {dom} = useReportRenderer();
-  const ref = useRef<HTMLSpanElement>(null);
-
-  useLayoutEffect(() => {
-    if (ref.current) {
-      const md = dom.convertMarkdownCodeSnippets(text);
-      ref.current.appendChild(md);
-    }
-    return () => {
-      if (ref.current) ref.current.innerHTML = '';
-    };
+  const ref = useExternalRenderer<HTMLSpanElement>(() => {
+    return convertMarkdownCodeSnippets(text);
   }, [text]);
 
   return <span ref={ref}/>;

package/flow-report/src/wrappers/report.tsx

@@ -5,73 +5,41 @@
  */
 
 import {FunctionComponent} from 'preact';
-import {useLayoutEffect, useRef} from 'preact/hooks';
 
-import {ElementScreenshotRenderer} from '../../../report/renderer/element-screenshot-renderer';
-import {getFullPageScreenshot} from '../util';
-import {useReportRenderer} from './report-renderer';
+import {renderReport} from '../../../report/renderer/api.js';
+import {useExternalRenderer} from '../util';
 
 /**
  * The default behavior of anchor links is not compatible with the flow report's hash navigation.
- * This function converts any anchor links under the provided element to a flow report link.
+ * This function converts a category score anchor link to a flow report link.
  * e.g. <a href="#link"> -> <a href="#index=0&anchor=link">
  */
-function convertChildAnchors(element: HTMLElement, index: number) {
-  const links = element.querySelectorAll('a[href]') as NodeListOf<HTMLAnchorElement>;
-  for (const link of links) {
-    // Check if the link destination is in the report.
-    const currentUrl = new URL(location.href);
-    currentUrl.hash = '';
-    currentUrl.search = '';
-    const linkUrl = new URL(link.href);
-    linkUrl.hash = '';
-    linkUrl.search = '';
-    if (currentUrl.href !== linkUrl.href || !link.hash) continue;
-
-    const nodeId = link.hash.substr(1);
-    link.hash = `#index=${index}&anchor=${nodeId}`;
-    link.onclick = e => {
-      e.preventDefault();
-      const el = document.getElementById(nodeId);
-      if (el) el.scrollIntoView();
-    };
-  }
+function convertAnchor(link: HTMLAnchorElement, index: number) {
+  // Clear existing event listeners by cloning node.
+  const newLink = link.cloneNode(true) as HTMLAnchorElement;
+  if (!newLink.hash) return newLink;
+
+  const nodeId = link.hash.substr(1);
+  newLink.hash = `#index=${index}&anchor=${nodeId}`;
+  newLink.onclick = e => {
+    e.preventDefault();
+    const el = document.getElementById(nodeId);
+    if (el) el.scrollIntoView();
+  };
+  link.replaceWith(newLink);
 }
 
-const Report: FunctionComponent<{hashState: LH.FlowResult.HashState}> =
+export const Report: FunctionComponent<{hashState: LH.FlowResult.HashState}> =
 ({hashState}) => {
-  const {dom, reportRenderer} = useReportRenderer();
-  const ref = useRef<HTMLDivElement>(null);
-
-  useLayoutEffect(() => {
-    if (ref.current) {
-      dom.clearComponentCache();
-      reportRenderer.renderReport(hashState.currentLhr, ref.current);
-      convertChildAnchors(ref.current, hashState.index);
-      const fullPageScreenshot = getFullPageScreenshot(hashState.currentLhr);
-      if (fullPageScreenshot) {
-        ElementScreenshotRenderer.installOverlayFeature({
-          dom,
-          rootEl: ref.current,
-          overlayContainerEl: ref.current,
-          fullPageScreenshot,
-        });
-      }
-      const topbar = ref.current.querySelector('.lh-topbar');
-      if (topbar) topbar.remove();
-    }
-
-    return () => {
-      if (ref.current) ref.current.textContent = '';
-    };
-  }, [reportRenderer, hashState]);
+  const ref = useExternalRenderer<HTMLDivElement>(() => {
+    return renderReport(hashState.currentLhr, {
+      disableAutoDarkModeAndFireworks: true,
+      omitTopbar: true,
+      onPageAnchorRendered: link => convertAnchor(link, hashState.index),
+    });
+  }, [hashState]);
 
   return (
-    <div ref={ref} className="lh-root" data-testid="Report"/>
+    <div ref={ref} data-testid="Report"/>
   );
 };
-
-export {
-  convertChildAnchors,
-  Report,
-};

package/flow-report/standalone-flow.tsx

@@ -13,12 +13,12 @@ import {render} from 'preact';
 
 import {App} from './src/app';
 
-// Used by standalone-flow.html
 function __initLighthouseFlowReport__() {
-  // TODO(adamraine): add lh-vars, etc classes programmatically instead of in the HTML template
   const container = document.body.querySelector('main');
   if (!container) throw Error('Container element not found');
+  container.classList.add('flow-vars', 'lh-root', 'lh-vars');
   render(<App flowResult={window.__LIGHTHOUSE_FLOW_JSON__} />, container);
 }
 
 window.__initLighthouseFlowReport__ = __initLighthouseFlowReport__;
+window.__initLighthouseFlowReport__();

package/flow-report/test/setup/env-setup.ts

@@ -9,18 +9,24 @@ import {JSDOM} from 'jsdom';
 
 /**
  * The jest environment "jsdom" does not work when preact is combined with the report renderer.
+ * This sets up our own environment with JSDOM globals.
  */
-function setupJsDom() {
+beforeEach(() => {
   const {window} = new JSDOM(undefined, {
     url: 'file:///Users/example/report.html/',
   });
   global.window = window as any;
   global.document = window.document;
   global.location = window.location;
+  global.self = global.window;
+
+  // Use JSDOM types as necessary.
   global.Blob = window.Blob;
+  global.HTMLInputElement = window.HTMLInputElement;
 
-  // Function not implemented in JSDOM.
+  // Functions not implemented in JSDOM.
   window.Element.prototype.scrollIntoView = jest.fn();
-}
-
-global.beforeEach(setupJsDom);
+  global.self.matchMedia = jest.fn<any, any>(() => ({
+    addListener: jest.fn(),
+  }));
+});

package/flow-report/test/summary/category-test.tsx

@@ -11,7 +11,6 @@ import {SummaryTooltip} from '../../src/summary/category';
 import {flowResult} from '../sample-flow';
 import {I18nProvider} from '../../src/i18n/i18n';
 import {FlowResultContext} from '../../src/util';
-import {ReportRendererProvider} from '../../src/wrappers/report-renderer';
 
 let wrapper: FunctionComponent;
 
@@ -19,11 +18,9 @@ beforeEach(() => {
   // Include sample flowResult for locale in I18nProvider.
   wrapper = ({children}) => (
     <FlowResultContext.Provider value={flowResult}>
-      <ReportRendererProvider>
-        <I18nProvider>
-          {children}
-        </I18nProvider>
-      </ReportRendererProvider>
+      <I18nProvider>
+        {children}
+      </I18nProvider>
     </FlowResultContext.Provider>
   );
 });

package/flow-report/test/summary/summary-test.tsx

@@ -10,7 +10,6 @@ import {FunctionComponent} from 'preact';
 import {I18nProvider} from '../../src/i18n/i18n';
 import {SummaryHeader, SummaryFlowStep} from '../../src/summary/summary';
 import {FlowResultContext} from '../../src/util';
-import {ReportRendererProvider} from '../../src/wrappers/report-renderer';
 import {flowResult} from '../sample-flow';
 
 let wrapper: FunctionComponent;
@@ -18,11 +17,9 @@ let wrapper: FunctionComponent;
 beforeEach(() => {
   wrapper = ({children}) => (
     <FlowResultContext.Provider value={flowResult}>
-      <ReportRendererProvider>
-        <I18nProvider>
-          {children}
-        </I18nProvider>
-      </ReportRendererProvider>
+      <I18nProvider>
+        {children}
+      </I18nProvider>
     </FlowResultContext.Provider>
   );
 });

package/flow-report/test/topbar-test.tsx

@@ -8,11 +8,19 @@ import {jest} from '@jest/globals';
 import {FunctionComponent} from 'preact';
 import {act, render} from '@testing-library/preact';
 
-import {Topbar} from '../src/topbar';
 import {FlowResultContext} from '../src/util';
-import {ReportRendererContext} from '../src/wrappers/report-renderer';
 import {I18nProvider} from '../src/i18n/i18n';
 
+const mockSaveFile = jest.fn();
+jest.unstable_mockModule('../../../report/renderer/api.js', () => ({
+  saveFile: mockSaveFile,
+}));
+
+let Topbar: typeof import('../src/topbar').Topbar;
+beforeAll(async () => {
+  Topbar = (await import('../src/topbar')).Topbar;
+});
+
 const flowResult = {
   name: 'User flow',
   steps: [{lhr: {
@@ -23,22 +31,14 @@ const flowResult = {
 } as any;
 
 let wrapper: FunctionComponent;
-let mockSaveFile = jest.fn();
 
 beforeEach(() => {
-  mockSaveFile = jest.fn();
-  const reportRendererValue: any = {
-    dom: {
-      saveFile: mockSaveFile,
-    },
-  };
+  mockSaveFile.mockReset();
   wrapper = ({children}) => (
     <FlowResultContext.Provider value={flowResult}>
-      <ReportRendererContext.Provider value={reportRendererValue}>
-        <I18nProvider>
-          {children}
-        </I18nProvider>
-      </ReportRendererContext.Provider>
+      <I18nProvider>
+        {children}
+      </I18nProvider>
     </FlowResultContext.Provider>
   );
 });

package/flow-report/test/util-test.tsx

@@ -5,11 +5,12 @@
  */
 
 import {jest} from '@jest/globals';
+import {render} from '@testing-library/preact';
 import {renderHook} from '@testing-library/preact-hooks';
 import {FunctionComponent} from 'preact';
 import {act} from 'preact/test-utils';
 
-import {FlowResultContext, useHashState} from '../src/util';
+import {FlowResultContext, useExternalRenderer, useHashState} from '../src/util';
 import {flowResult} from './sample-flow';
 
 let wrapper: FunctionComponent;
@@ -94,3 +95,39 @@ describe('useHashState', () => {
     expect(result.current).toBeNull();
   });
 });
+
+describe('useExternalRenderer', () => {
+  it('attaches DOM subtree of render callback', () => {
+    const Container: FunctionComponent = () => {
+      const ref = useExternalRenderer<HTMLDivElement>(() => {
+        const el = document.createElement('div');
+        el.textContent = 'Some text';
+        return el;
+      });
+      return <div ref={ref}/>;
+    };
+
+    const root = render(<Container/>);
+
+    expect(root.getByText('Some text')).toBeTruthy();
+  });
+
+  it('re-renders DOM subtree when input changes', () => {
+    const Container: FunctionComponent<{text: string}> = ({text}) => {
+      const ref = useExternalRenderer<HTMLDivElement>(() => {
+        const el = document.createElement('div');
+        el.textContent = text;
+        return el;
+      }, [text]);
+      return <div ref={ref}/>;
+    };
+
+    const root = render(<Container text="Some text"/>);
+
+    expect(root.getByText('Some text')).toBeTruthy();
+
+    root.rerender(<Container text="New text"/>);
+
+    expect(root.getByText('New text')).toBeTruthy();
+  });
+});

package/flow-report/test/wrappers/category-score-test.tsx

@@ -9,7 +9,6 @@ import {render} from '@testing-library/preact';
 
 import {CategoryScore} from '../../src/wrappers/category-score';
 import {FlowResultContext} from '../../src/util';
-import {ReportRendererProvider} from '../../src/wrappers/report-renderer';
 import {I18nProvider} from '../../src/i18n/i18n';
 import {flowResult} from '../sample-flow';
 
@@ -18,11 +17,9 @@ let wrapper: FunctionComponent;
 beforeEach(() => {
   wrapper = ({children}) => (
     <FlowResultContext.Provider value={flowResult}>
-      <ReportRendererProvider>
-        <I18nProvider>
-          {children}
-        </I18nProvider>
-      </ReportRendererProvider>
+      <I18nProvider>
+        {children}
+      </I18nProvider>
     </FlowResultContext.Provider>
   );
 });

package/flow-report/test/wrappers/markdown-test.tsx

@@ -5,24 +5,12 @@
  */
 
 import {render} from '@testing-library/preact';
-import {FunctionComponent} from 'preact';
 
 import {Markdown} from '../../src/wrappers/markdown';
-import {ReportRendererProvider} from '../../src/wrappers/report-renderer';
-
-let wrapper: FunctionComponent;
-
-beforeEach(() => {
-  wrapper = ({children}) => (
-    <ReportRendererProvider>
-      {children}
-    </ReportRendererProvider>
-  );
-});
 
 describe('Markdown', () => {
   it('renders markdown text', () => {
-    const root = render(<Markdown text="Some `fancy` text"/>, {wrapper});
+    const root = render(<Markdown text="Some `fancy` text"/>);
     const text = root.getByText(/^Some.*text$/);
     expect(text.innerHTML).toEqual('Some <code>fancy</code> text');
   });