Skip to content
This repository was archived by the owner on Apr 13, 2025. It is now read-only.

Commit 35e8698

Browse files
authored
Merge pull request #394 from Tim-Tech-Dev/feat/esbuild
Feat/esbuild
2 parents 4993c8c + 9cdd6d6 commit 35e8698

23 files changed

+1188
-2101
lines changed

.gitignore

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -19,11 +19,13 @@ node_modules/
1919
# Coverage reports by jest
2020
coverage
2121

22-
# Dashboard webpack
22+
# Dashboard bundle config
2323
nodecg-io-core/dashboard/dist
24-
!nodecg-io-core/dashboard/webpack.config.js
24+
!nodecg-io-core/dashboard/esbuild.config.js
25+
26+
# Debug service bundle config
2527
services/nodecg-io-debug/dashboard/dist
26-
!services/nodecg-io-debug/webpack.config.js
28+
!services/nodecg-io-debug/esbuild.config.js
2729

2830
# Editor configuration
2931
.idea/
@@ -53,6 +55,7 @@ lerna-debug.log
5355
install.json
5456

5557
# Autogenerated tsconfig.json files
58+
tsconfig.json
5659
samples/tsconfig.json
5760
services/tsconfig.json
5861
utils/tsconfig.json

.prettierignore

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ docs/build
33
coverage
44

55
# Autogenerated tsconfig.json files
6+
tsconfig.json
67
samples/tsconfig.json
78
services/tsconfig.json
89
utils/tsconfig.json

.scripts/ci-nodecg-integration.mjs

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -51,7 +51,6 @@ const log = child_process
5151

5252
const lines = log.split("\n");
5353

