mirror of https://github.com/yewstack/yew
57 lines
1.7 KiB
Plaintext
57 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 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
|
|
> original look of the technology.
|
|
|
|
Sadly as of today WebAssembly is not feature-complete for DOM interactions. This means even in Yew we sometimes rely on calling Javascript.
|
|
|
|
## wasm-bindgen
|
|
|
|
[`wasm-bindgen`](https://github.com/rustwasm/wasm-bindgen) is a library and tool that allows to call javascript from rust and rust from javascript.
|
|
|
|
We highly recommend you give a look to their [documentation](https://rustwasm.github.io/docs/wasm-bindgen/)
|
|
|
|
We will also expand upon this concept in the [more wasm-bindgen](../wasm-bindgen).
|
|
|
|
## 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 give a look to their [documentation](https://rustwasm.github.io/docs/wasm-bindgen/)
|
|
|
|
We will also expand upon this concept in the [more wasm-bindgen](../wasm-bindgen).
|