How to use @babel/plugin-proposal-decorators - 10 common examples

// Part of ES2018. Converts {...a, b: 2} to Object.assign({}, a, {b: 2})
          [
            "@babel/plugin-proposal-object-rest-spread",
            { loose: true, useBuiltIns: true },
          ],
          // Only support the syntax, Webpack will handle it.
          "@babel/syntax-dynamic-import",
          [
            "@babel/transform-react-jsx",
            {
              pragma: "h",
            },
          ],
          "@babel/plugin-proposal-optional-chaining",
          [
            require("@babel/plugin-proposal-decorators").default,
            { decoratorsBeforeExport: true },
          ],
          [
            require("@babel/plugin-proposal-class-properties").default,
            { loose: true },
          ],
        ],
      },
    },
  };
};

modules: false,
              // Exclude transforms that make all code slower
              exclude: ['transform-typeof-symbol']
            }
          ],
          [
            require('@babel/preset-react').default,
            {
              useBuiltIns: true
            }
          ],
          [require('@babel/preset-typescript').default]
        ],
        plugins: [
          require('babel-plugin-macros'),
          [require('@babel/plugin-proposal-decorators').default, false]
        ]
      }
    },
    test: /\.tsx?|jsx?$/,
    exclude: /node_modules/
  });

  return config;
}

'@babel/plugin-transform-runtime': {
      useESModules: !buildEsModules,
    },
  });

  preset.presets.push(
    [require('@babel/preset-react').default, {
      development: process.env.BABEL_ENV !== 'production',
      useBuiltIns: true,
      ...opts['@babel/preset-react'],
    }],
  );

  preset.plugins.push(
    require('@babel/plugin-transform-flow-strip-types').default,
    [require('@babel/plugin-proposal-decorators').default, {
      // TODO: migrate to non-legacy decorators
      legacy: true,
      // decoratorsBeforeExport: true,
    }],
    [require('@babel/plugin-proposal-class-properties').default, {
      loose: true,
    }],
  );

  if (buildEsModules) {
    preset.plugins.push(require('babel-plugin-dynamic-import-node'));
  }

  return preset;
};

// @babel/plugin-proposal-decorators when using TypeScript.
      // https://github.com/facebook/create-react-app/issues/5741
      isFlowEnabled && [
        require('@babel/plugin-transform-flow-strip-types').default,
        false,
      ],
      // Experimental macros support. Will be documented after it's had some time
      // in the wild.
      require('babel-plugin-macros'),
      // Necessary to include regardless of the environment because
      // in practice some other transforms (such as object-rest-spread)
      // don't work without it: https://github.com/babel/babel/issues/7215
      require('@babel/plugin-transform-destructuring').default,
      // Turn on legacy decorators for TypeScript files
      isTypeScriptEnabled && [
        require('@babel/plugin-proposal-decorators').default,
        false,
      ],
      // class { handleClick = () => { } }
      // Enable loose mode to use assignment instead of defineProperty
      // See discussion in https://github.com/facebook/create-react-app/issues/4263
      [
        require('@babel/plugin-proposal-class-properties').default,
        {
          loose: true,
        },
      ],
      // The following two plugins use Object.assign directly, instead of Babel's
      // extends helper. Note that this assumes `Object.assign` is available.
      // { ...todo, completed: true }
      [
        require('@babel/plugin-proposal-object-rest-spread').default,

// Work around https://github.com/babel/babel/issues/10261, which causes
  // Babel to not use the runtime helpers for things like _objectSpread.
  // Remove this once that babel issue is fixed
  let babelHelperVersion = {}
  try {
    // eslint-disable-next-line import/no-extraneous-dependencies
    const version = require('@babel/helpers/package.json').version
    babelHelperVersion.version = version
  } catch (e) {
    // if something goes wrong, continue and don't try to explicitly set a helper version
  }

  plugins = plugins.concat([
    require('babel-plugin-macros'),
    require('@babel/plugin-transform-destructuring').default,
    [require('@babel/plugin-proposal-decorators').default, { legacy: true }], // must run before themeable-styles plugin below
    [require('@babel/plugin-proposal-class-properties').default, { loose: true }],
    require('@babel/plugin-proposal-export-default-from').default,
    [require('@babel/plugin-proposal-object-rest-spread').default, { useBuiltIns: true }],
    require('@babel/plugin-proposal-optional-chaining').default,
    [require('@babel/plugin-transform-runtime').default, {
      ...babelHelperVersion,
      corejs: false,
      regenerator: true,
      helpers: true,
      useESModules: opts.esModules
    }],
    require('@babel/plugin-syntax-dynamic-import').default,
    require('babel-plugin-transform-undefined-to-void')
  ])

  if (process.env.NODE_ENV === 'production') {

'useState',
            'useEffect',
            'useContext',
            'useReducer',
            'useCallback',
            'useMemo',
            'useRef',
            'useImperativeHandle',
            'useLayoutEffect',
            'useDebugValue',
          ],
        },
      ],
      // Turn on legacy decorators for TypeScript files
      isTypeScriptEnabled && [
        require('@babel/plugin-proposal-decorators').default,
        false,
      ],
      // class { handleClick = () => { } }
      // Enable loose mode to use assignment instead of defineProperty
      // See discussion in https://github.com/facebook/create-react-app/issues/4263
      [
        require('@babel/plugin-proposal-class-properties').default,
        {
          loose: true,
        },
      ],
      // The following two plugins use Object.assign directly, instead of Babel's
      // extends helper. Note that this assumes `Object.assign` is available.
      // { ...todo, completed: true }
      [
        require('@babel/plugin-proposal-object-rest-spread').default,

require("@babel/preset-react"),
  ]
  babelOptions.plugins = [
    // stage 0
    require("@babel/plugin-proposal-function-bind").default,

    // stage 1
    require("@babel/plugin-proposal-export-default-from").default,
    require("@babel/plugin-proposal-logical-assignment-operators").default,
    [require("@babel/plugin-proposal-optional-chaining").default, {loose: false}],
    [require("@babel/plugin-proposal-pipeline-operator").default, {proposal: "minimal"}],
    [require("@babel/plugin-proposal-nullish-coalescing-operator").default, {loose: false}],
    require("@babel/plugin-proposal-do-expressions").default,

    // stage 2
    [require("@babel/plugin-proposal-decorators").default, {legacy: true}],
    require("@babel/plugin-proposal-function-sent").default,
    require("@babel/plugin-proposal-export-namespace-from").default,
    require("@babel/plugin-proposal-numeric-separator").default,
    require("@babel/plugin-proposal-throw-expressions").default,

    // stage 3
    require("@babel/plugin-syntax-dynamic-import").default,
    require("@babel/plugin-syntax-import-meta").default,
    [require("@babel/plugin-proposal-class-properties").default, {loose: false}],
    require("@babel/plugin-proposal-json-strings").default,
  ]
  babelOptions.babelrc = false
  return babel
}