54-
5554
// Try to find each bundle in the logs.
5655
const missing = bundles.filter(
5756
/*Using endsWith here to remove possible ansi styling of "[info]" caused by ModeCG's logger when run locally*/

.scripts/exec.mjs

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
import { root, packages } from "./update-paths.mjs";
2+
import concurrently from "concurrently";
3+
4+
const COMMAND = process.argv[2];
5+
6+
/**@type {import('concurrently').CommandObj[]}*/
7+
const commands = packages
8+
.filter((v) => v.packageJson["scripts"] && v.packageJson["scripts"][COMMAND])
9+
.map((v) => ({
10+
name: v.packageJson.name,
11+
command: "npm:" + COMMAND,
12+
cwd: v.dir,
13+
}));
14+
15+
const scripts = root.packageJson["scripts"];
16+
if (scripts && scripts[COMMAND + ":root"]) {
17+
commands.unshift({
18+
name: root.packageJson.name,
19+
command: "npm:" + COMMAND + ":root",
20+
cwd: root.dir,
21+
});
22+
}
23+
24+
const colors = [
25+
"blue",
26+
"green",
27+
"cyan",
28+
"magenta",
29+
"red",
30+
"yellow",
31+
"white",
32+
"gray",
33+
"blackBright",
34+
"redBright",
35+
"greenBright",
36+
"yellowBright",
37+
"blueBright",
38+
"magentaBright",
39+
"cyanBright",
40+
"whiteBright",
41+
];
42+
43+
if (commands.length > 0) {
44+
concurrently(commands, {
45+
prefixColors: colors,
46+
});
47+
}

.scripts/update-paths.mjs

Lines changed: 14 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,17 @@
1-
import * as fs from "fs";
1+
import fs from "fs";
2+
import path from "path";
23

3-
const DIRS = ["./samples", "./services", "./utils"];
4+
import { getPackages } from "@manypkg/get-packages";
45

5-
for (const dir of DIRS) {
6-
let tsconfig = {
7-
files: [],
8-
references: []
9-
}
10-
let contents = fs.opendirSync(dir);
11-
let item;
12-
while ((item = contents.readSync()) !== null) {
13-
if (item.isDirectory() && fs.readdirSync(`${dir}/${item.name}`).includes("tsconfig.json")) {
14-
tsconfig.references.push({
15-
path: "./" + item.name
16-
})
17-
}
18-
}
6+
export const { root, packages } = await getPackages(process.cwd());
197

20-
let content = "// This file will be overwritten automatically! Do not store options here.\n" + JSON.stringify(tsconfig)
21-
fs.writeFileSync(dir + "/tsconfig.json", content, { encoding: "utf8" });
22-
}
8+
const rootTSconfig = path.join(root.dir, "tsconfig.json");
9+
const tsconfig = {
10+
files: [],
11+
references: packages
12+
.filter((pkg) => fs.readdirSync(pkg.dir).includes("tsconfig.json"))
13+
.map((v) => ({ path: path.relative(root.dir, v.dir) })),
14+
};
15+
16+
let content = "// This file will be overwritten automatically! Do not store options here.\n" + JSON.stringify(tsconfig);
17+
fs.writeFileSync(rootTSconfig, content, { encoding: "utf8" });
Lines changed: 104 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,104 @@
1+
// @ts-check
2+
/* eslint-disable @typescript-eslint/no-var-requires */
3+
/* eslint-disable no-undef */
4+
/* eslint-disable no-console */
5+
6+
const esbuild = require("esbuild");
7+
const path = require("path");
8+
const process = require("process");
9+
const fs = require("fs");
10+
11+
const args = process.argv.slice(2);
12+
const prod = process.env.NODE_ENV === "production";
13+
14+
const entryPoints = [
15+
"monaco-editor/esm/vs/language/json/json.worker.js",
16+
"monaco-editor/esm/vs/editor/editor.worker.js",
17+
"main.ts",
18+
];
19+
20+
if (args.includes("--clean") || args.includes("--rebuild")) {
21+
// remove dist folder
22+
try {
23+
fs.rmSync(path.join(__dirname, "dist"), { recursive: true, force: true });
24+
} catch (err) {
25+
console.log(err);
26+
}
27+
if (!args.includes("--rebuild")) {
28+
process.exit(0);
29+
}
30+
}
31+
32+
/**@type {import('esbuild').BuildOptions}*/
33+
const BuildOptions = {
34+
/**
35+
* By default esbuild will not bundle the input files. Bundling must be
36+
* explicitly enabled.
37+
*/
38+
bundle: true,
39+
/**
40+
* This option controls the file names of the output files corresponding to
41+
* each input entry point file.
42+
*/
43+
entryNames: "[name].bundle",
44+
/**
45+
* This is an array of files that each serve as an input to the bundling
46+
* algorithm.
47+
*/
48+
entryPoints: entryPoints,
49+
/**
50+
* This sets the output format for the generated JavaScript files. We are
51+
* using th `iife`, witch format stands for "immediately-invoked function
52+
* expression".
53+
*/
54+
format: "iife",
55+
/**
56+
* This option changes how a given input file is interpreted. We use it to
57+
* copy assets.
58+
*/
59+
loader: {
60+
".ttf": "file",
61+
},
62+
/**
63+
* When enabled, the generated code will be minified instead of
64+
* pretty-printed. We enable this option on production builds.
65+
*/
66+
minify: prod,
67+
/**
68+
* This option sets the output directory for the build operation.
69+
*/
70+
outdir: path.join(__dirname, "dist"),
71+
/**
72+
* Configure esbuild's bundler to generate code intended for the browser.
73+
*/
74+
platform: "browser",
75+
/**
76+
* Generate source maps, witch can make it easier to debug code.
77+
*/
78+
sourcemap: true,
79+
/**
80+
* This sets the target environment for the generated JavaScript and/or CSS
81+
* code. The target can either be set to a JavaScript language version such
82+
* as es2020 or to a list of versions of individual engines ([chrome58,
83+
* firefox57, safari11, edge16]).
84+
*/
85+
target: "ES2015",
86+
/**
87+
* Enabling watch mode on the build API tells esbuild to listen for changes
88+
* on the file system and to rebuild whenever a file changes that could
89+
* invalidate the build.
90+
*/
91+
watch: args.includes("--watch")
92+
};
93+
94+
esbuild
95+
.build(BuildOptions)
96+
.catch(() => process.exit(1))
97+
.then((result) => {
98+
if (result.errors.length > 0) {
99+
console.error(result.errors);
100+
}
101+
if (result.warnings.length > 0) {
102+
console.error(result.warnings);
103+
}
104+
});

nodecg-io-core/dashboard/main.ts

Lines changed: 32 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,43 @@
1-
// Re-exports functions that are used in panel.html
2-
export { loadFramework } from "./authentication";
3-
export {
1+
// Re-exports functions that are used in panel.html to the global scope
2+
import { loadFramework } from "./authentication";
3+
import {
44
onInstanceSelectChange,
55
createInstance,
66
saveInstanceConfig,
77
deleteInstance,
88
selectInstanceConfigPreset,
99
} from "./serviceInstance";
10-
export {
10+
import {
1111
renderBundleDeps,
1212
renderInstanceSelector,
1313
setSelectedServiceDependency,
1414
unsetAllBundleDependencies,
1515
} from "./bundles";
16+
17+
interface nodecgio extends Window {
18+
nodecgio: {
19+
loadFramework: typeof loadFramework;
20+
onInstanceSelectChange: typeof onInstanceSelectChange;
21+
createInstance: typeof createInstance;
22+
saveInstanceConfig: typeof saveInstanceConfig;
23+
deleteInstance: typeof deleteInstance;
24+
selectInstanceConfigPreset: typeof selectInstanceConfigPreset;
25+
renderBundleDeps: typeof renderBundleDeps;
26+
renderInstanceSelector: typeof renderInstanceSelector;
27+
setSelectedServiceDependency: typeof setSelectedServiceDependency;
28+
unsetAllBundleDependencies: typeof unsetAllBundleDependencies;
29+
};
30+
}
31+
32+
(window as nodecgio & typeof globalThis).nodecgio = {
33+
loadFramework,
34+
onInstanceSelectChange,
35+
createInstance,
36+
saveInstanceConfig,
37+
deleteInstance,
38+
selectInstanceConfigPreset,
39+
renderBundleDeps,
40+
renderInstanceSelector,
41+
setSelectedServiceDependency,
42+
unsetAllBundleDependencies,
43+
};

nodecg-io-core/dashboard/package.json

Lines changed: 9 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -13,23 +13,21 @@
1313
"directory": "nodecg-io-core/dashboard"
1414
},
1515
"scripts": {
16-
"build": "webpack",
17-
"watch": "webpack --watch"
16+
"clean": "node esbuild.config.js --clean",
17+
"build": "node esbuild.config.js",
18+
"rebuild": "node esbuild.config.js --rebuild",
19+
"watch": "node esbuild.config.js --watch"
1820
},
1921
"devDependencies": {
20-
"clean-webpack-plugin": "^4.0.0",
21-
"typescript": "^4.5.4",
22-
"webpack": "^5.65.0",
23-
"webpack-cli": "^4.9.1",
24-
"style-loader": "^3.3.1",
25-
"css-loader": "^6.5.1",
26-
"monaco-editor-webpack-plugin": "^7.0.1",
27-
"monaco-editor": "^0.30.1"
22+
"esbuild": "^0.14.8",
23+
"monaco-editor": "^0.31.1",
24+
"typescript": "^4.5.4"
2825
},
2926
"dependencies": {
3027
"crypto-js": "^4.1.1",
28+
"nodecg-io-core": "^0.3.0",
3129
"nodecg-types": "^1.8.3",
32-
"nodecg-io-core": "^0.3.0"
30+
"events": "^3.3.0"
3331
},
3432
"license": "MIT"
3533
}

nodecg-io-core/dashboard/panel.html

Lines changed: 21 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
<head>
44
<meta charset="UTF-8" />
55
<link rel="stylesheet" href="styles.css" />
6+
<link rel="stylesheet" href="./dist/main.bundle.css" />
67
</head>
78
<body>
89
<p>Minzig!</p>
@@ -18,7 +19,7 @@
1819
<div class="margins">
1920
<label for="inputPassword">Password: </label>
2021
<input type="password" id="inputPassword" />
21-
<button onclick="loadFramework()">Login</button>
22+
<button onclick="nodecgio.loadFramework()">Login</button>
2223
<span id="spanPasswordNotice"></span>
2324
</div>
2425
<br />
@@ -33,7 +34,7 @@
3334
<select
3435
id="selectInstance"
3536
class="flex-fill"
36-
onchange="onInstanceSelectChange(value);"
37+
onchange="nodecgio.onInstanceSelectChange(value);"
3738
></select>
3839
</div>
3940

@@ -44,7 +45,11 @@
4445

4546
<div id="instancePreset" class="margins flex hidden">
4647
<label for="selectPreset">Load config preset: </label>
47-
<select id="selectPreset" class="flex-fill" onchange="selectInstanceConfigPreset();"></select>
48+
<select
49+
id="selectPreset"
50+
class="flex-fill"
51+
onchange="nodecgio.selectInstanceConfigPreset();"
52+
></select>
4853
</div>
4954

5055
<div id="instanceNameField" class="margins flex hidden">
@@ -53,12 +58,12 @@
5358
</div>
5459

5560
<div id="instanceCreateButton" class="margins hidden">
56-
<button id="buttonCreate" onclick="createInstance();">Create</button>
61+
<button id="buttonCreate" onclick="nodecgio.createInstance();">Create</button>
5762
</div>
5863

5964
<div id="instanceEditButtons" class="margins hidden">
60-
<button id="buttonSave" onclick="saveInstanceConfig();">Save</button>
61-
<button id="buttonDelete" onclick="deleteInstance();">Delete Instance</button>
65+
<button id="buttonSave" onclick="nodecgio.saveInstanceConfig();">Save</button>
66+
<button id="buttonDelete" onclick="nodecgio.deleteInstance();">Delete Instance</button>
6267
</div>
6368

6469
<div>
@@ -70,19 +75,25 @@
7075
<p>Managing Bundles</p>
7176
<div id="bundleControlDiv" class="margins">
7277
<label for="selectBundle">Bundle: </label>
73-
<select id="selectBundle" class="flex-fill" onchange="renderBundleDeps();"></select>
78+
<select id="selectBundle" class="flex-fill" onchange="nodecgio.renderBundleDeps();"></select>
7479

7580
<label for="selectBundleDepType">Service: </label>
76-
<select id="selectBundleDepType" class="flex-fill" onchange="renderInstanceSelector();"></select>
81+
<select
82+
id="selectBundleDepType"
83+
class="flex-fill"
84+
onchange="nodecgio.renderInstanceSelector();"
85+
></select>
7786

7887
<label for="selectBundleInstance">Service Instance: </label>
7988
<select
8089
id="selectBundleInstance"
8190
class="flex-fill"
82-
onchange="setSelectedServiceDependency();"
91+
onchange="nodecgio.setSelectedServiceDependency();"
8392
></select>
8493

85-
<button id="buttonUnassignBundleDeps" onclick="unsetAllBundleDependencies();">Unset all</button>
94+
<button id="buttonUnassignBundleDeps" onclick="nodecgio.unsetAllBundleDependencies();">
95+
Unset all
96+
</button>
8697
</div>
8798
</div>
8899

0 commit comments

Comments
 (0)