Merge pull request #141 from alexanderjophus/main

update dioxus example to 0.6
yuankunzhang · Feb 2, 2025 · 9c1caa9 · 9c1caa9
2 parents 2fea1d5 + 5822a1d
commit 9c1caa9
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 27 deletions.
diff --git a/examples/dioxus-web-demo/Cargo.toml b/examples/dioxus-web-demo/Cargo.toml
@@ -7,8 +7,7 @@ edition = "2021"
 # See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html
 
 [dependencies]
-dioxus = "0.3"
-dioxus-web = "0.3"
+dioxus = { version = "0.6", features = ["web"] }
 
 charming = { path = "../../charming", features = ["wasm"] }
 

diff --git a/examples/dioxus-web-demo/Dioxus.toml b/examples/dioxus-web-demo/Dioxus.toml
@@ -34,8 +34,8 @@ style = []
 
 # Javascript code file
 script = [
-  "https://cdn.jsdelivr.net/npm/[email protected]/dist/echarts.min.js",
-  "https://cdn.jsdelivr.net/npm/[email protected]/dist/echarts-gl.min.js",
+    "https://cdn.jsdelivr.net/npm/[email protected]/dist/echarts.min.js",
+    "https://cdn.jsdelivr.net/npm/[email protected]/dist/echarts-gl.min.js",
 ]
 
 [web.resource.dev]

diff --git a/examples/dioxus-web-demo/README.md b/examples/dioxus-web-demo/README.md
@@ -40,7 +40,7 @@ script = [
 ## Getting started
 
 ```sh
-dioxus serve
+dioxus serve --platform web
 ```
 
-<http://localhost:8080/>
+<http://localhost:8080/>
diff --git a/examples/dioxus-web-demo/src/main.rs b/examples/dioxus-web-demo/src/main.rs
@@ -1,35 +1,33 @@
-use dioxus::prelude::*;
+use dioxus::{document::Script, prelude::*};
 use log::LevelFilter;
 
-use charming::{component::{Axis, Title}, element::AxisType, series::Line, Chart, WasmRenderer};
+use charming::{component::Axis, element::AxisType, series::Line, Chart, WasmRenderer};
 
 fn main() {
     // Init debug
     dioxus_logger::init(LevelFilter::Info).expect("failed to init logger");
     console_error_panic_hook::set_once();
 
     log::info!("starting app");
-    dioxus_web::launch(app);
+    dioxus::LaunchBuilder::new().launch(|| app());
 }
 
-fn app(cx: Scope) -> Element {
-
-    let renderer: WasmRenderer = WasmRenderer::new(600, 400);
-    use_future!(cx, || async move {
-      let chart = Chart::new()
-      .x_axis(
-          Axis::new()
-              .type_(AxisType::Category)
-              .data(vec!["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]),
-      )
-      .y_axis(Axis::new().type_(AxisType::Value))
-      .series(Line::new().data(vec![150, 230, 224, 218, 135, 147, 260]));
-
-      renderer.render("chart",&chart).unwrap();
+fn app() -> Element {
+    let renderer = use_signal(|| WasmRenderer::new(600, 400));
+    use_effect(move || {
+        let chart = Chart::new()
+            .x_axis(
+                Axis::new()
+                    .type_(AxisType::Category)
+                    .data(vec!["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]),
+            )
+            .y_axis(Axis::new().type_(AxisType::Value))
+            .series(Line::new().data(vec![150, 230, 224, 218, 135, 147, 260]));
+
+        renderer.read_unchecked().render("chart", &chart).unwrap();
     });
 
-
-    cx.render(rsx! (
+    rsx! (
         div {
             style: "text-align: center;",
             h1 { "🌗 Dioxus + Charming 🚀" }
@@ -38,10 +36,10 @@ fn app(cx: Scope) -> Element {
         }
         div {
           style: "width: 100%; text-align: center;",
-          div { 
+          div {
             id: "chart",
             style: "display: inline-block;",
           }
         }
-    ))
+    )
 }