@flowio/babel-preset-flowio

@flowio/babel-preset-flowio

A Babel preset for transforming your JavaScript for Flow Commerce.

The following stage 4 syntax is excluded:

• generators: regenerator-runtime is too heavyweight for our use.

• async/await: regenerator-runtime is too heavyweight for our use, and async-to-promises is not yet complete enough to be safely used.

• async iterators: depends on both generators and async functions

Installation

$ npm install --save-dev @flowio/babel-preset-flowio

You must also install @babel/runtime as a production dependency:

$ npm install --save @babel/runtime

This preset includes the @babel/plugin-transform-runtime, which is used to externalize references to helpers and builtins by importing them from the @babel/runtime module.

Usage

Via .babelrc (Recommended)

.babelrc

{
  "presets": ["@flowio/babel-preset-flowio"]
}

Via CLI

$ babel script.js --presets flowio

Via Node API

require("babel-core").transform("code", {
  presets: ["@flowio/babel-preset-flowio"]
});

JavaScript

This preset includes @babel/preset-env to target specific environments.

You may use the target option to describe the environments you support for your project.

{
  "presets": [
    ["@flowio/babel-preset-flowio", {
      "targets": "> 0.25%, not dead"
    }]
  ]
}

You may also leverage the Browserlist integration instead.

You may use the modules option to enable transformation of ES6 module syntax to another module type.

{
  "presets": [
    ["@flowio/babel-preset-flowio", {
      "modules": false
    }]
  ]
}

You may use the debug option to print configuration details to console.log.

{
  "presets": [
    ["@flowio/babel-preset-flowio", {
      "debug": true
    }]
  ]
}

React

This preset can be configured to include @babel/preset-react. To enable this transformation, set the react option to true:

{
  "presets": [
    ["@flowio/babel-preset-flowio", {
      "react": true
    }]
  ]
}

Development Mode

When process.env.NODE_ENV is not 'production', the development mode will be set for @babel/preset-react.

You may override our default development option by providing your own.

{
  "presets": [
    ["@flowio/babel-preset-flowio", {
      "development": false
    }]
  ]
}

PropTypes Removal

This preset can also be configured to remove propTypes using babel-plugin-transform-react-remove-prop-types with the following default options:

To enable this transformation with the default options, set the removePropTypes option to true:

{
  "presets": [
    ["@flowio/babel-preset-flowio", {
      "removePropTypes": true
    }]
  ]
}

The default options that will be used are:

{
  "mode": "wrap",
  "ignoreFilenames": ["node_modules"]
}

Default options can be overridden using the removePropTypes option. These options will be shallow-merged with the defaults:

{
  "presets": [
    ["@flowio/babel-preset-flowio", {
      "removePropTypes": {
        "mode": "remove"
      }
    }]
  ]
}

For example, you might want to use the remove mode for your production build and disable this transform entirely in development for optimal build speeds.

TypeScript

This preset can be configured to include @babel/preset-typescript. To enable this transformation, set the typescript option to true:

{
  "presets": [
    ["@flowio/babel-preset-flowio", {
      "typescript": true
    }]
  ]
}

License

MIT