Skip to content

Commit 00bb673

Browse files
authored
Add guide documentation for the js-sys crate (#566)
1 parent f893e34 commit 00bb673

File tree

4 files changed

+93
-0
lines changed

4 files changed

+93
-0
lines changed

guide/src/SUMMARY.md

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,9 @@
2727
- [Customizing imports](./design/import-customization.md)
2828
- [Rust Type conversions](./design/rust-type-conversions.md)
2929
- [Types in `wasm-bindgen`](./design/describe.md)
30+
- [`js-sys`](./js-sys.md)
31+
- [Testing](./js-sys/testing.md)
32+
- [Adding More APIs](./js-sys/adding-more-apis.md)
3033
- [`web-sys`](./web-sys.md)
3134
- [Overview](./web-sys/overview.md)
3235
- [Testing](./web-sys/testing.md)

guide/src/js-sys.md

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
# `js-sys`
2+
3+
The [`js-sys` crate][js-sys] provides raw bindings to all the global APIs
4+
guaranteed to exist in every JavaScript environment by the ECMAScript standard,
5+
and its source lives at [`wasm-bindgen/crates/js-sys`][src]. With the `js-sys`
6+
crate, we can work with `Object`s, `Array`s, `Function`s, `Map`s, `Set`s,
7+
etc... without writing the `#[wasm_bindgen]` imports by hand.
8+
9+
Documentation for this crate will eventually be available on [docs.rs][docsrs]
10+
but temporarily you can also check out the [master branch
11+
documentation][masterdoc] for the crate.
12+
13+
[docsrs]: https://docs.rs/js-sys
14+
[masterdoc]: https://rustwasm.github.io/wasm-bindgen/api/js_sys/
15+
[src]: https://github.com/rustwasm/wasm-bindgen/tree/master/crates/js-sys
16+
17+
For example, we can invoke JavaScript [`Function`][mdn-function] callbacks and
18+
time how long they take to execute with [`Date.now()`][mdn-date-now], and we
19+
don't need to write any JS imports ourselves:
20+
21+
```rust
22+
extern crate js_sys;
23+
extern crate wasm_bindgen;
24+
use wasm_bindgen::prelude::*;
25+
26+
#[wasm_bindgen]
27+
pub fn timed(callback: &js_sys::Function) -> f64 {
28+
let then = js_sys::Date::now();
29+
callback.apply(JsValue::null(), &js_sys::Array::new()).unwrap();
30+
let now = js_sys::Date::now();
31+
now - then
32+
}
33+
```
34+
35+
The `js-sys` crate isn't quite 100% feature complete yet. There are still some
36+
JavaScript types and methods that we don't have bindings for. If you'd like to
37+
help out check out [the contribution documentation][contrib].
38+
39+
Also, as mentioned above, the `js-sys` crate doesn't contain bindings to any Web
40+
APIs like [`document.querySelectorAll`][mdn-qsa]. These will be part of the
41+
[`web-sys`](./web-sys.html) crate.
42+
43+
[MDN]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects
44+
[js-sys]: https://crates.io/crates/js-sys
45+
[issue]: https://github.com/rustwasm/wasm-bindgen/issues/275
46+
[mdn-function]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function
47+
[mdn-qsa]: https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll
48+
[web-sys-contributing]: https://rustwasm.github.io/wasm-bindgen/web-sys.html
49+
[web-sys-issues]: https://github.com/rustwasm/wasm-bindgen/issues?q=is%3Aissue+is%3Aopen+label%3Aweb-sys
50+
[mdn-date-now]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/now
51+
[contrib]: https://github.com/rustwasm/wasm-bindgen/issues/275

guide/src/js-sys/adding-more-apis.md

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
# Adding more APIs
2+
3+
We've got a [GitHub issue][issue] tracking the remaining APIs that need to be
4+
added to the `js-sys` crate, and we'd love your help in contributing! The steps
5+
to follow are:
6+
7+
* Comment on the issue saying which thing you are going to make bindings for
8+
(so that we don't accidentally duplicate effort).
9+
10+
* Open the [MDN
11+
page](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects)
12+
for the relevant JS API.
13+
14+
* Open `crates/js-sys/src/lib.rs` in your editor; this is the file where we are
15+
implementing the bindings.
16+
17+
* Follow the instructions in the top of `crates/js-sys/src/lib.rs` about how to
18+
add new bindings.
19+
20+
* Add a test for the new binding to `crates/js-sys/tests/wasm/MyType.rs`
21+
22+
* Run the JS global API bindings tests with `cargo test -p js-sys --target wasm32-unknown-unknown`
23+
24+
* Send a pull request!
25+
26+
[issue]: https://github.com/rustwasm/wasm-bindgen/issues/275

guide/src/js-sys/testing.md

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
# Testing
2+
3+
You can test the `js-sys` crate by running `cargo test --target
4+
wasm32-unknown-unknown` within the `crates/web-sys` directory in the
5+
`wasm-bindgen` repository:
6+
7+
```sh
8+
cd wasm-bindgen/crates/web-sys
9+
cargo test --target wasm32-unknown-unknown
10+
```
11+
12+
These tests are largely executed in Node.js right now via the
13+
`wasm-bindgen-test` framework. More documentation on the framework coming soon!

0 commit comments

Comments
 (0)