From 3d611a8da523f2b28f0409a0099a8efe050bafab Mon Sep 17 00:00:00 2001
From: keiya01 <keiya.s.0210@gmail.com>
Date: Fri, 3 Jun 2022 12:40:55 +0900
Subject: [PATCH 1/6] feat: use web-vitals@next

---
 package.json | 12 ++++++------
 yarn.lock    |  8 ++++----
 2 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/package.json b/package.json
index e80314d..285c397 100644
--- a/package.json
+++ b/package.json
@@ -26,20 +26,20 @@
   },
   "license": "MIT",
   "dependencies": {
-    "web-vitals": "^2.1.4"
+    "web-vitals": "^3.0.0-beta.2"
   },
   "devDependencies": {
     "@types/jest": "^27.0.0",
-    "bundlesize": "^0.18.0",
-    "jest": "^27.0.0",
-    "ts-jest": "^27.0.0",
     "@typescript-eslint/eslint-plugin": "^5.0.0",
     "@typescript-eslint/parser": "^5.0.0",
+    "bundlesize": "^0.18.0",
     "eslint": "^7.5.0",
     "eslint-config-prettier": "^7.0.0",
     "eslint-plugin-prettier": "^3.1.4",
-    "typescript": "^4.0.0",
+    "jest": "^27.0.0",
     "npm-run-all": "^4.1.5",
-    "prettier": "^2.0.5"
+    "prettier": "^2.0.5",
+    "ts-jest": "^27.0.0",
+    "typescript": "^4.0.0"
   }
 }
diff --git a/yarn.lock b/yarn.lock
index fd26e66..23bcbd5 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4036,10 +4036,10 @@ walker@^1.0.7:
   dependencies:
     makeerror "1.0.12"
 
-web-vitals@^2.1.4:
-  version "2.1.4"
-  resolved "https://registry.yarnpkg.com/web-vitals/-/web-vitals-2.1.4.tgz#76563175a475a5e835264d373704f9dde718290c"
-  integrity sha512-sVWcwhU5mX6crfI5Vd2dC4qchyTqxV8URinzt25XqVh+bHEPGH4C3NPrNionCP7Obx59wrYEbNlw4Z8sjALzZg==
+web-vitals@^3.0.0-beta.2:
+  version "3.0.0-beta.2"
+  resolved "https://registry.yarnpkg.com/web-vitals/-/web-vitals-3.0.0-beta.2.tgz#08c605295f36484256ee3acb5735b1f4dc9cd565"
+  integrity sha512-W9OALsWK4RkA5GWvLhsfszy+Q29WJBB27Dnucc3eYP6/0kz1XsfMgm+4au9X/KjXMIo92ZRU1fWBaSdNsaVjJg==
 
 webidl-conversions@^5.0.0:
   version "5.0.0"

From 321eb4c763f07b6371389574cc282931cc8a5376 Mon Sep 17 00:00:00 2001
From: keiya01 <keiya.s.0210@gmail.com>
Date: Fri, 3 Jun 2022 12:41:19 +0900
Subject: [PATCH 2/6] feat: add reportINP method

---
 src/types.ts     |  1 +
 src/webVitals.ts | 35 ++++++++++++++++++++++++++++++++++-
 2 files changed, 35 insertions(+), 1 deletion(-)

diff --git a/src/types.ts b/src/types.ts
index 0bb465e..063b60b 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -3,6 +3,7 @@ export const SupportedMetrics = {
   CLS: "CLS",
   FID: "FID",
   TTFB: "TTFB",
+  INP: "INP",
 } as const;
 
 export type ReportParams = {
diff --git a/src/webVitals.ts b/src/webVitals.ts
index 7ba8887..f1b5462 100644
--- a/src/webVitals.ts
+++ b/src/webVitals.ts
@@ -4,8 +4,10 @@ import {
   getFID,
   getLCP,
   getTTFB,
+  onINP,
   ReportHandler as WebVitalsReportHandler,
   Metric as WebVitalsMetrics,
+  ReportOpts,
 } from "web-vitals";
 import { getElementName, getNetworkType } from "./base";
 import { ReportParams, SupportedMetrics } from "./types";
@@ -43,12 +45,18 @@ type TimeToFirstByte = {
   name: typeof SupportedMetrics.TTFB;
 };
 
+type InteractionToNextPaint = {
+  name: typeof SupportedMetrics.INP;
+  entries: FirstInputPolyfillEntry[];
+};
+
 type Metrics = BaseMetrics &
   (
     | LargestContentfulPaint
     | FirstInputDelay
     | CumulativeLayoutShift
     | TimeToFirstByte
+    | InteractionToNextPaint
   );
 
 /**
@@ -97,7 +105,10 @@ function getLargestLayoutShiftSource(
 
 export type ReportCallback = (params: ReportParams) => void;
 
-type Report = (report: ReportCallback) => void;
+type Report<Option = unknown> = (
+  report: ReportCallback,
+  option?: Option
+) => void;
 
 type ReportHandler = (metrics: Metrics) => void;
 
@@ -191,3 +202,25 @@ export const reportTTFB: Report = (report) => {
   };
   getTTFB(handleReportHandler(reportHandler));
 };
+
+export const reportINP: Report<ReportOpts> = (report, option) => {
+  const reportHandler: ReportHandler = (metrics) => {
+    if (metrics.name !== SupportedMetrics.INP) {
+      return;
+    }
+
+    const { name, entries, delta } = metrics;
+
+    entries.map((entry) => {
+      const elementName = getElementName(entry.target);
+      report({
+        metricsName: name,
+        metricsValue: delta,
+        selectorName: elementName,
+        networkType: getNetworkType(),
+      });
+    });
+  };
+
+  onINP(handleReportHandler(reportHandler), option);
+};

From 623b90ec6decfb714905cc326dc7882b1408504f Mon Sep 17 00:00:00 2001
From: keiya01 <keiya.s.0210@gmail.com>
Date: Fri, 3 Jun 2022 13:20:36 +0900
Subject: [PATCH 3/6] docs: fix docs

---
 README.md | 13 +++++++++++--
 1 file changed, 11 insertions(+), 2 deletions(-)

diff --git a/README.md b/README.md
index 6a4046a..1f25677 100644
--- a/README.md
+++ b/README.md
@@ -37,11 +37,19 @@ const reportPerformance = () => {
   // Logging is not critical for most application,
   // so you can avoid loading this library in initial bundle by using dynamic import.
   import("@openameba/cwv-logger").then(
-    ({ reportCLS, reportFID, reportLCP, reportTTFB }) => {
+    ({ reportCLS, reportFID, reportLCP, reportTTFB, reportINP }) => {
       reportCLS(handleReport);
       reportFID(handleReport);
       reportLCP(handleReport);
       reportTTFB(handleReport);
+      /**
+       * reportINP has option in second argument.
+       * @see https://github.com/GoogleChrome/web-vitals/tree/next
+       */
+      reportINP(handleReport, {
+        reportAllChanges: false, // or true
+        durationThreshold: 40, // or number
+      });
     }
   );
 };
