rustwasm / wasm_game_of_life Goto Github PK

View Code? Open in Web Editor NEW

269.0 7.0 74.0 689 KB

A Rust and WebAssembly tutorial implementing the Game of Life

License: Apache License 2.0

Rust 56.56% HTML 4.44% JavaScript 39.01%

tutorial webassembly-tutorial rust life wasm rust-wasm

wasm_game_of_life's People

Contributors

Stargazers

Watchers

wasm_game_of_life's Issues

Missing dependecy in www/package.json

package.json doesen't contain a dependency to wasm-game-of-life.

Making the web app fail at runtime with:
ERROR in ./index.js
Module not found: Error: Can't resolve 'wasm-game-of-life'

Write up a CONTRIBUTING.md

We need to write up how people can contribute. Also need to update the corresponding goals doc on rustwasm/team

"npm init wasm-app www" fails

Hello,

I try to follow this tutorial : https://rustwasm.github.io/docs/book/game-of-life/hello-world.html

I get an error when I launch npm init wasm-app www

PS C:\Orus\Prog\lmt\wasm-game-of-life> npm init wasm-app www
npx: installed 1 in 1.258s
events.js:174
      throw er; // Unhandled 'error' event
      ^

Error: spawn git ENOENT
    at Process.ChildProcess._handle.onexit (internal/child_process.js:240:19)
    at onErrorNT (internal/child_process.js:415:16)
    at process._tickCallback (internal/process/next_tick.js:63:19)
    at Function.Module.runMain (internal/modules/cjs/loader.js:832:11)
    at startup (internal/bootstrap/node.js:283:19)
    at bootstrapNodeJSCore (internal/bootstrap/node.js:622:3)
Emitted 'error' event at:
    at Process.ChildProcess._handle.onexit (internal/child_process.js:246:12)
    at onErrorNT (internal/child_process.js:415:16)
    [... lines matching original stack trace ...]
    at bootstrapNodeJSCore (internal/bootstrap/node.js:622:3)
PS C:\Orus\Prog\lmt\wasm-game-of-life> node -v
v10.16.0
PS C:\Orus\Prog\lmt\wasm-game-of-life> npm -v
6.9.0
PS C:\Orus\Prog\lmt\wasm-game-of-life>

I launched all commands in a PowerShell window.

Could you help me ?

Many thanks,
David.

Tutorial link in README is broken

While going through the tutorial with @data-pup, we noticed this link was broken https://rust-lang-nursery.github.io/rust-wasm/game-of-life/introduction.html

The instructions in `Sending pull requests` are not clear enough

I started moving the tutorial over to the Rust WebAssembly template and I'm struggling to follow the instructions from the Sending pull requests section in the readme.

The described steps are more involved than your typical git workflow. But they are written in an ambiguous way and it feels like unless you are a git wizard you won't be able to figure out what to do.

For example the first step tells us to "checkout the branch for the first chapter that needs to be updated". But I never used git checkout to go to the chapter I wanted and cloning the repository using the provided command don't create any branches. I just cded into the corresponding folder since they are submodules and I guess it did the trick.

Since we are dealing with advanced git concepts here I'm not sure it would be an easy task to improve this section. However I think that giving commands which can be copy-pasted is a good starting point, even if the explanations aren't that great.

I will try to report the commands I used to be able to get to the point where I can send my changes when I'll be finished working on my current issue.

I hope the point I'm trying to raise is clear!

Wasm-pack init takes too long

Hi, first of all, awesome tutorial !
Question though, in the book you tell us to use wasm-pack init to rebuild the project every time we change something but the process is way too long !

[7/8] Installing WASM-bindgen... takes forever ! It is way too time expensive to be used practically. I am doing something wrong or is there an alternative ?

SOS: macro_rules log not working. need a correct example

From chapter 4.6 Debugging

in the lib.rs file added:

#[macro_export]
macro_rules! log {
    ( $( &t:tt )* ) => {
        web_sys::console::log_1(&format!( &( &t )* ).into());
    }
}

log!("test data {}", 1);

then run wasm-pack build it prints:

error: no rules expected the token `"test data {}"`
  --> src/lib.rs:16:6
   |
