babel-preset-smooth-react
v1.0.0
Published
A babel preset for smooth Create React Apps
Downloads
9
Maintainers
Readme
babel-preset-smooth-react
babel-preset-smooth-react is a Babel preset for smooth React projects.
It is a light wrapper around babel-preset-react that allows you to:
- Write JSX in JavaScript without adding
react
imports. - Write
class
andfor
attributes in JSX elements. - Import modules from
paths
specified injsconfig.json
.
Installation
Add babel-preset-smooth-react to your project:
npm install babel-preset-smooth-react --save-dev
Usage
Add babel-preset-smooth-react to your babel configuration:
// babel.config.js
{
"presets": ["smooth-react"]
}
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 smooth React:
// 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, 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.