Export web-vitals callback functions to extensions rather than webVitalsLibrarySrc

westonruter · westonruter · commit 47d06dc669b3 · 2024-12-09T12:36:42.000-08:00
diff --git a/plugins/image-prioritizer/detect.js b/plugins/image-prioritizer/detect.js
@@ -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 );
 		},
 		{
diff --git a/plugins/optimization-detective/detect.js b/plugins/optimization-detective/detect.js
@@ -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
@@ -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 ) {
@@ -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 );
@@ -454,8 +471,6 @@ export default async function detect( {
 		} );
 	}
 
-	const { onLCP } = await import( webVitalsLibrarySrc );
-
 	/** @type {LCPMetric[]} */
 	const lcpMetricCandidates = [];
 
diff --git a/plugins/optimization-detective/types.ts b/plugins/optimization-detective/types.ts
@@ -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;
@@ -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 >;
