GoogleChrome · adamraine · Nov 18, 2021 · Nov 11, 2021 · Nov 12, 2021 · Nov 12, 2021
diff --git a/flow-report/assets/standalone-flow-template.html b/flow-report/assets/standalone-flow-template.html
@@ -28,12 +28,10 @@
 <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>
diff --git a/flow-report/src/app.tsx b/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>
   );
 };
diff --git a/flow-report/src/topbar.tsx b/flow-report/src/topbar.tsx
@@ -12,19 +12,17 @@ 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'});
 
   const lhr = flowResult.steps[0].lhr;
   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}} />

diff --git a/flow-report/src/util.ts b/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,
 };
diff --git a/flow-report/src/wrappers/category-score.tsx b/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,
+      hrefOverride: href,
+    });
+  }, [category, href]);
 
   return (
     <div ref={ref} data-testid="CategoryScore"/>

diff --git a/flow-report/src/wrappers/markdown.tsx b/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}/>;

diff --git a/flow-report/src/wrappers/report-renderer.tsx b/flow-report/src/wrappers/report-renderer.tsx
diff --git a/flow-report/src/wrappers/report.tsx b/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();
+  };
+  return 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,
+      anchorTransform: 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,
-};
diff --git a/flow-report/standalone-flow.tsx b/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__();