make bindReporter generic over metric type (#359)

* make bindReporter generic over metric type

* switch type names back, restore MetricWithAttribution

src/lib/bindReporter.ts

@@ -14,12 +14,12 @@
  * limitations under the License.
  */
 
-import {Metric, MetricRatingThresholds, ReportCallback} from '../types.js';
+import {MetricType, MetricRatingThresholds} from '../types.js';
 
 const getRating = (
   value: number,
   thresholds: MetricRatingThresholds
-): Metric['rating'] => {
+): MetricType['rating'] => {
   if (value > thresholds[1]) {
     return 'poor';
   }
@@ -29,9 +29,9 @@ const getRating = (
   return 'good';
 };
 
-export const bindReporter = (
-  callback: ReportCallback,
-  metric: Metric,
+export const bindReporter = <MetricName extends MetricType['name']>(
+  callback: (metric: Extract<MetricType, {name: MetricName}>) => void,
+  metric: Extract<MetricType, {name: MetricName}>,
   thresholds: MetricRatingThresholds,
   reportAllChanges?: boolean
 ) => {

src/lib/initMetric.ts

@@ -18,11 +18,14 @@ import {getBFCacheRestoreTime} from './bfcache.js';
 import {generateUniqueID} from './generateUniqueID.js';
 import {getActivationStart} from './getActivationStart.js';
 import {getNavigationEntry} from './getNavigationEntry.js';
-import {Metric} from '../types.js';
+import {MetricType} from '../types.js';
 
-export const initMetric = (name: Metric['name'], value?: number): Metric => {
+export const initMetric = <MetricName extends MetricType['name']>(
+  name: MetricName,
+  value?: number
+) => {
   const navEntry = getNavigationEntry();
-  let navigationType: Metric['navigationType'] = 'navigate';
+  let navigationType: MetricType['navigationType'] = 'navigate';
 
   if (getBFCacheRestoreTime() >= 0) {
     navigationType = 'back-forward-cache';
@@ -35,16 +38,19 @@ export const initMetric = (name: Metric['name'], value?: number): Metric => {
       navigationType = navEntry.type.replace(
         /_/g,
         '-'
-      ) as Metric['navigationType'];
+      ) as MetricType['navigationType'];
     }
   }
 
+  // Use `entries` type specific for the metric.
+  const entries: Extract<MetricType, {name: MetricName}>['entries'] = [];
+
   return {
     name,
     value: typeof value === 'undefined' ? -1 : value,
-    rating: 'good', // Will be updated if the value changes.
+    rating: 'good' as const, // If needed, will be updated when reported. `const` to keep the type from widening to `string`.
     delta: 0,
-    entries: [],
+    entries,
     id: generateUniqueID(),
     navigationType,
   };

src/lib/polyfills/interactionCountPolyfill.ts

@@ -15,7 +15,6 @@
  */
 
 import {observe} from '../observe.js';
-import {Metric} from '../../types.js';
 
 declare global {
   interface Performance {
@@ -27,8 +26,8 @@ let interactionCountEstimate = 0;
 let minKnownInteractionId = Infinity;
 let maxKnownInteractionId = 0;
 
-const updateEstimate = (entries: Metric['entries']) => {
-  (entries as PerformanceEventTiming[]).forEach((e) => {
+const updateEstimate = (entries: PerformanceEventTiming[]) => {
+  entries.forEach((e) => {
     if (e.interactionId) {
       minKnownInteractionId = Math.min(minKnownInteractionId, e.interactionId);
       maxKnownInteractionId = Math.max(maxKnownInteractionId, e.interactionId);

src/onCLS.ts

@@ -26,7 +26,6 @@ import {
   CLSMetric,
   CLSReportCallback,
   MetricRatingThresholds,
-  ReportCallback,
   ReportOpts,
 } from './types.js';
 
@@ -66,9 +65,8 @@ export const onCLS = (onReport: CLSReportCallback, opts?: ReportOpts) => {
       let report: ReturnType<typeof bindReporter>;
 
       let sessionValue = 0;
-      let sessionEntries: PerformanceEntry[] = [];
+      let sessionEntries: LayoutShift[] = [];
 
-      // const handleEntries = (entries: Metric['entries']) => {
       const handleEntries = (entries: LayoutShift[]) => {
         entries.forEach((entry) => {
           // Only count layout shifts without recent user input.
@@ -106,7 +104,7 @@ export const onCLS = (onReport: CLSReportCallback, opts?: ReportOpts) => {
       const po = observe('layout-shift', handleEntries);
       if (po) {
         report = bindReporter(
-          onReport as ReportCallback,
+          onReport,
           metric,
           CLSThresholds,
           opts!.reportAllChanges
@@ -123,7 +121,7 @@ export const onCLS = (onReport: CLSReportCallback, opts?: ReportOpts) => {
           sessionValue = 0;
           metric = initMetric('CLS', 0);
           report = bindReporter(
-            onReport as ReportCallback,
+            onReport,
             metric,
             CLSThresholds,
             opts!.reportAllChanges

src/onFCP.ts

@@ -26,7 +26,6 @@ import {
   FCPMetric,
   FCPReportCallback,
   MetricRatingThresholds,
-  ReportCallback,
   ReportOpts,
 } from './types.js';
 
@@ -71,7 +70,7 @@ export const onFCP = (onReport: FCPReportCallback, opts?: ReportOpts) => {
 
     if (po) {
       report = bindReporter(
-        onReport as ReportCallback,
+        onReport,
         metric,
         FCPThresholds,
         opts!.reportAllChanges
@@ -82,7 +81,7 @@ export const onFCP = (onReport: FCPReportCallback, opts?: ReportOpts) => {
       onBFCacheRestore((event) => {
         metric = initMetric('FCP');
         report = bindReporter(
-          onReport as ReportCallback,
+          onReport,
           metric,
           FCPThresholds,
           opts!.reportAllChanges

src/onFID.ts

@@ -31,7 +31,6 @@ import {
   FIDReportCallback,
   FirstInputPolyfillCallback,
   MetricRatingThresholds,
-  ReportCallback,
   ReportOpts,
 } from './types.js';
 
@@ -71,7 +70,7 @@ export const onFID = (onReport: FIDReportCallback, opts?: ReportOpts) => {
 
     const po = observe('first-input', handleEntries);
     report = bindReporter(
-      onReport as ReportCallback,
+      onReport,
       metric,
       FIDThresholds,
       opts!.reportAllChanges
@@ -100,7 +99,7 @@ export const onFID = (onReport: FIDReportCallback, opts?: ReportOpts) => {
       onBFCacheRestore(() => {
         metric = initMetric('FID');
         report = bindReporter(
-          onReport as ReportCallback,
+          onReport,
           metric,
           FIDThresholds,
           opts!.reportAllChanges
@@ -117,7 +116,7 @@ export const onFID = (onReport: FIDReportCallback, opts?: ReportOpts) => {
         onBFCacheRestore(() => {
           metric = initMetric('FID');
           report = bindReporter(
-            onReport as ReportCallback,
+            onReport,
             metric,
             FIDThresholds,
             opts!.reportAllChanges

src/onINP.ts

@@ -28,7 +28,6 @@ import {
   INPMetric,
   INPReportCallback,
   MetricRatingThresholds,
-  ReportCallback,
   ReportOpts,
 } from './types.js';
 
@@ -212,7 +211,7 @@ export const onINP = (onReport: INPReportCallback, opts?: ReportOpts) => {
     } as PerformanceObserverInit);
 
     report = bindReporter(
-      onReport as ReportCallback,
+      onReport,
       metric,
       INPThresholds,
       opts!.reportAllChanges
@@ -246,7 +245,7 @@ export const onINP = (onReport: INPReportCallback, opts?: ReportOpts) => {
 
         metric = initMetric('INP');
         report = bindReporter(
-          onReport as ReportCallback,
+          onReport,
           metric,
           INPThresholds,
           opts!.reportAllChanges

src/onLCP.ts

@@ -28,7 +28,6 @@ import {
   LCPMetric,
   MetricRatingThresholds,
   LCPReportCallback,
-  ReportCallback,
   ReportOpts,
 } from './types.js';
 
@@ -82,7 +81,7 @@ export const onLCP = (onReport: LCPReportCallback, opts?: ReportOpts) => {
 
     if (po) {
       report = bindReporter(
-        onReport as ReportCallback,
+        onReport,
         metric,
         LCPThresholds,
         opts!.reportAllChanges
@@ -111,7 +110,7 @@ export const onLCP = (onReport: LCPReportCallback, opts?: ReportOpts) => {
       onBFCacheRestore((event) => {
         metric = initMetric('LCP');
         report = bindReporter(
-          onReport as ReportCallback,
+          onReport,
           metric,
           LCPThresholds,
           opts!.reportAllChanges

src/onTTFB.ts

@@ -20,7 +20,6 @@ import {onBFCacheRestore} from './lib/bfcache.js';
 import {getNavigationEntry} from './lib/getNavigationEntry.js';
 import {
   MetricRatingThresholds,
-  ReportCallback,
   ReportOpts,
   TTFBReportCallback,
 } from './types.js';
@@ -66,7 +65,7 @@ export const onTTFB = (onReport: TTFBReportCallback, opts?: ReportOpts) => {
 
   let metric = initMetric('TTFB');
   let report = bindReporter(
-    onReport as ReportCallback,
+    onReport,
     metric,
     TTFBThresholds,
     opts.reportAllChanges
@@ -100,7 +99,7 @@ export const onTTFB = (onReport: TTFBReportCallback, opts?: ReportOpts) => {
       onBFCacheRestore(() => {
         metric = initMetric('TTFB', 0);
         report = bindReporter(
-          onReport as ReportCallback,
+          onReport,
           metric,
           TTFBThresholds,
           opts!.reportAllChanges

src/types/base.ts

@@ -18,6 +18,12 @@ import {
   FirstInputPolyfillEntry,
   NavigationTimingPolyfillEntry,
 } from './polyfills.js';
+import type {CLSMetric} from './cls.js';
+import type {FCPMetric} from './fcp.js';
+import type {FIDMetric} from './fid.js';
+import type {INPMetric} from './inp.js';
+import type {LCPMetric} from './lcp.js';
+import type {TTFBMetric} from './ttfb.js';
 
 export interface Metric {
   /**
@@ -85,6 +91,15 @@ export interface Metric {
     | 'restore';
 }
 
+/** The union of supported metric types. */
+export type MetricType =
+  | CLSMetric
+  | FCPMetric
+  | FIDMetric
+  | INPMetric
+  | LCPMetric
+  | TTFBMetric;
+
 /**
  * A version of the `Metric` that is used with the attribution build.
  */
@@ -113,7 +128,7 @@ export interface MetricWithAttribution extends Metric {
 export type MetricRatingThresholds = [number, number];
 
 export interface ReportCallback {
-  (metric: Metric): void;
+  (metric: MetricType): void;
 }
 
 export interface ReportOpts {

src/types/cls.ts

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import {LoadState, Metric} from './base.js';
+import type {LoadState, Metric} from './base.js';
 
 /**
  * A CLS-specific version of the Metric object.

src/types/fcp.ts

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import {LoadState, Metric} from './base.js';
+import type {LoadState, Metric} from './base.js';
 import {NavigationTimingPolyfillEntry} from './polyfills.js';
 
 /**

src/types/fid.ts

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import {LoadState, Metric} from './base.js';
+import type {LoadState, Metric} from './base.js';
 import {FirstInputPolyfillEntry} from './polyfills.js';
 
 /**

src/types/inp.ts

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import {LoadState, Metric} from './base.js';
+import type {LoadState, Metric} from './base.js';
 
 /**
  * An INP-specific version of the Metric object.

src/types/lcp.ts

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import {Metric} from './base.js';
+import type {Metric} from './base.js';
 import {NavigationTimingPolyfillEntry} from './polyfills.js';
 
 /**

src/types/ttfb.ts

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import {Metric} from './base.js';
+import type {Metric} from './base.js';
 import {NavigationTimingPolyfillEntry} from './polyfills.js';
 
 /**