fix: misskey-js、bubble-game、reversiのビルドをesbuildに統合する (misskey-dev#13600)

* fix: ビルドが遅いパッケージのビルド速度を改善

* dependenciesの整理

* fix ci

* ビルド開始時に古いファイルを消す

* fix ci

* fix ci

.github/workflows/lint.yml

@@ -92,6 +92,6 @@ jobs:
     - run: pnpm i --frozen-lockfile
     - run: pnpm --filter misskey-js run build
       if: ${{ matrix.workspace == 'backend' }}
-    - run: pnpm --filter misskey-reversi run build:tsc
+    - run: pnpm --filter misskey-reversi run build
       if: ${{ matrix.workspace == 'backend' }}
     - run: pnpm --filter ${{ matrix.workspace }} run typecheck

package.json

@@ -56,7 +56,9 @@
 		"postcss": "8.4.35",
 		"tar": "6.2.0",
 		"terser": "5.28.1",
-		"typescript": "5.3.3"
+		"typescript": "5.3.3",
+		"esbuild": "0.19.11",
+		"glob": "10.3.10"
 	},
 	"devDependencies": {
 		"@types/node": "^20.11.28",

packages/backend/.swcrc

@@ -19,5 +19,6 @@
 		},
 		"target": "es2022"
 	},
-	"minify": false
+	"minify": false,
+	"sourceMaps": "inline"
 }

packages/misskey-bubble-game/.eslintignore

@@ -5,3 +5,4 @@ node_modules
 /jest.config.ts
 /test
 /test-d
+build.js

packages/misskey-bubble-game/build.js

@@ -1,31 +1,105 @@
+import * as esbuild from "esbuild";
 import { build } from "esbuild";
 import { globSync } from "glob";
+import { execa } from "execa";
+import fs from "node:fs";
+import { fileURLToPath } from "node:url";
+import { dirname } from "node:path";
+
+const _filename = fileURLToPath(import.meta.url);
+const _dirname = dirname(_filename);
+const _package = JSON.parse(fs.readFileSync(_dirname + '/package.json', 'utf-8'));
 
 const entryPoints = globSync("./src/**/**.{ts,tsx}");
 
 /** @type {import('esbuild').BuildOptions} */
 const options = {
-  entryPoints,
-  minify: true,
-  outdir: "./built/esm",
-  target: "es2022",
-  platform: "browser",
-  format: "esm",
+	entryPoints,
+	minify: process.env.NODE_ENV === 'production',
+	outdir: "./built",
+	target: "es2022",
+	platform: "browser",
+	format: "esm",
+	sourcemap: 'linked',
 };
 
