https://github.com/a11ywatch/htr
Extremely fast html to react transformer
https://github.com/a11ywatch/htr
html-to-react html-transpiler react transformer
Last synced: 11 months ago
JSON representation
Extremely fast html to react transformer
- Host: GitHub
- URL: https://github.com/a11ywatch/htr
- Owner: a11ywatch
- License: mit
- Created: 2022-07-12T16:27:04.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2023-03-06T15:19:13.000Z (about 3 years ago)
- Last Synced: 2025-03-29T10:43:46.342Z (12 months ago)
- Topics: html-to-react, html-transpiler, react, transformer
- Language: Rust
- Homepage: https://docs.rs/htr/latest/htr
- Size: 61.5 KB
- Stars: 3
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# htr
Fast html to react jsx transformer
## Getting Started
This project transforms html into react jsx markup.
This helps when using find and replace tools when you scrape content getting raw html and need a way to convert it back to the form it would be in a valid React codebase.
```toml
[dependencies]
htr = "0.5.26"
```
```rust
extern crate htr;
use htr::convert_props_react;
fn main(){
let html = r#"
"#;
let react_html = convert_props_react(html.to_string());
println!("{}", react_html);
//
}
```
```rust
extern crate htr;
use htr::convert_to_react;
/// convert html to react component
fn main(){
let html = r#"
window.alert()
child
"#;
let react_component = convert_to_react(&html.to_string(), "Something");
println!("{}", react_component);
// import React from "react"
//
// function Something() {
// return (
// <>
// {`window.alert()`}
//
//
// child
//
//
//
// >
// )
// }
}
```
## CLI
If you need [Command Line](./htr_cli/) usage.
```
cargo install htr_cli
# transform to react
htr transform --html '
'
```
## Benchmark Results
### transform
| `64gb apple silicon` | `parse` |
| :---------------------------------------------------- | :-------------------------- |
| **`convert_props_react: simultaneous 1000 samples`** | `4.86 us` (✅ **1.00x**) |
| **`convert_props_react: concurrent10x 1000 samples`** | `45.130 us` (✅ **10.00x**) |
## About
This project uses BTrees and parses the html with the order sorted before lookup for speed.
An [example](https://github.com/A11yWatch/a11ywatch/blob/main/cli/src/fs/code_fix.rs) of this being used with [ripgrep](https://github.com/BurntSushi/ripgrep) to perform search and replace from scraped content to find exactly where in the codebase it would be, the react way.
## TODO
1. inline symbols handling ex: `
{`
## License
[MIT](./LICENSE)