Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

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

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)