Upgrade to Blitz 0.1.0-alpha.4 (#4335)

* Use new replace_node_with name for replace_placeholder_with_nodes

* Setup tracing for wgpu-texture support

* Use asset macro in wgpu-texture example

* Use src attribute rather than data for canvas source

Signed-off-by: Nico Burns <nico@nicoburns.com>

* Upgrade to blitz 0.1.0-alpha.4

Signed-off-by: Nico Burns <nico@nicoburns.com>

---------

Signed-off-by: Nico Burns <nico@nicoburns.com>

examples/wgpu-texture/Cargo.toml

@@ -12,6 +12,7 @@ publish = false
 default = ["desktop"]
 desktop = ["dioxus/desktop"]
 native = ["dioxus/native"]
+tracing = ["dep:tracing-subscriber", "dioxus-native/tracing"]
 
 [dependencies]
 dioxus-native = { path = "../../packages/native" }
@@ -19,3 +20,4 @@ dioxus = { workspace = true }
 wgpu = "24"
 bytemuck = "1"
 color = "0.3"
+tracing-subscriber = { workspace = true, optional = true }

examples/wgpu-texture/src/main.rs

@@ -9,7 +9,7 @@ use wgpu::{Features, Limits};
 mod demo_renderer;
 
 // CSS Styles
-static STYLES: &str = include_str!("./styles.css");
+static STYLES: Asset = asset!("./src/styles.css");
 
 // WGPU settings required by this example
 const FEATURES: Features = Features::PUSH_CONSTANTS;
@@ -23,6 +23,9 @@ fn limits() -> Limits {
 type Color = OpaqueColor<Srgb>;
 
 fn main() {
+    #[cfg(feature = "tracing")]
+    tracing_subscriber::fmt::init();
+
     let config: Vec<Box<dyn Any>> = vec![Box::new(FEATURES), Box::new(limits())];
     dioxus_native::launch_cfg(app, Vec::new(), config);
 }
@@ -42,11 +45,11 @@ fn app() -> Element {
     use_effect(move || println!("{:?}", color().components));
 
     rsx!(
-        style { {STYLES} }
+        document::Link { rel: "stylesheet", href: STYLES }
         div { id:"overlay",
             h2 { "Control Panel" },
             button {
-                onclick: move |_| *show_cube.write() = !show_cube(),
+                onclick: move |_| show_cube.toggle(),
                 if show_cube() {
                     "Hide cube"
                 } else {
@@ -62,7 +65,7 @@ fn app() -> Element {
             p { "This underlay demonstrates that the custom WGPU content can be rendered above layers and blended with the content underneath" }
         }
         header {
-            h2 { "Blitz WGPU Demo" }
+            h1 { "Blitz WGPU Demo" }
         }
         if show_cube() {
             SpinningCube { color }
@@ -99,7 +102,7 @@ fn SpinningCube(color: Memo<Color>) -> Element {
         div { id:"canvas-container",
             canvas {
                 id: "demo-canvas",
-                "data": paint_source_id
+                "src": paint_source_id
             }
         }
     )

examples/wgpu-texture/src/styles.css

@@ -18,12 +18,14 @@ main {
 #canvas-container {
     display: grid;
     opacity: 0.8;
+    grid-row: 2;
 }
 
 header {
     padding: 10px 40px;
     background-color: white;
     z-index: 100;
+    grid-row: 1;
 }
 
 #overlay {