bundle all files with esbuild

lite-xl · May 11, 2024 · 723c891 · 723c891
1 parent 378a562
commit 723c891
Show file tree

Hide file tree

Showing 11 changed files with 113 additions and 45 deletions.
diff --git a/.gitignore b/.gitignore
@@ -8,5 +8,4 @@ core/install
 shell/node_modules
 shell/dist
 
-lite-xl/build
-lite-xl/.git
+lite-xl
diff --git a/README.md b/README.md
@@ -19,7 +19,7 @@ In general, you will need the following tools:
 - A HTTP Server (I use `http-server`, but Python's `http.server` will work with caveats.)
 - Git
 - Bash (MSYS2 might work but not tested)
-- npm (Optional, for prettifying source code)
+- npm
 
 Your entry point will be `build.sh`, which can be used to build and deploy the application.
 For most people, running `./build.sh` will be sufficient,

diff --git a/build.sh b/build.sh
@@ -256,6 +256,9 @@ main() {
         --js-output=bundle.json.js --use-preload-cache --no-node --no-force \
         --use-preload-plugins --quiet
 
+    # we need to set Module=window.Module to use a global variable
+    sed -i '1s/^/var Module = window.Module;\n/' lite-xl/lite-xl.js
+    sed -i '1s/^/var Module = window.Module;\n/' bundle.json.js
     popd
 
     # build the shell
@@ -265,7 +268,7 @@ main() {
     else
         npm i -D
     fi
-    npm run build
+    BUNDLE_PATH="$rootdir/$xldir/bundle.json.js" LITE_XL_PATH="$rootdir/$xldir/lite-xl/lite-xl.js" npm run build
     popd
 
     # create the distribution
@@ -276,8 +279,8 @@ main() {
 
     # copy all the files
     cp -r "$rootdir/shell/dist/." "$output"
-    cp "$xldir/lite-xl/lite-xl.js" "$xldir/lite-xl/lite-xl.wasm" "$output/js"
-    cp "$xldir/bundle.json.js" "$xldir/bundle.json" "$output/js"
+    cp "$xldir/lite-xl/lite-xl.wasm" "$output/js"
+    cp "$xldir/bundle.json" "$output"
 }
 
 main "$@"
diff --git a/cross/30-lite-xl.txt b/cross/30-lite-xl.txt
@@ -24,6 +24,10 @@ malloc_impl = 'emmalloc'
 # e.g. stdout, stderr, fopen, etc. Use another cross file to override this value.
 exported_functions = ''
 
+# Exported JS values in Modules.
+# We need this because the minification will mangle / remove a bunch of symbols.
+exported_js_values = '["FS","ENV","IDBFS","callMain"]'
+
 # Extra link options that can be overridden by other cross files.
 extra_link_options = []
 
@@ -34,4 +38,4 @@ arch_tuple = 'wasm32-unknown'
 wrap_mode = 'nofallback'
 force_fallback_for = 'lua,pcre2,freetype2'
 c_args = ['-fPIC']
-c_link_args = ['-sALLOW_MEMORY_GROWTH=1', '-sINITIAL_MEMORY=' + initial_heap, '-sASYNCIFY', '-sASYNCIFY_ADVISE=' + asyncify_advise, '-sASYNCIFY_STACK_SIZE=' + asyncify_stack_size, '-sASYNCIFY_REMOVE=' + asyncify_ignores, '-sFORCE_FILESYSTEM=1', '-lidbfs.js', '-sEXIT_RUNTIME=1', '-sMALLOC=' + malloc_impl, '-sMAIN_MODULE=2', '-sEXPORTED_FUNCTIONS=' + exported_functions] + extra_link_options
+c_link_args = ['-sALLOW_MEMORY_GROWTH=1', '-sINITIAL_MEMORY=' + initial_heap, '-sASYNCIFY', '-sASYNCIFY_ADVISE=' + asyncify_advise, '-sASYNCIFY_STACK_SIZE=' + asyncify_stack_size, '-sASYNCIFY_REMOVE=' + asyncify_ignores, '-sFORCE_FILESYSTEM=1', '-lidbfs.js', '-sEXIT_RUNTIME=1', '-sMALLOC=' + malloc_impl, '-sMAIN_MODULE=2', '-sEXPORTED_FUNCTIONS=' + exported_functions, '-sEXPORTED_RUNTIME_METHODS=' + exported_js_values] + extra_link_options
diff --git a/shell/esbuild.mjs b/shell/esbuild.mjs
@@ -0,0 +1,22 @@
+/**
+ * @file Runs esbuild.
+ * @author takase1121
+ */
+
+import * as esbuild from "esbuild";
+import { env } from "process";
+
+await esbuild.build({
+  entryPoints: ["js/main.mjs", "css/main.css"],
+  bundle: true,
+  sourcemap: true,
+  minify: true,
+  target: "es2017",
+  alias: {
+    "lite-xl-bundle": env.BUNDLE_PATH,
+    "lite-xl": env.LITE_XL_PATH,
+  },
+  external: ["child_process", "path", "fs"],
+  logLevel: "info",
+  outdir: "dist",
+});
diff --git a/shell/html/index.html b/shell/html/index.html
@@ -14,8 +14,6 @@
 
     <link rel="stylesheet" href="./css/main.css" />
     <script src="./js/main.js"></script>
-    <script src="./js/bundle.json.js"></script>
-    <script src="./js/lite-xl.js"></script>
   </head>
 
   <body>

diff --git a/shell/js/env.mjs b/shell/js/env.mjs
@@ -0,0 +1,15 @@
+/**
+ * @file Exports Module.FS and Module.ENV.
+ * @author takase1121
+ */
+
+export let FS = {},
+  ENV = {};
+
+/**
+ * Loads the FS and ENV object from Module.
+ */
+export function reloadEmscriptenEnv() {
+  FS = Module.FS;
+  ENV = Module.ENV;
+}
diff --git a/shell/js/fs.mjs b/shell/js/fs.mjs
@@ -1,4 +1,10 @@
-import { zip } from "fflate"
+/**
+ * @file Filesystem related utilities.
+ * @author takase1121
+ */
+
+import { zip } from "fflate";
+import { FS } from "./env.mjs";
 
 /**
  * Splits the path into different segments.

diff --git a/shell/js/idbsync.mjs b/shell/js/idbsync.mjs
@@ -1,5 +1,12 @@
 /**
- * Manages syncings from IDBFS to IndexedDB.
+ * @file Manages syncing between IDBFS and IndexedDB.
+ * @author takase1121
+ */
+
+import { FS } from "./env.mjs";
+
+/**
+ * Manages syncing from IDBFS to IndexedDB.
  */
 export class IDBSync {
   constructor(interval = 5000) {

diff --git a/shell/js/main.mjs b/shell/js/main.mjs
@@ -1,17 +1,23 @@
+/**
+ * @file Sets up the environment for running Lite XL.
+ * @author takase1121
+ */
+
+import { ENV, FS, reloadEmscriptenEnv } from "./env.mjs";
 import { mkdirp, uploadFiles, downloadFiles } from "./fs.mjs";
 import { IDBSync } from "./idbsync.mjs";
 
-const Module = {
+// export the Module object explicitly to prevent minifiers from touching it
+window.Module = {
   preRun: [],
   arguments: [],
 };
 
-Module.idbSync = new IDBSync();
-Module.uploadFiles = uploadFiles;
-Module.downloadFiles = downloadFiles;
-
 let storageReady, runtimeReady, started;
-const start = () => {
+/**
+ * Starts Lite XL.
+ */
+function start() {
   if (runtimeReady && storageReady && !started) {
     started = true;
     console.log("Starting Lite XL...");
@@ -20,19 +26,25 @@ const start = () => {
 
     // set up autosave
     Module.idbSync.start();
-    callMain(Module.arguments);
+    Module.callMain(Module.arguments);
   }
-};
+}
+
+// export functions accessed by C
+Module.idbSync = new IDBSync();
+Module.uploadFiles = uploadFiles;
+Module.downloadFiles = downloadFiles;
 
 Module.thisProgram = "/usr/bin/lite-xl";
 Module.noInitialRun = true;
 Module.preRun.push(() => {
+  reloadEmscriptenEnv();
   ENV.LITE_SCALE = window.devicePixelRatio.toString();
   ENV.LITE_XL_RUNTIME = "core.wasm_core";
 
   // mount IDBFS in home folder
   mkdirp("/home/web_user");
-  FS.mount(IDBFS, {}, "/home/web_user");
+  FS.mount(Module.IDBFS, {}, "/home/web_user");
   FS.syncfs(true, (e) => {
     if (e) {
       console.error("syncfs(true) failed: ", e);
@@ -52,10 +64,28 @@ Module.onRuntimeInitialized = () => {
   runtimeReady = true;
   start();
 };
-Module.locateFile = (name, prefix) => prefix + (name.endsWith(".json") ? "js/" + name : name);
+
+/**
+ * Writes a string as a series of keyboard events.
+ * @param {InputEvent|CompositionEvent} e
+ */
+function addInput(e) {
+  if (e.data) {
+    // emulate keypress events
+    for (const char of [...e.data]) {
+      window.dispatchEvent(
+        new KeyboardEvent("keypress", {
+          key: char,
+          isComposing: e.isComposing,
+          charCode: char.charCodeAt(char.length - 1),
+        })
+      );
+    }
+  }
+}
 
 // attach canvas to module
-window.onload = () => {
+window.addEventListener("load", () => {
   const status = document.getElementById("status");
   Module.canvas = document.getElementById("canvas");
   Module.canvas.oncontextmenu = (e) => e.preventDefault();
@@ -66,25 +96,6 @@ window.onload = () => {
   // hook up our text input
   const textInput = document.getElementById("textinput");
 
-  /**
-   * Writes a string
-   * @param {InputEvent|CompositionEvent} e
-   */
-  function addInput(e) {
-    if (e.data) {
-      // emulate keypress events
-      for (const char of [...e.data]) {
-        window.dispatchEvent(
-          new KeyboardEvent("keypress", {
-            key: char,
-            isComposing: e.isComposing,
-            charCode: char.charCodeAt(char.length - 1),
-          })
-        );
-      }
-    }
-  }
-
   // ignore composition text, only get end result
   textInput.addEventListener("compositionend", addInput);
   textInput.addEventListener("input", (e) => {
@@ -98,6 +109,9 @@ window.onload = () => {
       window.dispatchEvent(new KeyboardEvent("keyup", ev));
     } else if (!e.isComposing) addInput(e);
   });
-};
+});
 
-window.Module = Module;
+// require the bundle loader and lite-xl itself, the actual paths are
+// handled by esbuild script itself.
+require("lite-xl");
+require("lite-xl-bundle");
diff --git a/shell/package.json b/shell/package.json
@@ -5,8 +5,8 @@
   "main": "index.html",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
-    "format": "prettier -w **/*.js **/*.css **/*.html",
-    "build:bundle": "esbuild js/main.mjs css/main.css --bundle --sourcemap --minify --outdir=dist --target=es2017",
+    "format": "prettier -w **/*.mjs **/*.css **/*.html",
+    "build:bundle": "node esbuild.mjs",
     "build:html": "cp -r html/. favicon.png dist",
     "build": "npm run build:bundle && npm run build:html"
   },