next.js/packages/next/src/build/babel/preset.ts
preset.ts334 lines11.6 KB
import type { PluginItem } from 'next/dist/compiled/babel/core'
import { dirname } from 'path'

const isLoadIntentTest = process.env.NODE_ENV === 'test'
const isLoadIntentDevelopment = process.env.NODE_ENV === 'development'

type StyledJsxPlugin = [string, any] | string
type StyledJsxBabelOptions =
  | {
      plugins?: StyledJsxPlugin[]
      styleModule?: string
      'babel-test'?: boolean
    }
  | undefined

// Resolve styled-jsx plugins
function styledJsxOptions(options: StyledJsxBabelOptions) {
  options = options || {}
  options.styleModule = 'styled-jsx/style'

  if (!Array.isArray(options.plugins)) {
    return options
  }

  options.plugins = options.plugins.map(
    (plugin: StyledJsxPlugin): StyledJsxPlugin => {
      if (Array.isArray(plugin)) {
        const [name, pluginOptions] = plugin
        return [require.resolve(name), pluginOptions]
      }

      return require.resolve(plugin)
    }
  )

  return options
}

type NextBabelPresetOptions = {
  'preset-env'?: any
  'preset-react'?: any
  'class-properties'?: any
  'transform-runtime'?: any
  'styled-jsx'?: StyledJsxBabelOptions
  /**
   * `syntax-typescript` is a subset of `preset-typescript`.
   *
   * - When babel is used in "standalone" mode (e.g. alongside SWC when using
   *   react-compiler or turbopack) we'll prefer the options in
   *   'syntax-typescript`, and fall back to `preset-typescript`.
   *
   * - When babel is used in "default" mode (e.g. with a babel config in
   *   webpack) we'll prefer the options in `preset-typescript`, and fall back
   *   to `syntax-typescript`.
   */
  'preset-typescript'?: any
  'syntax-typescript'?: {
    disallowAmbiguousJSXLike?: boolean
    dts?: boolean
    isTSX?: boolean
    allExtensions?: boolean
    ignoreExtensions?: boolean
  }
}

type BabelPreset = {
  presets?: PluginItem[] | null
  plugins?: PluginItem[] | null
  sourceType?: 'script' | 'module' | 'unambiguous'
  overrides?: Array<{ test: RegExp } & Omit<BabelPreset, 'overrides'>>
}

// Taken from https://github.com/babel/babel/commit/d60c5e1736543a6eac4b549553e107a9ba967051#diff-b4beead8ad9195361b4537601cc22532R158
function supportsStaticESM(caller: any): boolean {
  return !!caller?.supportsStaticESM
}

/**
 * HACK: A drop-in replacement for `@babel/preset-typescript` that only enables
 * `@babel/plugin-syntax-typescript` and does not transform the typescript.
 *
 * This is used for standalone mode, where Babel is being used alongside SWC
 * (i.e. Turbopack or with React Compiler on webpack).
 *
 * This should match the logic/behavior here:
 * https://github.com/babel/babel/blob/7f57d3a2e97b7e2800fb82cff9284a3591377971/packages/babel-preset-typescript/src/index.ts#L63
 */
function presetTypescriptSyntaxOnly(_api: unknown, options: any) {
  const { allExtensions, ignoreExtensions, ...restOptions } = options
  const disableExtensionDetect = allExtensions || ignoreExtensions

  function getPlugins(isTSX: boolean, disallowAmbiguousJSXLike: boolean) {
    return [
      [
        require('next/dist/compiled/babel/plugin-syntax-typescript') as typeof import('next/dist/compiled/babel/plugin-syntax-typescript'),
        {
          isTSX,
          disallowAmbiguousJSXLike,
          ...restOptions,
        },
      ],
    ]
  }

  return {
    plugins: [],
    overrides: disableExtensionDetect
      ? [
          {
            plugins: getPlugins(
              options.isTSX,
              options.disallowAmbiguousJSXLike
            ),
          },
        ]
      : // Only set 'test' if explicitly requested, since it requires that
        // Babel is being called with a filename.
        [
          {
            test: /\.ts$/,
            plugins: getPlugins(false, false),
          },
          {
            test: /\.mts$/,
            sourceType: 'module',
            plugins: getPlugins(false, true),
          },
          {
            test: /\.cts$/,
            sourceType: 'unambiguous',
            plugins: getPlugins(false, true),
          },
          {
            test: /\.tsx$/,
            plugins: getPlugins(true, false),
          },
        ],
  }
}

