Introduce Vite (#19)

* Dev mode with vite

* Fix prod build

* Use locked dep install in build script

* remove serve-site script

* ci: add vite build step

---------

Co-authored-by: Antonio Vivace <[email protected]>

.github/workflows/build.yml

@@ -25,6 +25,13 @@ jobs:
       - name: Build binjgb
         run: ./build-binjgb.sh
         shell: bash
+      - name: Use Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: '20.x'
+        run: |
+          npm ci
+          npm run build
       - name: Deploy to GitHub Pages
         uses: peaceiris/actions-gh-pages@v3
         with:

.gitignore

@@ -0,0 +1,2 @@
+www
+node_modules

README.md

@@ -11,13 +11,17 @@ System requirements:
 - bison, cmake
 - [emscripten](https://emscripten.org/docs/getting_started/downloads.html)
 
-To build RGBDS live and run it locally:
+Make sure you initialize submodules to be able to build the WebAssembly modules:
 
 ```bash
 # Pull RGBDS-live, rgbds and binjgb sources
 git clone https://github.com/gbdev/rgbds-live --recursive
-# Generate WASM builds and put them in the main source folder
+# Do a full build
 ./build.sh
 ```
 
-Final build will be in `www/`. You can run the provided `serve-site.sh` to serve that folder locally over port 8080.
+To start hacking, use the development server:
+```bash
+# Development server with live refresh:
+npm run dev
+```

build-binjgb.sh

@@ -10,13 +10,12 @@ fi
 cd binjgb
 ! mkdir out
 cd out
-cmake \
-    -DCMAKE_TOOLCHAIN_FILE=${EMSDK}/upstream/emscripten/cmake/Modules/Platform/Emscripten.cmake \
-    -DCMAKE_BUILD_TYPE=Release \
-    -DWERROR=ON \
-    -DWASM=true \
-    -DRGBDS_LIVE=ON \
-    ../
+cmake -E env LDFLAGS='-s EXPORT_ES6=1' \
+    cmake \
+        -DCMAKE_TOOLCHAIN_FILE=${EMSDK}/upstream/emscripten/cmake/Modules/Platform/Emscripten.cmake \
+        -DCMAKE_BUILD_TYPE=Release \
+        -DWERROR=ON \
+        -DWASM=true \
+        -DRGBDS_LIVE=ON \
+        ../
 make
-mkdir -p ../../www/wasm
-cp binjgb.* ../../www/wasm/

build-rgbds.sh

@@ -13,11 +13,7 @@ patch -p1 < ../rgbds.patch
 
 
 MAKE_ARGS="Q= PNGCFLAGS= PNGLDFLAGS= PNGLDLIBS="
-CFLAGS="-O3 -s MODULARIZE=1 -s EXPORTED_RUNTIME_METHODS=['FS'] -s USE_LIBPNG"
+CFLAGS="-O3 -s EXPORT_ES6=1 -s ENVIRONMENT=web -s MODULARIZE=1 -s EXPORTED_RUNTIME_METHODS=['FS'] -s USE_LIBPNG"
 emmake make ${MAKE_ARGS} CFLAGS="${CFLAGS} -s 'EXPORT_NAME=createRgbAsm'" rgbasm
 emmake make ${MAKE_ARGS} CFLAGS="${CFLAGS} -s 'EXPORT_NAME=createRgbLink'" rgblink
 emmake make ${MAKE_ARGS} CFLAGS="${CFLAGS} -s 'EXPORT_NAME=createRgbFix'" rgbfix
-mkdir -p ../www/wasm/
-cp rgbasm* ../www/wasm/
-cp rgblink* ../www/wasm/
-cp rgbfix* ../www/wasm/

build.sh

@@ -4,5 +4,6 @@ set -eu
 
 test -d binjgb/out || ./build-binjgb.sh
 test -f rgbds/rgbasm.wasm || ./build-rgbds.sh
-./codegen.sh
+npm ci
+npm run build
 

www/index.html → index.html

@@ -4,32 +4,26 @@
 <meta name="google" content="notranslate">
 <link rel="stylesheet" href="css/style.css">
 
-<script src="wasm/rgbasm"></script>
-<script src="wasm/rgblink"></script>
-<script src="wasm/rgbfix"></script>
-<script src="js/lz-string.min.js"></script>
-<script src="js/jszip.min.js"></script>
-
-<script src="js/gbz80.js"></script>
-<script src="js/ace/ace.js"></script>
-<script src="js/ace/theme-tomorrow.js"></script>
-<script src="js/ace/ext-language_tools.js"></script>
-<script src="js/ace/mode-gbz80.js"></script>
-<script src="js/ace/complete-gbz80.js"></script>
-<script src="js/ace/gbz80tooltip.js"></script>
-<script src="wasm/binjgb.js"></script>
-
-<script src="js/hardware.inc.js"></script>
-<script src="js/compiler.js"></script>
-<script src="js/emulator.js"></script>
-<script src="js/storage.js"></script>
-<script src="js/editors.js"></script>
-<script src="js/textEditor.js"></script>
-<script src="js/gfxEditor.js"></script>
-<script src="js/download.js"></script>
-
-<script>
-"use strict";
+<script type="module" src="js/lz-string.min.js"></script>
+<script type="module" src="js/jszip.min.js"></script>
+
+<script type="module" src="js/gbz80.js"></script>
+<script type="module" src="js/ace/ace.js"></script>
+<script type="module" src="js/ace/theme-tomorrow.js"></script>
+<script type="module" src="js/ace/ext-language_tools.js"></script>
+<script type="module" src="js/ace/mode-gbz80.js"></script>
+<script type="module" src="js/ace/complete-gbz80.js"></script>
+<script type="module" src="js/ace/gbz80tooltip.js"></script>
+
+<script type="module" src="js/compiler.js"></script>
+<script type="module" src="js/emulator.js"></script>
+<script type="module" src="js/storage.js"></script>
+<script type="module" src="js/editors.js"></script>
+<script type="module" src="js/textEditor.js"></script>
+<script type="module" src="js/gfxEditor.js"></script>
+<script type="module" src="js/download.js"></script>
+
+<script type="module">
 
 var cpu_line_marker = undefined;
 var start_address;

www/js/ace/complete-gbz80.js → js/ace/complete-gbz80.js

@@ -1,4 +1,4 @@
-"use strict";
+import {gameboy_hardware_constants} from "../gbz80.js";
 
 var gbz80Instructions = [
     {
@@ -1115,3 +1115,5 @@ var gbz80Completer = {
         }
     }
 }
+
+export {gbz80Completer};

www/js/ace/gbz80tooltip.js → js/ace/gbz80tooltip.js

@@ -1,8 +1,8 @@
 "use strict";
 
-var Tooltip = require("ace/tooltip").Tooltip;
+globalThis.Tooltip = require("ace/tooltip").Tooltip;
 var event = require("ace/lib/event");
-function TokenTooltip(editor) {
+globalThis.TokenTooltip = function TokenTooltip(editor) {
     if (editor.tokenTooltip)
         return;
     Tooltip.call(this, editor.container);

www/js/ace/mode-gbz80.js → js/ace/mode-gbz80.js

@@ -1,3 +1,5 @@
+import {gameboy_hardware_constants} from "../gbz80.js";
+
 define("ace/mode/gbz80_highlight_rules",["require","exports","module","ace/lib/oop","ace/mode/text_highlight_rules"], function(require, exports, module) {
 "use strict";
 

www/js/compiler.js → js/compiler.js

@@ -1,6 +1,10 @@
 "use strict";
 
-this.compiler = new Object();
+import createRgbAsm from "../rgbds/rgbasm";
+import createRgbLink from "../rgbds/rgblink";
+import createRgbFix from "../rgbds/rgbfix";
+
+globalThis.compiler = new Object();
 (function(compiler) {
     var busy = false;
     var repeat = false;
@@ -255,4 +259,4 @@ this.compiler = new Object();
             done_callback(rom_file, start_address, addr_to_line);
         }
     }
-})(this.compiler);
+})(globalThis.compiler);

www/js/editors.js → js/editors.js

@@ -1,6 +1,6 @@
 "use strict";
 
-this.editors = new Object();
+globalThis.editors = new Object();
 (function(editors) {
     var nullEditor = {
         'hide': function() { document.getElementById('nullEditorDiv').style.display = "none"; },
@@ -47,4 +47,4 @@ this.editors = new Object();
         if (ext == "txt") return 'text';
         return 'binary'
     }
-})(this.editors);
+})(globalThis.editors);

