# @fattafatta/babel-plugin-rescript-react-to-jsx

> Transforms ReScript React.createElement calls back to JSX syntax

Latest version **0.3.1** (published 2023-03-10) · GPL-3.0 license · 0 weekly downloads

## Install

```sh
npm install @fattafatta/babel-plugin-rescript-react-to-jsx
pnpm add @fattafatta/babel-plugin-rescript-react-to-jsx
yarn add @fattafatta/babel-plugin-rescript-react-to-jsx
bun add @fattafatta/babel-plugin-rescript-react-to-jsx
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.3.1 |
| Published | 2023-03-10 |
| First published | 2022-06-17 |
| Weekly downloads | 0 |
| License | GPL-3.0 |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 2 |
| Unpacked size | 69.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Author | Fattafatta |
| Maintainers | fattafatta |
| Keywords | babel-plugin, react, rescript, jsx |

## Links

- npm: https://www.npmjs.com/package/@fattafatta/babel-plugin-rescript-react-to-jsx
- Repository: https://github.com/Fattafatta/babel-plugin-rescript-react-to-jsx
- Homepage: https://github.com/Fattafatta/babel-plugin-rescript-react-to-jsx#readme
- Issues: https://github.com/Fattafatta/babel-plugin-rescript-react-to-jsx/issues
- npm.io page: https://npm.io/package/@fattafatta/babel-plugin-rescript-react-to-jsx

## Dependencies (2)

- [core-js](https://npm.io/package/core-js.md) ^3.29.0
- [@babel/plugin-syntax-jsx](https://npm.io/package/@babel/plugin-syntax-jsx.md) ^7.18.6

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 0.3.1 (latest) — 2023-03-10
- 0.3.0 — 2023-03-09
- 0.2.0 — 2023-03-08
- 0.1.0 — 2022-06-17

## README

# babel-plugin-rescript-react-to-jsx

Transforms code compiled by [ReScript](https://rescript-lang.org/) to JSX. This is done by turning function calls of `React.createElement` (and similar) back to JSX syntax.

The goal of this transformation is to support [solidJs](https://github.com/solidjs/solid) (or similar libraries), that use their own compiler to convert JSX to JavaScript.

## Info

There is an open issue for ReScript for enabling a JSX-preserve-mode: <https://github.com/rescript-lang/syntax/issues/539>. Until this is done, this babel plugin can function as a workaround.

## Installation

This plugin is meant to be used together with solidJs. No other frameworks have been tested (but they might work).

```sh
$ npm install @fattafatta/babel-plugin-rescript-react-to-jsx babel-preset-solid --save-dev

# or

yarn add @fattafatta/babel-plugin-rescript-react-to-jsx babel-preset-solid --dev
```

## Usage

The plugin supports JSX versions 3 and 4 with automatic version detection.

### Via config file

Add this to your `.babelrc`:

```json
{
  "plugins": [ "@fattafatta/babel-plugin-rescript-react-to-jsx" ],
  "presets": [ "solid" ]
}
```

### With `vite`

The normal `vite-plugin-solid` plugin does not work (Because of issues with the order of transformations and file extensions). We have to use babel directly.

Install `vite-plugin-babel` and `@jihchi/vite-plugin-rescript`:

```shell
npm install vite-plugin-babel @jihchi/vite-plugin-rescript --save-dev

# or
yarn add vite-plugin-babel @jihchi/vite-plugin-rescript --dev
```

Configure `vite.config.js`

```js
import { defineConfig } from "vite";
import createReScriptPlugin from "@jihchi/vite-plugin-rescript";
import babel from "vite-plugin-babel";

export default defineConfig({
  plugins: [
    createReScriptPlugin(),
    babel({
      babelConfig: {
        plugins: ["@fattafatta/babel-plugin-rescript-react-to-jsx"],
        presets: ["solid"],
      },
    }),
  ],
});
```
The babel plugin works with either the `.babelrc` file or by passing the config directly.

### Via CLI

Make sure to use the correct file extension when transforming files. ReScript files end on `.bs.js`. But JSX files should use `.jsx`.

```sh
babel --no-babelrc --plugins @fattafatta/babel-plugin-rescript-react-to-jsx script.bs.js > script.jsx
```

## Acknowledgements

This plugin is based on [babel-plugin-transform-react-createelement-to-jsx](https://github.com/flying-sheep/babel-plugin-transform-react-createelement-to-jsx). The original plugin focussed on transforming react jsx only. So it didn't fit the ReScript use case.

---
_Source: https://npm.io/package/@fattafatta/babel-plugin-rescript-react-to-jsx · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._