fix: website lint issues - remove trailing spaces and add missing newlines

Author: Madoshakalaka

website/i18n/ja/docusaurus-plugin-content-docs/version-0.21/advanced-topics/children.mdx

@@ -0,0 +1,318 @@
+---
+title: 'Children'
+---
+
+:::caution
+
+Inspecting and manipulating `Children` can often result in surprising and hard-to-explain behaviours in your application.
+This can lead to edge cases and often does not yield expected result.
+You should consider other approaches if you are trying to manipulate `Children`.
+
+Yew supports using `Html` as the type of the children prop.
+You should use `Html` as children if you do not need `Children` or `ChildrenRenderer`.
+It doesn't have the drawbacks of `Children` and has a lower performance overhead.
+
+:::
+
+## General usage
+
+_Most of the time,_ when allowing a component to have children, you don't care
+what type of children the component has. In such cases, the below example will
+suffice.
+
+```rust
+use yew::{html, Component, Context, Html, Properties};
+
+#[derive(Properties, PartialEq)]
+pub struct ListProps {
+    #[prop_or_default]
+    pub children: Html,
+}
+
+pub struct List;
+
+impl Component for List {
+    type Message = ();
+    type Properties = ListProps;
+
+    fn create(_ctx: &Context<Self>) -> Self {
+        Self
+    }
+
+    fn view(&self, ctx: &Context<Self>) -> Html {
+        html! {
+            <div class="list">
+                {ctx.props().children.clone()}
+            </div>
+        }
+    }
+}
+```
+
+## 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<T>`.
+
+```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 {
+        Self
+    }
+
+    fn view(&self, _ctx: &Context<Self>) -> Html {
+        html! {
+            { "item" }
+        }
+    }
+}
+
+#[derive(Properties, PartialEq)]
+pub struct ListProps {
+    #[prop_or_default]
+    pub children: ChildrenWithProps<Item>,
+}
+
+pub struct List;
+
+impl Component for List {
+    type Message = ();
+    type Properties = ListProps;
+
+    fn create(_ctx: &Context<Self>) -> Self {
+        Self
+    }
+
+    fn view(&self, ctx: &Context<Self>) -> Html {
+        html! {
+            <div class="list">
+                { for ctx.props().children.iter() }
+            </div>
+        }
+    }
+}
+```
+
+## 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! {
+        <span>
+            {value}
+        </span>
+    }
+}
+
+#[derive(PartialEq, Properties)]
+pub struct Props {
+    pub children: ChildrenWithProps<ListItem>,
+}
+
+#[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! {
+    <List>
+        <ListItem value="a" />
+        <ListItem value="b" />
+        <ListItem value="c" />
+    </List>
+};
+```
+
+### 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 {
+        Self
+    }
+
+    fn view(&self, _ctx: &Context<Self>) -> Html {
+        html! {
+            { "Primary" }
+        }
+    }
+}
+
+pub struct Secondary;
+
+impl Component for Secondary {
+    type Message = ();
+    type Properties = ();
+
+    fn create(_ctx: &Context<Self>) -> Self {
+        Self
+    }
+
+    fn view(&self, _ctx: &Context<Self>) -> Html {
+        html! {
+            { "Secondary" }
+        }
+    }
+}
+
+#[derive(Clone, derive_more::From, PartialEq)]
+pub enum Item {
+    Primary(VChild<Primary>),
+    Secondary(VChild<Secondary>),
+}
+
+// Now, we implement `Into<Html>` so that yew knows how to render `Item`.
+#[allow(clippy::from_over_into)]
+impl Into<Html> 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<Item>,
+}
+
+pub struct List;
+
+impl Component for List {
+    type Message = ();
+    type Properties = ListProps;
+
+    fn create(_ctx: &Context<Self>) -> Self {
+        Self
+    }
+
+    fn view(&self, ctx: &Context<Self>) -> Html {
+        html! {
+            <div class="list">
+                { for ctx.props().children.iter() }
+            </div>
+        }
+    }
+}
+```
+
+### 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 {
+        Self
+    }
+
+    fn view(&self, _ctx: &Context<Self>) -> Html {
+        html! {
+            { "sidebar" }
+        }
+    }
+}
+
+#[derive(Properties, PartialEq)]
+pub struct PageProps {
+    #[prop_or_default]
+    pub sidebar: Option<VChild<PageSideBar>>,
+}
+
+struct Page;
+
+impl Component for Page {
+    type Message = ();
+    type Properties = PageProps;
+
+    fn create(_ctx: &Context<Self>) -> Self {
+        Self
+    }
+
+    fn view(&self, ctx: &Context<Self>) -> Html {
+        html! {
+            <div class="page">
+                { ctx.props().sidebar.clone().map(Html::from).unwrap_or_default() }
+                // ... page content
+            </div>
+        }
+    }
+}
+
+// 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! {
+            <Page sidebar={html_nested! {
+                <PageSideBar />
+            }} />
+        }
+    } else {
+        // Page without sidebar
+        html! {
+            <Page />
+        }
+    }
+}
+```
+
+## Further Reading
+
+- For a real-world example of this pattern, check out the yew-router source code. For a more advanced example, check out the [nested-list example](https://github.com/yewstack/yew/tree/master/examples/nested_list) in the main yew repository.

website/i18n/ja/docusaurus-plugin-content-docs/version-0.21/advanced-topics/how-it-works.mdx

@@ -1,8 +1,74 @@
 ---
-title: How it works
-description: Low level details about the framework
+title: 'How it works'
+description: 'Low level details about the framework'
 ---
 
-# 低レベルなライブラリの中身
+# Low-level library internals
 
-コンポーネントのライフサイクルの状態機械、VDOM の異なるアルゴリズム
+## Under the hood of the `html!` macro
+
+The `html!` macro turns code written in a custom HTML-like syntax into valid Rust code. Using this
+macro is not necessary for developing Yew applications, but it is recommended. The code generated
+by this macro makes use of the public Yew library API which can be used directly if you wish. Note
+that some methods used are undocumented intentionally to avoid accidental misuse. With each
+update of `yew-macro`, the generated code will be more efficient and handle any breaking changes
+without many (if any) modifications to the `html!` syntax.
+
+Because the `html!` macro allows you to write code in a declarative style, your UI layout code will
+closely match the HTML that is generated for the page. This becomes increasingly useful as your
+application gets more interactive and your codebase gets larger. Rather than manually writing
+all of the code to manipulate the DOM yourself, the macro will handle it for you.
+
+Using the `html!` macro can feel pretty magical, but it has nothing to hide. If you are curious about
+how it works, try expanding the `html!` macro calls in your program. There is a useful command called
+`cargo expand` which allows you to see the expansion of Rust macros. `cargo expand` does not ship with
+`cargo` by default so you will need to install it with `cargo install cargo-expand` if you have not
+already. [Rust-Analyzer](https://rust-analyzer.github.io/) also provides a mechanism for
+[obtaining macro output from within an IDE](https://rust-analyzer.github.io/manual.html#expand-macro-recursively).
+
+Output from the `html!` macro is often pretty terse! This is a feature: machine-generated code can
+sometimes clash with other code in an application. To prevent issues, `proc_macro`
+"hygiene" is adhered to. Some examples include:
+
+1. Instead of using `yew::<module>` the macro generates `::yew::<module>` 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, `<Type as Trait>` 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)