website: add 0.22 to version selector, sync next with 0.22 (#3960)

Author: Madoshakalaka

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

@@ -107,7 +107,7 @@ pub struct ListItemProps {
     value: String,
 }
 
-#[function_component]
+#[component]
 fn ListItem(props: &ListItemProps) -> Html {
     let ListItemProps { value } = props.clone();
     html! {
@@ -122,7 +122,7 @@ pub struct Props {
     pub children: ChildrenWithProps<ListItem>,
 }
 
-#[function_component]
+#[component]
 fn List(props: &Props) -> Html {
     let modified_children = props.children.iter().map(|mut item| {
             let mut props = Rc::make_mut(&mut item.props);

website/i18n/ja/docusaurus-plugin-content-docs/current/advanced-topics/portals.mdx

@@ -22,7 +22,7 @@ pub struct ModalProps {
     pub children: Html,
 }
 
-#[function_component]
+#[component]
 fn Modal(props: &ModalProps) -> Html {
     let modal_host = gloo::utils::document()
         .get_element_by_id("modal_host")

website/i18n/ja/docusaurus-plugin-content-docs/current/advanced-topics/server-side-rendering.mdx

@@ -24,7 +24,7 @@ Yewコンポーネントをサーバーサイドでレンダリングするに
 use yew::prelude::*;
 use yew::ServerRenderer;
 
-#[function_component]
+#[component]
 fn App() -> Html {
     html! {<div>{"Hello, World!"}</div>}
 }
@@ -112,7 +112,7 @@ SSR出力（静的HTML）をブラウザが初期レンダリングした後、
 use yew::prelude::*;
 use yew::Renderer;
 
-#[function_component]
+#[component]
 fn App() -> Html {
     html! {<div>{"Hello, World!"}</div>}
 }
@@ -138,7 +138,7 @@ Yewは `yew::LocalServerRenderer` を使用してシングルスレッドでの
 use yew::prelude::*;
 use yew::LocalServerRenderer;
 
-#[function_component]
+#[component]
 fn App() -> Html {
     use yew_router::prelude::*;
 

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

@@ -23,7 +23,7 @@ struct Theme {
     background: String,
 }
 
-#[function_component]
+#[component]
 pub fn App() -> Html {
     let ctx = use_state(|| Theme {
         foreground: "#000000".to_owned(),
@@ -38,7 +38,7 @@ pub fn App() -> Html {
 }
 
 // highlight-start
-#[function_component]
+#[component]
 pub fn ThemedButtonHOC() -> Html {
     let theme = use_context::<Theme>().expect("no ctx found");
 

website/i18n/ja/docusaurus-plugin-content-docs/current/concepts/contexts.mdx

@@ -19,7 +19,7 @@ description: 'コンテキストを使用して深くネストされたデータ
 以下の例を考えてみましょう。これは props を介してテーマを渡しています：
 
 ```rust
-use yew::{html, Component, Context, Html, Properties, function_component};
+use yew::{html, Component, Context, Html, Properties, component};
 
 #[derive(Clone, PartialEq)]
 pub struct Theme {
@@ -32,7 +32,7 @@ pub struct NavbarProps {
     theme: Theme,
 }
 
-#[function_component]
+#[component]
 fn Navbar(props: &NavbarProps) -> Html {
     html! {
         <div>
@@ -52,22 +52,22 @@ pub struct ThemeProps {
     children: Html,
 }
 
-#[function_component]
+#[component]
 fn Title(_props: &ThemeProps) -> Html {
     html! {
         // impl
     }
 }
 
-#[function_component]
+#[component]
 fn NavButton(_props: &ThemeProps) -> Html {
     html! {
         // impl
     }
 }
 
 /// アプリのルート
-#[function_component]
+#[component]
 fn App() -> Html {
     let theme = Theme {
         foreground: "yellow".to_owned(),
@@ -102,7 +102,7 @@ struct Theme {
 }
 
 /// メインコンポーネント
-#[function_component]
+#[component]
 pub fn App() -> Html {
     let ctx = use_state(|| Theme {
         foreground: "#000000".to_owned(),
@@ -121,7 +121,7 @@ pub fn App() -> Html {
 
 /// ツールバー
 /// このコンポーネントはコンテキストにアクセスできます。
-#[function_component]
+#[component]
 pub fn Toolbar() -> Html {
     html! {
         <div>
@@ -133,7 +133,7 @@ pub fn Toolbar() -> Html {
 /// `Toolbar` 内に配置されたボタン
 /// このコンポーネントは、コンポーネントツリー内の `ThemeContextProvider` の子コンポーネントであるため、
 /// コンテキストにアクセスできます。
-#[function_component]
+#[component]
 pub fn ThemedButton() -> Html {
     let theme = use_context::<Theme>().expect("no ctx found");
 

website/i18n/ja/docusaurus-plugin-content-docs/current/concepts/function-components/callbacks.mdx

@@ -22,14 +22,14 @@ let result = cb.emit(String::from("Bob"));  // コールバック関数を呼び
 yew で一般的なパターンは、コールバック関数を作成し、それをプロパティとして子コンポーネントに渡すことです。
 
 ```rust
-use yew::{function_component, html, Html, Properties, Callback};
+use yew::{component, html, Html, Properties, Callback};
 
 #[derive(Properties, PartialEq)]
 pub struct Props {
     pub on_name_entry: Callback<String>,
 }
 
-#[function_component]
+#[component]
 fn HelloWorld(props: &Props) -> Html {
 
     props.on_name_entry.emit(String::from("Bob"));
@@ -38,7 +38,7 @@ fn HelloWorld(props: &Props) -> Html {
 }
 
 // 次にプロパティ (Props) を提供します
-#[function_component]
+#[component]
 fn App() -> Html {
     let on_name_entry: Callback<String> = Callback::from(move |name: String| {
         let greeting = format!("Hey, {}!", name);
@@ -57,9 +57,9 @@ fn App() -> Html {
 例えば、ここではユーザーがボタンをクリックしたときに呼び出されるコールバック関数を定義します：
 
 ```rust
-use yew::{function_component, html, Html, Properties, Callback};
+use yew::{component, html, Html, Properties, Callback};
 
-#[function_component]
+#[component]
 fn App() -> Html {
     let onclick = Callback::from(move |_| {
         let greeting = String::from("Hi there");

website/i18n/ja/docusaurus-plugin-content-docs/current/concepts/function-components/children.mdx

@@ -5,9 +5,9 @@ title: '子要素 (Children)'
 `Children` は特別なプロパティタイプで、HTMLの子要素のようにネストされた `Html` を受け取ることができます。
 
 ```rust
-use yew::{function_component, html, Html, Properties};
+use yew::{component, html, Html, Properties};
 
-#[function_component]
+#[component]
 fn App() -> Html {
     html! {
         // highlight-start
@@ -25,7 +25,7 @@ pub struct Props {
     pub children: Html, // `children` キーは重要です！
 }
 
-#[function_component]
+#[component]
 fn HelloWorld(props: &Props) -> Html {
     html! {
         <div class="very-stylized-container">

website/i18n/ja/docusaurus-plugin-content-docs/current/concepts/function-components/generics.mdx

@@ -1,16 +1,16 @@
 ---
 title: 'ジェネリックコンポーネント'
-description: '関数コンポーネントの #[function_component] 属性'
+description: '関数コンポーネントの #[component] 属性'
 ---
 
 import Tabs from '@theme/Tabs'
 import TabItem from '@theme/TabItem'
 
-`#[function_component]` 属性は、ジェネリックコンポーネントを作成するためのジェネリック関数にも適用されます。
+`#[component]` 属性は、ジェネリックコンポーネントを作成するためのジェネリック関数にも適用されます。
 
 ```rust
 use std::fmt::Display;
-use yew::{function_component, html, Properties, Html};
+use yew::{component, html, Properties, Html};
 
 #[derive(Properties, PartialEq)]
 pub struct Props<T>
@@ -20,7 +20,7 @@ where
     data: T,
 }
 
-#[function_component]
+#[component]
 pub fn MyGenericComponent<T>(props: &Props<T>) -> Html
 where
     T: PartialEq + Clone + Into<Html>,

website/i18n/ja/docusaurus-plugin-content-docs/current/concepts/function-components/hooks/custom-hooks.mdx

@@ -15,7 +15,7 @@ use gloo::utils::window;
 use std::mem::drop;
 
 
-#[function_component(ShowStorageChanged)]
+#[component(ShowStorageChanged)]
 pub fn show_storage_changed() -> Html {
     let state_storage_changed = use_state(|| false);
 

website/i18n/ja/docusaurus-plugin-content-docs/current/concepts/function-components/introduction.mdx

@@ -27,18 +27,18 @@ slug: /concepts/function-components
 
 ## 関数コンポーネントの作成
 
-関数コンポーネントを作成するには、関数に `#[function_component]` 属性を追加します。慣例として、関数の名前は PascalCase を使用し、`html!` マクロ内の通常の html 要素と対比させます。
+関数コンポーネントを作成するには、関数に `#[component]` 属性を追加します。慣例として、関数の名前は PascalCase を使用し、`html!` マクロ内の通常の html 要素と対比させます。
 
 ```rust
-use yew::{function_component, html, Html};
+use yew::{component, html, Html};
 
-#[function_component]
+#[component]
 fn HelloWorld() -> Html {
     html! { "Hello world" }
 }
 
 // そして他の場所で、`html!` 内でコンポーネントを使用できます
-#[function_component]
+#[component]
 fn App() -> Html {
     html! { <HelloWorld /> }
 }