Make `bindReporter` generic over metric type #359

brendankenny · 2023-06-16T22:27:48Z

Can land after #356

Parameterizes the bindReporter type on the metric passed in so that the callback can now be typed specifically for that metric (e.g. a result for CLSMetric must be using a CLSReportCallback).

This required initMetric to be parameterized similarly, so the returned metric type is now based on the metric name passed in.

let metric = initMetric('FCP');
//  ^ FCPMetric

The main change required was using a union of the metric types wherever the base Metric interface is currently used. This leaves most uses of it unchanged, but allows narrowing to which specific metric is being used based on the name property.

I renamed the existing Metric to be MetricBase and named the union Metric to keep the uses of it unchanged, but if someone has better naming suggestions, changing is no problem :)

brendankenny · 2023-06-16T22:37:39Z

src/lib/polyfills/interactionCountPolyfill.ts

@@ -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[]) => {


observe() checks the callback type, might as well trust it :)

brendankenny · 2023-06-16T22:39:10Z

src/onCLS.ts

@@ -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[] = [];


minor type bug that's an explicit error now with these changes (on sessionEntries.push(entry) below), but no functional change

brendankenny · 2023-06-16T22:42:55Z

src/types/base.ts

+import type {FIDMetric} from './fid.js';
+import type {INPMetric} from './inp.js';
+import type {LCPMetric} from './lcp.js';
+import type {TTFBMetric} from './ttfb.js';


import type vs import here doesn't change anything in the output since these files (currently) have only types in them, but generally good to be explicit that the circular dependency is purely in type-space and so won't ever be an issue

src/types/base.ts

tunetheweb

LGTM, but with one question.

src/lib/initMetric.ts

src/types/base.ts

