diff --git a/Cargo.toml b/Cargo.toml
index c9e5a50..2eaf700 100644
--- a/Cargo.toml
+++ b/Cargo.toml
@@ -18,6 +18,13 @@ members = [
 ]
 
 [dependencies]
+bevy = { version = "0.9.0", features = [
+  "bevy_winit",
+  "render",
+  "png",
+  "hdr",
+  "wayland",
+] }
 crossbeam-channel = "0.5.1"
 headless_webview = { version = "0.1.1", path = "./crates/headless_webview", features = ["protocol"] }
 headless_webview_engine = { version = "0.1.1", path = "./crates/headless_webview_engine", optional = true }
@@ -29,22 +36,6 @@ serde_json = "1.0"
 url = "2.2"
 mime_guess = "2.0.3"
 
-[dependencies.bevy]
-version = "0.7"
-default-features = false
-features = ["render"]
-
-[dev-dependencies.bevy]
-version = "0.7"
-default-features = false
-features = [
-  "bevy_winit",
-  "render",
-  "png",
-  "hdr",
-  "x11",
-]
-
 [dev-dependencies]
 rand = "0.8.4"
 
diff --git a/examples/3d_scene.rs b/examples/3d_scene.rs
index d3f6c5d..65a032b 100644
--- a/examples/3d_scene.rs
+++ b/examples/3d_scene.rs
@@ -17,20 +17,20 @@ fn setup(
     mut materials: ResMut<Assets<StandardMaterial>>,
 ) {
     // plane
-    commands.spawn_bundle(PbrBundle {
+    commands.spawn(PbrBundle {
         mesh: meshes.add(Mesh::from(shape::Plane { size: 5.0 })),
         material: materials.add(Color::rgb(0.3, 0.5, 0.3).into()),
         ..Default::default()
     });
     // cube
-    commands.spawn_bundle(PbrBundle {
+    commands.spawn(PbrBundle {
         mesh: meshes.add(Mesh::from(shape::Cube { size: 1.0 })),
         material: materials.add(Color::rgb(0.8, 0.7, 0.6).into()),
         transform: Transform::from_xyz(0.0, 0.5, 0.0),
         ..Default::default()
     });
     // light
-    commands.spawn_bundle(PointLightBundle {
+    commands.spawn(PointLightBundle {
         point_light: PointLight {
             intensity: 1500.0,
             shadows_enabled: true,
@@ -40,15 +40,15 @@ fn setup(
         ..Default::default()
     });
     // camera
-    commands.spawn_bundle(PerspectiveCameraBundle {
+    commands.spawn(Camera3dBundle {
         transform: Transform::from_xyz(-2.0, 2.5, 5.0)
             .looking_at(Vec3::new(0.0, 2.0, 0.0), Vec3::Y),
         ..Default::default()
     });
     // webview
-    commands.spawn_bundle(WebviewBundle {
+    commands.spawn(WebviewBundle {
         webview: Webview {
-            uri: Some(String::from("https://bevyengine.org/")),
+            uri: Some(String::from("https://html5test.com/")),
             color: Color::rgba(0.3, 0.3, 0.3, 0.5),
             ..Default::default()
         },
diff --git a/examples/change_detection.rs b/examples/change_detection.rs
index ca65be9..8c793e4 100644
--- a/examples/change_detection.rs
+++ b/examples/change_detection.rs
@@ -13,15 +13,15 @@ fn main() {
 }
 
 fn setup(mut commands: Commands) {
-    commands.spawn_bundle(UiCameraBundle::default());
+    commands.spawn(Camera2dBundle::default());
 
     commands.insert_resource(Elapsed {
         iteration: 0,
-        timer: Timer::new(Duration::from_millis(2000), true),
+        timer: Timer::new(Duration::from_millis(2000), TimerMode::Repeating),
     });
 }
 
-#[derive(Component, Debug)]
+#[derive(Component, Debug, Resource)]
 struct Elapsed {
     iteration: usize,
     timer: Timer,
@@ -36,16 +36,16 @@ fn change_webview_system(
     if elapsed.timer.tick(time.delta()).just_finished() {
         if elapsed.iteration == 0 {
             // at first tick, spawn the webview
-            commands.spawn_bundle(WebviewUIBundle {
+            commands.spawn(WebviewUIBundle {
                 webview: Webview {
                     uri: Some("https://bevyengine.org/".into()),
                     ..Default::default()
                 },
                 style: Style {
-                    size: Size::new(Val::Percent(50.0), Val::Percent(50.)),
-                    margin: Rect::all(Val::Auto),
-                    justify_content: JustifyContent::Center,
                     align_items: AlignItems::Center,
+                    justify_content: JustifyContent::Center,
+                    margin: UiRect::all(Val::Auto),
+                    size: Size::new(Val::Percent(50.0), Val::Percent(50.)),
                     ..Default::default()
                 },
                 ..Default::default()
diff --git a/examples/commands.rs b/examples/commands.rs
index c187e63..9b46ca7 100644
--- a/examples/commands.rs
+++ b/examples/commands.rs
@@ -13,16 +13,16 @@ fn main() {
 }
 
 fn setup(mut commands: Commands) {
-    commands.spawn_bundle(UiCameraBundle::default());
+    commands.spawn(Camera2dBundle::default());
 
-    commands.spawn_bundle(WebviewUIBundle {
+    commands.spawn(WebviewUIBundle {
         webview: Webview {
             uri: Some("https://bevyengine.org/".into()),
             ..Default::default()
         },
         style: Style {
             size: Size::new(Val::Percent(50.0), Val::Percent(50.)),
-            margin: Rect::all(Val::Auto),
+            margin: UiRect::all(Val::Auto),
             justify_content: JustifyContent::Center,
             align_items: AlignItems::Center,
             ..Default::default()
@@ -32,11 +32,11 @@ fn setup(mut commands: Commands) {
 
     commands.insert_resource(Elapsed {
         iteration: 0,
-        timer: Timer::new(Duration::from_millis(2000), true),
+        timer: Timer::new(Duration::from_millis(2000), TimerMode::Repeating),
     });
 }
 
-#[derive(Component)]
+#[derive(Component, Resource)]
 struct Elapsed {
     iteration: usize,
     timer: Timer,
diff --git a/examples/events.rs b/examples/events.rs
index 9879658..8d3fb33 100644
--- a/examples/events.rs
+++ b/examples/events.rs
@@ -22,10 +22,9 @@ fn main() {
 struct TimeReceiver;
 
 fn setup(mut commands: Commands) {
-    commands.spawn_bundle(UiCameraBundle::default());
-
+    commands.spawn(Camera2dBundle::default());
     commands
-        .spawn_bundle(WebviewUIBundle {
+        .spawn(WebviewUIBundle {
             webview: Webview {
                 html: Some(include_str!("events.html").into()),
                 color: Color::rgb_u8(58, 58, 58),
@@ -33,7 +32,7 @@ fn setup(mut commands: Commands) {
             },
             style: Style {
                 size: Size::new(Val::Percent(50.0), Val::Percent(50.)),
-                margin: Rect::all(Val::Auto),
+                margin: UiRect::all(Val::Auto),
                 justify_content: JustifyContent::Center,
                 align_items: AlignItems::Center,
                 ..Default::default()
@@ -42,15 +41,15 @@ fn setup(mut commands: Commands) {
         })
         .insert(TimeReceiver);
 
-    commands.insert_resource(TimeTick(Timer::new(Duration::from_millis(1_000), true)));
+    commands.insert_resource(TimeTick(Timer::new(Duration::from_millis(1_000), TimerMode::Repeating)));
 }
 
-#[derive(Deserialize, Debug)]
+#[derive(Deserialize, Resource, Debug)]
 pub struct LoginRequest {
     username: String,
 }
 
-#[derive(Serialize, Debug)]
+#[derive(Serialize, Debug, Resource)]
 pub struct AppTime {
     seconds_since_startup: f64,
 }
@@ -70,7 +69,7 @@ fn login_handler(mut login_request_events: WebviewEventReader<LoginRequest>) {
     }
 }
 
-#[derive(Deserialize, Debug)]
+#[derive(Deserialize,Resource, Debug)]
 pub struct CloseRequest;
 
 fn close_handler(
@@ -86,6 +85,7 @@ fn close_handler(
     }
 }
 
+#[derive(Resource)]
 struct TimeTick(Timer);
 
 fn send_time_to_all_webviews_system(
@@ -95,7 +95,7 @@ fn send_time_to_all_webviews_system(
 ) {
     if tick.0.tick(time.delta()).just_finished() {
         app_time.send(AppTime {
-            seconds_since_startup: time.seconds_since_startup(),
+            seconds_since_startup: time.elapsed_seconds_f64(),
         });
     }
 }
diff --git a/examples/local_assets.rs b/examples/local_assets.rs
index a8c7b8c..70fb898 100644
--- a/examples/local_assets.rs
+++ b/examples/local_assets.rs
@@ -11,17 +11,17 @@ fn main() {
 }
 
 fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
-    commands.spawn_bundle(UiCameraBundle::default());
+    commands.spawn(Camera2dBundle::default());
 
     // webview
-    commands.spawn_bundle(WebviewUIBundle {
+    commands.spawn(WebviewUIBundle {
         webview: Webview {
             uri: Some(String::from("webview:///test_webview.html")),
             ..Default::default()
         },
         style: Style {
             size: Size::new(Val::Percent(80.0), Val::Percent(80.)),
-            margin: Rect::all(Val::Auto),
+            margin: UiRect::all(Val::Auto),
             justify_content: JustifyContent::Center,
             align_items: AlignItems::Center,
             ..Default::default()
@@ -31,27 +31,26 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
 
     // reload button
     commands
-        .spawn_bundle(ButtonBundle {
+        .spawn(ButtonBundle {
             style: Style {
                 size: Size::new(Val::Px(150.0), Val::Px(65.0)),
-                margin: Rect::all(Val::Auto),
+                margin: UiRect::all(Val::Auto),
                 justify_content: JustifyContent::Center,
                 align_items: AlignItems::Center,
                 ..Default::default()
             },
-            color: NORMAL_BUTTON.into(),
+            background_color: NORMAL_BUTTON.into(),
             ..Default::default()
         })
         .with_children(|parent| {
-            parent.spawn_bundle(TextBundle {
-                text: Text::with_section(
+            parent.spawn(TextBundle {
+                text: Text::from_section(
                     "Reload",
                     TextStyle {
                         font: asset_server.load("fonts/FiraSans-Bold.ttf"),
                         font_size: 40.0,
                         color: Color::rgb(0.9, 0.9, 0.9),
-                    },
-                    Default::default(),
+                    }
                 ),
                 ..Default::default()
             });
@@ -64,7 +63,7 @@ const PRESSED_BUTTON: Color = Color::rgb(0.35, 0.75, 0.35);
 
 fn reload_system(
     mut interaction_query: Query<
-        (&Interaction, &mut UiColor),
+        (&Interaction, &mut BackgroundColor),
         (Changed<Interaction>, With<Button>),
     >,
     mut webview_commands: WebviewEventWriter<WebviewCommand>,
diff --git a/examples/react_ui.rs b/examples/react_ui.rs
index bb07a94..6a63750 100644
--- a/examples/react_ui.rs
+++ b/examples/react_ui.rs
@@ -19,7 +19,7 @@ fn main() {
         .run();
 }
 
-#[derive(Serialize)]
+#[derive(Serialize, Resource)]
 pub struct CubeCount(usize);
 
 fn setup_webviews(mut commands: Commands) {
@@ -35,7 +35,7 @@ fn setup_webviews(mut commands: Commands) {
     }
 
     // 3d webview
-    commands.spawn_bundle(WebviewBundle {
+    commands.spawn(WebviewBundle {
         webview: Webview {
             uri: Some(String::from("https://bevyengine.org")),
             color: Color::rgba(0., 0., 0., 0.3),
@@ -44,7 +44,6 @@ fn setup_webviews(mut commands: Commands) {
         size: WebviewSize {
             x: 3.,
             y: 2.,
-            ppu: 300.,
             ..Default::default()
         },
         transform: Transform {
@@ -55,7 +54,7 @@ fn setup_webviews(mut commands: Commands) {
     });
 
     // UI webview (REACT)
-    commands.spawn_bundle(WebviewUIBundle {
+    commands.spawn(WebviewUIBundle {
         webview: Webview {
             uri: Some(String::from("http://localhost:3000/")),
             color: Color::rgba(0., 0., 0., 0.0),
@@ -63,7 +62,7 @@ fn setup_webviews(mut commands: Commands) {
         },
         style: Style {
             size: Size::new(Val::Percent(30.0), Val::Percent(80.)),
-            margin: Rect::all(Val::Px(50.)),
+            margin: UiRect::all(Val::Px(50.)),
             justify_content: JustifyContent::Center,
             align_items: AlignItems::Center,
             ..Default::default()
@@ -77,31 +76,29 @@ fn setup_scene(
     mut meshes: ResMut<Assets<Mesh>>,
     mut materials: ResMut<Assets<StandardMaterial>>,
 ) {
-    // ui camera
-    commands.spawn_bundle(UiCameraBundle::default());
 
     // camera
-    commands.spawn_bundle(PerspectiveCameraBundle {
+    commands.spawn(Camera3dBundle {
         transform: Transform::from_xyz(-2.0, 2.5, 5.0)
             .looking_at(Vec3::new(0.0, 2.0, 0.0), Vec3::Y),
         ..Default::default()
     });
 
     // plane
-    commands.spawn_bundle(PbrBundle {
+    commands.spawn(PbrBundle {
         mesh: meshes.add(Mesh::from(shape::Plane { size: 5.0 })),
         material: materials.add(Color::rgb(0.3, 0.5, 0.3).into()),
         ..Default::default()
     });
     // cube
-    commands.spawn_bundle(PbrBundle {
+    commands.spawn(PbrBundle {
         mesh: meshes.add(Mesh::from(shape::Cube { size: 1.0 })),
         material: materials.add(Color::rgb(0.8, 0.7, 0.6).into()),
         transform: Transform::from_xyz(0.0, 0.5, 0.0),
         ..Default::default()
     });
     // light
-    commands.spawn_bundle(PointLightBundle {
+    commands.spawn(PointLightBundle {
         point_light: PointLight {
             intensity: 1500.0,
             shadows_enabled: true,
@@ -112,12 +109,12 @@ fn setup_scene(
     });
 }
 
-#[derive(Deserialize, Debug)]
+#[derive(Deserialize, Resource, Debug)]
 pub struct CubeSpawn {
     count: usize,
 }
 
-#[derive(Component)]
+#[derive(Component, Resource)]
 pub struct Cube;
 
 fn cube_spawn_system(
@@ -136,7 +133,7 @@ fn cube_spawn_system(
 
         for _ in 0..event.count {
             commands
-                .spawn_bundle(PbrBundle {
+                .spawn(PbrBundle {
                     mesh: meshes.add(Mesh::from(shape::Cube { size: 0.3 })),
                     material: materials.add(Color::rgb(0.8, 0.7, 0.6).into()),
                     transform: Transform::from_xyz(
@@ -155,7 +152,7 @@ fn cube_spawn_system(
     }
 }
 
-#[derive(Deserialize, Debug)]
+#[derive(Deserialize, Resource, Debug)]
 pub struct CubeDestroy;
 
 fn cube_destroy_system(
diff --git a/examples/toggle_url.rs b/examples/toggle_url.rs
index 26232a4..df2f512 100644
--- a/examples/toggle_url.rs
+++ b/examples/toggle_url.rs
@@ -17,17 +17,17 @@ const URLS: [&'static str; 3] = [
 ];
 
 fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
-    commands.spawn_bundle(UiCameraBundle::default());
+    commands.spawn(Camera2dBundle::default());
 
     // webview
-    commands.spawn_bundle(WebviewUIBundle {
+    commands.spawn(WebviewUIBundle {
         webview: Webview {
             uri: Some(String::from(URLS[0])),
             ..Default::default()
         },
         style: Style {
             size: Size::new(Val::Percent(80.0), Val::Percent(80.)),
-            margin: Rect::all(Val::Auto),
+            margin: UiRect::all(Val::Auto),
             justify_content: JustifyContent::Center,
             align_items: AlignItems::Center,
             ..Default::default()
@@ -37,27 +37,26 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
 
     // reload button
     commands
-        .spawn_bundle(ButtonBundle {
+        .spawn(ButtonBundle {
             style: Style {
                 size: Size::new(Val::Px(150.0), Val::Px(65.0)),
-                margin: Rect::all(Val::Auto),
+                margin: UiRect::all(Val::Auto),
                 justify_content: JustifyContent::Center,
                 align_items: AlignItems::Center,
                 ..Default::default()
             },
-            color: NORMAL_BUTTON.into(),
+            background_color: NORMAL_BUTTON.into(),
             ..Default::default()
         })
         .with_children(|parent| {
-            parent.spawn_bundle(TextBundle {
-                text: Text::with_section(
+            parent.spawn(TextBundle {
+                text: Text::from_section(
                     "Next",
                     TextStyle {
                         font: asset_server.load("fonts/FiraSans-Bold.ttf"),
                         font_size: 40.0,
                         color: Color::rgb(0.9, 0.9, 0.9),
-                    },
-                    Default::default(),
+                    }
                 ),
                 ..Default::default()
             });
@@ -65,7 +64,7 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
 
     commands.insert_resource(CurrentUrl(0));
 }
-
+#[derive(Resource)]
 struct CurrentUrl(usize);
 
 const NORMAL_BUTTON: Color = Color::rgb(0.15, 0.15, 0.15);
@@ -74,7 +73,7 @@ const PRESSED_BUTTON: Color = Color::rgb(0.35, 0.75, 0.35);
 
 fn toggle_system(
     mut interaction_query: Query<
-        (&Interaction, &mut UiColor),
+        (&Interaction, &mut BackgroundColor),
         (Changed<Interaction>, With<Button>),
     >,
     mut webview_commands: WebviewEventWriter<WebviewCommand>,
diff --git a/examples/ui_with_html.rs b/examples/ui_with_html.rs
index 203d307..0c7584e 100644
--- a/examples/ui_with_html.rs
+++ b/examples/ui_with_html.rs
@@ -10,18 +10,20 @@ fn main() {
 }
 
 fn setup(mut commands: Commands) {
-    commands.spawn_bundle(UiCameraBundle::default());
+    commands.spawn(Camera2dBundle::default());
 
-    commands.spawn_bundle(WebviewUIBundle {
-        webview: Webview {
-            html: Some(include_str!("ui_with_html.html").to_string()),
-            color: Color::rgb_u8(255, 228, 196),
-            ..Default::default()
-        },
-        style: Style {
-            size: Size::new(Val::Percent(30.0), Val::Percent(100.)),
-            ..Default::default()
-        },
-        ..Default::default()
-    });
-}
+    commands
+        .spawn(WebviewUIBundle {
+                webview: Webview {
+                    html: Some(include_str!("ui_with_html.html").to_string()),
+                    color: Color::rgb_u8(255, 228, 196),
+                    ..Default::default()
+                },
+                style: Style {
+                    size: Size::new(Val::Percent(30.0), Val::Percent(100.)),
+                    ..Default::default()
+                },
+                
+                ..Default::default()
+            });
+        }
\ No newline at end of file
diff --git a/examples/ui_with_uri.rs b/examples/ui_with_uri.rs
index 21b448b..a4c43a3 100644
--- a/examples/ui_with_uri.rs
+++ b/examples/ui_with_uri.rs
@@ -10,9 +10,9 @@ fn main() {
 }
 
 fn setup(mut commands: Commands) {
-    commands.spawn_bundle(UiCameraBundle::default());
+    commands.spawn(Camera2dBundle::default());
 
-    commands.spawn_bundle(WebviewUIBundle {
+    commands.spawn(WebviewUIBundle {
         webview: Webview {
             uri: Some(String::from("http://bevyengine.org/")),
             color: Color::rgba_u8(35, 35, 38, 255),
diff --git a/examples/visibility.rs b/examples/visibility.rs
index c4985d7..ce996c3 100644
--- a/examples/visibility.rs
+++ b/examples/visibility.rs
@@ -35,28 +35,28 @@ fn get_webview() -> WebviewUIBundle {
 }
 
 fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
-    commands.spawn_bundle(UiCameraBundle::default());
+    commands.spawn(Camera2dBundle::default());
 
     commands
-        .spawn_bundle(NodeBundle {
+        .spawn(NodeBundle {
             style: Style {
                 size: Size::new(Val::Percent(60.0), Val::Percent(80.)),
-                margin: Rect::all(Val::Auto),
+                margin: UiRect::all(Val::Auto),
                 justify_content: JustifyContent::Center,
                 align_items: AlignItems::Center,
                 ..Default::default()
             },
-            color: Color::NONE.into(),
+            background_color: BackgroundColor(Color::NONE).into(),
             ..Default::default()
         })
         .with_children(|parent| {
-            parent.spawn_bundle(get_webview());
+            parent.spawn(get_webview());
         })
         .insert(WebviewRoot);
 
     // root node
     commands
-        .spawn_bundle(NodeBundle {
+        .spawn(NodeBundle {
             style: Style {
                 size: Size::new(Val::Percent(30.0), Val::Percent(80.0)),
                 flex_direction: FlexDirection::ColumnReverse,
@@ -64,33 +64,32 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
                 align_items: AlignItems::Center,
                 ..Default::default()
             },
-            color: Color::NONE.into(),
+            background_color: Color::NONE.into(),
             ..Default::default()
         })
         .with_children(|parent| {
             // toggle visibility
             parent
-                .spawn_bundle(ButtonBundle {
+                .spawn(ButtonBundle {
                     style: Style {
                         size: Size::new(Val::Px(200.0), Val::Px(65.0)),
-                        margin: Rect::all(Val::Px(20.)),
+                        margin: UiRect::all(Val::Px(20.)),
                         justify_content: JustifyContent::Center,
                         align_items: AlignItems::Center,
                         ..Default::default()
                     },
-                    color: NORMAL_BUTTON.into(),
+                    background_color: NORMAL_BUTTON.into(),
                     ..Default::default()
                 })
                 .with_children(|parent| {
-                    parent.spawn_bundle(TextBundle {
-                        text: Text::with_section(
+                    parent.spawn(TextBundle {
+                        text: Text::from_section(
                             "Hide",
                             TextStyle {
                                 font: asset_server.load("fonts/FiraSans-Bold.ttf"),
                                 font_size: 24.0,
                                 color: Color::rgb(0.9, 0.9, 0.9),
                             },
-                            Default::default(),
                         ),
                         ..Default::default()
                     });
@@ -99,27 +98,26 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
 
             // destroy
             parent
-                .spawn_bundle(ButtonBundle {
+                .spawn(ButtonBundle {
                     style: Style {
                         size: Size::new(Val::Px(200.0), Val::Px(65.0)),
-                        margin: Rect::all(Val::Px(20.)),
+                        margin: UiRect::all(Val::Px(20.)),
                         justify_content: JustifyContent::Center,
                         align_items: AlignItems::Center,
                         ..Default::default()
                     },
-                    color: NORMAL_BUTTON.into(),
+                    background_color: NORMAL_BUTTON.into(),
                     ..Default::default()
                 })
                 .with_children(|parent| {
-                    parent.spawn_bundle(TextBundle {
-                        text: Text::with_section(
+                    parent.spawn(TextBundle {
+                        text: Text::from_section(
                             "Despawn",
                             TextStyle {
                                 font: asset_server.load("fonts/FiraSans-Bold.ttf"),
                                 font_size: 24.0,
                                 color: Color::rgb(0.9, 0.9, 0.9),
                             },
-                            Default::default(),
                         ),
                         ..Default::default()
                     });
@@ -136,7 +134,7 @@ fn toggle_system(
     mut interaction_query: Query<
         (
             &Interaction,
-            &mut UiColor,
+            &mut BackgroundColor,
             &Children,
             Option<&SpawnToggleButton>,
             Option<&VisibilityToggleButton>,
@@ -162,7 +160,7 @@ fn toggle_system(
                         commands
                             .entity(webview_root.single())
                             .with_children(|parent| {
-                                parent.spawn_bundle(get_webview());
+                                parent.spawn(get_webview());
                             });
 
                         text.sections[0].value = "Despawn".to_string();
diff --git a/src/events.rs b/src/events.rs
index b1fa2ef..0b93a39 100644
--- a/src/events.rs
+++ b/src/events.rs
@@ -10,13 +10,13 @@ use serde::{Deserialize, Serialize};
 use crate::{systems, PostUpdateLabel, PreUpdateLabel};
 
 /// Mapping of RPC Input Event methods
-#[derive(Default)]
+#[derive(Default, Resource)]
 pub(crate) struct InputEventMapping {
     pub events: HashMap<TypeId, &'static str>,
 }
 
 /// Mapping of RPC Output Event methods
-#[derive(Default)]
+#[derive(Default, Resource)]
 pub(crate) struct OutputEventMapping {
     pub events: HashMap<TypeId, &'static str>,
 }
@@ -204,7 +204,7 @@ impl WebviewApp for App {
 }
 
 /// Enum of builtin event methods
-#[derive(Deserialize, Debug)]
+#[derive(Deserialize, Debug, Resource)]
 #[serde(rename_all(deserialize = "lowercase"))]
 pub(crate) enum BuiltinWebviewEvent {
     Despawn,
diff --git a/src/lib.rs b/src/lib.rs
index 781d44a..e534485 100644
--- a/src/lib.rs
+++ b/src/lib.rs
@@ -278,6 +278,8 @@ pub struct WebviewUIBundle {
     /// Describes the visibility properties of the node
     pub visibility: Visibility,
 
+    pub computed_visibility: ComputedVisibility,
+
     /// Interaction state
     pub interaction: WebviewInteraction,
 
@@ -319,7 +321,7 @@ impl Default for Webview {
 /// Any future command added here should be available in the core API's:
 /// * https://docs.microsoft.com/en-us/microsoft-edge/webview2/reference/win32/icorewebview2?view=webview2-1.0.1072.54
 /// * https://webkitgtk.org/reference/webkit2gtk/stable/WebKitWebView.html#webkit-web-view-reload
-#[derive(Component, Serialize, Debug, Clone)]
+#[derive(Component, Serialize, Resource, Debug, Clone)]
 pub enum WebviewCommand {
     /// Navigate to the given URI
     LoadUri(String),
diff --git a/src/systems/ui_focus_system.rs b/src/systems/ui_focus_system.rs
index ff3b375..a7da528 100644
--- a/src/systems/ui_focus_system.rs
+++ b/src/systems/ui_focus_system.rs
@@ -1,5 +1,5 @@
 //! This module is based on bevy_ui, with added positions for Interaction
-use bevy::{core::FloatOrd, input::ElementState, prelude::*, ui::FocusPolicy};
+use bevy::{utils::FloatOrd, input::ButtonState, prelude::*, ui::FocusPolicy};
 
 use crate::{
     types::{EventTransport, WebviewAction},
@@ -79,7 +79,7 @@ pub(crate) fn webview_ui_focus_system(
                         .send(WebviewAction::Click((
                             entity,
                             MouseButton::Left,
-                            ElementState::Released,
+                            ButtonState::Released,
                             offset, // FIXME : currently using wrong offset
                         )))
                         .unwrap();
@@ -99,9 +99,9 @@ pub(crate) fn webview_ui_focus_system(
         .iter_mut()
         .filter_map(
             |(entity, node, global_transform, interaction, focus_policy, clip)| {
-                let position = global_transform.translation;
+                let position = global_transform.translation();
                 let ui_position = position.truncate();
-                let extents = node.size / 2.0;
+                let extents = node.size() / 2.0;
                 let mut min = ui_position - extents;
                 let mut max = ui_position + extents;
                 if let Some(clip) = clip {
@@ -154,7 +154,7 @@ pub(crate) fn webview_ui_focus_system(
                     .send(WebviewAction::Click((
                         entity,
                         MouseButton::Left,
-                        ElementState::Pressed,
+                        ButtonState::Pressed,
                         offset,
                     )))
                     .unwrap();
@@ -166,7 +166,7 @@ pub(crate) fn webview_ui_focus_system(
                     .send(WebviewAction::Click((
                         entity,
                         MouseButton::Right,
-                        ElementState::Pressed,
+                        ButtonState::Pressed,
                         offset,
                     )))
                     .unwrap();
diff --git a/src/systems/ui_size_system.rs b/src/systems/ui_size_system.rs
index d79d35f..2060300 100644
--- a/src/systems/ui_size_system.rs
+++ b/src/systems/ui_size_system.rs
@@ -10,11 +10,11 @@ pub(crate) fn ui_size(
     resized_webviews: Query<(Entity, &Node, &Webview), Changed<Node>>,
 ) {
     for (entity, node, _webview) in resized_webviews.iter() {
-        log::debug!("Webview {:?} resized to {:?}", entity, node.size);
+        log::debug!("Webview {:?} resized to {:?}", entity, node.size());
 
         event_transport
             .webview_action_tx
-            .send(WebviewAction::Resize((entity, node.size)))
+            .send(WebviewAction::Resize((entity, node.size())))
             .unwrap();
     }
 }
diff --git a/src/systems/webview_changed_system.rs b/src/systems/webview_changed_system.rs
index 536c937..a76f4f5 100644
--- a/src/systems/webview_changed_system.rs
+++ b/src/systems/webview_changed_system.rs
@@ -9,7 +9,7 @@ use crate::{
 
 pub(crate) fn webview_changed_system(
     changed_webviews: Query<(Entity, &Webview), Changed<Webview>>,
-    webview_visibility_changes: Query<(Entity, &Visibility), (Changed<Visibility>, With<Webview>)>,
+    webview_visibility_changes: Query<(Entity, &Visibility), (Changed<ComputedVisibility>, With<Webview>)>,
     mut previous_webviews: Local<HashMap<Entity, Webview>>,
     event_transport: Res<EventTransport>,
     removed_webviews: RemovedComponents<Webview>,
diff --git a/src/systems/webview_create_system.rs b/src/systems/webview_create_system.rs
index ee1b0bc..162593a 100644
--- a/src/systems/webview_create_system.rs
+++ b/src/systems/webview_create_system.rs
@@ -33,12 +33,12 @@ pub(crate) fn create_webview_system(
     {
         if let Some(node) = node {
             let window_size =
-                WindowSize::new(node.size.x.round() as u32, node.size.y.round() as u32);
+                WindowSize::new(node.size().x.round() as u32, node.size().y.round() as u32);
 
             log::debug!(
                 "Webview {:?} (UI) added, window_size={:?}, texture_size_mb={:.2}",
                 entity,
-                node.size,
+                node.size(),
                 (window_size.width as usize * window_size.height as usize * 4) as f32
                     / 1024.
                     / 1024.
@@ -69,7 +69,7 @@ pub(crate) fn create_webview_system(
                         TextureFormat::Rgba8Unorm,
                     )),
                 ))
-                .insert(UiColor(webview.color));
+                .insert(BackgroundColor(webview.color));
         } else if let Some(webview_size) = webview_size {
             log::debug!(
                 "Webview {:?} (PBR) added, texture_size_mb={:.2}",
@@ -99,7 +99,7 @@ pub(crate) fn create_webview_system(
                 webview_size.y,
             ))));
 
-            commands.entity(entity).insert_bundle(PbrBundle {
+            commands.entity(entity).insert(PbrBundle {
                 mesh: quad_handle.clone(),
                 material: material_handle,
                 transform: *transform,
diff --git a/src/systems/webview_update_textures.rs b/src/systems/webview_update_textures.rs
index 0274772..026038a 100644
--- a/src/systems/webview_update_textures.rs
+++ b/src/systems/webview_update_textures.rs
@@ -19,7 +19,7 @@ pub(crate) fn update_webview_textures(
             Option<&Handle<StandardMaterial>>,
             Option<&Node>,
             Option<&mut UiImage>,
-            Option<&mut UiColor>,
+            Option<&mut BackgroundColor>,
             &mut WebviewState,
         ),
         With<Webview>,
diff --git a/src/types.rs b/src/types.rs
index b3349e8..a827fa7 100644
--- a/src/types.rs
+++ b/src/types.rs
@@ -1,5 +1,5 @@
 use bevy::{
-    input::{keyboard::KeyboardInput, ElementState},
+    input::{keyboard::KeyboardInput, ButtonState},
     prelude::*,
 };
 use crossbeam_channel::{Receiver, Sender};
@@ -16,7 +16,7 @@ pub(crate) enum WebviewAction {
     /// Mouse motion over webview
     MouseMotion((Entity, Vec2)),
     /// Webview was clicked
-    Click((Entity, MouseButton, ElementState, Vec2)),
+    Click((Entity, MouseButton, ButtonState, Vec2)),
     /// Webview was hovered
     Hover((Entity, Vec2)),
     /// Webview received keyboard input
@@ -53,6 +53,7 @@ pub(crate) struct TextureReceivedEvent {
 }
 
 /// Takes care of event handling between webview impl and bevy system
+#[derive(Resource)]
 pub(crate) struct EventTransport {
     pub webview_action_tx: Sender<WebviewAction>,
     pub texture_rx: Receiver<TextureReceivedEvent>,
diff --git a/src/webview/runner_inner.rs b/src/webview/runner_inner.rs
index ec084ba..3a7c3de 100644
--- a/src/webview/runner_inner.rs
+++ b/src/webview/runner_inner.rs
@@ -86,8 +86,8 @@ pub(crate) fn webview_runner_inner<T: HeadlessWindow>(
                             bevy::prelude::MouseButton::Other(_) => continue,
                         },
                         state: match element_state {
-                            bevy::input::ElementState::Pressed => ElementState::Pressed,
-                            bevy::input::ElementState::Released => ElementState::Released,
+                            bevy::input::ButtonState::Pressed => ElementState::Pressed,
+                            bevy::input::ButtonState::Released => ElementState::Released,
                         },
 
                         // TODO: move position calc to the webview lib?
@@ -108,8 +108,8 @@ pub(crate) fn webview_runner_inner<T: HeadlessWindow>(
                 if let Some(w) = webviews.get(&entity) {
                     w.webview.send_keyboard_input(KeyboardInput {
                         state: match keyboard_input.state {
-                            bevy::input::ElementState::Pressed => ElementState::Pressed,
-                            bevy::input::ElementState::Released => ElementState::Released,
+                            bevy::input::ButtonState::Pressed => ElementState::Pressed,
+                            bevy::input::ButtonState::Released => ElementState::Released,
                         },
                     })
                 }