Merge pull request #7 from openameba/feat/use-inp

Feat/use inp

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;

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openameba/cwv-logger",
-  "version": "0.1.0",
+  "version": "0.1.1-beta.1",
   "main": "./index.js",
   "module": "./index.mjs",
   "types": "./index.d.ts",
@@ -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"
   }
 }

src/types.ts

@@ -3,6 +3,7 @@ export const SupportedMetrics = {
   CLS: "CLS",
   FID: "FID",
   TTFB: "TTFB",
+  INP: "INP",
 } as const;
 
 export type ReportParams = {

src/webVitals.ts

@@ -1,11 +1,13 @@
 import {
   FirstInputPolyfillEntry,
-  getCLS,
-  getFID,
-  getLCP,
-  getTTFB,
+  onCLS,
+  onFID,
+  onLCP,
+  onTTFB,
+  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;
 
@@ -131,7 +142,7 @@ export const reportCLS: Report = (report) => {
       rectDiff,
     });
   };
-  getCLS(handleReportHandler(reportHandler));
+  onCLS(handleReportHandler(reportHandler));
 };
 
 export const reportLCP: Report = (report) => {
@@ -152,7 +163,7 @@ export const reportLCP: Report = (report) => {
       });
     });
   };
-  getLCP(handleReportHandler(reportHandler));
+  onLCP(handleReportHandler(reportHandler));
 };
 
 export const reportFID: Report = (report) => {
@@ -174,7 +185,7 @@ export const reportFID: Report = (report) => {
     });
   };
 
-  getFID(handleReportHandler(reportHandler));
+  onFID(handleReportHandler(reportHandler));
 };
 
 export const reportTTFB: Report = (report) => {
@@ -189,5 +200,27 @@ export const reportTTFB: Report = (report) => {
       networkType: getNetworkType(),
     });
   };
-  getTTFB(handleReportHandler(reportHandler));
+  onTTFB(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);
 };

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"