Merge 'fix svg level loader tsc hack'

See merge request !58

.gitlab-ci.yml

@@ -27,11 +27,10 @@ build-dev:
     <<: *global_cache
     key: merge-requests
   script:
-    - RUSTFLAGS=-Dwarnings wasm-pack build --dev
     - cd www
+    - rm -f node_modules/engel-simulator-2020
     - npm install
-    - npm run rust-web-modules
-    - npm run build
+    - RUSTFLAGS=-Dwarnings npm run build -- --mode development
   only:
     - merge_requests
 
@@ -43,10 +42,8 @@ build-release:
     key: release-build
   script:
     - touch .git/HEAD
-    - wasm-pack build
     - cd www
     - npm install
-    - npm run rust-web-modules
     - npm run build
   artifacts:
     paths:

README.md

@@ -92,25 +92,25 @@ cd www/ && npm install
 ```
 
 ## Development Environment
-Open two shell sessions, one for the rust build and one for the webpack dev
-server:
 
+The following will take care of watching for rust and js/ts changes and reloading the browser on change:
+
+```sh
+cd www/
+npm run start
+```
+
+> Note: under the hood something like this is called to watch for rust changes:
 ```bash
 # For Rust:
 cargo watch -s "wasm-pack build --dev" --watch src
 # or, if you don't use cargo-watch, just run
 wasm-pack build --dev
-
-# For the webpack dev server:
-cd www/
-npm run rust-web-modules
-npm run start
 ```
 
 Then point your browser to `http://localhost:8080` and start hacking!  The
 website will automatically reload when any changes are done to the web sources
-(`www/`) or the Rust sources (`src/`).  If you change the `rust-web-modules/`
-you'll have to manually run `npm run rust-web-modules` again (please fix!).
+(`www/`) or the Rust sources (`src/`).  
 
 ## Level Design
 We're using an _Inkscape SVG_ file as the level format (yes, the inkscape

src/svg_loader.rs

@@ -8,7 +8,7 @@ use crate::utils;
 
 // rustfmt skip because of a bug where rustfmt removes the `async` keyword ...
 #[rustfmt::skip]
-#[wasm_bindgen(raw_module = "./svg-level-loader")]
+#[wasm_bindgen(raw_module = "../rust-web-modules/svg-level-loader")]
 extern "C" {
     async fn load_svg(url: &str) -> JsValue;
     fn clean_svg(loading_id: &str);

www/package-lock.json

@@ -115,6 +115,29 @@
         }
       }
     },
+    "@wasm-tool/wasm-pack-plugin": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/@wasm-tool/wasm-pack-plugin/-/wasm-pack-plugin-1.3.3.tgz",
+      "integrity": "sha512-CJuluHW6JbUJoNfHj1VGZj11IS4mPK8gMmfW+/EPNViFnrzcHt6a9csG+BTyh0lw4gnzME4/nzAM7ZEiRYTUfw==",
+      "dev": true,
+      "requires": {
+        "chalk": "^2.4.1",
+        "command-exists": "^1.2.7",
+        "watchpack": "^1.6.0",
+        "which": "^2.0.2"
+      },
+      "dependencies": {
+        "which": {
+          "version": "2.0.2",
+          "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
+          "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
+          "dev": true,
+          "requires": {
+            "isexe": "^2.0.0"
+          }
+        }
+      }
+    },
     "@webassemblyjs/ast": {
       "version": "1.9.0",
       "resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.9.0.tgz",
@@ -1084,6 +1107,12 @@
       "integrity": "sha512-puCDz0CzydiSYOrnXpz/PKd69zRrribezjtE9yd4zvytoRc8+RY/KJPvtPFKZS3E3wP6neGyMe0vOTlHO5L3Pw==",
       "dev": true
     },
+    "command-exists": {
+      "version": "1.2.9",
+      "resolved": "https://registry.npmjs.org/command-exists/-/command-exists-1.2.9.tgz",
+      "integrity": "sha512-LTQ/SGc+s0Xc0Fu5WaKnR0YiygZkm9eKFvyS+fRsU7/ZWFF8ykFM6Pc9aCVf1+xasOOZpO3BAVgVrKvsqKHV7w==",
+      "dev": true
+    },
     "commander": {
       "version": "2.20.3",
       "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",

www/package.json

@@ -2,12 +2,10 @@
   "name": "engel-simulator-2020",
   "version": "0.1.0",
   "description": "TODO",
-  "main": "index.js",
+  "main": "index.ts",
   "scripts": {
     "build": "webpack --config webpack.config.js",
-    "start": "webpack-dev-server",
-    "all": "wasm-pack build && webpack-dev-server",
-    "rust-web-modules": "tsc ../rust-web-modules/svg-level-loader.ts --outFile ../pkg/svg-level-loader.js --module amd --moduleResolution node"
+    "start": "webpack-dev-server --mode development"
   },
   "author": "Rahix <rahix@rahix.de>",
   "license": "GPL-3.0-or-later",
@@ -15,6 +13,7 @@
     "engel-simulator-2020": "file:../pkg"
   },
   "devDependencies": {
+    "@wasm-tool/wasm-pack-plugin": "^1.3.3",
     "clean-webpack-plugin": "^3.0.0",
     "copy-webpack-plugin": "^5.0.0",
     "css-loader": "^5.0.1",

www/src/bootstrap.js

-// A dependency graph that contains any wasm must all be imported
-// asynchronously. This `bootstrap.js` file does the single async import, so
-// that no one else needs to worry about it again.
-import("./index.ts").catch((e) =>
-  console.error("Error importing `index.js`:", e)
-);

www/src/index.ts

-// @ts-ignore
-import * as wasm from "engel-simulator-2020";
 import "./styles.scss";
 
-wasm.start();
+// only the wasm module needs to be loaded async,
+// all other resources might be better loaded synchronously
+import("engel-simulator-2020").then((wasm) => {
 
-(window as any).cheats = Object.assign(
-  {},
-  ...Object.keys(wasm)
-    .filter((f) => f.startsWith("cheat_"))
-    .map((f) => ({[f.substr(6)]: (wasm as any)[f]}))
-);
+    wasm.start();
+
+    (window as any).cheats = Object.assign(
+        {},
+        ...Object.keys(wasm)
+            .filter((f) => f.startsWith("cheat_"))
+            .map((f) => ({[f.substr(6)]: (wasm as any)[f]}))
+    );
+});

www/webpack.config.js

 const path = require("path");
 const CopyWebpackPlugin = require("copy-webpack-plugin");
+const WasmPackPlugin = require('@wasm-tool/wasm-pack-plugin')
 const { CleanWebpackPlugin } = require('clean-webpack-plugin');
 
 module.exports = {
-  entry: "./src/bootstrap.js",
+  entry: "./src/index.ts",
   output: {
     path: path.resolve(__dirname, "dist"),
     filename: "bundle.js",
   },
-  mode: "development",
-
   plugins: [
+      new WasmPackPlugin({crateDirectory: path.resolve(__dirname, "..")}),
       new CleanWebpackPlugin(),
       new CopyWebpackPlugin([
           "src/index.html",
           { from: "resources/", to: "resources/" },
       ]),
   ],
+  resolve: {
+    extensions: ['.ts', '.js']
+  },
   module: {
     rules: [
       {