From 7f4fa50715d5894b14afa475b29cf7d2a72a0ff7 Mon Sep 17 00:00:00 2001
From: Martin Aeschlimann <martinae@microsoft.com>
Date: Mon, 2 Sep 2024 20:44:29 +0200
Subject: [PATCH 1/2] detect ESM with sources

---
 .npmignore              |  2 +-
 src/server/workbench.ts | 13 ++++++++++++-
 2 files changed, 13 insertions(+), 2 deletions(-)

diff --git a/.npmignore b/.npmignore
index 8f30275..349c4ff 100644
--- a/.npmignore
+++ b/.npmignore
@@ -1,7 +1,7 @@
 .vscode
 .npmignore
 .editorconfig
-.eslintrc.js
+.eslint.config.js
 .prettierrc
 .github/
 build/
diff --git a/src/server/workbench.ts b/src/server/workbench.ts
index e33e1f3..b30f105 100644
--- a/src/server/workbench.ts
+++ b/src/server/workbench.ts
@@ -137,8 +137,10 @@ export default function (config: IConfig): Router.Middleware {
 		if (config.build.type === 'sources') {
 			const builtInExtensions = await getScannedBuiltinExtensions(config.build.location);
 			const productOverrides = await getProductOverrides(config.build.location);
+			const esm = config.esm || await isESM(config.build.location);
+			console.log('Using ESM loader:', esm);
 			const devCSSModules = config.esm ? await getDevCssModules(config.build.location) : [];
-			ctx.state.workbench = new Workbench(`${ctx.protocol}://${ctx.host}/static/sources`, true, config.esm, devCSSModules, builtInExtensions, {
+			ctx.state.workbench = new Workbench(`${ctx.protocol}://${ctx.host}/static/sources`, true, esm, devCSSModules, builtInExtensions, {
 				...productOverrides,
 				webEndpointUrlTemplate: `${ctx.protocol}://{{uuid}}.${ctx.host}/static/sources`,
 				webviewContentExternalBaseUrlTemplate: `${ctx.protocol}://{{uuid}}.${ctx.host}/static/sources/out/vs/workbench/contrib/webview/browser/pre/`
@@ -183,3 +185,12 @@ async function getDevCssModules(vsCodeDevLocation: string): Promise<string[]> {
 	const glob = await import('glob')
 	return glob.glob('**/*.css', { cwd: path.join(vsCodeDevLocation, 'out') });
 }
+
+async function isESM(vsCodeDevLocation: string): Promise<boolean> {
+	try {
+		const packageJSON = await fs.readFile(path.join(vsCodeDevLocation, 'out', 'package.json'));
+		return JSON.parse(packageJSON.toString()).type === 'module';
+	} catch (e) {
+		return false;
+	}
+}

From a76e181e2d9a8471545a16e5c39a0613f694b42d Mon Sep 17 00:00:00 2001
From: Martin Aeschlimann <martinae@microsoft.com>
Date: Tue, 3 Sep 2024 11:09:31 +0200
Subject: [PATCH 2/2] only create css modules when needed

---
 src/server/workbench.ts  | 30 ++++++++++++++++++++++++++----
 views/workbench-esm.html | 20 --------------------
 2 files changed, 26 insertions(+), 24 deletions(-)

diff --git a/src/server/workbench.ts b/src/server/workbench.ts
index b30f105..e579d1b 100644
--- a/src/server/workbench.ts
+++ b/src/server/workbench.ts
@@ -44,8 +44,7 @@ class Workbench {
 			WORKBENCH_AUTH_SESSION: '',
 			WORKBENCH_WEB_BASE_URL: this.baseUrl,
 			WORKBENCH_BUILTIN_EXTENSIONS: asJSON(this.builtInExtensions),
-			WORKBENCH_MAIN: this.getMain(),
-			WORKBENCH_DEV_CSS_MODULES: JSON.stringify(this.devCSSModules)
+			WORKBENCH_MAIN: this.getMain()
 		};
 
 		try {
@@ -58,7 +57,30 @@ class Workbench {
 
 	getMain() {
 		if (this.esm) {
-			return `<script type="module" src="${this.baseUrl}/out/vs/code/browser/workbench/workbench.js"></script>`;
+			const lines = this.devCSSModules.length > 0 ? [
+				"<script>",
+				`globalThis._VSCODE_CSS_MODULES = ${JSON.stringify(this.devCSSModules)};`,
+				"</script>",
+				"<script>",
+				"const sheet = document.getElementById('vscode-css-modules').sheet;",
+				"globalThis._VSCODE_CSS_LOAD = function (url) { sheet.insertRule(`@import url(${url});`); };",
+				"",
+				"const importMap = { imports: {} };",
+				"for (const cssModule of globalThis._VSCODE_CSS_MODULES) {",
+				"  const cssUrl = new URL(cssModule, globalThis._VSCODE_FILE_ROOT).href;",
+				"  const jsSrc = `globalThis._VSCODE_CSS_LOAD('${cssUrl}');\\n`;",
+				"  const blob = new Blob([jsSrc], { type: 'application/javascript' });",
+				"  importMap.imports[cssUrl] = URL.createObjectURL(blob);",
+				"}",
+				"const importMapElement = document.createElement('script');",
+				"importMapElement.type = 'importmap';",
+				"importMapElement.setAttribute('nonce', '1nline-m4p');",
+				"importMapElement.textContent = JSON.stringify(importMap, undefined, 2);",
+				"document.head.appendChild(importMapElement);",
+				"</script>"
+			] : [];
+			lines.push(`<script type="module" src="${this.baseUrl}/out/vs/code/browser/workbench/workbench.js"></script>`);
+			return lines.join('\n');
 		}
 		if (this.dev) {
 			return `<script> require(['vs/code/browser/workbench/workbench'], function() {}); </script>`;
@@ -139,7 +161,7 @@ export default function (config: IConfig): Router.Middleware {
 			const productOverrides = await getProductOverrides(config.build.location);
 			const esm = config.esm || await isESM(config.build.location);
 			console.log('Using ESM loader:', esm);
-			const devCSSModules = config.esm ? await getDevCssModules(config.build.location) : [];
+			const devCSSModules = esm ? await getDevCssModules(config.build.location) : [];
 			ctx.state.workbench = new Workbench(`${ctx.protocol}://${ctx.host}/static/sources`, true, esm, devCSSModules, builtInExtensions, {
 				...productOverrides,
 				webEndpointUrlTemplate: `${ctx.protocol}://{{uuid}}.${ctx.host}/static/sources`,
diff --git a/views/workbench-esm.html b/views/workbench-esm.html
index 5dc0c7a..83040e6 100644
--- a/views/workbench-esm.html
+++ b/views/workbench-esm.html
@@ -41,26 +41,6 @@
 		const baseUrl = new URL('{{WORKBENCH_WEB_BASE_URL}}', window.location.origin).toString();
 		globalThis._VSCODE_FILE_ROOT = baseUrl + '/out/';
 	</script>
-	<script>
-		const sheet = document.getElementById('vscode-css-modules').sheet;
-		globalThis._VSCODE_CSS_LOAD = function (url) {
-			sheet.insertRule(`@import url(${url});`);
-		};
-
-		const importMap = { imports: {} };
-		const cssModules = JSON.parse('{{WORKBENCH_DEV_CSS_MODULES}}');
-		for (const cssModule of cssModules) {
-			const cssUrl = new URL(cssModule, globalThis._VSCODE_FILE_ROOT).href;
-			const jsSrc = `globalThis._VSCODE_CSS_LOAD('${cssUrl}');\n`;
-			const blob = new Blob([jsSrc], { type: 'application/javascript' });
-			importMap.imports[cssUrl] = URL.createObjectURL(blob);
-		}
-		const importMapElement = document.createElement('script');
-		importMapElement.type = 'importmap';
-		importMapElement.setAttribute('nonce', '1nline-m4p')
-		importMapElement.textContent = JSON.stringify(importMap, undefined, 2);
-		document.head.appendChild(importMapElement);
-	</script>
 	<script>
 		performance.mark('code/willLoadWorkbenchMain');
 	</script>