Merge branch 'v5' into cap-inp-processing-duration

README.md

@@ -42,10 +42,6 @@ The library supports all of the [Core Web Vitals](https://web.dev/articles/vital
 
 - [First Contentful Paint (FCP)](https://web.dev/articles/fcp)
 - [Time to First Byte (TTFB)](https://web.dev/articles/ttfb)
-- [First Input Delay (FID)](https://web.dev/articles/fid)
-
-> [!CAUTION]
-> FID is deprecated and will be removed in the next major release.
 
 <a name="installation"><a>
 <a name="load-the-library"><a>
@@ -210,8 +206,8 @@ Note that some of these metrics will not report until the user has interacted wi
 
 Also, in some cases a metric callback may never be called:
 
-- FID and INP are not reported if the user never interacts with the page.
-- CLS, FCP, FID, and LCP are not reported if the page was loaded in the background.
+- INP is not reported if the user never interacts with the page.
+- CLS, FCP, and LCP are not reported if the page was loaded in the background.
 
 In other cases, a metric callback may be called more than once:
 
@@ -504,7 +500,7 @@ interface Metric {
   /**
    * The name of the metric (in acronym form).
    */
-  name: 'CLS' | 'FCP' | 'FID' | 'INP' | 'LCP' | 'TTFB';
+  name: 'CLS' | 'FCP' | 'INP' | 'LCP' | 'TTFB';
 
   /**
    * The current value of the metric.
@@ -583,18 +579,6 @@ interface FCPMetric extends Metric {
 }
 ```
 
-##### `FIDMetric`
-
-> [!CAUTION]
-> This interface is deprecated and will be removed in the next major release.
-
-```ts
-interface FIDMetric extends Metric {
-  name: 'FID';
-  entries: PerformanceEventTiming[];
-}
-```
-
 ##### `INPMetric`
 
 ```ts
@@ -701,20 +685,6 @@ function onFCP(callback: (metric: FCPMetric) => void, opts?: ReportOpts): void;
 
 Calculates the [FCP](https://web.dev/articles/fcp) value for the current page and calls the `callback` function once the value is ready, along with the relevant `paint` performance entry used to determine the value. The reported value is a [`DOMHighResTimeStamp`](https://developer.mozilla.org/docs/Web/API/DOMHighResTimeStamp).
 
-#### `onFID()`
-
-> [!CAUTION]
-> This function is deprecated and will be removed in the next major release.
-
-```ts
-function onFID(callback: (metric: FIDMetric) => void, opts?: ReportOpts): void;
-```
-
-Calculates the [FID](https://web.dev/articles/fid) value for the current page and calls the `callback` function once the value is ready, along with the relevant `first-input` performance entry used to determine the value. The reported value is a [`DOMHighResTimeStamp`](https://developer.mozilla.org/docs/Web/API/DOMHighResTimeStamp).
-
-> [!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.
-
 #### `onINP()`
 
 ```ts
@@ -867,41 +837,6 @@ interface FCPAttribution {
 }
 ```
 
-#### `FIDAttribution`
-
-> [!CAUTION]
-> This interface is deprecated and will be removed in the next major release.
-
-```ts
-interface FIDAttribution {
-  /**
-   * A selector identifying the element that the user interacted with. This
-   * element will be the `target` of the `event` dispatched.
-   */
-  eventTarget: string;
-  /**
-   * The time when the user interacted. This time will match the `timeStamp`
-   * value of the `event` dispatched.
-   */
-  eventTime: number;
-  /**
-   * The `type` of the `event` dispatched from the user interaction.
-   */
-  eventType: string;
-  /**
-   * The `PerformanceEventTiming` entry corresponding to FID.
-   */
-  eventEntry: PerformanceEventTiming;
-  /**
-   * The loading state of the document at the time when the first interaction
-   * occurred (see `LoadState` for details). If the first interaction occurred
-   * while the document was loading and executing script (e.g. usually in the
-   * `dom-interactive` phase) it can result in long input delays.
-   */
-  loadState: LoadState;
-}
-```
-
 #### `INPAttribution`
 
 ```ts
@@ -1095,7 +1030,6 @@ Browser support for each function is as follows:
 
 - `onCLS()`: Chromium
 - `onFCP()`: Chromium, Firefox, Safari
-- `onFID()`: Chromium, Firefox _(Deprecated)_
 - `onINP()`: Chromium
 - `onLCP()`: Chromium, Firefox
 - `onTTFB()`: Chromium, Firefox, Safari

package.json

@@ -31,10 +31,6 @@
       "types": "./dist/modules/onFCP.d.ts",
       "default": "./dist/modules/onFCP.js"
     },
-    "./onFID.js": {
-      "types": "./dist/modules/onFID.d.ts",
-      "default": "./dist/modules/onFID.js"
-    },
     "./onINP.js": {
       "types": "./dist/modules/onINP.d.ts",
       "default": "./dist/modules/onINP.js"
@@ -55,10 +51,6 @@
       "types": "./dist/modules/attribution/onFCP.d.ts",
       "default": "./dist/modules/attribution/onFCP.js"
     },
-    "./attribution/onFID.js": {
-      "types": "./dist/modules/attribution/onFID.d.ts",
-      "default": "./dist/modules/attribution/onFID.js"
-    },
     "./attribution/onINP.js": {
       "types": "./dist/modules/attribution/onINP.d.ts",
       "default": "./dist/modules/attribution/onINP.js"
@@ -110,7 +102,6 @@
     "Core Web Vitals",
     "CLS",
     "FCP",
-    "FID",
     "INP",
     "LCP",
     "TTFB"

src/attribution/index.ts

@@ -26,5 +26,4 @@ export {INPThresholds} from '../onINP.js';
 export {LCPThresholds} from '../onLCP.js';
 export {TTFBThresholds} from '../onTTFB.js';
 
-export * from './deprecated.js';
 export * from '../types.js';

src/index.ts

@@ -20,5 +20,4 @@ export {onINP, INPThresholds} from './onINP.js';
 export {onLCP, LCPThresholds} from './onLCP.js';
 export {onTTFB, TTFBThresholds} from './onTTFB.js';
 
-export * from './deprecated.js';
 export * from './types.js';

src/lib/generateUniqueID.ts

@@ -20,5 +20,5 @@
  * @return {string}
  */
 export const generateUniqueID = () => {
-  return `v4-${Date.now()}-${Math.floor(Math.random() * (9e12 - 1)) + 1e12}`;
+  return `v5-${Date.now()}-${Math.floor(Math.random() * (9e12 - 1)) + 1e12}`;
 };

src/lib/getSelector.ts

@@ -21,24 +21,24 @@ const getName = (node: Node) => {
     : name.toUpperCase().replace(/^#/, '');
 };
 
-export const getSelector = (node: Node | null | undefined, maxLen?: number) => {
+const MAX_LEN = 100;
+
+export const getSelector = (node: Node | null | undefined) => {
   let sel = '';
 
   try {
-    while (node && node.nodeType !== 9) {
+    while (node?.nodeType !== 9) {
       const el: Element = node as Element;
       const part = el.id
         ? '#' + el.id
-        : getName(el) +
-          (el.classList &&
-          el.classList.value &&
-          el.classList.value.trim() &&
-          el.classList.value.trim().length
-            ? '.' + el.classList.value.trim().replace(/\s+/g, '.')
-            : '');
-      if (sel.length + part.length > (maxLen || 100) - 1) return sel || part;
+        : [getName(el), ...Array.from(el.classList).sort()].join('.');
+      if (sel.length + part.length > MAX_LEN - 1) {
+        return sel || part;
+      }
       sel = sel ? part + '>' + sel : part;
-      if (el.id) break;
+      if (el.id) {
+        break;
+      }
       node = el.parentNode;
     }
   } catch (err) {

src/lib/polyfills/firstInputPolyfill.ts

@@ -99,7 +99,7 @@ const reportFirstInputDelayIfRecordedAndValid = () => {
  * Pointer events can trigger main or compositor thread behavior.
  * We differentiate these cases based on whether or not we see a
  * 'pointercancel' event, which are fired when we scroll. If we're scrolling
- * we don't need to report input delay since FID excludes scrolling and
+ * we don't need to report input delay since INP excludes scrolling and
  * pinch/zooming.
  */
 const onPointerDown = (delay: number, event: Event) => {