chore(vscode): use unjs/unbuild for bundling

.gitignore

@@ -6,6 +6,7 @@ node_modules
 .vscode-test-web
 extensions/*/meta.json
 extensions/*/stats.html
+extensions/*/sonda-report.html
 extensions/vscode/src/generated-meta.ts
 
 packages/*/*.d.ts

.vscode/launch.json

@@ -15,10 +15,6 @@
 			"outFiles": [
 				"${workspaceRoot}/**/*.js"
 			],
-			"preLaunchTask": {
-				"type": "npm",
-				"script": "watch"
-			}
 		},
 		{
 			"name": "Launch Web Client",
@@ -33,10 +29,6 @@
 			"outFiles": [
 				"${workspaceRoot}/**/*.js"
 			],
-			"preLaunchTask": {
-				"type": "npm",
-				"script": "watch"
-			}
 		},
 		{
 			"name": "Attach to Language Server",

.vscode/tasks.json

@@ -12,22 +12,6 @@
 			"problemMatcher": [
 				"$tsc"
 			]
-		},
-		{
-			"type": "npm",
-			"script": "watch",
-			"isBackground": true,
-			"group": {
-				"kind": "build",
-				"isDefault": true
-			},
-			"presentation": {
-				"panel": "dedicated",
-				"reveal": "never"
-			},
-			"problemMatcher": [
-				"$tsc-watch"
-			]
 		}
 	]
 }

extensions/vscode/.vscodeignore

@@ -1,7 +1,12 @@
 out
-scripts
 src
 tests
 tsconfig.*
+build.config.ts
+vscode.js
 meta.json
 stats.html
+sonda-report.html
+dist/**/*.mjs
+dist/**/*.d.ts
+dist/**/*.map

extensions/vscode/build.config.ts

@@ -0,0 +1,120 @@
+import { defineBuildConfig } from "unbuild";
+import { fileURLToPath } from "url";
+import { join } from "path";
+import { readFileSync, writeFileSync } from "fs";
+import { SondaRollupPlugin } from "sonda";
+
+const __dirname = fileURLToPath(new URL(".", import.meta.url));
+const languageServiceDataRE = /\/language-service\/data\/.*\.json$/;
+
+export default defineBuildConfig([
+	{
+		entries: [
+			{
+				builder: "rollup",
+				input: "src/nodeClientMain.ts",
+				name: "client",
+			},
+			{
+				builder: "rollup",
+				input: "./node_modules/@vue/language-server/bin/vue-language-server.js",
+				name: "server",
+			},
+			{
+				builder: "copy",
+				input: "./node_modules/@vue/language-core/schemas",
+				outDir: "./dist/schemas",
+			},
+		],
+
+		failOnWarn: false,
+
+		alias: {
+			// https://github.com/microsoft/vscode-emmet-helper/issues/79
+			"@vscode/emmet-helper": "@vscode/emmet-helper/lib/cjs/emmetHelper.js",
+		},
+
+		rollup: {
+			emitCJS: true,
+			esbuild: {
+				target: "ES2021",
+			},
+			commonjs: {
+				transformMixedEsModules: true,
+				exclude: [/\.json$/],
+			},
+			json: {
+				compact: true,
+				preferConst: true,
+				exclude: languageServiceDataRE,
+			},
+			inlineDependencies: true,
+		},
+
+		outDir: "dist",
+
+		externals: ["vscode"],
+
+		stubOptions: {
+			jiti: {
+				alias: {
+					vscode: join(__dirname, "vscode.js"),
+				},
+				sourceMaps: true,
+			},
+		},
+
+		hooks: {
+			"rollup:options"(_ctx, options) {
+				options.plugins = [
+					// Load language-service data as `JSON.parse(serialized)`
+					// See https://v8.dev/blog/cost-of-javascript-2019#:~:text=A%20good%20rule%20of%20thumb%20is%20to%20apply%20this%20technique%20for%20objects%20of%2010%20kB%20or%20larger
+					{
+						name: 'language-service-data',
+						transform: {
+							order: "pre",
+							handler(code: string, id: string) {
+								if (languageServiceDataRE.test(id.replaceAll('\\', '/'))) {
+									const serialized = JSON.stringify(JSON.parse(code)).replaceAll('\\', '\\\\').replaceAll('`', '\\`');
+									return {
+										code: `export default JSON.parse(\`${serialized}\`)`,
+										map: { mappings: '' },
+									};
+								}
+							}
+						}
+					},
+
+					SondaRollupPlugin(),
+
+					...options.plugins,
+				];
+
+				// Only emit CJS
+				if (!Array.isArray(options.output)) throw "Unreachable";
+				options.output = options.output.filter((option) => option.format === "cjs");
+				if (options.output.length !== 1) throw "Unreachable";
+				options.output[0].sourcemap = true;
+			},
+
+			"build:done"(ctx) {
+				if (ctx.options.stub) {
+					// Patch the stub file
+					const stubFilePath = join(__dirname, "dist/client.cjs");
+					const originalStub = readFileSync(stubFilePath, "utf-8");
+					const newStub = [
+						`globalThis.__VOLAR_DEV_VSCODE__ = require('vscode');`,
+						`globalThis.__VOLAR_DEV_FS__ = require('node:fs');`,
+						originalStub,
+					].join("\n");
+					writeFileSync(stubFilePath, newStub);
+				}
+			},
+		},
+
+		replace: {
+			"globalThis.__VOLAR_DEV_FS__": "undefined",
+			"process.env.NODE_ENV": "'production'",
+		},
+	},
+]);

