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

function setup(tr, babel) {
  if (babel === 'babel') {
    require('@babel/register')({
      babelrc: false,
      presets: [
        [
          require('@babel/preset-env').default,
          {targets: {node: true}},
        ],
        /\.tsx?$/.test(tr) ?
          require('@babel/preset-typescript').default :
          require('@babel/preset-flow').default,
      ],
      plugins: [
        require('@babel/plugin-proposal-class-properties').default,
      ],
      extensions: [...DEFAULT_EXTENSIONS, '.ts', '.tsx'],
      // By default, babel register only compiles things inside the current working directory.
      // https://github.com/babel/babel/blob/2a4f16236656178e84b05b8915aab9261c55782c/packages/babel-register/src/node.js#L140-L157
      ignore: [
        // Ignore parser related files
        /@babel\/parser/,
        /\/flow-parser\//,
        /\/recast\//,
        /\/ast-types\//,
      ],
    });
  }

  const module = require(tr);
  transform = typeof module.default === 'function' ?

/*
 * Copyright (c) 2018, salesforce.com, inc.
 * All rights reserved.
 * SPDX-License-Identifier: MIT
 * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
 */
const classProperty = require('@babel/plugin-proposal-class-properties')['default'];
const { invalidDecorators } = require('./decorators');
const { transform: postProcess } = require('./post-process');

function exit(api) {
    return {
        Program: {
            exit(path, state) {
                const visitors = api.traverse.visitors.merge([
                    postProcess(api),
                    classProperty(api, { loose: true }).visitor,

                    // Decorator usage validation is done on a program exit because by the time program exits,
                    // all the decorators are suppose to be transformed and removed from the class.
                    // Any remaining decorators mean they were not detected and therefore misused.
                    invalidDecorators(api),
                ]);

'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,
        {
          useBuiltIns: true,
        },
      ],
      // Polyfills the runtime needed for async/await, generators, and friends
      // https://babeljs.io/docs/en/babel-plugin-transform-runtime
      [

const jsFeatures = () => [
  // old Stage 1
  require('@babel/plugin-proposal-export-default-from').default,

  // old Stage 2
  [require('@babel/plugin-proposal-decorators').default, {legacy: true}],

  // old 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,
];

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);
  return [
    reactLoadableRoutes,
    options.noChunk ? dynamicImportWebpack: syntaxDynamicImport,

#!/usr/bin/env node

/**
 * Copyright (c) 2017-present, Facebook, Inc.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */

require('@babel/register')({
  babelrc: false,
  only: [__dirname, `${process.cwd()}/core`],
  plugins: [
    require('./server/translate-plugin.js'),
    require('@babel/plugin-proposal-class-properties').default,
    require('@babel/plugin-proposal-object-rest-spread').default,
  ],
  presets: [
    require('@babel/preset-react').default,
    require('@babel/preset-env').default,
  ],
});

const program = require('commander');
const chalk = require('chalk');
const glob = require('glob');
const fs = require('fs-extra');
const mkdirp = require('mkdirp');
const path = require('path');

const readMetadata = require('./server/readMetadata.js');

[
        require('@babel/preset-react').default,
        {
          development: isDevelopmentEnv || isTestEnv,
          useBuiltIns: true
        }
      ]
    ].filter(Boolean),
    plugins: [
      require('babel-plugin-macros'),
      require('@babel/plugin-syntax-dynamic-import').default,
      require('@babel/plugin-proposal-export-default-from').default,
      isTestEnv && require('babel-plugin-dynamic-import-node'),
      require('@babel/plugin-transform-destructuring').default,
      [
        require('@babel/plugin-proposal-class-properties').default,
        {
          loose: true
        }
      ],
      [
        require('@babel/plugin-proposal-object-rest-spread').default,
        {
          useBuiltIns: true
        }
      ],
      [
        require('@babel/plugin-transform-runtime').default,
        {
          helpers: false,
          regenerator: true,
          corejs: false

const { join } = require('path');

const ModuleRewrite = require('babel-plugin-module-rewrite').default;
const ObjectRestSpread = require('@babel/plugin-proposal-object-rest-spread').default;
const ClassProperties = require('@babel/plugin-proposal-class-properties').default;
const ModulesCommonJS = require('@babel/plugin-transform-modules-commonjs').default;
const AddModuleExports = require('babel-plugin-add-module-exports');
const Classes = require('@babel/plugin-transform-classes').default;
const BlockScoping = require('@babel/plugin-transform-block-scoping').default;
const ArrowFunctions = require('@babel/plugin-transform-arrow-functions').default;
const ShorthandProperties = require('@babel/plugin-transform-shorthand-properties').default;
const ObjectDestructuring = require('@babel/plugin-transform-destructuring').default;
const Parameters = require('@babel/plugin-transform-parameters').default;
const Spread = require('@babel/plugin-transform-spread').default;
const TemplateLiterals = require('@babel/plugin-transform-template-literals').default;
const ForOf = require('@babel/plugin-transform-for-of').default;
const ComputedProperties = require('@babel/plugin-transform-computed-properties').default;
const ElementClasses = require('babel-plugin-transform-custom-element-classes');

const esmFunc = join(__dirname, 'utils/replace-esm.js');
const cjsFunc = join(__dirname, 'utils/replace-cjs.js');

],
      [
        require('@babel/preset-react').default,
        {
          development: isDevelopmentEnv || isTestEnv,
          useBuiltIns: true
        }
      ]
    ].filter(Boolean),
    plugins: [
      require('babel-plugin-macros'),
      require('@babel/plugin-syntax-dynamic-import').default,
      isTestEnv && require('babel-plugin-dynamic-import-node'),
      require('@babel/plugin-transform-destructuring').default,
      [
        require('@babel/plugin-proposal-class-properties').default,
        {
          loose: true
        }
      ],
      [
        require('@babel/plugin-proposal-object-rest-spread').default,
        {
          useBuiltIns: true
        }
      ],
      [
        require('@babel/plugin-transform-runtime').default,
        {
          helpers: false,
          regenerator: true,
          corejs: false

require('@babel/preset-env').default,
        {
          forceAllTransforms: true,
          useBuiltIns: 'entry',
          modules: false,
          exclude: ['transform-typeof-symbol']
        }
      ]
    ].filter(Boolean),
    plugins: [
      require('babel-plugin-macros'),
      require('@babel/plugin-syntax-dynamic-import').default,
      isTestEnv && require('babel-plugin-dynamic-import-node'),
      require('@babel/plugin-transform-destructuring').default,
      [
        require('@babel/plugin-proposal-class-properties').default,
        {
          loose: true
        }
      ],
      [
        require('@babel/plugin-proposal-object-rest-spread').default,
        {
          useBuiltIns: true
        }
      ],
      [
        require('@babel/plugin-transform-runtime').default,
        {
          helpers: false,
          regenerator: true
        }