// <- MISSING CLOSE TAG
+}
+```
+
+
+
+```rust
+html! {
+
+}
+```
+
+
+
+```rust
+html! {
+
// <- MISSING SELF-CLOSE
+}
+```
+
+
+
+:::note
+䟿å©ãã®ããã«ã*æ®éã¯*çµäºã¿ã°ãå¿
èŠãšããèŠçŽ ã¯èªå·±å®çµã¿ã°ãšããããšã**ã§ããŸã**ã
+äŸãã°`html! {
}`ãšæžãã®ã¯æå¹ã§ãã
+:::
+
+## å
+
+è€éã«ãã¹ããã HTML ã SVG ã®ã¬ã€ã¢ãŠããæžãã®ã«ã¯ä»¥äžã®ããã«ããã®ã楜ã§ã:
+\*\*
+
+
+
+
+```rust
+html! {
+
+}
+```
+
+
+
+```rust
+html! {
+
+
+
+
+
+
+
+
+}
+```
+
+
+
+## ã¯ã©ã¹
+
+èŠçŽ ãžã®ã¯ã©ã¹ãç¹å®ãã䟿å©ãªããæ¹ã¯ãããããããŸã:
+
+
+
+
+```rust
+html! {
+
+}
+```
+
+
+
+```rust
+html! {
+
+}
+```
+
+
+
+```rust
+html! {
+
+}
+```
+
+
+
+```rust
+html! {
+
+}
+```
+
+
+
+```rust
+html! {
+
+}
+```
+
+
+
+```rust
+html! {
+
+}
+```
+
+
+
+## ãªã¹ããŒ
+
+ãªã¹ããŒå±æ§ã¯ã¯ããŒãžã£ã®ã©ãããŒã§ãã`Callback`ã«æž¡ãããå¿
èŠããããŸãã
+ã³ãŒã«ããã¯ãã©ã®ããã«äœããã¯ã¢ããªããªã¹ããŒã€ãã³ãã«ã©ãåå¿ãããããã«ãããŸãã
+
+
+
+
+```rust
+struct MyComponent {
+ link: ComponentLink
,
+}
+
+enum Msg {
+ Click,
+}
+
+impl Component for MyComponent {
+ type Message = Msg;
+ type Properties = ();
+
+ fn create(_: Self::Properties, link: ComponentLink) -> Self {
+ MyComponent { link }
+ }
+
+ fn update(&mut self, msg: Self::Message) -> ShouldRender {
+ match msg {
+ Msg::Click => {
+ // Handle Click
+ }
+ }
+ }
+
+ fn view(&self) -> Html {
+ // Create a callback from a component link to handle it in a component
+ let click_callback = self.link.callback(|_: ClickEvent| Msg::Click);
+ html! {
+
+ { "Click me!" }
+
+ }
+ }
+}
+```
+
+
+
+```rust
+struct MyComponent {
+ worker: Dispatcher,
+}
+
+impl Component for MyComponent {
+ type Message = ();
+ type Properties = ();
+
+ fn create(_: Self::Properties, _: ComponentLink) -> Self {
+ MyComponent {
+ worker: MyWorker::dispatcher()
+ }
+ }
+
+ fn update(&mut self, _: Self::Message) -> ShouldRender {
+ false
+ }
+
+ fn view(&self) -> Html {
+ // Create a callback from a worker to handle it in another context
+ let click_callback = self.worker.callback(|_: ClickEvent| WorkerMsg::Process);
+ html! {
+
+ { "Click me!" }
+
+ }
+ }
+}
+```
+
+
+
+```rust
+struct MyComponent;
+
+impl Component for MyComponent {
+ type Message = ();
+ type Properties = ();
+
+ fn create(_: Self::Properties, _: ComponentLink) -> Self {
+ MyComponent
+ }
+
+ fn update(&mut self, _: Self::Message) -> ShouldRender {
+ false
+ }
+
+ fn view(&self) -> Html {
+ // Create an ephemeral callback
+ let click_callback = Callback::from(|| {
+ ConsoleService::log("clicked!");
+ });
+
+ html! {
+
+ { "Click me!" }
+
+ }
+ }
+}
+```
+
+
+
+## ã€ãã³ãã®å
+
+:::note
+以äžã®ããŒãã«ã«ããå
šãŠã®ã€ãã³ãã®åã¯`yew::events`ã§åãšã¯ã¹ããŒããããŠããŸãã
+All the event types mentioned in the following table are re-exported under `yew::events`. Using the types from
+`yew::events` makes it easier to ensure version compatibility than if you were to manually include `web-sys`
+or `stdweb` as dependencies in your crate because you won't end up using a version which conflicts with
+the version Yew specifies.
+:::
+
+| ã€ãã³ãå | `web_sys` ã€ãã³ãå |
+| --------------------------- | ------------------------------------------------------------------------------------- |
+| `onabort` | [Event](https://docs.rs/web-sys/latest/web_sys/struct.Event.html) |
+| `onauxclick` | [MouseEvent](https://docs.rs/web-sys/latest/web_sys/struct.MouseEvent.html) |
+| `onblur` | [FocusEvent](https://docs.rs/web-sys/latest/web_sys/struct.FocusEvent.html) |
+| `oncancel` | [Event](https://docs.rs/web-sys/latest/web_sys/struct.Event.html) |
+| `oncanplay` | [Event](https://docs.rs/web-sys/latest/web_sys/struct.Event.html) |
+| `oncanplaythrough` | [Event](https://docs.rs/web-sys/latest/web_sys/struct.Event.html) |
+| `onchange` | [ChangeData](https://docs.rs/yew/latest/yew/events/enum.ChangeData.html) |
+| `onclick` | [MouseEvent](https://docs.rs/web-sys/latest/web_sys/struct.MouseEvent.html) |
+| `onclose` | [Event](https://docs.rs/web-sys/latest/web_sys/struct.Event.html) |
+| `oncontextmenu` | [MouseEvent](https://docs.rs/web-sys/latest/web_sys/struct.MouseEvent.html) |
+| `oncuechange` | [Event](https://docs.rs/web-sys/latest/web_sys/struct.Event.html) |
+| `ondblclick` | [MouseEvent](https://docs.rs/web-sys/latest/web_sys/struct.MouseEvent.html) |
+| `ondrag` | [DragEvent](https://docs.rs/web-sys/latest/web_sys/struct.DragEvent.html) |
+| `ondragend` | [DragEvent](https://docs.rs/web-sys/latest/web_sys/struct.DragEvent.html) |
+| `ondragenter` | [DragEvent](https://docs.rs/web-sys/latest/web_sys/struct.DragEvent.html) |
+| `ondragexit` | [DragEvent](https://docs.rs/web-sys/latest/web_sys/struct.DragEvent.html) |
+| `ondragleave` | [DragEvent](https://docs.rs/web-sys/latest/web_sys/struct.DragEvent.htmk) |
+| `ondragover` | [DragEvent](https://docs.rs/web-sys/latest/web_sys/struct.DragEvent.html) |
+| `ondragstart` | [DragEvent](https://docs.rs/web-sys/latest/web_sys/struct.DragEvent.html) |
+| `ondrop` | [DragEvent](https://docs.rs/web-sys/latest/web_sys/struct.DragEvent.html) |
+| `ondurationchange` | [Event](https://docs.rs/web-sys/latest/web_sys/struct.Event.html) |
+| `onemptied` | [Event](https://docs.rs/web-sys/latest/web_sys/struct.Event.html) |
+| `onended` | [Event](https://docs.rs/web-sys/latest/web_sys/struct.Event.html) |
+| `onerror` | [Event](https://docs.rs/web-sys/latest/web_sys/struct.Event.html) |
+| `onfocus` | [FocusEvent](https://docs.rs/web-sys/latest/web_sys/struct.FocusEvent.html) |
+| `onformdata` | [Event](https://docs.rs/web-sys/latest/web_sys/struct.Event.html) |
+| `oninput` | [InputData](https://docs.rs/yew/latest/yew/events/struct.InputData.html) |
+| `oninvalid` | [Event](https://docs.rs/web-sys/latest/web_sys/struct.Event.html) |
+| `onkeydown` | [KeyboardEvent](https://docs.rs/web-sys/latest/web_sys/struct.KeyboardEvent.html) |
+| `onkeypress` | [KeyboardEvent](https://docs.rs/web-sys/latest/web_sys/struct.KeyboardEvent.html) |
+| `onkeyup` | [KeyboardEvent](https://docs.rs/web-sys/latest/web_sys/struct.KeyboardEvent.html) |
+| `onload` | [Event](https://docs.rs/web-sys/latest/web_sys/struct.Event.html) |
+| `onloadeddata` | [Event](https://docs.rs/web-sys/latest/web_sys/struct.Event.html) |
+| `onloadedmetadata` | [Event](https://docs.rs/web-sys/latest/web_sys/struct.Event.html) |
+| `onloadstart` | [ProgressEvent](https://docs.rs/web-sys/latest/web_sys/struct.ProgressEvent.html) |
+| `onmousedown` | [MouseEvent](https://docs.rs/web-sys/latest/web_sys/struct.MouseEvent.html) |
+| `onmouseenter` | [MouseEvent](https://docs.rs/web-sys/latest/web_sys/struct.MouseEvent.html) |
+| `onmouseleave` | [MouseEvent](https://docs.rs/web-sys/latest/web_sys/struct.MouseEvent.html) |
+| `onmousemove` | [MouseEvent](https://docs.rs/web-sys/latest/web_sys/struct.MouseEvent.html) |
+| `onmouseout` | [MouseEvent](https://docs.rs/web-sys/latest/web_sys/struct.MouseEvent.html) |
+| `onmouseover` | [MouseEvent](https://docs.rs/web-sys/latest/web_sys/struct.MouseEvent.html) |
+| `onmouseup` | [MouseEvent](https://docs.rs/web-sys/latest/web_sys/struct.MouseEvent.html) |
+| `onpause` | [Event](https://docs.rs/web-sys/latest/web_sys/struct.Event.html) |
+| `onplay` | [Event](https://docs.rs/web-sys/latest/web_sys/struct.Event.html) |
+| `onplaying` | [Event](https://docs.rs/web-sys/latest/web_sys/struct.Event.html) |
+| `onprogress` | [ProgressEvent](https://docs.rs/web-sys/latest/web_sys/struct.ProgressEvent.html) |
+| `onratechange` | [Event](https://docs.rs/web-sys/latest/web_sys/struct.Event.html) |
+| `onreset` | [Event](https://docs.rs/web-sys/latest/web_sys/struct.Event.html) |
+| `onresize` | [Event](https://docs.rs/web-sys/latest/web_sys/struct.Event.html) |
+| `onscroll` | [Event](https://docs.rs/web-sys/latest/web_sys/struct.Event.html) |
+| `onsecuritypolicyviolation` | [Event](https://docs.rs/web-sys/latest/web_sys/struct.Event.html) |
+| `onseeked` | [Event](https://docs.rs/web-sys/latest/web_sys/struct.Event.html) |
+| `onseeking` | [Event](https://docs.rs/web-sys/latest/web_sys/struct.Event.html) |
+| `onselect` | [Event](https://docs.rs/web-sys/latest/web_sys/struct.Event.html) |
+| `onslotchange` | [Event](https://docs.rs/web-sys/latest/web_sys/struct.Event.html) |
+| `onstalled` | [Event](https://docs.rs/web-sys/latest/web_sys/struct.Event.html) |
+| `onsubmit` | [FocusEvent](https://docs.rs/web-sys/latest/web_sys/struct.FocusEvent.html) |
+| `onsuspend` | [Event](https://docs.rs/web-sys/latest/web_sys/struct.Event.html) |
+| `ontimeupdate` | [Event](https://docs.rs/web-sys/latest/web_sys/struct.Event.html) |
+| `ontoggle` | [Event](https://docs.rs/web-sys/latest/web_sys/struct.Event.html) |
+| `onvolumechange` | [Event](https://docs.rs/web-sys/latest/web_sys/struct.Event.html) |
+| `onwaiting` | [Event](https://docs.rs/web-sys/latest/web_sys/struct.Event.html) |
+| `onwheel` | [WheelEvent](https://docs.rs/web-sys/latest/web_sys/struct.WheelEvent.html) |
+| `oncopy` | [Event](https://docs.rs/web-sys/latest/web_sys/struct.Event.html) |
+| `oncut` | [Event](https://docs.rs/web-sys/latest/web_sys/struct.Event.html) |
+| `onpaste` | [Event](https://docs.rs/web-sys/latest/web_sys/struct.Event.html) |
+| `onanimationcancel` | [AnimationEvent](https://docs.rs/web-sys/latest/web_sys/struct.AnimationEvent.html) |
+| `onanimationend` | [AnimationEvent](https://docs.rs/web-sys/latest/web_sys/struct.AnimationEvent.html) |
+| `onanimationiteration` | [AnimationEvent](https://docs.rs/web-sys/latest/web_sys/struct.AnimationEvent.html) |
+| `onanimationstart` | [AnimationEvent](https://docs.rs/web-sys/latest/web_sys/struct.AnimationEvent.html) |
+| `ongotpointercapture` | [PointerEvent](https://docs.rs/web-sys/latest/web_sys/struct.PointerEvent.html) |
+| `onloadend` | [ProgressEvent](https://docs.rs/web-sys/latest/web_sys/struct.ProgressEvent.html) |
+| `onlostpointercapture` | [PointerEvent](https://docs.rs/web-sys/latest/web_sys/struct.PointerEvent.html) |
+| `onpointercancel` | [PointerEvent](https://docs.rs/web-sys/latest/web_sys/struct.PointerEvent.html) |
+| `onpointerdown` | [PointerEvent](https://docs.rs/web-sys/latest/web_sys/struct.PointerEvent.html) |
+| `onpointerenter` | [PointerEvent](https://docs.rs/web-sys/latest/web_sys/struct.PointerEvent.html) |
+| `onpointerleave` | [PointerEvent](https://docs.rs/web-sys/latest/web_sys/struct.PointerEvent.html) |
+| `onpointerlockchange` | [Event](https://docs.rs/web-sys/latest/web_sys/struct.Event.html) |
+| `onpointerlockerror` | [Event](https://docs.rs/web-sys/latest/web_sys/struct.Event.html) |
+| `onpointermove` | [PointerEvent](https://docs.rs/web-sys/latest/web_sys/struct.PointerEvent.html) |
+| `onpointerout` | [PointerEvent](https://docs.rs/web-sys/latest/web_sys/struct.PointerEvent.html) |
+| `onpointerover` | [PointerEvent](https://docs.rs/web-sys/latest/web_sys/struct.PointerEvent.html) |
+| `onpointerup` | [PointerEvent](https://docs.rs/web-sys/latest/web_sys/struct.PointerEvent.html) |
+| `onselectionchange` | [Event](https://docs.rs/web-sys/latest/web_sys/struct.Event.html) |
+| `onselectstart` | [Event](https://docs.rs/web-sys/latest/web_sys/struct.Event.html) |
+| `onshow` | [Event](https://docs.rs/web-sys/latest/web_sys/struct.Event.html) |
+| `ontouchcancel` | [TouchEvent](https://docs.rs/web-sys/latest/web_sys/struct.TouchEvent.html) |
+| `ontouchend` | [TouchEvent](https://docs.rs/web-sys/latest/web_sys/struct.TouchEvent.html) |
+| `ontouchmove` | [TouchEvent](https://docs.rs/web-sys/latest/web_sys/struct.TouchEvent.html) |
+| `ontouchstart` | [TouchEvent](https://docs.rs/web-sys/latest/web_sys/struct.TouchEvent.html) |
+| `ontransitioncancel` | [TransitionEvent](https://docs.rs/web-sys/latest/web_sys/struct.TransitionEvent.html) |
+| `ontransitionend` | [TransitionEvent](https://docs.rs/web-sys/latest/web_sys/struct.TransitionEvent.html) |
+| `ontransitionrun` | [TransitionEvent](https://docs.rs/web-sys/latest/web_sys/struct.TransitionEvent.html) |
+| `ontransitionstart` | [TransitionEvent](https://docs.rs/web-sys/latest/web_sys/struct.TransitionEvent.html) |
diff --git a/website/i18n/ja/docusaurus-plugin-content-docs/version-0.21/concepts/html/introduction.mdx b/website/i18n/ja/docusaurus-plugin-content-docs/version-0.21/concepts/html/introduction.mdx
new file mode 100644
index 00000000000..046497a88d6
--- /dev/null
+++ b/website/i18n/ja/docusaurus-plugin-content-docs/version-0.21/concepts/html/introduction.mdx
@@ -0,0 +1,22 @@
+---
+title: Introduction
+description: The procedural macro for generating HTML and SVG
+slug: /concepts/html
+---
+
+`html!`ãã¯ãã«ãã£ãŠ HTML ãš SVG ã®ã³ãŒãã宣èšçã«æžãããšãã§ããŸãã
+JSX \(HTML ã®ãããªã³ãŒãã JavaScript å
éšã«æžãããšãã§ãã JavaScript ã®æ¡åŒµ\) ã«äŒŒãŠããŸãã
+
+**éèŠãªæ³šæ**
+
+1. `html!`ãã¯ãã¯ã«ãŒãã® HTML ããŒãã®ã¿åãä»ããŸã \([ãã©ã°ã¡ã³ããã€ãã¬ãŒã¿ã䜿ã](./lists.mdx)ããšã§ããåãã§ããŸã\)
+2. 空ã®`html! {}`ã®åŒã³åºãã¯å¯èœã§ããäœãã¬ã³ããªã³ã°ããŸãã
+3. ãªãã©ã«ã¯ã¯ãªãŒããŒã·ã§ã³ãã€ãããããã¬ãŒã¹ã§å²ãå¿
èŠããããŸã: `html! { "Hello, World" }`
+
+:::note
+`html!`ãã¯ãã¯ã³ã³ãã€ã©ã®ããã©ã«ãã®ååž°ã®äžéã«ç°¡åã«éããŠããŸããŸãã
+ããã³ã³ãã€ã©ãšã©ãŒã«ééããå Žåã¯ãã®å€ãæŒãåºããšãããããããŸããã
+ã¯ã¬ãŒãã®ã«ãŒã\(ã€ãŸãã`lib.rs`ã`main.rs`\)ã§`#![recursion_limit="1024"]`ã®ãããªå±æ§ã䜿ãã°è§£æ±ºããŸãã
+
+詳ããã¯[å
¬åŒããã¥ã¡ã³ã](https://doc.rust-lang.org/reference/attributes/limits.html#the-recursion_limit-attribute)ãš[Stack Overflow ã®è³ªå](https://stackoverflow.com/questions/27454761/what-is-a-crate-attribute-and-where-do-i-add-it)ãèŠãŠã¿ãŠãã ããã
+:::
diff --git a/website/i18n/ja/docusaurus-plugin-content-docs/version-0.21/concepts/html/lists.mdx b/website/i18n/ja/docusaurus-plugin-content-docs/version-0.21/concepts/html/lists.mdx
new file mode 100644
index 00000000000..16a2b9b4938
--- /dev/null
+++ b/website/i18n/ja/docusaurus-plugin-content-docs/version-0.21/concepts/html/lists.mdx
@@ -0,0 +1,60 @@
+---
+title: Lists
+---
+
+## ãã©ã°ã¡ã³ã
+
+`html!`ãã¯ãã¯åžžã«ã«ãŒãããŒãã 1 ã€ã§ããããšãèŠæ±ããŸãã
+ãã®å¶éã®ããã«ã空ã®ã¿ã°ã䜿ã£ãŠå
容ãã©ãããããšè¯ãã§ãããã
+
+
+
+
+```rust
+html! {
+ <>
+
+
+
+}
+```
+
+
+
+```rust
+/* error: only one root html element allowed */
+
+html! {
+
+
+}
+```
+
+
+
+## ã€ãã¬ãŒã¿
+
+Yew ã¯ã€ãã¬ãŒã¿ãã HTML ããã«ãããã®ã« 2 ã€ã®æ¹æ³ããµããŒãããŠããŸãã
+
+
+
+
+```rust
+html! {
+
+ { self.props.items.iter().map(renderItem).collect::() }
+
+}
+```
+
+
+
+```rust
+html! {
+
+ { for self.props.items.iter().map(renderItem) }
+
+}
+```
+
+
diff --git a/website/i18n/ja/docusaurus-plugin-content-docs/version-0.21/concepts/html/literals-and-expressions.mdx b/website/i18n/ja/docusaurus-plugin-content-docs/version-0.21/concepts/html/literals-and-expressions.mdx
new file mode 100644
index 00000000000..ae687e4b5c4
--- /dev/null
+++ b/website/i18n/ja/docusaurus-plugin-content-docs/version-0.21/concepts/html/literals-and-expressions.mdx
@@ -0,0 +1,60 @@
+---
+title: Literals and Expressions
+---
+
+## ãªãã©ã«
+
+åŒã`Display`ãå®è£
ããåã解決ããå Žåãæååã«å€æãã㊠DOM ã«[Text](https://developer.mozilla.org/en-US/docs/Web/API/Text)ããŒããšããŠæ¿å
¥ãããŸãã
+
+ããã¹ãã¯åŒãšããŠåŠçããããããå
šãŠã®è¡šç€ºãããå
容ã¯`{}`ãããã¯ã«ãã£ãŠå²ãŸããå¿
èŠããããŸãã
+ãã㯠Yew ã®ã¢ããªãšéåžžã® HTML ã®æ§æã§æãç°ãªãç¹ã§ãã
+
+```rust
+let text = "lorem ipsum";
+html!{
+ <>
+ {text}
+ {"dolor sit"}
+ {42}
+
+}
+```
+
+## åŒ
+
+HTML ã«`{}`ãããã¯ã䜿ã£ãŠåŒãæ¿å
¥ããããšãã§ããŸãã
+
+```rust
+html! {
+
+ {
+ if show_link {
+ html! {
+
{"Link"}
+ }
+ } else {
+ html! {}
+ }
+ }
+
{"Link"}
+ }
+ } else {
+ html! {}
+ }
+};
+
+html! {
+ {maybe_display_link()}
+}
+```
diff --git a/website/i18n/ja/docusaurus-plugin-content-docs/version-0.21/concepts/router.mdx b/website/i18n/ja/docusaurus-plugin-content-docs/version-0.21/concepts/router.mdx
new file mode 100644
index 00000000000..312c5131041
--- /dev/null
+++ b/website/i18n/ja/docusaurus-plugin-content-docs/version-0.21/concepts/router.mdx
@@ -0,0 +1,95 @@
+---
+title: Router
+description: Yew's official router
+---
+
+[crates.io ã«ããã«ãŒã¿](https://crates.io/crates/yew-router)
+
+ã·ã³ã°ã«ããŒãžã¢ããªã±ãŒã·ã§ã³\(SPA\)ã«ãããã«ãŒã¿ã¯ URL ãã£ãŠããŒãžãåºãåããŸãã
+ãªã³ã¯ãã¯ãªãã¯ããããšãã«ç°ãªããªãœãŒã¹ãèŠæ±ãããšããããã©ã«ãã®åäœã®ä»£ããã«ãã«ãŒã¿ã¯ã¢ããªã±ãŒã·ã§ã³å
ã®æå¹ãªã«ãŒããæãããã« URL ãããŒã«ã«ã«èšå®ããŸãã
+ã«ãŒã¿ã¯ãã®å€æŽãæ€åºããŠãããäœãã¬ã³ããªã³ã°ãããã決å®ããŸãã
+
+## ã³ã¢ãšãªãèŠçŽ
+
+### `Route`
+
+URL å
ã®ãã¡ã€ã³ã®åŸã®ãã¹ãŠãè¡šãæååãšããªãã·ã§ã³ã§ history API ã«ä¿åãããŠããç¶æ
ãå«ã¿ãŸãã
+
+### `RouteService`
+
+ãã©ãŠã¶ãšãããšãããŠã«ãŒãã£ã³ã°ã決ããŸãã
+
+### `RouteAgent`
+
+RouteService ãææããã«ãŒããå€æŽãããéã®æŽæ°ã調æŽããããã«äœ¿çšããŸãã
+
+### `Switch`
+
+`Switch`ãã¬ã€ãã¯`Route`ããã¬ã€ãã®å®è£
ããåŽã®éã§å€æããããã«çšããããŸãã
+
+### `Router`
+
+Router ã³ã³ããŒãã³ã㯠RouteAgent ãšããåããããšãŒãžã§ã³ããã©ãã¹ã€ããããã Routes ãèªåçã«è§£æ±ºããŸãã
+ããã¯ãçµæãšããŠåŸãããã¹ã€ãããã©ã®ããã« Html ã«å€æãããããæå®ã§ããããã«ãããããprops ãä»ããŠå
¬éãããŸãã
+
+## ã«ãŒã¿ãã©ã®ããã«äœ¿ãã
+
+ãŸããã¢ããªã±ãŒã·ã§ã³ã®ãã¹ãŠã®ç¶æ
ãè¡šãåãäœæããŸãã
+ããã¯éåžžã¯åæåã§ãããæ§é äœããµããŒããããŠããã`Switch` ãå®è£
ããä»ã®ã¢ã€ãã ãå
éšã«å
¥ãåã«ããããšãã§ããããšã«æ³šæããŠãã ããã
+
+次ã«ã`Switch`ãåã«ç¶æ¿ãããªããã°ãããŸããã
+åæåã®å Žåã¯å
šãŠã® variant ã¯`#[to = "/some/route"]`ãšã¢ãããŒã·ã§ã³ãããŠããå¿
èŠãããã代ããæ§é äœãçšããŠããå Žåã¯æ§é äœå®£èšãå€éšããèŠããããã«ããŠãªããã°ãããŸããã
+
+```rust
+#[derive(Switch)]
+enum AppRoute {
+ #[to="/login"]
+ Login,
+ #[to="/register"]
+ Register,
+ #[to="/delete_account"]
+ Delete,
+ #[to="/posts/{id}"]
+ ViewPost(i32),
+ #[to="/posts/view"]
+ ViewPosts,
+ #[to="/"]
+ Home
+}
+```
+
+:::caution
+`Switch`çšã®æŽŸçãã¯ãã«ãã£ãŠçæãããå®è£
ã¯ãå variant ãæåããæåŸãŸã§ã®é ã«ããããããããšããã®ã§ãæå®ãã`to`ã¢ãããŒã·ã§ã³ã®ãã¡ 2 ã€ã®ã«ãŒãã«ãããããå¯èœæ§ãããå Žåã¯ãæåã®ã«ãŒããããããã2 ã€ç®ã®ã«ãŒãã¯è©Šè¡ãããªãããšã«æ³šæããŠãã ãããäŸãã°ã以äžã®`Switch`ãå®çŸ©ããå Žåããããããã«ãŒãã¯`AppRoute::Home`ã ãã«ãªããŸãã
+
+```rust
+#[derive(Switch)]
+enum AppRoute {
+ #[to="/"]
+ Home,
+ #[to="/login"]
+ Login,
+ #[to="/register"]
+ Register,
+ #[to="/delete_account"]
+ Delete,
+ #[to="/posts/{id}"]
+ ViewPost(i32),
+ #[to="/posts/view"]
+ ViewPosts,
+}
+```
+
+:::
+
+ãŸãã`#[to = ""]`ã¢ãããŒã·ã§ã³ã®äžã§`{}`ã®ããªãšãŒã·ã§ã³ã䜿ã£ãŠã»ã¯ã·ã§ã³ããã£ããã£ããããšãã§ããŸãã
+`{}`ã¯ã次ã®åºåãæå\(ã³ã³ããã¹ãã«å¿ã㊠"/", "?", "&", "#" ã®ãããã\) ãŸã§ã®ããã¹ãããã£ããã£ããŸãã
+`{*}`ã¯ã次ã®æåãäžèŽãããŸã§ããã¹ãããã£ããã£ããããšãæå³ããŸãã
+`{}`ã¯ãæå®ããæ°ã®åºåãæåãèŠã€ãããŸã§ããã¹ãããã£ããã£ããããšãæå³ããŸã
+\(äŸ: `{2}`ã¯åºåãæåã 2 ã€èŠã€ãããŸã§ãã£ããã£ããŸã\)ã
+
+ååä»ããã£ãŒã«ããæã€æ§é äœãåæåã®å Žåã¯ããã£ããã£ã°ã«ãŒãå
ã§ä»¥äžã®ããã«ãã£ãŒã«ãã®ååãæå®ããå¿
èŠããããŸãã
+`{user_name}` ãŸã㯠`{*:age}` ã®ããã«ããã£ããã£ã°ã«ãŒãå
ã§ãã£ãŒã«ãã®ååãæå®ããªããã°ãªããŸããã
+
+Switch ãã¬ã€ãã¯æååãããæ§é åããããã£ããã£ã°ã«ãŒãã§åäœããŸãã
+`Switch`ãå®è£
ããä»»æã®åãæå®ããããšãã§ããŸãã
+ãã®ããããã£ããã£ã°ã«ãŒãã `usize` ã§ããããšãæå®ããããšãã§ããURL ã®ãã£ããã£éšåãããã«å€æã§ããªãå Žåãvariant ã¯ãããããŸããã
diff --git a/website/i18n/ja/docusaurus-plugin-content-docs/version-0.21/getting-started/build-a-sample-app.mdx b/website/i18n/ja/docusaurus-plugin-content-docs/version-0.21/getting-started/build-a-sample-app.mdx
new file mode 100644
index 00000000000..0564db9e11a
--- /dev/null
+++ b/website/i18n/ja/docusaurus-plugin-content-docs/version-0.21/getting-started/build-a-sample-app.mdx
@@ -0,0 +1,126 @@
+---
+title: Build a sample app
+---
+
+ã¯ããã«ãRust ã®æ°èŠã©ã€ãã©ãªãäœããŸããã(**éèŠ:** `--lib`ãã©ã°ãæž¡ãããšã§*ãã€ããª*ã§ã¯ãªã*ã©ã€ãã©ãª*ãäœã£ãŠãã ãã)
+
+```bash
+cargo new --lib yew-app && cd yew-app
+```
+
+äŸåã©ã€ãã©ãªã«`yew`ãš`wasm-bindgen`ãè¿œå ããŠãã ãã \(ææ°ããŒãžã§ã³ã«ã€ããŠã¯[ãã¡ã](https://docs.rs/yew)ãåç
§ããŠãã ãã\)
+
+```toml title="Cargo.toml"
+[package]
+name = "yew-app"
+version = "0.1.0"
+authors = ["Yew App Developer "]
+edition = "2018"
+
+[lib]
+crate-type = ["cdylib", "rlib"]
+
+[dependencies]
+yew = "0.17"
+wasm-bindgen = "0.2"
+```
+
+以äžã®ãã³ãã¬ãŒãã `src/lib.rs`ãã¡ã€ã«ã«ã³ããŒããŠãã ãã:
+
+```rust title="src/lib.rs"
+use wasm_bindgen::prelude::*;
+use yew::prelude::*;
+
+struct Model {
+ link: ComponentLink,
+ value: i64,
+}
+
+enum Msg {
+ AddOne,
+}
+
+impl Component for Model {
+ type Message = Msg;
+ type Properties = ();
+ fn create(_: Self::Properties, link: ComponentLink) -> Self {
+ Self {
+ link,
+ value: 0,
+ }
+ }
+
+ fn update(&mut self, msg: Self::Message) -> ShouldRender {
+ match msg {
+ Msg::AddOne => self.value += 1
+ }
+ true
+ }
+
+ fn change(&mut self, _props: Self::Properties) -> ShouldRender {
+ // Should only return "true" if new properties are different to
+ // previously received properties.
+ // This component has no properties so we will always return "false".
+ false
+ }
+
+ fn view(&self) -> Html {
+ html! {
+
+
{ "+1" }
+
{ self.value }
+
::new().mount_to_body();
+}
+```
+
+ãã®ãã³ãã¬ãŒãã¯ã«ãŒãã«`Component`ãã»ããã¢ãããã`Model`ãšåŒã°ããã¯ãªãã¯ãããæŽæ°ãããã¿ã³ãäœããŸãã
+`main()`ã®äžã«ãã`App::::new().mount_to_body()`ãã¢ããªãã¹ã¿ãŒãããŠããŒãžã®``ã¿ã°ãããŠã³ãããããšã«ç¹ã«æ³šæããŠãã ããã
+åçãªããããã£ã§ã¢ããªãã¹ã¿ãŒããããå Žåã¯ä»£ããã«`App::::new().mount_to_body_with_props(..)`ã䜿ãããšã§å®çŸã§ããŸãã
+
+æåŸã«ãã¢ããªã®äžã®`static`ãšããååã®ãã©ã«ãã«`index.html`ãã¡ã€ã«ãè¿œå ããŠãã ããã
+
+```bash
+mkdir static
+```
+
+```markup title="index.html"
+
+
+
+ Yew Sample App
+
+
+
+
+```
+
+## ã¢ããªãåãã!
+
+[`wasm-pack`](https://rustwasm.github.io/docs/wasm-pack/)ã䜿ãã®ãã¢ããªãåããã®ã«æšå¥šãããæ¹æ³ã§ãã
+ãŸã `wasm-pack`ãã€ã³ã¹ããŒã«ããŠããªãå Žåã`cargo install wasm-pack`ã§ã€ã³ã¹ããŒã«ããŠéçºãµãŒããŒãåãããŠã¿ãŸããã:
+
+```bash
+wasm-pack build --target web --out-name wasm --out-dir ./static
+```
+
+`wasm-pack`ã¯ã³ã³ãã€ã«ããã WebAssembly ãš JavaScript ã©ãããŒããŸãšãããã®ã`./static`ãã£ã¬ã¯ããªã«äœãã
+ã¢ããªã® WebAssembly ãã€ããªãèªã¿èŸŒãã§åãããŸãã
+
+ãããŠã`./static`以äžã§å¥œããªãµãŒããŒããã¡ã€ã«ããµãŒãããŠã¿ãŸãããã
+äŸãã°:
+
+```bash
+cargo +nightly install miniserve
+miniserve ./static --index index.html
+```
diff --git a/website/i18n/ja/docusaurus-plugin-content-docs/version-0.21/getting-started/examples.mdx b/website/i18n/ja/docusaurus-plugin-content-docs/version-0.21/getting-started/examples.mdx
new file mode 100644
index 00000000000..cab88429afa
--- /dev/null
+++ b/website/i18n/ja/docusaurus-plugin-content-docs/version-0.21/getting-started/examples.mdx
@@ -0,0 +1,14 @@
+---
+title: Examples
+---
+
+Yew ã®ãªããžããªã¯[äŸ](https://github.com/yewstack/yew/tree/v0.17/examples)ããããããããŸã
+\(ã¡ã³ããã³ã¹ç¶æ³ã¯æ§ã
\)ã
+æ§ã
ãªãã¬ãŒã ã¯ãŒã¯ã®æ©èœã®äœ¿ãæ¹ãç¥ãã®ã«ã¯ãããã®äŸã«åãçµãã®ãå§ããŸãã
+ãã«ãªã¯ãšã¹ãã Issue ã¯ãŠã§ã«ã«ã ã§ãã
+
+- [**Todo ã¢ããª** ](https://github.com/yewstack/yew/tree/v0.17/examples/todomvc)
+- [**ã«ã¹ã¿ã ã³ã³ããŒãã³ã**](https://github.com/yewstack/yew/tree/v0.17/examples/custom_components)
+- [**ãã«ãã¹ã¬ãã\(ãšãŒãžã§ã³ã\)**](https://github.com/yewstack/yew/tree/v0.17/examples/multi_thread)
+- [**ã¿ã€ããŒãµãŒãã¹**](https://github.com/yewstack/yew/tree/v0.17/examples/timer)
+- [**ãã¹ãããã³ã³ããŒãã³ã**](https://github.com/yewstack/yew/tree/v0.16.0/examples/nested_list)
diff --git a/website/i18n/ja/docusaurus-plugin-content-docs/version-0.21/more/css.mdx b/website/i18n/ja/docusaurus-plugin-content-docs/version-0.21/more/css.mdx
new file mode 100644
index 00000000000..a688301db50
--- /dev/null
+++ b/website/i18n/ja/docusaurus-plugin-content-docs/version-0.21/more/css.mdx
@@ -0,0 +1,18 @@
+---
+title: CSS
+---
+
+# CSS
+
+<TODO>
+
+çµ±åç㪠CSS ãµããŒãã«ã€ããŠã®ææ¡ã¯ãã¡ãã«ãããŸã: [https://github.com/yewstack/yew/issues/533](https://github.com/yewstack/yew/issues/533)
+
+## ã¹ã¿ã€ã«ãã¬ãŒã ã¯ãŒã¯:
+
+ä»ã®ãšãããã³ãã¥ããã£ã¡ã³ããŒã¯ä»¥äžã®ã¹ã¿ã€ã«ãã¬ãŒã ã¯ãŒã¯ãéçºããŠããŸãã
+
+- [yew_styles](https://github.com/spielrs/yew_styles) - JavaScript ã«äŸåããªã Yew ã®ã¹ã¿ã€ã«ãã¬ãŒã ã¯ãŒã¯
+- [yew-mdc](https://github.com/Follpvosten/yew-mdc) - ãããªã¢ã«ãã¶ã€ã³ã®ã³ã³ããŒãã³ã
+- [muicss-yew](https://github.com/AlephAlpha/muicss-yew) - MUI ã® CSS ã³ã³ããŒãã³ã
+- [Yewtify](https://github.com/yewstack/yewtify) â Yew 㧠Vuetify ãã¬ãŒã ã¯ãŒã¯ã§æäŸãããŠããæ©èœã®å®è£
diff --git a/website/i18n/ja/docusaurus-plugin-content-docs/version-0.21/more/debugging.mdx b/website/i18n/ja/docusaurus-plugin-content-docs/version-0.21/more/debugging.mdx
new file mode 100644
index 00000000000..f7c2a88bf1c
--- /dev/null
+++ b/website/i18n/ja/docusaurus-plugin-content-docs/version-0.21/more/debugging.mdx
@@ -0,0 +1,58 @@
+---
+title: Debugging
+---
+
+# ãããã°
+
+## ãããã¯
+
+Rust ã·ã³ãã«ã§è¯ãã¹ã¿ãã¯ãã¬ãŒã¹ãããã«ã¯
+[`console_error_panic`](https://github.com/rustwasm/console_error_panic_hook)ã¯ã¬ãŒãã䜿çšããŠãã ããã
+泚æãšããŠã`cargo-web`ã§ãã«ãããããã®ãšã¯äºææ§ããããŸããã
+
+## ã³ã³ãœãŒã«ã§ã®ãã°
+
+äžè¬çã«ãWasm ã® Web ã¢ããªã¯ãã©ãŠã¶ã® API ãšé£æºããããšãã§ãã`console.log`ã® API ãäŸå€ã§ã¯ãããŸããã
+ãã€ããã®éžæè¢ããããŸã:
+
+### [`wasm-logger`](https://crates.io/crates/wasm-logger)
+
+ãã®ã¯ã¬ãŒã㯠Rust ã®`log`ã¯ã¬ãŒããšèŠªåæ§ããããŸãã
+
+```rust
+// ã»ããã¢ãã
+fn main() {
+ wasm_logger::init(wasm_logger::Config::default());
+}
+
+// 䜿çšæ¹æ³
+log::info!("Update: {:?}", msg);
+```
+
+### [`ConsoleService`](https://docs.rs/yew/latest/yew/services/console/struct.ConsoleService.html)
+
+ãã®ãµãŒãã¹ã¯ Yew ã«å«ãŸããŠããã`"services"`ã®æ©èœãæå¹åãããŠããå Žåã¯å©çšå¯èœã§ãã
+
+```rust
+// 䜿çšæ¹æ³
+ConsoleService::info(format!("Update: {:?}", msg).as_ref());
+```
+
+## ãœãŒã¹ããã
+
+ä»ã®ãšãã㯠Rust/Wasm ã® Web ã¢ããªã«ã¯ãœãŒã¹ããããžã®ç¬¬äžçŽã®ãµããŒãããããŸããã
+ãã¡ãããããã¯å€æŽãããå¯èœæ§ããããŸãããããåœãŠã¯ãŸããªãå ŽåããŸãã¯é²æãèŠãããå Žåã¯ãå€æŽãææ¡ããŠãã ããïŒ
+
+### ææ°æ
å ±
+
+\[2019 幎 12 æ\] [Chrome DevTools update](https://developers.google.com/web/updates/2019/12/webassembly#the_future)
+
+> ãããªããã°ãããªãããšããŸã ãããããããŸããäŸãã°ããŒã«åŽã§ã¯ Emscripten\(Binaryen\)ãš wasm-pack\(wasm-bindgen\)ãããããå®è¡ããå€æã«é¢ãã DWARF æ
å ±ã®æŽæ°ããŸã ãµããŒãããŠããŸããã
+
+\[2020\] [Rust Wasm ãããã°ã¬ã€ã](https://rustwasm.github.io/book/reference/debugging.html#using-a-debugger)
+
+> æ®å¿µãªããšã«ãWebAssembly ã®ãããã°ã®ç©èªã¯ãŸã æªæçã§ããã»ãšãã©ã® Unix ã®ã·ã¹ãã ã§ã¯[DWARF](http://dwarfstd.org/)ã¯å®è¡äžã®ããã°ã©ã ããœãŒã¹ã¬ãã«ã§æ€æ»ããããã«ãããã¬ã«å¿
èŠãªæ
å ±ããšã³ã³ãŒãããããã«äœ¿çšãããŸããWindows ã«ã¯åæ§ã®æ
å ±ããšã³ã³ãŒããã代æ¿åœ¢åŒããããŸããçŸåšãWebAssembly ã«çžåœãããã®ã¯ãããŸããã
+
+\[2019\] [Rust Wasm ããŒãããã](https://rustwasm.github.io/rfcs/007-2019-roadmap.html#debugging)
+
+> ãããã°ã¯ããªãããŒã§ãããªããªããå€ãã®è©±ã¯ãã®æŽ»åããŒã ã®æã®å±ããªããšããã«ãããWebAssembly ã®æšæºåå£äœãšãã©ãŠã¶éçºè
ããŒã«ãå®è£
ããŠãã人ãã¡ã®äž¡æ¹ã«äŸåããŠããããã§ãã
diff --git a/website/i18n/ja/docusaurus-plugin-content-docs/version-0.21/more/roadmap.mdx b/website/i18n/ja/docusaurus-plugin-content-docs/version-0.21/more/roadmap.mdx
new file mode 100644
index 00000000000..80c0ad9d29d
--- /dev/null
+++ b/website/i18n/ja/docusaurus-plugin-content-docs/version-0.21/more/roadmap.mdx
@@ -0,0 +1,45 @@
+---
+title: Roadmap
+description: The planned feature roadmap for the Yew framework
+---
+
+# ããŒãããã
+
+## åªå
é äœ
+
+ãã¬ãŒã ã¯ãŒã¯ã®ä»åŸã®æ©èœããã©ãŒã«ã¹ã®åªå
é äœã¯ãã³ãã¥ããã£ã«ãã£ãŠæ±ºå®ãããŸãã2020 幎ã®æ¥ã«ã¯ããããžã§ã¯ãã®æ¹åæ§ã«ã€ããŠã®ãã£ãŒãããã¯ãéããããã«éçºè
ã¢ã³ã±ãŒããè¡ãããŸããããã®æŠèŠã¯ [Yew Wiki](https://github.com/yewstack/yew/wiki/Dev-Survey-%5BSpring-2020%5D) ã§èŠãããšãã§ããŸãã
+
+:::note
+äž»èŠãªåãçµã¿ã®ç¶æ³ã¯ãYew ã® Github ã®[Project board](https://github.com/yewstack/yew/projects)ã§ç¢ºèªã§ããŸãã
+:::
+
+## çŠç¹
+
+1. Top Requested Features
+2. Production Readiness
+3. Documentation
+4. Pain Points
+
+### Top Requested Features
+
+1. [é¢æ°åã³ã³ããŒãã³ã](https://github.com/yewstack/yew/projects/3)
+2. [Component ã©ã€ãã©ãª](https://github.com/yewstack/yew/projects/4)
+3. ããè¯ãç¶æ
管ç
+4. [ãµãŒããŒãµã€ãã§ã®ã¬ã³ããªã³ã°](https://github.com/yewstack/yew/projects/5)
+
+### Production Readiness
+
+- ãã¹ãã«ãã¬ããžã®åäž
+- ãã€ããªãµã€ãº
+- [ãã³ãããŒã¯ã®ããã©ãŒãã³ã¹](https://github.com/yewstack/yew/issues/5)
+
+### Documentation
+
+- ãã¥ãŒããªã¢ã«ãäœã
+- ãããžã§ã¯ãã®ã»ããã¢ãããã·ã³ãã«ã«ãã
+
+### Pain Points
+
+- [Component ã®ãã€ã©ãŒãã¬ãŒã](https://github.com/yewstack/yew/issues/830)
+- Fetch API
+- [ãšãŒãžã§ã³ã](https://github.com/yewstack/yew/projects/6)
diff --git a/website/i18n/ja/docusaurus-plugin-content-docs/version-0.21/more/testing.mdx b/website/i18n/ja/docusaurus-plugin-content-docs/version-0.21/more/testing.mdx
new file mode 100644
index 00000000000..d6f4a678591
--- /dev/null
+++ b/website/i18n/ja/docusaurus-plugin-content-docs/version-0.21/more/testing.mdx
@@ -0,0 +1,12 @@
+---
+title: Testing apps
+description: Testing your app
+---
+
+# Testing
+
+<TODO>
+
+## wasm_bindgen_test
+
+Rust Wasm ã¯ãŒãã³ã°ã°ã«ãŒã㯠wasm_bindgen_test ãšãããã¬ãŒã ã¯ãŒã¯ãã¡ã³ããã³ã¹ããŠãããçµã¿èŸŒã¿ã® #[test] ããã·ãŒãžã£ã«ãã¯ãã®åäœãšåæ§ã®æ¹æ³ã§ãã©ãŠã¶ã§ãã¹ããå®è¡ããããšãã§ããŸãã詳现ã¯ã[Rust Wasm 掻åã°ã«ãŒãã®ããã¥ã¡ã³ã](https://rustwasm.github.io/docs/wasm-bindgen/wasm-bindgen-test/index.html)ã«èšèŒãããŠããŸãã
diff --git a/website/i18n/zh-Hans/docusaurus-plugin-content-docs/version-0.21.json b/website/i18n/zh-Hans/docusaurus-plugin-content-docs/version-0.21.json
new file mode 100644
index 00000000000..0ab4c0608c2
--- /dev/null
+++ b/website/i18n/zh-Hans/docusaurus-plugin-content-docs/version-0.21.json
@@ -0,0 +1,86 @@
+{
+ "version.label": {
+ "message": "0.21",
+ "description": "The label for version 0.21"
+ },
+ "sidebar.docs.category.Getting Started": {
+ "message": "Getting Started",
+ "description": "The label for category Getting Started in sidebar docs"
+ },
+ "sidebar.docs.category.Concepts": {
+ "message": "Concepts",
+ "description": "The label for category Concepts in sidebar docs"
+ },
+ "sidebar.docs.category.Concepts.link.generated-index.title": {
+ "message": "Yew concepts",
+ "description": "The generated-index page title for category Concepts in sidebar docs"
+ },
+ "sidebar.docs.category.Concepts.link.generated-index.description": {
+ "message": "Learn about the important Yew concepts!",
+ "description": "The generated-index page description for category Concepts in sidebar docs"
+ },
+ "sidebar.docs.category.Using Basic Web Technologies In Yew": {
+ "message": "Using Basic Web Technologies In Yew",
+ "description": "The label for category Using Basic Web Technologies In Yew in sidebar docs"
+ },
+ "sidebar.docs.category.Using Basic Web Technologies In Yew.link.generated-index.title": {
+ "message": "Yew's Take on Basic Web Technologies",
+ "description": "The generated-index page title for category Using Basic Web Technologies In Yew in sidebar docs"
+ },
+ "sidebar.docs.category.Using Basic Web Technologies In Yew.link.generated-index.description": {
+ "message": "Yew centrally operates on the idea of keeping everything that a reusable piece of UI may needin one place - rust files, while also keeping the underlying technology accessible where necessary. Explore further to fully grasp what we mean by these statements:",
+ "description": "The generated-index page description for category Using Basic Web Technologies In Yew in sidebar docs"
+ },
+ "sidebar.docs.category.Components": {
+ "message": "Components",
+ "description": "The label for category Components in sidebar docs"
+ },
+ "sidebar.docs.category.Hooks": {
+ "message": "Hooks",
+ "description": "The label for category Hooks in sidebar docs"
+ },
+ "sidebar.docs.category.HTML": {
+ "message": "HTML",
+ "description": "The label for category HTML in sidebar docs"
+ },
+ "sidebar.docs.category.Advanced topics": {
+ "message": "Advanced topics",
+ "description": "The label for category Advanced topics in sidebar docs"
+ },
+ "sidebar.docs.category.Advanced topics.link.generated-index.title": {
+ "message": "Advanced topics",
+ "description": "The generated-index page title for category Advanced topics in sidebar docs"
+ },
+ "sidebar.docs.category.Advanced topics.link.generated-index.description": {
+ "message": "Learn about the advanced topics and inner workings of Yew!",
+ "description": "The generated-index page description for category Advanced topics in sidebar docs"
+ },
+ "sidebar.docs.category.Struct Components": {
+ "message": "Struct Components",
+ "description": "The label for category Struct Components in sidebar docs"
+ },
+ "sidebar.docs.category.More": {
+ "message": "More",
+ "description": "The label for category More in sidebar docs"
+ },
+ "sidebar.docs.category.More.link.generated-index.title": {
+ "message": "Miscellaneous",
+ "description": "The generated-index page title for category More in sidebar docs"
+ },
+ "sidebar.docs.category.Migration guides": {
+ "message": "Migration guides",
+ "description": "The label for category Migration guides in sidebar docs"
+ },
+ "sidebar.docs.category.yew": {
+ "message": "yew",
+ "description": "The label for category yew in sidebar docs"
+ },
+ "sidebar.docs.category.yew-agent": {
+ "message": "yew-agent",
+ "description": "The label for category yew-agent in sidebar docs"
+ },
+ "sidebar.docs.category.yew-router": {
+ "message": "yew-router",
+ "description": "The label for category yew-router in sidebar docs"
+ }
+}
diff --git a/website/i18n/zh-Hans/docusaurus-plugin-content-docs/version-0.21/advanced-topics/how-it-works.mdx b/website/i18n/zh-Hans/docusaurus-plugin-content-docs/version-0.21/advanced-topics/how-it-works.mdx
new file mode 100644
index 00000000000..c7645fe767c
--- /dev/null
+++ b/website/i18n/zh-Hans/docusaurus-plugin-content-docs/version-0.21/advanced-topics/how-it-works.mdx
@@ -0,0 +1,7 @@
+---
+description: æå
³æ¡æ¶çåºå±ç»è
+---
+
+# åºå±åºçå
éšç»è
+
+ç»ä»¶çåœåšæç¶ææºïŒèæ dom diff ç®æ³ã
diff --git a/website/i18n/zh-Hans/docusaurus-plugin-content-docs/version-0.21/advanced-topics/optimizations.mdx b/website/i18n/zh-Hans/docusaurus-plugin-content-docs/version-0.21/advanced-topics/optimizations.mdx
new file mode 100644
index 00000000000..448206c3c0e
--- /dev/null
+++ b/website/i18n/zh-Hans/docusaurus-plugin-content-docs/version-0.21/advanced-topics/optimizations.mdx
@@ -0,0 +1,93 @@
+---
+description: å éäœ çåºçšçšåº
+---
+
+# æ§èœäŒåäžæ䜳å®è·µ
+
+## neq_assign
+
+åœç»ä»¶ä»å®çç¶ç»ä»¶æ¥æ¶ props æ¶ïŒ`change` æ¹æ³å°è¢«è°çšãé€äºå
è®žäœ æŽæ°ç»ä»¶çç¶æïŒè¿å
è®žäœ è¿åäžäžªåžå°ç±»åçåŒ `ShouldRender` æ¥æ瀺ç»ä»¶æ¯åŠåºè¯¥ååº props çæŽæ¹èéæ°æž²æèªèº«ã
+
+éæ°æž²æçåŒéåŸå€§ïŒäœ åºè¯¥å°œéé¿å
ãäžäžªéçšçæ³åæ¯ïŒäœ åªåºè¯¥åš props å®é
æŽæ¹æ¶éæ°æž²æã以äžä»£ç åå±ç€ºäºæ€æ³åïŒåŠæ props åå
åç props äžåïŒåè¿å `true`ïŒ
+
+```rust
+fn change(&mut self, props: Self::Properties) -> ShouldRender {
+ if self.props != &props {
+ *self.props = props;
+ true
+ } else {
+ false
+ }
+}
+```
+
+äœæ¯æ们å¯ä»¥æŽè¿äžæ¥ïŒå¯¹äºä»»äœå®ç°äº `PartialEq` ç项ïŒå¯ä»¥äœ¿çšäžäžª trait åäžäžª blanket implementation å°è¿å
è¡æ ·æ¿ä»£ç åå°å°äžè¡ã
+
+{% code title="neq\_assign.rs" %}
+
+```rust
+pub trait NeqAssign {
+ fn neq_assign(&mut self, new: Self) -> ShouldRender;
+}
+impl NeqAssign for T {
+ fn neq_assign(&mut self, new: T) -> ShouldRender {
+ if self != &new {
+ *self = new;
+ true
+ } else {
+ false
+ }
+ }
+}
+
+// ...
+fn change(&mut self, props: Self::Properties) -> ShouldRender {
+ self.props.neq_assign(props)
+}
+```
+
+{% endcode %}
+
+该 trait 称䞺 `NeqAssign` æ¯å 䞺åŠæç®æ åŒåæ°åŒäžçžçïŒå®å°èµäžºæ°åŒã
+
+è¿æ¯ç®åçå®ç°è¿èŠçïŒ
+
+```rust
+// äžèŠè¿æ ·åïŒé€éäœ æ æ³é¿å
ã
+fn change(&mut self, props: Self::Properties) -> ShouldRender {
+ self.props = props;
+ true
+}
+```
+
+äœ äžä»
éåš `change` åœæ°äžäœ¿çšå®ãéåžžïŒåš `update` åœæ°äžæ§è¡æ€æäœä¹æ¯ææä¹çïŒå°œç®¡æ§èœæååšé£éäžå€ªææŸã
+
+## RC
+
+䞺äºé¿å
åšéæ°æž²ææ¶äžºäºå建 props èå
é倧åæ°æ®ïŒæ们å¯ä»¥äœ¿çšæºèœæéæ¥åªå
éæéãåŠæåš props ååç»ä»¶äžäœ¿çš `Rc<_>` èäžæ¯æ®éæªè£
ç®±çåŒïŒåå¯ä»¥å»¶è¿å
éçŽå°éèŠä¿®æ¹åç»ä»¶äžçæ°æ®äžºæ¢ïŒåšè¯¥ç»ä»¶äžå¯ä»¥äœ¿çš `Rc::make_mut` æ¥å¯¹èŠæŽæ¹æ°æ®è¿è¡å
éåè·åå¯ååŒçšãéè¿åšèŠä¿®æ¹åäžè¿è¡å
éïŒåç»ä»¶å¯ä»¥åšå ä¹æ²¡ææ§èœææ¬çæ
åµäžæç»äžå®ä»¬åš `Component::change` äžæ¥æç¶æç props çžåç propsïŒè¿äžæ°æ®æ¬èº«éèŠå
å€å¶å°ç¶çº§ props ç»æäœäžïŒç¶ååšå级äžè¿è¡æ¯èŸåæç»çæ
åµçžåã
+
+对äºäžæ¯ `Copy` ç±»åçæ°æ®ïŒè¿ç§äŒåæ¯ææçšçãåŠæäœ èœèœ»æŸå°æ·èŽæ°æ®ïŒé£ä¹å°å
¶æŸå
¥æºèœæéäžå¯èœæ¯äžåŒåŸçã对äºå¯ä»¥å
å«å€§éæ°æ®çç»æïŒäŸåŠ `Vec`ïŒ`HashMap` å `String`ïŒè¿ç§äŒååºè¯¥æ¯åŒåŸçã
+
+åŠæåç»ä»¶ä»äžæŽæ°ç»ä»¶çåŒïŒåè¿ç§äŒåæææ奜ïŒåŠæç¶ç»ä»¶åŸå°æŽæ°ç»ä»¶çåŒïŒåæææŽå¥œãè¿äœ¿åŸ `Rc<_>s` æ¯å
è£
纯ç»ä»¶å±æ§åŒçäžééæ©ã
+
+## è§åŸåœæ°
+
+åºäºä»£ç å¯è¯»æ§çåå ïŒå° `html!` å䞪éšåç代ç è¿ç§»å°ä»ä»¬èªå·±çåœæ°äžéåžžæ¯ææä¹çïŒè¿æ ·å°±å¯ä»¥é¿å
åšæ·±å±åµå¥ç HTML äžåºç°ä»£ç ååå³å移ã
+
+## 纯ç»ä»¶ / åœæ°åŒç»ä»¶
+
+纯ç»ä»¶æ¯äžäŒä¿®æ¹å®ä»¬ç¶æçç»ä»¶ïŒå®ä»¬ä»
å±ç€ºå
容ååæ®éå¯åç»ä»¶äŒ éæ¶æ¯ãå®ä»¬äžè§åŸåœæ°äžåä¹å€åšäºä»ä»¬å¯ä»¥äœ¿çšç»ä»¶è¯æ³ïŒ``ïŒè¿å `Callback`ã
+
+### send_message
+
+åœå埪ç¯ç»æåç«å³åç»ä»¶åéæ¶æ¯ïŒå¯ŒèŽåŠäžäžªæŽæ°åŸªç¯å¯åšã
+
+### send_message_batch
+
+泚åäžäžªåè°ïŒè¯¥åè°åšæ§è¡æ¶ç«å³åéäžæ¹æ¶æ¯ãåŠæå
¶äžä»»äœäžäžªæ¶æ¯å°å¯ŒèŽç»ä»¶éæ°æž²æïŒé£ä¹ç»ä»¶äŒåšè¯¥æ¹æ¬¡æææ¶æ¯è¢«å€çåéæ°æž²æãæäŸ `Fn(IN) -> COMP::Message`ïŒè¿å `Callback`ã
+
+## Callbacks
+
+Callbacks çšäºäž Yew äžç servicesïŒagents åç¶ç»ä»¶è¿è¡éä¿¡ãå®ä»¬ä»
ä»
æ¯äžª `Fn`ïŒå¹¶ç± `Rc` å
裹以å
讞被å
éã
+
+å®ä»¬æäžäžª `emit` åœæ°ïŒè¯¥åœæ°å°å®ç `` ç±»åäœäžºåæ°å¹¶å°å
¶èœ¬æ¢äžºç®æ æææçæ¶æ¯ãåŠæäžäžªåè°ä»ç¶ç»ä»¶äžéè¿ props æäŸç»åç»ä»¶ïŒååç»ä»¶å¯ä»¥åšå
¶ `update` çåœåšæé©åäžå¯¹è¯¥åè°è°çš `emit`ïŒä»¥å°æ¶æ¯åéåç¶ç»ä»¶ãåš `html!` å®å
被æäŸäœäžº props çéå
æåœæ°äŒèªåšèœ¬æ¢äžº Callbacksã
diff --git a/website/i18n/zh-Hans/docusaurus-plugin-content-docs/version-0.21/advanced-topics/struct-components/lifecycle.mdx b/website/i18n/zh-Hans/docusaurus-plugin-content-docs/version-0.21/advanced-topics/struct-components/lifecycle.mdx
new file mode 100644
index 00000000000..563663ad1e6
--- /dev/null
+++ b/website/i18n/zh-Hans/docusaurus-plugin-content-docs/version-0.21/advanced-topics/struct-components/lifecycle.mdx
@@ -0,0 +1,170 @@
+---
+description: ç»ä»¶åå
¶çåœåšæé©å
+---
+
+# ç»ä»¶ïŒComponentsïŒ
+
+## ç»ä»¶æ¯ä»ä¹ïŒ
+
+ç»ä»¶æ¯ Yew çåºç³ãå®ä»¬ç®¡çèªå·±çç¶æïŒå¹¶å¯ä»¥æž²æ䞺 DOMãç»ä»¶æ¯éè¿å®ç°æè¿°ç»ä»¶çåœåšæç `Component` trait æ¥å建çã
+
+## çåœåšæ
+
+:::note
+`䞺æ们çææ¡£ååºèŽ¡ç®ïŒ`[æ·»å ç»ä»¶ççåœåšæåŸç€º](https://github.com/yewstack/docs/issues/22)
+:::
+
+## çåœåšææ¹æ³
+
+### Create
+
+åœäžäžªç»ä»¶è¢«å建æ¶ïŒå®äŒä»å
¶ç¶ç»ä»¶ä»¥åäžäžª `ComponentLink` æ¥æ¶å±æ§ïŒpropertiesïŒãå±æ§ïŒpropertiesïŒå¯çšäºåå§åç»ä»¶çç¶æïŒâlinkâå¯çšäºæ³šååè°æåç»ä»¶åéæ¶æ¯ã
+
+éåžžå° props å link ååšåšç»ä»¶çç»æäœäžïŒåŠäžæ瀺ïŒ
+
+```rust
+pub struct MyComponent {
+ props: Props,
+ link: ComponentLink,
+}
+
+impl Component for MyComponent {
+ type Properties = Props;
+ // ...
+
+ fn create(props: Self::Properties, link: ComponentLink) -> Self {
+ MyComponent { props, link }
+ }
+
+ // ...
+}
+```
+
+### View
+
+ç»ä»¶åš `view()` æ¹æ³äžå£°æå®çåžå±ãYew æäŸäº `html!` å®æ¥å£°æ HTML å SVG èç¹åå®ä»¬ççå¬åšåå
¶åç»ä»¶ãè¿äžªå®çè¡äžºåŸå React äžç JSXïŒäœæ¯äœ¿çšçæ¯ Rust 衚蟟åŒèäžæ¯ JavaScriptã
+
+```rust
+impl Component for MyComponent {
+ // ...
+
+ fn view(&self) -> Html {
+ let onclick = self.link.callback(|_| Msg::Click);
+ html! {
+ { self.props.button_text }
+ }
+ }
+}
+```
+
+æå
³çšæ³ç诊ç»ä¿¡æ¯ïŒè¯·æ¥ç [`html!` å®æå](concepts/html/introduction.mdx)]
+
+### Mounted
+
+`mounted()` ç»ä»¶çåœåšææ¹æ³è°çšæ¯åš `view()` 被å€çå¹¶äž Yew å·²ç»æç»ä»¶æèœœå° DOM äžä¹åïŒæµè§åšå·æ°é¡µé¢ä¹åãç»ä»¶éåžžåžæå®ç°æ€æ¹æ³ä»¥æ§è¡åªèœåšç»ä»¶æž²æå
çŽ ä¹åæèœæ§è¡çæäœãåŠæäœ æ³åšååºäžäºæŽæ¹åéæ°æž²æç»ä»¶ïŒè¿å `true` å°±å¯ä»¥äºã
+
+```rust
+use stdweb::web::html_element::InputElement;
+use stdweb::web::IHtmlElement;
+use yew::prelude::*;
+
+pub struct MyComponent {
+ node_ref: NodeRef,
+}
+
+impl Component for MyComponent {
+ // ...
+
+ fn view(&self) -> Html {
+ html! {
+ () {
+ input.focus();
+ }
+ false
+ }
+}
+```
+
+:::note
+请泚æïŒæ€çåœåšææ¹æ³äžèŠæ±å¿
é¡»å®ç°ïŒé»è®€æ
åµäžäžäŒæ§è¡ä»»äœæäœã
+:::
+
+### Update
+
+ç»ä»¶æ¯åšæçïŒå¯ä»¥æ³šå以æ¥æ¶åŒæ¥ä¿¡æ¯ã`update()` çåœåšææ¹æ³å¯¹äºæ¯äžªæ¶æ¯éœäŒè¢«è°çšãè¿äœ¿åŸç»ä»¶å¯ä»¥æ ¹æ®æ¶æ¯çå
容æ¥æŽæ°èªèº«ïŒå¹¶å³å®æ¯åŠéèŠéæ°æž²æèªå·±ãæ¶æ¯å¯ä»¥ç± HTML å
çŽ çå¬åšè§ŠåïŒæè
ç±åç»ä»¶ïŒAgentsïŒServices æ Futures åéã
+
+`update()` å¯èœçèµ·æ¥åäžé¢è¿äžªäŸåïŒ
+
+```rust
+pub enum Msg {
+ SetInputEnabled(bool)
+}
+
+impl Component for MyComponent {
+ type Message = Msg;
+
+ // ...
+
+ fn update(&mut self, msg: Self::Message) -> ShouldRender {
+ match msg {
+ Msg::SetInputEnabled(enabled) => {
+ if self.input_enabled != enabled {
+ self.input_enabled = enabled;
+ true // éæ°æž²æ
+ } else {
+ false
+ }
+ }
+ }
+ }
+}
+```
+
+### Change
+
+ç»ä»¶å¯èœè¢«å
¶ç¶èç¹éæ°æž²æãåçè¿ç§æ
åµæ¶ïŒå®ä»¬å¯ä»¥æ¥æ¶æ°çå±æ§ïŒpropertiesïŒå¹¶éæ©éæ°æž²æãè¿ç§è®Ÿè®¡éè¿æŽæ¹å±æ§ïŒpropertiesïŒæ¥ä¿è¿ç¶åç»ä»¶ä¹éŽçéä¿¡ãäœ äžæ¯å¿
é¡»å®ç° `change()`ïŒäœæ¯åŠææ³åšç»ä»¶è¢«å建åéè¿ props æ¥æŽæ°ç»ä»¶ïŒåå¯èœèŠè¿ä¹åã
+
+äžäžªåå§çå®ç°å¯èœçèµ·æ¥åïŒ
+
+```rust
+impl Component for MyComponent {
+ // ...
+
+ fn change(&mut self, props: Self::Properties) -> ShouldRender {
+ self.props = props;
+ true // åœæäŸäºæ°ç props å°å§ç»éæ°æž²æã
+ }
+}
+```
+
+### Destroy
+
+ç»ä»¶ä» DOM äžè¢«åžèœœåïŒYew è°çš `destroy()` çåœåšææ¹æ³æ¥æ¯æä»»äœå¿
èŠçæž
çæäœãè¿äžªæ¹æ³æ¯å¯éçïŒé»è®€æ
åµäžäžæ§è¡ä»»äœæäœã
+
+## å
³èç±»å
+
+`Component` trait æ䞀䞪å
³èç±»åïŒ`Message` å `Properties`ã
+
+```rust
+impl Component for MyComponent {
+ type Message = Msg;
+ type Properties = Props;
+
+ // ...
+}
+```
+
+`Message` 衚瀺ç»ä»¶å¯ä»¥å€ç以觊åæäºå¯äœçšçåç§æ¶æ¯ãäŸåŠïŒäœ å¯èœæäžæ¡ `Click` æ¶æ¯ïŒè¯¥æ¶æ¯è§Šå API 请æ±æè
åæ¢ UI ç»ä»¶çå€è§ãéåžžçåæ³æ¯åšç»ä»¶æš¡åäžå建äžäžªå«å `Msg` çæ䞟并å°å
¶çšäœç»ä»¶äžçæ¶æ¯ç±»åãéåžžå°âmessageâ猩å䞺âmsgâã
+
+```rust
+enum Msg {
+ Click,
+}
+```
+
+`Properties` 衚瀺ä»ç¶çº§äŒ éå°ç»ä»¶çä¿¡æ¯ãæ€ç±»åå¿
é¡»å®ç° `Properties` traitïŒéåžžéè¿æŽŸçïŒïŒå¹¶äžå¯ä»¥æå®æäºå±æ§ïŒpropertiesïŒæ¯å¿
éçè¿æ¯å¯éçãå建åæŽæ°ç»ä»¶æ¶äœ¿çšæ€ç±»åãéåžžçåæ³æ¯åšç»ä»¶æš¡åäžå建äžäžªå«å `Props` çç»æäœå¹¶å°å
¶çšäœç»ä»¶ç `Properties` ç±»åãéåžžå°âpropertiesâ猩å䞺âpropsâãç±äº props æ¯ä»ç¶ç»ä»¶äŒ éäžæ¥çïŒå æ€åºçšçšåºçæ ¹ç»ä»¶éåžžæäžäžªç±»å䞺 `()` ç `Properties`ãåŠæäœ åžæäžºæ ¹ç»ä»¶æå®å±æ§ïŒpropertiesïŒïŒè¯·äœ¿çš `App::mount_with_props` æ¹æ³ã
diff --git a/website/i18n/zh-Hans/docusaurus-plugin-content-docs/version-0.21/advanced-topics/struct-components/properties.mdx b/website/i18n/zh-Hans/docusaurus-plugin-content-docs/version-0.21/advanced-topics/struct-components/properties.mdx
new file mode 100644
index 00000000000..f07a81fa927
--- /dev/null
+++ b/website/i18n/zh-Hans/docusaurus-plugin-content-docs/version-0.21/advanced-topics/struct-components/properties.mdx
@@ -0,0 +1,72 @@
+---
+description: ç¶ç»ä»¶å°åç»ä»¶çéä¿¡
+---
+
+# å±æ§ïŒPropertiesïŒ
+
+åŠâç»ä»¶ïŒComponentsïŒâ页é¢æè¿°ïŒProperties çšäºç¶çº§å°åç»ä»¶çéä¿¡ã
+
+## 掟çå®
+
+äžèŠå°è¯èªå·±å»å®ç° `Properties`ïŒèæ¯éè¿äœ¿çš `#[derive(Properties)]` æ¥æŽŸçå®ã
+
+### å¿
éå±æ§
+
+é»è®€æ
åµäžïŒå®ç°äº `Properties` çç»æäœäžçå段æ¯å¿
éçãåœçŒºå°äºè¯¥å段并äžåš `html!` å®äžå建äºç»ä»¶æ¶ïŒå°è¿åçŒè¯é误ã对äºå
·æå¯éå±æ§çå段ïŒäœ¿çš `#[prop_or_default]` æ¥äœ¿çšè¯¥ç±»åçé»è®€åŒãèŠæå®äžäžªåŒïŒè¯·äœ¿çš `#[prop_or_else(value)]`ïŒå
¶äž value æ¯è¯¥å±æ§çé»è®€åŒãäŸåŠïŒèŠå°äžäžªåžå°åŒçé»è®€åŒè®Ÿçœ®äžº `true`ïŒè¯·äœ¿çšå±æ§ `#[prop_or_else(true)]`ãå¯éå±æ§éåžžäœ¿çš `Option`ïŒå
¶é»è®€åŒäžº `None`ã
+
+### PartialEq
+
+åŠæå¯ä»¥çè¯ïŒåšäœ ç props äžæŽŸç `PartialEq` éåžžæ¯åŸææä¹çãè¿äœ¿çšäºäžäžª**æ§èœäŒåäžæ䜳å®è·µ**éšå解éäºçæå·§ïŒå¯ä»¥æŽèœ»æŸå°é¿å
éæ°æž²æã
+
+## Properties çå
å/é床åŒé
+
+è®°äœç»ä»¶ç `view` åœæ°çŸåïŒ
+
+```rust
+fn view(&self) -> Html
+```
+
+äœ å¯¹ç»ä»¶çç¶æåäºäžäžªåŒçšïŒå¹¶çšæ¥å建 `Html`ãäœæ¯ properties æ¯ææææçåŒïŒowned valuesïŒãè¿æå³ç䞺äºåé å®ä»¬å¹¶äžå°å®ä»¬äŒ éç»åç»ä»¶ïŒæ们éèŠè·å `view` åœæ°éæäŸçåŒçšçæææãè¿æ¯åšå°åŒçšäŒ éç»ç»ä»¶æ¶éåŒå
éåŒçšå®æçïŒä»¥è·åŸææå
¶ props çææææçåŒã
+
+è¿æå³çæ¯äžªç»ä»¶éœæä»å
¶ç¶çº§äŒ éæ¥çç¶æçç¬ç¹å¯æ¬ïŒèäžïŒæ¯åœäœ éæ°æž²æäžäžªç»ä»¶æ¶ïŒè¯¥éæ°æž²æç»ä»¶çææåç»ä»¶ç props éœå°è¢«å
éã
+
+è¿æå³çåŠæäœ å° _倧é_ æ°æ®äœäžº propsïŒå€§å°äžº 10 KB çå笊䞲ïŒåäžäŒ éïŒåå¯èœéèŠèèå°åç»ä»¶èœ¬æ¢äžºåšç¶çº§è¿è¡è¿å `Html` çåœæ°ïŒå 䞺è¿æ ·å°±äžäŒè¢«åŒºå¶å
éäœ çæ°æ®ã
+
+åŠå€ïŒåŠæäœ äžéèŠä¿®æ¹äœäžº props äŒ éç倧æ°æ®ïŒèåªéèŠæŸç€ºå®ïŒåå¯ä»¥å°å
¶å
è£
åš `Rc` äžïŒä»¥äŸ¿ä»
å
éäžäžªåŒçšè®¡æ°çæéïŒèäžæ¯æ°æ®æ¬èº«ã
+
+## 瀺äŸ
+
+```rust
+pub struct LinkColor {
+ Blue,
+ Red,
+ Green,
+ Black,
+ Purple,
+}
+
+impl Default for LinkColor {
+ fn default() -> Self {
+ // é€éåŠæ诎æïŒåŠåéŸæ¥çé¢è²å°äžºèè²
+ LinkColor::Blue
+ }
+}
+
+#[derive(Properties, PartialEq)]
+pub struct LinkProps {
+ /// éŸæ¥å¿
é¡»æäžäžªç®æ å°å
+ href: String,
+ /// åŠæéŸæ¥ææ¬åŸå€§ïŒè¿å°äœ¿åŸå€å¶å笊䞲åŒéæŽå°
+ /// é€éææ§èœé®é¢ïŒåŠåéåžžäžå»ºè®®è¿ä¹å
+ text: Rc,
+ /// éŸæ¥çé¢è²
+ #[prop_or_default]
+ color: LinkColor,
+ /// åŠæ䞺 NoneïŒå view åœæ°å°äžæå®å€§å°
+ #[prop_or_default]
+ size: Option
+ /// åœ view åœæ°æ²¡ææå® activeïŒå
¶é»è®€äžº true
+ #[prop_or_else(true)]
+ active: bool,
+}
+```
diff --git a/website/i18n/zh-Hans/docusaurus-plugin-content-docs/version-0.21/advanced-topics/struct-components/refs.mdx b/website/i18n/zh-Hans/docusaurus-plugin-content-docs/version-0.21/advanced-topics/struct-components/refs.mdx
new file mode 100644
index 00000000000..75e9e1d9fd9
--- /dev/null
+++ b/website/i18n/zh-Hans/docusaurus-plugin-content-docs/version-0.21/advanced-topics/struct-components/refs.mdx
@@ -0,0 +1,23 @@
+---
+title: Refs
+description: è¶
åºçéç DOM 访é®
+---
+
+`ref` å
³é®è¯å¯è¢«çšåšä»»äœ HTML å
çŽ æç»ä»¶å
éšä»¥è·åŸè¯¥é¡¹æéå å°ç DOM å
çŽ ãè¿å¯è¢«çšäºåš `view` çåœåšææ¹æ³ä¹å€æ¥å¯¹ DOM è¿è¡æŽæ¹ã
+
+è¿å¯¹äºè·å canvas å
çŽ æè
æ»åšå°é¡µé¢çäžåéšåæ¯æçšçã
+
+è¯æ³åŠäžïŒ
+
+```rust
+// åš create äž
+self.node_ref = NodeRef::default();
+
+// åš view äž
+html! {
+
+}
+
+// åš update äž
+let has_attributes = self.node_ref.cast::().unwrap().has_attributes();
+```
diff --git a/website/i18n/zh-Hans/docusaurus-plugin-content-docs/version-0.21/concepts/agents.mdx b/website/i18n/zh-Hans/docusaurus-plugin-content-docs/version-0.21/concepts/agents.mdx
new file mode 100644
index 00000000000..725a13b5fc8
--- /dev/null
+++ b/website/i18n/zh-Hans/docusaurus-plugin-content-docs/version-0.21/concepts/agents.mdx
@@ -0,0 +1,40 @@
+---
+title: Agents
+description: Yew ç Actor ç³»ç»
+---
+
+Agents å Angular ç [Services](https://angular.io/guide/architecture-services) çžäŒŒïŒäœæ²¡æäŸèµæ³šå
¥ïŒïŒç» Yew æäŸäº [Actor æš¡å](https://en.wikipedia.org/wiki/Actor_model)ãAgents å¯ä»¥çšäºåšç»ä»¶ä¹éŽè·¯ç±æ¶æ¯ïŒèäžå®ä»¬åšç»ä»¶å±æ¬¡ç»æäžçäœçœ®æ å
³ïŒæè
å¯ä»¥çšäºåè°å
šå±ç¶æïŒæè
å¯ä»¥çšäºä»äž» UI 线çšäžåžèœœè®¡ç®å¯éåä»»å¡ïŒæè
åšäžåçæ çŸé¡µéŽéä¿¡ïŒåšæªæ¥ïŒã
+
+Agents äœ¿çš [web-workers](https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Using_web_workers) åæ¶è¿è¡æ¥å®ç°å¹¶åã
+
+## çåœåšæ
+
+
+
+## Agents çç±»å
+
+#### Reaches
+
+- Job - åš UI 线çšäžäžºæ¯äžªæ°ç Bridge çæäžäžªæ°ç Agentãè¿å¯¹äºå°äžæµè§åšéä¿¡çå
±äº«äœç¬ç«çè¡äžºç§»åºç»ä»¶æ¯åŸæçšçãïŒåŸ
éªè¯ïŒä»»å¡å®æåïŒAgent å°æ¶å€±ã
+- Context - Bridges å°çææè¿æ¥å° UI 线çšäžç agentãè¿å¯çšäºåšç»ä»¶åå
¶å® Agents ä¹éŽåè°ç¶æãåœæ²¡æ Bridge è¿æ¥å°è¯¥ Agent æ¶ïŒAgent å°æ¶å€±ã
+- Private - äž Job çžåïŒäœè¿è¡åšèªå·±ç web worker äžã
+- Public - äž Context çžåïŒäœè¿è¡åšèªå·±ç web worker äžã
+- Global \(WIP\)
+
+## Agent éä¿¡
+
+### Bridges
+
+Bridges å°è¿æ¥å°äžäžª Agent 并äžå
讞ååéä¿¡ã
+
+### Dispatchers
+
+Dispatchers å Bridges 类䌌ïŒäœæ¯ä»ä»¬åªèœåéæ¶æ¯ç» Agentsã
+
+## åŒé
+
+Agents éè¿äœ¿çšäºè¿å¶ç bincode åºååå
¶æ¶æ¯æ¥è¿è¡éä¿¡ãå æ€ïŒååšæ¯ä»
è°çšåœæ°çžæ¯æŽé«çæ§èœæ¶èãé€é计ç®ææ¬æè
åšä»»æç»ä»¶éŽåè°çéæ±è¶
è¿æ¶æ¯äŒ éçææ¬ïŒåŠåäœ åºè¯¥å°œå¯èœå°åšåœæ°äžå
å«äœ çåºçšé»èŸã
+
+## Further reading
+
+- The [web_worker_fib](https://github.com/yewstack/yew/tree/master/examples/web_worker_fib) example shows how components can use agents to communicate with each other.
diff --git a/website/i18n/zh-Hans/docusaurus-plugin-content-docs/version-0.21/concepts/function-components/hooks/custom-hooks.mdx b/website/i18n/zh-Hans/docusaurus-plugin-content-docs/version-0.21/concepts/function-components/hooks/custom-hooks.mdx
new file mode 100644
index 00000000000..f872d01c0f3
--- /dev/null
+++ b/website/i18n/zh-Hans/docusaurus-plugin-content-docs/version-0.21/concepts/function-components/hooks/custom-hooks.mdx
@@ -0,0 +1,121 @@
+---
+title: èªå®ä¹é©åïŒCustom HooksïŒ
+description: å®ä¹äœ èªå·±ç Hooks
+---
+
+## å®ä¹èªå®ä¹é©å
+
+ç»ä»¶äžäžç¶ææå
³çé»èŸå¯ä»¥éè¿å建èªå®ä¹ Hooks æåå°åœæ°äžã
+
+å讟æ们æäžäžªç»ä»¶ïŒå®è®¢é
äºäžäžªä»£çïŒagentïŒå¹¶äžäŒæŸç€ºåéç»å®çæ¶æ¯ã
+
+```rust
+#[function_component(ShowMessages)]
+pub fn show_messages() -> Html {
+ let (state, set_state) = use_state(|| vec![]);
+
+ {
+ let mut state = Rc::clone(&state);
+ use_effect(move || {
+ let producer = EventBus::bridge(Callback::from(move |msg| {
+ let mut messages = (*state).clone();
+ messages.push(msg);
+ set_state(messages)
+ }));
+
+ || drop(producer)
+ });
+ }
+
+ let output = state.iter().map(|it| html! { { it }
});
+ html! { { for output }
}
+}
+```
+
+è¿æ®µä»£ç æäžäžªé®é¢ïŒé»èŸäžèœè¢«åŠäžäžªç»ä»¶éçšãåŠææ们æ建åŠäžäžªè·èžªæ¶æ¯çç»ä»¶ïŒæ们å¯ä»¥å°é»èŸç§»åšå°èªå®ä¹é©åäžïŒèäžæ¯å€å¶ä»£ç ã
+
+æ们å°éŠå
å建äžäžªå䞺`use_subscribe`çæ°åœæ°ã `use_`åçŒé垞衚瀺æ€åœæ°æ¯äžäžªé©åãè¿äžªåœæ°å°äžæ¥åä»»äœåæ°å¹¶è¿å`Rc>>` ã
+
+```rust
+fn use_subscribe() -> Rc>> {
+ // ...
+}
+```
+
+é©åçé»èŸåš`use_hook`çåè°äžã `use_hook`æçæ¯èªå®ä¹ Hook çå€çåœæ°ãå®æ¥å 2 䞪åæ°ïŒ `hook_runner`å`initial_state_producer` ã
+
+`hook_runner`äžå
å«äºææé©åçé»èŸïŒå®çåè°çè¿ååŒåäŒè¢«`use_hook`è¿åã `hook_runner`éèŠ 2 䞪åæ°ïŒåå«æ¯å¯¹é©åå`hook_callback`å®ä»¬äž€äžªçå
éšç¶æçå¯ååŒçšã è`hook_callback`åæ ·ä¹èŠ 2 䞪åæ°ïŒäžäžªåè°åäžäžª boolïŒåè°æ¥å`internal_state` ïŒä¹å°±æ¯å¯¹å
éšç¶æå®äŸçå¯ååŒçšïŒå¹¶äžäŒè°æ§è¡å®é
çæŽæ¹ïŒè¿äŒè¿å衚瀺`ShouldRender`çåžå°åŒïŒç¬¬äºäžªåæ° bool ççšå€æ¯æ瀺å®æ¯åŠåšç»ä»¶æž²æåè¿è¡ã`use_hook`ç第äºäžªåæ°`initial_state_producer`æ¥åçšäºå建å
éšç¶æå®äŸçåè°ãè¿é诎çå
éšç¶ææçæ¯äžäžªå®ç°äº`Hook` trait çç»æäœã
+
+ç°åšè®©æ们䞺`use_subscribe`é©åå建ç¶æïŒstate structïŒã
+
+```rust
+/// `use_subscribe` internal state
+struct UseSubscribeState {
+ /// holds all the messages received
+ pub messages: Rc>>,
+}
+
+impl Hook for UseSubscribeState {}
+```
+
+æ¥äžæ¥æ们䞺`use_subscribe`æ·»å å®é
é»èŸã
+
+```rust
+fn use_subscribe() -> Rc>> {
+ use_hook(
+ // hook's handler. all the logic goes in here
+ |state: &mut UseSubscribeState, hook_callback| {
+ // calling other Hooks inside a hook
+ use_effect(move || {
+ let producer = EventBus::bridge(Callback::from(move |msg| {
+ hook_callback(
+ // where the mutations of state are performed
+ |state| {
+ (*state.messages).borrow_mut().deref_mut().push(msg);
+ true // should re-render
+ }, false // run post-render
+ )
+ }));
+
+ || drop(producer)
+ });
+
+ // return from hook
+ state.messages.clone()
+ },
+ // initial state producer
+ || UseSubscribeState { messages: Rc::new(RefCell::new(vec![])) },
+ )
+}
+```
+
+ç°åšæ们å¯ä»¥äœ¿çšèªå®ä¹é©åäºïŒ
+
+```rust
+#[function_component(ShowMessages)]
+pub fn show_messages() -> Html {
+ let state = use_subscribe();
+ let output = state.borrow().deref().into_iter().map(|it| html! { { it }
});
+
+ html! { { for output }
}
+}
+```
+
+éèŠç¹å«æ³šæçæ¯å建èªå®ä¹é©åæ¶`use_hook`äžæ¯å¿
é¡»çïŒå®ä»¬åªæ¯çšæ¥å
å«å
¶ä»é©åãéåžžåºé¿å
䜿çš`use_hook`ã
+
+```rust
+fn use_subscribe() -> Rc> {
+ let (state, set_state) = use_state(Vec::new);
+
+ use_effect(move || {
+ let producer = EventBus::bridge(Callback::from(move |msg| {
+ let mut messages = (*state).clone();
+ messages.push(msg);
+ set_state(messages)
+ }));
+ || drop(producer)
+ });
+
+ state
+}
+```
diff --git a/website/i18n/zh-Hans/docusaurus-plugin-content-docs/version-0.21/concepts/function-components/introduction.mdx b/website/i18n/zh-Hans/docusaurus-plugin-content-docs/version-0.21/concepts/function-components/introduction.mdx
new file mode 100644
index 00000000000..babad678459
--- /dev/null
+++ b/website/i18n/zh-Hans/docusaurus-plugin-content-docs/version-0.21/concepts/function-components/introduction.mdx
@@ -0,0 +1,27 @@
+---
+title: åœæ°åŒç»ä»¶
+sidebar_label: ç®ä»
+description: ä»ç»åœæ°åŒç»ä»¶
+slug: /concepts/function-components
+---
+
+åœæ°åŒç»ä»¶æ¯æ®éç»ä»¶çç®åçæ¬ãå®ä»¬ç±äžäžªæ¥æ¶ props çåœæ°ç»æïŒå¹¶éè¿è¿å`Html`æ¥ç¡®å®åºè¯¥åç°ä»ä¹ãåºæ¬äžïŒå®æ¯äžäžªç®å䞺`view`æ¹æ³çç»ä»¶ãå°±å
¶æ¬èº«èèšïŒè¿å°æ¯çžåœæéçïŒå 䞺æšåªèœå建纯ç»ä»¶ïŒèè¿å°±æ¯ Hook 倧å±èº«æçå°æ¹ãHook å
讞åœæ°ç»ä»¶æ éå®ç°`Component` traitïŒå°±å¯ä»¥äœ¿çšç¶æïŒstateïŒåå
¶ä» Yew åèœã
+
+## å建åœæ°åŒç»ä»¶
+
+å建åœæ°åŒç»ä»¶çæç®åæ¹æ³æ¯åšåœæ°åæ·»å `#[function_component]`å±æ§ã
+
+```rust
+#[function_component(HelloWorld)]
+fn hello_world() -> Html {
+ html! { "Hello world" }
+}
+```
+
+### æŽå€ç»è
+
+åœæ°åŒç»ä»¶ç±äž€éšåç»æãéŠå
ïŒ `FunctionProvider` trait äž`Component` trait å·®äžå€ïŒäœå®åªæäžäžªå䞺`run`æ¹æ³ãä¹åæ¯`FunctionComponent`ç»æäœïŒå®å°è£
äº`FunctionProvider`ç±»å并å°å
¶èœ¬æ¢äžºå®é
ç`Component` ã `#[function_component]`å±æ§æ¬èŽšäžåªæ¯`FunctionProvider`并å°å
¶æŽé²åš`FunctionComponent` ã
+
+### é©åïŒHooksïŒ
+
+é©åïŒHooksïŒå°±æ¯è®©æšâé©äœâç»ä»¶çç¶æïŒstateïŒå/æçåœåšæ并æ§è¡æäœçåœæ°ã é€äº Yew èªåžŠçäžäºé¢å®ä¹ç Hookãæšä¹å¯ä»¥å建èªå·±çã
diff --git a/website/i18n/zh-Hans/docusaurus-plugin-content-docs/version-0.21/concepts/html/components.mdx b/website/i18n/zh-Hans/docusaurus-plugin-content-docs/version-0.21/concepts/html/components.mdx
new file mode 100644
index 00000000000..cb795e0cf21
--- /dev/null
+++ b/website/i18n/zh-Hans/docusaurus-plugin-content-docs/version-0.21/concepts/html/components.mdx
@@ -0,0 +1,114 @@
+---
+description: 䜿çšå
·æå±æ¬¡ç»æçç»ä»¶æ¥å建å€æçåžå±
+---
+
+# ç»ä»¶
+
+## åºç¡
+
+ä»»äœå®ç°äº `Component` trait çç±»åéœå¯è¢«çšåš `html!` å®äžïŒ
+
+```rust
+html!{
+ <>
+ // 没æå±æ§
+
+ { "Hi" }
+ { "Hello" }
+
+}
+```
+
+{% endcode %}
+
+{% code title="container.rs" %}
+
+```rust
+pub struct Container(Props);
+
+#[derive(Properties)]
+pub struct Props {
+ pub children: Children,
+}
+
+impl Component for Container {
+ type Properties = Props;
+
+ // ...
+
+ fn view(&self) -> Html {
+ html! {
+
+ { self.0.children.clone() }
+
+ }
+ }
+}
+```
+
+{% endcode %}
+
+## æ¥æ Props çåµå¥åç»ä»¶
+
+åŠæå
å«ç»ä»¶æ æ³šäº children çç±»åïŒåå¯ä»¥è®¿é®åæŽæ¹åµå¥ç»ä»¶çå±æ§ãåšäžé¢ç瀺äŸäžïŒ`List` ç»ä»¶å¯ä»¥å
å« `ListItem` ç»ä»¶ãæå
³æ€æš¡åŒççå®ç€ºäŸïŒè¯·æ¥ç `yew-router` çæºç ãæå
³æŽé«çº§ç瀺äŸïŒè¯·åš yew äž»ä»åºäžæ¥ç `nested-list` 瀺äŸä»£ç ã
+
+{% code title="parent.rs" %}
+
+```rust
+html! {
+
+
+}
+```
+
+{% endcode %}
+
+{% code title="list.rs" %}
+
+```rust
+pub struct List(Props);
+
+#[derive(Properties)]
+pub struct Props {
+ pub children: ChildrenWithProps,
+}
+
+impl Component for List {
+ type Properties = Props;
+
+ // ...
+
+ fn view(&self) -> Html {
+ html!{{
+ for self.0.children.iter().map(|mut item| {
+ item.props.value = format!("item-{}", item.props.value);
+ item
+ })
+ }}
+ }
+}
+```
+
+{% endcode %}
diff --git a/website/i18n/zh-Hans/docusaurus-plugin-content-docs/version-0.21/concepts/html/elements.mdx b/website/i18n/zh-Hans/docusaurus-plugin-content-docs/version-0.21/concepts/html/elements.mdx
new file mode 100644
index 00000000000..dc2726fefda
--- /dev/null
+++ b/website/i18n/zh-Hans/docusaurus-plugin-content-docs/version-0.21/concepts/html/elements.mdx
@@ -0,0 +1,264 @@
+---
+description: HTML å SVG å
çŽ ååæ¯æ
+---
+
+# å
çŽ
+
+## æ çŸç»æ
+
+å
çŽ æ çŸå¿
é¡»æ¯èªéåç `<... />`ïŒææ¯æ¯äžªæ çŸéœæäžäžªå¯¹åºçéåæ çŸã
+
+
+
+
+```rust
+html! {
+
+}
+```
+
+
+
+```rust
+html! {
+ // <- 猺å°éåæ çŸ
+}
+```
+
+
+
+```rust
+html! {
+
+}
+```
+
+
+
+```rust
+html! {
+
// <- 没æèªéå
+}
+```
+
+
+
+:::note
+䞺æ¹äŸ¿èµ·è§ïŒäžäº _éåžž_ éèŠéåæ çŸçå
çŽ æ¯è¢«**å
讞**èªéåçãäŸåŠïŒ`html! {
}` è¿æ ·åæ¯ææçã
+:::
+
+## Children
+
+蜻æŸå建å€æçåµå¥ HTML å SVG åžå±ïŒ
+
+
+
+
+```rust
+html! {
+
+}
+```
+
+
+
+```rust
+html! {
+
+
+
+
+
+
+
+
+}
+```
+
+
+
+## Classes
+
+æ讞å€æ¹äŸ¿çé项å¯çšäºå
çŽ æå® classesïŒ
+
+
+
+
+```rust
+html! {
+
+}
+```
+
+
+
+```rust
+html! {
+
+}
+```
+
+
+
+```rust
+html! {
+
+}
+```
+
+
+
+```rust
+html! {
+
+}
+```
+
+
+
+```rust
+html! {
+
+}
+```
+
+
+
+```rust
+html! {
+
+}
+```
+
+
+
+## çå¬åš
+
+çå¬åšå±æ§éèŠäŒ éäžäžªç±éå
å
裹ç `Callback`ãå建åè°çæ¹åŒåå³äºäœ åžæäœ çåºçšçšåºåŠäœååºçå¬åšäºä»¶ïŒ
+
+
+
+
+```rust
+struct MyComponent {
+ link: ComponentLink
,
+}
+
+enum Msg {
+ Click,
+}
+
+impl Component for MyComponent {
+ type Message = Msg;
+ type Properties = ();
+
+ fn create(_: Self::Properties, link: ComponentLink) -> Self {
+ MyComponent { link }
+ }
+
+ fn update(&mut self, msg: Self::Message) -> ShouldRender {
+ match msg {
+ Msg::Click => {
+ // å€ç Click
+ }
+ }
+ }
+
+ fn view(&self) -> Html {
+ // ä»ç»ä»¶ link äžå建åè°æ¥åšç»ä»¶äžå€çå®
+ let click_callback = self.link.callback(|_: ClickEvent| Msg::Click);
+ html! {
+
+ { "Click me!" }
+
+ }
+ }
+}
+```
+
+
+
+```rust
+struct MyComponent {
+ worker: Dispatcher,
+}
+
+impl Component for MyComponent {
+ type Message = ();
+ type Properties = ();
+
+ fn create(_: Self::Properties, _: ComponentLink) -> Self {
+ MyComponent {
+ worker: MyWorker::dispatcher()
+ }
+ }
+
+ fn update(&mut self, _: Self::Message) -> ShouldRender {
+ false
+ }
+
+ fn view(&self) -> Html {
+ // ä» worker äžå建åè°æ¥åšåŠäžäžªäžäžæäžå€çå®
+ let click_callback = self.worker.callback(|_: ClickEvent| WorkerMsg::Process);
+ html! {
+
+ { "Click me!" }
+
+ }
+ }
+}
+```
+
+
+
+```rust
+struct MyComponent;
+
+impl Component for MyComponent {
+ type Message = ();
+ type Properties = ();
+
+ fn create(_: Self::Properties, _: ComponentLink) -> Self {
+ MyComponent
+ }
+
+ fn update(&mut self, _: Self::Message) -> ShouldRender {
+ false
+ }
+
+ fn view(&self) -> Html {
+ // å建äžäžªçæçåè°
+ let click_callback = Callback::from(|| {
+ ConsoleService::log("clicked!");
+ });
+
+ html! {
+
+ { "Click me!" }
+
+ }
+ }
+}
+```
+
+
diff --git a/website/i18n/zh-Hans/docusaurus-plugin-content-docs/version-0.21/concepts/html/introduction.mdx b/website/i18n/zh-Hans/docusaurus-plugin-content-docs/version-0.21/concepts/html/introduction.mdx
new file mode 100644
index 00000000000..8a09923b894
--- /dev/null
+++ b/website/i18n/zh-Hans/docusaurus-plugin-content-docs/version-0.21/concepts/html/introduction.mdx
@@ -0,0 +1,14 @@
+---
+description: çšäºçæ HTML å SVG çå®çšåº
+slug: /concepts/html
+---
+
+# äœ¿çš html! å®
+
+`html!` å®å
è®žäœ äžºç»ä»¶çŒå声æåŒç HTML å SVGãåŠæäœ äœ¿çšè¿ React ç JSXïŒå°äŒæè§å°éåžžçæã
+
+**éèŠæ瀺**
+
+1. `html!` å®è°çšäžåªèœæäžäžªæ ¹èç¹
+2. 空ç `html! {}` å®è°çšæ¯ææçäœäžäŒæž²æä»»äœå
容
+3. åžžéå¿
é¡»å§ç»è¢«åŒå·æ¬èµ·æ¥å¹¶è¢«å
å«åšå€§æ¬å·éïŒ`html! { "Hello, World" }`
diff --git a/website/i18n/zh-Hans/docusaurus-plugin-content-docs/version-0.21/concepts/html/lists.mdx b/website/i18n/zh-Hans/docusaurus-plugin-content-docs/version-0.21/concepts/html/lists.mdx
new file mode 100644
index 00000000000..86edb13d08d
--- /dev/null
+++ b/website/i18n/zh-Hans/docusaurus-plugin-content-docs/version-0.21/concepts/html/lists.mdx
@@ -0,0 +1,57 @@
+# åè¡š
+
+## Fragments
+
+`html!` å®æ»æ¯èŠæ±äžäžªåäžçæ ¹èç¹ã䞺äºç»åŒè¿äžªéå¶ïŒæå
容å
裹åšäžäžªç©ºæ çŸå
æ¯ææçïŒ
+
+
+
+
+```rust
+html! {
+ <>
+
+
+
+}
+```
+
+
+
+```rust
+/* é误ïŒåªå
讞äžäžª html æ ¹å
çŽ */
+
+html! {
+
+
+}
+```
+
+
+
+## è¿ä»£åš
+
+Yew æ¯æ䞀ç§ä»è¿ä»£åšæ建 html çè¯æ³ïŒ
+
+
+
+
+```rust
+html! {
+
+ { self.props.items.iter().map(renderItem).collect::() }
+
+}
+```
+
+
+
+```rust
+html! {
+
+ { for self.props.items.iter().map(renderItem) }
+
+}
+```
+
+
diff --git a/website/i18n/zh-Hans/docusaurus-plugin-content-docs/version-0.21/concepts/html/literals-and-expressions.mdx b/website/i18n/zh-Hans/docusaurus-plugin-content-docs/version-0.21/concepts/html/literals-and-expressions.mdx
new file mode 100644
index 00000000000..400d15d3169
--- /dev/null
+++ b/website/i18n/zh-Hans/docusaurus-plugin-content-docs/version-0.21/concepts/html/literals-and-expressions.mdx
@@ -0,0 +1,57 @@
+# åžžéå衚蟟åŒ
+
+## åžžé
+
+åŠæäžäžªè¡šèŸŸåŒçç±»åæ¬èº«å®ç°äº `Display` ïŒäžäžªæ ååºäžç TraitïŒïŒä»ä»¬å°äŒè¢«èœ¬åæå笊䞲并äžäœäžºäžäžª [Text](https://developer.mozilla.org/en-US/docs/Web/API/Text) èç¹æå
¥ DOM äžã
+
+ææçéèŠæŸç€ºçææ¬å¿
须被 `{}` åå
å«ïŒå 䞺è¿äºææ¬äŒè¢«åœåäžäžª Rust 衚蟟åŒæ¥å€çãè¿äžç¹äžïŒYew äžäœ¿çš HTML çæ¹åŒåæ£åžž HTML è¯æ³æ巚倧çåºå«ã
+
+```rust
+let text = "lorem ipsum";
+html!{
+ <>
+ {text}
+ {"dolor sit"}
+ {42}
+
+}
+```
+
+## 衚蟟åŒ
+
+äœ å¯ä»¥åš HTML äžäœ¿çš `{}` åæ¥æå
¥ Rust 衚蟟åŒïŒåªèŠè¿äºè¡šèŸŸåŒæç»å¯ä»¥è¢«è§£ææ `Html`
+
+```rust
+html! {
+
+ {
+ if show_link {
+ html! {
+
{"Link"}
+ }
+ } else {
+ html! {}
+ }
+ }
+
{"Link"}
+ }
+ } else {
+ html! {}
+ }
+};
+
+html! {
+ {maybe_display_link()}
+}
+```
diff --git a/website/i18n/zh-Hans/docusaurus-plugin-content-docs/version-0.21/concepts/router.mdx b/website/i18n/zh-Hans/docusaurus-plugin-content-docs/version-0.21/concepts/router.mdx
new file mode 100644
index 00000000000..521c1eaa795
--- /dev/null
+++ b/website/i18n/zh-Hans/docusaurus-plugin-content-docs/version-0.21/concepts/router.mdx
@@ -0,0 +1,45 @@
+---
+description: Yew çå®æ¹ Router
+---
+
+# Router
+
+[https://crates.io/crates/yew-router](https://crates.io/crates/yew-router)
+
+Routers åšå页åºçšïŒSPAïŒäžæ ¹æ® URL çäžåæŸç€ºäžåç页é¢ãåœç¹å»äžäžªéŸæ¥æ¶ïŒRouter åšæ¬å°è®Ÿçœ® URL 以æååºçšçšåºäžææçè·¯ç±ïŒèäžæ¯é»è®€è¯·æ±äžäžªäžåçè¿çšèµæºãç¶å Router æ£æµå°æ€æŽæ¹åå³å®èŠæž²æçå
容ã
+
+## æ žå¿å
çŽ
+
+### Route
+
+å
å«äžäžªå笊䞲ïŒè¯¥å笊䞲衚瀺çœåäžååä¹åçææå
容ïŒè¿å¯ä»¥éæ©è¡šç€ºååšåš history api äžçç¶æã
+
+### RouteService
+
+äžæµè§åšé信以è·åå讟眮路ç±ã
+
+### RouteAgent
+
+æ¥æäžäžª RouteServiceïŒå¹¶çšäºåœè·¯ç±æ¹åæ¶åè°æŽæ°ïŒæ 论æŽæ°æ¯æ¥èªåºçšçšåºèªèº«é»èŸè¿æ¯æ¥èªæµè§åšè§Šåçäºä»¶ã
+
+### Switch
+
+`Switch` trait çšäºåšè¯¥ trait çå®ç°è
ä¹éŽèœ¬æ¢ `Route`ã
+
+### Router
+
+Router ç»ä»¶å `RouterAgent` è¿è¡éä¿¡ïŒå¹¶å°èªåšæå®ä» Agent é£éè·åŸç Routes 解æ䞺 SwitchesïŒå¹¶éè¿ `render` å±æ§æŽé²è¯¥ SwitchïŒè¯¥å±æ§å
讞æå®å°çæç Switch 蜬æ¢äžº `HTML` çæ¹åŒã
+
+## åŠäœäœ¿çš Router
+
+éŠå
ïŒäœ èŠå建äžäžªè¡šåŸäœ çåºçšçšåºææç¶æçç±»åã请泚æïŒèœç¶è¿éåžžæ¯äžäžªæ䞟ïŒäœä¹æ¯æç»æäœïŒå¹¶äžäœ å¯ä»¥åšå
éšåµå¥å®ç°äº `Switch` trait çå
¶ä»é¡¹ã
+
+ç¶åäœ åºè¯¥äžºäºäœ å建çç±»å掟ç `Switch`ã对äºæ䞟ïŒæ¯äžäžªæåéœå¿
é¡»çš `#[to = "/some/route"]` è¿è¡æ 泚ïŒåŠæäœ äœ¿çšç»æäœïŒåæ 泚å¿
é¡»åºç°åšç»æäœå£°æä¹å€ã
+
+请泚æïŒç±æŽŸçå®äžº `Switch` çæçå®ç°ïŒå°å°è¯ä»å€Žå°å°ŸäŸæ¬¡å建æ¯äžªæåïŒå æ€ïŒåŠæä»»äœè·¯ç±å¯èœäžäœ æå®ç䞀䞪 `to` æ 泚çžå¹é
ïŒé£ä¹ç¬¬äžäžªäŒè¢«å¹é
ïŒç¬¬äºäžªå°æ°žè¿äžäŒè¢«å°è¯ã
+
+äœ è¿å¯ä»¥åš `#[to = ""]` æ 泚äžäœ¿çš `{}` çåäœæ¥æè·ç段ã`{}` 衚瀺æè·ææ¬çŽå°äžäžäžªåé笊ïŒæ ¹æ®äžäžæå¯èœæ¯"/"ïŒ"?"ïŒ"&" æ "\#"ïŒã`{*}` 衚瀺æè·ææ¬çŽå°åç»å笊å¹é
䞺æ¢ïŒåŠæäžååšä»»äœå笊ïŒåå®å°å¹é
ä»»äœå
容ã`{}` 衚瀺æè·ææ¬çŽå°éå°æå®æ°ç®çåé笊䞺æ¢ïŒäŸåŠïŒ`{2}` å°äžçŽæè·ææ¬çŽå°éå°äž€äžªåé笊䞺æ¢ïŒã
+
+对äºå
·æåœåå段çç»æäœåæ䞟ïŒäœ å¿
é¡»åšæè·ç»äžæå®å段çå称ïŒäŸåŠïŒ`{user_name}` æ `{*:age}`ã
+
+Switch trait éçšäºæ¯å笊䞲æŽç»æåçæè·ç»ãäœ å¯ä»¥æå®å®ç°äº `Switch` trait çä»»äœç±»åãå æ€ïŒäœ å¯ä»¥æå®æè·ç»äžº `usize`ïŒå¹¶äžåŠæ URL çæè·éšåæ æ³èœ¬æ¢äžºå®ïŒå该æåäžäŒè¢«å¹é
ã
diff --git a/website/i18n/zh-Hans/docusaurus-plugin-content-docs/version-0.21/getting-started/build-a-sample-app.mdx b/website/i18n/zh-Hans/docusaurus-plugin-content-docs/version-0.21/getting-started/build-a-sample-app.mdx
new file mode 100644
index 00000000000..ba2a4edd845
--- /dev/null
+++ b/website/i18n/zh-Hans/docusaurus-plugin-content-docs/version-0.21/getting-started/build-a-sample-app.mdx
@@ -0,0 +1,87 @@
+# 第äžäžªç®åç App
+
+éŠå
å建äžäžªäºè¿å¶é¡¹ç®:
+
+```bash
+cargo new --bin yew-app && cd yew-app
+```
+
+æ·»å `yew` å°äœ çäŸèµåºäžïŒ[è¿é](https://docs.rs/yew) å¯ä»¥æ¥çææ°çæ¬ç YewïŒ
+
+{% code title="Cargo.toml" %}
+
+```text
+[package]
+name = "yew-app"
+version = "0.1.0"
+authors = ["Yew App Developer "]
+edition = "2018"
+
+[dependencies]
+yew = { version = "0.14.3", features = ["std_web"] }
+```
+
+{% endcode %}
+
+å°è¿ä»œä»£ç å€å¶å°äœ ç `src/main.rs` æ件äž:
+
+{% code title="src/main.rs" %}
+
+```rust
+use yew::prelude::*;
+
+struct Model {
+ link: ComponentLink,
+ value: i64,
+}
+
+enum Msg {
+ AddOne,
+}
+
+impl Component for Model {
+ type Message = Msg;
+ type Properties = ();
+ fn create(_: Self::Properties, link: ComponentLink) -> Self {
+ Self {
+ link,
+ value: 0,
+ }
+ }
+
+ fn update(&mut self, msg: Self::Message) -> ShouldRender {
+ match msg {
+ Msg::AddOne => self.value += 1
+ }
+ true // æ瀺ç»ä»¶åºè¯¥éæ°æž²æ
+ }
+
+ fn view(&self) -> Html {
+ html! {
+
+
{ "+1" }
+
{ self.value }
+
::new().mount_to_body();
+}
+```
+
+{% endcode %}
+
+è¿ä»œä»£ç å°æå»ºäœ ç称䞺 `Model` ç `Component` æ ¹ç»ä»¶ïŒå®äŒæŸç€ºäžäžªæé®ïŒåœäœ ç¹å»å®æ¶ïŒ`Model` å°äŒæŽæ°èªå·±çç¶æãç¹å«æ³šæ `main()` äžç `App::::new().mount_to_body()`ïŒå®äŒå¯åšäœ çåºçšå¹¶å°å
¶æ蜜å°é¡µé¢ç `` æ çŸäžãåŠæäœ æ³äœ¿çšä»»äœåšæå±æ§æ¥å¯åšåºçšçšåºïŒåå¯ä»¥äœ¿çš `App::::new().mount_to_body_with_props(..)`ã
+
+## è¿è¡äœ çåºçšçšåº!
+
+å¯åšå¹¶è¿è¡äœ çåºçšçæå¿«æ¹åŒå°±æ¯äœ¿çš [`cargo-web`](https://github.com/koute/cargo-web)ãåŠæäœ è¿æ²¡æçè¯ïŒè¯·çš `cargo install cargo-web` åœä»€æ¥å®è£
è¿äžªå·¥å
·ç¶åéè¿è¿è¡äžè¿°åœä»€æ¥æ建åå¯åšäžäžªåŒåæå¡åšïŒ
+
+```bash
+cargo web start
+```
+
+`cargo-web` å°äŒèªåšäžºäœ æ·»å `wasm32-unknown-unknown` äœäžºç®æ 代ç ïŒç¶åæå»ºäœ çåºçšïŒäœ çåºçšå°é»è®€åš [http://\[::1\]:8000](http://[::1]:8000) 被访é®ãå¯ä»¥éè¿ `cargo web start --help` åœä»€æ¥è·åæŽå€é项ååž®å©ã
diff --git a/website/i18n/zh-Hans/docusaurus-plugin-content-docs/version-0.21/getting-started/examples.mdx b/website/i18n/zh-Hans/docusaurus-plugin-content-docs/version-0.21/getting-started/examples.mdx
new file mode 100644
index 00000000000..61d76d50427
--- /dev/null
+++ b/website/i18n/zh-Hans/docusaurus-plugin-content-docs/version-0.21/getting-started/examples.mdx
@@ -0,0 +1,11 @@
+# éè¿äŸååŠä¹
+
+Yew ç github 项ç®äžå°±å
å«äºåç§åæ ·ç瀺äŸïŒè¿äºé¡¹ç®åšäžåçšåºŠç绎æ€äžïŒãæ们建议ä»ç»å°åŠä¹ å®ä»¬, äºè§£åŠäœäœ¿çšäžåçæ¡æ¶ç¹æ§. æ们åšä¹Šäžæ纰æŒåé误çæ¶åä¹æ¬¢è¿ pull-requests åæ亀 issues â¥ïž
+
+- [**Todo AppïŒä»£åäºé¡¹ïŒ\(stdweb\)**](https://github.com/yewstack/yew/tree/v0.14.0/examples/std_web/todomvc)
+- [**Todo AppïŒä»£åäºé¡¹ïŒ\(web_sys\)**](https://github.com/yewstack/yew/tree/v0.14.0/examples/web_sys/todomvc)
+- [**Custom ComponentsïŒèªå®ä¹ Component ç»ä»¶ïŒ**](https://github.com/yewstack/yew/tree/v0.14.0/examples/custom_components)
+- [**Multi-threading \(Agents\)ïŒå€çº¿çš AgentsïŒ\(stdweb\)**](https://github.com/yewstack/yew/tree/v0.14.0/examples/std_web/multi_thread)
+- [**Multi-threading \(Agents\)ïŒå€çº¿çš AgentsïŒ\(web_sys\)**](https://github.com/yewstack/yew/tree/v0.14.0/examples/web_sys/multi_thread)
+- [**Timer ServiceïŒè®¡æ¶åšïŒ**](https://github.com/yewstack/yew/tree/v0.14.0/examples/timer)
+- [**Nested ComponentsïŒåµå¥ Component ç»ä»¶ïŒ**](https://github.com/yewstack/yew/tree/v0.14.0/examples/nested_list)
diff --git a/website/i18n/zh-Hans/docusaurus-plugin-content-docs/version-0.21/more/css.mdx b/website/i18n/zh-Hans/docusaurus-plugin-content-docs/version-0.21/more/css.mdx
new file mode 100644
index 00000000000..c79e240878f
--- /dev/null
+++ b/website/i18n/zh-Hans/docusaurus-plugin-content-docs/version-0.21/more/css.mdx
@@ -0,0 +1,5 @@
+# CSS
+
+<TODO>
+
+对éåœç CSS æ¯æçææ¡å¯ä»¥åšè¿éæŸå°ïŒ[https://github.com/yewstack/yew/issues/533](https://github.com/yewstack/yew/issues/533)
diff --git a/website/i18n/zh-Hans/docusaurus-plugin-content-docs/version-0.21/more/debugging.mdx b/website/i18n/zh-Hans/docusaurus-plugin-content-docs/version-0.21/more/debugging.mdx
new file mode 100644
index 00000000000..858d36a1282
--- /dev/null
+++ b/website/i18n/zh-Hans/docusaurus-plugin-content-docs/version-0.21/more/debugging.mdx
@@ -0,0 +1,50 @@
+# Debugging
+
+## Panics
+
+Please use the [`console_error_panic`](https://github.com/rustwasm/console_error_panic_hook) crate for nicer stacktraces with Rust symbols. Note, that it is not compatible with apps built with `cargo-web`.
+
+## Console Logging
+
+In general, Wasm web apps are able to interact with Browser APIs, and the `console.log` api is no exception. There are a few options available:
+
+### [`wasm-logger`](https://crates.io/crates/wasm-logger)
+
+This crate integrates with the familiar Rust `log` crate:
+
+```rust
+// setup
+fn main() {
+ wasm_logger::init(wasm_logger::Config::default());
+}
+
+// usage
+log::info!("Update: {:?}", msg);
+```
+
+### **\`\`**[**`ConsoleService`**](https://docs.rs/yew/0.13.2/yew/services/console/struct.ConsoleService.html)**\`\`**
+
+This service is included within yew and is available when the `"services"` feature is enabled:
+
+```rust
+// usage
+ConsoleService::info(format!("Update: {:?}", msg).as_ref());
+```
+
+## Source Maps
+
+There is currently no first-class support for source maps for Rust / Wasm web apps. This, of course, is subject to change. If this is no longer true or if progress is made, please suggest a change!
+
+### Latest Info
+
+\[Dec 2019\] [Chrome DevTools update](https://developers.google.com/web/updates/2019/12/webassembly#the_future)
+
+> There is still quite a bit of work to do though. For example, on the tooling side, Emscripten \(Binaryen\) and wasm-pack \(wasm-bindgen\) donât support updating DWARF information on transformations they perform yet.
+
+\[2020\] [Rust Wasm debugging guide](https://rustwasm.github.io/book/reference/debugging.html#using-a-debugger)
+
+> Unfortunately, the debugging story for WebAssembly is still immature. On most Unix systems, [DWARF](http://dwarfstd.org/) is used to encode the information that a debugger needs to provide source-level inspection of a running program. There is an alternative format that encodes similar information on Windows. Currently, there is no equivalent for WebAssembly.
+
+\[2019\] [Rust Wasm roadmap](https://rustwasm.github.io/rfcs/007-2019-roadmap.html#debugging)
+
+> Debugging is tricky because much of the story is out of this working group's hands, and depends on both the WebAssembly standardization bodies and the folks implementing browser developer tools instead.
diff --git a/website/i18n/zh-Hans/docusaurus-plugin-content-docs/version-0.21/more/roadmap.mdx b/website/i18n/zh-Hans/docusaurus-plugin-content-docs/version-0.21/more/roadmap.mdx
new file mode 100644
index 00000000000..c8049887b38
--- /dev/null
+++ b/website/i18n/zh-Hans/docusaurus-plugin-content-docs/version-0.21/more/roadmap.mdx
@@ -0,0 +1,39 @@
+---
+description: Yew æ¡æ¶è§ååèœç路线åŸ
+---
+
+# 路线åŸ
+
+## `v1.0.0`
+
+### è§åäžçåèœ
+
+- æ è®° key çå衚项ïŒ[https://github.com/yewstack/yew/issues/479](https://github.com/yewstack/yew/issues/479)
+- è·¯ç±ïŒ[https://github.com/yewstack/yew_router](https://github.com/yewstack/yew_router)
+
+### ç产ç¯å¢åå€
+
+- æµè§åšå
Œå®¹æ§
+- æé« Yew æ¡æ¶çæµè¯èŠçç
+- å¢å æ§èœåºåæµè¯ïŒ[https://github.com/yewstack/yew/issues/5](https://github.com/yewstack/yew/issues/5)
+
+### æå
+
+- æ䜳å®è·µïŒ[https://yew.rs/optimizations](https://yew.rs/optimizations)
+- 端å°ç«¯æçš
+- Futures / 并å
+- CSS / æ ·åŒ
+- æµè¯
+- ç¶æ管ç
+
+## æªæ¥
+
+### æœåšåèœ
+
+- æå¡ç«¯æž²æïŒ[https://github.com/yewstack/yew/issues/41](https://github.com/yewstack/yew/issues/41)
+- ç»ä»¶åºïŒ[https://github.com/yewstrap/yewstrap](https://github.com/yewstrap/yewstrap)
+- 代ç åå²ïŒ[https://github.com/yewstack/yew/issues/599](https://github.com/yewstack/yew/issues/599)
+- å
讞äžåçèæ DOM å端ïŒ[https://github.com/yewstack/yew/issues/482](https://github.com/yewstack/yew/issues/482)
+- åæ ServicesïŒ[https://github.com/yewstack/yew/issues/364](https://github.com/yewstack/yew/issues/364)
+- æççå·¥å
·å
ïŒ[https://github.com/yewstack/yewtil](https://github.com/yewstack/yewtil)
+- HTML æš¡æ¿å€éæ¹æ¡ïŒ[https://github.com/yewstack/yew/issues/438](https://github.com/yewstack/yew/issues/438)
diff --git a/website/i18n/zh-Hans/docusaurus-plugin-content-docs/version-0.21/more/testing.mdx b/website/i18n/zh-Hans/docusaurus-plugin-content-docs/version-0.21/more/testing.mdx
new file mode 100644
index 00000000000..7773b3494e6
--- /dev/null
+++ b/website/i18n/zh-Hans/docusaurus-plugin-content-docs/version-0.21/more/testing.mdx
@@ -0,0 +1,11 @@
+---
+description: æµè¯äœ çåºçšçšåº
+---
+
+# æµè¯
+
+<TODO>
+
+## Rust WebDriving
+
+äœ¿çš Rust 以çŒçšæ¹åŒé©±åš UI éææµè¯ïŒ[fantoccini](https://crates.io/crates/fantoccini) æ¯äžäžªæšèçéæ©ãå®å
è®žäœ éè¿äœ¿çš CSS éæ©åšæ¥æ¥æŸç¹å®çå
çŽ ïŒç¶å对å®ä»¬æ§è¡ç¹å®çæäœïŒäŸåŠèŸå
¥ææ¬ïŒç¹å»æé®ïŒæçåŸ
ç¹å®æ¶éŽä»¥äœ¿å®¢æ·ç«¯ä»£ç æ§è¡ïŒäŸåŠçåŸ
äžäžªçœç»è¯·æ±å®æå¹¶å¯ŒèŽ UI æ¹åïŒïŒæ¥æµè¯äœ ççœç«ã
diff --git a/website/i18n/zh-Hant/docusaurus-plugin-content-docs/version-0.21.json b/website/i18n/zh-Hant/docusaurus-plugin-content-docs/version-0.21.json
new file mode 100644
index 00000000000..0ab4c0608c2
--- /dev/null
+++ b/website/i18n/zh-Hant/docusaurus-plugin-content-docs/version-0.21.json
@@ -0,0 +1,86 @@
+{
+ "version.label": {
+ "message": "0.21",
+ "description": "The label for version 0.21"
+ },
+ "sidebar.docs.category.Getting Started": {
+ "message": "Getting Started",
+ "description": "The label for category Getting Started in sidebar docs"
+ },
+ "sidebar.docs.category.Concepts": {
+ "message": "Concepts",
+ "description": "The label for category Concepts in sidebar docs"
+ },
+ "sidebar.docs.category.Concepts.link.generated-index.title": {
+ "message": "Yew concepts",
+ "description": "The generated-index page title for category Concepts in sidebar docs"
+ },
+ "sidebar.docs.category.Concepts.link.generated-index.description": {
+ "message": "Learn about the important Yew concepts!",
+ "description": "The generated-index page description for category Concepts in sidebar docs"
+ },
+ "sidebar.docs.category.Using Basic Web Technologies In Yew": {
+ "message": "Using Basic Web Technologies In Yew",
+ "description": "The label for category Using Basic Web Technologies In Yew in sidebar docs"
+ },
+ "sidebar.docs.category.Using Basic Web Technologies In Yew.link.generated-index.title": {
+ "message": "Yew's Take on Basic Web Technologies",
+ "description": "The generated-index page title for category Using Basic Web Technologies In Yew in sidebar docs"
+ },
+ "sidebar.docs.category.Using Basic Web Technologies In Yew.link.generated-index.description": {
+ "message": "Yew centrally operates on the idea of keeping everything that a reusable piece of UI may needin one place - rust files, while also keeping the underlying technology accessible where necessary. Explore further to fully grasp what we mean by these statements:",
+ "description": "The generated-index page description for category Using Basic Web Technologies In Yew in sidebar docs"
+ },
+ "sidebar.docs.category.Components": {
+ "message": "Components",
+ "description": "The label for category Components in sidebar docs"
+ },
+ "sidebar.docs.category.Hooks": {
+ "message": "Hooks",
+ "description": "The label for category Hooks in sidebar docs"
+ },
+ "sidebar.docs.category.HTML": {
+ "message": "HTML",
+ "description": "The label for category HTML in sidebar docs"
+ },
+ "sidebar.docs.category.Advanced topics": {
+ "message": "Advanced topics",
+ "description": "The label for category Advanced topics in sidebar docs"
+ },
+ "sidebar.docs.category.Advanced topics.link.generated-index.title": {
+ "message": "Advanced topics",
+ "description": "The generated-index page title for category Advanced topics in sidebar docs"
+ },
+ "sidebar.docs.category.Advanced topics.link.generated-index.description": {
+ "message": "Learn about the advanced topics and inner workings of Yew!",
+ "description": "The generated-index page description for category Advanced topics in sidebar docs"
+ },
+ "sidebar.docs.category.Struct Components": {
+ "message": "Struct Components",
+ "description": "The label for category Struct Components in sidebar docs"
+ },
+ "sidebar.docs.category.More": {
+ "message": "More",
+ "description": "The label for category More in sidebar docs"
+ },
+ "sidebar.docs.category.More.link.generated-index.title": {
+ "message": "Miscellaneous",
+ "description": "The generated-index page title for category More in sidebar docs"
+ },
+ "sidebar.docs.category.Migration guides": {
+ "message": "Migration guides",
+ "description": "The label for category Migration guides in sidebar docs"
+ },
+ "sidebar.docs.category.yew": {
+ "message": "yew",
+ "description": "The label for category yew in sidebar docs"
+ },
+ "sidebar.docs.category.yew-agent": {
+ "message": "yew-agent",
+ "description": "The label for category yew-agent in sidebar docs"
+ },
+ "sidebar.docs.category.yew-router": {
+ "message": "yew-router",
+ "description": "The label for category yew-router in sidebar docs"
+ }
+}
diff --git a/website/i18n/zh-Hant/docusaurus-plugin-content-docs/version-0.21/advanced-topics/how-it-works.mdx b/website/i18n/zh-Hant/docusaurus-plugin-content-docs/version-0.21/advanced-topics/how-it-works.mdx
new file mode 100644
index 00000000000..66ec109f8d7
--- /dev/null
+++ b/website/i18n/zh-Hant/docusaurus-plugin-content-docs/version-0.21/advanced-topics/how-it-works.mdx
@@ -0,0 +1,7 @@
+---
+description: éæŒæ¡æ¶çåºå±€çŽ°ç¯
+---
+
+# å
§éšåºå±€ç library
+
+å
件çåœåšæççæ
æ©è vdom diff æŒç®æ³
diff --git a/website/i18n/zh-Hant/docusaurus-plugin-content-docs/version-0.21/advanced-topics/optimizations.mdx b/website/i18n/zh-Hant/docusaurus-plugin-content-docs/version-0.21/advanced-topics/optimizations.mdx
new file mode 100644
index 00000000000..e5ee778da85
--- /dev/null
+++ b/website/i18n/zh-Hant/docusaurus-plugin-content-docs/version-0.21/advanced-topics/optimizations.mdx
@@ -0,0 +1,118 @@
+---
+description: å éäœ çå°æ¡
+---
+
+# åªåèæ䜳寊äŸ
+
+## neq_assign
+
+ç¶å
件åŸç¶å
件æ¥æ¶å°å±¬æ§æïŒ `change` çæ¹æ³å°±æ被åŒå«ãé€äºè®äœ æŽæ°å
件ççæ
ïŒä¹è®äœ åå³ïŒæ±ºå®å
件æ¯åŠèŠåšå±¬æ§æ¹è®æïŒéæ°æž²æèªå·±çåžæåŒ `ShouldRender` ã
+
+éæ°æž²ææ¯åŸæµªè²»æèœçïŒåå¯èœé¿å
é麌åãäžè¬äŸèªªïŒåªæåšå±¬æ§ççæ¹è®æïŒæéæ°æž²æãäžé¢ççšåŒç¢Œæ¯é«çŸéåååçäŸåïŒç¶å±¬æ§æ¹è®æïŒæåå³ `true`ïŒ
+
+```rust
+use yew::ShouldRender;
+
+#[derive(PartialEq)]
+struct ExampleProps;
+
+struct Example {
+ props: ExampleProps,
+};
+
+impl Example {
+ fn change(&mut self, props: ExampleProps) -> ShouldRender {
+ if self.props != props {
+ self.props = props;
+ true
+ } else {
+ false
+ }
+ }
+}
+```
+
+äœæåå¯ä»¥èµ°çæŽé ïŒéå
è¡çæš¡æ¿ïŒäœ¿çšäžå trait åäžå 寊äœäº `PartialEq` ç blanket implementation ïŒå¯ä»¥è¢«çž®çè³äžè¡ãè«åè[é裡](https://docs.rs/yewtil/*/yewtil/trait.NeqAssign.html)ïŒ `yewtil` ç crate 裡ç `NeqAssign` traitã
+
+## RC
+
+çºäºé¿å
éæ°æž²ææïŒè€è£œå€§éçè³æäŸå»ºç«å±¬æ§ïŒæåå¯ä»¥äœ¿çšæºæ
§æéäŸè®çšåŒåªè€è£œæéãåŠæäœ äœ¿çš `Rc<_>` äŸå°è£äœ ç屬æ§ïŒèäžæ¯æªå°è£çåŒïŒäœ å¯ä»¥äœ¿çš `Rc::make_mut`ïŒå»è€è£œèååäœ æ³èŠæ¹è®çè³æçå¯è®åèïŒéåå°äºå»¶é²è€è£œïŒçŽå°äœ éèŠæŽååå
件çè³æãééé¿å
è€è£œçŽå°æåŒæ¹è®ïŒåå
件å¯ä»¥åš `Component::change` æçµèä»çæ
äžç屬æ§çžååŒç屬æ§ïŒèäžé暣äžææä»»äœæèœææ¬ãåŠå€ïŒéåæ¹åŒïŒè³æå¿
é åšèåå
件æ¯èŒè被æçµä¹åïŒè¢«è€è£œé²ç¶å
件ç屬æ§äžã
+
+éååªåæé£äºç¡æ³ `Copy` çè³æåå¥ææçšãåŠæäœ å¯ä»¥èŒæè€è£œäœ çè³æïŒé£æè³ææŸé²æºæ
§æé裡é¢äŒŒä¹å°±æ²æé麌åŒåŸãå°æŒé£äºå
å«åŸå€åæ¯ `Vec` ã `HashMap` è `String` ççµæ§ïŒéååªåå°ä»åææŽåŒåŸã
+
+åŠæåå
件幟ä¹äžææŽæ°åŒïŒé£éååªåæææåŸå¥œïŒçè³åŠæç¶å
件ä¹åŸå°æŽæ°ïŒé£ææææŽå¥œãäžé¢çæ
æ³ïŒäœ¿åšçŽå
件äžäœ¿çš `Rc<_>s` æ¯äžåå°è£å±¬æ§åŒåŸå¥œçéžæã
+
+## View æ¹æ³
+
+åºæŒçšåŒç¢Œçå¯è®æ§ïŒéåžžæ寫æ¹æ³å
è£è€éç `html!`ïŒéæš£äœ å¯ä»¥é¿å
å·¢çç HTML é æéå€çåå³çž®æã
+
+## çŽå
件/åœæžåŒå
件
+
+çŽå
件 æ¯äžçš®äžææ¹è®èªå·±çæ
çå
件ïŒä»ååªå®çŽé¡¯ç€ºå
§å®¹ææ¯åæ®éå¯è®çå
件å³éèšæ¯ãä»åå view æ¹æ³äžåçå°æ¹åšæŒåå¯ä»¥åš `html!` å·šéäžäœ¿çšïŒèªæ³æåïŒ`` 䞊åå³äžå `Callback` ã
+
+### send_message
+
+ç¶çŸåšçè¿ŽåçµæåŸïŒåå
件çŒéèšæ¯ïŒäžŠäžéååŠäžåè¿Žåã
+
+### send_message_batch
+
+èš»åäžå callbackïŒç¶éå callback 被å·è¡æïŒéå callback æäžæ¬¡éåŸå€èšæ¯ãåŠææä»»äœäžåèšæ¯å°èŽå
件被éæ°æž²æïŒå
件æåšæææ¹æ¬¡éäŸçèšæ¯éœè¢«èçå®åŸïŒåéæ°æž²æã
+
+æäŸäžå `Fn(IN) -> COMP::Message` 䞊åå³äžå `Callback` ã
+
+## Callbacks
+
+_ïŒä»å¯èœéèŠäžåçšç«ççé äŸä»çŽ¹ïŒ_
+
+Callbacks 被çšäŸç¶äœ services ã agents èç¶å
ä»¶è· Yew æºéçæ¹åŒãä»ååªæ¯äžå被 `Rc` å
裹èç `Fn`ïŒå¥œè®ä»åå¯ä»¥è¢«è€è£œã
+
+ä»åæäžå `emit` æ¹æ³ïŒéåæ¹æ³æ¿ä»åç `` åå¥ç¶äœåæžïŒäžŠäžèœæä»äœçºç®çå°æææçèšæ¯ãåŠæäžååŸç¶å
件äŸç callback 被æäŸäœçºåå
件ç屬æ§ïŒåå
件å¯ä»¥åšä»ç update çåœåšæäžïŒåŒå« callback äžç emit 以å³éèšæ¯å絊ç¶å
件ã åš `html!` å·šéäžçéå
èæ¹æ³åŠæ被ç¶äœå±¬æ§å³éïŒæ被èªåèœçº Callbacksã
diff --git a/website/i18n/zh-Hant/docusaurus-plugin-content-docs/version-0.21/advanced-topics/struct-components/lifecycle.mdx b/website/i18n/zh-Hant/docusaurus-plugin-content-docs/version-0.21/advanced-topics/struct-components/lifecycle.mdx
new file mode 100644
index 00000000000..295cf053a01
--- /dev/null
+++ b/website/i18n/zh-Hant/docusaurus-plugin-content-docs/version-0.21/advanced-topics/struct-components/lifecycle.mdx
@@ -0,0 +1,175 @@
+---
+description: å
件ïŒä»¥åçåœåšæé€å
+---
+
+# å
件
+
+## ä»éºŒæ¯å
件ïŒ
+
+å
ä»¶æ¯ Yew çåºç³ãä»å管çèªå·±ççæ
ïŒå¯ä»¥æž²æèªå·±æçº DOMãå
件å¯ä»¥éé寊äœïŒæè¿°å
件çåœåšæç `Component` trait äŸå»ºç«ã
+
+## çåœåšæ
+
+:::note
+`æ¡è¿äŸè²¢ç»æåçæ件ïŒ` [Add a diagram of the component lifecycle](https://github.com/yewstack/docs/issues/22)
+:::
+
+## çåœåšæçæ¹æ³
+
+### Create
+
+ç¶äžåå
件被建ç«ïŒä»ææ¥æ¶åŸç¶å
件ïŒä¹å°±æ¯ `ComponentLink` ïŒå³äžäŸç屬æ§ã éäºå±¬æ§çšäŸåå§åå
件ççæ
ïŒæ€å€ïŒãlinkãå¯ä»¥çšäŸèš»åå調åœåŒæå³èšæ¯çµŠå
件ã
+
+éåžžïŒäœ çå
件 struct æå²å props è linkïŒå°±åäžé¢çäŸåïŒ
+
+```rust
+pub struct MyComponent {
+ props: Props,
+ link: ComponentLink,
+}
+
+impl Component for MyComponent {
+ type Properties = Props;
+ // ...
+
+ fn create(props: Self::Properties, link: ComponentLink) -> Self {
+ MyComponent { props, link }
+ }
+
+ // ...
+}
+```
+
+### View
+
+å
件æåš `view()` æ¹æ³äžå®£åäœå±ãYew æäŸ `html!` å·šéäŸå®£å HTML å SVG ççµé»ïŒå
å«ä»åçç£èœäºä»¶èåçµé»ãéåå·šéæ®æŒåæ¯ React ç JSX çè§è²ïŒäœæ¯æ¯äœ¿çš Rust çè¡šéåŒïŒèäžæ¯ JavaScript çã
+
+```rust
+impl Component for MyComponent {
+ // ...
+
+ fn view(&self) -> Html {
+ let onclick = self.link.callback(|_| Msg::Click);
+ html! {
+ { self.props.button_text }
+ }
+ }
+}
+```
+
+æŽå€äœ¿çšçŽ°ç¯ïŒè«åè [`html!` æåž](concepts/html/introduction.mdx)ã
+
+### Rendered
+
+`rendered()` çåœåšæçæ¹æ³æïŒåš `view()` èçå®äžŠäž Yew æž²æå®äœ çå
件ä¹åŸïŒèç芜åšå·æ°é é¢ä¹åïŒè¢«åŒå«ãäžåå
件å¯èœåžæ寊äœéåæ¹æ³ïŒå»å·è¡åªèœåšå
件被枲æå®å
çŽ æèœåçäºæ
ã äœ å¯ä»¥éé `first_render` è®æžäŸç¢ºèªéåå
件æ¯äžæ¯ç¬¬äžæ¬¡è¢«æž²æã
+
+```rust
+use stdweb::web::html_element::InputElement;
+use stdweb::web::IHtmlElement;
+use yew::prelude::*;
+
+pub struct MyComponent {
+ node_ref: NodeRef,
+}
+
+impl Component for MyComponent {
+ // ...
+
+ fn view(&self) -> Html {
+ html! {
+ () {
+ input.focus();
+ }
+ }
+ }
+}
+```
+
+:::note
+泚æïŒéåçåœåšææ¹æ³ïŒäžæ¯äžå®èŠè¢«å¯ŠäœïŒé èšçè¡çºæ¯äžåä»»äœäºæ
ã
+:::
+
+### Update
+
+å
件æ¯å¯åæ
æŽæ°äžå¯ä»¥èš»åæ¥æ¶éåæ¥çèšæ¯ã `update()` çåœåšææ¹æ³æ被æ¯åèšæ¯åŒå«ãä»åºæŒèšæ¯æ¯ä»éºŒïŒäŸå
èš±å
件æŽæ°èªå·±ïŒäžæ決å®æ¯åŠéèŠéæ°æž²æã èšæ¯å¯ä»¥è¢« HTML å
çŽ çç£èœåšè§žçŒïŒæ被åå
件ãAgentsãServices æ Futures å³éã
+
+`update()` æçšç¯äŸïŒ
+
+```rust
+pub enum Msg {
+ SetInputEnabled(bool)
+}
+
+impl Component for MyComponent {
+ type Message = Msg;
+
+ // ...
+
+ fn update(&mut self, msg: Self::Message) -> ShouldRender {
+ match msg {
+ Msg::SetInputEnabled(enabled) => {
+ if self.input_enabled != enabled {
+ self.input_enabled = enabled;
+ true // éæ°æž²æ
+ } else {
+ false
+ }
+ }
+ }
+ }
+}
+```
+
+### Change
+
+å
件å¯èœæ被ä»çç¶å
件éæ°æž²æãç¶ä»è¢«ç¶å
件éæ°æž²ææïŒä»ææ¶å°æ°ç屬æ§ïŒç¶åŸæ±ºå®èŠäžèŠåæž²æäžæ¬¡ã éèšèšæ¯è®ç¶å
件éé䟿æŒè·åå
件æºéã
+
+äžåç°¡å®ç寊äœæ¹åŒåïŒ
+
+```rust
+impl Component for MyComponent {
+ // ...
+
+ fn change(&mut self, props: Self::Properties) -> ShouldRender {
+ if self.props != props {
+ self.props = props;
+ true
+ } else {
+ false
+ }
+ }
+}
+```
+
+### Destroy
+
+ç¶å
ä»¶åŸ DOM äžè¢«è§£é€æèŒïŒYew æåŒå« `destroy()` çåœåšææ¹æ³ä»¥æäŸä»»äœéèŠæž
ççæäœãéåæ¹æ³æ¯äžäžå®èŠè¢«å¯ŠäœçïŒé èšäžæåèšä»»äœäºã
+
+## çžéçåå¥
+
+`Component` trait æå
©åçžéçåå¥ïŒ`Message` è `Properties`ã
+
+```rust
+impl Component for MyComponent {
+ type Message = Msg;
+ type Properties = Props;
+
+ // ...
+}
+```
+
+`Message` è² è²¬ååŒå暣çèšæ¯ïŒä»å¯èœè¢«å
件èçå»è§žçŒå皮圱é¿ãèäŸäŸèªªïŒäœ å¯èœæäžå `Click` çèšæ¯ïŒä»æè§žçŒ API è«æ±ïŒææ¯åæ UI å
件ç暣è²ãäžé¢æ¯äžååžžèŠç寊äœïŒåšäœ çå
件暡çµäžïŒåµå»ºäžåå«äœ `Msg` ç enumïŒç¶åŸæä»ç¶äœå
件裡ç Message åå¥ãéåžž message æ瞮寫æ msgã
+
+```rust
+enum Msg {
+ Click,
+}
+```
+
+`Properties` 代衚èŠåŸç¶å¡ä»¶å³éå°åå
件çè³èšãéååå¥å¿
é å¯Šäœ `Properties` trait ïŒéåžžæ deriving ä»ïŒäžŠäžå¯ä»¥æ±ºå®æå屬æ§æ¯å¿
èŠç屬æ§ïŒææ¯å¯éžç屬æ§ãéååå¥æåšåµå»ºå
件çæåïŒææ¯æŽæ°å
件çæå被䜿çšå°ãåžžèŠç寊äœæåšäœ çå
件暡çµäžïŒå»ºç«äžåå«äœ `Props` ç structïŒç¶åŸæä»ç¶äœå
件ç`Properties` åå¥ãéåžž properties æ瞮寫æ propsãå çºå±¬æ§æ¯åŸç¶å件被å³äžäŸçïŒæ以æçšçšåŒäžçæ ¹å
件ç `Properties` ååäžéœæ¯ `()`ãåŠæäœ åžæäœ çæ ¹å
件æç¹å®ç屬æ§ïŒå¯ä»¥äœ¿çš `App::mount_with_props` çæ¹æ³ã
diff --git a/website/i18n/zh-Hant/docusaurus-plugin-content-docs/version-0.21/advanced-topics/struct-components/properties.mdx b/website/i18n/zh-Hant/docusaurus-plugin-content-docs/version-0.21/advanced-topics/struct-components/properties.mdx
new file mode 100644
index 00000000000..60c7ca69786
--- /dev/null
+++ b/website/i18n/zh-Hant/docusaurus-plugin-content-docs/version-0.21/advanced-topics/struct-components/properties.mdx
@@ -0,0 +1,70 @@
+---
+description: ç¶å
件èåå
件çæºéæ©æš
+---
+
+# Properties
+
+屬æ§è®åå
件èç¶å
件å¯ä»¥äºçžæºéã
+
+## Derive macro
+
+äžèŠåè©Šèªå·±å¯Šäœ `Properties`ïŒèæ¯çš`#[derive(Properties)]`derive ä»ã
+
+### å¿
å¡«çæ¬äœ
+
+é èšææåš `Properties` struct 裡çæ¬äœéœæ¯å¿
å¡«çãç¶å¿
å¡«çæ¬äœæ²æåŒïŒèå
ä»¶åš `html!` å·šéäžå被建ç«ïŒç·šè¯åšå°±æå ±é¯ãåŠæåžææ¬äœæ¯å¯éžçïŒå¯ä»¥äœ¿çš `#[prop_or_default]` äŸè®è©²æ¬äœæé èšåŒãåŠæåžææ¬äœé èšç¹å®åŒïŒå¯ä»¥äœ¿çš `#[prop_or_else(value)]` ïŒè£¡é¢ç value å°±ææ¯éåæ¬äœçé èšåŒãèäŸäŸèªªïŒåžæé èšåŒæ¯ `true`å¯ä»¥åšæ¬äœå®£åäžé¢é暣寫 `#[prop_or_else(true)]`. éåžžå¯éžç屬æ§ïŒæçš `Option` ïŒäžé èšåŒçº`None`ã
+
+### PartialEq
+
+åŠæå¯ä»¥ïŒæ奜åšäœ ç屬æ§äžé¢ derive `PartialEq` ãä»å¯ä»¥é¿å
ç«é¢å€é€çæž²æïŒæŽçŽ°ç¯çå
§å®¹è«åèïŒ**åªåèæ䜳寊äŸ**çåå¡ã
+
+## 屬æ§çèšæ¶é«èé床çéé·
+
+åš `Component::view`,裡ïŒäœ å¯ä»¥æ¿å°å
件çæ
çåèïŒäžçšä»äŸå»ºç« `Html` ãäœæ¯å±¬æ§æ¯ææææ¬çãé代衚èçºäºå»ºç«å±¬æ§ïŒäžŠäžå°ä»åå³é絊åå
件ïŒæåå¿
é ååŸè¢« `view` æ¹æ³æ¿èµ°çæææ¬ã ç¶å°åèå³çµŠå
件æïŒå¯ä»¥ééé±åŒçè€è£œäŸåå°åŸå°æææ¬ã
+
+éæå³èïŒæ¯åå
件ïŒéœæåŸç¶å
件å³éäžäŸççšæççæ
è€æ¬ïŒäžæ¯ç¶äœ éæ°æž²æäžæ¬¡å
件ïŒè¢«éæ°æž²æçå
件çææçåå
件ç屬æ§å°±æ被éæ°è€è£œäžæ¬¡ã
+
+代衚åŠæäœ èŠåšå±¬æ§äžå³é*倧é*çè³æïŒå€§æŒ 10 KB çåäž²ä¹é¡çïŒïŒäœ å¯èœéèŠèæ
®å°äœ çåå
件è®æäžååå³ `Html` çæ¹æ³ïŒè®ç¶å
件åŒå«ïŒä»¥é¿å
è³æ被è€è£œã
+
+åŠæäœ äžéèŠæ¹è®å³äžå»çè³æïŒäœ å¯ä»¥çš `Rc` å°è³æå
è£èµ·äŸïŒé暣就æåªè€è£œåèçæéïŒèäžæ¯è³ææ¬èº«ã
+
+## ç¯äŸ
+
+```rust
+use std::rc::Rc;
+use yew::Properties;
+
+#[derive(Clone, PartialEq)]
+pub enum LinkColor {
+ Blue,
+ Red,
+ Green,
+ Black,
+ Purple,
+}
+
+impl Default for LinkColor {
+ fn default() -> Self {
+ // é€éææå®ïŒåŠåé èšæ¯èè²
+ LinkColor::Blue
+ }
+}
+
+#[derive(Properties, Clone, PartialEq)]
+pub struct LinkProps {
+ /// é£çµå¿
é èŠæäžåç®æš
+ href: String,
+ /// åŠæé£çµæååŸå€§ïŒè€è£œåäž²çåèå¯ä»¥æžå°èšæ¶é«çéé·
+ /// äœé€éæèœå·²ç¶æçºåŽéçåé¡ïŒåŠåéåžžäžå»ºè°é麌å
+ text: Rc,
+ /// é£çµçé¡è²
+ #[prop_or_default]
+ color: LinkColor,
+ /// åŠæçº NoneïŒé£ view æ¹æ³å°äžææå® size
+ #[prop_or_default]
+ size: Option,
+ /// ç¶æ²ææå® activeïŒé èšçº true
+ #[prop_or(true)]
+ active: bool,
+}
+```
diff --git a/website/i18n/zh-Hant/docusaurus-plugin-content-docs/version-0.21/advanced-topics/struct-components/refs.mdx b/website/i18n/zh-Hant/docusaurus-plugin-content-docs/version-0.21/advanced-topics/struct-components/refs.mdx
new file mode 100644
index 00000000000..ba1342891dc
--- /dev/null
+++ b/website/i18n/zh-Hant/docusaurus-plugin-content-docs/version-0.21/advanced-topics/struct-components/refs.mdx
@@ -0,0 +1,26 @@
+---
+description: å€åž¶ DOM çåå
+---
+
+# Refs
+
+## Refs
+
+`ref` ééµåå¯ä»¥è¢«äœ¿çšåšä»»äœ HTML çå
çŽ ææ¯å
件ïŒçšäŸåŸå°é£åç©ä»¶éå ç DOM `Element`ãéåå¯ä»¥åš view çåœåšææ¹æ³ä¹å€ïŒæ¹è® DOMã
+
+å°æŒèŠåå canvas å
çŽ ïŒæ滟åå°é é¢äžåçåå¡ïŒåŸæ幫å©ã
+
+èªæ³å¯ä»¥é暣䜿çšïŒ
+
+```rust
+// 建ç«
+self.node_ref = NodeRef::default();
+
+// åš view 裡
+html! {
+
+}
+
+// æŽæ°
+let has_attributes = self.node_ref.cast::().unwrap().has_attributes();
+```
diff --git a/website/i18n/zh-Hant/docusaurus-plugin-content-docs/version-0.21/concepts/agents.mdx b/website/i18n/zh-Hant/docusaurus-plugin-content-docs/version-0.21/concepts/agents.mdx
new file mode 100644
index 00000000000..dfcb5a7eee6
--- /dev/null
+++ b/website/i18n/zh-Hant/docusaurus-plugin-content-docs/version-0.21/concepts/agents.mdx
@@ -0,0 +1,41 @@
+---
+description: Yew ç Actor 系統
+---
+
+# Agents
+
+Agents é¡äŒŒæŒ Angular ç [Services](https://angular.io/guide/architecture-services) ïŒäœæ²æäŸè³Žæ³šå
¥ïŒèäžæäŸ Tew äžå [Actor Model](https://en.wikipedia.org/wiki/Actor_model). Agents å¯ä»¥çšäŸäœçºå
©åå
件éçè·¯ç±èšæ¯ïŒèäžèä»ååšå
件éçå±€çŽéä¿çšç«åºäŸïŒæ以ä»ä¹å¯ä»¥çšäŸäœçºäžåå
šåççæ
ïŒçè³å¯ä»¥çšäŸæžèŒçšäŸæž²æ UI ç«é¢çäž»å·è¡ç·ç倧ééç®ä»»åã æªäŸïŒæåéèŠåèŠè® agents å¹«å¿ Yew å°æ¡å¯ä»¥è·šé ç±€æºéã
+
+çºäºè® agents å¯ä»¥äžŠè¡ïŒ Yew 䜿çšäº [web-workers](https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Using_web_workers)ã
+
+## çåœåšæ
+
+
+
+## Agents çåå¥
+
+#### ç¯å
+
+- Job - åš UI å·è¡ç·äžïŒçºæ¯äžå bridgeïŒæ°å¢äžå agentãéå°æŒå°ãå
±äº«äœçšç«çè¡çºã移åºå
件åŸæçšãïŒåŸ
é©èïŒç¶å·¥äœçµæïŒagent ææ¶å€±ã
+- Context - Bridges æ建ç«äžŠé£æ¥äž UI å·è¡ç·äžç agentãéå¯ä»¥çšäŸå調å
件èå
¶ä» agent ä¹éççæ
ãç¶æ²æä»»äœ bridge é£æ¥äžéå agentïŒéå agnet å°±ææ¶å€±ã
+- Private - è Job çžåïŒäœæ¯æ¯åšèªå·±ç web worker äžå·è¡çã
+- Public - è Context çžåïŒäœæ¯æ¯åšèªå·±ç web worker äžå·è¡çã
+- Global ïŒç·šå¯«äžïŒ
+
+## åš Agents èå
件ä¹éæºé
+
+### Bridges
+
+bridge å
èš± agent èå
件é²è¡éåçæºéãbridge ä¹å
èš± agents ä¹éäºçžæºéã
+
+### Dispatchers
+
+dispatcher å
èš±å
件è agnet é²è¡å®åçæºéãdispatcher ä¹å
èš±å
件å agnet çŒéèšæ¯ã
+
+## éé·
+
+Agents ééäœ¿çš [bincode](https://github.com/servo/bincode) åºååä»åçèšæ¯ïŒäŸæºéãæ以æ¯èµ·åŒå«æ¹æ³ïŒä»çæèœè±è²»æ¯èŒé«ãé€éèšç®çææ¬ïŒææ¯è·šå
件èšç®çææ¬ïŒæ¯å³éèšæ¯çææ¬èŠé«ïŒåŠå agnet çæ¹æ³åéåªæå
å«å®çŽçé茯éç®ã
+
+## 延䌞é±è®
+
+- [web_worker_fib](https://github.com/yewstack/yew/tree/master/examples/web_worker_fib) ç¯äŸé¡¯ç€ºäºåŠäœåš agnets ä¹éæºéã
diff --git a/website/i18n/zh-Hant/docusaurus-plugin-content-docs/version-0.21/concepts/html/components.mdx b/website/i18n/zh-Hant/docusaurus-plugin-content-docs/version-0.21/concepts/html/components.mdx
new file mode 100644
index 00000000000..7fd0d13177b
--- /dev/null
+++ b/website/i18n/zh-Hant/docusaurus-plugin-content-docs/version-0.21/concepts/html/components.mdx
@@ -0,0 +1,114 @@
+---
+description: 建ç«è€éå
件局çŽèäœå±
+---
+
+# Components
+
+## åºæ¬
+
+ä»»äœå¯Šäœ `Component` çåå¥ïŒéœå¯ä»¥åš `html!` çå·šéäžäœ¿çšïŒ
+
+```rust
+html!{
+ <>
+ // æ²æ屬æ§
+
+ { "Hi" }
+ { "Hello" }
+
+}
+```
+
+{% endcode %}
+
+{% code title="container.rs" %}
+
+```rust
+pub struct Container(Props);
+
+#[derive(Properties)]
+pub struct Props {
+ pub children: Children,
+}
+
+impl Component for Container {
+ type Properties = Props;
+
+ // ...
+
+ fn view(&self) -> Html {
+ html! {
+
+ { self.0.children.clone() }
+
+ }
+ }
+}
+```
+
+{% endcode %}
+
+## æå®åçµé»çåå¥
+
+åŠææå®äºåçµé»çåå¥ïŒå°±å¯ä»¥äœ¿çšææ¹è®å·¢çå
件ç屬æ§ãäžé¢çç¯äŸå°±æ¯ïŒ `List` å
件å
裹 `ListItem` å
件ãåŠäžåç寊çç¯äŸæ¯ `yew-router` çåå§ç¢ŒãéæäžåæŽé²éçç¯äŸïŒè«åè Yew GitHub repo äžç `nested-list` ç¯äŸã
+
+{% code title="parent.rs" %}
+
+```rust
+html! {
+
+
+}
+```
+
+{% endcode %}
+
+{% code title="list.rs" %}
+
+```rust
+pub struct List(Props);
+
+#[derive(Properties)]
+pub struct Props {
+ pub children: ChildrenWithProps,
+}
+
+impl Component for List {
+ type Properties = Props;
+
+ // ...
+
+ fn view(&self) -> Html {
+ html!{{
+ for self.0.children.iter().map(|mut item| {
+ item.props.value = format!("item-{}", item.props.value);
+ item
+ })
+ }}
+ }
+}
+```
+
+{% endcode %}
diff --git a/website/i18n/zh-Hant/docusaurus-plugin-content-docs/version-0.21/concepts/html/elements.mdx b/website/i18n/zh-Hant/docusaurus-plugin-content-docs/version-0.21/concepts/html/elements.mdx
new file mode 100644
index 00000000000..e597260dce7
--- /dev/null
+++ b/website/i18n/zh-Hant/docusaurus-plugin-content-docs/version-0.21/concepts/html/elements.mdx
@@ -0,0 +1,264 @@
+---
+description: HTML è SVG å
件éœæ¯æŽ
+---
+
+# Elements
+
+## æšç±€çµæ§
+
+å
件æšç±€éœå¿
é èŠæ¯èªå°éçæšç±€ `<... />` ææ¯è·éåæšç±€å°æçééæšç±€ã
+
+
+
+
+```rust
+html! {
+
+}
+```
+
+
+
+```rust
+html! {
+ // <- 猺å°ééæšç±€
+}
+```
+
+
+
+```rust
+html! {
+
+}
+```
+
+
+
+```rust
+html! {
+
// <- 猺å°èªå°éæšç±€èªæ³
+}
+```
+
+
+
+:::note
+çºäºæ¹äŸ¿èµ·èŠïŒéåžžéèŠééæšç±€çå
件ïŒä¹éœå¯ä»¥çšèªå°éæšç±€è¡šç€ºãäŸåŠïŒå¯« `html! {
}` æ¯åæ³çã
+:::
+
+## åçµé»
+
+èŒé¬å¯«åºè€éå·¢çç HTML è SVG æ¶æ§ïŒ
+
+
+
+
+```rust
+html! {
+
+}
+```
+
+
+
+```rust
+html! {
+
+
+
+
+
+
+
+
+}
+```
+
+
+
+## Classes
+
+äœ åŸå€æ¹äŸ¿çéžé
å¯ä»¥å¯«å
件裡ç classïŒ
+
+
+
+
+```rust
+html! {
+
+}
+```
+
+
+
+```rust
+html! {
+
+}
+```
+
+
+
+```rust
+html! {
+
+}
+```
+
+
+
+```rust
+html! {
+
+}
+```
+
+
+
+```rust
+html! {
+
+}
+```
+
+
+
+```rust
+html! {
+
+}
+```
+
+
+
+## ç£èœ
+
+ç£èœåšç屬æ§å¿
é èŠå³å
¥äžå `Callback` ïŒä»å°è£äºéå
ãcallback çå
§å®¹å決æŒïŒç¶è§žçŒç£èœäºä»¶æïŒäœ åžææçšçšåŒæä»éºŒåæïŒ
+
+
+
+
+```rust
+struct MyComponent {
+ link: ComponentLink
,
+}
+
+enum Msg {
+ Click,
+}
+
+impl Component for MyComponent {
+ type Message = Msg;
+ type Properties = ();
+
+ fn create(_: Self::Properties, link: ComponentLink) -> Self {
+ MyComponent { link }
+ }
+
+ fn update(&mut self, msg: Self::Message) -> ShouldRender {
+ match msg {
+ Msg::Click => {
+ // èçé»æäºä»¶
+ }
+ }
+ }
+
+ fn view(&self) -> Html {
+ // åŸäžåå
件é£çµäžïŒå»ºç«äžå callback 䞊åšå
件äžèçä»
+ let click_callback = self.link.callback(|_: ClickEvent| Msg::Click);
+ html! {
+
+ { "Click me!" }
+
+ }
+ }
+}
+```
+
+
+
+```rust
+struct MyComponent {
+ worker: Dispatcher,
+}
+
+impl Component for MyComponent {
+ type Message = ();
+ type Properties = ();
+
+ fn create(_: Self::Properties, _: ComponentLink) -> Self {
+ MyComponent {
+ worker: MyWorker::dispatcher()
+ }
+ }
+
+ fn update(&mut self, _: Self::Message) -> ShouldRender {
+ false
+ }
+
+ fn view(&self) -> Html {
+ // åŸäžå worker äžå»ºç«äžå callbackïŒäžŠåšå
¶ä»ç context äžèçä»
+ let click_callback = self.worker.callback(|_: ClickEvent| WorkerMsg::Process);
+ html! {
+
+ { "Click me!" }
+
+ }
+ }
+}
+```
+
+
+
+```rust
+struct MyComponent;
+
+impl Component for MyComponent {
+ type Message = ();
+ type Properties = ();
+
+ fn create(_: Self::Properties, _: ComponentLink) -> Self {
+ MyComponent
+ }
+
+ fn update(&mut self, _: Self::Message) -> ShouldRender {
+ false
+ }
+
+ fn view(&self) -> Html {
+ // 建ç«äžåèšæç callback
+ let click_callback = Callback::from(|| {
+ ConsoleService::log("clicked!");
+ });
+
+ html! {
+
+ { "Click me!" }
+
+ }
+ }
+}
+```
+
+
diff --git a/website/i18n/zh-Hant/docusaurus-plugin-content-docs/version-0.21/concepts/html/introduction.mdx b/website/i18n/zh-Hant/docusaurus-plugin-content-docs/version-0.21/concepts/html/introduction.mdx
new file mode 100644
index 00000000000..002042e8361
--- /dev/null
+++ b/website/i18n/zh-Hant/docusaurus-plugin-content-docs/version-0.21/concepts/html/introduction.mdx
@@ -0,0 +1,14 @@
+---
+description: çšäŸç¢ç HTML è SVG çå·šé
+slug: /concepts/html
+---
+
+# äœ¿çš html!
+
+`html!` å·šéå¯ä»¥è®äœ çš HTML è SVG 寫å
件ãåŠæäœ å¯«é React ç JSXïŒäžçš® JavaScript çæŽå±ïŒå¯ä»¥è®äœ åš JavaScript äžå¯« HTMLïŒïŒæ該æ芺åŸéå
©è
ååçžäŒŒã
+
+**éèŠæ瀺**
+
+1. åš `html!` 裡ïŒåªèœæäžåæ ¹çµé»ïŒäœäœ å¯ä»¥çš [Fragment ææ¯ Iterators](https://yew.rs/concepts/html/lists) äŸç¹ééåéå¶ãïŒ
+2. 空ç `html! {}` æ¯åæ³çïŒäžä»äžææž²æä»»äœæ±è¥¿åšç«é¢äž
+3. åäž²å¿
é 被éåŒèè倧æ¬èå
裹äœïŒ`html! { "Hello, World" }`
diff --git a/website/i18n/zh-Hant/docusaurus-plugin-content-docs/version-0.21/concepts/html/lists.mdx b/website/i18n/zh-Hant/docusaurus-plugin-content-docs/version-0.21/concepts/html/lists.mdx
new file mode 100644
index 00000000000..a561bfa20a6
--- /dev/null
+++ b/website/i18n/zh-Hant/docusaurus-plugin-content-docs/version-0.21/concepts/html/lists.mdx
@@ -0,0 +1,57 @@
+# Lists
+
+## Fragments
+
+`html!` å·šé裡å¿
é åªæäžåæ ¹çµé»ãçºäºå¯ä»¥ç¹ééåéå¶ïŒå°å
©å以äžççµé»ïŒçšç©ºçæšç±€å
裹起äŸïŒæ¯åæ³çïŒ
+
+
+
+
+```rust
+html! {
+ <>
+
+
+
+}
+```
+
+
+
+```rust
+/* error: only one root html element allowed */
+
+html! {
+
+
+}
+```
+
+
+
+## Iterators
+
+Yew æ¯æŽå
©çš®äžåçæ¹åŒïŒåŸ iterator å»ºæ§ htmlïŒ
+
+
+
+
+```rust
+html! {
+
+ { self.props.items.iter().map(renderItem).collect::() }
+
+}
+```
+
+
+
+```rust
+html! {
+
+ { for self.props.items.iter().map(renderItem) }
+
+}
+```
+
+
diff --git a/website/i18n/zh-Hant/docusaurus-plugin-content-docs/version-0.21/concepts/html/literals-and-expressions.mdx b/website/i18n/zh-Hant/docusaurus-plugin-content-docs/version-0.21/concepts/html/literals-and-expressions.mdx
new file mode 100644
index 00000000000..5c49ee75d6f
--- /dev/null
+++ b/website/i18n/zh-Hant/docusaurus-plugin-content-docs/version-0.21/concepts/html/literals-and-expressions.mdx
@@ -0,0 +1,57 @@
+# Literals & Expressions
+
+## Literals
+
+åŠæè¡šéåŒäžçåå¥æå¯Šäœ `Display` ïŒä»åæ被èœææåäž²ïŒäžŠåš DOM äžäœçº [Text](https://developer.mozilla.org/en-US/docs/Web/API/Text) ïŒæåïŒçµé»ã
+
+ææçæåéœå¿
é çš `{}` æ¬èµ·äŸïŒå çºæåæ¯è¢«ç¶äœè¡šéåŒèçãéæ¯ HTML èªæ³è Yew çèªæ³äžïŒæ倧çäžåã
+
+```rust
+let text = "lorem ipsum";
+html!{
+ <>
+ {text}
+ {"dolor sit"}
+ {42}
+
+}
+```
+
+## Expressions
+
+åªèŠå¯ä»¥åå³ `Html`ïŒäœ éœå¯ä»¥åšäœ ç HTML äžçš `{}` æå
¥è¡šéåŒã
+
+```rust
+html! {
+
+ {
+ if show_link {
+ html! {
+
{"Link"}
+ }
+ } else {
+ html! {}
+ }
+ }
+
{"Link"}
+ }
+ } else {
+ html! {}
+ }
+};
+
+html! {
+ {maybe_display_link()}
+}
+```
diff --git a/website/i18n/zh-Hant/docusaurus-plugin-content-docs/version-0.21/concepts/router.mdx b/website/i18n/zh-Hant/docusaurus-plugin-content-docs/version-0.21/concepts/router.mdx
new file mode 100644
index 00000000000..660558f9e84
--- /dev/null
+++ b/website/i18n/zh-Hant/docusaurus-plugin-content-docs/version-0.21/concepts/router.mdx
@@ -0,0 +1,81 @@
+---
+description: Yew çå®æ¹è·¯ç±åš
+---
+
+# è·¯ç±åš
+
+[https://crates.io/crates/yew-router](https://crates.io/crates/yew-router)
+
+å®é æçšçšåŒïŒSPAïŒäžçè·¯ç±åšïŒæäŸæ URL äŸé¡¯ç€ºäžåçç«é¢ãç¶é£çµè¢«é»æåŸïŒè·¯ç±åšæ²æé èšèŠè«æ±é 端çè³æºïŒ èæ¯å° URL èšå®å°åæçšçšåŒäžçææè·¯ç±ãè·¯ç±åšæåµæž¬ URL 被æŽæ¹ïŒç¶åŸæ±ºå®èŠæž²æä»éºŒç«é¢ã
+
+## æ žå¿å
çŽ
+
+### Route
+
+å
å«äžååäž²ïŒéååäž²æ¯ç¶²åååŸçé£äž²æåïŒäžŠäžå¯ä»¥éžæèŠäžèŠå°çæ
åå
¥ history apiã
+
+### RouteService
+
+èç芜åšæºéïŒååè·¯ç±ã
+
+### RouteAgent
+
+ææ RouteService 䞊äžå調èæŽæ°ïŒåŸæçšçšåŒé茯é æçïŒææ¯åŸç芜åšäºä»¶äžé æçïŒè·¯ç±çæ¹è®ã
+
+### Switch
+
+`Switch` trait çšæŒè® Route åšå¯Šäœç `trait` ä¹éäŸåèœæã
+
+### Router
+
+Router å
件æè `RouteAgent` æºéïŒäžŠäžèªå解æåŸ agent å° switch ç RoutesïŒRoutes æåš render ç 屬æ§äžè¢«æé²ïŒéå屬æ§ææ±ºå® switch ççµæåŠäœè¢«èœææ `Html`ã
+
+## åŠäœäœ¿çšè·¯ç±åš
+
+éŠå
ïŒäœ èŠå»ºç«äžåä»£è¡šäœ çæçšçšåŒææçæ
çåå¥ãç¹å¥æ³šæïŒéååå¥å¯ä»¥æ¯ enumãstruct éœå¯ä»¥ïŒèäžäœ å¯ä»¥ééåšè£¡é¢å¯Šäœ `Switch` äŸå·¢çå
¶ä»é
ç®
+
+ç¶åŸäœ å¿
é çºäœ çåå¥ derive `Switch` ãå° enums äŸèªªïŒæ¯äžåè®æžéœå¿
é 宣å `#[to = "/some/route"]`ïŒææ¯åŠæäœ çš structïŒé£å°±èŠ struct çå€éšå®£åã
+
+```rust
+#[derive(Switch)]
+enum AppRoute {
+ #[to="/login"]
+ Login,
+ #[to="/register"]
+ Register,
+ #[to="/delete_account"]
+ Delete,
+ #[to="/posts/{id}"]
+ ViewPost(i32),
+ #[to="/posts/view"]
+ ViewPosts,
+ #[to="/"]
+ Home
+}
+```
+
+ç¹å¥æ³šæïŒéåå·šéæè©ŠèäŸåºé
å°æ¯åè®æžïŒæ以åŠææä»»äœè·¯ç±å¯èœé
å°å°å
©èäžåç `to` 宣åïŒé£æé
å°å°ç¬¬äžåïŒè第äºå就氞é äžæ被é
å°å°ãèäŸäŸèªªïŒåŠæäœ å®çŸ©ä»¥äžç `Switch` ïŒé£è·¯ç±å°æ°žé åªæé
å°å° `AppRoute::Home`ã
+
+```rust
+#[derive(Switch)]
+enum AppRoute {
+ #[to="/"]
+ Home,
+ #[to="/login"]
+ Login,
+ #[to="/register"]
+ Register,
+ #[to="/delete_account"]
+ Delete,
+ #[to="/posts/{id}"]
+ ViewPost(i32),
+ #[to="/posts/view"]
+ ViewPosts,
+}
+```
+
+äœ éå¯ä»¥æ¿å° url äžçåæžïŒééåš`#[to = ""]` äžå®£å `{}`ã`{}` 代衚äžäžååé笊èïŒ"/"ã"?"ã"&"ã"\#" ïŒä¹åïŒ url äžçåæžã`{*}` 衚瀺ååŸçŽå°åŸçºå笊å¹é
çºæ¢ä¹éçè®æžïŒåŠæäžååšä»»äœåäž²ïŒåå®å°å¹é
ä»»äœå
§å®¹ã `{}` 衚瀺ååŸç¹å®æžéççåé笊èä¹åçè®æžãïŒäŸåŠïŒ `{2}` æååŸå
©ååé笊èä¹åçè®æžãïŒ
+
+å°æŒæåœåæ¬äœç struct è enumïŒäœ å¿
é 絊åºè®æžçååïŒåæ¯ïŒ `{user_name}` ææ¯ `{*:age}`ã
+
+Switch trait å¯ä»¥åå©ååŸæ¯èµ·åäž²èŠæŽæçµæ§çè®æžãäœ å¯ä»¥å¯Šäœ `Switch`ïŒéæš£äœ å°±å¯ä»¥åŸå°ç¹å®çµæ§çè®æžïŒèä»ææ¯äžå `unsize`ãäœåŠæéå URL ç¡æ³è¢«èœæïŒå°±æ被èŠçºæ²æå¹é
ã
diff --git a/website/i18n/zh-Hant/docusaurus-plugin-content-docs/version-0.21/getting-started/build-a-sample-app.mdx b/website/i18n/zh-Hant/docusaurus-plugin-content-docs/version-0.21/getting-started/build-a-sample-app.mdx
new file mode 100644
index 00000000000..116d1b6aa67
--- /dev/null
+++ b/website/i18n/zh-Hant/docusaurus-plugin-content-docs/version-0.21/getting-started/build-a-sample-app.mdx
@@ -0,0 +1,127 @@
+# 第äžåç°¡å®ç App
+
+éŠå
ïŒå
建ç«äžåæ°ç binary å°æ¡ïŒ
+
+```bash
+cargo new --bin yew-app && cd yew-app
+```
+
+åšäŸè³Žåº«è£¡å å
¥ `yew` è `wasm-bindgen`ïŒææ°ççèïŒè«åè[é裡](https://docs.rs/yew)ïŒ
+
+{% code title="Cargo.toml" %}
+
+```text
+[package]
+name = "yew-app"
+version = "0.1.0"
+authors = ["Yew App Developer "]
+edition = "2018"
+
+[dependencies]
+yew = "0.16"
+wasm-bindgen = "0.2"
+```
+
+{% endcode %}
+
+å°äžé¢çæš¡æ¿è€è£œé²äœ ç `src/lib.rs` æªæ¡ïŒ
+
+{% code title="src/lib.rs" %}
+
+```rust
+use wasm_bindgen::prelude::*;
+use yew::prelude::*;
+
+struct Model {
+ link: ComponentLink,
+ value: i64,
+}
+
+enum Msg {
+ AddOne,
+}
+
+impl Component for Model {
+ type Message = Msg;
+ type Properties = ();
+ fn create(_: Self::Properties, link: ComponentLink) -> Self {
+ Self {
+ link,
+ value: 0,
+ }
+ }
+
+ fn update(&mut self, msg: Self::Message) -> ShouldRender {
+ match msg {
+ Msg::AddOne => self.value += 1
+ }
+ true
+ }
+
+ fn change(&mut self, _props: Self::Properties) -> ShouldRender {
+ // åŠæææ°çäžå屬æ§ïŒæ該åªèœåå³ true
+ // è¥æ¯éåå
件æ²æä»»äœå±¬æ§ïŒé£å°±å¯ä»¥åªåå³ false
+ false
+ }
+
+ fn view(&self) -> Html {
+ html! {
+
+
{ "+1" }
+
{ self.value }
+
::new().mount_to_body();
+}
+```
+
+{% endcode %}
+
+æš¡æ¿æ建眮åå« `Model` çæ ¹å
件 `Component`ïŒModel æ顯瀺äžåæéïŒç¶äœ æäžæéæïŒ `Model` ææŽæ°èªå·±ççæ
ãéèŠç¹å¥æ³šæçæ¯ïŒåš `main()` 裡ç `App::::new().mount_to_body()`ïŒä»æååäœ ç app 䞊äžæèŒ `Model` 裡ç HTML å° `` æšç±€äžãåŠæäœ æ³èŠåšååæçšçšåŒæïŒåž¶å
¥åæ
ç屬æ§ïŒäœ å¯ä»¥æ¹çš `App::::new().mount_to_body_with_props(..)`ã
+
+æåŸïŒåšäœ çå°æ¡ïŒæ°å¢ `static` è³æ借ïŒäžŠæ°å¢ `index.html` æªæ¡å° static 裡ã
+
+```bash
+mkdir static
+```
+
+{% code title="index.html" %}
+
+```bash
+
+
+
+ Yew Sample App
+
+
+
+
+```
+
+{% endcode %}
+
+## å·è¡äœ ç AppïŒ
+
+äœ¿çš [`wasm-pack`](https://rustwasm.github.io/docs/wasm-pack/) äŸå·è¡å°æ¡æ¯æ¯èŒå¥œçéžæãåŠæäœ éæ²æåä»»äœæºåïŒå
çš`cargo install wasm-pack`å®è£ `wasm-pack` ïŒç¶åŸçšäžé¢çæ什ïŒå»ºçœ®èéåéçŒçšäŒºæåšïŒ
+
+```bash
+wasm-pack build --target web --out-name wasm --out-dir ./static
+```
+
+`wasm-pack` æåš `./static` 裡ç¢çäžå bundleïŒè£¡é¢å
å«å°æ¡ç·šæç WebAssemblyïŒä»¥å JavaScript çå
裹åšïŒéäºæ±è¥¿éœæåšäœ çå°æ¡å·è¡æ被èŒå
¥ã
+
+æåŸïŒçšäœ æåæ¡ç網é 䌺æåšïŒå»åååš`./static` åºäžçæªæ¡ãç¯äŸïŒ
+
+```bash
+cargo +nightly install miniserve
+miniserve ./static --index index.html
+```
diff --git a/website/i18n/zh-Hant/docusaurus-plugin-content-docs/version-0.21/getting-started/examples.mdx b/website/i18n/zh-Hant/docusaurus-plugin-content-docs/version-0.21/getting-started/examples.mdx
new file mode 100644
index 00000000000..d0de169fcc5
--- /dev/null
+++ b/website/i18n/zh-Hant/docusaurus-plugin-content-docs/version-0.21/getting-started/examples.mdx
@@ -0,0 +1,11 @@
+# ééç¯äŸåžç¿
+
+æåæåçš®ç¯äŸïŒéœæçºåšç¶è·äžïŒïŒå»ºè°äœ å¯ä»¥ä»çŽ°é±è®ä»åïŒä»¥äºè§£åŠäœäœ¿çšåçš®äžåçæ¡æ¶åèœãç¶éå°åé¡æéèŠå¹«å¿æïŒæåä¹åŸæ¡è¿å€§å®¶ pull-requests æé issues â¥ïž
+
+- [**Todo App \(stdweb\)**](https://github.com/yewstack/yew/tree/v0.14.0/examples/std_web/todomvc)
+- [**Todo App \(web_sys\)**](https://github.com/yewstack/yew/tree/v0.14.0/examples/web_sys/todomvc)
+- [**Custom Components**](https://github.com/yewstack/yew/tree/v0.14.0/examples/custom_components)
+- [**Multi-threading \(Agents\) \(stdweb\)**](https://github.com/yewstack/yew/tree/v0.14.0/examples/std_web/multi_thread)
+- [**Multi-threading \(Agents\) \(web_sys\)**](https://github.com/yewstack/yew/tree/v0.14.0/examples/web_sys/multi_thread)
+- [**Timer Service**](https://github.com/yewstack/yew/tree/v0.14.0/examples/timer)
+- [**Nested Components**](https://github.com/yewstack/yew/tree/v0.14.0/examples/nested_list)
diff --git a/website/i18n/zh-Hant/docusaurus-plugin-content-docs/version-0.21/more/css.mdx b/website/i18n/zh-Hant/docusaurus-plugin-content-docs/version-0.21/more/css.mdx
new file mode 100644
index 00000000000..54130ddf91d
--- /dev/null
+++ b/website/i18n/zh-Hant/docusaurus-plugin-content-docs/version-0.21/more/css.mdx
@@ -0,0 +1,5 @@
+# CSS
+
+<TODO>
+
+æé CSS çæ¯æŽè建è°å¯ä»¥åšé裡æŸå°ïŒ [https://github.com/yewstack/yew/issues/533](https://github.com/yewstack/yew/issues/533)
diff --git a/website/i18n/zh-Hant/docusaurus-plugin-content-docs/version-0.21/more/debugging.mdx b/website/i18n/zh-Hant/docusaurus-plugin-content-docs/version-0.21/more/debugging.mdx
new file mode 100644
index 00000000000..cff22a04de2
--- /dev/null
+++ b/website/i18n/zh-Hant/docusaurus-plugin-content-docs/version-0.21/more/debugging.mdx
@@ -0,0 +1,50 @@
+# é€é¯
+
+## Panics
+
+è«äœ¿çš [`console_error_panic`](https://github.com/rustwasm/console_error_panic_hook) crate ïŒä»æçš Rust symbols äŸå stacktracesã泚æïŒä»è· `cargo-web` äžçžå®¹ã
+
+## Console Logging
+
+éåžžïŒWasm ç網é æçšçšåŒå¯ä»¥è·ç芜åšç API äºæäœïŒæ以 `console.log` éå api ä¹äžäŸå€ïŒäœ å¯ä»¥äœ¿çšä»¥äžå¹Ÿçš®æ¹æ³ïŒ
+
+### [`wasm-logger`](https://crates.io/crates/wasm-logger)
+
+éå crate æŽåäºä»€äººçæç Rust `log` crateïŒ
+
+```rust
+// èšå®
+fn main() {
+ wasm_logger::init(wasm_logger::Config::default());
+}
+
+// 䜿çš
+log::info!("Update: {:?}", msg);
+```
+
+### **\`\`**[**`ConsoleService`**](https://docs.rs/yew/0.13.2/yew/services/console/struct.ConsoleService.html)**\`\`**
+
+Yew å
å«äºéå serviceïŒèäžåŠæ `"services"` éå feaure æ被æéç話ïŒäœ å¯ä»¥çŽæ¥äœ¿çšä»ïŒ
+
+```rust
+// 䜿çš
+ConsoleService::info(format!("Update: {:?}", msg).as_ref());
+```
+
+## Source Maps
+
+ç®å Rust/Wasm 網é æçšçšåŒïŒäžå° source maps 第äžç·æ¯æŽãç¶ç¶ïŒé件äºåšæªäŸå¯èœææ¹è®ïŒåŠæé裡寫çè³èšäžæ£ç¢ºïŒææ¯äºæ
ææè®åïŒè«å»ºè°æåä¿®æ¹éç¯æ件ïŒ
+
+### ææ°è³èš
+
+\[2019 12 æ\] [Chrome DevTools update](https://developers.google.com/web/updates/2019/12/webassembly#the_future)
+
+> äœéæ¯æ倧éçå·¥äœèŠåãèäŸé說ïŒåšå·¥å
·æ¹é¢ïŒEmscripten \(Binaryen\) è wasm-pack \(wasm-bindgen\)ïŒéäžæ¯æŽæŽæ°èœæä»åçè¡çºç DWARF è³èšã
+
+\[2020\] [Rust Wasm é€é¯æå](https://rustwasm.github.io/book/reference/debugging.html#using-a-debugger)
+
+> äžå¹žå°ïŒWebAssembly çé€é¯éäžå€ å®åãåšå€§éšåç Unix 系統äžïŒ[DWARF](http://dwarfstd.org/) 被çšäŸç·šç¢Œé€é¯åšéèŠæäŸççšåŒç¢ŒççŽçè³èšãéæäžçš®åš Windows äžç線碌è³èšãäœçŸåšéæ²æè· WebAssembly çå¹ã
+
+\[2019\] [Rust Wasm roadmap](https://rustwasm.github.io/rfcs/007-2019-roadmap.html#debugging)
+
+> é€é¯æ¯äžä»¶æ£æçäºæ
ïŒå çºå€§éšåçäºæ
éœäžæ¯ææ¡åšéåå·¥äœçŸ€çµäžïŒèæ¯äŸè³Ž WebAssembly çæšæºïŒèç芜åšçéçŒè
å·¥å
·åŠäœå¯Šäœã
diff --git a/website/i18n/zh-Hant/docusaurus-plugin-content-docs/version-0.21/more/roadmap.mdx b/website/i18n/zh-Hant/docusaurus-plugin-content-docs/version-0.21/more/roadmap.mdx
new file mode 100644
index 00000000000..f1262fd2ed8
--- /dev/null
+++ b/website/i18n/zh-Hant/docusaurus-plugin-content-docs/version-0.21/more/roadmap.mdx
@@ -0,0 +1,44 @@
+---
+description: Yew ççæ¬çŽé
+---
+
+# Roadmap
+
+### åªå
é åº
+
+å³å°æšåºçæ°åèœåéé»éçŒæ¹åçåªå
é åºå°ç±ç€ŸçŸ€æ±ºå®ãåš 2020 çæ¥å£ïŒæåæçŒåºäžåéçŒè
調æ¥ïŒæ¶éå°æ¡æ¹åçåé¥ãäœ å¯ä»¥åš [Yew Wiki](https://github.com/yewstack/yew/wiki/Dev-Survey-%5BSpring-2020%5D) äžæŸå°çµæã
+
+:::note
+äœ å¯ä»¥åš Yew GitHub 远蹀æåäž»èŠçéçŒæ¹å [Project board](https://github.com/yewstack/yew/projects)
+:::
+
+### éé» ) -> Self {
+ Self
+ }
+
+ fn view(&self, ctx: &Context) -> Html {
+ html! {
+
+ {ctx.props().children.clone()}
+
+ }
+ }
+}
+```
+
+## Advanced usage
+
+### Typed children
+
+In cases where you want one type of component to be passed as children to your component,
+you can use `yew::html::ChildrenWithProps`.
+
+```rust
+use yew::{html, ChildrenWithProps, Component, Context, Html, Properties};
+
+pub struct Item;
+
+impl Component for Item {
+ type Message = ();
+ type Properties = ();
+
+ fn create(_ctx: &Context) -> Self {
+ Self
+ }
+
+ fn view(&self, _ctx: &Context) -> Html {
+ html! {
+ { "item" }
+ }
+ }
+}
+
+#[derive(Properties, PartialEq)]
+pub struct ListProps {
+ #[prop_or_default]
+ pub children: ChildrenWithProps- ,
+}
+
+pub struct List;
+
+impl Component for List {
+ type Message = ();
+ type Properties = ListProps;
+
+ fn create(_ctx: &Context
) -> Self {
+ Self
+ }
+
+ fn view(&self, ctx: &Context) -> Html {
+ html! {
+
+ { for ctx.props().children.iter() }
+
+ }
+ }
+}
+```
+
+## Nested Children with Props
+
+Nested component properties can be accessed and mutated if the containing component types its children.
+
+```rust
+use std::rc::Rc;
+use yew::prelude::*;
+
+#[derive(Clone, PartialEq, Properties)]
+pub struct ListItemProps {
+ value: String,
+}
+
+#[function_component]
+fn ListItem(props: &ListItemProps) -> Html {
+ let ListItemProps { value } = props.clone();
+ html! {
+
+ {value}
+
+ }
+}
+
+#[derive(PartialEq, Properties)]
+pub struct Props {
+ pub children: ChildrenWithProps,
+}
+
+#[function_component]
+fn List(props: &Props) -> Html {
+ let modified_children = props.children.iter().map(|mut item| {
+ let mut props = Rc::make_mut(&mut item.props);
+ props.value = format!("item-{}", props.value);
+ item
+ });
+ html! { for modified_children }
+}
+
+html! {
+
+
+};
+```
+
+### Enum typed children
+
+Of course, sometimes you might need to restrict the children to a few different
+components. In these cases, you have to get a little more hands-on with Yew.
+
+The [`derive_more`](https://github.com/JelteF/derive_more) crate is used here
+for better ergonomics. If you don't want to use it, you can manually implement
+`From` for each variant.
+
+```rust
+use yew::{
+ html, html::ChildrenRenderer, virtual_dom::VChild, Component,
+ Context, Html, Properties,
+};
+
+pub struct Primary;
+
+impl Component for Primary {
+ type Message = ();
+ type Properties = ();
+
+ fn create(_ctx: &Context) -> Self {
+ Self
+ }
+
+ fn view(&self, _ctx: &Context) -> Html {
+ html! {
+ { "Primary" }
+ }
+ }
+}
+
+pub struct Secondary;
+
+impl Component for Secondary {
+ type Message = ();
+ type Properties = ();
+
+ fn create(_ctx: &Context) -> Self {
+ Self
+ }
+
+ fn view(&self, _ctx: &Context) -> Html {
+ html! {
+ { "Secondary" }
+ }
+ }
+}
+
+#[derive(Clone, derive_more::From, PartialEq)]
+pub enum Item {
+ Primary(VChild),
+ Secondary(VChild),
+}
+
+// Now, we implement `Into` so that yew knows how to render `Item`.
+#[allow(clippy::from_over_into)]
+impl Into for Item {
+ fn into(self) -> Html {
+ match self {
+ Self::Primary(child) => child.into(),
+ Self::Secondary(child) => child.into(),
+ }
+ }
+}
+
+#[derive(Properties, PartialEq)]
+pub struct ListProps {
+ #[prop_or_default]
+ pub children: ChildrenRenderer- ,
+}
+
+pub struct List;
+
+impl Component for List {
+ type Message = ();
+ type Properties = ListProps;
+
+ fn create(_ctx: &Context
) -> Self {
+ Self
+ }
+
+ fn view(&self, ctx: &Context) -> Html {
+ html! {
+
+ { for ctx.props().children.iter() }
+
+ }
+ }
+}
+```
+
+### Optional typed child
+
+You can also have a single optional child component of a specific type too:
+
+```rust
+use yew::{
+ html, html_nested, virtual_dom::VChild, Component,
+ Context, Html, Properties
+};
+
+pub struct PageSideBar;
+
+impl Component for PageSideBar {
+ type Message = ();
+ type Properties = ();
+
+ fn create(_ctx: &Context) -> Self {
+ Self
+ }
+
+ fn view(&self, _ctx: &Context) -> Html {
+ html! {
+ { "sidebar" }
+ }
+ }
+}
+
+#[derive(Properties, PartialEq)]
+pub struct PageProps {
+ #[prop_or_default]
+ pub sidebar: Option>,
+}
+
+struct Page;
+
+impl Component for Page {
+ type Message = ();
+ type Properties = PageProps;
+
+ fn create(_ctx: &Context) -> Self {
+ Self
+ }
+
+ fn view(&self, ctx: &Context) -> Html {
+ html! {
+
+ { ctx.props().sidebar.clone().map(Html::from).unwrap_or_default() }
+ // ... page content
+
+ }
+ }
+}
+
+// The page component can be called either with the sidebar or without:
+
+pub fn render_page(with_sidebar: bool) -> Html {
+ if with_sidebar {
+ // Page with sidebar
+ html! {
+ ` the macro generates `::yew::` to make sure that the
+ Yew package is referenced correctly. This is also why `::alloc::vec::Vec::new()` is called instead
+ of just `Vec::new()`.
+2. Due to potential trait method name collisions, `` is used to make sure that we are
+ using members from the correct trait.
+
+## What is a virtual DOM?
+
+The DOM ("document object model") is a representation of the HTML content that is managed by the browser
+for your web page. A "virtual" DOM is simply a copy of the DOM that is held in application memory. Managing
+a virtual DOM results in a higher memory overhead, but allows for batching and faster reads by avoiding
+or delaying the use of browser APIs.
+
+Having a copy of the DOM in memory can be helpful for libraries that promote the use of
+declarative UIs. Rather than needing specific code for describing how the DOM should be modified
+in response to a user event, the library can use a generalized approach with DOM "diffing". When a Yew
+component is updated and wants to change how it is rendered, the Yew library will build a second copy
+of the virtual DOM and directly compare it to a virtual DOM which mirrors what is currently on screen.
+The "diff" (or difference) between the two can be broken down into incremental updates and applied in
+a batch with browser APIs. Once the updates are applied, the old virtual DOM copy is discarded and the
+new copy is saved for future diff checks.
+
+This "diff" algorithm can be optimized over time to improve the performance of complex applications.
+Since Yew applications are run with WebAssembly, we believe that Yew has a competitive edge to adopt
+more sophisticated algorithms in the future.
+
+The Yew virtual DOM is not exactly one-to-one with the browser DOM. It also includes "lists" and
+"components" for organizing DOM elements. A list can simply be an ordered list of elements but can
+also be much more powerful. By annotating each list element with a "key", application developers
+can help Yew make additional optimizations to ensure that when a list changes, the least amount
+of work is done to calculate the diff update. Similarly, components provide custom logic to
+indicate whether a re-render is required to help with performance.
+
+## Yew scheduler and component-scoped event loop
+
+_Contribute to the docs â explain how `yew::scheduler` and `yew::html::scope` work in depth_
+
+## Further reading
+
+- [More information about macros from the Rust Book](https://doc.rust-lang.org/stable/book/ch19-06-macros.html)
+- [More information about `cargo-expand`](https://github.com/dtolnay/cargo-expand)
+- [The API documentation for `yew::virtual_dom`](https://docs.rs/yew/*/yew/virtual_dom/index.html)
diff --git a/website/versioned_docs/version-0.21/advanced-topics/immutable.mdx b/website/versioned_docs/version-0.21/advanced-topics/immutable.mdx
new file mode 100644
index 00000000000..332ed94164f
--- /dev/null
+++ b/website/versioned_docs/version-0.21/advanced-topics/immutable.mdx
@@ -0,0 +1,24 @@
+---
+title: 'Immutable Types'
+description: 'Immutable data structures for Yew'
+---
+
+## What are immutable types?
+
+These are types that you can instantiate but never mutate the values. In order
+to update a value, you must instantiate a new value.
+
+## Why using immutable types?
+
+Properties, like in React, are propagated from ancestors to
+children. This means that the properties must live when each component is
+updated. This is why properties should âideallyâ be cheap to clone. To
+achieve this we usually wrap things in `Rc`.
+
+Immutable types are a great fit for holding property's values because they can
+be cheaply cloned when passed from component to component.
+
+## Further reading
+
+- [Immutable example](https://github.com/yewstack/yew/tree/master/examples/immutable)
+- [Crate `implicit-clone`](https://docs.rs/implicit-clone/)
diff --git a/website/versioned_docs/version-0.21/advanced-topics/optimizations.mdx b/website/versioned_docs/version-0.21/advanced-topics/optimizations.mdx
new file mode 100644
index 00000000000..9aef595c93b
--- /dev/null
+++ b/website/versioned_docs/version-0.21/advanced-topics/optimizations.mdx
@@ -0,0 +1,163 @@
+---
+title: 'Optimizations & Best Practices'
+sidebar_label: Optimizations
+description: 'Make your app faster'
+---
+
+## Using smart pointers effectively
+
+**Note: if you're unsure about some of the terms used in this section, the Rust Book has a useful
+[chapter about smart pointers](https://doc.rust-lang.org/book/ch15-00-smart-pointers.html).**
+
+To avoid cloning large amounts of data to create props when re-rendering, we can use
+smart pointers to only clone a reference to the data instead of the data itself. If you pass
+references to the relevant data in your props and child components instead of the actual data you
+can avoid cloning any data until you need to modify it in the child component, where you can
+use `Rc::make_mut` to clone and obtain a mutable reference to the data you want to alter.
+
+This brings further benefits in `Component::changed` when working out whether prop changes require
+the component to re-render. This is because instead of comparing the value of the data the
+underlying pointer addresses (i.e. the position in a machine's memory where the data is stored) can
+instead be compared; if two pointers point to the same data then the value of the data they point to
+must be the same. Note that the inverse might not be true! Even if two pointer addresses differ the
+underlying data might still be the same - in this case you should compare the underlying data.
+
+To do this comparison you'll need to use `Rc::ptr_eq` instead of just using `PartialEq` (which is
+automatically used when comparing data using the equality operator `==`). The Rust documentation
+has [more details about `Rc::ptr_eq`](https://doc.rust-lang.org/stable/std/rc/struct.Rc.html#method.ptr_eq).
+
+This optimization is most useful for data types that don't implement `Copy`. If you can copy your
+data cheaply, then it isn't worth putting it behind a smart pointer. For structures that
+can be data-heavy like `Vec`s, `HashMap`s, and `String`s using smart pointers is likely to bring
+performance improvements.
+
+This optimization works best if the values are never updated by the children, and even better if
+they are rarely updated by parents. This makes `Rc<_>s` a good choice for wrapping property values
+in pure components.
+
+However, it must be noted that unless you need to clone the data yourself in the child component,
+this optimization is not only useless, but it also adds the unnecessary cost of reference counting. Props
+in Yew are already reference counted and no data clones occur internally.
+
+## View functions
+
+For code readability reasons, it often makes sense to migrate sections of `html!` to their own
+functions. Not only does this make your code more readable because it reduces the amount of
+indentation present, it also encourages good design patterns â particularly around building
+composable applications because these functions can be called in multiple places which reduces the
+amount of code that has to be written.
+
+## Pure Components
+
+Pure components are components that don't mutate their state, only displaying content and
+propagating messages up to normal, mutable components. They differ from view functions in that they
+can be used from within the `html!` macro using the component syntax \(`` element of an ``.
+
+Note that `yew::create_portal` is a low-level building block. Libraries should use it to implement
+higher-level APIs which can then be consumed by applications. For example, here is a
+simple modal dialogue that renders its `children` into an element outside `yew`'s control,
+identified by the `id="modal_host"`.
+
+```rust
+use yew::prelude::*;
+
+#[derive(Properties, PartialEq)]
+pub struct ModalProps {
+ #[prop_or_default]
+ pub children: Html,
+}
+
+#[function_component]
+fn Modal(props: &ModalProps) -> Html {
+ let modal_host = gloo::utils::document()
+ .get_element_by_id("modal_host")
+ .expect("Expected to find a #modal_host element");
+
+ create_portal(
+ props.children.clone(),
+ modal_host.into(),
+ )
+}
+```
+
+## Event handling
+
+Events emitted on elements inside portals follow the virtual DOM when bubbling up. That is,
+if a portal is rendered as the child of an element, then an event listener on that element
+will catch events dispatched from inside the portal, even if the portal renders its contents
+in an unrelated location in the actual DOM.
+
+This allows developers to be oblivious of whether a component they consume, is implemented with
+or without portals. Events fired on its children will bubble up regardless.
+
+A known issue is that events from portals into **closed** shadow roots will be dispatched twice,
+once targeting the element inside the shadow root and once targeting the host element itself. Keep
+in mind that **open** shadow roots work fine. If this impacts you, feel free to open a bug report
+about it.
+
+## Further reading
+
+- [Portals example](https://github.com/yewstack/yew/tree/master/examples/portals)
diff --git a/website/versioned_docs/version-0.21/advanced-topics/server-side-rendering.md b/website/versioned_docs/version-0.21/advanced-topics/server-side-rendering.md
new file mode 100644
index 00000000000..6d3789ff33c
--- /dev/null
+++ b/website/versioned_docs/version-0.21/advanced-topics/server-side-rendering.md
@@ -0,0 +1,203 @@
+---
+title: 'Server-side Rendering'
+description: 'Render Yew on the server-side.'
+---
+
+# Server-side Rendering
+
+By default, Yew components render on the client side. When a viewer
+visits a website, the server sends a skeleton HTML file without any actual
+content and a WebAssembly bundle to the browser.
+Everything is rendered on the client side by the WebAssembly
+bundle. This is known as client-side rendering.
+
+This approach works fine for most websites, with some caveats:
+
+1. Users will not be able to see anything until the entire WebAssembly
+ bundle is downloaded and the initial render has been completed.
+ This can result in a poor experience for users on a slow network.
+2. Some search engines do not support dynamically rendered web content and
+ those who do usually rank dynamic websites lower in the search results.
+
+To solve these problems, we can render our website on the server side.
+
+## How it Works
+
+Yew provides a `ServerRenderer` to render pages on the
+server side.
+
+To render Yew components on the server side, you can create a renderer
+with `ServerRenderer::::new()` and call `renderer.render().await`
+to render `{"Hello, World!"}
}
+}
+
+// we use `flavor = "current_thread"` so this snippet can be tested in CI,
+// where tests are run in a WASM environment. You likely want to use
+// the (default) `multi_thread` favor as:
+// #[tokio::main]
+#[tokio::main(flavor = "current_thread")]
+async fn no_main() {
+ let renderer = ServerRenderer::::new();
+
+ let rendered = renderer.render().await;
+
+ // Prints: Hello, World!
+ println!("{}", rendered);
+}
+```
+
+## Component Lifecycle
+
+The recommended way of working with server-side rendering is
+function components.
+
+All hooks other than `use_effect` (and `use_effect_with`)
+will function normally until a component successfully renders into `Html`
+for the first time.
+
+:::caution Web APIs are not available!
+
+Web APIs such as `web_sys` are not available when your component is
+rendering on the server side.
+Your application will panic if you try to use them.
+You should isolate logics that need Web APIs in `use_effect` or
+`use_effect_with` as effects are not executed during server-side rendering.
+
+:::
+
+:::danger Struct Components
+
+While it is possible to use Struct Components with server-side rendering,
+there are no clear boundaries between client-side safe logic like the
+`use_effect` hook for function components and lifecycle events are invoked
+in a different order than the client side.
+
+In addition, Struct Components will continue to accept messages until all of its
+children are rendered and `destroy` method is called. Developers need to
+make sure no messages possibly passed to components would link to logic
+that makes use of Web APIs.
+
+When designing an application with server-side rendering support,
+prefer function components unless you have a good reason not to.
+
+:::
+
+## Data Fetching during Server-side Rendering
+
+Data fetching is one of the difficult points with server-side rendering and hydration.
+
+Traditionally, when a component renders, it is instantly available
+(outputs a virtual DOM to be rendered). This works fine when the
+component does not want to fetch any data. But what happens if the component
+wants to fetch some data during rendering?
+
+In the past, there was no mechanism for Yew to detect whether a component is still
+fetching data. The data-fetching client is responsible to implement
+a solution to detect what is being requested during the initial render and triggers
+a second render after requests are fulfilled. The server repeats this process until
+no more pending requests are added during a render before returning a response.
+
+This not only wastes CPU resources by repeatedly rendering components,
+but the data client also needs to provide a way to make the data fetched on the
+server side available during the hydration process to make sure that the
+virtual DOM returned by the initial render is consistent with the
+server-side rendered DOM tree which can be hard to implement.
+
+Yew takes a different approach by trying to solve this issue with `` without a ``, the browser may add a ` ` to the DOM](https://github.com/yewstack/yew/issues/2684)
+:::
+
+## Component Lifecycle during hydration
+
+During Hydration, components schedule 2 consecutive renders after it is
+created. Any effects are called after the second render completes.
+It is important to make sure that the render function of your
+component is free of side effects. It should not mutate any states or trigger
+additional renders. If your component currently mutates states or triggers
+additional renders, move them into a `use_effect` hook.
+
+It is possible to use Struct Components with server-side rendering in
+hydration, the view function will be called
+multiple times before the rendered function will be called.
+The DOM is considered as not connected until the rendered function is called,
+you should prevent any access to rendered nodes
+until `rendered()` method is called.
+
+## Example
+
+```rust ,ignore
+use yew::prelude::*;
+use yew::Renderer;
+
+#[function_component]
+fn App() -> Html {
+ html! {{"Hello, World!"}
}
+}
+
+fn main() {
+ let renderer = Renderer::::new();
+
+ // hydrates everything under body element, removes trailing
+ // elements (if any).
+ renderer.hydrate();
+}
+```
+
+Example: [simple_ssr](https://github.com/yewstack/yew/tree/master/examples/simple_ssr)
+Example: [ssr_router](https://github.com/yewstack/yew/tree/master/examples/ssr_router)
+
+:::caution
+
+Server-side rendering is currently experimental. If you find a bug, please file
+an issue on [GitHub](https://github.com/yewstack/yew/issues/new?assignees=&labels=bug&template=bug_report.md&title=).
+
+:::
diff --git a/website/versioned_docs/version-0.21/advanced-topics/struct-components/callbacks.mdx b/website/versioned_docs/version-0.21/advanced-topics/struct-components/callbacks.mdx
new file mode 100644
index 00000000000..8153778f496
--- /dev/null
+++ b/website/versioned_docs/version-0.21/advanced-topics/struct-components/callbacks.mdx
@@ -0,0 +1,86 @@
+---
+title: 'Callbacks'
+---
+
+## Callbacks
+
+Callbacks are used to communicate with services, agents, and parent components within Yew.
+Internally their type is just `Fn` wrapped in `Rc` to allow them to be cloned.
+
+They have an `emit` function that takes their `` type as an argument and converts that to a message expected by its destination. If a callback from a parent is provided in props to a child component, the child can call `emit` on the callback in its `update` lifecycle hook to send a message back to its parent. Closures or Functions provided as props inside the `html!` macro are automatically converted to Callbacks.
+
+A simple use of a callback might look something like this:
+
+```rust
+use yew::{html, Component, Context, Html};
+
+enum Msg {
+ Clicked,
+}
+
+struct Comp;
+
+impl Component for Comp {
+
+ type Message = Msg;
+ type Properties = ();
+
+ fn create(_ctx: &Context) -> Self {
+ Self
+ }
+
+ fn view(&self, ctx: &Context) -> Html {
+ // highlight-next-line
+ let onclick = ctx.link().callback(|_| Msg::Clicked);
+ html! {
+ // highlight-next-line
+ { "Click" }
+ }
+ }
+}
+```
+
+The function passed to `callback` must always take a parameter. For example, the `onclick` handler requires a function that takes a parameter of type `MouseEvent`. The handler can then decide what kind of message should be sent to the component. This message is scheduled for the next update loop unconditionally.
+
+If you need a callback that might not need to cause an update, use `batch_callback`.
+
+```rust
+use yew::{events::KeyboardEvent, html, Component, Context, Html};
+
+enum Msg {
+ Submit,
+}
+
+struct Comp;
+
+impl Component for Comp {
+
+ type Message = Msg;
+ type Properties = ();
+
+ fn create(_ctx: &Context) -> Self {
+ Self
+ }
+
+ fn view(&self, ctx: &Context) -> Html {
+ // highlight-start
+ let onkeypress = ctx.link().batch_callback(|event: KeyboardEvent| {
+ if event.key() == "Enter" {
+ Some(Msg::Submit)
+ } else {
+ None
+ }
+ });
+
+ html! {
+ context={(*ctx).clone()}>
+ >
+ }
+}
+
+// highlight-start
+#[function_component]
+pub fn ThemedButtonHOC() -> Html {
+ let theme = use_context::().expect("no ctx found");
+
+ html! {) -> Self {
+ Self
+ }
+
+ fn view(&self, ctx: &Context) -> Html {
+ let theme = &ctx.props().theme;
+ html! {
+
+ { "Click me!" }
+
+ }
+ }
+}
+
+
+
+
+```
diff --git a/website/versioned_docs/version-0.21/advanced-topics/struct-components/introduction.mdx b/website/versioned_docs/version-0.21/advanced-topics/struct-components/introduction.mdx
new file mode 100644
index 00000000000..311fe6ae5a1
--- /dev/null
+++ b/website/versioned_docs/version-0.21/advanced-topics/struct-components/introduction.mdx
@@ -0,0 +1,32 @@
+---
+title: 'Introduction'
+description: 'Components in Yew'
+---
+
+## What are Components?
+
+Components are the building blocks of Yew. They manage an internal state and can render elements to the DOM.
+Components are created by implementing the `Component` trait for a type.
+
+## Writing Component's markup
+
+Yew uses Virtual DOM to render elements to the DOM. The Virtual DOM tree can be constructed by using the
+`html!` macro. `html!` uses a syntax which is similar to HTML but is not the same. The rules are also
+much stricter. It also provides superpowers like conditional rendering and rendering of lists using iterators.
+
+:::info
+[Learn more about the `html!` macro, how it is used and its syntax](concepts/html/introduction.mdx)
+:::
+
+## Passing data to a component
+
+Yew components use _props_ to communicate between parents and children. A parent component may pass any data as props to
+its children. Props are similar to HTML attributes but any Rust type can be passed as props.
+
+:::info
+[Learn more about the props](advanced-topics/struct-components/properties.mdx)
+:::
+
+:::info
+For other than parent/child communication, use [contexts](../../concepts/contexts.mdx)
+:::
diff --git a/website/versioned_docs/version-0.21/advanced-topics/struct-components/lifecycle.mdx b/website/versioned_docs/version-0.21/advanced-topics/struct-components/lifecycle.mdx
new file mode 100644
index 00000000000..e9cfdbe9d2d
--- /dev/null
+++ b/website/versioned_docs/version-0.21/advanced-topics/struct-components/lifecycle.mdx
@@ -0,0 +1,305 @@
+---
+title: 'Lifecycle'
+description: 'Components and their lifecycle hooks'
+---
+
+The `Component` trait has a number of methods which need to be implemented; Yew will call these at different
+stages in the lifecycle of a component.
+
+## Lifecycle
+
+:::important contribute
+`Contribute to our docs:` [Add a diagram of the component lifecycle](https://github.com/yewstack/yew/issues/1915)
+:::
+
+## Lifecycle Methods
+
+### Create
+
+When a component is created, it receives properties from its parent component and is stored within
+the `Context` that is passed down to the `create` method. The properties can be used to
+initialize the component's state and the "link" can be used to register callbacks or send messages to the component.
+
+```rust
+use yew::{Component, Context, html, Html, Properties};
+
+#[derive(PartialEq, Properties)]
+pub struct Props;
+
+pub struct MyComponent;
+
+impl Component for MyComponent {
+ type Message = ();
+ type Properties = Props;
+
+ // highlight-start
+ fn create(ctx: &Context) -> Self {
+ MyComponent
+ }
+ // highlight-end
+
+ fn view(&self, _ctx: &Context) -> Html {
+ html! {
+ // impl
+ }
+ }
+}
+```
+
+### View
+
+The `view` method allows you to describe how a component should be rendered to the DOM. Writing
+HTML-like code using Rust functions can become quite messy, so Yew provides a macro called `html!`
+for declaring HTML and SVG nodes (as well as attaching attributes and event listeners to them) and a
+convenient way to render child components. The macro is somewhat similar to React's JSX (the
+differences in programming language aside).
+One difference is that Yew provides a shorthand syntax for properties, similar to Svelte, where instead of writing `onclick={onclick}`, you can just write `{onclick}`.
+
+```rust
+use yew::{Component, Context, html, Html, Properties};
+
+enum Msg {
+ Click,
+}
+
+#[derive(PartialEq, Properties)]
+struct Props {
+ button_text: String,
+}
+
+struct MyComponent;
+
+impl Component for MyComponent {
+ type Message = Msg;
+ type Properties = Props;
+
+ fn create(_ctx: &Context) -> Self {
+ Self
+ }
+
+ // highlight-start
+ fn view(&self, ctx: &Context) -> Html {
+ let onclick = ctx.link().callback(|_| Msg::Click);
+ html! {
+ { &ctx.props().button_text }
+ }
+ }
+ // highlight-end
+}
+```
+
+For usage details, check out [the `html!` guide](concepts/html/introduction.mdx).
+
+### Rendered
+
+The `rendered` component lifecycle method is called once `view` has been called and Yew has rendered
+the results to the DOM, but before the browser refreshes the page. This method is useful when you
+want to perform actions that can only be completed after the component has rendered elements. There
+is also a parameter called `first_render` which can be used to determine whether this function is
+being called on the first render, or instead a subsequent one.
+
+```rust
+use web_sys::HtmlInputElement;
+use yew::{
+ Component, Context, html, Html, NodeRef,
+};
+
+pub struct MyComponent {
+ node_ref: NodeRef,
+}
+
+impl Component for MyComponent {
+ type Message = ();
+ type Properties = ();
+
+ fn create(_ctx: &Context) -> Self {
+ Self {
+ node_ref: NodeRef::default(),
+ }
+ }
+
+ fn view(&self, ctx: &Context) -> Html {
+ html! {
+ , first_render: bool) {
+ if first_render {
+ if let Some(input) = self.node_ref.cast::() {
+ input.focus();
+ }
+ }
+ }
+ // highlight-end
+}
+```
+
+:::tip note
+Note that this lifecycle method does not require implementation and will do nothing by default.
+:::
+
+### Update
+
+Communication with components happens primarily through messages which are handled by the
+`update` lifecycle method. This allows the component to update itself
+based on what the message was, and determine if it needs to re-render itself. Messages can be sent
+by event listeners, child components, Agents, Services, or Futures.
+
+Here is an example of what an implementation of `update` could look like:
+
+```rust
+use yew::{Component, Context, html, Html};
+
+// highlight-start
+pub enum Msg {
+ SetInputEnabled(bool)
+}
+// highlight-end
+
+struct MyComponent {
+ input_enabled: bool,
+}
+
+impl Component for MyComponent {
+ // highlight-next-line
+ type Message = Msg;
+ type Properties = ();
+
+ fn create(_ctx: &Context) -> Self {
+ Self {
+ input_enabled: false,
+ }
+ }
+
+ // highlight-start
+ fn update(&mut self, _ctx: &Context, msg: Self::Message) -> bool {
+ match msg {
+ Msg::SetInputEnabled(enabled) => {
+ if self.input_enabled != enabled {
+ self.input_enabled = enabled;
+ true // Re-render
+ } else {
+ false
+ }
+ }
+ }
+ }
+ // highlight-end
+
+ fn view(&self, _ctx: &Context) -> Html {
+ html! {
+ // impl
+ }
+ }
+
+}
+```
+
+### Changed
+
+Components may be re-rendered by their parents. When this happens, they could receive new properties
+and need to re-render. This design facilitates parent-to-child component communication by just
+changing the values of a property. There is a default implementation that re-renders the component
+when props are changed.
+
+### Destroy
+
+After Components are unmounted from the DOM, Yew calls the `destroy` lifecycle method; this is
+necessary if you need to undertake operations to clean up after earlier actions of a component
+before it is destroyed. This method is optional and does nothing by default.
+
+### Infinite loops
+
+Infinite loops are possible with Yew's lifecycle methods but are only caused when trying to update
+the same component after every render, when that update also requests the component to be rendered.
+
+A simple example can be seen below:
+
+```rust
+use yew::{Context, Component, Html};
+
+struct Comp;
+
+impl Component for Comp {
+ type Message = ();
+ type Properties = ();
+
+ fn create(_ctx: &Context) -> Self {
+ Self
+ }
+
+ fn update(&mut self, _ctx: &Context, _msg: Self::Message) -> bool {
+ // We are going to always request to re-render on any msg
+ true
+ }
+
+ fn view(&self, _ctx: &Context) -> Html {
+ // For this example it doesn't matter what is rendered
+ Html::default()
+ }
+
+ fn rendered(&mut self, ctx: &Context, _first_render: bool) {
+ // Request that the component is updated with this new msg
+ ctx.link().send_message(());
+ }
+}
+```
+
+Let's run through what happens here:
+
+1. Component is created using the `create` function.
+2. The `view` method is called so Yew knows what to render to the browser DOM.
+3. The `rendered` method is called, which schedules an update message using the `Context` link.
+4. Yew finishes the post-render phase.
+5. Yew checks for scheduled events and sees the update message queue is not empty so works through
+ the messages.
+6. The `update` method is called which returns `true` to indicate something has changed and the
+ component needs to re-render.
+7. Jump back to 2.
+
+You can still schedule updates in the `rendered` method and it is often useful to do so, but
+consider how your component will terminate this loop when you do.
+
+## Associated Types
+
+The `Component` trait has two associated types: `Message` and `Properties`.
+
+```rust ,ignore
+impl Component for MyComponent {
+ type Message = Msg;
+ type Properties = Props;
+
+ // ...
+}
+```
+
+The `Message` type is used to send messages to a component after an event has taken place; for
+example, you might want to undertake some action when a user clicks a button or scrolls down the
+page. Because components tend to have to respond to more than one event, the `Message` type will
+normally be an enum, where each variant is an event to be handled.
+
+When organizing your codebase, it is sensible to include the definition of the `Message` type in the
+same module in which your component is defined. You may find it helpful to adopt a consistent naming
+convention for message types. One option (though not the only one) is to name the types
+`ComponentNameMsg`, e.g. if your component was called `Homepage` then you might call the type
+`HomepageMsg`.
+
+```rust
+enum Msg {
+ Click,
+ FormInput(String)
+}
+```
+
+`Properties` represents the information passed to a component from its parent. This type must implement the `Properties` trait \(usually by deriving it\) and can specify whether certain properties are required or optional. This type is used when creating and updating a component. It is common practice to create a struct called `Props` in your component's module and use that as the component's `Properties` type. It is common to shorten "properties" to "props". Since props are handed down from parent components, the root component of your application typically has a `Properties` type of `()`. If you wish to specify properties for your root component, use the `App::mount_with_props` method.
+
+:::info
+[Learn more about properties](./properties)
+:::
+
+## Lifecycle Context
+
+All component lifecycle methods take a context object. This object provides a reference to the component's scope, which
+allows sending messages to a component and the props passed to the component.
diff --git a/website/versioned_docs/version-0.21/advanced-topics/struct-components/properties.mdx b/website/versioned_docs/version-0.21/advanced-topics/struct-components/properties.mdx
new file mode 100644
index 00000000000..e1eb7bdc678
--- /dev/null
+++ b/website/versioned_docs/version-0.21/advanced-topics/struct-components/properties.mdx
@@ -0,0 +1,145 @@
+---
+title: 'Properties'
+description: 'Parent to child communication'
+---
+
+Properties enable child and parent components to communicate with each other.
+Every component has an associated properties type which describes what is passed down from the parent.
+In theory, this can be any type that implements the `Properties` trait, but in practice, there is no
+reason for it to be anything but a struct where each field represents a property.
+
+## Derive macro
+
+Instead of implementing the `Properties` trait yourself, you should use `#[derive(Properties)]` to
+automatically generate the implementation instead.
+Types for which you derive `Properties` must also implement `PartialEq`.
+
+### Field attributes
+
+When deriving `Properties`, all fields are required by default.
+The following attributes allow you to give your props initial values which will be used unless they are set to another value.
+
+:::tip
+Attributes aren't visible in Rustdoc generated documentation.
+The doc strings of your properties should mention whether a prop is optional and if it has a special default value.
+:::
+
+#### `#[prop_or_default]`
+
+Initialize the prop value with the default value of the field's type using the `Default` trait.
+
+#### `#[prop_or(value)]`
+
+Use `value` to initialize the prop value. `value` can be any expression that returns the field's type.
+For example, to default a boolean prop to `true`, use the attribute `#[prop_or(true)]`.
+
+#### `#[prop_or_else(function)]`
+
+Call `function` to initialize the prop value. `function` should have the signature `FnMut() -> T` where `T` is the field type.
+
+## `PartialEq`
+
+`Properties` require `PartialEq` to be implemented. This is so that they can be compared by Yew to call the `changed` method
+only when they change.
+
+## Memory/speed overhead of using Properties
+
+Internally properties are reference counted. This means that only a pointer is passed down the component tree for props.
+It saves us from the cost of having to clone the entire props, which might be expensive.
+
+:::tip
+Make use of `AttrValue` which is our custom type for attribute values instead of defining them as String or another similar type.
+:::
+
+## Example
+
+```rust
+use yew::Properties;
+/// Importing the AttrValue from virtual_dom
+use yew::virtual_dom::AttrValue;
+
+#[derive(Clone, PartialEq)]
+pub enum LinkColor {
+ Blue,
+ Red,
+ Green,
+ Black,
+ Purple,
+}
+
+fn create_default_link_color() -> LinkColor {
+ LinkColor::Blue
+}
+
+#[derive(Properties, PartialEq)]
+pub struct LinkProps {
+ /// The link must have a target.
+ href: AttrValue,
+ /// Also notice that we are using AttrValue instead of String
+ text: AttrValue,
+ /// Color of the link. Defaults to `Blue`.
+ #[prop_or_else(create_default_link_color)]
+ color: LinkColor,
+ /// The view function will not specify a size if this is None.
+ #[prop_or_default]
+ size: Option,
+ /// When the view function does not specify active, it defaults to true.
+ #[prop_or(true)]
+ active: bool,
+}
+```
+
+## Props macro
+
+The `yew::props!` macro allows you to build properties the same way the `html!` macro does it.
+
+The macro uses the same syntax as a struct expression except that you cannot use attributes or a base expression (`Foo { ..base }`).
+The type path can either point to the props directly (`path::to::Props`) or the associated properties of a component (`MyComp::Properties`).
+
+```rust
+use yew::{props, Properties, virtual_dom::AttrValue};
+
+#[derive(Clone, PartialEq)]
+pub enum LinkColor {
+ Blue,
+ Red,
+ Green,
+ Black,
+ Purple,
+}
+
+fn create_default_link_color() -> LinkColor {
+ LinkColor::Blue
+}
+
+#[derive(Properties, PartialEq)]
+pub struct LinkProps {
+ /// The link must have a target.
+ href: AttrValue,
+ /// Also notice that we're using AttrValue instead of String
+ text: AttrValue,
+ /// Color of the link. Defaults to `Blue`.
+ #[prop_or_else(create_default_link_color)]
+ color: LinkColor,
+ /// The view function will not specify a size if this is None.
+ #[prop_or_default]
+ size: Option,
+ /// When the view function doesn't specify active, it defaults to true.
+ #[prop_or(true)]
+ active: bool,
+}
+
+impl LinkProps {
+ /// Notice that this function receives href and text as String
+ /// We can use `AttrValue::from` to convert it to a `AttrValue`
+ pub fn new_link_with_size(href: String, text: String, size: u32) -> Self {
+ // highlight-start
+ props! {LinkProps {
+ href: AttrValue::from(href),
+ text: AttrValue::from(text),
+ size,
+ }}
+ // highlight-end
+ }
+}
+```
diff --git a/website/versioned_docs/version-0.21/advanced-topics/struct-components/refs.mdx b/website/versioned_docs/version-0.21/advanced-topics/struct-components/refs.mdx
new file mode 100644
index 00000000000..77be387dc63
--- /dev/null
+++ b/website/versioned_docs/version-0.21/advanced-topics/struct-components/refs.mdx
@@ -0,0 +1,55 @@
+---
+title: 'Refs'
+description: 'Out-of-band DOM access'
+---
+
+The `ref` keyword can be used inside of any HTML element or component to get the DOM `Element` that
+the item is attached to. This can be used to make changes to the DOM outside of the `view` lifecycle
+method.
+
+This is useful for getting ahold of canvas elements, or scrolling to different sections of a page.
+For example, using a `NodeRef` in a component's `rendered` method allows you to make draw calls to
+a canvas element after it has been rendered from `view`.
+
+The syntax is:
+
+```rust
+use web_sys::Element;
+use yew::{html, Component, Context, Html, NodeRef};
+
+struct Comp {
+ node_ref: NodeRef,
+}
+
+impl Component for Comp {
+ type Message = ();
+ type Properties = ();
+
+ fn create(_ctx: &Context) -> Self {
+ Self {
+ // highlight-next-line
+ node_ref: NodeRef::default(),
+ }
+ }
+
+ fn view(&self, _ctx: &Context) -> Html {
+ html! {
+ // highlight-next-line
+
+ }
+ }
+
+ fn rendered(&mut self, _ctx: &Context, _first_render: bool) {
+ // highlight-start
+ let has_attributes = self.node_ref
+ .cast::()
+ .unwrap()
+ .has_attributes();
+ // highlight-end
+ }
+}
+```
+
+## Relevant examples
+
+- [Node Refs](https://github.com/yewstack/yew/tree/master/examples/node_refs)
diff --git a/website/versioned_docs/version-0.21/advanced-topics/struct-components/scope.mdx b/website/versioned_docs/version-0.21/advanced-topics/struct-components/scope.mdx
new file mode 100644
index 00000000000..db4f5974fa7
--- /dev/null
+++ b/website/versioned_docs/version-0.21/advanced-topics/struct-components/scope.mdx
@@ -0,0 +1,81 @@
+---
+title: 'Scope'
+description: "Component's Scope"
+---
+
+## Component's `Scope<_>` API
+
+The component "`Scope`" is the mechanism through which components can create callbacks and update themselves
+using messages. We obtain a reference to this by calling `link()` on the context object passed to the component.
+
+### `send_message`
+
+Sends a message to the component.
+Messages are handled by the `update` method which determines whether the component should re-render.
+
+### `send_message_batch`
+
+Sends multiple messages to the component at the same time.
+This is similar to `send_message` but if any of the messages cause the `update` method to return `true`,
+the component will re-render after all messages in the batch have been processed.
+
+If the given vector is empty, this function does nothing.
+
+### `callback`
+
+Create a callback that will send a message to the component when it is executed.
+Under the hood, it will call `send_message` with the message returned by the provided closure.
+
+```rust
+use yew::{html, Component, Context, Html};
+
+enum Msg {
+ Text(String),
+}
+
+struct Comp;
+
+impl Component for Comp {
+
+ type Message = Msg;
+ type Properties = ();
+
+ fn create(_ctx: &Context) -> Self {
+ Self
+ }
+
+ fn view(&self, ctx: &Context) -> Html {
+ // Create a callback that accepts some text and sends it
+ // to the component as the `Msg::Text` message variant.
+ // highlight-next-line
+ let cb = ctx.link().callback(|text: String| Msg::Text(text));
+
+ // The previous line is needlessly verbose to make it clearer.
+ // It can be simplified it to this:
+ // highlight-next-line
+ let cb = ctx.link().callback(Msg::Text);
+
+ // Will send `Msg::Text("Hello World!")` to the component.
+ // highlight-next-line
+ cb.emit("Hello World!".to_owned());
+
+ html! {
+ // html here
+ }
+ }
+}
+```
+
+### `batch_callback`
+
+Create a callback that will send a batch of messages to the component when it is executed.
+The difference to `callback` is that the closure passed to this method doesn't have to return a message.
+Instead, the closure can return either `Vec` or `Option` where `Msg` is the component's message type.
+
+`Vec` is treated as a batch of messages and uses `send_message_batch` under the hood.
+
+`Option` calls `send_message` if it is `Some`. If the value is `None`, nothing happens.
+This can be used in cases where, depending on the situation, an update isn't required.
+
+This is achieved using the `SendAsMessage` trait which is only implemented for these types.
+You can implement `SendAsMessage` for your own types which allows you to use them in `batch_callback`.
diff --git a/website/versioned_docs/version-0.21/concepts/agents.mdx b/website/versioned_docs/version-0.21/concepts/agents.mdx
new file mode 100644
index 00000000000..dc35203fa43
--- /dev/null
+++ b/website/versioned_docs/version-0.21/concepts/agents.mdx
@@ -0,0 +1,64 @@
+---
+title: 'Agents'
+description: "Yew's Actor System"
+---
+
+import useBaseUrl from '@docusaurus/useBaseUrl'
+import ThemedImage from '@theme/ThemedImage'
+
+Agents are a way to offload tasks to web workers.
+
+In order for agents to run concurrently, Yew uses
+[web-workers](https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Using_web_workers).
+
+## Lifecycle
+
+
+
+
+
+
+```rust
+use yew::{classes, html};
+
+html! {
+
+};
+```
+
+
+
+
+```rust
+use yew::{classes, html};
+
+html! {
+
+};
+```
+
+
+
+
+```rust
+use yew::{classes, html};
+
+html! {
+
+};
+```
+
+
+
+
+```rust
+use yew::{classes, html};
+
+html! {
+
+};
+```
+
+
+
+
+```rust
+use yew::{classes, html};
+
+html! {
+
+};
+```
+
+
+
+
+```rust
+use yew::{classes, html};
+
+html! {
+
+};
+```
+
+
+
+
+We will expand upon this concept in [more CSS](../../more/css).
+
+## Inline Styles
+
+Currently Yew does not provide any special help with inline styles specified via the `styles` attribute,
+but you can use it like any other HTML attribute:
+
+```rust
+use yew::{classes, html};
+
+html! {
+
+};
+```
+
+We will expand upon this concept in [more CSS](../../more/css).
diff --git a/website/versioned_docs/version-0.21/concepts/basic-web-technologies/html.mdx b/website/versioned_docs/version-0.21/concepts/basic-web-technologies/html.mdx
new file mode 100644
index 00000000000..a2070935ec7
--- /dev/null
+++ b/website/versioned_docs/version-0.21/concepts/basic-web-technologies/html.mdx
@@ -0,0 +1,79 @@
+---
+title: 'HTML with html!'
+description: 'Its HTML but not quite!'
+comment: 'Keep this file as short and simple as possible. Its purpose is to ease the reader into components in Yew instead of providing proper API docs'
+---
+
+import Tabs from '@theme/Tabs'
+import TabItem from '@theme/TabItem'
+
+You can write expressions resembling HTML with the `html!` macro. Behind the scenes, Yew turns
+it into rust code representing the DOM to generate.
+
+```rust
+use yew::prelude::*;
+
+let my_header: Html = html! {
+ {header_text}
+};
+
+let count: usize = 5;
+let counter_html: Html = html! {
+ {"My age is: "}{count}
+};
+
+let combined_html: Html = html! {
+ {header_html}{counter_html}
+};
+```
+
+One major rule comes with the use of `html!` - you can only return 1 wrapping node.
+To render a list of multiple elements, `html!` allows fragments. Fragments are tags
+without a name, that produce no HTML element by themselves.
+
+
+
+
+```rust , compile_fail
+use yew::html;
+
+// error: only one root HTML element allowed
+html! {
+
+
+
+
+};
+```
+
+
+
+
+```rust
+use yew::html;
+
+// fixed: using HTML fragments
+html! {
+ <>
+
+
+
+};
+```
+
+
+
+
+We will introduce Yew and HTML further in depth in [more HTML](concepts/html/introduction.mdx).
diff --git a/website/versioned_docs/version-0.21/concepts/basic-web-technologies/js.mdx b/website/versioned_docs/version-0.21/concepts/basic-web-technologies/js.mdx
new file mode 100644
index 00000000000..b38fcde085b
--- /dev/null
+++ b/website/versioned_docs/version-0.21/concepts/basic-web-technologies/js.mdx
@@ -0,0 +1,53 @@
+---
+title: 'JS with RS'
+description: 'JavaScript with Rust'
+comment: 'Keep this file as short and simple as possible. Its purpose is to ease the reader into components in Yew instead of providing proper API docs'
+---
+
+import Tabs from '@theme/Tabs'
+import TabItem from '@theme/TabItem'
+
+> Yew centrally operates on the idea of keeping everything that a reusable piece of
+> UI may need in one place - rust files, while also keeping the underlying technology
+> accessible where necessary.
+
+As of today, WebAssembly is not feature-complete for DOM interactions. This means even in Yew we
+sometimes rely on calling JavaScript. What follows is an overview of the involved libraries.
+
+## wasm-bindgen
+
+[`wasm-bindgen`](https://github.com/rustwasm/wasm-bindgen) is a library and tool that bridges calls between JavaScript and Rust functions.
+
+We highly recommend you take a look at their [documentation](https://rustwasm.github.io/docs/wasm-bindgen/) and our [quick guide](./wasm-bindgen.mdx).
+
+## web-sys
+
+The [`web-sys` crate](https://crates.io/crates/web-sys) provides bindings for Web APIs and allows us to write JavaScript code in a rustyfied and safe way.
+
+Example:
+
+
+
+
+```js
+let document = window.document
+```
+
+
+
+
+
+```rust ,no_run
+use wasm_bindgen::UnwrapThrowExt;
+use web_sys::window;
+
+let document = window()
+ .expect_throw("window is undefined")
+ .document()
+ .expect_throw("document is undefined");
+```
+
+
+
+
+Once again we highly recommend you take a look at their [documentation](https://rustwasm.github.io/docs/wasm-bindgen/) and our [quick guide](./web-sys.mdx).
diff --git a/website/versioned_docs/version-0.21/concepts/basic-web-technologies/wasm-bindgen.mdx b/website/versioned_docs/version-0.21/concepts/basic-web-technologies/wasm-bindgen.mdx
new file mode 100644
index 00000000000..e34c895ca8c
--- /dev/null
+++ b/website/versioned_docs/version-0.21/concepts/basic-web-technologies/wasm-bindgen.mdx
@@ -0,0 +1,244 @@
+---
+title: 'wasm-bindgen'
+sidebar_label: wasm-bindgen
+---
+
+[`wasm-bindgen`](https://github.com/rustwasm/wasm-bindgen) is a library and tool to facilitate
+high-level interactions between Wasm modules and JavaScript; it is built with Rust by
+[The Rust and WebAssembly Working Group](https://rustwasm.github.io/).
+
+Yew uses `wasm-bindgen` to interact with the browser through a number of crates:
+
+- [`js-sys`](https://crates.io/crates/js-sys)
+- [`wasm-bindgen`](https://crates.io/crates/wasm-bindgen)
+- [`wasm-bindgen-futures`](https://crates.io/crates/wasm-bindgen-futures)
+- [`web-sys`](https://crates.io/crates/web-sys)
+
+This section will explore some of these crates at a high level, to make it easier to understand
+and use `wasm-bindgen` APIs with Yew. For a more in-depth guide to `wasm-bindgen` and its associated
+crates then check out [The `wasm-bindgen` Guide](https://rustwasm.github.io/docs/wasm-bindgen/).
+
+For documentation on the above crates check out [`wasm-bindgen docs.rs`](https://rustwasm.github.io/wasm-bindgen/api/wasm_bindgen/index.html).
+
+:::tip
+Use the `wasm-bindgen` doc.rs search to find browser APIs and JavaScript types that have been imported
+over using `wasm-bindgen`.
+:::
+
+## [`wasm-bindgen`](https://crates.io/crates/wasm-bindgen)
+
+This crate provides many of the building blocks for the rest of the crates above. In this section we
+are only going to cover two main areas of the `wasm-bindgen` crate and that is the macro and some
+types/traits you will see pop up again and again.
+
+### `#[wasm_bindgen]` macro
+
+The `#[wasm_bindgen]` macro provides an interface between Rust and JavaScript, providing a system
+for translating between the two. Using this macro is more advanced, and you should not need to reach
+for it unless you are trying to use an external JavaScript library. The `js-sys` and `web-sys`
+crates expose `wasm-bindgen` definitions for built-in JavaScript types and browser APIs.
+
+Let's go over a simple example of using the `#[wasm-bindgen]` macro to import some specific flavours
+of the [`console.log`](https://developer.mozilla.org/en-US/docs/Web/API/Console/log) function.
+
+```rust ,no_run
+use wasm_bindgen::prelude::*;
+
+// First up let's take a look of binding `console.log` manually, without the
+// help of `web_sys`. Here we're writing the `#[wasm_bindgen]` annotations
+// manually ourselves, and the correctness of our program relies on the
+// correctness of these annotations!
+#[wasm_bindgen]
+extern "C" {
+
+ // Use `js_namespace` here to bind `console.log(..)` instead of just
+ // `log(..)`
+ #[wasm_bindgen(js_namespace = console)]
+ fn log(s: &str);
+
+ // The `console.log` is quite polymorphic, so we can bind it with multiple
+ // signatures. Note that we need to use `js_name` to ensure we always call
+ // `log` in JS.
+ #[wasm_bindgen(js_namespace = console, js_name = log)]
+ fn log_u32(a: u32);
+
+ // Multiple arguments too!
+ #[wasm_bindgen(js_namespace = console, js_name = log)]
+ fn log_many(a: &str, b: &str);
+}
+
+// using the imported functions!
+log("Hello from Rust!");
+log_u32(42);
+log_many("Logging", "many values!");
+```
+
+_This example was adapted from [1.2 Using console.log of The `wasm-bindgen` Guide](https://rustwasm.github.io/docs/wasm-bindgen/examples/console-log.html)_.
+
+### Simulating inheritance
+
+Inheritance between JavaScript classes is a core feature of the Javascript language and the DOM
+(Document Object Model) is designed around it. When types are imported using `wasm-bindgen` you can
+also add attributes that describe their inheritance.
+
+In Rust, this inheritance is represented using the [`Deref`](https://doc.rust-lang.org/std/ops/trait.Deref.html)
+and [`AsRef`](https://doc.rust-lang.org/std/convert/trait.AsRef.html) traits. An example of this
+might help; so say you have three types `A`, `B`, and `C` where `C` extends `B` which in turn
+extends `A`.
+
+When importing these types the `#[wasm-bindgen]` macro will implement the `Deref` and `AsRef`
+traits in the following way:
+
+- `C` can `Deref` to `B`
+- `B` can `Deref` to `A`
+- `C` can be `AsRef` to `B`
+- Both `C` & `B` can be `AsRef` to `A`
+
+These implementations allow you to call a method from `A` on an instance of `C` and to use `C` as if
+it was `&B` or `&A`.
+
+It is important to note that every single type imported using `#[wasm-bindgen]` has the same root type,
+you can think of it as the `A` in the example above, this type is [`JsValue`](#jsvalue) which has
+its section below.
+
+_[extends section in The `wasm-bindgen` Guide](https://rustwasm.github.io/docs/wasm-bindgen/reference/attributes/on-js-imports/extends.html)_
+
+### [`JsValue`](https://rustwasm.github.io/wasm-bindgen/api/wasm_bindgen/struct.JsValue.html) {#jsvalue}
+
+This is a representation of an object owned by JavaScript, this is a root catch-all type for `wasm-bindgen`.
+Any type that comes from `wasm-bindgen` is a `JsValue` and this is because JavaScript does not have
+a strong type system so any function that accepts a variable `x` does not define its type so `x` can be
+a valid JavaScript value; hence `JsValue`. If you are working with imported functions or types that
+accept a `JsValue`, then any imported value is _technically_ valid.
+
+`JsValue` can be accepted by a function but that function may still only accept certain types and this
+can lead to panics - so when using raw `wasm-bindgen` APIs check the documentation of the JavaScript
+being imported as to whether an exception (panic) will be raised if that value is not a certain type.
+
+_[`JsValue` documentation](https://rustwasm.github.io/wasm-bindgen/api/wasm_bindgen/struct.JsValue.html)._
+
+### [`JsCast`](https://rustwasm.github.io/wasm-bindgen/api/wasm_bindgen/trait.JsCast.html) {#JsCast}
+
+Rust has a strong type system and JavaScript...doesn't ð. For Rust to maintain these
+strong types but still be convenient, the WebAssembly group came up with a pretty neat trait `JsCast`.
+Its job is to help you move from one JavaScript "type" to another, which sounds vague, but it means
+that if you have one type which you know is another, then you can use the functions of `JsCast`
+to jump from one type to the other. It is a nice trait to get to know when working with `web-sys`,
+`wasm_bindgen`, `js-sys` - you will notice lots of types will implement `JsCast` from those crates.
+
+`JsCast` provides both checked and unchecked methods of casting - so that at runtime if you are
+unsure what type a certain object is you can try to cast it which returns possible failure types like
+[`Option`](https://doc.rust-lang.org/std/option/enum.Option.html) and
+[`Result`](https://doc.rust-lang.org/std/result/enum.Result.html).
+
+A common example of this in [`web-sys`](./web-sys.mdx) is when you are trying to get the
+target of an event. You might know what the target element is but the
+[`web_sys::Event`](https://rustwasm.github.io/wasm-bindgen/api/web_sys/struct.Event.html) API will always return an [`Option`](https://rustwasm.github.io/wasm-bindgen/api/web_sys/struct.Event.html#method.target).
+You will need to cast it to the element type so you can call its methods.
+
+```rust
+// need to import the trait.
+use wasm_bindgen::JsCast;
+use web_sys::{Event, EventTarget, HtmlInputElement, HtmlSelectElement};
+
+fn handle_event(event: Event) {
+ let target: EventTarget = event
+ .target()
+ .expect("I'm sure this event has a target!");
+
+ // maybe the target is a select element?
+ if let Some(select_element) = target.dyn_ref::() {
+ // do something amazing here
+ return;
+ }
+
+ // if it wasn't a select element then I KNOW it's a input element!
+ let input_element: HtmlInputElement = target.unchecked_into();
+}
+```
+
+The [`dyn_ref`](https://rustwasm.github.io/wasm-bindgen/api/wasm_bindgen/trait.JsCast.html#method.dyn_ref)
+method is a checked cast that returns an `Option<&T>` which means the original type
+can be used again if the cast failed and thus returned `None`. The
+[`dyn_into`](https://rustwasm.github.io/wasm-bindgen/api/wasm_bindgen/trait.JsCast.html#method.dyn_into)
+method will consume `self`, as per convention for `into` methods in Rust, and the type returned is
+`Result`. If the casting fails, the original `Self` value is returned in `Err`. You can try again
+or do something else with the original type.
+
+_[`JsCast` documentation](https://rustwasm.github.io/wasm-bindgen/api/wasm_bindgen/trait.JsCast.html)._
+
+### [`Closure`](https://rustwasm.github.io/wasm-bindgen/api/wasm_bindgen/closure/struct.Closure.html)
+
+The `Closure` type provides a way to transfer Rust closures to JavaScript, the closures passed to
+JavaScript must have a `'static` lifetime for soundness reasons.
+
+This type is a "handle" in the sense that whenever it is dropped it will invalidate the JS
+closure that it refers to. Any usage of the closure in JS after the Closure has been dropped will
+raise an exception.
+
+`Closure` is often used when you are working with a `js-sys` or `web-sys` API that accepts a type
+[`&js_sys::Function`](https://rustwasm.github.io/wasm-bindgen/api/js_sys/struct.Function.html).
+An example of using a `Closure` in Yew can be found in the [Using `Closure` section](../html/events.mdx#using-closure-verbose)
+on the [Events](../html/events.mdx) page.
+
+_[`Closure` documentation](https://rustwasm.github.io/wasm-bindgen/api/wasm_bindgen/closure/struct.Closure.html)._
+
+## [`js-sys`](https://crates.io/crates/js-sys)
+
+The `js-sys` crate provides bindings/imports of JavaScript's standard, built-in objects, including
+their methods and properties.
+
+This does not include any web APIs as this is what [`web-sys`](./web-sys.mdx) is for!
+
+_[`js-sys` documentation](https://rustwasm.github.io/wasm-bindgen/api/js_sys/index.html)._
+
+## [`wasm-bindgen-futures`](https://crates.io/crates/wasm-bindgen-futures)
+
+The `wasm-bindgen-futures` crate provides a bridge for working with JavaScript Promise types as a
+Rust [`Future`](https://doc.rust-lang.org/stable/std/future/trait.Future.html), and contains
+utilities to turn a rust Future into a JavaScript Promise. This can be useful when working with
+asynchronous or otherwise blocking work in Rust (wasm), and provides the ability to interoperate
+with JavaScript events and JavaScript I/O primitives.
+
+There are three main interfaces in this crate currently:
+
+1. [`JsFuture`](https://rustwasm.github.io/wasm-bindgen/api/wasm_bindgen_futures/struct.JsFuture.html) -
+ A type that is constructed with a [`Promise`](https://rustwasm.github.io/wasm-bindgen/api/js_sys/struct.Promise.html)
+ and can then be used as a `Future>`. This `Future` will resolve to `Ok` if
+ the `Promise` is resolved and `Err` if the `Promise` is rejected, containing the resolved or rejected
+ value from the `Promise` respectively.
+
+2. [`future_to_promise`](https://rustwasm.github.io/wasm-bindgen/api/wasm_bindgen_futures/fn.future_to_promise.html) -
+ Converts a Rust `Future>` into a
+ JavaScript `Promise`. The futureâs result will translate to either a resolved or rejected
+ `Promise` in JavaScript.
+
+3. [`spawn_local`](https://rustwasm.github.io/wasm-bindgen/api/wasm_bindgen_futures/fn.spawn_local.html) -
+ Spawns a `Future` on the current thread. This is the best way
+ to run a Future in Rust without sending it to JavaScript.
+
+_[`wasm-bindgen-futures` documentation](https://rustwasm.github.io/wasm-bindgen/api/wasm_bindgen_futures/index.html)._
+
+### [`spawn_local`](https://rustwasm.github.io/wasm-bindgen/api/wasm_bindgen_futures/fn.spawn_local.html)
+
+`spawn_local` is going to be the most commonly used part of the `wasm-bindgen-futures` crate in Yew
+as this helps when using libraries that have async APIs.
+
+```rust ,no_run
+use web_sys::console;
+use wasm_bindgen_futures::spawn_local;
+
+async fn my_async_fn() -> String { String::from("Hello") }
+
+spawn_local(async {
+ let mut string = my_async_fn().await;
+ string.push_str(", world!");
+ // console log "Hello, world!"
+ console::log_1(&string.into());
+});
+```
+
+Yew has also added support for futures in certain APIs, most notably you can create a
+`callback_future` which accepts an `async` block - this uses `spawn_local` internally.
+
+_[`spawn_local` documentation](https://rustwasm.github.io/wasm-bindgen/api/wasm_bindgen_futures/fn.spawn_local.html)._
diff --git a/website/versioned_docs/version-0.21/concepts/basic-web-technologies/web-sys.mdx b/website/versioned_docs/version-0.21/concepts/basic-web-technologies/web-sys.mdx
new file mode 100644
index 00000000000..daffd9ad2b6
--- /dev/null
+++ b/website/versioned_docs/version-0.21/concepts/basic-web-technologies/web-sys.mdx
@@ -0,0 +1,245 @@
+---
+title: 'web-sys'
+description: 'The web-sys crate provides bindings for Web APIs.'
+---
+
+import Tabs from '@theme/Tabs'
+import TabItem from '@theme/TabItem'
+
+The [`web-sys` crate](https://crates.io/crates/web-sys) provides bindings for Web APIs. This is
+procedurally generated from browser WebIDL which is why some names are so long and why some types are vague.
+
+## Features in `web-sys`
+
+The `web-sys` crate with all of its features enabled can add lots of bloat to a Wasm application.
+To get around this issue most types are feature gated so that you only include the types
+you require for your application. Yew enables several features from `web-sys` and
+exposes some types in its public API. You will often need to add `web-sys` as a dependency yourself.
+
+## Inheritance in `web-sys`
+
+In the [Simulating inheritance section](./wasm-bindgen.mdx#simulating-inheritance) you can read how in
+general Rust provides an approach to simulate inheritance in JavaScript. This is very important in
+`web-sys` as understanding what methods are available on a type means understanding its inheritance.
+
+This section is going to look at a specific element and list out its inheritance using Rust by
+calling [`Deref::deref`](https://doc.rust-lang.org/std/ops/trait.Deref.html#tymethod.deref) until
+the value is [`JsValue`](./wasm-bindgen.mdx#jsvalue):
+
+```rust
+use std::ops::Deref;
+use web_sys::{
+ Element,
+ EventTarget,
+ HtmlElement,
+ HtmlTextAreaElement,
+ Node,
+};
+
+fn inheritance_of_text_area(text_area: HtmlTextAreaElement) {
+ // HtmlTextAreaElement is