From 59a44323189953e9311e657720bcbbda2a1f52f2 Mon Sep 17 00:00:00 2001
From: Jiachi Liu <inbox@huozhi.im>
Date: Sun, 12 Dec 2021 21:14:12 +0100
Subject: [PATCH] Rename experimental vital hook (#32343)

* Rename vital hook

* update taskfile

* disable hook rule for unstable prefix

* rename at exports

* fix typing

Co-authored-by: JJ Kasper <jj@jjsweb.site>
Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
---
 packages/next/client/vitals.ts                      |  4 +---
 packages/next/taskfile.js                           | 10 ----------
 packages/next/vitals.d.ts                           |  2 +-
 packages/next/vitals.js                             |  4 ++--
 test/integration/relay-analytics/pages/index.js     |  8 ++++----
 test/integration/relay-analytics/test/index.test.js |  4 ++--
 6 files changed, 10 insertions(+), 22 deletions(-)

diff --git a/packages/next/client/vitals.ts b/packages/next/client/vitals.ts
index 82152545d48f78d..0f26bea7960184b 100644
--- a/packages/next/client/vitals.ts
+++ b/packages/next/client/vitals.ts
@@ -10,9 +10,7 @@ export function trackWebVitalMetric(metric: NextWebVitalsMetric) {
   webVitalsCallbacks.forEach((callback) => callback(metric))
 }
 
-export function useExperimentalWebVitalsReport(
-  callback: ReportWebVitalsCallback
-) {
+export function useWebVitalsReport(callback: ReportWebVitalsCallback) {
   const metricIndexRef = useRef(0)
 
   useEffect(() => {
diff --git a/packages/next/taskfile.js b/packages/next/taskfile.js
index 868082d49ac261e..570a7c01babf3fa 100644
--- a/packages/next/taskfile.js
+++ b/packages/next/taskfile.js
@@ -1036,7 +1036,6 @@ export async function compile(task, opts) {
       'pages',
       'lib',
       'client',
-      'vitals',
       'telemetry',
       'trace',
       'shared',
@@ -1099,14 +1098,6 @@ export async function client(task, opts) {
   notify('Compiled client files')
 }
 
-export async function vitals(task, opts) {
-  await task
-    .source(opts.src || 'vitals/**/*.+(js|ts|tsx)')
-    .swc('vitals', { dev: opts.dev })
-    .target('dist/vitals')
-  notify('Compiled vitals files')
-}
-
 // export is a reserved keyword for functions
 export async function nextbuildstatic(task, opts) {
   await task
@@ -1181,7 +1172,6 @@ export default async function (task) {
   await task.watch('build/**/*.+(js|ts|tsx)', 'nextbuild', opts)
   await task.watch('export/**/*.+(js|ts|tsx)', 'nextbuildstatic', opts)
   await task.watch('client/**/*.+(js|ts|tsx)', 'client', opts)
-  await task.watch('vitals/**/*.+(js|ts|tsx)', 'vitals', opts)
   await task.watch('lib/**/*.+(js|ts|tsx)', 'lib', opts)
   await task.watch('cli/**/*.+(js|ts|tsx)', 'cli', opts)
   await task.watch('telemetry/**/*.+(js|ts|tsx)', 'telemetry', opts)
diff --git a/packages/next/vitals.d.ts b/packages/next/vitals.d.ts
index aecd51d1c01ae1c..ab967d34ab52efe 100644
--- a/packages/next/vitals.d.ts
+++ b/packages/next/vitals.d.ts
@@ -1 +1 @@
-export { useExperimentalWebVitalsReport } from './dist/vitals/index'
+export { useWebVitalsReport as unstable_useWebVitalsReport } from './dist/client/vitals'
diff --git a/packages/next/vitals.js b/packages/next/vitals.js
index f560bffd5e0a73d..0cf2911ed439f92 100644
--- a/packages/next/vitals.js
+++ b/packages/next/vitals.js
@@ -1,4 +1,4 @@
 module.exports = {
-  useExperimentalWebVitalsReport: require('./dist/client/vitals')
-    .useExperimentalWebVitalsReport,
+  unstable_useWebVitalsReport: require('./dist/client/vitals')
+    .useWebVitalsReport,
 }
diff --git a/test/integration/relay-analytics/pages/index.js b/test/integration/relay-analytics/pages/index.js
index a3842984dc8198c..8f3e7c75b3d63b8 100644
--- a/test/integration/relay-analytics/pages/index.js
+++ b/test/integration/relay-analytics/pages/index.js
@@ -1,5 +1,5 @@
 /* global localStorage */
-import { useExperimentalWebVitalsReport } from 'next/vitals'
+import { unstable_useWebVitalsReport } from 'next/vitals'
 
 if (typeof navigator !== 'undefined') {
   window.__BEACONS = window.__BEACONS || []
@@ -21,8 +21,8 @@ if (typeof navigator !== 'undefined') {
 
 export default () => {
   // Below comment will be used for replacing exported report method with hook based one.
-  ///* useExperimentalWebVitalsReport
-  useExperimentalWebVitalsReport((data) => {
+  ///* unstable_useWebVitalsReport
+  unstable_useWebVitalsReport((data) => {
     const name = data.name || data.entryType
     localStorage.setItem(
       name,
@@ -31,7 +31,7 @@ export default () => {
     const countMap = window.__BEACONS_COUNT
     countMap.set(name, (countMap.get(name) || 0) + 1)
   })
-  // useExperimentalWebVitalsReport */
+  // unstable_useWebVitalsReport */
 
   return (
     <div>
diff --git a/test/integration/relay-analytics/test/index.test.js b/test/integration/relay-analytics/test/index.test.js
index a2e388d893c64b7..88e3c7a0c7d4862 100644
--- a/test/integration/relay-analytics/test/index.test.js
+++ b/test/integration/relay-analytics/test/index.test.js
@@ -35,8 +35,8 @@ async function killServer() {
 describe('Analytics relayer with exported method', () => {
   beforeAll(async () => {
     // Keep app exported reporting and comment the hook one
-    indexPage.replace('///* useExperimentalWebVitalsReport', '/*')
-    indexPage.replace('// useExperimentalWebVitalsReport */', '*/')
+    indexPage.replace('///* unstable_useWebVitalsReport', '/*')
+    indexPage.replace('// unstable_useWebVitalsReport */', '*/')
     await buildApp()
   })
   afterAll(async () => {