Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
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: about 2 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 2 years ago)
- Default Branch: main
- Last Pushed: 2023-03-06T15:19:13.000Z (almost 2 years ago)
- Last Synced: 2024-10-31T11:35:15.677Z (about 2 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)