html-to-jsx-transform
A library for converting an HTML string into a JSX string using ASTs.
Documentation
•
Development
•
Contribute
---
`html-to-jsx-transform` transforms a string of HTML into JSX. It works by
turning it into an AST using [`parse5`](https://parse5.js.org/index.html),
converting every node to its equivalent JSX node to create a Babel AST and then
stringifying that using
[`@babel/generator`](https://babeljs.io/docs/en/babel-generator).
The library is tested for a variety of different scenarios, if you happen to
find a flaw please open an issue so we can add it to the test suite.
## ❯ Documentation
- [`htmlToJsx`](#htmlToJsx)
### `htmlToJsx`
Takes a string of HTML and synchronously returns a string with the equivalent
JSX source code.
#### Example
```ts
import { htmlToJsx } from "html-to-jsx-transform";
const jsx = htmlToJsx('Hello World!
');
// jsx === 'Hello World!
';
```
#### Behavior
##### Elements
- `style` and `script` elements get template literal bodies wrapped in curly
braces
- Adjacent elements are wrapped in a Fragment (`<>...`)
##### Attributes
- `style` attributes are parsed into objects
- Attributes are renamed and casing is adjusted (including SVG)
- Event handlers are converted into arrow functions
- Boolean and numeric attributes are converted into boolean or number values
## ❯ Development
This library is best developed by writing test cases first. Tests can be
executed by running `npm test`.
### Releasing a new version on NPM
To release a new version on npm, run `npm version (patch|minor|major)` to
increase the version. This will create a Git tag for you.
Then run `npm publish`, the `prepublishOnly` hook will test and build the
package and then publish it.
## ❯ Contribute
If you think you have any ideas that could benefit the project, feel free to
create an issue or pull request!
---
Project by Leo Driesch, released under MIT license.
