wip: doesnt share on thread

packages/ssr/examples/template.html

@@ -0,0 +1,290 @@
+<!-- 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>hello dioxus</div>
+</body>
+<script>
+    class Interpreter {
+        constructor(root) {
+            this.stack = [root];
+        }
+
+        top() {
+            return this.stack[this.stack.length - 1];
+        }
+
+        pop() {
+            return this.stack.pop();
+        }
+    }
+
+    class OPTABLE {
+        // 0
+        SetText(edit, interp) {
+            interp.top(interp.stack).textContent = edit.text;
+        }
+        // 1
+        RemoveSelfAndNextSiblings(edit) {
+            const node = interp.pop();
+            let sibling = node.nextSibling;
+            while (sibling) {
+                const temp = sibling.nextSibling;
+                sibling.remove();
+                sibling = temp;
+            }
+            node.remove();
+        }
+
+        // 2
+        ReplaceWith(edit, interp) {
+            const newNode = interp.pop();
+            const oldNode = interp.pop();
+            oldNode.replaceWith(newNode);
+            interp.stack.push(newNode);
+        }
+
+        // 3
+        SetAttribute(edit, interp) {
+            const name = edit.name;
+            const value = edit.value;
+            const node = interp.top(interp.stack);
+            node.setAttribute(name, value);
+
+            // Some attributes are "volatile" and don't work through `setAttribute`.
+            if ((name === "value", interp)) {
+                node.value = value;
+            }
+            if ((name === "checked", interp)) {
+                node.checked = true;
+            }
+            if ((name === "selected", interp)) {
+                node.selected = true;
+            }
+        }
+
+        // 4
+        RemoveAttribute(edit, interp) {
+            const name = edit.name;
+            const node = interp.top(interp.stack);
+            node.removeAttribute(name);
+
+            // Some attributes are "volatile" and don't work through `removeAttribute`.
+            if ((name === "value", interp)) {
+                node.value = null;
+            }
+            if ((name === "checked", interp)) {
+                node.checked = false;
+            }
+            if ((name === "selected", interp)) {
+                node.selected = false;
+            }
+        }
+
+        // 5
+        PushReverseChild(edit, interp) {
+            const n = edit.n;
+            const parent = interp.top(interp.stack);
+            const children = parent.childNodes;
+            const child = children[children.length - n - 1];
+            interp.stack.push(child);
+        }
+
+        // 6
+        PopPushChild(edit, interp) {
+            const n = edit.n;
+            interp.pop();
+            const parent = interp.top(interp.stack);
+            const children = parent.childNodes;
+            const child = children[n];
+            interp.stack.push(child);
+        }
+
+        // 7
+        Pop(edit, interp) {
+            interp.pop();
+        }
+
+        // 8
+        AppendChild(edit, interp) {
+            console.log(interp.stack);
+            const child = interp.pop();
+            console.log(interp.stack);
+            interp.top().appendChild(child);
+        }
+
+        // 9
+        CreateTextNode(edit, interp) {
+            // interp.stack.push(document.createTextNode("asd"));
+            console.log(interp.stack);
+
+            interp.stack.push(document.createTextNode(edit.text));
+            console.log(interp.stack);
+        }
+
+        // 10
+        CreateElement(edit, interp) {
+            const tagName = edit.tag_name;
+            interp.stack.push(document.createElement(tagName));
+        }
+
+        // 11
+        NewEventListener(edit, interp) {
+            // todo!
+            const eventId = mem32[i++];
+            const eventType = interp.getCachedString(eventId);
+            const a = mem32[i++];
+            const b = mem32[i++];
+            const el = interp.top(interp.stack);
+            el.addEventListener(eventType, interp.eventHandler);
+            el[`dodrio-a-${eventType}`] = a;
+            el[`dodrio-b-${eventType}`] = b;
+        }
+
+        // 12
+        UpdateEventListener(edit, interp) {
+            // todo!
+            const eventId = mem32[i++];
+            const eventType = interp.getCachedString(eventId);
+            const el = interp.top(interp.stack);
+            el[`dodrio-a-${eventType}`] = mem32[i++];
+            el[`dodrio-b-${eventType}`] = mem32[i++];
+        }
+
+        // 13
+        RemoveEventListener(edit, interp) {
+            // todo!
+            const eventId = mem32[i++];
+            const eventType = interp.getCachedString(eventId);
+            const el = interp.top(interp.stack);
+            el.removeEventListener(eventType, interp.eventHandler);
+        }
+
+        // 14
+        AddCachedString(edit, interp) {
+            // todo!
+            const pointer = mem32[i++];
+            const length = mem32[i++];
+            const id = mem32[i++];
+            const str = string(mem8, pointer, length);
+            interp.addCachedString(str, id);
+        }
+
+        // 15
+        DropCachedString(edit, interp) {
+            // todo!
+            const id = mem32[i++];
+            interp.dropCachedString(id);
+        }
+
+        // 16
+        CreateElementNS(edit, interp) {
+            //   const tagNameId = mem32[i++];
+            //   const tagName = interp.getCachedString(tagNameId);
+            //   const nsId = mem32[i++];
+            //   const ns = interp.getCachedString(nsId);
+            interp.stack.push(document.createElementNS(edit.ns, edit.tag_name));
+        }
+
+        // 17
+        SaveChildrenToTemporaries(edit, interp) {
+            //   let temp = mem32[i++];
+            //   const start = mem32[i++];
+            //   const end = mem32[i++];
+            let temp = edit.temp;
+            const start = edit.start;
+            const end = edit.end;
+            const parent = interp.top(interp.stack);
+            const children = parent.childNodes;
+            for (let i = start; i < end; i++, interp) {
+                interp.temporaries[temp++] = children[i];
+            }
+        }
+
+        // 18
+        PushChild(edit, interp) {
+            const parent = interp.top(interp.stack);
+            //   const n = mem32[i++];
+            const n = edit.n;
+            const child = parent.childNodes[n];
+            interp.stack.push(child);
+        }
+
+        // 19
+        PushTemporary(edit, interp) {
+            //   const temp = mem32[i++];
+            const temp = edit.temp;
+            interp.stack.push(interp.temporaries[temp]);
+        }
+
+        // 20
+        InsertBefore(edit, interp) {
+            const before = interp.pop();
+            const after = interp.pop();
+            after.parentNode.insertBefore(before, after);
+            interp.stack.push(before);
+        }
+
+        // 21
+        PopPushReverseChild(edit, interp) {
+            //   const n = mem32[i++];
+            const n = edit.n;
+            interp.pop();
+            const parent = interp.top(interp.stack);
+            const children = parent.childNodes;
+            const child = children[children.length - n - 1];
+            interp.stack.push(child);
+        }
+
+        // 22
+        RemoveChild(edit, interp) {
+            //   const n = mem32[i++];
+            const n = edit.n;
+            const parent = interp.top(interp.stack);
+            const child = parent.childNodes[n];
+            child.remove();
+        }
+
+        // 23
+        SetClass(edit, interp) {
+            //   const classId = mem32[i++];
+            const className = edit.class_name;
+            interp.top(interp.stack).className = className;
+        }
+
+        // 24
+        SaveTemplate(edit, interp) {
+            const id = mem32[i++];
+            const template = interp.top(interp.stack);
+            interp.saveTemplate(id, template.cloneNode(true));
+        }
+
+        // 25
+        PushTemplate(edit, interp) {
+            const id = mem32[i++];
+            const template = interp.getTemplate(id);
+            interp.stack.push(template.cloneNode(true));
+        }
+    }
+
+    const op_table = new OPTABLE();
+    const interpreter = new Interpreter(window.document.body);
+
+    function EditListReceived(rawEditList) {
+        let editList = JSON.parse(rawEditList);
+        editList.forEach(function (edit, index) {
+            op_table[edit.type](edit, interpreter);
+        });
+    }
+
+    external.invoke("initiate");
+</script>
+
+</html>