10 | macro_rules! log {
   | ---------------- when calling this macro
...
16 | log!("test data {}", 1);
   |      ^^^^^^^^^^^^^^ no rules expected this token in macro call
   |
   = note: while trying to match sequence start

error: could not compile `wasm-game-of-life` (lib) due to previous error

could anyone give a correct code. thanks!!

Unable to build with 'npm run build-debug' in step 8.1.1

Reproduction:

$ rustup update
info: syncing channel updates for 'stable-x86_64-unknown-linux-gnu'
info: syncing channel updates for 'nightly-x86_64-unknown-linux-gnu'
info: checking for self-updates

   stable-x86_64-unknown-linux-gnu unchanged - rustc 1.27.2 (58cc626de 2018-07-18)
  nightly-x86_64-unknown-linux-gnu unchanged - rustc 1.29.0-nightly (874dec25e 2018-07-21)

$ rustup install nightly
info: syncing channel updates for 'nightly-x86_64-unknown-linux-gnu'

  nightly-x86_64-unknown-linux-gnu unchanged - rustc 1.29.0-nightly (874dec25e 2018-07-21)

$ rustup target add wasm32-unknown-unknown --toolchain nightly
info: component 'rust-std' for target 'wasm32-unknown-unknown' is up to date
$ node -v
v8.11.3
$ npm -v
5.6.0
$ cargo +nightly install wasm-bindgen-cli
    Updating registry `https://github.com/rust-lang/crates.io-index`
  Installing wasm-bindgen-cli v0.2.13
error: binary `wasm-bindgen` already exists in destination as part of `wasm-bindgen-cli v0.2.12`
binary `wasm2es6js` already exists in destination as part of `wasm-bindgen-cli v0.2.12`
Add --force to overwrite
$ git clone https://github.com/rustwasm/wasm_game_of_life.git
Cloning into 'wasm_game_of_life'...
remote: Counting objects: 324, done.
remote: Compressing objects: 100% (21/21), done.
remote: Total 324 (delta 8), reused 18 (delta 3), pack-reused 295
Receiving objects: 100% (324/324), 593.38 KiB | 747.00 KiB/s, done.
Resolving deltas: 100% (162/162), done.
Checking connectivity... done.
$ cd ./wasm_game_of_life
$ git checkout -b chapter-zero origin/chapter-zero
Branch chapter-zero set up to track remote branch chapter-zero from origin.
Switched to a new branch 'chapter-zero'
$ npm install
npm WARN wasm_game_of_life No description
npm WARN wasm_game_of_life No repository field.
npm WARN wasm_game_of_life No license field.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})

added 598 packages in 10.811s
$ npm run build-debug

> @ build-debug /home/erlend/rust/rust-fun/tutorials/wasm_game_of_life
> cargo +nightly build --target wasm32-unknown-unknown && wasm-bindgen target/wasm32-unknown-unknown/debug/wasm_game_of_life.wasm --out-dir .

   Compiling unicode-xid v0.1.0
   Compiling wasm-bindgen-shared v0.2.11
   Compiling itoa v0.4.1
   Compiling dtoa v0.4.2
   Compiling serde v1.0.55
   Compiling proc-macro2 v0.3.8
   Compiling proc-macro2 v0.4.8
error[E0599]: no method named `to_string` found for type `std::path::PathBuf` in the current scope
   --> /home/erlend/.cargo/registry/src/github.com-1ecc6299db9ec823/proc-macro2-0.4.8/src/unstable.rs:290:52
    |
290 |         let filename = stable::file_name(sf.path().to_string());
    |                                                    ^^^^^^^^^
    |
    = note: the method `to_string` exists but the following trait bounds were not satisfied:
            `std::path::PathBuf : std::string::ToString`
            `std::path::Path : std::string::ToString`
    = help: did you mean `to_str`?

error: aborting due to previous error

