-
-
Notifications
You must be signed in to change notification settings - Fork 1.4k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* 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 <futursolo@users.noreply.github.com> * prettier --------- Co-authored-by: Kaede Hoshikawa <futursolo@users.noreply.github.com>
- Loading branch information
Showing
131 changed files
with
12,273 additions
and
163 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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<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: | ||
|
|
||
| - **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) |
71 changes: 71 additions & 0 deletions
71
website/docs/migration-guides/yew/from-0_20_0-to-0_21_0.mdx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
86 changes: 86 additions & 0 deletions
86
website/i18n/ja/docusaurus-plugin-content-docs/version-0.21.json
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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" | ||
| } | ||
| } |
8 changes: 8 additions & 0 deletions
8
...ja/docusaurus-plugin-content-docs/version-0.21/advanced-topics/how-it-works.mdx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,8 @@ | ||
| --- | ||
| title: How it works | ||
| description: Low level details about the framework | ||
| --- | ||
|
|
||
| # 低レベルなライブラリの中身 | ||
|
|
||
| コンポーネントのライフサイクルの状態機械、VDOM の異なるアルゴリズム |
Oops, something went wrong.