From 0bd9ac71e3ab021927a6cc6b73b8d5e6fbb7229a Mon Sep 17 00:00:00 2001 From: Jiachi Liu Date: Thu, 9 Dec 2021 23:24:01 +0100 Subject: [PATCH 1/5] Rename vital hook --- packages/next/client/vitals.ts | 4 +--- packages/next/taskfile.js | 8 -------- 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(+), 20 deletions(-) diff --git a/packages/next/client/vitals.ts b/packages/next/client/vitals.ts index 82152545d48f78d..cf86340383a2143 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 unstable_useWebVitalsReport(callback: ReportWebVitalsCallback) { const metricIndexRef = useRef(0) useEffect(() => { diff --git a/packages/next/taskfile.js b/packages/next/taskfile.js index 868082d49ac261e..eaac4d0bb51b282 100644 --- a/packages/next/taskfile.js +++ b/packages/next/taskfile.js @@ -1099,14 +1099,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 diff --git a/packages/next/vitals.d.ts b/packages/next/vitals.d.ts index aecd51d1c01ae1c..8629b2093f3f9db 100644 --- a/packages/next/vitals.d.ts +++ b/packages/next/vitals.d.ts @@ -1 +1 @@ -export { useExperimentalWebVitalsReport } from './dist/vitals/index' +export { unstable_useWebVitalsReport } from './dist/vitals/index' diff --git a/packages/next/vitals.js b/packages/next/vitals.js index f560bffd5e0a73d..2c2245f1974d919 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') + .unstable_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 (
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 () => { From ccae88f45d24d4bc9f376c2017b7a01fc70a53e4 Mon Sep 17 00:00:00 2001 From: JJ Kasper Date: Thu, 9 Dec 2021 20:08:34 -0600 Subject: [PATCH 2/5] update taskfile --- packages/next/taskfile.js | 2 -- 1 file changed, 2 deletions(-) diff --git a/packages/next/taskfile.js b/packages/next/taskfile.js index eaac4d0bb51b282..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', @@ -1173,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) From 9321fb9323f7cfbdd8438b9cd51a9e0c5ef2067f Mon Sep 17 00:00:00 2001 From: Jiachi Liu Date: Fri, 10 Dec 2021 10:13:55 +0100 Subject: [PATCH 3/5] disable hook rule for unstable prefix --- packages/next/client/vitals.ts | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/next/client/vitals.ts b/packages/next/client/vitals.ts index cf86340383a2143..a51466c69f04b78 100644 --- a/packages/next/client/vitals.ts +++ b/packages/next/client/vitals.ts @@ -10,9 +10,11 @@ export function trackWebVitalMetric(metric: NextWebVitalsMetric) { webVitalsCallbacks.forEach((callback) => callback(metric)) } +// eslint-disable-next-line react-hooks/rules-of-hooks export function unstable_useWebVitalsReport(callback: ReportWebVitalsCallback) { const metricIndexRef = useRef(0) + // eslint-disable-next-line react-hooks/rules-of-hooks useEffect(() => { // Flush calculated metrics const reportMetric = (metric: NextWebVitalsMetric) => { From c5ba03a03ecffd8711bf13fe58dd85acd4714c6c Mon Sep 17 00:00:00 2001 From: Jiachi Liu Date: Fri, 10 Dec 2021 10:36:55 +0100 Subject: [PATCH 4/5] rename at exports --- packages/next/client/vitals.ts | 4 +--- packages/next/vitals.js | 2 +- 2 files changed, 2 insertions(+), 4 deletions(-) diff --git a/packages/next/client/vitals.ts b/packages/next/client/vitals.ts index a51466c69f04b78..0f26bea7960184b 100644 --- a/packages/next/client/vitals.ts +++ b/packages/next/client/vitals.ts @@ -10,11 +10,9 @@ export function trackWebVitalMetric(metric: NextWebVitalsMetric) { webVitalsCallbacks.forEach((callback) => callback(metric)) } -// eslint-disable-next-line react-hooks/rules-of-hooks -export function unstable_useWebVitalsReport(callback: ReportWebVitalsCallback) { +export function useWebVitalsReport(callback: ReportWebVitalsCallback) { const metricIndexRef = useRef(0) - // eslint-disable-next-line react-hooks/rules-of-hooks useEffect(() => { // Flush calculated metrics const reportMetric = (metric: NextWebVitalsMetric) => { diff --git a/packages/next/vitals.js b/packages/next/vitals.js index 2c2245f1974d919..0cf2911ed439f92 100644 --- a/packages/next/vitals.js +++ b/packages/next/vitals.js @@ -1,4 +1,4 @@ module.exports = { unstable_useWebVitalsReport: require('./dist/client/vitals') - .unstable_useWebVitalsReport, + .useWebVitalsReport, } From 73da533b982c2f375bcd69e0012a35209a582740 Mon Sep 17 00:00:00 2001 From: Jiachi Liu Date: Fri, 10 Dec 2021 11:58:17 +0100 Subject: [PATCH 5/5] fix typing --- packages/next/vitals.d.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/next/vitals.d.ts b/packages/next/vitals.d.ts index 8629b2093f3f9db..ab967d34ab52efe 100644 --- a/packages/next/vitals.d.ts +++ b/packages/next/vitals.d.ts @@ -1 +1 @@ -export { unstable_useWebVitalsReport } from './dist/vitals/index' +export { useWebVitalsReport as unstable_useWebVitalsReport } from './dist/client/vitals'