For more information about this error, try `rustc --explain E0599`.
error: Could not compile `proc-macro2`.
warning: build failed, waiting for other jobs to finish...
error: build failed
npm ERR! code ELIFECYCLE
npm ERR! errno 101
npm ERR! @ build-debug: `cargo +nightly build --target wasm32-unknown-unknown && wasm-bindgen target/wasm32-unknown-unknown/debug/wasm_game_of_life.wasm --out-dir .`
npm ERR! Exit status 101
npm ERR!
npm ERR! Failed at the @ build-debug script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/erlend/.npm/_logs/2018-07-23T10_16_24_669Z-debug.log
$ cat  /home/erlend/.npm/_logs/2018-07-23T10_16_24_669Z-debug.log
0 info it worked if it ends with ok
1 verbose cli [ '/usr/bin/node', '/usr/bin/npm', 'run', 'build-debug' ]
2 info using [email protected]
3 info using [email protected]
4 verbose run-script [ 'prebuild-debug', 'build-debug', 'postbuild-debug' ]
5 info lifecycle @~prebuild-debug: @
6 info lifecycle @~build-debug: @
7 verbose lifecycle @~build-debug: unsafe-perm in lifecycle true
8 verbose lifecycle @~build-debug: PATH: /usr/lib/node_modules/npm/node_modules/npm-lifecycle/node-gyp-bin:/home/erlend/rust/rust-fun/tutorials/wasm_game_of_life/node_modules/.bin:/home/erlend/.cargo/bin:/home/erlend/bin:/home/erlend/.local/bin:/home/erlend/.cargo/bin:/home/erlend/bin:/home/erlend/.local/bin:/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/sbin:/bin:/usr/games:/usr/local/games:/snap/bin:/home/erlend/.dotnet/tools:/home/erlend/.dotnet/tools
9 verbose lifecycle @~build-debug: CWD: /home/erlend/rust/rust-fun/tutorials/wasm_game_of_life
10 silly lifecycle @~build-debug: Args: [ '-c',
10 silly lifecycle   'cargo +nightly build --target wasm32-unknown-unknown && wasm-bindgen target/wasm32-unknown-unknown/debug/wasm_game_of_life.wasm --out-dir .' ]
11 silly lifecycle @~build-debug: Returned: code: 101  signal: null
12 info lifecycle @~build-debug: Failed to exec build-debug script
13 verbose stack Error: @ build-debug: `cargo +nightly build --target wasm32-unknown-unknown && wasm-bindgen target/wasm32-unknown-unknown/debug/wasm_game_of_life.wasm --out-dir .`
13 verbose stack Exit status 101
13 verbose stack     at EventEmitter.<anonymous> (/usr/lib/node_modules/npm/node_modules/npm-lifecycle/index.js:285:16)
13 verbose stack     at emitTwo (events.js:126:13)
13 verbose stack     at EventEmitter.emit (events.js:214:7)
13 verbose stack     at ChildProcess.<anonymous> (/usr/lib/node_modules/npm/node_modules/npm-lifecycle/lib/spawn.js:55:14)
13 verbose stack     at emitTwo (events.js:126:13)
13 verbose stack     at ChildProcess.emit (events.js:214:7)
13 verbose stack     at maybeClose (internal/child_process.js:925:16)
13 verbose stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:209:5)
14 verbose pkgid @
15 verbose cwd /home/erlend/rust/rust-fun/tutorials/wasm_game_of_life
16 verbose Linux 4.15.0-24-generic
17 verbose argv "/usr/bin/node" "/usr/bin/npm" "run" "build-debug"
18 verbose node v8.11.3
19 verbose npm  v5.6.0
20 error code ELIFECYCLE
21 error errno 101
22 error @ build-debug: `cargo +nightly build --target wasm32-unknown-unknown && wasm-bindgen target/wasm32-unknown-unknown/debug/wasm_game_of_life.wasm --out-dir .`
22 error Exit status 101
23 error Failed at the @ build-debug script.
23 error This is probably not a problem with npm. There is likely additional logging output above.
24 verbose exit [ 101, true ]

I tried to follow the steps exactly in https://rustwasm.github.io/book/game-of-life/setup.html. Am I doing something wrong or is there a regression?

Webpack error when parsing the wasm file

I have cloned the repo and switch to the first chapter branch. The initial alert() example worked but after I pasted the Life implementation in my rust file I am getting this webpack error when running npm run serve:

ERROR in ./wasm_game_of_life_bg.wasm
Module parse failed: Unexpected section: 0x5f
You may need an appropriate loader to handle this file type.
Error: Unexpected section: 0x5f
...
 @ ./wasm_game_of_life.js 2:0-47 13:39-50 14:45-56 25:34-69 32:40-51 33:47-58 50:16-40 53:32-49 57:4-24 62:4-24 66:11-29
 @ ./index.js
 @ ./bootstrap.js
 @ multi (webpack)-dev-server/client?http://localhost:8081 ./bootstrap.js

ERROR in chunk 0
0.bootstrap.js
/Users/andrei/projects/wasm_game_of_life/wasm_game_of_life_bg.wasm
unexpected end

My lib.rs looks like this:

#![feature(proc_macro, wasm_custom_section, wasm_import_module)]

