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

@@ -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(() => {

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)

packages/next/vitals.d.ts

@@ -1 +1 @@
-export { useExperimentalWebVitalsReport } from './dist/vitals/index'
+export { useWebVitalsReport as unstable_useWebVitalsReport } from './dist/client/vitals'

packages/next/vitals.js

@@ -1,4 +1,4 @@
 module.exports = {
-  useExperimentalWebVitalsReport: require('./dist/client/vitals')
-    .useExperimentalWebVitalsReport,
+  unstable_useWebVitalsReport: require('./dist/client/vitals')
+    .useWebVitalsReport,
 }

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>

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 () => {