Bump the website-deps group across 1 directory with 15 updates (#3798)

* Bump the website-deps group across 1 directory with 15 updates

Bumps the website-deps group with 14 updates in the /website directory:

| Package | From | To |
| --- | --- | --- |
| [@docusaurus/core](https://github.com/facebook/docusaurus/tree/HEAD/packages/docusaurus) | `3.5.2` | `3.7.0` |
| [@docusaurus/plugin-client-redirects](https://github.com/facebook/docusaurus/tree/HEAD/packages/docusaurus-plugin-client-redirects) | `3.5.2` | `3.7.0` |
| [@docusaurus/preset-classic](https://github.com/facebook/docusaurus/tree/HEAD/packages/docusaurus-preset-classic) | `3.5.2` | `3.7.0` |
| [@mdx-js/react](https://github.com/mdx-js/mdx/tree/HEAD/packages/react) | `3.0.1` | `3.1.0` |
| [docusaurus-plugin-sass](https://github.com/rlamana/docusaurus-plugin-sass) | `0.2.5` | `0.2.6` |
| [react](https://github.com/facebook/react/tree/HEAD/packages/react) | `18.3.1` | `19.0.0` |
| [@types/react](https://github.com/DefinitelyTyped/DefinitelyTyped/tree/HEAD/types/react) | `18.3.10` | `19.0.8` |
| [react-dom](https://github.com/facebook/react/tree/HEAD/packages/react-dom) | `18.3.1` | `19.0.0` |
| [sass](https://github.com/sass/dart-sass) | `1.79.4` | `1.83.4` |
| [@docusaurus/tsconfig](https://github.com/facebook/docusaurus/tree/HEAD/packages/docusaurus-tsconfig) | `3.5.2` | `3.7.0` |
| [@typescript-eslint/eslint-plugin](https://github.com/typescript-eslint/typescript-eslint/tree/HEAD/packages/eslint-plugin) | `8.8.0` | `8.22.0` |
| [@typescript-eslint/parser](https://github.com/typescript-eslint/typescript-eslint/tree/HEAD/packages/parser) | `8.8.0` | `8.22.0` |
| [prettier](https://github.com/prettier/prettier) | `3.3.3` | `3.4.2` |
| [typescript](https://github.com/microsoft/TypeScript) | `5.6.2` | `5.7.3` |



Updates `@docusaurus/core` from 3.5.2 to 3.7.0
- [Release notes](https://github.com/facebook/docusaurus/releases)
- [Changelog](https://github.com/facebook/docusaurus/blob/main/CHANGELOG.md)
- [Commits](https://github.com/facebook/docusaurus/commits/v3.7.0/packages/docusaurus)

Updates `@docusaurus/plugin-client-redirects` from 3.5.2 to 3.7.0
- [Release notes](https://github.com/facebook/docusaurus/releases)
- [Changelog](https://github.com/facebook/docusaurus/blob/main/CHANGELOG.md)
- [Commits](https://github.com/facebook/docusaurus/commits/v3.7.0/packages/docusaurus-plugin-client-redirects)

Updates `@docusaurus/preset-classic` from 3.5.2 to 3.7.0
- [Release notes](https://github.com/facebook/docusaurus/releases)
- [Changelog](https://github.com/facebook/docusaurus/blob/main/CHANGELOG.md)
- [Commits](https://github.com/facebook/docusaurus/commits/v3.7.0/packages/docusaurus-preset-classic)

Updates `@mdx-js/react` from 3.0.1 to 3.1.0
- [Release notes](https://github.com/mdx-js/mdx/releases)
- [Changelog](https://github.com/mdx-js/mdx/blob/main/changelog.md)
- [Commits](https://github.com/mdx-js/mdx/commits/3.1.0/packages/react)

Updates `docusaurus-plugin-sass` from 0.2.5 to 0.2.6
- [Release notes](https://github.com/rlamana/docusaurus-plugin-sass/releases)
- [Commits](https://github.com/rlamana/docusaurus-plugin-sass/compare/v0.2.5...v0.2.6)

Updates `react` from 18.3.1 to 19.0.0
- [Release notes](https://github.com/facebook/react/releases)
- [Changelog](https://github.com/facebook/react/blob/main/CHANGELOG.md)
- [Commits](https://github.com/facebook/react/commits/v19.0.0/packages/react)

Updates `@types/react` from 18.3.10 to 19.0.8
- [Release notes](https://github.com/DefinitelyTyped/DefinitelyTyped/releases)
- [Commits](https://github.com/DefinitelyTyped/DefinitelyTyped/commits/HEAD/types/react)

Updates `react-dom` from 18.3.1 to 19.0.0
- [Release notes](https://github.com/facebook/react/releases)
- [Changelog](https://github.com/facebook/react/blob/main/CHANGELOG.md)
- [Commits](https://github.com/facebook/react/commits/v19.0.0/packages/react-dom)

Updates `sass` from 1.79.4 to 1.83.4
- [Release notes](https://github.com/sass/dart-sass/releases)
- [Changelog](https://github.com/sass/dart-sass/blob/main/CHANGELOG.md)
- [Commits](https://github.com/sass/dart-sass/compare/1.79.4...1.83.4)

Updates `@docusaurus/module-type-aliases` from 3.5.2 to 3.7.0
- [Release notes](https://github.com/facebook/docusaurus/releases)
- [Changelog](https://github.com/facebook/docusaurus/blob/main/CHANGELOG.md)
- [Commits](https://github.com/facebook/docusaurus/commits/v3.7.0/packages/docusaurus-module-type-aliases)

Updates `@docusaurus/tsconfig` from 3.5.2 to 3.7.0
- [Release notes](https://github.com/facebook/docusaurus/releases)
- [Changelog](https://github.com/facebook/docusaurus/blob/main/CHANGELOG.md)
- [Commits](https://github.com/facebook/docusaurus/commits/v3.7.0/packages/docusaurus-tsconfig)

Updates `@types/react` from 18.3.10 to 19.0.8
- [Release notes](https://github.com/DefinitelyTyped/DefinitelyTyped/releases)
- [Commits](https://github.com/DefinitelyTyped/DefinitelyTyped/commits/HEAD/types/react)

Updates `@typescript-eslint/eslint-plugin` from 8.8.0 to 8.22.0
- [Release notes](https://github.com/typescript-eslint/typescript-eslint/releases)
- [Changelog](https://github.com/typescript-eslint/typescript-eslint/blob/main/packages/eslint-plugin/CHANGELOG.md)
- [Commits](https://github.com/typescript-eslint/typescript-eslint/commits/v8.22.0/packages/eslint-plugin)

Updates `@typescript-eslint/parser` from 8.8.0 to 8.22.0
- [Release notes](https://github.com/typescript-eslint/typescript-eslint/releases)
- [Changelog](https://github.com/typescript-eslint/typescript-eslint/blob/main/packages/parser/CHANGELOG.md)
- [Commits](https://github.com/typescript-eslint/typescript-eslint/commits/v8.22.0/packages/parser)

Updates `prettier` from 3.3.3 to 3.4.2
- [Release notes](https://github.com/prettier/prettier/releases)
- [Changelog](https://github.com/prettier/prettier/blob/main/CHANGELOG.md)
- [Commits](https://github.com/prettier/prettier/compare/3.3.3...3.4.2)

Updates `typescript` from 5.6.2 to 5.7.3
- [Release notes](https://github.com/microsoft/TypeScript/releases)
- [Changelog](https://github.com/microsoft/TypeScript/blob/main/azure-pipelines.release.yml)
- [Commits](https://github.com/microsoft/TypeScript/compare/v5.6.2...v5.7.3)

---
updated-dependencies:
- dependency-name: "@docusaurus/core"
  dependency-type: direct:production
  update-type: version-update:semver-minor
  dependency-group: website-deps
- dependency-name: "@docusaurus/plugin-client-redirects"
  dependency-type: direct:production
  update-type: version-update:semver-minor
  dependency-group: website-deps
- dependency-name: "@docusaurus/preset-classic"
  dependency-type: direct:production
  update-type: version-update:semver-minor
  dependency-group: website-deps
- dependency-name: "@mdx-js/react"
  dependency-type: direct:production
  update-type: version-update:semver-minor
  dependency-group: website-deps
- dependency-name: docusaurus-plugin-sass
  dependency-type: direct:production
  update-type: version-update:semver-patch
  dependency-group: website-deps
- dependency-name: react
  dependency-type: direct:production
  update-type: version-update:semver-major
  dependency-group: website-deps
- dependency-name: "@types/react"
  dependency-type: direct:development
  update-type: version-update:semver-major
  dependency-group: website-deps
- dependency-name: react-dom
  dependency-type: direct:production
  update-type: version-update:semver-major
  dependency-group: website-deps
- dependency-name: sass
  dependency-type: direct:production
  update-type: version-update:semver-minor
  dependency-group: website-deps
- dependency-name: "@docusaurus/module-type-aliases"
  dependency-type: direct:development
  update-type: version-update:semver-minor
  dependency-group: website-deps
- dependency-name: "@docusaurus/tsconfig"
  dependency-type: direct:development
  update-type: version-update:semver-minor
  dependency-group: website-deps
- dependency-name: "@types/react"
  dependency-type: direct:development
  update-type: version-update:semver-major
  dependency-group: website-deps
- dependency-name: "@typescript-eslint/eslint-plugin"
  dependency-type: direct:development
  update-type: version-update:semver-minor
  dependency-group: website-deps
- dependency-name: "@typescript-eslint/parser"
  dependency-type: direct:development
  update-type: version-update:semver-minor
  dependency-group: website-deps
- dependency-name: prettier
  dependency-type: direct:development
  update-type: version-update:semver-minor
  dependency-group: website-deps
- dependency-name: typescript
  dependency-type: direct:development
  update-type: version-update:semver-minor
  dependency-group: website-deps
...

Signed-off-by: dependabot[bot] <support@github.com>

* chore: fix formatting

* chore: bump prettier (can't reproduce element.mdx warning locally?)

* workflow: show formatting diff for locally unproduceable errors

* chore: format elements.mdx

---------

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Co-authored-by: Matt Yan <syan4@ualberta.ca>
Co-authored-by: Siyuan Yan <44753941+Madoshakalaka@users.noreply.github.com>
This commit is contained in:
dependabot[bot] 2025-02-21 07:33:40 +09:00 committed by GitHub
parent cb2b8e07b1
commit 7ea787285e
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
354 changed files with 7370 additions and 4171 deletions

View File

@ -30,11 +30,22 @@ jobs:
cd website
npm ci
- name: Run prettier
id: fmt
continue-on-error: true
run: |
cd website
npm run fmt
- if: steps.fmt.outcome == 'failure'
run: |
cd website
npm run fmt:write
git diff
exit 1
- name: Check Translations
run: |
cd website

View File

@ -43,17 +43,17 @@ html! {
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.
- **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.
- **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.
- **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.
- **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.
- **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/)
@ -67,13 +67,13 @@ The Yew project thrives on community involvement, and we welcome contributors wi
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.
- **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.
- **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.
- **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.
- **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.

View File

@ -21,13 +21,13 @@ The Yew project thrives on community involvement, and we welcome contributors wi
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.
- **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.
- **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.
- **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.
- **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.

View File

@ -5,146 +5,146 @@ description: 'Community projects built using yew'
## Projects
- [Realworld example](https://github.com/jetli/rust-yew-realworld-example-app) - Exemplary real world app built with Rust + Yew + WebAssembly. It utilizes Yew's latest `function components` and `hooks`. It also supports desktop application powered by [Tauri](https://github.com/tauri-apps/tauri).
- [webapp.rs](https://github.com/saschagrunert/webapp.rs) - A web application completely written in Rust, frontend is built with Yew.
- [Rust-Full-Stack](https://github.com/steadylearner/Rust-Full-Stack) - Easily testable and working Rust codes with blog posts to explain them.
- [Bucket Questions](https://github.com/hgzimmerman/BucketQuestions) - A webapp written entirely in Rust for a dumb party game.
- [web-view todomvc desktop app](https://github.com/Extrawurst/rust-webview-todomvc-yew) - Demo how to use yew for a todomvc that compiles to WebAssembly and is bundled as a lightweight(~2mb) desktop app by [web-view](https://github.com/Boscop/web-view), as an alternative to Electron, [web-view](https://github.com/Boscop/web-view) also has a [demo](https://github.com/Boscop/web-view/tree/master/webview-examples/examples#todo-yew).
- [yew-react-example](https://github.com/hobofan/yew-react-example) - This project shows how to create a web app using a React component inside a Yew component.
- [Kirk](https://github.com/stkevintan/Kirk) - Just A Rust WebAssembly Blog.
- [rust-async-wasm-demo](https://github.com/extraymond/rust-async-wasm-demo) - Toy project to learn Rust and async that can be deployed to the web.
- [karaoke-rs](https://github.com/tarkah/karaoke-rs) - A simple, network enabled karaoke player in Rust.
- [I Love Hue! (rs)](https://github.com/noc7c9/i-love-hue-rs) - A clone of the mobile game I Love Hue in Yew (Rust).
- [yew-styles-page](https://github.com/spielrs/yew-styles-page) - This is an initial project of a framework style for yew.
- [caniuse.rs](https://github.com/jplatte/caniuse.rs) - Rust feature search.
- [Rust electron yew demo](https://github.com/Extrawurst/rust-electron-demo) - An example of building a Rust based web app (Yew) into a native app using electron.
- [covplot](https://github.com/jbowens/covplot) - Live graphs of worldwide CoVID-19 data.
- [Tanoshi](https://github.com/fadhlika/tanoshi-web) - Tachiyomi-like web manga reader. Front-end for tanoshi.
- [Minesweeper](https://github.com/jgpaiva/minesweeper) - Minesweeper built with Rust, Yew and WebAssembly.
- [Freecell](https://github.com/Stigjb/freecell) - A patience game written in Rust and Yew.
- [Daydream](https://github.com/MTRNord/Daydream) - A small Matrix web client written in Rust.
- [Yew-WebRTC-Chat](https://github.com/codec-abc/Yew-WebRTC-Chat) - A simple WebRTC chat made with Yew.
- [Yew Fullstack Boilerplate](https://github.com/lukidoescode/yew-fullstack-boilerplate) - Highly opinionated boilerplate for creating full stack applications with Rust.
- [Chord Quiz](https://github.com/Stigjb/chord-quiz) - Practice recognizing chords in this Rust/Yew/WebAssembly app.
- [RustMart](https://github.com/sheshbabu/rustmart-yew-example) - Single Page Application (SPA) written using Rust, Wasm and Yew.
- [DevAndDev](https://github.com/alepez/devand) - A website where developers can find pair-programming partners. Written in Rust, Yew frontend.
- [yew-octicons](https://github.com/io12/yew-octicons) - An easy interface for using Octicons in Yew projects.
- [Pipe](https://github.com/pipe-fun/pipe) - This is a Rust / Wasm client web app which is a task control center.
- [note-to-yew](https://github.com/oovm/note-to-yew) - Convert your markups into Yew macro online, which is also made by Yew.
- [ASCII-Hangman](https://github.com/getreu/ascii-hangman) - Configurable Hangman game for children with ASCII-art rewarding.
- [dotdotyew](https://github.com/shaunbennett/dotdotyew) - [Dot-voting](https://en.wikipedia.org/wiki/Dot-voting) using Yew, with Rust powering the backend API.
- [wasm-2048](https://github.com/dev-family/wasm-2048) - 2048 game implemented with Rust and Yew and compiled to Wasm.
- [website-wasm](https://github.com/kamiyaa/website-wasm) - My personal website written in Rust via Yew/Wasm.
- [KeyPress](https://github.com/rayylee/keypress) - A Rust WebAssembly Website example for practising english for chinese.
- [yew-train-ticket](https://github.com/anthhub/yew-train-ticket) - A Rust WebAssembly Webapp example basing Yew newest hooks and functional API, the code style is extremely like React Function Component.
- [yew-d3-example](https://github.com/ivanschuetz/yew-d3-example) - Showing a d3 chart with Yew.
- [Oxfeed](https://github.com/sanpii/oxfeed) - A feed reader written in Rust with a Yew frontend.
- [Flow.er](https://github.com/LighghtEeloo/flow.er) - A notebook app integrated with todo lists utility. Developed with Rust, WebAssembly, Yew and Trunk.
- [Fullstack-Rust](https://github.com/vascokk/fullstack-rust) - A Full Stack Rust application (Connect5 game) with Actix-web, Yew, Bulma CSS and Diesel.
- [Sea_battle](https://github.com/MAE664128/sea_battle) - A simple example of a sea battle game. Rust + Yew.
- [tide-async-graphql-mongodb](https://github.com/zzy/tide-async-graphql-mongodb) - Clean boilerplate for graphql services, with wasm/yew frontend.
- [surfer](https://github.com/zzy/surfer) - A blog built on yew + graphql, with [live demo site](https://niqin.com). Backend for graphql services, and frontend for web application.
- [qubit](https://abhimanyu003.github.io/qubit) - A handy calculator, based on Rust and WebAssembly, [Live Demo](https://abhimanyu003.github.io/qubit/).
- [Paudle](https://github.com/pmsanford/paudle) - A reimplementation of the excellent word game Wordle by Josh Wardle.
- [Rust algorithms](https://github.com/Jondolf/rust-algorithms) - A website with interactive implementations of various algorithms (only sorting algorithms for now).
- [Marc Portfolio](https://gitlab.com/marcempunkt/maeurerdev) - A software developer portfolio, [Live Demo](https://maeurer.dev/).
- [zzhack](https://github.com/zzhack-stack/zzhack) - A personal blog, based on Rust & Yew, [Live Demo](https://www.zzhack.fun/technology).
- [viz.rs](https://github.com/viz-rs/viz-rs.github.io) - A website for viz web framework, [Live Demo](https://viz.rs/).
- [hurlurl](https://github.com/lucasmerlin/hurlurl) - A randomizing link shortener, [Live Demo](https://hurlurl.com/).
- [Macige](https://github.com/tramlinehq/macige) - CI workflow generator for mobile app development, [Live Demo](https://macige.tramline.app).
- [Spaceman](https://github.com/eliaperantoni/spaceman) - A cross-platform and graphical client for the gRPC communication protocol.
- [Realworld example](https://github.com/jetli/rust-yew-realworld-example-app) - Exemplary real world app built with Rust + Yew + WebAssembly. It utilizes Yew's latest `function components` and `hooks`. It also supports desktop application powered by [Tauri](https://github.com/tauri-apps/tauri).
- [webapp.rs](https://github.com/saschagrunert/webapp.rs) - A web application completely written in Rust, frontend is built with Yew.
- [Rust-Full-Stack](https://github.com/steadylearner/Rust-Full-Stack) - Easily testable and working Rust codes with blog posts to explain them.
- [Bucket Questions](https://github.com/hgzimmerman/BucketQuestions) - A webapp written entirely in Rust for a dumb party game.
- [web-view todomvc desktop app](https://github.com/Extrawurst/rust-webview-todomvc-yew) - Demo how to use yew for a todomvc that compiles to WebAssembly and is bundled as a lightweight(~2mb) desktop app by [web-view](https://github.com/Boscop/web-view), as an alternative to Electron, [web-view](https://github.com/Boscop/web-view) also has a [demo](https://github.com/Boscop/web-view/tree/master/webview-examples/examples#todo-yew).
- [yew-react-example](https://github.com/hobofan/yew-react-example) - This project shows how to create a web app using a React component inside a Yew component.
- [Kirk](https://github.com/stkevintan/Kirk) - Just A Rust WebAssembly Blog.
- [rust-async-wasm-demo](https://github.com/extraymond/rust-async-wasm-demo) - Toy project to learn Rust and async that can be deployed to the web.
- [karaoke-rs](https://github.com/tarkah/karaoke-rs) - A simple, network enabled karaoke player in Rust.
- [I Love Hue! (rs)](https://github.com/noc7c9/i-love-hue-rs) - A clone of the mobile game I Love Hue in Yew (Rust).
- [yew-styles-page](https://github.com/spielrs/yew-styles-page) - This is an initial project of a framework style for yew.
- [caniuse.rs](https://github.com/jplatte/caniuse.rs) - Rust feature search.
- [Rust electron yew demo](https://github.com/Extrawurst/rust-electron-demo) - An example of building a Rust based web app (Yew) into a native app using electron.
- [covplot](https://github.com/jbowens/covplot) - Live graphs of worldwide CoVID-19 data.
- [Tanoshi](https://github.com/fadhlika/tanoshi-web) - Tachiyomi-like web manga reader. Front-end for tanoshi.
- [Minesweeper](https://github.com/jgpaiva/minesweeper) - Minesweeper built with Rust, Yew and WebAssembly.
- [Freecell](https://github.com/Stigjb/freecell) - A patience game written in Rust and Yew.
- [Daydream](https://github.com/MTRNord/Daydream) - A small Matrix web client written in Rust.
- [Yew-WebRTC-Chat](https://github.com/codec-abc/Yew-WebRTC-Chat) - A simple WebRTC chat made with Yew.
- [Yew Fullstack Boilerplate](https://github.com/lukidoescode/yew-fullstack-boilerplate) - Highly opinionated boilerplate for creating full stack applications with Rust.
- [Chord Quiz](https://github.com/Stigjb/chord-quiz) - Practice recognizing chords in this Rust/Yew/WebAssembly app.
- [RustMart](https://github.com/sheshbabu/rustmart-yew-example) - Single Page Application (SPA) written using Rust, Wasm and Yew.
- [DevAndDev](https://github.com/alepez/devand) - A website where developers can find pair-programming partners. Written in Rust, Yew frontend.
- [yew-octicons](https://github.com/io12/yew-octicons) - An easy interface for using Octicons in Yew projects.
- [Pipe](https://github.com/pipe-fun/pipe) - This is a Rust / Wasm client web app which is a task control center.
- [note-to-yew](https://github.com/oovm/note-to-yew) - Convert your markups into Yew macro online, which is also made by Yew.
- [ASCII-Hangman](https://github.com/getreu/ascii-hangman) - Configurable Hangman game for children with ASCII-art rewarding.
- [dotdotyew](https://github.com/shaunbennett/dotdotyew) - [Dot-voting](https://en.wikipedia.org/wiki/Dot-voting) using Yew, with Rust powering the backend API.
- [wasm-2048](https://github.com/dev-family/wasm-2048) - 2048 game implemented with Rust and Yew and compiled to Wasm.
- [website-wasm](https://github.com/kamiyaa/website-wasm) - My personal website written in Rust via Yew/Wasm.
- [KeyPress](https://github.com/rayylee/keypress) - A Rust WebAssembly Website example for practising english for chinese.
- [yew-train-ticket](https://github.com/anthhub/yew-train-ticket) - A Rust WebAssembly Webapp example basing Yew newest hooks and functional API, the code style is extremely like React Function Component.
- [yew-d3-example](https://github.com/ivanschuetz/yew-d3-example) - Showing a d3 chart with Yew.
- [Oxfeed](https://github.com/sanpii/oxfeed) - A feed reader written in Rust with a Yew frontend.
- [Flow.er](https://github.com/LighghtEeloo/flow.er) - A notebook app integrated with todo lists utility. Developed with Rust, WebAssembly, Yew and Trunk.
- [Fullstack-Rust](https://github.com/vascokk/fullstack-rust) - A Full Stack Rust application (Connect5 game) with Actix-web, Yew, Bulma CSS and Diesel.
- [Sea_battle](https://github.com/MAE664128/sea_battle) - A simple example of a sea battle game. Rust + Yew.
- [tide-async-graphql-mongodb](https://github.com/zzy/tide-async-graphql-mongodb) - Clean boilerplate for graphql services, with wasm/yew frontend.
- [surfer](https://github.com/zzy/surfer) - A blog built on yew + graphql, with [live demo site](https://niqin.com). Backend for graphql services, and frontend for web application.
- [qubit](https://abhimanyu003.github.io/qubit) - A handy calculator, based on Rust and WebAssembly, [Live Demo](https://abhimanyu003.github.io/qubit/).
- [Paudle](https://github.com/pmsanford/paudle) - A reimplementation of the excellent word game Wordle by Josh Wardle.
- [Rust algorithms](https://github.com/Jondolf/rust-algorithms) - A website with interactive implementations of various algorithms (only sorting algorithms for now).
- [Marc Portfolio](https://gitlab.com/marcempunkt/maeurerdev) - A software developer portfolio, [Live Demo](https://maeurer.dev/).
- [zzhack](https://github.com/zzhack-stack/zzhack) - A personal blog, based on Rust & Yew, [Live Demo](https://www.zzhack.fun/technology).
- [viz.rs](https://github.com/viz-rs/viz-rs.github.io) - A website for viz web framework, [Live Demo](https://viz.rs/).
- [hurlurl](https://github.com/lucasmerlin/hurlurl) - A randomizing link shortener, [Live Demo](https://hurlurl.com/).
- [Macige](https://github.com/tramlinehq/macige) - CI workflow generator for mobile app development, [Live Demo](https://macige.tramline.app).
- [Spaceman](https://github.com/eliaperantoni/spaceman) - A cross-platform and graphical client for the gRPC communication protocol.
## Templates
- [Create Yew App](https://github.com/jetli/create-yew-app) - Set up a modern Yew web app by running one command, `npx create-yew-app my-app`.
- [yew-wasm-pack-template](https://github.com/yewstack/yew-wasm-pack-template) - A template for starting a Yew project to be used with wasm-pack.
- [yew-wasm-pack-minimal](https://github.com/yewstack/yew-wasm-pack-minimal) - A minimal template for starting a Yew project using wasm-bindgen and wasm-pack.
- [yew-parcel-template](https://github.com/spielrs/yew-parcel-template) - Awesome Yew with Yew-Router and Parcel application.
- [Create Yew App](https://github.com/jetli/create-yew-app) - Set up a modern Yew web app by running one command, `npx create-yew-app my-app`.
- [yew-wasm-pack-template](https://github.com/yewstack/yew-wasm-pack-template) - A template for starting a Yew project to be used with wasm-pack.
- [yew-wasm-pack-minimal](https://github.com/yewstack/yew-wasm-pack-minimal) - A minimal template for starting a Yew project using wasm-bindgen and wasm-pack.
- [yew-parcel-template](https://github.com/spielrs/yew-parcel-template) - Awesome Yew with Yew-Router and Parcel application.
## Crates
### Component Libraries
- [yew-mdc](https://github.com/dungeonfog/yew-mdc) - Material Design Components for the Yew framework.
- [muicss-yew](https://github.com/AlephAlpha/muicss-yew) - MUI-CSS Components for Yew framework.
- [yew-bulma](https://github.com/kellpossible/yew-bulma) - A Rust library providing components based on the bulma css library for projects using Yew.
- [material-yew](https://github.com/hamza1311/material-yew) - Yew wrapper for Material Web Components.
- [Yewprint](https://github.com/cecton/yewprint) - Port of blueprintjs.com to Yew.
- [ybc](https://github.com/thedodd/ybc) - A Yew component library based on the Bulma CSS framework.
- [patternfly-yew](https://github.com/ctron/patternfly-yew) - Patternfly components for Yew.
- [yew-feather](https://github.com/pedrodesu/yew-feather) - Feather Icons components for Yew.
- [tailwind-yew-builder](https://github.com/matiu2/tailwind-yew-builder) - Builds Tailwind CSS for Yew using docker-compose. Also supports Trunk.
- [yew-components](https://github.com/angular-rust/yew-components) - Material Design Components for the Yew framework.
- [yew-chart](https://github.com/titanclass/yew-chart) - A Yew-based charting library that provides SVG based components for rendering charts.
- [yew-mdc](https://github.com/dungeonfog/yew-mdc) - Material Design Components for the Yew framework.
- [muicss-yew](https://github.com/AlephAlpha/muicss-yew) - MUI-CSS Components for Yew framework.
- [yew-bulma](https://github.com/kellpossible/yew-bulma) - A Rust library providing components based on the bulma css library for projects using Yew.
- [material-yew](https://github.com/hamza1311/material-yew) - Yew wrapper for Material Web Components.
- [Yewprint](https://github.com/cecton/yewprint) - Port of blueprintjs.com to Yew.
- [ybc](https://github.com/thedodd/ybc) - A Yew component library based on the Bulma CSS framework.
- [patternfly-yew](https://github.com/ctron/patternfly-yew) - Patternfly components for Yew.
- [yew-feather](https://github.com/pedrodesu/yew-feather) - Feather Icons components for Yew.
- [tailwind-yew-builder](https://github.com/matiu2/tailwind-yew-builder) - Builds Tailwind CSS for Yew using docker-compose. Also supports Trunk.
- [yew-components](https://github.com/angular-rust/yew-components) - Material Design Components for the Yew framework.
- [yew-chart](https://github.com/titanclass/yew-chart) - A Yew-based charting library that provides SVG based components for rendering charts.
### Components
- [Yew Form](https://github.com/jfbilodeau/yew_form) - Components to simplify handling forms with Yew.
- [yew-component-size](https://github.com/AircastDev/yew-component-size) - A Yew component that emits events when the parent component changes width/height.
- [yew-virtual-scroller](https://github.com/AircastDev/yew-virtual-scroller) - A Yew component for virtual scrolling / scroll windowing.
- [yew-autoprops](https://crates.io/crates/yew-autoprops) - proc-macro to automatically derive Properties structs from args for Yew components.
- [Yew Form](https://github.com/jfbilodeau/yew_form) - Components to simplify handling forms with Yew.
- [yew-component-size](https://github.com/AircastDev/yew-component-size) - A Yew component that emits events when the parent component changes width/height.
- [yew-virtual-scroller](https://github.com/AircastDev/yew-virtual-scroller) - A Yew component for virtual scrolling / scroll windowing.
- [yew-autoprops](https://crates.io/crates/yew-autoprops) - proc-macro to automatically derive Properties structs from args for Yew components.
### Hooks
- [yew-hooks](https://github.com/jetli/yew-hooks) - Custom Hooks library for Yew, inspired by [streamich/react-use](https://github.com/streamich/react-use) and [alibaba/hooks](https://github.com/alibaba/hooks).
- [yew-side-effect](https://github.com/futursolo/yew-side-effect) - Reconcile Side Effects in Yew Applications, inspired by [react-side-effect](https://github.com/gaearon/react-side-effect) and [react-helmet](https://github.com/nfl/react-helmet).
- [Bounce](https://github.com/futursolo/bounce) - The uncomplicated state management library for Yew, inspired by [Redux](https://github.com/reduxjs/redux) and [Recoil](https://github.com/facebookexperimental/Recoil).
- [yew-hooks](https://github.com/jetli/yew-hooks) - Custom Hooks library for Yew, inspired by [streamich/react-use](https://github.com/streamich/react-use) and [alibaba/hooks](https://github.com/alibaba/hooks).
- [yew-side-effect](https://github.com/futursolo/yew-side-effect) - Reconcile Side Effects in Yew Applications, inspired by [react-side-effect](https://github.com/gaearon/react-side-effect) and [react-helmet](https://github.com/nfl/react-helmet).
- [Bounce](https://github.com/futursolo/bounce) - The uncomplicated state management library for Yew, inspired by [Redux](https://github.com/reduxjs/redux) and [Recoil](https://github.com/facebookexperimental/Recoil).
### Utils
- [Yewdux](https://github.com/intendednull/yewdux) - Redux-like state containers for Yew apps.
- [reacty_yew](https://github.com/hobofan/reacty_yew) - Generate Yew components from React components via Typescript type definitions.
- [styled-yew](https://github.com/IcyDefiance/styled-yew) - CSS in Rust, similar to styled-components, but for Yew.
- [stylist-rs](https://github.com/futursolo/stylist-rs) - A CSS-in-Rust styling solution for WebAssembly Applications.
- [Yew Interop](https://github.com/Madoshakalaka/yew-interop) - Load JavaScript and CSS asynchronously in Yew.
- [Tailwind RS](https://github.com/oovm/tailwind-rs) - Tailwind style tracer in rust, JIT + AOT interpreter.
- [Yewdux](https://github.com/intendednull/yewdux) - Redux-like state containers for Yew apps.
- [reacty_yew](https://github.com/hobofan/reacty_yew) - Generate Yew components from React components via Typescript type definitions.
- [styled-yew](https://github.com/IcyDefiance/styled-yew) - CSS in Rust, similar to styled-components, but for Yew.
- [stylist-rs](https://github.com/futursolo/stylist-rs) - A CSS-in-Rust styling solution for WebAssembly Applications.
- [Yew Interop](https://github.com/Madoshakalaka/yew-interop) - Load JavaScript and CSS asynchronously in Yew.
- [Tailwind RS](https://github.com/oovm/tailwind-rs) - Tailwind style tracer in rust, JIT + AOT interpreter.
### Wasm
- [wasm-bindgen](https://github.com/rustwasm/wasm-bindgen) - Facilitating high-level interactions between WebAssembly modules and JavaScript.
- [stdweb](https://github.com/koute/stdweb) - Provides Rust bindings to the Web APIs and to allow a high degree of interoperability between Rust and JavaScript.
- [wasm-bindgen](https://github.com/rustwasm/wasm-bindgen) - Facilitating high-level interactions between WebAssembly modules and JavaScript.
- [stdweb](https://github.com/koute/stdweb) - Provides Rust bindings to the Web APIs and to allow a high degree of interoperability between Rust and JavaScript.
## Tooling
- [wasm-pack](https://github.com/rustwasm/wasm-pack) - Your favorite Rust -> WebAssembly workflow tool.
- [wasm-pack-action](https://github.com/jetli/wasm-pack-action) - Github action to install `wasm-pack` by downloading the executable to speed up CI/CD.
- [wasm-bindgen-action](https://github.com/jetli/wasm-bindgen-action) - Github action to install `wasm-bindgen` by downloading the executable to speed up CI/CD.
- [cargo-web](https://github.com/koute/cargo-web) - A Cargo subcommand for the client-side Web.
- [Trunk](https://github.com/thedodd/trunk) - Build, bundle & ship your Rust Wasm application to the web.
- [trunk-action](https://github.com/jetli/trunk-action) - Github action to install `Trunk` by downloading the executable to speed up CI/CD.
- [wabt](https://github.com/WebAssembly/wabt) - The WebAssembly Binary Toolkit, for the `wasm-strip` and `wasm-objdump` tools to reduce .wasm file size.
- [binaryen](https://github.com/WebAssembly/binaryen) - Compiler infrastructure and toolchain library for WebAssembly, for the `wasm-opt` tool to reduce .wasm file size.
- [wasm-pack](https://github.com/rustwasm/wasm-pack) - Your favorite Rust -> WebAssembly workflow tool.
- [wasm-pack-action](https://github.com/jetli/wasm-pack-action) - Github action to install `wasm-pack` by downloading the executable to speed up CI/CD.
- [wasm-bindgen-action](https://github.com/jetli/wasm-bindgen-action) - Github action to install `wasm-bindgen` by downloading the executable to speed up CI/CD.
- [cargo-web](https://github.com/koute/cargo-web) - A Cargo subcommand for the client-side Web.
- [Trunk](https://github.com/thedodd/trunk) - Build, bundle & ship your Rust Wasm application to the web.
- [trunk-action](https://github.com/jetli/trunk-action) - Github action to install `Trunk` by downloading the executable to speed up CI/CD.
- [wabt](https://github.com/WebAssembly/wabt) - The WebAssembly Binary Toolkit, for the `wasm-strip` and `wasm-objdump` tools to reduce .wasm file size.
- [binaryen](https://github.com/WebAssembly/binaryen) - Compiler infrastructure and toolchain library for WebAssembly, for the `wasm-opt` tool to reduce .wasm file size.
## Articles
- [Let's Build a Rust Frontend with Yew](https://dev.to/deciduously/lets-build-a-rust-frontend-with-yew---part-1-3k2o)
- [A Web Application completely in Rust](https://medium.com/@saschagrunert/a-web-application-completely-in-rust-6f6bdb6c4471)
- [Yew - Rust & WebAsse-frontend framework](https://sudonull.com/post/11627-Yew-Rust-WebAsse-frontend-framework)
- [Create a desktop app in Rust using Tauri and Yew](https://dev.to/stevepryde/create-a-desktop-app-in-rust-using-tauri-and-yew-2bhe)
- [A code walkthrough video of Yew with a real-world app with Christopher Hunt and Kiki Carter](https://www.youtube.com/watch?v=ilrGIJGdqRo)
- [Let's Build a Rust Frontend with Yew](https://dev.to/deciduously/lets-build-a-rust-frontend-with-yew---part-1-3k2o)
- [A Web Application completely in Rust](https://medium.com/@saschagrunert/a-web-application-completely-in-rust-6f6bdb6c4471)
- [Yew - Rust & WebAsse-frontend framework](https://sudonull.com/post/11627-Yew-Rust-WebAsse-frontend-framework)
- [Create a desktop app in Rust using Tauri and Yew](https://dev.to/stevepryde/create-a-desktop-app-in-rust-using-tauri-and-yew-2bhe)
- [A code walkthrough video of Yew with a real-world app with Christopher Hunt and Kiki Carter](https://www.youtube.com/watch?v=ilrGIJGdqRo)
## Books
- [The WebAssembly Book](https://rustwasm.github.io/docs/book/) - Working with the web and producing .wasm files.
- [The wasm-bindgen Guide](https://rustwasm.github.io/docs/wasm-bindgen/) - How to bind Rust and JavaScript APIs.
- [The wasm-pack Guide](https://rustwasm.github.io/docs/wasm-pack/) - How to build and work with rust-generated WebAssembly.
- [Programming WebAssembly with Rust](https://pragprog.com/book/khrust/programming-webassembly-with-rust) - Includes a chapter `Advanced JavaScript Integration with Yew` on creating an app with Yew.
- [Creative Projects for Rust Programmers](https://www.oreilly.com/library/view/creative-projects-for/9781789346220/) - Chapter 5, `Creating a Client-Side WebAssembly App Using Yew`.
- [The WebAssembly Book](https://rustwasm.github.io/docs/book/) - Working with the web and producing .wasm files.
- [The wasm-bindgen Guide](https://rustwasm.github.io/docs/wasm-bindgen/) - How to bind Rust and JavaScript APIs.
- [The wasm-pack Guide](https://rustwasm.github.io/docs/wasm-pack/) - How to build and work with rust-generated WebAssembly.
- [Programming WebAssembly with Rust](https://pragprog.com/book/khrust/programming-webassembly-with-rust) - Includes a chapter `Advanced JavaScript Integration with Yew` on creating an app with Yew.
- [Creative Projects for Rust Programmers](https://www.oreilly.com/library/view/creative-projects-for/9781789346220/) - Chapter 5, `Creating a Client-Side WebAssembly App Using Yew`.
## Alternatives
Yew team love to share ideas with other projects and believe we can all help each other reach the full potential of this exciting new technology.
- [Draco](https://github.com/utkarshkukreti/draco) - A Rust library for building client side web applications with WebAssembly.
- [Percy](https://github.com/chinedufn/percy) - A modular toolkit for building isomorphic web apps with Rust + WebAssembly.
- [Sauron](https://github.com/ivanceras/sauron) - Sauron is an HTML web framework for building web-apps.
- [Seed](https://github.com/seed-rs/seed) - A Rust framework for creating web apps.
- [Smithy](https://github.com/rbalicki2/smithy) - A framework for building WebAssembly apps in Rust.
- [Dioxus](https://github.com/DioxusLabs/dioxus) - Elegant React-like library for building user interfaces for desktop, web, mobile, SSR, liveview, and more.
- [Sycamore](https://github.com/sycamore-rs/sycamore) - A reactive library for creating web apps in Rust and WebAssembly.
- [Draco](https://github.com/utkarshkukreti/draco) - A Rust library for building client side web applications with WebAssembly.
- [Percy](https://github.com/chinedufn/percy) - A modular toolkit for building isomorphic web apps with Rust + WebAssembly.
- [Sauron](https://github.com/ivanceras/sauron) - Sauron is an HTML web framework for building web-apps.
- [Seed](https://github.com/seed-rs/seed) - A Rust framework for creating web apps.
- [Smithy](https://github.com/rbalicki2/smithy) - A framework for building WebAssembly apps in Rust.
- [Dioxus](https://github.com/DioxusLabs/dioxus) - Elegant React-like library for building user interfaces for desktop, web, mobile, SSR, liveview, and more.
- [Sycamore](https://github.com/sycamore-rs/sycamore) - A reactive library for creating web apps in Rust and WebAssembly.
## Related lists
- [Awesome Rust and WebAssembly](https://github.com/rustwasm/awesome-rust-and-webassembly) - A list of awesome Rust and WebAssembly projects, libraries, tools, and resources.
- [Awesome WebAssembly](https://github.com/mbasso/awesome-wasm) - Collection of awesome things regarding WebAssembly ecosystem.
- [Awesome Rust](https://github.com/rust-unofficial/awesome-rust) - A curated list of Rust code and resources.
- [Awesome Rust and WebAssembly](https://github.com/rustwasm/awesome-rust-and-webassembly) - A list of awesome Rust and WebAssembly projects, libraries, tools, and resources.
- [Awesome WebAssembly](https://github.com/mbasso/awesome-wasm) - Collection of awesome things regarding WebAssembly ecosystem.
- [Awesome Rust](https://github.com/rust-unofficial/awesome-rust) - A curated list of Rust code and resources.

View File

@ -18,13 +18,13 @@ with ease. It runs both on servers (and renders to strings) or in browsers (with
[Gloo](https://crates.io/crates/gloo) is a modular toolkit for building fast, reliable Web applications and
libraries with Rust and Wasm. Gloo provides ergonomic Rust APIs for working with:
- [Console timers](https://crates.io/crates/gloo-console-timer)
- [Dialogs](https://crates.io/crates/gloo-dialogs)
- [Events](https://crates.io/crates/gloo-events)
- [Files](https://crates.io/crates/gloo-file)
- [Requests](https://crates.io/crates/gloo-net)
- [Timers](https://crates.io/crates/gloo-timers)
- [Web Storage](https://crates.io/crates/gloo-storage)
- [Console timers](https://crates.io/crates/gloo-console-timer)
- [Dialogs](https://crates.io/crates/gloo-dialogs)
- [Events](https://crates.io/crates/gloo-events)
- [Files](https://crates.io/crates/gloo-file)
- [Requests](https://crates.io/crates/gloo-net)
- [Timers](https://crates.io/crates/gloo-timers)
- [Web Storage](https://crates.io/crates/gloo-storage)
## Looking For

View File

@ -315,4 +315,4 @@ pub fn render_page(with_sidebar: bool) -> Html {
## Further Reading
- For a real-world example of this pattern, check out the yew-router source code. For a more advanced example, check out the [nested-list example](https://github.com/yewstack/yew/tree/master/examples/nested_list) in the main yew repository.
- For a real-world example of this pattern, check out the yew-router source code. For a more advanced example, check out the [nested-list example](https://github.com/yewstack/yew/tree/master/examples/nested_list) in the main yew repository.

View File

@ -69,6 +69,6 @@ _Contribute to the docs explain how `yew::scheduler` and `yew::html::scope`
## Further reading
- [More information about macros from the Rust Book](https://doc.rust-lang.org/stable/book/ch19-06-macros.html)
- [More information about `cargo-expand`](https://github.com/dtolnay/cargo-expand)
- [The API documentation for `yew::virtual_dom`](https://docs.rs/yew/*/yew/virtual_dom/index.html)
- [More information about macros from the Rust Book](https://doc.rust-lang.org/stable/book/ch19-06-macros.html)
- [More information about `cargo-expand`](https://github.com/dtolnay/cargo-expand)
- [The API documentation for `yew::virtual_dom`](https://docs.rs/yew/*/yew/virtual_dom/index.html)

View File

@ -20,5 +20,5 @@ be cheaply cloned when passed from component to component.
## Further reading
- [Immutable example](https://github.com/yewstack/yew/tree/master/examples/immutable)
- [Crate `implicit-clone`](https://docs.rs/implicit-clone/)
- [Immutable example](https://github.com/yewstack/yew/tree/master/examples/immutable)
- [Crate `implicit-clone`](https://docs.rs/implicit-clone/)

View File

@ -81,9 +81,9 @@ implementation of the main page and additionally render the component you are wo
## Reducing binary sizes
- optimize Rust code
- `cargo.toml` \( defining release profile \)
- optimize wasm code using `wasm-opt`
- optimize Rust code
- `cargo.toml` \( defining release profile \)
- optimize wasm code using `wasm-opt`
**Note: more information about reducing binary sizes can be found in the
[Rust Wasm Book](https://rustwasm.github.io/book/reference/code-size.html#optimizing-builds-for-code-size).**
@ -138,8 +138,8 @@ Further, it is possible to optimize the size of `wasm` code.
The Rust Wasm Book has a section about reducing the size of Wasm binaries:
[Shrinking .wasm size](https://rustwasm.github.io/book/game-of-life/code-size.html)
- using `wasm-pack` which by default optimizes `wasm` code in release builds
- using `wasm-opt` directly on `wasm` files.
- using `wasm-pack` which by default optimizes `wasm` code in release builds
- using `wasm-opt` directly on `wasm` files.
```text
wasm-opt wasm_bg.wasm -Os -o wasm_bg_opt.wasm
@ -157,7 +157,7 @@ Note: `wasm-pack` combines optimization for Rust and Wasm code. `wasm-bindgen` i
## Further reading
- [The Rust Book's chapter on smart pointers](https://doc.rust-lang.org/book/ch15-00-smart-pointers.html)
- [Information from the Rust Wasm Book about reducing binary sizes](https://rustwasm.github.io/book/reference/code-size.html#optimizing-builds-for-code-size)
- [Documentation about Rust profiles](https://doc.rust-lang.org/cargo/reference/profiles.html)
- [binaryen project](https://github.com/WebAssembly/binaryen)
- [The Rust Book's chapter on smart pointers](https://doc.rust-lang.org/book/ch15-00-smart-pointers.html)
- [Information from the Rust Wasm Book about reducing binary sizes](https://rustwasm.github.io/book/reference/code-size.html#optimizing-builds-for-code-size)
- [Documentation about Rust profiles](https://doc.rust-lang.org/cargo/reference/profiles.html)
- [binaryen project](https://github.com/WebAssembly/binaryen)

View File

@ -61,4 +61,4 @@ about it.
## Further reading
- [Portals example](https://github.com/yewstack/yew/tree/master/examples/portals)
- [Portals example](https://github.com/yewstack/yew/tree/master/examples/portals)

View File

@ -82,5 +82,5 @@ impl Component for Comp {
## Relevant examples
- [Counter](https://github.com/yewstack/yew/tree/master/examples/counter)
- [Timer](https://github.com/yewstack/yew/tree/master/examples/timer)
- [Counter](https://github.com/yewstack/yew/tree/master/examples/counter)
- [Timer](https://github.com/yewstack/yew/tree/master/examples/timer)

View File

@ -52,4 +52,4 @@ impl Component for Comp {
## Relevant examples
- [Node Refs](https://github.com/yewstack/yew/tree/master/examples/node_refs)
- [Node Refs](https://github.com/yewstack/yew/tree/master/examples/node_refs)

View File

@ -30,15 +30,15 @@ The code can be found in the <desc> tag of the svgs.
### Reaches
- Public - There will exist at most one instance of a Public Agent at any given time. Bridges will
spawn or connect to an already spawned agent in a web worker.
When no bridges are connected to this agent, the agent will disappear.
- Public - There will exist at most one instance of a Public Agent at any given time. Bridges will
spawn or connect to an already spawned agent in a web worker.
When no bridges are connected to this agent, the agent will disappear.
- Private - Spawn a new agent in a web worker for every new bridge. This is good for moving shared but
independent behavior that communicates with the browser out of components. When
the connected bridge is dropped, the agent will disappear.
- Private - Spawn a new agent in a web worker for every new bridge. This is good for moving shared but
independent behavior that communicates with the browser out of components. When
the connected bridge is dropped, the agent will disappear.
- Global \(WIP\)
- Global \(WIP\)
## Communication between Agents and Components
@ -60,5 +60,5 @@ with other threads, so the cost is substantially higher than just calling a func
## Further reading
- The [web_worker_fib](https://github.com/yewstack/yew/tree/master/examples/web_worker_fib) example shows how
components can send messages to and receive messages from agents.
- The [web_worker_fib](https://github.com/yewstack/yew/tree/master/examples/web_worker_fib) example shows how
components can send messages to and receive messages from agents.

View File

@ -9,10 +9,10 @@ high-level interactions between Wasm modules and JavaScript; it is built with Ru
Yew uses `wasm-bindgen` to interact with the browser through a number of crates:
- [`js-sys`](https://crates.io/crates/js-sys)
- [`wasm-bindgen`](https://crates.io/crates/wasm-bindgen)
- [`wasm-bindgen-futures`](https://crates.io/crates/wasm-bindgen-futures)
- [`web-sys`](https://crates.io/crates/web-sys)
- [`js-sys`](https://crates.io/crates/js-sys)
- [`wasm-bindgen`](https://crates.io/crates/wasm-bindgen)
- [`wasm-bindgen-futures`](https://crates.io/crates/wasm-bindgen-futures)
- [`web-sys`](https://crates.io/crates/web-sys)
This section will explore some of these crates at a high level, to make it easier to understand
and use `wasm-bindgen` APIs with Yew. For a more in-depth guide to `wasm-bindgen` and its associated
@ -88,10 +88,10 @@ extends `A`.
When importing these types the `#[wasm-bindgen]` macro will implement the `Deref` and `AsRef`
traits in the following way:
- `C` can `Deref` to `B`
- `B` can `Deref` to `A`
- `C` can be `AsRef` to `B`
- Both `C` & `B` can be `AsRef` to `A`
- `C` can `Deref` to `B`
- `B` can `Deref` to `A`
- `C` can be `AsRef` to `B`
- Both `C` & `B` can be `AsRef` to `A`
These implementations allow you to call a method from `A` on an instance of `C` and to use `C` as if
it was `&B` or `&A`.

View File

@ -162,16 +162,16 @@ See [docs for use_context](https://yew-rs-api.web.app/next/yew/functional/fn.use
We have 2 options to consume contexts in struct components:
- [Higher Order Components](../advanced-topics/struct-components/hoc.mdx): A higher-order function component will consume the context and pass the data to the struct component which requires it.
- Consume context directly in the struct component. See [example of struct component as a consumer](https://github.com/yewstack/yew/tree/master/examples/contexts/src/struct_component_subscriber.rs)
- [Higher Order Components](../advanced-topics/struct-components/hoc.mdx): A higher-order function component will consume the context and pass the data to the struct component which requires it.
- Consume context directly in the struct component. See [example of struct component as a consumer](https://github.com/yewstack/yew/tree/master/examples/contexts/src/struct_component_subscriber.rs)
## Use cases
Generally, if some data is needed by distant components in different parts of the tree, context will likely help you.
Here are some examples of such cases:
- **Theming**: You can put a context at the top of the app that holds your app theme and use it to adjust the visual appearance, as shown in the above example.
- **Current user account**: In many cases, components need to know the currently logged-in user. You can use a context to provide the current user object to the components.
- **Theming**: You can put a context at the top of the app that holds your app theme and use it to adjust the visual appearance, as shown in the above example.
- **Current user account**: In many cases, components need to know the currently logged-in user. You can use a context to provide the current user object to the components.
### Considerations to make before using contexts
@ -193,4 +193,4 @@ with the help of contexts
## Further reading
- The [contexts example](https://github.com/yewstack/yew/tree/master/examples/contexts)
- The [contexts example](https://github.com/yewstack/yew/tree/master/examples/contexts)

View File

@ -25,19 +25,19 @@ These rules are enforced by either compile-time or run-time errors.
Yew comes with the following predefined Hooks:
- `use_state`
- `use_state_eq`
- `use_memo`
- `use_callback`
- `use_ref`
- `use_mut_ref`
- `use_node_ref`
- `use_reducer`
- `use_reducer_eq`
- `use_effect`
- `use_effect_with`
- `use_context`
- `use_force_update`
- `use_state`
- `use_state_eq`
- `use_memo`
- `use_callback`
- `use_ref`
- `use_mut_ref`
- `use_node_ref`
- `use_reducer`
- `use_reducer_eq`
- `use_effect`
- `use_effect_with`
- `use_context`
- `use_force_update`
The documentation for these hooks can be found in the [Yew API docs](https://yew-rs-api.web.app/next/yew/functional/)
@ -48,5 +48,5 @@ See the [Defining custom hooks](concepts/function-components/hooks/custom-hooks.
## Further reading
- The React documentation has a section on [React hooks](https://reactjs.org/docs/hooks-intro.html).
These are not the same as Yew's hooks, but the underlying concept is similar.
- The React documentation has a section on [React hooks](https://reactjs.org/docs/hooks-intro.html).
These are not the same as Yew's hooks, but the underlying concept is similar.

View File

@ -17,9 +17,9 @@ Components are the building blocks of Yew.
They:
- Take arguments in form of [Props](./properties.mdx)
- Can have their own state
- Compute pieces of HTML visible to the user (DOM)
- Take arguments in form of [Props](./properties.mdx)
- Can have their own state
- Compute pieces of HTML visible to the user (DOM)
## Two flavors of Yew Components

View File

@ -17,5 +17,5 @@ access, if you are unsure.
## Further Reading
- [use_node_ref hook](https://yew-rs-api.web.app/next/yew/functional/fn.use_node_ref.html)
- [`node_refs` example](https://github.com/yewstack/yew/tree/master/examples/node_refs)
- [use_node_ref hook](https://yew-rs-api.web.app/next/yew/functional/fn.use_node_ref.html)
- [`node_refs` example](https://github.com/yewstack/yew/tree/master/examples/node_refs)

View File

@ -121,5 +121,5 @@ html! {
## Relevant examples
- [Function Todo MVC](https://github.com/yewstack/yew/tree/master/examples/function_todomvc)
- [Function Router](https://github.com/yewstack/yew/tree/master/examples/function_router)
- [Function Todo MVC](https://github.com/yewstack/yew/tree/master/examples/function_todomvc)
- [Function Router](https://github.com/yewstack/yew/tree/master/examples/function_router)

View File

@ -145,22 +145,22 @@ If the attribute is set to `None`, the attribute will not be set in the DOM.
Most HTML elements accept arbitrary HTML as children, however, there is a set of them that doesn't accept any children at all.
These elements are called _void_ elements, and they are:
- `<area />`
- `<base />`
- `<base />`
- `<br />`
- `<col />`
- `<embed />`
- `<hr />`
- `<img />`
- `<input />`
- `<link />`
- `<meta />`
- `<param />`
- `<source />`
- `<track />`
- `<wbr />`
- `<textarea />`
- `<area />`
- `<base />`
- `<base />`
- `<br />`
- `<col />`
- `<embed />`
- `<hr />`
- `<img />`
- `<input />`
- `<link />`
- `<meta />`
- `<param />`
- `<source />`
- `<track />`
- `<wbr />`
- `<textarea />`
Attempting to provide children to these elements will result in a compilation error or, if the element tag is chosen dynamically, in a panic.
@ -181,4 +181,4 @@ Which would fail to compile, it's customary to write
## Relevant examples
- [Inner HTML](https://github.com/yewstack/yew/tree/master/examples/inner_html)
- [Inner HTML](https://github.com/yewstack/yew/tree/master/examples/inner_html)

View File

@ -59,11 +59,11 @@ It can be surprising that event listeners are _not_ directly registered on the e
are delegated from the subtree root of the Yew app. Still, events are delivered in their native form, and no synthetic
form is created. This can lead to mismatches between the event you would expect in HTML listeners and those showing up in Yew.
- [`Event::current_target`] points to the Yew subtree root instead of the element the listener is added on. Use
[`NodeRef`](../function-components/node-refs.mdx) if you want access to the underlying `HtmlElement`.
- [`Event::event_phase`] is always [`Event::CAPTURING_PHASE`]. Internally, the event will behave as if it was in the bubbling
phase, the event propagation is replayed and the event [bubbles _up_](#event-bubbling), i.e. event listeners higher up in
the virtual DOM will trigger _after_ event listeners below them. Currently, capturing listeners is not supported by Yew.
- [`Event::current_target`] points to the Yew subtree root instead of the element the listener is added on. Use
[`NodeRef`](../function-components/node-refs.mdx) if you want access to the underlying `HtmlElement`.
- [`Event::event_phase`] is always [`Event::CAPTURING_PHASE`]. Internally, the event will behave as if it was in the bubbling
phase, the event propagation is replayed and the event [bubbles _up_](#event-bubbling), i.e. event listeners higher up in
the virtual DOM will trigger _after_ event listeners below them. Currently, capturing listeners is not supported by Yew.
This also means that events registered by Yew will usually fire before other event listeners.

View File

@ -120,6 +120,6 @@ If you need that div to be recreated instead of reused, then you can add differe
## Further reading
- [TodoMVC](https://github.com/yewstack/yew/tree/master/examples/todomvc)
- [Keyed list](https://github.com/yewstack/yew/tree/master/examples/keyed_list)
- [Router](https://github.com/yewstack/yew/tree/master/examples/router)
- [TodoMVC](https://github.com/yewstack/yew/tree/master/examples/todomvc)
- [Keyed list](https://github.com/yewstack/yew/tree/master/examples/keyed_list)
- [Router](https://github.com/yewstack/yew/tree/master/examples/router)

View File

@ -499,8 +499,8 @@ fallback to `/` if no `<base />` is present in the HTML file.
## Relevant examples
- [Router](https://github.com/yewstack/yew/tree/master/examples/router)
- [Router](https://github.com/yewstack/yew/tree/master/examples/router)
## API Reference
- [yew-router](https://docs.rs/yew-router/)
- [yew-router](https://docs.rs/yew-router/)

View File

@ -161,4 +161,4 @@ demonstrates how to use.
## Relevant examples
- [Suspense](https://github.com/yewstack/yew/tree/master/examples/suspense)
- [Suspense](https://github.com/yewstack/yew/tree/master/examples/suspense)

View File

@ -19,7 +19,7 @@ Using a different editor? Feel free to add instructions for your editor of choic
For function components, use the following template.
- (Optional) Click on Edit Variable and give `tag` a reasonable default value like "div", with double quotes.
- (Optional) Click on Edit Variable and give `tag` a reasonable default value like "div", with double quotes.
```rust ,ignore
#[derive(PartialEq, Properties)]

View File

@ -43,9 +43,9 @@ cargo install --locked trunk
There are options other than Trunk that may be used for bundling Yew applications. You might want to try one of these options:
- [`wasm-pack`](https://rustwasm.github.io/wasm-pack/)
- [`wasm-run`](https://github.com/IMI-eRnD-Be/wasm-run)
- [`xtask-wasm`](https://github.com/rustminded/xtask-wasm/) (still in early development)
- [`wasm-pack`](https://rustwasm.github.io/wasm-pack/)
- [`wasm-run`](https://github.com/IMI-eRnD-Be/wasm-run)
- [`xtask-wasm`](https://github.com/rustminded/xtask-wasm/) (still in early development)
## Next steps

View File

@ -99,14 +99,14 @@ During this update all services were removed in favor of community driven soluti
Remove this entirely. `yew-services` adds a layer a abstraction which makes it easier to call external resources. This is all well and good but this layer is supposed to be specific to Yew. It would be better if an framework agnostic abstraction existed instead.
- `ConsoleService`
Use [gloo-console](https://crates.io/crates/gloo-console) or [`weblog`](https://crates.io/crates/weblog) instead.
- `DialogService`
Use [`gloo-dialogs`](https://docs.rs/gloo-dialogs/) instead.
- `IntervalService`
Use [`gloo-timers`](https://docs.rs/gloo-timers/) instead.
- `KeyboardService`
`on*` event handlers in yew already handle it. Using this service is even more cumbersome because it requires use of `NodeRef` in order to call any functions provided by it.
- `ConsoleService`
Use [gloo-console](https://crates.io/crates/gloo-console) or [`weblog`](https://crates.io/crates/weblog) instead.
- `DialogService`
Use [`gloo-dialogs`](https://docs.rs/gloo-dialogs/) instead.
- `IntervalService`
Use [`gloo-timers`](https://docs.rs/gloo-timers/) instead.
- `KeyboardService`
`on*` event handlers in yew already handle it. Using this service is even more cumbersome because it requires use of `NodeRef` in order to call any functions provided by it.
```rust ,ignore
let onkeydown = Callback::from(|e| {
@ -118,16 +118,16 @@ html! {
}
```
- `ResizeService`
Use [`gloo-events`](https://docs.rs/gloo-events) to attach the listener instead.
- `StorageService`
Use [`gloo-storage`](https://docs.rs/gloo-storage/) instead.
- `TimeoutService`
Use [`gloo-timers`](https://docs.rs/gloo-timers/) instead.
- `WebSocketService`
Use [`wasm-sockets`](https://github.com/scratchyone/wasm-sockets) or [`gloo-net`](https://crates.io/crates/gloo-net) instead.
- `FetchService`
Use [`reqwest`](https://crates.io/crates/reqwest) or [`gloo-net`](https://crates.io/crates/gloo-net) instead.
- `ResizeService`
Use [`gloo-events`](https://docs.rs/gloo-events) to attach the listener instead.
- `StorageService`
Use [`gloo-storage`](https://docs.rs/gloo-storage/) instead.
- `TimeoutService`
Use [`gloo-timers`](https://docs.rs/gloo-timers/) instead.
- `WebSocketService`
Use [`wasm-sockets`](https://github.com/scratchyone/wasm-sockets) or [`gloo-net`](https://crates.io/crates/gloo-net) instead.
- `FetchService`
Use [`reqwest`](https://crates.io/crates/reqwest) or [`gloo-net`](https://crates.io/crates/gloo-net) instead.
## New crate - yew-agent

View File

@ -11,10 +11,10 @@ SSR hydration. They have been removed. Read more in the [github issue](https://g
The Function Components and Hooks API are re-implemented with a different mechanism:
- User-defined hooks are now required to have a prefix `use_` and must be marked with the `#[hook]` attribute.
- Hooks will now report compile errors if they are not called from the top level of a function component
or a user defined hook. The limitation existed in the previous version of Yew as well. In this version,
It is reported as a compile time error.
- User-defined hooks are now required to have a prefix `use_` and must be marked with the `#[hook]` attribute.
- Hooks will now report compile errors if they are not called from the top level of a function component
or a user defined hook. The limitation existed in the previous version of Yew as well. In this version,
It is reported as a compile time error.
## Automatic Message Batching

View File

@ -7,8 +7,8 @@ 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
- 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

View File

@ -15,15 +15,15 @@ projects. A few are given below:
#### Component Libraries
- [yew_styles](https://github.com/spielrs/yew_styles) - A styling framework for Yew without any JavaScript dependencies.
- [yew-mdc](https://github.com/Follpvosten/yew-mdc) - Material Design Components.
- [muicss-yew](https://github.com/AlephAlpha/muicss-yew) - MUI CSS Components.
- [Yewtify](https://github.com/yewstack/yewtify) Implements the features provided by the Vuetify framework in Yew.
- [yew_styles](https://github.com/spielrs/yew_styles) - A styling framework for Yew without any JavaScript dependencies.
- [yew-mdc](https://github.com/Follpvosten/yew-mdc) - Material Design Components.
- [muicss-yew](https://github.com/AlephAlpha/muicss-yew) - MUI CSS Components.
- [Yewtify](https://github.com/yewstack/yewtify) Implements the features provided by the Vuetify framework in Yew.
#### Styling Solutions
- [stylist](https://github.com/futursolo/stylist-rs) - A CSS-in-Rust styling solution for WebAssembly Applications.
- [tailwind-css](https://github.com/thedodd/trunk/tree/master/examples/yew-tailwindcss) - Tailwind Utility Classes.
- [stylist](https://github.com/futursolo/stylist-rs) - A CSS-in-Rust styling solution for WebAssembly Applications.
- [tailwind-css](https://github.com/thedodd/trunk/tree/master/examples/yew-tailwindcss) - Tailwind Utility Classes.
:::important contribute
If you're developing a project adding styles to Yew please submit a PR adding yourself to this list!

View File

@ -29,16 +29,16 @@ Status of all major initiatives can be tracked on the Yew Github [project board]
### Issues needed for production readiness
- Improve Yew test coverage
- Reduce binary size
- [Benchmark performance](https://github.com/yewstack/yew/issues/5)
- Improve Yew test coverage
- Reduce binary size
- [Benchmark performance](https://github.com/yewstack/yew/issues/5)
### Documentation
- Create tutorial
- Simplify project setup
- Create tutorial
- Simplify project setup
### Pain points
- [Component boilerplate](https://github.com/yewstack/yew/issues/830)
- [Agents](https://github.com/yewstack/yew/projects/6)
- [Component boilerplate](https://github.com/yewstack/yew/issues/830)
- [Agents](https://github.com/yewstack/yew/projects/6)

View File

@ -494,12 +494,12 @@ Struct components act differently. See [the documentation](advanced-topics/struc
In a real-world application, data will usually come from an API instead of being hardcoded. Let's fetch our
videos list from an external source. For this we will need to add the following crates:
- [`gloo-net`](https://crates.io/crates/gloo-net)
For making the fetch call.
- [`serde`](https://serde.rs) with derive features
For de-serializing the JSON response
- [`wasm-bindgen-futures`](https://crates.io/crates/wasm-bindgen-futures)
For executing Rust Future as a Promise
- [`gloo-net`](https://crates.io/crates/gloo-net)
For making the fetch call.
- [`serde`](https://serde.rs) with derive features
For de-serializing the JSON response
- [`wasm-bindgen-futures`](https://crates.io/crates/wasm-bindgen-futures)
For executing Rust Future as a Promise
Let's update the dependencies in `Cargo.toml` file:

View File

@ -304,4 +304,4 @@ pub fn render_page(with_sidebar: bool) -> Html {
## さらに読む
- このパターンの実際の例については、yew-router のソースコードを参照してください。より高度な例については、yew リポジトリの[関連する例のリスト](https://github.com/yewstack/yew/tree/master/examples/nested_list)を参照してください。
- このパターンの実際の例については、yew-router のソースコードを参照してください。より高度な例については、yew リポジトリの[関連する例のリスト](https://github.com/yewstack/yew/tree/master/examples/nested_list)を参照してください。

View File

@ -34,6 +34,6 @@ _貢献ドキュメント - `yew::scheduler` と `yew::html::scope` の仕組み
## さらなる読み物
- [Rustのマクロに関する詳細情報](https://doc.rust-lang.org/stable/book/ch19-06-macros.html)
- [`cargo-expand` に関する詳細情報](https://github.com/dtolnay/cargo-expand)
- [`yew::virtual_dom` のAPIドキュメント](https://docs.rs/yew/*/yew/virtual_dom/index.html)
- [Rustのマクロに関する詳細情報](https://doc.rust-lang.org/stable/book/ch19-06-macros.html)
- [`cargo-expand` に関する詳細情報](https://github.com/dtolnay/cargo-expand)
- [`yew::virtual_dom` のAPIドキュメント](https://docs.rs/yew/*/yew/virtual_dom/index.html)

View File

@ -15,5 +15,5 @@ React と同様に、プロパティは祖先から子孫に伝播されます
## さらに読む
- [イミュータブルの例](https://github.com/yewstack/yew/tree/master/examples/immutable)
- [Crate `implicit-clone`](https://docs.rs/implicit-clone/)
- [イミュータブルの例](https://github.com/yewstack/yew/tree/master/examples/immutable)
- [Crate `implicit-clone`](https://docs.rs/implicit-clone/)

View File

@ -38,9 +38,9 @@ Yewの最大の欠点は、コンパイルにかかる時間が長いことで
## バイナリサイズの縮小
- Rustコードの最適化
- `cargo.toml`(リリースプロファイルの定義)
- `wasm-opt` を使用してwasmコードを最適化
- Rustコードの最適化
- `cargo.toml`(リリースプロファイルの定義)
- `wasm-opt` を使用してwasmコードを最適化
**注意:バイナリサイズの縮小に関する詳細は、[Rust Wasmマニュアル](https://rustwasm.github.io/book/reference/code-size.html#optimizing-builds-for-code-size)を参照してください。**
@ -87,8 +87,8 @@ build-std-features = ["panic_immediate_abort"]
Rust Wasm マニュアルには、Wasm バイナリファイルのサイズを縮小する方法に関するセクションがあります:[.wasm サイズの縮小](https://rustwasm.github.io/book/game-of-life/code-size.html)
- `wasm-pack` を使用すると、デフォルトでリリースビルドの `wasm` コードが最適化されます
- `wasm` ファイルに直接 `wasm-opt` を使用する
- `wasm-pack` を使用すると、デフォルトでリリースビルドの `wasm` コードが最適化されます
- `wasm` ファイルに直接 `wasm-opt` を使用する
```text
wasm-opt wasm_bg.wasm -Os -o wasm_bg_opt.wasm
@ -106,7 +106,7 @@ wasm-opt wasm_bg.wasm -Os -o wasm_bg_opt.wasm
## さらに読む
- [Rust マニュアルのスマート ポインターに関する章](https://doc.rust-lang.org/book/ch15-00-smart-pointers.html)
- [Rust Wasm マニュアルのコードサイズの縮小に関する章](https://rustwasm.github.io/book/reference/code-size.html#optimizing-builds-for-code-size)
- [Rust プロファイルに関するドキュメント](https://doc.rust-lang.org/cargo/reference/profiles.html)
- [binaryen プロジェクト](https://github.com/WebAssembly/binaryen)
- [Rust マニュアルのスマート ポインターに関する章](https://doc.rust-lang.org/book/ch15-00-smart-pointers.html)
- [Rust Wasm マニュアルのコードサイズの縮小に関する章](https://rustwasm.github.io/book/reference/code-size.html#optimizing-builds-for-code-size)
- [Rust プロファイルに関するドキュメント](https://doc.rust-lang.org/cargo/reference/profiles.html)
- [binaryen プロジェクト](https://github.com/WebAssembly/binaryen)

View File

@ -45,4 +45,4 @@ fn Modal(props: &ModalProps) -> Html {
## さらなる読み物
- [ポータルの例](https://github.com/yewstack/yew/tree/master/examples/portals)
- [ポータルの例](https://github.com/yewstack/yew/tree/master/examples/portals)

View File

@ -81,5 +81,5 @@ impl Component for Comp {
## 関連例
- [Counter](https://github.com/yewstack/yew/tree/master/examples/counter)
- [Timer](https://github.com/yewstack/yew/tree/master/examples/timer)
- [Counter](https://github.com/yewstack/yew/tree/master/examples/counter)
- [Timer](https://github.com/yewstack/yew/tree/master/examples/timer)

View File

@ -48,4 +48,4 @@ impl Component for Comp {
## 関連例
- [ノード参照](https://github.com/yewstack/yew/tree/master/examples/node_refs)
- [ノード参照](https://github.com/yewstack/yew/tree/master/examples/node_refs)

View File

@ -29,11 +29,11 @@ The code can be found in the <desc> tag of the svgs.
### 範囲
- 公開 - 任意の時点で、公開エージェントのインスタンスは最大で1つだけです。ブリッジはWeb Worker内でエージェントを生成するか、既に生成されたエージェントに接続します。ブリッジがこのエージェントに接続されていない場合、エージェントは消滅します。
- 公開 - 任意の時点で、公開エージェントのインスタンスは最大で1つだけです。ブリッジはWeb Worker内でエージェントを生成するか、既に生成されたエージェントに接続します。ブリッジがこのエージェントに接続されていない場合、エージェントは消滅します。
- 私有 - 新しいブリッジごとにWeb Worker内で新しいエージェントを生成します。これは、ブラウザと通信する共有だが独立した動作をコンポーネントから移動するのに適しています。接続されたブリッジが破棄されると、エージェントは消滅します。
- 私有 - 新しいブリッジごとにWeb Worker内で新しいエージェントを生成します。これは、ブラウザと通信する共有だが独立した動作をコンポーネントから移動するのに適しています。接続されたブリッジが破棄されると、エージェントは消滅します。
- グローバル \(WIP\)
- グローバル \(WIP\)
## エージェントとコンポーネント間の通信
@ -53,4 +53,4 @@ The code can be found in the <desc> tag of the svgs.
## さらなる読み物
- [web_worker_fib](https://github.com/yewstack/yew/tree/master/examples/web_worker_fib) の例は、コンポーネントがエージェントにメッセージを送信し、エージェントからのメッセージを受信する方法を示しています。
- [web_worker_fib](https://github.com/yewstack/yew/tree/master/examples/web_worker_fib) の例は、コンポーネントがエージェントにメッセージを送信し、エージェントからのメッセージを受信する方法を示しています。

View File

@ -7,10 +7,10 @@ sidebar_label: wasm-bindgen
Yew は `wasm-bindgen` を使用して、いくつかのクレートを介してブラウザと対話します:
- [`js-sys`](https://crates.io/crates/js-sys)
- [`wasm-bindgen`](https://crates.io/crates/wasm-bindgen)
- [`wasm-bindgen-futures`](https://crates.io/crates/wasm-bindgen-futures)
- [`web-sys`](https://crates.io/crates/web-sys)
- [`js-sys`](https://crates.io/crates/js-sys)
- [`wasm-bindgen`](https://crates.io/crates/wasm-bindgen)
- [`wasm-bindgen-futures`](https://crates.io/crates/wasm-bindgen-futures)
- [`web-sys`](https://crates.io/crates/web-sys)
このセクションでは、これらのクレートをより抽象的なレベルから探求し、Yew での `wasm-bindgen` API の理解と使用を容易にします。`wasm-bindgen` および関連するクレートに関する詳細なガイドについては、[`wasm-bindgen` ガイド](https://rustwasm.github.io/docs/wasm-bindgen/) を参照してください。
@ -66,10 +66,10 @@ Rust では、この継承関係は [`Deref`](https://doc.rust-lang.org/std/ops/
これらの型をインポートする際、`#[wasm-bindgen]` マクロは次のように `Deref` と `AsRef` トレイトを実装します:
- `C` は `B` に `Deref` できます
- `B` は `A` に `Deref` できます
- `C` は `B` に `AsRef` できます
- `C` と `B` はどちらも `A` に `AsRef` できます
- `C` は `B` に `Deref` できます
- `B` は `A` に `Deref` できます
- `C` は `B` に `AsRef` できます
- `C` と `B` はどちらも `A` に `AsRef` できます
これらの実装により、`C` のインスタンスで `A` のメソッドを呼び出したり、`C` を `&B` または `&A` として使用したりできます。

View File

@ -156,16 +156,16 @@ pub fn ThemedButton() -> Html {
構造体コンポーネント内でコンテキストを使用するには、2つの方法があります
- [高階コンポーネント](../advanced-topics/struct-components/hoc.mdx):高階関数コンポーネントがコンテキストを使用し、必要なデータを構造体コンポーネントに渡します。
- 構造体コンポーネント内で直接コンテキストを使用します。詳細については、[構造体コンポーネントのコンシューマーとしての例](https://github.com/yewstack/yew/tree/master/examples/contexts/src/struct_component_subscriber.rs) を参照してください。
- [高階コンポーネント](../advanced-topics/struct-components/hoc.mdx):高階関数コンポーネントがコンテキストを使用し、必要なデータを構造体コンポーネントに渡します。
- 構造体コンポーネント内で直接コンテキストを使用します。詳細については、[構造体コンポーネントのコンシューマーとしての例](https://github.com/yewstack/yew/tree/master/examples/contexts/src/struct_component_subscriber.rs) を参照してください。
## 使用シナリオ
通常、ツリーの異なる部分のリモートコンポーネントでデータを使用する必要がある場合、コンテキストが役立ちます。
以下はいくつかの例です:
- **テーマ**:アプリケーションのトップにコンテキストを配置し、アプリケーションのテーマを保持し、視覚的な外観を調整するために使用できます(上記の例を参照)。
- **現在のユーザーアカウント**:多くの場合、コンポーネントは現在ログインしているユーザーを知る必要があります。コンテキストを使用して、現在のユーザーオブジェクトをコンポーネントに提供できます。
- **テーマ**:アプリケーションのトップにコンテキストを配置し、アプリケーションのテーマを保持し、視覚的な外観を調整するために使用できます(上記の例を参照)。
- **現在のユーザーアカウント**:多くの場合、コンポーネントは現在ログインしているユーザーを知る必要があります。コンテキストを使用して、現在のユーザーオブジェクトをコンポーネントに提供できます。
### コンテキストを使用する前の考慮事項
@ -185,4 +185,4 @@ Rust の所有権ルールにより、コンテキストには子コンポーネ
## さらなる読み物
- [コンテキストの例](https://github.com/yewstack/yew/tree/master/examples/contexts)
- [コンテキストの例](https://github.com/yewstack/yew/tree/master/examples/contexts)

View File

@ -25,19 +25,19 @@ Yew はいくつかの事前定義された hooks を提供しています。ま
Yew は次の事前定義された Hooks を提供しています:
- `use_state`
- `use_state_eq`
- `use_memo`
- `use_callback`
- `use_ref`
- `use_mut_ref`
- `use_node_ref`
- `use_reducer`
- `use_reducer_eq`
- `use_effect`
- `use_effect_with`
- `use_context`
- `use_force_update`
- `use_state`
- `use_state_eq`
- `use_memo`
- `use_callback`
- `use_ref`
- `use_mut_ref`
- `use_node_ref`
- `use_reducer`
- `use_reducer_eq`
- `use_effect`
- `use_effect_with`
- `use_context`
- `use_force_update`
これらの hooks のドキュメントは [Yew API ドキュメント](https://yew-rs-api.web.app/next/yew/functional/)で見つけることができます。
@ -47,4 +47,4 @@ Yew は次の事前定義された Hooks を提供しています:
## さらなる読み物
- React ドキュメントには [React hooks](https://reactjs.org/docs/hooks-intro.html) に関するセクションがあります。
- React ドキュメントには [React hooks](https://reactjs.org/docs/hooks-intro.html) に関するセクションがあります。

View File

@ -15,9 +15,9 @@ slug: /concepts/function-components
それらは次のことを行うべきです:
- [Props](./properties.mdx) の形式でパラメータを受け取る
- 独自の状態を持つことができる
- ユーザーに見える HTML フラグメントDOMを計算する
- [Props](./properties.mdx) の形式でパラメータを受け取る
- 独自の状態を持つことができる
- ユーザーに見える HTML フラグメントDOMを計算する
## Yew コンポーネントの 2 つのフレーバー

View File

@ -13,5 +13,5 @@ Yew がレンダリングした DOM ツリーを手動で変更しないでく
## さらに読む
- [use_node_ref フック](https://yew-rs-api.web.app/next/yew/functional/fn.use_node_ref.html)
- [`node_refs` の例](https://github.com/yewstack/yew/tree/master/examples/node_refs)
- [use_node_ref フック](https://yew-rs-api.web.app/next/yew/functional/fn.use_node_ref.html)
- [`node_refs` の例](https://github.com/yewstack/yew/tree/master/examples/node_refs)

View File

@ -120,5 +120,5 @@ html! {
## 参考例
- [関数型 Todo MVC](https://github.com/yewstack/yew/tree/master/examples/function_todomvc)
- [関数型ルーティング](https://github.com/yewstack/yew/tree/master/examples/function_router)
- [関数型 Todo MVC](https://github.com/yewstack/yew/tree/master/examples/function_todomvc)
- [関数型ルーティング](https://github.com/yewstack/yew/tree/master/examples/function_router)

View File

@ -135,4 +135,4 @@ html! {
## 関連例
- [インライン HTML](https://github.com/yewstack/yew/tree/master/examples/inner_html)
- [インライン HTML](https://github.com/yewstack/yew/tree/master/examples/inner_html)

View File

@ -47,8 +47,8 @@ yew::set_event_bubbling(false);
驚くかもしれませんが、イベントリスナーはレンダリングされた要素に直接登録されるわけではありません。代わりに、イベントは Yew アプリケーションのサブツリーのルートードから委譲されます。ただし、イベントはそのネイティブ形式で渡され、合成形式は作成されません。これにより、HTML リスナーで予期されるイベントと Yew で発生するイベントとの間に不一致が生じる可能性があります。
- [`Event::current_target`] はリスナーが追加された要素ではなく、Yew サブツリーのルートノードを指します。基になる `HtmlElement` にアクセスしたい場合は、[`NodeRef`](../function-components/node-refs.mdx) を使用してください。
- [`Event::event_phase`] は常に [`Event::CAPTURING_PHASE`] です。内部的には、イベントはバブリングフェーズにあるかのように振る舞い、イベント伝播が再生され、イベントは[上位にバブルアップ](#event-bubbling)します。つまり、仮想 DOM 内の上位のイベントリスナーが下位のイベントリスナーの後にトリガーされます。現在、Yew はキャプチャリスナーをサポートしていません。
- [`Event::current_target`] はリスナーが追加された要素ではなく、Yew サブツリーのルートノードを指します。基になる `HtmlElement` にアクセスしたい場合は、[`NodeRef`](../function-components/node-refs.mdx) を使用してください。
- [`Event::event_phase`] は常に [`Event::CAPTURING_PHASE`] です。内部的には、イベントはバブリングフェーズにあるかのように振る舞い、イベント伝播が再生され、イベントは[上位にバブルアップ](#event-bubbling)します。つまり、仮想 DOM 内の上位のイベントリスナーが下位のイベントリスナーの後にトリガーされます。現在、Yew はキャプチャリスナーをサポートしていません。
これも意味するところは、Yew によって登録されたイベントは通常、他のイベントリスナーよりも先にトリガーされるということです。

View File

@ -114,6 +114,6 @@ Yew はこれらの状況で最適化として既にレンダリングされた
## さらなる読み物
- [TodoMVC の例](https://github.com/yewstack/yew/tree/master/examples/todomvc)
- [キー付きリストの例](https://github.com/yewstack/yew/tree/master/examples/keyed_list)
- [ルーティングの例](https://github.com/yewstack/yew/tree/master/examples/router)
- [TodoMVC の例](https://github.com/yewstack/yew/tree/master/examples/todomvc)
- [キー付きリストの例](https://github.com/yewstack/yew/tree/master/examples/keyed_list)
- [ルーティングの例](https://github.com/yewstack/yew/tree/master/examples/router)

View File

@ -454,8 +454,8 @@ Router コンポーネントにベースパス属性が提供されていない
## 関連例
- [ルーター](https://github.com/yewstack/yew/tree/master/examples/router)
- [ルーター](https://github.com/yewstack/yew/tree/master/examples/router)
## インターフェースリファレンス
- [yew-router](https://docs.rs/yew-router/)
- [yew-router](https://docs.rs/yew-router/)

View File

@ -143,4 +143,4 @@ Yew リポジトリの[プレースホルダーの例](https://github.com/yewsta
## 関連例
- [プレースホルダー](https://github.com/yewstack/yew/tree/master/examples/suspense)
- [プレースホルダー](https://github.com/yewstack/yew/tree/master/examples/suspense)

View File

@ -19,7 +19,7 @@ description: 'コードエディタの設定'
関数型コンポーネントの場合、以下のテンプレートを使用します。
- (オプション) 変数を編集し、`tag` に適切なデフォルト値(例:"div")を設定します。
- (オプション) 変数を編集し、`tag` に適切なデフォルト値(例:"div")を設定します。
```rust ,ignore
#[derive(PartialEq, Properties)]

View File

@ -35,9 +35,9 @@ cargo install --locked trunk
Trunk の他にも、Yew アプリケーションをパッケージ化するための他のオプションがあります。以下のオプションのいずれかを試してみることをお勧めします:
- [`wasm-pack`](https://rustwasm.github.io/wasm-pack/)
- [`wasm-run`](https://github.com/IMI-eRnD-Be/wasm-run)
- [`xtask-wasm`](https://github.com/rustminded/xtask-wasm/)(まだ初期開発段階です)
- [`wasm-pack`](https://rustwasm.github.io/wasm-pack/)
- [`wasm-run`](https://github.com/IMI-eRnD-Be/wasm-run)
- [`xtask-wasm`](https://github.com/rustminded/xtask-wasm/)(まだ初期開発段階です)
## 次のステップ

View File

@ -12,15 +12,15 @@ Yew に CSS サポートを統合する最良の方法についての議論は
#### コンポーネントライブラリ
- [yew_styles](https://github.com/spielrs/yew_styles) - JavaScript 依存なしの Yew スタイルフレームワーク。
- [yew-mdc](https://github.com/Follpvosten/yew-mdc) - マテリアルデザインコンポーネント。
- [muicss-yew](https://github.com/AlephAlpha/muicss-yew) - MUI CSS コンポーネント。
- [Yewtify](https://github.com/yewstack/yewtify) Yew で Vuetify フレームワークの機能を実現。
- [yew_styles](https://github.com/spielrs/yew_styles) - JavaScript 依存なしの Yew スタイルフレームワーク。
- [yew-mdc](https://github.com/Follpvosten/yew-mdc) - マテリアルデザインコンポーネント。
- [muicss-yew](https://github.com/AlephAlpha/muicss-yew) - MUI CSS コンポーネント。
- [Yewtify](https://github.com/yewstack/yewtify) Yew で Vuetify フレームワークの機能を実現。
#### スタイルソリューション
- [stylist](https://github.com/futursolo/stylist-rs) - WebAssembly アプリケーション用の CSS-in-Rust スタイルソリューション。
- [tailwind-css](https://github.com/thedodd/trunk/tree/master/examples/yew-tailwindcss) - Tailwind ユーティリティクラス。
- [stylist](https://github.com/futursolo/stylist-rs) - WebAssembly アプリケーション用の CSS-in-Rust スタイルソリューション。
- [tailwind-css](https://github.com/thedodd/trunk/tree/master/examples/yew-tailwindcss) - Tailwind ユーティリティクラス。
:::important ドキュメントの改善
Yew にスタイルを追加するプロジェクトを開発している場合は、このリストに自分を追加する PR を提出してください!

View File

@ -29,16 +29,16 @@ description: 'Yew フレームワークの計画機能ロードマップ'
### プロダクションレディに必要な問題
- Yew のテストカバレッジを向上させる
- バイナリサイズを小さくする
- [パフォーマンスベンチマーク](https://github.com/yewstack/yew/issues/5)
- Yew のテストカバレッジを向上させる
- バイナリサイズを小さくする
- [パフォーマンスベンチマーク](https://github.com/yewstack/yew/issues/5)
### ドキュメント
- チュートリアルを作成する
- プロジェクト設定を簡素化する
- チュートリアルを作成する
- プロジェクト設定を簡素化する
### 痛点
- [コンポーネントテンプレート](https://github.com/yewstack/yew/issues/830)
- [エージェント](https://github.com/yewstack/yew/projects/6)
- [コンポーネントテンプレート](https://github.com/yewstack/yew/issues/830)
- [エージェント](https://github.com/yewstack/yew/projects/6)

View File

@ -460,12 +460,12 @@ fn app() -> Html {
実際のアプリケーションでは、データは通常ハードコーディングされているのではなく、API から取得されます。外部ソースからビデオリストを取得してみましょう。そのためには、以下のクレートを追加する必要があります:
- [`gloo-net`](https://crates.io/crates/gloo-net)
fetch 呼び出しを行うために使用します。
- [`serde`](https://serde.rs) とその派生特性
JSON 応答をデシリアライズするために使用します。
- [`wasm-bindgen-futures`](https://crates.io/crates/wasm-bindgen-futures)
Rust の Future を Promise として実行するために使用します。
- [`gloo-net`](https://crates.io/crates/gloo-net)
fetch 呼び出しを行うために使用します。
- [`serde`](https://serde.rs) とその派生特性
JSON 応答をデシリアライズするために使用します。
- [`wasm-bindgen-futures`](https://crates.io/crates/wasm-bindgen-futures)
Rust の Future を Promise として実行するために使用します。
`Cargo.toml` ファイルの依存関係を更新しましょう:

View File

@ -115,10 +115,10 @@ Yew は純粋な関数やコンポーネントをサポートしていません
## バイナリサイズを小さくする
- Rust のコードを最適化する
- `wee_alloc` \( tiny allocator を使用 \)
- `cargo.toml` \( release profile を定義 \)
- `wasm-opt`を用いて wasm のコードを最適化する
- Rust のコードを最適化する
- `wee_alloc` \( tiny allocator を使用 \)
- `cargo.toml` \( release profile を定義 \)
- `wasm-opt`を用いて wasm のコードを最適化する
**注意: バイナリサイズを小さくするのについては[Rust Wasm Book](https://rustwasm.github.io/book/reference/code-size.html#optimizing-builds-for-code-size)に詳しく書いてあります。**
@ -162,8 +162,8 @@ lto = true
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`ファイルを最適化する
- `wasm-pack`でデフォルトの`wasm`のコードをリリースビルド時に最適化する
- `wasm-opt`によって直接`wasm`ファイルを最適化する
```text
wasm-opt wasm_bg.wasm -Os -o wasm_bg_opt.wasm
@ -181,7 +181,7 @@ wasm-opt wasm_bg.wasm -Os -o wasm_bg_opt.wasm
## 参考文献:
- [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)
- [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)

View File

@ -18,20 +18,20 @@ description: Yew's Actor System
### Reaches
- Context - Context エージェントのインスタンスは、常に最大 1 つ存在します。
Bridges は、UI スレッド上で既にスポーンされたエージェントをスポーンするか、接続します。
これは、コンポーネントまたは他のエージェント間の状態を調整するために使用することができます。
このエージェントに Bridges が接続されていない場合、このエージェントは消滅します。
- Context - Context エージェントのインスタンスは、常に最大 1 つ存在します。
Bridges は、UI スレッド上で既にスポーンされたエージェントをスポーンするか、接続します。
これは、コンポーネントまたは他のエージェント間の状態を調整するために使用することができます。
このエージェントに Bridges が接続されていない場合、このエージェントは消滅します。
- Job - 新しいブリッジごとに UI スレッド上で新しいエージェントをスポーンします。
これは、ブラウザと通信する共有されているが独立した動作をコンポーネントの外に移動させるのに適しています。
(TODO 確認) タスクが完了すると、エージェントは消えます。
- Job - 新しいブリッジごとに UI スレッド上で新しいエージェントをスポーンします。
これは、ブラウザと通信する共有されているが独立した動作をコンポーネントの外に移動させるのに適しています。
(TODO 確認) タスクが完了すると、エージェントは消えます。
- Public - Context と同じですが、独自の web worker で動作します。
- Public - Context と同じですが、独自の web worker で動作します。
- Private - Job と同じですが、独自の web worker で動作します。
- Private - Job と同じですが、独自の web worker で動作します。
- Global \(WIP\)
- Global \(WIP\)
## エージェントとコンポーネントのやり取り
@ -53,4 +53,4 @@ Dispatcher は、コンポーネントがエージェントにメッセージを
## 参考資料
- [pub_sub](https://github.com/yewstack/yew/tree/v0.18/examples/pub_sub)の例でコンポーネントがどのようにエージェントと通信させているかがわかります。
- [pub_sub](https://github.com/yewstack/yew/tree/v0.18/examples/pub_sub)の例でコンポーネントがどのようにエージェントと通信させているかがわかります。

View File

@ -7,8 +7,8 @@ Yew のリポジトリは[例](https://github.com/yewstack/yew/tree/v0.17/exampl
様々なフレームワークの機能の使い方を知るのにはそれらの例に取り組むのを勧めます。
プルリクエストや Issue はウェルカムです。
- [**Todo アプリ** ](https://github.com/yewstack/yew/tree/v0.17/examples/todomvc)
- [**カスタムコンポーネント**](https://github.com/yewstack/yew/tree/v0.17/examples/custom_components)
- [**マルチスレッド\(エージェント\)**](https://github.com/yewstack/yew/tree/v0.17/examples/multi_thread)
- [**タイマーサービス**](https://github.com/yewstack/yew/tree/v0.17/examples/timer)
- [**ネストしたコンポーネント**](https://github.com/yewstack/yew/tree/v0.16.0/examples/nested_list)
- [**Todo アプリ** ](https://github.com/yewstack/yew/tree/v0.17/examples/todomvc)
- [**カスタムコンポーネント**](https://github.com/yewstack/yew/tree/v0.17/examples/custom_components)
- [**マルチスレッド\(エージェント\)**](https://github.com/yewstack/yew/tree/v0.17/examples/multi_thread)
- [**タイマーサービス**](https://github.com/yewstack/yew/tree/v0.17/examples/timer)
- [**ネストしたコンポーネント**](https://github.com/yewstack/yew/tree/v0.16.0/examples/nested_list)

View File

@ -27,9 +27,9 @@ cargo web start
## サポートされているターゲット
- `wasm32-unknown-unknown`
- `wasm32-unknown-emscripten`
- `asmjs-unknown-emscripten`
- `wasm32-unknown-unknown`
- `wasm32-unknown-emscripten`
- `asmjs-unknown-emscripten`
:::注意
`*-emscripten`をターゲットにする場合、Emscripten SDK をインストールする必要があります。

View File

@ -44,8 +44,8 @@ python -m http.server 8000
## サポートされているターゲット
- `wasm32-unknown-unknown`
- `wasm32-unknown-unknown`
## 参考ドキュメント
- [The `wasm-bindgen` docs](https://rustwasm.github.io/docs/wasm-bindgen/)
- [The `wasm-bindgen` docs](https://rustwasm.github.io/docs/wasm-bindgen/)

View File

@ -46,4 +46,4 @@ python -m http.server 8000
## サポートされているターゲット
- `wasm32-unknown-unknown`
- `wasm32-unknown-unknown`

View File

@ -4,11 +4,11 @@ title: Starter templates
## `wasm-pack`
- [ミニマルテンプレート](https://github.com/yewstack/yew-wasm-pack-minimal) - アプリをビルドするのに `wasm-pack`と
- [ミニマルテンプレート](https://github.com/yewstack/yew-wasm-pack-minimal) - アプリをビルドするのに `wasm-pack`と
`rollup`を使い、サーバーはアプリをサーブします. ベルや笛はここにはありません。
- [Webpack テンプレート](https://github.com/yewstack/yew-wasm-pack-template) - `wasm-pack`と
- [Webpack テンプレート](https://github.com/yewstack/yew-wasm-pack-template) - `wasm-pack`と
[`wasm-pack-plugin`](https://github.com/wasm-tool/wasm-pack-plugin)を使い、Webpack が開発を滑らかにします。
@ -37,5 +37,5 @@ wasm-bindgen = "0.2"
## その他のテンプレート
- [Parcel Template](https://github.com/spielrs/yew-parcel-template) - コミュニティのメンバーによって開発され、
[Parcel](https://parceljs.org/)を使っています。
- [Parcel Template](https://github.com/spielrs/yew-parcel-template) - コミュニティのメンバーによって開発され、
[Parcel](https://parceljs.org/)を使っています。

View File

@ -12,7 +12,7 @@ title: CSS
今のところ、コミュニティメンバーは以下のスタイルフレームワークを開発しています。
- [yew_styles](https://github.com/spielrs/yew_styles) - JavaScript に依存しない Yew のスタイルフレームワーク
- [yew-mdc](https://github.com/Follpvosten/yew-mdc) - マテリアルデザインのコンポーネント
- [muicss-yew](https://github.com/AlephAlpha/muicss-yew) - MUI の CSS コンポーネント
- [Yewtify](https://github.com/yewstack/yewtify) Yew で Vuetify フレームワークで提供されている機能の実装
- [yew_styles](https://github.com/spielrs/yew_styles) - JavaScript に依存しない Yew のスタイルフレームワーク
- [yew-mdc](https://github.com/Follpvosten/yew-mdc) - マテリアルデザインのコンポーネント
- [muicss-yew](https://github.com/AlephAlpha/muicss-yew) - MUI の CSS コンポーネント
- [Yewtify](https://github.com/yewstack/yewtify) Yew で Vuetify フレームワークで提供されている機能の実装

View File

@ -10,15 +10,15 @@ description: Libraries that can help with yew development
Yewtil は Yew のプログラムを書きやすくするユーティリティ集です。
含まれているのは:
- NeqAssign - 先述の通り、再レンダリングを最小化するよう props を割り当てる方法です
- PureComponents - 状態を更新しないコンポーネント。NeqAssign を使用するとマクロの中から通常のコンポーネントのように呼び出される関数がメモ化されます。
- NeqAssign - 先述の通り、再レンダリングを最小化するよう props を割り当てる方法です
- PureComponents - 状態を更新しないコンポーネント。NeqAssign を使用するとマクロの中から通常のコンポーネントのように呼び出される関数がメモ化されます。
- Lrc - リンクされたリストは、`Rc`のようにカウントされたスマートポインタ関数を参照しますが、新しいデータ更新パターンを可能にします。
- Mrc/Irc - Mutable/Immutable 参照カウントのスマートポインタは `Rc` のように機能しますが、`Mrc` に対して `DerefMut` と `BorrowMut` を実装しているため、Yew の中でより使いやすくなっています。これにより、`Mrc` を `NeqAssign` と一緒に使うことができます。`Irc` はデータに対する不変のビューとして機能するので、表示のみのタスクで使用されるデータを保持するのに理想的です。
- Lrc - リンクされたリストは、`Rc`のようにカウントされたスマートポインタ関数を参照しますが、新しいデータ更新パターンを可能にします。
- Mrc/Irc - Mutable/Immutable 参照カウントのスマートポインタは `Rc` のように機能しますが、`Mrc` に対して `DerefMut` と `BorrowMut` を実装しているため、Yew の中でより使いやすくなっています。これにより、`Mrc` を `NeqAssign` と一緒に使うことができます。`Irc` はデータに対する不変のビューとして機能するので、表示のみのタスクで使用されるデータを保持するのに理想的です。
- History - `VecDeque` を用いて、表示した過去の値を保持する履歴追跡ラッパーです。
- Futures - コンポーネントの更新ループにメッセージを送信するのをサポートします。
- Fetch - `web_sys` と前述の futures の機能を用いたフェッチリクエストを処理するための抽象化です。
- History - `VecDeque` を用いて、表示した過去の値を保持する履歴追跡ラッパーです。
- Futures - コンポーネントの更新ループにメッセージを送信するのをサポートします。
- Fetch - `web_sys` と前述の futures の機能を用いたフェッチリクエストを処理するための抽象化です。
## お探しのものは

View File

@ -29,17 +29,17 @@ description: The planned feature roadmap for the Yew framework
### Production Readiness
- テストカバレッジの向上
- バイナリサイズ
- [ベンチマークのパフォーマンス](https://github.com/yewstack/yew/issues/5)
- テストカバレッジの向上
- バイナリサイズ
- [ベンチマークのパフォーマンス](https://github.com/yewstack/yew/issues/5)
### Documentation
- チュートリアルを作る
- プロジェクトのセットアップをシンプルにする
- チュートリアルを作る
- プロジェクトのセットアップをシンプルにする
### Pain Points
- [Component のボイラープレート](https://github.com/yewstack/yew/issues/830)
- Fetch API
- [エージェント](https://github.com/yewstack/yew/projects/6)
- [Component のボイラープレート](https://github.com/yewstack/yew/issues/830)
- Fetch API
- [エージェント](https://github.com/yewstack/yew/projects/6)

View File

@ -115,9 +115,9 @@ Yew は純粋な関数やコンポーネントをサポートしていません
## バイナリサイズを小さくする
- Rust のコードを最適化する
- `cargo.toml` \( release profile を定義 \)
- `wasm-opt`を用いて wasm のコードを最適化する
- 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)に詳しく書いてあります。**
@ -146,8 +146,8 @@ lto = true
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`ファイルを最適化する
- `wasm-pack`でデフォルトの`wasm`のコードをリリースビルド時に最適化する
- `wasm-opt`によって直接`wasm`ファイルを最適化する
```text
wasm-opt wasm_bg.wasm -Os -o wasm_bg_opt.wasm
@ -165,7 +165,7 @@ wasm-opt wasm_bg.wasm -Os -o wasm_bg_opt.wasm
## 参考文献:
- [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)
- [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)

View File

@ -18,20 +18,20 @@ description: Yew's Actor System
### Reaches
- Context - Context エージェントのインスタンスは、常に最大 1 つ存在します。
Bridges は、UI スレッド上で既にスポーンされたエージェントをスポーンするか、接続します。
これは、コンポーネントまたは他のエージェント間の状態を調整するために使用することができます。
このエージェントに Bridges が接続されていない場合、このエージェントは消滅します。
- Context - Context エージェントのインスタンスは、常に最大 1 つ存在します。
Bridges は、UI スレッド上で既にスポーンされたエージェントをスポーンするか、接続します。
これは、コンポーネントまたは他のエージェント間の状態を調整するために使用することができます。
このエージェントに Bridges が接続されていない場合、このエージェントは消滅します。
- Job - 新しいブリッジごとに UI スレッド上で新しいエージェントをスポーンします。
これは、ブラウザと通信する共有されているが独立した動作をコンポーネントの外に移動させるのに適しています。
(TODO 確認) タスクが完了すると、エージェントは消えます。
- Job - 新しいブリッジごとに UI スレッド上で新しいエージェントをスポーンします。
これは、ブラウザと通信する共有されているが独立した動作をコンポーネントの外に移動させるのに適しています。
(TODO 確認) タスクが完了すると、エージェントは消えます。
- Public - Context と同じですが、独自の web worker で動作します。
- Public - Context と同じですが、独自の web worker で動作します。
- Private - Job と同じですが、独自の web worker で動作します。
- Private - Job と同じですが、独自の web worker で動作します。
- Global \(WIP\)
- Global \(WIP\)
## エージェントとコンポーネントのやり取り
@ -53,4 +53,4 @@ Dispatcher は、コンポーネントがエージェントにメッセージを
## 参考資料
- [web_worker_fib](https://github.com/yewstack/yew/tree/master/examples/web_worker_fib)の例でコンポーネントがどのようにエージェントと通信させているかがわかります。
- [web_worker_fib](https://github.com/yewstack/yew/tree/master/examples/web_worker_fib)の例でコンポーネントがどのようにエージェントと通信させているかがわかります。

View File

@ -7,8 +7,8 @@ Yew のリポジトリは[例](https://github.com/yewstack/yew/tree/v0.17/exampl
様々なフレームワークの機能の使い方を知るのにはそれらの例に取り組むのを勧めます。
プルリクエストや Issue はウェルカムです。
- [**Todo アプリ** ](https://github.com/yewstack/yew/tree/v0.17/examples/todomvc)
- [**カスタムコンポーネント**](https://github.com/yewstack/yew/tree/v0.17/examples/custom_components)
- [**マルチスレッド\(エージェント\)**](https://github.com/yewstack/yew/tree/v0.17/examples/multi_thread)
- [**タイマーサービス**](https://github.com/yewstack/yew/tree/v0.17/examples/timer)
- [**ネストしたコンポーネント**](https://github.com/yewstack/yew/tree/v0.16.0/examples/nested_list)
- [**Todo アプリ** ](https://github.com/yewstack/yew/tree/v0.17/examples/todomvc)
- [**カスタムコンポーネント**](https://github.com/yewstack/yew/tree/v0.17/examples/custom_components)
- [**マルチスレッド\(エージェント\)**](https://github.com/yewstack/yew/tree/v0.17/examples/multi_thread)
- [**タイマーサービス**](https://github.com/yewstack/yew/tree/v0.17/examples/timer)
- [**ネストしたコンポーネント**](https://github.com/yewstack/yew/tree/v0.16.0/examples/nested_list)

View File

@ -12,7 +12,7 @@ title: CSS
今のところ、コミュニティメンバーは以下のスタイルフレームワークを開発しています。
- [yew_styles](https://github.com/spielrs/yew_styles) - JavaScript に依存しない Yew のスタイルフレームワーク
- [yew-mdc](https://github.com/Follpvosten/yew-mdc) - マテリアルデザインのコンポーネント
- [muicss-yew](https://github.com/AlephAlpha/muicss-yew) - MUI の CSS コンポーネント
- [Yewtify](https://github.com/yewstack/yewtify) Yew で Vuetify フレームワークで提供されている機能の実装
- [yew_styles](https://github.com/spielrs/yew_styles) - JavaScript に依存しない Yew のスタイルフレームワーク
- [yew-mdc](https://github.com/Follpvosten/yew-mdc) - マテリアルデザインのコンポーネント
- [muicss-yew](https://github.com/AlephAlpha/muicss-yew) - MUI の CSS コンポーネント
- [Yewtify](https://github.com/yewstack/yewtify) Yew で Vuetify フレームワークで提供されている機能の実装

View File

@ -29,17 +29,17 @@ description: The planned feature roadmap for the Yew framework
### Production Readiness
- テストカバレッジの向上
- バイナリサイズ
- [ベンチマークのパフォーマンス](https://github.com/yewstack/yew/issues/5)
- テストカバレッジの向上
- バイナリサイズ
- [ベンチマークのパフォーマンス](https://github.com/yewstack/yew/issues/5)
### Documentation
- チュートリアルを作る
- プロジェクトのセットアップをシンプルにする
- チュートリアルを作る
- プロジェクトのセットアップをシンプルにする
### Pain Points
- [Component のボイラープレート](https://github.com/yewstack/yew/issues/830)
- Fetch API
- [エージェント](https://github.com/yewstack/yew/projects/6)
- [Component のボイラープレート](https://github.com/yewstack/yew/issues/830)
- Fetch API
- [エージェント](https://github.com/yewstack/yew/projects/6)

View File

@ -115,9 +115,9 @@ Yew は純粋な関数やコンポーネントをサポートしていません
## バイナリサイズを小さくする
- Rust のコードを最適化する
- `cargo.toml` \( release profile を定義 \)
- `wasm-opt`を用いて wasm のコードを最適化する
- 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)に詳しく書いてあります。**
@ -146,8 +146,8 @@ lto = true
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`ファイルを最適化する
- `wasm-pack`でデフォルトの`wasm`のコードをリリースビルド時に最適化する
- `wasm-opt`によって直接`wasm`ファイルを最適化する
```text
wasm-opt wasm_bg.wasm -Os -o wasm_bg_opt.wasm
@ -165,7 +165,7 @@ wasm-opt wasm_bg.wasm -Os -o wasm_bg_opt.wasm
## 参考文献:
- [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)
- [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)

View File

@ -18,20 +18,20 @@ description: Yew's Actor System
### Reaches
- Context - Context エージェントのインスタンスは、常に最大 1 つ存在します。
Bridges は、UI スレッド上で既にスポーンされたエージェントをスポーンするか、接続します。
これは、コンポーネントまたは他のエージェント間の状態を調整するために使用することができます。
このエージェントに Bridges が接続されていない場合、このエージェントは消滅します。
- Context - Context エージェントのインスタンスは、常に最大 1 つ存在します。
Bridges は、UI スレッド上で既にスポーンされたエージェントをスポーンするか、接続します。
これは、コンポーネントまたは他のエージェント間の状態を調整するために使用することができます。
このエージェントに Bridges が接続されていない場合、このエージェントは消滅します。
- Job - 新しいブリッジごとに UI スレッド上で新しいエージェントをスポーンします。
これは、ブラウザと通信する共有されているが独立した動作をコンポーネントの外に移動させるのに適しています。
(TODO 確認) タスクが完了すると、エージェントは消えます。
- Job - 新しいブリッジごとに UI スレッド上で新しいエージェントをスポーンします。
これは、ブラウザと通信する共有されているが独立した動作をコンポーネントの外に移動させるのに適しています。
(TODO 確認) タスクが完了すると、エージェントは消えます。
- Public - Context と同じですが、独自の web worker で動作します。
- Public - Context と同じですが、独自の web worker で動作します。
- Private - Job と同じですが、独自の web worker で動作します。
- Private - Job と同じですが、独自の web worker で動作します。
- Global \(WIP\)
- Global \(WIP\)
## エージェントとコンポーネントのやり取り
@ -53,4 +53,4 @@ Dispatcher は、コンポーネントがエージェントにメッセージを
## 参考資料
- [web_worker_fib](https://github.com/yewstack/yew/tree/master/examples/web_worker_fib)の例でコンポーネントがどのようにエージェントと通信させているかがわかります。
- [web_worker_fib](https://github.com/yewstack/yew/tree/master/examples/web_worker_fib)の例でコンポーネントがどのようにエージェントと通信させているかがわかります。

View File

@ -7,8 +7,8 @@ Yew のリポジトリは[例](https://github.com/yewstack/yew/tree/v0.17/exampl
様々なフレームワークの機能の使い方を知るのにはそれらの例に取り組むのを勧めます。
プルリクエストや Issue はウェルカムです。
- [**Todo アプリ** ](https://github.com/yewstack/yew/tree/v0.17/examples/todomvc)
- [**カスタムコンポーネント**](https://github.com/yewstack/yew/tree/v0.17/examples/custom_components)
- [**マルチスレッド\(エージェント\)**](https://github.com/yewstack/yew/tree/v0.17/examples/multi_thread)
- [**タイマーサービス**](https://github.com/yewstack/yew/tree/v0.17/examples/timer)
- [**ネストしたコンポーネント**](https://github.com/yewstack/yew/tree/v0.16.0/examples/nested_list)
- [**Todo アプリ** ](https://github.com/yewstack/yew/tree/v0.17/examples/todomvc)
- [**カスタムコンポーネント**](https://github.com/yewstack/yew/tree/v0.17/examples/custom_components)
- [**マルチスレッド\(エージェント\)**](https://github.com/yewstack/yew/tree/v0.17/examples/multi_thread)
- [**タイマーサービス**](https://github.com/yewstack/yew/tree/v0.17/examples/timer)
- [**ネストしたコンポーネント**](https://github.com/yewstack/yew/tree/v0.16.0/examples/nested_list)

View File

@ -12,7 +12,7 @@ title: CSS
今のところ、コミュニティメンバーは以下のスタイルフレームワークを開発しています。
- [yew_styles](https://github.com/spielrs/yew_styles) - JavaScript に依存しない Yew のスタイルフレームワーク
- [yew-mdc](https://github.com/Follpvosten/yew-mdc) - マテリアルデザインのコンポーネント
- [muicss-yew](https://github.com/AlephAlpha/muicss-yew) - MUI の CSS コンポーネント
- [Yewtify](https://github.com/yewstack/yewtify) Yew で Vuetify フレームワークで提供されている機能の実装
- [yew_styles](https://github.com/spielrs/yew_styles) - JavaScript に依存しない Yew のスタイルフレームワーク
- [yew-mdc](https://github.com/Follpvosten/yew-mdc) - マテリアルデザインのコンポーネント
- [muicss-yew](https://github.com/AlephAlpha/muicss-yew) - MUI の CSS コンポーネント
- [Yewtify](https://github.com/yewstack/yewtify) Yew で Vuetify フレームワークで提供されている機能の実装

View File

@ -29,17 +29,17 @@ description: The planned feature roadmap for the Yew framework
### Production Readiness
- テストカバレッジの向上
- バイナリサイズ
- [ベンチマークのパフォーマンス](https://github.com/yewstack/yew/issues/5)
- テストカバレッジの向上
- バイナリサイズ
- [ベンチマークのパフォーマンス](https://github.com/yewstack/yew/issues/5)
### Documentation
- チュートリアルを作る
- プロジェクトのセットアップをシンプルにする
- チュートリアルを作る
- プロジェクトのセットアップをシンプルにする
### Pain Points
- [Component のボイラープレート](https://github.com/yewstack/yew/issues/830)
- Fetch API
- [エージェント](https://github.com/yewstack/yew/projects/6)
- [Component のボイラープレート](https://github.com/yewstack/yew/issues/830)
- Fetch API
- [エージェント](https://github.com/yewstack/yew/projects/6)

View File

@ -304,4 +304,4 @@ pub fn render_page(with_sidebar: bool) -> Html {
## さらに読む
- このパターンの実際の例については、yew-router のソースコードを参照してください。より高度な例については、yew リポジトリの[関連する例のリスト](https://github.com/yewstack/yew/tree/master/examples/nested_list)を参照してください。
- このパターンの実際の例については、yew-router のソースコードを参照してください。より高度な例については、yew リポジトリの[関連する例のリスト](https://github.com/yewstack/yew/tree/master/examples/nested_list)を参照してください。

View File

@ -34,6 +34,6 @@ _貢献ドキュメント - `yew::scheduler` と `yew::html::scope` の仕組み
## さらなる読み物
- [Rustのマクロに関する詳細情報](https://doc.rust-lang.org/stable/book/ch19-06-macros.html)
- [`cargo-expand` に関する詳細情報](https://github.com/dtolnay/cargo-expand)
- [`yew::virtual_dom` のAPIドキュメント](https://docs.rs/yew/*/yew/virtual_dom/index.html)
- [Rustのマクロに関する詳細情報](https://doc.rust-lang.org/stable/book/ch19-06-macros.html)
- [`cargo-expand` に関する詳細情報](https://github.com/dtolnay/cargo-expand)
- [`yew::virtual_dom` のAPIドキュメント](https://docs.rs/yew/*/yew/virtual_dom/index.html)

View File

@ -15,5 +15,5 @@ React と同様に、プロパティは祖先から子孫に伝播されます
## さらに読む
- [イミュータブルの例](https://github.com/yewstack/yew/tree/master/examples/immutable)
- [Crate `implicit-clone`](https://docs.rs/implicit-clone/)
- [イミュータブルの例](https://github.com/yewstack/yew/tree/master/examples/immutable)
- [Crate `implicit-clone`](https://docs.rs/implicit-clone/)

View File

@ -38,9 +38,9 @@ Yewの最大の欠点は、コンパイルにかかる時間が長いことで
## バイナリサイズの縮小
- Rustコードの最適化
- `cargo.toml`(リリースプロファイルの定義)
- `wasm-opt` を使用してwasmコードを最適化
- Rustコードの最適化
- `cargo.toml`(リリースプロファイルの定義)
- `wasm-opt` を使用してwasmコードを最適化
**注意:バイナリサイズの縮小に関する詳細は、[Rust Wasmマニュアル](https://rustwasm.github.io/book/reference/code-size.html#optimizing-builds-for-code-size)を参照してください。**
@ -87,8 +87,8 @@ build-std-features = ["panic_immediate_abort"]
Rust Wasm マニュアルには、Wasm バイナリファイルのサイズを縮小する方法に関するセクションがあります:[.wasm サイズの縮小](https://rustwasm.github.io/book/game-of-life/code-size.html)
- `wasm-pack` を使用すると、デフォルトでリリースビルドの `wasm` コードが最適化されます
- `wasm` ファイルに直接 `wasm-opt` を使用する
- `wasm-pack` を使用すると、デフォルトでリリースビルドの `wasm` コードが最適化されます
- `wasm` ファイルに直接 `wasm-opt` を使用する
```text
wasm-opt wasm_bg.wasm -Os -o wasm_bg_opt.wasm
@ -106,7 +106,7 @@ wasm-opt wasm_bg.wasm -Os -o wasm_bg_opt.wasm
## さらに読む
- [Rust マニュアルのスマート ポインターに関する章](https://doc.rust-lang.org/book/ch15-00-smart-pointers.html)
- [Rust Wasm マニュアルのコードサイズの縮小に関する章](https://rustwasm.github.io/book/reference/code-size.html#optimizing-builds-for-code-size)
- [Rust プロファイルに関するドキュメント](https://doc.rust-lang.org/cargo/reference/profiles.html)
- [binaryen プロジェクト](https://github.com/WebAssembly/binaryen)
- [Rust マニュアルのスマート ポインターに関する章](https://doc.rust-lang.org/book/ch15-00-smart-pointers.html)
- [Rust Wasm マニュアルのコードサイズの縮小に関する章](https://rustwasm.github.io/book/reference/code-size.html#optimizing-builds-for-code-size)
- [Rust プロファイルに関するドキュメント](https://doc.rust-lang.org/cargo/reference/profiles.html)
- [binaryen プロジェクト](https://github.com/WebAssembly/binaryen)

View File

@ -45,4 +45,4 @@ fn Modal(props: &ModalProps) -> Html {
## さらなる読み物
- [ポータルの例](https://github.com/yewstack/yew/tree/master/examples/portals)
- [ポータルの例](https://github.com/yewstack/yew/tree/master/examples/portals)

View File

@ -81,5 +81,5 @@ impl Component for Comp {
## 関連例
- [Counter](https://github.com/yewstack/yew/tree/master/examples/counter)
- [Timer](https://github.com/yewstack/yew/tree/master/examples/timer)
- [Counter](https://github.com/yewstack/yew/tree/master/examples/counter)
- [Timer](https://github.com/yewstack/yew/tree/master/examples/timer)

View File

@ -48,4 +48,4 @@ impl Component for Comp {
## 関連例
- [ノード参照](https://github.com/yewstack/yew/tree/master/examples/node_refs)
- [ノード参照](https://github.com/yewstack/yew/tree/master/examples/node_refs)

View File

@ -29,11 +29,11 @@ The code can be found in the <desc> tag of the svgs.
### 範囲
- 公開 - 任意の時点で、公開エージェントのインスタンスは最大で1つだけです。ブリッジはWeb Worker内でエージェントを生成するか、既に生成されたエージェントに接続します。ブリッジがこのエージェントに接続されていない場合、エージェントは消滅します。
- 公開 - 任意の時点で、公開エージェントのインスタンスは最大で1つだけです。ブリッジはWeb Worker内でエージェントを生成するか、既に生成されたエージェントに接続します。ブリッジがこのエージェントに接続されていない場合、エージェントは消滅します。
- 私有 - 新しいブリッジごとにWeb Worker内で新しいエージェントを生成します。これは、ブラウザと通信する共有だが独立した動作をコンポーネントから移動するのに適しています。接続されたブリッジが破棄されると、エージェントは消滅します。
- 私有 - 新しいブリッジごとにWeb Worker内で新しいエージェントを生成します。これは、ブラウザと通信する共有だが独立した動作をコンポーネントから移動するのに適しています。接続されたブリッジが破棄されると、エージェントは消滅します。
- グローバル \(WIP\)
- グローバル \(WIP\)
## エージェントとコンポーネント間の通信
@ -53,4 +53,4 @@ The code can be found in the <desc> tag of the svgs.
## さらなる読み物
- [web_worker_fib](https://github.com/yewstack/yew/tree/master/examples/web_worker_fib) の例は、コンポーネントがエージェントにメッセージを送信し、エージェントからのメッセージを受信する方法を示しています。
- [web_worker_fib](https://github.com/yewstack/yew/tree/master/examples/web_worker_fib) の例は、コンポーネントがエージェントにメッセージを送信し、エージェントからのメッセージを受信する方法を示しています。

View File

@ -7,10 +7,10 @@ sidebar_label: wasm-bindgen
Yew は `wasm-bindgen` を使用して、いくつかのクレートを介してブラウザと対話します:
- [`js-sys`](https://crates.io/crates/js-sys)
- [`wasm-bindgen`](https://crates.io/crates/wasm-bindgen)
- [`wasm-bindgen-futures`](https://crates.io/crates/wasm-bindgen-futures)
- [`web-sys`](https://crates.io/crates/web-sys)
- [`js-sys`](https://crates.io/crates/js-sys)
- [`wasm-bindgen`](https://crates.io/crates/wasm-bindgen)
- [`wasm-bindgen-futures`](https://crates.io/crates/wasm-bindgen-futures)
- [`web-sys`](https://crates.io/crates/web-sys)
このセクションでは、これらのクレートをより抽象的なレベルから探求し、Yew での `wasm-bindgen` API の理解と使用を容易にします。`wasm-bindgen` および関連するクレートに関する詳細なガイドについては、[`wasm-bindgen` ガイド](https://rustwasm.github.io/docs/wasm-bindgen/) を参照してください。
@ -66,10 +66,10 @@ Rust では、この継承関係は [`Deref`](https://doc.rust-lang.org/std/ops/
これらの型をインポートする際、`#[wasm-bindgen]` マクロは次のように `Deref` と `AsRef` トレイトを実装します:
- `C` は `B` に `Deref` できます
- `B` は `A` に `Deref` できます
- `C` は `B` に `AsRef` できます
- `C` と `B` はどちらも `A` に `AsRef` できます
- `C` は `B` に `Deref` できます
- `B` は `A` に `Deref` できます
- `C` は `B` に `AsRef` できます
- `C` と `B` はどちらも `A` に `AsRef` できます
これらの実装により、`C` のインスタンスで `A` のメソッドを呼び出したり、`C` を `&B` または `&A` として使用したりできます。

View File

@ -156,16 +156,16 @@ pub fn ThemedButton() -> Html {
構造体コンポーネント内でコンテキストを使用するには、2つの方法があります
- [高階コンポーネント](../advanced-topics/struct-components/hoc.mdx):高階関数コンポーネントがコンテキストを使用し、必要なデータを構造体コンポーネントに渡します。
- 構造体コンポーネント内で直接コンテキストを使用します。詳細については、[構造体コンポーネントのコンシューマーとしての例](https://github.com/yewstack/yew/tree/master/examples/contexts/src/struct_component_subscriber.rs) を参照してください。
- [高階コンポーネント](../advanced-topics/struct-components/hoc.mdx):高階関数コンポーネントがコンテキストを使用し、必要なデータを構造体コンポーネントに渡します。
- 構造体コンポーネント内で直接コンテキストを使用します。詳細については、[構造体コンポーネントのコンシューマーとしての例](https://github.com/yewstack/yew/tree/master/examples/contexts/src/struct_component_subscriber.rs) を参照してください。
## 使用シナリオ
通常、ツリーの異なる部分のリモートコンポーネントでデータを使用する必要がある場合、コンテキストが役立ちます。
以下はいくつかの例です:
- **テーマ**:アプリケーションのトップにコンテキストを配置し、アプリケーションのテーマを保持し、視覚的な外観を調整するために使用できます(上記の例を参照)。
- **現在のユーザーアカウント**:多くの場合、コンポーネントは現在ログインしているユーザーを知る必要があります。コンテキストを使用して、現在のユーザーオブジェクトをコンポーネントに提供できます。
- **テーマ**:アプリケーションのトップにコンテキストを配置し、アプリケーションのテーマを保持し、視覚的な外観を調整するために使用できます(上記の例を参照)。
- **現在のユーザーアカウント**:多くの場合、コンポーネントは現在ログインしているユーザーを知る必要があります。コンテキストを使用して、現在のユーザーオブジェクトをコンポーネントに提供できます。
### コンテキストを使用する前の考慮事項
@ -185,4 +185,4 @@ Rust の所有権ルールにより、コンテキストには子コンポーネ
## さらなる読み物
- [コンテキストの例](https://github.com/yewstack/yew/tree/master/examples/contexts)
- [コンテキストの例](https://github.com/yewstack/yew/tree/master/examples/contexts)

View File

@ -25,19 +25,19 @@ Yew はいくつかの事前定義された hooks を提供しています。ま
Yew は次の事前定義された Hooks を提供しています:
- `use_state`
- `use_state_eq`
- `use_memo`
- `use_callback`
- `use_ref`
- `use_mut_ref`
- `use_node_ref`
- `use_reducer`
- `use_reducer_eq`
- `use_effect`
- `use_effect_with`
- `use_context`
- `use_force_update`
- `use_state`
- `use_state_eq`
- `use_memo`
- `use_callback`
- `use_ref`
- `use_mut_ref`
- `use_node_ref`
- `use_reducer`
- `use_reducer_eq`
- `use_effect`
- `use_effect_with`
- `use_context`
- `use_force_update`
これらの hooks のドキュメントは [Yew API ドキュメント](https://yew-rs-api.web.app/next/yew/functional/)で見つけることができます。
@ -47,4 +47,4 @@ Yew は次の事前定義された Hooks を提供しています:
## さらなる読み物
- React ドキュメントには [React hooks](https://reactjs.org/docs/hooks-intro.html) に関するセクションがあります。
- React ドキュメントには [React hooks](https://reactjs.org/docs/hooks-intro.html) に関するセクションがあります。

View File

@ -15,9 +15,9 @@ slug: /concepts/function-components
それらは次のことを行うべきです:
- [Props](./properties.mdx) の形式でパラメータを受け取る
- 独自の状態を持つことができる
- ユーザーに見える HTML フラグメントDOMを計算する
- [Props](./properties.mdx) の形式でパラメータを受け取る
- 独自の状態を持つことができる
- ユーザーに見える HTML フラグメントDOMを計算する
## Yew コンポーネントの 2 つのフレーバー

View File

@ -13,5 +13,5 @@ Yew がレンダリングした DOM ツリーを手動で変更しないでく
## さらに読む
- [use_node_ref フック](https://yew-rs-api.web.app/next/yew/functional/fn.use_node_ref.html)
- [`node_refs` の例](https://github.com/yewstack/yew/tree/master/examples/node_refs)
- [use_node_ref フック](https://yew-rs-api.web.app/next/yew/functional/fn.use_node_ref.html)
- [`node_refs` の例](https://github.com/yewstack/yew/tree/master/examples/node_refs)

View File

@ -120,5 +120,5 @@ html! {
## 参考例
- [関数型 Todo MVC](https://github.com/yewstack/yew/tree/master/examples/function_todomvc)
- [関数型ルーティング](https://github.com/yewstack/yew/tree/master/examples/function_router)
- [関数型 Todo MVC](https://github.com/yewstack/yew/tree/master/examples/function_todomvc)
- [関数型ルーティング](https://github.com/yewstack/yew/tree/master/examples/function_router)

View File

@ -135,4 +135,4 @@ html! {
## 関連例
- [インライン HTML](https://github.com/yewstack/yew/tree/master/examples/inner_html)
- [インライン HTML](https://github.com/yewstack/yew/tree/master/examples/inner_html)

View File

@ -47,8 +47,8 @@ yew::set_event_bubbling(false);
驚くかもしれませんが、イベントリスナーはレンダリングされた要素に直接登録されるわけではありません。代わりに、イベントは Yew アプリケーションのサブツリーのルートードから委譲されます。ただし、イベントはそのネイティブ形式で渡され、合成形式は作成されません。これにより、HTML リスナーで予期されるイベントと Yew で発生するイベントとの間に不一致が生じる可能性があります。
- [`Event::current_target`] はリスナーが追加された要素ではなく、Yew サブツリーのルートノードを指します。基になる `HtmlElement` にアクセスしたい場合は、[`NodeRef`](../function-components/node-refs.mdx) を使用してください。
- [`Event::event_phase`] は常に [`Event::CAPTURING_PHASE`] です。内部的には、イベントはバブリングフェーズにあるかのように振る舞い、イベント伝播が再生され、イベントは[上位にバブルアップ](#event-bubbling)します。つまり、仮想 DOM 内の上位のイベントリスナーが下位のイベントリスナーの後にトリガーされます。現在、Yew はキャプチャリスナーをサポートしていません。
- [`Event::current_target`] はリスナーが追加された要素ではなく、Yew サブツリーのルートノードを指します。基になる `HtmlElement` にアクセスしたい場合は、[`NodeRef`](../function-components/node-refs.mdx) を使用してください。
- [`Event::event_phase`] は常に [`Event::CAPTURING_PHASE`] です。内部的には、イベントはバブリングフェーズにあるかのように振る舞い、イベント伝播が再生され、イベントは[上位にバブルアップ](#event-bubbling)します。つまり、仮想 DOM 内の上位のイベントリスナーが下位のイベントリスナーの後にトリガーされます。現在、Yew はキャプチャリスナーをサポートしていません。
これも意味するところは、Yew によって登録されたイベントは通常、他のイベントリスナーよりも先にトリガーされるということです。

View File

@ -114,6 +114,6 @@ Yew はこれらの状況で最適化として既にレンダリングされた
## さらなる読み物
- [TodoMVC の例](https://github.com/yewstack/yew/tree/master/examples/todomvc)
- [キー付きリストの例](https://github.com/yewstack/yew/tree/master/examples/keyed_list)
- [ルーティングの例](https://github.com/yewstack/yew/tree/master/examples/router)
- [TodoMVC の例](https://github.com/yewstack/yew/tree/master/examples/todomvc)
- [キー付きリストの例](https://github.com/yewstack/yew/tree/master/examples/keyed_list)
- [ルーティングの例](https://github.com/yewstack/yew/tree/master/examples/router)

View File

@ -454,8 +454,8 @@ Router コンポーネントにベースパス属性が提供されていない
## 関連例
- [ルーター](https://github.com/yewstack/yew/tree/master/examples/router)
- [ルーター](https://github.com/yewstack/yew/tree/master/examples/router)
## インターフェースリファレンス
- [yew-router](https://docs.rs/yew-router/)
- [yew-router](https://docs.rs/yew-router/)

View File

@ -143,4 +143,4 @@ Yew リポジトリの[プレースホルダーの例](https://github.com/yewsta
## 関連例
- [プレースホルダー](https://github.com/yewstack/yew/tree/master/examples/suspense)
- [プレースホルダー](https://github.com/yewstack/yew/tree/master/examples/suspense)

View File

@ -19,7 +19,7 @@ description: 'コードエディタの設定'
関数型コンポーネントの場合、以下のテンプレートを使用します。
- (オプション) 変数を編集し、`tag` に適切なデフォルト値(例:"div")を設定します。
- (オプション) 変数を編集し、`tag` に適切なデフォルト値(例:"div")を設定します。
```rust ,ignore
#[derive(PartialEq, Properties)]

View File

@ -35,9 +35,9 @@ cargo install --locked trunk
Trunk の他にも、Yew アプリケーションをパッケージ化するための他のオプションがあります。以下のオプションのいずれかを試してみることをお勧めします:
- [`wasm-pack`](https://rustwasm.github.io/wasm-pack/)
- [`wasm-run`](https://github.com/IMI-eRnD-Be/wasm-run)
- [`xtask-wasm`](https://github.com/rustminded/xtask-wasm/)(まだ初期開発段階です)
- [`wasm-pack`](https://rustwasm.github.io/wasm-pack/)
- [`wasm-run`](https://github.com/IMI-eRnD-Be/wasm-run)
- [`xtask-wasm`](https://github.com/rustminded/xtask-wasm/)(まだ初期開発段階です)
## 次のステップ

View File

@ -12,15 +12,15 @@ Yew に CSS サポートを統合する最良の方法についての議論は
#### コンポーネントライブラリ
- [yew_styles](https://github.com/spielrs/yew_styles) - JavaScript 依存なしの Yew スタイルフレームワーク。
- [yew-mdc](https://github.com/Follpvosten/yew-mdc) - マテリアルデザインコンポーネント。
- [muicss-yew](https://github.com/AlephAlpha/muicss-yew) - MUI CSS コンポーネント。
- [Yewtify](https://github.com/yewstack/yewtify) Yew で Vuetify フレームワークの機能を実現。
- [yew_styles](https://github.com/spielrs/yew_styles) - JavaScript 依存なしの Yew スタイルフレームワーク。
- [yew-mdc](https://github.com/Follpvosten/yew-mdc) - マテリアルデザインコンポーネント。
- [muicss-yew](https://github.com/AlephAlpha/muicss-yew) - MUI CSS コンポーネント。
- [Yewtify](https://github.com/yewstack/yewtify) Yew で Vuetify フレームワークの機能を実現。
#### スタイルソリューション
- [stylist](https://github.com/futursolo/stylist-rs) - WebAssembly アプリケーション用の CSS-in-Rust スタイルソリューション。
- [tailwind-css](https://github.com/thedodd/trunk/tree/master/examples/yew-tailwindcss) - Tailwind ユーティリティクラス。
- [stylist](https://github.com/futursolo/stylist-rs) - WebAssembly アプリケーション用の CSS-in-Rust スタイルソリューション。
- [tailwind-css](https://github.com/thedodd/trunk/tree/master/examples/yew-tailwindcss) - Tailwind ユーティリティクラス。
:::important ドキュメントの改善
Yew にスタイルを追加するプロジェクトを開発している場合は、このリストに自分を追加する PR を提出してください!

View File

@ -29,16 +29,16 @@ description: 'Yew フレームワークの計画機能ロードマップ'
### プロダクションレディに必要な問題
- Yew のテストカバレッジを向上させる
- バイナリサイズを小さくする
- [パフォーマンスベンチマーク](https://github.com/yewstack/yew/issues/5)
- Yew のテストカバレッジを向上させる
- バイナリサイズを小さくする
- [パフォーマンスベンチマーク](https://github.com/yewstack/yew/issues/5)
### ドキュメント
- チュートリアルを作成する
- プロジェクト設定を簡素化する
- チュートリアルを作成する
- プロジェクト設定を簡素化する
### 痛点
- [コンポーネントテンプレート](https://github.com/yewstack/yew/issues/830)
- [エージェント](https://github.com/yewstack/yew/projects/6)
- [コンポーネントテンプレート](https://github.com/yewstack/yew/issues/830)
- [エージェント](https://github.com/yewstack/yew/projects/6)

View File

@ -460,12 +460,12 @@ fn app() -> Html {
実際のアプリケーションでは、データは通常ハードコーディングされているのではなく、API から取得されます。外部ソースからビデオリストを取得してみましょう。そのためには、以下のクレートを追加する必要があります:
- [`gloo-net`](https://crates.io/crates/gloo-net)
fetch 呼び出しを行うために使用します。
- [`serde`](https://serde.rs) とその派生特性
JSON 応答をデシリアライズするために使用します。
- [`wasm-bindgen-futures`](https://crates.io/crates/wasm-bindgen-futures)
Rust の Future を Promise として実行するために使用します。
- [`gloo-net`](https://crates.io/crates/gloo-net)
fetch 呼び出しを行うために使用します。
- [`serde`](https://serde.rs) とその派生特性
JSON 応答をデシリアライズするために使用します。
- [`wasm-bindgen-futures`](https://crates.io/crates/wasm-bindgen-futures)
Rust の Future を Promise として実行するために使用します。
`Cargo.toml` ファイルの依存関係を更新しましょう:

Some files were not shown because too many files have changed in this diff Show More