Merge pull request rustwasm#860 from alexcrichton/juggle-examples

Reorganize and rewrite examples

Cargo.toml

@@ -58,11 +58,9 @@ members = [
   "crates/webidl",
   "crates/webidl-tests",
   "examples/add",
-  "examples/asm.js",
   "examples/canvas",
   "examples/char",
   "examples/closures",
-  "examples/comments",
   "examples/console_log",
   "examples/duck-typed-interfaces",
   "examples/dom",
@@ -71,12 +69,11 @@ members = [
   "examples/hello_world",
   "examples/import_js",
   "examples/julia_set",
-  "examples/math",
   "examples/no_modules",
   "examples/paint",
   "examples/performance",
-  "examples/smorgasboard",
   "examples/wasm-in-wasm",
+  "examples/wasm2js",
   "examples/webaudio",
   "examples/webgl",
   "tests/no-std",

crates/js-sys/src/lib.rs

@@ -1753,6 +1753,13 @@ extern "C" {
     #[wasm_bindgen(constructor)]
     pub fn new(init: &JsValue) -> Date;
 
+    /// Creates a JavaScript Date instance that represents the current moment in
+    /// time.
+    ///
+    /// [MDN documentation](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date)
+    #[wasm_bindgen(constructor)]
+    pub fn new_0() -> Date;
+
     /// The `Date.now()` method returns the number of milliseconds
     /// elapsed since January 1, 1970 00:00:00 UTC.
     ///

crates/macro/ui-tests/Cargo.toml

@@ -1,7 +1,7 @@
 [package]
 name = "ui-tests"
 version = "0.1.0"
-authors = ["The wasm-bindgen Authors"]
+authors = ["The wasm-bindgen Developers"]
 
 [lib]
 path = "test.rs"

crates/test/sample/Cargo.toml

@@ -1,7 +1,7 @@
 [package]
 name = "sample"
 version = "0.1.0"
-authors = ["The wasm-bindgen Authors"]
+authors = ["The wasm-bindgen Developers"]
 
 [lib]
 test = false

crates/webidl-tests/Cargo.toml

@@ -1,7 +1,7 @@
 [package]
 name = "webidl-tests"
 version = "0.1.0"
-authors = ["The wasm-bindgen authors"]
+authors = ["The wasm-bindgen Developers"]
 
 [lib]
 test = false

examples/README.md

@@ -1,42 +1,7 @@
 # Examples
 
-This directory contains a number of examples of the `#[wasm_bindgen]` macro and
-how to display them in the browser. Each directory contains a README with a link
-to https://webassembly.studio so you can also explore the example online
-(apologies if they're out of sync!), and each directory also contains a
-`build.sh` which assembles all the relevant files locally. If you open up
-`index.html` in a web browser you should be able to see everything in action
-when using `build.sh`!
+This directory contains a number of Cargo projects that are all examples of how
+to use `wasm-bindgen` in various contexts. More documentation can be [found
+online][dox]
 
-The examples here are:
-
-* `add` - an example of generating a tiny wasm binary, one that only adds two
-  numbers.
-* `asm.js` - an example of using the `wasm2js` tool from [binaryen] to convert
-  the generated WebAssembly to normal JS
-* `char` - an example of passing the rust `char` type to and from the js `string` type
-* `closures` - an example of how to invoke functions like `setInterval` or use
-  the `onclick` property in conjunction with closures.
-* `comments` - an example of how Rust comments are copied into js bindings
-* `console_log` - a showcase of `#[wasm_bindgen]` importing classes and how to
-  bind `console.log`
-* `dom` - an example of accessing the global `document` object and appending
-  HTML to it
-* `fetch` -- how to use the Fetch API to make async http requests 
-* `hello_world` - the "hello world" of `#[wasm_bindgen]`, aka throwing up a
-  dialog greeting you
-* `import_js` - an example of importing local JS functionality into a crate
-* `math` - like `console_log` except showing how to import Math-related
-  functions instead
-* `no_modules` - an example of how to use the `--no-modules` flag to
-  the `wasm-bindgen` CLI tool
-* `performance` - how to import APIs like `performance.now()` and time various
-  operations in Rust
-* `smorgasboard` - a bunch of features all thrown into one, showing off the
-  various capabilities of the `#[wasm_bindgen]` macro and what you can do with
-  it from JS
-* `wasm-in-wasm` - how to interact with namespaced APIs like
-  `WebAssembly.Module` and shows off creation of a WebAssembly module from Rust
-* `webaudio` - how to use the Web Audio APIs to generate sounds
-
-[binaryen]: https://github.com/WebAssembly/binaryen
+[dox]: https://rustwasm.github.io/wasm-bindgen/examples/index.html

examples/add/README.md

@@ -1,61 +1,15 @@
-# Adding Numbers
+# Adding numbers (small wasm files)
 
-[View this example online](https://webassembly.studio/?f=612vwsrmwft)
+[View documentation for this example online][dox]
 
-This directory is an example of using the `#[wasm_bindgen]` macro to simply add
-two numbers. The neat part about this is that it's an example of how to generate
-the smallest wasm-bindgen binary.
+[dox]: https://rustwasm.github.io/wasm-bindgen/examples/add.html
 
-You can build the example with:
+You can build the example locally with:
 
 ```
 $ ./build.sh
 ```
 
 (or running the commands on Windows manually)
 
-Currently this generates a 651 byte wasm binary:
-
-```
-$ ls -alh add_bg.wasm
--rw-rw-r-- 1 alex alex 651 Apr 20 22:16 add_bg.wasm
-```
-
-If you run [wasm-opt], a C++ tool for optimize WebAssembly, you can make it even
-smaller too!
-
-```
-$ wasm-opt -Os add_bg.wasm -o add.wasm
-$ ls -alh add.wasm
--rw-rw-r-- 1 alex alex 100 Apr 20 22:19 add.wasm
-```
-
-And sure enough, using the [wasm2wat] tool it's quite small!
-
-```
-$ wasm2wat add.wasm
-(module
-  (type (;0;) (func (param i32 i32) (result i32)))
-  (func (;0;) (type 0) (param i32 i32) (result i32)
-    get_local 1
-    get_local 0
-    i32.add)
-  (memory (;0;) 2)
-  (export "memory" (memory 0))
-  (export "add" (func 0))
-(data (i32.const 1545) "invalid malloc request"))
-```
-
-Note that it's important to point out that the size reductions here are because
-the wasm is compiled in release mode by the build script and this crate's
-workspace has the following configuration
-
-```toml
-[profile.release]
-lto = true
-opt-level = 's'
-panic = 'abort'
-```
-
-[wasm2wat]: https://github.com/webassembly/wabt
-[wasm-opt]: https://github.com/webassembly/binaryen
+and then visiting http://localhost:8080 in a browser should run the example!

examples/canvas/.gitignore

@@ -1,4 +1,4 @@
 package-lock.json
-wasm_bindgen_canvas_demo.js
-wasm_bindgen_canvas_demo_bg.js
-wasm_bindgen_canvas_demo_bg.wasm
+canvas.js
+canvas_bg.js
+canvas_bg.wasm

examples/canvas/Cargo.toml

@@ -1,5 +1,5 @@
 [package]
-name = "wasm-bindgen-canvas-demo"
+name = "canvas"
 version = "0.1.0"
 authors = ["The wasm-bindgen Developers"]
 

examples/canvas/README.md

@@ -1,15 +1,15 @@
-# Canvas 2D Example
+# 2D Canvas
 
-This directory is an example of using the `web-sys` crate to draw on a 2D
-canvas.
+[View documentation for this example online][dox]
 
-You can build and run the example with:
+[dox]: https://rustwasm.github.io/wasm-bindgen/examples/2d-canvas.html
+
+You can build the example locally with:
 
 ```
 $ ./build.sh
 ```
 
 (or running the commands on Windows manually)
 
-and then opening up `http://localhost:8080/` in a web browser should show a
-smiley face drawn on canvas by Rust and WebAssembly.
+and then visiting http://localhost:8080 in a browser should run the example!

examples/canvas/build.sh

@@ -9,7 +9,7 @@ cargo +nightly build --target wasm32-unknown-unknown
 
 cargo +nightly run --manifest-path ../../crates/cli/Cargo.toml \
   --bin wasm-bindgen -- \
-  ../../target/wasm32-unknown-unknown/debug/wasm_bindgen_canvas_demo.wasm --out-dir .
+  ../../target/wasm32-unknown-unknown/debug/canvas.wasm --out-dir .
 
 npm install
 npm run serve

examples/canvas/index.html

@@ -4,6 +4,5 @@
   </head>
   <body>
     <canvas id="canvas" height="150" width="150" />
-    <script src='./index.js'></script>
   </body>
 </html>

examples/canvas/index.js

@@ -1,5 +1,5 @@
 // For more comments about what's going on here, check out the `hello_world`
 // example.
-import('./wasm_bindgen_canvas_demo').then(canvas => {
+import('./canvas').then(canvas => {
   canvas.draw();
 });

examples/char/README.md

@@ -1,13 +1,15 @@
-# Char
+# Working with the `char` type
 
-This directory is an example of how the `#[wasm_bindgen]` macro will convert the rust `char` type to a single code-point js `string`. 
+[View documentation for this example online][dox]
+
+[dox]: https://rustwasm.github.io/wasm-bindgen/examples/char.html
 
 You can build the example locally with:
 
 ```
 $ ./build.sh
 ```
 
-Opening your web browser should display a single counter with a random character for it's `key` and 0 for its `count`. You can click the `+` button to increase a counter's count. By clicking on the "add counter" button you should see a new counter added to the list with a different random character for it's `key`.
+(or running the commands on Windows manually)
 
-Under the hood javascript is choosing a random character from an Array of characters and passing that to the rust Counter struct's constructor so the character you are seeing on the page has made the full round trip from js to rust and back to js.
+and then visiting http://localhost:8080 in a browser should run the example!

examples/char/index.html

@@ -32,7 +32,7 @@
                 align-content: flex-start;
             }
             .counter {
-                margin-bottom: 10px; 
+                margin-bottom: 10px;
                 background: steelblue;
                 color: white;
                 align-items: center;
@@ -49,8 +49,7 @@
     <body>
         <button id="add-counter" type="button">add counter</button>
         <div id="container">
-            
+
         </div>
-        <script type="text/javascript" src="index.js"></script>
     </body>
-</html>
+</html>

examples/char/index.js

@@ -1,5 +1,5 @@
 /* eslint-disable no-unused-vars */
-import {chars} from './chars.js';
+import { chars } from './chars-list.js';
 let imp = import('./char.js');
 let mod;
 
@@ -71,4 +71,4 @@ function newField(key, value) {
     val.appendChild(document.createTextNode(value));
     ret.appendChild(val);
     return ret;
-}
+}

examples/char/src/lib.rs

@@ -2,6 +2,7 @@ extern crate wasm_bindgen;
 
 use wasm_bindgen::prelude::*;
 
+// lifted from the `console_log` example
 #[wasm_bindgen]
 extern "C" {
     #[wasm_bindgen(js_namespace = console)]

examples/closures/Cargo.toml

@@ -9,3 +9,13 @@ crate-type = ["cdylib"]
 [dependencies]
 wasm-bindgen = { path = "../..", features = ['nightly'] }
 js-sys = { path = "../../crates/js-sys" }
+
+[dependencies.web-sys]
+path = "../../crates/web-sys"
+features = [
+  'CssStyleDeclaration',
+  'Document',
+  'Element',
+  'HtmlElement',
+  'Window',
+]

examples/closures/README.md

@@ -1,22 +1,15 @@
-# Closure examples
+# web-sys: Closures
 
-[View this example online](https://webassembly.studio/?f=g3hc1qs6tka)
+[View documentation for this example online][dox]
 
-This directory is an example of using the `#[wasm_bindgen]` macro with closures
-to interact with the DOM.
+[dox]: https://rustwasm.github.io/wasm-bindgen/examples/closures.html
 
-You can build the example with:
+You can build the example locally with:
 
 ```
 $ ./build.sh
 ```
 
 (or running the commands on Windows manually)
 
-and then opening up `index.html` in a web browser should show a hello message on
-the web page generated by the wasm.
-
-For more information about this example be sure to check out
-[`hello_world`][hello] which also has more comments about caveats and such.
-
-[hello]: https://github.com/alexcrichton/wasm-bindgen/tree/master/examples/hello_world
+and then visiting http://localhost:8080 in a browser should run the example!

examples/closures/index.html

@@ -35,6 +35,5 @@
         times
       </p>
     </div>
-    <script src='./index.js'></script>
   </body>
 </html>