htr

Crates.iohtr
lib.rshtr
version0.5.27
sourcesrc
created_at2022-07-13 20:23:57.838683
updated_at2023-03-06 15:19:21.724483
descriptionconvert html to react fast
homepage
repositoryhttps://github.com/a11ywatch/htr
max_upload_size
id625250
size23,692
Jeff Mendez (j-mendez)

documentation

https://docs.rs/htr

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.

[dependencies]
htr = "0.5.26"
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"}}>
}
extern crate htr;
use htr::convert_to_react;

/// convert html to react component
fn main(){
    let html = r#"
        <script>window.alert()</script>
        <div class="something" for="mystuff" tabindex="2" style="color: white; background-color: black">
            <div class="child" for="mychildstuff" tabindex="2">
                child
            </div>
        </div>
        <span class="react" style="position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 577px; "
        ></span>
        "#;

    let react_component = convert_to_react(&html.to_string(), "Something");

    println!("{}", react_component);
    // import React from "react"
    //
    // function Something() {
    //     return (
    //        <>
    //            <script>{`window.alert()`}</script>
    //                <div className="something" htmlFor="mystuff" tabIndex="2" style={{color: "white", backgroundColor: "black"}}>
    //                  <div className="child" htmlFor="mychildstuff" tabIndex="2">
    //                      child
    //                  </div>
    //              </div>
    //              <span className="react" style={{position: "relative", display: "block", marginLeft: "auto", marginRight: "auto", maxWidth: "577px"}}
    //              ></span>
    //        </>
    //     )
    // }
}

CLI

If you need Command Line usage.

cargo install htr_cli

# transform to react
htr transform --html '<div class="something" for="mystuff" tabindex="2" style="color: white; background-color: black">'

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 of this being used with 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: <div>{</div>

License

MIT

Commit count: 21

cargo fmt