htr 0.5.19

convert a html string to react
Documentation 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75

# 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.4"
```

```rust
extern crate htr;
use htr::convert_props_react;

fn main(){
    let html = r#"<div class="something" for="mystuff" tabindex="2" style="color: white; background-color: black">"#;
    let react_html = convert_props_react(html.to_string());

    println!("{}", react_html);
    // <div className="something" htmlFor="mystuff" tabIndex="2" style={{color: "white", backgroundColor: "black"}}>
}
```

```rust
extern crate htr;
use htr::convert_to_react;

/// convert html to react component
fn main(){
    let html = r#"<div class="something" for="mystuff" tabindex="2" style="color: white; background-color: black">"#;
    let react_component = convert_to_react(html.to_string(), "Something");

    println!("{}", react_component);
    // import React from "react"
    //
    // function Something() {
    //     return (
    //         <div className="something" htmlFor="mystuff" tabIndex="2" style={{color: "white", backgroundColor: "black"}}>
    //             <div className="child" htmlFor="mychildstuff" tabIndex="2" style={{color: "white", backgroundColor: "black"}}>
    //                 child
    //             </div>
    //         </div>
    //     )
    // }
}
```

## 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 with backticks
1. fix parsing css url() base64 data trailing comma issues

## License

[MIT](./LICENSE)