Prepare for 0.21 release

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 <Link>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

website/blog/2023-09-23-release-0-21.md

@@ -0,0 +1,86 @@
+---
+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<i32>| {
+    // 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! {
+    <Comp>
+        {|p: RenderProps| html!{<>{"Hello, "}{p.name}</>}}
+    </Comp>
+}
+```
+
+### 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:
+
+-   **Unification of PublicWorker and PrivateWorker:** We've brought PublicWorker and PrivateWorker together, creating a single, consistent worker type that's easier to work with.
+
+-   **Introducing WorkerSpawner:** Say goodbye to the old `Worker::bridge()` method. Now, you can use the WorkerSpawner with a builder pattern to spawn workers. It's a more intuitive way to create workers, and it always spawns a new one.
+
+-   **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.
+
+-   **WorkerBridge::fork():** For those who relied on PublicWorker functionality, we've introduced WorkerBridge::fork(). It allows you to "fork" the bridge with a different callback and HandlerId.
+
+There are two types of agents to be used, depending upon the situation:
+
+-   **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)

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:
+
+<Tabs>
+  <TabItem value="before" label="Before" default>
+
+```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);
+}
+```
+
+  </TabItem>
+  <TabItem value="after" label="After">
+
+```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); });
+
+```
+
+  </TabItem>
+</Tabs>

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 の異なるアルゴリズム