Upgrade to Blitz v0.2.0 (#4731)

* Bump Rust CI version to 1.88

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

* Upgrade to Blitz v0.2.0

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

* Native: enable clipboard and file_dialog support by default

* Fix clippy errors

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

* See if cargo update magically fixes build

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

* Fix compile err

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

* Remove unused wasm-opt dep

* Fix wgpu_child_window example

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

* Update blitz-shell

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

* cargo fmt

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

* Allow clippy lint

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

* CI: Bump pinned nightly version

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

* Allow clippy lint in whole module

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

* Fix more clippy lints

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

* Use Rust 1.90 for clippy

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

* cargo update --ignore-rust-version

* revert cargo updates

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

* Revert another silly clippy lint

---------

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

examples/08-apis/wgpu_child_window.rs

@@ -118,17 +118,15 @@ impl<'a> GraphicsResources<'a> {
 
         // Create the logical device and command queue
         let (device, queue) = adapter
-            .request_device(
-                &wgpu::DeviceDescriptor {
-                    label: None,
-                    required_features: wgpu::Features::empty(),
-                    // Make sure we use the texture resolution limits from the adapter, so we can support images the size of the swapchain.
-                    required_limits: wgpu::Limits::downlevel_webgl2_defaults()
-                        .using_resolution(adapter.limits()),
-                    memory_hints: wgpu::MemoryHints::default(),
-                },
-                None,
-            )
+            .request_device(&wgpu::DeviceDescriptor {
+                label: None,
+                required_features: wgpu::Features::empty(),
+                // Make sure we use the texture resolution limits from the adapter, so we can support images the size of the swapchain.
+                required_limits: wgpu::Limits::downlevel_webgl2_defaults()
+                    .using_resolution(adapter.limits()),
+                memory_hints: wgpu::MemoryHints::default(),
+                ..Default::default()
+            })
             .await
             .expect("Failed to create device");
 
@@ -235,6 +233,7 @@ fn fs_main() -> @location(0) vec4<f32> {
                         load: wgpu::LoadOp::Clear(wgpu::Color::TRANSPARENT),
                         store: wgpu::StoreOp::Store,
                     },
+                    depth_slice: None,
                 })],
                 depth_stencil_attachment: None,
                 timestamp_writes: None,

examples/10-integrations/bevy/Cargo.toml

@@ -12,7 +12,7 @@ native = ["dioxus/native"]
 tracing = ["dep:tracing-subscriber", "dioxus-native/tracing"]
 
 [dependencies]
-bevy = { version = "0.16" }
+bevy = { workspace = true }
 dioxus-native = { workspace = true }
 dioxus = { workspace = true }
 wgpu = { workspace = true }

examples/10-integrations/bevy/src/bevy_renderer.rs

@@ -1,20 +1,20 @@
 use crate::bevy_scene_plugin::BevyScenePlugin;
 use bevy::{
+    camera::{ManualTextureViewHandle, RenderTarget},
     prelude::*,
     render::{
-        camera::{ManualTextureView, ManualTextureViewHandle, ManualTextureViews, RenderTarget},
         render_resource::TextureFormat,
         renderer::{
             RenderAdapter, RenderAdapterInfo, RenderDevice, RenderInstance, RenderQueue,
             WgpuWrapper,
         },
         settings::{RenderCreation, RenderResources},
+        texture::ManualTextureView,
         RenderPlugin,
     },
 };
 use dioxus_native::{CustomPaintCtx, DeviceHandle, TextureHandle};
 use std::sync::Arc;
