Tidy up the documentation. (#2404)

- fix a number of typos/grammatical errors
- also includes some stylistic changes
This commit is contained in:
Teymour Aldridge 2022-01-25 21:14:36 +00:00 committed by GitHub
parent 4580d94c59
commit c7599c54d8
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
14 changed files with 88 additions and 68 deletions

View File

@ -23,16 +23,18 @@ Using the `html!` macro can feel pretty magic, but it has nothing to hide. If yo
how it works, try expanding the `html!` macro calls in your program. There's a useful command called how it works, try expanding the `html!` macro calls in your program. There's a useful command called
`cargo expand` which allows you to see the expansion of Rust macros. `cargo expand` isn't shipped with `cargo expand` which allows you to see the expansion of Rust macros. `cargo expand` isn't shipped with
`cargo` by default so you'll need to install it with `cargo install cargo-expand` if you haven't `cargo` by default so you'll need to install it with `cargo install cargo-expand` if you haven't
already. already. [Rust-Analyzer](https://rust-analyzer.github.io/) also provides a mechanism for
[obtaining macro output from within an IDE](https://rust-analyzer.github.io/manual.html#expand-macro-recursively).
Note that when viewing expanded macro code, you're likely to encounter unusually verbose code. The Output from the `html!` macro is often pretty terse! This is a feature: machine-generated code can
reason is because generated code can sometimes clash with other code in an application. In order sometimes clash with other code in an application. In order to prevent issues, `proc_macro`
to prevent issues, `proc_macro` "hygiene" is adhered to. Some examples include: "hygiene" is adhered to. Some examples include:
1. Instead of using `yew::<module>` the macro generates `::yew::<module>` to make sure that the 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 Yew package is referenced correctly. This is also why `::alloc::vec::Vec::new()` is called instead
of just `Vec::new()`. of just `Vec::new()`.
2. Due to potential trait method name collisions, `<Type as Trait>` is used to make sure that we're using items from the right trait. 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.
## What is a virtual DOM? ## What is a virtual DOM?

View File

@ -3,7 +3,7 @@ title: "Portals"
description: "Rendering into out-of-tree DOM nodes" description: "Rendering into out-of-tree DOM nodes"
--- ---
## How to think about portals? ## What is a portal?
Portals provide a first-class way to render children into a DOM node that exists outside the DOM hierarchy of the parent component. Portals provide a first-class way to render children into a DOM node that exists outside the DOM hierarchy of the parent component.
`yew::create_portal(child, host)` returns a `Html` value that renders `child` not hierarchically under its parent component, `yew::create_portal(child, host)` returns a `Html` value that renders `child` not hierarchically under its parent component,
@ -11,9 +11,16 @@ but as a child of the `host` element.
## Usage ## Usage
Typical uses of portals can include modal dialogs and hovercards, as well as more technical applications such as controlling the contents of an element's [`shadowRoot`](https://developer.mozilla.org/en-US/docs/Web/API/Element/shadowRoot), appending stylesheets to the surrounding document's `<head>` and collecting referenced elements inside a central `<defs>` element of an `<svg>`. Typical uses of portals can include modal dialogs and hovercards, as well as more technical applications
such as controlling the contents of an element's
[`shadowRoot`](https://developer.mozilla.org/en-US/docs/Web/API/Element/shadowRoot), appending
stylesheets to the surrounding document's `<head>` and collecting referenced elements inside a
central `<defs>` element of an `<svg>`.
Note that `yew::create_portal` is a rather low-level building block, on which other components should be built that provide the interface for your specific use case. As an example, here is a simple modal dialogue that renders its `children` into an element outside `yew`'s control, identified by the `id="modal_host"`. Note that `yew::create_portal` is a low-level building block. Libraries should use it to implement
higher-level APIs which can then be consumed by applications. For example, here is a
simple modal dialogue that renders its `children` into an element outside `yew`'s control,
identified by the `id="modal_host"`.
```rust ```rust
use yew::{html, create_portal, function_component, Children, Properties, Html}; use yew::{html, create_portal, function_component, Children, Properties, Html};

View File

@ -289,8 +289,8 @@ for the behaviour of `JsCast` but with the smaller scope of events and their tar
similar to what you would using `JsCast`. similar to what you would using `JsCast`.
::: :::
The `TargetCast` trait builds off of `JsCast` and is specialized towards getting typed event targets The `TargetCast` trait is built on top of `JsCast` and is specialized towards getting typed event
from events. targets from events.
`TargetCast` comes with Yew so no need to add a dependency in order to use the trait methods on events `TargetCast` comes with Yew so no need to add a dependency in order to use the trait methods on events
but it works in a very similar way to `JsCast`. but it works in a very similar way to `JsCast`.

View File

@ -7,7 +7,7 @@ sidebar_label: wasm-bindgen
high-level interactions between Wasm modules and JavaScript; it is built with Rust by high-level interactions between Wasm modules and JavaScript; it is built with Rust by
[The Rust and WebAssembly Working Group](https://rustwasm.github.io/). [The Rust and WebAssembly Working Group](https://rustwasm.github.io/).
Yew builds off `wasm-bindgen` and specifically uses the following of its crates: Yew uses `wasm-bindgen` to interact with the browser through a number of crates:
- [`js-sys`](https://crates.io/crates/js-sys) - [`js-sys`](https://crates.io/crates/js-sys)
- [`wasm-bindgen`](https://crates.io/crates/wasm-bindgen) - [`wasm-bindgen`](https://crates.io/crates/wasm-bindgen)
@ -15,7 +15,7 @@ Yew builds off `wasm-bindgen` and specifically uses the following of its crates:
- [`web-sys`](https://crates.io/crates/web-sys) - [`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 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 into `wasm-bindgen` and it's associated and use `wasm-bindgen` APIs with Yew. For a more in-depth guide to `wasm-bindgen` and its associated
crates then check out [The `wasm-bindgen` Guide](https://rustwasm.github.io/docs/wasm-bindgen/). crates then check out [The `wasm-bindgen` Guide](https://rustwasm.github.io/docs/wasm-bindgen/).
For documentation on the above crates check out [`wasm-bindgen docs.rs`](https://rustwasm.github.io/wasm-bindgen/api/wasm_bindgen/index.html). For documentation on the above crates check out [`wasm-bindgen docs.rs`](https://rustwasm.github.io/wasm-bindgen/api/wasm_bindgen/index.html).
@ -33,14 +33,13 @@ types / traits you will see pop up again and again.
### `#[wasm_bindgen]` macro ### `#[wasm_bindgen]` macro
The `#[wasm_bindgen]` macro, in a high level view, is your translator between Rust and JavaScript, it The `#[wasm_bindgen]` macro provides an interface between Rust and JavaScript, providing a system
allows you to describe imported JavaScript types in terms of Rust and vice versa. Using this macro for translating between the two. Using this macro is more advanced, and you shouldn't need to reach
is more advanced, and you shouldn't need to reach for it unless you are trying to interop with an for it unless you are trying to use an external JavaScript library. The `js-sys` and `web-sys`
external JavaScript library. The `js-sys` and `web-sys` crates are essentially imported types using crates expose `wasm-bindgen` definitions for built-in Javascript types and browser APIs.
this macro for JavaScript types and the browser API respectively.
Let's go over a simple example of using the `#[wasm-bindgen]` macro to import some specific flavours Let's go over a simple example of using the `#[wasm-bindgen]` macro to import some specific flavours
of the [`console.log`](https://developer.mozilla.org/en-US/docs/Web/API/Console/log). of the [`console.log`](https://developer.mozilla.org/en-US/docs/Web/API/Console/log) function.
```rust ,no_run ```rust ,no_run
use wasm_bindgen::prelude::*; use wasm_bindgen::prelude::*;
@ -78,14 +77,15 @@ _This example was adapted from [1.2 Using console.log of The `wasm-bindgen` Guid
### Simulating inheritance ### Simulating inheritance
Inheritance between JavaScript classes is a big part of the language and is a major part of how the Inheritance between JavaScript classes is a core feature of the Javascript language, and the DOM
Document Object Model (DOM). When types are imported using `wasm-bindgen` you can (Document Object Model) is designed around it. When types are imported using `wasm-bindgen` you can
also add attributes that describe its inheritance. also add attributes that describe their inheritance.
In Rust this inheritance is simulated using the [`Deref`](https://doc.rust-lang.org/std/ops/trait.Deref.html) In Rust this inheritance is represented using the [`Deref`](https://doc.rust-lang.org/std/ops/trait.Deref.html)
and [`AsRef`](https://doc.rust-lang.org/std/convert/trait.AsRef.html) traits. An example of this and [`AsRef`](https://doc.rust-lang.org/std/convert/trait.AsRef.html) traits. An example of this
might help; so say you have three types `A`, `B`, and `C` where `C` extends `B` which in turn might help; so say you have three types `A`, `B`, and `C` where `C` extends `B` which in turn
extends `A`. extends `A`.
When importing these types the `#[wasm-bindgen]` macro will implement the `Deref` and `AsRef` When importing these types the `#[wasm-bindgen]` macro will implement the `Deref` and `AsRef`
traits in the following way: traits in the following way:
@ -99,8 +99,7 @@ it was `&B` or `&A`.
Its important to note that every single type imported using `#[wasm-bindgen]` has the same root type, Its important to note that every single type imported using `#[wasm-bindgen]` has the same root type,
you can think of it as the `A` in the example above, this type is [`JsValue`](#jsvalue) which has you can think of it as the `A` in the example above, this type is [`JsValue`](#jsvalue) which has
its own section its own section below.
below.
_[extends section in The `wasm-bindgen` Guide](https://rustwasm.github.io/docs/wasm-bindgen/reference/attributes/on-js-imports/extends.html)_ _[extends section in The `wasm-bindgen` Guide](https://rustwasm.github.io/docs/wasm-bindgen/reference/attributes/on-js-imports/extends.html)_
@ -109,19 +108,19 @@ _[extends section in The `wasm-bindgen` Guide](https://rustwasm.github.io/docs/w
This is a representation of an object owned by JavaScript, this is a root catch-all type for `wasm-bindgen`. This is a representation of an object owned by JavaScript, this is a root catch-all type for `wasm-bindgen`.
Any type that comes from `wasm-bindgen` is a `JsValue` and this is because JavaScript doesn't have Any type that comes from `wasm-bindgen` is a `JsValue` and this is because JavaScript doesn't have
a strong type system so any function that accepts a variable `x` doesn't define its type so `x` can be a strong type system so any function that accepts a variable `x` doesn't define its type so `x` can be
a valid JavaScript value; hence `JsValue`. So when you are working with imported functions or types that a valid JavaScript value; hence `JsValue`. If you are working with imported functions or types that
accept a `JsValue`, then any imported value is _technically_ valid. accept a `JsValue`, then any imported value is _technically_ valid.
`JsValue` can be accepted by a function but that function may still only expect certain types and this `JsValue` can be accepted by a function but that function may still only accept certain types and this
can lead to panics - so when using raw `wasm-bindgen` APIs check the documentation of the JavaScript can lead to panics - so when using raw `wasm-bindgen` APIs check the documentation of the JavaScript
being imported whether an exception will be caused if that value is not a certain type. being imported as to whether an exception (panic) will be raised if that value is not a certain type.
_[`JsValue` documentation](https://rustwasm.github.io/wasm-bindgen/api/wasm_bindgen/struct.JsValue.html)._ _[`JsValue` documentation](https://rustwasm.github.io/wasm-bindgen/api/wasm_bindgen/struct.JsValue.html)._
### [`JsCast`](https://rustwasm.github.io/wasm-bindgen/api/wasm_bindgen/trait.JsCast.html) ### [`JsCast`](https://rustwasm.github.io/wasm-bindgen/api/wasm_bindgen/trait.JsCast.html)
Rust has a strong type system and JavaScript...doesn't 😞 So in order for Rust to maintain these Rust has a strong type system and JavaScript...doesn't 😞. In order for Rust to maintain these
strong types but still be convenient the web assembly group came up with a pretty neat trait `JsCast`. strong types but still be convenient the WebAssembly group came up with a pretty neat trait `JsCast`.
Its job is to help you move from one JavaScript "type" to another, which sounds vague, but it means Its job is to help you move from one JavaScript "type" to another, which sounds vague, but it means
that if you have one type which you know is really another then you can use the functions of `JsCast` that if you have one type which you know is really another then you can use the functions of `JsCast`
to jump from one type to the other. It's a nice trait to get to know when working with `web-sys`, to jump from one type to the other. It's a nice trait to get to know when working with `web-sys`,
@ -195,9 +194,10 @@ _[`js-sys` documentation](https://rustwasm.github.io/wasm-bindgen/api/js_sys/ind
## [`wasm-bindgen-futures`](https://crates.io/crates/wasm-bindgen-futures) ## [`wasm-bindgen-futures`](https://crates.io/crates/wasm-bindgen-futures)
The `wasm-bindgen-futures` crate provides a bridge for working with JavaScript Promise types as a The `wasm-bindgen-futures` crate provides a bridge for working with JavaScript Promise types as a
Rust Future, and similarly contains utilities to turn a rust Future into a JavaScript Promise. Rust [`Future`](https://doc.rust-lang.org/stable/std/future/trait.Future.html), and contains
This can be useful when working with asynchronous or otherwise blocking work in Rust (wasm), utilities to turn a rust Future into a JavaScript Promise. This can be useful when working with
and provides the ability to interoperate with JavaScript events and JavaScript I/O primitives. asynchronous or otherwise blocking work in Rust (wasm), and provides the ability to interoperate
with JavaScript events and JavaScript I/O primitives.
There are three main interfaces in this crate currently: There are three main interfaces in this crate currently:

View File

@ -31,13 +31,15 @@ cd yew-app
### Run a hello world example ### Run a hello world example
To verify the Rust environment is setup, run the initial project using the cargo build tool. After output about the build process, you should see the expected "Hello World" message. To verify the Rust environment is setup, run the initial project using `cargo run`. You should see
a "Hello World!" message.
```bash ```bash
cargo run cargo run
# output: Hello World!
``` ```
### Converting the project into a Yew web application ### Setting up the project as a Yew web application
To convert this simple command line application to a basic Yew web application, a few changes are needed. To convert this simple command line application to a basic Yew web application, a few changes are needed.
@ -58,12 +60,13 @@ yew = "0.19"
#### Update main.rs #### Update main.rs
We need to generate a template which sets up a root Component called `App` which renders a button that updates its value when clicked. We need to generate a template which sets up a root Component called `App` which renders a button
Replace the contents of `src/main.rs` with the following code. that updates its value when clicked. Replace the contents of `src/main.rs` with the following code.
:::note :::note
The line `yew::start_app::<App>()` inside `main()` starts your application and mounts it to the page's `<body>` tag. The call to `yew::start_app::<App>()` inside the `main` function starts your application and mounts
If you would like to start your application with any dynamic properties, you can instead use `yew::start_app_with_props::<App>(..)`. it to the page's `<body>` tag. If you would like to start your application with any dynamic
properties, you can instead use `yew::start_app_with_props::<App>(..)`.
::: :::
```rust ,no_run, title=main.rs ```rust ,no_run, title=main.rs
@ -115,7 +118,7 @@ Run the following command to build and serve the application locally.
trunk serve trunk serve
``` ```
Trunk will helpfully rebuild your application if you modify any of its files. Trunk will rebuild your application if you modify any of its source code files.
## Congratulations ## Congratulations

View File

@ -2,7 +2,7 @@
title: "Examples" title: "Examples"
--- ---
The Yew repository is chock-full of [examples] (in various states of maintenance). The Yew repository is contains many [examples] (in various states of maintenance).
We recommend perusing them to get a feel for how to use different features of the framework. We recommend perusing them to get a feel for how to use different features of the framework.
We also welcome Pull Requests and issues for when they inevitably get neglected and need some ♥️ We also welcome Pull Requests and issues for when they inevitably get neglected and need some ♥️

View File

@ -5,7 +5,7 @@ description: "Set yourself up for success"
--- ---
Your local development environment will need a couple of tools to compile, build, package and debug your Yew application. You will need a couple of tools to compile, build, package and debug your Yew application.
When getting started, we recommend using [Trunk](https://trunkrs.dev/). Trunk is a WASM web application When getting started, we recommend using [Trunk](https://trunkrs.dev/). Trunk is a WASM web application
bundler for Rust. bundler for Rust.
@ -14,16 +14,17 @@ bundler for Rust.
To install Rust, follow the [official instructions](https://www.rust-lang.org/tools/install). To install Rust, follow the [official instructions](https://www.rust-lang.org/tools/install).
:::important :::important
The minimum supported Rust version (MSRV) for Yew is `1.49.0`. Older versions can cause unexpected issues accompanied The minimum supported Rust version (MSRV) for Yew is `1.56.0`. Older versions can cause unexpected
by incomprehensible error messages. You can check your toolchain version using `rustup show` (under "active toolchain") issues accompanied by incomprehensible error messages. You can check your toolchain version using
or alternatively `rustc --version`. To update your toolchain, run `rustup update`. `rustup show` (under "active toolchain") or alternatively `rustc --version`. To update your
toolchain, run `rustup update`.
::: :::
## Install WebAssembly target ## Install WebAssembly target
Rust can compile source codes for different "targets" (e.g. different processors). The compilation target for Rust can compile source codes for different "targets" (e.g. different processors). The compilation
browser-based WebAssembly is called `wasm32-unknown-unknown`. target for browser-based WebAssembly is called `wasm32-unknown-unknown`. The following command will
The following command will add this target to your development environment. add the WebAssembly target to your development environment.
```shell ```shell
rustup target add wasm32-unknown-unknown rustup target add wasm32-unknown-unknown
@ -31,7 +32,8 @@ rustup target add wasm32-unknown-unknown
## Install Trunk ## Install Trunk
Trunk is the recommended tool for managing deployment and packaging, and will be used throughout the documentation and examples. Trunk is the recommended tool for managing deployment and packaging, and is used throughout the
documentation and examples.
```shell ```shell
# note that this might take a while to install, because it compiles everything from scratch # note that this might take a while to install, because it compiles everything from scratch

View File

@ -6,11 +6,12 @@ title: "From 0.1.0 to 0.2.0"
The `Context` and `Job` Agents have been removed in favour of Yew's Context API. The `Context` and `Job` Agents have been removed in favour of Yew's Context API.
You can see the updated [`pub_sub`](https://github.com/yewstack/yew/tree/master/examples/pub_sub) example about how to use Context API. You can see the updated [`pub_sub`](https://github.com/yewstack/yew/tree/master/examples/pub_sub)
which demonstrate how to use the context API.
For users of `yew_agent::utils::store`, you may switch to third party solutions like: [Yewdux](https://github.com/intendednull/yewdux) or [Bounce](https://github.com/futursolo/bounce). For users of `yew_agent::utils::store`, you may switch to third party solutions like: [Yewdux](https://github.com/intendednull/yewdux) or [Bounce](https://github.com/futursolo/bounce).
## `Threaded` is separated into `PublicAgent` and `PrivateAgent` ## `Threaded` has been separated into `PublicAgent` and `PrivateAgent`
Replace `use yew_agent::Threaded;` with `use yew_agent::PublicAgent;`. Replace `use yew_agent::Threaded;` with `use yew_agent::PublicAgent;`.

View File

@ -2,6 +2,8 @@
title: "From 0.15.0 to 0.16.0" title: "From 0.15.0 to 0.16.0"
--- ---
The router API has been completely redone in `0.16.0`. The router API has been completely rewritten in `0.16.0`.
There would be to many things to list out here, so we highly recommend to read up on the [router documentation](./../../concepts/router) and adapt your app accordingly. Because it is such a radical change, there are too many things to list out here, so we highly
recommend to read the updated [router documentation](./../../concepts/router) and adapt your app
accordingly.

View File

@ -7,11 +7,12 @@ import TabItem from '@theme/TabItem';
`Yew 0.19.0` has changed a lot, thus this migration will not cover ALL of the changes. `Yew 0.19.0` has changed a lot, thus this migration will not cover ALL of the changes.
Instead only the most impacting changes are mentioned and the rest should be picked up by cargo. Instead only the most impactful changes are mentioned and the rest should be picked up by `cargo`.
## html! requirement for braces around most props ## `html!` requirement for braces around most props
Put it simply almost all the time you have to provide braces for props: The syntax of the `html!` macro has been updated, such that in most cases you will need to enclose
props with braces.
<Tabs> <Tabs>
<TabItem value="Invalid" label="Invalid"> <TabItem value="Invalid" label="Invalid">
@ -40,7 +41,7 @@ html!{
</TabItem> </TabItem>
<TabItem value="Shorthand" label="Shorthand"> <TabItem value="Shorthand" label="Shorthand">
Also now you can use a shorthand if prop and variable names are the same: Shorthand initialization has been added:
```rust {4}, ignore ```rust {4}, ignore
let age = 1; let age = 1;
@ -54,9 +55,10 @@ html!{
</TabItem> </TabItem>
</Tabs> </Tabs>
There is a community provided regex to help with this change, though we cant promise it will work all the time. There is a community provided regex to help automate the update, though we can't promise it will work
all the time.
It for sure breaks when it encounters closures, specifically `|_|` syntax. It breaks when it encounters closures (specifically the `|_|` syntax).
find with `=(?![{">=\s])([^\s></]*(\s!{0,1}[=|&]{2}\s[^\s></]*)*)` find with `=(?![{">=\s])([^\s></]*(\s!{0,1}[=|&]{2}\s[^\s></]*)*)`
@ -64,9 +66,10 @@ replace with `={$1}`
## Function components ## Function components
[Function components](./../../concepts/function-components/introduction) are a brand new way to write components that require less boilerplate than their structural counter part. [Function components](./../../concepts/function-components/introduction) are a brand new way to write components that
requires less boilerplate than their structural counterpart.
While this change does not force you to change your codebase, this migration time is a good opportunity to start using them in your codebase. While this change does not force you to change your codebase, as you migrate from `0.18` to `0.19`, this migration time might present a good opportunity to start using them in your codebase.
## Struct components lifecycle methods and ctx ## Struct components lifecycle methods and ctx
@ -128,8 +131,9 @@ html! {
## New crate - yew-agent ## New crate - yew-agent
Yew agents were removed to their separate crate, see [yew agents migration guide](./../yew-agent/from-0_0_0-to-0_1_0) Yew agents were removed to a separate crate, see [yew agents migration guide](./../yew-agent/from-0_0_0-to-0_1_0)
## Ending note ## Ending note
We are sorry if some things are not covered in this guide as it was truly a huge update and we hope that the uncovered issues will be clearly explained by cargo check/build/clippy. We are sorry if some things are not covered in this guide as it was truly a huge update and we hope
that the uncovered issues will be clearly explained in error messages emitted by the Rust compiler.

View File

@ -41,6 +41,5 @@ Status of all major initiatives can be tracked on the Yew Github [project board]
### Pain points ### Pain points
* [Component boilerplate](https://github.com/yewstack/yew/issues/830) * [Component boilerplate](https://github.com/yewstack/yew/issues/830)
* Fetch API
* [Agents](https://github.com/yewstack/yew/projects/6) * [Agents](https://github.com/yewstack/yew/projects/6)

View File

@ -11,10 +11,10 @@ Support for [shallow rendering](https://github.com/yewstack/yew/issues/1413) can
## Snapshot testing ## Snapshot testing
Yew exposes `yew::tests::layout_tests` module to facilitate with snapshot testing of components. Yew exposes the `yew::tests::layout_tests` module to facilitate with snapshot testing of components.
:::important contribute :::important contribute
Help improve documentation for snapshot testing. Help improve the documentation for snapshot testing.
::: :::
## wasm_bindgen_test ## wasm_bindgen_test

View File

@ -289,8 +289,8 @@ for the behaviour of `JsCast` but with the smaller scope of events and their tar
similar to what you would using `JsCast`. similar to what you would using `JsCast`.
::: :::
The `TargetCast` trait builds off of `JsCast` and is specialized towards getting typed event targets The `TargetCast` trait is built on top of `JsCast` and is specialized towards getting typed event
from events. targets from events.
`TargetCast` comes with Yew so no need to add a dependency in order to use the trait methods on events `TargetCast` comes with Yew so no need to add a dependency in order to use the trait methods on events
but it works in a very similar way to `JsCast`. but it works in a very similar way to `JsCast`.

View File

@ -8,7 +8,7 @@ slug: /concepts/wasm-bindgen
high-level interactions between Wasm modules and JavaScript; it is built with Rust by high-level interactions between Wasm modules and JavaScript; it is built with Rust by
[The Rust and WebAssembly Working Group](https://rustwasm.github.io/). [The Rust and WebAssembly Working Group](https://rustwasm.github.io/).
Yew builds off `wasm-bindgen` and specifically uses the following of its crates: Yew is built on `wasm-bindgen` and specifically uses the following of its crates:
- [`js-sys`](https://crates.io/crates/js-sys) - [`js-sys`](https://crates.io/crates/js-sys)
- [`wasm-bindgen`](https://crates.io/crates/wasm-bindgen) - [`wasm-bindgen`](https://crates.io/crates/wasm-bindgen)