Skip to content

Add guide documentation for the js-sys crate #566

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Jul 27, 2018
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions guide/src/SUMMARY.md
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,9 @@
- [Customizing imports](./design/import-customization.md)
- [Rust Type conversions](./design/rust-type-conversions.md)
- [Types in `wasm-bindgen`](./design/describe.md)
- [`js-sys`](./js-sys.md)
- [Testing](./js-sys/testing.md)
- [Adding More APIs](./js-sys/adding-more-apis.md)
- [`web-sys`](./web-sys.md)
- [Overview](./web-sys/overview.md)
- [Testing](./web-sys/testing.md)
Expand Down
51 changes: 51 additions & 0 deletions guide/src/js-sys.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,51 @@
# `js-sys`

The [`js-sys` crate][js-sys] provides raw bindings to all the global APIs
guaranteed to exist in every JavaScript environment by the ECMAScript standard,
and its source lives at [`wasm-bindgen/crates/js-sys`][src]. With the `js-sys`
crate, we can work with `Object`s, `Array`s, `Function`s, `Map`s, `Set`s,
etc... without writing the `#[wasm_bindgen]` imports by hand.

Documentation for this crate will eventually be available on [docs.rs][docsrs]
but temporarily you can also check out the [master branch
documentation][masterdoc] for the crate.

[docsrs]: https://docs.rs/js-sys
[masterdoc]: https://rustwasm.github.io/wasm-bindgen/api/js_sys/
[src]: https://github.com/rustwasm/wasm-bindgen/tree/master/crates/js-sys

For example, we can invoke JavaScript [`Function`][mdn-function] callbacks and
time how long they take to execute with [`Date.now()`][mdn-date-now], and we
don't need to write any JS imports ourselves:

```rust
extern crate js_sys;
extern crate wasm_bindgen;
use wasm_bindgen::prelude::*;

#[wasm_bindgen]
pub fn timed(callback: &js_sys::Function) -> f64 {
let then = js_sys::Date::now();
callback.apply(JsValue::null(), &js_sys::Array::new()).unwrap();
let now = js_sys::Date::now();
now - then
}
```

The `js-sys` crate isn't quite 100% feature complete yet. There are still some
JavaScript types and methods that we don't have bindings for. If you'd like to
help out check out [the contribution documentation][contrib].

Also, as mentioned above, the `js-sys` crate doesn't contain bindings to any Web
APIs like [`document.querySelectorAll`][mdn-qsa]. These will be part of the
[`web-sys`](./web-sys.html) crate.

[MDN]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects
[js-sys]: https://crates.io/crates/js-sys
[issue]: https://github.com/rustwasm/wasm-bindgen/issues/275
[mdn-function]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function
[mdn-qsa]: https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll
[web-sys-contributing]: https://rustwasm.github.io/wasm-bindgen/web-sys.html
[web-sys-issues]: https://github.com/rustwasm/wasm-bindgen/issues?q=is%3Aissue+is%3Aopen+label%3Aweb-sys
[mdn-date-now]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/now
[contrib]: https://github.com/rustwasm/wasm-bindgen/issues/275
26 changes: 26 additions & 0 deletions guide/src/js-sys/adding-more-apis.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
# Adding more APIs

We've got a [GitHub issue][issue] tracking the remaining APIs that need to be
added to the `js-sys` crate, and we'd love your help in contributing! The steps
to follow are:

* Comment on the issue saying which thing you are going to make bindings for
(so that we don't accidentally duplicate effort).

* Open the [MDN
page](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects)
for the relevant JS API.

* Open `crates/js-sys/src/lib.rs` in your editor; this is the file where we are
implementing the bindings.

* Follow the instructions in the top of `crates/js-sys/src/lib.rs` about how to
add new bindings.

* Add a test for the new binding to `crates/js-sys/tests/wasm/MyType.rs`

* Run the JS global API bindings tests with `cargo test -p js-sys --target wasm32-unknown-unknown`

* Send a pull request!

[issue]: https://github.com/rustwasm/wasm-bindgen/issues/275
13 changes: 13 additions & 0 deletions guide/src/js-sys/testing.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
# Testing

You can test the `js-sys` crate by running `cargo test --target
wasm32-unknown-unknown` within the `crates/web-sys` directory in the
`wasm-bindgen` repository:

```sh
cd wasm-bindgen/crates/web-sys
cargo test --target wasm32-unknown-unknown
```

These tests are largely executed in Node.js right now via the
`wasm-bindgen-test` framework. More documentation on the framework coming soon!