export default (
  api: any,
  options: NextBabelPresetOptions = {}
): BabelPreset => {
  const isStandalone = api.caller(
    // NOTE: `transformMode` may be undefined if the user configured `babel-loader` themselves. In
    // this case, we should assume we're in 'default' mode.
    (caller: any) => !!caller && caller.transformMode === 'standalone'
  )
  const isServer = api.caller((caller: any) => !!caller && caller.isServer)

  // syntax plugins that are used in both standalone and default modes
  const sharedSyntaxPlugins = [
    require('next/dist/compiled/babel/plugin-syntax-dynamic-import') as typeof import('next/dist/compiled/babel/plugin-syntax-dynamic-import'),
    [
      require('next/dist/compiled/babel/plugin-syntax-import-attributes') as typeof import('next/dist/compiled/babel/plugin-syntax-import-attributes'),
      {
        deprecatedAssertSyntax: true,
      },
    ],
    (isStandalone || isServer) &&
      (require('next/dist/compiled/babel/plugin-syntax-bigint') as typeof import('next/dist/compiled/babel/plugin-syntax-bigint')),
  ].filter(Boolean)

  if (isStandalone) {
    // Just enable a few syntax plugins, we'll let SWC handle any of the downleveling or
    // next.js-specific transforms.
    return {
      sourceType: 'unambiguous',
      presets: [
        [
          presetTypescriptSyntaxOnly,
          options['syntax-typescript'] ?? options['preset-typescript'] ?? {},
        ],
      ],
      plugins: [
        require('next/dist/compiled/babel/plugin-syntax-jsx') as typeof import('next/dist/compiled/babel/plugin-syntax-jsx'),
        ...sharedSyntaxPlugins,
      ],
    }
  }

  const supportsESM = api.caller(supportsStaticESM)
  const isCallerDevelopment = api.caller((caller: any) => caller?.isDev)

  // Look at external intent if used without a caller (e.g. via Jest):
  const isTest = isCallerDevelopment == null && isLoadIntentTest

  // Look at external intent if used without a caller (e.g. Storybook):
  const isDevelopment =
    isCallerDevelopment === true ||
    (isCallerDevelopment == null && isLoadIntentDevelopment)

  // Default to production mode if not `test` nor `development`:
  const isProduction = !(isTest || isDevelopment)

  const isBabelLoader = api.caller(
    (caller: any) =>
      !!caller &&
      (caller.name === 'babel-loader' ||
        caller.name === 'next-babel-turbo-loader')
  )

  const useJsxRuntime =
    options['preset-react']?.runtime === 'automatic' ||
    (Boolean(api.caller((caller: any) => !!caller && caller.hasJsxRuntime)) &&
      options['preset-react']?.runtime !== 'classic')

  const presetEnvConfig = {
    // In the test environment `modules` is often needed to be set to true, babel figures that out by itself using the `'auto'` option
    // In production/development this option is set to `false` so that webpack can handle import/export with tree-shaking
    modules: 'auto',
    exclude: ['transform-typeof-symbol'],
    ...options['preset-env'],
  }

  // When transpiling for the server or tests, target the current Node version
  // if not explicitly specified:
  if (
    (isServer || isTest) &&
    (!presetEnvConfig.targets ||
      !(
        typeof presetEnvConfig.targets === 'object' &&
        'node' in presetEnvConfig.targets
      ))
  ) {
    presetEnvConfig.targets = {
      // Targets the current process' version of Node. This requires apps be
      // built and deployed on the same version of Node.
      // This is the same as using "current" but explicit
      node: process.versions.node,
    }
  }

  const runtimeModuleName = isBabelLoader
    ? 'next/dist/compiled/@babel/runtime'
    : null
  return {
    sourceType: 'unambiguous',
    presets: [
      [
        require('next/dist/compiled/babel/preset-env') as typeof import('next/dist/compiled/babel/preset-env'),
        presetEnvConfig,
      ],
      [
        require('next/dist/compiled/babel/preset-react') as typeof import('next/dist/compiled/babel/preset-react'),
        {
          // This adds @babel/plugin-transform-react-jsx-source and
          // @babel/plugin-transform-react-jsx-self automatically in development
          development: isDevelopment || isTest,
          ...(useJsxRuntime ? { runtime: 'automatic' } : { pragma: '__jsx' }),
          ...options['preset-react'],
        },
      ],
      [
        require('next/dist/compiled/babel/preset-typescript') as typeof import('next/dist/compiled/babel/preset-typescript'),
        {
          allowNamespaces: true,
          ...(options['preset-typescript'] || options['syntax-typescript']),
        },
      ],
    ],
    plugins: [
      ...sharedSyntaxPlugins,
      !useJsxRuntime && [
        require('./plugins/jsx-pragma') as typeof import('./plugins/jsx-pragma'),
        {
          // This produces the following injected import for modules containing JSX:
          //   import React from 'react';
          //   var __jsx = React.createElement;
          module: 'react',
          importAs: 'React',
          pragma: '__jsx',
          property: 'createElement',
        },
      ],
      [
        require('./plugins/optimize-hook-destructuring') as typeof import('./plugins/optimize-hook-destructuring'),
        {
          // only optimize hook functions imported from React/Preact
          lib: true,
        },
      ],
      require('./plugins/react-loadable-plugin') as typeof import('./plugins/react-loadable-plugin'),
      // only enable this plugin if custom config for it was provided
      // otherwise we will only enable it if their browserslist triggers
      // preset-env to pull it in
      options['class-properties'] && [
        require('next/dist/compiled/babel/plugin-proposal-class-properties') as typeof import('next/dist/compiled/babel/plugin-proposal-class-properties'),
        options['class-properties'] || {},
      ],
      [
        require('next/dist/compiled/babel/plugin-proposal-object-rest-spread') as typeof import('next/dist/compiled/babel/plugin-proposal-object-rest-spread'),
        {
          useBuiltIns: true,
        },
      ],
      !isServer && [
        require('next/dist/compiled/babel/plugin-transform-runtime') as typeof import('next/dist/compiled/babel/plugin-transform-runtime'),
        {
          corejs: false,
          helpers: true,
          regenerator: true,
          useESModules: supportsESM && presetEnvConfig.modules !== 'commonjs',
          absoluteRuntime:
            runtimeModuleName != null
              ? dirname(require.resolve(`${runtimeModuleName}/package.json`))
              : undefined,
          // regenerator needs `moduleName` to be set in addition to
          // `absoluteRuntime`.
          moduleName: runtimeModuleName,
          ...options['transform-runtime'],
        },
      ],
      [
        isTest && options['styled-jsx'] && options['styled-jsx']['babel-test']
          ? (require('styled-jsx/babel-test') as typeof import('styled-jsx/babel-test'))
          : (require('styled-jsx/babel') as typeof import('styled-jsx/babel')),
        styledJsxOptions(options['styled-jsx']),
      ],
      isProduction && [
        require('next/dist/compiled/babel/plugin-transform-react-remove-prop-types') as typeof import('next/dist/compiled/babel/plugin-transform-react-remove-prop-types'),
        {
          removeImport: true,
        },
      ],
      // Always compile numeric separator because the resulting number is
      // smaller.
      require('next/dist/compiled/babel/plugin-proposal-numeric-separator') as typeof import('next/dist/compiled/babel/plugin-proposal-numeric-separator'),
      require('next/dist/compiled/babel/plugin-proposal-export-namespace-from') as typeof import('next/dist/compiled/babel/plugin-proposal-export-namespace-from'),
    ].filter(Boolean),
  }
}
Quest for Codev2.0.0
/
SIGN IN