extern crate wasm_bindgen;

use wasm_bindgen::prelude::*;
use std::fmt;

#[repr(u8)]
#[derive(Clone, Copy, Debug, PartialEq, Eq)]
pub enum Cell {
    Dead = 0,
    Alive = 1,
}

#[wasm_bindgen]
pub struct Universe {
    width: u32,
    height: u32,
    cells: Vec<Cell>,
}


#[wasm_bindgen]
impl Universe {
	pub fn new() -> Universe {
        let width = 64;
        let height = 64;

        let cells = (0..width * height)
            .map(|i| {
                if i % 2 == 0 || i % 7 == 0 {
                    Cell::Alive
                } else {
                    Cell::Dead
                }
            })
            .collect();

        Universe {
            width,
            height,
            cells,
        }
    }

    pub fn render(&self) -> String {
        self.to_string()
    }

    fn get_index(&self, row: u32, column: u32) -> usize {
        (row * self.width + column) as usize
    }

     fn live_neighbor_count(&self, row: u32, column: u32) -> u8 {
        let mut count = 0;
        for delta_row in [self.height - 1, 0, 1].iter().cloned() {
            for delta_col in [self.width - 1, 0, 1].iter().cloned() {
                if delta_row == 0 && delta_col == 0 {
                    continue;
                }

                let neighbor_row = (row + delta_row) % self.height;
                let neighbor_col = (column + delta_col) % self.width;
                let idx = self.get_index(neighbor_row, neighbor_col);
                count += self.cells[idx] as u8;
            }
        }
        count
    }

     pub fn tick(&mut self) {
        let mut next = self.cells.clone();

        for row in 0..self.height {
            for col in 0..self.width {
                let idx = self.get_index(row, col);
                let cell = self.cells[idx];
                let live_neighbors = self.live_neighbor_count(row, col);

                let next_cell = match (cell, live_neighbors) {
                    // Rule 1: Any live cell with fewer than two live neighbours
                    // dies, as if caused by underpopulation.
                    (Cell::Alive, x) if x < 2 => Cell::Dead,
                    // Rule 2: Any live cell with two or three live neighbours
                    // lives on to the next generation.
                    (Cell::Alive, 2) | (Cell::Alive, 3) => Cell::Alive,
                    // Rule 3: Any live cell with more than three live
                    // neighbours dies, as if by overpopulation.
                    (Cell::Alive, x) if x > 3 => Cell::Dead,
                    // Rule 4: Any dead cell with exactly three live neighbours
                    // becomes a live cell, as if by reproduction.
                    (Cell::Dead, 3) => Cell::Alive,
                    // All other cells remain in the same state.
                    (otherwise, _) => otherwise,
                };

                next[idx] = next_cell;
            }
        }

        self.cells = next;
    }	
}

impl fmt::Display for Universe {
    fn fmt(&self, f: &mut fmt::Formatter) -> fmt::Result {
        for line in self.cells.as_slice().chunks(self.width as usize) {
            for &cell in line {
                let symbol = if cell == Cell::Dead { "◻️" } else { "◼️" };
                write!(f, "{}", symbol)?;
            }
            write!(f, "\n")?;
        }

        Ok(())
    }
}

It seems that the wasm file is wrongly compiled. But I can't figure out what happened.

Any help or suggestion is kindly welcomed!

How to integrate rust wasm into angular 7 project?

Summary

How to integrate rust wasm into angular 7 project?

Additional Details

Angular 7 use webpack for packing, but it cannot recognize *.wasm file, I have tried to integrate rust wasm into angular 7 for a few days, but I still can't solve it, Could you provide an angular example project with call method of rust wasm?

Error on last step of tutorial section 5.1

I'm working through the tutorial and setting up the boilerplace, etc for the hello world app. Everything runs smoothly until I get an error on the last step that I cannot diagnose.

