feat: data flow between renderer and main process

vrsjmp/src-tauri/src/main.rs

@@ -1,13 +1,27 @@
 #![cfg_attr(not(debug_assertions), windows_subsystem = "windows")]
 
+use serde_json::json;
+
+#[tauri::command]
+fn set_query(query: &str) -> Vec<serde_json::Value> {
+    let mut result = vec![];
+    for i in 0..=10 {
+        result.push(json!({
+            "title": format!("{} {}", query, i),
+            "on_click": format!("(send {})", i),
+        }))
+    }
+    result
+}
+
 #[tauri::command]
-fn eval(input: &str) -> String {
-    format!("eval({}) = TODO", input)
+fn dispatch(form: &str) {
+    println!("received {}", form);
 }
 
 fn main() {
     tauri::Builder::default()
-        .invoke_handler(tauri::generate_handler![eval])
+        .invoke_handler(tauri::generate_handler![set_query, dispatch])
         .run(tauri::generate_context!())
         .expect("error while running tauri application");
 }

vrsjmp/src/index.html

@@ -16,7 +16,7 @@
         <form id="input-form">
             <input id="input-field" />
         </form>
-        <p id="output"></p>
+        <div id="output-list"></div>
     </div>
 </body>
 

vrsjmp/src/main.js

@@ -1,17 +1,32 @@
 const { invoke } = window.__TAURI__.tauri;
 
 let inputEl;
-let outputEl;
+let outputListEl;
 
-async function runEval(input) {
-    outputEl.textContent = await invoke("eval", { input: input });
+async function dispatch(form) {
+    await invoke("dispatch", { form: form });
+}
+
+async function setQuery(query) {
+    const items = await invoke("set_query", { query: query });
+
+    outputListEl.replaceChildren();
+    for (const item of items) {
+        const itemButton = document.createElement('button')
+        itemButton.classList = ['output-item'];
+        itemButton.innerText = item['title'];
+        itemButton.addEventListener('click', (e) => {
+            dispatch(item['on_click']);
+        });
+        outputListEl.appendChild(itemButton);
+    }
 }
 
 window.addEventListener("DOMContentLoaded", () => {
     inputEl = document.querySelector("#input-field");
-    outputEl = document.querySelector("#output");
-    document.querySelector("#input-form").addEventListener("submit", (e) => {
+    outputListEl = document.querySelector("#output-list");
+    inputEl.addEventListener("input", (e) => {
         e.preventDefault();
-        runEval(inputEl.value);
+        setQuery(inputEl.value);
     });
 });

vrsjmp/src/styles.css

@@ -12,23 +12,49 @@
 
     background-color: #0f0f0f;
     border-radius: 16px;
+}
 
+.container {
+    padding: 2px;
 }
 
 #input-field {
     color: white;
 
-    background-color: transparent;
-    border-radius: 8px;
+    background-color: #020202;
+    border-radius: 10px;
+    padding: 0.5em;
 
-    font-size: 1.6em;
+    font-size: 1.2em;
     outline: none;
     border: none;
 
-    height: 100%;
+    margin: 0;
+    margin-bottom: 16px;
     width: 100%;
+
+    display: block;
+    box-sizing: border-box;
 }
 
-#output {
+#output-list {
     color: white;
 }
+
+.output-item {
+    display: block;
+    width: 100%;
+    /* height: 2rem; */
+    color: #dedede;
+    border: none;
+    text-align: start;
+    font-size: 1.2em;
+    margin: 0;
+    margin-bottom: 0.2rem;
+    padding: 8px;
+    background-color: transparent;
+}
+
+.output-item:focus {
+    background-color: gray;
+}