@@ -53,12 +61,13 @@ const reportPerformance = () => {
 - [Largest Contentful Paint(LCP)](https://web.dev/lcp/)
 - [First Input Delay(FID)](https://web.dev/fid/)
 - [Time to First Byte(TTFB)](https://web.dev/ttfb/)
+- [Interaction to Next Paint(INP)](https://web.dev/inp/)
 
 ## Report params
 
 ```ts
 type ReportParams = {
-  metricsName: "CLS" | "LCP" | "FID" | "TTFB";
+  metricsName: "CLS" | "LCP" | "FID" | "TTFB" | "INP";
   metricsValue: number;
   // Get value from https://developer.mozilla.org/en-US/docs/Web/API/NetworkInformation/effectiveType.
   networkType: string;

From 712a7db0d58215cfeff7a179081eb734a91244fc Mon Sep 17 00:00:00 2001
From: keiya01 <keiya.s.0210@gmail.com>
Date: Thu, 9 Jun 2022 15:11:53 +0900
Subject: [PATCH 4/6] 0.1.1-beta.0

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

diff --git a/package.json b/package.json
index 285c397..5b6c43d 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@openameba/cwv-logger",
-  "version": "0.1.0",
+  "version": "0.1.1-beta.0",
   "main": "./index.js",
   "module": "./index.mjs",
   "types": "./index.d.ts",

From c2f7827ae4c786ef708335c51adb94e546c22336 Mon Sep 17 00:00:00 2001
From: keiya01 <keiya.s.0210@gmail.com>
Date: Thu, 9 Jun 2022 16:09:44 +0900
Subject: [PATCH 5/6] 0.1.1-beta.1

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

diff --git a/package.json b/package.json
index 5b6c43d..c8cfd67 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@openameba/cwv-logger",
-  "version": "0.1.1-beta.0",
+  "version": "0.1.1-beta.1",
   "main": "./index.js",
   "module": "./index.mjs",
   "types": "./index.d.ts",

From f1175e0544fa0555a42f0c225080c02373ebd21c Mon Sep 17 00:00:00 2001
From: keiya01 <keiya.s.0210@gmail.com>
Date: Fri, 10 Jun 2022 10:35:51 +0900
Subject: [PATCH 6/6] refactor: use on prefix methods

---
 src/webVitals.ts | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/src/webVitals.ts b/src/webVitals.ts
index f1b5462..68b9474 100644
--- a/src/webVitals.ts
+++ b/src/webVitals.ts
@@ -1,9 +1,9 @@
 import {
   FirstInputPolyfillEntry,
-  getCLS,
-  getFID,
-  getLCP,
-  getTTFB,
+  onCLS,
+  onFID,
+  onLCP,
+  onTTFB,
   onINP,
   ReportHandler as WebVitalsReportHandler,
   Metric as WebVitalsMetrics,
@@ -142,7 +142,7 @@ export const reportCLS: Report = (report) => {
       rectDiff,
     });
   };
-  getCLS(handleReportHandler(reportHandler));
+  onCLS(handleReportHandler(reportHandler));
 };
 
 export const reportLCP: Report = (report) => {
@@ -163,7 +163,7 @@ export const reportLCP: Report = (report) => {
       });
     });
   };
-  getLCP(handleReportHandler(reportHandler));
+  onLCP(handleReportHandler(reportHandler));
 };
 
 export const reportFID: Report = (report) => {
@@ -185,7 +185,7 @@ export const reportFID: Report = (report) => {
     });
   };
 
-  getFID(handleReportHandler(reportHandler));
+  onFID(handleReportHandler(reportHandler));
 };
 
 export const reportTTFB: Report = (report) => {
@@ -200,7 +200,7 @@ export const reportTTFB: Report = (report) => {
       networkType: getNetworkType(),
     });
   };
-  getTTFB(handleReportHandler(reportHandler));
+  onTTFB(handleReportHandler(reportHandler));
 };
 
 export const reportINP: Report<ReportOpts> = (report, option) => {