Feat/esbuild

.gitignore

@@ -19,11 +19,13 @@ node_modules/
 # Coverage reports by jest
 coverage
 
-# Dashboard webpack
+# Dashboard bundle config
 nodecg-io-core/dashboard/dist
-!nodecg-io-core/dashboard/webpack.config.js
+!nodecg-io-core/dashboard/esbuild.config.js
+
+# Debug service bundle config
 services/nodecg-io-debug/dashboard/dist
-!services/nodecg-io-debug/webpack.config.js
+!services/nodecg-io-debug/esbuild.config.js
 
 # Editor configuration
 .idea/
@@ -53,6 +55,7 @@ lerna-debug.log
 install.json
 
 # Autogenerated tsconfig.json files
+tsconfig.json
 samples/tsconfig.json
 services/tsconfig.json
 utils/tsconfig.json

.prettierignore

@@ -3,6 +3,7 @@ docs/build
 coverage
 
 # Autogenerated tsconfig.json files
+tsconfig.json
 samples/tsconfig.json
 services/tsconfig.json
 utils/tsconfig.json

.scripts/ci-nodecg-integration.mjs

@@ -51,7 +51,6 @@ const log = child_process
 
 const lines = log.split("\n");
 
-
 // Try to find each bundle in the logs.
 const missing = bundles.filter(
     /*Using endsWith here to remove possible ansi styling of "[info]" caused by ModeCG's logger when run locally*/

.scripts/exec.mjs

@@ -0,0 +1,47 @@
+import { root, packages } from "./update-paths.mjs";
+import concurrently from "concurrently";
+
+const COMMAND = process.argv[2];
+
+/**@type {import('concurrently').CommandObj[]}*/
+const commands = packages
+    .filter((v) => v.packageJson["scripts"] && v.packageJson["scripts"][COMMAND])
+    .map((v) => ({
+        name: v.packageJson.name,
+        command: "npm:" + COMMAND,
+        cwd: v.dir,
+    }));
+
+const scripts = root.packageJson["scripts"];
+if (scripts && scripts[COMMAND + ":root"]) {
+    commands.unshift({
+        name: root.packageJson.name,
+        command: "npm:" + COMMAND + ":root",
+        cwd: root.dir,
+    });
+}
+
+const colors = [
+    "blue",
+    "green",
+    "cyan",
+    "magenta",
+    "red",
+    "yellow",
+    "white",
+    "gray",
+    "blackBright",
+    "redBright",
+    "greenBright",
+    "yellowBright",
+    "blueBright",
+    "magentaBright",
+    "cyanBright",
+    "whiteBright",
+];
+
+if (commands.length > 0) {
+    concurrently(commands, {
+        prefixColors: colors,
+    });
+}

.scripts/update-paths.mjs

@@ -1,22 +1,17 @@
-import * as fs from "fs";
+import fs from "fs";
+import path from "path";
 
-const DIRS = ["./samples", "./services", "./utils"];
+import { getPackages } from "@manypkg/get-packages";
 
-for (const dir of DIRS) {
-    let tsconfig = {
-        files: [],
-        references: []
-    }
-    let contents = fs.opendirSync(dir);
-    let item;
-    while ((item = contents.readSync()) !== null) {
-        if (item.isDirectory() && fs.readdirSync(`${dir}/${item.name}`).includes("tsconfig.json")) {
-            tsconfig.references.push({
-                path: "./" + item.name
-            })
-        }
-    }
+export const { root, packages } = await getPackages(process.cwd());
 
-    let content = "// This file will be overwritten automatically! Do not store options here.\n" + JSON.stringify(tsconfig)
-    fs.writeFileSync(dir + "/tsconfig.json", content, { encoding: "utf8" });
-}
+const rootTSconfig = path.join(root.dir, "tsconfig.json");
+const tsconfig = {
+    files: [],
+    references: packages
+        .filter((pkg) => fs.readdirSync(pkg.dir).includes("tsconfig.json"))
+        .map((v) => ({ path: path.relative(root.dir, v.dir) })),
+};
+
+let content = "// This file will be overwritten automatically! Do not store options here.\n" + JSON.stringify(tsconfig);
+fs.writeFileSync(rootTSconfig, content, { encoding: "utf8" });

nodecg-io-core/dashboard/esbuild.config.js

@@ -0,0 +1,104 @@
+// @ts-check
+/* eslint-disable @typescript-eslint/no-var-requires */
+/* eslint-disable no-undef */
+/* eslint-disable no-console */
+
+const esbuild = require("esbuild");
+const path = require("path");
+const process = require("process");
+const fs = require("fs");
+
+const args = process.argv.slice(2);
+const prod = process.env.NODE_ENV === "production";
+
+const entryPoints = [
+    "monaco-editor/esm/vs/language/json/json.worker.js",
+    "monaco-editor/esm/vs/editor/editor.worker.js",
+    "main.ts",
+];
+
+if (args.includes("--clean") || args.includes("--rebuild")) {
+    // remove dist folder
+    try {
+        fs.rmSync(path.join(__dirname, "dist"), { recursive: true, force: true });
+    } catch (err) {
+        console.log(err);
+    }
+    if (!args.includes("--rebuild")) {
+        process.exit(0);
+    }
+}
+
+/**@type {import('esbuild').BuildOptions}*/
+const BuildOptions = {
+    /**
+     * By default esbuild will not bundle the input files. Bundling must be
+     * explicitly enabled.
+     */
+    bundle: true,
+    /**
+     * This option controls the file names of the output files corresponding to
+     * each input entry point file.
+     */
+    entryNames: "[name].bundle",
+    /**
+     * This is an array of files that each serve as an input to the bundling
+     * algorithm.
+     */
+    entryPoints: entryPoints,
+    /**
+     * This sets the output format for the generated JavaScript files. We are
+     * using th `iife`, witch format stands for "immediately-invoked function
+     * expression".
+     */
+    format: "iife",
+    /**
+     * This option changes how a given input file is interpreted. We use it to
+     * copy assets.
+     */
+    loader: {
+        ".ttf": "file",
+    },
+    /**
+     * When enabled, the generated code will be minified instead of
+     * pretty-printed. We enable this option on production builds.
+     */
+    minify: prod,
+    /**
+     * This option sets the output directory for the build operation.
+     */
+    outdir: path.join(__dirname, "dist"),
+    /**
+     * Configure esbuild's bundler to generate code intended for the browser.
+     */
+    platform: "browser",
+    /**
+     * Generate source maps, witch can make it easier to debug code.
+     */
+    sourcemap: true,
+    /**
+     * This sets the target environment for the generated JavaScript and/or CSS
+     * code. The target can either be set to a JavaScript language version such
+     * as es2020 or to a list of versions of individual engines ([chrome58,
+     * firefox57, safari11, edge16]).
+     */
+    target: "ES2015",
+    /**
+     * Enabling watch mode on the build API tells esbuild to listen for changes
+     * on the file system and to rebuild whenever a file changes that could
+     * invalidate the build.
+     */
+    watch: args.includes("--watch")
+};
+
+esbuild
+    .build(BuildOptions)
+    .catch(() => process.exit(1))
+    .then((result) => {
+        if (result.errors.length > 0) {
+            console.error(result.errors);
+        }
+        if (result.warnings.length > 0) {
+            console.error(result.warnings);
+        }
+    });

nodecg-io-core/dashboard/main.ts

@@ -1,15 +1,43 @@
-// Re-exports functions that are used in panel.html
-export { loadFramework } from "./authentication";
-export {
+// Re-exports functions that are used in panel.html to the global scope
+import { loadFramework } from "./authentication";
+import {
     onInstanceSelectChange,
     createInstance,
     saveInstanceConfig,
     deleteInstance,
     selectInstanceConfigPreset,
 } from "./serviceInstance";
-export {
+import {
     renderBundleDeps,
     renderInstanceSelector,
     setSelectedServiceDependency,
     unsetAllBundleDependencies,
 } from "./bundles";
+
+interface nodecgio extends Window {
+    nodecgio: {
+        loadFramework: typeof loadFramework;
+        onInstanceSelectChange: typeof onInstanceSelectChange;
+        createInstance: typeof createInstance;
+        saveInstanceConfig: typeof saveInstanceConfig;
+        deleteInstance: typeof deleteInstance;
+        selectInstanceConfigPreset: typeof selectInstanceConfigPreset;
+        renderBundleDeps: typeof renderBundleDeps;
+        renderInstanceSelector: typeof renderInstanceSelector;
+        setSelectedServiceDependency: typeof setSelectedServiceDependency;
+        unsetAllBundleDependencies: typeof unsetAllBundleDependencies;
+    };
+}
+
+(window as nodecgio & typeof globalThis).nodecgio = {
+    loadFramework,
+    onInstanceSelectChange,
+    createInstance,
+    saveInstanceConfig,
+    deleteInstance,
+    selectInstanceConfigPreset,
+    renderBundleDeps,
+    renderInstanceSelector,
+    setSelectedServiceDependency,
+    unsetAllBundleDependencies,
+};

nodecg-io-core/dashboard/package.json

@@ -13,23 +13,21 @@
         "directory": "nodecg-io-core/dashboard"
     },
     "scripts": {
-        "build": "webpack",
-        "watch": "webpack --watch"
+        "clean": "node esbuild.config.js --clean",
+        "build": "node esbuild.config.js",
+        "rebuild": "node esbuild.config.js --rebuild",
+        "watch": "node esbuild.config.js --watch"
     },
     "devDependencies": {
-        "clean-webpack-plugin": "^4.0.0",
-        "typescript": "^4.5.4",
-        "webpack": "^5.65.0",
-        "webpack-cli": "^4.9.1",
-        "style-loader": "^3.3.1",
-        "css-loader": "^6.5.1",
-        "monaco-editor-webpack-plugin": "^7.0.1",
-        "monaco-editor": "^0.30.1"
+        "esbuild": "^0.14.8",
+        "monaco-editor": "^0.31.1",
+        "typescript": "^4.5.4"
     },
     "dependencies": {
         "crypto-js": "^4.1.1",
+        "nodecg-io-core": "^0.3.0",
         "nodecg-types": "^1.8.3",
-        "nodecg-io-core": "^0.3.0"
+        "events": "^3.3.0"
     },
     "license": "MIT"
 }

nodecg-io-core/dashboard/panel.html

@@ -3,6 +3,7 @@
     <head>
         <meta charset="UTF-8" />
         <link rel="stylesheet" href="styles.css" />
+        <link rel="stylesheet" href="./dist/main.bundle.css" />
     </head>
     <body>
         <p>Minzig!</p>
@@ -18,7 +19,7 @@
             <div class="margins">
                 <label for="inputPassword">Password: </label>
                 <input type="password" id="inputPassword" />
-                <button onclick="loadFramework()">Login</button>
+                <button onclick="nodecgio.loadFramework()">Login</button>
                 <span id="spanPasswordNotice"></span>
             </div>
             <br />
@@ -33,7 +34,7 @@
                         <select
                             id="selectInstance"
                             class="flex-fill"
-                            onchange="onInstanceSelectChange(value);"
+                            onchange="nodecgio.onInstanceSelectChange(value);"
                         ></select>
                     </div>
 
@@ -44,7 +45,11 @@
 
                     <div id="instancePreset" class="margins flex hidden">
                         <label for="selectPreset">Load config preset: </label>
-                        <select id="selectPreset" class="flex-fill" onchange="selectInstanceConfigPreset();"></select>
+                        <select
+                            id="selectPreset"
+                            class="flex-fill"
+                            onchange="nodecgio.selectInstanceConfigPreset();"
+                        ></select>
                     </div>
 
                     <div id="instanceNameField" class="margins flex hidden">
@@ -53,12 +58,12 @@
                     </div>
 
                     <div id="instanceCreateButton" class="margins hidden">
-                        <button id="buttonCreate" onclick="createInstance();">Create</button>
+                        <button id="buttonCreate" onclick="nodecgio.createInstance();">Create</button>
                     </div>
 
                     <div id="instanceEditButtons" class="margins hidden">
-                        <button id="buttonSave" onclick="saveInstanceConfig();">Save</button>
-                        <button id="buttonDelete" onclick="deleteInstance();">Delete Instance</button>
+                        <button id="buttonSave" onclick="nodecgio.saveInstanceConfig();">Save</button>
+                        <button id="buttonDelete" onclick="nodecgio.deleteInstance();">Delete Instance</button>
                     </div>
 
                     <div>
@@ -70,19 +75,25 @@
                 <p>Managing Bundles</p>
                 <div id="bundleControlDiv" class="margins">
                     <label for="selectBundle">Bundle: </label>
-                    <select id="selectBundle" class="flex-fill" onchange="renderBundleDeps();"></select>
+                    <select id="selectBundle" class="flex-fill" onchange="nodecgio.renderBundleDeps();"></select>
 
                     <label for="selectBundleDepType">Service: </label>
-                    <select id="selectBundleDepType" class="flex-fill" onchange="renderInstanceSelector();"></select>
+                    <select
+                        id="selectBundleDepType"
+                        class="flex-fill"
+                        onchange="nodecgio.renderInstanceSelector();"
+                    ></select>
 
                     <label for="selectBundleInstance">Service Instance: </label>
                     <select
                         id="selectBundleInstance"
                         class="flex-fill"
-                        onchange="setSelectedServiceDependency();"
+                        onchange="nodecgio.setSelectedServiceDependency();"
                     ></select>
 
-                    <button id="buttonUnassignBundleDeps" onclick="unsetAllBundleDependencies();">Unset all</button>
+                    <button id="buttonUnassignBundleDeps" onclick="nodecgio.unsetAllBundleDependencies();">
+                        Unset all
+                    </button>
                 </div>
             </div>