web: Drop wasm-pack, invoke wasm-bindgen and wasm-opt directly from npm (#2482)

Author: torokati44

.github/workflows/release_nightlies.yml

@@ -82,13 +82,23 @@ jobs:
         with:
           profile: minimal
           toolchain: stable
+          target: wasm32-unknown-unknown
 
       - name: Install linux dependencies
         if: matrix.os == 'ubuntu-latest'
         run: sudo apt-get -y install libasound2-dev libxcb-shape0-dev libxcb-xfixes0-dev
 
-      - name: Install wasm-pack
-        run: cargo install wasm-pack
+      - name: Install wasm-bindgen
+        run: cargo install wasm-bindgen-cli
+
+      - name: Setup conda
+        uses: conda-incubator/setup-miniconda@v2
+        with:
+          activate-environment: binaryen
+
+      - name: Install binaryen
+        shell: bash -l {0}
+        run: conda install -c conda-forge binaryen
 
       - name: Setup node
         if: matrix.os == 'ubuntu-latest'
@@ -99,6 +109,7 @@ jobs:
       - name: Build web
         if: matrix.os == 'ubuntu-latest'
         working-directory: web
+        shell: bash -l {0}
         run: |
           npm run bootstrap
           npm run build

.github/workflows/test_web.yml

@@ -33,16 +33,27 @@ jobs:
       with:
         profile: minimal
         toolchain: ${{ matrix.rust_version }}
+        target: wasm32-unknown-unknown
 
     - name: Install linux dependencies
       if: matrix.os == 'ubuntu-latest'
       run: sudo apt-get -y install libasound2-dev libxcb-shape0-dev libxcb-xfixes0-dev
 
-    - name: Install wasm-pack
-      run: cargo install wasm-pack
+    - name: Install wasm-bindgen
+      run: cargo install wasm-bindgen-cli
+
+    - name: Setup conda
+      uses: conda-incubator/setup-miniconda@v2
+      with:
+        activate-environment: binaryen
+
+    - name: Install binaryen
+      shell: bash -l {0}
+      run: conda install -c conda-forge binaryen
 
     - name: Build web
       working-directory: web
+      shell: bash -l {0}
       run: |
         npm run bootstrap
         npm run format:check

.gitignore

@@ -5,7 +5,6 @@ dist/
 pkg/
 web/packages/core/docs
 web/packages/core/tsd
-wasm-pack.log
 *.swd
 
 # NPM

web/Cargo.toml

@@ -56,5 +56,3 @@ features = [
 [dev-dependencies]
 wasm-bindgen-test = "0.3.19"
 
-[package.metadata.wasm-pack.profile.release]
-wasm-opt = ['-O', '-g']

web/README.md

@@ -44,15 +44,29 @@ We do not have a Minimum Supported Rust Version policy. If it fails to build, it
 to update to the latest stable version of rust. You may run `rustup update` to do this (if you installed
 rust using the above instructions).
 
+For the compiler to be able to output WebAssembly, an additional target has to be added to it: `rustup target add wasm32-unknown-unknown`
+
 #### Node.js
 
 Follow the instructions [to install node.js](https://nodejs.org/en/) on your machine.
 
 We recommend using the currently active LTS 12, but we do also run tests with maintenance LTS 10.
 
-#### wasm-pack
+#### wasm-bindgen
+
+This can be installed with `cargo install wasm-bindgen-cli`.
+
+#### Binaryen
+
+This is optional, used to further optimize the built WebAssembly module.
+Some ways to install Binaryen:
+ - download one of the [prebuilt releases](https://github.com/WebAssembly/binaryen/releases/)
+ - using your Linux distribution's package manager (`sudo apt install binaryen`, `sudo dnf install binaryen`)
+ - from [Homebrew](https://formulae.brew.sh/formula/binaryen)
+ - from [Anaconda](https://anaconda.org/conda-forge/binaryen)
+ - [compile it yourself](https://github.com/WebAssembly/binaryen#building)
 
-Follow the instructions [to install wasm-pack](https://rustwasm.github.io/wasm-pack/installer/) on your machine.
+Just make sure the `wasm-opt` program is in `$PATH`, and that it works.
 
 ### Building
 

web/packages/core/package.json

@@ -9,9 +9,12 @@
         "pkg/"
     ],
     "scripts": {
-        "build": "npm run build:wasm && npm run build:ts",
+        "build": "npm run build:cargo && npm run build:wasm-bindgen && npm run build:wasm-opt && npm run build:ts",
+        "build:cargo": "cargo build --release --target wasm32-unknown-unknown",
+        "build:wasm-bindgen": "wasm-bindgen ../../../target/wasm32-unknown-unknown/release/ruffle_web.wasm --out-dir ./pkg --out-name ruffle_web",
+        "build:wasm-opt": "wasm-opt ./pkg/ruffle_web_bg.wasm -O -g --output ./pkg/ruffle_web_bg.opt.wasm && move-file ./pkg/ruffle_web_bg.opt.wasm ./pkg/ruffle_web_bg.wasm || npm run build:wasm-opt-note",
+        "build:wasm-opt-note": "echo 'NOTE: Since wasm-opt could not be found (or it failed), the resulting module might not perform that well, but it should still work.'",
         "build:ts": "tsc -d && node tools/set_version.js",
-        "build:wasm": "wasm-pack build ../../ --out-dir packages/core/pkg",
         "docs": "typedoc",
         "test": "mocha -r esm -r ts-node/register test/**.ts"
     },
@@ -28,7 +31,8 @@
         "replace-in-file": "^6.1.0",
         "ts-node": "^9.0.0",
         "typedoc": "^0.20.0",
-        "typescript": "^4.0.5"
+        "typescript": "^4.0.5",
+        "move-file-cli": "^2.0.0"
     },
     "dependencies": {
         "@types/source-map": "^0.5.2"