basic example working with binary protocol on desktop

packages/desktop/Cargo.toml

@@ -73,6 +73,10 @@ dioxus = { workspace = true }
 exitcode = "1.1.2"
 scraper = "0.16.0"
 
+[build-dependencies]
+dioxus-interpreter-js = { workspace = true, features = ["sledgehammer"] }
+minify-js = "0.5.6"
+
 # These tests need to be run on the main thread, so they cannot use rust's test harness.
 [[test]]
 name = "check_events"

packages/desktop/build.rs

@@ -0,0 +1,50 @@
+use dioxus_interpreter_js::SLEDGEHAMMER_JS;
+
+use std::io::Write;
+
+fn main() {
+    let prevent_file_upload = r#"// Prevent file inputs from opening the file dialog on click
+    let inputs = document.querySelectorAll("input");
+    for (let input of inputs) {
+      if (!input.getAttribute("data-dioxus-file-listener")) {
+        // prevent file inputs from opening the file dialog on click
+        const type = input.getAttribute("type");
+        if (type === "file") {
+          input.setAttribute("data-dioxus-file-listener", true);
+          input.addEventListener("click", (event) => {
+            let target = event.target;
+            let target_id = find_real_id(target);
+            if (target_id !== null) {
+              const send = (event_name) => {
+                const message = serializeIpcMessage("file_diolog", { accept: target.getAttribute("accept"), directory: target.getAttribute("webkitdirectory") === "true", multiple: target.hasAttribute("multiple"), target: parseInt(target_id), bubbles: event_bubbles(event_name), event: event_name });
+                window.ipc.postMessage(message);
+              };
+              send("change&input");
+            }
+            event.preventDefault();
+          });
+        }
+      }
+    }"#;
+    let mut interpreter = SLEDGEHAMMER_JS.replace("/*POST_HANDLE_EDITS*/", prevent_file_upload);
+    while let Some(import_start) = interpreter.find("import") {
+        let import_end = interpreter[import_start..]
+            .find(|c| c == ';' || c == '\n')
+            .map(|i| i + import_start)
+            .unwrap_or_else(|| interpreter.len());
+        interpreter.replace_range(import_start..import_end, "");
+    }
+
+    let js = format!("{interpreter}\nconst config = new InterpreterConfig(false);");
+    let mut file = std::fs::File::create("src/minified.js").unwrap();
+    file.write_all(js.as_bytes()).unwrap();
+
+    // TODO: Enable minification on desktop
+    // use minify_js::*;
+    // let session = Session::new();
+    // let mut out = Vec::new();
+    // minify(&session, TopLevelMode::Module, js.as_bytes(), &mut out).unwrap();
+    // let minified = String::from_utf8(out).unwrap();
+    // let mut file = std::fs::File::create("src/minified.js").unwrap();
+    // file.write_all(minified.as_bytes()).unwrap();
+}

packages/desktop/src/desktop_context.rs

@@ -1,9 +1,3 @@
-use std::cell::RefCell;
-use std::rc::Rc;
-use std::rc::Weak;
-use std::sync::Arc;
-use std::sync::Mutex;
-
 use crate::create_new_window;
 use crate::events::IpcMessage;
 use crate::query::QueryEngine;
@@ -17,6 +11,14 @@ use dioxus_hot_reload::HotReloadMsg;
 use dioxus_interpreter_js::Channel;
 use rustc_hash::FxHashMap;
 use slab::Slab;
+use std::cell::RefCell;
+use std::fmt::Debug;
+use std::fmt::Formatter;
+use std::rc::Rc;
+use std::rc::Weak;
+use std::sync::atomic::AtomicU16;
+use std::sync::Arc;
+use std::sync::Mutex;
 use wry::application::event::Event;
 use wry::application::event_loop::EventLoopProxy;
 use wry::application::event_loop::EventLoopWindowTarget;
@@ -44,8 +46,20 @@ pub(crate) struct EditQueue {
     responder: Arc<Mutex<Option<wry::webview::RequestAsyncResponder>>>,
 }
 
