Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix Metric types for better TypeScript support #356

Merged
merged 2 commits into from
Jun 22, 2023
Merged

Fix Metric types for better TypeScript support #356

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
51c9d35
Another type fix
tunetheweb Jun 12, 2023
233408c
Easy way to set metric specific ReportCallback
tunetheweb Jun 15, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 3 additions & 2 deletions src/onCLS.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,7 @@ import {
CLSMetric,
CLSReportCallback,
MetricRatingThresholds,
ReportCallback,
ReportOpts,
} from './types.js';

Expand Down Expand Up @@ -105,7 +106,7 @@ export const onCLS = (onReport: CLSReportCallback, opts?: ReportOpts) => {
const po = observe('layout-shift', handleEntries);
if (po) {
report = bindReporter(
onReport,
onReport as ReportCallback,
metric,
CLSThresholds,
opts!.reportAllChanges
Expand All @@ -122,7 +123,7 @@ export const onCLS = (onReport: CLSReportCallback, opts?: ReportOpts) => {
sessionValue = 0;
metric = initMetric('CLS', 0);
report = bindReporter(
onReport,
onReport as ReportCallback,
metric,
CLSThresholds,
opts!.reportAllChanges
Expand Down
5 changes: 3 additions & 2 deletions src/onFCP.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,7 @@ import {
FCPMetric,
FCPReportCallback,
MetricRatingThresholds,
ReportCallback,
ReportOpts,
} from './types.js';

Expand Down Expand Up @@ -70,7 +71,7 @@ export const onFCP = (onReport: FCPReportCallback, opts?: ReportOpts) => {

if (po) {
report = bindReporter(
onReport,
onReport as ReportCallback,
metric,
FCPThresholds,
opts!.reportAllChanges
Expand All @@ -81,7 +82,7 @@ export const onFCP = (onReport: FCPReportCallback, opts?: ReportOpts) => {
onBFCacheRestore((event) => {
metric = initMetric('FCP');
report = bindReporter(
onReport,
onReport as ReportCallback,
metric,
FCPThresholds,
opts!.reportAllChanges
Expand Down
9 changes: 5 additions & 4 deletions src/onFID.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,7 @@ import {runOnce} from './lib/runOnce.js';
import {whenActivated} from './lib/whenActivated.js';
import {
FIDMetric,
FIDReportCallback,
FirstInputPolyfillCallback,
MetricRatingThresholds,
ReportCallback,
Expand All @@ -46,7 +47,7 @@ export const FIDThresholds: MetricRatingThresholds = [100, 300];
* _**Important:** since FID is only reported after the user interacts with the
* page, it's possible that it will not be reported for some page loads._
*/
export const onFID = (onReport: ReportCallback, opts?: ReportOpts) => {
export const onFID = (onReport: FIDReportCallback, opts?: ReportOpts) => {
// Set defaults
opts = opts || {};

Expand All @@ -70,7 +71,7 @@ export const onFID = (onReport: ReportCallback, opts?: ReportOpts) => {

const po = observe('first-input', handleEntries);
report = bindReporter(
onReport,
onReport as ReportCallback,
metric,
FIDThresholds,
opts!.reportAllChanges
Expand Down Expand Up @@ -99,7 +100,7 @@ export const onFID = (onReport: ReportCallback, opts?: ReportOpts) => {
onBFCacheRestore(() => {
metric = initMetric('FID');
report = bindReporter(
onReport,
onReport as ReportCallback,
metric,
FIDThresholds,
opts!.reportAllChanges
Expand All @@ -116,7 +117,7 @@ export const onFID = (onReport: ReportCallback, opts?: ReportOpts) => {
onBFCacheRestore(() => {
metric = initMetric('FID');
report = bindReporter(
onReport,
onReport as ReportCallback,
metric,
FIDThresholds,
opts!.reportAllChanges
Expand Down
7 changes: 4 additions & 3 deletions src/onINP.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,7 @@ import {
import {whenActivated} from './lib/whenActivated.js';
import {
INPMetric,
INPReportCallback,
MetricRatingThresholds,
ReportCallback,
ReportOpts,
Expand Down Expand Up @@ -149,7 +150,7 @@ const estimateP98LongestInteraction = () => {
* hidden. As a result, the `callback` function might be called multiple times
* during the same page load._
*/
export const onINP = (onReport: ReportCallback, opts?: ReportOpts) => {
export const onINP = (onReport: INPReportCallback, opts?: ReportOpts) => {
// Set defaults
opts = opts || {};

Expand Down Expand Up @@ -211,7 +212,7 @@ export const onINP = (onReport: ReportCallback, opts?: ReportOpts) => {
} as PerformanceObserverInit);

report = bindReporter(
onReport,
onReport as ReportCallback,
metric,
INPThresholds,
opts!.reportAllChanges
Expand Down Expand Up @@ -245,7 +246,7 @@ export const onINP = (onReport: ReportCallback, opts?: ReportOpts) => {

metric = initMetric('INP');
report = bindReporter(
onReport,
onReport as ReportCallback,
metric,
INPThresholds,
opts!.reportAllChanges
Expand Down
7 changes: 4 additions & 3 deletions src/onLCP.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,7 @@ import {whenActivated} from './lib/whenActivated.js';
import {
LCPMetric,
MetricRatingThresholds,
LCPReportCallback,
ReportCallback,
ReportOpts,
} from './types.js';
Expand All @@ -47,7 +48,7 @@ const reportedMetricIDs: Record<string, boolean> = {};
* performance entry is dispatched, or once the final value of the metric has
* been determined.
*/
export const onLCP = (onReport: ReportCallback, opts?: ReportOpts) => {
export const onLCP = (onReport: LCPReportCallback, opts?: ReportOpts) => {
// Set defaults
opts = opts || {};

Expand Down Expand Up @@ -81,7 +82,7 @@ export const onLCP = (onReport: ReportCallback, opts?: ReportOpts) => {

if (po) {
report = bindReporter(
onReport,
onReport as ReportCallback,
metric,
LCPThresholds,
opts!.reportAllChanges
Expand Down Expand Up @@ -110,7 +111,7 @@ export const onLCP = (onReport: ReportCallback, opts?: ReportOpts) => {
onBFCacheRestore((event) => {
metric = initMetric('LCP');
report = bindReporter(
onReport,
onReport as ReportCallback,
metric,
LCPThresholds,
opts!.reportAllChanges
Expand Down
13 changes: 9 additions & 4 deletions src/onTTFB.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,12 @@ import {bindReporter} from './lib/bindReporter.js';
import {initMetric} from './lib/initMetric.js';
import {onBFCacheRestore} from './lib/bfcache.js';
import {getNavigationEntry} from './lib/getNavigationEntry.js';
import {MetricRatingThresholds, ReportCallback, ReportOpts} from './types.js';
import {
MetricRatingThresholds,
ReportCallback,
ReportOpts,
TTFBReportCallback,
} from './types.js';
import {getActivationStart} from './lib/getActivationStart.js';
import {whenActivated} from './lib/whenActivated.js';

Expand Down Expand Up @@ -55,13 +60,13 @@ const whenReady = (callback: () => void) => {
* includes time spent on DNS lookup, connection negotiation, network latency,
* and server processing time.
*/
export const onTTFB = (onReport: ReportCallback, opts?: ReportOpts) => {
export const onTTFB = (onReport: TTFBReportCallback, opts?: ReportOpts) => {
// Set defaults
opts = opts || {};

let metric = initMetric('TTFB');
let report = bindReporter(
onReport,
onReport as ReportCallback,
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think this is probably fine for now since this is internal code...

...but if we're going to be exporting metric-specific versions of all of these types, it seems like ideally we would be able to make the bindReporter() function understand those types as well. E.g. something similar to what we do here:

web-vitals/src/lib/observe.ts

Lines 40 to 44 in 1d2c191

export const observe = <K extends keyof PerformanceEntryMap>(
type: K,
callback: (entries: PerformanceEntryMap[K]) => void,
opts?: PerformanceObserverInit
): PerformanceObserver | undefined => {

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I couldn't figure out a way to do this as the metrics are not the same (particularly attribution has an extra attribution attribute). But open to pointers here.

Also, unlike in the observe example (where the specific type had to be passed on to the observer), we're treating all the metrics the same in bindreporter, so seemed easier to just assert this as a ReportCallback type and not treat them as the 12 individual types (6 metrics, and 6 metrics with attribution).

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Gotcha. I think it may be possible, but I don't think it's worth spending time figuring out so 👍

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah, it's the mismatch between the specific callbacks for the on* methods (e.g. TTFBReportCallback for onTTFB()), and the fact that bindReporter() currently requires its onReport to be able to handle any of the metrics (which e.g. TTFBReportCallback purposefully doesn't) that you get the type error and the need for the type assertion.

I'm happy to take a stab at parameterizing bindReporter after this PR lands. Because bindReporter truly doesn't care about the handler internally, it should be relatively disruption-free type rearranging (and I believe should streamline some metric type stuff at the same time).

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

PR in #359

metric,
TTFBThresholds,
opts.reportAllChanges
Expand Down Expand Up @@ -95,7 +100,7 @@ export const onTTFB = (onReport: ReportCallback, opts?: ReportOpts) => {
onBFCacheRestore(() => {
metric = initMetric('TTFB', 0);
report = bindReporter(
onReport,
onReport as ReportCallback,
metric,
TTFBThresholds,
opts!.reportAllChanges
Expand Down
4 changes: 0 additions & 4 deletions src/types/base.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -116,10 +116,6 @@ export interface ReportCallback {
(metric: Metric): void;
}

export interface ReportCallbackWithAttribution {
(metric: MetricWithAttribution): void;
}

export interface ReportOpts {
reportAllChanges?: boolean;
durationThreshold?: number;
Expand Down
12 changes: 3 additions & 9 deletions src/types/cls.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,12 +14,7 @@
* limitations under the License.
*/

import {
LoadState,
Metric,
ReportCallback,
ReportCallbackWithAttribution,
} from './base.js';
import {LoadState, Metric} from './base.js';

/**
* A CLS-specific version of the Metric object.
Expand Down Expand Up @@ -81,14 +76,13 @@ export interface CLSMetricWithAttribution extends CLSMetric {
/**
* A CLS-specific version of the ReportCallback function.
*/
export interface CLSReportCallback extends ReportCallback {
export interface CLSReportCallback {
(metric: CLSMetric): void;
}

/**
* A CLS-specific version of the ReportCallback function with attribution.
*/
export interface CLSReportCallbackWithAttribution
extends ReportCallbackWithAttribution {
export interface CLSReportCallbackWithAttribution {
(metric: CLSMetricWithAttribution): void;
}
12 changes: 3 additions & 9 deletions src/types/fcp.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,12 +14,7 @@
* limitations under the License.
*/

import {
LoadState,
Metric,
ReportCallback,
ReportCallbackWithAttribution,
} from './base.js';
import {LoadState, Metric} from './base.js';
import {NavigationTimingPolyfillEntry} from './polyfills.js';

/**
Expand Down Expand Up @@ -73,14 +68,13 @@ export interface FCPMetricWithAttribution extends FCPMetric {
/**
* An FCP-specific version of the ReportCallback function.
*/
export interface FCPReportCallback extends ReportCallback {
export interface FCPReportCallback {
(metric: FCPMetric): void;
}

/**
* An FCP-specific version of the ReportCallback function with attribution.
*/
export interface FCPReportCallbackWithAttribution
extends ReportCallbackWithAttribution {
export interface FCPReportCallbackWithAttribution {
(metric: FCPMetricWithAttribution): void;
}
12 changes: 3 additions & 9 deletions src/types/fid.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,12 +14,7 @@
* limitations under the License.
*/

import {
LoadState,
Metric,
ReportCallback,
ReportCallbackWithAttribution,
} from './base.js';
import {LoadState, Metric} from './base.js';
import {FirstInputPolyfillEntry} from './polyfills.js';

/**
Expand Down Expand Up @@ -74,14 +69,13 @@ export interface FIDMetricWithAttribution extends FIDMetric {
/**
* An FID-specific version of the ReportCallback function.
*/
export interface FIDReportCallback extends ReportCallback {
export interface FIDReportCallback {
(metric: FIDMetric): void;
}

/**
* An FID-specific version of the ReportCallback function with attribution.
*/
export interface FIDReportCallbackWithAttribution
extends ReportCallbackWithAttribution {
export interface FIDReportCallbackWithAttribution {
(metric: FIDMetricWithAttribution): void;
}
12 changes: 3 additions & 9 deletions src/types/inp.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,12 +14,7 @@
* limitations under the License.
*/

import {
LoadState,
Metric,
ReportCallback,
ReportCallbackWithAttribution,
} from './base.js';
import {LoadState, Metric} from './base.js';

/**
* An INP-specific version of the Metric object.
Expand Down Expand Up @@ -73,14 +68,13 @@ export interface INPMetricWithAttribution extends INPMetric {
/**
* An INP-specific version of the ReportCallback function.
*/
export interface INPReportCallback extends ReportCallback {
export interface INPReportCallback {
(metric: INPMetric): void;
}

/**
* An INP-specific version of the ReportCallback function with attribution.
*/
export interface INPReportCallbackWithAttribution
extends ReportCallbackWithAttribution {
export interface INPReportCallbackWithAttribution {
(metric: INPMetricWithAttribution): void;
}
7 changes: 3 additions & 4 deletions src/types/lcp.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@
* limitations under the License.
*/

import {Metric, ReportCallback, ReportCallbackWithAttribution} from './base.js';
import {Metric} from './base.js';
import {NavigationTimingPolyfillEntry} from './polyfills.js';

/**
Expand Down Expand Up @@ -91,14 +91,13 @@ export interface LCPMetricWithAttribution extends LCPMetric {
/**
* An LCP-specific version of the ReportCallback function.
*/
export interface LCPReportCallback extends ReportCallback {
export interface LCPReportCallback {
(metric: LCPMetric): void;
}

/**
* An LCP-specific version of the ReportCallback function with attribution.
*/
export interface LCPReportCallbackWithAttribution
extends ReportCallbackWithAttribution {
export interface LCPReportCallbackWithAttribution {
(metric: LCPMetricWithAttribution): void;
}
7 changes: 3 additions & 4 deletions src/types/ttfb.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@
* limitations under the License.
*/

import {Metric, ReportCallback, ReportCallbackWithAttribution} from './base.js';
import {Metric} from './base.js';
import {NavigationTimingPolyfillEntry} from './polyfills.js';

/**
Expand Down Expand Up @@ -69,14 +69,13 @@ export interface TTFBMetricWithAttribution extends TTFBMetric {
/**
* A TTFB-specific version of the ReportCallback function.
*/
export interface TTFBReportCallback extends ReportCallback {
export interface TTFBReportCallback {
(metric: TTFBMetric): void;
}

/**
* A TTFB-specific version of the ReportCallback function with attribution.
*/
export interface TTFBReportCallbackWithAttribution
extends ReportCallbackWithAttribution {
export interface TTFBReportCallbackWithAttribution {
(metric: TTFBMetricWithAttribution): void;
}