mirror of
https://github.com/yewstack/yew.git
synced 2025-12-08 21:26:25 +00:00
d77cf0196b
* Update CHANGELOG https://github.com/yewstack/yew/actions/runs/11314974928/job/31465588862 * Add items. * Write blog. * Archive the documents. * Add author. * Update SSR document. * Fix typo. * Add simplified Chinese translation. * Update package.json * Sync documents * Add traditional Chinese translation. * Sync documents * Add Japanese translation. * Sync documents * Fix typo by `fmt:write`. * Fix typo by `write-translations`. * Apply suggestions from code review * Fix typo. * #3769 in changelog --------- Co-authored-by: Elina <imelina@elina.website>
54 lines
1.6 KiB
Plaintext
54 lines
1.6 KiB
Plaintext
---
|
|
title: 'JS with RS'
|
|
description: 'JavaScript with Rust'
|
|
comment: 'Keep this file as short and simple as possible. Its purpose is to ease the reader into components in Yew instead of providing proper API docs'
|
|
---
|
|
|
|
import Tabs from '@theme/Tabs'
|
|
import TabItem from '@theme/TabItem'
|
|
|
|
> Yew centrally operates on the idea of keeping everything that a reusable piece of
|
|
> UI may need in one place - rust files, while also keeping the underlying technology
|
|
> accessible where necessary.
|
|
|
|
As of today, WebAssembly is not feature-complete for DOM interactions. This means even in Yew we
|
|
sometimes rely on calling JavaScript. What follows is an overview of the involved libraries.
|
|
|
|
## wasm-bindgen
|
|
|
|
[`wasm-bindgen`](https://github.com/rustwasm/wasm-bindgen) is a library and tool that bridges calls between JavaScript and Rust functions.
|
|
|
|
We highly recommend you take a look at their [documentation](https://rustwasm.github.io/docs/wasm-bindgen/) and our [quick guide](./wasm-bindgen.mdx).
|
|
|
|
## web-sys
|
|
|
|
The [`web-sys` crate](https://crates.io/crates/web-sys) provides bindings for Web APIs and allows us to write JavaScript code in a rustyfied and safe way.
|
|
|
|
Example:
|
|
|
|
<Tabs>
|
|
<TabItem value="JS" label="JS">
|
|
|
|
```js
|
|
let document = window.document
|
|
```
|
|
|
|
</TabItem>
|
|
|
|
<TabItem value="RS" label="RS">
|
|
|
|
```rust ,no_run
|
|
use wasm_bindgen::UnwrapThrowExt;
|
|
use web_sys::window;
|
|
|
|
let document = window()
|
|
.expect_throw("window is undefined")
|
|
.document()
|
|
.expect_throw("document is undefined");
|
|
```
|
|
|
|
</TabItem>
|
|
</Tabs>
|
|
|
|
Once again we highly recommend you take a look at their [documentation](https://rustwasm.github.io/docs/wasm-bindgen/) and our [quick guide](./web-sys.mdx).
|