From 472227038f72dea4b8ca5c4f905e3ced8131cf82 Mon Sep 17 00:00:00 2001 From: Tim Neutkens Date: Tue, 21 Jan 2020 16:34:53 +0100 Subject: [PATCH 1/8] Disable core-js on Next.js core files as it's not transforming anything important --- packages/next/taskfile.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/next/taskfile.js b/packages/next/taskfile.js index 5911f1235cc7..4420d53c47ee 100644 --- a/packages/next/taskfile.js +++ b/packages/next/taskfile.js @@ -25,7 +25,7 @@ const babelClientOpts = { [ '@babel/plugin-transform-runtime', { - corejs: 2, + corejs: false, helpers: true, regenerator: false, useESModules: false, From bc4193d9294fa781c90456473ae81a25d22ce3c4 Mon Sep 17 00:00:00 2001 From: Tim Neutkens Date: Tue, 21 Jan 2020 18:51:51 +0100 Subject: [PATCH 2/8] Move babel options to taskr plugin --- packages/next/taskfile-babel.js | 72 +++++++++++++++++++++++++-- packages/next/taskfile.js | 88 +++++---------------------------- 2 files changed, 79 insertions(+), 81 deletions(-) diff --git a/packages/next/taskfile-babel.js b/packages/next/taskfile-babel.js index b956dcd7cee9..f1270e5b463d 100644 --- a/packages/next/taskfile-babel.js +++ b/packages/next/taskfile-babel.js @@ -4,9 +4,76 @@ const extname = require('path').extname const transform = require('@babel/core').transform +const babelClientOpts = { + presets: [ + '@babel/preset-typescript', + [ + '@babel/preset-env', + { + modules: 'commonjs', + targets: { + esmodules: true, + }, + loose: true, + exclude: ['transform-typeof-symbol'], + }, + ], + '@babel/preset-react', + ], + plugins: [ + // workaround for @taskr/esnext bug replacing `-import` with `-require(` + // eslint-disable-next-line no-useless-concat + '@babel/plugin-syntax-dynamic-impor' + 't', + ['@babel/plugin-proposal-class-properties', { loose: true }], + [ + '@babel/plugin-transform-runtime', + { + corejs: 2, + helpers: true, + regenerator: false, + useESModules: false, + }, + ], + ], +} + +const babelServerOpts = { + presets: [ + '@babel/preset-typescript', + '@babel/preset-react', + [ + '@babel/preset-env', + { + modules: 'commonjs', + targets: { + node: '8.3', + }, + loose: true, + exclude: ['transform-typeof-symbol'], + }, + ], + ], + plugins: [ + '@babel/plugin-proposal-optional-chaining', + '@babel/plugin-proposal-nullish-coalescing-operator', + 'babel-plugin-dynamic-import-node', + ['@babel/plugin-proposal-class-properties', { loose: true }], + ], +} + module.exports = function(task) { // eslint-disable-next-line require-yield - task.plugin('babel', {}, function*(file, babelOpts, { stripExtension } = {}) { + task.plugin('babel', {}, function*( + file, + serverOrClient, + { stripExtension } = {} + ) { + // Don't compile .d.ts + if (file.base.endsWith('.d.ts')) return + + const babelOpts = + serverOrClient === 'client' ? babelClientOpts : babelServerOpts + const options = { ...babelOpts, compact: true, @@ -17,9 +84,6 @@ module.exports = function(task) { const output = transform(file.data, options) const ext = extname(file.base) - // Include declaration files as they are - if (file.base.endsWith('.d.ts')) return - // Replace `.ts|.tsx` with `.js` in files with an extension if (ext) { const extRegex = new RegExp(ext.replace('.', '\\.') + '$', 'i') diff --git a/packages/next/taskfile.js b/packages/next/taskfile.js index 4420d53c47ee..dddbf07cdd2b 100644 --- a/packages/next/taskfile.js +++ b/packages/next/taskfile.js @@ -1,62 +1,6 @@ const notifier = require('node-notifier') const relative = require('path').relative -const babelClientOpts = { - presets: [ - '@babel/preset-typescript', - [ - '@babel/preset-env', - { - modules: 'commonjs', - targets: { - esmodules: true, - }, - loose: true, - exclude: ['transform-typeof-symbol'], - }, - ], - '@babel/preset-react', - ], - plugins: [ - // workaround for @taskr/esnext bug replacing `-import` with `-require(` - // eslint-disable-next-line no-useless-concat - '@babel/plugin-syntax-dynamic-impor' + 't', - ['@babel/plugin-proposal-class-properties', { loose: true }], - [ - '@babel/plugin-transform-runtime', - { - corejs: false, - helpers: true, - regenerator: false, - useESModules: false, - }, - ], - ], -} - -const babelServerOpts = { - presets: [ - '@babel/preset-typescript', - [ - '@babel/preset-env', - { - modules: 'commonjs', - targets: { - node: '8.3', - }, - loose: true, - exclude: ['transform-typeof-symbol'], - }, - ], - ], - plugins: [ - '@babel/plugin-proposal-optional-chaining', - '@babel/plugin-proposal-nullish-coalescing-operator', - 'babel-plugin-dynamic-import-node', - ['@babel/plugin-proposal-class-properties', { loose: true }], - ], -} - // eslint-disable-next-line camelcase export async function ncc_arg(task, opts) { await task @@ -126,7 +70,7 @@ export async function compile(task) { export async function bin(task, opts) { await task .source(opts.src || 'bin/*') - .babel(babelServerOpts, { stripExtension: true }) + .babel('server', { stripExtension: true }) .target('dist/bin', { mode: '0755' }) notify('Compiled binaries') } @@ -134,7 +78,7 @@ export async function bin(task, opts) { export async function cli(task, opts) { await task .source(opts.src || 'cli/**/*.+(js|ts|tsx)') - .babel(babelServerOpts) + .babel('server') .target('dist/cli') notify('Compiled cli files') } @@ -142,20 +86,15 @@ export async function cli(task, opts) { export async function lib(task, opts) { await task .source(opts.src || 'lib/**/*.+(js|ts|tsx)') - .babel(babelServerOpts) + .babel('server') .target('dist/lib') notify('Compiled lib files') } export async function server(task, opts) { - const babelOpts = { - ...babelServerOpts, - // the /server files may use React - presets: [...babelServerOpts.presets, '@babel/preset-react'], - } await task .source(opts.src || 'server/**/*.+(js|ts|tsx)') - .babel(babelOpts) + .babel('server') .target('dist/server') notify('Compiled server files') } @@ -163,7 +102,7 @@ export async function server(task, opts) { export async function nextbuild(task, opts) { await task .source(opts.src || 'build/**/*.+(js|ts|tsx)') - .babel(babelServerOpts) + .babel('server') .target('dist/build') notify('Compiled build files') } @@ -171,7 +110,7 @@ export async function nextbuild(task, opts) { export async function client(task, opts) { await task .source(opts.src || 'client/**/*.+(js|ts|tsx)') - .babel(babelClientOpts) + .babel('client') .target('dist/client') notify('Compiled client files') } @@ -180,7 +119,7 @@ export async function client(task, opts) { export async function nextbuildstatic(task, opts) { await task .source(opts.src || 'export/**/*.+(js|ts|tsx)') - .babel(babelServerOpts) + .babel('server') .target('dist/export') notify('Compiled export files') } @@ -188,26 +127,21 @@ export async function nextbuildstatic(task, opts) { export async function pages_app(task) { await task .source('pages/_app.tsx') - .babel(babelClientOpts) + .babel('client') .target('dist/pages') } export async function pages_error(task) { await task .source('pages/_error.tsx') - .babel(babelClientOpts) + .babel('client') .target('dist/pages') } export async function pages_document(task) { - const babelOpts = { - ...babelServerOpts, - presets: [...babelServerOpts.presets, '@babel/preset-react'], - } - await task .source('pages/_document.tsx') - .babel(babelOpts) + .babel('server') .target('dist/pages') } @@ -218,7 +152,7 @@ export async function pages(task, opts) { export async function telemetry(task, opts) { await task .source(opts.src || 'telemetry/**/*.+(js|ts|tsx)') - .babel(babelServerOpts) + .babel('server') .target('dist/telemetry') notify('Compiled telemetry files') } From 85da73d033f4e0b1bfe90ccc765327f44309c614 Mon Sep 17 00:00:00 2001 From: Tim Neutkens Date: Tue, 21 Jan 2020 20:14:49 +0100 Subject: [PATCH 3/8] Disable transform-runtime for pages dir --- packages/next/taskfile-babel.js | 24 +++++++++++++++--------- 1 file changed, 15 insertions(+), 9 deletions(-) diff --git a/packages/next/taskfile-babel.js b/packages/next/taskfile-babel.js index f1270e5b463d..088f2439d12d 100644 --- a/packages/next/taskfile-babel.js +++ b/packages/next/taskfile-babel.js @@ -25,15 +25,6 @@ const babelClientOpts = { // eslint-disable-next-line no-useless-concat '@babel/plugin-syntax-dynamic-impor' + 't', ['@babel/plugin-proposal-class-properties', { loose: true }], - [ - '@babel/plugin-transform-runtime', - { - corejs: 2, - helpers: true, - regenerator: false, - useESModules: false, - }, - ], ], } @@ -76,6 +67,21 @@ module.exports = function(task) { const options = { ...babelOpts, + plugins: [ + ...babelOpts.plugins, + // pages dir doesn't need core-js + serverOrClient === 'client' && file.dir !== 'pages' + ? [ + '@babel/plugin-transform-runtime', + { + corejs: 2, + helpers: true, + regenerator: false, + useESModules: false, + }, + ] + : false, + ].filter(Boolean), compact: true, babelrc: false, configFile: false, From fc0c4a1e6efb052b09ba622d6d394f59466be2d1 Mon Sep 17 00:00:00 2001 From: Tim Neutkens Date: Tue, 21 Jan 2020 20:27:54 +0100 Subject: [PATCH 4/8] Disable correctly --- packages/next/taskfile-babel.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/next/taskfile-babel.js b/packages/next/taskfile-babel.js index 088f2439d12d..89ac98a4b394 100644 --- a/packages/next/taskfile-babel.js +++ b/packages/next/taskfile-babel.js @@ -70,11 +70,11 @@ module.exports = function(task) { plugins: [ ...babelOpts.plugins, // pages dir doesn't need core-js - serverOrClient === 'client' && file.dir !== 'pages' + serverOrClient === 'client' ? [ '@babel/plugin-transform-runtime', { - corejs: 2, + corejs: file.dir !== 'pages' ? 2 : false, helpers: true, regenerator: false, useESModules: false, From 8d1e436eeac5fcc06a157aa7ce058b11573e5277 Mon Sep 17 00:00:00 2001 From: Tim Neutkens Date: Wed, 22 Jan 2020 00:11:56 +0100 Subject: [PATCH 5/8] Disable corejs for core files --- packages/next/client/index.js | 2 +- packages/next/taskfile-babel.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/next/client/index.js b/packages/next/client/index.js index 4650c74e1af3..e0526b5e83c7 100644 --- a/packages/next/client/index.js +++ b/packages/next/client/index.js @@ -20,7 +20,7 @@ import { isDynamicRoute } from '../next-server/lib/router/utils/is-dynamic' // So, we need to polyfill it. // See: https://webpack.js.org/guides/code-splitting/#dynamic-imports if (!window.Promise) { - window.Promise = Promise + window.Promise = require('@babel/runtime-corejs2/core-js/promise') } const data = JSON.parse(document.getElementById('__NEXT_DATA__').textContent) diff --git a/packages/next/taskfile-babel.js b/packages/next/taskfile-babel.js index 89ac98a4b394..8b0a61566970 100644 --- a/packages/next/taskfile-babel.js +++ b/packages/next/taskfile-babel.js @@ -74,7 +74,7 @@ module.exports = function(task) { ? [ '@babel/plugin-transform-runtime', { - corejs: file.dir !== 'pages' ? 2 : false, + corejs: false, helpers: true, regenerator: false, useESModules: false, From ec06ce053535c97af6d59b9b90e38f7ef99a72fc Mon Sep 17 00:00:00 2001 From: Tim Neutkens Date: Wed, 22 Jan 2020 14:07:41 +0100 Subject: [PATCH 6/8] Temporarily check if this fixes the error --- packages/next/taskfile-babel.js | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/packages/next/taskfile-babel.js b/packages/next/taskfile-babel.js index 8b0a61566970..0036821f8abb 100644 --- a/packages/next/taskfile-babel.js +++ b/packages/next/taskfile-babel.js @@ -90,6 +90,11 @@ module.exports = function(task) { const output = transform(file.data, options) const ext = extname(file.base) + output.code = output.code.replace( + /@babel\/runtime\//g, + '@babel/runtime-corejs2/' + ) + // Replace `.ts|.tsx` with `.js` in files with an extension if (ext) { const extRegex = new RegExp(ext.replace('.', '\\.') + '$', 'i') From de7f68c423a0da718455ef9d4c4b920f109e0097 Mon Sep 17 00:00:00 2001 From: Tim Neutkens Date: Wed, 22 Jan 2020 15:53:41 +0100 Subject: [PATCH 7/8] Use builtIns and exclude async-to-generator --- packages/next/client/router.ts | 2 +- packages/next/taskfile-babel.js | 11 ++++++++--- 2 files changed, 9 insertions(+), 4 deletions(-) diff --git a/packages/next/client/router.ts b/packages/next/client/router.ts index 32da8433124f..41d4dad46af9 100644 --- a/packages/next/client/router.ts +++ b/packages/next/client/router.ts @@ -138,7 +138,7 @@ export function makePublicRouterInstance(router: Router): NextRouter { for (const property of urlPropertyFields) { if (typeof _router[property] === 'object') { - instance[property] = { ..._router[property] } // makes sure query is not stateful + instance[property] = Object.assign({}, _router[property]) // makes sure query is not stateful continue } diff --git a/packages/next/taskfile-babel.js b/packages/next/taskfile-babel.js index 0036821f8abb..d31ced3d8bde 100644 --- a/packages/next/taskfile-babel.js +++ b/packages/next/taskfile-babel.js @@ -15,10 +15,15 @@ const babelClientOpts = { esmodules: true, }, loose: true, - exclude: ['transform-typeof-symbol'], + // This is handled by the Next.js webpack config that will run next/babel over the same code. + exclude: [ + 'transform-typeof-symbol', + 'transform-async-to-generator', + 'transform-spread', + ], }, ], - '@babel/preset-react', + ['@babel/preset-react', { useBuiltIns: true }], ], plugins: [ // workaround for @taskr/esnext bug replacing `-import` with `-require(` @@ -31,7 +36,7 @@ const babelClientOpts = { const babelServerOpts = { presets: [ '@babel/preset-typescript', - '@babel/preset-react', + ['@babel/preset-react', { useBuiltIns: true }], [ '@babel/preset-env', { From 2024296dec6ffdb24d133505de60be6dffa46aca Mon Sep 17 00:00:00 2001 From: Tim Neutkens Date: Wed, 22 Jan 2020 16:15:01 +0100 Subject: [PATCH 8/8] Update index.test.js --- test/integration/size-limit/test/index.test.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/test/integration/size-limit/test/index.test.js b/test/integration/size-limit/test/index.test.js index 70fd0d332d00..caedbdff0ec7 100644 --- a/test/integration/size-limit/test/index.test.js +++ b/test/integration/size-limit/test/index.test.js @@ -81,7 +81,7 @@ describe('Production response size', () => { ) // These numbers are without gzip compression! - const delta = responseSizeKilobytes - 235 + const delta = responseSizeKilobytes - 233 expect(delta).toBeLessThanOrEqual(0) // don't increase size expect(delta).toBeGreaterThanOrEqual(-1) // don't decrease size without updating target }) @@ -101,7 +101,7 @@ describe('Production response size', () => { ) // These numbers are without gzip compression! - const delta = responseSizeKilobytes - 203 + const delta = responseSizeKilobytes - 202 expect(delta).toBeLessThanOrEqual(0) // don't increase size expect(delta).toBeGreaterThanOrEqual(-1) // don't decrease size without updating target })