Browse Source

Feat: dirty hack to enable send + sync on virtual dom

Jonathan Kelley 4 năm trước cách đây
mục cha
commit
4d5c528

+ 6 - 0
packages/core/src/virtual_dom.rs

@@ -467,6 +467,12 @@ impl VirtualDom {
     }
 }
 
+// TODO!
+//
+// These impls are actually wrong. The DOM needs to have a mutex implemented.
+unsafe impl Sync for VirtualDom {}
+unsafe impl Send for VirtualDom {}
+
 /// Every component in Dioxus is represented by a `Scope`.
 ///
 /// Scopes contain the state for hooks, the component's props, and other lifecycle information.

+ 3 - 1
packages/docsite/src/main.rs

@@ -8,4 +8,6 @@ fn main() {
     TextRenderer::new(App);
 }
 
-fn App(ctx: Context, props: &()) -> DomTree {}
+fn App(ctx: Context, props: &()) -> DomTree {
+    todo!()
+}

+ 3 - 0
packages/ssr/.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+    "rust-analyzer.inlayHints.enable": false
+}

+ 1 - 1
packages/ssr/Cargo.toml

@@ -7,7 +7,7 @@ edition = "2018"
 # See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html
 
 [dependencies]
-dioxus-core = { path = "../core", version = "0.1.0" }
+dioxus-core = { path = "../core", version = "0.1.0", features = ["serialize"] }
 
 
 [dev-dependencies]

+ 9 - 1
packages/ssr/examples/template.html

@@ -272,6 +272,8 @@
             const template = interp.getTemplate(id);
             interp.stack.push(template.cloneNode(true));
         }
+
+        NewListener(edit, interp) {}
     }
 
     const op_table = new OPTABLE();
@@ -284,7 +286,13 @@
         });
     }
 
-    external.invoke("initiate");
+    let socket = new WebSocket("ws://127.0.0.1:8080/session/itsworkinggg");
+    socket.onmessage = function(event) {
+        console.log(event.data);
+        EditListReceived(event.data);
+    }
+    // external.invoke("initiate");
+
 </script>
 
 </html>

+ 13 - 39
packages/ssr/examples/tide.rs

@@ -15,7 +15,7 @@ struct ExampleProps {
 }
 
 static Example: FC<ExampleProps> = |ctx, props| {
-    let dispaly_name = use_state_new(&ctx, move || props.initial_name);
+    let dispaly_name = use_state_new(&ctx, move || props.initial_name.clone());
 
     let buttons = ["Jack", "Jill", "Bob"].iter().map(|name| {
         rsx!{
@@ -38,65 +38,39 @@ static Example: FC<ExampleProps> = |ctx, props| {
                 class: "text-5xl mt-2 mb-6 leading-tight font-semibold font-heading"
                 "Hello, {dispaly_name}"
             }
+            {buttons}
         }
     })
 };
 
 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)
+        Ok(Response::builder(200)
             .body(TEMPLATE)
             .content_type(tide::http::mime::HTML)
-            .build();
-        Ok(response)
+            .build())
     });
 
     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);
+            let mut dom = VirtualDom::new_with_props(Example, ExampleProps { initial_name });
 
-            while let Some(Ok(Message::Text(input))) = stream.next().await {
-                let output: String = input.chars().rev().collect();
+            let edits = dom.rebuild().unwrap();
+            stream.send_json(&edits).await?;
 
-                stream
-                    .send_string(format!("{} | {}", &input, &output))
-                    .await?;
-            }
+            // 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(())
         }));