rescript-smooth

rescript-smooth is a rescript configuration for smooth React Apps, allowing you to:

• Use JSX in JavaScript without adding react imports.
• Use class and for attributes in JSX elements.
• Support path mapping specified in jsconfig.json.
• Use your own babel, eslint, and postcss configurations as needed.
• Enable CSS sourcemaps in development.

Installation

Add rescript-smooth to your Create React App project:

npm install rescript-smooth

Usage

Add rescript-smooth to your rescript configuration:

// package.json
{
  "rescripts": ["smooth"]
}

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

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

Enjoy writing a smooth React App:

// App.js (before)
import Button from '@app/Button';
import style from '@css/Button';
 
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/Button/index.module.css';
 
export const App = props => createElement(Button, { className: style.Button }, props.children);

FAQ

How do I use this with the default Babel configuration?

Add a babel configuration with the following fields:

// .babelrc.json, or "babel" in package.json
{
  "presets": "react-app"
}

What if I want the smooth Babel configuration?

// .babelrc.json, or "babel" in package.json
{
  "presets": "smooth-react-app"
}

How do I use this with the default Eslint configuration?

Add an eslint configuration with the following fields:

// .eslintrc.json, or "eslintConfig" in package.json
{
  "extends": "react-app"
}

What if I want the smooth Eslint configuration?

// .eslintrc.json, or "eslintConfig" in package.json
{
  "extends": "smooth-react-app"
}

How do I use this with the default PostCSS configuration?

Add a PostCSS configuration with the following fields:

// .postcssrc.json
{
  "plugins": [
    "postcss-flexbug-fixes",
    ["postcss-preset-env", { autoprefixer: { flexbox: "no-2009" }, stage: 3 }],
    "postcss-normalize"
  ]
}

What if I want the smooth PostCSS configuration?

The default and smooth PostCSS configurations are the same.