`
thodges@lovelace:~/Workspace/Rust/wasm-game-of-life/www$ npm run start

[email protected] start /home/thodges/Workspace/Rust/wasm-game-of-life/www
webpack-dev-server

ℹ ｢wds｣: Project is running at http://localhost:8080/
ℹ ｢wds｣: webpack output is served from /
Failed to decode custom "name" section @1734; ignoring (integer representation too long).
✖ ｢wdm｣: Hash: cd84f870a9f476e7fb21
Version: webpack 4.29.3
Time: 554ms
Built at: 18/02/2019 12:57:41
Asset Size Chunks Chunk Names
0.bootstrap.js 3.15 KiB 0 [emitted]
bootstrap.js 354 KiB main [emitted] main
index.html 175 bytes [emitted]
Entrypoint main = bootstrap.js
[0] multi (webpack)-dev-server/client?http://localhost:8080 ./bootstrap.js 40 bytes {main} [built]
[../pkg/wasm_game_of_life.js] 708 bytes {0} [built]
[./bootstrap.js] 279 bytes {main} [built]
[./index.js] 58 bytes {0} [built]
[./node_modules/ansi-html/index.js] 4.16 KiB {main} [built]
[./node_modules/events/events.js] 13.3 KiB {main} [built]
[./node_modules/html-entities/index.js] 231 bytes {main} [built]
[./node_modules/loglevel/lib/loglevel.js] 7.68 KiB {main} [built]
[./node_modules/url/url.js] 22.8 KiB {main} [built]
[./node_modules/webpack-dev-server/client/index.js?http://localhost:8080] (webpack)-dev-server/client?http://localhost:8080 7.78 KiB {main} [built]
[./node_modules/webpack-dev-server/client/overlay.js] (webpack)-dev-server/client/overlay.js 3.58 KiB {main} [built]
[./node_modules/webpack-dev-server/client/socket.js] (webpack)-dev-server/client/socket.js 1.05 KiB {main} [built]
[./node_modules/webpack-dev-server/node_modules/strip-ansi/index.js] (webpack)-dev-server/node_modules/strip-ansi/index.js 161 bytes {main} [built]
[./node_modules/webpack/hot sync ^./log$] (webpack)/hot sync nonrecursive ^./log$ 170 bytes {main} [built]
[./node_modules/webpack/hot/emitter.js] (webpack)/hot/emitter.js 75 bytes {main} [built]
+ 14 hidden modules

ERROR in ../pkg/wasm_game_of_life_bg.wasm
Module parse failed: Unexpected section: 0xfe
You may need an appropriate loader to handle this file type.
Error: Unexpected section: 0xfe
at new CompileError (/home/thodges/Workspace/Rust/wasm-game-of-life/www/node_modules/@webassemblyjs/helper-api-error/lib/index.js:40:109)
at parseSection (/home/thodges/Workspace/Rust/wasm-game-of-life/www/node_modules/@webassemblyjs/wasm-parser/lib/decoder.js:1542:11)
at Object.decode (/home/thodges/Workspace/Rust/wasm-game-of-life/www/node_modules/@webassemblyjs/wasm-parser/lib/decoder.js:1559:25)
at decode (/home/thodges/Workspace/Rust/wasm-game-of-life/www/node_modules/@webassemblyjs/wasm-parser/lib/index.js:240:21)
at WebAssemblyParser.parse (/home/thodges/Workspace/Rust/wasm-game-of-life/www/node_modules/webpack/lib/wasm/WebAssemblyParser.js:74:19)
at doBuild.err (/home/thodges/Workspace/Rust/wasm-game-of-life/www/node_modules/webpack/lib/NormalModule.js:460:32)
at runLoaders (/home/thodges/Workspace/Rust/wasm-game-of-life/www/node_modules/webpack/lib/NormalModule.js:342:12)
at /home/thodges/Workspace/Rust/wasm-game-of-life/www/node_modules/loader-runner/lib/LoaderRunner.js:373:3
at iterateNormalLoaders (/home/thodges/Workspace/Rust/wasm-game-of-life/www/node_modules/loader-runner/lib/LoaderRunner.js:214:10)
at Array. (/home/thodges/Workspace/Rust/wasm-game-of-life/www/node_modules/loader-runner/lib/LoaderRunner.js:205:4)
at Storage.finished (/home/thodges/Workspace/Rust/wasm-game-of-life/www/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:43:16)
at provider (/home/thodges/Workspace/Rust/wasm-game-of-life/www/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:79:9)
at /home/thodges/Workspace/Rust/wasm-game-of-life/www/node_modules/graceful-fs/graceful-fs.js:78:16
at FSReqWrap.readFileAfterClose [as oncomplete] (fs.js:511:3)
@ ../pkg/wasm_game_of_life.js 2:0-47 8:71-82 9:45-56 26:11-21
@ ./index.js
@ ./bootstrap.js
@ multi (webpack)-dev-server/client?http://localhost:8080 ./bootstrap.js

ERROR in chunk 0
ddc111f061f0f6c2679f.module.wasm
/home/thodges/Workspace/Rust/wasm-game-of-life/pkg/wasm_game_of_life_bg.wasm
unexpected end
ℹ ｢wdm｣: Failed to compile.

"npm init wasm-app www" doesn't produce a www-directory

I'm a total noob regarding npm and tried to blindy follow the tutorial:

In the chapter https://rustwasm.github.io/book/game-of-life/hello-world.html#putting-it-into-a-web-page one has to issue npm init wasm-app www

This command asks me some questions and quits after creating a package.json:

$ npm init wasm-app www
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.

See `npm help json` for definitive documentation on these fields
and exactly what they do.

Use `npm install <pkg> --save` afterwards to install a package and
save it as a dependency in the package.json file.

Press ^C at any time to quit.
name: (wasm-game-of-life) 
version: (1.0.0) 
git repository: 
keywords: 
author: 
license: (ISC) 
About to write to /home/kai/dev/wasm-game-of-life/package.json:

{
  "name": "wasm-game-of-life",
  "version": "1.0.0",
  "description": "a template for starting a rust-wasm project to be used with wasm-pack",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}


Is this ok? (yes)

According to the documentation of npm this seems to be correct, but doesn't behave as expected according to the tutorial. There's no www-directory.

Did I oversee something in the prerequisites or do I have some wrong npm?

npm version outputs

{ 'wasm-game-of-life': '1.0.0',
  npm: '3.5.2',
  ares: '1.14.0',
  cldr: '32.0.1',
  http_parser: '2.7.1',
  icu: '60.2',
  modules: '57',
  nghttp2: '1.30.0',
  node: '8.10.0',
  openssl: '1.1.0g',
  tz: '2017c',
  unicode: '10.0',
  uv: '1.18.0',
  v8: '6.2.414.50',
  zlib: '1.2.11' }

Move more parts of the tutorial to rust

There are parts in tutorial like this:

// Import the WebAssembly memory at the top of the file.
import { memory } from "wasm-game-of-life/wasm_game_of_life_bg";

// ...

const getIndex = (row, column) => {
  return row * width + column;
};

const drawCells = () => {
  const cellsPtr = universe.cells();
  const cells = new Uint8Array(memory.buffer, cellsPtr, width * height);

  ctx.beginPath();

  for (let row = 0; row < height; row++) {
    for (let col = 0; col < width; col++) {
      const idx = getIndex(row, col);

      ctx.fillStyle = cells[idx] === Cell.Dead
        ? DEAD_COLOR
        : ALIVE_COLOR;

      ctx.fillRect(
        col * (CELL_SIZE + 1) + 1,
        row * (CELL_SIZE + 1) + 1,
        CELL_SIZE,
        CELL_SIZE
      );
    }
  }

  ctx.stroke();
};

We can move them to rust

Tutorial does not work due to outdated npm depenencies

Describe the Bug

The tutorial breaks in the npm run start step:

$ npm start

> [email protected] start
> webpack-dev-server

(node:20541) [DEP0111] DeprecationWarning: Access to process.binding('http_parser') is deprecated.
(Use `node --trace-deprecation ...` to show where the warning was created)
ℹ ｢wds｣: Project is running at http://localhost:8080/
ℹ ｢wds｣: webpack output is served from /
ℹ ｢wds｣: Content not from webpack is served from /home/fabian/git/RustExperiments/GuiExperiments/wasm-tutorial/www
node:internal/crypto/hash:71
  this[kHandle] = new _Hash(algorithm, xofLen);
                  ^

Error: error:0308010C:digital envelope routines::unsupported
    at new Hash (node:internal/crypto/hash:71:19)
    at Object.createHash (node:crypto:133:10)
    at module.exports (/home/fabian/git/RustExperiments/GuiExperiments/wasm-tutorial/www/node_modules/webpack/lib/util/createHash.js:135:53)
    at NormalModule._initBuildHash (/home/fabian/git/RustExperiments/GuiExperiments/wasm-tutorial/www/node_modules/webpack/lib/NormalModule.js:417:16)
    at handleParseError (/home/fabian/git/RustExperiments/GuiExperiments/wasm-tutorial/www/node_modules/webpack/lib/NormalModule.js:471:10)
    at /home/fabian/git/RustExperiments/GuiExperiments/wasm-tutorial/www/node_modules/webpack/lib/NormalModule.js:503:5
    at /home/fabian/git/RustExperiments/GuiExperiments/wasm-tutorial/www/node_modules/webpack/lib/NormalModule.js:358:12
    at /home/fabian/git/RustExperiments/GuiExperiments/wasm-tutorial/www/node_modules/loader-runner/lib/LoaderRunner.js:373:3
    at iterateNormalLoaders (/home/fabian/git/RustExperiments/GuiExperiments/wasm-tutorial/www/node_modules/loader-runner/lib/LoaderRunner.js:214:10)
    at Array.<anonymous> (/home/fabian/git/RustExperiments/GuiExperiments/wasm-tutorial/www/node_modules/loader-runner/lib/LoaderRunner.js:205:4)
    at Storage.finished (/home/fabian/git/RustExperiments/GuiExperiments/wasm-tutorial/www/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:43:16)
    at /home/fabian/git/RustExperiments/GuiExperiments/wasm-tutorial/www/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:79:9
    at /home/fabian/git/RustExperiments/GuiExperiments/wasm-tutorial/www/node_modules/graceful-fs/graceful-fs.js:78:16
    at FSReqCallback.readFileAfterClose [as oncomplete] (node:internal/fs/read_file_context:68:3) {
  opensslErrorStack: [ 'error:03000086:digital envelope routines::initialization error' ],
  library: 'digital envelope routines',
  reason: 'unsupported',
  code: 'ERR_OSSL_EVP_UNSUPPORTED'
}

Node.js v18.15.0

Steps to Reproduce

Follow the tutorial steps up to the serving locally, when the dev server is started for the first time.

If applicable, add a link to a test case (as a zip file or link to a repository we can clone).

Expected Behavior

The step should succeed.

Actual Behavior

See error above.

Additional Context

The reason is most likely that the dependencies in the package.json are of the web app template are extremely outdated. Trying to update them with npx npm-check -u suggest major version jumps for all dependencies:

But trying to update them fails with an internal dependency conflict that I have yet to understand...

npm install in chapter-zero warns of high severity vulnerabilities

Describe the bug
Running the initial npm installon the chapter-zero branch results in a warning about high severity vulnerabilities.

To Reproduce
Steps to reproduce the behavior:

git clone https://github.com/rustwasm/wasm_game_of_life.git
cd wasm_game_of_life
git checkout -b chapter-zero origin/chapter-zero
npm install

Expected behavior
npm install requires no audit fixes to install JavaScript dependencies without warning.

Screenshots

Additional context
In this case the vulnerabilities I saw were actually just one vulnerability that was filed recently and has already been patched. It's no trouble to run npm audit fix, but I think that slows readers down. Worrying about whether they need to take care of vulnerabilities might detract from the goal of learning about WebAssembly and Rust.

For what it's worth, I'm using

nvm - v0.33.11
Node.js - v10.9.0
npm - v6.4.0
Git - v2.17.1

I believe this can be easily resolved by running the audit fixes and the committing the updated package-lock.json, but I've no idea what effect that will have on the branching structure for the repo.

Remove submodules and make only the Ch 3 code in the book

Build and run instructions

Would be nice to have build and run instructions here in the readme. I'm on windows, cannot build and run it, but note that I'm totally new to this project.

Not able to get passed piping string into javascript

Hi, I've gotten towards the end of section 4 in chapter 4 of the tutorial - the end of 'Rendering with Javascript'. The problem is that I only get the initial render, but it doesn't seem that I get any animation at all. I get an error in the console that links to some of the web assembly (and I can't personally understand the raw web assembly). The console error (Javascript) I keep getting is: RuntimeError: unreachable executed. Any help?

wasm-bindgen dependency in Cargo.toml is out of date in chapter-zero

Describe the bug
Without an update of the wasm-bindgen dependency from v0.2.13 to v0.2.17 the initial npm run build-debug on the chapter-zero branch fails to compile.

To Reproduce
Steps to reproduce the behavior:

git clone https://github.com/rustwasm/wasm_game_of_life.git
cd wasm_game_of_life
git checkout -b chapter-zero origin/chapter-zero
npm install
npm run build-debug

Expected behavior
npm run build-debug compiles without error.

Screenshots

Additional context
It's no trouble to run cargo update -p wasm-bindgen, but I think that slows readers down. Luckily the error messages are very clear, but it might still be intimidating to a newcomer to troubleshoot this.

For what it's worth, I'm using

nvm - v0.33.11
Node.js - v10.9.0
npm - v6.4.0
cargo - 1.29.0-nightly (6a7672ef5 2018-08-14)
wasm-bindgen-cli - v0.2.17

"npm link" results in "permission denied"

By following the tutorial the npm link command results in a "permission denied" error message. I already purged the whole project directory and started all over. The issue remained:

$ cargo generate --git https://github.com/rustwasm/wasm-pack-template
 Project Name: wasm-game-of-life
 Creating project called `wasm-game-of-life`...
 Done! New project created /home/user/dev/wasm-game-of-life
$ cd wasm-game-of-life/
.../wasm-game-of-life$ wasm-pack init
  
  [1/8] Checking crate configuration...
  [2/8] Adding WASM target...
  [3/8] Compiling to WASM...
  [4/8] Creating a pkg directory...
  [5/8] Writing a package.json...
  :-) [WARN]: Field description is missing from Cargo.toml. It is not necessary, but recommended
  :-) [WARN]: Field repository is missing from Cargo.toml. It is not necessary, but recommended
  :-) [WARN]: Field license is missing from Cargo.toml. It is not necessary, but recommended
  [6/8] Copying over your README...
  [7/8] Installing WASM-bindgen...
  [8/8] Running WASM-bindgen...
  :-) Done in 5 minutes
| :-) Your WASM pkg is ready to publish at "./pkg".
.../wasm-game-of-life$ npm init wasm-app www
npx: installed 1 in 1.436s
🦀 Rust + 🕸 Wasm = ❤
.../wasm-game-of-life$ cd www
.../wasm-game-of-life/www$ npm install
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})

added 550 packages from 405 contributors and audited 6365 packages in 5.006s
found 0 vulnerabilities

.../wasm-game-of-life/www$ cd ../pkg/

.../wasm-game-of-life/pkg$ npm link
npm ERR! path /home/user/dev/wasm-game-of-life/pkg
npm ERR! code EACCES
npm ERR! errno -13
npm ERR! syscall symlink
npm ERR! Error: EACCES: permission denied, symlink '/home/user/dev/wasm-game-of-life/pkg' -> '/usr/local/lib/node_modules/wasm-game-of-life'
npm ERR!  { Error: EACCES: permission denied, symlink '/home/user/dev/wasm-game-of-life/pkg' -> '/usr/local/lib/node_modules/wasm-game-of-life'
npm ERR!   stack: 'Error: EACCES: permission denied, symlink \'/home/user/dev/wasm-game-of-life/pkg\' -> \'/usr/local/lib/node_modules/wasm-game-of-life\'',
npm ERR!   errno: -13,
npm ERR!   code: 'EACCES',
npm ERR!   syscall: 'symlink',
npm ERR!   path: '/home/user/dev/wasm-game-of-life/pkg',
npm ERR!   dest: '/usr/local/lib/node_modules/wasm-game-of-life' }
npm ERR! 
npm ERR! The operation was rejected by your operating system.
npm ERR! It is likely you do not have the permissions to access this file as the current user
npm ERR! 
npm ERR! If you believe this might be a permissions issue, please double-check the
npm ERR! permissions of the file and its containing directories, or try running
npm ERR! the command again as root/Administrator (though this is not recommended).

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/user/.npm/_logs/2018-09-04T20_55_20_981Z-debug.log

The log adds the following information:

0 info it worked if it ends with ok
1 verbose cli [ '/usr/bin/node', '/usr/local/bin/npm', 'link' ]
2 info using [email protected]
3 info using [email protected]
4 verbose linkPkg /home/user/dev/wasm-game-of-life/pkg
5 verbose stack Error: EACCES: permission denied, symlink '/home/user/dev/wasm-game-of-life/pkg' -> '/usr/local/lib/node_modules/wasm-game-of-life'
6 verbose cwd /home/user/dev/wasm-game-of-life/pkg
7 verbose Linux 4.15.0-33-generic
8 verbose argv "/usr/bin/node" "/usr/local/bin/npm" "link"
9 verbose node v8.10.0
10 verbose npm  v6.4.1

The message is misleading, though. The link target simply doesn't exist:

$ ls -lap /usr/local/lib/node_modules/
total 12
drwxr-xr-x  3 root   root 4096 Sep  4 22:27 ./
drwxr-xr-x  5 root   root 4096 Sep  4 22:27 ../
drwxr-xr-x 10 nobody user  4096 Sep  4 22:27 npm/

Did I miss a step?