www/js/emulator.js → js/emulator.js

@@ -1,6 +1,8 @@
 "use strict";
 
-this.emulator = new Object();
+import Binjgb from "../binjgb/out/binjgb.js";
+
+globalThis.emulator = new Object();
 // This is technically race-y, but should be fine for now.
 Binjgb().then(v => globalThis.Module = v);
 (function(emulator) {
@@ -241,4 +243,4 @@ Binjgb().then(v => globalThis.Module = v);
         const buffer_sec = audio_buffer_size / audio_ctx.sampleRate;
         audio_time += buffer_sec;
     }
-})(this.emulator);
+})(globalThis.emulator);

www/js/gbz80.js → js/gbz80.js

@@ -1,6 +1,4 @@
-"use strict";
-
-var gameboy_hardware_constants = {
+const gameboy_hardware_constants = {
     "_HW": {
         description: "Start of the hardware IO registers.",
         value: "$FF00->$FF80"
@@ -617,3 +615,5 @@ for(var key in gameboy_hardware_constants)
         gameboy_hardware_constants[gameboy_hardware_constants[key].alias].alias = key
     }
 }
+
+export {gameboy_hardware_constants};

www/js/gfxEditor.js → js/gfxEditor.js

@@ -1,6 +1,6 @@
 "use strict";
 
-this.gfxEditor = new Object();
+globalThis.gfxEditor = new Object();
 (function(editor) {
     var colors = [0xFFC2F0C4, 0xFFA8B95A, 0xFF6E601E, 0xFF001B2D]
 
@@ -170,4 +170,4 @@ this.gfxEditor = new Object();
         ctx.rect(1.5, selected_color * 16 + 1.5, 13, 13);
         ctx.stroke();
     }
-})(this.gfxEditor);
+})(globalThis.gfxEditor);

