async functions to make watch more responsive

Author: dumbmatter

tools/lib/build.ts

@@ -15,8 +15,8 @@ export default async () => {
 
 	console.log(`Building ${sport}...`);
 
-	reset();
-	copyFiles();
+	await reset();
+	await copyFiles();
 
 	const jsonSchema = generateJSONSchema(sport);
 	await fs.mkdir("build/files", { recursive: true });

tools/lib/buildFuncs.ts

@@ -3,6 +3,7 @@ import browserslist from "browserslist";
 import { Buffer } from "node:buffer";
 import crypto from "node:crypto";
 import fs from "node:fs";
+import fsp from "node:fs/promises";
 import fse from "fs-extra";
 import * as htmlmin from "html-minifier-terser";
 import * as sass from "sass";
@@ -231,7 +232,7 @@ const setSport = () => {
 	});
 };
 
-const copyFiles = (watch: boolean = false) => {
+const copyFiles = async (watch: boolean = false) => {
 	const foldersToIgnore = [
 		"baseball",
 		"basketball",
@@ -240,7 +241,7 @@ const copyFiles = (watch: boolean = false) => {
 		"hockey",
 	];
 
-	fse.copySync("public", "build", {
+	await fse.copy("public", "build", {
 		filter: filename => {
 			// Loop through folders to ignore.
 			for (const folder of foldersToIgnore) {
@@ -263,31 +264,31 @@ const copyFiles = (watch: boolean = false) => {
 		sport = "basketball";
 	}
 
-	fse.copySync(path.join("public", sport), "build", {
+	await fse.copy(path.join("public", sport), "build", {
 		filter: filename => !filename.includes(".gitignore"),
 	});
 
 	// Remove the empty folders created by the "filter" function.
 	for (const folder of foldersToIgnore) {
-		fs.rmSync(`build/${folder}`, { recursive: true, force: true });
+		await fsp.rm(`build/${folder}`, { recursive: true, force: true });
 	}
 
 	const realPlayerFilenames = ["real-player-data", "real-player-stats"];
 	for (const filename of realPlayerFilenames) {
 		const sourcePath = path.join("data", `${filename}.${sport}.json`);
 		if (fs.existsSync(sourcePath)) {
-			fse.copySync(sourcePath, `build/gen/${filename}.json`);
+			await fse.copy(sourcePath, `build/gen/${filename}.json`);
 		}
 	}
 
-	fse.copySync("data/names.json", "build/gen/names.json");
-	fse.copySync("data/names-female.json", "build/gen/names-female.json");
+	await fse.copy("data/names.json", "build/gen/names.json");
+	await fse.copy("data/names-female.json", "build/gen/names-female.json");
 
-	fse.copySync("node_modules/flag-icons/flags/4x3", "build/img/flags");
+	await fse.copy("node_modules/flag-icons/flags/4x3", "build/img/flags");
 	const flagHtaccess = `<IfModule mod_headers.c>
 	Header set Cache-Control "public,max-age=31536000"
 </IfModule>`;
-	fs.writeFileSync("build/img/flags/.htaccess", flagHtaccess);
+	await fsp.writeFile("build/img/flags/.htaccess", flagHtaccess);
 
 	setSport();
 };
@@ -305,9 +306,9 @@ const genRev = () => {
 	return `${year}.${month}.${day}.${minutes}`;
 };
 
-const reset = () => {
-	fs.rmSync("build", { recursive: true, force: true });
-	fs.mkdirSync("build/gen", { recursive: true });
+const reset = async () => {
+	await fsp.rm("build", { recursive: true, force: true });
+	await fsp.mkdir("build/gen", { recursive: true });
 };
 
 const setTimestamps = (rev: string, watch: boolean = false) => {

tools/watch/cli.ts

@@ -89,7 +89,7 @@ const updateError = (filename: string, error: Error) => {
 };
 
 // Needs to run first, to create output folder
-watchFiles(updateStart, updateEnd, updateError);
+await watchFiles(updateStart, updateEnd, updateError);
 
 // Schema is needed for JS bunlde, and watchJSONSchema is async
 watchJSONSchema(updateStart, updateEnd, updateError).then(() => {

tools/watch/watchCSS.ts

@@ -1,30 +1,26 @@
-import { watch } from "chokidar";
-import { buildCSS } from "../lib/buildFuncs.ts";
+import path from "node:path";
+import { Worker } from "node:worker_threads";
 
 const watchCSS = async (
 	updateStart: (filename: string) => void,
 	updateEnd: (filename: string) => void,
 	updateError: (filename: string, error: Error) => void,
 ) => {
-	const watcher = watch("public/css", {});
+	const worker = new Worker(
+		path.join(import.meta.dirname, "watchCSSWorker.ts"),
+	);
 
-	const filenames = ["build/gen/light.css", "build/gen/dark.css"];
-
-	const myBuildCSS = async () => {
-		filenames.map(updateStart);
-		try {
-			await buildCSS(true);
-			filenames.map(updateEnd);
-		} catch (error) {
-			for (const filename of filenames) {
-				updateError(filename, error);
-			}
+	worker.on("message", message => {
+		if (message.type === "start") {
+			updateStart(message.filename);
 		}
-	};
-
-	await myBuildCSS();
-
-	watcher.on("change", myBuildCSS);
+		if (message.type === "end") {
+			updateEnd(message.filename);
+		}
+		if (message.type === "error") {
+			updateError(message.filename, message.error);
+		}
+	});
 };
 
 export default watchCSS;

tools/watch/watchCSSWorker.ts

@@ -0,0 +1,37 @@
+import { watch } from "chokidar";
+import { parentPort } from "node:worker_threads";
+import { buildCSS } from "../lib/buildFuncs.ts";
+
+const filenames = ["build/gen/light.css", "build/gen/dark.css"];
+
+const myBuildCSS = async () => {
+	for (const filename of filenames) {
+		parentPort!.postMessage({
+			type: "start",
+			filename,
+		});
+	}
+
+	try {
+		await buildCSS(true);
+		for (const filename of filenames) {
+			parentPort!.postMessage({
+				type: "end",
+				filename,
+			});
+		}
+	} catch (error) {
+		for (const filename of filenames) {
+			parentPort!.postMessage({
+				type: "error",
+				filename,
+				error,
+			});
+		}
+	}
+};
+
+await myBuildCSS();
+
+const watcher = watch("public/css", {});
+watcher.on("change", myBuildCSS);

tools/watch/watchFiles.ts

@@ -3,20 +3,18 @@ import { copyFiles, genRev, reset, setTimestamps } from "../lib/buildFuncs.ts";
 
 // Would be better to only copy individual files on update, but this is fast enough
 
-const watchFiles = (
+const watchFiles = async (
 	updateStart: (filename: string) => void,
 	updateEnd: (filename: string) => void,
 	updateError: (filename: string, error: Error) => void,
 ) => {
-	const watcher = watch(["public", "data", "node_modules/flag-icons"], {});
-
 	const outFilename = "static files";
 
-	const buildWatchFiles = () => {
+	const buildWatchFiles = async () => {
 		try {
 			updateStart(outFilename);
 
-			copyFiles(true);
+			await copyFiles(true);
 
 			const rev = genRev();
 			setTimestamps(rev, true);
@@ -28,9 +26,10 @@ const watchFiles = (
 		}
 	};
 
-	reset();
-	buildWatchFiles();
+	await reset();
+	await buildWatchFiles();
 
+	const watcher = watch(["public", "data", "node_modules/flag-icons"], {});
 	watcher.on("change", buildWatchFiles);
 };
 

tools/watch/watchJSONSchema.ts

@@ -17,12 +17,12 @@ const watchJSONSchema = async (
 
 	const sport = getSport();
 
-	const watcher = watch("tools/lib/generateJSONSchema.ts", {});
-
 	const outFilename = "build/files/league-schema.json";
 
 	const buildJSONSchema = async () => {
 		try {
+			updateStart(outFilename);
+
 			// Dynamically reload generateJSONSchema, cause that's what we're watching!
 			const generateJSONSchema = await importFresh(
 				"../lib/generateJSONSchema.ts",
@@ -38,14 +38,10 @@ const watchJSONSchema = async (
 		}
 	};
 
-	updateStart(outFilename);
-
-	watcher.on("change", async () => {
-		updateStart(outFilename);
-		await buildJSONSchema();
-	});
-
 	await buildJSONSchema();
+
+	const watcher = watch("tools/lib/generateJSONSchema.ts", {});
+	watcher.on("change", buildJSONSchema);
 };
 
 // watchJSONSchema((filename) => console.log('updateStart', filename), (filename) => console.log('updateEnd', filename), (filename, error) => console.log('updateError', filename, error));