-use wgpu::Instance;
 
 #[derive(Resource, Default)]
 pub struct UIData {
@@ -30,7 +30,7 @@ pub struct BevyRenderer {
 }
 
 impl BevyRenderer {
-    pub fn new(instance: &Instance, device_handle: &DeviceHandle) -> Self {
+    pub fn new(device_handle: &DeviceHandle) -> Self {
         // Create a headless Bevy App.
         let mut app = App::new();
         app.add_plugins(
@@ -42,7 +42,7 @@ impl BevyRenderer {
                         RenderQueue(Arc::new(WgpuWrapper::new(device_handle.queue.clone()))),
                         RenderAdapterInfo(WgpuWrapper::new(device_handle.adapter.get_info())),
                         RenderAdapter(Arc::new(WgpuWrapper::new(device_handle.adapter.clone()))),
-                        RenderInstance(Arc::new(WgpuWrapper::new(instance.clone()))),
+                        RenderInstance(Arc::new(WgpuWrapper::new(device_handle.instance.clone()))),
                     )),
                     synchronous_pipeline_compilation: true,
                     ..default()
@@ -51,6 +51,7 @@ impl BevyRenderer {
                     primary_window: None,
                     exit_condition: bevy::window::ExitCondition::DontExit,
                     close_when_requested: false,
+                    ..Default::default()
                 })
                 .disable::<bevy::winit::WinitPlugin>(),
         );
@@ -95,7 +96,7 @@ impl BevyRenderer {
         // Run one frame of the Bevy app to render the 3D scene.
         self.app.update();
 
-        self.texture_handle
+        self.texture_handle.clone()
     }
 
     fn init_texture(&mut self, mut ctx: CustomPaintCtx<'_>, width: u32, height: u32) {
@@ -114,9 +115,8 @@ impl BevyRenderer {
 
         if let Some(mut manual_texture_views) = world.get_resource_mut::<ManualTextureViews>() {
             // Clean previous texture if any.
-            if let Some(texture_handle) = self.texture_handle {
-                ctx.unregister_texture(texture_handle);
-                self.texture_handle = None;
+            if self.texture_handle.is_some() {
+                ctx.unregister_texture(self.texture_handle.take().unwrap());
             }
             if let Some(old_handle) = self.manual_texture_view_handle {
                 manual_texture_views.remove(&old_handle);

examples/10-integrations/bevy/src/demo_renderer.rs

@@ -2,7 +2,6 @@ use crate::bevy_renderer::BevyRenderer;
 use crate::Color;
 use dioxus_native::{CustomPaintCtx, CustomPaintSource, DeviceHandle, TextureHandle};
 use std::sync::mpsc::{channel, Receiver, Sender};
-use wgpu::Instance;
 
 pub enum DemoMessage {
     // Color in RGB format
@@ -71,8 +70,8 @@ impl DemoPaintSource {
 }
 
 impl CustomPaintSource for DemoPaintSource {
-    fn resume(&mut self, instance: &Instance, device_handle: &DeviceHandle) {
-        let active_state = BevyRenderer::new(instance, device_handle);
+    fn resume(&mut self, device_handle: &DeviceHandle) {
+        let active_state = BevyRenderer::new(device_handle);
         self.state = DemoRendererState::Active(Box::new(active_state));
     }
 

examples/10-integrations/native-headless-in-bevy/Cargo.toml

@@ -20,10 +20,10 @@ blitz-traits = { workspace = true, default-features = true }
 anyrender_vello = { workspace = true }
 wgpu = { workspace = true }
 tracing-subscriber = { workspace = true, optional = true }
-bevy = { version = "0.16" }
+bevy = { workspace = true }
+vello = { workspace = true }
 async-std = "1.13"
 crossbeam-channel = "0.5"
 paste = "1.0"
 rustc-hash = "1"
-vello = "0.5"
 

examples/10-integrations/native-headless-in-bevy/src/bevy_scene_plugin.rs

@@ -155,7 +155,7 @@ fn animate(
 
 fn orbit_camera_system(
     mut camera_query: Query<(&mut Transform, &mut OrbitCamera), With<Camera3d>>,
-    mut mouse_motion_events: EventReader<MouseMotion>,
+    mut mouse_motion_events: MessageReader<MouseMotion>,
     mouse_button_input: Res<ButtonInput<MouseButton>>,
 ) {
     for (mut transform, mut orbit_camera) in camera_query.iter_mut() {

examples/10-integrations/native-headless-in-bevy/src/dioxus_in_bevy_plugin.rs

@@ -1,12 +1,15 @@
+use std::time::Instant;
+
+use bevy::asset::RenderAssetUsages;
 use bevy::prelude::*;
 use bevy::{
     input::{
         keyboard::{Key as BevyKey, KeyCode as BevyKeyCode, KeyboardInput},
         mouse::{MouseButton, MouseButtonInput},
-        ButtonInput, ButtonState, InputSystem,
+        ButtonInput, ButtonState, InputSystems,
     },
     render::{
-        render_asset::{RenderAssetUsages, RenderAssets},
+        render_asset::RenderAssets,
         render_graph::{self, NodeRunError, RenderGraph, RenderGraphContext, RenderLabel},
         render_resource::{Extent3d, TextureDimension, TextureFormat},
         renderer::{RenderContext, RenderDevice, RenderQueue},
@@ -16,7 +19,7 @@ use bevy::{
     window::{CursorMoved, WindowResized},
 };
 
-use anyrender_vello::{CustomPaintSource, VelloScenePainter};
+use anyrender_vello::VelloScenePainter;
 use blitz_dom::{Document as _, DocumentConfig};
 use blitz_paint::paint_scene;
 use blitz_traits::events::{
@@ -26,7 +29,6 @@ use blitz_traits::shell::{ColorScheme, Viewport};
 use crossbeam_channel::{Receiver, Sender};
 use dioxus::prelude::*;
 use dioxus_native_dom::DioxusDocument;
-use rustc_hash::FxHashMap;
 use vello::{
     peniko::color::AlphaColor, RenderParams, Renderer as VelloRenderer, RendererOptions, Scene,
 };
@@ -41,17 +43,22 @@ pub struct DioxusInBevyPlugin<UIProps> {
     pub props: UIProps,
 }
 
+#[derive(Resource)]
+struct AnimationTime(Instant);
+
 impl<UIProps: std::marker::Send + std::marker::Sync + std::clone::Clone + 'static> Plugin
     for DioxusInBevyPlugin<UIProps>
 {
     fn build(&self, app: &mut App) {
+        let epoch = AnimationTime(Instant::now());
+
         // Create the dioxus virtual dom and the dioxus-native document
         // The viewport will be set in setup_ui after we get the window size
         let vdom = VirtualDom::new_with_props(self.ui, self.props.clone());
         // FIXME add a NetProvider
         let mut dioxus_doc = DioxusDocument::new(vdom, DocumentConfig::default());
         dioxus_doc.initial_build();
-        dioxus_doc.resolve();
+        dioxus_doc.resolve(0.0);
 
         // Dummy waker
         struct NullWake;
@@ -62,13 +69,14 @@ impl<UIProps: std::marker::Send + std::marker::Sync + std::clone::Clone + 'stati
 
         app.insert_non_send_resource(dioxus_doc);
         app.insert_non_send_resource(waker);
+        app.insert_resource(epoch);
         app.add_systems(Startup, setup_ui);
         app.add_systems(
             PreUpdate,
             (
                 handle_window_resize,
-                handle_mouse_events.after(InputSystem),
-                handle_keyboard_events.after(InputSystem),
+                handle_mouse_events.after(InputSystems),
+                handle_keyboard_events.after(InputSystems),
             )
                 .chain(),
         );
@@ -202,6 +210,7 @@ fn setup_ui(
     mut materials: ResMut<Assets<ColorMaterial>>,
     mut images: ResMut<Assets<Image>>,
     mut dioxus_doc: NonSendMut<DioxusDocument>,
+    mut animation_epoch: ResMut<AnimationTime>,
     windows: Query<&Window>,
 ) {
     let window = windows
@@ -214,8 +223,9 @@ fn setup_ui(
     debug!("Initial window size: {}x{}", width, height);
 
     // Set the initial viewport
+    animation_epoch.0 = Instant::now();
     dioxus_doc.set_viewport(Viewport::new(width, height, SCALE_FACTOR, COLOR_SCHEME));
-    dioxus_doc.resolve();
+    dioxus_doc.resolve(0.0);
 
     // Create Bevy Image from the texture data
     let image = create_ui_texture(width, height);
@@ -242,6 +252,7 @@ fn setup_ui(
     commands.insert_resource(TextureImage(handle));
 }
 
+#[allow(clippy::too_many_arguments)]
 fn update_ui(
     mut dioxus_doc: NonSendMut<DioxusDocument>,
     waker: NonSendMut<std::task::Waker>,
@@ -249,6 +260,7 @@ fn update_ui(
     render_device: Res<RenderDevice>,
     render_queue: Res<RenderQueue>,
     receiver: Res<MainWorldReceiver>,
+    animation_epoch: Res<AnimationTime>,
     mut cached_texture: Local<Option<RenderTexture>>,
 ) {
     while let Ok(texture) = receiver.try_recv() {
@@ -261,29 +273,21 @@ fn update_ui(
         dioxus_doc.poll(Some(std::task::Context::from_waker(&waker)));
 
         // Refresh the document
-        dioxus_doc.resolve();
+        let animation_time = animation_epoch.0.elapsed().as_secs_f64();
+        dioxus_doc.resolve(animation_time);
 
-        // Create a `VelloScenePainter` to paint into
-        let mut custom_paint_sources =
-            FxHashMap::<u64, Box<dyn CustomPaintSource + 'static>>::default();
-        let mut scene_painter = VelloScenePainter {
-            inner: Scene::new(),
-            renderer: &mut vello_renderer,
-            custom_paint_sources: &mut custom_paint_sources,
-        };
+        // Create a `vello::Scene` to paint into
+        let mut scene = Scene::new();
 
         // Paint the document
         paint_scene(
-            &mut scene_painter,
+            &mut VelloScenePainter::new(&mut scene),
             &dioxus_doc,
             SCALE_FACTOR as f64,
             texture.width,
             texture.height,
         );
 
-        // Extract the `vello::Scene` from the `VelloScenePainter`
-        let scene = scene_painter.finish();
-
         // Render the `vello::Scene` to the Texture using the `VelloRenderer`
         vello_renderer
             .render_to_texture(
@@ -304,7 +308,7 @@ fn update_ui(
 
 fn handle_window_resize(
     mut dioxus_doc: NonSendMut<DioxusDocument>,
-    mut resize_events: EventReader<WindowResized>,
+    mut resize_events: MessageReader<WindowResized>,
     mut commands: Commands,
     mut images: ResMut<Assets<Image>>,
     mut materials: ResMut<Assets<ColorMaterial>>,
@@ -319,7 +323,7 @@ fn handle_window_resize(
 
         // Update the dioxus viewport
         dioxus_doc.set_viewport(Viewport::new(width, height, SCALE_FACTOR, COLOR_SCHEME));
-        dioxus_doc.resolve();
+        // dioxus_doc.resolve();
 
         // Create a new texture with the new size
         let new_image = create_ui_texture(width, height);
@@ -369,8 +373,8 @@ fn does_catch_events(dioxus_doc: &DioxusDocument, node_id: usize) -> bool {
 
 fn handle_mouse_events(
     mut dioxus_doc: NonSendMut<DioxusDocument>,
-    mut cursor_moved: EventReader<CursorMoved>,
-    mut mouse_button_input_events: ResMut<Events<MouseButtonInput>>,
+    mut cursor_moved: MessageReader<CursorMoved>,
+    mut mouse_button_input_events: ResMut<Messages<MouseButtonInput>>,
     mut mouse_buttons: ResMut<ButtonInput<MouseButton>>,
     mut last_mouse_state: Local<MouseState>,
 ) {
@@ -438,12 +442,12 @@ fn handle_mouse_events(
         mouse_buttons.reset_all();
     }
 
-    dioxus_doc.resolve();
+    // dioxus_doc.resolve();
 }
 
 fn handle_keyboard_events(
     mut dioxus_doc: NonSendMut<DioxusDocument>,
-    mut keyboard_input_events: ResMut<Events<KeyboardInput>>,
+    mut keyboard_input_events: ResMut<Messages<KeyboardInput>>,
     mut keys: ResMut<ButtonInput<BevyKeyCode>>,
     mut last_mouse_state: Local<MouseState>,
 ) {
@@ -512,7 +516,7 @@ fn handle_keyboard_events(
         keys.reset_all();
     }
 
-    dioxus_doc.resolve();
+    // dioxus_doc.resolve();
 }
 
 fn bevy_key_to_blitz_key(key: &BevyKey) -> Key {

examples/10-integrations/native-headless-in-bevy/src/ui.css

@@ -62,6 +62,17 @@ html, body, #main {
     background-color: blue;
 }
 
+.spin-box {
+    width: 50px;
+    height: 50px;
+    animation: spin 4s infinite linear;
+}
+
+@keyframes spin {
+    from { transform:rotate(0deg); }
+    to { transform:rotate(360deg); }
+}
+
 #translation-speed-control, #rotation-speed-control {
     display: flex;
     flex-direction: row;

examples/10-integrations/native-headless-in-bevy/src/ui.rs

@@ -104,6 +104,11 @@ pub fn ui(props: UIProps) -> Element {
         }
     });
 
+    let color = *state.cube_color.read();
+    let [r, g, b, a] = color.map(|c| (c * 255.0) as u8);
+
+    println!("rgba({r}, {g}, {b}, {a})");
+
     rsx! {
         style { {include_str!("./ui.css")} }
         div {
@@ -163,6 +168,16 @@ pub fn ui(props: UIProps) -> Element {
                     }
                 }
             }
+            div {
+                flex: "0 0 150px",
+                display: "grid",
+                align_items: "center",
+                justify_items: "center",
+                div {
+                    class: "spin-box",
+                    background: "rgba({r}, {g}, {b}, {a}",
+                }
+            }
             div {
                 id: "footer",
                 p { "Bevy framerate: {state.fps}" }

examples/10-integrations/native-headless/Cargo.toml

@@ -12,11 +12,12 @@ tracing = ["dep:tracing-subscriber", "dioxus-native-dom/tracing"]
 dioxus = { workspace = true, features = ["html", "hooks", "signals"] }
 dioxus-native-dom = { workspace = true }
 anyrender_vello = { workspace = true }
-vello = "0.5"
+vello = { workspace = true }
 rustc-hash = "1"
 futures-util = { workspace = true }
 tracing-subscriber = { workspace = true, optional = true }
 wgpu = { workspace = true }
+wgpu_context = { workspace = true }
 pollster = "0.4"
 bytemuck = "1"
 blitz-paint = { workspace = true, default-features = true }

examples/10-integrations/native-headless/src/main.rs

@@ -3,7 +3,7 @@
 //!
 //! (this example is not really intended to be run as-is, and requires you to fill
 //! in the missing pieces)
-use anyrender_vello::{wgpu_context::WGPUContext, CustomPaintSource, VelloScenePainter};
+use anyrender_vello::VelloScenePainter;
 use blitz_dom::{Document as _, DocumentConfig};
 use blitz_paint::paint_scene;
 use blitz_traits::{
@@ -13,13 +13,13 @@ use blitz_traits::{
 use dioxus::prelude::*;
 use dioxus_native_dom::DioxusDocument;
 use pollster::FutureExt as _;
-use rustc_hash::FxHashMap;
 use std::sync::Arc;
 use std::task::Context;
 use vello::{
     peniko::color::AlphaColor, RenderParams, Renderer as VelloRenderer, RendererOptions, Scene,
 };
 use wgpu::TextureFormat;
+use wgpu_context::WGPUContext;
 
 // Constant width, height, scale factor and color schemefor example purposes
 const SCALE_FACTOR: f32 = 1.0;
@@ -102,14 +102,8 @@ fn main() {
     // Poll the vdom
     dioxus_doc.poll(Some(Context::from_waker(&waker)));
 
-    // Create a `VelloScenePainter` to paint into
-    let mut custom_paint_sources =
-        FxHashMap::<u64, Box<dyn CustomPaintSource + 'static>>::default();
-    let mut scene_painter = VelloScenePainter {
-        inner: Scene::new(),
-        renderer: &mut vello_renderer,
-        custom_paint_sources: &mut custom_paint_sources,
-    };
+    // Create a `vello::Scene` to paint into
+    let mut scene = Scene::new();
 
     // Paint the document using `blitz_paint::paint_scene`
     //
@@ -117,16 +111,13 @@ fn main() {
     // so you could also write your own implementation if you want more control over rendering
     // (i.e. to render a custom renderer instead of Vello)
     paint_scene(
-        &mut scene_painter,
+        &mut VelloScenePainter::new(&mut scene),
         &dioxus_doc,
         SCALE_FACTOR as f64,
         WIDTH,
         HEIGHT,
     );
 
-    // Extract the `vello::Scene` from the `VelloScenePainter`
-    let scene = scene_painter.finish();
-
     // Render the `vello::Scene` to the Texture using the `VelloRenderer`
     vello_renderer
         .render_to_texture(

examples/10-integrations/wgpu-texture/src/demo_renderer.rs

@@ -5,7 +5,7 @@ use dioxus_native::{CustomPaintCtx, CustomPaintSource, DeviceHandle, TextureHand
 use std::sync::mpsc::{channel, Receiver, Sender};
 use std::time::Instant;
 use wgpu::{
-    CommandEncoderDescriptor, Device, Extent3d, FragmentState, Instance, LoadOp, MultisampleState,
+    CommandEncoderDescriptor, Device, Extent3d, FragmentState, LoadOp, MultisampleState,
     Operations, PipelineLayoutDescriptor, PrimitiveState, PushConstantRange, Queue,
     RenderPassColorAttachment, RenderPassDescriptor, RenderPipeline, RenderPipelineDescriptor,
     ShaderModuleDescriptor, ShaderSource, ShaderStages, StoreOp, Texture, TextureDescriptor,
@@ -21,7 +21,7 @@ pub struct DemoPaintSource {
 }
 
 impl CustomPaintSource for DemoPaintSource {
-    fn resume(&mut self, _instance: &Instance, device_handle: &DeviceHandle) {
+    fn resume(&mut self, device_handle: &DeviceHandle) {
         // Extract device and queue from device_handle
         let device = &device_handle.device;
         let queue = &device_handle.queue;
@@ -175,8 +175,7 @@ impl ActiveDemoRenderer {
         // If "next texture" size doesn't match specified size then unregister and drop texture
         if let Some(next) = &self.next_texture {
             if next.texture.width() != width || next.texture.height() != height {
-                ctx.unregister_texture(next.handle);
-                self.next_texture = None;
+                ctx.unregister_texture(self.next_texture.take().unwrap().handle);
             }
         }
 
@@ -192,7 +191,7 @@ impl ActiveDemoRenderer {
         };
 
         let next_texture = &texture_and_handle.texture;
-        let next_texture_handle = texture_and_handle.handle;
+        let next_texture_handle = texture_and_handle.handle.clone();
 
         let elapsed: f32 = start_time.elapsed().as_millis() as f32 / 500.;
         let [light_red, light_green, light_blue] = light;
@@ -213,6 +212,7 @@ impl ActiveDemoRenderer {
                         load: LoadOp::Clear(wgpu::Color::GREEN),
                         store: StoreOp::Store,
                     },
+                    depth_slice: None,
                 })],
                 depth_stencil_attachment: None,
                 timestamp_writes: None,

examples/assets/todomvc.css

@@ -211,6 +211,7 @@ body {
     padding: 15px 15px 15px 60px;
     display: block;
     line-height: 1.2;
+    transition: color 0.4s;
 }
 
 .todo-list li.completed label {
@@ -230,6 +231,7 @@ body {
     font-size: 30px;
     color: #cc9a9a;
     margin-bottom: 11px;
+    transition: color 0.2s ease-out;
 }
 
 .todo-list li .destroy:hover {