feat: add edits back! and more webview support!

This commit adds a new type - the DomEdit - for serializing the changes made by the diffing machine. The architecture of how DomEdits fit into the cooperative scheduling is still TBD but it will allow us to build change lists without applying them immediately. This is more performant  and allows us to only render parts of the page at a time.

This commit also adds more infrastructure around webview. Dioxus can now run on the web, generate static pages, run in the desktop, and run on mobile, with a large part of thanks to webview.

packages/webview/src/dom.rs

@@ -2,12 +2,14 @@
 
 use dioxus_core as dioxus;
 use dioxus_core::prelude::*;
+use dioxus_core::serialize::DomEdits;
 use dioxus_core::{
     diff::RealDom,
     prelude::ScopeIdx,
     virtual_dom::{RealDomNode, VirtualDom},
 };
 use serde::{Deserialize, Serialize};
+use DomEdits::*;
 
 fn test() {
     const App: FC<()> = |cx| cx.render(rsx! { div {}});
@@ -20,7 +22,7 @@ fn test() {
 }
 
 pub struct WebviewDom<'bump> {
-    pub edits: Vec<SerializedDom<'bump>>,
+    pub edits: Vec<DomEdits<'bump>>,
     pub node_counter: u64,
 }
 impl WebviewDom<'_> {
@@ -31,55 +33,6 @@ impl WebviewDom<'_> {
         }
     }
 }
