From 47d06dc669b34ef2cffaef01ad8be2d11cbe06ca Mon Sep 17 00:00:00 2001
From: Weston Ruter <westonruter@google.com>
Date: Mon, 9 Dec 2024 12:36:42 -0800
Subject: [PATCH] Export web-vitals callback functions to extensions rather
 than webVitalsLibrarySrc

---
 plugins/image-prioritizer/detect.js      |  5 ++---
 plugins/optimization-detective/detect.js | 21 ++++++++++++++++++---
 plugins/optimization-detective/types.ts  | 14 +++++++++++++-
 3 files changed, 33 insertions(+), 7 deletions(-)

diff --git a/plugins/image-prioritizer/detect.js b/plugins/image-prioritizer/detect.js
index acc72d8a7..6a73074c2 100644
--- 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
index efbaca747..fe4518c9e 100644
--- 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
index cafd6f9d3..d92c53214 100644
--- 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 >;