diff --git a/CHANGELOG.md b/CHANGELOG.md index e9fcb6e8a80..0f2c0d9168f 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,132 @@ # Changelog +## ✹ yew **0.20.0** *(2022-11-xx)* + +#### Changelog + +- #### 🛠 Fixes + + - Fix onsubmit event type in docs. [[@Allan](https://github.com/Allan), [#2926](https://github.com/yewstack/yew/pull/2926)] + - Fix issues with tuples in closing tag. [[@Muhammad Hamza](https://github.com/Muhammad Hamza), [#2886](https://github.com/yewstack/yew/pull/2886)] + - Fix checked property being reset. [[@WorldSEnder](https://github.com/WorldSEnder), [#2907](https://github.com/yewstack/yew/pull/2907)] + - Fix VList Stream in SSR. [[@Kaede Hoshikawa](https://github.com/Kaede Hoshikawa), [#2801](https://github.com/yewstack/yew/pull/2801)] + - Fixed `NodeRef` not being implicitly cloned with components. [[@wdcocq](https://github.com/wdcocq), [#2775](https://github.com/yewstack/yew/pull/2775)] + - Attributes: Fix apply_diff_index_maps. [[@Dietmar Maurer](https://github.com/Dietmar Maurer), [#2653](https://github.com/yewstack/yew/pull/2653)] + - Fix bubbling of events originating in shadow dom. [[@WorldSEnder](https://github.com/WorldSEnder), [#2627](https://github.com/yewstack/yew/pull/2627)] + - Fix some Hook edge cases. [[@Kaede Hoshikawa](https://github.com/Kaede Hoshikawa), [#2592](https://github.com/yewstack/yew/pull/2592)] + - Fix issue with node refs and hydration. [[@WorldSEnder](https://github.com/WorldSEnder), [#2597](https://github.com/yewstack/yew/pull/2597)] + - Fix macro hygiene issues. [[@Muhammad Hamza](https://github.com/Muhammad Hamza), [#2585](https://github.com/yewstack/yew/pull/2585)] + - Fix casing of dynamic tags. [[@WorldSEnder](https://github.com/WorldSEnder), [#2578](https://github.com/yewstack/yew/pull/2578)] + - Automatically convert closure to callback for component properties. [[@Finn Bear](https://github.com/Finn Bear), [#2554](https://github.com/yewstack/yew/pull/2554)] + - Fix a problem with NodeRefs and VTags, ref. [[@WorldSEnder](https://github.com/WorldSEnder), [#2279](https://github.com/yewstack/yew/pull/2279)] + - Fix defaulted type parameter.. [[@Kaede Hoshikawa](https://github.com/Kaede Hoshikawa), [#2284](https://github.com/yewstack/yew/pull/2284)] + - Use Ref::filter_map if rustc is later than 1.63. [[@Kaede Hoshikawa](https://github.com/Kaede Hoshikawa), [#2904](https://github.com/yewstack/yew/pull/2904)] + - Evaluate props in the order they're defined. [[@Muhammad Hamza](https://github.com/Muhammad Hamza), [#2887](https://github.com/yewstack/yew/pull/2887)] + - Context: Avoid storing a copy of children. [[@Dietmar Maurer](https://github.com/Dietmar Maurer), [#2885](https://github.com/yewstack/yew/pull/2885)] + - Various improvements to Classes, oriented around reducing allocations. [[@Nathan West](https://github.com/Nathan West), [#2870](https://github.com/yewstack/yew/pull/2870)] + - Resume Suspension upon unmount. [[@Kaede Hoshikawa](https://github.com/Kaede Hoshikawa), [#2874](https://github.com/yewstack/yew/pull/2874)] + - Make fn update() re-render the component by default. [[@Cecile Tonglet](https://github.com/Cecile Tonglet), [#2786](https://github.com/yewstack/yew/pull/2786)] + - Do not detach child elements if parent element is about to be detached. [[@Kaede Hoshikawa](https://github.com/Kaede Hoshikawa), [#2420](https://github.com/yewstack/yew/pull/2420)] + - remove some unsafes by using atomics. [[@WorldSEnder](https://github.com/WorldSEnder), [#2186](https://github.com/yewstack/yew/pull/2186)] + - `use_prepared_state` & `use_transitive_state`. [[@Kaede Hoshikawa](https://github.com/Kaede Hoshikawa), [#2650](https://github.com/yewstack/yew/pull/2650)] + - Silence some warnings from derive(Properties). [[@WorldSEnder](https://github.com/WorldSEnder), [#2266](https://github.com/yewstack/yew/pull/2266)] + - onsubmit should be a SubmitEvent. [[@Muhammad Hamza](https://github.com/Muhammad Hamza), [#2816](https://github.com/yewstack/yew/pull/2816)] + +- #### ⚡ Features + + - Add VNode::from_html_unchecked. [[@Muhammad Hamza](https://github.com/Muhammad Hamza), [#2842](https://github.com/yewstack/yew/pull/2842)] + - Make Yew lints opt-in. [[@Muhammad Hamza](https://github.com/Muhammad Hamza), [#2882](https://github.com/yewstack/yew/pull/2882)] + - Allow skipping a callback when reforming. [[@Jens Reimann](https://github.com/Jens Reimann), [#2864](https://github.com/yewstack/yew/pull/2864)] + - Polled SSR Stream. [[@Kaede Hoshikawa](https://github.com/Kaede Hoshikawa), [#2824](https://github.com/yewstack/yew/pull/2824)] + - Add send_stream method for Scope. [[@laizy](https://github.com/laizy), [#2619](https://github.com/yewstack/yew/pull/2619)] + - Allow functions returning unit in `use_effect`. [[@Muhammad Hamza](https://github.com/Muhammad Hamza), [#2849](https://github.com/yewstack/yew/pull/2849)] + - Configurable Runtime. [[@Kaede Hoshikawa](https://github.com/Kaede Hoshikawa), [#2772](https://github.com/yewstack/yew/pull/2772)] + - Pinned Channels. [[@Kaede Hoshikawa](https://github.com/Kaede Hoshikawa), [#2811](https://github.com/yewstack/yew/pull/2811)] + - Bind to properties instead of attributes by default. [[@Muhammad Hamza](https://github.com/Muhammad Hamza), [#2819](https://github.com/yewstack/yew/pull/2819)] + - Convert nightly from a feature flag to a compiler flag. [[@Muhammad Hamza](https://github.com/Muhammad Hamza), [#2827](https://github.com/yewstack/yew/pull/2827)] + - Reduce SSR Buffers in VList. [[@Kaede Hoshikawa](https://github.com/Kaede Hoshikawa), [#2826](https://github.com/yewstack/yew/pull/2826)] + - Allow keywords after dash in element and attribute names. [[@Muhammad Hamza](https://github.com/Muhammad Hamza), [#2820](https://github.com/yewstack/yew/pull/2820)] + - Replace custom logging by tracing. [[@WorldSEnder](https://github.com/WorldSEnder), [#2814](https://github.com/yewstack/yew/pull/2814)] + - Implement sleep and interval for Yew Platform. [[@Kaede Hoshikawa](https://github.com/Kaede Hoshikawa), [#2784](https://github.com/yewstack/yew/pull/2784)] + - Remove component NodeRef. [[@Muhammad Hamza](https://github.com/Muhammad Hamza), [#2783](https://github.com/yewstack/yew/pull/2783)] + - Prepared States dependency should be Reference Counted. [[@Kaede Hoshikawa](https://github.com/Kaede Hoshikawa), [#2769](https://github.com/yewstack/yew/pull/2769)] + - Document features automatically.. [[@Kaede Hoshikawa](https://github.com/Kaede Hoshikawa), [#2780](https://github.com/yewstack/yew/pull/2780)] + - Streamed SSR Response. [[@Kaede Hoshikawa](https://github.com/Kaede Hoshikawa), [#2697](https://github.com/yewstack/yew/pull/2697)] + - Nightly features. [[@Muhammad Hamza](https://github.com/Muhammad Hamza), [#2743](https://github.com/yewstack/yew/pull/2743)] + - Allow VNode props to be converted to Children.. [[@Kaede Hoshikawa](https://github.com/Kaede Hoshikawa), [#2749](https://github.com/yewstack/yew/pull/2749)] + - Redo derive(Properties), take 2. [[@WorldSEnder](https://github.com/WorldSEnder), [#2729](https://github.com/yewstack/yew/pull/2729)] + - `Callback::reform()` should return `Callback`. [[@orzogc](https://github.com/orzogc), [#2719](https://github.com/yewstack/yew/pull/2719)] + - Span hygiene and editor UX. [[@WorldSEnder](https://github.com/WorldSEnder), [#2702](https://github.com/yewstack/yew/pull/2702)] + - Block props update during hydration. [[@Kaede Hoshikawa](https://github.com/Kaede Hoshikawa), [#2665](https://github.com/yewstack/yew/pull/2665)] + - Point to `callback_future` in `callback` docs. [[@Shadlock0133](https://github.com/Shadlock0133), [#2674](https://github.com/yewstack/yew/pull/2674)] + - Change access to VList children to a wrapper. [[@WorldSEnder](https://github.com/WorldSEnder), [#2673](https://github.com/yewstack/yew/pull/2673)] + - Partially undo #2673, different approach for the DerefMut impl of VList. [[@WorldSEnder](https://github.com/WorldSEnder), [#2692](https://github.com/yewstack/yew/pull/2692)] + - Rework a bunch of cfg(feature) flags to be more principled. [[@WorldSEnder](https://github.com/WorldSEnder), [#2666](https://github.com/yewstack/yew/pull/2666)] + - Delay Hydration second render until all assistive nodes have been removed. [[@Kaede Hoshikawa](https://github.com/Kaede Hoshikawa), [#2629](https://github.com/yewstack/yew/pull/2629)] + - Allow to consume deps in use_callback. [[@Jet Li](https://github.com/Jet Li), [#2617](https://github.com/yewstack/yew/pull/2617)] + - Add `use_future` hook to make consuming futures as suspense easier. [[@Muhammad Hamza](https://github.com/Muhammad Hamza), [#2609](https://github.com/yewstack/yew/pull/2609)] + - Add the ability to use non-literal string as attribute names. [[@Muhammad Hamza](https://github.com/Muhammad Hamza), [#2593](https://github.com/yewstack/yew/pull/2593)] + - Introduce a dedicated use_force_update hook. [[@WorldSEnder](https://github.com/WorldSEnder), [#2586](https://github.com/yewstack/yew/pull/2586)] + - Impl ImplicitClone for Rc where T: Sized. [[@Nano](https://github.com/Nano), [#2594](https://github.com/yewstack/yew/pull/2594)] + - SSR Hydration. [[@Kaede Hoshikawa](https://github.com/Kaede Hoshikawa), [#2552](https://github.com/yewstack/yew/pull/2552)] + - Add use_callback hook. [[@Jet Li](https://github.com/Jet Li), [#2566](https://github.com/yewstack/yew/pull/2566)] + - Introduce additional information in SSR artifact to facilitate Hydration. [[@Kaede Hoshikawa](https://github.com/Kaede Hoshikawa), [#2540](https://github.com/yewstack/yew/pull/2540)] + - Scoped event handlers. [[@WorldSEnder](https://github.com/WorldSEnder), [#2510](https://github.com/yewstack/yew/pull/2510)] + - An ever Increasing Component ID. [[@Kaede Hoshikawa](https://github.com/Kaede Hoshikawa), [#2537](https://github.com/yewstack/yew/pull/2537)] + - Prevents Fallback UI from becoming suspended. [[@Kaede Hoshikawa](https://github.com/Kaede Hoshikawa), [#2532](https://github.com/yewstack/yew/pull/2532)] + - `#[cfg(feature = "render")]` and `yew::Renderer`. [[@Kaede Hoshikawa](https://github.com/Kaede Hoshikawa), [#2498](https://github.com/yewstack/yew/pull/2498)] + - Introduce explicit internal datastructures modeling dom state. [[@WorldSEnder](https://github.com/WorldSEnder), [#2330](https://github.com/yewstack/yew/pull/2330)] + - Improve AnyScope API. [[@Aaron Erhardt](https://github.com/Aaron Erhardt), [#2445](https://github.com/yewstack/yew/pull/2445)] + - Automatic Message Batching. [[@Kaede Hoshikawa](https://github.com/Kaede Hoshikawa), [#2421](https://github.com/yewstack/yew/pull/2421)] + - Add Other variant to the ListenerKind. [[@Alexander Mescheryakov](https://github.com/Alexander Mescheryakov), [#2417](https://github.com/yewstack/yew/pull/2417)] + - Function Components & Hooks V2. [[@Kaede Hoshikawa](https://github.com/Kaede Hoshikawa), [#2401](https://github.com/yewstack/yew/pull/2401)] + - Add ContextHandle in yew::prelude. [[@Anuvrat Singh](https://github.com/Anuvrat Singh), [#2372](https://github.com/yewstack/yew/pull/2372)] + - Separate scheduler rendered call from create and render. [[@Kaede Hoshikawa](https://github.com/Kaede Hoshikawa), [#2374](https://github.com/yewstack/yew/pull/2374)] + - Update to edition 2021. [[@Muhammad Hamza](https://github.com/Muhammad Hamza), [#2354](https://github.com/yewstack/yew/pull/2354)] + - Server-side Rendering (without hydration). [[@Kaede Hoshikawa](https://github.com/Kaede Hoshikawa), [#2335](https://github.com/yewstack/yew/pull/2335)] + - Make BaseComponent Sealed.. [[@Kaede Hoshikawa](https://github.com/Kaede Hoshikawa), [#2359](https://github.com/yewstack/yew/pull/2359)] + - Remove start_app_as_body.. [[@Kaede Hoshikawa](https://github.com/Kaede Hoshikawa), [#2346](https://github.com/yewstack/yew/pull/2346)] + - Bump minimal supported rust version (MSRV) to 1.56. [[@Muhammad Hamza](https://github.com/Muhammad Hamza), [#2334](https://github.com/yewstack/yew/pull/2334)] + - Suspense Support. [[@Kaede Hoshikawa](https://github.com/Kaede Hoshikawa), [#2212](https://github.com/yewstack/yew/pull/2212)] + - make layout testing code public. [[@Muhammad Hamza](https://github.com/Muhammad Hamza), [#2310](https://github.com/yewstack/yew/pull/2310)] + - Refactor and simplify `Callback`. [[@Muhammad Hamza](https://github.com/Muhammad Hamza), [#2301](https://github.com/yewstack/yew/pull/2301)] + - Add pending event listener on the VTag. [[@Alexander Mescheryakov](https://github.com/Alexander Mescheryakov), [#2300](https://github.com/yewstack/yew/pull/2300)] + - constify VList::new. [[@Alexander Mescheryakov](https://github.com/Alexander Mescheryakov), [#2293](https://github.com/yewstack/yew/pull/2293)] + - Allow `function_component` creation based on function name. [[@Muhammad Hamza](https://github.com/Muhammad Hamza), [#2292](https://github.com/yewstack/yew/pull/2292)] + - Implement IntoPropValue for Rc. [[@Zachary Stewart](https://github.com/Zachary Stewart), [#2285](https://github.com/yewstack/yew/pull/2285)] + - Raw field names in property structs. [[@WorldSEnder](https://github.com/WorldSEnder), [#2273](https://github.com/yewstack/yew/pull/2273)] + +## ✹ yew-router **0.17.0** *(2022-11-xx)* + +#### Changelog + +- #### 🛠 Fixes + + - Fix basename handling in router. [[@Muhammad Hamza](https://github.com/Muhammad Hamza), [#2297](https://github.com/yewstack/yew/pull/2297)] + +- #### ⚡ Features + + - Simple `NodeRef` passing to `` for yew-router. [[@Athan Clark](https://github.com/Athan Clark), [#2877](https://github.com/yewstack/yew/pull/2877)] + - Make Switch to accept a closure as render function directly. [[@Kaede Hoshikawa](https://github.com/Kaede Hoshikawa), [#2659](https://github.com/yewstack/yew/pull/2659)] + - `#[cfg(feature = "render")]` and `yew::Renderer`. [[@Kaede Hoshikawa](https://github.com/Kaede Hoshikawa), [#2498](https://github.com/yewstack/yew/pull/2498)] + - Includes query parameters in rendered Link component. [[@Yuki Kodama](https://github.com/Yuki Kodama), [#2464](https://github.com/yewstack/yew/pull/2464)] + - Update to edition 2021. [[@Muhammad Hamza](https://github.com/Muhammad Hamza), [#2354](https://github.com/yewstack/yew/pull/2354)] + - Support named wildcards when deriving Routable.. [[@Jonathan Bailey](https://github.com/Jonathan Bailey), [#2345](https://github.com/yewstack/yew/pull/2345)] + - Add HashRouter, basename and use gloo-history. [[@Kaede Hoshikawa](https://github.com/Kaede Hoshikawa), [#2239](https://github.com/yewstack/yew/pull/2239)] + + +## ✹ yew-agent **0.2.0** *(2022-11-xx)* + +#### Changelog + +- #### ⚡ Features + + - add `use_bridge` docs. [[@Shrey Sudhir](https://github.com/Shrey Sudhir), [#2722](https://github.com/yewstack/yew/pull/2722)] + - Update to edition 2021. [[@Muhammad Hamza](https://github.com/Muhammad Hamza), [#2354](https://github.com/yewstack/yew/pull/2354)] + - Move yew-agent to gloo. [[@Muhammad Hamza](https://github.com/Muhammad Hamza), [#2326](https://github.com/yewstack/yew/pull/2326)] + - Implement PrivateAgent. [[@Kaede Hoshikawa](https://github.com/Kaede Hoshikawa), [#2318](https://github.com/yewstack/yew/pull/2318)] + - Remove context & job agent. [[@Kaede Hoshikawa](https://github.com/Kaede Hoshikawa), [#2295](https://github.com/yewstack/yew/pull/2295)] + ## ✹ yew **0.19.0** *(2021-11-26)* #### Changelog diff --git a/packages/yew/Cargo.toml b/packages/yew/Cargo.toml index e609be9c194..366880592ec 100644 --- a/packages/yew/Cargo.toml +++ b/packages/yew/Cargo.toml @@ -7,12 +7,12 @@ authors = [ "Justin Starry ", ] repository = "https://github.com/yewstack/yew" -homepage = "https://github.com/yewstack/yew" +homepage = "https://yew.rs" documentation = "https://docs.rs/yew/" license = "MIT OR Apache-2.0" keywords = ["web", "webasm", "javascript"] categories = ["gui", "wasm", "web-programming"] -description = "A framework for making client-side single-page apps" +description = "A framework for creating reliable and efficient web applications" readme = "../../README.md" rust-version = "1.60.0" diff --git a/tools/changelog/src/create_log_line.rs b/tools/changelog/src/create_log_line.rs index 25961e7e88f..b18a1164120 100644 --- a/tools/changelog/src/create_log_line.rs +++ b/tools/changelog/src/create_log_line.rs @@ -74,11 +74,19 @@ pub fn create_log_line( .with_context(|| format!("Could not find GitHub labels for issue: {}", issue_id))?; let is_issue_for_this_package = issue_labels - .into_iter() + .iter() .any(|label| package_labels.contains(&label.as_str())); if !is_issue_for_this_package { println!("Issue {issue_id} is not for {package_labels:?} packages"); + let leftovers = issue_labels.iter().filter(|label| { + !(label.starts_with("A-") || *label == "documentation" || *label == "meta") + }); + let count = leftovers.count(); + if count > 0 { + println!("Potentially invalidly labeled issue: {issue_id}. Neither A-* (area), documentation nor meta labels found. \ + inspect/re-tag at https://github.com/yewstack/yew/issues/{issue_id}"); + } return Ok(None); } diff --git a/website/blog/2022-11-24-release-0-20.md b/website/blog/2022-11-24-release-0-20.md new file mode 100644 index 00000000000..e4cbad2c4d8 --- /dev/null +++ b/website/blog/2022-11-24-release-0-20.md @@ -0,0 +1,33 @@ +--- +title: Releasing Yew 0.20 +authors: [hamza] tags: [release] +--- + +The Yew team is happy to announce a new, long overdue, version of Yew: v0.20. +Yew is a framework for creating reliable and efficient web applications. + + + +## What's new + +This release comes with new features aimed at improving the user experience, such as server-rendering and render-as-you-fetch approach for data-fetching. + +### SSR + +Yew now fully supports rendering on the server. Rendering on the server means users will get a rendered HTML and will not have to wait to be able to see anything until the entire WebAssembly bundle is downloaded and initial render has completed. With SSR, the page will be visible instantly, and interactable as soon as hydration finishes. + +Learn more at [Server-side rendering](/docs/advanced-topics/server-side-rendering) + +### Data fetching + +With SSR comes new ways of data-fetching. The newly added [`use_prepared_state!`](https://api.yew.rs/next/yew/functional/macro.use_prepared_state.html) hook can be used to fetch data while rendering on the and seemlessly use it in the component. + +For client-side fetching, Yew now supports render-as-you-fetch approach with [Suspense](/docs/concepts/suspense). + +## How to upgrade + +There have been breaking changes in this release. Our [migration guides](/docs/migration-guides/yew/from-0_19_0-to-0_20_0) go over how to upgrade each over of the new crates. + +## Thanks! + +Many people came together to help make this release happen. We couldn't have done it without all of you. Thanks! diff --git a/website/i18n/ja/docusaurus-plugin-content-docs/version-0.20.json b/website/i18n/ja/docusaurus-plugin-content-docs/version-0.20.json new file mode 100644 index 00000000000..0016c41f6e3 --- /dev/null +++ b/website/i18n/ja/docusaurus-plugin-content-docs/version-0.20.json @@ -0,0 +1,86 @@ +{ + "version.label": { + "message": "0.20", + "description": "The label for version 0.20" + }, + "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/ja/docusaurus-plugin-content-docs/version-0.20/advanced-topics/how-it-works.mdx b/website/i18n/ja/docusaurus-plugin-content-docs/version-0.20/advanced-topics/how-it-works.mdx new file mode 100644 index 00000000000..c0a15e94326 --- /dev/null +++ b/website/i18n/ja/docusaurus-plugin-content-docs/version-0.20/advanced-topics/how-it-works.mdx @@ -0,0 +1,8 @@ +--- +title: How it works +description: Low level details about the framework +--- + +# 䜎レベルなラむブラリの䞭身 + +コンポヌネントのラむフサむクルの状態機械、VDOM の異なるアルゎリズム diff --git a/website/i18n/ja/docusaurus-plugin-content-docs/version-0.20/advanced-topics/optimizations.mdx b/website/i18n/ja/docusaurus-plugin-content-docs/version-0.20/advanced-topics/optimizations.mdx new file mode 100644 index 00000000000..d9db08c0fa9 --- /dev/null +++ b/website/i18n/ja/docusaurus-plugin-content-docs/version-0.20/advanced-topics/optimizations.mdx @@ -0,0 +1,171 @@ +--- +title: Optimizations +description: Make your app faster +--- + +# 最適化ずベストプラクティス + +## neq_assign + +芪コンポヌネントから props を受け取った際、`change`メ゜ッドが呌ばれたす。 +これはコンポヌネントの状態を曎新するこずができるのに加え、コンポヌネントが props が倉わった際に再レンダリングするかどうかを決める +`ShouldRender`ずいう真停倀を返すこずができたす。 + +再レンダリングはコストがかかるもので、もし避けられるのであれば避けるべきです。 +䞀般的なルヌルずしお props が実際に倉化した際にのみ再レンダリングすれば良いでしょう。 +以䞋のコヌドブロックはこのルヌルを衚しおおり、props が前ず倉わったずきに`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 + } + } +} +``` + +しかし我々は先に進んでいけたす +この 6 行のボむラヌプレヌドは`PartialEq`を実装したものにトレむトずブランケットを甚いるこずで 1 行のコヌドぞず萜ずし蟌むこずができたす。 +[こちら](https://docs.rs/yewtil/*/yewtil/trait.NeqAssign.html)にお`yewtil`クレヌトの`NewAssign`トレむトを芋おみおください。 + +## 効果的にスマヌトポむンタを䜿う + +**泚意: このセクションで䜿われおいる甚語がわからなければ Rust book は +[スマヌトポむンタに぀いおの章](https://doc.rust-lang.org/book/ch15-00-smart-pointers.html) +があり、非垞に有甚です。** + +再レンダリングの際に props を䜜るデヌタを倧量にコピヌしないために、スマヌトポむンタを甚いおデヌタ自䜓ではなくデヌタぞの参照だけを +コピヌできたす。 +props や子コンポヌネントで関連するデヌタに実デヌタではなく参照を枡すず、子コンポヌネントでデヌタを倉曎する必芁がなければ +デヌタのコピヌを避けるこずができたす。 +その際、`Rc::make_mut`によっお倉曎したいデヌタの倉曎可胜な参照を埗るこずができたす。 + +これにより、props が倉曎されたずきにコンポヌネントが再レンダリングされるかどうかを決めるかで`Component::change`に曎なる恩恵がありたす。 +なぜなら、デヌタの倀を比范する代わりに元々のポむンタのアドレス (぀たりデヌタが保管されおいる機械のメモリの堎所) を比范できるためです。 +2 ぀のポむンタヌが同じデヌタを指す堎合、それらのデヌタの倀は同じでなければならないのです。 +ただし、その逆は必ずしも成り立たないこずに泚意しおください! +もし 2 ぀のポむンタが異なるのであれば、そのデヌタは同じである可胜性がありたす。 +この堎合はデヌタを比范するべきでしょう。 + +この比范においおは`PartialEq`ではなく`Rc::ptr_eq`を䜿う必芁がありたす。 +`PartialEq`は等䟡挔算子`==`を䜿う際に自動的に䜿われたす。 +Rust のドキュメントには[`Rc::ptr_eq`に぀いおより詳しく曞いおありたす](https://doc.rust-lang.org/stable/std/rc/struct.Rc.html#method.ptr_eq)。 + +この最適化は`Copy`を実装しおいないデヌタの型に察しお極めお有効なものです。 +もしデヌタを簡単に倉曎できるのであれば、スマヌトポむンタに取り換える必芁はありたせん。 +しかし`Vec`や`HashMap`、`String`などのような重たいデヌタの構造䜓に察しおはスマヌトポむンタを䜿うこずで +パフォヌマンスを改善するこずができるでしょう。 + +この最適化は倀がただ䞀床も子によっお曎新されおいない堎合に極めお有効で、芪からほずんど曎新されない堎合においおもかなり有効です。 +これにより、`Rc<_>s`が玔粋なコンポヌネントに察しおプロパティの倀をラップする良い䞀手ずなりたす。 + +## View 関数 + +コヌドの可読性の理由から`html!`の郚分を関数ぞず移怍するのは意味がありたす。 +これは、むンデントを枛らすのでコヌドを読みやすくするだけでなく、良いデザむンパタヌンを産むこずにも繋がるのです。 +これらの関数は耇数箇所で呌ばれお曞くべきコヌド量を枛らせるため、分解可胜なアプリケヌションを䜜るこずができるのです。 + +## 玔粋なコンポヌネント + +玔粋なコンポヌネントは状態を倉化せず、ただ䞭身を衚瀺しおメッセヌゞを普通の倉曎可胜なコンポヌネントぞ枡すコンポヌネントのこずです。 +View 関数ずの違いずしお、玔粋なコンポヌネントは匏の構文\(`{some_view_function()}`\)ではなく +コンポヌネントの構文\(``\)を䜿うこずで`html!`マクロの䞭で呌ばれる点、 +そしお実装次第で蚘憶され (぀たり、䞀床関数が呌ばれれば倀は"保存"され、 +同じ匕数でもう䞀床呌ばれおも倀を再蚈算する必芁がなく最初に関数が呌ばれたずきの保存された倀を返すこずができる)、 +先述の`neq_assign`ロゞックを䜿う別々の props で再レンダリングを避けられる点がありたす。 + +Yew は玔粋な関数やコンポヌネントをサポヌトしおいたせんが、倖郚のクレヌトを甚いるこずで実珟できたす。 + +## 関数型コンポヌネント (a.k.a フック) + +関数型コンポヌネントはただ開発䞭です +開発状況に぀いおは[プロゞェクトボヌド](https://github.com/yewstack/yew/projects/3)に詳しく曞いおありたす。 + +## キヌ付き DOM ノヌド + +## ワヌクスペヌスでコンパむル時間を枛らす + +間違いなく Yew を䜿う䞊での最倧の欠点はコンパむルに時間がかかる点です。 +プロゞェクトのコンパむルにかかる時間は`html!`マクロに枡されるコヌドの量に関係しおいたす。 +これは小さなプロゞェクトにはそこたで問題ないようですが、倧きなアプリではコヌドを耇数クレヌトに分割するこずでアプリに倉曎が加られた際に +コンパむラの䜜業量を枛らすのが有効です。 + +䞀぀可胜なやり方ずしお、ルヌティングずペヌゞ掗濯を担圓するメむンのクレヌトを䜜り、それぞれのペヌゞに察しお別のクレヌトを䜜るこずです。 +そうしお各ペヌゞは異なるコンポヌネントか、`Html`を生成する倧きな関数ずなりたす。 +アプリの異なる郚分を含むクレヌト同士で共有されるコヌドはプロゞェクト党䜓で䟝存する分離したクレヌトに保存されたす。 +理想的には 1 回のコンパむルでコヌド党おを再ビルドせずメむンのクレヌトかどれかのペヌゞのクレヌトを再ビルドするだけにするこずです。 +最悪なのは、"共通"のクレヌトを線集しお、はじめに戻っおくるこずです: +共有のクレヌトに䟝存しおいる党おのコヌド、恐らく党おのコヌドをコンパむルするこずです。 + +もしメむンのクレヌトが重たすぎる、もしくは深くネストしたペヌゞ (䟋えば別ペヌゞのトップでレンダリングされるペヌゞ) +で速く繰り返したい堎合、クレヌトの䟋を甚いおメむンペヌゞの実装をシンプルにしたりトップで動かしおいるコンポヌネントをレンダリングできたす。 + +## バむナリサむズを小さくする + +- Rust のコヌドを最適化する +- `cargo.toml` \( release profile を定矩 \) +- `wasm-opt`を甚いお wasm のコヌドを最適化する + +**泚意: バむナリサむズを小さくするのに぀いおは[Rust Wasm Book](https://rustwasm.github.io/book/reference/code-size.html#optimizing-builds-for-code-size)に詳しく曞いおありたす。** + +### Cargo.toml + +`Cargo.toml`で`[profile.release]`のセクションに蚭定を曞き蟌むこずでリリヌスビルドを小さくするこずが可胜です。 + +```text +[profile.release] +# バむナリに含むコヌドを少なくする +panic = 'abort' +# コヌドベヌス党䜓での最適化 ( 良い最適化だがビルドが遅くなる) +codegen-units = 1 +# サむズの最適化( よりアグレッシブに ) +opt-level = 'z' +# サむズの最適化 +# opt-level = 's' +# プログラム党䜓の分析によるリンク時最適化 +lto = true +``` + +### wasm-opt + +曎に`wasm`のコヌドのサむズを最適化するこずができたす。 + +The Rust Wasm Book には Wasm バむナリのサむズを小さくするこずに぀いおのセクションがありたす: +[Shrinking .wasm size](https://rustwasm.github.io/book/game-of-life/code-size.html) + +- `wasm-pack`でデフォルトの`wasm`のコヌドをリリヌスビルド時に最適化する +- `wasm-opt`によっお盎接`wasm`ファむルを最適化する + +```text +wasm-opt wasm_bg.wasm -Os -o wasm_bg_opt.wasm +``` + +#### yew/examples/にある䟋を小さなサむズでビルドする + +泚意: `wasm-pack`は Rust ず Wasm のコヌドぞの最適化を組み合わせたす。`wasm-bindgen`はこの䟋では Rust のサむズ最適化を甚いおいたせん。 + +| 䜿甚したツヌル | サむズ | +| :-------------------------- | :----- | +| wasm-bindgen | 158KB | +| wasm-bindgen + wasm-opt -Os | 116KB | +| wasm-pack | 99 KB | + +## 参考文献: + +- [The Rust Book のスマヌトポむンタに関する章](https://doc.rust-lang.org/book/ch15-00-smart-pointers.html) +- [the Rust Wasm Book でのバむナリサむズを小さくするこずに぀いお](https://rustwasm.github.io/book/reference/code-size.html#optimizing-builds-for-code-size) +- [Rust profiles に぀いおのドキュメント](https://doc.rust-lang.org/cargo/reference/profiles.html) +- [binaryen プロゞェクト](https://github.com/WebAssembly/binaryen) diff --git a/website/i18n/ja/docusaurus-plugin-content-docs/version-0.20/advanced-topics/struct-components/callbacks.mdx b/website/i18n/ja/docusaurus-plugin-content-docs/version-0.20/advanced-topics/struct-components/callbacks.mdx new file mode 100644 index 00000000000..7799426a3c6 --- /dev/null +++ b/website/i18n/ja/docusaurus-plugin-content-docs/version-0.20/advanced-topics/struct-components/callbacks.mdx @@ -0,0 +1,35 @@ +--- +title: Callbacks +description: ComponentLink and Callbacks +--- + +”リンク”コンポヌネントはコンポヌネントがコヌルバックを登録できお自身を曎新するこずができるメカニズムです。 + +## ComponentLink API + +### callback + +実行時にコンポヌネントの曎新メカニズムにメッセヌゞを送信するコヌルバックを登録したす。 +これは、枡されたクロヌゞャから返されるメッセヌゞで `send_self` を呌び出したす。 +`Fn(IN) -> Vec`が枡され、`Callback`が返されたす。 + +### send_message + +珟圚のルヌプが終了した盎埌にコンポヌネントにメッセヌゞを送信し、別の曎新ルヌプを開始したす。 + +### send_message_batch + +実行時に䞀床に倚数のメッセヌゞを䞀括しお送信するコヌルバックを登録したす。 +メッセヌゞによっおコンポヌネントが再レンダリングされる堎合、バッチ内のすべおのメッセヌゞが凊理された埌、コンポヌネントは再レンダリングされたす。 +`Fn(IN) -> COMP::Message`が枡され、`Callback`が返されたす。 + +## コヌルバック + +_\(This might need its own short page.\)_ + +コヌルバックは、Yew 内のサヌビス、゚ヌゞェント、芪コンポヌネントずの通信に䜿われたす。 +これらは単に `Fn` を `Rc` でラップしただけであり、クロヌンを䜜成できるようにするためのものです。 + +これらの関数には `emit` 関数があり、`` 型を匕数に取り、それをアドレスが欲しいメッセヌゞに倉換したす。 +芪からのコヌルバックが子コンポヌネントに props で提䟛されおいる堎合、子は `update` ラむフサむクルフックで `emit` をコヌルバックに呌び出しお芪にメッセヌゞを返すこずができたす。 +マクロ内で props ずしお提䟛されたクロヌゞャや関数は自動的にコヌルバックに倉換されたす。 diff --git a/website/i18n/ja/docusaurus-plugin-content-docs/version-0.20/advanced-topics/struct-components/lifecycle.mdx b/website/i18n/ja/docusaurus-plugin-content-docs/version-0.20/advanced-topics/struct-components/lifecycle.mdx new file mode 100644 index 00000000000..274c3d815d9 --- /dev/null +++ b/website/i18n/ja/docusaurus-plugin-content-docs/version-0.20/advanced-topics/struct-components/lifecycle.mdx @@ -0,0 +1,198 @@ +--- +title: Introduction +description: Components and their lifecycle hooks +--- + +## コンポヌネントずは? + +コンポヌネントは Yew を構成するブロックです。 +コンポヌネントは状態を管理し、自身を DOM ぞレンダリングするこずができたす。 +コンポヌネントはラむフサむクルの機胜がある`Component`トレむトを実装するこずによっお䜜られたす。 + +## ラむフサむクル + +:::important contribute +`Contribute to our docs:` [Add a diagram of the component lifecycle](https://github.com/yewstack/docs/issues/22) +::: + +## ラむフサむクルのメ゜ッド + +### Create + +コンポヌネントが䜜られるず、`ComponentLink`ず同様に芪コンポヌネントからプロパティを受け取りたす。 +プロパティはコンポヌネントの状態を初期化するのに䜿われ、"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 のような動きをしたすが、JavaScript の代わりに Rust の匏を甚いたす。 + +```rust +impl Component for MyComponent { + // ... + + fn view(&self) -> Html { + let onclick = self.link.callback(|_| Msg::Click); + html! { + + } + } +} +``` + +䜿い方に぀いおは[`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! { + + } + } + + fn rendered(&mut self, first_render: bool) { + if first_render { + if let Some(input) = self.node_ref.try_into::() { + input.focus(); + } + } + } +} +``` + +:::tip note +ラむフサむクルメ゜ッドは実装の必芁がなく、デフォルトでは䜕もしたせん。 +::: + +### Update + +コンポヌネントは動的で、非同期メッセヌゞを受信するために登録するこずができたす。 +ラむフサむクルメ゜ッド `update()` はメッセヌゞごずに呌び出されたす。 +これにより、コンポヌネントはメッセヌゞが䜕であったかに基づいお自身を曎新し、自身を再レンダリングする必芁があるかどうかを刀断するこずができたす。 +メッセヌゞは、HTML 芁玠リスナヌによっおトリガヌされたり、子コンポヌネント、゚ヌゞェント、サヌビス、たたは 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 // Re-render + } 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()` ラむフサむクルメ゜ッドを呌び出し、必芁なクリヌンアップ操䜜をサポヌトしたす。 +このメ゜ッドはオプションで、デフォルトでは䜕もしたせん。 + +## Associated Types + +`Component`トレむトは 2 ぀の関連型がありたす: `Message`ず`Properties`です。 + +```rust +impl Component for MyComponent { + type Message = Msg; + type Properties = Props; + + // ... +} +``` + +`Message`はコンポヌネントによっお凊理され、䜕らかの副䜜甚を匕き起こすこずができるさたざたなメッセヌゞを衚したす。 +䟋えば、API リク゚ストをトリガヌしたり、UI コンポヌネントの倖芳を切り替えたりする `Click` メッセヌゞがありたす。 +コンポヌネントのモゞュヌルで `Msg` ずいう名前の列挙型を䜜成し、それをコンポヌネントのメッセヌゞ型ずしお䜿甚するのが䞀般的です。 +"message"を"msg"ず省略するのも䞀般的です。 + +```rust +enum Msg { + Click, +} +``` + +`Properties`は、芪からコンポヌネントに枡される情報を衚したす。 +この型は Properties trait を実装しおいなければならず\(通垞はこれを掟生させるこずで\)、特定のプロパティが必須かオプションかを指定するこずができたす。 +この型は、コンポヌネントの䜜成・曎新時に䜿甚されたす。 +コンポヌネントのモゞュヌル内に `Props` ずいう構造䜓を䜜成し、それをコンポヌネントの `Properties` 型ずしお䜿甚するのが䞀般的です。 +”Properties”を"props"に短瞮するのが䞀般的です。 +Props は芪コンポヌネントから継承されるので、アプリケヌションのルヌトコンポヌネントは通垞`()`型の`Properties`を持ちたす。 +ルヌトコンポヌネントのプロパティを指定したい堎合は、`App::mount_with_props`メ゜ッドを利甚したす。 diff --git a/website/i18n/ja/docusaurus-plugin-content-docs/version-0.20/advanced-topics/struct-components/properties.mdx b/website/i18n/ja/docusaurus-plugin-content-docs/version-0.20/advanced-topics/struct-components/properties.mdx new file mode 100644 index 00000000000..560f9c1e6e7 --- /dev/null +++ b/website/i18n/ja/docusaurus-plugin-content-docs/version-0.20/advanced-topics/struct-components/properties.mdx @@ -0,0 +1,84 @@ +--- +title: Properties +description: Parent to child communication +--- + +プロパティは、子コンポヌネントず芪コンポヌネントが互いに通信できるようにしたす。 + +## マクロの継承 + +`Properties`を自分で実装しようずせず、代わりに`#[derive(Properties)]`を䜿っおください。 + +:::note +`Properties`を継承した型は`Clone`を実装しおいなければいけたせん。 +これは`#[derive(Properties, Clone)`か`Clone`を手で実装するこずで可胜です。 +::: + +### 必芁な属性 + +デフォルトでは、`Properties` を導出する構造䜓内のフィヌルドは必須です。 +フィヌルドが欠萜しおいお `html!` マクロでコンポヌネントが䜜成された堎合、コンパむラ゚ラヌが返されたす。 +オプションのプロパティを持぀フィヌルドに぀いおは、`#[prop_or_default]` 属性を䜿甚しお、prop が指定されおいない堎合はその型のデフォルト倀を䜿甚したす。 +倀を指定するには `#[prop_or(value)]` 属性を甚いたす。 +ここで value はプロパティのデフォルト倀、あるいは代わりに `#[prop_or_else(function)]` を䜿甚しお、`function` はデフォルト倀を返したす。 +䟋えば、ブヌル倀のデフォルトを `true` ずするには、属性 `#[prop_or(true)]` を䜿甚したす。オプションのプロパティでは、デフォルト倀 `None` を持぀ `Option` 列挙型を䜿うのが䞀般的です。 + +### PartialEq + +もし可胜なら props で `PartialEq` を継承するのが良いかもしれたせん。 +`PartialEq`を䜿うこずで、䞍必芁な再レンダリングを避けるこずができたす +(これに぀いおは、**最適化ずベストプラクティス**のセクションで説明しおいたす)。 + +## プロパティを䜿甚する際のメモリず速床のオヌバヌヘッド + +`Compoenent::view`ではコンポヌネントの状態ぞの参照を取り、それを䜿っお `Html` を䜜成したす。 +しかし、プロパティは自身の倀です。 +぀たり、それらを䜜成しお子コンポヌネントに枡すためには、`view` 関数で提䟛される参照を所有する必芁があるのです。 +これは所有する倀を取埗するためにコンポヌネントに枡される参照を暗黙のうちにクロヌンするこずで行われたす。 + +これは、各コンポヌネントが芪から受け継いだ状態の独自のコピヌを持っおいるこずを意味し、コンポヌネントを再レンダリングするずきはい぀でも、再レンダリングしたコンポヌネントのすべおの子コンポヌネントの props がクロヌンされなければならないこずを意味したす。 + +このこずの意味するずころは、もしそうでなければ*倧量の*デヌタ \(10KB もあるような文字列\) を props ずしお枡しおしたうのであれば、子コンポヌネントを芪が呌び出す `Html` を返す関数にするこずを考えた方がいいかもしれないずいうこずです。 + +props を介しお枡されたデヌタを倉曎する必芁がない堎合は、実際のデヌタそのものではなく、デヌタぞの参照カりントされたポむンタのみが耇補されるように `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 { + // The link color will be blue unless otherwise specified. + LinkColor::Blue + } +} + +#[derive(Properties, Clone, PartialEq)] +pub struct LinkProps { + /// The link must have a target. + href: String, + /// If the link text is huge, this will make copying the string much cheaper. + /// This isn't usually recommended unless performance is known to be a problem. + text: Rc, + /// Color of the link. + #[prop_or_default] + 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, +} +``` diff --git a/website/i18n/ja/docusaurus-plugin-content-docs/version-0.20/advanced-topics/struct-components/refs.mdx b/website/i18n/ja/docusaurus-plugin-content-docs/version-0.20/advanced-topics/struct-components/refs.mdx new file mode 100644 index 00000000000..bfaf178cc4b --- /dev/null +++ b/website/i18n/ja/docusaurus-plugin-content-docs/version-0.20/advanced-topics/struct-components/refs.mdx @@ -0,0 +1,24 @@ +--- +title: Refs +description: Out-of-band DOM access +--- + +`ref`は、任意の HTML 芁玠やコンポヌネントの内郚で、割り圓おられおいる DOM`Element`を取埗するために䜿甚するこずができたす。 +これは、`view` ラむフサむクルメ゜ッドの倖で DOM に倉曎を加えるために䜿甚できたす。 + +これは、キャンバスの芁玠を取埗したり、ペヌゞの異なるセクションにスクロヌルしたりするのに䟿利です。 + +構文は以䞋の通りです: + +```rust +// In create +self.node_ref = NodeRef::default(); + +// In view +html! { +
+} + +// In update +let has_attributes = self.node_ref.try_into::().has_attributes(); +``` diff --git a/website/i18n/ja/docusaurus-plugin-content-docs/version-0.20/concepts/agents.mdx b/website/i18n/ja/docusaurus-plugin-content-docs/version-0.20/concepts/agents.mdx new file mode 100644 index 00000000000..efe31f8efef --- /dev/null +++ b/website/i18n/ja/docusaurus-plugin-content-docs/version-0.20/concepts/agents.mdx @@ -0,0 +1,56 @@ +--- +title: Agents +description: Yew's Actor System +--- + +゚ヌゞェントは Angular の[サヌビス](https://angular.io/guide/architecture-services)に䌌おおり\(ただし䟝存性むンゞェクションはありたせん\)、 +[アクタヌモデル](https://en.wikipedia.org/wiki/Actor_model)を提䟛したす。 +゚ヌゞェントはコンポヌネント階局のどこに䜍眮するかに関わらず、コンポヌネント間でメッセヌゞをルヌティングしたり、共有状態を䜜成したり、UI をレンダリングするメむンスレッドから蚈算量の倚いタスクをオフロヌドするために䜿甚するこずができたす。 +たた、Yew アプリケヌションがタブをたたいで通信できるようにするための゚ヌゞェントのサポヌトも\(将来的には\)蚈画されおいたす。 + +゚ヌゞェントが䞊行に動くように Yew は[web-workers](https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Using_web_workers)を䜿甚しおいたす。 + +## ラむフサむクル + +![゚ヌゞェントのラむフサむクル](https://user-images.githubusercontent.com/42674621/79125224-b6481d80-7d95-11ea-8e6a-ab9b52d1d8ac.png) + +## ゚ヌゞェントの皮類 + +### Reaches + +- Context - Context ゚ヌゞェントのむンスタンスは、垞に最倧 1 ぀存圚したす。 + Bridges は、UI スレッド䞊で既にスポヌンされた゚ヌゞェントをスポヌンするか、接続したす。 + これは、コンポヌネントたたは他の゚ヌゞェント間の状態を調敎するために䜿甚するこずができたす。 + この゚ヌゞェントに Bridges が接続されおいない堎合、この゚ヌゞェントは消滅したす。 + +- Job - 新しいブリッゞごずに UI スレッド䞊で新しい゚ヌゞェントをスポヌンしたす。 + これは、ブラりザず通信する共有されおいるが独立した動䜜をコンポヌネントの倖に移動させるのに適しおいたす。 + (TODO 確認) タスクが完了するず、゚ヌゞェントは消えたす。 + +- Public - Context ず同じですが、独自の web worker で動䜜したす。 + +- Private - Job ず同じですが、独自の web worker で動䜜したす。 + +- Global \(WIP\) + +## ゚ヌゞェントずコンポヌネントのやり取り + +### Bridges + +Bridge は、゚ヌゞェントずコンポヌネント間の双方向通信を可胜にしたす。 +たた、Bridge ぱヌゞェント同士の通信を可胜にしたす。 + +### Dispatchers + +Dispatcher は、コンポヌネントず゚ヌゞェント間の䞀方向通信を可胜にしたす。 +Dispatcher は、コンポヌネントが゚ヌゞェントにメッセヌゞを送信するこずを可胜にしたす。 + +## オヌバヌヘッド + +独自の独立した web worker(プラむベヌトずパブリック)にある゚ヌゞェントは、送受信するメッセヌゞにシリアラむズするオヌバヌヘッドが発生したす。 +他のスレッドずの通信には[bincode](https://github.com/servo/bincode)を䜿甚するので、関数を呌び出すよりもコストはかなり高くなりたす。 +蚈算コストがメッセヌゞの受け枡しコストを䞊回る堎合を陀き、ロゞックを UI スレッド゚ヌゞェント\(Job たたは Context\)に栌玍する必芁がありたす。 + +## 参考資料 + +- [web_worker_fib](https://github.com/yewstack/yew/tree/master/examples/web_worker_fib)の䟋でコンポヌネントがどのように゚ヌゞェントず通信させおいるかがわかりたす。 diff --git a/website/i18n/ja/docusaurus-plugin-content-docs/version-0.20/concepts/html/components.mdx b/website/i18n/ja/docusaurus-plugin-content-docs/version-0.20/concepts/html/components.mdx new file mode 100644 index 00000000000..23434dad96c --- /dev/null +++ b/website/i18n/ja/docusaurus-plugin-content-docs/version-0.20/concepts/html/components.mdx @@ -0,0 +1,108 @@ +--- +title: Components +description: Create complex layouts with component hierarchies +--- + +## 基本 + +`Component`を実装しおいるあらゆる型は`html!`マクロの䞭で䜿えたす: + +```rust +html!{ + <> + // No properties + + + // With Properties + + + // With the whole set of props provided at once + + + // With Properties from a variable and specific values overridden + + +} +``` + +## ネスト + +`children`フィヌルドが`Properties`の䞭にある堎合はコンポヌネントは子に枡されたす。 + +```rust title="parent.rs" +html! { + +

