From 5e823e729dd455be0d2b283511414d20b6826523 Mon Sep 17 00:00:00 2001 From: Muhammad Hamza Date: Fri, 29 Sep 2023 15:10:07 +0500 Subject: [PATCH] Prepare for 0.21 release (#3412) * Update CHANGELOG Changelog run: https://github.com/yewstack/yew/actions/runs/6283917852/job/17064800916 * docusaurus docs:version 0.21 * migration guide * blog post * prettier * make website warnings go away * make GA work * Apply suggestions from code review * Apply suggestion from review Co-authored-by: Kaede Hoshikawa * prettier --------- Co-authored-by: Kaede Hoshikawa --- CHANGELOG.md | 66 ++ website/blog/2023-09-23-release-0-21.md | 84 +++ .../yew/from-0_20_0-to-0_21_0.mdx | 71 ++ website/docusaurus.config.js | 4 +- .../version-0.21.json | 86 +++ .../advanced-topics/how-it-works.mdx | 8 + .../advanced-topics/optimizations.mdx | 171 +++++ .../struct-components/callbacks.mdx | 35 + .../struct-components/lifecycle.mdx | 198 ++++++ .../struct-components/properties.mdx | 84 +++ .../struct-components/refs.mdx | 24 + .../version-0.21/concepts/agents.mdx | 56 ++ .../version-0.21/concepts/html/components.mdx | 108 +++ .../version-0.21/concepts/html/elements.mdx | 373 +++++++++++ .../concepts/html/introduction.mdx | 22 + .../version-0.21/concepts/html/lists.mdx | 60 ++ .../html/literals-and-expressions.mdx | 60 ++ .../version-0.21/concepts/router.mdx | 95 +++ .../getting-started/build-a-sample-app.mdx | 126 ++++ .../version-0.21/getting-started/examples.mdx | 14 + .../version-0.21/more/css.mdx | 18 + .../version-0.21/more/debugging.mdx | 58 ++ .../version-0.21/more/roadmap.mdx | 45 ++ .../version-0.21/more/testing.mdx | 12 + .../version-0.21.json | 86 +++ .../advanced-topics/how-it-works.mdx | 7 + .../advanced-topics/optimizations.mdx | 93 +++ .../struct-components/callbacks.mdx | 27 + .../struct-components/lifecycle.mdx | 170 +++++ .../struct-components/properties.mdx | 72 ++ .../struct-components/refs.mdx | 23 + .../version-0.21/concepts/agents.mdx | 40 ++ .../hooks/custom-hooks.mdx | 121 ++++ .../function-components/introduction.mdx | 27 + .../version-0.21/concepts/html/components.mdx | 114 ++++ .../version-0.21/concepts/html/elements.mdx | 264 ++++++++ .../concepts/html/introduction.mdx | 14 + .../version-0.21/concepts/html/lists.mdx | 57 ++ .../html/literals-and-expressions.mdx | 57 ++ .../version-0.21/concepts/router.mdx | 45 ++ .../getting-started/build-a-sample-app.mdx | 87 +++ .../version-0.21/getting-started/examples.mdx | 11 + .../version-0.21/more/css.mdx | 5 + .../version-0.21/more/debugging.mdx | 50 ++ .../version-0.21/more/roadmap.mdx | 39 ++ .../version-0.21/more/testing.mdx | 11 + .../version-0.21.json | 86 +++ .../advanced-topics/how-it-works.mdx | 7 + .../advanced-topics/optimizations.mdx | 118 ++++ .../struct-components/callbacks.mdx | 33 + .../struct-components/lifecycle.mdx | 175 +++++ .../struct-components/properties.mdx | 70 ++ .../struct-components/refs.mdx | 26 + .../version-0.21/concepts/agents.mdx | 41 ++ .../version-0.21/concepts/html/components.mdx | 114 ++++ .../version-0.21/concepts/html/elements.mdx | 264 ++++++++ .../concepts/html/introduction.mdx | 14 + .../version-0.21/concepts/html/lists.mdx | 57 ++ .../html/literals-and-expressions.mdx | 57 ++ .../version-0.21/concepts/router.mdx | 81 +++ .../getting-started/build-a-sample-app.mdx | 127 ++++ .../version-0.21/getting-started/examples.mdx | 11 + .../version-0.21/more/css.mdx | 5 + .../version-0.21/more/debugging.mdx | 50 ++ .../version-0.21/more/roadmap.mdx | 44 ++ .../version-0.21/more/testing.mdx | 11 + website/package-lock.json | 335 +++++----- website/package.json | 14 +- website/sidebars/docs.js | 2 +- .../version-0.21/advanced-topics/children.mdx | 318 +++++++++ .../advanced-topics/how-it-works.mdx | 74 +++ .../advanced-topics/immutable.mdx | 24 + .../advanced-topics/optimizations.mdx | 163 +++++ .../version-0.21/advanced-topics/portals.mdx | 64 ++ .../advanced-topics/server-side-rendering.md | 203 ++++++ .../struct-components/callbacks.mdx | 86 +++ .../advanced-topics/struct-components/hoc.mdx | 82 +++ .../struct-components/introduction.mdx | 32 + .../struct-components/lifecycle.mdx | 305 +++++++++ .../struct-components/properties.mdx | 145 ++++ .../struct-components/refs.mdx | 55 ++ .../struct-components/scope.mdx | 81 +++ .../version-0.21/concepts/agents.mdx | 64 ++ .../concepts/basic-web-technologies/css.mdx | 101 +++ .../concepts/basic-web-technologies/html.mdx | 79 +++ .../concepts/basic-web-technologies/js.mdx | 53 ++ .../basic-web-technologies/wasm-bindgen.mdx | 244 +++++++ .../basic-web-technologies/web-sys.mdx | 245 +++++++ .../version-0.21/concepts/contexts.mdx | 196 ++++++ .../function-components/callbacks.mdx | 74 +++ .../concepts/function-components/children.mdx | 37 ++ .../function-components/communication.mdx | 11 + .../concepts/function-components/generics.mdx | 44 ++ .../hooks/custom-hooks.mdx | 113 ++++ .../hooks/introduction.mdx | 51 ++ .../function-components/introduction.mdx | 76 +++ .../function-components/node-refs.mdx | 21 + .../function-components/properties.mdx | 304 +++++++++ .../function-components/pure-components.mdx | 39 ++ .../concepts/function-components/state.mdx | 26 + .../version-0.21/concepts/html/classes.mdx | 127 ++++ .../version-0.21/concepts/html/components.mdx | 125 ++++ .../concepts/html/conditional-rendering.mdx | 73 ++ .../version-0.21/concepts/html/elements.mdx | 145 ++++ .../version-0.21/concepts/html/events.mdx | 601 +++++++++++++++++ .../version-0.21/concepts/html/fragments.mdx | 43 ++ .../concepts/html/introduction.mdx | 222 +++++++ .../version-0.21/concepts/html/lists.mdx | 125 ++++ .../html/literals-and-expressions.mdx | 71 ++ .../version-0.21/concepts/router.mdx | 506 ++++++++++++++ .../version-0.21/concepts/suspense.mdx | 164 +++++ .../getting-started/build-a-sample-app.mdx | 157 +++++ .../getting-started/editor-setup.mdx | 160 +++++ .../version-0.21/getting-started/examples.mdx | 17 + .../getting-started/introduction.mdx | 53 ++ .../yew-agent/from-0_0_0-to-0_1_0.mdx | 7 + .../yew-agent/from-0_1_0-to-0_2_0.mdx | 23 + .../yew-router/from-0_15_0-to-0_16_0.mdx | 9 + .../yew-router/from-0_16_0-to-0_17_0.mdx | 12 + .../yew/from-0_18_0-to-0_19_0.mdx | 139 ++++ .../yew/from-0_19_0-to-0_20_0.mdx | 84 +++ .../yew/from-0_20_0-to-0_21_0.mdx | 71 ++ .../yew/from-0_20_0-to-next.mdx | 0 .../versioned_docs/version-0.21/more/css.mdx | 30 + .../version-0.21/more/debugging.mdx | 100 +++ .../version-0.21/more/deployment.mdx | 45 ++ .../version-0.21/more/roadmap.mdx | 44 ++ .../version-0.21/more/testing.mdx | 25 + .../version-0.21/tutorial/index.mdx | 626 ++++++++++++++++++ .../version-0.21-sidebars.json | 180 +++++ website/versions.json | 2 +- 131 files changed, 12273 insertions(+), 163 deletions(-) create mode 100644 website/blog/2023-09-23-release-0-21.md create mode 100644 website/docs/migration-guides/yew/from-0_20_0-to-0_21_0.mdx create mode 100644 website/i18n/ja/docusaurus-plugin-content-docs/version-0.21.json create mode 100644 website/i18n/ja/docusaurus-plugin-content-docs/version-0.21/advanced-topics/how-it-works.mdx create mode 100644 website/i18n/ja/docusaurus-plugin-content-docs/version-0.21/advanced-topics/optimizations.mdx create mode 100644 website/i18n/ja/docusaurus-plugin-content-docs/version-0.21/advanced-topics/struct-components/callbacks.mdx create mode 100644 website/i18n/ja/docusaurus-plugin-content-docs/version-0.21/advanced-topics/struct-components/lifecycle.mdx create mode 100644 website/i18n/ja/docusaurus-plugin-content-docs/version-0.21/advanced-topics/struct-components/properties.mdx create mode 100644 website/i18n/ja/docusaurus-plugin-content-docs/version-0.21/advanced-topics/struct-components/refs.mdx create mode 100644 website/i18n/ja/docusaurus-plugin-content-docs/version-0.21/concepts/agents.mdx create mode 100644 website/i18n/ja/docusaurus-plugin-content-docs/version-0.21/concepts/html/components.mdx create mode 100644 website/i18n/ja/docusaurus-plugin-content-docs/version-0.21/concepts/html/elements.mdx create mode 100644 website/i18n/ja/docusaurus-plugin-content-docs/version-0.21/concepts/html/introduction.mdx create mode 100644 website/i18n/ja/docusaurus-plugin-content-docs/version-0.21/concepts/html/lists.mdx create mode 100644 website/i18n/ja/docusaurus-plugin-content-docs/version-0.21/concepts/html/literals-and-expressions.mdx create mode 100644 website/i18n/ja/docusaurus-plugin-content-docs/version-0.21/concepts/router.mdx create mode 100644 website/i18n/ja/docusaurus-plugin-content-docs/version-0.21/getting-started/build-a-sample-app.mdx create mode 100644 website/i18n/ja/docusaurus-plugin-content-docs/version-0.21/getting-started/examples.mdx create mode 100644 website/i18n/ja/docusaurus-plugin-content-docs/version-0.21/more/css.mdx create mode 100644 website/i18n/ja/docusaurus-plugin-content-docs/version-0.21/more/debugging.mdx create mode 100644 website/i18n/ja/docusaurus-plugin-content-docs/version-0.21/more/roadmap.mdx create mode 100644 website/i18n/ja/docusaurus-plugin-content-docs/version-0.21/more/testing.mdx create mode 100644 website/i18n/zh-Hans/docusaurus-plugin-content-docs/version-0.21.json create mode 100644 website/i18n/zh-Hans/docusaurus-plugin-content-docs/version-0.21/advanced-topics/how-it-works.mdx create mode 100644 website/i18n/zh-Hans/docusaurus-plugin-content-docs/version-0.21/advanced-topics/optimizations.mdx create mode 100644 website/i18n/zh-Hans/docusaurus-plugin-content-docs/version-0.21/advanced-topics/struct-components/callbacks.mdx create mode 100644 website/i18n/zh-Hans/docusaurus-plugin-content-docs/version-0.21/advanced-topics/struct-components/lifecycle.mdx create mode 100644 website/i18n/zh-Hans/docusaurus-plugin-content-docs/version-0.21/advanced-topics/struct-components/properties.mdx create mode 100644 website/i18n/zh-Hans/docusaurus-plugin-content-docs/version-0.21/advanced-topics/struct-components/refs.mdx create mode 100644 website/i18n/zh-Hans/docusaurus-plugin-content-docs/version-0.21/concepts/agents.mdx create mode 100644 website/i18n/zh-Hans/docusaurus-plugin-content-docs/version-0.21/concepts/function-components/hooks/custom-hooks.mdx create mode 100644 website/i18n/zh-Hans/docusaurus-plugin-content-docs/version-0.21/concepts/function-components/introduction.mdx create mode 100644 website/i18n/zh-Hans/docusaurus-plugin-content-docs/version-0.21/concepts/html/components.mdx create mode 100644 website/i18n/zh-Hans/docusaurus-plugin-content-docs/version-0.21/concepts/html/elements.mdx create mode 100644 website/i18n/zh-Hans/docusaurus-plugin-content-docs/version-0.21/concepts/html/introduction.mdx create mode 100644 website/i18n/zh-Hans/docusaurus-plugin-content-docs/version-0.21/concepts/html/lists.mdx create mode 100644 website/i18n/zh-Hans/docusaurus-plugin-content-docs/version-0.21/concepts/html/literals-and-expressions.mdx create mode 100644 website/i18n/zh-Hans/docusaurus-plugin-content-docs/version-0.21/concepts/router.mdx create mode 100644 website/i18n/zh-Hans/docusaurus-plugin-content-docs/version-0.21/getting-started/build-a-sample-app.mdx create mode 100644 website/i18n/zh-Hans/docusaurus-plugin-content-docs/version-0.21/getting-started/examples.mdx create mode 100644 website/i18n/zh-Hans/docusaurus-plugin-content-docs/version-0.21/more/css.mdx create mode 100644 website/i18n/zh-Hans/docusaurus-plugin-content-docs/version-0.21/more/debugging.mdx create mode 100644 website/i18n/zh-Hans/docusaurus-plugin-content-docs/version-0.21/more/roadmap.mdx create mode 100644 website/i18n/zh-Hans/docusaurus-plugin-content-docs/version-0.21/more/testing.mdx create mode 100644 website/i18n/zh-Hant/docusaurus-plugin-content-docs/version-0.21.json create mode 100644 website/i18n/zh-Hant/docusaurus-plugin-content-docs/version-0.21/advanced-topics/how-it-works.mdx create mode 100644 website/i18n/zh-Hant/docusaurus-plugin-content-docs/version-0.21/advanced-topics/optimizations.mdx create mode 100644 website/i18n/zh-Hant/docusaurus-plugin-content-docs/version-0.21/advanced-topics/struct-components/callbacks.mdx create mode 100644 website/i18n/zh-Hant/docusaurus-plugin-content-docs/version-0.21/advanced-topics/struct-components/lifecycle.mdx create mode 100644 website/i18n/zh-Hant/docusaurus-plugin-content-docs/version-0.21/advanced-topics/struct-components/properties.mdx create mode 100644 website/i18n/zh-Hant/docusaurus-plugin-content-docs/version-0.21/advanced-topics/struct-components/refs.mdx create mode 100644 website/i18n/zh-Hant/docusaurus-plugin-content-docs/version-0.21/concepts/agents.mdx create mode 100644 website/i18n/zh-Hant/docusaurus-plugin-content-docs/version-0.21/concepts/html/components.mdx create mode 100644 website/i18n/zh-Hant/docusaurus-plugin-content-docs/version-0.21/concepts/html/elements.mdx create mode 100644 website/i18n/zh-Hant/docusaurus-plugin-content-docs/version-0.21/concepts/html/introduction.mdx create mode 100644 website/i18n/zh-Hant/docusaurus-plugin-content-docs/version-0.21/concepts/html/lists.mdx create mode 100644 website/i18n/zh-Hant/docusaurus-plugin-content-docs/version-0.21/concepts/html/literals-and-expressions.mdx create mode 100644 website/i18n/zh-Hant/docusaurus-plugin-content-docs/version-0.21/concepts/router.mdx create mode 100644 website/i18n/zh-Hant/docusaurus-plugin-content-docs/version-0.21/getting-started/build-a-sample-app.mdx create mode 100644 website/i18n/zh-Hant/docusaurus-plugin-content-docs/version-0.21/getting-started/examples.mdx create mode 100644 website/i18n/zh-Hant/docusaurus-plugin-content-docs/version-0.21/more/css.mdx create mode 100644 website/i18n/zh-Hant/docusaurus-plugin-content-docs/version-0.21/more/debugging.mdx create mode 100644 website/i18n/zh-Hant/docusaurus-plugin-content-docs/version-0.21/more/roadmap.mdx create mode 100644 website/i18n/zh-Hant/docusaurus-plugin-content-docs/version-0.21/more/testing.mdx create mode 100644 website/versioned_docs/version-0.21/advanced-topics/children.mdx create mode 100644 website/versioned_docs/version-0.21/advanced-topics/how-it-works.mdx create mode 100644 website/versioned_docs/version-0.21/advanced-topics/immutable.mdx create mode 100644 website/versioned_docs/version-0.21/advanced-topics/optimizations.mdx create mode 100644 website/versioned_docs/version-0.21/advanced-topics/portals.mdx create mode 100644 website/versioned_docs/version-0.21/advanced-topics/server-side-rendering.md create mode 100644 website/versioned_docs/version-0.21/advanced-topics/struct-components/callbacks.mdx create mode 100644 website/versioned_docs/version-0.21/advanced-topics/struct-components/hoc.mdx create mode 100644 website/versioned_docs/version-0.21/advanced-topics/struct-components/introduction.mdx create mode 100644 website/versioned_docs/version-0.21/advanced-topics/struct-components/lifecycle.mdx create mode 100644 website/versioned_docs/version-0.21/advanced-topics/struct-components/properties.mdx create mode 100644 website/versioned_docs/version-0.21/advanced-topics/struct-components/refs.mdx create mode 100644 website/versioned_docs/version-0.21/advanced-topics/struct-components/scope.mdx create mode 100644 website/versioned_docs/version-0.21/concepts/agents.mdx create mode 100644 website/versioned_docs/version-0.21/concepts/basic-web-technologies/css.mdx create mode 100644 website/versioned_docs/version-0.21/concepts/basic-web-technologies/html.mdx create mode 100644 website/versioned_docs/version-0.21/concepts/basic-web-technologies/js.mdx create mode 100644 website/versioned_docs/version-0.21/concepts/basic-web-technologies/wasm-bindgen.mdx create mode 100644 website/versioned_docs/version-0.21/concepts/basic-web-technologies/web-sys.mdx create mode 100644 website/versioned_docs/version-0.21/concepts/contexts.mdx create mode 100644 website/versioned_docs/version-0.21/concepts/function-components/callbacks.mdx create mode 100644 website/versioned_docs/version-0.21/concepts/function-components/children.mdx create mode 100644 website/versioned_docs/version-0.21/concepts/function-components/communication.mdx create mode 100644 website/versioned_docs/version-0.21/concepts/function-components/generics.mdx create mode 100644 website/versioned_docs/version-0.21/concepts/function-components/hooks/custom-hooks.mdx create mode 100644 website/versioned_docs/version-0.21/concepts/function-components/hooks/introduction.mdx create mode 100644 website/versioned_docs/version-0.21/concepts/function-components/introduction.mdx create mode 100644 website/versioned_docs/version-0.21/concepts/function-components/node-refs.mdx create mode 100644 website/versioned_docs/version-0.21/concepts/function-components/properties.mdx create mode 100644 website/versioned_docs/version-0.21/concepts/function-components/pure-components.mdx create mode 100644 website/versioned_docs/version-0.21/concepts/function-components/state.mdx create mode 100644 website/versioned_docs/version-0.21/concepts/html/classes.mdx create mode 100644 website/versioned_docs/version-0.21/concepts/html/components.mdx create mode 100644 website/versioned_docs/version-0.21/concepts/html/conditional-rendering.mdx create mode 100644 website/versioned_docs/version-0.21/concepts/html/elements.mdx create mode 100644 website/versioned_docs/version-0.21/concepts/html/events.mdx create mode 100644 website/versioned_docs/version-0.21/concepts/html/fragments.mdx create mode 100644 website/versioned_docs/version-0.21/concepts/html/introduction.mdx create mode 100644 website/versioned_docs/version-0.21/concepts/html/lists.mdx create mode 100644 website/versioned_docs/version-0.21/concepts/html/literals-and-expressions.mdx create mode 100644 website/versioned_docs/version-0.21/concepts/router.mdx create mode 100644 website/versioned_docs/version-0.21/concepts/suspense.mdx create mode 100644 website/versioned_docs/version-0.21/getting-started/build-a-sample-app.mdx create mode 100644 website/versioned_docs/version-0.21/getting-started/editor-setup.mdx create mode 100644 website/versioned_docs/version-0.21/getting-started/examples.mdx create mode 100644 website/versioned_docs/version-0.21/getting-started/introduction.mdx create mode 100644 website/versioned_docs/version-0.21/migration-guides/yew-agent/from-0_0_0-to-0_1_0.mdx create mode 100644 website/versioned_docs/version-0.21/migration-guides/yew-agent/from-0_1_0-to-0_2_0.mdx create mode 100644 website/versioned_docs/version-0.21/migration-guides/yew-router/from-0_15_0-to-0_16_0.mdx create mode 100644 website/versioned_docs/version-0.21/migration-guides/yew-router/from-0_16_0-to-0_17_0.mdx create mode 100644 website/versioned_docs/version-0.21/migration-guides/yew/from-0_18_0-to-0_19_0.mdx create mode 100644 website/versioned_docs/version-0.21/migration-guides/yew/from-0_19_0-to-0_20_0.mdx create mode 100644 website/versioned_docs/version-0.21/migration-guides/yew/from-0_20_0-to-0_21_0.mdx rename website/{docs => versioned_docs/version-0.21}/migration-guides/yew/from-0_20_0-to-next.mdx (100%) create mode 100644 website/versioned_docs/version-0.21/more/css.mdx create mode 100644 website/versioned_docs/version-0.21/more/debugging.mdx create mode 100644 website/versioned_docs/version-0.21/more/deployment.mdx create mode 100644 website/versioned_docs/version-0.21/more/roadmap.mdx create mode 100644 website/versioned_docs/version-0.21/more/testing.mdx create mode 100644 website/versioned_docs/version-0.21/tutorial/index.mdx create mode 100644 website/versioned_sidebars/version-0.21-sidebars.json diff --git a/CHANGELOG.md b/CHANGELOG.md index 0f2c0d9168f..ec5a20781a9 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,71 @@ # Changelog +## ✨ yew **0.21.0** *(2023-09-23)* + +#### Changelog + +## 🛠 Fixes + + - Fix rust-analyzer non_camel_case_types warning. [[@Sean Bruton](https://github.com/Sean Bruton), [#3388](https://github.com/yewstack/yew/pull/3388)] + - Fix incorrect text escaping during SSR. [[@Tim Kurdov](https://github.com/Tim Kurdov), [#3381](https://github.com/yewstack/yew/pull/3381)] + - Fix top-level reconciliation in portals. [[@WorldSEnder](https://github.com/WorldSEnder), [#3020](https://github.com/yewstack/yew/pull/3020)] + - Fix clippy::let_unit_value lint in propless components. [[@WorldSEnder](https://github.com/WorldSEnder), [#2970](https://github.com/yewstack/yew/pull/2970)] + +## ⚡️ Features + + - Updated the docs of `set_event_bubbling`. [[@Tim Kurdov](https://github.com/Tim Kurdov), [#3391](https://github.com/yewstack/yew/pull/3391)] + - feat: support arrays for Classes/classes!(). [[@Pouriya](https://github.com/Pouriya), [#3393](https://github.com/yewstack/yew/pull/3393)] + - Mark VNode as #[must_use]. [[@Kaede Hoshikawa](https://github.com/Kaede Hoshikawa), [#3387](https://github.com/yewstack/yew/pull/3387)] + - Add `IntoPropValue` implementation to convert from `Cow`s to `AttrValue`. [[@Tim Kurdov](https://github.com/Tim Kurdov), [#3346](https://github.com/yewstack/yew/pull/3346)] + - Remove compatibility code before 1.64. [[@Kaede Hoshikawa](https://github.com/Kaede Hoshikawa), [#3379](https://github.com/yewstack/yew/pull/3379)] + - Keep checked attribute for elements without special handling. [[@Muhammad Hamza](https://github.com/Muhammad Hamza), [#3373](https://github.com/yewstack/yew/pull/3373)] + - feat: implement hydration for vraw. [[@Dillen Meijboom](https://github.com/Dillen Meijboom), [#3245](https://github.com/yewstack/yew/pull/3245)] + - Add webkitdirectory to the boolean attributes list. [[@Julius Lungys](https://github.com/Julius Lungys), [#3214](https://github.com/yewstack/yew/pull/3214)] + - Incremental performance improvements to element creation. [[@Greg Johnston](https://github.com/Greg Johnston), [#3169](https://github.com/yewstack/yew/pull/3169)] + - Make VList's children Rc'ed. [[@Kaede Hoshikawa](https://github.com/Kaede Hoshikawa), [#3050](https://github.com/yewstack/yew/pull/3050)] + - Update dependencies. [[@Muhammad Hamza](https://github.com/Muhammad Hamza), [#3171](https://github.com/yewstack/yew/pull/3171)] + - Pass string types to Html props. [[@Cecile Tonglet](https://github.com/Cecile Tonglet), [#2872](https://github.com/yewstack/yew/pull/2872)] + - Implement an internal DomSlot for positioning instead of NodeRef. [[@WorldSEnder](https://github.com/WorldSEnder), [#3048](https://github.com/yewstack/yew/pull/3048)] + - Prefer pop_first if it is available. [[@Kaede Hoshikawa](https://github.com/Kaede Hoshikawa), [#3084](https://github.com/yewstack/yew/pull/3084)] + - Add method map() on Children to wrap easily. [[@Cecile Tonglet](https://github.com/Cecile Tonglet), [#3039](https://github.com/yewstack/yew/pull/3039)] + - Reentrant event listeners. [[@WorldSEnder](https://github.com/WorldSEnder), [#3037](https://github.com/yewstack/yew/pull/3037)] + - Add impl IntoIterator on &Classes. [[@Cecile Tonglet](https://github.com/Cecile Tonglet), [#3038](https://github.com/yewstack/yew/pull/3038)] + - Assert there are no circular references. [[@WorldSEnder](https://github.com/WorldSEnder), [#3025](https://github.com/yewstack/yew/pull/3025)] +## 🚨 Breaking changes + + - Remove special handing of struct fields of type `Option` in `derive(Properties)`. [[@Tim Kurdov](https://github.com/Tim Kurdov), [#3398](https://github.com/yewstack/yew/pull/3398)] + - Agent v2. [[@Kaede Hoshikawa](https://github.com/Kaede Hoshikawa), [#2773](https://github.com/yewstack/yew/pull/2773)] + - Update signature of use_prepared_state/use_transitive_state. [[@Muhammad Hamza](https://github.com/Muhammad Hamza), [#3376](https://github.com/yewstack/yew/pull/3376)] + - Make signature of use_future_with consistent. [[@Muhammad Hamza](https://github.com/Muhammad Hamza), [#3372](https://github.com/yewstack/yew/pull/3372)] + - Allow any type to be used as Children (take 2). [[@Kaede Hoshikawa](https://github.com/Kaede Hoshikawa), [#3289](https://github.com/yewstack/yew/pull/3289)] + - Enable PartialEq for all virtual dom types. [[@Kaede Hoshikawa](https://github.com/Kaede Hoshikawa), [#3206](https://github.com/yewstack/yew/pull/3206)] + - Pass hook dependencies as the first function argument. [[@Arniu Tseng](https://github.com/Arniu Tseng), [#2861](https://github.com/yewstack/yew/pull/2861)] + - Make Classes cheap to clone. [[@Cecile Tonglet](https://github.com/Cecile Tonglet), [#3021](https://github.com/yewstack/yew/pull/3021)] + +## ✨ yew-router **0.18.0** *(2023-09-xx)* + +#### Changelog + +## ⚡️ Features + +- Update dependencies. [[@Muhammad Hamza](https://github.com/Muhammad Hamza), [#3171](https://github.com/yewstack/yew/pull/3171)] +- Only handle "normal" clicks on s. [[@Kai Salmon](https://github.com/Kai Salmon), [#3056](https://github.com/yewstack/yew/pull/3056)] + +## 🚨 Breaking changes + +- Encode Path Parameters in `yew-router`. [[@Jedd Dryden](https://github.com/Jedd Dryden), [#3187](https://github.com/yewstack/yew/pull/3187)] +- Pass hook dependencies as the first function argument. [[@Arniu Tseng](https://github.com/Arniu Tseng), [#2861](https://github.com/yewstack/yew/pull/2861)] + +## ✨ yew-agent **0.3.0** *(2023-09-xx)* + +#### Changelog + +## 🚨 Breaking changes + +- Agent v2. [[@Kaede Hoshikawa](https://github.com/Kaede Hoshikawa), [#2773](https://github.com/yewstack/yew/pull/2773)] + +---- + ## ✨ yew **0.20.0** *(2022-11-xx)* #### Changelog diff --git a/website/blog/2023-09-23-release-0-21.md b/website/blog/2023-09-23-release-0-21.md new file mode 100644 index 00000000000..a93f40f07ee --- /dev/null +++ b/website/blog/2023-09-23-release-0-21.md @@ -0,0 +1,84 @@ +--- +title: Announcing Yew 0.21 +authors: [hamza] +--- + +The Yew development team is thrilled to unveil Yew 0.21.0, a significant milestone in the journey of empowering developers to create dependable and high-performance web applications with Rust. +Let's dive into the major highlights of this release. + +## What's new + +### 1. Changing Signatures: A Shift in Hook Dependencies + +One of the significant changes in Yew 0.21 is the adjustment to the signature of hooks that accept dependencies. +Dependencies used to be passed as the second argument after the closure. However, now they're passed as the first argument before the closure. + +```rust +use_effect_with_deps(deps, move |deps: Vec| { + // Do something with dependencies +}); +``` + +The reason behind swapping the order of dependencies in the code snippet is to address a specific use case. +In situations where the same value is needed both to compute a dependency and to be moved by value into the closure, the new order simplifies the code and improves readability and ergonomics. + +This is a big breaking change so we've provided [a way to automate the refactor](https://yew.rs/docs/migration-guides/yew/from-0_20_0-to-0_21_0#automated-refactor) + +### 2. Versatile Child Types + +Yew now allows you to use any type as children within your components. This means you're no longer limited to just the `Children` type. +Instead, you can use any type, even `Html` or closures, unlocking patterns such as: + +```rust +html! { + + {|p: RenderProps| html!{<>{"Hello, "}{p.name}}} + +} +``` + +### 3. Agents: A Complete Rewrite + +Yew 0.21 brings a complete rewrite of `yew-agent`. This streamlines and simplifies the way workers operate. Here's what you need to know: + +- **Introducing Providers:** Say goodbye to the old `Worker::bridge()` method. Now, you can use the use `WorkerProvider` / `ReactorProvider` / `OneshotProvider` as per your need, by creating them using the hooks. + +- **WorkerLink to WorkerScope:** We've removed WorkerLink in favor of WorkerScope. This change simplifies the worker architecture, making it more straightforward to manage and maintain. + +There are now 3 types of agents to be used, depending upon the situation: + +- **Worker Agent:** The original agent that uses an actor model, designed to handle complex states. + +- **Oneshot Agent:** Designed for scenarios where you expect a single input and a single output for each agent. + +- **Reactor Agent:** Ideal for situations where multiple inputs and multiple outputs are needed for each agent. + +Learn more in [documentation of yew-agent](https://docs.rs/yew-agent/latest/yew_agent/) + +### 4. Performance Improvements: A Faster and Smoother Experience + +Yew 0.21 brings substantial performance improvements. Your web applications will run faster and more efficiently, thanks to optimizations that reduce memory usage and enhance rendering. + +## Call for Contributors + +The Yew project thrives on community involvement, and we welcome contributors with open arms. Whether you're an experienced Rust developer or just starting your journey, there are plenty of ways to get involved and make a meaningful impact on Yew's growth. + +Here are some areas where you can contribute: + +- **Code Contributions:** If you're passionate about web development with Rust, consider contributing code to Yew. Whether it's fixing bugs, adding new features, or improving documentation, your code can help make Yew even better. + +- **Documentation:** Clear and comprehensive documentation is vital for any project's success. You can contribute by improving documentation, writing tutorials, or creating examples that help others understand and use Yew effectively. + +- **Testing and Bug Reporting:** Testing Yew and reporting bugs you encounter is a valuable contribution. Your feedback helps us identify and fix issues, ensuring a more stable framework for everyone. + +- **Community Support:** Join discussions, chat rooms (we have our own Discord and Matrix!), or social media to assist other developers using Yew. Sharing your knowledge and helping others solve problems is a fantastic way to contribute. + +Contributing to open-source projects like Yew is not only a way to give back to the community but also an excellent opportunity to learn, collaborate, and enhance your skills. + +To get started, check out the Yew GitHub repository and the contribution guidelines. Your contributions are highly appreciated and play a crucial role in shaping the future of Yew. Join us in this exciting journey! + +## Thanks! + +Many people came together to create Yew 0.21. We couldn't have done it without all of you. Thanks! + +See [the full changelog](https://github.com/yewstack/yew/blob/master/CHANGELOG.md) diff --git a/website/docs/migration-guides/yew/from-0_20_0-to-0_21_0.mdx b/website/docs/migration-guides/yew/from-0_20_0-to-0_21_0.mdx new file mode 100644 index 00000000000..92558ded8c3 --- /dev/null +++ b/website/docs/migration-guides/yew/from-0_20_0-to-0_21_0.mdx @@ -0,0 +1,71 @@ +--- +title: 'From 0.20.0 to 0.21.0' +--- + +import Tabs from '@theme/Tabs' +import TabItem from '@theme/TabItem' + +## Dependencies as first hook argument and `use_effect_with` + +- Replace `use_effect_with_deps` with new `use_effect_with` +- `use_effect_with`, `use_callback`, `use_memo` now take dependencies as their first argument + +### Automated refactor + +With the help of [https://ast-grep.github.io](https://ast-grep.github.io/guide/quick-start.html) +Here are commands that can do the refactoring for you. + +```bash +sg --pattern 'use_effect_with_deps($CALLBACK,$$$DEPENDENCIES)' --rewrite 'use_effect_with($$$DEPENDENCIES, $CALLBACK)' -l rs -i +sg --pattern 'use_effect_with($DEPENDENCIES,,$$$CALLBACK)' --rewrite 'use_effect_with($DEPENDENCIES,$$$CALLBACK)' -l rs -i + +sg --pattern 'use_callback($CALLBACK,$$$DEPENDENCIES)' --rewrite 'use_callback($$$DEPENDENCIES, $CALLBACK)' -l rs -i +sg --pattern 'use_callback($DEPENDENCIES,,$$$CALLBACK)' --rewrite 'use_callback($DEPENDENCIES,$$$CALLBACK)' -l rs -i + +sg --pattern 'use_memo($CALLBACK,$$$DEPENDENCIES)' --rewrite 'use_memo($$$DEPENDENCIES, $CALLBACK)' -l rs -i +sg --pattern 'use_memo($DEPENDENCIES,,$$$CALLBACK)' --rewrite 'use_memo($DEPENDENCIES,$$$CALLBACK)' -l rs -i + +sg --pattern 'use_future_with_deps($CALLBACK,$$$DEPENDENCIES)' --rewrite 'use_effect_with($$$DEPENDENCIES, $CALLBACK)' -l rs -i +sg --pattern 'use_future_with($DEPENDENCIES,,$$$CALLBACK)' --rewrite 'use_effect_with($DEPENDENCIES,$$$CALLBACK)' -l rs -i + +sg --pattern 'use_transitive_state!($DEPENDENCIES,,$$$CALLBACK)' --rewrite 'use_transitive_state!($DEPENDENCIES,$$$CALLBACK)' -l rs -i +sg --pattern 'use_transitive_state!($DEPENDENCIES,,$$$CALLBACK)' --rewrite 'use_transitive_state!($DEPENDENCIES,$$$CALLBACK)' -l rs -i + +sg --pattern 'use_prepared_state!($DEPENDENCIES,,$$$CALLBACK)' --rewrite 'use_prepared_state!($DEPENDENCIES,$$$CALLBACK)' -l rs -i +sg --pattern 'use_prepared_state!($DEPENDENCIES,,$$$CALLBACK)' --rewrite 'use_prepared_state!($DEPENDENCIES,$$$CALLBACK)' -l rs -i +``` + +### Reasoning + +This will enable more ergonomic use of hooks, consider: + + + + +```rust ,ignore +impl SomeLargeStruct { + fn id(&self) -> u32; // Only need to use the id as cache key +} +let some_dep: SomeLargeStruct = todo!(); + +{ + let id = some_dep.id(); // Have to extract it in advance, some_dep is moved already in the second argument + use_effect_with_dep(move |_| { todo!(); drop(some_dep); }, id); +} +``` + + + + +```rust ,ignore +impl SomeLargeStruct { + fn id(&self) -> u32; // Only need to use the id as cache key +} +let some_dep: SomeLargeStruct = todo!(); + +use_effect_with(some_dep.id(), move |_| { todo!(); drop(some_dep); }); + +``` + + + diff --git a/website/docusaurus.config.js b/website/docusaurus.config.js index 0f64678e51b..79c40d11b12 100644 --- a/website/docusaurus.config.js +++ b/website/docusaurus.config.js @@ -119,8 +119,8 @@ module.exports = { prism: { additionalLanguages: ['rust', 'toml'], }, - googleAnalytics: { - trackingID: 'UA-141789564-1', + gtag: { + trackingID: 'G-DENCL8P4YP', anonymizeIP: true, }, }, diff --git a/website/i18n/ja/docusaurus-plugin-content-docs/version-0.21.json b/website/i18n/ja/docusaurus-plugin-content-docs/version-0.21.json new file mode 100644 index 00000000000..0ab4c0608c2 --- /dev/null +++ b/website/i18n/ja/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/ja/docusaurus-plugin-content-docs/version-0.21/advanced-topics/how-it-works.mdx b/website/i18n/ja/docusaurus-plugin-content-docs/version-0.21/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.21/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.21/advanced-topics/optimizations.mdx b/website/i18n/ja/docusaurus-plugin-content-docs/version-0.21/advanced-topics/optimizations.mdx new file mode 100644 index 00000000000..d9db08c0fa9 --- /dev/null +++ b/website/i18n/ja/docusaurus-plugin-content-docs/version-0.21/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.21/advanced-topics/struct-components/callbacks.mdx b/website/i18n/ja/docusaurus-plugin-content-docs/version-0.21/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.21/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.21/advanced-topics/struct-components/lifecycle.mdx b/website/i18n/ja/docusaurus-plugin-content-docs/version-0.21/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.21/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.21/advanced-topics/struct-components/properties.mdx b/website/i18n/ja/docusaurus-plugin-content-docs/version-0.21/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.21/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.21/advanced-topics/struct-components/refs.mdx b/website/i18n/ja/docusaurus-plugin-content-docs/version-0.21/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.21/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.21/concepts/agents.mdx b/website/i18n/ja/docusaurus-plugin-content-docs/version-0.21/concepts/agents.mdx new file mode 100644 index 00000000000..efe31f8efef --- /dev/null +++ b/website/i18n/ja/docusaurus-plugin-content-docs/version-0.21/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.21/concepts/html/components.mdx b/website/i18n/ja/docusaurus-plugin-content-docs/version-0.21/concepts/html/components.mdx new file mode 100644 index 00000000000..23434dad96c --- /dev/null +++ b/website/i18n/ja/docusaurus-plugin-content-docs/version-0.21/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.21/concepts/html/elements.mdx b/website/i18n/ja/docusaurus-plugin-content-docs/version-0.21/concepts/html/elements.mdx new file mode 100644 index 00000000000..9bb97e147c2 --- /dev/null +++ b/website/i18n/ja/docusaurus-plugin-content-docs/version-0.21/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! { +
+
+
+ + + + +