From b262ba98144883fbdc3faa586cfabd25b03e03fc Mon Sep 17 00:00:00 2001
From: ethangardner <ethan.gardner@gsa.gov>
Date: Wed, 27 Nov 2024 16:49:42 -0500
Subject: [PATCH 01/22] begin working on loaf attribution format

---
 demo/index.html                               |  31 +-
 src/format-long-animation-frame-data.ts       |  94 ++++++
 src/index.ts                                  |   1 +
 .../format-long-animation-frame-data.test.ts  | 297 ++++++++++++++++++
 4 files changed, 421 insertions(+), 2 deletions(-)
 create mode 100644 src/format-long-animation-frame-data.ts
 create mode 100644 test/unit/format-long-animation-frame-data.test.ts
diff --git a/demo/index.html b/demo/index.html
index b7cc06a..399d0c5 100644
--- a/demo/index.html
+++ b/demo/index.html
@@ -23,6 +23,30 @@
     below.
   -->
   <script type="module" src="../dist/dap-performance-addon.js"></script>
+  <script type="module">
+    const button = document.querySelector('#thrash-layout');
+    button.addEventListener('click', () => {
+      const elem = document.querySelector('#thrash-element-1');
+      // eslint-disable-next-line no-plusplus
+      for (let i = 0; i < 1000; i++) {
+        // Read height (this forces layout recalculation)
+        const height = elem.offsetHeight;
+        // Write width (this marks layout as dirty)
+        elem.style.width = `${height + 1}px`;
+      }
+      elem.removeAttribute('style');
+    });
+
+    button.addEventListener('click', () => {
+      const elem = document.querySelector('#thrash-element-2');
+      // eslint-disable-next-line no-plusplus
+      for (let i = 0; i < 1000; i++) {
+        const height = elem.offsetHeight;
+        elem.style.width = `${height + 1}px`;
+      }
+      elem.removeAttribute('style');
+    });
+  </script>
 </head>
 <body>
 <main>
@@ -33,7 +57,10 @@
   <h1>
     Demo page
   </h1>
-  <div class="article-container">
+  <p>
+    <button id="thrash-layout">This button will cause layout thrashing</button>
+  </p>
+  <div class="article-container" id="thrash-element-1">
     <article>
       <img src="https://picsum.photos/640/360"
            srcset="https://picsum.photos/1024/576 1024w, https://picsum.photos/960/540 960w, https://picsum.photos/640/360 640w, https://picsum.photos/480/270 480w"
@@ -44,7 +71,7 @@ <h1>
         shift down considerably after the image is loaded.
       </p>
     </article>
-    <div class="sidebar">
+    <div class="sidebar" id="thrash-element-2">
       <div class="related-articles">
         <h2>
           Related Articles
diff --git a/src/format-long-animation-frame-data.ts b/src/format-long-animation-frame-data.ts
new file mode 100644
index 0000000..244fa16
--- /dev/null
+++ b/src/format-long-animation-frame-data.ts
@@ -0,0 +1,94 @@
+import type { INPAttribution } from 'web-vitals';
+
+// export const formatLongAnimationFrameData = (attribution: INPAttribution) => {
+//
+// };
+
+// export const formatLongAnimationFrameData = (attribution: INPAttribution) => {
+//   // The last LoAF entry is usually the most relevant.
+//   const loaf = attribution.longAnimationFrameEntries.at(-1);
+//   const script = loaf?.scripts.sort((a, b) => b.duration - a.duration)[0];
+//   let obj = {}
+//
+//   if(script) {
+//     // long event handler
+//     const { invokerType } = script; // always event-listener for long event handlers
+//     const { invoker } = script; // element that had the event listener
+//     const { sourceURL } = script;
+//     const { sourceCharPosition } = script;
+//     const { sourceFunctionName } = script;
+//
+//     // long input delay: during page load - was this from script evaluation
+//     const { invokerType } = script; //
+//     const { sourceLocation } = script;
+//
+//     // long input delay: after page load - was this from script evaluation
+//     const { invokerType } = script; // user-callback (recurring timer like setInterval), event-listener, module-script, classic-script. Could also be expensive fetch call
+//     const { sourceURL } = script; // https://example.com/app.js
+//     const { sourceCharPosition } = script; // 83
+//     const { sourceFunctionName } = script; // update
+//
+//     // presentation delay
+//     const { invokerType } = script; // user-callback (recurring timer like setInterval), event-listener, module-script, classic-script. Could also be expensive fetch call
+//     const { sourceURL } = script; // https://example.com/app.js
+//     const { sourceCharPosition } = script; // 83
+//     const { sourceFunctionName } = script; // update
+//   }
+// }
+
+
+export const formatLongAnimationFrameData = (attribution: INPAttribution) => {
+  const loafEntries = attribution.longAnimationFrameEntries;
+  if(typeof loafEntries === 'undefined' || loafEntries.length === 0) {
+    return {};
+  }
+
+  let loafAttribution = {
+    debug_loaf_script_total_duration: 0
+  };
+
+  // The last LoAF entry is usually the most relevant.
+  const loaf = attribution.longAnimationFrameEntries.at(-1);
+  if(typeof loaf !== 'undefined') {
+    const loafEndTime = loaf.startTime + loaf.duration;
+    loaf?.scripts.forEach(script => {
+      if (script.duration <= loafAttribution.debug_loaf_script_total_duration) {
+        return;
+      }
+      loafAttribution = {
+        // Stats for the LoAF entry itself.
+        debug_loaf_entry_start_time: loaf.startTime,
+        debug_loaf_entry_end_time: loafEndTime,
+        debug_loaf_entry_work_duration: loaf.renderStart ? loaf.renderStart - loaf.startTime : loaf.duration,
+        debug_loaf_entry_render_duration: loaf.renderStart ? loafEndTime - loaf.renderStart : 0,
+        debug_loaf_entry_total_forced_style_and_layout_duration: loaf.scripts.reduce((sum, script) => sum + script.forcedStyleAndLayoutDuration, 0),
+        debug_loaf_entry_pre_layout_duration: loaf.styleAndLayoutStart ? loaf.styleAndLayoutStart - loaf.renderStart : 0,
+        debug_loaf_entry_style_and_layout_duration: loaf.styleAndLayoutStart ? loafEndTime - loaf.styleAndLayoutStart : 0,
+
+        // Stats for the longest script in the LoAF entry.
+        debug_loaf_script_total_duration: script.duration,
+        debug_loaf_script_compile_duration: script.executionStart - script.startTime,
+        debug_loaf_script_exec_duration: script.startTime + script.duration - script.executionStart,
+        debug_loaf_script_forced_style_and_layout_duration: script.forcedStyleAndLayoutDuration,
+        debug_loaf_script_type: script.invokerType,
+        debug_loaf_script_invoker: script.invoker,
+        debug_loaf_script_source_url: script.sourceURL,
+        debug_loaf_script_source_function_name: script.sourceFunctionName,
+        debug_loaf_script_source_char_position: script.sourceCharPosition,
+
+        // LoAF metadata.
+        debug_loaf_meta_length: loafEntries.length,
+      }
+    });
+  }
+
+  if (!loafAttribution.debug_loaf_script_total_duration) {
+    return {};
+  }
+
+  // The LoAF script with the single longest total duration.
+  return Object.fromEntries(Object.entries(loafAttribution).map(([k, v]) => 
+    // Convert all floats to ints.
+     [k, typeof v === 'number' ? Math.floor(v) : v]
+  ));
+}
diff --git a/src/index.ts b/src/index.ts
index 48e86e4..a8ab22b 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -5,6 +5,7 @@ const initWebVitalsEvents = () => {
   onCLS(sendToAnalytics);
   onFCP(sendToAnalytics);
   onINP(sendToAnalytics);
+  onINP(console.log);
   onLCP(sendToAnalytics);
 };
 
diff --git a/test/unit/format-long-animation-frame-data.test.ts b/test/unit/format-long-animation-frame-data.test.ts
new file mode 100644
index 0000000..53ea21e
--- /dev/null
+++ b/test/unit/format-long-animation-frame-data.test.ts
@@ -0,0 +1,297 @@
+import { it, describe, expect } from 'vitest';
+import { formatLongAnimationFrameData } from '../../src/format-long-animation-frame-data.js';
+
+describe('formatLongAnimationFrameData', () => {
+  it('should format INP data correctly', () => {
+    const attribution = {
+      "interactionTarget": "#thrash-layout",
+      "interactionTargetElement": {},
+      "interactionType": "pointer",
+      "interactionTime": 5168847,
+      "nextPaintTime": 5168951,
+      "processedEventEntries": [
+        {
+          "name": "pointerup",
+          "entryType": "event",
+          "startTime": 5168847,
+          "duration": 104,
+          "interactionId": 3343,
+          "processingStart": 5168847.799999952,
+          "processingEnd": 5168847.799999952,
+          "cancelable": true
+        },
+        {
+          "name": "mouseup",
+          "entryType": "event",
+          "startTime": 5168847,
+          "duration": 104,
+          "interactionId": 0,
+          "processingStart": 5168847.799999952,
+          "processingEnd": 5168847.799999952,
+          "cancelable": true
+        },
+        {
+          "name": "click",
+          "entryType": "event",
+          "startTime": 5168847,
+          "duration": 104,
+          "interactionId": 3343,
+          "processingStart": 5168847.799999952,
+          "processingEnd": 5168933.600000024,
+          "cancelable": true
+        },
+        {
+          "name": "pointerup",
+          "entryType": "event",
+          "startTime": 5168847,
+          "duration": 104,
+          "interactionId": 3343,
+          "processingStart": 5168847.799999952,
+          "processingEnd": 5168847.799999952,
+          "cancelable": true
+        },
+        {
+          "name": "mouseup",
+          "entryType": "event",
+          "startTime": 5168847,
+          "duration": 104,
+          "interactionId": 0,
+          "processingStart": 5168847.799999952,
+          "processingEnd": 5168847.799999952,
+          "cancelable": true
+        },
+        {
+          "name": "click",
+          "entryType": "event",
+          "startTime": 5168847,
+          "duration": 104,
+          "interactionId": 3343,
+          "processingStart": 5168847.799999952,
+          "processingEnd": 5168933.600000024,
+          "cancelable": true
+        }
+      ],
+      "longAnimationFrameEntries": [
+        {
+          "name": "long-animation-frame",
+          "entryType": "long-animation-frame",
+          "startTime": 5168847.600000024,
+          "duration": 90,
+          "renderStart": 5168936.1999999285,
+          "styleAndLayoutStart": 5168936.1999999285,
+          "firstUIEventTimestamp": 5168847,
+          "blockingDuration": 38,
+          "scripts": [
+            {
+              "name": "script",
+              "entryType": "script",
+              "startTime": 5168847.899999976,
+              "duration": 85,
+              "invoker": "BUTTON#thrash-layout.onclick",
+              "invokerType": "event-listener",
+              "windowAttribution": "self",
+              "executionStart": 5168847.899999976,
+              "forcedStyleAndLayoutDuration": 80,
+              "pauseDuration": 0,
+              "sourceURL": "http://localhost:8000/demo/",
+              "sourceFunctionName": "",
+              "sourceCharPosition": 72
+            }
+          ]
+        }
+      ],
+      "inputDelay": 0.7999999523162842,
+      "processingDuration": 85.80000007152557,
+      "presentationDelay": 17.399999976158142,
+      "loadState": "complete"
+    };
+
+    // @ts-ignore
+    const result = formatLongAnimationFrameData(attribution);
+
+    expect(result).toEqual({
+      "debug_loaf_entry_end_time": 5168937,
+      "debug_loaf_entry_pre_layout_duration": 0,
+      "debug_loaf_entry_render_duration": 1,
+      "debug_loaf_entry_start_time": 5168847,
+      "debug_loaf_entry_style_and_layout_duration": 1,
+      "debug_loaf_entry_total_forced_style_and_layout_duration": 80,
+      "debug_loaf_entry_work_duration": 88,
+      "debug_loaf_meta_length": 1,
+      "debug_loaf_script_compile_duration": 0,
+      "debug_loaf_script_exec_duration": 85,
+      "debug_loaf_script_forced_style_and_layout_duration": 80,
+      "debug_loaf_script_invoker": "BUTTON#thrash-layout.onclick",
+      "debug_loaf_script_source_char_position": 72,
+      "debug_loaf_script_source_function_name": "",
+      "debug_loaf_script_source_url": "http://localhost:8000/demo/",
+      "debug_loaf_script_total_duration": 85,
+      "debug_loaf_script_type": "event-listener",
+    });
+  });
+
+  it('should return default/empty params if no attribution data is provided', () => {
+    // @ts-ignore
+    const result = formatLongAnimationFrameData('unknown', null);
+
+    expect(result).toEqual({
+      debug_target: '(not set)',
+    });
+  });
+});
+
+/**
+ * Samples of event data from the web-vitals.js package are below:
+ */
+// {
+//   "name": "INP",
+//   "value": 104,
+//   "rating": "good",
+//   "delta": 104,
+//   "entries": [
+//     {
+//       "name": "pointerup",
+//       "entryType": "event",
+//       "startTime": 5168847,
+//       "duration": 104,
+//       "interactionId": 3343,
+//       "processingStart": 5168847.799999952,
+//       "processingEnd": 5168847.799999952,
+//       "cancelable": true
+//     },
+//     {
+//       "name": "click",
+//       "entryType": "event",
+//       "startTime": 5168847,
+//       "duration": 104,
+//       "interactionId": 3343,
+//       "processingStart": 5168847.799999952,
+//       "processingEnd": 5168933.600000024,
+//       "cancelable": true
+//     },
+//     {
+//       "name": "pointerup",
+//       "entryType": "event",
+//       "startTime": 5168847,
+//       "duration": 104,
+//       "interactionId": 3343,
+//       "processingStart": 5168847.799999952,
+//       "processingEnd": 5168847.799999952,
+//       "cancelable": true
+//     },
+//     {
+//       "name": "click",
+//       "entryType": "event",
+//       "startTime": 5168847,
+//       "duration": 104,
+//       "interactionId": 3343,
+//       "processingStart": 5168847.799999952,
+//       "processingEnd": 5168933.600000024,
+//       "cancelable": true
+//     }
+//   ],
+//   "id": "v4-1732734514604-7082926874486",
+//   "navigationType": "reload",
+//   "attribution": {
+//     "interactionTarget": "#thrash-layout",
+//     "interactionTargetElement": {},
+//     "interactionType": "pointer",
+//     "interactionTime": 5168847,
+//     "nextPaintTime": 5168951,
+//     "processedEventEntries": [
+//       {
+//         "name": "pointerup",
+//         "entryType": "event",
+//         "startTime": 5168847,
+//         "duration": 104,
+//         "interactionId": 3343,
+//         "processingStart": 5168847.799999952,
+//         "processingEnd": 5168847.799999952,
+//         "cancelable": true
+//       },
+//       {
+//         "name": "mouseup",
+//         "entryType": "event",
+//         "startTime": 5168847,
+//         "duration": 104,
+//         "interactionId": 0,
+//         "processingStart": 5168847.799999952,
+//         "processingEnd": 5168847.799999952,
+//         "cancelable": true
+//       },
+//       {
+//         "name": "click",
+//         "entryType": "event",
+//         "startTime": 5168847,
+//         "duration": 104,
+//         "interactionId": 3343,
+//         "processingStart": 5168847.799999952,
+//         "processingEnd": 5168933.600000024,
+//         "cancelable": true
+//       },
+//       {
+//         "name": "pointerup",
+//         "entryType": "event",
+//         "startTime": 5168847,
+//         "duration": 104,
+//         "interactionId": 3343,
+//         "processingStart": 5168847.799999952,
+//         "processingEnd": 5168847.799999952,
+//         "cancelable": true
+//       },
+//       {
+//         "name": "mouseup",
+//         "entryType": "event",
+//         "startTime": 5168847,
+//         "duration": 104,
+//         "interactionId": 0,
+//         "processingStart": 5168847.799999952,
+//         "processingEnd": 5168847.799999952,
+//         "cancelable": true
+//       },
+//       {
+//         "name": "click",
+//         "entryType": "event",
+//         "startTime": 5168847,
+//         "duration": 104,
+//         "interactionId": 3343,
+//         "processingStart": 5168847.799999952,
+//         "processingEnd": 5168933.600000024,
+//         "cancelable": true
+//       }
+//     ],
+//     "longAnimationFrameEntries": [
+//       {
+//         "name": "long-animation-frame",
+//         "entryType": "long-animation-frame",
+//         "startTime": 5168847.600000024,
+//         "duration": 90,
+//         "renderStart": 5168936.1999999285,
+//         "styleAndLayoutStart": 5168936.1999999285,
+//         "firstUIEventTimestamp": 5168847,
+//         "blockingDuration": 38,
+//         "scripts": [
+//           {
+//             "name": "script",
+//             "entryType": "script",
+//             "startTime": 5168847.899999976,
+//             "duration": 85,
+//             "invoker": "BUTTON#thrash-layout.onclick",
+//             "invokerType": "event-listener",
+//             "windowAttribution": "self",
+//             "executionStart": 5168847.899999976,
+//             "forcedStyleAndLayoutDuration": 80,
+//             "pauseDuration": 0,
+//             "sourceURL": "http://localhost:8000/demo/",
+//             "sourceFunctionName": "",
+//             "sourceCharPosition": 72
+//           }
+//         ]
+//       }
+//     ],
+//     "inputDelay": 0.7999999523162842,
+//     "processingDuration": 85.80000007152557,
+//     "presentationDelay": 17.399999976158142,
+//     "loadState": "complete"
+//   }
+// }

From 69b2a491388db5edb9779663fe333b54fb56559e Mon Sep 17 00:00:00 2001
From: Ethan Gardner <edgincvg@gmail.com>
Date: Wed, 27 Nov 2024 14:56:03 -0500
Subject: [PATCH 02/22] update tests for loaf attribution

---
 package-lock.json                             | 228 +++------
 package.json                                  |   7 +-
 src/format-long-animation-frame-data.ts       |  65 +--
 .../format-long-animation-frame-data.test.ts  | 466 +++++++++++++++---
 4 files changed, 499 insertions(+), 267 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index e1f69d7..26c67d9 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,19 +9,17 @@
       "version": "0.0.0",
       "license": "MIT",
       "dependencies": {
-        "lit": "^3.1.4",
         "web-vitals": "^4.2.4"
       },
       "devDependencies": {
         "@open-wc/eslint-config": "^12.0.3",
         "@open-wc/testing": "^4.0.0",
         "@types/mocha": "^10.0.7",
-        "@typescript-eslint/eslint-plugin": "^7.16.0",
-        "@typescript-eslint/parser": "^7.16.0",
+        "@typescript-eslint/eslint-plugin": "^8.16.0",
+        "@typescript-eslint/parser": "^8.16.0",
         "@vitest/coverage-v8": "^2.1.5",
         "@web/dev-server": "^0.4.6",
         "@web/test-runner": "^0.18.2",
-        "@web/test-runner-playwright": "^0.11.0",
         "concurrently": "^8.2.2",
         "eslint": "^8.57.0",
         "eslint-config-prettier": "^9.1.0",
@@ -1140,12 +1138,14 @@
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/@lit-labs/ssr-dom-shim/-/ssr-dom-shim-1.2.1.tgz",
       "integrity": "sha512-wx4aBmgeGvFmOKucFKY+8VFJSYZxs9poN3SDNQFF6lT6NrQUnHiPB2PWz2sc4ieEcAaYYzN+1uWahEeTq2aRIQ==",
+      "dev": true,
       "license": "BSD-3-Clause"
     },
     "node_modules/@lit/reactive-element": {
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/@lit/reactive-element/-/reactive-element-2.0.4.tgz",
       "integrity": "sha512-GFn91inaUa2oHLak8awSIigYz0cU0Payr1rcFsrkf5OJ5eSPxElyZfKh0f2p9FsTiZWXQdWGJeXZICEfXXYSXQ==",
+      "dev": true,
       "license": "BSD-3-Clause",
       "dependencies": {
         "@lit-labs/ssr-dom-shim": "^1.2.0"
@@ -1996,6 +1996,7 @@
       "version": "2.0.7",
       "resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.7.tgz",
       "integrity": "sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw==",
+      "dev": true,
       "license": "MIT"
     },
     "node_modules/@types/ws": {
@@ -2020,32 +2021,32 @@
       }
     },
     "node_modules/@typescript-eslint/eslint-plugin": {
-      "version": "7.18.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-7.18.0.tgz",
-      "integrity": "sha512-94EQTWZ40mzBc42ATNIBimBEDltSJ9RQHCC8vc/PDbxi4k8dVwUAv4o98dk50M1zB+JGFxp43FP7f8+FP8R6Sw==",
+      "version": "8.16.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-8.16.0.tgz",
+      "integrity": "sha512-5YTHKV8MYlyMI6BaEG7crQ9BhSc8RxzshOReKwZwRWN0+XvvTOm+L/UYLCYxFpfwYuAAqhxiq4yae0CMFwbL7Q==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
         "@eslint-community/regexpp": "^4.10.0",
-        "@typescript-eslint/scope-manager": "7.18.0",
-        "@typescript-eslint/type-utils": "7.18.0",
-        "@typescript-eslint/utils": "7.18.0",
-        "@typescript-eslint/visitor-keys": "7.18.0",
+        "@typescript-eslint/scope-manager": "8.16.0",
+        "@typescript-eslint/type-utils": "8.16.0",
+        "@typescript-eslint/utils": "8.16.0",
+        "@typescript-eslint/visitor-keys": "8.16.0",
         "graphemer": "^1.4.0",
         "ignore": "^5.3.1",
         "natural-compare": "^1.4.0",
         "ts-api-utils": "^1.3.0"
       },
       "engines": {
-        "node": "^18.18.0 || >=20.0.0"
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
       },
       "funding": {
         "type": "opencollective",
         "url": "https://opencollective.com/typescript-eslint"
       },
       "peerDependencies": {
-        "@typescript-eslint/parser": "^7.0.0",
-        "eslint": "^8.56.0"
+        "@typescript-eslint/parser": "^8.0.0 || ^8.0.0-alpha.0",
+        "eslint": "^8.57.0 || ^9.0.0"
       },
       "peerDependenciesMeta": {
         "typescript": {
@@ -2054,27 +2055,27 @@
       }
     },
     "node_modules/@typescript-eslint/parser": {
-      "version": "7.18.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-7.18.0.tgz",
-      "integrity": "sha512-4Z+L8I2OqhZV8qA132M4wNL30ypZGYOQVBfMgxDH/K5UX0PNqTu1c6za9ST5r9+tavvHiTWmBnKzpCJ/GlVFtg==",
+      "version": "8.16.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-8.16.0.tgz",
+      "integrity": "sha512-D7DbgGFtsqIPIFMPJwCad9Gfi/hC0PWErRRHFnaCWoEDYi5tQUDiJCTmGUbBiLzjqAck4KcXt9Ayj0CNlIrF+w==",
       "dev": true,
       "license": "BSD-2-Clause",
       "dependencies": {
-        "@typescript-eslint/scope-manager": "7.18.0",
-        "@typescript-eslint/types": "7.18.0",
-        "@typescript-eslint/typescript-estree": "7.18.0",
-        "@typescript-eslint/visitor-keys": "7.18.0",
+        "@typescript-eslint/scope-manager": "8.16.0",
+        "@typescript-eslint/types": "8.16.0",
+        "@typescript-eslint/typescript-estree": "8.16.0",
+        "@typescript-eslint/visitor-keys": "8.16.0",
         "debug": "^4.3.4"
       },
       "engines": {
-        "node": "^18.18.0 || >=20.0.0"
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
       },
       "funding": {
         "type": "opencollective",
         "url": "https://opencollective.com/typescript-eslint"
       },
       "peerDependencies": {
-        "eslint": "^8.56.0"
+        "eslint": "^8.57.0 || ^9.0.0"
       },
       "peerDependenciesMeta": {
         "typescript": {
@@ -2083,17 +2084,17 @@
       }
     },
     "node_modules/@typescript-eslint/scope-manager": {
-      "version": "7.18.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-7.18.0.tgz",
-      "integrity": "sha512-jjhdIE/FPF2B7Z1uzc6i3oWKbGcHb87Qw7AWj6jmEqNOfDFbJWtjt/XfwCpvNkpGWlcJaog5vTR+VV8+w9JflA==",
+      "version": "8.16.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-8.16.0.tgz",
+      "integrity": "sha512-mwsZWubQvBki2t5565uxF0EYvG+FwdFb8bMtDuGQLdCCnGPrDEDvm1gtfynuKlnpzeBRqdFCkMf9jg1fnAK8sg==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@typescript-eslint/types": "7.18.0",
-        "@typescript-eslint/visitor-keys": "7.18.0"
+        "@typescript-eslint/types": "8.16.0",
+        "@typescript-eslint/visitor-keys": "8.16.0"
       },
       "engines": {
-        "node": "^18.18.0 || >=20.0.0"
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
       },
       "funding": {
         "type": "opencollective",
@@ -2101,26 +2102,26 @@
       }
     },
     "node_modules/@typescript-eslint/type-utils": {
-      "version": "7.18.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-7.18.0.tgz",
-      "integrity": "sha512-XL0FJXuCLaDuX2sYqZUUSOJ2sG5/i1AAze+axqmLnSkNEVMVYLF+cbwlB2w8D1tinFuSikHmFta+P+HOofrLeA==",
+      "version": "8.16.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-8.16.0.tgz",
+      "integrity": "sha512-IqZHGG+g1XCWX9NyqnI/0CX5LL8/18awQqmkZSl2ynn8F76j579dByc0jhfVSnSnhf7zv76mKBQv9HQFKvDCgg==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@typescript-eslint/typescript-estree": "7.18.0",
-        "@typescript-eslint/utils": "7.18.0",
+        "@typescript-eslint/typescript-estree": "8.16.0",
+        "@typescript-eslint/utils": "8.16.0",
         "debug": "^4.3.4",
         "ts-api-utils": "^1.3.0"
       },
       "engines": {
-        "node": "^18.18.0 || >=20.0.0"
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
       },
       "funding": {
         "type": "opencollective",
         "url": "https://opencollective.com/typescript-eslint"
       },
       "peerDependencies": {
-        "eslint": "^8.56.0"
+        "eslint": "^8.57.0 || ^9.0.0"
       },
       "peerDependenciesMeta": {
         "typescript": {
@@ -2129,13 +2130,13 @@
       }
     },
     "node_modules/@typescript-eslint/types": {
-      "version": "7.18.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-7.18.0.tgz",
-      "integrity": "sha512-iZqi+Ds1y4EDYUtlOOC+aUmxnE9xS/yCigkjA7XpTKV6nCBd3Hp/PRGGmdwnfkV2ThMyYldP1wRpm/id99spTQ==",
+      "version": "8.16.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-8.16.0.tgz",
+      "integrity": "sha512-NzrHj6thBAOSE4d9bsuRNMvk+BvaQvmY4dDglgkgGC0EW/tB3Kelnp3tAKH87GEwzoxgeQn9fNGRyFJM/xd+GQ==",
       "dev": true,
       "license": "MIT",
       "engines": {
-        "node": "^18.18.0 || >=20.0.0"
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
       },
       "funding": {
         "type": "opencollective",
@@ -2143,23 +2144,23 @@
       }
     },
     "node_modules/@typescript-eslint/typescript-estree": {
-      "version": "7.18.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-7.18.0.tgz",
-      "integrity": "sha512-aP1v/BSPnnyhMHts8cf1qQ6Q1IFwwRvAQGRvBFkWlo3/lH29OXA3Pts+c10nxRxIBrDnoMqzhgdwVe5f2D6OzA==",
+      "version": "8.16.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-8.16.0.tgz",
+      "integrity": "sha512-E2+9IzzXMc1iaBy9zmo+UYvluE3TW7bCGWSF41hVWUE01o8nzr1rvOQYSxelxr6StUvRcTMe633eY8mXASMaNw==",
       "dev": true,
       "license": "BSD-2-Clause",
       "dependencies": {
-        "@typescript-eslint/types": "7.18.0",
-        "@typescript-eslint/visitor-keys": "7.18.0",
+        "@typescript-eslint/types": "8.16.0",
+        "@typescript-eslint/visitor-keys": "8.16.0",
         "debug": "^4.3.4",
-        "globby": "^11.1.0",
+        "fast-glob": "^3.3.2",
         "is-glob": "^4.0.3",
         "minimatch": "^9.0.4",
         "semver": "^7.6.0",
         "ts-api-utils": "^1.3.0"
       },
       "engines": {
-        "node": "^18.18.0 || >=20.0.0"
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
       },
       "funding": {
         "type": "opencollective",
@@ -2171,27 +2172,6 @@
         }
       }
     },