extensions/vscode/package.json

@@ -26,7 +26,7 @@
 		"onLanguage:markdown",
 		"onLanguage:html"
 	],
-	"main": "./client.js",
+	"main": "./dist/client.cjs",
 	"browser": "./web.js",
 	"capabilities": {
 		"virtualWorkspaces": {
@@ -543,10 +543,10 @@
 		]
 	},
 	"scripts": {
-		"prebuild": "pnpm run postinstall && pnpm -C ../.. run build",
-		"build": "node scripts/build",
-		"build:minify": "pnpm run build -- --minify",
-		"watch": "pnpm run build -- --watch",
+		"__prebuild": "pnpm run postinstall && pnpm -C ../.. run build",
+		"build": "unbuild",
+		"build:minify": "pnpm run build --minify",
+		"dev": "unbuild --stub",
 		"pack": "pnpm run build:minify && vsce package",
 		"pack:next": "pnpm run build && vsce package",
 		"release": "pnpm run build:minify && vsce publish",
@@ -555,6 +555,7 @@
 		"postinstall": "vscode-ext-gen --scope vue"
 	},
 	"devDependencies": {
+		"@types/node": "latest",
 		"@types/semver": "^7.5.3",
 		"@types/vscode": "^1.82.0",
 		"@volar/vscode": "~2.4.9",
@@ -566,6 +567,8 @@
 		"esbuild-visualizer": "latest",
 		"reactive-vscode": "0.2.7-beta.1",
 		"semver": "^7.5.4",
+		"sonda": "^0.4.1",
+		"unbuild": "^3.0.0-rc.11",
 		"vscode-ext-gen": "^0.5.0",
 		"vscode-tmlanguage-snapshot": "latest"
 	}

extensions/vscode/src/nodeClientMain.ts

@@ -2,6 +2,7 @@ import { createLabsInfo } from '@volar/vscode';
 import * as lsp from '@volar/vscode/node';
 import * as protocol from '@vue/language-server/protocol';
 import * as fs from 'node:fs';
+import * as path from 'node:path';
 import { defineExtension, executeCommand, extensionContext, onDeactivate } from 'reactive-vscode';
 import * as vscode from 'vscode';
 import { config } from './config';
@@ -51,7 +52,7 @@ export const { activate, deactivate } = defineExtension(async () => {
 				}
 			}
 
-			let serverModule = vscode.Uri.joinPath(context.extensionUri, 'server.js');
+			let serverModule = vscode.Uri.joinPath(context.extensionUri, 'dist/server.cjs');
 
 			const runOptions: lsp.ForkOptions = {};
 			if (config.server.maxOldSpaceSize) {
@@ -137,12 +138,10 @@ try {
 		'vscode.typescript-language-features'
 	)!;
 	const readFileSync = fs.readFileSync;
-	const extensionJsPath = require.resolve('./dist/extension.js', {
-		paths: [tsExtension.extensionPath],
-	});
+	const extensionJsPath = path.join(tsExtension.extensionPath, './dist/extension.js');
 
 	// @ts-expect-error
-	fs.readFileSync = (...args) => {
+	(globalThis.__VOLAR_DEV_FS__ || require('fs')).readFileSync = (...args) => {
 		if (args[0] === extensionJsPath) {
 			// @ts-expect-error
 			let text = readFileSync(...args) as string;

extensions/vscode/vscode.js

@@ -0,0 +1,4 @@
+// Somehow we cannot require('vscode') inside jiti.
+// So in DEV mode, we have to store the vscode object to `globalThis.__VOLAR_DEV_VSCODE__`,
+// and export the object there for other modules to use, without breaking any existing code
+module.exports = globalThis.__VOLAR_DEV_VSCODE__

package.json

@@ -3,9 +3,9 @@
 	"packageManager": "[email protected]",
 	"scripts": {
 		"build": "tsc -b",
+		"dev:vue": "pnpm -C ./extensions/vscode dev",
 		"watch": "pnpm run build && pnpm run \"/^watch:.*/\"",
 		"watch:base": "tsc -b -w",
-		"watch:vue": "cd ./extensions/vscode && pnpm run watch",
 		"prerelease": "pnpm run build && pnpm run test",
 		"release": "pnpm run release:base && pnpm run release:vue",
 		"release:base": "lerna publish --exact --force-publish --yes --sync-workspace-lock --no-git-tag-version",