Bump yew to 0.22.0

Cargo.toml

@@ -1,6 +1,6 @@
 [package]
 name = "monaco"
-version = "0.5.0"
+version = "0.6.0"
 authors = ["Simon Berger <simon@siku2.io>"]
 edition = "2018"
 description = "Rust WASM bindings for the Monaco Editor"
@@ -28,7 +28,7 @@ yew-components = ["api", "yew"]
 js-sys = "0.3"
 paste = "1.0"
 wasm-bindgen = "0.2"
-yew = { version = "0.21", features = ["csr"], optional = true }
+yew = { version = "0.22", features = ["csr"], optional = true }
 
 [dependencies.web-sys]
 version = "0.3"

examples/yew/Cargo.toml

@@ -7,4 +7,4 @@ edition = "2018"
 [dependencies]
 monaco = { path = "../..", features = ["yew-components"] }
 wasm-bindgen = "0.2"
-yew = { version = "0.21", features = ["csr"] }
+yew = { version = "0.22", features = ["csr"] }

examples/yew_events_external/Cargo.toml

@@ -7,7 +7,7 @@ edition = "2018"
 [dependencies]
 monaco = { path = "../..", features = ["yew-components"] }
 wasm-bindgen = "0.2"
-yew = { version = "0.21", features = ["csr"] }
+yew = { version = "0.22", features = ["csr"] }
 
 # Used for the randomess, not needed usually.
 getrandom = { version = "0.2", features = ["js"] }

examples/yew_events_external/src/main.rs

@@ -25,8 +25,8 @@ pub struct CustomEditorProps {
 /// This is really just a helper component, so we can pass in props easier.
 /// It makes it much easier to use, as we can pass in what we need, and it
 /// will only re-render if the props change.
-#[function_component(CustomEditor)]
-pub fn custom_editor(props: &CustomEditorProps) -> Html {
+#[component]
+pub fn CustomEditor(props: &CustomEditorProps) -> Html {
     let CustomEditorProps { text_model } = props;
 
     html! {
@@ -43,8 +43,8 @@ fn random_string() -> String {
         .collect()
 }
 
-#[function_component(App)]
-fn app() -> Html {
+#[component]
+fn App() -> Html {
     // We need to create a new text model, so we can pass it to Monaco.
     // We use use_state_eq, as this allows us to only use it when it changes.
     let text_model =

examples/yew_events_keymapping/Cargo.toml

@@ -7,4 +7,4 @@ edition = "2018"
 [dependencies]
 monaco = { path = "../..", features = ["yew-components"] }
 wasm-bindgen = "0.2"
-yew = { version = "0.21", features = ["csr"] }
+yew = { version = "0.22", features = ["csr"] }

examples/yew_events_keymapping/src/main.rs

@@ -29,8 +29,8 @@ pub struct CustomEditorProps {
 /// It makes it much easier to use, as we can pass in what we need, and it
 /// will only re-render if the props change.
 ///
-#[function_component(CustomEditor)]
-pub fn custom_editor(props: &CustomEditorProps) -> Html {
+#[component]
+pub fn CustomEditor(props: &CustomEditorProps) -> Html {
     let CustomEditorProps {
         on_editor_created,
         text_model,
@@ -41,8 +41,8 @@ pub fn custom_editor(props: &CustomEditorProps) -> Html {
     }
 }
 
-#[function_component(App)]
-fn app() -> Html {
+#[component]
+fn App() -> Html {
     // We need to create a new text model, so we can pass it to Monaco.
     // We use use_state_eq, as this allows us to only use it when it changes.
     let text_model = use_state_eq(|| TextModel::create(CONTENT, Some("rust"), None).unwrap());

examples/yew_model_decorations/Cargo.toml

@@ -8,4 +8,4 @@ edition = "2018"
 monaco = { path = "../..", features = ["yew-components"] }
 wasm-bindgen = "0.2"
 js-sys = "0.3"
-yew = { version = "0.21", features = ["csr"] }
+yew = { version = "0.22", features = ["csr"] }

examples/yew_model_decorations/src/main.rs

@@ -28,17 +28,17 @@ pub struct CustomEditorProps {
 /// This is really just a helper component, so we can pass in props easier.
 /// It makes it much easier to use, as we can pass in what we need, and it
 /// will only re-render if the props change.
-#[function_component(CustomEditor)]
-pub fn custom_editor(props: &CustomEditorProps) -> Html {
+#[component]
+pub fn CustomEditor(props: &CustomEditorProps) -> Html {
     let CustomEditorProps { text_model } = props;
 
     html! {
         <CodeEditor classes={"full-height"} options={ get_options().to_sys_options() } model={text_model.clone()} />
     }
 }
 
-#[function_component(App)]
-fn app() -> Html {
+#[component]
+fn App() -> Html {
     // Here's some "code" that will showcase some of
     // the decorations that can be applied to the text model.
     let code = String::from("This is just a normal line.\nThis is an error.\nThis line is highlighted.\nHover over this line to see a secret message.");