-    "node_modules/@typescript-eslint/typescript-estree/node_modules/globby": {
-      "version": "11.1.0",
-      "resolved": "https://registry.npmjs.org/globby/-/globby-11.1.0.tgz",
-      "integrity": "sha512-jhIXaOzy1sb8IyocaruWSn1TjmnBVs8Ayhcy83rmxNJ8q2uWKCAj3CnJY+KpGSXCueAPc0i05kVvVKtP1t9S3g==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "array-union": "^2.1.0",
-        "dir-glob": "^3.0.1",
-        "fast-glob": "^3.2.9",
-        "ignore": "^5.2.0",
-        "merge2": "^1.4.1",
-        "slash": "^3.0.0"
-      },
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
     "node_modules/@typescript-eslint/typescript-estree/node_modules/semver": {
       "version": "7.6.3",
       "resolved": "https://registry.npmjs.org/semver/-/semver-7.6.3.tgz",
@@ -2206,40 +2186,45 @@
       }
     },
     "node_modules/@typescript-eslint/utils": {
-      "version": "7.18.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-7.18.0.tgz",
-      "integrity": "sha512-kK0/rNa2j74XuHVcoCZxdFBMF+aq/vH83CXAOHieC+2Gis4mF8jJXT5eAfyD3K0sAxtPuwxaIOIOvhwzVDt/kw==",
+      "version": "8.16.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-8.16.0.tgz",
+      "integrity": "sha512-C1zRy/mOL8Pj157GiX4kaw7iyRLKfJXBR3L82hk5kS/GyHcOFmy4YUq/zfZti72I9wnuQtA/+xzft4wCC8PJdA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.4.0",
-        "@typescript-eslint/scope-manager": "7.18.0",
-        "@typescript-eslint/types": "7.18.0",
-        "@typescript-eslint/typescript-estree": "7.18.0"
+        "@typescript-eslint/scope-manager": "8.16.0",
+        "@typescript-eslint/types": "8.16.0",
+        "@typescript-eslint/typescript-estree": "8.16.0"
       },
       "engines": {
-        "node": "^18.18.0 || >=20.0.0"
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
       },
       "funding": {
         "type": "opencollective",
         "url": "https://opencollective.com/typescript-eslint"
       },
       "peerDependencies": {
-        "eslint": "^8.56.0"
+        "eslint": "^8.57.0 || ^9.0.0"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
       }
     },
     "node_modules/@typescript-eslint/visitor-keys": {
-      "version": "7.18.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-7.18.0.tgz",
-      "integrity": "sha512-cDF0/Gf81QpY3xYyJKDV14Zwdmid5+uuENhjH2EqFaF0ni+yAyq/LzMaIJdhNJXZI7uLzwIlA+V7oWoyn6Curg==",
+      "version": "8.16.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-8.16.0.tgz",
+      "integrity": "sha512-pq19gbaMOmFE3CbL0ZB8J8BFCo2ckfHBfaIsaOZgBIF4EoISJIdLX5xRhd0FGB0LlHReNRuzoJoMGpTjq8F2CQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@typescript-eslint/types": "7.18.0",
-        "eslint-visitor-keys": "^3.4.3"
+        "@typescript-eslint/types": "8.16.0",
+        "eslint-visitor-keys": "^4.2.0"
       },
       "engines": {
-        "node": "^18.18.0 || >=20.0.0"
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
       },
       "funding": {
         "type": "opencollective",
@@ -2247,13 +2232,13 @@
       }
     },
     "node_modules/@typescript-eslint/visitor-keys/node_modules/eslint-visitor-keys": {
-      "version": "3.4.3",
-      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-3.4.3.tgz",
-      "integrity": "sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag==",
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-4.2.0.tgz",
+      "integrity": "sha512-UyLnSehNt62FFhSwjZlHmeokpRK59rcz29j+F1/aDgbkbRTk7wIc9XzdoasMUbRNKDM0qQt/+BJ4BrpFeABemw==",
       "dev": true,
       "license": "Apache-2.0",
       "engines": {
-        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
       },
       "funding": {
         "url": "https://opencollective.com/eslint"
@@ -2748,21 +2733,6 @@
         "node": ">=18.0.0"
       }
     },