www/js/storage.js → js/storage.js

@@ -1,14 +1,14 @@
 "use strict";
 
-this.storage = new Object();
+globalThis.storage = new Object();
 (function(storage) {
 
     var hardware_inc = new XMLHttpRequest();
-    hardware_inc.open("GET", "starting_project/hardware.inc", false);
+    hardware_inc.open("GET", new URL("../starting_project/hardware.inc", import.meta.url), false);
     hardware_inc.send();
 
     var main_asm = new XMLHttpRequest();
-    main_asm.open("GET", "starting_project/main.asm", false);
+    main_asm.open("GET", new URL("../starting_project/main.asm", import.meta.url), false);
     main_asm.send();
 
     var files = {"hardware.inc": hardware_inc.response, "main.asm": main_asm.response};      
@@ -19,11 +19,11 @@ this.storage = new Object();
     storage.reset = function()
     {
         var hardware_inc = new XMLHttpRequest();
-        hardware_inc.open("GET", "starting_project/hardware.inc", false);
+        hardware_inc.open("GET", new URL("../starting_project/hardware.inc", import.meta.url), false);
         hardware_inc.send();
 
         var main_asm = new XMLHttpRequest();
-        main_asm.open("GET", "starting_project/main.asm", false);
+        main_asm.open("GET", new URL("../starting_project/main.asm", import.meta.url), false);
         main_asm.send();
 
         var files = {"hardware.inc": hardware_inc.response, "main.asm": main_asm.response};        
@@ -216,4 +216,4 @@ this.storage = new Object();
         editors.setCurrentFile(Object.keys(files)[0]);
         updateFileList();
     }
-})(storage);
+})(globalThis.storage);

www/js/textEditor.js → js/textEditor.js

@@ -1,6 +1,6 @@
-"use strict";
+import {gbz80Completer} from "./ace/complete-gbz80.js";
 
-this.textEditor = new Object();
+globalThis.textEditor = new Object();
 (function(editor) {
     var editors = []
     var current_file = null;
@@ -156,4 +156,4 @@ this.textEditor = new Object();
         editors[0].resize()
         editors[0].renderer.updateFull()
     }
-})(this.textEditor);
+})(globalThis.textEditor);