mirror of
https://github.com/yewstack/yew.git
synced 2025-12-08 21:26:25 +00:00
f0209c786f
* 0.20 Changelog * Improve changelog generator * Add blog post * Add blog post * Apply suggestions from code review Co-authored-by: WorldSEnder <WorldSEnder@users.noreply.github.com> Co-authored-by: Julius Lungys <32368314+voidpumpkin@users.noreply.github.com> * update Changelog * update Cargo.toml * changelog gen compiles * website version 0.20 * add migration guides * prettier * i18n Co-authored-by: WorldSEnder <WorldSEnder@users.noreply.github.com> Co-authored-by: Julius Lungys <32368314+voidpumpkin@users.noreply.github.com>
54 lines
1.7 KiB
Plaintext
54 lines
1.7 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 in 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 enables calls to javascript from rust and back to rust from javascript.
|
|
|
|
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).
|