-    "node_modules/@web/test-runner-playwright": {
-      "version": "0.11.0",
-      "resolved": "https://registry.npmjs.org/@web/test-runner-playwright/-/test-runner-playwright-0.11.0.tgz",
-      "integrity": "sha512-s+f43DSAcssKYVOD9SuzueUcctJdHzq1by45gAnSCKa9FQcaTbuYe8CzmxA21g+NcL5+ayo4z+MA9PO4H+PssQ==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@web/test-runner-core": "^0.13.0",
-        "@web/test-runner-coverage-v8": "^0.8.0",
-        "playwright": "^1.22.2"
-      },
-      "engines": {
-        "node": ">=18.0.0"
-      }
-    },
     "node_modules/@web/test-runner/node_modules/@web/config-loader": {
       "version": "0.3.2",
       "resolved": "https://registry.npmjs.org/@web/config-loader/-/config-loader-0.3.2.tgz",
@@ -7512,6 +7482,7 @@
       "version": "3.2.1",
       "resolved": "https://registry.npmjs.org/lit/-/lit-3.2.1.tgz",
       "integrity": "sha512-1BBa1E/z0O9ye5fZprPtdqnc0BFzxIxTTOO/tQFmyC/hj1O3jL4TfmLBw0WEwjAokdLwpclkvGgDJwTIh0/22w==",
+      "dev": true,
       "license": "BSD-3-Clause",
       "dependencies": {
         "@lit/reactive-element": "^2.0.4",
@@ -7523,6 +7494,7 @@
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/lit-element/-/lit-element-4.1.1.tgz",
       "integrity": "sha512-HO9Tkkh34QkTeUmEdNYhMT8hzLid7YlMlATSi1q4q17HE5d9mrrEHJ/o8O2D0cMi182zK1F3v7x0PWFjrhXFew==",
+      "dev": true,
       "license": "BSD-3-Clause",
       "dependencies": {
         "@lit-labs/ssr-dom-shim": "^1.2.0",
@@ -7534,6 +7506,7 @@
       "version": "3.2.1",
       "resolved": "https://registry.npmjs.org/lit-html/-/lit-html-3.2.1.tgz",
       "integrity": "sha512-qI/3lziaPMSKsrwlxH/xMgikhQ0EGOX2ICU73Bi/YHFvz2j/yMCIrw4+puF2IpQ4+upd3EWbvnHM9+PnJn48YA==",
+      "dev": true,
       "license": "BSD-3-Clause",
       "dependencies": {
         "@types/trusted-types": "^2.0.2"
@@ -8493,53 +8466,6 @@
         "node": ">= 6"
       }
     },
-    "node_modules/playwright": {
-      "version": "1.49.0",
-      "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.49.0.tgz",
-      "integrity": "sha512-eKpmys0UFDnfNb3vfsf8Vx2LEOtflgRebl0Im2eQQnYMA4Aqd+Zw8bEOB+7ZKvN76901mRnqdsiOGKxzVTbi7A==",
-      "dev": true,
-      "license": "Apache-2.0",
-      "dependencies": {
-        "playwright-core": "1.49.0"
-      },
-      "bin": {
-        "playwright": "cli.js"
-      },
-      "engines": {
-        "node": ">=18"
-      },
-      "optionalDependencies": {
-        "fsevents": "2.3.2"
-      }
-    },
-    "node_modules/playwright-core": {
-      "version": "1.49.0",
-      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.49.0.tgz",
-      "integrity": "sha512-R+3KKTQF3npy5GTiKH/T+kdhoJfJojjHESR1YEWhYuEKRVfVaxH3+4+GvXE5xyCngCxhxnykk0Vlah9v8fs3jA==",
-      "dev": true,
-      "license": "Apache-2.0",
-      "bin": {
-        "playwright-core": "cli.js"
-      },
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/playwright/node_modules/fsevents": {
-      "version": "2.3.2",
-      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
-      "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
-      "dev": true,
-      "hasInstallScript": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "darwin"
-      ],
-      "engines": {
-        "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
-      }
-    },
     "node_modules/portfinder": {
       "version": "1.0.32",
       "resolved": "https://registry.npmjs.org/portfinder/-/portfinder-1.0.32.tgz",
@@ -10080,9 +10006,9 @@
       }
     },
     "node_modules/ts-api-utils": {
-      "version": "1.4.0",
-      "resolved": "https://registry.npmjs.org/ts-api-utils/-/ts-api-utils-1.4.0.tgz",
-      "integrity": "sha512-032cPxaEKwM+GT3vA5JXNzIaizx388rhsSW79vGRNGXfRRAdEAn2mvk36PvK5HnOchyWZ7afLEXqYCvPCrzuzQ==",
+      "version": "1.4.2",
+      "resolved": "https://registry.npmjs.org/ts-api-utils/-/ts-api-utils-1.4.2.tgz",
+      "integrity": "sha512-ZF5gQIQa/UmzfvxbHZI3JXN0/Jt+vnAfAviNRAMc491laiK6YCLpCW9ft8oaCRFOTxCZtUTE6XB0ZQAe3olntw==",
       "dev": true,
       "license": "MIT",
       "engines": {
diff --git a/package.json b/package.json
index bc43cbf..58efa36 100644
--- a/package.json
+++ b/package.json
@@ -13,7 +13,7 @@
     "./dap-performance-addon.js": "./dist/dap-performance-addon.js"
   },
   "scripts": {
-    "analyze": "cem analyze --litelement",
+    "analyze": "",
     "start": "tsup && concurrently -k -r \"tsup --watch\" \"web-dev-server\"",
     "build": "tsup",
     "prepublish": "tsup && npm run analyze -- --exclude dist",
@@ -25,15 +25,14 @@
     "test:coverage": "vitest --coverage"
   },
   "dependencies": {
-    "lit": "^3.1.4",
     "web-vitals": "^4.2.4"
   },
   "devDependencies": {
     "@open-wc/eslint-config": "^12.0.3",
     "@open-wc/testing": "^4.0.0",
     "@types/mocha": "^10.0.7",
-    "@typescript-eslint/eslint-plugin": "^7.16.0",
-    "@typescript-eslint/parser": "^7.16.0",
+    "@typescript-eslint/eslint-plugin": "^8.16.0",
+    "@typescript-eslint/parser": "^8.16.0",
     "@vitest/coverage-v8": "^2.1.5",
     "@web/dev-server": "^0.4.6",
     "@web/test-runner": "^0.18.2",
diff --git a/src/format-long-animation-frame-data.ts b/src/format-long-animation-frame-data.ts
index 244fa16..be8b204 100644
--- a/src/format-long-animation-frame-data.ts
+++ b/src/format-long-animation-frame-data.ts
@@ -1,42 +1,31 @@
 import type { INPAttribution } from 'web-vitals';
 
-// export const formatLongAnimationFrameData = (attribution: INPAttribution) => {
-//
-// };
-
-// export const formatLongAnimationFrameData = (attribution: INPAttribution) => {
-//   // The last LoAF entry is usually the most relevant.
-//   const loaf = attribution.longAnimationFrameEntries.at(-1);
-//   const script = loaf?.scripts.sort((a, b) => b.duration - a.duration)[0];
-//   let obj = {}
-//
-//   if(script) {
-//     // long event handler
-//     const { invokerType } = script; // always event-listener for long event handlers
-//     const { invoker } = script; // element that had the event listener
-//     const { sourceURL } = script;
-//     const { sourceCharPosition } = script;
-//     const { sourceFunctionName } = script;
-//
-//     // long input delay: during page load - was this from script evaluation
-//     const { invokerType } = script; //
-//     const { sourceLocation } = script;
-//
-//     // long input delay: after page load - was this from script evaluation
-//     const { invokerType } = script; // user-callback (recurring timer like setInterval), event-listener, module-script, classic-script. Could also be expensive fetch call
-//     const { sourceURL } = script; // https://example.com/app.js
-//     const { sourceCharPosition } = script; // 83
-//     const { sourceFunctionName } = script; // update
-//
-//     // presentation delay
-//     const { invokerType } = script; // user-callback (recurring timer like setInterval), event-listener, module-script, classic-script. Could also be expensive fetch call
-//     const { sourceURL } = script; // https://example.com/app.js
-//     const { sourceCharPosition } = script; // 83
-//     const { sourceFunctionName } = script; // update
-//   }
-// }
-
-
+/**
+ * Properties of note
+ *
+ * // Long-running event handler would be like the below:
+ * const { invokerType } = script; // always event-listener for long event handlers
+ * const { invoker } = script; // element that had the event listener
+ * const { sourceURL } = script; // https://example.com/app.js
+ * const { sourceCharPosition } = script; // 83
+ * const { sourceFunctionName } = script; // update
+ *
+ * // long input delay: during page load - was this from script evaluation?
+ * const { invokerType } = script;
+ * const { sourceLocation } = script;
+ *
+ * // long input delay: after page load
+ * const { invokerType } = script; // user-callback (recurring timer like setInterval), event-listener, module-script, classic-script. Could also be expensive fetch call
+ * const { sourceURL } = script; // https://example.com/app.js
+ * const { sourceCharPosition } = script; // 83
+ * const { sourceFunctionName } = script; // update
+ *
+ * // presentation delay
+ * const { invokerType } = script; // user-callback (recurring timer like setInterval), event-listener, module-script, classic-script. Could also be expensive fetch call
+ * const { sourceURL } = script; // https://example.com/app.js
+ * const { sourceCharPosition } = script; // 83
+ * const { sourceFunctionName } = script; // update
+ */
 export const formatLongAnimationFrameData = (attribution: INPAttribution) => {
   const loafEntries = attribution.longAnimationFrameEntries;
   if(typeof loafEntries === 'undefined' || loafEntries.length === 0) {
@@ -87,7 +76,7 @@ export const formatLongAnimationFrameData = (attribution: INPAttribution) => {
   }
 
   // The LoAF script with the single longest total duration.
-  return Object.fromEntries(Object.entries(loafAttribution).map(([k, v]) => 
+  return Object.fromEntries(Object.entries(loafAttribution).map(([k, v]) =>
     // Convert all floats to ints.
      [k, typeof v === 'number' ? Math.floor(v) : v]
   ));
diff --git a/test/unit/format-long-animation-frame-data.test.ts b/test/unit/format-long-animation-frame-data.test.ts
index 53ea21e..adc6dcb 100644
--- a/test/unit/format-long-animation-frame-data.test.ts
+++ b/test/unit/format-long-animation-frame-data.test.ts
@@ -4,73 +4,6 @@ import { formatLongAnimationFrameData } from '../../src/format-long-animation-fr
 describe('formatLongAnimationFrameData', () => {
   it('should format INP data correctly', () => {
     const attribution = {
-      "interactionTarget": "#thrash-layout",
-      "interactionTargetElement": {},
-      "interactionType": "pointer",
-      "interactionTime": 5168847,
-      "nextPaintTime": 5168951,
-      "processedEventEntries": [
-        {
-          "name": "pointerup",
-          "entryType": "event",
-          "startTime": 5168847,
-          "duration": 104,
-          "interactionId": 3343,
-          "processingStart": 5168847.799999952,
-          "processingEnd": 5168847.799999952,
-          "cancelable": true
-        },
-        {
-          "name": "mouseup",
-          "entryType": "event",
-          "startTime": 5168847,
-          "duration": 104,
-          "interactionId": 0,
-          "processingStart": 5168847.799999952,
-          "processingEnd": 5168847.799999952,
-          "cancelable": true
-        },
-        {
-          "name": "click",
-          "entryType": "event",
-          "startTime": 5168847,
-          "duration": 104,
-          "interactionId": 3343,
-          "processingStart": 5168847.799999952,
-          "processingEnd": 5168933.600000024,
-          "cancelable": true
-        },
-        {
-          "name": "pointerup",
-          "entryType": "event",
-          "startTime": 5168847,
-          "duration": 104,
-          "interactionId": 3343,
-          "processingStart": 5168847.799999952,
-          "processingEnd": 5168847.799999952,
-          "cancelable": true
-        },
-        {
-          "name": "mouseup",
-          "entryType": "event",
-          "startTime": 5168847,
-          "duration": 104,
-          "interactionId": 0,
-          "processingStart": 5168847.799999952,
-          "processingEnd": 5168847.799999952,
-          "cancelable": true
-        },
-        {
-          "name": "click",
-          "entryType": "event",
-          "startTime": 5168847,
-          "duration": 104,
-          "interactionId": 3343,
-          "processingStart": 5168847.799999952,
-          "processingEnd": 5168933.600000024,
-          "cancelable": true
-        }
-      ],
       "longAnimationFrameEntries": [
         {
           "name": "long-animation-frame",
@@ -100,10 +33,6 @@ describe('formatLongAnimationFrameData', () => {
           ]
         }
       ],
-      "inputDelay": 0.7999999523162842,
-      "processingDuration": 85.80000007152557,
-      "presentationDelay": 17.399999976158142,
-      "loadState": "complete"
     };
 
     // @ts-ignore
@@ -130,19 +59,124 @@ describe('formatLongAnimationFrameData', () => {
     });
   });
 
-  it('should return default/empty params if no attribution data is provided', () => {
+  it('should handle multiple scripts by giving info about the single longest total duration.', () => {
+    const attribution = {
+      "longAnimationFrameEntries": [
+        {
+          "name": "long-animation-frame",
+          "entryType": "long-animation-frame",
+          "startTime": 49367.80000001192,
+          "duration": 335,
+          "renderStart": 49702.19999998808,
+          "styleAndLayoutStart": 49702.69999998808,
+          "firstUIEventTimestamp": 49387.80000001192,
+          "blockingDuration": 235,
+          "scripts": [
+            {
+              "name": "script",
+              "entryType": "script",
+              "startTime": 49367.89999997616,
+              "duration": 222,
+              "invoker": "TimerHandler:setTimeout",
+              "invokerType": "user-callback",
+              "windowAttribution": "self",
+              "executionStart": 49367.89999997616,
+              "forcedStyleAndLayoutDuration": 0,
+              "pauseDuration": 0,
+              "sourceURL": "http://localhost:8000/demo/",
+              "sourceFunctionName": "periodicBlock",
+              "sourceCharPosition": 2007
+            },
+            {
+              "name": "script",
+              "entryType": "script",
+              "startTime": 49590.89999997616,
+              "duration": 14,
+              "invoker": "DOMWindow.onkeydown",
+              "invokerType": "event-listener",
+              "windowAttribution": "self",
+              "executionStart": 49590.89999997616,
+              "forcedStyleAndLayoutDuration": 0,
+              "pauseDuration": 0,
+              "sourceURL": "http://localhost:8000/demo/",
+              "sourceFunctionName": "",
+              "sourceCharPosition": 4656
+            }
+          ]
+        }
+      ],
+    }
+
     // @ts-ignore
-    const result = formatLongAnimationFrameData('unknown', null);
+    const result = formatLongAnimationFrameData(attribution);
 
     expect(result).toEqual({
-      debug_target: '(not set)',
+      "debug_loaf_entry_end_time": 49702,
+      "debug_loaf_entry_pre_layout_duration": 0,
+      "debug_loaf_entry_render_duration": 0,
+      "debug_loaf_entry_start_time": 49367,
+      "debug_loaf_entry_style_and_layout_duration": 0,
+      "debug_loaf_entry_total_forced_style_and_layout_duration": 0,
+      "debug_loaf_entry_work_duration": 334,
+      "debug_loaf_meta_length": 1,
+      "debug_loaf_script_compile_duration": 0,
+      "debug_loaf_script_exec_duration": 222,
+      "debug_loaf_script_forced_style_and_layout_duration": 0,
+      "debug_loaf_script_invoker": "TimerHandler:setTimeout",
+      "debug_loaf_script_source_char_position": 2007,
+      "debug_loaf_script_source_function_name": "periodicBlock",
+      "debug_loaf_script_source_url": "http://localhost:8000/demo/",
+      "debug_loaf_script_total_duration": 222,
+      "debug_loaf_script_type": "user-callback",
     });
   });
+
+  it('should handle attribution data with zero scripts', () => {
+    const attribution = {
+      "interactionTarget": "#textarea",
+      "interactionTargetElement": {},
+      "interactionType": "keyboard",
+      "interactionTime": 49387.80000001192,
+      "nextPaintTime": 49715.80000001192,
+      "longAnimationFrameEntries": [
+        {
+          "name": "long-animation-frame",
+          "entryType": "long-animation-frame",
+          "startTime": 49367.80000001192,
+          "duration": 335,
+          "renderStart": 49702.19999998808,
+          "styleAndLayoutStart": 49702.69999998808,
+          "firstUIEventTimestamp": 49387.80000001192,
+          "blockingDuration": 235,
+          "scripts": []
+        }
+      ],
+      "inputDelay": 203.0999999642372,
+      "processingDuration": 111.30000001192093,
+      "presentationDelay": 13.600000023841858,
+      "loadState": "complete"
+    }
+
+    // @ts-ignore
+    const result = formatLongAnimationFrameData(attribution);
+
+    expect(result).toEqual({});
+  });
+
+  it('should return default params if no attribution data is provided', () => {
+    // @ts-ignore
+    const result = formatLongAnimationFrameData('unknown', null);
+
+    expect(result).toEqual({});
+  });
 });
 
 /**
  * Samples of event data from the web-vitals.js package are below:
  */
+/**
+ * Single script entry
+ */
 // {
 //   "name": "INP",
 //   "value": 104,
@@ -295,3 +329,287 @@ describe('formatLongAnimationFrameData', () => {
 //     "loadState": "complete"
 //   }
 // }
+
+/**
+ * Empty scripts array
+ */
+// {
+//   "name": "INP",
+//   "value": 64,
+//   "rating": "good",
+//   "delta": 64,
+//   "entries": [
+//     {
+//       "name": "pointerup",
+//       "entryType": "event",
+//       "startTime": 25448.80000001192,
+//       "duration": 64,
+//       "interactionId": 1134,
+//       "processingStart": 25451.100000023842,
+//       "processingEnd": 25451.100000023842,
+//       "cancelable": true
+//     },
+//     {
+//       "name": "click",
+//       "entryType": "event",
+//       "startTime": 25448.80000001192,
+//       "duration": 64,
+//       "interactionId": 1134,
+//       "processingStart": 25451.100000023842,
+//       "processingEnd": 25483.400000035763,
+//       "cancelable": true
+//     }
+//   ],
+//   "id": "v4-1732752055743-7541189658822",
+//   "navigationType": "reload",
+//   "attribution": {
+//     "interactionTarget": "#headerMenuIcon>svg.header__menu-icon-svg",
+//     "interactionTargetElement": {},
+//     "interactionType": "pointer",
+//     "interactionTime": 25448.80000001192,
+//     "nextPaintTime": 25512.80000001192,
+//     "processedEventEntries": [
+//       {
+//         "name": "pointerup",
+//         "entryType": "event",
+//         "startTime": 25448.80000001192,
+//         "duration": 64,
+//         "interactionId": 1134,
+//         "processingStart": 25451.100000023842,
+//         "processingEnd": 25451.100000023842,
+//         "cancelable": true
+//       },
+//       {
+//         "name": "mouseup",
+//         "entryType": "event",
+//         "startTime": 25448.80000001192,
+//         "duration": 64,
+//         "interactionId": 0,
+//         "processingStart": 25451.100000023842,
+//         "processingEnd": 25451.100000023842,
+//         "cancelable": true
+//       },
+//       {
+//         "name": "click",
+//         "entryType": "event",
+//         "startTime": 25448.80000001192,
+//         "duration": 64,
+//         "interactionId": 1134,
+//         "processingStart": 25451.100000023842,
+//         "processingEnd": 25483.400000035763,
+//         "cancelable": true
+//       }
+//     ],
+//     "longAnimationFrameEntries": [],
+//     "inputDelay": 2.300000011920929,
+//     "processingDuration": 32.30000001192093,
+//     "presentationDelay": 29.399999976158142,
+//     "loadState": "complete"
+//   }
+// }
+
+/**
+ * Multiple scripts
+ */
+// {
+//   "interactionTarget": "#textarea",
+//   "interactionTargetElement": {},
+//   "interactionType": "keyboard",
+//   "interactionTime": 49387.80000001192,
+//   "nextPaintTime": 49715.80000001192,
+//   "processedEventEntries": [
+//     {
+//       "name": "keydown",
+//       "entryType": "event",
+//       "startTime": 49387.80000001192,
+//       "duration": 328,
+//       "interactionId": 5994,
+//       "processingStart": 49590.89999997616,
+//       "processingEnd": 49605.89999997616,
+//       "cancelable": true
+//     },
+//     {
+//       "name": "keypress",
+//       "entryType": "event",
+//       "startTime": 49388.10000002384,
+//       "duration": 328,
+//       "interactionId": 5994,
+//       "processingStart": 49606,
+//       "processingEnd": 49606.5,
+//       "cancelable": true
+//     },
+//     {
+//       "name": "beforeinput",
+//       "entryType": "event",
+//       "startTime": 49606,
+//       "duration": 104,
+//       "interactionId": 0,
+//       "processingStart": 49606,
+//       "processingEnd": 49606,
+//       "cancelable": true
+//     },
+//     {
+//       "name": "keydown",
+//       "entryType": "event",
+//       "startTime": 49492.69999998808,
+//       "duration": 224,
+//       "interactionId": 6001,
+//       "processingStart": 49606.5,
+//       "processingEnd": 49621.60000002384,
+//       "cancelable": true
+//     },
+//     {
+//       "name": "input",
+//       "entryType": "event",
+//       "startTime": 49606.19999998808,
+//       "duration": 104,
+//       "interactionId": 0,
+//       "processingStart": 49606.5,
+//       "processingEnd": 49606.5,
+//       "cancelable": false
+//     },
+//     {
+//       "name": "keypress",
+//       "entryType": "event",
+//       "startTime": 49493.69999998808,
+//       "duration": 216,
+//       "interactionId": 6001,
+//       "processingStart": 49621.60000002384,
+//       "processingEnd": 49622.10000002384,
+//       "cancelable": true
+//     },
+//     {
+//       "name": "beforeinput",
+//       "entryType": "event",
+//       "startTime": 49621.60000002384,
+//       "duration": 88,
+//       "interactionId": 0,
+//       "processingStart": 49621.60000002384,
+//       "processingEnd": 49621.60000002384,
+//       "cancelable": true
+//     },
+//     {
+//       "name": "input",
+//       "entryType": "event",
+//       "startTime": 49622,
+//       "duration": 88,
+//       "interactionId": 0,
+//       "processingStart": 49622.10000002384,
+//       "processingEnd": 49622.10000002384,
+//       "cancelable": false
+//     },
+//     {
+//       "name": "keyup",
+//       "entryType": "event",
+//       "startTime": 49550.60000002384,
+//       "duration": 160,
+//       "interactionId": 5994,
+//       "processingStart": 49622.19999998808,
+//       "processingEnd": 49662.19999998808,
+//       "cancelable": true
+//     },
+//     {
+//       "name": "keyup",
+//       "entryType": "event",
+//       "startTime": 49587.60000002384,
+//       "duration": 128,
+//       "interactionId": 6001,
+//       "processingStart": 49662.19999998808,
+//       "processingEnd": 49702.19999998808,
+//       "cancelable": true
+//     }
+//   ],
+//   "longAnimationFrameEntries": [
+//     {
+//       "name": "long-animation-frame",
+//       "entryType": "long-animation-frame",
+//       "startTime": 49367.80000001192,
+//       "duration": 335,
+//       "renderStart": 49702.19999998808,
+//       "styleAndLayoutStart": 49702.69999998808,
+//       "firstUIEventTimestamp": 49387.80000001192,
+//       "blockingDuration": 235,
+//       "scripts": [
+//         {
+//           "name": "script",
+//           "entryType": "script",
+//           "startTime": 49367.89999997616,
+//           "duration": 222,
+//           "invoker": "TimerHandler:setTimeout",
+//           "invokerType": "user-callback",
+//           "windowAttribution": "self",
+//           "executionStart": 49367.89999997616,
+//           "forcedStyleAndLayoutDuration": 0,
+//           "pauseDuration": 0,
+//           "sourceURL": "http://localhost:8000/demo/",
+//           "sourceFunctionName": "periodicBlock",
+//           "sourceCharPosition": 2007
+//         },
+//         {
+//           "name": "script",
+//           "entryType": "script",
+//           "startTime": 49590.89999997616,
+//           "duration": 14,
+//           "invoker": "DOMWindow.onkeydown",
+//           "invokerType": "event-listener",
+//           "windowAttribution": "self",
+//           "executionStart": 49590.89999997616,
+//           "forcedStyleAndLayoutDuration": 0,
+//           "pauseDuration": 0,
+//           "sourceURL": "http://localhost:8000/demo/",
+//           "sourceFunctionName": "",
+//           "sourceCharPosition": 4656
+//         },
+//         {
+//           "name": "script",
+//           "entryType": "script",
+//           "startTime": 49606.5,
+//           "duration": 14,
+//           "invoker": "DOMWindow.onkeydown",
+//           "invokerType": "event-listener",
+//           "windowAttribution": "self",
+//           "executionStart": 49606.5,
+//           "forcedStyleAndLayoutDuration": 0,
+//           "pauseDuration": 0,
+//           "sourceURL": "http://localhost:8000/demo/",
+//           "sourceFunctionName": "",
+//           "sourceCharPosition": 4656
+//         },
+//         {
+//           "name": "script",
+//           "entryType": "script",
+//           "startTime": 49622.19999998808,
+//           "duration": 40,
+//           "invoker": "DOMWindow.onkeyup",
+//           "invokerType": "event-listener",
+//           "windowAttribution": "self",
+//           "executionStart": 49622.19999998808,
+//           "forcedStyleAndLayoutDuration": 0,
+//           "pauseDuration": 0,
+//           "sourceURL": "http://localhost:8000/demo/",
+//           "sourceFunctionName": "",
+//           "sourceCharPosition": 4656
+//         },
+//         {
+//           "name": "script",
+//           "entryType": "script",
+//           "startTime": 49662.19999998808,
+//           "duration": 39,
+//           "invoker": "DOMWindow.onkeyup",
+//           "invokerType": "event-listener",
+//           "windowAttribution": "self",
+//           "executionStart": 49662.19999998808,
+//           "forcedStyleAndLayoutDuration": 0,
+//           "pauseDuration": 0,
+//           "sourceURL": "http://localhost:8000/demo/",
+//           "sourceFunctionName": "",
+//           "sourceCharPosition": 4656
+//         }
+//       ]
+//     }
+//   ],
+//   "inputDelay": 203.0999999642372,
+//   "processingDuration": 111.30000001192093,
+//   "presentationDelay": 13.600000023841858,
+//   "loadState": "complete"
+// }

From a9549aacd066217946ad0a7c60b5713c4b23cbb2 Mon Sep 17 00:00:00 2001
From: Ethan Gardner <edgincvg@gmail.com>
Date: Thu, 28 Nov 2024 02:26:15 -0500
Subject: [PATCH 03/22] add more props to loaf attribution

---
 src/format-long-animation-frame-data.ts            | 2 ++
 test/unit/format-long-animation-frame-data.test.ts | 4 ++++
 2 files changed, 6 insertions(+)

diff --git a/src/format-long-animation-frame-data.ts b/src/format-long-animation-frame-data.ts
index be8b204..c93c228 100644
--- a/src/format-long-animation-frame-data.ts
+++ b/src/format-long-animation-frame-data.ts
@@ -64,6 +64,8 @@ export const formatLongAnimationFrameData = (attribution: INPAttribution) => {
         debug_loaf_script_source_url: script.sourceURL,
         debug_loaf_script_source_function_name: script.sourceFunctionName,
         debug_loaf_script_source_char_position: script.sourceCharPosition,
+        debug_loaf_pause_duration: script.pauseDuration,
+        debug_loaf_window_attribution: script.windowAttribution,
 
         // LoAF metadata.
         debug_loaf_meta_length: loafEntries.length,
diff --git a/test/unit/format-long-animation-frame-data.test.ts b/test/unit/format-long-animation-frame-data.test.ts
index adc6dcb..be99e31 100644
--- a/test/unit/format-long-animation-frame-data.test.ts
+++ b/test/unit/format-long-animation-frame-data.test.ts
@@ -47,6 +47,7 @@ describe('formatLongAnimationFrameData', () => {
       "debug_loaf_entry_total_forced_style_and_layout_duration": 80,
       "debug_loaf_entry_work_duration": 88,
       "debug_loaf_meta_length": 1,
+      "debug_loaf_pause_duration": 0,
       "debug_loaf_script_compile_duration": 0,
       "debug_loaf_script_exec_duration": 85,
       "debug_loaf_script_forced_style_and_layout_duration": 80,
@@ -56,6 +57,7 @@ describe('formatLongAnimationFrameData', () => {
       "debug_loaf_script_source_url": "http://localhost:8000/demo/",
       "debug_loaf_script_total_duration": 85,
       "debug_loaf_script_type": "event-listener",
+      "debug_loaf_window_attribution": "self",
     });
   });
 
@@ -119,6 +121,7 @@ describe('formatLongAnimationFrameData', () => {
       "debug_loaf_entry_total_forced_style_and_layout_duration": 0,
       "debug_loaf_entry_work_duration": 334,
       "debug_loaf_meta_length": 1,
+      "debug_loaf_pause_duration": 0,
       "debug_loaf_script_compile_duration": 0,
       "debug_loaf_script_exec_duration": 222,
       "debug_loaf_script_forced_style_and_layout_duration": 0,
@@ -128,6 +131,7 @@ describe('formatLongAnimationFrameData', () => {
       "debug_loaf_script_source_url": "http://localhost:8000/demo/",
       "debug_loaf_script_total_duration": 222,
       "debug_loaf_script_type": "user-callback",
+      "debug_loaf_window_attribution": "self",
     });
   });
 

From b747c20df9f2ac6aca5ef5b8d22cdf83340aaf44 Mon Sep 17 00:00:00 2001
From: Ethan Gardner <edgincvg@gmail.com>
Date: Thu, 28 Nov 2024 02:27:21 -0500
Subject: [PATCH 04/22] fix linting issue

---
 src/format-long-animation-frame-data.ts | 51 ++++++++++++++++---------
 1 file changed, 34 insertions(+), 17 deletions(-)

diff --git a/src/format-long-animation-frame-data.ts b/src/format-long-animation-frame-data.ts
index c93c228..331e7c7 100644
--- a/src/format-long-animation-frame-data.ts
+++ b/src/format-long-animation-frame-data.ts
@@ -28,17 +28,17 @@ import type { INPAttribution } from 'web-vitals';
  */
 export const formatLongAnimationFrameData = (attribution: INPAttribution) => {
   const loafEntries = attribution.longAnimationFrameEntries;
-  if(typeof loafEntries === 'undefined' || loafEntries.length === 0) {
+  if (typeof loafEntries === 'undefined' || loafEntries.length === 0) {
     return {};
   }
 
   let loafAttribution = {
-    debug_loaf_script_total_duration: 0
+    debug_loaf_script_total_duration: 0,
   };
 
   // The last LoAF entry is usually the most relevant.
   const loaf = attribution.longAnimationFrameEntries.at(-1);
-  if(typeof loaf !== 'undefined') {
+  if (typeof loaf !== 'undefined') {
     const loafEndTime = loaf.startTime + loaf.duration;
     loaf?.scripts.forEach(script => {
       if (script.duration <= loafAttribution.debug_loaf_script_total_duration) {
@@ -48,17 +48,32 @@ export const formatLongAnimationFrameData = (attribution: INPAttribution) => {
         // Stats for the LoAF entry itself.
         debug_loaf_entry_start_time: loaf.startTime,
         debug_loaf_entry_end_time: loafEndTime,
-        debug_loaf_entry_work_duration: loaf.renderStart ? loaf.renderStart - loaf.startTime : loaf.duration,
-        debug_loaf_entry_render_duration: loaf.renderStart ? loafEndTime - loaf.renderStart : 0,
-        debug_loaf_entry_total_forced_style_and_layout_duration: loaf.scripts.reduce((sum, script) => sum + script.forcedStyleAndLayoutDuration, 0),
-        debug_loaf_entry_pre_layout_duration: loaf.styleAndLayoutStart ? loaf.styleAndLayoutStart - loaf.renderStart : 0,
-        debug_loaf_entry_style_and_layout_duration: loaf.styleAndLayoutStart ? loafEndTime - loaf.styleAndLayoutStart : 0,
+        debug_loaf_entry_work_duration: loaf.renderStart
+          ? loaf.renderStart - loaf.startTime
+          : loaf.duration,
+        debug_loaf_entry_render_duration: loaf.renderStart
+          ? loafEndTime - loaf.renderStart
+          : 0,
+        debug_loaf_entry_total_forced_style_and_layout_duration:
+          loaf.scripts.reduce(
+            (sum, entry) => sum + entry.forcedStyleAndLayoutDuration,
+            0,
+          ),
+        debug_loaf_entry_pre_layout_duration: loaf.styleAndLayoutStart
+          ? loaf.styleAndLayoutStart - loaf.renderStart
+          : 0,
+        debug_loaf_entry_style_and_layout_duration: loaf.styleAndLayoutStart
+          ? loafEndTime - loaf.styleAndLayoutStart
+          : 0,
 
         // Stats for the longest script in the LoAF entry.
         debug_loaf_script_total_duration: script.duration,
-        debug_loaf_script_compile_duration: script.executionStart - script.startTime,
-        debug_loaf_script_exec_duration: script.startTime + script.duration - script.executionStart,
-        debug_loaf_script_forced_style_and_layout_duration: script.forcedStyleAndLayoutDuration,
+        debug_loaf_script_compile_duration:
+          script.executionStart - script.startTime,
+        debug_loaf_script_exec_duration:
+          script.startTime + script.duration - script.executionStart,
+        debug_loaf_script_forced_style_and_layout_duration:
+          script.forcedStyleAndLayoutDuration,
         debug_loaf_script_type: script.invokerType,
         debug_loaf_script_invoker: script.invoker,
         debug_loaf_script_source_url: script.sourceURL,
@@ -69,7 +84,7 @@ export const formatLongAnimationFrameData = (attribution: INPAttribution) => {
 
         // LoAF metadata.
         debug_loaf_meta_length: loafEntries.length,
-      }
+      };
     });
   }
 
@@ -78,8 +93,10 @@ export const formatLongAnimationFrameData = (attribution: INPAttribution) => {
   }
 
   // The LoAF script with the single longest total duration.
-  return Object.fromEntries(Object.entries(loafAttribution).map(([k, v]) =>
-    // Convert all floats to ints.
-     [k, typeof v === 'number' ? Math.floor(v) : v]
-  ));
-}
+  return Object.fromEntries(
+    Object.entries(loafAttribution).map(([k, v]) =>
+      // Convert all floats to ints.
+      [k, typeof v === 'number' ? Math.floor(v) : v],
+    ),
+  );
+};

From 0765283fdbb8d10ab246b0598e52a3ff9e3ebeb8 Mon Sep 17 00:00:00 2001
From: Ethan Gardner <edgincvg@gmail.com>
Date: Thu, 28 Nov 2024 02:28:15 -0500
Subject: [PATCH 05/22] code formatting

---
 .../format-long-animation-frame-data.test.ts  | 250 +++++++++---------
 1 file changed, 125 insertions(+), 125 deletions(-)

diff --git a/test/unit/format-long-animation-frame-data.test.ts b/test/unit/format-long-animation-frame-data.test.ts
index be99e31..e1db1de 100644
--- a/test/unit/format-long-animation-frame-data.test.ts
+++ b/test/unit/format-long-animation-frame-data.test.ts
@@ -4,34 +4,34 @@ import { formatLongAnimationFrameData } from '../../src/format-long-animation-fr
 describe('formatLongAnimationFrameData', () => {
   it('should format INP data correctly', () => {
     const attribution = {
-      "longAnimationFrameEntries": [
+      longAnimationFrameEntries: [
         {
-          "name": "long-animation-frame",
-          "entryType": "long-animation-frame",
-          "startTime": 5168847.600000024,
-          "duration": 90,
-          "renderStart": 5168936.1999999285,
-          "styleAndLayoutStart": 5168936.1999999285,
-          "firstUIEventTimestamp": 5168847,
-          "blockingDuration": 38,
-          "scripts": [
+          name: 'long-animation-frame',
+          entryType: 'long-animation-frame',
+          startTime: 5168847.600000024,
+          duration: 90,
+          renderStart: 5168936.1999999285,
+          styleAndLayoutStart: 5168936.1999999285,
+          firstUIEventTimestamp: 5168847,
+          blockingDuration: 38,
+          scripts: [
             {
-              "name": "script",
-              "entryType": "script",
-              "startTime": 5168847.899999976,
-              "duration": 85,
-              "invoker": "BUTTON#thrash-layout.onclick",
-              "invokerType": "event-listener",
-              "windowAttribution": "self",
-              "executionStart": 5168847.899999976,
-              "forcedStyleAndLayoutDuration": 80,
-              "pauseDuration": 0,
-              "sourceURL": "http://localhost:8000/demo/",
-              "sourceFunctionName": "",
-              "sourceCharPosition": 72
-            }
-          ]
-        }
+              name: 'script',
+              entryType: 'script',
+              startTime: 5168847.899999976,
+              duration: 85,
+              invoker: 'BUTTON#thrash-layout.onclick',
+              invokerType: 'event-listener',
+              windowAttribution: 'self',
+              executionStart: 5168847.899999976,
+              forcedStyleAndLayoutDuration: 80,
+              pauseDuration: 0,
+              sourceURL: 'http://localhost:8000/demo/',
+              sourceFunctionName: '',
+              sourceCharPosition: 72,
+            },
+          ],
+        },
       ],
     };
 
@@ -39,127 +39,127 @@ describe('formatLongAnimationFrameData', () => {
     const result = formatLongAnimationFrameData(attribution);
 
     expect(result).toEqual({
-      "debug_loaf_entry_end_time": 5168937,
-      "debug_loaf_entry_pre_layout_duration": 0,
-      "debug_loaf_entry_render_duration": 1,
-      "debug_loaf_entry_start_time": 5168847,
-      "debug_loaf_entry_style_and_layout_duration": 1,
-      "debug_loaf_entry_total_forced_style_and_layout_duration": 80,
-      "debug_loaf_entry_work_duration": 88,
-      "debug_loaf_meta_length": 1,
-      "debug_loaf_pause_duration": 0,
-      "debug_loaf_script_compile_duration": 0,
-      "debug_loaf_script_exec_duration": 85,
-      "debug_loaf_script_forced_style_and_layout_duration": 80,
-      "debug_loaf_script_invoker": "BUTTON#thrash-layout.onclick",
-      "debug_loaf_script_source_char_position": 72,
-      "debug_loaf_script_source_function_name": "",
-      "debug_loaf_script_source_url": "http://localhost:8000/demo/",
-      "debug_loaf_script_total_duration": 85,
-      "debug_loaf_script_type": "event-listener",
-      "debug_loaf_window_attribution": "self",
+      debug_loaf_entry_end_time: 5168937,
+      debug_loaf_entry_pre_layout_duration: 0,
+      debug_loaf_entry_render_duration: 1,
+      debug_loaf_entry_start_time: 5168847,
+      debug_loaf_entry_style_and_layout_duration: 1,
+      debug_loaf_entry_total_forced_style_and_layout_duration: 80,
+      debug_loaf_entry_work_duration: 88,
+      debug_loaf_meta_length: 1,
+      debug_loaf_pause_duration: 0,
+      debug_loaf_script_compile_duration: 0,
+      debug_loaf_script_exec_duration: 85,
+      debug_loaf_script_forced_style_and_layout_duration: 80,
+      debug_loaf_script_invoker: 'BUTTON#thrash-layout.onclick',
+      debug_loaf_script_source_char_position: 72,
+      debug_loaf_script_source_function_name: '',
+      debug_loaf_script_source_url: 'http://localhost:8000/demo/',
+      debug_loaf_script_total_duration: 85,
+      debug_loaf_script_type: 'event-listener',
+      debug_loaf_window_attribution: 'self',
     });
   });
 
   it('should handle multiple scripts by giving info about the single longest total duration.', () => {
     const attribution = {
-      "longAnimationFrameEntries": [
+      longAnimationFrameEntries: [
         {
-          "name": "long-animation-frame",
-          "entryType": "long-animation-frame",
-          "startTime": 49367.80000001192,
-          "duration": 335,
-          "renderStart": 49702.19999998808,
-          "styleAndLayoutStart": 49702.69999998808,
-          "firstUIEventTimestamp": 49387.80000001192,
-          "blockingDuration": 235,
-          "scripts": [
+          name: 'long-animation-frame',
+          entryType: 'long-animation-frame',
+          startTime: 49367.80000001192,
+          duration: 335,
+          renderStart: 49702.19999998808,
+          styleAndLayoutStart: 49702.69999998808,
+          firstUIEventTimestamp: 49387.80000001192,
+          blockingDuration: 235,
+          scripts: [
             {
-              "name": "script",
-              "entryType": "script",
-              "startTime": 49367.89999997616,
-              "duration": 222,
-              "invoker": "TimerHandler:setTimeout",
-              "invokerType": "user-callback",
-              "windowAttribution": "self",
-              "executionStart": 49367.89999997616,
-              "forcedStyleAndLayoutDuration": 0,
-              "pauseDuration": 0,
-              "sourceURL": "http://localhost:8000/demo/",
-              "sourceFunctionName": "periodicBlock",
-              "sourceCharPosition": 2007
+              name: 'script',
+              entryType: 'script',
+              startTime: 49367.89999997616,
+              duration: 222,
+              invoker: 'TimerHandler:setTimeout',
+              invokerType: 'user-callback',
+              windowAttribution: 'self',
+              executionStart: 49367.89999997616,
+              forcedStyleAndLayoutDuration: 0,
+              pauseDuration: 0,
+              sourceURL: 'http://localhost:8000/demo/',
+              sourceFunctionName: 'periodicBlock',
+              sourceCharPosition: 2007,
             },
             {
-              "name": "script",
-              "entryType": "script",
-              "startTime": 49590.89999997616,
-              "duration": 14,
-              "invoker": "DOMWindow.onkeydown",
-              "invokerType": "event-listener",
-              "windowAttribution": "self",
-              "executionStart": 49590.89999997616,
-              "forcedStyleAndLayoutDuration": 0,
-              "pauseDuration": 0,
-              "sourceURL": "http://localhost:8000/demo/",
-              "sourceFunctionName": "",
-              "sourceCharPosition": 4656
-            }
-          ]
-        }
+              name: 'script',
+              entryType: 'script',
+              startTime: 49590.89999997616,
+              duration: 14,
+              invoker: 'DOMWindow.onkeydown',
+              invokerType: 'event-listener',
+              windowAttribution: 'self',
+              executionStart: 49590.89999997616,
+              forcedStyleAndLayoutDuration: 0,
+              pauseDuration: 0,
+              sourceURL: 'http://localhost:8000/demo/',
+              sourceFunctionName: '',
+              sourceCharPosition: 4656,
+            },
+          ],
+        },
       ],
-    }
+    };
 
     // @ts-ignore
     const result = formatLongAnimationFrameData(attribution);
 
     expect(result).toEqual({
-      "debug_loaf_entry_end_time": 49702,
-      "debug_loaf_entry_pre_layout_duration": 0,
-      "debug_loaf_entry_render_duration": 0,
-      "debug_loaf_entry_start_time": 49367,
-      "debug_loaf_entry_style_and_layout_duration": 0,
-      "debug_loaf_entry_total_forced_style_and_layout_duration": 0,
-      "debug_loaf_entry_work_duration": 334,
-      "debug_loaf_meta_length": 1,
-      "debug_loaf_pause_duration": 0,
-      "debug_loaf_script_compile_duration": 0,
-      "debug_loaf_script_exec_duration": 222,
-      "debug_loaf_script_forced_style_and_layout_duration": 0,
-      "debug_loaf_script_invoker": "TimerHandler:setTimeout",
-      "debug_loaf_script_source_char_position": 2007,
-      "debug_loaf_script_source_function_name": "periodicBlock",
-      "debug_loaf_script_source_url": "http://localhost:8000/demo/",
-      "debug_loaf_script_total_duration": 222,
-      "debug_loaf_script_type": "user-callback",
-      "debug_loaf_window_attribution": "self",
+      debug_loaf_entry_end_time: 49702,
+      debug_loaf_entry_pre_layout_duration: 0,
+      debug_loaf_entry_render_duration: 0,
+      debug_loaf_entry_start_time: 49367,
+      debug_loaf_entry_style_and_layout_duration: 0,
+      debug_loaf_entry_total_forced_style_and_layout_duration: 0,
+      debug_loaf_entry_work_duration: 334,
+      debug_loaf_meta_length: 1,
+      debug_loaf_pause_duration: 0,
+      debug_loaf_script_compile_duration: 0,
+      debug_loaf_script_exec_duration: 222,
+      debug_loaf_script_forced_style_and_layout_duration: 0,
+      debug_loaf_script_invoker: 'TimerHandler:setTimeout',
+      debug_loaf_script_source_char_position: 2007,
+      debug_loaf_script_source_function_name: 'periodicBlock',
+      debug_loaf_script_source_url: 'http://localhost:8000/demo/',
+      debug_loaf_script_total_duration: 222,
+      debug_loaf_script_type: 'user-callback',
+      debug_loaf_window_attribution: 'self',
     });
   });
 
   it('should handle attribution data with zero scripts', () => {
     const attribution = {
-      "interactionTarget": "#textarea",
-      "interactionTargetElement": {},
-      "interactionType": "keyboard",
-      "interactionTime": 49387.80000001192,
-      "nextPaintTime": 49715.80000001192,
-      "longAnimationFrameEntries": [
+      interactionTarget: '#textarea',
+      interactionTargetElement: {},
+      interactionType: 'keyboard',
+      interactionTime: 49387.80000001192,
+      nextPaintTime: 49715.80000001192,
+      longAnimationFrameEntries: [
         {
-          "name": "long-animation-frame",
-          "entryType": "long-animation-frame",
-          "startTime": 49367.80000001192,
-          "duration": 335,
-          "renderStart": 49702.19999998808,
-          "styleAndLayoutStart": 49702.69999998808,
-          "firstUIEventTimestamp": 49387.80000001192,
-          "blockingDuration": 235,
-          "scripts": []
-        }
+          name: 'long-animation-frame',
+          entryType: 'long-animation-frame',
+          startTime: 49367.80000001192,
+          duration: 335,
+          renderStart: 49702.19999998808,
+          styleAndLayoutStart: 49702.69999998808,
+          firstUIEventTimestamp: 49387.80000001192,
+          blockingDuration: 235,
+          scripts: [],
+        },
       ],
-      "inputDelay": 203.0999999642372,
-      "processingDuration": 111.30000001192093,
-      "presentationDelay": 13.600000023841858,
-      "loadState": "complete"
-    }
+      inputDelay: 203.0999999642372,
+      processingDuration: 111.30000001192093,
+      presentationDelay: 13.600000023841858,
+      loadState: 'complete',
+    };
 
     // @ts-ignore
     const result = formatLongAnimationFrameData(attribution);

From 097522f8f98a3c90bf8336146befbd62f9346b90 Mon Sep 17 00:00:00 2001
From: ethangardner <ethan.gardner@gsa.gov>
Date: Wed, 27 Nov 2024 16:49:42 -0500
Subject: [PATCH 06/22] begin working on loaf attribution format

---
 demo/index.html                               |  31 +-
 src/format-long-animation-frame-data.ts       |  94 ++++++
 src/index.ts                                  |   1 +
 .../format-long-animation-frame-data.test.ts  | 297 ++++++++++++++++++
 4 files changed, 421 insertions(+), 2 deletions(-)
 create mode 100644 src/format-long-animation-frame-data.ts
 create mode 100644 test/unit/format-long-animation-frame-data.test.ts

diff --git a/demo/index.html b/demo/index.html
index b7cc06a..399d0c5 100644
--- a/demo/index.html
+++ b/demo/index.html
@@ -23,6 +23,30 @@
     below.
   -->
   <script type="module" src="../dist/dap-performance-addon.js"></script>
+  <script type="module">
+    const button = document.querySelector('#thrash-layout');
+    button.addEventListener('click', () => {
+      const elem = document.querySelector('#thrash-element-1');
+      // eslint-disable-next-line no-plusplus
+      for (let i = 0; i < 1000; i++) {
+        // Read height (this forces layout recalculation)
+        const height = elem.offsetHeight;
+        // Write width (this marks layout as dirty)
+        elem.style.width = `${height + 1}px`;
+      }
+      elem.removeAttribute('style');
+    });
+
+    button.addEventListener('click', () => {
+      const elem = document.querySelector('#thrash-element-2');
+      // eslint-disable-next-line no-plusplus
+      for (let i = 0; i < 1000; i++) {
+        const height = elem.offsetHeight;
+        elem.style.width = `${height + 1}px`;
+      }
+      elem.removeAttribute('style');
+    });
+  </script>
 </head>
 <body>
 <main>
@@ -33,7 +57,10 @@
   <h1>
     Demo page
   </h1>
-  <div class="article-container">
+  <p>
+    <button id="thrash-layout">This button will cause layout thrashing</button>
+  </p>
+  <div class="article-container" id="thrash-element-1">
     <article>
       <img src="https://picsum.photos/640/360"
            srcset="https://picsum.photos/1024/576 1024w, https://picsum.photos/960/540 960w, https://picsum.photos/640/360 640w, https://picsum.photos/480/270 480w"
@@ -44,7 +71,7 @@ <h1>
         shift down considerably after the image is loaded.
       </p>
     </article>
-    <div class="sidebar">
+    <div class="sidebar" id="thrash-element-2">
       <div class="related-articles">
         <h2>
           Related Articles
diff --git a/src/format-long-animation-frame-data.ts b/src/format-long-animation-frame-data.ts
new file mode 100644
index 0000000..244fa16
--- /dev/null
+++ b/src/format-long-animation-frame-data.ts
@@ -0,0 +1,94 @@
+import type { INPAttribution } from 'web-vitals';
+
+// export const formatLongAnimationFrameData = (attribution: INPAttribution) => {
+//
+// };
+
+// export const formatLongAnimationFrameData = (attribution: INPAttribution) => {
+//   // The last LoAF entry is usually the most relevant.
+//   const loaf = attribution.longAnimationFrameEntries.at(-1);
+//   const script = loaf?.scripts.sort((a, b) => b.duration - a.duration)[0];
+//   let obj = {}
+//
+//   if(script) {
+//     // long event handler
+//     const { invokerType } = script; // always event-listener for long event handlers
+//     const { invoker } = script; // element that had the event listener
+//     const { sourceURL } = script;
+//     const { sourceCharPosition } = script;
+//     const { sourceFunctionName } = script;
+//
+//     // long input delay: during page load - was this from script evaluation
+//     const { invokerType } = script; //
+//     const { sourceLocation } = script;
+//
+//     // long input delay: after page load - was this from script evaluation
+//     const { invokerType } = script; // user-callback (recurring timer like setInterval), event-listener, module-script, classic-script. Could also be expensive fetch call
+//     const { sourceURL } = script; // https://example.com/app.js
+//     const { sourceCharPosition } = script; // 83
+//     const { sourceFunctionName } = script; // update
+//
+//     // presentation delay
+//     const { invokerType } = script; // user-callback (recurring timer like setInterval), event-listener, module-script, classic-script. Could also be expensive fetch call
+//     const { sourceURL } = script; // https://example.com/app.js
+//     const { sourceCharPosition } = script; // 83
+//     const { sourceFunctionName } = script; // update
+//   }
+// }
+
+
+export const formatLongAnimationFrameData = (attribution: INPAttribution) => {
+  const loafEntries = attribution.longAnimationFrameEntries;
+  if(typeof loafEntries === 'undefined' || loafEntries.length === 0) {
+    return {};
+  }
+
+  let loafAttribution = {
+    debug_loaf_script_total_duration: 0
+  };
+
+  // The last LoAF entry is usually the most relevant.
+  const loaf = attribution.longAnimationFrameEntries.at(-1);
+  if(typeof loaf !== 'undefined') {
+    const loafEndTime = loaf.startTime + loaf.duration;
+    loaf?.scripts.forEach(script => {
+      if (script.duration <= loafAttribution.debug_loaf_script_total_duration) {
+        return;
+      }
+      loafAttribution = {
+        // Stats for the LoAF entry itself.
+        debug_loaf_entry_start_time: loaf.startTime,
+        debug_loaf_entry_end_time: loafEndTime,
+        debug_loaf_entry_work_duration: loaf.renderStart ? loaf.renderStart - loaf.startTime : loaf.duration,
+        debug_loaf_entry_render_duration: loaf.renderStart ? loafEndTime - loaf.renderStart : 0,
+        debug_loaf_entry_total_forced_style_and_layout_duration: loaf.scripts.reduce((sum, script) => sum + script.forcedStyleAndLayoutDuration, 0),
+        debug_loaf_entry_pre_layout_duration: loaf.styleAndLayoutStart ? loaf.styleAndLayoutStart - loaf.renderStart : 0,
+        debug_loaf_entry_style_and_layout_duration: loaf.styleAndLayoutStart ? loafEndTime - loaf.styleAndLayoutStart : 0,
+
+        // Stats for the longest script in the LoAF entry.
+        debug_loaf_script_total_duration: script.duration,
+        debug_loaf_script_compile_duration: script.executionStart - script.startTime,
+        debug_loaf_script_exec_duration: script.startTime + script.duration - script.executionStart,
+        debug_loaf_script_forced_style_and_layout_duration: script.forcedStyleAndLayoutDuration,
+        debug_loaf_script_type: script.invokerType,
+        debug_loaf_script_invoker: script.invoker,
+        debug_loaf_script_source_url: script.sourceURL,
+        debug_loaf_script_source_function_name: script.sourceFunctionName,
+        debug_loaf_script_source_char_position: script.sourceCharPosition,
+
+        // LoAF metadata.
+        debug_loaf_meta_length: loafEntries.length,
+      }
+    });
+  }
+
+  if (!loafAttribution.debug_loaf_script_total_duration) {
+    return {};
+  }
+
+  // The LoAF script with the single longest total duration.
+  return Object.fromEntries(Object.entries(loafAttribution).map(([k, v]) => 
+    // Convert all floats to ints.
+     [k, typeof v === 'number' ? Math.floor(v) : v]
+  ));
+}
diff --git a/src/index.ts b/src/index.ts
index 48e86e4..a8ab22b 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -5,6 +5,7 @@ const initWebVitalsEvents = () => {
   onCLS(sendToAnalytics);
   onFCP(sendToAnalytics);
   onINP(sendToAnalytics);
+  onINP(console.log);
   onLCP(sendToAnalytics);
 };
 
diff --git a/test/unit/format-long-animation-frame-data.test.ts b/test/unit/format-long-animation-frame-data.test.ts
new file mode 100644
index 0000000..53ea21e
--- /dev/null
+++ b/test/unit/format-long-animation-frame-data.test.ts
@@ -0,0 +1,297 @@
+import { it, describe, expect } from 'vitest';
+import { formatLongAnimationFrameData } from '../../src/format-long-animation-frame-data.js';
+
+describe('formatLongAnimationFrameData', () => {
+  it('should format INP data correctly', () => {
+    const attribution = {
+      "interactionTarget": "#thrash-layout",
+      "interactionTargetElement": {},
+      "interactionType": "pointer",
+      "interactionTime": 5168847,
+      "nextPaintTime": 5168951,
+      "processedEventEntries": [
+        {
+          "name": "pointerup",
+          "entryType": "event",
+          "startTime": 5168847,
+          "duration": 104,
+          "interactionId": 3343,
+          "processingStart": 5168847.799999952,
+          "processingEnd": 5168847.799999952,
+          "cancelable": true
+        },
+        {
+          "name": "mouseup",
+          "entryType": "event",
+          "startTime": 5168847,
+          "duration": 104,
+          "interactionId": 0,
+          "processingStart": 5168847.799999952,
+          "processingEnd": 5168847.799999952,
+          "cancelable": true
+        },
+        {
+          "name": "click",
+          "entryType": "event",
+          "startTime": 5168847,
+          "duration": 104,
+          "interactionId": 3343,
+          "processingStart": 5168847.799999952,
+          "processingEnd": 5168933.600000024,
+          "cancelable": true
+        },
+        {
+          "name": "pointerup",
+          "entryType": "event",
+          "startTime": 5168847,
+          "duration": 104,
+          "interactionId": 3343,
+          "processingStart": 5168847.799999952,
+          "processingEnd": 5168847.799999952,
+          "cancelable": true
+        },
+        {
+          "name": "mouseup",
+          "entryType": "event",
+          "startTime": 5168847,
+          "duration": 104,
+          "interactionId": 0,
+          "processingStart": 5168847.799999952,
+          "processingEnd": 5168847.799999952,
+          "cancelable": true
+        },
+        {
+          "name": "click",
+          "entryType": "event",
+          "startTime": 5168847,
+          "duration": 104,
+          "interactionId": 3343,
+          "processingStart": 5168847.799999952,
+          "processingEnd": 5168933.600000024,
+          "cancelable": true
+        }
+      ],
+      "longAnimationFrameEntries": [
+        {
+          "name": "long-animation-frame",
+          "entryType": "long-animation-frame",
+          "startTime": 5168847.600000024,
+          "duration": 90,
+          "renderStart": 5168936.1999999285,
+          "styleAndLayoutStart": 5168936.1999999285,
+          "firstUIEventTimestamp": 5168847,
+          "blockingDuration": 38,
+          "scripts": [
+            {
+              "name": "script",
+              "entryType": "script",
+              "startTime": 5168847.899999976,
+              "duration": 85,
+              "invoker": "BUTTON#thrash-layout.onclick",
+              "invokerType": "event-listener",
+              "windowAttribution": "self",
+              "executionStart": 5168847.899999976,
+              "forcedStyleAndLayoutDuration": 80,
+              "pauseDuration": 0,
+              "sourceURL": "http://localhost:8000/demo/",
+              "sourceFunctionName": "",
+              "sourceCharPosition": 72
+            }
+          ]
+        }
+      ],
+      "inputDelay": 0.7999999523162842,
+      "processingDuration": 85.80000007152557,
+      "presentationDelay": 17.399999976158142,
+      "loadState": "complete"
+    };
+
+    // @ts-ignore
+    const result = formatLongAnimationFrameData(attribution);
+
+    expect(result).toEqual({
+      "debug_loaf_entry_end_time": 5168937,
+      "debug_loaf_entry_pre_layout_duration": 0,
+      "debug_loaf_entry_render_duration": 1,
+      "debug_loaf_entry_start_time": 5168847,
+      "debug_loaf_entry_style_and_layout_duration": 1,
+      "debug_loaf_entry_total_forced_style_and_layout_duration": 80,
+      "debug_loaf_entry_work_duration": 88,
+      "debug_loaf_meta_length": 1,
+      "debug_loaf_script_compile_duration": 0,
+      "debug_loaf_script_exec_duration": 85,
+      "debug_loaf_script_forced_style_and_layout_duration": 80,
+      "debug_loaf_script_invoker": "BUTTON#thrash-layout.onclick",
+      "debug_loaf_script_source_char_position": 72,
+      "debug_loaf_script_source_function_name": "",
+      "debug_loaf_script_source_url": "http://localhost:8000/demo/",
+      "debug_loaf_script_total_duration": 85,
+      "debug_loaf_script_type": "event-listener",
+    });
+  });
+
+  it('should return default/empty params if no attribution data is provided', () => {
+    // @ts-ignore
+    const result = formatLongAnimationFrameData('unknown', null);
+
+    expect(result).toEqual({
+      debug_target: '(not set)',
+    });
+  });
+});
+
+/**
+ * Samples of event data from the web-vitals.js package are below:
+ */
+// {
+//   "name": "INP",
+//   "value": 104,
+//   "rating": "good",
+//   "delta": 104,
+//   "entries": [
+//     {
+//       "name": "pointerup",
+//       "entryType": "event",
+//       "startTime": 5168847,
+//       "duration": 104,
+//       "interactionId": 3343,
+//       "processingStart": 5168847.799999952,
+//       "processingEnd": 5168847.799999952,
+//       "cancelable": true
+//     },
+//     {
+//       "name": "click",
+//       "entryType": "event",
+//       "startTime": 5168847,
+//       "duration": 104,
+//       "interactionId": 3343,
+//       "processingStart": 5168847.799999952,
+//       "processingEnd": 5168933.600000024,
+//       "cancelable": true
+//     },
+//     {
+//       "name": "pointerup",
+//       "entryType": "event",
+//       "startTime": 5168847,
+//       "duration": 104,
+//       "interactionId": 3343,
+//       "processingStart": 5168847.799999952,
+//       "processingEnd": 5168847.799999952,
+//       "cancelable": true
+//     },
+//     {
+//       "name": "click",
+//       "entryType": "event",
+//       "startTime": 5168847,
+//       "duration": 104,
+//       "interactionId": 3343,
+//       "processingStart": 5168847.799999952,
+//       "processingEnd": 5168933.600000024,
+//       "cancelable": true
+//     }
+//   ],
+//   "id": "v4-1732734514604-7082926874486",
+//   "navigationType": "reload",
+//   "attribution": {
+//     "interactionTarget": "#thrash-layout",
+//     "interactionTargetElement": {},
+//     "interactionType": "pointer",
+//     "interactionTime": 5168847,
+//     "nextPaintTime": 5168951,
+//     "processedEventEntries": [
+//       {
+//         "name": "pointerup",
+//         "entryType": "event",
+//         "startTime": 5168847,
+//         "duration": 104,
+//         "interactionId": 3343,
+//         "processingStart": 5168847.799999952,
+//         "processingEnd": 5168847.799999952,
+//         "cancelable": true
+//       },
+//       {
+//         "name": "mouseup",
+//         "entryType": "event",
+//         "startTime": 5168847,
+//         "duration": 104,
+//         "interactionId": 0,
+//         "processingStart": 5168847.799999952,
+//         "processingEnd": 5168847.799999952,
+//         "cancelable": true
+//       },
+//       {
+//         "name": "click",
+//         "entryType": "event",
+//         "startTime": 5168847,
+//         "duration": 104,
+//         "interactionId": 3343,
+//         "processingStart": 5168847.799999952,
+//         "processingEnd": 5168933.600000024,
+//         "cancelable": true
+//       },
+//       {
+//         "name": "pointerup",
+//         "entryType": "event",
+//         "startTime": 5168847,
+//         "duration": 104,
+//         "interactionId": 3343,
+//         "processingStart": 5168847.799999952,
+//         "processingEnd": 5168847.799999952,
+//         "cancelable": true
+//       },
+//       {
+//         "name": "mouseup",
+//         "entryType": "event",
+//         "startTime": 5168847,
+//         "duration": 104,
+//         "interactionId": 0,
+//         "processingStart": 5168847.799999952,
+//         "processingEnd": 5168847.799999952,
+//         "cancelable": true
+//       },
+//       {
+//         "name": "click",
+//         "entryType": "event",
+//         "startTime": 5168847,
+//         "duration": 104,
+//         "interactionId": 3343,
+//         "processingStart": 5168847.799999952,
+//         "processingEnd": 5168933.600000024,
+//         "cancelable": true
+//       }
+//     ],
+//     "longAnimationFrameEntries": [
+//       {
+//         "name": "long-animation-frame",
+//         "entryType": "long-animation-frame",
+//         "startTime": 5168847.600000024,
+//         "duration": 90,
+//         "renderStart": 5168936.1999999285,
+//         "styleAndLayoutStart": 5168936.1999999285,
+//         "firstUIEventTimestamp": 5168847,
+//         "blockingDuration": 38,
+//         "scripts": [
+//           {
+//             "name": "script",
+//             "entryType": "script",
+//             "startTime": 5168847.899999976,
+//             "duration": 85,
+//             "invoker": "BUTTON#thrash-layout.onclick",
+//             "invokerType": "event-listener",
+//             "windowAttribution": "self",
+//             "executionStart": 5168847.899999976,
+//             "forcedStyleAndLayoutDuration": 80,
+//             "pauseDuration": 0,
+//             "sourceURL": "http://localhost:8000/demo/",
+//             "sourceFunctionName": "",
+//             "sourceCharPosition": 72
+//           }
+//         ]
+//       }
+//     ],
+//     "inputDelay": 0.7999999523162842,
+//     "processingDuration": 85.80000007152557,
+//     "presentationDelay": 17.399999976158142,
+//     "loadState": "complete"
+//   }
+// }

From 6628d1fd7ff4b6d34909d44854c0bc1c9928867e Mon Sep 17 00:00:00 2001
From: Ethan Gardner <edgincvg@gmail.com>
Date: Wed, 27 Nov 2024 14:56:03 -0500
Subject: [PATCH 07/22] update tests for loaf attribution

---
 package.json                                  |   1 -
 src/format-long-animation-frame-data.ts       |  65 +--
 .../format-long-animation-frame-data.test.ts  | 466 +++++++++++++++---
 3 files changed, 419 insertions(+), 113 deletions(-)

diff --git a/package.json b/package.json
index 6457b6c..7835d81 100644
--- a/package.json
+++ b/package.json
@@ -24,7 +24,6 @@
     "test:coverage": "vitest --coverage"
   },
   "dependencies": {
-    "lit": "^3.2.1",
     "web-vitals": "^4.2.4"
   },
   "devDependencies": {
diff --git a/src/format-long-animation-frame-data.ts b/src/format-long-animation-frame-data.ts
index 244fa16..be8b204 100644
--- a/src/format-long-animation-frame-data.ts
+++ b/src/format-long-animation-frame-data.ts
@@ -1,42 +1,31 @@
 import type { INPAttribution } from 'web-vitals';
 
-// export const formatLongAnimationFrameData = (attribution: INPAttribution) => {
-//
-// };
-
-// export const formatLongAnimationFrameData = (attribution: INPAttribution) => {
-//   // The last LoAF entry is usually the most relevant.
-//   const loaf = attribution.longAnimationFrameEntries.at(-1);
-//   const script = loaf?.scripts.sort((a, b) => b.duration - a.duration)[0];
-//   let obj = {}
-//
-//   if(script) {
-//     // long event handler
-//     const { invokerType } = script; // always event-listener for long event handlers
-//     const { invoker } = script; // element that had the event listener
-//     const { sourceURL } = script;
-//     const { sourceCharPosition } = script;
-//     const { sourceFunctionName } = script;
-//
-//     // long input delay: during page load - was this from script evaluation
-//     const { invokerType } = script; //
-//     const { sourceLocation } = script;
-//
-//     // long input delay: after page load - was this from script evaluation
-//     const { invokerType } = script; // user-callback (recurring timer like setInterval), event-listener, module-script, classic-script. Could also be expensive fetch call
-//     const { sourceURL } = script; // https://example.com/app.js
-//     const { sourceCharPosition } = script; // 83
-//     const { sourceFunctionName } = script; // update
-//
-//     // presentation delay
-//     const { invokerType } = script; // user-callback (recurring timer like setInterval), event-listener, module-script, classic-script. Could also be expensive fetch call
-//     const { sourceURL } = script; // https://example.com/app.js
-//     const { sourceCharPosition } = script; // 83
-//     const { sourceFunctionName } = script; // update
-//   }
-// }
-
-
+/**
+ * Properties of note
+ *
+ * // Long-running event handler would be like the below:
+ * const { invokerType } = script; // always event-listener for long event handlers
+ * const { invoker } = script; // element that had the event listener
+ * const { sourceURL } = script; // https://example.com/app.js
+ * const { sourceCharPosition } = script; // 83
+ * const { sourceFunctionName } = script; // update
+ *
+ * // long input delay: during page load - was this from script evaluation?
+ * const { invokerType } = script;
+ * const { sourceLocation } = script;
+ *
+ * // long input delay: after page load
+ * const { invokerType } = script; // user-callback (recurring timer like setInterval), event-listener, module-script, classic-script. Could also be expensive fetch call
+ * const { sourceURL } = script; // https://example.com/app.js
+ * const { sourceCharPosition } = script; // 83
+ * const { sourceFunctionName } = script; // update
+ *
+ * // presentation delay
+ * const { invokerType } = script; // user-callback (recurring timer like setInterval), event-listener, module-script, classic-script. Could also be expensive fetch call
+ * const { sourceURL } = script; // https://example.com/app.js
+ * const { sourceCharPosition } = script; // 83
+ * const { sourceFunctionName } = script; // update
+ */
 export const formatLongAnimationFrameData = (attribution: INPAttribution) => {
   const loafEntries = attribution.longAnimationFrameEntries;
   if(typeof loafEntries === 'undefined' || loafEntries.length === 0) {
@@ -87,7 +76,7 @@ export const formatLongAnimationFrameData = (attribution: INPAttribution) => {
   }
 
   // The LoAF script with the single longest total duration.
-  return Object.fromEntries(Object.entries(loafAttribution).map(([k, v]) => 
+  return Object.fromEntries(Object.entries(loafAttribution).map(([k, v]) =>
     // Convert all floats to ints.
      [k, typeof v === 'number' ? Math.floor(v) : v]
   ));
diff --git a/test/unit/format-long-animation-frame-data.test.ts b/test/unit/format-long-animation-frame-data.test.ts
index 53ea21e..adc6dcb 100644
--- a/test/unit/format-long-animation-frame-data.test.ts
+++ b/test/unit/format-long-animation-frame-data.test.ts
@@ -4,73 +4,6 @@ import { formatLongAnimationFrameData } from '../../src/format-long-animation-fr
 describe('formatLongAnimationFrameData', () => {
   it('should format INP data correctly', () => {
     const attribution = {
-      "interactionTarget": "#thrash-layout",
-      "interactionTargetElement": {},
-      "interactionType": "pointer",
-      "interactionTime": 5168847,
-      "nextPaintTime": 5168951,
-      "processedEventEntries": [
-        {
-          "name": "pointerup",
-          "entryType": "event",
-          "startTime": 5168847,
-          "duration": 104,
-          "interactionId": 3343,
-          "processingStart": 5168847.799999952,
-          "processingEnd": 5168847.799999952,
-          "cancelable": true
-        },
-        {
-          "name": "mouseup",
-          "entryType": "event",
-          "startTime": 5168847,
-          "duration": 104,
-          "interactionId": 0,
-          "processingStart": 5168847.799999952,
-          "processingEnd": 5168847.799999952,
-          "cancelable": true
-        },
-        {
-          "name": "click",
-          "entryType": "event",
-          "startTime": 5168847,
-          "duration": 104,
-          "interactionId": 3343,
-          "processingStart": 5168847.799999952,
-          "processingEnd": 5168933.600000024,
-          "cancelable": true
-        },
-        {
-          "name": "pointerup",
-          "entryType": "event",
-          "startTime": 5168847,
-          "duration": 104,
-          "interactionId": 3343,
-          "processingStart": 5168847.799999952,
-          "processingEnd": 5168847.799999952,
-          "cancelable": true
-        },
-        {
-          "name": "mouseup",
-          "entryType": "event",
-          "startTime": 5168847,
-          "duration": 104,
-          "interactionId": 0,
-          "processingStart": 5168847.799999952,
-          "processingEnd": 5168847.799999952,
-          "cancelable": true
-        },
-        {
-          "name": "click",
-          "entryType": "event",
-          "startTime": 5168847,
-          "duration": 104,
-          "interactionId": 3343,
-          "processingStart": 5168847.799999952,
-          "processingEnd": 5168933.600000024,
-          "cancelable": true
-        }
-      ],
       "longAnimationFrameEntries": [
         {
           "name": "long-animation-frame",
@@ -100,10 +33,6 @@ describe('formatLongAnimationFrameData', () => {
           ]
         }
       ],
-      "inputDelay": 0.7999999523162842,
-      "processingDuration": 85.80000007152557,
-      "presentationDelay": 17.399999976158142,
-      "loadState": "complete"
     };
 
     // @ts-ignore
@@ -130,19 +59,124 @@ describe('formatLongAnimationFrameData', () => {
     });
   });
 
-  it('should return default/empty params if no attribution data is provided', () => {
+  it('should handle multiple scripts by giving info about the single longest total duration.', () => {
+    const attribution = {
+      "longAnimationFrameEntries": [
+        {
+          "name": "long-animation-frame",
+          "entryType": "long-animation-frame",
+          "startTime": 49367.80000001192,
+          "duration": 335,
+          "renderStart": 49702.19999998808,
+          "styleAndLayoutStart": 49702.69999998808,
+          "firstUIEventTimestamp": 49387.80000001192,
+          "blockingDuration": 235,
+          "scripts": [
+            {
+              "name": "script",
+              "entryType": "script",
+              "startTime": 49367.89999997616,
+              "duration": 222,
+              "invoker": "TimerHandler:setTimeout",
+              "invokerType": "user-callback",
+              "windowAttribution": "self",
+              "executionStart": 49367.89999997616,
+              "forcedStyleAndLayoutDuration": 0,
+              "pauseDuration": 0,
+              "sourceURL": "http://localhost:8000/demo/",
+              "sourceFunctionName": "periodicBlock",
+              "sourceCharPosition": 2007
+            },
+            {
+              "name": "script",
+              "entryType": "script",
+              "startTime": 49590.89999997616,
+              "duration": 14,
+              "invoker": "DOMWindow.onkeydown",
+              "invokerType": "event-listener",
+              "windowAttribution": "self",
+              "executionStart": 49590.89999997616,
+              "forcedStyleAndLayoutDuration": 0,
+              "pauseDuration": 0,
+              "sourceURL": "http://localhost:8000/demo/",
+              "sourceFunctionName": "",
+              "sourceCharPosition": 4656
+            }
+          ]
+        }
+      ],
+    }
+
     // @ts-ignore
-    const result = formatLongAnimationFrameData('unknown', null);
+    const result = formatLongAnimationFrameData(attribution);
 
     expect(result).toEqual({
-      debug_target: '(not set)',
+      "debug_loaf_entry_end_time": 49702,
+      "debug_loaf_entry_pre_layout_duration": 0,
+      "debug_loaf_entry_render_duration": 0,
+      "debug_loaf_entry_start_time": 49367,
+      "debug_loaf_entry_style_and_layout_duration": 0,
+      "debug_loaf_entry_total_forced_style_and_layout_duration": 0,
+      "debug_loaf_entry_work_duration": 334,
+      "debug_loaf_meta_length": 1,
+      "debug_loaf_script_compile_duration": 0,
+      "debug_loaf_script_exec_duration": 222,
+      "debug_loaf_script_forced_style_and_layout_duration": 0,
+      "debug_loaf_script_invoker": "TimerHandler:setTimeout",
+      "debug_loaf_script_source_char_position": 2007,
+      "debug_loaf_script_source_function_name": "periodicBlock",
+      "debug_loaf_script_source_url": "http://localhost:8000/demo/",
+      "debug_loaf_script_total_duration": 222,
+      "debug_loaf_script_type": "user-callback",
     });
   });
+
+  it('should handle attribution data with zero scripts', () => {
+    const attribution = {
+      "interactionTarget": "#textarea",
+      "interactionTargetElement": {},
+      "interactionType": "keyboard",
+      "interactionTime": 49387.80000001192,
+      "nextPaintTime": 49715.80000001192,
+      "longAnimationFrameEntries": [
+        {
+          "name": "long-animation-frame",
+          "entryType": "long-animation-frame",
+          "startTime": 49367.80000001192,
+          "duration": 335,
+          "renderStart": 49702.19999998808,
+          "styleAndLayoutStart": 49702.69999998808,
+          "firstUIEventTimestamp": 49387.80000001192,
+          "blockingDuration": 235,
+          "scripts": []
+        }
+      ],
+      "inputDelay": 203.0999999642372,
+      "processingDuration": 111.30000001192093,
+      "presentationDelay": 13.600000023841858,
+      "loadState": "complete"
+    }
+
+    // @ts-ignore
+    const result = formatLongAnimationFrameData(attribution);
+
+    expect(result).toEqual({});
+  });
+
+  it('should return default params if no attribution data is provided', () => {
+    // @ts-ignore
+    const result = formatLongAnimationFrameData('unknown', null);
+
+    expect(result).toEqual({});
+  });
 });
 
 /**
  * Samples of event data from the web-vitals.js package are below:
  */
+/**
+ * Single script entry
+ */
 // {
 //   "name": "INP",
 //   "value": 104,
@@ -295,3 +329,287 @@ describe('formatLongAnimationFrameData', () => {
 //     "loadState": "complete"
 //   }
 // }
+
+/**
+ * Empty scripts array
+ */
+// {
+//   "name": "INP",
+//   "value": 64,
+//   "rating": "good",
+//   "delta": 64,
+//   "entries": [
+//     {
+//       "name": "pointerup",
+//       "entryType": "event",
+//       "startTime": 25448.80000001192,
+//       "duration": 64,
+//       "interactionId": 1134,
+//       "processingStart": 25451.100000023842,
+//       "processingEnd": 25451.100000023842,
+//       "cancelable": true
+//     },
+//     {
+//       "name": "click",
+//       "entryType": "event",
+//       "startTime": 25448.80000001192,
+//       "duration": 64,
+//       "interactionId": 1134,
+//       "processingStart": 25451.100000023842,
+//       "processingEnd": 25483.400000035763,
+//       "cancelable": true
+//     }
+//   ],
+//   "id": "v4-1732752055743-7541189658822",
+//   "navigationType": "reload",
+//   "attribution": {
+//     "interactionTarget": "#headerMenuIcon>svg.header__menu-icon-svg",
+//     "interactionTargetElement": {},
+//     "interactionType": "pointer",
+//     "interactionTime": 25448.80000001192,
+//     "nextPaintTime": 25512.80000001192,
+//     "processedEventEntries": [
+//       {
+//         "name": "pointerup",
+//         "entryType": "event",
+//         "startTime": 25448.80000001192,
+//         "duration": 64,
+//         "interactionId": 1134,
+//         "processingStart": 25451.100000023842,
+//         "processingEnd": 25451.100000023842,
+//         "cancelable": true
+//       },
+//       {
+//         "name": "mouseup",
+//         "entryType": "event",
+//         "startTime": 25448.80000001192,
+//         "duration": 64,
+//         "interactionId": 0,
+//         "processingStart": 25451.100000023842,
+//         "processingEnd": 25451.100000023842,
+//         "cancelable": true
+//       },
+//       {
+//         "name": "click",
+//         "entryType": "event",
+//         "startTime": 25448.80000001192,
+//         "duration": 64,
+//         "interactionId": 1134,
+//         "processingStart": 25451.100000023842,
+//         "processingEnd": 25483.400000035763,
+//         "cancelable": true
+//       }
+//     ],
+//     "longAnimationFrameEntries": [],
+//     "inputDelay": 2.300000011920929,
+//     "processingDuration": 32.30000001192093,
+//     "presentationDelay": 29.399999976158142,
+//     "loadState": "complete"
+//   }
+// }
+
+/**
+ * Multiple scripts
+ */
+// {
+//   "interactionTarget": "#textarea",
+//   "interactionTargetElement": {},
+//   "interactionType": "keyboard",
+//   "interactionTime": 49387.80000001192,
+//   "nextPaintTime": 49715.80000001192,
+//   "processedEventEntries": [
+//     {
+//       "name": "keydown",
+//       "entryType": "event",
+//       "startTime": 49387.80000001192,
+//       "duration": 328,
+//       "interactionId": 5994,
+//       "processingStart": 49590.89999997616,
+//       "processingEnd": 49605.89999997616,
+//       "cancelable": true
+//     },
+//     {
+//       "name": "keypress",
+//       "entryType": "event",
+//       "startTime": 49388.10000002384,
+//       "duration": 328,
+//       "interactionId": 5994,
+//       "processingStart": 49606,
+//       "processingEnd": 49606.5,
+//       "cancelable": true
+//     },
+//     {
+//       "name": "beforeinput",
+//       "entryType": "event",
+//       "startTime": 49606,
+//       "duration": 104,
+//       "interactionId": 0,
+//       "processingStart": 49606,
+//       "processingEnd": 49606,
+//       "cancelable": true
+//     },
+//     {
+//       "name": "keydown",
+//       "entryType": "event",
+//       "startTime": 49492.69999998808,
+//       "duration": 224,
+//       "interactionId": 6001,
+//       "processingStart": 49606.5,
+//       "processingEnd": 49621.60000002384,
+//       "cancelable": true
+//     },
+//     {
+//       "name": "input",
+//       "entryType": "event",
+//       "startTime": 49606.19999998808,
+//       "duration": 104,
+//       "interactionId": 0,
+//       "processingStart": 49606.5,
+//       "processingEnd": 49606.5,
+//       "cancelable": false
+//     },
+//     {
+//       "name": "keypress",
+//       "entryType": "event",
+//       "startTime": 49493.69999998808,
+//       "duration": 216,
+//       "interactionId": 6001,
+//       "processingStart": 49621.60000002384,
+//       "processingEnd": 49622.10000002384,
+//       "cancelable": true
+//     },
+//     {
+//       "name": "beforeinput",
+//       "entryType": "event",
+//       "startTime": 49621.60000002384,
+//       "duration": 88,
+//       "interactionId": 0,
+//       "processingStart": 49621.60000002384,
+//       "processingEnd": 49621.60000002384,
+//       "cancelable": true
+//     },
+//     {
+//       "name": "input",
+//       "entryType": "event",
+//       "startTime": 49622,
+//       "duration": 88,
+//       "interactionId": 0,
+//       "processingStart": 49622.10000002384,
+//       "processingEnd": 49622.10000002384,
+//       "cancelable": false
+//     },
+//     {
+//       "name": "keyup",
+//       "entryType": "event",
+//       "startTime": 49550.60000002384,
+//       "duration": 160,
+//       "interactionId": 5994,
+//       "processingStart": 49622.19999998808,
+//       "processingEnd": 49662.19999998808,
+//       "cancelable": true
+//     },
+//     {
+//       "name": "keyup",
+//       "entryType": "event",
+//       "startTime": 49587.60000002384,
+//       "duration": 128,
+//       "interactionId": 6001,
+//       "processingStart": 49662.19999998808,
+//       "processingEnd": 49702.19999998808,
+//       "cancelable": true
+//     }
+//   ],
+//   "longAnimationFrameEntries": [
+//     {
+//       "name": "long-animation-frame",
+//       "entryType": "long-animation-frame",
+//       "startTime": 49367.80000001192,
+//       "duration": 335,
+//       "renderStart": 49702.19999998808,
+//       "styleAndLayoutStart": 49702.69999998808,
+//       "firstUIEventTimestamp": 49387.80000001192,
+//       "blockingDuration": 235,
+//       "scripts": [
+//         {
+//           "name": "script",
+//           "entryType": "script",
+//           "startTime": 49367.89999997616,
+//           "duration": 222,
+//           "invoker": "TimerHandler:setTimeout",
+//           "invokerType": "user-callback",
+//           "windowAttribution": "self",
+//           "executionStart": 49367.89999997616,
+//           "forcedStyleAndLayoutDuration": 0,
+//           "pauseDuration": 0,
+//           "sourceURL": "http://localhost:8000/demo/",
+//           "sourceFunctionName": "periodicBlock",
+//           "sourceCharPosition": 2007
+//         },
+//         {
+//           "name": "script",
+//           "entryType": "script",
+//           "startTime": 49590.89999997616,
+//           "duration": 14,
+//           "invoker": "DOMWindow.onkeydown",
+//           "invokerType": "event-listener",
+//           "windowAttribution": "self",
+//           "executionStart": 49590.89999997616,
+//           "forcedStyleAndLayoutDuration": 0,
+//           "pauseDuration": 0,
+//           "sourceURL": "http://localhost:8000/demo/",
+//           "sourceFunctionName": "",
+//           "sourceCharPosition": 4656
+//         },
+//         {
+//           "name": "script",
+//           "entryType": "script",
+//           "startTime": 49606.5,
+//           "duration": 14,
+//           "invoker": "DOMWindow.onkeydown",
+//           "invokerType": "event-listener",
+//           "windowAttribution": "self",
+//           "executionStart": 49606.5,
+//           "forcedStyleAndLayoutDuration": 0,
+//           "pauseDuration": 0,
+//           "sourceURL": "http://localhost:8000/demo/",
+//           "sourceFunctionName": "",
+//           "sourceCharPosition": 4656
+//         },
+//         {
+//           "name": "script",
+//           "entryType": "script",
+//           "startTime": 49622.19999998808,
+//           "duration": 40,
+//           "invoker": "DOMWindow.onkeyup",
+//           "invokerType": "event-listener",
+//           "windowAttribution": "self",
+//           "executionStart": 49622.19999998808,
+//           "forcedStyleAndLayoutDuration": 0,
+//           "pauseDuration": 0,
+//           "sourceURL": "http://localhost:8000/demo/",
+//           "sourceFunctionName": "",
+//           "sourceCharPosition": 4656
+//         },
+//         {
+//           "name": "script",
+//           "entryType": "script",
+//           "startTime": 49662.19999998808,
+//           "duration": 39,
+//           "invoker": "DOMWindow.onkeyup",
+//           "invokerType": "event-listener",
+//           "windowAttribution": "self",
+//           "executionStart": 49662.19999998808,
+//           "forcedStyleAndLayoutDuration": 0,
+//           "pauseDuration": 0,
+//           "sourceURL": "http://localhost:8000/demo/",
+//           "sourceFunctionName": "",
+//           "sourceCharPosition": 4656
+//         }
+//       ]
+//     }
+//   ],
+//   "inputDelay": 203.0999999642372,
+//   "processingDuration": 111.30000001192093,
+//   "presentationDelay": 13.600000023841858,
+//   "loadState": "complete"
+// }

From 583d28ff501cdf10a650834207c0cd1c88032b2f Mon Sep 17 00:00:00 2001
From: Ethan Gardner <edgincvg@gmail.com>
Date: Thu, 28 Nov 2024 02:26:15 -0500
Subject: [PATCH 08/22] add more props to loaf attribution

---
 src/format-long-animation-frame-data.ts            | 2 ++
 test/unit/format-long-animation-frame-data.test.ts | 4 ++++
 2 files changed, 6 insertions(+)

diff --git a/src/format-long-animation-frame-data.ts b/src/format-long-animation-frame-data.ts
index be8b204..c93c228 100644
--- a/src/format-long-animation-frame-data.ts
+++ b/src/format-long-animation-frame-data.ts
@@ -64,6 +64,8 @@ export const formatLongAnimationFrameData = (attribution: INPAttribution) => {
         debug_loaf_script_source_url: script.sourceURL,
         debug_loaf_script_source_function_name: script.sourceFunctionName,
         debug_loaf_script_source_char_position: script.sourceCharPosition,
+        debug_loaf_pause_duration: script.pauseDuration,
+        debug_loaf_window_attribution: script.windowAttribution,
 
         // LoAF metadata.
         debug_loaf_meta_length: loafEntries.length,
diff --git a/test/unit/format-long-animation-frame-data.test.ts b/test/unit/format-long-animation-frame-data.test.ts
index adc6dcb..be99e31 100644
--- a/test/unit/format-long-animation-frame-data.test.ts
+++ b/test/unit/format-long-animation-frame-data.test.ts
@@ -47,6 +47,7 @@ describe('formatLongAnimationFrameData', () => {
       "debug_loaf_entry_total_forced_style_and_layout_duration": 80,
       "debug_loaf_entry_work_duration": 88,
       "debug_loaf_meta_length": 1,
+      "debug_loaf_pause_duration": 0,
       "debug_loaf_script_compile_duration": 0,
       "debug_loaf_script_exec_duration": 85,
       "debug_loaf_script_forced_style_and_layout_duration": 80,
@@ -56,6 +57,7 @@ describe('formatLongAnimationFrameData', () => {
       "debug_loaf_script_source_url": "http://localhost:8000/demo/",
       "debug_loaf_script_total_duration": 85,
       "debug_loaf_script_type": "event-listener",
+      "debug_loaf_window_attribution": "self",
     });
   });
 
@@ -119,6 +121,7 @@ describe('formatLongAnimationFrameData', () => {
       "debug_loaf_entry_total_forced_style_and_layout_duration": 0,
       "debug_loaf_entry_work_duration": 334,
       "debug_loaf_meta_length": 1,
+      "debug_loaf_pause_duration": 0,
       "debug_loaf_script_compile_duration": 0,
       "debug_loaf_script_exec_duration": 222,
       "debug_loaf_script_forced_style_and_layout_duration": 0,
@@ -128,6 +131,7 @@ describe('formatLongAnimationFrameData', () => {
       "debug_loaf_script_source_url": "http://localhost:8000/demo/",
       "debug_loaf_script_total_duration": 222,
       "debug_loaf_script_type": "user-callback",
+      "debug_loaf_window_attribution": "self",
     });
   });
 

From 2ef0920acafdb1645b69cbc5650f0a877d31bbd0 Mon Sep 17 00:00:00 2001
From: Ethan Gardner <edgincvg@gmail.com>
Date: Thu, 28 Nov 2024 02:27:21 -0500
Subject: [PATCH 09/22] fix linting issue

---
 src/format-long-animation-frame-data.ts | 51 ++++++++++++++++---------
 1 file changed, 34 insertions(+), 17 deletions(-)

diff --git a/src/format-long-animation-frame-data.ts b/src/format-long-animation-frame-data.ts
index c93c228..331e7c7 100644
--- a/src/format-long-animation-frame-data.ts
+++ b/src/format-long-animation-frame-data.ts
@@ -28,17 +28,17 @@ import type { INPAttribution } from 'web-vitals';
  */
 export const formatLongAnimationFrameData = (attribution: INPAttribution) => {
   const loafEntries = attribution.longAnimationFrameEntries;
-  if(typeof loafEntries === 'undefined' || loafEntries.length === 0) {
+  if (typeof loafEntries === 'undefined' || loafEntries.length === 0) {
     return {};
   }
 
   let loafAttribution = {
-    debug_loaf_script_total_duration: 0
+    debug_loaf_script_total_duration: 0,
   };
 
   // The last LoAF entry is usually the most relevant.
   const loaf = attribution.longAnimationFrameEntries.at(-1);
-  if(typeof loaf !== 'undefined') {
+  if (typeof loaf !== 'undefined') {
     const loafEndTime = loaf.startTime + loaf.duration;
     loaf?.scripts.forEach(script => {
       if (script.duration <= loafAttribution.debug_loaf_script_total_duration) {
@@ -48,17 +48,32 @@ export const formatLongAnimationFrameData = (attribution: INPAttribution) => {
         // Stats for the LoAF entry itself.
         debug_loaf_entry_start_time: loaf.startTime,
         debug_loaf_entry_end_time: loafEndTime,
-        debug_loaf_entry_work_duration: loaf.renderStart ? loaf.renderStart - loaf.startTime : loaf.duration,
-        debug_loaf_entry_render_duration: loaf.renderStart ? loafEndTime - loaf.renderStart : 0,
-        debug_loaf_entry_total_forced_style_and_layout_duration: loaf.scripts.reduce((sum, script) => sum + script.forcedStyleAndLayoutDuration, 0),
-        debug_loaf_entry_pre_layout_duration: loaf.styleAndLayoutStart ? loaf.styleAndLayoutStart - loaf.renderStart : 0,
-        debug_loaf_entry_style_and_layout_duration: loaf.styleAndLayoutStart ? loafEndTime - loaf.styleAndLayoutStart : 0,
+        debug_loaf_entry_work_duration: loaf.renderStart
+          ? loaf.renderStart - loaf.startTime
+          : loaf.duration,
+        debug_loaf_entry_render_duration: loaf.renderStart
+          ? loafEndTime - loaf.renderStart
+          : 0,
+        debug_loaf_entry_total_forced_style_and_layout_duration:
+          loaf.scripts.reduce(
+            (sum, entry) => sum + entry.forcedStyleAndLayoutDuration,
+            0,
+          ),
+        debug_loaf_entry_pre_layout_duration: loaf.styleAndLayoutStart
+          ? loaf.styleAndLayoutStart - loaf.renderStart
+          : 0,
+        debug_loaf_entry_style_and_layout_duration: loaf.styleAndLayoutStart
+          ? loafEndTime - loaf.styleAndLayoutStart
+          : 0,
 
         // Stats for the longest script in the LoAF entry.
         debug_loaf_script_total_duration: script.duration,
-        debug_loaf_script_compile_duration: script.executionStart - script.startTime,
-        debug_loaf_script_exec_duration: script.startTime + script.duration - script.executionStart,
-        debug_loaf_script_forced_style_and_layout_duration: script.forcedStyleAndLayoutDuration,
+        debug_loaf_script_compile_duration:
+          script.executionStart - script.startTime,
+        debug_loaf_script_exec_duration:
+          script.startTime + script.duration - script.executionStart,
+        debug_loaf_script_forced_style_and_layout_duration:
+          script.forcedStyleAndLayoutDuration,
         debug_loaf_script_type: script.invokerType,
         debug_loaf_script_invoker: script.invoker,
         debug_loaf_script_source_url: script.sourceURL,
@@ -69,7 +84,7 @@ export const formatLongAnimationFrameData = (attribution: INPAttribution) => {
 
         // LoAF metadata.
         debug_loaf_meta_length: loafEntries.length,
-      }
+      };
     });
   }
 
@@ -78,8 +93,10 @@ export const formatLongAnimationFrameData = (attribution: INPAttribution) => {
   }
 
   // The LoAF script with the single longest total duration.
-  return Object.fromEntries(Object.entries(loafAttribution).map(([k, v]) =>
-    // Convert all floats to ints.
-     [k, typeof v === 'number' ? Math.floor(v) : v]
-  ));
-}
+  return Object.fromEntries(
+    Object.entries(loafAttribution).map(([k, v]) =>
+      // Convert all floats to ints.
+      [k, typeof v === 'number' ? Math.floor(v) : v],
+    ),
+  );
+};

From c79f286bde3c402daac8c1595d23184101dcde8c Mon Sep 17 00:00:00 2001
From: Ethan Gardner <edgincvg@gmail.com>
Date: Thu, 28 Nov 2024 02:28:15 -0500
Subject: [PATCH 10/22] code formatting

---
 .../format-long-animation-frame-data.test.ts  | 250 +++++++++---------
 1 file changed, 125 insertions(+), 125 deletions(-)

diff --git a/test/unit/format-long-animation-frame-data.test.ts b/test/unit/format-long-animation-frame-data.test.ts
index be99e31..e1db1de 100644
--- a/test/unit/format-long-animation-frame-data.test.ts
+++ b/test/unit/format-long-animation-frame-data.test.ts
@@ -4,34 +4,34 @@ import { formatLongAnimationFrameData } from '../../src/format-long-animation-fr
 describe('formatLongAnimationFrameData', () => {
   it('should format INP data correctly', () => {
     const attribution = {
-      "longAnimationFrameEntries": [
+      longAnimationFrameEntries: [
         {
-          "name": "long-animation-frame",
-          "entryType": "long-animation-frame",
-          "startTime": 5168847.600000024,
-          "duration": 90,
-          "renderStart": 5168936.1999999285,
-          "styleAndLayoutStart": 5168936.1999999285,
-          "firstUIEventTimestamp": 5168847,
-          "blockingDuration": 38,
-          "scripts": [
+          name: 'long-animation-frame',
+          entryType: 'long-animation-frame',
+          startTime: 5168847.600000024,
+          duration: 90,
+          renderStart: 5168936.1999999285,
+          styleAndLayoutStart: 5168936.1999999285,
+          firstUIEventTimestamp: 5168847,
+          blockingDuration: 38,
+          scripts: [
             {
-              "name": "script",
-              "entryType": "script",
-              "startTime": 5168847.899999976,
-              "duration": 85,
-              "invoker": "BUTTON#thrash-layout.onclick",
-              "invokerType": "event-listener",
-              "windowAttribution": "self",
-              "executionStart": 5168847.899999976,
-              "forcedStyleAndLayoutDuration": 80,
-              "pauseDuration": 0,
-              "sourceURL": "http://localhost:8000/demo/",
-              "sourceFunctionName": "",
-              "sourceCharPosition": 72
-            }
-          ]
-        }
+              name: 'script',
+              entryType: 'script',
+              startTime: 5168847.899999976,
+              duration: 85,
+              invoker: 'BUTTON#thrash-layout.onclick',
+              invokerType: 'event-listener',
+              windowAttribution: 'self',
+              executionStart: 5168847.899999976,
+              forcedStyleAndLayoutDuration: 80,
+              pauseDuration: 0,
+              sourceURL: 'http://localhost:8000/demo/',
+              sourceFunctionName: '',
+              sourceCharPosition: 72,
+            },
+          ],
+        },
       ],
     };
 
@@ -39,127 +39,127 @@ describe('formatLongAnimationFrameData', () => {
     const result = formatLongAnimationFrameData(attribution);
 
     expect(result).toEqual({
-      "debug_loaf_entry_end_time": 5168937,
-      "debug_loaf_entry_pre_layout_duration": 0,
-      "debug_loaf_entry_render_duration": 1,
-      "debug_loaf_entry_start_time": 5168847,
-      "debug_loaf_entry_style_and_layout_duration": 1,
-      "debug_loaf_entry_total_forced_style_and_layout_duration": 80,
-      "debug_loaf_entry_work_duration": 88,
-      "debug_loaf_meta_length": 1,
-      "debug_loaf_pause_duration": 0,
-      "debug_loaf_script_compile_duration": 0,
-      "debug_loaf_script_exec_duration": 85,
-      "debug_loaf_script_forced_style_and_layout_duration": 80,
-      "debug_loaf_script_invoker": "BUTTON#thrash-layout.onclick",
-      "debug_loaf_script_source_char_position": 72,
-      "debug_loaf_script_source_function_name": "",
-      "debug_loaf_script_source_url": "http://localhost:8000/demo/",
-      "debug_loaf_script_total_duration": 85,
-      "debug_loaf_script_type": "event-listener",
-      "debug_loaf_window_attribution": "self",
+      debug_loaf_entry_end_time: 5168937,
+      debug_loaf_entry_pre_layout_duration: 0,
+      debug_loaf_entry_render_duration: 1,
+      debug_loaf_entry_start_time: 5168847,
+      debug_loaf_entry_style_and_layout_duration: 1,
+      debug_loaf_entry_total_forced_style_and_layout_duration: 80,
+      debug_loaf_entry_work_duration: 88,
+      debug_loaf_meta_length: 1,
+      debug_loaf_pause_duration: 0,
+      debug_loaf_script_compile_duration: 0,
+      debug_loaf_script_exec_duration: 85,
+      debug_loaf_script_forced_style_and_layout_duration: 80,
+      debug_loaf_script_invoker: 'BUTTON#thrash-layout.onclick',
+      debug_loaf_script_source_char_position: 72,
+      debug_loaf_script_source_function_name: '',
+      debug_loaf_script_source_url: 'http://localhost:8000/demo/',
+      debug_loaf_script_total_duration: 85,
+      debug_loaf_script_type: 'event-listener',
+      debug_loaf_window_attribution: 'self',
     });
   });
 
   it('should handle multiple scripts by giving info about the single longest total duration.', () => {
     const attribution = {
-      "longAnimationFrameEntries": [
+      longAnimationFrameEntries: [
         {
-          "name": "long-animation-frame",
-          "entryType": "long-animation-frame",
-          "startTime": 49367.80000001192,
-          "duration": 335,
-          "renderStart": 49702.19999998808,
-          "styleAndLayoutStart": 49702.69999998808,
-          "firstUIEventTimestamp": 49387.80000001192,
-          "blockingDuration": 235,
-          "scripts": [
+          name: 'long-animation-frame',
+          entryType: 'long-animation-frame',
+          startTime: 49367.80000001192,
+          duration: 335,
+          renderStart: 49702.19999998808,
+          styleAndLayoutStart: 49702.69999998808,
+          firstUIEventTimestamp: 49387.80000001192,
+          blockingDuration: 235,
+          scripts: [
             {
-              "name": "script",
-              "entryType": "script",
-              "startTime": 49367.89999997616,
-              "duration": 222,
-              "invoker": "TimerHandler:setTimeout",
-              "invokerType": "user-callback",
-              "windowAttribution": "self",
-              "executionStart": 49367.89999997616,
-              "forcedStyleAndLayoutDuration": 0,
-              "pauseDuration": 0,
-              "sourceURL": "http://localhost:8000/demo/",
-              "sourceFunctionName": "periodicBlock",
-              "sourceCharPosition": 2007
+              name: 'script',
+              entryType: 'script',
+              startTime: 49367.89999997616,
+              duration: 222,
+              invoker: 'TimerHandler:setTimeout',
+              invokerType: 'user-callback',
+              windowAttribution: 'self',
+              executionStart: 49367.89999997616,
+              forcedStyleAndLayoutDuration: 0,
+              pauseDuration: 0,
+              sourceURL: 'http://localhost:8000/demo/',
+              sourceFunctionName: 'periodicBlock',
+              sourceCharPosition: 2007,
             },
             {
-              "name": "script",
-              "entryType": "script",
-              "startTime": 49590.89999997616,
-              "duration": 14,
-              "invoker": "DOMWindow.onkeydown",
-              "invokerType": "event-listener",
-              "windowAttribution": "self",
-              "executionStart": 49590.89999997616,
-              "forcedStyleAndLayoutDuration": 0,
-              "pauseDuration": 0,
-              "sourceURL": "http://localhost:8000/demo/",
-              "sourceFunctionName": "",
-              "sourceCharPosition": 4656
-            }
-          ]
-        }
+              name: 'script',
+              entryType: 'script',
+              startTime: 49590.89999997616,
+              duration: 14,
+              invoker: 'DOMWindow.onkeydown',
+              invokerType: 'event-listener',
+              windowAttribution: 'self',
+              executionStart: 49590.89999997616,
+              forcedStyleAndLayoutDuration: 0,
+              pauseDuration: 0,
+              sourceURL: 'http://localhost:8000/demo/',
+              sourceFunctionName: '',
+              sourceCharPosition: 4656,
+            },
+          ],
+        },
       ],
-    }
+    };
 
     // @ts-ignore
     const result = formatLongAnimationFrameData(attribution);
 
     expect(result).toEqual({
-      "debug_loaf_entry_end_time": 49702,
-      "debug_loaf_entry_pre_layout_duration": 0,
-      "debug_loaf_entry_render_duration": 0,
-      "debug_loaf_entry_start_time": 49367,
-      "debug_loaf_entry_style_and_layout_duration": 0,
-      "debug_loaf_entry_total_forced_style_and_layout_duration": 0,
-      "debug_loaf_entry_work_duration": 334,
-      "debug_loaf_meta_length": 1,
-      "debug_loaf_pause_duration": 0,
-      "debug_loaf_script_compile_duration": 0,
-      "debug_loaf_script_exec_duration": 222,
-      "debug_loaf_script_forced_style_and_layout_duration": 0,
-      "debug_loaf_script_invoker": "TimerHandler:setTimeout",
-      "debug_loaf_script_source_char_position": 2007,
-      "debug_loaf_script_source_function_name": "periodicBlock",
-      "debug_loaf_script_source_url": "http://localhost:8000/demo/",
-      "debug_loaf_script_total_duration": 222,
-      "debug_loaf_script_type": "user-callback",
-      "debug_loaf_window_attribution": "self",
+      debug_loaf_entry_end_time: 49702,
+      debug_loaf_entry_pre_layout_duration: 0,
+      debug_loaf_entry_render_duration: 0,
+      debug_loaf_entry_start_time: 49367,
+      debug_loaf_entry_style_and_layout_duration: 0,
+      debug_loaf_entry_total_forced_style_and_layout_duration: 0,
+      debug_loaf_entry_work_duration: 334,
+      debug_loaf_meta_length: 1,
+      debug_loaf_pause_duration: 0,
+      debug_loaf_script_compile_duration: 0,
+      debug_loaf_script_exec_duration: 222,
+      debug_loaf_script_forced_style_and_layout_duration: 0,
+      debug_loaf_script_invoker: 'TimerHandler:setTimeout',
+      debug_loaf_script_source_char_position: 2007,
+      debug_loaf_script_source_function_name: 'periodicBlock',
+      debug_loaf_script_source_url: 'http://localhost:8000/demo/',
+      debug_loaf_script_total_duration: 222,
+      debug_loaf_script_type: 'user-callback',
+      debug_loaf_window_attribution: 'self',
     });
   });
 
   it('should handle attribution data with zero scripts', () => {
     const attribution = {
-      "interactionTarget": "#textarea",
-      "interactionTargetElement": {},
-      "interactionType": "keyboard",
-      "interactionTime": 49387.80000001192,
-      "nextPaintTime": 49715.80000001192,
-      "longAnimationFrameEntries": [
+      interactionTarget: '#textarea',
+      interactionTargetElement: {},
+      interactionType: 'keyboard',
+      interactionTime: 49387.80000001192,
+      nextPaintTime: 49715.80000001192,
+      longAnimationFrameEntries: [
         {
-          "name": "long-animation-frame",
-          "entryType": "long-animation-frame",
-          "startTime": 49367.80000001192,
-          "duration": 335,
-          "renderStart": 49702.19999998808,
-          "styleAndLayoutStart": 49702.69999998808,
-          "firstUIEventTimestamp": 49387.80000001192,
-          "blockingDuration": 235,
-          "scripts": []
-        }
+          name: 'long-animation-frame',
+          entryType: 'long-animation-frame',
+          startTime: 49367.80000001192,
+          duration: 335,
+          renderStart: 49702.19999998808,
+          styleAndLayoutStart: 49702.69999998808,
+          firstUIEventTimestamp: 49387.80000001192,
+          blockingDuration: 235,
+          scripts: [],
+        },
       ],
-      "inputDelay": 203.0999999642372,
-      "processingDuration": 111.30000001192093,
-      "presentationDelay": 13.600000023841858,
-      "loadState": "complete"
-    }
+      inputDelay: 203.0999999642372,
+      processingDuration: 111.30000001192093,
+      presentationDelay: 13.600000023841858,
+      loadState: 'complete',
+    };
 
     // @ts-ignore
     const result = formatLongAnimationFrameData(attribution);

From 58762e1f673a22e95fef7710c9c4e8cddaeda804 Mon Sep 17 00:00:00 2001
From: ethangardner <ethan.gardner@gsa.gov>
Date: Wed, 27 Nov 2024 16:49:42 -0500
Subject: [PATCH 11/22] begin working on loaf attribution format

---
 demo/index.html                               |  31 +-
 src/format-long-animation-frame-data.ts       |  94 ++++++
 src/index.ts                                  |   1 +
 .../format-long-animation-frame-data.test.ts  | 297 ++++++++++++++++++
 4 files changed, 421 insertions(+), 2 deletions(-)
 create mode 100644 src/format-long-animation-frame-data.ts
 create mode 100644 test/unit/format-long-animation-frame-data.test.ts

diff --git a/demo/index.html b/demo/index.html
index b7cc06a..399d0c5 100644
--- a/demo/index.html
+++ b/demo/index.html
@@ -23,6 +23,30 @@
     below.
   -->
   <script type="module" src="../dist/dap-performance-addon.js"></script>
+  <script type="module">
+    const button = document.querySelector('#thrash-layout');
+    button.addEventListener('click', () => {
+      const elem = document.querySelector('#thrash-element-1');
+      // eslint-disable-next-line no-plusplus
+      for (let i = 0; i < 1000; i++) {
+        // Read height (this forces layout recalculation)
+        const height = elem.offsetHeight;
+        // Write width (this marks layout as dirty)
+        elem.style.width = `${height + 1}px`;
+      }
+      elem.removeAttribute('style');
+    });
+
+    button.addEventListener('click', () => {
+      const elem = document.querySelector('#thrash-element-2');
+      // eslint-disable-next-line no-plusplus
+      for (let i = 0; i < 1000; i++) {
+        const height = elem.offsetHeight;
+        elem.style.width = `${height + 1}px`;
+      }
+      elem.removeAttribute('style');
+    });
+  </script>
 </head>
 <body>
 <main>
@@ -33,7 +57,10 @@
   <h1>
     Demo page
   </h1>
-  <div class="article-container">
+  <p>
+    <button id="thrash-layout">This button will cause layout thrashing</button>
+  </p>
+  <div class="article-container" id="thrash-element-1">
     <article>
       <img src="https://picsum.photos/640/360"
            srcset="https://picsum.photos/1024/576 1024w, https://picsum.photos/960/540 960w, https://picsum.photos/640/360 640w, https://picsum.photos/480/270 480w"
@@ -44,7 +71,7 @@ <h1>
         shift down considerably after the image is loaded.
       </p>
     </article>
-    <div class="sidebar">
+    <div class="sidebar" id="thrash-element-2">
       <div class="related-articles">
         <h2>
           Related Articles
diff --git a/src/format-long-animation-frame-data.ts b/src/format-long-animation-frame-data.ts
new file mode 100644
index 0000000..244fa16
--- /dev/null
+++ b/src/format-long-animation-frame-data.ts
@@ -0,0 +1,94 @@
+import type { INPAttribution } from 'web-vitals';
+
+// export const formatLongAnimationFrameData = (attribution: INPAttribution) => {
+//
+// };
+
+// export const formatLongAnimationFrameData = (attribution: INPAttribution) => {
+//   // The last LoAF entry is usually the most relevant.
+//   const loaf = attribution.longAnimationFrameEntries.at(-1);
+//   const script = loaf?.scripts.sort((a, b) => b.duration - a.duration)[0];
+//   let obj = {}
+//
+//   if(script) {
+//     // long event handler
+//     const { invokerType } = script; // always event-listener for long event handlers
+//     const { invoker } = script; // element that had the event listener
+//     const { sourceURL } = script;
+//     const { sourceCharPosition } = script;
+//     const { sourceFunctionName } = script;
+//
+//     // long input delay: during page load - was this from script evaluation
+//     const { invokerType } = script; //
+//     const { sourceLocation } = script;
+//
+//     // long input delay: after page load - was this from script evaluation
+//     const { invokerType } = script; // user-callback (recurring timer like setInterval), event-listener, module-script, classic-script. Could also be expensive fetch call
+//     const { sourceURL } = script; // https://example.com/app.js
+//     const { sourceCharPosition } = script; // 83
+//     const { sourceFunctionName } = script; // update
+//
+//     // presentation delay
+//     const { invokerType } = script; // user-callback (recurring timer like setInterval), event-listener, module-script, classic-script. Could also be expensive fetch call
+//     const { sourceURL } = script; // https://example.com/app.js
+//     const { sourceCharPosition } = script; // 83
+//     const { sourceFunctionName } = script; // update
+//   }
+// }
+
+
+export const formatLongAnimationFrameData = (attribution: INPAttribution) => {
+  const loafEntries = attribution.longAnimationFrameEntries;
+  if(typeof loafEntries === 'undefined' || loafEntries.length === 0) {
+    return {};
+  }
+
+  let loafAttribution = {
+    debug_loaf_script_total_duration: 0
+  };
+
+  // The last LoAF entry is usually the most relevant.
+  const loaf = attribution.longAnimationFrameEntries.at(-1);
+  if(typeof loaf !== 'undefined') {
+    const loafEndTime = loaf.startTime + loaf.duration;
+    loaf?.scripts.forEach(script => {
+      if (script.duration <= loafAttribution.debug_loaf_script_total_duration) {
+        return;
+      }
+      loafAttribution = {
+        // Stats for the LoAF entry itself.
+        debug_loaf_entry_start_time: loaf.startTime,
+        debug_loaf_entry_end_time: loafEndTime,
+        debug_loaf_entry_work_duration: loaf.renderStart ? loaf.renderStart - loaf.startTime : loaf.duration,
+        debug_loaf_entry_render_duration: loaf.renderStart ? loafEndTime - loaf.renderStart : 0,
+        debug_loaf_entry_total_forced_style_and_layout_duration: loaf.scripts.reduce((sum, script) => sum + script.forcedStyleAndLayoutDuration, 0),
+        debug_loaf_entry_pre_layout_duration: loaf.styleAndLayoutStart ? loaf.styleAndLayoutStart - loaf.renderStart : 0,
+        debug_loaf_entry_style_and_layout_duration: loaf.styleAndLayoutStart ? loafEndTime - loaf.styleAndLayoutStart : 0,
+
+        // Stats for the longest script in the LoAF entry.
+        debug_loaf_script_total_duration: script.duration,
+        debug_loaf_script_compile_duration: script.executionStart - script.startTime,
+        debug_loaf_script_exec_duration: script.startTime + script.duration - script.executionStart,
+        debug_loaf_script_forced_style_and_layout_duration: script.forcedStyleAndLayoutDuration,
+        debug_loaf_script_type: script.invokerType,
+        debug_loaf_script_invoker: script.invoker,
+        debug_loaf_script_source_url: script.sourceURL,
+        debug_loaf_script_source_function_name: script.sourceFunctionName,
+        debug_loaf_script_source_char_position: script.sourceCharPosition,
+
+        // LoAF metadata.
+        debug_loaf_meta_length: loafEntries.length,
+      }
+    });
+  }
+
+  if (!loafAttribution.debug_loaf_script_total_duration) {
+    return {};
+  }
+
+  // The LoAF script with the single longest total duration.
+  return Object.fromEntries(Object.entries(loafAttribution).map(([k, v]) => 
+    // Convert all floats to ints.
+     [k, typeof v === 'number' ? Math.floor(v) : v]
+  ));
+}
diff --git a/src/index.ts b/src/index.ts
index 3dbb6b8..b49d919 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -5,6 +5,7 @@ const initWebVitalsEvents = () => {
   onCLS(sendToAnalytics);
   onFCP(sendToAnalytics);
   onINP(sendToAnalytics);
+  onINP(console.log);
   onLCP(sendToAnalytics);
   onTTFB(sendToAnalytics);
 };
diff --git a/test/unit/format-long-animation-frame-data.test.ts b/test/unit/format-long-animation-frame-data.test.ts
new file mode 100644
index 0000000..53ea21e
--- /dev/null
+++ b/test/unit/format-long-animation-frame-data.test.ts
@@ -0,0 +1,297 @@
+import { it, describe, expect } from 'vitest';
+import { formatLongAnimationFrameData } from '../../src/format-long-animation-frame-data.js';
+
+describe('formatLongAnimationFrameData', () => {
+  it('should format INP data correctly', () => {
+    const attribution = {
+      "interactionTarget": "#thrash-layout",
+      "interactionTargetElement": {},
+      "interactionType": "pointer",
+      "interactionTime": 5168847,
+      "nextPaintTime": 5168951,
+      "processedEventEntries": [
+        {
+          "name": "pointerup",
+          "entryType": "event",
+          "startTime": 5168847,
+          "duration": 104,
+          "interactionId": 3343,
+          "processingStart": 5168847.799999952,
+          "processingEnd": 5168847.799999952,
+          "cancelable": true
+        },
+        {
+          "name": "mouseup",
+          "entryType": "event",
+          "startTime": 5168847,
+          "duration": 104,
+          "interactionId": 0,
+          "processingStart": 5168847.799999952,
+          "processingEnd": 5168847.799999952,
+          "cancelable": true
+        },
+        {
+          "name": "click",
+          "entryType": "event",
+          "startTime": 5168847,
+          "duration": 104,
+          "interactionId": 3343,
+          "processingStart": 5168847.799999952,
+          "processingEnd": 5168933.600000024,
+          "cancelable": true
+        },
+        {
+          "name": "pointerup",
+          "entryType": "event",
+          "startTime": 5168847,
+          "duration": 104,
+          "interactionId": 3343,
+          "processingStart": 5168847.799999952,
+          "processingEnd": 5168847.799999952,
+          "cancelable": true
+        },
+        {
+          "name": "mouseup",
+          "entryType": "event",
+          "startTime": 5168847,
+          "duration": 104,
+          "interactionId": 0,
+          "processingStart": 5168847.799999952,
+          "processingEnd": 5168847.799999952,
+          "cancelable": true
+        },
+        {
+          "name": "click",
+          "entryType": "event",
+          "startTime": 5168847,
+          "duration": 104,
+          "interactionId": 3343,
+          "processingStart": 5168847.799999952,
+          "processingEnd": 5168933.600000024,
+          "cancelable": true
+        }
+      ],
+      "longAnimationFrameEntries": [
+        {
+          "name": "long-animation-frame",
+          "entryType": "long-animation-frame",
+          "startTime": 5168847.600000024,
+          "duration": 90,
+          "renderStart": 5168936.1999999285,
+          "styleAndLayoutStart": 5168936.1999999285,
+          "firstUIEventTimestamp": 5168847,
+          "blockingDuration": 38,
+          "scripts": [
+            {
+              "name": "script",
+              "entryType": "script",
+              "startTime": 5168847.899999976,
+              "duration": 85,
+              "invoker": "BUTTON#thrash-layout.onclick",
+              "invokerType": "event-listener",
+              "windowAttribution": "self",
+              "executionStart": 5168847.899999976,
+              "forcedStyleAndLayoutDuration": 80,
+              "pauseDuration": 0,
+              "sourceURL": "http://localhost:8000/demo/",
+              "sourceFunctionName": "",
+              "sourceCharPosition": 72
+            }
+          ]
+        }
+      ],
+      "inputDelay": 0.7999999523162842,
+      "processingDuration": 85.80000007152557,
+      "presentationDelay": 17.399999976158142,
+      "loadState": "complete"
+    };
+
+    // @ts-ignore
+    const result = formatLongAnimationFrameData(attribution);
+
+    expect(result).toEqual({
+      "debug_loaf_entry_end_time": 5168937,
+      "debug_loaf_entry_pre_layout_duration": 0,
+      "debug_loaf_entry_render_duration": 1,
+      "debug_loaf_entry_start_time": 5168847,
+      "debug_loaf_entry_style_and_layout_duration": 1,
+      "debug_loaf_entry_total_forced_style_and_layout_duration": 80,
+      "debug_loaf_entry_work_duration": 88,
+      "debug_loaf_meta_length": 1,
+      "debug_loaf_script_compile_duration": 0,
+      "debug_loaf_script_exec_duration": 85,
+      "debug_loaf_script_forced_style_and_layout_duration": 80,
+      "debug_loaf_script_invoker": "BUTTON#thrash-layout.onclick",
+      "debug_loaf_script_source_char_position": 72,
+      "debug_loaf_script_source_function_name": "",
+      "debug_loaf_script_source_url": "http://localhost:8000/demo/",
+      "debug_loaf_script_total_duration": 85,
+      "debug_loaf_script_type": "event-listener",
+    });
+  });
+
+  it('should return default/empty params if no attribution data is provided', () => {
+    // @ts-ignore
+    const result = formatLongAnimationFrameData('unknown', null);
+
+    expect(result).toEqual({
+      debug_target: '(not set)',
+    });
+  });
+});
+
+/**
+ * Samples of event data from the web-vitals.js package are below:
+ */
+// {
+//   "name": "INP",
+//   "value": 104,
+//   "rating": "good",
+//   "delta": 104,
+//   "entries": [
+//     {
+//       "name": "pointerup",
+//       "entryType": "event",
+//       "startTime": 5168847,
+//       "duration": 104,
+//       "interactionId": 3343,
+//       "processingStart": 5168847.799999952,
+//       "processingEnd": 5168847.799999952,
+//       "cancelable": true
+//     },
+//     {
+//       "name": "click",
+//       "entryType": "event",
+//       "startTime": 5168847,
+//       "duration": 104,
+//       "interactionId": 3343,
+//       "processingStart": 5168847.799999952,
+//       "processingEnd": 5168933.600000024,
+//       "cancelable": true
+//     },
+//     {
+//       "name": "pointerup",
+//       "entryType": "event",
+//       "startTime": 5168847,
+//       "duration": 104,
+//       "interactionId": 3343,
+//       "processingStart": 5168847.799999952,
+//       "processingEnd": 5168847.799999952,
+//       "cancelable": true
+//     },
+//     {
+//       "name": "click",
+//       "entryType": "event",
+//       "startTime": 5168847,
+//       "duration": 104,
+//       "interactionId": 3343,
+//       "processingStart": 5168847.799999952,
+//       "processingEnd": 5168933.600000024,
+//       "cancelable": true
+//     }
+//   ],
+//   "id": "v4-1732734514604-7082926874486",
+//   "navigationType": "reload",
+//   "attribution": {
+//     "interactionTarget": "#thrash-layout",
+//     "interactionTargetElement": {},
+//     "interactionType": "pointer",
+//     "interactionTime": 5168847,
+//     "nextPaintTime": 5168951,
+//     "processedEventEntries": [
+//       {
+//         "name": "pointerup",
+//         "entryType": "event",
+//         "startTime": 5168847,
+//         "duration": 104,
+//         "interactionId": 3343,
+//         "processingStart": 5168847.799999952,
+//         "processingEnd": 5168847.799999952,
+//         "cancelable": true
+//       },
+//       {
+//         "name": "mouseup",
+//         "entryType": "event",
+//         "startTime": 5168847,
+//         "duration": 104,
+//         "interactionId": 0,
+//         "processingStart": 5168847.799999952,
+//         "processingEnd": 5168847.799999952,
+//         "cancelable": true
+//       },
+//       {
+//         "name": "click",
+//         "entryType": "event",
+//         "startTime": 5168847,
+//         "duration": 104,
+//         "interactionId": 3343,
+//         "processingStart": 5168847.799999952,
+//         "processingEnd": 5168933.600000024,
+//         "cancelable": true
+//       },
+//       {
+//         "name": "pointerup",
+//         "entryType": "event",
+//         "startTime": 5168847,
+//         "duration": 104,
+//         "interactionId": 3343,
+//         "processingStart": 5168847.799999952,
+//         "processingEnd": 5168847.799999952,
+//         "cancelable": true
+//       },
+//       {
+//         "name": "mouseup",
+//         "entryType": "event",
+//         "startTime": 5168847,
+//         "duration": 104,
+//         "interactionId": 0,
+//         "processingStart": 5168847.799999952,
+//         "processingEnd": 5168847.799999952,
+//         "cancelable": true
+//       },
+//       {
+//         "name": "click",
+//         "entryType": "event",
+//         "startTime": 5168847,
+//         "duration": 104,
+//         "interactionId": 3343,
+//         "processingStart": 5168847.799999952,
+//         "processingEnd": 5168933.600000024,
+//         "cancelable": true
+//       }
+//     ],
+//     "longAnimationFrameEntries": [
+//       {
+//         "name": "long-animation-frame",
+//         "entryType": "long-animation-frame",
+//         "startTime": 5168847.600000024,
+//         "duration": 90,
+//         "renderStart": 5168936.1999999285,
+//         "styleAndLayoutStart": 5168936.1999999285,
+//         "firstUIEventTimestamp": 5168847,
+//         "blockingDuration": 38,
+//         "scripts": [
+//           {
+//             "name": "script",
+//             "entryType": "script",
+//             "startTime": 5168847.899999976,
+//             "duration": 85,
+//             "invoker": "BUTTON#thrash-layout.onclick",
+//             "invokerType": "event-listener",
+//             "windowAttribution": "self",
+//             "executionStart": 5168847.899999976,
+//             "forcedStyleAndLayoutDuration": 80,
+//             "pauseDuration": 0,
+//             "sourceURL": "http://localhost:8000/demo/",
+//             "sourceFunctionName": "",
+//             "sourceCharPosition": 72
+//           }
+//         ]
+//       }
+//     ],
+//     "inputDelay": 0.7999999523162842,
+//     "processingDuration": 85.80000007152557,
+//     "presentationDelay": 17.399999976158142,
+//     "loadState": "complete"
+//   }
+// }

From 203dfdbc3d8915babf92307c1dff1113978e12a2 Mon Sep 17 00:00:00 2001
From: Ethan Gardner <edgincvg@gmail.com>
Date: Wed, 27 Nov 2024 14:56:03 -0500
Subject: [PATCH 12/22] update tests for loaf attribution

---
 package.json                                  |   1 -
 src/format-long-animation-frame-data.ts       |  65 +--
 .../format-long-animation-frame-data.test.ts  | 466 +++++++++++++++---
 3 files changed, 419 insertions(+), 113 deletions(-)

diff --git a/package.json b/package.json
index 6457b6c..7835d81 100644
--- a/package.json
+++ b/package.json
@@ -24,7 +24,6 @@
     "test:coverage": "vitest --coverage"
   },
   "dependencies": {
-    "lit": "^3.2.1",
     "web-vitals": "^4.2.4"
   },
   "devDependencies": {
diff --git a/src/format-long-animation-frame-data.ts b/src/format-long-animation-frame-data.ts
index 244fa16..be8b204 100644
--- a/src/format-long-animation-frame-data.ts
+++ b/src/format-long-animation-frame-data.ts
@@ -1,42 +1,31 @@
 import type { INPAttribution } from 'web-vitals';
 
-// export const formatLongAnimationFrameData = (attribution: INPAttribution) => {
-//
-// };
-
-// export const formatLongAnimationFrameData = (attribution: INPAttribution) => {
-//   // The last LoAF entry is usually the most relevant.
-//   const loaf = attribution.longAnimationFrameEntries.at(-1);
-//   const script = loaf?.scripts.sort((a, b) => b.duration - a.duration)[0];
-//   let obj = {}
-//
-//   if(script) {
-//     // long event handler
-//     const { invokerType } = script; // always event-listener for long event handlers
-//     const { invoker } = script; // element that had the event listener
-//     const { sourceURL } = script;
-//     const { sourceCharPosition } = script;
-//     const { sourceFunctionName } = script;
-//
-//     // long input delay: during page load - was this from script evaluation
-//     const { invokerType } = script; //
-//     const { sourceLocation } = script;
-//
-//     // long input delay: after page load - was this from script evaluation
-//     const { invokerType } = script; // user-callback (recurring timer like setInterval), event-listener, module-script, classic-script. Could also be expensive fetch call
-//     const { sourceURL } = script; // https://example.com/app.js
-//     const { sourceCharPosition } = script; // 83
-//     const { sourceFunctionName } = script; // update
-//
-//     // presentation delay
-//     const { invokerType } = script; // user-callback (recurring timer like setInterval), event-listener, module-script, classic-script. Could also be expensive fetch call
-//     const { sourceURL } = script; // https://example.com/app.js
-//     const { sourceCharPosition } = script; // 83
-//     const { sourceFunctionName } = script; // update
-//   }
-// }
-
-
+/**
+ * Properties of note
+ *
+ * // Long-running event handler would be like the below:
+ * const { invokerType } = script; // always event-listener for long event handlers
+ * const { invoker } = script; // element that had the event listener
+ * const { sourceURL } = script; // https://example.com/app.js
+ * const { sourceCharPosition } = script; // 83
+ * const { sourceFunctionName } = script; // update
+ *
+ * // long input delay: during page load - was this from script evaluation?
+ * const { invokerType } = script;
+ * const { sourceLocation } = script;
+ *
+ * // long input delay: after page load
+ * const { invokerType } = script; // user-callback (recurring timer like setInterval), event-listener, module-script, classic-script. Could also be expensive fetch call
+ * const { sourceURL } = script; // https://example.com/app.js
+ * const { sourceCharPosition } = script; // 83
+ * const { sourceFunctionName } = script; // update
+ *
+ * // presentation delay
+ * const { invokerType } = script; // user-callback (recurring timer like setInterval), event-listener, module-script, classic-script. Could also be expensive fetch call
+ * const { sourceURL } = script; // https://example.com/app.js
+ * const { sourceCharPosition } = script; // 83
+ * const { sourceFunctionName } = script; // update
+ */
 export const formatLongAnimationFrameData = (attribution: INPAttribution) => {
   const loafEntries = attribution.longAnimationFrameEntries;
   if(typeof loafEntries === 'undefined' || loafEntries.length === 0) {
@@ -87,7 +76,7 @@ export const formatLongAnimationFrameData = (attribution: INPAttribution) => {
   }
 
   // The LoAF script with the single longest total duration.
-  return Object.fromEntries(Object.entries(loafAttribution).map(([k, v]) => 
+  return Object.fromEntries(Object.entries(loafAttribution).map(([k, v]) =>
     // Convert all floats to ints.
      [k, typeof v === 'number' ? Math.floor(v) : v]
   ));
diff --git a/test/unit/format-long-animation-frame-data.test.ts b/test/unit/format-long-animation-frame-data.test.ts
index 53ea21e..adc6dcb 100644
--- a/test/unit/format-long-animation-frame-data.test.ts
+++ b/test/unit/format-long-animation-frame-data.test.ts
@@ -4,73 +4,6 @@ import { formatLongAnimationFrameData } from '../../src/format-long-animation-fr
 describe('formatLongAnimationFrameData', () => {
   it('should format INP data correctly', () => {
     const attribution = {
-      "interactionTarget": "#thrash-layout",
-      "interactionTargetElement": {},
-      "interactionType": "pointer",
-      "interactionTime": 5168847,
-      "nextPaintTime": 5168951,
-      "processedEventEntries": [
-        {
-          "name": "pointerup",
-          "entryType": "event",
-          "startTime": 5168847,
-          "duration": 104,
-          "interactionId": 3343,
-          "processingStart": 5168847.799999952,
-          "processingEnd": 5168847.799999952,
-          "cancelable": true
-        },
-        {
-          "name": "mouseup",
-          "entryType": "event",
-          "startTime": 5168847,
-          "duration": 104,
-          "interactionId": 0,
-          "processingStart": 5168847.799999952,
-          "processingEnd": 5168847.799999952,
-          "cancelable": true
-        },
-        {
-          "name": "click",
-          "entryType": "event",
-          "startTime": 5168847,
-          "duration": 104,
-          "interactionId": 3343,
-          "processingStart": 5168847.799999952,
-          "processingEnd": 5168933.600000024,
-          "cancelable": true
-        },
-        {
-          "name": "pointerup",
-          "entryType": "event",
-          "startTime": 5168847,
-          "duration": 104,
-          "interactionId": 3343,
-          "processingStart": 5168847.799999952,
-          "processingEnd": 5168847.799999952,
-          "cancelable": true
-        },
-        {
-          "name": "mouseup",
-          "entryType": "event",
-          "startTime": 5168847,
-          "duration": 104,
-          "interactionId": 0,
-          "processingStart": 5168847.799999952,
-          "processingEnd": 5168847.799999952,
-          "cancelable": true
-        },
-        {
-          "name": "click",
-          "entryType": "event",
-          "startTime": 5168847,
-          "duration": 104,
-          "interactionId": 3343,
-          "processingStart": 5168847.799999952,
-          "processingEnd": 5168933.600000024,
-          "cancelable": true
-        }
-      ],
       "longAnimationFrameEntries": [
         {
           "name": "long-animation-frame",
@@ -100,10 +33,6 @@ describe('formatLongAnimationFrameData', () => {
           ]
         }
       ],
-      "inputDelay": 0.7999999523162842,
-      "processingDuration": 85.80000007152557,
-      "presentationDelay": 17.399999976158142,
-      "loadState": "complete"
     };
 
     // @ts-ignore
@@ -130,19 +59,124 @@ describe('formatLongAnimationFrameData', () => {
     });
   });
 
-  it('should return default/empty params if no attribution data is provided', () => {
+  it('should handle multiple scripts by giving info about the single longest total duration.', () => {
+    const attribution = {
+      "longAnimationFrameEntries": [
+        {
+          "name": "long-animation-frame",
+          "entryType": "long-animation-frame",
+          "startTime": 49367.80000001192,
+          "duration": 335,
+          "renderStart": 49702.19999998808,
+          "styleAndLayoutStart": 49702.69999998808,
+          "firstUIEventTimestamp": 49387.80000001192,
+          "blockingDuration": 235,
+          "scripts": [
+            {
+              "name": "script",
+              "entryType": "script",
+              "startTime": 49367.89999997616,
+              "duration": 222,
+              "invoker": "TimerHandler:setTimeout",
+              "invokerType": "user-callback",
+              "windowAttribution": "self",
+              "executionStart": 49367.89999997616,
+              "forcedStyleAndLayoutDuration": 0,
+              "pauseDuration": 0,
+              "sourceURL": "http://localhost:8000/demo/",
+              "sourceFunctionName": "periodicBlock",
+              "sourceCharPosition": 2007
+            },
+            {
+              "name": "script",
+              "entryType": "script",
+              "startTime": 49590.89999997616,
+              "duration": 14,
+              "invoker": "DOMWindow.onkeydown",
+              "invokerType": "event-listener",
+              "windowAttribution": "self",
+              "executionStart": 49590.89999997616,
+              "forcedStyleAndLayoutDuration": 0,
+              "pauseDuration": 0,
+              "sourceURL": "http://localhost:8000/demo/",
+              "sourceFunctionName": "",
+              "sourceCharPosition": 4656
+            }
+          ]
+        }
+      ],
+    }
+
     // @ts-ignore
-    const result = formatLongAnimationFrameData('unknown', null);
+    const result = formatLongAnimationFrameData(attribution);
 
     expect(result).toEqual({
-      debug_target: '(not set)',
+      "debug_loaf_entry_end_time": 49702,
+      "debug_loaf_entry_pre_layout_duration": 0,
+      "debug_loaf_entry_render_duration": 0,
+      "debug_loaf_entry_start_time": 49367,
+      "debug_loaf_entry_style_and_layout_duration": 0,
+      "debug_loaf_entry_total_forced_style_and_layout_duration": 0,
+      "debug_loaf_entry_work_duration": 334,
+      "debug_loaf_meta_length": 1,
+      "debug_loaf_script_compile_duration": 0,
+      "debug_loaf_script_exec_duration": 222,
+      "debug_loaf_script_forced_style_and_layout_duration": 0,
+      "debug_loaf_script_invoker": "TimerHandler:setTimeout",
+      "debug_loaf_script_source_char_position": 2007,
+      "debug_loaf_script_source_function_name": "periodicBlock",
+      "debug_loaf_script_source_url": "http://localhost:8000/demo/",
+      "debug_loaf_script_total_duration": 222,
+      "debug_loaf_script_type": "user-callback",
     });
   });
+
+  it('should handle attribution data with zero scripts', () => {
+    const attribution = {
+      "interactionTarget": "#textarea",
+      "interactionTargetElement": {},
+      "interactionType": "keyboard",
+      "interactionTime": 49387.80000001192,
+      "nextPaintTime": 49715.80000001192,
+      "longAnimationFrameEntries": [
+        {
+          "name": "long-animation-frame",
+          "entryType": "long-animation-frame",
+          "startTime": 49367.80000001192,
+          "duration": 335,
+          "renderStart": 49702.19999998808,
+          "styleAndLayoutStart": 49702.69999998808,
+          "firstUIEventTimestamp": 49387.80000001192,
+          "blockingDuration": 235,
+          "scripts": []
+        }
+      ],
+      "inputDelay": 203.0999999642372,
+      "processingDuration": 111.30000001192093,
+      "presentationDelay": 13.600000023841858,
+      "loadState": "complete"
+    }
+
+    // @ts-ignore
+    const result = formatLongAnimationFrameData(attribution);
+
+    expect(result).toEqual({});
+  });
+
+  it('should return default params if no attribution data is provided', () => {
+    // @ts-ignore
+    const result = formatLongAnimationFrameData('unknown', null);
+
+    expect(result).toEqual({});
+  });
 });
 
 /**
  * Samples of event data from the web-vitals.js package are below:
  */
+/**
+ * Single script entry
+ */
 // {
 //   "name": "INP",
 //   "value": 104,
@@ -295,3 +329,287 @@ describe('formatLongAnimationFrameData', () => {
 //     "loadState": "complete"
 //   }
 // }
+
+/**
+ * Empty scripts array
+ */
+// {
+//   "name": "INP",
+//   "value": 64,
+//   "rating": "good",
+//   "delta": 64,
+//   "entries": [
+//     {
+//       "name": "pointerup",
+//       "entryType": "event",
+//       "startTime": 25448.80000001192,
+//       "duration": 64,
+//       "interactionId": 1134,
+//       "processingStart": 25451.100000023842,
+//       "processingEnd": 25451.100000023842,
+//       "cancelable": true
+//     },
+//     {
+//       "name": "click",
+//       "entryType": "event",
+//       "startTime": 25448.80000001192,
+//       "duration": 64,
+//       "interactionId": 1134,
+//       "processingStart": 25451.100000023842,
+//       "processingEnd": 25483.400000035763,
+//       "cancelable": true
+//     }
+//   ],
+//   "id": "v4-1732752055743-7541189658822",
+//   "navigationType": "reload",
+//   "attribution": {
+//     "interactionTarget": "#headerMenuIcon>svg.header__menu-icon-svg",
+//     "interactionTargetElement": {},
+//     "interactionType": "pointer",
+//     "interactionTime": 25448.80000001192,
+//     "nextPaintTime": 25512.80000001192,
+//     "processedEventEntries": [
+//       {
+//         "name": "pointerup",
+//         "entryType": "event",
+//         "startTime": 25448.80000001192,
+//         "duration": 64,
+//         "interactionId": 1134,
+//         "processingStart": 25451.100000023842,
+//         "processingEnd": 25451.100000023842,
+//         "cancelable": true
+//       },
+//       {
+//         "name": "mouseup",
+//         "entryType": "event",
+//         "startTime": 25448.80000001192,
+//         "duration": 64,
+//         "interactionId": 0,
+//         "processingStart": 25451.100000023842,
+//         "processingEnd": 25451.100000023842,
+//         "cancelable": true
+//       },
+//       {
+//         "name": "click",
+//         "entryType": "event",
+//         "startTime": 25448.80000001192,
+//         "duration": 64,
+//         "interactionId": 1134,
+//         "processingStart": 25451.100000023842,
+//         "processingEnd": 25483.400000035763,
+//         "cancelable": true
+//       }
+//     ],
+//     "longAnimationFrameEntries": [],
+//     "inputDelay": 2.300000011920929,
+//     "processingDuration": 32.30000001192093,
+//     "presentationDelay": 29.399999976158142,
+//     "loadState": "complete"
+//   }
+// }
+
+/**
+ * Multiple scripts
+ */
+// {
+//   "interactionTarget": "#textarea",
+//   "interactionTargetElement": {},
+//   "interactionType": "keyboard",
+//   "interactionTime": 49387.80000001192,
+//   "nextPaintTime": 49715.80000001192,
+//   "processedEventEntries": [
+//     {
+//       "name": "keydown",
+//       "entryType": "event",
+//       "startTime": 49387.80000001192,
+//       "duration": 328,
+//       "interactionId": 5994,
+//       "processingStart": 49590.89999997616,
+//       "processingEnd": 49605.89999997616,
+//       "cancelable": true
+//     },
+//     {
+//       "name": "keypress",
+//       "entryType": "event",
+//       "startTime": 49388.10000002384,
+//       "duration": 328,
+//       "interactionId": 5994,
+//       "processingStart": 49606,
+//       "processingEnd": 49606.5,
+//       "cancelable": true
+//     },
+//     {
+//       "name": "beforeinput",
+//       "entryType": "event",
+//       "startTime": 49606,
+//       "duration": 104,
+//       "interactionId": 0,
+//       "processingStart": 49606,
+//       "processingEnd": 49606,
+//       "cancelable": true
+//     },
+//     {
+//       "name": "keydown",
+//       "entryType": "event",
+//       "startTime": 49492.69999998808,
+//       "duration": 224,
+//       "interactionId": 6001,
+//       "processingStart": 49606.5,
+//       "processingEnd": 49621.60000002384,
+//       "cancelable": true
+//     },
+//     {
+//       "name": "input",
+//       "entryType": "event",
+//       "startTime": 49606.19999998808,
+//       "duration": 104,
+//       "interactionId": 0,
+//       "processingStart": 49606.5,
+//       "processingEnd": 49606.5,
+//       "cancelable": false
+//     },
+//     {
+//       "name": "keypress",
+//       "entryType": "event",
+//       "startTime": 49493.69999998808,
+//       "duration": 216,
+//       "interactionId": 6001,
+//       "processingStart": 49621.60000002384,
+//       "processingEnd": 49622.10000002384,
+//       "cancelable": true
+//     },
+//     {
+//       "name": "beforeinput",
+//       "entryType": "event",
+//       "startTime": 49621.60000002384,
+//       "duration": 88,
+//       "interactionId": 0,
+//       "processingStart": 49621.60000002384,
+//       "processingEnd": 49621.60000002384,
+//       "cancelable": true
+//     },
+//     {
+//       "name": "input",
+//       "entryType": "event",
+//       "startTime": 49622,
+//       "duration": 88,
+//       "interactionId": 0,
+//       "processingStart": 49622.10000002384,
+//       "processingEnd": 49622.10000002384,
+//       "cancelable": false
+//     },
+//     {
+//       "name": "keyup",
+//       "entryType": "event",
+//       "startTime": 49550.60000002384,
+//       "duration": 160,
+//       "interactionId": 5994,
+//       "processingStart": 49622.19999998808,
+//       "processingEnd": 49662.19999998808,
+//       "cancelable": true
+//     },
+//     {
+//       "name": "keyup",
+//       "entryType": "event",
+//       "startTime": 49587.60000002384,
+//       "duration": 128,
+//       "interactionId": 6001,
+//       "processingStart": 49662.19999998808,
+//       "processingEnd": 49702.19999998808,
+//       "cancelable": true
+//     }
+//   ],
+//   "longAnimationFrameEntries": [
+//     {
+//       "name": "long-animation-frame",
+//       "entryType": "long-animation-frame",
+//       "startTime": 49367.80000001192,
+//       "duration": 335,
+//       "renderStart": 49702.19999998808,
+//       "styleAndLayoutStart": 49702.69999998808,
+//       "firstUIEventTimestamp": 49387.80000001192,
+//       "blockingDuration": 235,
+//       "scripts": [
+//         {
+//           "name": "script",
+//           "entryType": "script",
+//           "startTime": 49367.89999997616,
+//           "duration": 222,
+//           "invoker": "TimerHandler:setTimeout",
+//           "invokerType": "user-callback",
+//           "windowAttribution": "self",
+//           "executionStart": 49367.89999997616,
+//           "forcedStyleAndLayoutDuration": 0,
+//           "pauseDuration": 0,
+//           "sourceURL": "http://localhost:8000/demo/",
+//           "sourceFunctionName": "periodicBlock",
+//           "sourceCharPosition": 2007
+//         },
+//         {
+//           "name": "script",
+//           "entryType": "script",
+//           "startTime": 49590.89999997616,
+//           "duration": 14,
+//           "invoker": "DOMWindow.onkeydown",
+//           "invokerType": "event-listener",
+//           "windowAttribution": "self",
+//           "executionStart": 49590.89999997616,
+//           "forcedStyleAndLayoutDuration": 0,
+//           "pauseDuration": 0,
+//           "sourceURL": "http://localhost:8000/demo/",
+//           "sourceFunctionName": "",
+//           "sourceCharPosition": 4656
+//         },
+//         {
+//           "name": "script",
+//           "entryType": "script",
+//           "startTime": 49606.5,
+//           "duration": 14,
+//           "invoker": "DOMWindow.onkeydown",
+//           "invokerType": "event-listener",
+//           "windowAttribution": "self",
+//           "executionStart": 49606.5,
+//           "forcedStyleAndLayoutDuration": 0,
+//           "pauseDuration": 0,
+//           "sourceURL": "http://localhost:8000/demo/",
+//           "sourceFunctionName": "",
+//           "sourceCharPosition": 4656
+//         },
+//         {
+//           "name": "script",
+//           "entryType": "script",
+//           "startTime": 49622.19999998808,
+//           "duration": 40,
+//           "invoker": "DOMWindow.onkeyup",
+//           "invokerType": "event-listener",
+//           "windowAttribution": "self",
+//           "executionStart": 49622.19999998808,
+//           "forcedStyleAndLayoutDuration": 0,
+//           "pauseDuration": 0,
+//           "sourceURL": "http://localhost:8000/demo/",
+//           "sourceFunctionName": "",
+//           "sourceCharPosition": 4656
+//         },
+//         {
+//           "name": "script",
+//           "entryType": "script",
+//           "startTime": 49662.19999998808,
+//           "duration": 39,
+//           "invoker": "DOMWindow.onkeyup",
+//           "invokerType": "event-listener",
+//           "windowAttribution": "self",
+//           "executionStart": 49662.19999998808,
+//           "forcedStyleAndLayoutDuration": 0,
+//           "pauseDuration": 0,
+//           "sourceURL": "http://localhost:8000/demo/",
+//           "sourceFunctionName": "",
+//           "sourceCharPosition": 4656
+//         }
+//       ]
+//     }
+//   ],
+//   "inputDelay": 203.0999999642372,
+//   "processingDuration": 111.30000001192093,
+//   "presentationDelay": 13.600000023841858,
+//   "loadState": "complete"
+// }

From d78ff038083274461a0c476b4460bf93da7ac790 Mon Sep 17 00:00:00 2001
From: Ethan Gardner <edgincvg@gmail.com>
Date: Thu, 28 Nov 2024 02:26:15 -0500
Subject: [PATCH 13/22] add more props to loaf attribution

---
 src/format-long-animation-frame-data.ts            | 2 ++
 test/unit/format-long-animation-frame-data.test.ts | 4 ++++
 2 files changed, 6 insertions(+)

diff --git a/src/format-long-animation-frame-data.ts b/src/format-long-animation-frame-data.ts
index be8b204..c93c228 100644
--- a/src/format-long-animation-frame-data.ts
+++ b/src/format-long-animation-frame-data.ts
@@ -64,6 +64,8 @@ export const formatLongAnimationFrameData = (attribution: INPAttribution) => {
         debug_loaf_script_source_url: script.sourceURL,
         debug_loaf_script_source_function_name: script.sourceFunctionName,
         debug_loaf_script_source_char_position: script.sourceCharPosition,
+        debug_loaf_pause_duration: script.pauseDuration,
+        debug_loaf_window_attribution: script.windowAttribution,
 
         // LoAF metadata.
         debug_loaf_meta_length: loafEntries.length,
diff --git a/test/unit/format-long-animation-frame-data.test.ts b/test/unit/format-long-animation-frame-data.test.ts
index adc6dcb..be99e31 100644
--- a/test/unit/format-long-animation-frame-data.test.ts
+++ b/test/unit/format-long-animation-frame-data.test.ts
@@ -47,6 +47,7 @@ describe('formatLongAnimationFrameData', () => {
       "debug_loaf_entry_total_forced_style_and_layout_duration": 80,
       "debug_loaf_entry_work_duration": 88,
       "debug_loaf_meta_length": 1,
+      "debug_loaf_pause_duration": 0,
       "debug_loaf_script_compile_duration": 0,
       "debug_loaf_script_exec_duration": 85,
       "debug_loaf_script_forced_style_and_layout_duration": 80,
@@ -56,6 +57,7 @@ describe('formatLongAnimationFrameData', () => {
       "debug_loaf_script_source_url": "http://localhost:8000/demo/",
       "debug_loaf_script_total_duration": 85,
       "debug_loaf_script_type": "event-listener",
+      "debug_loaf_window_attribution": "self",
     });
   });
 
@@ -119,6 +121,7 @@ describe('formatLongAnimationFrameData', () => {
       "debug_loaf_entry_total_forced_style_and_layout_duration": 0,
       "debug_loaf_entry_work_duration": 334,
       "debug_loaf_meta_length": 1,
+      "debug_loaf_pause_duration": 0,
       "debug_loaf_script_compile_duration": 0,
       "debug_loaf_script_exec_duration": 222,
       "debug_loaf_script_forced_style_and_layout_duration": 0,
@@ -128,6 +131,7 @@ describe('formatLongAnimationFrameData', () => {
       "debug_loaf_script_source_url": "http://localhost:8000/demo/",
       "debug_loaf_script_total_duration": 222,
       "debug_loaf_script_type": "user-callback",
+      "debug_loaf_window_attribution": "self",
     });
   });
 

From 650a71a628c465b81cd5b97d548fc67dcd71d907 Mon Sep 17 00:00:00 2001
From: Ethan Gardner <edgincvg@gmail.com>
Date: Thu, 28 Nov 2024 02:27:21 -0500
Subject: [PATCH 14/22] fix linting issue

---
 src/format-long-animation-frame-data.ts | 51 ++++++++++++++++---------
 1 file changed, 34 insertions(+), 17 deletions(-)

diff --git a/src/format-long-animation-frame-data.ts b/src/format-long-animation-frame-data.ts
index c93c228..331e7c7 100644
--- a/src/format-long-animation-frame-data.ts
+++ b/src/format-long-animation-frame-data.ts
@@ -28,17 +28,17 @@ import type { INPAttribution } from 'web-vitals';
  */
 export const formatLongAnimationFrameData = (attribution: INPAttribution) => {
   const loafEntries = attribution.longAnimationFrameEntries;
-  if(typeof loafEntries === 'undefined' || loafEntries.length === 0) {
+  if (typeof loafEntries === 'undefined' || loafEntries.length === 0) {
     return {};
   }
 
   let loafAttribution = {
-    debug_loaf_script_total_duration: 0
+    debug_loaf_script_total_duration: 0,
   };
 
   // The last LoAF entry is usually the most relevant.
   const loaf = attribution.longAnimationFrameEntries.at(-1);
-  if(typeof loaf !== 'undefined') {
+  if (typeof loaf !== 'undefined') {
     const loafEndTime = loaf.startTime + loaf.duration;
     loaf?.scripts.forEach(script => {
       if (script.duration <= loafAttribution.debug_loaf_script_total_duration) {
@@ -48,17 +48,32 @@ export const formatLongAnimationFrameData = (attribution: INPAttribution) => {
         // Stats for the LoAF entry itself.
         debug_loaf_entry_start_time: loaf.startTime,
         debug_loaf_entry_end_time: loafEndTime,
-        debug_loaf_entry_work_duration: loaf.renderStart ? loaf.renderStart - loaf.startTime : loaf.duration,
-        debug_loaf_entry_render_duration: loaf.renderStart ? loafEndTime - loaf.renderStart : 0,
-        debug_loaf_entry_total_forced_style_and_layout_duration: loaf.scripts.reduce((sum, script) => sum + script.forcedStyleAndLayoutDuration, 0),
-        debug_loaf_entry_pre_layout_duration: loaf.styleAndLayoutStart ? loaf.styleAndLayoutStart - loaf.renderStart : 0,
-        debug_loaf_entry_style_and_layout_duration: loaf.styleAndLayoutStart ? loafEndTime - loaf.styleAndLayoutStart : 0,
+        debug_loaf_entry_work_duration: loaf.renderStart
+          ? loaf.renderStart - loaf.startTime
+          : loaf.duration,
+        debug_loaf_entry_render_duration: loaf.renderStart
+          ? loafEndTime - loaf.renderStart
+          : 0,
+        debug_loaf_entry_total_forced_style_and_layout_duration:
+          loaf.scripts.reduce(
+            (sum, entry) => sum + entry.forcedStyleAndLayoutDuration,
+            0,
+          ),
+        debug_loaf_entry_pre_layout_duration: loaf.styleAndLayoutStart
+          ? loaf.styleAndLayoutStart - loaf.renderStart
+          : 0,
+        debug_loaf_entry_style_and_layout_duration: loaf.styleAndLayoutStart
+          ? loafEndTime - loaf.styleAndLayoutStart
+          : 0,
 
         // Stats for the longest script in the LoAF entry.
         debug_loaf_script_total_duration: script.duration,
-        debug_loaf_script_compile_duration: script.executionStart - script.startTime,
-        debug_loaf_script_exec_duration: script.startTime + script.duration - script.executionStart,
-        debug_loaf_script_forced_style_and_layout_duration: script.forcedStyleAndLayoutDuration,
+        debug_loaf_script_compile_duration:
+          script.executionStart - script.startTime,
+        debug_loaf_script_exec_duration:
+          script.startTime + script.duration - script.executionStart,
+        debug_loaf_script_forced_style_and_layout_duration:
+          script.forcedStyleAndLayoutDuration,
         debug_loaf_script_type: script.invokerType,
         debug_loaf_script_invoker: script.invoker,
         debug_loaf_script_source_url: script.sourceURL,
@@ -69,7 +84,7 @@ export const formatLongAnimationFrameData = (attribution: INPAttribution) => {
 
         // LoAF metadata.
         debug_loaf_meta_length: loafEntries.length,
-      }
+      };
     });
   }
 
@@ -78,8 +93,10 @@ export const formatLongAnimationFrameData = (attribution: INPAttribution) => {
   }
 
   // The LoAF script with the single longest total duration.
-  return Object.fromEntries(Object.entries(loafAttribution).map(([k, v]) =>
-    // Convert all floats to ints.
-     [k, typeof v === 'number' ? Math.floor(v) : v]
-  ));
-}
+  return Object.fromEntries(
+    Object.entries(loafAttribution).map(([k, v]) =>
+      // Convert all floats to ints.
+      [k, typeof v === 'number' ? Math.floor(v) : v],
+    ),
+  );
+};

From 3cc4a931a79aa63879a7541374f17c1d9950fdc0 Mon Sep 17 00:00:00 2001
From: Ethan Gardner <edgincvg@gmail.com>
Date: Thu, 28 Nov 2024 02:28:15 -0500
Subject: [PATCH 15/22] code formatting

---
 .../format-long-animation-frame-data.test.ts  | 250 +++++++++---------
 1 file changed, 125 insertions(+), 125 deletions(-)

diff --git a/test/unit/format-long-animation-frame-data.test.ts b/test/unit/format-long-animation-frame-data.test.ts
index be99e31..e1db1de 100644
--- a/test/unit/format-long-animation-frame-data.test.ts
+++ b/test/unit/format-long-animation-frame-data.test.ts
@@ -4,34 +4,34 @@ import { formatLongAnimationFrameData } from '../../src/format-long-animation-fr
 describe('formatLongAnimationFrameData', () => {
   it('should format INP data correctly', () => {
     const attribution = {
-      "longAnimationFrameEntries": [
+      longAnimationFrameEntries: [
         {
-          "name": "long-animation-frame",
-          "entryType": "long-animation-frame",
-          "startTime": 5168847.600000024,
-          "duration": 90,
-          "renderStart": 5168936.1999999285,
-          "styleAndLayoutStart": 5168936.1999999285,
-          "firstUIEventTimestamp": 5168847,
-          "blockingDuration": 38,
-          "scripts": [
+          name: 'long-animation-frame',
+          entryType: 'long-animation-frame',
+          startTime: 5168847.600000024,
+          duration: 90,
+          renderStart: 5168936.1999999285,
+          styleAndLayoutStart: 5168936.1999999285,
+          firstUIEventTimestamp: 5168847,
+          blockingDuration: 38,
+          scripts: [
             {
-              "name": "script",
-              "entryType": "script",
-              "startTime": 5168847.899999976,
-              "duration": 85,
-              "invoker": "BUTTON#thrash-layout.onclick",
-              "invokerType": "event-listener",
-              "windowAttribution": "self",
-              "executionStart": 5168847.899999976,
-              "forcedStyleAndLayoutDuration": 80,
-              "pauseDuration": 0,
-              "sourceURL": "http://localhost:8000/demo/",
-              "sourceFunctionName": "",
-              "sourceCharPosition": 72
-            }
-          ]
-        }
+              name: 'script',
+              entryType: 'script',
+              startTime: 5168847.899999976,
+              duration: 85,
+              invoker: 'BUTTON#thrash-layout.onclick',
+              invokerType: 'event-listener',
+              windowAttribution: 'self',
+              executionStart: 5168847.899999976,
+              forcedStyleAndLayoutDuration: 80,
+              pauseDuration: 0,
+              sourceURL: 'http://localhost:8000/demo/',
+              sourceFunctionName: '',
+              sourceCharPosition: 72,
+            },
+          ],
+        },
       ],
     };
 
@@ -39,127 +39,127 @@ describe('formatLongAnimationFrameData', () => {
     const result = formatLongAnimationFrameData(attribution);
 
     expect(result).toEqual({
-      "debug_loaf_entry_end_time": 5168937,
-      "debug_loaf_entry_pre_layout_duration": 0,
-      "debug_loaf_entry_render_duration": 1,
-      "debug_loaf_entry_start_time": 5168847,
-      "debug_loaf_entry_style_and_layout_duration": 1,
-      "debug_loaf_entry_total_forced_style_and_layout_duration": 80,
-      "debug_loaf_entry_work_duration": 88,
-      "debug_loaf_meta_length": 1,
-      "debug_loaf_pause_duration": 0,
-      "debug_loaf_script_compile_duration": 0,
-      "debug_loaf_script_exec_duration": 85,
-      "debug_loaf_script_forced_style_and_layout_duration": 80,
-      "debug_loaf_script_invoker": "BUTTON#thrash-layout.onclick",
-      "debug_loaf_script_source_char_position": 72,
-      "debug_loaf_script_source_function_name": "",
-      "debug_loaf_script_source_url": "http://localhost:8000/demo/",
-      "debug_loaf_script_total_duration": 85,
-      "debug_loaf_script_type": "event-listener",
-      "debug_loaf_window_attribution": "self",
+      debug_loaf_entry_end_time: 5168937,
+      debug_loaf_entry_pre_layout_duration: 0,
+      debug_loaf_entry_render_duration: 1,
+      debug_loaf_entry_start_time: 5168847,
+      debug_loaf_entry_style_and_layout_duration: 1,
+      debug_loaf_entry_total_forced_style_and_layout_duration: 80,
+      debug_loaf_entry_work_duration: 88,
+      debug_loaf_meta_length: 1,
+      debug_loaf_pause_duration: 0,
+      debug_loaf_script_compile_duration: 0,
+      debug_loaf_script_exec_duration: 85,
+      debug_loaf_script_forced_style_and_layout_duration: 80,
+      debug_loaf_script_invoker: 'BUTTON#thrash-layout.onclick',
+      debug_loaf_script_source_char_position: 72,
+      debug_loaf_script_source_function_name: '',
+      debug_loaf_script_source_url: 'http://localhost:8000/demo/',
+      debug_loaf_script_total_duration: 85,
+      debug_loaf_script_type: 'event-listener',
+      debug_loaf_window_attribution: 'self',
     });
   });
 
   it('should handle multiple scripts by giving info about the single longest total duration.', () => {
     const attribution = {
-      "longAnimationFrameEntries": [
+      longAnimationFrameEntries: [
         {
-          "name": "long-animation-frame",
-          "entryType": "long-animation-frame",
-          "startTime": 49367.80000001192,
-          "duration": 335,
-          "renderStart": 49702.19999998808,
-          "styleAndLayoutStart": 49702.69999998808,
-          "firstUIEventTimestamp": 49387.80000001192,
-          "blockingDuration": 235,
-          "scripts": [
+          name: 'long-animation-frame',
+          entryType: 'long-animation-frame',
+          startTime: 49367.80000001192,
+          duration: 335,
+          renderStart: 49702.19999998808,
+          styleAndLayoutStart: 49702.69999998808,
+          firstUIEventTimestamp: 49387.80000001192,
+          blockingDuration: 235,
+          scripts: [
             {
-              "name": "script",
-              "entryType": "script",
-              "startTime": 49367.89999997616,
-              "duration": 222,
-              "invoker": "TimerHandler:setTimeout",
-              "invokerType": "user-callback",
-              "windowAttribution": "self",
-              "executionStart": 49367.89999997616,
-              "forcedStyleAndLayoutDuration": 0,
-              "pauseDuration": 0,
-              "sourceURL": "http://localhost:8000/demo/",
-              "sourceFunctionName": "periodicBlock",
-              "sourceCharPosition": 2007
+              name: 'script',
+              entryType: 'script',
+              startTime: 49367.89999997616,
+              duration: 222,
+              invoker: 'TimerHandler:setTimeout',
+              invokerType: 'user-callback',
+              windowAttribution: 'self',
+              executionStart: 49367.89999997616,
+              forcedStyleAndLayoutDuration: 0,
+              pauseDuration: 0,
+              sourceURL: 'http://localhost:8000/demo/',
+              sourceFunctionName: 'periodicBlock',
+              sourceCharPosition: 2007,
             },
             {
-              "name": "script",
-              "entryType": "script",
-              "startTime": 49590.89999997616,
-              "duration": 14,
-              "invoker": "DOMWindow.onkeydown",
-              "invokerType": "event-listener",
-              "windowAttribution": "self",
-              "executionStart": 49590.89999997616,
-              "forcedStyleAndLayoutDuration": 0,
-              "pauseDuration": 0,
-              "sourceURL": "http://localhost:8000/demo/",
-              "sourceFunctionName": "",
-              "sourceCharPosition": 4656
-            }
-          ]
-        }
+              name: 'script',
+              entryType: 'script',
+              startTime: 49590.89999997616,
+              duration: 14,
+              invoker: 'DOMWindow.onkeydown',
+              invokerType: 'event-listener',
+              windowAttribution: 'self',
+              executionStart: 49590.89999997616,
+              forcedStyleAndLayoutDuration: 0,
+              pauseDuration: 0,
+              sourceURL: 'http://localhost:8000/demo/',
+              sourceFunctionName: '',
+              sourceCharPosition: 4656,
+            },
+          ],
+        },
       ],
-    }
+    };
 
     // @ts-ignore
     const result = formatLongAnimationFrameData(attribution);
 
     expect(result).toEqual({
-      "debug_loaf_entry_end_time": 49702,
-      "debug_loaf_entry_pre_layout_duration": 0,
-      "debug_loaf_entry_render_duration": 0,
-      "debug_loaf_entry_start_time": 49367,
-      "debug_loaf_entry_style_and_layout_duration": 0,
-      "debug_loaf_entry_total_forced_style_and_layout_duration": 0,
-      "debug_loaf_entry_work_duration": 334,
-      "debug_loaf_meta_length": 1,
-      "debug_loaf_pause_duration": 0,
-      "debug_loaf_script_compile_duration": 0,
-      "debug_loaf_script_exec_duration": 222,
-      "debug_loaf_script_forced_style_and_layout_duration": 0,
-      "debug_loaf_script_invoker": "TimerHandler:setTimeout",
-      "debug_loaf_script_source_char_position": 2007,
-      "debug_loaf_script_source_function_name": "periodicBlock",
-      "debug_loaf_script_source_url": "http://localhost:8000/demo/",
-      "debug_loaf_script_total_duration": 222,
-      "debug_loaf_script_type": "user-callback",
-      "debug_loaf_window_attribution": "self",
+      debug_loaf_entry_end_time: 49702,
+      debug_loaf_entry_pre_layout_duration: 0,
+      debug_loaf_entry_render_duration: 0,
+      debug_loaf_entry_start_time: 49367,
+      debug_loaf_entry_style_and_layout_duration: 0,
+      debug_loaf_entry_total_forced_style_and_layout_duration: 0,
+      debug_loaf_entry_work_duration: 334,
+      debug_loaf_meta_length: 1,
+      debug_loaf_pause_duration: 0,
+      debug_loaf_script_compile_duration: 0,
+      debug_loaf_script_exec_duration: 222,
+      debug_loaf_script_forced_style_and_layout_duration: 0,
+      debug_loaf_script_invoker: 'TimerHandler:setTimeout',
+      debug_loaf_script_source_char_position: 2007,
+      debug_loaf_script_source_function_name: 'periodicBlock',
+      debug_loaf_script_source_url: 'http://localhost:8000/demo/',
+      debug_loaf_script_total_duration: 222,
+      debug_loaf_script_type: 'user-callback',
+      debug_loaf_window_attribution: 'self',
     });
   });
 
   it('should handle attribution data with zero scripts', () => {
     const attribution = {
-      "interactionTarget": "#textarea",
-      "interactionTargetElement": {},
-      "interactionType": "keyboard",
-      "interactionTime": 49387.80000001192,
-      "nextPaintTime": 49715.80000001192,
-      "longAnimationFrameEntries": [
+      interactionTarget: '#textarea',
+      interactionTargetElement: {},
+      interactionType: 'keyboard',
+      interactionTime: 49387.80000001192,
+      nextPaintTime: 49715.80000001192,
+      longAnimationFrameEntries: [
         {
-          "name": "long-animation-frame",
-          "entryType": "long-animation-frame",
-          "startTime": 49367.80000001192,
-          "duration": 335,
-          "renderStart": 49702.19999998808,
-          "styleAndLayoutStart": 49702.69999998808,
-          "firstUIEventTimestamp": 49387.80000001192,
-          "blockingDuration": 235,
-          "scripts": []
-        }
+          name: 'long-animation-frame',
+          entryType: 'long-animation-frame',
+          startTime: 49367.80000001192,
+          duration: 335,
+          renderStart: 49702.19999998808,
+          styleAndLayoutStart: 49702.69999998808,
+          firstUIEventTimestamp: 49387.80000001192,
+          blockingDuration: 235,
+          scripts: [],
+        },
       ],
-      "inputDelay": 203.0999999642372,
-      "processingDuration": 111.30000001192093,
-      "presentationDelay": 13.600000023841858,
-      "loadState": "complete"
-    }
+      inputDelay: 203.0999999642372,
+      processingDuration: 111.30000001192093,
+      presentationDelay: 13.600000023841858,
+      loadState: 'complete',
+    };
 
     // @ts-ignore
     const result = formatLongAnimationFrameData(attribution);

From 83424afde619c52fd926f3892712b557111feb08 Mon Sep 17 00:00:00 2001
From: ethangardner <ethan.gardner@gsa.gov>
Date: Mon, 2 Dec 2024 11:05:40 -0500
Subject: [PATCH 16/22] remove prepare script. install was hanging

---
 package.json | 1 -
 1 file changed, 1 deletion(-)

diff --git a/package.json b/package.json
index 7835d81..e97fed6 100644
--- a/package.json
+++ b/package.json
@@ -18,7 +18,6 @@
     "prepublish": "tsup",
     "lint": "eslint && prettier \"**/*.ts\" --check --ignore-path .gitignore",
     "format": "eslint . --fix && prettier \"**/*.ts\" --write --ignore-path .gitignore",
-    "prepare": "husky",
     "test": "vitest",
     "test:watch": "vitest --watch",
     "test:coverage": "vitest --coverage"

From ef7ab26e9e924dfe4456bf7e02f4de534c5b66e9 Mon Sep 17 00:00:00 2001
From: ethangardner <ethan.gardner@gsa.gov>
Date: Tue, 3 Dec 2024 10:47:07 -0500
Subject: [PATCH 17/22] correct typing issues

---
 src/format-long-animation-frame-data.ts | 49 ++++++++++++++++++++-----
 1 file changed, 40 insertions(+), 9 deletions(-)

diff --git a/src/format-long-animation-frame-data.ts b/src/format-long-animation-frame-data.ts
index 331e7c7..1a4dbf9 100644
--- a/src/format-long-animation-frame-data.ts
+++ b/src/format-long-animation-frame-data.ts
@@ -1,7 +1,32 @@
 import type { INPAttribution } from 'web-vitals';
 
+interface PerformanceLoAfTiming extends PerformanceEntry {
+  renderStart: DOMHighResTimeStamp;
+  duration: DOMHighResTimeStamp;
+  styleAndLayoutStart: DOMHighResTimeStamp;
+  scripts: LoAfScriptEntry[];
+}
+
+interface LoAfScriptEntry {
+  duration: DOMHighResTimeStamp;
+  executionStart: DOMHighResTimeStamp;
+  startTime: DOMHighResTimeStamp;
+  forcedStyleAndLayoutDuration: DOMHighResTimeStamp;
+  invokerType: string;
+  invoker: string;
+  sourceURL: string;
+  sourceFunctionName: string;
+  sourceCharPosition: number;
+  pauseDuration: DOMHighResTimeStamp;
+  windowAttribution: string;
+}
+
+export interface DAPINPAttribution extends INPAttribution {
+  longAnimationFrameEntries: PerformanceLoAfTiming[];
+}
+
 /**
- * Properties of note
+ * Properties of note - from https://io.google/2024/explore/ba446093-0036-410b-ba1e-f9016ec21899/
  *
  * // Long-running event handler would be like the below:
  * const { invokerType } = script; // always event-listener for long event handlers
@@ -26,24 +51,30 @@ import type { INPAttribution } from 'web-vitals';
  * const { sourceCharPosition } = script; // 83
  * const { sourceFunctionName } = script; // update
  */
-export const formatLongAnimationFrameData = (attribution: INPAttribution) => {
+export const formatLongAnimationFrameData = (
+  attribution: DAPINPAttribution,
+) => {
   const loafEntries = attribution.longAnimationFrameEntries;
   if (typeof loafEntries === 'undefined' || loafEntries.length === 0) {
     return {};
   }
 
-  let loafAttribution = {
-    debug_loaf_script_total_duration: 0,
-  };
+  let totalDuration = 0;
+  let loafAttribution = {};
 
   // The last LoAF entry is usually the most relevant.
-  const loaf = attribution.longAnimationFrameEntries.at(-1);
+  const loaf: PerformanceLoAfTiming | undefined =
+    attribution.longAnimationFrameEntries.at(-1);
   if (typeof loaf !== 'undefined') {
     const loafEndTime = loaf.startTime + loaf.duration;
-    loaf?.scripts.forEach(script => {
-      if (script.duration <= loafAttribution.debug_loaf_script_total_duration) {
+    loaf.scripts.forEach(script => {
+      if (script.duration <= totalDuration) {
         return;
       }
+
+      // track the max total duration over the loop
+      totalDuration = script.duration;
+
       loafAttribution = {
         // Stats for the LoAF entry itself.
         debug_loaf_entry_start_time: loaf.startTime,
@@ -88,7 +119,7 @@ export const formatLongAnimationFrameData = (attribution: INPAttribution) => {
     });
   }
 
-  if (!loafAttribution.debug_loaf_script_total_duration) {
+  if (!totalDuration) {
     return {};
   }
 

From 4b4f4c7d464abd3d2f855c7471bb58dcf6dfaf99 Mon Sep 17 00:00:00 2001
From: ethangardner <ethan.gardner@gsa.gov>
Date: Tue, 3 Dec 2024 12:12:22 -0500
Subject: [PATCH 18/22] unflatten project directories and move tests.

---
 {test/unit => src/format}/format-event-data.test.ts    |  2 +-
 src/{ => format}/format-event-data.ts                  |  0
 .../format}/format-long-animation-frame-data.test.ts   | 10 +++++-----
 src/{ => format}/format-long-animation-frame-data.ts   |  0
 .../dap-performance-addon.test.ts => src/index.test.ts |  2 +-
 src/index.ts                                           |  3 +--
 src/{ => track}/send-to-analytics.ts                   | 10 ++++++++--
 vitest.config.ts                                       |  2 +-
 8 files changed, 17 insertions(+), 12 deletions(-)
 rename {test/unit => src/format}/format-event-data.test.ts (99%)
 rename src/{ => format}/format-event-data.ts (100%)
 rename {test/unit => src/format}/format-long-animation-frame-data.test.ts (97%)
 rename src/{ => format}/format-long-animation-frame-data.ts (100%)
 rename test/unit/dap-performance-addon.test.ts => src/index.test.ts (82%)
 rename src/{ => track}/send-to-analytics.ts (79%)

diff --git a/test/unit/format-event-data.test.ts b/src/format/format-event-data.test.ts
similarity index 99%
rename from test/unit/format-event-data.test.ts
rename to src/format/format-event-data.test.ts
index 6543f00..3d82466 100644
--- a/test/unit/format-event-data.test.ts
+++ b/src/format/format-event-data.test.ts
@@ -1,5 +1,5 @@
 import { it, describe, expect } from 'vitest';
-import { formatEventData } from '../../src/format-event-data.js';
+import { formatEventData } from './format-event-data.js';
 import type {
   CLSAttribution,
   FCPAttribution,
diff --git a/src/format-event-data.ts b/src/format/format-event-data.ts
similarity index 100%
rename from src/format-event-data.ts
rename to src/format/format-event-data.ts
diff --git a/test/unit/format-long-animation-frame-data.test.ts b/src/format/format-long-animation-frame-data.test.ts
similarity index 97%
rename from test/unit/format-long-animation-frame-data.test.ts
rename to src/format/format-long-animation-frame-data.test.ts
index e1db1de..4144e98 100644
--- a/test/unit/format-long-animation-frame-data.test.ts
+++ b/src/format/format-long-animation-frame-data.test.ts
@@ -1,5 +1,5 @@
 import { it, describe, expect } from 'vitest';
-import { formatLongAnimationFrameData } from '../../src/format-long-animation-frame-data.js';
+import { formatLongAnimationFrameData } from './format-long-animation-frame-data.js';
 
 describe('formatLongAnimationFrameData', () => {
   it('should format INP data correctly', () => {
@@ -35,7 +35,7 @@ describe('formatLongAnimationFrameData', () => {
       ],
     };
 
-    // @ts-ignore
+    // @ts-expect-error - the object is pared down for testing. It won't be compliant with all props for the type
     const result = formatLongAnimationFrameData(attribution);
 
     expect(result).toEqual({
@@ -109,7 +109,7 @@ describe('formatLongAnimationFrameData', () => {
       ],
     };
 
-    // @ts-ignore
+    // @ts-expect-error - the object is pared down for testing. It won't be compliant with all props for the type
     const result = formatLongAnimationFrameData(attribution);
 
     expect(result).toEqual({
@@ -161,14 +161,14 @@ describe('formatLongAnimationFrameData', () => {
       loadState: 'complete',
     };
 
-    // @ts-ignore
+    // @ts-expect-error - the object is pared down for testing. It won't be compliant with all props for the type
     const result = formatLongAnimationFrameData(attribution);
 
     expect(result).toEqual({});
   });
 
   it('should return default params if no attribution data is provided', () => {
-    // @ts-ignore
+    // @ts-expect-error - the object is pared down for testing. It won't be compliant with all props for the type
     const result = formatLongAnimationFrameData('unknown', null);
 
     expect(result).toEqual({});
diff --git a/src/format-long-animation-frame-data.ts b/src/format/format-long-animation-frame-data.ts
similarity index 100%
rename from src/format-long-animation-frame-data.ts
rename to src/format/format-long-animation-frame-data.ts
diff --git a/test/unit/dap-performance-addon.test.ts b/src/index.test.ts
similarity index 82%
rename from test/unit/dap-performance-addon.test.ts
rename to src/index.test.ts
index 3088c23..4578719 100644
--- a/test/unit/dap-performance-addon.test.ts
+++ b/src/index.test.ts
@@ -1,5 +1,5 @@
 import { it, describe, expect } from 'vitest';
-import { onCLS, onFCP, onINP, onLCP, onTTFB } from '../../src/web-vitals.js';
+import { onCLS, onFCP, onINP, onLCP, onTTFB } from './web-vitals.js';
 
 describe('DAP Performance Addon', () => {
   it('defines methods to track Core Web Vitals', () => {
diff --git a/src/index.ts b/src/index.ts
index b49d919..1499302 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -1,11 +1,10 @@
 import { onCLS, onINP, onFCP, onLCP, onTTFB } from './web-vitals.js';
-import { sendToAnalytics } from './send-to-analytics.js';
+import { sendToAnalytics } from './track/send-to-analytics.js';
 
 const initWebVitalsEvents = () => {
   onCLS(sendToAnalytics);
   onFCP(sendToAnalytics);
   onINP(sendToAnalytics);
-  onINP(console.log);
   onLCP(sendToAnalytics);
   onTTFB(sendToAnalytics);
 };
diff --git a/src/send-to-analytics.ts b/src/track/send-to-analytics.ts
similarity index 79%
rename from src/send-to-analytics.ts
rename to src/track/send-to-analytics.ts
index b8f3d5e..0836904 100644
--- a/src/send-to-analytics.ts
+++ b/src/track/send-to-analytics.ts
@@ -6,7 +6,10 @@ import type {
   TTFBMetricWithAttribution,
 } from 'web-vitals';
 
-import { formatEventData, type WebVitalsName } from './format-event-data.js';
+import {
+  formatEventData,
+  type WebVitalsName,
+} from '../format/format-event-data.js';
 
 export type WebVitalsWithAttribution =
   | CLSMetricWithAttribution
@@ -15,7 +18,10 @@ export type WebVitalsWithAttribution =
   | LCPMetricWithAttribution
   | TTFBMetricWithAttribution;
 
-declare const gas4: unknown;
+export type Gas4Function = (name: string, params: unknown) => void;
+
+// Assuming gas4 is globally available or imported from elsewhere
+declare const gas4: Gas4Function;
 
 export const sendToAnalytics = ({
   name,
diff --git a/vitest.config.ts b/vitest.config.ts
index aef6532..3364c1c 100644
--- a/vitest.config.ts
+++ b/vitest.config.ts
@@ -3,7 +3,7 @@ import { resolve } from 'path';
 
 export default defineConfig({
   test: {
-    include: ['test/unit/**/*.test.ts'],
+    include: ['src/**/*.test.ts'],
     globals: true,
     environment: 'jsdom',
   },

From 5c80df103e61b2d52929328d6bb6de2e75639d0a Mon Sep 17 00:00:00 2001
From: ethangardner <ethan.gardner@gsa.gov>
Date: Tue, 3 Dec 2024 12:16:33 -0500
Subject: [PATCH 19/22] add test for send to analytics

---
 src/track/send-to-analytics.test.ts | 133 ++++++++++++++++++++++++++++
 1 file changed, 133 insertions(+)
 create mode 100644 src/track/send-to-analytics.test.ts

diff --git a/src/track/send-to-analytics.test.ts b/src/track/send-to-analytics.test.ts
new file mode 100644
index 0000000..7cb62c7
--- /dev/null
+++ b/src/track/send-to-analytics.test.ts
@@ -0,0 +1,133 @@
+import {
+  sendToAnalytics,
+  type WebVitalsWithAttribution,
+} from './send-to-analytics.js';
+import { formatEventData } from '../format/format-event-data.js';
+import { describe, expect, it, vi, afterEach } from 'vitest';
+import type { TTFBMetricWithAttribution } from 'web-vitals';
+
+declare global {
+  function gas4(): void;
+}
+globalThis.gas4 = (): void => {
+  /*no-op*/
+};
+
+const createDefaultPayload = (): WebVitalsWithAttribution => {
+  return {
+    name: 'TTFB',
+    value: 2062,
+    rating: 'poor',
+    delta: 2062,
+    entries: [
+      {
+        name: 'http://localhost:8000/demo/',
+        entryType: 'navigation',
+        startTime: 0,
+        duration: 4181,
+        initiatorType: 'navigation',
+        nextHopProtocol: 'http/1.1',
+        workerStart: 0,
+        redirectStart: 0,
+        redirectEnd: 0,
+        fetchStart: -21,
+        domainLookupStart: -21,
+        domainLookupEnd: -21,
+        connectStart: -21,
+        connectEnd: 2015,
+        secureConnectionStart: 0,
+        requestStart: 2016,
+        responseStart: 2062,
+        responseEnd: 2062,
+        transferSize: 4277,
+        encodedBodySize: 3977,
+        decodedBodySize: 3977,
+        responseStatus: 200,
+        contentType: 'text/html',
+        serverTiming: [],
+        unloadEventStart: 0,
+        unloadEventEnd: 0,
+        domInteractive: 2126,
+        domContentLoadedEventStart: 2199,
+        domContentLoadedEventEnd: 2200,
+        domComplete: 4180,
+        loadEventStart: 4180,
+        loadEventEnd: 4181,
+        type: 'navigate',
+        redirectCount: 0,
+      },
+    ],
+    id: 'v4-1732826806920-8943990242578',
+    navigationType: 'navigate',
+    attribution: {
+      waitingDuration: 0,
+      cacheDuration: 0,
+      dnsDuration: 0,
+      connectionDuration: 2015,
+      requestDuration: 47,
+      navigationEntry: {
+        name: 'http://localhost:8000/demo/',
+        entryType: 'navigation',
+        startTime: 0,
+        duration: 4181,
+        initiatorType: 'navigation',
+        nextHopProtocol: 'http/1.1',
+        workerStart: 0,
+        redirectStart: 0,
+        redirectEnd: 0,
+        fetchStart: -21,
+        domainLookupStart: -21,
+        domainLookupEnd: -21,
+        connectStart: -21,
+        connectEnd: 2015,
+        secureConnectionStart: 0,
+        requestStart: 2016,
+        responseStart: 2062,
+        responseEnd: 2062,
+        transferSize: 4277,
+        encodedBodySize: 3977,
+        decodedBodySize: 3977,
+        responseStatus: 200,
+        contentType: 'text/html',
+        serverTiming: [],
+        unloadEventStart: 0,
+        unloadEventEnd: 0,
+        domInteractive: 2126,
+        domContentLoadedEventStart: 2199,
+        domContentLoadedEventEnd: 2200,
+        domComplete: 4180,
+        loadEventStart: 4180,
+        loadEventEnd: 4181,
+        type: 'navigate',
+        redirectCount: 0,
+      },
+    },
+  } satisfies TTFBMetricWithAttribution;
+};
+
+describe('sendToAnalytics', () => {
+  it('should correctly send event to analytics if gas4 function is defined', () => {
+    const gas4Spy = (globalThis.gas4 = vi.fn());
+    const payload = createDefaultPayload();
+    sendToAnalytics(payload);
+    expect(gas4Spy).toHaveBeenCalledWith(payload.name, {
+      value: payload.delta,
+      metric_id: payload.id,
+      metric_value: payload.value,
+      metric_delta: payload.delta,
+      metric_navigation_type: payload.navigationType,
+      ...formatEventData(payload.name, payload.attribution),
+    });
+  });
+
+  it('should not send event to analytics if gas4 function is not defined', () => {
+    delete globalThis.gas4;
+    const payload = createDefaultPayload();
+    sendToAnalytics(payload);
+    expect(globalThis.gas4).toBeUndefined();
+  });
+
+  afterEach(() => {
+    delete globalThis.gas4;
+  });
+});

From c3625753428efd86860dad12ce56b6b85edeeffc Mon Sep 17 00:00:00 2001
From: ethangardner <ethan.gardner@gsa.gov>
Date: Tue, 3 Dec 2024 15:57:40 -0500
Subject: [PATCH 20/22] write send to analytics tests with gas4 spy

---
 src/track/send-to-analytics.test.ts | 12 ++++++++----
 1 file changed, 8 insertions(+), 4 deletions(-)

diff --git a/src/track/send-to-analytics.test.ts b/src/track/send-to-analytics.test.ts
index 7cb62c7..7bf31ce 100644
--- a/src/track/send-to-analytics.test.ts
+++ b/src/track/send-to-analytics.test.ts
@@ -43,7 +43,6 @@ const createDefaultPayload = (): WebVitalsWithAttribution => {
         encodedBodySize: 3977,
         decodedBodySize: 3977,
         responseStatus: 200,
-        contentType: 'text/html',
         serverTiming: [],
         unloadEventStart: 0,
         unloadEventEnd: 0,
@@ -55,6 +54,9 @@ const createDefaultPayload = (): WebVitalsWithAttribution => {
         loadEventEnd: 4181,
         type: 'navigate',
         redirectCount: 0,
+        toJSON: (): void => {
+          /*no-op*/
+        },
       },
     ],
     id: 'v4-1732826806920-8943990242578',
@@ -88,7 +90,6 @@ const createDefaultPayload = (): WebVitalsWithAttribution => {
         encodedBodySize: 3977,
         decodedBodySize: 3977,
         responseStatus: 200,
-        contentType: 'text/html',
         serverTiming: [],
         unloadEventStart: 0,
         unloadEventEnd: 0,
@@ -100,6 +101,9 @@ const createDefaultPayload = (): WebVitalsWithAttribution => {
         loadEventEnd: 4181,
         type: 'navigate',
         redirectCount: 0,
+        toJSON: (): void => {
+          /*no-op*/
+        },
       },
     },
   } satisfies TTFBMetricWithAttribution;
@@ -121,13 +125,13 @@ describe('sendToAnalytics', () => {
   });
 
   it('should not send event to analytics if gas4 function is not defined', () => {
-    delete globalThis.gas4;
+    delete (globalThis as { gas4?: () => void }).gas4;
     const payload = createDefaultPayload();
     sendToAnalytics(payload);
     expect(globalThis.gas4).toBeUndefined();
   });
 
   afterEach(() => {
-    delete globalThis.gas4;
+    delete (globalThis as { gas4?: () => void }).gas4;
   });
 });

From f15b6125849d7064b7e659f6076d52f8731ce504 Mon Sep 17 00:00:00 2001
From: ethangardner <ethan.gardner@gsa.gov>
Date: Tue, 3 Dec 2024 16:21:40 -0500
Subject: [PATCH 21/22] avoid aftereach in test.

---
 src/track/send-to-analytics.test.ts | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/src/track/send-to-analytics.test.ts b/src/track/send-to-analytics.test.ts
index 7bf31ce..a1e3a74 100644
--- a/src/track/send-to-analytics.test.ts
+++ b/src/track/send-to-analytics.test.ts
@@ -3,7 +3,7 @@ import {
   type WebVitalsWithAttribution,
 } from './send-to-analytics.js';
 import { formatEventData } from '../format/format-event-data.js';
-import { describe, expect, it, vi, afterEach } from 'vitest';
+import { describe, expect, it, vi } from 'vitest';
 import type { TTFBMetricWithAttribution } from 'web-vitals';
 
 declare global {
@@ -130,8 +130,4 @@ describe('sendToAnalytics', () => {
     sendToAnalytics(payload);
     expect(globalThis.gas4).toBeUndefined();
   });
-
-  afterEach(() => {
-    delete (globalThis as { gas4?: () => void }).gas4;
-  });
 });

From 147e4258fd07ec177520754d9406bd4b3adbbc40 Mon Sep 17 00:00:00 2001
From: ethangardner <ethan.gardner@gsa.gov>
Date: Tue, 3 Dec 2024 16:52:08 -0500
Subject: [PATCH 22/22] add loaf attribution data

---
 src/format/format-event-data.ts                | 6 +++++-
 src/format/format-long-animation-frame-data.ts | 2 +-
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/format/format-event-data.ts b/src/format/format-event-data.ts
index 22f6f9f..f8f7c47 100644
--- a/src/format/format-event-data.ts
+++ b/src/format/format-event-data.ts
@@ -5,6 +5,10 @@ import type {
   LCPAttribution,
   TTFBAttribution,
 } from 'web-vitals';
+import {
+  type DAPINPAttribution,
+  formatLongAnimationFrameData,
+} from './format-long-animation-frame-data.js';
 
 export type WebVitalsName = 'CLS' | 'FCP' | 'INP' | 'LCP' | 'TTFB';
 export type WebVitalsAttribution =
@@ -54,7 +58,7 @@ export const formatEventData = (
         debug_presentation_delay: Math.round(
           (attribution as INPAttribution).presentationDelay,
         ),
-        // TODO: add LoAf attribution here
+        ...formatLongAnimationFrameData(attribution as DAPINPAttribution),
       };
     }
     if (name === 'LCP') {
diff --git a/src/format/format-long-animation-frame-data.ts b/src/format/format-long-animation-frame-data.ts
index 1a4dbf9..9ac9215 100644
--- a/src/format/format-long-animation-frame-data.ts
+++ b/src/format/format-long-animation-frame-data.ts
@@ -98,7 +98,7 @@ export const formatLongAnimationFrameData = (
           : 0,
 
         // Stats for the longest script in the LoAF entry.
-        debug_loaf_script_total_duration: script.duration,
+        debug_loaf_script_total_duration: totalDuration,
         debug_loaf_script_compile_duration:
           script.executionStart - script.startTime,
         debug_loaf_script_exec_duration:
