Skip to content

Commit

Permalink
Export web-vitals callback functions to extensions rather than webVit…
Browse files Browse the repository at this point in the history
…alsLibrarySrc
  • Loading branch information
westonruter committed Dec 9, 2024
1 parent 3ac0253 commit 47d06dc
Show file tree
Hide file tree
Showing 3 changed files with 33 additions and 7 deletions.
5 changes: 2 additions & 3 deletions plugins/image-prioritizer/detect.js
Original file line number Diff line number Diff line change
Expand Up @@ -63,10 +63,9 @@ function warn( ...message ) {
* @type {InitializeCallback}
* @param {InitializeArgs} args Args.
*/
export async function initialize( { isDebug, webVitalsLibrarySrc } ) {
const { onLCP } = await import( webVitalsLibrarySrc );
export async function initialize( { isDebug, onLCP } ) {
onLCP(
( /** @type {LCPMetric} */ metric ) => {
( metric ) => {
handleLCPMetric( metric, isDebug );
},
{
Expand Down
21 changes: 18 additions & 3 deletions plugins/optimization-detective/detect.js
Original file line number Diff line number Diff line change
@@ -1,6 +1,11 @@
/**
* @typedef {import("web-vitals").LCPMetric} LCPMetric
* @typedef {import("./types.ts").ElementData} ElementData
* @typedef {import("./types.ts").OnTTFBFunction} OnTTFBFunction
* @typedef {import("./types.ts").OnFCPFunction} OnFCPFunction
* @typedef {import("./types.ts").OnLCPFunction} OnLCPFunction
* @typedef {import("./types.ts").OnINPFunction} OnINPFunction
* @typedef {import("./types.ts").OnCLSFunction} OnCLSFunction
* @typedef {import("./types.ts").URLMetric} URLMetric
* @typedef {import("./types.ts").URLMetricGroupStatus} URLMetricGroupStatus
* @typedef {import("./types.ts").Extension} Extension
Expand Down Expand Up @@ -335,6 +340,14 @@ export default async function detect( {
{ once: true }
);

const {
/** @type OnTTFBFunction */ onTTFB,
/** @type OnFCPFunction */ onFCP,
/** @type OnLCPFunction */ onLCP,
/** @type OnINPFunction */ onINP,
/** @type OnCLSFunction */ onCLS,
} = await import( webVitalsLibrarySrc );

// TODO: Does this make sense here?
// Prevent detection when page is not scrolled to the initial viewport.
if ( doc.documentElement.scrollTop > 0 ) {
Expand Down Expand Up @@ -368,7 +381,11 @@ export default async function detect( {
if ( extension.initialize instanceof Function ) {
const initializePromise = extension.initialize( {
isDebug,
webVitalsLibrarySrc,
onTTFB,
onFCP,
onLCP,
onINP,
onCLS,
} );
if ( initializePromise instanceof Promise ) {
extensionInitializePromises.push( initializePromise );
Expand Down Expand Up @@ -454,8 +471,6 @@ export default async function detect( {
} );
}

const { onLCP } = await import( webVitalsLibrarySrc );

/** @type {LCPMetric[]} */
const lcpMetricCandidates = [];

Expand Down
14 changes: 13 additions & 1 deletion plugins/optimization-detective/types.ts
Original file line number Diff line number Diff line change
@@ -1,6 +1,8 @@
// h/t https://stackoverflow.com/a/59801602/93579
type ExcludeProps< T > = { [ k: string ]: any } & { [ K in keyof T ]?: never };

import { onTTFB, onFCP, onLCP, onINP, onCLS } from 'web-vitals';

export interface ElementData {
isLCP: boolean;
isLCPCandidate: boolean;
Expand Down Expand Up @@ -28,9 +30,19 @@ export interface URLMetricGroupStatus {
complete: boolean;
}

export type OnTTFBFunction = typeof onTTFB;
export type OnFCPFunction = typeof onFCP;
export type OnLCPFunction = typeof onLCP;
export type OnINPFunction = typeof onINP;
export type OnCLSFunction = typeof onCLS;

export type InitializeArgs = {
readonly isDebug: boolean;
readonly webVitalsLibrarySrc: string;
readonly onTTFB: OnTTFBFunction;
readonly onFCP: OnFCPFunction;
readonly onLCP: OnLCPFunction;
readonly onINP: OnINPFunction;
readonly onCLS: OnCLSFunction;
};

export type InitializeCallback = ( args: InitializeArgs ) => Promise< void >;
Expand Down

0 comments on commit 47d06dc

Please sign in to comment.