packages/ssr/examples/tide.rs

@@ -0,0 +1,107 @@
+//!
+//!
+//!
+use std::{borrow::Borrow, rc::Rc, sync::Arc};
+
+use async_std::{prelude::*, sync::RwLock};
+use dioxus::{events::on::MouseEvent, virtual_dom::VirtualDom};
+use dioxus_core::prelude::*;
+use tide::{Body, Request, Response};
+use tide_websockets::{Message, WebSocket};
+
+#[derive(PartialEq, Props)]
+struct ExampleProps {
+    initial_name: String,
+}
+
+static Example: FC<ExampleProps> = |ctx, props| {
+    let dispaly_name = use_state_new(&ctx, move || props.initial_name);
+
+    let buttons = ["Jack", "Jill", "Bob"].iter().map(|name| {
+        rsx!{
+            button {
+                class: "inline-block py-4 px-8 mr-6 leading-none text-white bg-indigo-600 hover:bg-indigo-900 font-semibold rounded shadow"
+                onmouseover: move |_| dispaly_name.set(name.to_string())
+                "{name}"
+            }
+        }
+    });
+
+    ctx.render(rsx! {
+        div {
+            class: "py-12 px-4 text-center w-full max-w-2xl mx-auto"
+            span {
+                class: "text-sm font-semibold"
+                "Dioxus Example: Jack and Jill"
+            }
+            h2 {
+                class: "text-5xl mt-2 mb-6 leading-tight font-semibold font-heading"
+                "Hello, {dispaly_name}"
+            }
+        }
+    })
+};
+
+const TEMPLATE: &str = include_str!("./template.html");
+
+// static VDOM: Arc<RwLock<VirtualDom>> = Arc::new(RwLock::new(VirtualDom::new_with_props(
+//     Example,
+//     ExampleProps {
+//         initial_name: "asd".to_string(),
+//     },
+// )));
+
+#[async_std::main]
+async fn main() -> Result<(), std::io::Error> {
+    let mut app = tide::new();
+
+    let (se, re) = async_std::channel::unbounded::<()>();
+    async_std::task::spawn(async move {
+        let dom = VirtualDom::new_with_props(
+            Example,
+            ExampleProps {
+                initial_name: "asd".to_string(),
+            },
+        );
+        while let Ok(msg) = re.recv().await {
+            //
+        }
+    });
+    // app.at("/").get(|_| async { Ok(Body::from_file())});
+
+    app.at("/").get(|_| async {
+        //
+        let response = Response::builder(200)
+            .body(TEMPLATE)
+            .content_type(tide::http::mime::HTML)
+            .build();
+        Ok(response)
+    });
+
+    app.at("/session/:name")
+        .get(WebSocket::new(|req: Request<()>, mut stream| async move {
+            let initial_name: String = req.param("name")?.parse().unwrap_or("...?".to_string());
+
+            // {
+            //     let a = Rc::new(());
+            // }
+            // let dom = VirtualDom::new_with_props(Example, ExampleProps { initial_name });
+
+            // let g = RwLock::new(Rc::new(10));
+            // drop(g);
+
+            while let Some(Ok(Message::Text(input))) = stream.next().await {
+                let output: String = input.chars().rev().collect();
+
+                stream
+                    .send_string(format!("{} | {}", &input, &output))
+                    .await?;
+            }
+
+            Ok(())
+        }));
+
+    app.listen("127.0.0.1:8080").await?;
+
+    Ok(())
+}