archive-gh-me/yew
1
0
Fork 0
mirror of https://github.com/yewstack/yew.git synced 2025-12-08 21:26:25 +00:00
Code Issues Projects Releases Wiki Activity

Format website with prettier (#2536)

Browse Source 
* add prettier

* ci

* run prettier

* run prettier in CI

* run prettier --write

* ignore README.md

* specify googleAnalytics

* fmt

* npm run write-translations

* fmt

* ignore i18n json files

they're autogenerated and don't like being formatted

* post merge fixes & some updates

* post merge fixes
This commit is contained in:
Muhammad Hamza 2022-04-06 22:52:15 +05:00 committed by GitHub
parent ec1f43aa24
commit 3ad4dbe837
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
428 changed files with 29659 additions and 27394 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
.github/workflows/build-website.yml vendored
View File

@ -15,6 +15,7 @@ on:
jobs:
build:
name: Build Website
runs-on: ubuntu-latest
env:
PR_INFO_FILE: ".PR_INFO"
@ -26,10 +27,19 @@ jobs:
with:
node-version: "16"
- name: Check Translations
- name: Install dependencies
run: |
cd website
npm install
- name: Run prettier
run: |
cd website
npm run fmt
- name: Check Translations
run: |
cd website
npm run check-translations
- name: Build

24
website/.prettierignore Normal file
View File

@ -0,0 +1,24 @@
# Dependencies
/node_modules
# Production
/build
# Generated files
.docusaurus
.cache-loader
# Misc
.DS_Store
.env.local
.env.development.local
.env.test.local
.env.production.local
npm-debug.log*
yarn-debug.log*
yarn-error.log*
# it messes these files
README.md
i18n/**/*.json

6
website/.prettierrc.json Normal file
View File

@ -0,0 +1,6 @@
{
"trailingComma": "es5",
"tabWidth": 4,
"semi": false,
"singleQuote": true
}

6
website/README.md
View File

@ -2,7 +2,7 @@
This website is built using [Docusaurus 2](https://docusaurus.io/), a modern static website generator.
Most of the content sits inside the [docs](docs) folder and the [versioned_docs](versioned_docs) folder in the form of
Most of the content sits inside the [docs](docs) folder and the [versioned_docs](versioned_docs) folder in the form of
markdown.
## Installation
@ -51,13 +51,13 @@ It helps docusaurus to extract those texts and compile them to `.json` files to
get further translated in GitLocalize.
```jsx
import Translate from '@docusaurus/Translate';
import Translate from '@docusaurus/Translate'
<h2>
<Translate id="header.translation.id" description="the header description">
This header will be translated
</Translate>
</h2>;
</h2>
```
If your pull request adds new `<Translation>` tags,

4
website/babel.config.js
View File

@ -1,3 +1,3 @@
module.exports = {
presets: [require.resolve('@docusaurus/core/lib/babel/preset')],
};
presets: [require.resolve('@docusaurus/core/lib/babel/preset')],
}

8
website/blog/authors.yml
View File

@ -1,5 +1,5 @@
hamza:
name: Muhammad Hamza
title: Maintainer of Yew
url: https://github.com/hamza1311
image_url: https://github.com/hamza1311.png
name: Muhammad Hamza
title: Maintainer of Yew
url: https://github.com/hamza1311
image_url: https://github.com/hamza1311.png

43
website/check-translations.js
View File

@ -1,37 +1,36 @@
const {i18n: {locales}} = require('./docusaurus.config.js');
const util = require('util');
const exec = util.promisify(require('child_process').exec);
const path = require('path');
const fs = require('fs');
const os = require('os');
const dircompare = require('dir-compare');
const {
i18n: { locales },
} = require('./docusaurus.config.js')
const util = require('util')
const exec = util.promisify(require('child_process').exec)
const path = require('path')
const fs = require('fs')
const os = require('os')
const dircompare = require('dir-compare')
const writeTranslations = require('./write-translations.js')
const temp = fs.mkdtempSync(path.join(os.tmpdir(), 'yew-website-'));
const temp = fs.mkdtempSync(path.join(os.tmpdir(), 'yew-website-'))
async function main() {
await new Promise(resolve => {
fs.cp('i18n', temp, {recursive: true}, () => {
await new Promise((resolve) => {
fs.cp('i18n', temp, { recursive: true }, () => {
resolve()
})
})
await writeTranslations()
const result = await dircompare.compare(temp, 'i18n', {compareContent: true});
const result = await dircompare.compare(temp, 'i18n', {
compareContent: true,
})
if (result.same) {
console.log("Translations unchanged");
console.log('Translations unchanged')
} else {
console.error("Translations changed, please run `npm run write-translations` to generate the stubs");
process.exitCode = 1;
console.error(
'Translations changed, please run `npm run write-translations` to generate the stubs'
)
process.exitCode = 1
}
}
main()
.catch(e => console.error(e))
main().catch((e) => console.error(e))

227
website/community/awesome.md
View File

@ -1,156 +1,155 @@
---
title: "Awesome Yew"
description: "Community projects built using yew"
title: 'Awesome Yew'
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/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/GalAster/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](http://118.190.37.169:8002) example basing Yew newest hooks and functional API, the code style is extremely like React Function Component.
- [yew-d3-example](https://github.com/i-schuetz/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://gaiding.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/youncccat/zzhack) - A personal blog, based on Rust & Yew, [Live Demo](https://www.zzhack.fun/technology).
- [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/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/GalAster/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](http://118.190.37.169:8002) example basing Yew newest hooks and functional API, the code style is extremely like React Function Component.
- [yew-d3-example](https://github.com/i-schuetz/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://gaiding.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/youncccat/zzhack) - A personal blog, based on Rust & Yew, [Live Demo](https://www.zzhack.fun/technology).
## 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 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.
### 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)
- [How to use Rust Yew](https://www.steadylearner.com/blog/read/How-to-use-Rust-Yew)
- [How to use a modal in Rust](https://www.steadylearner.com/blog/read/How-to-use-a-modal-in-Rust)
- [How to use routers in Rust Frontend](https://www.steadylearner.com/blog/read/How-to-use-routers-in-Rust-Frontend)
- [How to modulize your Rust Frontend](https://www.steadylearner.com/blog/read/How-to-modulize-your-Rust-Frontend)
- [How to use NPM packages with Rust Frontend](https://www.steadylearner.com/blog/read/How-to-use-NPM-packages-with-Rust-Frontend)
- [How to use markdown with Rust Frontend](https://www.steadylearner.com/blog/read/How-to-use-markdown-with-Rust-Frontend)
- [Fullstack Rust with Yew](https://www.steadylearner.com/blog/read/Fullstack-Rust-with-Yew)
- [How to write Full Stack Rust code](https://www.steadylearner.com/blog/read/How-to-write-Full-Stack-Rust-code)
- [How to render a YouTube vlog with Rust Yew fetch API](https://www.steadylearner.com/blog/read/How-to-render-a-YouTube-vlog-with-Rust-Yew-fetch-API)
- [How to render blog posts with Rust Yew mounted API](https://www.steadylearner.com/blog/read/How-to-render-blog-posts-with-Rust-Yew-mounted-API)
- [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)
- [How to use Rust Yew](https://www.steadylearner.com/blog/read/How-to-use-Rust-Yew)
- [How to use a modal in Rust](https://www.steadylearner.com/blog/read/How-to-use-a-modal-in-Rust)
- [How to use routers in Rust Frontend](https://www.steadylearner.com/blog/read/How-to-use-routers-in-Rust-Frontend)
- [How to modulize your Rust Frontend](https://www.steadylearner.com/blog/read/How-to-modulize-your-Rust-Frontend)
- [How to use NPM packages with Rust Frontend](https://www.steadylearner.com/blog/read/How-to-use-NPM-packages-with-Rust-Frontend)
- [How to use markdown with Rust Frontend](https://www.steadylearner.com/blog/read/How-to-use-markdown-with-Rust-Frontend)
- [Fullstack Rust with Yew](https://www.steadylearner.com/blog/read/Fullstack-Rust-with-Yew)
- [How to write Full Stack Rust code](https://www.steadylearner.com/blog/read/How-to-write-Full-Stack-Rust-code)
- [How to render a YouTube vlog with Rust Yew fetch API](https://www.steadylearner.com/blog/read/How-to-render-a-YouTube-vlog-with-Rust-Yew-fetch-API)
- [How to render blog posts with Rust Yew mounted API](https://www.steadylearner.com/blog/read/How-to-render-blog-posts-with-Rust-Yew-mounted-API)
- [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.

16
website/community/external-libs.mdx
View File

@ -1,6 +1,6 @@
---
title: "Libraries"
description: "Libraries that can help with Yew development"
title: 'Libraries'
description: 'Libraries that can help with Yew development'
---
## Malvolio
@ -18,12 +18,12 @@ 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)
- [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)
- [Timers](https://crates.io/crates/gloo-timers)
- [Web Storage](https://crates.io/crates/gloo-storage)
## Reqwasm

15
website/docs/advanced-topics/children.mdx
View File

@ -1,10 +1,10 @@
---
title: "Children"
title: 'Children'
---
## General usage
_Most of the time,_ when allowing a component to have children, you don't care
_Most of the time,_ when allowing a component to have children, you don't care
what type of children the component has. In such cases, the below example will
suffice.
@ -40,6 +40,7 @@ impl Component for List {
## Advanced usage
### Typed children
In cases where you want one type of component to be passed as children to your component,
you can use `yew::html::ChildrenWithProps<T>`.
@ -90,6 +91,7 @@ impl Component for List {
```
### Enum typed children
Of course, sometimes you might need to restrict the children to a few different
components. In these cases, you have to get a little more hands-on with Yew.
@ -99,7 +101,7 @@ for better ergonomics. If you don't want to use it, you can manually implement
```rust
use yew::{
html, html::ChildrenRenderer, virtual_dom::VChild, Component,
html, html::ChildrenRenderer, virtual_dom::VChild, Component,
Context, Html, Properties,
};
@ -181,11 +183,12 @@ impl Component for List {
```
### Optional typed child
You can also have a single optional child component of a specific type too:
You can also have a single optional child component of a specific type too:
```rust
use yew::{
html, html_nested, virtual_dom::VChild, Component,
html, html_nested, virtual_dom::VChild, Component,
Context, Html, Properties
};
@ -232,7 +235,7 @@ impl Component for Page {
}
}
// The page component can be called either with the sidebar or without:
// The page component can be called either with the sidebar or without:
pub fn render_page(with_sidebar: bool) -> Html {
if with_sidebar {

23
website/docs/advanced-topics/how-it-works.mdx
View File

@ -1,6 +1,6 @@
---
title: "How it works"
description: "Low level details about the framework"
title: 'How it works'
description: 'Low level details about the framework'
---
# Low-level library internals
@ -8,7 +8,7 @@ description: "Low level details about the framework"
## Under the hood of the `html!` macro
The `html!` macro turns code written in a custom HTML-like syntax into valid Rust code. Using this
macro is not necessary for developing Yew applications, but it is recommended. The code generated
macro is not necessary for developing Yew applications, but it is recommended. The code generated
by this macro makes use of the public Yew library API which can be used directly if you wish. Note
that some methods used are undocumented intentionally to avoid accidental misuse. With each
update of `yew-macro`, the generated code will be more efficient and handle any breaking changes
@ -31,10 +31,10 @@ sometimes clash with other code in an application. In order to prevent issues, `
"hygiene" is adhered to. Some examples include:
1. Instead of using `yew::<module>` the macro generates `::yew::<module>` to make sure that the
Yew package is referenced correctly. This is also why `::alloc::vec::Vec::new()` is called instead
of just `Vec::new()`.
Yew package is referenced correctly. This is also why `::alloc::vec::Vec::new()` is called instead
of just `Vec::new()`.
2. Due to potential trait method name collisions, `<Type as Trait>` is used to make sure that we're
using members from the correct trait.
using members from the correct trait.
## What is a virtual DOM?
@ -56,7 +56,7 @@ This "diff" algorithm can be optimized over time to improve the performance of c
Since Yew applications are run with WebAssembly, we believe that Yew has a competitive edge to adopt
more sophisticated algorithms in the future.
The Yew virtual DOM is not exactly one-to-one with the browser DOM. It also includes "lists" and
The Yew virtual DOM is not exactly one-to-one with the browser DOM. It also includes "lists" and
"components" for organizing DOM elements. A list can simply be an ordered list of elements but can
also be much more powerful. By annotating each list element with a "key", application developers
can help Yew make additional optimizations to ensure that when a list changes, the least amount
@ -65,9 +65,10 @@ indicate whether a re-render is required to help with performance.
## Yew scheduler and component-scoped event loop
*Contribute to the docs – explain how `yew::scheduler` and `yew::html::scope` work in depth*
_Contribute to the docs – explain how `yew::scheduler` and `yew::html::scope` work in depth_
## 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)

122
website/docs/advanced-topics/optimizations.mdx
View File

@ -1,97 +1,97 @@
---
title: "Optimizations & Best Practices"
title: 'Optimizations & Best Practices'
sidebar_label: Optimizations
description: "Make your app faster"
description: 'Make your app faster'
---
## Using smart pointers effectively
**Note: if you're unsure about some of the terms used in this section, the Rust Book has a useful
[chapter about smart pointers](https://doc.rust-lang.org/book/ch15-00-smart-pointers.html).**
[chapter about smart pointers](https://doc.rust-lang.org/book/ch15-00-smart-pointers.html).**
In an effort to avoid cloning large amounts of data to create props when re-rendering, we can use
smart pointers to only clone a reference to the data instead of the data itself. If you pass
references to the relevant data in your props and child components instead of the actual data you
can avoid cloning any data until you need to modify it in the child component, where you can
use `Rc::make_mut` to clone and obtain a mutable reference to the data you want to alter.
In an effort to avoid cloning large amounts of data to create props when re-rendering, we can use
smart pointers to only clone a reference to the data instead of the data itself. If you pass
references to the relevant data in your props and child components instead of the actual data you
can avoid cloning any data until you need to modify it in the child component, where you can
use `Rc::make_mut` to clone and obtain a mutable reference to the data you want to alter.
This brings further benefits in `Component::changed` when working out whether prop changes require
the component to re-render. This is because instead of comparing the value of the data the
underlying pointer addresses (i.e. the position in a machine's memory where the data is stored) can
instead be compared; if two pointers point to the same data then the value of the data they point to
must be the same. Note that the inverse might not be true! Even if two pointer addresses differ the
This brings further benefits in `Component::changed` when working out whether prop changes require
the component to re-render. This is because instead of comparing the value of the data the
underlying pointer addresses (i.e. the position in a machine's memory where the data is stored) can
instead be compared; if two pointers point to the same data then the value of the data they point to
must be the same. Note that the inverse might not be true! Even if two pointer addresses differ the
underlying data might still be the same - in this case you should compare the underlying data.
To do this comparison you'll need to use `Rc::ptr_eq` instead of just using `PartialEq` (which is
automatically used when comparing data using the equality operator `==`). The Rust documentation
automatically used when comparing data using the equality operator `==`). The Rust documentation
has [more details about `Rc::ptr_eq`](https://doc.rust-lang.org/stable/std/rc/struct.Rc.html#method.ptr_eq).
This optimization is most useful for data types that don't implement `Copy`. If you can copy your
data cheaply, then it isn't worth putting it behind a smart pointer. For structures that
This optimization is most useful for data types that don't implement `Copy`. If you can copy your
data cheaply, then it isn't worth putting it behind a smart pointer. For structures that
can be data-heavy like `Vec`s, `HashMap`s, and `String`s using smart pointers is likely to bring
performance improvements.
This optimization works best if the values are never updated by the children, and even better, if
they are rarely updated by parents. This makes `Rc<_>s` a good choice for wrapping property values
This optimization works best if the values are never updated by the children, and even better, if
they are rarely updated by parents. This makes `Rc<_>s` a good choice for wrapping property values
in for pure components.
However, it must be noted that unless you need to clone the data yourself in the child component,
However, it must be noted that unless you need to clone the data yourself in the child component,
this optimization is not only useless, it also adds unnecessary cost of reference counting. Props
in Yew are already reference counted and no data clones occur internally.
## View functions
For code readability reasons, it often makes sense to migrate sections of `html!` to their own
functions. Not only does this make your code more readable because it reduces the amount of
For code readability reasons, it often makes sense to migrate sections of `html!` to their own
functions. Not only does this make your code more readable because it reduces the amount of
indentation present, it also encourages good design patterns – particularly around building
composable applications because these functions can be called in multiple places which reduces the
amount of code that has to be written.
amount of code that has to be written.
## Pure Components
Pure components are components that don't mutate their state, only displaying content and
propagating messages up to normal, mutable components. They differ from view functions in that they
can be used from within the `html!` macro using the component syntax \(`<SomePureComponent />`\)
instead of expression syntax \(`{some_view_function()}`\), and that depending on their
Pure components are components that don't mutate their state, only displaying content and
propagating messages up to normal, mutable components. They differ from view functions in that they
can be used from within the `html!` macro using the component syntax \(`<SomePureComponent />`\)
instead of expression syntax \(`{some_view_function()}`\), and that depending on their
implementation, they can be memoized (this means that once a function is called its value is "saved"
so that if it's called with the same arguments more than once it doesn't have to recompute its value
and can just return the saved value from the first function call) - preventing re-renders for
and can just return the saved value from the first function call) - preventing re-renders for
identical props. Yew compares the props internally and so the UI is only re-rendered if the props change.
## Reducing compile time using workspaces
Arguably, the largest drawback to using Yew is the long time it takes to compile Yew apps. The time
taken to compile a project seems to be related to the quantity of code passed to the `html!` macro.
This tends to not be much of an issue for smaller projects, but for larger applications it makes
sense to split code across multiple crates to minimize the amount of work the compiler has to do for
Arguably, the largest drawback to using Yew is the long time it takes to compile Yew apps. The time
taken to compile a project seems to be related to the quantity of code passed to the `html!` macro.
This tends to not be much of an issue for smaller projects, but for larger applications it makes
sense to split code across multiple crates to minimize the amount of work the compiler has to do for
each change made to the application.
One possible approach is to make your main crate handle routing/page selection, and then make a
different crate for each page, where each page could be a different component, or just a big
One possible approach is to make your main crate handle routing/page selection, and then make a
different crate for each page, where each page could be a different component, or just a big
function that produces `Html`. Code which is shared between the crates containing different parts of
the application could be stored in a separate crate which is depended on throughout the project.
In the best case scenario, you go from rebuilding all of your code on each compile to rebuilding
only the main crate, and one of your page crates. In the worst case, where you edit something in the
"common" crate, you will be right back to where you started: compiling all code that depends on that
In the best case scenario, you go from rebuilding all of your code on each compile to rebuilding
only the main crate, and one of your page crates. In the worst case, where you edit something in the
"common" crate, you will be right back to where you started: compiling all code that depends on that
commonly shared crate, which is probably everything else.
If your main crate is too heavyweight, or you want to rapidly iterate on a deeply nested page \(eg.
a page that renders on top of another page\), you can use an example crate to create a simplified
If your main crate is too heavyweight, or you want to rapidly iterate on a deeply nested page \(eg.
a page that renders on top of another page\), you can use an example crate to create a simplified
implementation of the main page and render the component you are working on on top of that.
## Reducing binary sizes
* optimize Rust code
* `wee_alloc` \( using tiny allocator \)
* `cargo.toml` \( defining release profile \)
* optimize wasm code using `wasm-opt`
- optimize Rust code
- `wee_alloc` \( using tiny allocator \)
- `cargo.toml` \( defining release profile \)
- optimize wasm code using `wasm-opt`
**Note: more information about reducing binary sizes can be found in the
**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).**
### wee\_alloc
### wee_alloc
[wee\_alloc](https://github.com/rustwasm/wee_alloc) is a tiny allocator that is much smaller than the allocator that is normally used in Rust binaries. Replacing the default allocator with this one will result in smaller Wasm file sizes, at the expense of speed and memory overhead.
[wee_alloc](https://github.com/rustwasm/wee_alloc) is a tiny allocator that is much smaller than the allocator that is normally used in Rust binaries. Replacing the default allocator with this one will result in smaller Wasm file sizes, at the expense of speed and memory overhead.
The slower speed and memory overhead are minor in comparison to the size gains made by not including the default allocator. This smaller file size means that your page will load faster, and so it is generally recommended that you use this allocator over the default, unless your app is doing some allocation-heavy work.
@ -103,20 +103,19 @@ static ALLOC: wee_alloc::WeeAlloc = wee_alloc::WeeAlloc::INIT;
### Cargo.toml
It is possible to configure release builds to be smaller using the available settings in the
It is possible to configure release builds to be smaller using the available settings in the
`[profile.release]` section of your `Cargo.toml`.
```toml, title=Cargo.toml
[profile.release]
# less code to include into binary
panic = 'abort'
panic = 'abort'
# optimization over all codebase ( better optimization, slower build )
codegen-units = 1
# optimization for size ( more aggressive )
opt-level = 'z'
# optimization for size
# opt-level = 's'
opt-level = 'z'
# optimization for size
# opt-level = 's'
# link time optimization using using whole-program analysis
lto = true
```
@ -128,8 +127,8 @@ Further more it is possible to optimize 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
@ -139,14 +138,15 @@ wasm-opt wasm_bg.wasm -Os -o wasm_bg_opt.wasm
Note: `wasm-pack` combines optimization for Rust and Wasm code. `wasm-bindgen` is used in this example without any Rust size optimization.
| used tool | size |
| :--- | :--- |
| wasm-bindgen | 158KB |
| used tool | size |
| :-------------------------- | :---- |
| wasm-bindgen | 158KB |
| wasm-bindgen + wasm-opt -Os | 116KB |
| wasm-pack | 99 KB |
| wasm-pack | 99 KB |
## 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)

7
website/docs/advanced-topics/portals.mdx
View File

@ -1,6 +1,6 @@
---
title: "Portals"
description: "Rendering into out-of-tree DOM nodes"
title: 'Portals'
description: 'Rendering into out-of-tree DOM nodes'
---
## What is a portal?
@ -60,4 +60,5 @@ in mind that **open** shadow roots work fine. If this impacts you, feel free to
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)

14
website/docs/advanced-topics/server-side-rendering.md
View File

@ -1,6 +1,6 @@
---
title: "Server-side Rendering"
description: "Render Yew on the server-side."
title: 'Server-side Rendering'
description: 'Render Yew on the server-side.'
---
# Server-side Rendering
@ -14,10 +14,10 @@ bundle. This is known as client-side rendering.
This approach works fine for most websites, with some caveats:
1. Users will not be able to see anything until the entire WebAssembly
bundle is downloaded and initial render has completed.
This can result in poor user experience if the user is using a slow network.
bundle is downloaded and initial render has completed.
This can result in poor user experience if the user is using a slow network.
2. Some search engines do not support dynamically rendered web content and
those who do usually rank dynamic websites lower in the search results.
those who do usually rank dynamic websites lower in the search results.
To solve these problems, we can render our website on the server side.
@ -181,8 +181,8 @@ fn main() {
}
```
Example: [simple\_ssr](https://github.com/yewstack/yew/tree/master/examples/simple_ssr)
Example: [ssr\_router](https://github.com/yewstack/yew/tree/master/examples/ssr_router)
Example: [simple_ssr](https://github.com/yewstack/yew/tree/master/examples/simple_ssr)
Example: [ssr_router](https://github.com/yewstack/yew/tree/master/examples/ssr_router)
:::caution

9
website/docs/advanced-topics/struct-components/callbacks.mdx
View File

@ -1,5 +1,5 @@
---
title: "Callbacks"
title: 'Callbacks'
---
## Callbacks
@ -71,7 +71,7 @@ impl Component for Comp {
None
}
});
html! {
<input type="text" {onkeypress} />
}
@ -81,5 +81,6 @@ 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)

2
website/docs/advanced-topics/struct-components/hoc.mdx
View File

@ -1,5 +1,5 @@
---
title: "Higher Order Components"
title: 'Higher Order Components'
---
There are several cases where Struct components dont directly support a feature (ex. Suspense) or require a lot of boiler plate to use the features (ex. Context).

4
website/docs/advanced-topics/struct-components/introduction.mdx
View File

@ -1,6 +1,6 @@
---
title: "Introduction"
description: "Components in Yew"
title: 'Introduction'
description: 'Components in Yew'
---
## What are Components?

11
website/docs/advanced-topics/struct-components/lifecycle.mdx
View File

@ -1,6 +1,6 @@
---
title: "Lifecycle"
description: "Components and their lifecycle hooks"
title: 'Lifecycle'
description: 'Components and their lifecycle hooks'
---
The `Component` trait has a number of methods which need to be implemented; Yew will call these at different
@ -248,20 +248,20 @@ impl Component for Comp {
```
Let's run through what happens here:
1. Component is created using the `create` function.
2. The `view` method is called so Yew knows what to render to the browser DOM.
3. The `rendered` method is called, which schedules an update message using the `Context` link.
4. Yew finishes the post-render phase.
5. Yew checks for scheduled events and sees the update message queue is not empty so works through
the messages.
the messages.
6. The `update` method is called which returns `true` to indicate something has changed and the
component needs to re-render.
component needs to re-render.
7. Jump back to 2.
You can still schedule updates in the `rendered` method and it's often useful to do so, but
consider how your component will terminate this loop when you do.
## Associated Types
The `Component` trait has two associated types: `Message` and `Properties`.
@ -299,7 +299,6 @@ enum Msg {
[Learn more about properties](./properties)
:::
## Lifecycle Context
All component lifecycle methods take a context object. This object provides a reference to component's scope, which

4
website/docs/advanced-topics/struct-components/properties.mdx
View File

@ -1,6 +1,6 @@
---
title: "Properties"
description: "Parent to child communication"
title: 'Properties'
description: 'Parent to child communication'
---
Properties enable child and parent components to communicate with each other.

15
website/docs/advanced-topics/struct-components/refs.mdx
View File

@ -1,14 +1,14 @@
---
title: "Refs"
description: "Out-of-band DOM access"
title: 'Refs'
description: 'Out-of-band DOM access'
---
The `ref` keyword can be used inside of any HTML element or component to get the DOM `Element` that
The `ref` keyword can be used inside of any HTML element or component to get the DOM `Element` that
the item is attached to. This can be used to make changes to the DOM outside of the `view` lifecycle
method.
method.
This is useful for getting ahold of canvas elements, or scrolling to different sections of a page.
For example, using a `NodeRef` in a component's `rendered` method allows you to make draw calls to
This is useful for getting ahold of canvas elements, or scrolling to different sections of a page.
For example, using a `NodeRef` in a component's `rendered` method allows you to make draw calls to
a canvas element after it has been rendered from `view`.
The syntax is:
@ -51,4 +51,5 @@ 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)

3
website/docs/advanced-topics/struct-components/scope.mdx
View File

@ -1,5 +1,5 @@
---
title: "Scope"
title: 'Scope'
description: "Component's Scope"
---
@ -26,7 +26,6 @@ If the given vector is empty, this function doesn't do anything.
Create a callback that will send a message to the component when it is executed.
Under the hood, it will call `send_message` with the message returned by the provided closure.
```rust
use yew::{html, Component, Context, Html};

25
website/docs/concepts/agents.mdx
View File

@ -1,10 +1,10 @@
---
title: "Agents"
title: 'Agents'
description: "Yew's Actor System"
---
import useBaseUrl from "@docusaurus/useBaseUrl";
import ThemedImage from '@theme/ThemedImage';
import useBaseUrl from '@docusaurus/useBaseUrl'
import ThemedImage from '@theme/ThemedImage'
Agents are a way to offload tasks to web workers or achieve inter-tab communication(WIP).
@ -18,7 +18,6 @@ The diagram is produced with nomnoml (nomnoml.com),
The code can be found in the <desc> tag of the svgs.
-->
<ThemedImage
alt="agent lifecycle diagram"
sources={{
@ -31,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 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 the connected bridge is dropped, the agent will disappear.
* Global \(WIP\)
- Global \(WIP\)
## Communication between Agents and Components
@ -61,5 +60,5 @@ with other threads, so the cost is substantially higher than just calling a func
## Further reading
* The [multi\_thread](https://github.com/yewstack/yew/tree/master/examples/multi_thread) example shows how
components can send message to and receive message from agents.
- The [multi_thread](https://github.com/yewstack/yew/tree/master/examples/multi_thread) example shows how
components can send message to and receive message from agents.

10
website/docs/concepts/basic-web-technologies/css.mdx
View File

@ -1,11 +1,11 @@
---
title: "CSS with classes!"
description: "A handy macro to handle classes"
comment: "Keep this file as short and simple as possible. Its purpose is to ease in the reader into components in Yew instead of providing proper API docs"
title: 'CSS with classes!'
description: 'A handy macro to handle classes'
comment: 'Keep this file as short and simple as possible. Its purpose is to ease in the reader into components in Yew instead of providing proper API docs'
---
import Tabs from "@theme/Tabs";
import TabItem from "@theme/TabItem";
import Tabs from '@theme/Tabs'
import TabItem from '@theme/TabItem'
> Yew mostly operates on the idea of keeping everything that a reusable piece of
> UI may need, in one place - rust files. But also seeks to stay close to the

10
website/docs/concepts/basic-web-technologies/html.mdx
View File

@ -1,11 +1,11 @@
---
title: "HTML with html!"
description: "Its HTML but not quite!"
comment: "Keep this file as short and simple as possible. Its purpose is to ease in the reader into components in Yew instead of providing proper API docs"
title: 'HTML with html!'
description: 'Its HTML but not quite!'
comment: 'Keep this file as short and simple as possible. Its purpose is to ease in the reader into components in Yew instead of providing proper API docs'
---
import Tabs from "@theme/Tabs";
import TabItem from "@theme/TabItem";
import Tabs from '@theme/Tabs'
import TabItem from '@theme/TabItem'
> Yew mostly operates on the idea of keeping everything that a reusable piece of
> UI may need, in one place - rust files. But also seeks to stay close to the

12
website/docs/concepts/basic-web-technologies/js.mdx
View File

@ -1,11 +1,11 @@
---
title: "JS with RS"
description: "Javascript with Rust"
comment: "Keep this file as short and simple as possible. Its purpose is to ease in the reader into components in Yew instead of providing proper API docs"
title: 'JS with RS'
description: 'Javascript with Rust'
comment: 'Keep this file as short and simple as possible. Its purpose is to ease in the reader into components in Yew instead of providing proper API docs'
---
import Tabs from "@theme/Tabs";
import TabItem from "@theme/TabItem";
import Tabs from '@theme/Tabs'
import TabItem from '@theme/TabItem'
> Yew mostly operates on the idea of keeping everything that a reusable piece of
> UI may need, in one place - rust files. But also seeks to stay close to the
@ -31,7 +31,7 @@ Example:
<TabItem value="JS" label="JS">
```js
let document = window.document;
let document = window.document
```
</TabItem>

17
website/docs/concepts/contexts.mdx
View File

@ -1,13 +1,13 @@
---
title: "Contexts"
title: 'Contexts'
sidebar_label: Contexts
description: "Using contexts to pass deeply nested data"
description: 'Using contexts to pass deeply nested data'
---
Usually, data is passed from a parent component to a child component via props.
But passing props can become verbose and annoying if you have to pass them through many components in the middle,
or if many components in your app need the same information. Context solve this problem by allowing a
parent component to make data available to *any* component in the tree below it, no matter how deep,
parent component to make data available to _any_ component in the tree below it, no matter how deep,
without having to pass it down with props.
## The problem with props: "Prop Drilling"
@ -18,7 +18,6 @@ A common solution to data sharing is lifting the data to a common ancestor and m
However, this can lead to cases where the prop has to go through multiple components in order to reach the component needs it.
This situation is called "Prop Drilling".
Consider the following example which passes down the theme using props:
```rust
@ -141,16 +140,16 @@ See [docs for use_context](function-components/hooks/use-context) to learn more.
We have 2 options to consume contexts in struct components:
- [Higher Order Components](../advanced-topics/struct-components/hoc): A higher order function component will consume the context and pass the data to the struct component which requires it.
- Consume context directly in 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): A higher order function component will consume the context and pass the data to the struct component which requires it.
- Consume context directly in 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, it's likely that context will help you.
Here's 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 current 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 current logged-in user. You can use a context to provide the current user object to the components.
### Considerations to make before using contexts
@ -172,4 +171,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)

2
website/docs/concepts/function-components/callbacks.mdx
View File

@ -1,5 +1,5 @@
---
title: "Callbacks"
title: 'Callbacks'
---
Callbacks used to asynchronously communicate in Yew upwards the components tree and other things like agents or DOM.

4
website/docs/concepts/function-components/children.mdx
View File

@ -1,5 +1,5 @@
---
title: "Children"
title: 'Children'
---
`Children` is a special prop type that allows you to take what was provided as `Html` children.
@ -39,4 +39,4 @@ fn HelloWorld(props: &Props) -> Html {
## Further reading
- [Advanced ways to handle children](../../advanced-topics/children)
- [Advanced ways to handle children](../../advanced-topics/children)

2
website/docs/concepts/function-components/communication.mdx
View File

@ -1,5 +1,5 @@
---
title: "Communication between components"
title: 'Communication between components'
---
## Parent to child messaging

8
website/docs/concepts/function-components/generics.mdx
View File

@ -1,10 +1,10 @@
---
title: "Generic Components"
description: "The #[function_component] attribute"
title: 'Generic Components'
description: 'The #[function_component] attribute'
---
import Tabs from "@theme/Tabs";
import TabItem from "@theme/TabItem";
import Tabs from '@theme/Tabs'
import TabItem from '@theme/TabItem'
The `#[function_component]` attribute also works with generic functions for creating generic components.

2
website/docs/concepts/function-components/hooks/custom-hooks.mdx
View File

@ -1,5 +1,5 @@
---
title: "Custom Hooks"
title: 'Custom Hooks'
---
## Defining custom Hooks

36
website/docs/concepts/function-components/hooks/introduction.mdx
View File

@ -1,5 +1,5 @@
---
title: "Hooks"
title: 'Hooks'
slug: /concepts/function-components/hooks
---
@ -13,10 +13,10 @@ Yew comes with a few pre-defined Hooks. You can also create your own or discover
1. A hook function name always has to start with `use_`
2. Hooks can only be used at the following locations:
- Top level of a function / hook.
- If condition inside a function / hook, given it's not already branched.
- Match condition inside a function / hook, given it's not already branched.
- Blocks inside a function / hook, given it's not already branched.
- Top level of a function / hook.
- If condition inside a function / hook, given it's not already branched.
- Match condition inside a function / hook, given it's not already branched.
- Blocks inside a function / hook, given it's not already branched.
3. Hooks every render must be called in the same order
All these rules are enforced by either compile time or run-time errors.
@ -25,17 +25,17 @@ All these rules are enforced by either compile time or run-time errors.
Yew comes with the following predefined Hooks:
- [`use_state`](./use-state.mdx)
- [`use_state_eq`](./use-state.mdx#use_state_eq)
- [`use_memo`](./use-memo.mdx)
- [`use_callback`](./use-callback.mdx)
- [`use_mut_ref`](./use-mut-ref.mdx)
- [`use_node_ref`](./use-node-ref.mdx)
- [`use_reducer`](./use-reducer.mdx)
- [`use_reducer_eq`](./use-reducer.mdx#use_reducer_eq)
- [`use_effect`](./use-effect.mdx)
- [`use_effect_with_deps`](./use-effect.mdx#use_effect_with_deps)
- [`use_context`](./use-context.mdx)
- [`use_state`](./use-state.mdx)
- [`use_state_eq`](./use-state.mdx#use_state_eq)
- [`use_memo`](./use-memo.mdx)
- [`use_callback`](./use-callback.mdx)
- [`use_mut_ref`](./use-mut-ref.mdx)
- [`use_node_ref`](./use-node-ref.mdx)
- [`use_reducer`](./use-reducer.mdx)
- [`use_reducer_eq`](./use-reducer.mdx#use_reducer_eq)
- [`use_effect`](./use-effect.mdx)
- [`use_effect_with_deps`](./use-effect.mdx#use_effect_with_deps)
- [`use_context`](./use-context.mdx)
### Custom Hooks
@ -44,5 +44,5 @@ See the [Defining custom hooks](./custom-hooks.mdx#defining-custom-hooks) sectio
## Further reading
- The React documentation has a section on [React hooks](https://reactjs.org/docs/hooks-intro.html).
These are not exactly 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 exactly the same as Yew's hooks, but the underlying concept is similar.

2
website/docs/concepts/function-components/hooks/use-callback.mdx
View File

@ -1,5 +1,5 @@
---
title: "use_callback"
title: 'use_callback'
---
`use_callback` is used for obtaining an immutable reference to a memoized `Callback`.

2
website/docs/concepts/function-components/hooks/use-context.mdx
View File

@ -1,5 +1,5 @@
---
title: "use_context"
title: 'use_context'
---
[Contexts](../contexts.mdx) will be introduced later.

2
website/docs/concepts/function-components/hooks/use-effect.mdx
View File

@ -1,5 +1,5 @@
---
title: "use_effect"
title: 'use_effect'
---
`use_effect` is used for hooking into the component's lifecycle and creating side-effects.

2
website/docs/concepts/function-components/hooks/use-memo.mdx
View File

@ -1,5 +1,5 @@
---
title: "use_memo"
title: 'use_memo'
---
`use_memo` is used for obtaining an immutable reference to a memoized value.

2
website/docs/concepts/function-components/hooks/use-mut-ref.mdx
View File

@ -1,5 +1,5 @@
---
title: "use_mut_ref"
title: 'use_mut_ref'
---
`use_mut_ref` is used for obtaining a mutable reference to a value.

2
website/docs/concepts/function-components/hooks/use-node-ref.mdx
View File

@ -1,5 +1,5 @@
---
title: "use_node_ref"
title: 'use_node_ref'
---
`use_node_ref` is used for maintaining an easy reference to the DOM element represented as a `NodeRef`. It also persists across renders.

2
website/docs/concepts/function-components/hooks/use-reducer.mdx
View File

@ -1,5 +1,5 @@
---
title: "use_reducer"
title: 'use_reducer'
---
`use_reducer` is an alternative to [`use_state`](./use-state). It is used to handle more complex component's state.

2
website/docs/concepts/function-components/hooks/use-state.mdx
View File

@ -1,5 +1,5 @@
---
title: "use_state"
title: 'use_state'
---
`use_state` is used to manage state in a function component.

8
website/docs/concepts/function-components/introduction.mdx
View File

@ -1,5 +1,5 @@
---
title: "Function Components"
title: 'Function Components'
slug: /concepts/function-components
---
@ -16,9 +16,9 @@ Components are the building blocks of Yew.
They:
- Take arguments in form of [Props](./properties)
- Can have their own state
- Get computed into HTML visible to the user (DOM)
- Take arguments in form of [Props](./properties)
- Can have their own state
- Get computed into HTML visible to the user (DOM)
## Two flavours of Yew Components

4
website/docs/concepts/function-components/node-refs.mdx
View File

@ -1,6 +1,6 @@
---
title: "Node Refs"
description: "Out-of-band DOM access"
title: 'Node Refs'
description: 'Out-of-band DOM access'
---
The `ref` keyword can be used inside of any HTML element or component to get the DOM `Element` that

8
website/docs/concepts/function-components/properties.mdx
View File

@ -1,10 +1,10 @@
---
title: "Properties"
description: "Parent to child communication"
title: 'Properties'
description: 'Parent to child communication'
---
import Tabs from "@theme/Tabs";
import TabItem from "@theme/TabItem";
import Tabs from '@theme/Tabs'
import TabItem from '@theme/TabItem'
:::note

2
website/docs/concepts/function-components/pure-components.mdx
View File

@ -1,5 +1,5 @@
---
title: "Pure Components"
title: 'Pure Components'
---
## Pure function definition

2
website/docs/concepts/function-components/state.mdx
View File

@ -1,5 +1,5 @@
---
title: "State"
title: 'State'
---
## General view of how to store state

8
website/docs/concepts/html/classes.mdx
View File

@ -1,10 +1,10 @@
---
title: "Classes"
description: "A handy macro to handle classes"
title: 'Classes'
description: 'A handy macro to handle classes'
---
import Tabs from "@theme/Tabs";
import TabItem from "@theme/TabItem";
import Tabs from '@theme/Tabs'
import TabItem from '@theme/TabItem'
## Classes

8
website/docs/concepts/html/components.mdx
View File

@ -1,6 +1,6 @@
---
title: "Components"
description: "Create complex layouts with component hierarchies"
title: 'Components'
description: 'Create complex layouts with component hierarchies'
---
## Basic
@ -168,5 +168,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)

8
website/docs/concepts/html/conditional-rendering.mdx
View File

@ -1,10 +1,10 @@
---
title: "Conditional rendering"
description: "Rendering nodes conditionally in html!"
title: 'Conditional rendering'
description: 'Rendering nodes conditionally in html!'
---
import Tabs from "@theme/Tabs";
import TabItem from "@theme/TabItem";
import Tabs from '@theme/Tabs'
import TabItem from '@theme/TabItem'
## If blocks

10
website/docs/concepts/html/elements.mdx
View File

@ -1,10 +1,10 @@
---
title: "Elements"
description: "Both HTML and SVG elements are supported"
title: 'Elements'
description: 'Both HTML and SVG elements are supported'
---
import Tabs from "@theme/Tabs";
import TabItem from "@theme/TabItem";
import Tabs from '@theme/Tabs'
import TabItem from '@theme/TabItem'
## DOM nodes
@ -120,4 +120,4 @@ If the attribute is set to `None`, the attribute won't be set in the DOM.
## 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)

4
website/docs/concepts/html/events.mdx
View File

@ -1,5 +1,5 @@
---
title: "Events"
title: 'Events'
---
## Introduction
@ -149,7 +149,7 @@ If you are not interested in event bubbling, you can turn it off by calling
yew::set_event_bubbling(false);
```
*before* starting your app. This speeds up event handling, but some components may break from not receiving events they expect.
_before_ starting your app. This speeds up event handling, but some components may break from not receiving events they expect.
Use this with care!
## Typed event target

6
website/docs/concepts/html/fragments.mdx
View File

@ -1,9 +1,9 @@
---
title: "Fragments"
title: 'Fragments'
---
import Tabs from "@theme/Tabs";
import TabItem from "@theme/TabItem";
import Tabs from '@theme/Tabs'
import TabItem from '@theme/TabItem'
The `html!` macro always requires a single root node. In order to get around this restriction, you
can use an "empty tag" (these are also called "fragments").

8
website/docs/concepts/html/introduction.mdx
View File

@ -1,12 +1,12 @@
---
title: "HTML"
title: 'HTML'
sidebar_label: Introduction
description: "The procedural macro for generating HTML and SVG"
description: 'The procedural macro for generating HTML and SVG'
slug: /concepts/html
---
import Tabs from "@theme/Tabs";
import TabItem from "@theme/TabItem";
import Tabs from '@theme/Tabs'
import TabItem from '@theme/TabItem'
The `html!` macro allows you to write HTML and SVG code declaratively. It is similar to JSX
(an extension to JavaScript which allows you to write HTML-like code inside of JavaScript).

12
website/docs/concepts/html/lists.mdx
View File

@ -1,9 +1,9 @@
---
title: "Lists"
title: 'Lists'
---
import Tabs from "@theme/Tabs";
import TabItem from "@theme/TabItem";
import Tabs from '@theme/Tabs'
import TabItem from '@theme/TabItem'
## Iterators
@ -119,6 +119,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)

2
website/docs/concepts/html/literals-and-expressions.mdx
View File

@ -1,5 +1,5 @@
---
title: "Literals and Expressions"
title: 'Literals and Expressions'
---
## Literals

20
website/docs/concepts/router.mdx
View File

@ -1,5 +1,5 @@
---
title: "Router"
title: 'Router'
description: "Yew's official router"
---
@ -397,15 +397,15 @@ digraph {
}
-->
import useBaseUrl from "@docusaurus/useBaseUrl";
import ThemedImage from "@theme/ThemedImage";
import useBaseUrl from '@docusaurus/useBaseUrl'
import ThemedImage from '@theme/ThemedImage'
<ThemedImage
alt="nested router structure"
sources={{
light: useBaseUrl("/img/nested-router-light.svg"),
dark: useBaseUrl("/img/nested-router-dark.svg"),
}}
alt="nested router structure"
sources={{
light: useBaseUrl('/img/nested-router-light.svg'),
dark: useBaseUrl('/img/nested-router-dark.svg'),
}}
/>
The nested `SettingsRouter` handles all urls that start with `/settings`. Additionally, it redirects urls that are not
@ -498,8 +498,8 @@ fallback to `/` if no `<base />` presents 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/)

6
website/docs/concepts/suspense.mdx
View File

@ -1,6 +1,6 @@
---
title: "Suspense"
description: "Suspense for data fetching"
title: 'Suspense'
description: 'Suspense for data fetching'
---
Suspense is a way to suspend component rendering whilst waiting a task
@ -178,4 +178,4 @@ pub type UserContent = WithUser<BaseUserContent>;
## Relevant examples
- [Suspense](https://github.com/yewstack/yew/tree/master/examples/suspense)
- [Suspense](https://github.com/yewstack/yew/tree/master/examples/suspense)

18
website/docs/concepts/wasm-bindgen/introduction.mdx
View File

@ -1,5 +1,5 @@
---
title: "wasm-bindgen"
title: 'wasm-bindgen'
sidebar_label: wasm-bindgen
---
@ -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 in a high level in order 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
@ -89,10 +89,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`.

18
website/docs/concepts/wasm-bindgen/web-sys.mdx
View File

@ -1,10 +1,10 @@
---
title: "web-sys"
description: "The web-sys crate provides bindings for Web APIs."
title: 'web-sys'
description: 'The web-sys crate provides bindings for Web APIs.'
---
import Tabs from '@theme/Tabs';
import TabItem from '@theme/TabItem';
import Tabs from '@theme/Tabs'
import TabItem from '@theme/TabItem'
The [`web-sys` crate](https://crates.io/crates/web-sys) provides bindings for Web APIs. This is
procedurally generated from browser WebIDL which is why some names are so long and why some types are vague.
@ -126,7 +126,6 @@ fn with_jscast(node_ref: NodeRef) {
</TabItem>
</Tabs>
## JavaScript example to Rust
This section is to help show that any examples that use JavaScript to interact with the Web APIs
@ -137,14 +136,15 @@ can be adapted and written using Rust with `web-sys`.
```js
document.getElementById('mousemoveme').onmousemove = (e) => {
// e = Mouse event.
var rect = e.target.getBoundingClientRect();
var x = e.clientX - rect.left; //x position within the element.
var y = e.clientY - rect.top; //y position within the element.
console.log("Left? : " + x + " ; Top? : " + y + ".");
var rect = e.target.getBoundingClientRect()
var x = e.clientX - rect.left //x position within the element.
var y = e.clientY - rect.top //y position within the element.
console.log('Left? : ' + x + ' ; Top? : ' + y + '.')
}
```
### `web-sys` example
Using `web-sys` alone the above JavaSciprt example could be implemented like this:
```toml title=Cargo.toml

10
website/docs/getting-started/build-a-sample-app.mdx
View File

@ -1,5 +1,5 @@
---
title: "Build a sample app"
title: 'Build a sample app'
---
## Using a starter template
@ -116,10 +116,10 @@ Finally, add an `index.html` file in the root directory of your app.
```html , title=index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Yew App</title>
</head>
<head>
<meta charset="utf-8" />
<title>Yew App</title>
</head>
</html>
```

64
website/docs/getting-started/editor-setup.mdx
View File

@ -1,6 +1,6 @@
---
title: "Editor Setup"
description: "Setting your code editor"
title: 'Editor Setup'
description: 'Setting your code editor'
---
:::important contribute
@ -16,6 +16,7 @@ Using a different editor? Feel free to add instructions for your editor of choic
3. Give it a name and description of your preference.
4. Paste the following snippet in Template Text section.
5. Change the applicability on the lower right, select Rust > Item > Module
```rust ,ignore
use yew::prelude::*;
@ -44,8 +45,8 @@ For function components, use the template below. Additionally:
1. Click on Edit Variable
2. In the `func_name` row, set the Expression column to `snakeCase(NAME)` so that `ComponentName` will be automatically
filled as `component_name`
in the function definition.
filled as `component_name`
in the function definition.
3. In the `func_name` row, check "skip if defined" so this autogenerated field won't be navigated to.
4. (Optional) give `tag` a reasonable default value like "div", with double quotes.
@ -70,35 +71,34 @@ pub fn $func_name$(props: &$Name$Props) -> Html {
```json
{
"Create new Yew component": {
"prefix": "YOUR PREFIX OF CHOICE",
"body": [
"use yew::prelude::*;",
"",
"pub struct ${1};",
"",
"pub enum Msg {",
"}",
"",
"impl Component for ${1} {",
" type Message = Msg;",
" type Properties = ();",
"",
" fn create(ctx: &Context<Self>) -> Self {",
" Self",
" }",
"",
" fn view(&self, ctx: &Context<Self>) -> Html {",
" html! {",
" ${0}",
" }",
" }",
"}"
],
"description": "Create a new Yew component with a message enum"
}
"Create new Yew component": {
"prefix": "YOUR PREFIX OF CHOICE",
"body": [
"use yew::prelude::*;",
"",
"pub struct ${1};",
"",
"pub enum Msg {",
"}",
"",
"impl Component for ${1} {",
" type Message = Msg;",
" type Properties = ();",
"",
" fn create(ctx: &Context<Self>) -> Self {",
" Self",
" }",
"",
" fn view(&self, ctx: &Context<Self>) -> Html {",
" html! {",
" ${0}",
" }",
" }",
"}"
],
"description": "Create a new Yew component with a message enum"
}
}
```
## Support for the `html!` Macro

2
website/docs/getting-started/examples.mdx
View File

@ -1,5 +1,5 @@
---
title: "Examples"
title: 'Examples'
---
The Yew repository is contains many [examples] (in various states of maintenance).

8
website/docs/getting-started/introduction.mdx
View File

@ -1,5 +1,5 @@
---
title: "Getting Started"
title: 'Getting Started'
---
You will need a couple of tools to compile, build, package and debug your Yew application.
@ -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

2
website/docs/migration-guides/yew-agent/from-0_0_0-to-0_1_0.mdx
View File

@ -1,5 +1,5 @@
---
title: "From 0.0.0 to 0.1.0"
title: 'From 0.0.0 to 0.1.0'
---
This is the first release of `yew-agents` being separated from `yew`

2
website/docs/migration-guides/yew-agent/from-0_1_0-to-0_2_0.mdx
View File

@ -1,5 +1,5 @@
---
title: "From 0.1.0 to 0.2.0"
title: 'From 0.1.0 to 0.2.0'
---
## Removal of `Context` and `Job` Agents

2
website/docs/migration-guides/yew-router/from-0_15_0-to-0_16_0.mdx
View File

@ -1,5 +1,5 @@
---
title: "From 0.15.0 to 0.16.0"
title: 'From 0.15.0 to 0.16.0'
---
The router API has been completely rewritten in `0.16.0`.

42
website/docs/migration-guides/yew/from-0_18_0-to-0_19_0.mdx
View File

@ -1,9 +1,9 @@
---
title: "From 0.18.0 to 0.19.0"
title: 'From 0.18.0 to 0.19.0'
---
import Tabs from '@theme/Tabs';
import TabItem from '@theme/TabItem';
import Tabs from '@theme/Tabs'
import TabItem from '@theme/TabItem'
`Yew 0.19.0` has changed a lot, thus this migration will not cover ALL of the changes.
@ -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 [`reqwasm`](https://github.com/hamza1311/reqwasm) instead.
- `FetchService`
Use [`reqwest`](https://crates.io/crates/reqwest) or [`reqwasm`](https://github.com/hamza1311/reqwasm) 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 [`reqwasm`](https://github.com/hamza1311/reqwasm) instead.
- `FetchService`
Use [`reqwest`](https://crates.io/crates/reqwest) or [`reqwasm`](https://github.com/hamza1311/reqwasm) instead.
## New crate - yew-agent

10
website/docs/migration-guides/yew/from-0_19_0-to-0_20_0.mdx
View File

@ -1,5 +1,5 @@
---
title: "From 0.19.0 to 0.20.0"
title: 'From 0.19.0 to 0.20.0'
---
## `_as_body` variant of `start_app` is removed
@ -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

12
website/docs/more/css.mdx
View File

@ -1,5 +1,5 @@
---
title: "CSS"
title: 'CSS'
---
A proposal for integrated CSS support can be found here:
@ -15,14 +15,14 @@ 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.
- [stylist](https://github.com/futursolo/stylist-rs) - A CSS-in-Rust styling solution for WebAssembly Applications.
:::important contribute
If you're developing a project adding styles to Yew please submit a PR adding yourself to this list!

4
website/docs/more/debugging.mdx
View File

@ -1,5 +1,5 @@
---
title: "Debugging"
title: 'Debugging'
---
## Panics
@ -10,7 +10,7 @@ your browser's console.
## Console Logging
In general, Wasm web apps are able to interact with Browser APIs, and the `console.log` API is no
In general, Wasm web apps are able to interact with Browser APIs, and the `console.log` API is no
exception. There are a few options available:
### [`wasm-logger`](https://crates.io/crates/wasm-logger)

9
website/docs/more/deployment.mdx
View File

@ -1,6 +1,6 @@
---
title: "Deployment"
description: "Deploying Yew applications"
title: 'Deployment'
description: 'Deploying Yew applications'
---
When you are ready to deploy your Yew application to a server, you have various options for deployment.
@ -8,7 +8,7 @@ When you are ready to deploy your Yew application to a server, you have various
`trunk build --release` builds your app in release mode. Set up your HTTP server so that it serves `index.html` whenever your site is visited, and requests to static paths like `index_<hash>.js` and `index_bg_<hash>.wasm` are served with the contents of their respective contents from the dist directory generated by trunk.
:::important A note about `trunk serve --release`
Do **not** use `trunk serve --release` to serve your application in production.
Do **not** use `trunk serve --release` to serve your application in production.
It should only be used for testing the release build during development
:::
@ -18,7 +18,7 @@ It should only be used for testing the release build during development
If the application uses the [Yew router](../../router), you must configure the server to return the `index.html` when asked for a file that it does not have.
An application with Yew router is built as a [Single Page Application (SPA)](https://developer.mozilla.org/en-US/docs/Glossary/SPA). When the user navigates to a URL from within a running client, the router interprets the URL and routes to that page.
An application with Yew router is built as a [Single Page Application (SPA)](https://developer.mozilla.org/en-US/docs/Glossary/SPA). When the user navigates to a URL from within a running client, the router interprets the URL and routes to that page.
But on a fresh load, such as when navigating to the page by entering it in the address bar or refreshing the page, all of these actions are handled by the browser itself, outside the running application. The browser makes a direct request to the server for that URL, bypassing the router. A wrongly configured server would return with status 404 - Not Found.
@ -29,6 +29,7 @@ By returning `index.html` instead, the app loads as it normally would as if requ
The WASM files must be served with the [Content-Type header](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Type) set to `application/wasm` MIME-type.
Most servers and hosting services already do this by default. If yours doesn't, consult its documentation. An incorrect MIME-type will, in most web browsers, result in an error similar to the following:
```ignore
`WebAssembly.instantiateStreaming` failed because your server does not serve wasm with `application/wasm` MIME type. Falling back to `WebAssembly.instantiate` which is slower. Original error:
TypeError: WebAssembly: Response has unsupported MIME type 'text/plain' expected 'application/wasm'

23
website/docs/more/roadmap.mdx
View File

@ -1,12 +1,12 @@
---
title: "Roadmap"
description: "The planned feature roadmap for the Yew framework"
title: 'Roadmap'
description: 'The planned feature roadmap for the Yew framework'
---
## Prioritization
The prioritization of upcoming features and focuses of the framework is determined by the community.
In Spring 2020, a developer survey was sent out to collect feedback on the direction of the project.
The prioritization of upcoming features and focuses of the framework is determined by the community.
In Spring 2020, a developer survey was sent out to collect feedback on the direction of the project.
You can find the summary in the [Yew Wiki](https://github.com/yewstack/yew/wiki/Dev-Survey-%5BSpring-2020%5D).
:::note
@ -29,17 +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)

5
website/docs/more/testing.mdx
View File

@ -1,6 +1,6 @@
---
title: "Testing apps"
description: "Testing your app"
title: 'Testing apps'
description: 'Testing your app'
---
:::info
@ -23,4 +23,3 @@ The Rust/WASM working group maintains a crate called [`wasm_bindgen_test`](https
which allows you to run tests in a browser in similar fashion to how the built-in `#[test]` procedural macro works.
More information is given in the [Rust Wasm working group's documentation](https://rustwasm.github.io/docs/wasm-bindgen/wasm-bindgen-test/index.html)
for this module.

31
website/docs/tutorial/index.mdx
View File

@ -1,5 +1,5 @@
---
title: "Tutorial"
title: 'Tutorial'
slug: /tutorial
---
@ -28,7 +28,6 @@ This tutorial assumes you're already familiar with Rust. If you're new to Rust,
the free [Rust Book](https://doc.rust-lang.org/book/ch00-00-introduction.html) offers a great starting point for
beginners and continues to be an excellent resource even for experienced Rust developers.
Ensure the latest version of Rust is installed by running `rustup update` or by
[installing rust](https://www.rust-lang.org/tools/install) if you haven't already done so already.
@ -108,11 +107,8 @@ Now, let's create an `index.html` at the root of the project.
```html title="index.html"
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
</body>
<head> </head>
<body></body>
</html>
```
@ -145,7 +141,7 @@ writing marking inside `html!`. It is important to note that the macro does diff
1. Expressions must be wrapped in curly braces (`{ }`)
2. There must only be one root node. If you want to have multiple elements without wrapping them in a container,
an empty tag/fragment (`<> ... </>`) is used
an empty tag/fragment (`<> ... </>`) is used
3. Elements must be closed properly.
We want to build a layout that looks something like this in raw HTML:
@ -161,7 +157,10 @@ We want to build a layout that looks something like this in raw HTML:
</div>
<div>
<h3>John Doe: Building and breaking things</h3>
<img src="https://via.placeholder.com/640x360.png?text=Video+Player+Placeholder" alt="video thumbnail">
<img
src="https://via.placeholder.com/640x360.png?text=Video+Player+Placeholder"
alt="video thumbnail"
/>
</div>
```
@ -275,6 +274,7 @@ them in multiple parts of our application without having to duplicate code or lo
In fact, the `app` function we have been using so far is a component, called `App`. It is a "function component".
There are two different types of components in Yew.
1. Struct Components
2. Function Components
@ -470,12 +470,13 @@ Struct components act differently. See [the documentation](concepts/components/i
In a real world application, data will usually come from an API instead of being hardcoded. Let's fetch our
videos list from external source. For this we will need to add the following crates:
- [`reqwasm`](https://crates.io/crates/reqwasm)
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
- [`reqwasm`](https://crates.io/crates/reqwasm)
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:

333
website/docusaurus.config.js
View File

@ -1,179 +1,178 @@
const { API_BUTTON } = require('./src/constants');
const { API_BUTTON } = require('./src/constants')
const editUrl = 'https://github.com/yewstack/yew/blob/master/website/';
const editUrl = 'https://github.com/yewstack/yew/blob/master/website/'
/** @type {import('@docusaurus/types').DocusaurusConfig} */
module.exports = {
title: 'Yew',
tagline: 'Yew is a modern Rust framework for creating multi-threaded front-end web apps with WebAssembly.',
url: 'https://yew.rs',
baseUrl: '/',
onBrokenLinks: 'warn',
onBrokenMarkdownLinks: 'warn',
favicon: 'img/logo.png',
organizationName: 'yewstack', // Usually your GitHub org/user name.
projectName: 'yew', // Usually your repo name.
themeConfig: {
hideableSidebar: true,
navbar: {
title: 'Yew',
logo: {
alt: 'Yew Logo',
src: 'img/logo.png',
},
items: [
{
type: 'docsVersionDropdown',
position: 'left',
title: 'Yew',
tagline:
'Yew is a modern Rust framework for creating multi-threaded front-end web apps with WebAssembly.',
url: 'https://yew.rs',
baseUrl: '/',
onBrokenLinks: 'warn',
onBrokenMarkdownLinks: 'warn',
favicon: 'img/logo.png',
organizationName: 'yewstack', // Usually your GitHub org/user name.
projectName: 'yew', // Usually your repo name.
themeConfig: {
hideableSidebar: true,
navbar: {
title: 'Yew',
logo: {
alt: 'Yew Logo',
src: 'img/logo.png',
},
items: [
{
type: 'docsVersionDropdown',
position: 'left',
},
{
type: 'localeDropdown',
position: 'left',
},
{
type: 'doc',
position: 'left',
docId: 'getting-started/introduction',
label: 'Docs',
},
{
type: 'doc',
position: 'left',
docId: 'tutorial/index',
label: 'Tutorial',
},
{
docsPluginId: 'community',
type: 'doc',
position: 'right',
docId: 'awesome',
label: 'Community',
},
{
position: 'right',
to: 'blog',
label: 'Blog',
},
{
href: 'https://docs.rs/yew',
position: 'right',
label: API_BUTTON,
},
{
href: 'https://github.com/yewstack/yew',
label: 'GitHub',
position: 'right',
},
],
},
{
type: 'localeDropdown',
position: 'left',
footer: {
style: 'dark',
links: [
{
title: 'Support',
items: [
{
label: 'Sponsor Project',
href: 'https://opencollective.com/yew',
},
],
},
{
title: 'Participate',
items: [
{
label: 'GitHub',
href: 'https://github.com/yewstack/yew',
},
{
label: 'Discord',
href: 'https://discord.gg/VQck8X4',
},
{
label: 'Twitter',
href: 'https://twitter.com/yewstack',
},
],
},
{
title: 'More',
items: [
{
label: 'Yew Awesome',
href: 'https://github.com/jetli/awesome-yew',
},
],
},
],
},
{
type: 'doc',
position: 'left',
docId: 'getting-started/introduction',
label: 'Docs',
prism: {
additionalLanguages: ['rust', 'toml'],
},
{
type: 'doc',
position: 'left',
docId: 'tutorial/index',
label: 'Tutorial',
googleAnalytics: {
trackingID: 'UA-141789564-1',
anonymizeIP: true,
},
{
docsPluginId: 'community',
type: 'doc',
position: 'right',
docId: 'awesome',
label: 'Community',
},
{
position: 'right',
to: 'blog',
label: 'Blog',
},
{
href: 'https://docs.rs/yew',
position: 'right',
label: API_BUTTON,
},
{
href: 'https://github.com/yewstack/yew',
label: 'GitHub',
position: 'right',
},
],
},
footer: {
style: 'dark',
links: [
{
title: 'Support',
items: [
{
label: 'Sponsor Project',
href: 'https://opencollective.com/yew',
},
],
},
{
title: 'Participate',
items: [
{
label: 'GitHub',
href: 'https://github.com/yewstack/yew',
},
{
label: 'Discord',
href: 'https://discord.gg/VQck8X4',
},
{
label: 'Twitter',
href: 'https://twitter.com/yewstack',
},
],
},
{
title: 'More',
items: [
{
label: 'Yew Awesome',
href: 'https://github.com/jetli/awesome-yew',
},
],
},
],
i18n: {
defaultLocale: 'en',
locales: ['en', 'ja', 'zh-CN', 'zh-TW'],
},
prism: {
additionalLanguages: ['rust', 'toml'],
},
},
i18n: {
defaultLocale: 'en',
locales: ['en', 'ja', 'zh-CN', 'zh-TW'],
},
plugins: [
'content-pages',
[
'@docusaurus/plugin-google-analytics',
{
trackingID: 'UA-141789564-1',
anonymizeIP: true,
},
],
['@docusaurus/theme-classic',
{
customCss: require.resolve('./src/css/custom.css'),
}
],
[
'@docusaurus/plugin-content-docs',
{
path: 'docs',
sidebarPath: require.resolve('./sidebars/docs.js'),
editUrl,
routeBasePath: '/docs',
}
],
[
'@docusaurus/plugin-content-docs',
{
id: 'community',
path: 'community',
sidebarPath: require.resolve('./sidebars/community.js'),
routeBasePath: '/community',
editUrl,
}
],
[
'@docusaurus/plugin-content-blog',
{
path: 'blog',
blogTitle: 'Yew Blog',
editUrl,
},
],
[
'client-redirects',
{
redirects: [
// this handles the redirect from `/next` -> to the (current) first item in the docs sidebar
// note: if the first item is changed, it should be reflected here
{
to: '/docs/next/getting-started/introduction', // string
from: ['/docs/next'], // string | string[]
},
plugins: [
'content-pages',
[
'@docusaurus/theme-classic',
{
customCss: require.resolve('./src/css/custom.css'),
},
],
[
'@docusaurus/plugin-content-docs',
{
path: 'docs',
sidebarPath: require.resolve('./sidebars/docs.js'),
editUrl,
routeBasePath: '/docs',
},
],
[
'@docusaurus/plugin-content-docs',
{
id: 'community',
path: 'community',
sidebarPath: require.resolve('./sidebars/community.js'),
routeBasePath: '/community',
editUrl,
},
],
[
'@docusaurus/plugin-content-blog',
{
path: 'blog',
blogTitle: 'Yew Blog',
editUrl,
},
],
[
'client-redirects',
{
redirects: [
// this handles the redirect from `/next` -> to the (current) first item in the docs sidebar
// note: if the first item is changed, it should be reflected here
{
to: '/docs/next/getting-started/introduction', // string
from: ['/docs/next'], // string | string[]
},
],
},
],
[
'@easyops-cn/docusaurus-search-local',
{
hashed: true,
indexBlog: false,
},
],
},
],
[
"@easyops-cn/docusaurus-search-local",
{
hashed: true,
indexBlog: false
},
],
],
};
}

10
website/i18n/ja/docusaurus-plugin-content-docs-router/current.json
View File

@ -1,6 +1,6 @@
{
"version.label": {
"message": "Next",
"description": "The label for version current"
}
}
"version.label": {
"message": "Next",
"description": "The label for version current"
}
}

59
website/i18n/ja/docusaurus-plugin-content-docs/0.17.3/SUMMARY.mdx
View File

@ -1,44 +1,43 @@
# Table of contents
* [はじめに](index.mdx)
- [はじめに](index.mdx)
## 始める
* [プロジェクトの準備](getting-started/project-setup.mdx)
* [wasm-packを使う](getting-started/project-setup/using-wasm-pack.mdx)
* [wasm-bindgenを使う](getting-started/project-setup/using-wasm-bindgen.mdx)
* [cargo-webを使う](getting-started/project-setup/using-cargo-web.mdx)
* [入門用テンプレート](getting-started/starter-templates.mdx)
* [サンプルアプリを作る](getting-started/build-a-sample-app.mdx)
* [web-sysかstdweb選ぶ](getting-started/choose-web-library.mdx)
* [例から学ぶ](getting-started/examples.mdx)
- [プロジェクトの準備](getting-started/project-setup.mdx)
- [wasm-pack を使う](getting-started/project-setup/using-wasm-pack.mdx)
- [wasm-bindgen を使う](getting-started/project-setup/using-wasm-bindgen.mdx)
- [cargo-web を使う](getting-started/project-setup/using-cargo-web.mdx)
- [入門用テンプレート](getting-started/starter-templates.mdx)
- [サンプルアプリを作る](getting-started/build-a-sample-app.mdx)
- [web-sys か stdweb 選ぶ](getting-started/choose-web-library.mdx)
- [例から学ぶ](getting-started/examples.mdx)
## 基本となる概念 <a id="concepts"></a>
* [html!を使う](concepts/html.mdx)
* [リスト](concepts/html/lists.mdx)
* [要素](concepts/html/elements.mdx)
* [リテラルと式](concepts/html/literals-and-expressions.mdx)
* [コンポーネント](concepts/html/components.mdx)
* [コンポーネント (Components)](concepts/components.mdx)
* [属性 (Properties)](concepts/components/properties.mdx)
* [コールバック (Callbacks)](concepts/components/callbacks.mdx)
* [参照 (Refs)](concepts/components/refs.mdx)
* [Agents](concepts/agents.mdx)
* [Services](concepts/services.mdx)
* [Format](concepts/services/format.mdx)
* [ルータ](concepts/router.mdx)
- [html!を使う](concepts/html.mdx)
- [リスト](concepts/html/lists.mdx)
- [要素](concepts/html/elements.mdx)
- [リテラルと式](concepts/html/literals-and-expressions.mdx)
- [コンポーネント](concepts/html/components.mdx)
- [コンポーネント (Components)](concepts/components.mdx)
- [属性 (Properties)](concepts/components/properties.mdx)
- [コールバック (Callbacks)](concepts/components/callbacks.mdx)
- [参照 (Refs)](concepts/components/refs.mdx)
- [Agents](concepts/agents.mdx)
- [Services](concepts/services.mdx)
- [Format](concepts/services/format.mdx)
- [ルータ](concepts/router.mdx)
## 高度な内容
* [最適化とベストプラクティス](advanced-topics/optimizations.mdx)
* [低レベルなライブラリの中身](advanced-topics/how-it-works.mdx)
- [最適化とベストプラクティス](advanced-topics/optimizations.mdx)
- [低レベルなライブラリの中身](advanced-topics/how-it-works.mdx)
## 更なる内容
* [CSS](more/css.mdx)
* [ロードマップ](more/roadmap.mdx)
* [テスト](more/testing.mdx)
* [デバッグ](more/debugging.mdx)
* [外部ライブラリ](more/external-libs.mdx)
- [CSS](more/css.mdx)
- [ロードマップ](more/roadmap.mdx)
- [テスト](more/testing.mdx)
- [デバッグ](more/debugging.mdx)
- [外部ライブラリ](more/external-libs.mdx)

3
website/i18n/ja/docusaurus-plugin-content-docs/0.17.3/advanced-topics/how-it-works.mdx
View File

@ -5,5 +5,4 @@ description: Low level details about the framework
# 低レベルなライブラリの中身
コンポーネントのライフサイクルの状態機械、VDOMの異なるアルゴリズム
コンポーネントのライフサイクルの状態機械、VDOM の異なるアルゴリズム

95
website/i18n/ja/docusaurus-plugin-content-docs/0.17.3/advanced-topics/optimizations.mdx
View File

@ -5,15 +5,15 @@ description: Make your app faster
# 最適化とベストプラクティス
## neq\_assign
## neq_assign
親コンポーネントからpropsを受け取った際、`change`メソッドが呼ばれます。
これはコンポーネントの状態を更新することができるのに加え、コンポーネントがpropsが変わった際に再レンダリングするかどうかを決める
親コンポーネントから props を受け取った際、`change`メソッドが呼ばれます。
これはコンポーネントの状態を更新することができるのに加え、コンポーネントが props が変わった際に再レンダリングするかどうかを決める
`ShouldRender`という真偽値を返すことができます。
再レンダリングはコストがかかるもので、もし避けられるのであれば避けるべきです。
一般的なルールとしてpropsが実際に変化した際にのみ再レンダリングすれば良いでしょう。
以下のコードブロックはこのルールを表しており、propsが前と変わったときに`true`を返します。
一般的なルールとして props が実際に変化した際にのみ再レンダリングすれば良いでしょう。
以下のコードブロックはこのルールを表しており、props が前と変わったときに`true`を返します。
```rust
use yew::ShouldRender;
@ -38,31 +38,31 @@ impl Example {
```
しかし我々は先に進んでいけます！
この6行のボイラープレードは`PartialEq`を実装したものにトレイトとブランケットを用いることで1行のコードへと落とし込むことができます。
この 6 行のボイラープレードは`PartialEq`を実装したものにトレイトとブランケットを用いることで 1 行のコードへと落とし込むことができます。
[こちら](https://docs.rs/yewtil/*/yewtil/trait.NeqAssign.html)にて`yewtil`クレートの`NewAssign`トレイトを見てみてください。
## 効果的にスマートポインタを使う
**注意: このセクションで使われている用語がわからなければRust bookは
**注意: このセクションで使われている用語がわからなければ Rust book は
[スマートポインタについての章](https://doc.rust-lang.org/book/ch15-00-smart-pointers.html)
があり、非常に有用です。**
があり、非常に有用です。**
再レンダリングの際にpropsを作るデータを大量にコピーしないために、スマートポインタを用いてデータ自体ではなくデータへの参照だけを
再レンダリングの際に props を作るデータを大量にコピーしないために、スマートポインタを用いてデータ自体ではなくデータへの参照だけを
コピーできます。
propsや子コンポーネントで関連するデータに実データではなく参照を渡すと、子コンポーネントでデータを変更する必要がなければ
props や子コンポーネントで関連するデータに実データではなく参照を渡すと、子コンポーネントでデータを変更する必要がなければ
データのコピーを避けることができます。
その際、`Rc::make_mut`によって変更したいデータの変更可能な参照を得ることができます。
これにより、propsが変更されたときにコンポーネントが再レンダリングされるかどうかを決めるかで`Component::change`に更なる恩恵があります。
これにより、props が変更されたときにコンポーネントが再レンダリングされるかどうかを決めるかで`Component::change`に更なる恩恵があります。
なぜなら、データの値を比較する代わりに元々のポインタのアドレス (つまりデータが保管されている機械のメモリの場所) を比較できるためです。
2つのポインターが同じデータを指す場合、それらのデータの値は同じでなければならないのです。
2 つのポインターが同じデータを指す場合、それらのデータの値は同じでなければならないのです。
ただし、その逆は必ずしも成り立たないことに注意してください!
もし2つのポインタが異なるのであれば、そのデータは同じである可能性があります。
もし 2 つのポインタが異なるのであれば、そのデータは同じである可能性があります。
この場合はデータを比較するべきでしょう。
この比較においては`PartialEq`ではなく`Rc::ptr_eq`を使う必要があります。
`PartialEq`は等価演算子`==`を使う際に自動的に使われます。
Rustのドキュメントには[`Rc::ptr_eq`についてより詳しく書いてあります](https://doc.rust-lang.org/stable/std/rc/struct.Rc.html#method.ptr_eq)。
Rust のドキュメントには[`Rc::ptr_eq`についてより詳しく書いてあります](https://doc.rust-lang.org/stable/std/rc/struct.Rc.html#method.ptr_eq)。
この最適化は`Copy`を実装していないデータの型に対して極めて有効なものです。
もしデータを簡単に変更できるのであれば、スマートポインタに取り換える必要はありません。
@ -72,7 +72,7 @@ Rustのドキュメントには[`Rc::ptr_eq`についてより詳しく書いて
この最適化は値がまだ一度も子によって更新されていない場合に極めて有効で、親からほとんど更新されない場合においてもかなり有効です。
これにより、`Rc<_>s`が純粋なコンポーネントに対してプロパティの値をラップする良い一手となります。
## View関数
## View 関数
コードの可読性の理由から`html!`の部分を関数へと移植するのは意味があります。
これは、インデントを減らすのでコードを読みやすくするだけでなく、良いデザインパターンを産むことにも繋がるのです。
@ -81,24 +81,24 @@ Rustのドキュメントには[`Rc::ptr_eq`についてより詳しく書いて
## 純粋なコンポーネント
純粋なコンポーネントは状態を変化せず、ただ中身を表示してメッセージを普通の変更可能なコンポーネントへ渡すコンポーネントのことです。
View関数との違いとして、純粋なコンポーネントは式の構文\(`{some_view_function()}`\)ではなく
View 関数との違いとして、純粋なコンポーネントは式の構文\(`{some_view_function()}`\)ではなく
コンポーネントの構文\(`<SomePureComponent />`\)を使うことで`html!`マクロの中で呼ばれる点、
そして実装次第で記憶され (つまり、一度関数が呼ばれれば値は"保存"され、
同じ引数でもう一度呼ばれても値を再計算する必要がなく最初に関数が呼ばれたときの保存された値を返すことができる)、
先述の`neq_assign`ロジックを使う別々のpropsで再レンダリングを避けられる点があります。
先述の`neq_assign`ロジックを使う別々の props で再レンダリングを避けられる点があります。
Yewは純粋な関数やコンポーネントをサポートしていませんが、外部のクレートを用いることで実現できます。
Yew は純粋な関数やコンポーネントをサポートしていませんが、外部のクレートを用いることで実現できます。
## 関数型コンポーネント (a.k.a フック)
関数型コンポーネントはまだ開発中です！
開発状況については[プロジェクトボード](https://github.com/yewstack/yew/projects/3)に詳しく書いてあります。
## キー付きDOMノード
## キー付き DOM ノード
## ワークスペースでコンパイル時間を減らす
間違いなくYewを使う上での最大の欠点はコンパイルに時間がかかる点です。
間違いなく Yew を使う上での最大の欠点はコンパイルに時間がかかる点です。
プロジェクトのコンパイルにかかる時間は`html!`マクロに渡されるコードの量に関係しています。
これは小さなプロジェクトにはそこまで問題ないようですが、大きなアプリではコードを複数クレートに分割することでアプリに変更が加られた際に
コンパイラの作業量を減らすのが有効です。
@ -106,30 +106,30 @@ Yewは純粋な関数やコンポーネントをサポートしていません
一つ可能なやり方として、ルーティングとページ洗濯を担当するメインのクレートを作り、それぞれのページに対して別のクレートを作ることです。
そうして各ページは異なるコンポーネントか、`Html`を生成する大きな関数となります。
アプリの異なる部分を含むクレート同士で共有されるコードはプロジェクト全体で依存する分離したクレートに保存されます。
理想的には1回のコンパイルでコード全てを再ビルドせずメインのクレートかどれかのページのクレートを再ビルドするだけにすることです。
最悪なのは、"共通"のクレートを編集して、はじめに戻ってくることです:
理想的には 1 回のコンパイルでコード全てを再ビルドせずメインのクレートかどれかのページのクレートを再ビルドするだけにすることです。
最悪なのは、"共通"のクレートを編集して、はじめに戻ってくることです:
共有のクレートに依存している全てのコード、恐らく全てのコードをコンパイルすることです。
もしメインのクレートが重たすぎる、もしくは深くネストしたページ (例えば別ページのトップでレンダリングされるページ)
もしメインのクレートが重たすぎる、もしくは深くネストしたページ (例えば別ページのトップでレンダリングされるページ)
で速く繰り返したい場合、クレートの例を用いてメインページの実装をシンプルにしたりトップで動かしているコンポーネントをレンダリングできます。
## バイナリサイズを小さくする
* 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)に詳しく書いてあります。**
### wee\_alloc
### wee_alloc
[wee\_alloc](https://github.com/rustwasm/wee_alloc)は小さなアロケーターで、Rustのバイナリで使用される通常のものより遥かに小さなものです。
デフォルトのアロケーターと置き換えることで、Wasmファイルをより小さくすることができ、速度とメモリのオーバーヘッドを軽減できます。
[wee_alloc](https://github.com/rustwasm/wee_alloc)は小さなアロケーターで、Rust のバイナリで使用される通常のものより遥かに小さなものです。
デフォルトのアロケーターと置き換えることで、Wasm ファイルをより小さくすることができ、速度とメモリのオーバーヘッドを軽減できます。
デフォルトのアロケータを含めないことによるサイズの増加と比較して、速度とメモリのオーバーヘッドが悪くなります。
ファイルサイズが小さいことで、ページの読み込みが速くなります。
そのため、アロケーションのタスクが非常に多い場合でなければデフォルトのものではなくtiny allocatorを利用することが一般的に推奨されています。
そのため、アロケーションのタスクが非常に多い場合でなければデフォルトのものではなく tiny allocator を利用することが一般的に推奨されています。
```rust
// `wee_alloc`を使用する。
@ -144,13 +144,13 @@ static ALLOC: wee_alloc::WeeAlloc = wee_alloc::WeeAlloc::INIT;
```text
[profile.release]
# バイナリに含むコードを少なくする
panic = 'abort'
panic = 'abort'
# コードベース全体での最適化 ( 良い最適化だがビルドが遅くなる)
codegen-units = 1
# サイズの最適化( よりアグレッシブに )
opt-level = 'z'
opt-level = 'z'
# サイズの最適化
# opt-level = 's'
# opt-level = 's'
# プログラム全体の分析によるリンク時最適化
lto = true
```
@ -159,11 +159,11 @@ lto = true
更に`wasm`のコードのサイズを最適化することができます。
The Rust Wasm BookにはWasmバイナリのサイズを小さくすることについてのセクションがあります:
The Rust Wasm Book には Wasm バイナリのサイズを小さくすることについてのセクションがあります:
[Shrinking .wasm size](https://rustwasm.github.io/book/game-of-life/code-size.html)
* `wasm-pack`でデフォルトの`wasm`のコードをリリースビルド時に最適化する
* `wasm-opt`によって直接`wasm`ファイルを最適化する
- `wasm-pack`でデフォルトの`wasm`のコードをリリースビルド時に最適化する
- `wasm-opt`によって直接`wasm`ファイルを最適化する
```text
wasm-opt wasm_bg.wasm -Os -o wasm_bg_opt.wasm
@ -171,16 +171,17 @@ wasm-opt wasm_bg.wasm -Os -o wasm_bg_opt.wasm
#### yew/examples/にある例を小さなサイズでビルドする
注意: `wasm-pack`はRustとWasmのコードへの最適化を組み合わせます。`wasm-bindgen`はこの例ではRustのサイズ最適化を用いていません。
注意: `wasm-pack`は Rust と Wasm のコードへの最適化を組み合わせます。`wasm-bindgen`はこの例では Rust のサイズ最適化を用いていません。
| 使用したツール | サイズ |
| :--- | :--- |
| wasm-bindgen | 158KB |
| wasm-bindgen + wasm-opt -Os | 116KB |
| wasm-pack | 99 KB |
| 使用したツール | サイズ |
| :-------------------------- | :----- |
| wasm-bindgen | 158KB |
| wasm-bindgen + wasm-opt -Os | 116KB |
| wasm-pack | 99 KB |
## 参考文献:
* [The Rust Bookのスマートポインタに関する章](https://doc.rust-lang.org/book/ch15-00-smart-pointers.html)
* [the Rust Wasm Bookでのバイナリサイズを小さくすることについて](https://rustwasm.github.io/book/reference/code-size.html#optimizing-builds-for-code-size)
* [Rust profilesについてのドキュメント](https://doc.rust-lang.org/cargo/reference/profiles.html)
* [binaryenプロジェクト](https://github.com/WebAssembly/binaryen)
- [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)

40
website/i18n/ja/docusaurus-plugin-content-docs/0.17.3/concepts/agents.mdx
View File

@ -3,12 +3,12 @@ title: Agents
description: Yew's Actor System
---
エージェントはAngularの[サービス](https://angular.io/guide/architecture-services)に似ており\(ただし依存性インジェクションはありません\)、
エージェントは Angular の[サービス](https://angular.io/guide/architecture-services)に似ており\(ただし依存性インジェクションはありません\)、
[アクターモデル](https://en.wikipedia.org/wiki/Actor_model)を提供します。
エージェントはコンポーネント階層のどこに位置するかに関わらず、コンポーネント間でメッセージをルーティングしたり、共有状態を作成したり、UIをレンダリングするメインスレッドから計算量の多いタスクをオフロードするために使用することができます。
エージェントはコンポーネント階層のどこに位置するかに関わらず、コンポーネント間でメッセージをルーティングしたり、共有状態を作成したり、UI をレンダリングするメインスレッドから計算量の多いタスクをオフロードするために使用することができます。
また、Yew アプリケーションがタブをまたいで通信できるようにするためのエージェントのサポートも\(将来的には\)計画されています。
エージェントが並行に動くようにYewは[web-workers](https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Using_web_workers)を使用しています。
エージェントが並行に動くように Yew は[web-workers](https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Using_web_workers)を使用しています。
## ライフサイクル
@ -18,39 +18,39 @@ 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\)
## エージェントとコンポーネントのやり取り
### Bridges
Bridgeは、エージェントとコンポーネント間の双方向通信を可能にします。
また、Bridgeはエージェント同士の通信を可能にします。
Bridge は、エージェントとコンポーネント間の双方向通信を可能にします。
また、Bridge はエージェント同士の通信を可能にします。
### Dispatchers
Dispatcherは、コンポーネントとエージェント間の一方向通信を可能にします。
Dispatcherは、コンポーネントがエージェントにメッセージを送信することを可能にします。
Dispatcher は、コンポーネントとエージェント間の一方向通信を可能にします。
Dispatcher は、コンポーネントがエージェントにメッセージを送信することを可能にします。
## オーバーヘッド
独自の独立したweb worker(プライベートとパブリック)にあるエージェントは、送受信するメッセージにシリアライズするオーバーヘッドが発生します。
独自の独立した web worker(プライベートとパブリック)にあるエージェントは、送受信するメッセージにシリアライズするオーバーヘッドが発生します。
他のスレッドとの通信には[bincode](https://github.com/servo/bincode)を使用するので、関数を呼び出すよりもコストはかなり高くなります。
計算コストがメッセージの受け渡しコストを上回る場合を除き、ロジックを UI スレッドエージェント\(JobまたはContext\)に格納する必要があります。
計算コストがメッセージの受け渡しコストを上回る場合を除き、ロジックを UI スレッドエージェント\(Job または Context\)に格納する必要があります。
## 参考資料
* [pub\_sub](https://github.com/yewstack/yew/tree/master/examples/pub_sub)の例でコンポーネントがどのようにエージェントと通信させているかがわかります。
- [pub_sub](https://github.com/yewstack/yew/tree/master/examples/pub_sub)の例でコンポーネントがどのようにエージェントと通信させているかがわかります。

25
website/i18n/ja/docusaurus-plugin-content-docs/0.17.3/concepts/components.mdx
View File

@ -2,10 +2,11 @@
title: Introduction
description: Components and their lifecycle hooks
---
## コンポーネントとは?
コンポーネントはYewを構成するブロックです。
コンポーネントは状態を管理し、自身をDOMへレンダリングすることができます。
コンポーネントは Yew を構成するブロックです。
コンポーネントは状態を管理し、自身を DOM へレンダリングすることができます。
コンポーネントはライフサイクルの機能がある`Component`トレイトを実装することによって作られます。
## ライフサイクル
@ -21,7 +22,7 @@ description: Components and their lifecycle hooks
コンポーネントが作られると、`ComponentLink`と同様に親コンポーネントからプロパティを受け取ります。
プロパティはコンポーネントの状態を初期化するのに使われ、"link"はコールバックを登録したりコンポーネントにメッセージを送るのに使われます。
propsとlinkをコンポーネント構造体に格納するのが一般的です。
props と link をコンポーネント構造体に格納するのが一般的です。
例えば:
```rust
@ -45,8 +46,8 @@ impl Component for MyComponent {
### View
コンポーネントは`view()`メソッドによってレイアウトを宣言します。
Yewは`html!`マクロによってHTMLとSVGノード、リスナー、子コンポーネントを宣言できます。
マクロはReactのJSXのような動きをしますが、JavaScriptの代わりにRustの式を用います。
Yew は`html!`マクロによって HTML と SVG ノード、リスナー、子コンポーネントを宣言できます。
マクロは React の JSX のような動きをしますが、JavaScript の代わりに Rust の式を用います。
```rust
impl Component for MyComponent {
@ -65,7 +66,7 @@ impl Component for MyComponent {
### Rendered
`rendered()`コンポーネントのライフサイクルのメソッドは`view()`が処理されたてYewがコンポーネントをレンダリングした後、
`rendered()`コンポーネントのライフサイクルのメソッドは`view()`が処理されたて Yew がコンポーネントをレンダリングした後、
ブラウザがページを更新する前に呼ばれます。
コンポーネントは、コンポーネントが要素をレンダリングした後にのみ実行できるアクションを実行するため、このメソッドを実装したい場合があります。
コンポーネントが初めてレンダリングされたかどうかは `first_render` パラメータで確認できます。
@ -107,7 +108,7 @@ impl Component for MyComponent {
コンポーネントは動的で、非同期メッセージを受信するために登録することができます。
ライフサイクルメソッド `update()` はメッセージごとに呼び出されます。
これにより、コンポーネントはメッセージが何であったかに基づいて自身を更新し、自身を再レンダリングする必要があるかどうかを判断することができます。
メッセージは、HTML要素リスナーによってトリガーされたり、子コンポーネント、エージェント、サービス、またはFuturesによって送信されたりします。
メッセージは、HTML 要素リスナーによってトリガーされたり、子コンポーネント、エージェント、サービス、または Futures によって送信されたりします。
`update()`がどのようなのかについての例は以下の通りです:
@ -166,7 +167,7 @@ impl Component for MyComponent {
## Associated Types
`Component`トレイトは2つの関連型があります: `Message`と`Properties`です。
`Component`トレイトは 2 つの関連型があります: `Message`と`Properties`です。
```rust
impl Component for MyComponent {
@ -178,7 +179,7 @@ impl Component for MyComponent {
```
`Message`はコンポーネントによって処理され、何らかの副作用を引き起こすことができるさまざまなメッセージを表します。
例えば、APIリクエストをトリガーしたり、UIコンポーネントの外観を切り替えたりする `Click` メッセージがあります。
例えば、API リクエストをトリガーしたり、UI コンポーネントの外観を切り替えたりする `Click` メッセージがあります。
コンポーネントのモジュールで `Msg` という名前の列挙型を作成し、それをコンポーネントのメッセージ型として使用するのが一般的です。
"message"を"msg"と省略するのも一般的です。
@ -189,9 +190,9 @@ enum Msg {
```
`Properties`は、親からコンポーネントに渡される情報を表します。
この型はProperties traitを実装していなければならず\(通常はこれを派生させることで\)、特定のプロパティが必須かオプションかを指定することができます。
この型は Properties trait を実装していなければならず\(通常はこれを派生させることで\)、特定のプロパティが必須かオプションかを指定することができます。
この型は、コンポーネントの作成・更新時に使用されます。
コンポーネントのモジュール内に `Props` という構造体を作成し、それをコンポーネントの `Properties` 型として使用するのが一般的です。
”Properties”を"props"に短縮するのが一般的です。
Propsは親コンポーネントから継承されるので、アプリケーションのルートコンポーネントは通常`()`型の`Properties`を持ちます。
ルートコンポーネントのプロパティを指定したい場合は、`App::mount_with_props`メソッドを利用します。
Props は親コンポーネントから継承されるので、アプリケーションのルートコンポーネントは通常`()`型の`Properties`を持ちます。
ルートコンポーネントのプロパティを指定したい場合は、`App::mount_with_props`メソッドを利用します。

9
website/i18n/ja/docusaurus-plugin-content-docs/0.17.3/concepts/components/callbacks.mdx
View File

@ -2,6 +2,7 @@
title: Callbacks
description: ComponentLink and Callbacks
---
”リンク”コンポーネントはコンポーネントがコールバックを登録できて自身を更新することができるメカニズムです。
## ComponentLink API
@ -12,11 +13,11 @@ description: ComponentLink and Callbacks
これは、渡されたクロージャから返されるメッセージで `send_self` を呼び出します。
`Fn(IN) -> Vec<COMP::Message>`が渡され、`Callback<IN>`が返されます。
### send\_message
### send_message
現在のループが終了した直後にコンポーネントにメッセージを送信し、別の更新ループを開始します。
### send\_message\_batch
### send_message_batch
実行時に一度に多数のメッセージを一括して送信するコールバックを登録します。
メッセージによってコンポーネントが再レンダリングされる場合、バッチ内のすべてのメッセージが処理された後、コンポーネントは再レンダリングされます。
@ -30,5 +31,5 @@ _\(This might need its own short page.\)_
これらは単に `Fn` を `Rc` でラップしただけであり、クローンを作成できるようにするためのものです。
これらの関数には `emit` 関数があり、`<IN>` 型を引数に取り、それをアドレスが欲しいメッセージに変換します。
親からのコールバックが子コンポーネントにpropsで提供されている場合、子は `update` ライフサイクルフックで `emit` をコールバックに呼び出して親にメッセージを返すことができます。
マクロ内でpropsとして提供されたクロージャや関数は自動的にコールバックに変換されます。
親からのコールバックが子コンポーネントに props で提供されている場合、子は `update` ライフサイクルフックで `emit` をコールバックに呼び出して親にメッセージを返すことができます。
マクロ内で props として提供されたクロージャや関数は自動的にコールバックに変換されます。

15
website/i18n/ja/docusaurus-plugin-content-docs/0.17.3/concepts/components/properties.mdx
View File

@ -2,6 +2,7 @@
title: Properties
description: Parent to child communication
---
プロパティは、子コンポーネントと親コンポーネントが互いに通信できるようにします。
## マクロの継承
@ -17,14 +18,14 @@ description: Parent to child communication
デフォルトでは、`Properties` を導出する構造体内のフィールドは必須です。
フィールドが欠落していて `html!` マクロでコンポーネントが作成された場合、コンパイラエラーが返されます。
オプションのプロパティを持つフィールドについては、`#[prop_or_default]` 属性を使用して、propが指定されていない場合はその型のデフォルト値を使用します。
オプションのプロパティを持つフィールドについては、`#[prop_or_default]` 属性を使用して、prop が指定されていない場合はその型のデフォルト値を使用します。
値を指定するには `#[prop_or(value)]` 属性を用います。
ここでvalueはプロパティのデフォルト値、あるいは代わりに `#[prop_or_else(function)]` を使用して、`function` はデフォルト値を返します。
ここで value はプロパティのデフォルト値、あるいは代わりに `#[prop_or_else(function)]` を使用して、`function` はデフォルト値を返します。
例えば、ブール値のデフォルトを `true` とするには、属性 `#[prop_or(true)]` を使用します。オプションのプロパティでは、デフォルト値 `None` を持つ `Option` 列挙型を使うのが一般的です。
### PartialEq
もし可能ならpropsで `PartialEq` を継承するのが良いかもしれません。
もし可能なら props で `PartialEq` を継承するのが良いかもしれません。
`PartialEq`を使うことで、不必要な再レンダリングを避けることができます
(これについては、**最適化とベストプラクティス**のセクションで説明しています)。
@ -35,12 +36,11 @@ description: Parent to child communication
つまり、それらを作成して子コンポーネントに渡すためには、`view` 関数で提供される参照を所有する必要があるのです。
これは所有する値を取得するためにコンポーネントに渡される参照を暗黙のうちにクローンすることで行われます。
これは、各コンポーネントが親から受け継いだ状態の独自のコピーを持っていることを意味し、コンポーネントを再レンダリングするときはいつでも、再レンダリングしたコンポーネントのすべての子コンポーネントの props がクローンされなければならないことを意味します。
これは、各コンポーネントが親から受け継いだ状態の独自のコピーを持っていることを意味し、コンポーネントを再レンダリングするときはいつでも、再レンダリングしたコンポーネントのすべての子コンポーネントのpropsがクローンされなければならないことを意味します。
このことの意味するところは、もしそうでなければ*大量の*データ \(10KB もあるような文字列\) を props として渡してしまうのであれば、子コンポーネントを親が呼び出す `Html` を返す関数にすることを考えた方がいいかもしれないということです。
このことの意味するところは、もしそうでなければ_大量の_データ \(10KBもあるような文字列\) をpropsとして渡してしまうのであれば、子コンポーネントを親が呼び出す `Html` を返す関数にすることを考えた方がいいかもしれないということです。
propsを介して渡されたデータを変更する必要がない場合は、実際のデータそのものではなく、データへの参照カウントされたポインタのみが複製されるように `Rc` でラップすることができます。
props を介して渡されたデータを変更する必要がない場合は、実際のデータそのものではなく、データへの参照カウントされたポインタのみが複製されるように `Rc` でラップすることができます。
## 例
@ -82,4 +82,3 @@ pub struct LinkProps {
active: bool,
}
```

5
website/i18n/ja/docusaurus-plugin-content-docs/0.17.3/concepts/components/refs.mdx
View File

@ -3,8 +3,8 @@ title: Refs
description: Out-of-band DOM access
---
`ref`は、任意のHTML要素やコンポーネントの内部で、割り当てられているDOM`Element`を取得するために使用することができます。
これは、`view` ライフサイクルメソッドの外でDOMに変更を加えるために使用できます。
`ref`は、任意の HTML 要素やコンポーネントの内部で、割り当てられている DOM`Element`を取得するために使用することができます。
これは、`view` ライフサイクルメソッドの外で DOM に変更を加えるために使用できます。
これは、キャンバスの要素を取得したり、ページの異なるセクションにスクロールしたりするのに便利です。
@ -22,4 +22,3 @@ html! {
// In update
let has_attributes = self.node_ref.try_into::<Element>().has_attributes();
```

10
website/i18n/ja/docusaurus-plugin-content-docs/0.17.3/concepts/html.mdx
View File

@ -3,12 +3,12 @@ title: Introduction
description: The procedural macro for generating HTML and SVG
---
`html!`マクロによってHTMLとSVGのコードを宣言的に書くことができます。
JSX \(HTMLのようなコードをJavaScript内部に書くことができるJavaScriptの拡張\) に似ています。
`html!`マクロによって HTML と SVG のコードを宣言的に書くことができます。
JSX \(HTML のようなコードを JavaScript 内部に書くことができる JavaScript の拡張\) に似ています。
**重要な注意**
1. `html!`マクロはルートのHTMLノードのみ受け付けます \([フラグメントかイテレータを使う](html/lists.mdx)ことでやり取りできます\)
1. `html!`マクロはルートの HTML ノードのみ受け付けます \([フラグメントかイテレータを使う](html/lists.mdx)ことでやり取りできます\)
2. 空の`html! {}`の呼び出しは可能ですが何もレンダリングしません
3. リテラルはクオーテーションがつけられ、ブレースで囲う必要があります: `html! { "Hello, World" }`
@ -17,5 +17,5 @@ JSX \(HTMLのようなコードをJavaScript内部に書くことができるJav
もしコンパイラエラーに遭遇した場合はその値を押し出すといいかもしれません。
クレートのルート\(つまり、`lib.rs`か`main.rs`\)で`#![recursion_limit="1024"]`のような属性を使えば解決します。
詳しくは[公式ドキュメント](https://doc.rust-lang.org/reference/attributes/limits.html#the-recursion_limit-attribute)と[Stack Overflowの質問](https://stackoverflow.com/questions/27454761/what-is-a-crate-attribute-and-where-do-i-add-it)を見てみてください。
:::
詳しくは[公式ドキュメント](https://doc.rust-lang.org/reference/attributes/limits.html#the-recursion_limit-attribute)と[Stack Overflow の質問](https://stackoverflow.com/questions/27454761/what-is-a-crate-attribute-and-where-do-i-add-it)を見てみてください。
:::

6
website/i18n/ja/docusaurus-plugin-content-docs/0.17.3/concepts/html/components.mdx
View File

@ -2,6 +2,7 @@
title: Components
description: Create complex layouts with component hierarchies
---
## 基本
`Component`を実装しているあらゆる型は`html!`マクロの中で使えます:
@ -62,12 +63,12 @@ impl Component for Container {
これは`#[derive(Properties, Clone)]`を使うか手で`Clone`を実装すれば良いです。
:::
## Propsとネストした子コンポーネント
## Props とネストした子コンポーネント
ネストしたコンポーネントのプロパティは格納しているコンポーネントの型が子である場合はアクセス可能、または変更可能です。
以下の例では`List`コンポーネントは`ListItem`コンポーネントをラップできています。
実際の使用においてこのパターンの例については`yew-router`のソースコードを確認してみてください。
より進んだ例としてはYewのメインのリポジトリにある`nested-list`を確認してみてください。
より進んだ例としては Yew のメインのリポジトリにある`nested-list`を確認してみてください。
```rust title="parent.rs"
html! {
@ -102,4 +103,3 @@ impl Component for List {
}
}
```

221
website/i18n/ja/docusaurus-plugin-content-docs/0.17.3/concepts/html/elements.mdx
View File

@ -2,18 +2,22 @@
title: Elements
description: Both HTML and SVG elements are supported
---
## タグ構造
要素のタグは`<... />`のような自己完結タグか、開始タグに対応した終了タグを持っている必要があります。
<!--DOCUSAURUS_CODE_TABS-->
<!--Open - Close-->
```rust
html! {
<div id="my_div"></div>
}
```
<!--Invalid-->
```rust
html! {
<div id="my_div"> // <- MISSING CLOSE TAG
@ -21,6 +25,7 @@ html! {
```
<!--Self-closing-->
```rust
html! {
<input id="my_input" />
@ -28,22 +33,25 @@ html! {
```
<!--Invalid-->
```rust
html! {
<input id="my_input"> // <- MISSING SELF-CLOSE
}
```
<!--END_DOCUSAURUS_CODE_TABS-->
:::note
便利さのために、_普通は_終了タグを必要とする要素は自己完結タグとすることが**できます**。
便利さのために、*普通は*終了タグを必要とする要素は自己完結タグとすることが**できます**。
例えば`html! { <div class="placeholder" /> }`と書くのは有効です。
:::
## 子
複雑にネストしたHTMLやSVGのレイアウトを書くのには以下のようにするのが楽です:
**
複雑にネストした HTML や SVG のレイアウトを書くのには以下のようにするのが楽です:
\*\*
<!--DOCUSAURUS_CODE_TABS-->
<!--HTML-->
@ -87,6 +95,7 @@ html! {
</svg>
}
```
<!--END_DOCUSAURUS_CODE_TABS-->
## クラス
@ -95,6 +104,7 @@ html! {
<!--DOCUSAURUS_CODE_TABS-->
<!--Literal-->
```rust
html! {
<div class="container"></div>
@ -102,6 +112,7 @@ html! {
```
<!--Multiple-->
```rust
html! {
<div class="container center-align"></div>
@ -109,6 +120,7 @@ html! {
```
<!--Interpolated-->
```rust
html! {
<div class=format!("{}-container", size)></div>
@ -116,6 +128,7 @@ html! {
```
<!--Expression-->
```rust
html! {
<div class=self.classes()></div>
@ -123,6 +136,7 @@ html! {
```
<!--Tuple-->
```rust
html! {
<div class=("class-1", "class-2")></div>
@ -130,11 +144,13 @@ html! {
```
<!--Vector-->
```rust
html! {
<div class=vec!["class-1", "class-2"]></div>
}
```
<!--END_DOCUSAURUS_CODE_TABS-->
## リスナー
@ -144,6 +160,7 @@ html! {
<!--DOCUSAURUS_CODE_TABS-->
<!--Component handler-->
```rust
struct MyComponent {
link: ComponentLink<Self>,
@ -215,6 +232,7 @@ impl Component for MyComponent {
```
<!--Other Cases-->
```rust
struct MyComponent;
@ -244,6 +262,7 @@ impl Component for MyComponent {
}
}
```
<!--END_DOCUSAURUS_CODE_TABS-->
## イベントの型
@ -257,104 +276,104 @@ impl Component for MyComponent {
:::note
以下のテーブルにある全てのイベントの型は`yew::events`で再エクスポートされています。
All the event types mentioned in the following table are re-exported under `yew::events`. Using the types from
`yew::events` makes it easier to ensure version compatibility than if you were to manually include `web-sys`
`yew::events` makes it easier to ensure version compatibility than if you were to manually include `web-sys`
or `stdweb` as dependencies in your crate because you won't end up using a version which conflicts with
the version Yew specifies.
the version Yew specifies.
:::
| イベント名 | `web_sys` イベント型 | `stdweb` イベント型 |
| ----------- | -------------------- | ------------------ |
| `onabort` | [Event](https://docs.rs/web-sys/latest/web_sys/struct.Event.html) | [ResourceAbortEvent](https://docs.rs/stdweb/latest/stdweb/web/event/struct.ResourceAbortEvent.html) |
| `onauxclick` | [MouseEvent](https://docs.rs/web-sys/latest/web_sys/struct.MouseEvent.html) | [AuxClickEvent](https://docs.rs/stdweb/latest/stdweb/web/event/struct.AuxClickEvent.html) |
| `onblur` | [FocusEvent](https://docs.rs/web-sys/latest/web_sys/struct.FocusEvent.html) | [BlurEvent](https://docs.rs/stdweb/latest/stdweb/web/event/struct.BlurEvent.html) |
| `oncancel` | [Event](https://docs.rs/web-sys/latest/web_sys/struct.Event.html) | サポート無し |
| `oncanplay` | [Event](https://docs.rs/web-sys/latest/web_sys/struct.Event.html) | サポート無し |
| `oncanplaythrough` | [Event](https://docs.rs/web-sys/latest/web_sys/struct.Event.html) | サポート無し |
| `onchange` | [ChangeData](https://docs.rs/yew/latest/yew/events/enum.ChangeData.html) | [ChangeData](https://docs.rs/yew-stdweb/latest/yew_stdweb/events/enum.ChangeData.html) |
| `onclick` | [MouseEvent](https://docs.rs/web-sys/latest/web_sys/struct.MouseEvent.html) | [ClickEvent](https://docs.rs/stdweb/latest/stdweb/web/event/struct.ClickEvent.html) |
| `onclose` | [Event](https://docs.rs/web-sys/latest/web_sys/struct.Event.html) | サポート無し |
| `oncontextmenu` | [MouseEvent](https://docs.rs/web-sys/latest/web_sys/struct.MouseEvent.html) | [ContextMenuEvent](https://docs.rs/stdweb/latest/stdweb/web/event/struct.ContextMenuEvent.html) |
| `oncuechange` | [Event](https://docs.rs/web-sys/latest/web_sys/struct.Event.html) | サポート無し |
| `ondblclick` | [MouseEvent](https://docs.rs/web-sys/latest/web_sys/struct.MouseEvent.html) | [DoubleClickEvent](https://docs.rs/stdweb/latest/stdweb/web/event/struct.DoubleClickEvent.html) |
| `ondrag` | [DragEvent](https://docs.rs/web-sys/latest/web_sys/struct.DragEvent.html) | [DragEvent](https://docs.rs/stdweb/latest/stdweb/web/event/struct.DragEvent.html) |
| `ondragend` | [DragEvent](https://docs.rs/web-sys/latest/web_sys/struct.DragEvent.html) | [DragEndEvent](https://docs.rs/stdweb/latest/stdweb/web/event/struct.DragEndEvent.html) |
| `ondragenter` | [DragEvent](https://docs.rs/web-sys/latest/web_sys/struct.DragEvent.html) | [DragEnterEvent](https://docs.rs/stdweb/latest/stdweb/web/event/struct.DragEnterEvent.html) |
| `ondragexit` | [DragEvent](https://docs.rs/web-sys/latest/web_sys/struct.DragEvent.html) | [DragExitEvent](https://docs.rs/stdweb/latest/stdweb/web/event/struct.DragExitEvent.html) |
| `ondragleave` | [DragEvent](https://docs.rs/web-sys/latest/web_sys/struct.DragEvent.htmk) | [DragLeaveEvent](https://docs.rs/stdweb/latest/stdweb/web/event/struct.DragLeaveEvent.html) |
| `ondragover` | [DragEvent](https://docs.rs/web-sys/latest/web_sys/struct.DragEvent.html) | [DragOverEvent](https://docs.rs/stdweb/latest/stdweb/web/event/struct.DragOverEvent.html) |
| `ondragstart` | [DragEvent](https://docs.rs/web-sys/latest/web_sys/struct.DragEvent.html) | [DragStartEvent](https://docs.rs/stdweb/latest/stdweb/web/event/struct.DragStartEvent.html) |
| `ondrop` | [DragEvent](https://docs.rs/web-sys/latest/web_sys/struct.DragEvent.html) | [DragDropEvent](https://docs.rs/stdweb/latest/stdweb/web/event/struct.DragDropEvent.html) |
| `ondurationchange` | [Event](https://docs.rs/web-sys/latest/web_sys/struct.Event.html) | サポート無し |
| `onemptied` | [Event](https://docs.rs/web-sys/latest/web_sys/struct.Event.html) | サポート無し |
| `onended` | [Event](https://docs.rs/web-sys/latest/web_sys/struct.Event.html) | サポート無し |
| `onerror` | [Event](https://docs.rs/web-sys/latest/web_sys/struct.Event.html) | [ResourceErrorEvent](https://docs.rs/stdweb/latest/stdweb/web/event/struct.ResourceErrorEvent.html) |
| `onfocus` | [FocusEvent](https://docs.rs/web-sys/latest/web_sys/struct.FocusEvent.html) | [FocusEvent](https://docs.rs/stdweb/latest/stdweb/web/event/struct.FocusEvent.html) |
| `onformdata` | [Event](https://docs.rs/web-sys/latest/web_sys/struct.Event.html) | サポート無し |
| `oninput` | [InputData](https://docs.rs/yew/latest/yew/events/struct.InputData.html) | [InputData](https://docs.rs/yew-stdweb/latest/yew_stdweb/events/struct.InputData.html) |
| `oninvalid` | [Event](https://docs.rs/web-sys/latest/web_sys/struct.Event.html) | サポート無し |
| `onkeydown` | [KeyboardEvent](https://docs.rs/web-sys/latest/web_sys/struct.KeyboardEvent.html) | [KeyDownEvent](https://docs.rs/stdweb/latest/stdweb/web/event/struct.KeyDownEvent.html) |
| `onkeypress` | [KeyboardEvent](https://docs.rs/web-sys/latest/web_sys/struct.KeyboardEvent.html) | [KeyPressEvent](https://docs.rs/stdweb/latest/stdweb/web/event/struct.KeyPressEvent.html) |
| `onkeyup` | [KeyboardEvent](https://docs.rs/web-sys/latest/web_sys/struct.KeyboardEvent.html) | [KeyUpEvent](https://docs.rs/stdweb/latest/stdweb/web/event/struct.KeyUpEvent.html) |
| `onload` | [Event](https://docs.rs/web-sys/latest/web_sys/struct.Event.html) | [ResourceLoadEvent](https://docs.rs/stdweb/latest/stdweb/web/event/struct.ResourceLoadEvent.html) |
| `onloadeddata` | [Event](https://docs.rs/web-sys/latest/web_sys/struct.Event.html) | サポート無し |
| `onloadedmetadata` | [Event](https://docs.rs/web-sys/latest/web_sys/struct.Event.html) | サポート無し |
| `onloadstart` | [ProgressEvent](https://docs.rs/web-sys/latest/web_sys/struct.ProgressEvent.html) | [LoadStartEvent](https://docs.rs/stdweb/latest/stdweb/web/event/struct.LoadStartEvent.html) |
| `onmousedown` | [MouseEvent](https://docs.rs/web-sys/latest/web_sys/struct.MouseEvent.html) | [MouseDownEvent](https://docs.rs/stdweb/latest/stdweb/web/event/struct.MouseDownEvent.html) |
| `onmouseenter` | [MouseEvent](https://docs.rs/web-sys/latest/web_sys/struct.MouseEvent.html) | [MouseEnterEvent](https://docs.rs/stdweb/latest/stdweb/web/event/struct.MouseEnterEvent.html) |
| `onmouseleave` | [MouseEvent](https://docs.rs/web-sys/latest/web_sys/struct.MouseEvent.html) | [MouseLeaveEvent](https://docs.rs/stdweb/latest/stdweb/web/event/struct.MouseLeaveEvent.html) |
| `onmousemove` | [MouseEvent](https://docs.rs/web-sys/latest/web_sys/struct.MouseEvent.html) | [MouseMoveEvent](https://docs.rs/stdweb/latest/stdweb/web/event/struct.MouseMoveEvent.html) |
| `onmouseout` | [MouseEvent](https://docs.rs/web-sys/latest/web_sys/struct.MouseEvent.html) | [MouseOutEvent](https://docs.rs/stdweb/latest/stdweb/web/event/struct.MouseOutEvent.html) |
| `onmouseover` | [MouseEvent](https://docs.rs/web-sys/latest/web_sys/struct.MouseEvent.html) | [MouseOverEvent](https://docs.rs/stdweb/latest/stdweb/web/event/struct.MouseOverEvent.html) |
| `onmouseup` | [MouseEvent](https://docs.rs/web-sys/latest/web_sys/struct.MouseEvent.html) | [MouseUpEvent](https://docs.rs/stdweb/latest/stdweb/web/event/struct.MouseUpEvent.html) |
| `onpause` | [Event](https://docs.rs/web-sys/latest/web_sys/struct.Event.html) | サポート無し |
| `onplay` | [Event](https://docs.rs/web-sys/latest/web_sys/struct.Event.html) | サポート無し |
| `onplaying` | [Event](https://docs.rs/web-sys/latest/web_sys/struct.Event.html) | サポート無し |
| `onprogress` | [ProgressEvent](https://docs.rs/web-sys/latest/web_sys/struct.ProgressEvent.html) | [ProgressEvent](https://docs.rs/stdweb/latest/stdweb/web/event/struct.ProgressEvent.html) |
| `onratechange` | [Event](https://docs.rs/web-sys/latest/web_sys/struct.Event.html) | サポート無し |
| `onreset` | [Event](https://docs.rs/web-sys/latest/web_sys/struct.Event.html) | サポート無し |
| `onresize` | [Event](https://docs.rs/web-sys/latest/web_sys/struct.Event.html) | [ResizeEvent](https://docs.rs/stdweb/latest/stdweb/web/event/struct.ResizeEvent.html) |
| `onscroll` | [Event](https://docs.rs/web-sys/latest/web_sys/struct.Event.html) | [ScrollEvent](https://docs.rs/stdweb/latest/stdweb/web/event/struct.ScrollEvent.html) |
| `onsecuritypolicyviolation` | [Event](https://docs.rs/web-sys/latest/web_sys/struct.Event.html) | サポート無し |
| `onseeked` | [Event](https://docs.rs/web-sys/latest/web_sys/struct.Event.html) | サポート無し |
| `onseeking` | [Event](https://docs.rs/web-sys/latest/web_sys/struct.Event.html) | サポート無し |
| `onselect` | [Event](https://docs.rs/web-sys/latest/web_sys/struct.Event.html) | サポート無し |
| `onslotchange` | [Event](https://docs.rs/web-sys/latest/web_sys/struct.Event.html) | [SlotChangeEvent](https://docs.rs/stdweb/latest/stdweb/web/event/struct.SlotChangeEvent.html) |
| `onstalled` | [Event](https://docs.rs/web-sys/latest/web_sys/struct.Event.html) | サポート無し |
| `onsubmit` | [FocusEvent](https://docs.rs/web-sys/latest/web_sys/struct.FocusEvent.html) | [SubmitEvent](https://docs.rs/stdweb/latest/stdweb/web/event/struct.SubmitEvent.html) |
| `onsuspend` | [Event](https://docs.rs/web-sys/latest/web_sys/struct.Event.html) | サポート無し |
| `ontimeupdate` | [Event](https://docs.rs/web-sys/latest/web_sys/struct.Event.html) | サポート無し |
| `ontoggle` | [Event](https://docs.rs/web-sys/latest/web_sys/struct.Event.html) | サポート無し |
| `onvolumechange` | [Event](https://docs.rs/web-sys/latest/web_sys/struct.Event.html) | サポート無し |
| `onwaiting` | [Event](https://docs.rs/web-sys/latest/web_sys/struct.Event.html) | サポート無し |
| `onwheel` | [WheelEvent](https://docs.rs/web-sys/latest/web_sys/struct.WheelEvent.html) | [MouseWheelEvent](https://docs.rs/stdweb/latest/stdweb/web/event/struct.MouseWheelEvent.html) |
| `oncopy` | [Event](https://docs.rs/web-sys/latest/web_sys/struct.Event.html) | サポート無し |
| `oncut` | [Event](https://docs.rs/web-sys/latest/web_sys/struct.Event.html) | サポート無し |
| `onpaste` | [Event](https://docs.rs/web-sys/latest/web_sys/struct.Event.html) | サポート無し |
| `onanimationcancel` | [AnimationEvent](https://docs.rs/web-sys/latest/web_sys/struct.AnimationEvent.html) | サポート無し |
| `onanimationend` | [AnimationEvent](https://docs.rs/web-sys/latest/web_sys/struct.AnimationEvent.html) | サポート無し |
| `onanimationiteration` | [AnimationEvent](https://docs.rs/web-sys/latest/web_sys/struct.AnimationEvent.html) | サポート無し |
| `onanimationstart` | [AnimationEvent](https://docs.rs/web-sys/latest/web_sys/struct.AnimationEvent.html) | サポート無し |
| `ongotpointercapture` | [PointerEvent](https://docs.rs/web-sys/latest/web_sys/struct.PointerEvent.html) | [GotPointerCaptureEvent](https://docs.rs/stdweb/latest/stdweb/web/event/struct.GotPointerCaptureEvent.html) |
| `onloadend` | [ProgressEvent](https://docs.rs/web-sys/latest/web_sys/struct.ProgressEvent.html) | [LoadEndEvent](https://docs.rs/stdweb/latest/stdweb/web/event/struct.LoadEndEvent.html) |
| `onlostpointercapture` | [PointerEvent](https://docs.rs/web-sys/latest/web_sys/struct.PointerEvent.html) | [LostPointerCaptureEvent](https://docs.rs/stdweb/latest/stdweb/web/event/struct.LostPointerCaptureEvent.html) |
| `onpointercancel` | [PointerEvent](https://docs.rs/web-sys/latest/web_sys/struct.PointerEvent.html) | [PointerCancelEvent](https://docs.rs/stdweb/latest/stdweb/web/event/struct.PointerCancelEvent.html) |
| `onpointerdown` | [PointerEvent](https://docs.rs/web-sys/latest/web_sys/struct.PointerEvent.html) | [PointerDownEvent](https://docs.rs/stdweb/latest/stdweb/web/event/struct.PointerDownEvent.html) |
| `onpointerenter` | [PointerEvent](https://docs.rs/web-sys/latest/web_sys/struct.PointerEvent.html) | [PointerEnterEvent](https://docs.rs/stdweb/latest/stdweb/web/event/struct.PointerEnterEvent.html) |
| `onpointerleave` | [PointerEvent](https://docs.rs/web-sys/latest/web_sys/struct.PointerEvent.html) | [PointerLeaveEvent](https://docs.rs/stdweb/latest/stdweb/web/event/struct.PointerLeaveEvent.html) |
| `onpointerlockchange` | [Event](https://docs.rs/web-sys/latest/web_sys/struct.Event.html) | [PointerLockChangeEvent](https://docs.rs/stdweb/latest/stdweb/web/event/struct.PointerLockChangeEvent.html) |
| `onpointerlockerror` | [Event](https://docs.rs/web-sys/latest/web_sys/struct.Event.html) | [PointerLockErrorEvent](https://docs.rs/stdweb/latest/stdweb/web/event/struct.PointerLockErrorEvent.html) |
| `onpointermove` | [PointerEvent](https://docs.rs/web-sys/latest/web_sys/struct.PointerEvent.html) | [PointerMoveEvent](https://docs.rs/stdweb/latest/stdweb/web/event/struct.PointerMoveEvent.html) |
| `onpointerout` | [PointerEvent](https://docs.rs/web-sys/latest/web_sys/struct.PointerEvent.html) | [PointerOutEvent](https://docs.rs/stdweb/latest/stdweb/web/event/struct.PointerOutEvent.html) |
| `onpointerover` | [PointerEvent](https://docs.rs/web-sys/latest/web_sys/struct.PointerEvent.html) | [PointerOverEvent](https://docs.rs/stdweb/latest/stdweb/web/event/struct.PointerOverEvent.html) |
| `onpointerup` | [PointerEvent](https://docs.rs/web-sys/latest/web_sys/struct.PointerEvent.html) | [PointerUpEvent](https://docs.rs/stdweb/latest/stdweb/web/event/struct.PointerUpEvent.html) |
| `onselectionchange` | [Event](https://docs.rs/web-sys/latest/web_sys/struct.Event.html) | [SelectionChangeEvent](https://docs.rs/stdweb/latest/stdweb/web/event/struct.SelectionChangeEvent.html) |
| `onselectstart` | [Event](https://docs.rs/web-sys/latest/web_sys/struct.Event.html) | サポート無し |
| `onshow` | [Event](https://docs.rs/web-sys/latest/web_sys/struct.Event.html) | サポート無し |
| `ontouchcancel` | [TouchEvent](https://docs.rs/web-sys/latest/web_sys/struct.TouchEvent.html) | [TouchCancel](https://docs.rs/stdweb/latest/stdweb/web/event/struct.TouchCancel.html) |
| `ontouchend` | [TouchEvent](https://docs.rs/web-sys/latest/web_sys/struct.TouchEvent.html) | [TouchEnd](https://docs.rs/stdweb/latest/stdweb/web/event/struct.TouchEnd.html) |
| `ontouchmove` | [TouchEvent](https://docs.rs/web-sys/latest/web_sys/struct.TouchEvent.html) | [TouchMove](https://docs.rs/stdweb/latest/stdweb/web/event/struct.TouchMove.html) |
| `ontouchstart` | [TouchEvent](https://docs.rs/web-sys/latest/web_sys/struct.TouchEvent.html) | [TouchStart](https://docs.rs/stdweb/latest/stdweb/web/event/struct.TouchStart.html) |
| `ontransitioncancel` | [TransitionEvent](https://docs.rs/web-sys/latest/web_sys/struct.TransitionEvent.html) | サポート無し |
| `ontransitionend` | [TransitionEvent](https://docs.rs/web-sys/latest/web_sys/struct.TransitionEvent.html) | サポート無し |
| `ontransitionrun` | [TransitionEvent](https://docs.rs/web-sys/latest/web_sys/struct.TransitionEvent.html) | サポート無し |
| `ontransitionstart` | [TransitionEvent](https://docs.rs/web-sys/latest/web_sys/struct.TransitionEvent.html) | サポート無し |
| イベント名 | `web_sys` イベント型 | `stdweb` イベント型 |
| --------------------------- | ------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------- |
| `onabort` | [Event](https://docs.rs/web-sys/latest/web_sys/struct.Event.html) | [ResourceAbortEvent](https://docs.rs/stdweb/latest/stdweb/web/event/struct.ResourceAbortEvent.html) |
| `onauxclick` | [MouseEvent](https://docs.rs/web-sys/latest/web_sys/struct.MouseEvent.html) | [AuxClickEvent](https://docs.rs/stdweb/latest/stdweb/web/event/struct.AuxClickEvent.html) |
| `onblur` | [FocusEvent](https://docs.rs/web-sys/latest/web_sys/struct.FocusEvent.html) | [BlurEvent](https://docs.rs/stdweb/latest/stdweb/web/event/struct.BlurEvent.html) |
| `oncancel` | [Event](https://docs.rs/web-sys/latest/web_sys/struct.Event.html) | サポート無し |
| `oncanplay` | [Event](https://docs.rs/web-sys/latest/web_sys/struct.Event.html) | サポート無し |
| `oncanplaythrough` | [Event](https://docs.rs/web-sys/latest/web_sys/struct.Event.html) | サポート無し |
| `onchange` | [ChangeData](https://docs.rs/yew/latest/yew/events/enum.ChangeData.html) | [ChangeData](https://docs.rs/yew-stdweb/latest/yew_stdweb/events/enum.ChangeData.html) |
| `onclick` | [MouseEvent](https://docs.rs/web-sys/latest/web_sys/struct.MouseEvent.html) | [ClickEvent](https://docs.rs/stdweb/latest/stdweb/web/event/struct.ClickEvent.html) |
| `onclose` | [Event](https://docs.rs/web-sys/latest/web_sys/struct.Event.html) | サポート無し |
| `oncontextmenu` | [MouseEvent](https://docs.rs/web-sys/latest/web_sys/struct.MouseEvent.html) | [ContextMenuEvent](https://docs.rs/stdweb/latest/stdweb/web/event/struct.ContextMenuEvent.html) |
| `oncuechange` | [Event](https://docs.rs/web-sys/latest/web_sys/struct.Event.html) | サポート無し |
| `ondblclick` | [MouseEvent](https://docs.rs/web-sys/latest/web_sys/struct.MouseEvent.html) | [DoubleClickEvent](https://docs.rs/stdweb/latest/stdweb/web/event/struct.DoubleClickEvent.html) |
| `ondrag` | [DragEvent](https://docs.rs/web-sys/latest/web_sys/struct.DragEvent.html) | [DragEvent](https://docs.rs/stdweb/latest/stdweb/web/event/struct.DragEvent.html) |
| `ondragend` | [DragEvent](https://docs.rs/web-sys/latest/web_sys/struct.DragEvent.html) | [DragEndEvent](https://docs.rs/stdweb/latest/stdweb/web/event/struct.DragEndEvent.html) |
| `ondragenter` | [DragEvent](https://docs.rs/web-sys/latest/web_sys/struct.DragEvent.html) | [DragEnterEvent](https://docs.rs/stdweb/latest/stdweb/web/event/struct.DragEnterEvent.html) |
| `ondragexit` | [DragEvent](https://docs.rs/web-sys/latest/web_sys/struct.DragEvent.html) | [DragExitEvent](https://docs.rs/stdweb/latest/stdweb/web/event/struct.DragExitEvent.html) |
| `ondragleave` | [DragEvent](https://docs.rs/web-sys/latest/web_sys/struct.DragEvent.htmk) | [DragLeaveEvent](https://docs.rs/stdweb/latest/stdweb/web/event/struct.DragLeaveEvent.html) |
| `ondragover` | [DragEvent](https://docs.rs/web-sys/latest/web_sys/struct.DragEvent.html) | [DragOverEvent](https://docs.rs/stdweb/latest/stdweb/web/event/struct.DragOverEvent.html) |
| `ondragstart` | [DragEvent](https://docs.rs/web-sys/latest/web_sys/struct.DragEvent.html) | [DragStartEvent](https://docs.rs/stdweb/latest/stdweb/web/event/struct.DragStartEvent.html) |
| `ondrop` | [DragEvent](https://docs.rs/web-sys/latest/web_sys/struct.DragEvent.html) | [DragDropEvent](https://docs.rs/stdweb/latest/stdweb/web/event/struct.DragDropEvent.html) |
| `ondurationchange` | [Event](https://docs.rs/web-sys/latest/web_sys/struct.Event.html) | サポート無し |
| `onemptied` | [Event](https://docs.rs/web-sys/latest/web_sys/struct.Event.html) | サポート無し |
| `onended` | [Event](https://docs.rs/web-sys/latest/web_sys/struct.Event.html) | サポート無し |
| `onerror` | [Event](https://docs.rs/web-sys/latest/web_sys/struct.Event.html) | [ResourceErrorEvent](https://docs.rs/stdweb/latest/stdweb/web/event/struct.ResourceErrorEvent.html) |
| `onfocus` | [FocusEvent](https://docs.rs/web-sys/latest/web_sys/struct.FocusEvent.html) | [FocusEvent](https://docs.rs/stdweb/latest/stdweb/web/event/struct.FocusEvent.html) |
| `onformdata` | [Event](https://docs.rs/web-sys/latest/web_sys/struct.Event.html) | サポート無し |
| `oninput` | [InputData](https://docs.rs/yew/latest/yew/events/struct.InputData.html) | [InputData](https://docs.rs/yew-stdweb/latest/yew_stdweb/events/struct.InputData.html) |
| `oninvalid` | [Event](https://docs.rs/web-sys/latest/web_sys/struct.Event.html) | サポート無し |
| `onkeydown` | [KeyboardEvent](https://docs.rs/web-sys/latest/web_sys/struct.KeyboardEvent.html) | [KeyDownEvent](https://docs.rs/stdweb/latest/stdweb/web/event/struct.KeyDownEvent.html) |
| `onkeypress` | [KeyboardEvent](https://docs.rs/web-sys/latest/web_sys/struct.KeyboardEvent.html) | [KeyPressEvent](https://docs.rs/stdweb/latest/stdweb/web/event/struct.KeyPressEvent.html) |
| `onkeyup` | [KeyboardEvent](https://docs.rs/web-sys/latest/web_sys/struct.KeyboardEvent.html) | [KeyUpEvent](https://docs.rs/stdweb/latest/stdweb/web/event/struct.KeyUpEvent.html) |
| `onload` | [Event](https://docs.rs/web-sys/latest/web_sys/struct.Event.html) | [ResourceLoadEvent](https://docs.rs/stdweb/latest/stdweb/web/event/struct.ResourceLoadEvent.html) |
| `onloadeddata` | [Event](https://docs.rs/web-sys/latest/web_sys/struct.Event.html) | サポート無し |
| `onloadedmetadata` | [Event](https://docs.rs/web-sys/latest/web_sys/struct.Event.html) | サポート無し |
| `onloadstart` | [ProgressEvent](https://docs.rs/web-sys/latest/web_sys/struct.ProgressEvent.html) | [LoadStartEvent](https://docs.rs/stdweb/latest/stdweb/web/event/struct.LoadStartEvent.html) |
| `onmousedown` | [MouseEvent](https://docs.rs/web-sys/latest/web_sys/struct.MouseEvent.html) | [MouseDownEvent](https://docs.rs/stdweb/latest/stdweb/web/event/struct.MouseDownEvent.html) |
| `onmouseenter` | [MouseEvent](https://docs.rs/web-sys/latest/web_sys/struct.MouseEvent.html) | [MouseEnterEvent](https://docs.rs/stdweb/latest/stdweb/web/event/struct.MouseEnterEvent.html) |
| `onmouseleave` | [MouseEvent](https://docs.rs/web-sys/latest/web_sys/struct.MouseEvent.html) | [MouseLeaveEvent](https://docs.rs/stdweb/latest/stdweb/web/event/struct.MouseLeaveEvent.html) |
| `onmousemove` | [MouseEvent](https://docs.rs/web-sys/latest/web_sys/struct.MouseEvent.html) | [MouseMoveEvent](https://docs.rs/stdweb/latest/stdweb/web/event/struct.MouseMoveEvent.html) |
| `onmouseout` | [MouseEvent](https://docs.rs/web-sys/latest/web_sys/struct.MouseEvent.html) | [MouseOutEvent](https://docs.rs/stdweb/latest/stdweb/web/event/struct.MouseOutEvent.html) |
| `onmouseover` | [MouseEvent](https://docs.rs/web-sys/latest/web_sys/struct.MouseEvent.html) | [MouseOverEvent](https://docs.rs/stdweb/latest/stdweb/web/event/struct.MouseOverEvent.html) |
| `onmouseup` | [MouseEvent](https://docs.rs/web-sys/latest/web_sys/struct.MouseEvent.html) | [MouseUpEvent](https://docs.rs/stdweb/latest/stdweb/web/event/struct.MouseUpEvent.html) |
| `onpause` | [Event](https://docs.rs/web-sys/latest/web_sys/struct.Event.html) | サポート無し |
| `onplay` | [Event](https://docs.rs/web-sys/latest/web_sys/struct.Event.html) | サポート無し |
| `onplaying` | [Event](https://docs.rs/web-sys/latest/web_sys/struct.Event.html) | サポート無し |
| `onprogress` | [ProgressEvent](https://docs.rs/web-sys/latest/web_sys/struct.ProgressEvent.html) | [ProgressEvent](https://docs.rs/stdweb/latest/stdweb/web/event/struct.ProgressEvent.html) |
| `onratechange` | [Event](https://docs.rs/web-sys/latest/web_sys/struct.Event.html) | サポート無し |
| `onreset` | [Event](https://docs.rs/web-sys/latest/web_sys/struct.Event.html) | サポート無し |
| `onresize` | [Event](https://docs.rs/web-sys/latest/web_sys/struct.Event.html) | [ResizeEvent](https://docs.rs/stdweb/latest/stdweb/web/event/struct.ResizeEvent.html) |
| `onscroll` | [Event](https://docs.rs/web-sys/latest/web_sys/struct.Event.html) | [ScrollEvent](https://docs.rs/stdweb/latest/stdweb/web/event/struct.ScrollEvent.html) |
| `onsecuritypolicyviolation` | [Event](https://docs.rs/web-sys/latest/web_sys/struct.Event.html) | サポート無し |
| `onseeked` | [Event](https://docs.rs/web-sys/latest/web_sys/struct.Event.html) | サポート無し |
| `onseeking` | [Event](https://docs.rs/web-sys/latest/web_sys/struct.Event.html) | サポート無し |
| `onselect` | [Event](https://docs.rs/web-sys/latest/web_sys/struct.Event.html) | サポート無し |
| `onslotchange` | [Event](https://docs.rs/web-sys/latest/web_sys/struct.Event.html) | [SlotChangeEvent](https://docs.rs/stdweb/latest/stdweb/web/event/struct.SlotChangeEvent.html) |
| `onstalled` | [Event](https://docs.rs/web-sys/latest/web_sys/struct.Event.html) | サポート無し |
| `onsubmit` | [FocusEvent](https://docs.rs/web-sys/latest/web_sys/struct.FocusEvent.html) | [SubmitEvent](https://docs.rs/stdweb/latest/stdweb/web/event/struct.SubmitEvent.html) |
| `onsuspend` | [Event](https://docs.rs/web-sys/latest/web_sys/struct.Event.html) | サポート無し |
| `ontimeupdate` | [Event](https://docs.rs/web-sys/latest/web_sys/struct.Event.html) | サポート無し |
| `ontoggle` | [Event](https://docs.rs/web-sys/latest/web_sys/struct.Event.html) | サポート無し |
| `onvolumechange` | [Event](https://docs.rs/web-sys/latest/web_sys/struct.Event.html) | サポート無し |
| `onwaiting` | [Event](https://docs.rs/web-sys/latest/web_sys/struct.Event.html) | サポート無し |
| `onwheel` | [WheelEvent](https://docs.rs/web-sys/latest/web_sys/struct.WheelEvent.html) | [MouseWheelEvent](https://docs.rs/stdweb/latest/stdweb/web/event/struct.MouseWheelEvent.html) |
| `oncopy` | [Event](https://docs.rs/web-sys/latest/web_sys/struct.Event.html) | サポート無し |
| `oncut` | [Event](https://docs.rs/web-sys/latest/web_sys/struct.Event.html) | サポート無し |
| `onpaste` | [Event](https://docs.rs/web-sys/latest/web_sys/struct.Event.html) | サポート無し |
| `onanimationcancel` | [AnimationEvent](https://docs.rs/web-sys/latest/web_sys/struct.AnimationEvent.html) | サポート無し |
| `onanimationend` | [AnimationEvent](https://docs.rs/web-sys/latest/web_sys/struct.AnimationEvent.html) | サポート無し |
| `onanimationiteration` | [AnimationEvent](https://docs.rs/web-sys/latest/web_sys/struct.AnimationEvent.html) | サポート無し |
| `onanimationstart` | [AnimationEvent](https://docs.rs/web-sys/latest/web_sys/struct.AnimationEvent.html) | サポート無し |
| `ongotpointercapture` | [PointerEvent](https://docs.rs/web-sys/latest/web_sys/struct.PointerEvent.html) | [GotPointerCaptureEvent](https://docs.rs/stdweb/latest/stdweb/web/event/struct.GotPointerCaptureEvent.html) |
| `onloadend` | [ProgressEvent](https://docs.rs/web-sys/latest/web_sys/struct.ProgressEvent.html) | [LoadEndEvent](https://docs.rs/stdweb/latest/stdweb/web/event/struct.LoadEndEvent.html) |
| `onlostpointercapture` | [PointerEvent](https://docs.rs/web-sys/latest/web_sys/struct.PointerEvent.html) | [LostPointerCaptureEvent](https://docs.rs/stdweb/latest/stdweb/web/event/struct.LostPointerCaptureEvent.html) |
| `onpointercancel` | [PointerEvent](https://docs.rs/web-sys/latest/web_sys/struct.PointerEvent.html) | [PointerCancelEvent](https://docs.rs/stdweb/latest/stdweb/web/event/struct.PointerCancelEvent.html) |
| `onpointerdown` | [PointerEvent](https://docs.rs/web-sys/latest/web_sys/struct.PointerEvent.html) | [PointerDownEvent](https://docs.rs/stdweb/latest/stdweb/web/event/struct.PointerDownEvent.html) |
| `onpointerenter` | [PointerEvent](https://docs.rs/web-sys/latest/web_sys/struct.PointerEvent.html) | [PointerEnterEvent](https://docs.rs/stdweb/latest/stdweb/web/event/struct.PointerEnterEvent.html) |
| `onpointerleave` | [PointerEvent](https://docs.rs/web-sys/latest/web_sys/struct.PointerEvent.html) | [PointerLeaveEvent](https://docs.rs/stdweb/latest/stdweb/web/event/struct.PointerLeaveEvent.html) |
| `onpointerlockchange` | [Event](https://docs.rs/web-sys/latest/web_sys/struct.Event.html) | [PointerLockChangeEvent](https://docs.rs/stdweb/latest/stdweb/web/event/struct.PointerLockChangeEvent.html) |
| `onpointerlockerror` | [Event](https://docs.rs/web-sys/latest/web_sys/struct.Event.html) | [PointerLockErrorEvent](https://docs.rs/stdweb/latest/stdweb/web/event/struct.PointerLockErrorEvent.html) |
| `onpointermove` | [PointerEvent](https://docs.rs/web-sys/latest/web_sys/struct.PointerEvent.html) | [PointerMoveEvent](https://docs.rs/stdweb/latest/stdweb/web/event/struct.PointerMoveEvent.html) |
| `onpointerout` | [PointerEvent](https://docs.rs/web-sys/latest/web_sys/struct.PointerEvent.html) | [PointerOutEvent](https://docs.rs/stdweb/latest/stdweb/web/event/struct.PointerOutEvent.html) |
| `onpointerover` | [PointerEvent](https://docs.rs/web-sys/latest/web_sys/struct.PointerEvent.html) | [PointerOverEvent](https://docs.rs/stdweb/latest/stdweb/web/event/struct.PointerOverEvent.html) |
| `onpointerup` | [PointerEvent](https://docs.rs/web-sys/latest/web_sys/struct.PointerEvent.html) | [PointerUpEvent](https://docs.rs/stdweb/latest/stdweb/web/event/struct.PointerUpEvent.html) |
| `onselectionchange` | [Event](https://docs.rs/web-sys/latest/web_sys/struct.Event.html) | [SelectionChangeEvent](https://docs.rs/stdweb/latest/stdweb/web/event/struct.SelectionChangeEvent.html) |
| `onselectstart` | [Event](https://docs.rs/web-sys/latest/web_sys/struct.Event.html) | サポート無し |
| `onshow` | [Event](https://docs.rs/web-sys/latest/web_sys/struct.Event.html) | サポート無し |
| `ontouchcancel` | [TouchEvent](https://docs.rs/web-sys/latest/web_sys/struct.TouchEvent.html) | [TouchCancel](https://docs.rs/stdweb/latest/stdweb/web/event/struct.TouchCancel.html) |
| `ontouchend` | [TouchEvent](https://docs.rs/web-sys/latest/web_sys/struct.TouchEvent.html) | [TouchEnd](https://docs.rs/stdweb/latest/stdweb/web/event/struct.TouchEnd.html) |
| `ontouchmove` | [TouchEvent](https://docs.rs/web-sys/latest/web_sys/struct.TouchEvent.html) | [TouchMove](https://docs.rs/stdweb/latest/stdweb/web/event/struct.TouchMove.html) |
| `ontouchstart` | [TouchEvent](https://docs.rs/web-sys/latest/web_sys/struct.TouchEvent.html) | [TouchStart](https://docs.rs/stdweb/latest/stdweb/web/event/struct.TouchStart.html) |
| `ontransitioncancel` | [TransitionEvent](https://docs.rs/web-sys/latest/web_sys/struct.TransitionEvent.html) | サポート無し |
| `ontransitionend` | [TransitionEvent](https://docs.rs/web-sys/latest/web_sys/struct.TransitionEvent.html) | サポート無し |
| `ontransitionrun` | [TransitionEvent](https://docs.rs/web-sys/latest/web_sys/struct.TransitionEvent.html) | サポート無し |
| `ontransitionstart` | [TransitionEvent](https://docs.rs/web-sys/latest/web_sys/struct.TransitionEvent.html) | サポート無し |

11
website/i18n/ja/docusaurus-plugin-content-docs/0.17.3/concepts/html/lists.mdx
View File

@ -4,11 +4,12 @@ title: Lists
## フラグメント
`html!`マクロは常にルートノードが1つであることを要求します。
`html!`マクロは常にルートノードが 1 つであることを要求します。
この制限のために、空のタグを使って内容をラップすると良いでしょう。
<!--DOCUSAURUS_CODE_TABS-->
<!--Valid-->
```rust
html! {
<>
@ -19,6 +20,7 @@ html! {
```
<!--Invalid-->
```rust
/* error: only one root html element allowed */
@ -27,15 +29,16 @@ html! {
<p></p>
}
```
<!--END_DOCUSAURUS_CODE_TABS-->
<!--END_DOCUSAURUS_CODE_TABS-->
## イテレータ
YewはイテレータからHTMLをビルドするのに2つの方法をサポートしています。
Yew はイテレータから HTML をビルドするのに 2 つの方法をサポートしています。
<!--DOCUSAURUS_CODE_TABS-->
<!--Syntax Type 1-->
```rust
html! {
<ul class="item-list">
@ -45,6 +48,7 @@ html! {
```
<!--Syntax Type 2-->
```rust
html! {
<ul class="item-list">
@ -52,4 +56,5 @@ html! {
</ul>
}
```
<!--END_DOCUSAURUS_CODE_TABS-->

7
website/i18n/ja/docusaurus-plugin-content-docs/0.17.3/concepts/html/literals-and-expressions.mdx
View File

@ -1,12 +1,13 @@
---
title: Literals and Expressions
---
## リテラル
式が`Display`を実装した型を解決する場合、文字列に変換されてDOMに[Text](https://developer.mozilla.org/en-US/docs/Web/API/Text)ノードとして挿入されます。
式が`Display`を実装した型を解決する場合、文字列に変換されて DOM に[Text](https://developer.mozilla.org/en-US/docs/Web/API/Text)ノードとして挿入されます。
テキストは式として処理されるため、全ての表示される内容は`{}`ブロックによって囲まれる必要があります。
これはYewのアプリと通常のHTMLの構文で最も異なる点です。
これは Yew のアプリと通常の HTML の構文で最も異なる点です。
```rust
let text = "lorem ipsum";
@ -21,7 +22,7 @@ html!{
## 式
HTMLに`{}`ブロックを使って式を挿入することができます。
HTML に`{}`ブロックを使って式を挿入することができます。
```rust
html! {

25
website/i18n/ja/docusaurus-plugin-content-docs/0.17.3/concepts/router.mdx
View File

@ -3,9 +3,9 @@ title: Router
description: Yew's official router
---
[crates.ioにあるルータ](https://crates.io/crates/yew-router)
[crates.io にあるルータ](https://crates.io/crates/yew-router)
シングルページアプリケーション\(SPA\)におけるルータはURLよってページを出し分けます。
シングルページアプリケーション\(SPA\)におけるルータは URL よってページを出し分けます。
リンクがクリックされたときに異なるリソースを要求するというデフォルトの動作の代わりに、ルータはアプリケーション内の有効なルートを指すように URL をローカルに設定します。
ルータはこの変更を検出してから、何をレンダリングするかを決定します。
@ -13,7 +13,7 @@ description: Yew's official router
### `Route`
URL内のドメインの後のすべてを表す文字列と、オプションでhistory APIに保存されている状態を含みます。
URL 内のドメインの後のすべてを表す文字列と、オプションで history API に保存されている状態を含みます。
### `RouteService`
@ -29,8 +29,8 @@ RouteService を所有し、ルートが変更された際の更新を調整す
### `Router`
RouterコンポーネントはRouteAgentとやり取りし、エージェントがどうスイッチするかRoutesを自動的に解決します。
これは、結果として得られるスイッチがどのようにHtmlに変換されるかを指定できるようにするため、propsを介して公開されます。
Router コンポーネントは RouteAgent とやり取りし、エージェントがどうスイッチするか Routes を自動的に解決します。
これは、結果として得られるスイッチがどのように Html に変換されるかを指定できるようにするため、props を介して公開されます。
## ルータをどのように使うか
@ -38,7 +38,7 @@ RouterコンポーネントはRouteAgentとやり取りし、エージェント
これは通常は列挙型ですが、構造体もサポートされており、`Switch` を実装した他のアイテムを内部に入れ子にすることができることに注意してください。
次に、`Switch`を型に継承させなければいけません。
列挙型の場合は全てのvariantは`#[to = "/some/route"]`とアノテーションされている必要があり、代わり構造体を用いている場合は構造体宣言が外部から見えるようにしてなければいけません。
列挙型の場合は全ての variant は`#[to = "/some/route"]`とアノテーションされている必要があり、代わり構造体を用いている場合は構造体宣言が外部から見えるようにしてなければいけません。
```rust
#[derive(Switch)]
@ -48,7 +48,7 @@ enum AppRoute {
#[to="/register"]
Register,
#[to="/delete_account"]
Delete,
Delete,
#[to="/posts/{id}"]
ViewPost(i32),
#[to="/posts/view"]
@ -59,7 +59,7 @@ enum AppRoute {
```
:::caution
`Switch`用の派生マクロによって生成された実装は、各variantを最初から最後までの順にマッチさせようとするので、指定した`to`アノテーションのうち 2 つのルートにマッチする可能性がある場合は、最初のルートがマッチし、2 つ目のルートは試行されないことに注意してください。例えば、以下の`Switch`を定義した場合、マッチするルートは`AppRoute::Home`だけになります。
`Switch`用の派生マクロによって生成された実装は、各 variant を最初から最後までの順にマッチさせようとするので、指定した`to`アノテーションのうち 2 つのルートにマッチする可能性がある場合は、最初のルートがマッチし、2 つ目のルートは試行されないことに注意してください。例えば、以下の`Switch`を定義した場合、マッチするルートは`AppRoute::Home`だけになります。
```rust
#[derive(Switch)]
@ -71,24 +71,25 @@ enum AppRoute {
#[to="/register"]
Register,
#[to="/delete_account"]
Delete,
Delete,
#[to="/posts/{id}"]
ViewPost(i32),
#[to="/posts/view"]
ViewPosts,
}
```
:::
また、`#[to = ""]`アノテーションの中で`{}`のバリエーションを使ってセクションをキャプチャすることもできます。
`{}`は、次の区切り文字\(コンテキストに応じて "/", "?", "&", "#" のいずれか\) までのテキストをキャプチャします。
`{*}`は、次の文字が一致するまでテキストをキャプチャすることを意味します。
`{<number>}`は、指定した数の区切り文字が見つかるまでテキストをキャプチャすることを意味します
\(例: `{2}`は区切り文字が2つ見つかるまでキャプチャします\)。
\(例: `{2}`は区切り文字が 2 つ見つかるまでキャプチャします\)。
名前付きフィールドを持つ構造体や列挙型の場合は、キャプチャグループ内で以下のようにフィールドの名前を指定する必要があります。
`{user_name}` または `{*:age}` のように、キャプチャグループ内でフィールドの名前を指定しなければなりません。
Switchトレイトは文字列よりも構造化されたキャプチャグループで動作します。
Switch トレイトは文字列よりも構造化されたキャプチャグループで動作します。
`Switch`を実装した任意の型を指定することができます。
そのため、キャプチャグループが `usize` であることを指定することができ、URLのキャプチャ部分がそれに変換できない場合、variantはマッチしません。
そのため、キャプチャグループが `usize` であることを指定することができ、URL のキャプチャ部分がそれに変換できない場合、variant はマッチしません。

2
website/i18n/ja/docusaurus-plugin-content-docs/0.17.3/concepts/services.mdx
View File

@ -6,5 +6,5 @@ description: Yew's glue to browser APIs
# サービス
:::note
このセクションはまだWIPです。
このセクションはまだ WIP です。
:::

7
website/i18n/ja/docusaurus-plugin-content-docs/0.17.3/getting-started/build-a-sample-app.mdx
View File

@ -2,7 +2,7 @@
title: Build a sample app
---
はじめに、Rustの新規ライブラリを作りましょう(**重要:** `--lib`フラグを渡すことで_バイナリ_ではなく_ライブラリ_を作ってください)
はじめに、Rust の新規ライブラリを作りましょう(**重要:** `--lib`フラグを渡すことで*バイナリ*ではなく*ライブラリ*を作ってください)
```bash
cargo new --lib yew-app && cd yew-app
@ -114,8 +114,8 @@ mkdir static
wasm-pack build --target web --out-name wasm --out-dir ./static
```
`wasm-pack`はコンパイルされたWebAssemblyとJavaScriptラッパーをまとめたものを`./static`ディレクトリに作り、
アプリのWebAssemblyバイナリを読み込んで動かします。
`wasm-pack`はコンパイルされた WebAssembly と JavaScript ラッパーをまとめたものを`./static`ディレクトリに作り、
アプリの WebAssembly バイナリを読み込んで動かします。
そして、`./static`以下で好きなサーバーをファイルをサーブしてみましょう。
例えば:
@ -124,4 +124,3 @@ wasm-pack build --target web --out-name wasm --out-dir ./static
cargo +nightly install miniserve
miniserve ./static --index index.html
```

179
website/i18n/ja/docusaurus-plugin-content-docs/0.17.3/getting-started/choose-web-library.mdx
View File

@ -1,11 +1,12 @@
---
title: Choosing a web library
---
## はじめに
Yewアプリは[`web-sys`](https://docs.rs/web-sys)か[`stdweb`](https://docs.rs/stdweb)で作ることができます。
これらのクレートはRustとWeb APIのバインディングを提供しています。
Cargoの依存クレートに`yew`を追加する際はどちらかを選ばなければいけません:
Yew アプリは[`web-sys`](https://docs.rs/web-sys)か[`stdweb`](https://docs.rs/stdweb)で作ることができます。
これらのクレートは Rust と Web API のバインディングを提供しています。
Cargo の依存クレートに`yew`を追加する際はどちらかを選ばなければいけません:
```toml
# Choose `web-sys`
@ -38,7 +39,7 @@ let window = Window::try_from(window_val).expect("conversion to window failed");
window.alert("hello from wasm!");
```
2つのクレートのAPIはわずかに異なりますが、だいたい同じ目的で似た機能が提供されています。
2 つのクレートの API はわずかに異なりますが、だいたい同じ目的で似た機能が提供されています。
## 一方を選ぶ
@ -47,77 +48,101 @@ window.alert("hello from wasm!");
一方だけを使用するのが良いです。
<table>
<thead>
<tr>
<th style={{ textAlign: "left" }}></th>
<th style={{ textAlign: "left" }}><code>web-sys</code>
</th>
<th style={{ textAlign: "left" }}><code>stdweb</code>
</th>
</tr>
</thead>
<tbody>
<tr>
<td style={{ textAlign: "left" }}>プロジェクトの進捗状況</td>
<td style={{ textAlign: "left" }}>
<a href="https://rustwasm.github.io/">Rust / Wasm 活動チーム</a>により活発にメンテナンスされている
</td>
<td style={{ textAlign: "left" }}>GitHubで8ヶ月間動きなし</td>
</tr>
<tr>
<td style={{ textAlign: "left" }}>Web API のカバー</td>
<td style={{ textAlign: "left" }}>RustのAPIはWeb IDLスペックから自動的に生成される。</td>
<td style={{ textAlign: "left" }}>Browser APIはコミュニティにより追加。</td>
</tr>
<tr>
<td style={{ textAlign: "left" }}>RustのAPIのデザイン</td>
<td style={{ textAlign: "left" }}>
ほとんどのAPIコールおいて<code>Result</code>が返ってくるよう保守的なアプローチがとられている。
</td>
<td style={{ textAlign: "left" }}>しばしば<code>Result</code>を返さずpanicするようになっている。例えば <code>stdweb::web::window()</code>ワーカーの中で呼ばれるパニックする。</td>
</tr>
<tr>
<td style={{ textAlign: "left" }}>サポートされているビルドツール</td>
<td style={{ textAlign: "left" }}>
<p></p>
<ul>
<li><code>wasm-bindgen</code>
</li>
<li><code>wasm-pack</code>
</li>
</ul>
</td>
<td style={{ textAlign: "left" }}>
<p></p>
<ul>
<li><code>cargo-web</code>
</li>
<li><code>wasm-bindgen</code>
</li>
<li><code>wasm-pack</code>
</li>
</ul>
</td>
</tr>
<tr>
<td style={{ textAlign: "left" }}>サポートされているターゲット</td>
<td style={{ textAlign: "left" }}>
<ul>
<li><code>wasm32-unknown-unknown</code>
</li>
</ul>
</td>
<td style={{ textAlign: "left" }}>
<ul>
<li><code>wasm32-unknown-unknown</code>
</li>
<li><code>wasm32-unknown-emscripten</code>
</li>
<li><code>asmjs-unknown-emscripten</code>
</li>
</ul>
</td>
</tr>
</tbody>
<thead>
<tr>
<th style={{ textAlign: 'left' }}></th>
<th style={{ textAlign: 'left' }}>
<code>web-sys</code>
</th>
<th style={{ textAlign: 'left' }}>
<code>stdweb</code>
</th>
</tr>
</thead>
<tbody>
<tr>
<td style={{ textAlign: 'left' }}>プロジェクトの進捗状況</td>
<td style={{ textAlign: 'left' }}>
<a href="https://rustwasm.github.io/">Rust / Wasm 活動チーム</a>
により活発にメンテナンスされている
</td>
<td style={{ textAlign: 'left' }}>GitHubで8ヶ月間動きなし</td>
</tr>
<tr>
<td style={{ textAlign: 'left' }}>Web API のカバー</td>
<td style={{ textAlign: 'left' }}>
RustのAPIはWeb IDLスペックから自動的に生成される。
</td>
<td style={{ textAlign: 'left' }}>
Browser APIはコミュニティにより追加。
</td>
</tr>
<tr>
<td style={{ textAlign: 'left' }}>RustのAPIのデザイン</td>
<td style={{ textAlign: 'left' }}>
ほとんどのAPIコールおいて<code>Result</code>
が返ってくるよう保守的なアプローチがとられている。
</td>
<td style={{ textAlign: 'left' }}>
しばしば<code>Result</code>
を返さずpanicするようになっている。例えば <code>
stdweb::web::window()
</code>
ワーカーの中で呼ばれるパニックする。
</td>
</tr>
<tr>
<td style={{ textAlign: 'left' }}>
サポートされているビルドツール
</td>
<td style={{ textAlign: 'left' }}>
<p></p>
<ul>
<li>
<code>wasm-bindgen</code>
</li>
<li>
<code>wasm-pack</code>
</li>
</ul>
</td>
<td style={{ textAlign: 'left' }}>
<p></p>
<ul>
<li>
<code>cargo-web</code>
</li>
<li>
<code>wasm-bindgen</code>
</li>
<li>
<code>wasm-pack</code>
</li>
</ul>
</td>
</tr>
<tr>
<td style={{ textAlign: 'left' }}>サポートされているターゲット</td>
<td style={{ textAlign: 'left' }}>
<ul>
<li>
<code>wasm32-unknown-unknown</code>
</li>
</ul>
</td>
<td style={{ textAlign: 'left' }}>
<ul>
<li>
<code>wasm32-unknown-unknown</code>
</li>
<li>
<code>wasm32-unknown-emscripten</code>
</li>
<li>
<code>asmjs-unknown-emscripten</code>
</li>
</ul>
</td>
</tr>
</tbody>
</table>

15
website/i18n/ja/docusaurus-plugin-content-docs/0.17.3/getting-started/examples.mdx
View File

@ -2,14 +2,13 @@
title: Examples
---
Yewのリポジトリは[例](https://github.com/yewstack/yew/tree/v0.17/examples)がたくさんあります
Yew のリポジトリは[例](https://github.com/yewstack/yew/tree/v0.17/examples)がたくさんあります
\(メンテナンス状況は様々\)。
様々なフレームワークの機能の使い方を知るのにはそれらの例に取り組むのを勧めます。
プルリクエストや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)
プルリクエストや 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)

258
website/i18n/ja/docusaurus-plugin-content-docs/0.17.3/getting-started/project-setup.mdx
View File

@ -7,33 +7,33 @@ description: Set yourself up for success
## Rust
まずはじめにRustが必要です。Rustとビルドツールの`cargo`をインストールするために、以下の[公式サイト](https://www.rust-lang.org/tools/install)
まずはじめに Rust が必要です。Rust とビルドツールの`cargo`をインストールするために、以下の[公式サイト](https://www.rust-lang.org/tools/install)
を見てください。
## **Wasm ビルドツール**
WebAssemblyとJavaScriptの互換を持たせるために他にツールが必要です。さらに、選んだツールに応じてブラウザでアプリから`.wasm`ファイルを実行するのに
必要なJavaScriptラッパーのコードを生成し、これによってデプロイやパッケージ化での頭痛の種を軽減させるのに役立ちます。
WebAssembly と JavaScript の互換を持たせるために他にツールが必要です。さらに、選んだツールに応じてブラウザでアプリから`.wasm`ファイルを実行するのに
必要な JavaScript ラッパーのコードを生成し、これによってデプロイやパッケージ化での頭痛の種を軽減させるのに役立ちます。
### [**`wasm-pack`**](https://rustwasm.github.io/docs/wasm-pack/)
Rust / Wasm活動チームによって開発されているCLIツールで、WebAssemblyをパッケージ化することができます。
Webpackには[`wasm-pack-plugin`](https://github.com/wasm-tool/wasm-pack-plugin)が最もよく使われています。
Rust / Wasm 活動チームによって開発されている CLI ツールで、WebAssembly をパッケージ化することができます。
Webpack には[`wasm-pack-plugin`](https://github.com/wasm-tool/wasm-pack-plugin)が最もよく使われています。
[`wasm-pack`で始める](project-setup/using-wasm-pack.mdx)
### [**`wasm-bindgen`**](https://rustwasm.github.io/docs/wasm-bindgen/)
Rust/Wasm活動チームによって開発されているライブラリとCLIツールで、JS / WebAssemblyの互換性を持たせるための低レベルなツールです
Rust/Wasm 活動チームによって開発されているライブラリと CLI ツールで、JS / WebAssembly の互換性を持たせるための低レベルなツールです
(`wasm-pack`で内部的に使われています)。
`wasm-bindgen`は手書きのJavaScriptでWebAssemblyのバイナリを使う必要があるため、直接使うのは非推奨です。
`wasm-bindgen`は手書きの JavaScript で WebAssembly のバイナリを使う必要があるため、直接使うのは非推奨です。
しかし、詳細な情報については[**`wasm-bindgen` ガイド**](https://rustwasm.github.io/docs/wasm-bindgen/)から得られます。
[`wasm-bindgen`で始める。](project-setup/using-wasm-bindgen.mdx)
### [**`cargo-web`**](https://github.com/koute/cargo-web)
`wasm-pack`と`wasm-bindgen`を導入する前は好まれたWebワークフローツールです。
`wasm-pack`と`wasm-bindgen`を導入する前は好まれた Web ワークフローツールです。
`wasm-pack`がサポートされていないサンプルを動かすのにインストールする価値があり、依然として**最もお手軽に**始められる方法です。
[`cargo web`で始める](project-setup/using-cargo-web.mdx)
@ -41,102 +41,148 @@ Rust/Wasm活動チームによって開発されているライブラリとCLI
### 比較
<table>
<thead>
<tr>
<th style={{ textAlign: "left" }}></th>
<th style={{ textAlign: "left" }}><code>wasm-pack</code>
</th>
<th style={{ textAlign: "left" }}><code>wasm-bindgen</code>
</th>
<th style={{ textAlign: "left" }}><code>cargo-web</code>
</th>
</tr>
</thead>
<tbody>
<tr>
<td style={{ textAlign: "left" }}>プロジェクトの進行状況</td>
<td style={{ textAlign: "left" }}><a href="https://rustwasm.github.io/">Rust / Wasm活動チーム</a>により活発にメンテナンス
</td>
<td style={{ textAlign: "left" }}><a href="https://rustwasm.github.io/">Rust / Wasm 活動チーム</a>により活発にメンテナンス
</td>
<td style={{ textAlign: "left" }}>6ヶ月間GitHubでの活発な活動無し</td>
</tr>
<tr>
<td style={{ textAlign: "left" }}>開発体験</td>
<td style={{ textAlign: "left" }}>ほぼ大丈夫! <code>webpack</code>があればなお良い。</td>
<td
style={{ textAlign: "left" }}>だいたい大丈夫。開発においては少し流れを書かないといけない。</td>
<td style={{ textAlign: "left" }}>しっかり動く！完結していて、外部ライブラリに頼る必要無し。</td>
</tr>
<tr>
<td style={{ textAlign: "left" }}>ローカルサーバー</td>
<td style={{ textAlign: "left" }}><code>webpack</code>プラグインによるサポートあり</td>
<td style={{ textAlign: "left" }}>サポート無し</td>
<td style={{ textAlign: "left" }}>サポートあり</td>
</tr>
<tr>
<td style={{ textAlign: "left" }}>ローカル環境での変更による自動再ビルド</td>
<td style={{ textAlign: "left" }}><code>webpack</code>プラグインによるサポートあり</td>
<td style={{ textAlign: "left" }}>サポート無し</td>
<td style={{ textAlign: "left" }}>サポートあり</td>
</tr>
<tr>
<td style={{ textAlign: "left" }}>ヘッドレスブラウザテスト</td>
<td style={{ textAlign: "left" }}><a href="https://rustwasm.github.io/docs/wasm-pack/commands/test.html">サポートあり</a>
</td>
<td style={{ textAlign: "left" }}><a href="https://rustwasm.github.io/docs/wasm-bindgen/wasm-bindgen-test/index.html">サポートあり</a>
</td>
<td style={{ textAlign: "left" }}><a href="https://github.com/koute/cargo-web#features">サポートあり</a>
</td>
</tr>
<tr>
<td style={{ textAlign: "left" }}>サポートされているターゲット</td>
<td style={{ textAlign: "left" }}>
<ul>
<li><code>wasm32-unknown-unknown</code>
</li>
</ul>
</td>
<td style={{ textAlign: "left" }}>
<ul>
<li><code>wasm32-unknown-unknown</code>
</li>
</ul>
</td>
<td style={{ textAlign: "left" }}>
<ul>
<li><code>wasm32-unknown-unknown</code>
</li>
<li><code>wasm32-unknown-emscripten</code>
</li>
<li><code>asmjs-unknown-emscripten</code>
</li>
</ul>
</td>
</tr>
<tr>
<td style={{ textAlign: "left" }}><code>web-sys</code></td>
<td style={{ textAlign: "left" }}>互換性あり</td>
<td style={{ textAlign: "left" }}>互換性あり</td>
<td style={{ textAlign: "left" }}>互換性無し</td>
</tr>
<tr>
<td style={{ textAlign: "left" }}><code>stdweb</code></td>
<td style={{ textAlign: "left" }}>互換性あり</td>
<td style={{ textAlign: "left" }}>互換性あり</td>
<td style={{ textAlign: "left" }}>互換性あり</td>
</tr>
<tr>
<td style={{ textAlign: "left" }}>使用例</td>
<td style={{ textAlign: "left" }}><a href="https://github.com/yewstack/yew-wasm-pack-minimal">入門用テンプレート</a>
</td>
<td style={{ textAlign: "left" }}>
Yewで<a href="https://github.com/yewstack/yew/blob/master/examples/build.sh">作る例</a>
</td>
<td style={{ textAlign: "left" }}>
Yewで<a href="https://www.github.com/yewstack/yew/tree/master/packages/yew-stdweb/examples">作る例</a>
</td>
</tr>
</tbody>
<thead>
<tr>
<th style={{ textAlign: 'left' }}></th>
<th style={{ textAlign: 'left' }}>
<code>wasm-pack</code>
</th>
<th style={{ textAlign: 'left' }}>
<code>wasm-bindgen</code>
</th>
<th style={{ textAlign: 'left' }}>
<code>cargo-web</code>
</th>
</tr>
</thead>
<tbody>
<tr>
<td style={{ textAlign: 'left' }}>プロジェクトの進行状況</td>
<td style={{ textAlign: 'left' }}>
<a href="https://rustwasm.github.io/">Rust / Wasm活動チーム</a>
により活発にメンテナンス
</td>
<td style={{ textAlign: 'left' }}>
<a href="https://rustwasm.github.io/">Rust / Wasm 活動チーム</a>
により活発にメンテナンス
</td>
<td style={{ textAlign: 'left' }}>
6ヶ月間GitHubでの活発な活動無し
</td>
</tr>
<tr>
<td style={{ textAlign: 'left' }}>開発体験</td>
<td style={{ textAlign: 'left' }}>
ほぼ大丈夫! <code>webpack</code>があればなお良い。
</td>
<td style={{ textAlign: 'left' }}>
だいたい大丈夫。開発においては少し流れを書かないといけない。
</td>
<td style={{ textAlign: 'left' }}>
しっかり動く！完結していて、外部ライブラリに頼る必要無し。
</td>
</tr>
<tr>
<td style={{ textAlign: 'left' }}>ローカルサーバー</td>
<td style={{ textAlign: 'left' }}>
<code>webpack</code>プラグインによるサポートあり
</td>
<td style={{ textAlign: 'left' }}>サポート無し</td>
<td style={{ textAlign: 'left' }}>サポートあり</td>
</tr>
<tr>
<td style={{ textAlign: 'left' }}>
ローカル環境での変更による自動再ビルド
</td>
<td style={{ textAlign: 'left' }}>
<code>webpack</code>プラグインによるサポートあり
</td>
<td style={{ textAlign: 'left' }}>サポート無し</td>
<td style={{ textAlign: 'left' }}>サポートあり</td>
</tr>
<tr>
<td style={{ textAlign: 'left' }}>ヘッドレスブラウザテスト</td>
<td style={{ textAlign: 'left' }}>
<a href="https://rustwasm.github.io/docs/wasm-pack/commands/test.html">
サポートあり
</a>
</td>
<td style={{ textAlign: 'left' }}>
<a href="https://rustwasm.github.io/docs/wasm-bindgen/wasm-bindgen-test/index.html">
サポートあり
</a>
</td>
<td style={{ textAlign: 'left' }}>
<a href="https://github.com/koute/cargo-web#features">
サポートあり
</a>
</td>
</tr>
<tr>
<td style={{ textAlign: 'left' }}>サポートされているターゲット</td>
<td style={{ textAlign: 'left' }}>
<ul>
<li>
<code>wasm32-unknown-unknown</code>
</li>
</ul>
</td>
<td style={{ textAlign: 'left' }}>
<ul>
<li>
<code>wasm32-unknown-unknown</code>
</li>
</ul>
</td>
<td style={{ textAlign: 'left' }}>
<ul>
<li>
<code>wasm32-unknown-unknown</code>
</li>
<li>
<code>wasm32-unknown-emscripten</code>
</li>
<li>
<code>asmjs-unknown-emscripten</code>
</li>
</ul>
</td>
</tr>
<tr>
<td style={{ textAlign: 'left' }}>
<code>web-sys</code>
</td>
<td style={{ textAlign: 'left' }}>互換性あり</td>
<td style={{ textAlign: 'left' }}>互換性あり</td>
<td style={{ textAlign: 'left' }}>互換性無し</td>
</tr>
<tr>
<td style={{ textAlign: 'left' }}>
<code>stdweb</code>
</td>
<td style={{ textAlign: 'left' }}>互換性あり</td>
<td style={{ textAlign: 'left' }}>互換性あり</td>
<td style={{ textAlign: 'left' }}>互換性あり</td>
</tr>
<tr>
<td style={{ textAlign: 'left' }}>使用例</td>
<td style={{ textAlign: 'left' }}>
<a href="https://github.com/yewstack/yew-wasm-pack-minimal">
入門用テンプレート
</a>
</td>
<td style={{ textAlign: 'left' }}>
Yewで
<a href="https://github.com/yewstack/yew/blob/master/examples/build.sh">
作る例
</a>
</td>
<td style={{ textAlign: 'left' }}>
Yewで
<a href="https://www.github.com/yewstack/yew/tree/master/packages/yew-stdweb/examples">
作る例
</a>
</td>
</tr>
</tbody>
</table>

14
website/i18n/ja/docusaurus-plugin-content-docs/0.17.3/getting-started/project-setup/using-cargo-web.mdx
View File

@ -2,9 +2,9 @@
title: Using cargo-web
---
Cargo webはクライアントWebアプリを作るためのCargoサブコマンドです。
これによりWebアプリのビルドとデプロイを驚くほど簡単にできます。
そして同時にEmscriptenがターゲットなのを唯一サポートしているツールチェーンです。
Cargo web はクライアント Web アプリを作るための Cargo サブコマンドです。
これにより Web アプリのビルドとデプロイを驚くほど簡単にできます。
そして同時に Emscripten がターゲットなのを唯一サポートしているツールチェーンです。
詳しくは[こちら](https://github.com/koute/cargo-web)。
**インストール**
@ -27,10 +27,10 @@ cargo web start
## サポートされているターゲット
* `wasm32-unknown-unknown`
* `wasm32-unknown-emscripten`
* `asmjs-unknown-emscripten`
- `wasm32-unknown-unknown`
- `wasm32-unknown-emscripten`
- `asmjs-unknown-emscripten`
:::注意
`*-emscripten`をターゲットにする場合、Emscripten SDKをインストールする必要があります。
`*-emscripten`をターゲットにする場合、Emscripten SDK をインストールする必要があります。
:::

18
website/i18n/ja/docusaurus-plugin-content-docs/0.17.3/getting-started/project-setup/using-wasm-bindgen.mdx
View File

@ -10,20 +10,20 @@ cargo install wasm-bindgen-cli
## ビルド
はじめに、Wasmファイルを生成するアプリをビルドしましょう。
はじめに、Wasm ファイルを生成するアプリをビルドしましょう。
[サンプルアプリをビルド](../build-a-sample-app.md)のアプリをビルドしたいとします。
生成されたファイルのパスは`target/wasm32-unknown-unknown/debug/yew-app.wasm`にあるはずです。
もしクレートに何か別の名前をつけた場合、Wasmファイルの名前は`yew-app.wasm`ではなく、`Cargo.toml`ファイルに
もしクレートに何か別の名前をつけた場合、Wasm ファイルの名前は`yew-app.wasm`ではなく、`Cargo.toml`ファイルに
`package.name`として名前をつけたものになるでしょう。
```bash
cargo build --target wasm32-unknown-unknown
```
次に、wasm-bindgenのCLIを動かしましょう。
このコマンドは`--out-dir`のディレクトリにいくつかのファイルを生成し、その中にはWasmバイナリを読み込んで動かすための
コンパイルされたWebAssemblyとJavaScriptのラッパーが入っています。
現在のブラウザは直接WebAssemblyファイルを読み込むことができないため、代わりにJavaScript経由で読み込まれるなければならず、
次に、wasm-bindgen の CLI を動かしましょう。
このコマンドは`--out-dir`のディレクトリにいくつかのファイルを生成し、その中には Wasm バイナリを読み込んで動かすための
コンパイルされた WebAssembly と JavaScript のラッパーが入っています。
現在のブラウザは直接 WebAssembly ファイルを読み込むことができないため、代わりに JavaScript 経由で読み込まれるなければならず、
そのためにこれらのラッパーが必要となります。
[サンプルアプリを作る(../build-a-sample-app.md)の例では`static`フォルダにファイルが生成されるようにしており
(そのために`wasm-bindgen`へ`--out-dir static`と渡す必要があります)、
@ -36,7 +36,7 @@ wasm-bindgen --target web --out-dir static --out-name wasm target/wasm32-unknown
## アプリをサーブする
好きなサーバーを使ってください。
ここではシンプルなPythonのサーバーを使います。
ここではシンプルな Python のサーバーを使います。
```bash
python -m http.server 8000
@ -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/)

14
website/i18n/ja/docusaurus-plugin-content-docs/0.17.3/getting-started/project-setup/using-wasm-pack.mdx
View File

@ -2,13 +2,13 @@
title: Using wasm-pack
---
このツールはRust / Wasm活動チームによって開発され、WebAssemblyのアプリを作るのに使われれるツールで最も活発に開発されているものです。
コードを`npm`モジュールへパッケージ化するのをサポートし、既存のJavaScriptのアプリと簡単に統合できる
このツールは Rust / Wasm 活動チームによって開発され、WebAssembly のアプリを作るのに使われれるツールで最も活発に開発されているものです。
コードを`npm`モジュールへパッケージ化するのをサポートし、既存の JavaScript のアプリと簡単に統合できる
[Webpack plugin](https://github.com/wasm-tool/wasm-pack-plugin)がついています。
詳しい情報は[the `wasm-pack` documentation](https://rustwasm.github.io/docs/wasm-pack/introduction.html)にあります。
:::注意
`wasm-pack`を使う際は`Cargo.toml`のcrate-typeは`cdylib`である必要があります。
`wasm-pack`を使う際は`Cargo.toml`の crate-type は`cdylib`である必要があります。
:::
## インストール
@ -19,8 +19,8 @@ cargo install wasm-pack
## ビルド
このコマンドはJavaScriptラッパーとアプリのWebAssemblyをまとめたものを`./pkg`ディレクトリに生成し、アプリをスタートすることができます。
This command will produce a bundle in the `./pkg` directory with your app's compiled WebAssembly
このコマンドは JavaScript ラッパーとアプリの WebAssembly をまとめたものを`./pkg`ディレクトリに生成し、アプリをスタートすることができます。
This command will produce a bundle in the `./pkg` directory with your app's compiled WebAssembly
along with a JavaScript wrapper which can be used to start your application.
```bash
@ -38,7 +38,7 @@ rollup ./main.js --format iife --file ./pkg/bundle.js
## サーブ
好きなサーバーを使ってください。
ここではシンプルなPythonのサーバーを使ってアプリをサーブします。
ここではシンプルな Python のサーバーを使ってアプリをサーブします。
```bash
python -m http.server 8000
@ -46,4 +46,4 @@ python -m http.server 8000
## サポートされているターゲット
* `wasm32-unknown-unknown`
- `wasm32-unknown-unknown`

13
website/i18n/ja/docusaurus-plugin-content-docs/0.17.3/getting-started/starter-templates.mdx
View File

@ -4,13 +4,13 @@ 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`を使い、サーバーはアプリをサーブします. ベルや笛はここにはありません。
`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が開発を滑らかにします。
[`wasm-pack-plugin`](https://github.com/wasm-tool/wasm-pack-plugin)を使い、Webpack が開発を滑らかにします。
これらのテンプレートを使うのと`cargo-web`を使用するのと重要な違いは、このアプローチは`bin`クレートではなく`lib`クレートを用いて
`#[wasm_bindgen]`によってエントリーポイントを指定できる点です。
@ -37,6 +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/)を使っています。

10
website/i18n/ja/docusaurus-plugin-content-docs/0.17.3/more/css.mdx
View File

@ -6,13 +6,13 @@ title: CSS
&lt;TODO&gt;
統合的なCSSサポートについての提案はこちらにあります: [https://github.com/yewstack/yew/issues/533](https://github.com/yewstack/yew/issues/533)
統合的な CSS サポートについての提案はこちらにあります: [https://github.com/yewstack/yew/issues/533](https://github.com/yewstack/yew/issues/533)
## スタイルフレームワーク:
今のところ、コミュニティメンバーは以下のスタイルフレームワークを開発しています。
* [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 フレームワークで提供されている機能の実装

16
website/i18n/ja/docusaurus-plugin-content-docs/0.17.3/more/debugging.mdx
View File

@ -6,18 +6,18 @@ title: Debugging
## パニック
Rustシンボルで良いスタックトレースをするには
Rust シンボルで良いスタックトレースをするには
[`console_error_panic`](https://github.com/rustwasm/console_error_panic_hook)クレートを使用してください。
注意として、`cargo-web`でビルドされたものとは互換性がありません。
## コンソールでのログ
一般的に、WasmのWebアプリはブラウザのAPIと連携することができ、`console.log`のAPIも例外ではありません。
一般的に、Wasm の Web アプリはブラウザの API と連携することができ、`console.log`の API も例外ではありません。
いつくかの選択肢があります:
### [`wasm-logger`](https://crates.io/crates/wasm-logger)
このクレートはRustの`log`クレートと親和性があります。
このクレートは Rust の`log`クレートと親和性があります。
```rust
// セットアップ
@ -31,7 +31,7 @@ log::info!("Update: {:?}", msg);
### [`ConsoleService`](https://docs.rs/yew/latest/yew/services/console/struct.ConsoleService.html)
このサービスはYewに含まれており、`"services"`の機能が有効化されている場合は利用可能です。
このサービスは Yew に含まれており、`"services"`の機能が有効化されている場合は利用可能です。
```rust
// 使用方法
@ -40,18 +40,18 @@ ConsoleService::info(format!("Update: {:?}", msg).as_ref());
## ソースマップ
今のところはRust/WasmのWebアプリにはソースマップへの第一級のサポートがありません。
今のところは Rust/Wasm の Web アプリにはソースマップへの第一級のサポートがありません。
もちろん、これは変更される可能性があります。これが当てはまらない場合、または進捗が見られる場合は、変更を提案してください！
### 最新情報
\[2019年12月\] [Chrome DevTools update](https://developers.google.com/web/updates/2019/12/webassembly#the_future)
\[2019 年 12 月\] [Chrome DevTools update](https://developers.google.com/web/updates/2019/12/webassembly#the_future)
> やらなければいけないことがまだたくさんあります。例えばツール側ではEmscripten\(Binaryen\)とwasm-pack\(wasm-bindgen\)がそれらが実行する変換に関するDWARF情報の更新をまだサポートしていません。
> やらなければいけないことがまだたくさんあります。例えばツール側では Emscripten\(Binaryen\)と wasm-pack\(wasm-bindgen\)がそれらが実行する変換に関する DWARF 情報の更新をまだサポートしていません。
\[2020\] [Rust Wasm デバッグガイド](https://rustwasm.github.io/book/reference/debugging.html#using-a-debugger)
> 残念なことに、WebAssemblyのデバッグの物語はまだ未成熟です。ほとんどのUnixのシステムでは[DWARF](http://dwarfstd.org/)は実行中のプログラムをソースレベルで検査するためにデバッガに必要な情報をエンコードするために使用されます。Windowsには同様の情報をエンコードする代替形式があります。現在、WebAssemblyに相当するものはありません。
> 残念なことに、WebAssembly のデバッグの物語はまだ未成熟です。ほとんどの Unix のシステムでは[DWARF](http://dwarfstd.org/)は実行中のプログラムをソースレベルで検査するためにデバッガに必要な情報をエンコードするために使用されます。Windows には同様の情報をエンコードする代替形式があります。現在、WebAssembly に相当するものはありません。
\[2019\] [Rust Wasm ロードマップ](https://rustwasm.github.io/rfcs/007-2019-roadmap.html#debugging)

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