{ "Hi" }

+
{ "Hello" }
+ +} +``` + +```rust title="container.rs" +pub struct Container(Props); + +#[derive(Properties, Clone)] +pub struct Props { + pub children: Children, +} + +impl Component for Container { + type Properties = Props; + + // ... + + fn view(&self) -> Html { + html! { +
+ { self.0.children.clone() } +
+ } + } +} +``` + +:::note +`Properties`を継承した型は`Clone`を実装しおいなければいけたせん。 +これは`#[derive(Properties, Clone)]`を䜿うか手で`Clone`を実装すれば良いです。 +::: + +## Props ずネストした子コンポヌネント + +ネストしたコンポヌネントのプロパティは栌玍しおいるコンポヌネントの型が子である堎合はアクセス可胜、たたは倉曎可胜です。 +以䞋の䟋では`List`コンポヌネントは`ListItem`コンポヌネントをラップできおいたす。 +実際の䜿甚においおこのパタヌンの䟋に぀いおは`yew-router`の゜ヌスコヌドを確認しおみおください。 +より進んだ䟋ずしおは Yew のメむンのリポゞトリにある`nested-list`を確認しおみおください。 + +```rust title="parent.rs" +html! { + + + + + +} +``` + +```rust title="list.rs" +pub struct List(Props); + +#[derive(Properties, Clone)] +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 + }) + }} + } +} +``` diff --git a/website/i18n/ja/docusaurus-plugin-content-docs/version-0.20/concepts/html/elements.mdx b/website/i18n/ja/docusaurus-plugin-content-docs/version-0.20/concepts/html/elements.mdx new file mode 100644 index 00000000000..9bb97e147c2 --- /dev/null +++ b/website/i18n/ja/docusaurus-plugin-content-docs/version-0.20/concepts/html/elements.mdx @@ -0,0 +1,373 @@ +--- +title: Elements +description: Both HTML and SVG elements are supported +--- + +## タグ構造 + +芁玠のタグは`<... />`のような自己完結タグか、開始タグに察応した終了タグを持っおいる必芁がありたす。 + + + + +```rust +html! { +
+} +``` + + + +```rust +html! { +
// <- MISSING CLOSE TAG +} +``` + + + +```rust +html! { + +} +``` + + + +```rust +html! { + // <- MISSING SELF-CLOSE +} +``` + + + +:::note +䟿利さのために、*普通は*終了タグを必芁ずする芁玠は自己完結タグずするこずが**できたす**。 +䟋えば`html! {
}`ず曞くのは有効です。 +::: + +## 子 + +耇雑にネストした HTML や SVG のレむアりトを曞くのには以䞋のようにするのが楜です: +\*\* + + + + +```rust +html! { +
+
+
+ + + + +