rescript-smooth

    1.0.2 • Public • Published

    rescript-smooth

    npm version build status issue tracker pull requests

    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.

    Install

    npm i rescript-smooth

    DownloadsWeekly Downloads

    3

    Version

    1.0.2

    License

    CC0-1.0

    Unpacked Size

    14.4 kB

    Total Files

    5

    Last publish

    Collaborators

    • jonathantneal