switch liveview to sledgehammer

packages/liveview/src/adapters/axum_adapter.rs

@@ -20,5 +20,5 @@ fn transform_rx(message: Result<Message, axum::Error>) -> Result<Vec<u8>, LiveVi
 }
 
 async fn transform_tx(message: Vec<u8>) -> Result<Message, axum::Error> {
-    Ok(Message::Text(String::from_utf8_lossy(&message).to_string()))
+    Ok(Message::Binary(message))
 }

packages/liveview/src/lib.rs

@@ -37,74 +37,18 @@ pub enum LiveViewError {
     SendingFailed,
 }
 
-use once_cell::sync::Lazy;
-
-static INTERPRETER_JS: Lazy<String> = Lazy::new(|| {
-    let interpreter = dioxus_interpreter_js::INTERPRETER_JS;
-    let serialize_file_uploads = r#"if (
-      target.tagName === "INPUT" &&
-      (event.type === "change" || event.type === "input")
-    ) {
-      const type = target.getAttribute("type");
-      if (type === "file") {
-        async function read_files() {
-          const files = target.files;
-          const file_contents = {};
-
-          for (let i = 0; i < files.length; i++) {
-            const file = files[i];
-
-            file_contents[file.name] = Array.from(
-              new Uint8Array(await file.arrayBuffer())
-            );
-          }
-          let file_engine = {
-            files: file_contents,
-          };
-          contents.files = file_engine;
-
-          if (realId === null) {
-            return;
-          }
-          const message = serializeIpcMessage("user_event", {
-            name: name,
-            element: parseInt(realId),
-            data: contents,
-            bubbles,
-          });
-          window.ipc.postMessage(message);
-        }
-        read_files();
-        return;
-      }
-    }"#;
-
-    let interpreter = interpreter.replace("/*POST_EVENT_SERIALIZATION*/", serialize_file_uploads);
-    interpreter.replace("import { setAttributeInner } from \"./common.js\";", "")
-});
-
-static COMMON_JS: Lazy<String> = Lazy::new(|| {
-    let common = dioxus_interpreter_js::COMMON_JS;
-    common.replace("export", "")
-});
-
-static MAIN_JS: &str = include_str!("./main.js");
+static MINIFIED: &str = include_str!("./minified.js");
 
 /// This script that gets injected into your app connects this page to the websocket endpoint
 ///
 /// Once the endpoint is connected, it will send the initial state of the app, and then start
 /// processing user events and returning edits to the liveview instance
 pub fn interpreter_glue(url: &str) -> String {
-    let js = &*INTERPRETER_JS;
-    let common = &*COMMON_JS;
     format!(
         r#"
 <script>
     var WS_ADDR = "{url}";
-    {js}
-    {common}
-    {MAIN_JS}
-    main();
+    {MINIFIED}
 </script>
     "#
     )

packages/liveview/src/main.js

@@ -7,10 +7,9 @@ function main() {
 
 class IPC {
   constructor(root) {
-    // connect to the websocket
-    window.interpreter = new Interpreter(root, new InterpreterConfig(false));
-
-    let ws = new WebSocket(WS_ADDR);
+    initialize(root);
+    const ws = new WebSocket(WS_ADDR);
+    ws.binaryType = "arraybuffer";
 
     function ping() {
       ws.send("__ping__");
@@ -27,17 +26,23 @@ class IPC {
     };
 
     ws.onmessage = (message) => {
-      // Ignore pongs
-      if (message.data != "__pong__") {
-        const event = JSON.parse(message.data);
-        switch (event.type) {
-          case "edits":
-            let edits = event.data;
-            window.interpreter.handleEdits(edits);
-            break;
-          case "query":
-            Function("Eval", `"use strict";${event.data};`)();
-            break;
+      if (message.data instanceof ArrayBuffer) {
+        // binary frame
+        run_from_bytes(message.data);
+      } else {
+        // text frame
+        // Ignore pongs
+        if (message.data != "__pong__") {
+          const event = JSON.parse(message.data);
+          switch (event.type) {
+            case "edits":
+              let edits = event.data;
+              window.interpreter.handleEdits(edits);
+              break;
+            case "query":
+              Function("Eval", `"use strict";${event.data};`)();
+              break;
+          }
         }
       }
     };
@@ -49,3 +54,5 @@ class IPC {
     this.ws.send(msg);
   }
 }
+
+main();

packages/liveview/src/pool.rs

@@ -4,9 +4,11 @@ use crate::{
     query::{QueryEngine, QueryResult},
     LiveViewError,
 };
-use dioxus_core::{prelude::*, Mutations};
-use dioxus_html::{EventData, HtmlEvent, MountedData};
+use dioxus_core::{prelude::*, BorrowedAttributeValue, Mutations};
+use dioxus_html::{event_bubbles, EventData, HtmlEvent, MountedData};
+use dioxus_interpreter_js::Channel;
 use futures_util::{pin_mut, SinkExt, StreamExt};
+use rustc_hash::FxHashMap;
 use serde::Serialize;
 use std::{rc::Rc, time::Duration};
 use tokio_util::task::LocalPoolHandle;
@@ -107,7 +109,7 @@ impl<S> LiveViewSocket for S where
 ///
 /// This function makes it easy to integrate Dioxus LiveView with any socket-based framework.
 ///
-/// As long as your framework can provide a Sink and Stream of Strings, you can use this function.
+/// As long as your framework can provide a Sink and Stream of Bytes, you can use this function.
 ///
 /// You might need to transform the error types of the web backend into the LiveView error type.
 pub async fn run(mut vdom: VirtualDom, ws: impl LiveViewSocket) -> Result<(), LiveViewError> {
@@ -120,20 +122,31 @@ pub async fn run(mut vdom: VirtualDom, ws: impl LiveViewSocket) -> Result<(), Li
         rx
     };
 
+    let mut templates: FxHashMap<String, u16> = Default::default();
+    let mut max_template_count = 0;
+
     // Create the a proxy for query engine
     let (query_tx, mut query_rx) = tokio::sync::mpsc::unbounded_channel();
     let query_engine = QueryEngine::new(query_tx);
     vdom.base_scope().provide_context(query_engine.clone());
     init_eval(vdom.base_scope());
 
-    // todo: use an efficient binary packed format for this
-    let edits = serde_json::to_string(&ClientUpdate::Edits(vdom.rebuild())).unwrap();
-
     // pin the futures so we can use select!
     pin_mut!(ws);
 
-    // send the initial render to the client
-    ws.send(edits.into_bytes()).await?;
+    let mut edit_channel = Channel::default();
+    if let Some(edits) = {
+        let mutations = vdom.rebuild();
+        apply_edits(
+            mutations,
+            &mut edit_channel,
+            &mut templates,
+            &mut max_template_count,
+        )
+    } {
+        // send the initial render to the client
+        ws.send(edits).await?;
+    }
 
     // desktop uses this wrapper struct thing around the actual event itself
     // this is sorta driven by tao/wry
@@ -160,7 +173,7 @@ pub async fn run(mut vdom: VirtualDom, ws: impl LiveViewSocket) -> Result<(), Li
                 match evt.as_ref().map(|o| o.as_deref()) {
                     // respond with a pong every ping to keep the websocket alive
                     Some(Ok(b"__ping__")) => {
-                        ws.send(b"__pong__".to_vec()).await?;
+                        // ws.send(b"__pong__".to_vec()).await?;
                     }
                     Some(Ok(evt)) => {
                         if let Ok(message) = serde_json::from_str::<IpcMessage>(&String::from_utf8_lossy(evt)) {
@@ -199,7 +212,7 @@ pub async fn run(mut vdom: VirtualDom, ws: impl LiveViewSocket) -> Result<(), Li
 
             // handle any new queries
             Some(query) = query_rx.recv() => {
-                ws.send(serde_json::to_string(&ClientUpdate::Query(query)).unwrap().into_bytes()).await?;
+                // ws.send(serde_json::to_string(&ClientUpdate::Query(query)).unwrap().into_bytes()).await?;
             }
 
             Some(msg) = hot_reload_wait => {
@@ -221,15 +234,145 @@ pub async fn run(mut vdom: VirtualDom, ws: impl LiveViewSocket) -> Result<(), Li
             .render_with_deadline(tokio::time::sleep(Duration::from_millis(10)))
             .await;
 
-        ws.send(
-            serde_json::to_string(&ClientUpdate::Edits(edits))
-                .unwrap()
-                .into_bytes(),
-        )
-        .await?;
+        if let Some(edits) = {
+            apply_edits(
+                edits,
+                &mut edit_channel,
+                &mut templates,
+                &mut max_template_count,
+            )
+        } {
+            ws.send(edits).await?;
+        }
     }
 }
 
+fn add_template(
+    template: &Template,
+    channel: &mut Channel,
+    templates: &mut FxHashMap<String, u16>,
+    max_template_count: &mut u16,
+) {
+    for (idx, root) in template.roots.iter().enumerate() {
+        create_template_node(channel, root);
+        templates.insert(template.name.to_owned(), *max_template_count);
+    }
+    channel.add_templates(*max_template_count, template.roots.len() as u16);
+
+    *max_template_count += 1
+}
+
+fn create_template_node(channel: &mut Channel, v: &TemplateNode) {
+    use TemplateNode::*;
+    match v {
+        Element {
+            tag,
+            namespace,
+            attrs,
+            children,
+            ..
+        } => {
+            // Push the current node onto the stack
+            match namespace {
+                Some(ns) => channel.create_element_ns(tag, ns),
+                None => channel.create_element(tag),
+            }
+            // Set attributes on the current node
+            for attr in *attrs {
+                if let TemplateAttribute::Static {
+                    name,
+                    value,
+                    namespace,
+                } = attr
+                {
+                    channel.set_top_attribute(name, value, namespace.unwrap_or_default())
+                }
+            }
+            // Add each child to the stack
+            for child in *children {
+                create_template_node(channel, child);
+            }
+            // Add all children to the parent
+            channel.append_children_to_top(children.len() as u16);
+        }
+        Text { text } => channel.create_raw_text(text),
+        DynamicText { .. } => channel.create_raw_text("p"),
+        Dynamic { .. } => channel.add_placeholder(),
+    }
+}
+
+fn apply_edits(
+    mutations: Mutations,
+    channel: &mut Channel,
+    templates: &mut FxHashMap<String, u16>,
+    max_template_count: &mut u16,
+) -> Option<Vec<u8>> {
+    use dioxus_core::Mutation::*;
+    if mutations.templates.is_empty() && mutations.edits.is_empty() {
+        return None;
+    }
+    for template in mutations.templates {
+        add_template(&template, channel, templates, max_template_count);
+    }
+    for edit in mutations.edits {
+        match edit {
+            AppendChildren { id, m } => channel.append_children(id.0 as u32, m as u16),
+            AssignId { path, id } => channel.assign_id(path, id.0 as u32),
+            CreatePlaceholder { id } => channel.create_placeholder(id.0 as u32),
+            CreateTextNode { value, id } => channel.create_text_node(value, id.0 as u32),
+            HydrateText { path, value, id } => channel.hydrate_text(path, value, id.0 as u32),
+            LoadTemplate { name, index, id } => {
+                if let Some(tmpl_id) = templates.get(name) {
+                    channel.load_template(*tmpl_id as u16, index as u16, id.0 as u32)
+                }
+            }
+            ReplaceWith { id, m } => channel.replace_with(id.0 as u32, m as u16),
+            ReplacePlaceholder { path, m } => channel.replace_placeholder(path, m as u16),
+            InsertAfter { id, m } => channel.insert_after(id.0 as u32, m as u16),
+            InsertBefore { id, m } => channel.insert_before(id.0 as u32, m as u16),
+            SetAttribute {
+                name,
+                value,
+                id,
+                ns,
+            } => match value {
+                BorrowedAttributeValue::Text(txt) => {
+                    channel.set_attribute(id.0 as u32, name, txt, ns.unwrap_or_default())
+                }
+                BorrowedAttributeValue::Float(f) => {
+                    channel.set_attribute(id.0 as u32, name, &f.to_string(), ns.unwrap_or_default())
+                }
+                BorrowedAttributeValue::Int(n) => {
+                    channel.set_attribute(id.0 as u32, name, &n.to_string(), ns.unwrap_or_default())
+                }
+                BorrowedAttributeValue::Bool(b) => channel.set_attribute(
+                    id.0 as u32,
+                    name,
+                    if b { "true" } else { "false" },
+                    ns.unwrap_or_default(),
+                ),
+                BorrowedAttributeValue::None => {
+                    channel.remove_attribute(id.0 as u32, name, ns.unwrap_or_default())
+                }
+                _ => unreachable!(),
+            },
+            SetText { value, id } => channel.set_text(id.0 as u32, value),
+            NewEventListener { name, id, .. } => {
+                channel.new_event_listener(name, id.0 as u32, event_bubbles(name) as u8)
+            }
+            RemoveEventListener { name, id } => {
+                channel.remove_event_listener(name, id.0 as u32, event_bubbles(name) as u8)
+            }
+            Remove { id } => channel.remove(id.0 as u32),
+            PushRoot { id } => channel.push_root(id.0 as u32),
+        }
+    }
+
+    let bytes: Vec<_> = channel.export_memory().collect();
+    channel.reset();
+    Some(bytes)
+}
+
 #[derive(Serialize)]
 #[serde(tag = "type", content = "data")]
 enum ClientUpdate<'a> {