-
-#[derive(Debug, Serialize, Deserialize)]
-pub enum SerializedDom<'bump> {
-    PushRoot {
-        root: u64,
-    },
-    AppendChild,
-    ReplaceWith,
-    Remove,
-    RemoveAllChildren,
-    CreateTextNode {
-        text: &'bump str,
-        id: u64,
-    },
-    CreateElement {
-        tag: &'bump str,
-        id: u64,
-    },
-    CreateElementNs {
-        tag: &'bump str,
-        id: u64,
-        ns: &'bump str,
-    },
-    CreatePlaceholder {
-        id: u64,
-    },
-    NewEventListener {
-        event: &'bump str,
-        scope: ScopeIdx,
-        node: u64,
-        idx: usize,
-    },
-    RemoveEventListener {
-        event: &'bump str,
-    },
-    SetText {
-        text: &'bump str,
-    },
-    SetAttribute {
-        field: &'bump str,
-        value: &'bump str,
-        ns: Option<&'bump str>,
-    },
-    RemoveAttribute {
-        name: &'bump str,
-    },
-}
-
-use SerializedDom::*;
 impl<'bump> RealDom<'bump> for WebviewDom<'bump> {
     fn push_root(&mut self, root: dioxus_core::virtual_dom::RealDomNode) {
         self.edits.push(PushRoot { root: root.0 });

packages/webview/src/index.html

@@ -1 +1,131 @@
-<!-- this is used to instantiate the module -->
+<!-- a js-only interpreter for the dioxus patch stream :) -->
+<!DOCTYPE html>
+<html>
+
+<head>
+    <meta content="text/html;charset=utf-8" http-equiv="Content-Type" />
+    <meta charset="UTF-8" />
+    <link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet" />
+</head>
+
+<body>
+    <div></div>
+</body>
+<script>
+    class Interpreter {
+        constructor(root) {
+            this.stack = [root];
+            this.lastNodeWasText = false;
+            this.nodes = {
+                0: root
+            };
+        }
+
+        top() {
+            return this.stack[this.stack.length - 1];
+        }
+
+        pop() {
+            return this.stack.pop();
+        }
+    }
+
+    class OPTABLE {
+        PushRoot(self, edit) {
+            const id = edit.root;
+            const node = self.nodes[id];
+            self.stack.push(node);
+        }
+        AppendChild(self, edit) {
+            // todo: prevent merging of text nodes
+            const node = self.pop();
+            self.top().appendChild(node);
+        }
+        ReplaceWith(self, edit) {
+            const newNode = self.pop();
+            const oldNode = self.pop();
+            oldNode.replaceWith(newNode);
+            self.stack.push(newNode);
+        }
+        Remove(self, edit) {
+            const node = self.stack.pop();
+            node.remove();
+        }
+        RemoveAllChildren(self, edit) {
+            // todo - we never actually call this one
+        }
+        CreateTextNode(self, edit) {
+            self.stack.push(document.createTextNode(edit.text));
+        }
+        CreateElement(self, edit) {
+            const tagName = edit.tag;
+            console.log(`creating element! ${edit}`);
+            self.stack.push(document.createElement(tagName));
+        }
+        CreateElementNs(self, edit) {
+            self.stack.push(document.createElementNS(edit.ns, edit.tag));
+        }
+        CreatePlaceholder(self, edit) {
+            self.stack.push(document.createElement("pre"));
+        }
+        NewEventListener(self, edit) {
+            // todo
+        }
+        RemoveEventListener(self, edit) {
+            // todo
+        }
+        SetText(self, edit) {
+            self.top().textContent = edit.text;
+        }
+        SetAttribute(self, edit) {
+            const name = edit.field;
+            const value = edit.value;
+            const node = self.top(self.stack);
+            node.setAttribute(name, value);
+
+            // Some attributes are "volatile" and don't work through `setAttribute`.
+            if ((name === "value", self)) {
+                node.value = value;
+            }
+            if ((name === "checked", self)) {
+                node.checked = true;
+            }
+            if ((name === "selected", self)) {
+                node.selected = true;
+            }
+        }
+        RemoveAttribute(self, edit) {
+            const name = edit.field;
+            const node = self.top(self.stack);
+            node.removeAttribute(name);
+
+            // Some attributes are "volatile" and don't work through `removeAttribute`.
+            if ((name === "value", self)) {
+                node.value = null;
+            }
+            if ((name === "checked", self)) {
+                node.checked = false;
+            }
+            if ((name === "selected", self)) {
+                node.selected = false;
+            }
+        }
+
+    }
+
+    const op_table = new OPTABLE();
+    const interpreter = new Interpreter(window.document.body);
+
+    function EditListReceived(rawEditList) {
+        let editList = JSON.parse(rawEditList);
+        console.warn("hnelllo");
+        editList.forEach(function (edit, index) {
+            console.log(edit);
+            op_table[edit.type](interpreter, edit);
+        });
+    }
+
+    external.invoke("initiate");
+</script>
+
+</html>

packages/webview/src/lib.rs

@@ -3,11 +3,11 @@ use std::sync::Arc;
 
 use dioxus_core::prelude::*;
 use dioxus_core::virtual_dom::VirtualDom;
-use web_view::Handle;
+use web_view::{escape, Handle};
 use web_view::{WVResult, WebView, WebViewBuilder};
 mod dom;
 
-static HTML_CONTENT: &'static str = include_str!("./../../liveview/index.html");
+static HTML_CONTENT: &'static str = include_str!("./index.html");
 
 pub fn launch<T: Properties + 'static>(
     builder: impl FnOnce(DioxusWebviewBuilder) -> DioxusWebviewBuilder,
@@ -79,13 +79,15 @@ impl<T: Properties + 'static> WebviewRenderer<T> {
             view.step()
                 .expect("should not fail")
                 .expect("should not fail");
+            std::thread::sleep(std::time::Duration::from_millis(15));
 
             if let Ok(event) = receiver.try_recv() {
                 if let InnerEvent::Initiate(handle) = event {
                     let editlist = ref_edits.clone();
                     handle
                         .dispatch(move |view| {
-                            view.eval(format!("EditListReceived(`{}`);", editlist).as_str())
+                            let escaped = escape(&editlist);
+                            view.eval(&format!("EditListReceived({});", escaped))
                         })
                         .expect("Dispatch failed");
                 }