lighthouse 8.6.0-dev.20211029 → 8.6.0-dev.20211102

package/flow-report/.eslintrc.cjs

@@ -27,6 +27,8 @@ module.exports = {
       ],
       'newlines-between': 'always',
     }],
+    'import/group-exports': 2,
+    'import/exports-last': 2,
     '@typescript-eslint/type-annotation-spacing': 2,
   },
   overrides: [

package/flow-report/assets/styles.css

@@ -297,7 +297,7 @@
 
 .SummaryFlow {
   display: grid;
-  max-width: var(--report-width);
+  max-width: var(--report-content-width);
   grid-auto-rows: min-content;
   grid-template-columns: min-content min-content minmax(var(--min-text-width), max-content) 1fr 1fr 1fr 1fr;
   align-items: center;

package/flow-report/src/app.tsx

@@ -5,25 +5,24 @@
  */
 
 import {FunctionComponent} from 'preact';
-import {useEffect, useRef, useState} from 'preact/hooks';
+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, useCurrentLhr, useHashParam} from './util';
+import {classNames, FlowResultContext, useHashState} from './util';
 import {Report} from './wrappers/report';
 import {Topbar} from './topbar';
 import {Header} from './header';
 import {I18nProvider} from './i18n/i18n';
 
 const Content: FunctionComponent = () => {
-  const currentLhr = useCurrentLhr();
-  const anchor = useHashParam('anchor');
+  const hashState = useHashState();
   const ref = useRef<HTMLDivElement>(null);
 
-  useEffect(() => {
-    if (anchor) {
-      const el = document.getElementById(anchor);
+  useLayoutEffect(() => {
+    if (hashState && hashState.anchor) {
+      const el = document.getElementById(hashState.anchor);
       if (el) {
         el.scrollIntoView({behavior: 'smooth'});
         return;
@@ -32,15 +31,15 @@ const Content: FunctionComponent = () => {
 
     // Scroll to top no anchor is found.
     if (ref.current) ref.current.scrollTop = 0;
-  }, [anchor, currentLhr]);
+  }, [hashState]);
 
   return (
     <div ref={ref} className="Content">
       {
-        currentLhr ?
+        hashState ?
           <>
-            <Header currentLhr={currentLhr}/>
-            <Report currentLhr={currentLhr}/>
+            <Header hashState={hashState}/>
+            <Report hashState={hashState}/>
           </> :
           <Summary/>
       }

package/flow-report/src/common.tsx

@@ -12,11 +12,11 @@ import {getFilmstripFrames, getScreenDimensions, getFullPageScreenshot} from './
 
 const ANIMATION_FRAME_DURATION_MS = 500;
 
-export const Separator: FunctionComponent = () => {
+const Separator: FunctionComponent = () => {
   return <div className="Separator" role="separator"></div>;
 };
 
-export const FlowStepIcon: FunctionComponent<{mode: LH.Result.GatherMode}> = ({mode}) => {
+const FlowStepIcon: FunctionComponent<{mode: LH.Result.GatherMode}> = ({mode}) => {
   return <>
     {
       mode === 'navigation' && <NavigationIcon/>
@@ -30,7 +30,7 @@ export const FlowStepIcon: FunctionComponent<{mode: LH.Result.GatherMode}> = ({m
   </>;
 };
 
-export const FlowSegment: FunctionComponent<{mode?: LH.Result.GatherMode}> = ({mode}) => {
+const FlowSegment: FunctionComponent<{mode?: LH.Result.GatherMode}> = ({mode}) => {
   return (
     <div className="FlowSegment">
       <div className="FlowSegment__top-line"/>
@@ -71,12 +71,12 @@ const FlowStepAnimatedThumbnail: FunctionComponent<{
   );
 };
 
-export const FlowStepThumbnail: FunctionComponent<{
+const FlowStepThumbnail: FunctionComponent<{
   lhr: LH.Result,
   width?: number,
   height?: number,
 }> = ({lhr, width, height}) => {
-  const screenshot = getFullPageScreenshot(lhr);
+  const fullPageScreenshot = getFullPageScreenshot(lhr);
   const frames = getFilmstripFrames(lhr);
 
   // Resize the image to fit the viewport aspect ratio.
@@ -92,19 +92,32 @@ export const FlowStepThumbnail: FunctionComponent<{
     return <></>;
   }
 
-  if (lhr.gatherMode === 'timespan' && frames && frames.length) {
-    return <FlowStepAnimatedThumbnail frames={frames} width={width} height={height} />;
+  let thumbnail;
+  if (frames && frames.length) {
+    thumbnail = frames[frames.length - 1].data;
+    if (lhr.gatherMode === 'timespan') {
+      return <FlowStepAnimatedThumbnail frames={frames} width={width} height={height} />;
+    }
+  } else {
+    thumbnail = fullPageScreenshot?.screenshot.data;
   }
 
   return <>
     {
-      screenshot &&
+      thumbnail &&
         <img
           className="FlowStepThumbnail"
-          src={screenshot.screenshot.data}
+          src={thumbnail}
           style={{width, height}}
           alt="Screenshot of a page tested by Lighthouse"
         />
     }
   </>;
 };
+
+export {
+  Separator,
+  FlowStepIcon,
+  FlowSegment,
+  FlowStepThumbnail,
+};

package/flow-report/src/header.tsx

@@ -29,10 +29,10 @@ const HeaderThumbnail: FunctionComponent<{
   );
 };
 
-export const Header: FunctionComponent<{currentLhr: LH.FlowResult.LhrRef}> =
-({currentLhr}) => {
+export const Header: FunctionComponent<{hashState: LH.FlowResult.HashState}> =
+({hashState}) => {
   const flowResult = useFlowResult();
-  const {index} = currentLhr;
+  const {index} = hashState;
 
   const step = flowResult.steps[index];
   const prevStep = flowResult.steps[index - 1];

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

@@ -31,23 +31,23 @@ function useLhrLocale() {
   };
 }
 
-export function useI18n() {
+function useI18n() {
   return useContext(I18nContext);
 }
 
-export function useLocalizedStrings() {
+function useLocalizedStrings() {
   const i18n = useI18n();
   return i18n.strings;
 }
 
-export function useStringFormatter() {
+function useStringFormatter() {
   const {locale} = useLhrLocale();
   return (str: string, values?: Record<string, string|number>) => {
     return formatMessage(str, values, locale);
   };
 }
 
-export const I18nProvider: FunctionComponent = ({children}) => {
+const I18nProvider: FunctionComponent = ({children}) => {
   const {locale, lhrStrings} = useLhrLocale();
 
   const i18n = useMemo(() => {
@@ -65,7 +65,6 @@ export const I18nProvider: FunctionComponent = ({children}) => {
 
     // Initialize renderer util i18n for strings rendered in wrapped components.
     // TODO: Don't attach global i18n to `Util`.
-    // @ts-ignore TS reports as read-only.
     Util.i18n = i18n;
 
     return i18n;
@@ -78,4 +77,9 @@ export const I18nProvider: FunctionComponent = ({children}) => {
   );
 };
 
-
+export {
+  useI18n,
+  useLocalizedStrings,
+  useStringFormatter,
+  I18nProvider,
+};

package/flow-report/src/icons.tsx

@@ -8,7 +8,7 @@ import {FunctionComponent} from 'preact';
 
 /* eslint-disable max-len */
 
-export const SummaryIcon: FunctionComponent = () => {
+const SummaryIcon: FunctionComponent = () => {
   return (
     <svg width="14" viewBox="0 0 18 16" fill="none" role="img">
       <path fill-rule="evenodd" clip-rule="evenodd" d="M0 2C0 1.17 0.67 0.5 1.5 0.5C2.33 0.5 3 1.17 3 2C3 2.83 2.33 3.5 1.5 3.5C0.67 3.5 0 2.83 0 2ZM0 8C0 7.17 0.67 6.5 1.5 6.5C2.33 6.5 3 7.17 3 8C3 8.83 2.33 9.5 1.5 9.5C0.67 9.5 0 8.83 0 8ZM1.5 12.5C0.67 12.5 0 13.18 0 14C0 14.82 0.68 15.5 1.5 15.5C2.32 15.5 3 14.82 3 14C3 13.18 2.33 12.5 1.5 12.5ZM18 15H5V13H18V15ZM5 9H18V7H5V9ZM5 3V1H18V3H5Z" fill="currentColor"/>
@@ -16,7 +16,7 @@ export const SummaryIcon: FunctionComponent = () => {
   );
 };
 
-export const NavigationIcon: FunctionComponent = () => {
+const NavigationIcon: FunctionComponent = () => {
   return (
     <svg
       width="16"
@@ -36,7 +36,7 @@ export const NavigationIcon: FunctionComponent = () => {
   );
 };
 
-export const TimespanIcon: FunctionComponent = () => {
+const TimespanIcon: FunctionComponent = () => {
   return (
     <svg
       width="16"
@@ -60,7 +60,7 @@ export const TimespanIcon: FunctionComponent = () => {
   );
 };
 
-export const SnapshotIcon: FunctionComponent = () => {
+const SnapshotIcon: FunctionComponent = () => {
   return (
     <svg
       xmlns="http://www.w3.org/2000/svg"
@@ -79,7 +79,7 @@ export const SnapshotIcon: FunctionComponent = () => {
   );
 };
 
-export const CloseIcon: FunctionComponent = () => {
+const CloseIcon: FunctionComponent = () => {
   return (
     <svg
       xmlns="http://www.w3.org/2000/svg"
@@ -96,7 +96,7 @@ export const CloseIcon: FunctionComponent = () => {
   );
 };
 
-export const EnvIcon: FunctionComponent = () => {
+const EnvIcon: FunctionComponent = () => {
   return (
     <svg width="15" height="12" viewBox="0 0 15 12" fill="none" role="img">
       <path fill-rule="evenodd" clip-rule="evenodd" d="M3.33317 2.00008H13.9998V0.666748H3.33317C2.59984 0.666748 1.99984 1.26675 1.99984 2.00008V9.33341H0.666504V11.3334H7.99984V9.33341H3.33317V2.00008ZM13.9998 3.33341H9.99984C9.63317 3.33341 9.33317 3.63341 9.33317 4.00008V10.6667C9.33317 11.0334 9.63317 11.3334 9.99984 11.3334H13.9998C14.3665 11.3334 14.6665 11.0334 14.6665 10.6667V4.00008C14.6665 3.63341 14.3665 3.33341 13.9998 3.33341ZM10.6665 9.33341H13.3332V4.66675H10.6665V9.33341Z" fill="currentColor"/>
@@ -104,7 +104,7 @@ export const EnvIcon: FunctionComponent = () => {
   );
 };
 
-export const CpuIcon: FunctionComponent = () => {
+const CpuIcon: FunctionComponent = () => {
   return (
     <svg width="16" height="16" viewBox="0 0 16 16" fill="none" role="img">
       <path fill-rule="evenodd" clip-rule="evenodd" d="M15.5 7.16667V5.5H13.8333V3.83333C13.8333 2.91667 13.0833 2.16667 12.1667 2.16667H10.5V0.5H8.83333V2.16667H7.16667V0.5H5.5V2.16667H3.83333C2.91667 2.16667 2.16667 2.91667 2.16667 3.83333V5.5H0.5V7.16667H2.16667V8.83333H0.5V10.5H2.16667V12.1667C2.16667 13.0833 2.91667 13.8333 3.83333 13.8333H5.5V15.5H7.16667V13.8333H8.83333V15.5H10.5V13.8333H12.1667C13.0833 13.8333 13.8333 13.0833 13.8333 12.1667V10.5H15.5V8.83333H13.8333V7.16667H15.5ZM10.5 5.5H5.5V10.5H10.5V5.5ZM3.83333 12.1667H12.1667V3.83333H3.83333V12.1667Z" fill="currentColor"/>
@@ -112,7 +112,7 @@ export const CpuIcon: FunctionComponent = () => {
   );
 };
 
-export const HamburgerIcon: FunctionComponent = () => {
+const HamburgerIcon: FunctionComponent = () => {
   return (
     <svg viewBox="0 0 18 12" width="18" height="12" role="img">
       <rect width="18" height="2" fill="currentColor"></rect>
@@ -122,10 +122,22 @@ export const HamburgerIcon: FunctionComponent = () => {
   );
 };
 
-export const InfoIcon: FunctionComponent = () => {
+const InfoIcon: FunctionComponent = () => {
   return (
     <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
       <path fill-rule="evenodd" clip-rule="evenodd" d="M13 7C13 10.3137 10.3137 13 7 13C3.68629 13 1 10.3137 1 7C1 3.68629 3.68629 1 7 1C10.3137 1 13 3.68629 13 7ZM14 7C14 10.866 10.866 14 7 14C3.13401 14 0 10.866 0 7C0 3.13401 3.13401 0 7 0C10.866 0 14 3.13401 14 7ZM7.66658 11H6.33325V9.66667H7.66658V11ZM4.33325 5.66667C4.33325 4.19333 5.52659 3 6.99992 3C8.47325 3 9.66658 4.19333 9.66658 5.66667C9.66658 6.52194 9.1399 6.98221 8.62709 7.43036C8.1406 7.85551 7.66658 8.26975 7.66658 9H6.33325C6.33325 7.78582 6.96133 7.30439 7.51355 6.88112C7.94674 6.54907 8.33325 6.25281 8.33325 5.66667C8.33325 4.93333 7.73325 4.33333 6.99992 4.33333C6.26658 4.33333 5.66658 4.93333 5.66658 5.66667H4.33325Z" fill="currentColor"/>
     </svg>
   );
 };
+
+export {
+  SummaryIcon,
+  NavigationIcon,
+  TimespanIcon,
+  SnapshotIcon,
+  CloseIcon,
+  EnvIcon,
+  CpuIcon,
+  HamburgerIcon,
+  InfoIcon,
+};

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

@@ -7,7 +7,7 @@
 import {FunctionComponent} from 'preact';
 
 import {FlowSegment} from '../common';
-import {classNames, useCurrentLhr, useFlowResult} from '../util';
+import {classNames, useHashState, useFlowResult} from '../util';
 import {Separator} from '../common';
 
 const SidebarFlowStep: FunctionComponent<{
@@ -41,7 +41,7 @@ const SidebarFlowSeparator: FunctionComponent = () => {
 
 export const SidebarFlow: FunctionComponent = () => {
   const flowResult = useFlowResult();
-  const currentLhr = useCurrentLhr();
+  const hashState = useHashState();
 
   return (
     <div className="SidebarFlow">
@@ -61,7 +61,7 @@ export const SidebarFlow: FunctionComponent = () => {
               mode={lhr.gatherMode}
               href={url.href}
               label={name}
-              isCurrent={index === (currentLhr && currentLhr.index)}
+              isCurrent={index === (hashState && hashState.index)}
             />
           </>;
         })

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

@@ -9,11 +9,11 @@ import {FunctionComponent} from 'preact';
 import {Separator} from '../common';
 import {useI18n, useLocalizedStrings} from '../i18n/i18n';
 import {CpuIcon, EnvIcon, SummaryIcon} from '../icons';
-import {classNames, useCurrentLhr, useFlowResult} from '../util';
+import {classNames, useHashState, useFlowResult} from '../util';
 import {SidebarFlow} from './flow';
 
-export const SidebarSummary: FunctionComponent = () => {
-  const currentLhr = useCurrentLhr();
+const SidebarSummary: FunctionComponent = () => {
+  const hashState = useHashState();
   const strings = useLocalizedStrings();
 
   const url = new URL(location.href);
@@ -21,7 +21,7 @@ export const SidebarSummary: FunctionComponent = () => {
   return (
     <a
       href={url.href}
-      className={classNames('SidebarSummary', {'Sidebar--current': currentLhr === null})}
+      className={classNames('SidebarSummary', {'Sidebar--current': hashState === null})}
       data-testid="SidebarSummary"
     >
       <div className="SidebarSummary__icon">
@@ -59,7 +59,7 @@ const SidebarRuntimeSettings: FunctionComponent<{settings: LH.ConfigSettings}> =
   );
 };
 
-export const SidebarHeader: FunctionComponent<{title: string, date: string}> = ({title, date}) => {
+const SidebarHeader: FunctionComponent<{title: string, date: string}> = ({title, date}) => {
   const i18n = useI18n();
   return (
     <div className="SidebarHeader">
@@ -69,7 +69,7 @@ export const SidebarHeader: FunctionComponent<{title: string, date: string}> = (
   );
 };
 
-export const Sidebar: FunctionComponent = () => {
+const Sidebar: FunctionComponent = () => {
   const flowResult = useFlowResult();
   const firstLhr = flowResult.steps[0].lhr;
   return (
@@ -84,3 +84,9 @@ export const Sidebar: FunctionComponent = () => {
     </div>
   );
 };
+
+export {
+  SidebarSummary,
+  SidebarHeader,
+  Sidebar,
+};

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

@@ -64,8 +64,8 @@ const SummaryTooltipAudits: FunctionComponent<{category: LH.ReportResult.Categor
     return audit.result.score !== null &&
       // Metrics should not be displayed in this group.
       audit.group !== 'metrics' &&
-      // Audits in performance without a group are hidden.
-      (audit.group !== undefined || category.id !== 'performance') &&
+      // Audits in performance group "hidden" should not be counted.
+      (audit.group !== 'hidden' || category.id !== 'performance') &&
       // We don't want unweighted audits except for opportunities with potential savings.
       (audit.weight > 0 || getOverallSavings(audit) > 0) &&
       // Passing audits should never be high impact.
@@ -95,7 +95,7 @@ const SummaryTooltipAudits: FunctionComponent<{category: LH.ReportResult.Categor
   );
 };
 
-export const SummaryTooltip: FunctionComponent<{
+const SummaryTooltip: FunctionComponent<{
   category: LH.ReportResult.Category,
   gatherMode: LH.Result.GatherMode,
   url: string,
@@ -153,7 +153,7 @@ export const SummaryTooltip: FunctionComponent<{
   );
 };
 
-export const SummaryCategory: FunctionComponent<{
+const SummaryCategory: FunctionComponent<{
   category: LH.ReportResult.Category|undefined,
   href: string,
   gatherMode: LH.Result.GatherMode,
@@ -176,3 +176,8 @@ export const SummaryCategory: FunctionComponent<{
     </div>
   );
 };
+
+export {
+  SummaryTooltip,
+  SummaryCategory,
+};

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

@@ -44,7 +44,7 @@ const SummaryNavigationHeader: FunctionComponent<{lhr: LH.Result}> = ({lhr}) =>
 /**
  * The div should behave like a JSX <>...</>. This still allows us to identify "rows" with CSS selectors.
  */
-export const SummaryFlowStep: FunctionComponent<{
+const SummaryFlowStep: FunctionComponent<{
   lhr: LH.Result,
   label: string,
   hashIndex: number,
@@ -106,7 +106,7 @@ const SummaryFlow: FunctionComponent = () => {
   );
 };
 
-export const SummaryHeader: FunctionComponent = () => {
+const SummaryHeader: FunctionComponent = () => {
   const flowResult = useFlowResult();
   const strings = useLocalizedStrings();
   const str_ = useStringFormatter();
@@ -151,7 +151,7 @@ const SummarySectionHeader: FunctionComponent = ({children}) => {
   );
 };
 
-export const Summary: FunctionComponent = () => {
+const Summary: FunctionComponent = () => {
   const strings = useLocalizedStrings();
 
   return (
@@ -163,3 +163,9 @@ export const Summary: FunctionComponent = () => {
     </div>
   );
 };
+
+export {
+  SummaryFlowStep,
+  SummaryHeader,
+  Summary,
+};

package/flow-report/src/util.ts

@@ -9,14 +9,14 @@ import {useContext, useEffect, useMemo, useState} from 'preact/hooks';
 
 import type {UIStringsType} from './i18n/ui-strings';
 
-export const FlowResultContext = createContext<LH.FlowResult|undefined>(undefined);
+const FlowResultContext = createContext<LH.FlowResult|undefined>(undefined);
 
 function getHashParam(param: string): string|null {
   const params = new URLSearchParams(location.hash.replace('#', '?'));
   return params.get(param);
 }
 
-export function classNames(...args: Array<string|undefined|Record<string, boolean>>): string {
+function classNames(...args: Array<string|undefined|Record<string, boolean>>): string {
   const classes = [];
   for (const arg of args) {
     if (!arg) continue;
@@ -35,12 +35,12 @@ export function classNames(...args: Array<string|undefined|Record<string, boolea
   return classes.join(' ');
 }
 
-export function getScreenDimensions(reportResult: LH.Result) {
+function getScreenDimensions(reportResult: LH.Result) {
   const {width, height} = reportResult.configSettings.screenEmulation;
   return {width, height};
 }
 
-export function getFullPageScreenshot(reportResult: LH.Result) {
+function getFullPageScreenshot(reportResult: LH.Result) {
   const fullPageScreenshotAudit = reportResult.audits['full-page-screenshot'];
   const fullPageScreenshot =
     fullPageScreenshotAudit &&
@@ -51,7 +51,7 @@ export function getFullPageScreenshot(reportResult: LH.Result) {
   return fullPageScreenshot || null;
 }
 
-export function getFilmstripFrames(
+function getFilmstripFrames(
   reportResult: LH.Result
 ): Array<{data: string}> | undefined {
   const filmstripAudit = reportResult.audits['screenshot-thumbnails'];
@@ -65,7 +65,7 @@ export function getFilmstripFrames(
   return frameItems || undefined;
 }
 
-export function getModeDescription(mode: LH.Result.GatherMode, strings: UIStringsType) {
+function getModeDescription(mode: LH.Result.GatherMode, strings: UIStringsType) {
   switch (mode) {
     case 'navigation': return strings.navigationDescription;
     case 'timespan': return strings.timespanDescription;
@@ -73,33 +73,33 @@ export function getModeDescription(mode: LH.Result.GatherMode, strings: UIString
   }
 }
 
-export function useFlowResult(): LH.FlowResult {
+function useFlowResult(): LH.FlowResult {
   const flowResult = useContext(FlowResultContext);
   if (!flowResult) throw Error('useFlowResult must be called in the FlowResultContext');
   return flowResult;
 }
 
-export function useHashParam(param: string) {
-  const [paramValue, setParamValue] = useState(getHashParam(param));
+function useHashParams(...params: string[]) {
+  const [paramValues, setParamValues] = useState(params.map(getHashParam));
 
   // Use two-way-binding on the URL hash.
-  // Triggers a re-render if the param changes.
+  // Triggers a re-render if any param changes.
   useEffect(() => {
     function hashListener() {
-      const newIndexString = getHashParam(param);
-      if (newIndexString === paramValue) return;
-      setParamValue(newIndexString);
+      const newParamValues = params.map(getHashParam);
+      if (newParamValues.every((value, i) => value === paramValues[i])) return;
+      setParamValues(newParamValues);
     }
     window.addEventListener('hashchange', hashListener);
     return () => window.removeEventListener('hashchange', hashListener);
-  }, [paramValue]);
+  }, [paramValues]);
 
-  return paramValue;
+  return paramValues;
 }
 
-export function useCurrentLhr(): LH.FlowResult.LhrRef|null {
+function useHashState(): LH.FlowResult.HashState|null {
   const flowResult = useFlowResult();
-  const indexString = useHashParam('index');
+  const [indexString, anchor] = useHashParams('index', 'anchor');
 
   // Memoize result so a new object is not created on every call.
   return useMemo(() => {
@@ -117,6 +117,18 @@ export function useCurrentLhr(): LH.FlowResult.LhrRef|null {
       return null;
     }
 
-    return {value: step.lhr, index};
-  }, [indexString, flowResult]);
+    return {currentLhr: step.lhr, index, anchor};
+  }, [indexString, flowResult, anchor]);
 }
+
+export {
+  FlowResultContext,
+  classNames,
+  getScreenDimensions,
+  getFullPageScreenshot,
+  getFilmstripFrames,
+  getModeDescription,
+  useFlowResult,
+  useHashParams,
+  useHashState,
+};

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

@@ -19,15 +19,15 @@ interface ReportRendererGlobals {
    reportRenderer: ReportRenderer,
 }
 
-export const ReportRendererContext = createContext<ReportRendererGlobals|undefined>(undefined);
+const ReportRendererContext = createContext<ReportRendererGlobals|undefined>(undefined);
 
-export function useReportRenderer() {
+function useReportRenderer() {
   const globals = useContext(ReportRendererContext);
   if (!globals) throw Error('Globals not defined');
   return globals;
 }
 
-export const ReportRendererProvider: FunctionComponent = ({children}) => {
+const ReportRendererProvider: FunctionComponent = ({children}) => {
   const globals = useMemo(() => {
     const dom = new DOM(document);
     const detailsRenderer = new DetailsRenderer(dom);
@@ -44,3 +44,9 @@ export const ReportRendererProvider: FunctionComponent = ({children}) => {
     <ReportRendererContext.Provider value={globals}>{children}</ReportRendererContext.Provider>
   );
 };
+
+export {
+  ReportRendererContext,
+  ReportRendererProvider,
+  useReportRenderer,
+};

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

@@ -16,7 +16,7 @@ import {useReportRenderer} from './report-renderer';
  * This function converts any anchor links under the provided element to a flow report link.
  * e.g. <a href="#link"> -> <a href="#index=0&anchor=link">
  */
-export function convertChildAnchors(element: HTMLElement, index: number) {
+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.
@@ -30,20 +30,25 @@ export function convertChildAnchors(element: HTMLElement, index: number) {
 
     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();
+    };
   }
 }
 
-export const Report: FunctionComponent<{currentLhr: LH.FlowResult.LhrRef}> =
-({currentLhr}) => {
+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(currentLhr.value, ref.current);
-      convertChildAnchors(ref.current, currentLhr.index);
-      const fullPageScreenshot = getFullPageScreenshot(currentLhr.value);
+      reportRenderer.renderReport(hashState.currentLhr, ref.current);
+      convertChildAnchors(ref.current, hashState.index);
+      const fullPageScreenshot = getFullPageScreenshot(hashState.currentLhr);
       if (fullPageScreenshot) {
         const container = dom.find('.lh-container', ref.current);
         ElementScreenshotRenderer.installOverlayFeature({
@@ -60,9 +65,14 @@ export const Report: FunctionComponent<{currentLhr: LH.FlowResult.LhrRef}> =
     return () => {
       if (ref.current) ref.current.textContent = '';
     };
-  }, [reportRenderer, currentLhr]);
+  }, [reportRenderer, hashState]);
 
   return (
     <div ref={ref} className="lh-root" data-testid="Report"/>
   );
 };
+
+export {
+  convertChildAnchors,
+  Report,
+};