ncc Babel inlining (vercel#18768)

This adds inlining for Babel and the Babel plugins used in next.

This is based to the PR at vercel#18823.

The approach is to make one large bundle and then separate out the individual packages from that in order to avoid duplications.

In the first attempt the Babel bundle size was 10MB... using "resolutions" in the Yarn workspace to reduce the duplicated packages this was brought down to a 2.8MB bundle for Babel and all the used plugins which is exactly the expected file size here.

This will thus add a 2.8MB download size to the next package, but save downloading any babel dependencies separately, removing a large number of package dependencies from the overall install.

package.json

@@ -37,9 +37,9 @@
   },
   "pre-commit": "lint-staged",
   "devDependencies": {
-    "@babel/plugin-proposal-object-rest-spread": "7.11.0",
+    "@babel/plugin-proposal-object-rest-spread": "7.12.1",
     "@babel/preset-flow": "7.10.4",
-    "@babel/preset-react": "7.10.4",
+    "@babel/preset-react": "7.12.5",
     "@fullhuman/postcss-purgecss": "1.3.0",
     "@mdx-js/loader": "0.18.0",
     "@types/cheerio": "0.22.16",
@@ -121,7 +121,7 @@
     "shell-quote": "1.7.2",
     "spectron": "^7.0.0",
     "styled-components": "5.1.0",
-    "styled-jsx-plugin-postcss": "2.0.1",
+    "styled-jsx-plugin-postcss": "3.0.2",
     "tailwindcss": "1.1.3",
     "taskr": "1.1.0",
     "tree-kill": "1.2.2",

packages/next/build/babel/plugins/amp-attributes.ts

@@ -1,4 +1,4 @@
-import { NodePath, PluginObj, types } from '@babel/core'
+import { NodePath, PluginObj, types } from 'next/dist/compiled/babel/core'
 
 export default function AmpAttributePatcher(): PluginObj {
   return {

packages/next/build/babel/plugins/commonjs.ts

@@ -1,5 +1,5 @@
-import { NodePath, PluginObj, types } from '@babel/core'
-import commonjsPlugin from '@babel/plugin-transform-modules-commonjs'
+import { NodePath, PluginObj, types } from 'next/dist/compiled/babel/core'
+import commonjsPlugin from 'next/dist/compiled/babel/plugin-transform-modules-commonjs'
 
 // Rewrite imports using next/<something> to next-server/<something>
 export default function NextToNextServer(...args: any): PluginObj {

packages/next/build/babel/plugins/jsx-pragma.ts

@@ -1,5 +1,9 @@
-import { NodePath, PluginObj, types as BabelTypes } from '@babel/core'
-import jsx from '@babel/plugin-syntax-jsx'
+import {
+  NodePath,
+  PluginObj,
+  types as BabelTypes,
+} from 'next/dist/compiled/babel/core'
+import jsx from 'next/dist/compiled/babel/plugin-syntax-jsx'
 
 export default function ({
   types: t,

packages/next/build/babel/plugins/next-data.ts

@@ -1,4 +1,8 @@
-import { NodePath, PluginObj, types as BabelTypes } from '@babel/core'
+import {
+  NodePath,
+  PluginObj,
+  types as BabelTypes,
+} from 'next/dist/compiled/babel/core'
 
 export default function ({
   types: t,

packages/next/build/babel/plugins/next-page-config.ts

@@ -1,4 +1,8 @@
-import { NodePath, PluginObj, types as BabelTypes } from '@babel/core'
+import {
+  NodePath,
+  PluginObj,
+  types as BabelTypes,
+} from 'next/dist/compiled/babel/core'
 import { PageConfig } from 'next/types'
 import { STRING_LITERAL_DROP_BUNDLE } from '../../../next-server/lib/constants'
 
@@ -77,9 +81,12 @@ export default function nextPageConfig({
                 }
 
                 const config: PageConfig = {}
-                const declarations = [
-                  ...(exportPath.node.declaration?.declarations || []),
-                  exportPath.scope.getBinding(CONFIG_KEY)?.path.node,
+                const declarations: BabelTypes.VariableDeclarator[] = [
+                  ...((exportPath.node
+                    .declaration as BabelTypes.VariableDeclaration)
+                    ?.declarations || []),
+                  exportPath.scope.getBinding(CONFIG_KEY)?.path
+                    .node as BabelTypes.VariableDeclarator,
                 ].filter(Boolean)
 
                 for (const specifier of exportPath.node.specifiers) {
@@ -147,7 +154,7 @@ export default function nextPageConfig({
                         )
                       )
                     }
-                    const { name } = prop.key
+                    const { name } = prop.key as BabelTypes.Identifier
                     if (BabelTypes.isIdentifier(prop.key, { name: 'amp' })) {
                       if (!BabelTypes.isObjectProperty(prop)) {
                         throw new Error(

packages/next/build/babel/plugins/next-page-disallow-re-export-all-exports.ts

@@ -1,4 +1,4 @@
-import { NodePath, PluginObj, types } from '@babel/core'
+import { NodePath, PluginObj, types } from 'next/dist/compiled/babel/core'
 
 export default function NextPageDisallowReExportAllExports(): PluginObj<any> {
   return {

packages/next/build/babel/plugins/next-ssg-transform.ts

@@ -1,4 +1,8 @@
-import { NodePath, PluginObj, types as BabelTypes } from '@babel/core'
+import {
+  NodePath,
+  PluginObj,
+  types as BabelTypes,
+} from 'next/dist/compiled/babel/core'
 import { SERVER_PROPS_SSG_CONFLICT } from '../../../lib/constants'
 import {
   SERVER_PROPS_ID,

packages/next/build/babel/plugins/no-anonymous-default-export.ts

@@ -1,4 +1,4 @@
-import { PluginObj, types as BabelTypes } from '@babel/core'
+import { PluginObj, types as BabelTypes } from 'next/dist/compiled/babel/core'
 import chalk from 'next/dist/compiled/chalk'
 
 export default function NoAnonymousDefaultExport({

packages/next/build/babel/plugins/optimize-hook-destructuring.ts

@@ -1,4 +1,8 @@
-import { NodePath, PluginObj, types as BabelTypes } from '@babel/core'
+import {
+  NodePath,
+  PluginObj,
+  types as BabelTypes,
+} from 'next/dist/compiled/babel/core'
 
 // matches any hook-like (the default)
 const isHook = /^use[A-Z]/

packages/next/build/babel/plugins/react-loadable-plugin.ts

@@ -23,7 +23,11 @@ WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWAR
 // Modified to put `webpack` and `modules` under `loadableGenerated` to be backwards compatible with next/dynamic which has a `modules` key
 // Modified to support `dynamic(import('something'))` and `dynamic(import('something'), options)
 
-import { NodePath, PluginObj, types as BabelTypes } from '@babel/core'
+import {
+  NodePath,
+  PluginObj,
+  types as BabelTypes,
+} from 'next/dist/compiled/babel/core'
 
 export default function ({
   types: t,

packages/next/build/babel/preset.ts

@@ -1,4 +1,4 @@
-import { PluginItem } from '@babel/core'
+import { PluginItem } from 'next/dist/compiled/babel/core'
 const env = process.env.NODE_ENV
 const isProduction = env === 'production'
 const isDevelopment = env === 'development'
@@ -111,11 +111,11 @@ module.exports = (
     sourceType: 'unambiguous',
     presets: [
       customModernPreset || [
-        require('@babel/preset-env').default,
+        require('next/dist/compiled/babel/preset-env'),
         presetEnvConfig,
       ],
       [
-        require('@babel/preset-react'),
+        require('next/dist/compiled/babel/preset-react'),
         {
           // This adds @babel/plugin-transform-react-jsx-source and
           // @babel/plugin-transform-react-jsx-self automatically in development
@@ -125,7 +125,7 @@ module.exports = (
         },
       ],
       [
-        require('@babel/preset-typescript'),
+        require('next/dist/compiled/babel/preset-typescript'),
         { allowNamespaces: true, ...options['preset-typescript'] },
       ],
     ],
@@ -149,20 +149,20 @@ module.exports = (
           lib: true,
         },
       ],
-      require('@babel/plugin-syntax-dynamic-import'),
+      require('next/dist/compiled/babel/plugin-syntax-dynamic-import'),
       require('./plugins/react-loadable-plugin'),
       [
-        require('@babel/plugin-proposal-class-properties'),
+        require('next/dist/compiled/babel/plugin-proposal-class-properties'),
         options['class-properties'] || {},
       ],
       [
-        require('@babel/plugin-proposal-object-rest-spread'),
+        require('next/dist/compiled/babel/plugin-proposal-object-rest-spread'),
         {
           useBuiltIns: true,
         },
       ],
       !isServer && [
-        require('@babel/plugin-transform-runtime'),
+        require('next/dist/compiled/babel/plugin-transform-runtime'),
         {
           corejs: false,
           helpers: true,
@@ -185,11 +185,11 @@ module.exports = (
           removeImport: true,
         },
       ],
-      isServer && require('@babel/plugin-syntax-bigint'),
+      isServer && require('next/dist/compiled/babel/plugin-syntax-bigint'),
       // Always compile numeric separator because the resulting number is
       // smaller.
-      require('@babel/plugin-proposal-numeric-separator'),
-      require('@babel/plugin-proposal-export-namespace-from'),
+      require('next/dist/compiled/babel/plugin-proposal-numeric-separator'),
+      require('next/dist/compiled/babel/plugin-proposal-export-namespace-from'),
     ].filter(Boolean),
   }
 }

packages/next/build/webpack-config.ts

@@ -1,4 +1,4 @@
-import { codeFrameColumns } from '@babel/code-frame'
+import { codeFrameColumns } from 'next/dist/compiled/babel/code-frame'
 import ReactRefreshWebpackPlugin from '@next/react-refresh-utils/ReactRefreshWebpackPlugin'
 import crypto from 'crypto'
 import { readFileSync, realpathSync } from 'fs'

packages/next/build/webpack/loaders/next-babel-loader.js

@@ -45,7 +45,7 @@ module.exports = babelLoader.custom((babel) => {
     { type: 'plugin' }
   )
   const commonJsItem = babel.createConfigItem(
-    require('@babel/plugin-transform-modules-commonjs'),
+    require('next/dist/compiled/babel/plugin-transform-modules-commonjs'),
     { type: 'plugin' }
   )
 

packages/next/build/webpack/plugins/next-esm-plugin.ts

@@ -164,7 +164,7 @@ export class NextEsmPlugin implements Plugin {
 
           if (IS_PRESET_ENV.test(name)) {
             presets.push([
-              require.resolve('@babel/preset-env'),
+              require('next/dist/compiled/babel/preset-env'),
               {
                 bugfixes: true,
                 loose: true,

packages/next/build/webpack/plugins/wellknown-errors-plugin/parseScss.ts

@@ -1,4 +1,4 @@
-import { codeFrameColumns } from '@babel/code-frame'
+import { codeFrameColumns } from 'next/dist/compiled/babel/code-frame'
 import Chalk from 'next/dist/compiled/chalk'
 import { SimpleWebpackError } from './simpleWebpackError'
 

packages/next/bundles/babel/bundle.js

@@ -0,0 +1,74 @@
+/* eslint-disable import/no-extraneous-dependencies */
+
+function codeFrame() {
+  return require('@babel/code-frame')
+}
+
+function core() {
+  return require('@babel/core')
+}
+
+function pluginProposalClassProperties() {
+  return require('@babel/plugin-proposal-class-properties')
+}
+
+function pluginProposalExportNamespaceFrom() {
+  return require('@babel/plugin-proposal-export-namespace-from')
+}
+
+function pluginProposalNumericSeparator() {
+  return require('@babel/plugin-proposal-numeric-separator')
+}
+
+function pluginProposalObjectRestSpread() {
+  return require('@babel/plugin-proposal-object-rest-spread')
+}
+
+function pluginSyntaxBigint() {
+  return require('@babel/plugin-syntax-bigint')
+}
+
+function pluginSyntaxDynamicImport() {
+  return require('@babel/plugin-syntax-dynamic-import')
+}
+
+function pluginSyntaxJsx() {
+  return require('@babel/plugin-syntax-jsx')
+}
+
+function pluginTransformModulesCommonjs() {
+  return require('@babel/plugin-transform-modules-commonjs')
+}
+
+function pluginTransformRuntime() {
+  return require('@babel/plugin-transform-runtime')
+}
+
+function presetEnv() {
+  return require('@babel/preset-env')
+}
+
+function presetReact() {
+  return require('@babel/preset-react')
+}
+
+function presetTypescript() {
+  return require('@babel/preset-typescript')
+}
+
+module.exports = {
+  codeFrame,
+  core,
+  pluginProposalClassProperties,
+  pluginProposalExportNamespaceFrom,
+  pluginProposalNumericSeparator,
+  pluginProposalObjectRestSpread,
+  pluginSyntaxBigint,
+  pluginSyntaxDynamicImport,
+  pluginSyntaxJsx,
+  pluginTransformModulesCommonjs,
+  pluginTransformRuntime,
+  presetEnv,
+  presetReact,
+  presetTypescript,
+}

packages/next/bundles/babel/packages/code-frame.js

@@ -0,0 +1 @@
+module.exports = require('./bundle').codeFrame()

packages/next/bundles/babel/packages/core.js

@@ -0,0 +1 @@
+module.exports = require('./bundle').core()

packages/next/bundles/babel/packages/plugin-proposal-class-properties.js

@@ -0,0 +1 @@
+module.exports = require('./bundle').pluginProposalClassProperties()

packages/next/bundles/babel/packages/plugin-proposal-export-namespace-from.js

@@ -0,0 +1 @@
+module.exports = require('./bundle').pluginProposalExportNamespaceFrom()

packages/next/bundles/babel/packages/plugin-proposal-numeric-separator.js

@@ -0,0 +1 @@
+module.exports = require('./bundle').pluginProposalNumericSeparator()

packages/next/bundles/babel/packages/plugin-proposal-object-rest-spread.js

@@ -0,0 +1 @@
+module.exports = require('./bundle').pluginProposalObjectRestSpread()

packages/next/bundles/babel/packages/plugin-syntax-bigint.js

@@ -0,0 +1 @@
+module.exports = require('./bundle').pluginSyntaxBigint()

packages/next/bundles/babel/packages/plugin-syntax-dynamic-import.js

@@ -0,0 +1 @@
+module.exports = require('./bundle').pluginSyntaxDynamicImport()

packages/next/bundles/babel/packages/plugin-syntax-jsx.js

@@ -0,0 +1 @@
+module.exports = require('./bundle').pluginSyntaxJsx()

packages/next/bundles/babel/packages/plugin-transform-modules-commonjs.js

@@ -0,0 +1 @@
+module.exports = require('./bundle').pluginTransformModulesCommonjs()

packages/next/bundles/babel/packages/plugin-transform-runtime.js

@@ -0,0 +1 @@
+module.exports = require('./bundle').pluginTransformRuntime()

packages/next/bundles/babel/packages/preset-env.js

@@ -0,0 +1 @@
+module.exports = require('./bundle').presetEnv()

packages/next/bundles/babel/packages/preset-react.js

@@ -0,0 +1 @@
+module.exports = require('./bundle').presetReact()

packages/next/bundles/babel/packages/preset-typescript.js

@@ -0,0 +1 @@
+module.exports = require('./bundle').presetTypescript()