From 4d5c528b07e61d6cb0ac8fc0c27ce2e0fdf7e7d2 Mon Sep 17 00:00:00 2001 From: Jonathan Kelley Date: Fri, 28 May 2021 00:28:09 -0400 Subject: [PATCH] Feat: dirty hack to enable send + sync on virtual dom --- packages/core/src/virtual_dom.rs | 6 ++++ packages/docsite/src/main.rs | 4 ++- packages/ssr/.vscode/settings.json | 3 ++ packages/ssr/Cargo.toml | 2 +- packages/ssr/examples/template.html | 10 +++++- packages/ssr/examples/tide.rs | 54 ++++++++--------------------- 6 files changed, 36 insertions(+), 43 deletions(-) create mode 100644 packages/ssr/.vscode/settings.json diff --git a/packages/core/src/virtual_dom.rs b/packages/core/src/virtual_dom.rs index 29a12145e..bee5e5152 100644 --- a/packages/core/src/virtual_dom.rs +++ b/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. diff --git a/packages/docsite/src/main.rs b/packages/docsite/src/main.rs index 60fffe791..05b5fb5a4 100644 --- a/packages/docsite/src/main.rs +++ b/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!() +} diff --git a/packages/ssr/.vscode/settings.json b/packages/ssr/.vscode/settings.json new file mode 100644 index 000000000..80f51cff8 --- /dev/null +++ b/packages/ssr/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "rust-analyzer.inlayHints.enable": false +} \ No newline at end of file diff --git a/packages/ssr/Cargo.toml b/packages/ssr/Cargo.toml index 2a243cd88..2bf128676 100644 --- a/packages/ssr/Cargo.toml +++ b/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] diff --git a/packages/ssr/examples/template.html b/packages/ssr/examples/template.html index 61df94210..0bacc8be5 100644 --- a/packages/ssr/examples/template.html +++ b/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"); + diff --git a/packages/ssr/examples/tide.rs b/packages/ssr/examples/tide.rs index d026afc67..4fc79b89b 100644 --- a/packages/ssr/examples/tide.rs +++ b/packages/ssr/examples/tide.rs @@ -15,7 +15,7 @@ struct ExampleProps { } static Example: FC = |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 = |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> = 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 mut dom = VirtualDom::new_with_props(Example, ExampleProps { initial_name }); + + let edits = dom.rebuild().unwrap(); + stream.send_json(&edits).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?; // } - // 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(()) }));