+impl Debug for EditQueue {
+    fn fmt(&self, f: &mut Formatter<'_>) -> std::fmt::Result {
+        f.debug_struct("EditQueue")
+            .field("queue", &self.queue)
+            .field("responder", {
+                &self.responder.lock().unwrap().as_ref().map(|_| ())
+            })
+            .finish()
+    }
+}
+
 impl EditQueue {
     pub fn handle_request(&self, responder: wry::webview::RequestAsyncResponder) {
+        println!("handling request {self:?}");
         let mut queue = self.queue.lock().unwrap();
         if let Some(bytes) = queue.pop() {
             responder.respond(wry::http::Response::new(bytes));
@@ -54,16 +68,15 @@ impl EditQueue {
         }
     }
 
-    pub fn add_edits(&self, channel: &mut Channel) {
+    pub fn add_edits(&self, edits: Vec<u8>) {
-        let iter = channel.export_memory();
+        println!("adding edits {self:?}");
-        let bytes = iter.collect();
         let mut responder = self.responder.lock().unwrap();
         if let Some(responder) = responder.take() {
-            responder.respond(wry::http::Response::new(bytes));
+            println!("responding with {edits:?}");
+            responder.respond(wry::http::Response::new(edits));
         } else {
-            self.queue.lock().unwrap().push(bytes);
+            self.queue.lock().unwrap().push(edits);
         }
-        channel.reset();
     }
 }
 
@@ -100,10 +113,10 @@ pub struct DesktopService {
     pub(crate) shortcut_manager: ShortcutRegistry,
 
     pub(crate) edit_queue: EditQueue,
-    pub(crate) templates: FxHashMap<String, u16>,
+    pub(crate) templates: RefCell<FxHashMap<String, u16>>,
-    pub(crate) max_template_count: u16,
+    pub(crate) max_template_count: AtomicU16,
 
-    pub(crate) channel: Channel,
+    pub(crate) channel: RefCell<Channel>,
 
     #[cfg(target_os = "ios")]
     pub(crate) views: Rc<RefCell<Vec<*mut objc::runtime::Object>>>,
@@ -141,8 +154,8 @@ impl DesktopService {
             shortcut_manager,
             edit_queue,
             templates: Default::default(),
-            max_template_count: 0,
+            max_template_count: Default::default(),
-            channel: Channel::default(),
+            channel: Default::default(),
             #[cfg(target_os = "ios")]
             views: Default::default(),
         }

packages/desktop/src/lib.rs

@@ -38,6 +38,7 @@ use shortcut::ShortcutRegistry;
 pub use shortcut::{use_global_shortcut, ShortcutHandle, ShortcutId, ShortcutRegistryError};
 use std::cell::Cell;
 use std::rc::Rc;
+use std::sync::atomic::AtomicU16;
 use std::task::Waker;
 use std::{collections::HashMap, sync::Arc};
 pub use tao::dpi::{LogicalSize, PhysicalSize};
@@ -449,16 +450,15 @@ fn poll_vdom(view: &mut WebviewHandler) {
 
 /// Send a list of mutations to the webview
 fn send_edits(edits: Mutations, desktop_context: &DesktopContext) {
-    if edits.edits.len() > 0 || edits.templates.len() > 0 {
+    let mut channel = desktop_context.channel.borrow_mut();
-        apply_edits(
+    let mut templates = desktop_context.templates.borrow_mut();
-            edits,
+    if let Some(bytes) = apply_edits(
-            &mut desktop_context.channel,
+        edits,
-            &mut desktop_context.templates,
+        &mut channel,
-            &mut desktop_context.max_template_count,
+        &mut templates,
-        );
+        &desktop_context.max_template_count,
-        desktop_context
+    ) {
-            .edit_queue
+        desktop_context.edit_queue.add_edits(bytes)
-            .add_edits(&mut desktop_context.channel)
     }
 }
 
@@ -466,7 +466,7 @@ fn apply_edits(
     mutations: Mutations,
     channel: &mut Channel,
     templates: &mut FxHashMap<String, u16>,
-    max_template_count: &mut u16,
+    max_template_count: &AtomicU16,
 ) -> Option<Vec<u8>> {
     use dioxus_core::Mutation::*;
     if mutations.templates.is_empty() && mutations.edits.is_empty() {
@@ -538,15 +538,16 @@ fn add_template(
     template: &Template<'static>,
     channel: &mut Channel,
     templates: &mut FxHashMap<String, u16>,
-    max_template_count: &mut u16,
+    max_template_count: &AtomicU16,
 ) {
-    for (idx, root) in template.roots.iter().enumerate() {
+    let current_max_template_count = max_template_count.load(std::sync::atomic::Ordering::Relaxed);
+    for root in template.roots.iter() {
         create_template_node(channel, root);
-        templates.insert(template.name.to_owned(), *max_template_count);
+        templates.insert(template.name.to_owned(), current_max_template_count);
     }
-    channel.add_templates(*max_template_count, template.roots.len() as u16);
+    channel.add_templates(current_max_template_count, template.roots.len() as u16);
 
-    *max_template_count += 1
+    max_template_count.fetch_add(1, std::sync::atomic::Ordering::Relaxed);
 }
 
 fn create_template_node(channel: &mut Channel, v: &'static TemplateNode<'static>) {

packages/desktop/src/protocol.rs

@@ -1,4 +1,3 @@
-use dioxus_interpreter_js::{COMMON_JS, INTERPRETER_JS};
 use std::{
     borrow::Cow,
     path::{Path, PathBuf},
@@ -11,43 +10,34 @@ use wry::{
 
 use crate::desktop_context::EditQueue;
 
+static MINIFIED: &str = include_str!("./minified.js");
+
 fn module_loader(root_name: &str) -> String {
-    let js = INTERPRETER_JS.replace(
-        "/*POST_HANDLE_EDITS*/",
-        r#"// Prevent file inputs from opening the file dialog on click
-    let inputs = document.querySelectorAll("input");
-    for (let input of inputs) {
-      if (!input.getAttribute("data-dioxus-file-listener")) {
-        // prevent file inputs from opening the file dialog on click
-        const type = input.getAttribute("type");
-        if (type === "file") {
-          input.setAttribute("data-dioxus-file-listener", true);
-          input.addEventListener("click", (event) => {
-            let target = event.target;
-            let target_id = find_real_id(target);
-            if (target_id !== null) {
-              const send = (event_name) => {
-                const message = serializeIpcMessage("file_diolog", { accept: target.getAttribute("accept"), directory: target.getAttribute("webkitdirectory") === "true", multiple: target.hasAttribute("multiple"), target: parseInt(target_id), bubbles: event_bubbles(event_name), event: event_name });
-                window.ipc.postMessage(message);
-              };
-              send("change&input");
-            }
-            event.preventDefault();
-          });
-        }
-      }
-    }"#,
-    );
     format!(
         r#"
 <script type="module">
-    {js}
+    {MINIFIED}
 
-    let rootname = "{root_name}";
+    function wait_for_request() {{
-    let root = window.document.getElementById(rootname);
+        fetch(new Request("dioxus://index.html/edits"))
-    if (root != null) {{
+            .then(response => {{
-        window.interpreter = new Interpreter(root, new InterpreterConfig(true));
+                response.arrayBuffer()
-        window.ipc.postMessage(serializeIpcMessage("initialize"));
+                    .then(bytes => {{
+                        run_from_bytes(bytes);
+                        wait_for_request();
+                    }});
+            }})
+    }}
+
+    // Wait for the page to load
+    window.onload = function() {{
+        let rootname = "{root_name}";
+        let root_element = window.document.getElementById(rootname);
+        if (root_element != null) {{
+            initialize(root_element);
+            window.ipc.postMessage(serializeIpcMessage("initialize"));
+        }}
+        wait_for_request();
     }}
 </script>
 "#
@@ -87,6 +77,7 @@ pub(super) fn desktop_handler(
 
         match Response::builder()
             .header("Content-Type", "text/html")
+            .header("Access-Control-Allow-Origin", "*")
             .body(Cow::from(body))
         {
             Ok(response) => {
@@ -95,18 +86,7 @@ pub(super) fn desktop_handler(
             }
             Err(err) => tracing::error!("error building response: {}", err),
         }
-    } else if request.uri().path() == "/common.js" {
+    } else if request.uri().path().trim_matches('/') == "edits" {
-        match Response::builder()
-            .header("Content-Type", "text/javascript")
-            .body(Cow::from(COMMON_JS.as_bytes()))
-        {
-            Ok(response) => {
-                responder.respond(response);
-                return;
-            }
-            Err(err) => tracing::error!("error building response: {}", err),
-        }
-    } else if request.uri().path() == "/edits" {
         edit_queue.handle_request(responder);
         return;
     }

packages/desktop/src/webview.rs

@@ -1,8 +1,6 @@
 use crate::desktop_context::{EditQueue, EventData};
 use crate::protocol;
 use crate::{desktop_context::UserWindowEvent, Config};
-use std::sync::Arc;
-use std::sync::Mutex;
 use tao::event_loop::{EventLoopProxy, EventLoopWindowTarget};
 pub use wry;
 pub use wry::application as tao;

packages/liveview/build.rs

@@ -1,6 +1,6 @@
-use dioxus_interpreter_js::COMMON_JS;
 use dioxus_interpreter_js::SLEDGEHAMMER_JS;
 use minify_js::*;
+use std::io::Write;
 
 fn main() {
     let serialize_file_uploads = r#"if (
@@ -53,11 +53,11 @@ fn main() {
     let main_js = std::fs::read_to_string("src/main.js").unwrap();
 
     let js = format!("{interpreter}\n{main_js}");
-    // std::fs::write("src/minified.js", &js).unwrap();
 
     let session = Session::new();
     let mut out = Vec::new();
     minify(&session, TopLevelMode::Module, js.as_bytes(), &mut out).unwrap();
     let minified = String::from_utf8(out).unwrap();
-    std::fs::write("src/minified.js", minified).unwrap();
+    let mut file = std::fs::File::create("src/minified.js").unwrap();
+    file.write_all(minified.as_bytes()).unwrap();
 }