##### [`v4.2.3](https://github.com/GoogleChrome/web-vitals/blob/HEAD/CHANGELOG.md#v423-2024-08-06) - Fix missing LoAF entries in INP attribution ([#512](GoogleChrome/web-vitals#512)) ##### [`v4.2.2](https://github.com/GoogleChrome/web-vitals/blob/HEAD/CHANGELOG.md#v422-2024-07-17) - Fix interaction count after bfcache restore ([#505](GoogleChrome/web-vitals#505)) ##### [`v4.2.1](https://github.com/GoogleChrome/web-vitals/blob/HEAD/CHANGELOG.md#v421-2024-06-30) - Fix compatibility issues with TypeScript v5.5 ([#497](GoogleChrome/web-vitals#497)) ##### [`v4.2.0](https://github.com/GoogleChrome/web-vitals/blob/HEAD/CHANGELOG.md#v420-2024-06-20) - Refactor INP attribution code to fix errors on Windows 10 ([#495](GoogleChrome/web-vitals#495)) ##### [`v4.1.1](https://github.com/GoogleChrome/web-vitals/blob/HEAD/CHANGELOG.md#v411-2024-06-10) - Fix pending LoAF cleanup logic ([#493](GoogleChrome/web-vitals#493)) ##### [`v4.1.0](https://github.com/GoogleChrome/web-vitals/blob/HEAD/CHANGELOG.md#v410-2024-06-06) - Move the support check to the top of the onINP() function ([#490](GoogleChrome/web-vitals#490)) - Fix missing LoAF attribution when entries are dispatched before event entries ([#487](GoogleChrome/web-vitals#487)) ##### [`v4.0.1](https://github.com/GoogleChrome/web-vitals/blob/HEAD/CHANGELOG.md#v401-2024-05-21) - Add the `ReportCallback` type back but deprecate it ([#483](GoogleChrome/web-vitals#483)) ##### [`v4.0.0](https://github.com/GoogleChrome/web-vitals/blob/HEAD/CHANGELOG.md#v400-2024-05-13) - **\[BREAKING]** Update types to support more generic usage ([#471](GoogleChrome/web-vitals#471)) - **\[BREAKING]** Split `waitingDuration` to make it easier to understand redirect delays ([#458](GoogleChrome/web-vitals#458)) - **\[BREAKING]** Rename `TTFBAttribution` fields from `*Time` to `*Duration` ([#453](GoogleChrome/web-vitals#453)) - **\[BREAKING]** Rename `resourceLoadTime` to `resourceLoadDuration` in LCP attribution ([#450](GoogleChrome/web-vitals#450)) - **\[BREAKING]** Add INP breakdown timings and LoAF attribution ([#442](GoogleChrome/web-vitals#442)) - **\[BREAKING]** Deprecate `onFID()` and remove previously deprecated APIs ([#435](GoogleChrome/web-vitals#435)) - Expose the target element in INP attribution ([#479](GoogleChrome/web-vitals#479)) - Save INP target after interactions to reduce null values when removed from the DOM ([#477](GoogleChrome/web-vitals#477)) - Cap TTFB in attribution ([#440](GoogleChrome/web-vitals#440)) - Fix `reportAllChanges` behavior for LCP when library is loaded late ([#468](GoogleChrome/web-vitals#468)) ##### [`v3.5.2](https://github.com/GoogleChrome/web-vitals/blob/HEAD/CHANGELOG.md#v352-2024-01-25) - Pick the first non-null `target` for INP attribution ([#421](GoogleChrome/web-vitals#421)) ##### [`v3.5.1](https://github.com/GoogleChrome/web-vitals/blob/HEAD/CHANGELOG.md#v351-2023-12-27) - Add extra guard for `PerformanceEventTiming` not existing ([#403](GoogleChrome/web-vitals#403)) ##### [`v3.5.0](https://github.com/GoogleChrome/web-vitals/blob/HEAD/CHANGELOG.md#v350-2023-09-28) - Run `onLCP` callback in separate task ([#386](GoogleChrome/web-vitals#386)) - Fix INP durationThreshold bug when set to 0 ([#372](GoogleChrome/web-vitals#372)) - Prevent FID entries being emitted as INP for non-supporting browsers ([#368](GoogleChrome/web-vitals#368)) ##### [`v3.4.0](https://github.com/GoogleChrome/web-vitals/blob/HEAD/CHANGELOG.md#v340-2023-07-11) - Make `bindReporter` generic over metric type ([#359](GoogleChrome/web-vitals#359)) - Update INP status in README ([#362](GoogleChrome/web-vitals#362)) - Fix Metric types for better TypeScript support ([#356](GoogleChrome/web-vitals#356)) - Fix selector for SVGs for attribution build ([#354](GoogleChrome/web-vitals#354)) ##### [`v3.3.2](https://github.com/GoogleChrome/web-vitals/blob/HEAD/CHANGELOG.md#v332-2023-05-29) - Fix attribution types ([#348](GoogleChrome/web-vitals#348)) - Safe access navigation entry type ([#290](GoogleChrome/web-vitals#290)) ##### [`v3.3.1](https://github.com/GoogleChrome/web-vitals/blob/HEAD/CHANGELOG.md#v331-2023-04-04) - Export metric rating thresholds in attribution build as well. ##### [`v3.3.0](https://github.com/GoogleChrome/web-vitals/blob/HEAD/CHANGELOG.md#v330-2023-03-09) - Export metric rating thresholds, add explicit `MetricRatingThresholds` type ([#323](GoogleChrome/web-vitals#323)) - Trim classname selector ([#328](GoogleChrome/web-vitals#328)) - Add link to CrUX versus RUM blog post ([#327](GoogleChrome/web-vitals#327)) - Prevent LCP being reported for hidden prerendered pages ([#326](GoogleChrome/web-vitals#326)) - Add Server Timing information to docs ([#324](GoogleChrome/web-vitals#324)) - Fix link in `onINP()` thresholds comment ([#318](GoogleChrome/web-vitals#318)) - Update web.dev link for `onINP()` ([#307](GoogleChrome/web-vitals#307)) - Add a note about when to load the library ([#305](GoogleChrome/web-vitals#305)) ##### [`v3.1.1](https://github.com/GoogleChrome/web-vitals/blob/HEAD/CHANGELOG.md#v311-2023-01-10) - Defer CLS logic until after `onFCP()` callback ([#297](GoogleChrome/web-vitals#297)) ##### [`v3.1.0](https://github.com/GoogleChrome/web-vitals/blob/HEAD/CHANGELOG.md#v310-2022-11-15) - Add support for `'restore'` as a `navigationType` ([#284](GoogleChrome/web-vitals#284)) - Report initial CLS value when `reportAllChanges` is true ([#283](GoogleChrome/web-vitals#283)) - Defer all observers until after activation ([#282](GoogleChrome/web-vitals#282)) - Ignore TTFB for loads where responseStart is zero ([#281](GoogleChrome/web-vitals#281)) - Defer execution of observer callbacks ([#278](GoogleChrome/web-vitals#278)) ##### [`v3.0.4](https://github.com/GoogleChrome/web-vitals/blob/HEAD/CHANGELOG.md#v304-2022-10-18) - Clamp LCP and FCP to 0 for prerendered pages ([#270](GoogleChrome/web-vitals#270)) ##### [`v3.0.3](https://github.com/GoogleChrome/web-vitals/blob/HEAD/CHANGELOG.md#v303-2022-10-04) - Ensure `attribution` object is always present in attribution build ([#265](GoogleChrome/web-vitals#265)) ##### [`v3.0.2](https://github.com/GoogleChrome/web-vitals/blob/HEAD/CHANGELOG.md#v302-2022-09-14) - Set an explicit unpkg dist file ([#261](GoogleChrome/web-vitals#261)) ##### [`v3.0.1](https://github.com/GoogleChrome/web-vitals/blob/HEAD/CHANGELOG.md#v301-2022-08-31) - Use the cjs extension for all UMD builds ([#257](GoogleChrome/web-vitals#257)) ##### [`v3.0.0](https://github.com/GoogleChrome/web-vitals/blob/HEAD/CHANGELOG.md#v300-2022-08-24) - **\[BREAKING]** Add a config object param to all metric functions ([#225](GoogleChrome/web-vitals#225)) - **\[BREAKING]** Report TTFB after a bfcache restore ([#220](GoogleChrome/web-vitals#220)) - **\[BREAKING]** Only include last LCP entry in metric entries ([#218](GoogleChrome/web-vitals#218)) - Update the metric ID prefix for v3 ([#251](GoogleChrome/web-vitals#251)) - Move the Navigation Timing API polyfill to the base+polyfill build ([#248](GoogleChrome/web-vitals#248)) - Add a metric rating property ([#246](GoogleChrome/web-vitals#246)) - Add deprecation notices for base+polyfill builds ([#242](GoogleChrome/web-vitals#242)) - Add a new attribution build for debugging issues in the field ([#237](GoogleChrome/web-vitals#237), [#244](GoogleChrome/web-vitals#244)) - Add support for prerendered pages ([#233](GoogleChrome/web-vitals#233)) - Rename the `ReportHandler` type to `ReportCallback`, with alias for back-compat ([#225](GoogleChrome/web-vitals#225), [#227](GoogleChrome/web-vitals#227)) - Add support for the new INP metric ([#221](GoogleChrome/web-vitals#221), [#232](GoogleChrome/web-vitals#232)) - Rename `getXXX()` functions to `onXXX()` ([#222](GoogleChrome/web-vitals#222)) - Add a `navigationType` property to the Metric object ([#219](GoogleChrome/web-vitals#219))