let reactLoadableRoutes = require("../plugins/react-loadable-routes");
reactLoadableRoutes = reactLoadableRoutes.default ? reactLoadableRoutes.default : reactLoadableRoutes;

let dynamicImportWebpack = require("../plugins/dynamic-import-webpack");
dynamicImportWebpack = dynamicImportWebpack.default ? dynamicImportWebpack.default: dynamicImportWebpack;

let syntaxDynamicImport = require("@babel/plugin-syntax-dynamic-import");
syntaxDynamicImport = syntaxDynamicImport.default ? syntaxDynamicImport.default: syntaxDynamicImport;

let objectRestSpread = require("@babel/plugin-proposal-object-rest-spread");
objectRestSpread = objectRestSpread.default ? objectRestSpread.default: objectRestSpread;

let decorators = require("@babel/plugin-proposal-decorators");
decorators = decorators.default ? decorators.default: decorators;

let classProperties = require("@babel/plugin-proposal-class-properties");
classProperties = classProperties.default ? classProperties.default: classProperties;

let generatorFunctions = require("@babel/plugin-proposal-async-generator-functions");
generatorFunctions = generatorFunctions.default? generatorFunctions.default : generatorFunctions;

let lodash = require("babel-plugin-lodash");
lodash = lodash.default ? lodash.default: lodash;

let reactHotLoader = require("react-hot-loader/babel");
reactHotLoader = reactHotLoader.default? reactHotLoader.default: reactHotLoader;

const defaults = {noChunk: false, hot: true};
module.exports = module.exports.default =  (options = {noChunk: false, hot: true}) => {
  options = Object.assign({}, defaults, options);

require('@babel/preset-env').default,
    {
      targets: {node: nodeVersion || 'current'}
    }
  ]);

  var plugins = [];

  if (language === 'ts') {
    require('reflect-metadata');
    plugins.push([require('@babel/plugin-syntax-decorators').default, {legacy: true}]);
    plugins.push([require('./build/typescript-babel-decorators.js').default]);
  }

  if (language === 'js') {
    plugins.push([require('@babel/plugin-proposal-decorators').default, { legacy: true }]);
  }

  plugins.push([require('@babel/plugin-proposal-class-properties').default, { loose: true }]);

  var enableLocalBabelRc = process.env.ENABLE_LOCAL_BABEL_RC;

  var configuration = {
    presets: presets,
    plugins: plugins,
    babelrc: !!enableLocalBabelRc,
    extensions: ['.es6', '.es', '.jsx', '.js', '.mjs', '.ts', '.tsx']
  };

  if (omitExtensions) {
    delete configuration.extensions;
  }