Include HTML formatting

html-query-extractor/src/lib.rs

@@ -114,6 +114,7 @@ fn convert_to_output(item: &Action, roots: &Vec<ElementRef>) -> Value {
 pub fn extract(input: &str, actions: &HashMap<&str, Action>) -> Value {
     let fragment = Html::parse_fragment(input);
     let root = fragment.root_element();
+    println!("html: {}", root.html());
     let hashmap = actions
         .into_iter()
         .map(|(key, value)| (key.to_string(), convert_to_output(&value, &vec![root])))

html-query-web-ui/Cargo.toml

@@ -14,6 +14,7 @@ html-query-extractor = {version= "0.1.1", path= "../html-query-extractor" }
 serde_json = { version = "1.0.96", default-features = false }
 web-sys = { version = "0.3.61", features = ["console"] }
 serde = { version = "1.0.160", features = ["derive"] }
+wasm-bindgen = "0.2.84"
 
 [package.metadata.release]
 release = false

html-query-web-ui/src/format.js

@@ -0,0 +1,3 @@
+function foo() {
+    return 1
+}

html-query-web-ui/src/main.rs

@@ -5,6 +5,7 @@ use std::borrow::Cow;
 use std::collections::HashMap;
 // import the prelude to get access to the `rsx!` macro and the `Scope` and `Element` types
 use dioxus::prelude::*;
+use dioxus_web::use_eval;
 use html_query_ast::{parse_string, Action};
 use html_query_extractor::extract;
 use serde::Deserialize;
@@ -41,6 +42,28 @@ static HN_CONTENT: &'static str = include_str!("examples/hn.html");
 
 type ExampleTuple<'a> = (&'static str, &'static str);
 
+use wasm_bindgen::prelude::*;
+
+#[wasm_bindgen]
+extern "C" {
+    fn html_beautify(s: &str) -> JsValue;
+}
+
+// #[wasm_bindgen(module = "format.js")]
+// extern "C" {
+//     #[wasm_bindgen(js_name = "default")]
+//     type Web3;
+//
+//     #[wasm_bindgen(constructor, js_class = "default")]
+//     fn new(_: &Provider) -> Web3;
+//
+//     #[wasm_bindgen(static_method_of = Web3, getter, js_class = "default")]
+//     fn givenProvider() -> Provider;
+//
+//     type Provider;
+// }
+
+
 #[inline_props]
 fn Examples<'a>(cx: Scope<'a>, on_input: EventHandler<'a, ExampleTuple<'a>>) -> Element {
     let examples: Examples = serde_json::from_str(include_str!("examples/examples.json")).unwrap();
@@ -67,6 +90,8 @@ fn App(cx: Scope) -> Element {
     let parsed = parse_string(expression);
     let html = use_state(cx, || "foo".to_string());
 
+    // log!("{:?}", html_beautify(html));
+
     let output = match &parsed {
         Ok(parsed) => {
             let output = extract(html, parsed);
@@ -76,6 +101,15 @@ fn App(cx: Scope) -> Element {
     };
 
     cx.render(rsx! {
+        p {
+            class: "title is-1",
+            "hq: jq, but for HTML"
+        }
+        // p {
+        //     class: "subtitle is-3",
+        //     "test"
+        // }
+
         Examples {
             on_input: move |event: ExampleTuple| {
                 let (example_content, example_expression) = event;
@@ -95,12 +129,18 @@ fn App(cx: Scope) -> Element {
         }
 
         div { class: "columns",
-
-            div { class: "column", textarea {
-                value: "{html}",
-                class: "textarea",
-                oninput: move |evt| html.set(evt.value.clone())
-            } }
+            div { class: "column",
+                textarea {
+                    value: "{html}",
+                    class: "textarea",
+                    oninput: move |evt| html.set(evt.value.clone())
+                },
+                button {
+                    class: "button",
+                    onclick: move |event| { html.set(html_beautify(html.get()).as_string().unwrap()) },
+                    "Format HTML"
+                }
+            }
 
             div { class: "column",
                 pre { style: "white-space: pre-wrap;", code { "{output}" } }

index.html

@@ -13,6 +13,10 @@
   <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/9000.0.1/prism.min.js"
           integrity="sha512-UOoJElONeUNzQbbKQbjldDf9MwOHqxNz49NNJJ1d90yp+X9edsHyJoAs6O4K19CZGaIdjI5ohK+O2y5lBTW6uQ=="
           crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/js-beautify/1.14.7/beautify.min.js"></script>
+<!--  <script src="https://cdnjs.cloudflare.com/ajax/libs/js-beautify/1.14.7/beautify-css.min.js"></script>-->
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/js-beautify/1.14.7/beautify-html.min.js"></script>
   {style_include}
 </head>
 <body>