Reorganize and rewrite examples

This commit is a large-ish scale reorganization of our examples. The
main goal here is to have a dedicated section of the guide for example,
and all examples will be listed there. Each example's `README` is now
just boilerplate pointing at the guide along with a blurb about how to
run it.

Some examples like `math` and `smorgasboard` have been deleted as they
didn't really serve much purpose, and others like `closures` have been
rewritten with `web-sys` instead of hand-bound bindings.

Overall it's hoped that this puts us in a good and consistent state for
our examples, with all of them being described in the guide, excerpts
are in the guide, and they're all relatively idiomatically using
`web-sys`.
This commit is contained in:
Alex Crichton
2018-09-20 16:20:42 -07:00
parent a85e49a2b4
commit 3efe51eb8b
128 changed files with 939 additions and 1304 deletions

View File

@ -1,29 +0,0 @@
# 2D Canvas
Drawing a smiley face with the 2D canvas API. This is a port of part of [this
MDN
tutorial](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes#Moving_the_pen)
to `web-sys`.
[See the full source at
`wasm-bindgen/examples/canvas`.](https://github.com/rustwasm/wasm-bindgen/tree/master/examples/canvas)
![A smiley face](./2d-canvas.png)
## `Cargo.toml`
The `Cargo.toml` enables features necessary to query the DOM and work with 2D
canvas.
```toml
{{#include ../../../../examples/canvas/Cargo.toml}}
```
## `src/lib.rs`
Gets the `<canvas>` element, creates a 2D rendering context, and draws the
smiley face.
```rust
{{#include ../../../../examples/canvas/src/lib.rs}}
```

Binary file not shown.

Before

Width:  |  Height:  |  Size: 3.7 KiB

View File

@ -1,23 +0,0 @@
# The `fetch` API
This example uses the `fetch` API to make an HTTP request to the GitHub API and
then parses the resulting JSON.
[See the full source at
`wasm-bindgen/examples/fetch`.](https://github.com/rustwasm/wasm-bindgen/tree/master/examples/fetch)
## `Cargo.toml`
The `Cargo.toml` enables a number of features related to the `fetch` API and
types used: `Headers`, `Request`, etc. It also enables `wasm-bindgen`'s `serde`
support.
```toml
{{#include ../../../../examples/fetch/Cargo.toml}}
```
## `src/lib.rs`
```rust
{{#include ../../../../examples/fetch/src/lib.rs}}
```

View File

@ -1,3 +0,0 @@
# Examples of using `web-sys`
This subsection contains examples of using the `web-sys` crate.

View File

@ -1,24 +0,0 @@
# Paint
A simple painting program.
[See the full source at
`wasm-bindgen/examples/paint`.](https://github.com/rustwasm/wasm-bindgen/tree/master/examples/paint)
## `Cargo.toml`
The `Cargo.toml` enables features necessary to work with the DOM, events and
2D canvas.
```toml
{{#include ../../../../examples/paint/Cargo.toml}}
```
## `src/lib.rs`
Creates the `<canvas>` element, applies a CSS style to it, adds it to the document,
get a 2D rendering context and adds listeners for mouse events.
```rust
{{#include ../../../../examples/paint/src/lib.rs}}
```

View File

@ -1,36 +0,0 @@
# WebAudio
This example creates an [FM
oscillator](https://en.wikipedia.org/wiki/Frequency_modulation_synthesis) using
the [WebAudio
API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API) and
`web-sys`.
[See the full source at
`wasm-bindgen/examples/webaudio`.](https://github.com/rustwasm/wasm-bindgen/tree/master/examples/webaudio)
## `Cargo.toml`
The `Cargo.toml` enables the types needed to use the relevant bits of the
WebAudio API.
```toml
{{#include ../../../../examples/webaudio/Cargo.toml}}
```
## `src/lib.rs`
The Rust code implements the FM oscillator.
```rust
{{#include ../../../../examples/webaudio/src/lib.rs}}
```
## `index.js`
A small bit of JavaScript glues the rust module to input widgets and translates
events into calls into wasm code.
```js
{{#include ../../../../examples/webaudio/index.js}}
```

View File

@ -1,25 +0,0 @@
# 2D Canvas
This example draws a triangle to the screen using the WebGL API.
[See the full source at
`wasm-bindgen/examples/webgl`.](https://github.com/rustwasm/wasm-bindgen/tree/master/examples/webgl)
## `Cargo.toml`
The `Cargo.toml` enables features necessary to obtain and use a WebGL
rendering context.
```toml
{{#include ../../../../examples/webgl/Cargo.toml}}
```
## `src/lib.rs`
This source file handles all of the necessary logic to obtain a rendering
context, compile shaders, fill a buffer with vertex coordinates, and draw a
triangle to the screen.
```rust
{{#include ../../../../examples/webgl/src/lib.rs}}
```