Merge branch 'master' into dom-bundle

Author: WorldSEnder

examples/README.md

@@ -50,7 +50,7 @@ As an example, check out the TodoMVC example here: <https://examples.yew.rs/todo
 | [router](router)                                   | S  | The best yew blog built with `yew-router`                                                                                          |
 | [simple_ssr](simple_ssr)                           | F  | Demonstrates server-side rendering                                                                                                 |
 | [store](store)                                     | S  | Showcases the `yewtil::store` API                                                                                                  |
-| [suspense](suspense)                               | F  | This is an example that demonstrates <Suspense /> support                                                                          |
+| [suspense](suspense)                               | F  | This is an example that demonstrates `<Suspense />` support                                                                          |
 | [function_memory_game](function_memory_game)       | F  | Implementation of [Memory Game](https://github.com/bradlygreen/Memory-Game)                                            |
 | [timer](timer)                                     | S  | Demonstrates the use of the interval and timeout services                                                                          |
 | [todomvc](todomvc)                                 | S  | Implementation of [TodoMVC](http://todomvc.com/)                                                                                   |

packages/yew/src/html/component/scope.rs

@@ -103,24 +103,35 @@ impl AnyScope {
     }
 
     /// Attempts to downcast into a typed scope
+    ///
+    /// # Panics
+    ///
+    /// If the self value can't be cast into the target type.
     pub fn downcast<COMP: BaseComponent>(self) -> Scope<COMP> {
+        self.try_downcast::<COMP>().unwrap()
+    }
+
+    /// Attempts to downcast into a typed scope
+    ///
+    /// Returns [`None`] if the self value can't be cast into the target type.
+    pub fn try_downcast<COMP: BaseComponent>(self) -> Option<Scope<COMP>> {
         let state = self.state.borrow();
 
-        state
-            .as_ref()
-            .map(|m| {
-                m.inner
-                    .as_any()
-                    .downcast_ref::<CompStateInner<COMP>>()
-                    .unwrap()
-                    .context
-                    .link()
-                    .clone()
-            })
-            .unwrap()
+        state.as_ref().map(|m| {
+            m.inner
+                .as_any()
+                .downcast_ref::<CompStateInner<COMP>>()
+                .unwrap()
+                .context
+                .link()
+                .clone()
+        })
     }
 
-    pub(super) fn find_parent_scope<C: BaseComponent>(&self) -> Option<Scope<C>> {
+    /// Attempts to find a parent scope of a certain type
+    ///
+    /// Returns [`None`] if no parent scope with the specified type was found.
+    pub fn find_parent_scope<C: BaseComponent>(&self) -> Option<Scope<C>> {
         let expected_type_id = TypeId::of::<C>();
         iter::successors(Some(self), |scope| scope.get_parent())
             .filter(|scope| scope.get_type_id() == &expected_type_id)

website/docs/concepts/html/events.mdx

@@ -694,3 +694,7 @@ which will remove the event listener from the element.
 
 For more information on `EventListener`, see the
 [gloo_events docs.rs](https://docs.rs/gloo-events/0.1.1/gloo_events/struct.EventListener.html).
+
+## Using EventListener in a Function Component
+
+See [Applying event listeners to the DOM](../function-components/hooks/use-effect#applying-event-listeners-to-the-dom).

website/docs/tutorial/index.mdx

@@ -24,13 +24,7 @@ get an overview of the talks and watch them all from one page.
 
 ### Prerequisites
 
-To get started, let's make sure we have an up-to-date development environment.
-We will need the following tools:
-- [Rust](https://www.rust-lang.org/)
-- [`trunk`](https://trunkrs.dev/)
-- `wasm32-unknown-unknown` target, the WASM compiler and build target for Rust.
-
-This tutorial also assumes you're already familiar with Rust. If you're new to Rust,
+This tutorial assumes you're already familiar with Rust. If you're new to Rust,
 the free [Rust Book](https://doc.rust-lang.org/book/ch00-00-introduction.html) offers a great starting point for
 beginners and continues to be an excellent resource even for experienced Rust developers.
 
@@ -78,7 +72,7 @@ version = "0.1.0"
 edition = "2018"
 
 [dependencies]
-+ yew = { git = "https://github.com/yewstack/yew/" }
+yew = { git = "https://github.com/yewstack/yew/" }
 ```
 
 ```rust ,no_run title="src/main.rs"
@@ -409,7 +403,7 @@ fn video_details(VideosDetailsProps { video }: &VideosDetailsProps) -> Html {
 
 Now, modify the `App` component to display `VideoDetails` component whenever a video is selected.
 
-```rust ,ignore {4,6-11,13-15,24-29}
+```rust ,ignore {4,6-11,13-15,22-23,25-29}
 #[function_component(App)]
 fn app() -> Html {
     // ...
@@ -439,14 +433,15 @@ fn app() -> Html {
 -                <h3>{ "John Doe: Building and breaking things" }</h3>
 -                <img src="https://via.placeholder.com/640x360.png?text=Video+Player+Placeholder" alt="video thumbnail" />
 -            </div>
--        </>
+        </>
     }
 }
 ```
 
 Don't worry about the `use_state` right now, we will come back to that later.
 Note the trick we pulled with `{ for details }`. `Option<_>` implements `Iterator` so we can use it to display the only
-element returned by the `Iterator` with the `{ for ... }` syntax.
+element returned by the `Iterator` with a special `{ for ... }` syntax
+[supported by the `html!` macro](concepts/html/lists).
 
 ### Handling state
 

website/i18n/ja/docusaurus-plugin-content-docs/current/advanced-topics/struct-components/refs.mdx

@@ -0,0 +1,25 @@
+---
+title: Refs
+description: Out-of-band DOM access
+---
+
+`ref`は、任意のHTML要素やコンポーネントの内部で、割り当てられているDOM`Element`を取得するために使用することができます。
+これは、`view` ライフサイクルメソッドの外でDOMに変更を加えるために使用できます。
+
+これは、キャンバスの要素を取得したり、ページの異なるセクションにスクロールしたりするのに便利です。
+
+構文は以下の通りです:
+
+```rust
+// In create
+self.node_ref = NodeRef::default();
+
+// In view
+html! {
+    <div ref={self.node_ref.clone()}></div>
+}
+
+// In update
+let has_attributes = self.node_ref.try_into::<Element>().has_attributes();
+```
+