[![Build Status](https://netology-group.semaphoreci.com/badges/babel-preset-react-app/branches/master.svg?style=shields&key=6e65aff2-b9d1-4986-a133-2469c79ef427)](https://netology-group.semaphoreci.com/projects/babel-preset-react-app)


# Babel preset for foxford js apps

Forked from [babel-preset-react-app](https://github.com/facebook/create-react-app/blob/master/packages/babel-preset-react-app/) v10.0.0

First, [install Babel](https://babeljs.io/docs/setup/).

Then install @foxford/babel-preset-react-app.

```sh
pnpm add @foxford/babel-preset-react-app --save-dev
```

Then create a file named `.babelrc` with following contents in the root folder of your project:

```json
{
  "presets": ["@foxford/babel-preset-react-app"]
}
```

This preset uses the `useBuiltIns` option with [transform-object-rest-spread](http://babeljs.io/docs/plugins/transform-object-rest-spread/) and [transform-react-jsx](http://babeljs.io/docs/plugins/transform-react-jsx/), which assumes that `Object.assign` is available or polyfilled.

## Usage with Flow

Make sure you have a `.flowconfig` file at the root directory. You can also use the `flow` option on `.babelrc`:

```json
{
  "presets": [["@foxford/babel-preset-react-app", { "flow": true, "typescript": false }]]
}
```

## Usage with TypeScript

Make sure you have a `tsconfig.json` file at the root directory. You can also use the `typescript` option on `.babelrc`:

```json
{
  "presets": [["@foxford/babel-preset-react-app", { "flow": false, "typescript": true }]]
}
```

## Absolute Runtime Paths

Absolute paths are enabled by default for imports. To use relative paths instead, set the `absoluteRuntime` option in `.babelrc` to `false`:

```
{
  "presets": [["@foxford/babel-preset-react-app", { "absoluteRuntime": false }]]
}
```

## Options
```js
type PresetOptions {
  absoluteRuntime: boolean,
  flow: boolean,
  typescript: boolean,
  debug: boolean,
  envUseBuiltIns: 'entry' | 'usage',
  presetEnvDisabled: boolean, // disable preset-env plugin
  targets: {}, // preset-env targets
  mjs: boolean, // esmodules targets for preset-env
  useESModules: boolean, // https://babeljs.io/docs/en/babel-plugin-transform-runtime#useesmodules
  runtime: 'classic' | 'automatic' // use new jsx transform
}
```

## Plugins

```
  "@babel/plugin-proposal-class-properties"
  "@babel/plugin-proposal-decorators"
  "@babel/plugin-proposal-nullish-coalescing-operator"
  "@babel/plugin-proposal-numeric-separator"
  "@babel/plugin-proposal-optional-chaining"
  "@babel/plugin-transform-flow-strip-types"
  "@babel/plugin-transform-react-display-name"
  "@babel/plugin-proposal-export-default-from"
  "@babel/plugin-transform-runtime"
```