feat: initial support for parcel as bundler

.gitlab-ci.yml

@@ -40,7 +40,7 @@ build-wasm:
     - rustc --version
     - cargo install wasm-pack
     - wasm-pack build --release --target=web --out-dir=examples/web/lib -- --features wasm
-    - cd examples/web && npm install && npm run build && rm -rf node_modules package-lock.json
+    - cd examples/web && npm install && npm run build
   artifacts:
     paths:
       - examples/web
@@ -48,7 +48,7 @@ build-wasm:
 deploy-netlify-preview:
   stage: deploy
   script:
-    - cd examples/web
+    - cd examples/web/dist
     - npm_config_yes=true npx --package=netlify-cli netlify deploy --dir=.
   only:
     - master
@@ -56,7 +56,7 @@ deploy-netlify-preview:
 deploy-netlify-prod:
   stage: deploy
   script:
-    - cd examples/web
+    - cd examples/web/dist
     - npm_config_yes=true npx --package=netlify-cli netlify deploy --dir=. --prod
   only:
     - tags

README.md

@@ -42,7 +42,7 @@ cargo install wasm-pack
 wasm-pack build --release --target=web --out-dir=examples/web/lib -- --features wasm
 cd examples/web
 npm install && npm run build
-python3 -m http.server
+cd dist && python3 -m http.server
 ```
 
 ## Reason

examples/web/.gitignore

 yarn.lock
 package-lock.json
 
-/index.js
-/index.js.map
+/.parcel-cache
+
+/dist
 /node_modules

examples/web/.parcelrc

+{
+    "extends": "@parcel/config-default",
+    "transformers": {
+        "*.{ts,tsx}": ["@parcel/transformer-typescript-tsc"],
+        "*.ch8": ["@parcel/transformer-raw"]
+    }
+}

examples/web/index.html

@@ -83,6 +83,6 @@
         <div id="footer" class="footer">
             Built with ❤️ by <a href="https://joao.me" target="_blank">João Magalhães</a>
         </div>
-        <script type="module" src="index.js"></script>
+        <script type="module" src="index.ts"></script>
     </body>
 </html>

examples/web/index.ts

 import { default as wasm, Chip8Neo, Chip8Classic } from "./lib/chip_ahoyto.js";
+import info from "./package.json";
 
 const PIXEL_SET_COLOR = 0x50cb93ff;
 const PIXEL_UNSET_COLOR = 0x1b1a17ff;
@@ -39,7 +40,8 @@ const KEYS: Record<string, number> = {
     v: 0x0f
 };
 
-const ROM_PATH = "res/roms/pong.ch8";
+// @ts-ignore: ts(2580)
+const ROM_PATH = require("../../res/roms/pong.ch8");
 
 type State = {
     chip8: Chip8Neo | Chip8Classic;
@@ -440,8 +442,6 @@ const registerToast = () => {
 };
 
 const initBase = async () => {
-    const response = await fetch("package.json");
-    const info = await response.json();
     setVersion(info.version);
 };
 
@@ -607,7 +607,9 @@ const fetchRom = async (romPath: string): Promise<[string, Uint8Array]> => {
     // extracts the name of the ROM from the provided
     // path by splitting its structure
     const romPathS = romPath.split(/\//g);
-    const romName = romPathS[romPathS.length - 1];
+    let romName = romPathS[romPathS.length - 1].split("?")[0];
+    const romNameS = romName.split(/\./g);
+    romName = `${romNameS[0]}.${romNameS[romNameS.length - 1]}`;
 
     // loads the ROM data and converts it into the
     // target byte array buffer (to be used by WASM)

examples/web/package.json

@@ -8,12 +8,16 @@
     },
     "license": "Apache-2.0",
     "scripts": {
-        "build": "tsc -p .",
+        "build": "parcel build index.html",
+        "dev": "parcel index.html",
         "pretty": "prettier --config .prettierrc \"./**/*.{ts,json}\" --write",
         "start": "npm run build",
-        "watch": "tsc-watch"
+        "watch": "parcel watch index.html"
     },
+    "source": "index.ts",
     "devDependencies": {
+        "@parcel/transformer-typescript-tsc": "^2.6.1",
+        "parcel": "^2.6.1",
         "prettier": "^2.7.1",
         "tsc-watch": "^5.0.3",
         "typescript": "^4.5.5"