brendankenny mentioned this pull request Jun 16, 2023

Fix Metric types for better TypeScript support #356

Merged

brendankenny commented Jun 16, 2023

View reviewed changes

tunetheweb reviewed Jun 19, 2023

View reviewed changes

src/lib/initMetric.ts Show resolved Hide resolved

tunetheweb reviewed Jun 20, 2023

View reviewed changes

src/lib/initMetric.ts Outdated Show resolved Hide resolved

philipwalton approved these changes Jun 22, 2023

View reviewed changes

src/types/base.ts Outdated Show resolved Hide resolved

src/types/base.ts Outdated Show resolved Hide resolved

brendankenny changed the base branch from another-type-fix to main June 27, 2023 17:31

make bindReporter generic over metric type

d818bcd

brendankenny changed the base branch from main to another-type-fix June 27, 2023 17:45

switch type names back, restore MetricWithAttribution

591e059

brendankenny changed the base branch from another-type-fix to main June 27, 2023 17:52

brendankenny force-pushed the generic-bind-reporter branch from 581705c to 591e059 Compare June 27, 2023 17:52

tunetheweb merged commit e35816e into GoogleChrome:main Jul 7, 2023

tunetheweb changed the title ~~make bindReporter generic over metric type~~ Make bindReporter generic over metric type Jul 10, 2023

sethulakshmi-pm mentioned this pull request Oct 10, 2023

web vital upgrade to 3.5.0 instana/weasel#129

Closed

brendankenny deleted the generic-bind-reporter branch March 11, 2024 16:22

brendankenny mentioned this pull request May 1, 2024

Update types to support more generic usage #471

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Make `bindReporter` generic over metric type #359

Make `bindReporter` generic over metric type #359

brendankenny commented Jun 16, 2023

brendankenny Jun 16, 2023

brendankenny Jun 16, 2023

brendankenny Jun 16, 2023

tunetheweb left a comment

Make bindReporter generic over metric type #359

Make bindReporter generic over metric type #359

Conversation

brendankenny commented Jun 16, 2023

brendankenny Jun 16, 2023

Choose a reason for hiding this comment

brendankenny Jun 16, 2023

Choose a reason for hiding this comment

brendankenny Jun 16, 2023

Choose a reason for hiding this comment

tunetheweb left a comment

Choose a reason for hiding this comment

Make `bindReporter` generic over metric type #359

Make `bindReporter` generic over metric type #359