babel-preset-smooth-react-app

babel-preset-smooth-react-app is a Babel preset for smooth Create React Apps.

It is a light wrapper around babel-preset-react-app that allows you to:

• Write JSX in JavaScript without adding react imports.
• Write class and for attributes in JSX elements.
• Import modules from paths specified in jsconfig.json.

Installation

Add babel-preset-smooth-react-app to your project:

npm install babel-preset-smooth-react-app --save-dev

Usage

Add babel-preset-smooth-react-app to your babel configuration:

// babel.config.js
{
  "presets": ["smooth-react-app"]
}

Define path mapping in tsconfig.json or jsconfig.json:

// tsconfig.json or jsconfig.json
{
  "compilerOptions": {
    "baseUrl": "src",
    "paths": {
      "@com/*": ["components/*"],
      "@css/*": ["components/*.module.css"]
    }
  }
}

Enjoy writing a smooth React App:

// App.js (before)
import Button from '@com/Button';
import style from '@css/Button/style';

export const App = props => <Button class={style.Button}>{props.children}</Button>;

// App.js (after)
import { createElement } from 'react';
import Button from '/path/to/src/components/Button';
import ButtonStyle from '/path/to/src/components/style.module.css';

export const App = props => createElement(Button, { className: style.Button }, props.children);

Options

All options are passed through into babel-preset-react-app, with additional options provided to other plugins.

pragma

The pragma option defines how the element creation function is added.

// transforms <foo /> into createElement('foo') and potentially imports React (default)
{
  pragma: '{ createElement } from react'
}

// transforms <foo /> into h('foo') and potentially imports Preact
{
  pragma: '{ h } from preact'
}

pragmaFrag

The pragmaFrag option defines how the fragment creation function is added.

// transforms <></> into Fragment and potentially imports React (default)
{
  pragmaFrag: '{ Fragment } from react'
}

// transforms <></> into Fragment and potentially imports Preact
{
  pragmaFrag: '{ Fragment } from preact'
}

throwIfNamespace

The throwIfNamespace option toggles whether or not to throw an error if a XML namespaced tag name is used. For example:

// will not throw (default)
<f:image />

development

The development option toggles plugins that aid in development, such as [@babel/plugin-transform-react-jsx-self] and [@babel/plugin-transform-react-jsx-source].

useBuiltIns

The useBuiltIns option determines whether the preset should use native built-ins instead of trying to polyfill behavior for any plugins requiring it.