Skip to content
Babel preset for JS used at Kiwi.com
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
src
.npmignore
CHANGELOG.md
LICENSE
README.md
package.json

README.md

This package doesn't support React Native

This preset simplifies Babel configuration for modern JavaScript we use at Kiwi.com. There are two transpilation targets available: JS (default) and Flow. JavaScript transpilation target adds these features:

  • Flow support (a: string)
  • JSX support <Component />
  • class properties class A { b = 1; }
  • optional chaining a?.b
  • nullish coalescing operator a ?? b
  • object rest spread {...a}
  • dev expression __DEV__
  • capturing groups in RegExp /(?<year>[0-9]{4})/
  • support for Relay fragments graphql ...
  • granular imports of Orbit components (see: https://www.npmjs.com/package/@kiwicom/babel-plugin-orbit-components)
  • transforms invariant from @kiwicom/js
  • transforms warning from @kiwicom/js
  • and many more ...

This preset uses env preset behind the scenes which means it transpiles JS to the current Node.js version you are running. Therefore it's recommended to do the transpilation in your Docker container that is identical to your production version. On top of that it transpiles code to be compatible with our front-end requirements (last 2 versions, ie >= 11). You can also choose Flow as a transpilation target (see bellow). This mode uses only these features:

  • declares __DEV__ expression when used

Do you like our open source? We are looking for skilled JavaScript developers to help us build it. Check our open positions: https://jobs.kiwi.com/

Usage

Install this package:

yarn add --dev @babel/core @kiwicom/babel-preset-kiwicom

And use it in your babel.config.js:

// @flow

/*::

type ApiType = {|
  +cache: {|
    forever: () => void
  |}
|}

*/

module.exports = function(api /*: ApiType */) {
  api.assertVersion(7);
  api.cache.forever();

  const presets = ['@kiwicom/babel-preset-kiwicom'];
  const extraPlugins = [];

  return {
    presets,
    plugins: extraPlugins,
  };
};

Alternatively, you can specify the transpilation target:

module.exports = function(api /*: ApiType */) {
  api.assertVersion(7);
  api.cache.forever();

  return {
    presets: [
      [
        '@kiwicom/babel-preset-kiwicom',
        {
          target: 'flow', // or 'js' (default)
        },
      ],
    ],
  };
};

What is the difference between these transpilation targets? JavaScript target transpiles your code so it can run in any Node.js and browsers environment with the modern JS features whereas Flow only tweaks the exported types so they can be used in different projects (but leaves JS code as is).

Prior art

You can’t perform that action at this time.