-if (process.env.WATCH === "true") {
-  options.watch = {
-    onRebuild(error, result) {
-      if (error) {
-        console.error("watch build failed:", error);
-      } else {
-        console.log("watch build succeeded:", result);
-      }
-    },
-  };
+// built配下をすべて削除する
+fs.rmSync('./built', { recursive: true, force: true });
+
+if (process.argv.map(arg => arg.toLowerCase()).includes("--watch")) {
+	await watchSrc();
+} else {
+	await buildSrc();
+}
+
+async function buildSrc() {
+	console.log(`[${_package.name}] start building...`);
+
+	await build(options)
+		.then(it => {
+			console.log(`[${_package.name}] build succeeded.`);
+		})
+		.catch((err) => {
+			process.stderr.write(err.stderr);
+			process.exit(1);
+		});
+
+	if (process.env.NODE_ENV === 'production') {
+		console.log(`[${_package.name}] skip building d.ts because NODE_ENV is production.`);
+	} else {
+		await buildDts();
+	}
+
+	console.log(`[${_package.name}] finish building.`);
 }
 
-build(options).catch((err) => {
-  process.stderr.write(err.stderr);
-  process.exit(1);
-});
+function buildDts() {
+	return execa(
+		'tsc',
+		[
+			'--project', 'tsconfig.json',
+			'--outDir', 'built',
+			'--declaration', 'true',
+			'--emitDeclarationOnly', 'true',
+		],
+		{
+			stdout: process.stdout,
+			stderr: process.stderr,
+		}
+	);
+}
+
+async function watchSrc() {
+	const plugins = [{
+		name: 'gen-dts',
+		setup(build) {
+			build.onStart(() => {
+				console.log(`[${_package.name}] detect changed...`);
+			});
+			build.onEnd(async result => {
+				if (result.errors.length > 0) {
+					console.error(`[${_package.name}] watch build failed:`, result);
+					return;
+				}
+				await buildDts();
+			});
+		},
+	}];
+
+	console.log(`[${_package.name}] start watching...`)
+
+	const context = await esbuild.context({ ...options, plugins });
+	await context.watch();
+
+	await new Promise((resolve, reject) => {
+		process.on('SIGHUP', resolve);
+		process.on('SIGINT', resolve);
+		process.on('SIGTERM', resolve);
+		process.on('SIGKILL', resolve);
+		process.on('uncaughtException', reject);
+		process.on('exit', resolve);
+	}).finally(async () => {
+		await context.dispose();
+		console.log(`[${_package.name}] finish watching.`);
+	});
+}

packages/misskey-bubble-game/package.json

@@ -2,46 +2,44 @@
 	"type": "module",
 	"name": "misskey-bubble-game",
 	"version": "0.0.1",
-	"types": "./built/dts/index.d.ts",
+	"main": "./built/index.js",
+	"types": "./built/index.d.ts",
 	"exports": {
 		".": {
-			"import": "./built/esm/index.js",
-			"types": "./built/dts/index.d.ts"
+			"import": "./built/index.js",
+			"types": "./built/index.d.ts"
 		},
 		"./*": {
-			"import": "./built/esm/*",
-			"types": "./built/dts/*"
+			"import": "./built/*",
+			"types": "./built/*"
 		}
 	},
 	"scripts": {
 		"build": "node ./build.js",
-		"build:tsc": "npm run tsc",
-		"tsc": "npm run tsc-esm && npm run tsc-dts",
-		"tsc-esm": "tsc --outDir built/esm",
-		"tsc-dts": "tsc --outDir built/dts --declaration true --emitDeclarationOnly true --declarationMap true",
-		"watch": "nodemon -w src -e ts,js,cjs,mjs,json --exec \"pnpm run build:tsc\"",
+		"watch": "nodemon -w package.json -e json --exec \"node ./build.js --watch\"",
 		"eslint": "eslint . --ext .js,.jsx,.ts,.tsx",
 		"typecheck": "tsc --noEmit",
 		"lint": "pnpm typecheck && pnpm eslint"
 	},
 	"devDependencies": {
 		"@misskey-dev/eslint-plugin": "1.0.0",
 		"@types/matter-js": "0.19.6",
-		"@types/node": "20.11.5",
 		"@types/seedrandom": "3.0.8",
+		"@types/node": "20.11.5",
 		"@typescript-eslint/eslint-plugin": "7.1.0",
 		"@typescript-eslint/parser": "7.1.0",
 		"eslint": "8.57.0",
 		"nodemon": "3.0.2",
-		"typescript": "5.3.3"
+		"execa": "8.0.1",
+		"typescript": "5.3.3",
+		"esbuild": "0.19.11",
+		"glob": "10.3.10"
 	},
 	"files": [
 		"built"
 	],
 	"dependencies": {
-		"esbuild": "0.19.11",
 		"eventemitter3": "5.0.1",
-		"glob": "^10.3.10",
 		"matter-js": "0.19.0",
 		"seedrandom": "3.0.5"
 	}

packages/misskey-bubble-game/src/index.ts

@@ -6,5 +6,9 @@
 import { DropAndFusionGame, Mono } from './game.js';
 
 export {
-	DropAndFusionGame, Mono,
+	DropAndFusionGame,
+};
+
+export type {
+	Mono,
 };

packages/misskey-bubble-game/tsconfig.json

@@ -6,7 +6,7 @@
 		"moduleResolution": "nodenext",
 		"declaration": true,
 		"declarationMap": true,
-		"sourceMap": true,
+		"sourceMap": false,
 		"outDir": "./built/",
 		"removeComments": true,
 		"strict": true,

packages/misskey-js/.eslintignore

@@ -5,3 +5,4 @@ node_modules
 /jest.config.ts
 /test
 /test-d
+build.js

packages/misskey-js/api-extractor.json

@@ -45,7 +45,7 @@
    *
    * SUPPORTED TOKENS: <projectFolder>, <packageName>, <unscopedPackageName>
    */
-  "mainEntryPointFilePath": "<projectFolder>/built/dts/index.d.ts",
+  "mainEntryPointFilePath": "<projectFolder>/built/index.d.ts",
 
   /**
    * A list of NPM package names whose exports should be treated as part of this package.

packages/misskey-js/build.js

@@ -0,0 +1,105 @@
+import * as esbuild from "esbuild";
+import { build } from "esbuild";
+import { globSync } from "glob";
+import { execa } from "execa";
+import fs from "node:fs";
+import { fileURLToPath } from "node:url";
+import { dirname } from "node:path";
+
+const _filename = fileURLToPath(import.meta.url);
+const _dirname = dirname(_filename);
+const _package = JSON.parse(fs.readFileSync(_dirname + '/package.json', 'utf-8'));
+
+const entryPoints = globSync("./src/**/**.{ts,tsx}");
+
+/** @type {import('esbuild').BuildOptions} */
+const options = {
+	entryPoints,
+	minify: process.env.NODE_ENV === 'production',
+	outdir: "./built",
+	target: "es2022",
+	platform: "browser",
+	format: "esm",
+	sourcemap: 'linked',
+};
+
+// built配下をすべて削除する
+fs.rmSync('./built', { recursive: true, force: true });
+
+if (process.argv.map(arg => arg.toLowerCase()).includes("--watch")) {
+	await watchSrc();
+} else {
+	await buildSrc();
+}
+
+async function buildSrc() {
+	console.log(`[${_package.name}] start building...`);
+
+	await build(options)
+		.then(it => {
+			console.log(`[${_package.name}] build succeeded.`);
+		})
+		.catch((err) => {
+			process.stderr.write(err.stderr);
+			process.exit(1);
+		});
+
+	if (process.env.NODE_ENV === 'production') {
+		console.log(`[${_package.name}] skip building d.ts because NODE_ENV is production.`);
+	} else {
+		await buildDts();
+	}
+
+	console.log(`[${_package.name}] finish building.`);
+}
+
+function buildDts() {
+	return execa(
+		'tsc',
+		[
+			'--project', 'tsconfig.json',
+			'--outDir', 'built',
+			'--declaration', 'true',
+			'--emitDeclarationOnly', 'true',
+		],
+		{
+			stdout: process.stdout,
+			stderr: process.stderr,
+		}
+	);
+}
+
+async function watchSrc() {
+	const plugins = [{
+		name: 'gen-dts',
+		setup(build) {
+			build.onStart(() => {
+				console.log(`[${_package.name}] detect changed...`);
+			});
+			build.onEnd(async result => {
+				if (result.errors.length > 0) {
+					console.error(`[${_package.name}] watch build failed:`, result);
+					return;
+				}
+				await buildDts();
+			});
+		},
+	}];
+
+	console.log(`[${_package.name}] start watching...`)
+
+	const context = await esbuild.context({ ...options, plugins });
+	await context.watch();
+
+	await new Promise((resolve, reject) => {
+		process.on('SIGHUP', resolve);
+		process.on('SIGINT', resolve);
+		process.on('SIGTERM', resolve);
+		process.on('SIGKILL', resolve);
+		process.on('uncaughtException', reject);
+		process.on('exit', resolve);
+	}).finally(async () => {
+		await context.dispose();
+		console.log(`[${_package.name}] finish watching.`);
+	});
+}