@harmoniclabs/monaco-editor 0.52.0

package/src/language/typescript/workerManager.ts

@@ -0,0 +1,101 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the MIT License. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+
+import { LanguageServiceDefaults } from './monaco.contribution';
+import type { TypeScriptWorker } from './tsWorker';
+import { editor, Uri, IDisposable } from '../../fillers/monaco-editor-core';
+
+export class WorkerManager {
+	private _configChangeListener: IDisposable;
+	private _updateExtraLibsToken: number;
+	private _extraLibsChangeListener: IDisposable;
+
+	private _worker: editor.MonacoWebWorker<TypeScriptWorker> | null;
+	private _client: Promise<TypeScriptWorker> | null;
+
+	constructor(
+		private readonly _modeId: string,
+		private readonly _defaults: LanguageServiceDefaults
+	) {
+		this._worker = null;
+		this._client = null;
+		this._configChangeListener = this._defaults.onDidChange(() => this._stopWorker());
+		this._updateExtraLibsToken = 0;
+		this._extraLibsChangeListener = this._defaults.onDidExtraLibsChange(() =>
+			this._updateExtraLibs()
+		);
+	}
+
+	dispose(): void {
+		this._configChangeListener.dispose();
+		this._extraLibsChangeListener.dispose();
+		this._stopWorker();
+	}
+
+	private _stopWorker(): void {
+		if (this._worker) {
+			this._worker.dispose();
+			this._worker = null;
+		}
+		this._client = null;
+	}
+
+	private async _updateExtraLibs(): Promise<void> {
+		if (!this._worker) {
+			return;
+		}
+		const myToken = ++this._updateExtraLibsToken;
+		const proxy = await this._worker.getProxy();
+		if (this._updateExtraLibsToken !== myToken) {
+			// avoid multiple calls
+			return;
+		}
+		proxy.updateExtraLibs(this._defaults.getExtraLibs());
+	}
+
+	private _getClient(): Promise<TypeScriptWorker> {
+		if (!this._client) {
+			this._client = (async () => {
+				this._worker = editor.createWebWorker<TypeScriptWorker>({
+					// module that exports the create() method and returns a `TypeScriptWorker` instance
+					moduleId: 'vs/language/typescript/tsWorker',
+
+					label: this._modeId,
+
+					keepIdleModels: true,
+
+					// passed in to the create() method
+					createData: {
+						compilerOptions: this._defaults.getCompilerOptions(),
+						extraLibs: this._defaults.getExtraLibs(),
+						customWorkerPath: this._defaults.workerOptions.customWorkerPath,
+						inlayHintsOptions: this._defaults.inlayHintsOptions
+					}
+				});
+
+				if (this._defaults.getEagerModelSync()) {
+					return await this._worker.withSyncedResources(
+						editor
+							.getModels()
+							.filter((model) => model.getLanguageId() === this._modeId)
+							.map((model) => model.uri)
+					);
+				}
+
+				return await this._worker.getProxy();
+			})();
+		}
+
+		return this._client;
+	}
+
+	async getLanguageServiceWorker(...resources: Uri[]): Promise<TypeScriptWorker> {
+		const client = await this._getClient();
+		if (this._worker) {
+			await this._worker.withSyncedResources(resources);
+		}
+		return client;
+	}
+}

package/src/nls-fix.js

@@ -0,0 +1,39 @@
+/* This fix ensures that old nls-plugin configurations are still respected by the new localization solution. */
+/* We should try to avoid this file and find a different solution.  */
+/* Warning: This file still has to work when replacing "\n" with " "! */
+
+/**
+ * @type {typeof define}
+ */
+const globalDefine = globalThis.define;
+globalDefine('vs/nls.messages-loader', [], function (...args) {
+	return {
+		load: (name, req, load, config) => {
+			const requestedLanguage = config['vs/nls']?.availableLanguages?.['*'];
+			if (!requestedLanguage || requestedLanguage === 'en') {
+				load({});
+			} else {
+				req([`vs/nls.messages.${requestedLanguage}`], () => {
+					load({});
+				});
+			}
+		}
+	};
+});
+globalDefine(
+	'vs/nls.messages',
+	['require', 'exports', 'vs/nls.messages-loader!'],
+	function (require, exports) {
+		Object.assign(exports, {
+			getNLSMessages: () => globalThis._VSCODE_NLS_MESSAGES,
+			getNLSLanguage: () => globalThis._VSCODE_NLS_LANGUAGE
+		});
+	}
+);
+define = function (...args) {
+	if (args.length > 0 && args[0] === 'vs/nls.messages') {
+		return;
+	}
+	return globalDefine(...args);
+};
+define.amd = true;

package/src/tsconfig.json

@@ -0,0 +1,14 @@
+{
+	"compilerOptions": {
+		"declaration": true,
+		"lib": ["dom", "es5", "es2015.collection", "es2015.promise", "es2015.iterable"],
+		"module": "amd",
+		"moduleResolution": "node",
+		"outDir": "../out/languages/amd-tsc",
+		"strict": true,
+		"target": "es5",
+		"sourceMap": true,
+		"allowJs": true,
+		"checkJs": false
+	}
+}

package/test/manual/cross-origin.html

@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
+	</head>
+	<body>
+		<h2>Monaco Editor wrong cross origin</h2>
+
+		<div style="clear: both"></div>
+		<div
+			id="container"
+			style="float: left; width: 800px; height: 450px; border: 1px solid grey"
+		></div>
+		<div style="clear: both"></div>
+
+		<script src="dev-setup.js"></script>
+		<script>
+			loadEditor(function () {
+				monaco.editor.create(document.getElementById('container'), {
+					value: document.documentElement.innerHTML,
+					language: 'css'
+				});
+			}, 'http://localhost:8088');
+		</script>
+	</body>
+</html>

package/test/manual/dev-setup.js

@@ -0,0 +1,218 @@
+//@ts-check
+
+(function () {
+	const corePaths = {
+		src: '/vscode/out/vs',
+		'npm/dev': 'node_modules/monaco-editor-core/dev/vs',
+		'npm/min': 'node_modules/monaco-editor-core/min/vs',
+		built: '/vscode/out-monaco-editor-core/min/vs',
+		releaseDev: 'out/monaco-editor/dev/vs',
+		releaseMin: 'out/monaco-editor/min/vs'
+	};
+	const pluginPaths = {
+		src: 'out/amd',
+		dev: 'out/release/dev/vs',
+		min: 'out/release/min/vs'
+	};
+	const parsedQuery = parseQueryString();
+	const editorQueryName = 'editor';
+	const pluginsQueryName = 'plugins';
+	const defaultEditorQueryValue = 'npm/dev';
+	const defaultPluginsQueryValue = 'src';
+	const editorQueryValue = parsedQuery[editorQueryName] || defaultEditorQueryValue;
+	const pluginsQueryValue = parsedQuery[pluginsQueryName] || defaultPluginsQueryValue;
+	const corePath = resolvePath(corePaths[editorQueryValue]);
+	const pluginPath = resolvePath(pluginPaths[pluginsQueryValue]);
+	const isRelease = /release/.test(editorQueryValue);
+
+	(function () {
+		let div = document.createElement('div');
+		div.className = 'dev-setup-control';
+		div.style.position = 'fixed';
+		div.style.top = '0';
+		div.style.right = '0';
+		div.style.background = 'lightgray';
+		div.style.padding = '5px 20px 5px 5px';
+		div.style.zIndex = '1000';
+
+		div.innerHTML = // CodeQL [SM03712] This code is not deployed and serves as local test code. No risk of malicious input.
+			'<ul><li>' + // CodeQL [SM03712] This code is not deployed and serves as local test code. No risk of malicious input.
+			renderLoadingOptions(true) + // CodeQL [SM03712] This code is not deployed and serves as local test code. No risk of malicious input.
+			(isRelease ? '' : `</li><li>${renderLoadingOptions(false)}`) + // CodeQL [SM03712] This code is not deployed and serves as local test code. No risk of malicious input.
+			'</li></ul>'; // CodeQL [SM03712] This code is not deployed and serves as local test code. No risk of malicious input.
+
+		document.body.appendChild(div);
+
+		let aElements = document.getElementsByTagName('a');
+		for (let i = 0; i < aElements.length; i++) {
+			let aElement = aElements[i];
+			if (aElement.className === 'loading-opts') {
+				aElement.href += window.location.search; // CodeQL [SM01507] This code is not deployed and serves as local test code. No risk of malicious input.
+			}
+		}
+	})();
+
+	/** @type {any} */
+	const global = self;
+
+	global.getCodiconPath = () => {
+		return `${corePath}/base/browser/ui/codicons/codicon/codicon.ttf`;
+	};
+
+	/**
+	 *
+	 * @param {()=>void} callback
+	 * @param {string} [PATH_PREFIX]
+	 */
+	global.loadEditor = (callback, PATH_PREFIX) => {
+		PATH_PREFIX = PATH_PREFIX || '';
+
+		loadScript(`${PATH_PREFIX}${corePath}/loader.js`, () => {
+			global.AMD = true;
+
+			/** @type {{[name:string]: string;}} */
+			const loaderPathsConfig = {};
+			if (isRelease) {
+				loaderPathsConfig['vs'] = `${PATH_PREFIX}${corePath}`;
+			} else {
+				loaderPathsConfig[
+					'vs/fillers/monaco-editor-core'
+				] = `${PATH_PREFIX}/monaco-editor/out/amd/fillers/monaco-editor-core-amd`;
+				loaderPathsConfig['vs/language'] = `${PATH_PREFIX}${pluginPath}/language`;
+				loaderPathsConfig['vs/basic-language'] = `${PATH_PREFIX}${pluginPath}/basic-language`;
+				loaderPathsConfig['vs'] = `${PATH_PREFIX}${corePath}`;
+			}
+
+			console.log('LOADER CONFIG: ');
+			console.log(JSON.stringify(loaderPathsConfig, null, '\t'));
+
+			/** @type {any} */
+			const req = require;
+
+			req.config({
+				paths: loaderPathsConfig
+				// 'vs/nls' : {
+				// 	availableLanguages: {
+				// 		'*': 'de'
+				// 	}
+				// }
+			});
+
+			req(['vs/editor/editor.main'], () => {
+				if (isRelease) {
+					callback();
+					return;
+				}
+				// At this point we've loaded the monaco-editor-core
+				req(
+					[
+						'vs/basic-languages/monaco.contribution',
+						'vs/language/css/monaco.contribution',
+						'vs/language/html/monaco.contribution',
+						'vs/language/json/monaco.contribution',
+						'vs/language/typescript/monaco.contribution'
+					],
+					callback
+				);
+			});
+		});
+	};
+
+	function parseQueryString() {
+		const str = window.location.search.replace(/^\?/, '');
+		const pieces = str.split(/&/);
+		/** @type {{[name:string]: string;}} */
+		const result = {};
+		pieces.forEach((piece) => {
+			const config = piece.split(/=/);
+			result[config[0]] = config[1];
+		});
+		return result;
+	}
+
+	/**
+	 * @param {string} path
+	 */
+	function resolvePath(path) {
+		if (/^\//.test(path)) {
+			return path;
+		}
+		return `/monaco-editor/${path}`;
+	}
+
+	/**
+	 * @param {boolean} isEditor
+	 */
+	function renderLoadingOptions(isEditor) {
+		const name = isEditor ? 'editor' : 'plugins';
+		const paths = isEditor ? corePaths : pluginPaths;
+		const selectedPath = isEditor ? editorQueryValue : pluginsQueryValue;
+		return (
+			'<strong style="width:130px;display:inline-block;">' +
+			name +
+			'</strong>:&#160;&#160;&#160;' +
+			Object.keys(paths)
+				.map((path) => {
+					if (path === selectedPath) {
+						return '<strong>' + path + '</strong>';
+					}
+					return '<a href="' + generateUrlForLoadingOption(isEditor, path) + '">' + path + '</a>';
+				})
+				.join('&#160;&#160;&#160;')
+		);
+	}
+
+	/**
+	 * @param {boolean} isEditor
+	 * @param {string} value
+	 */
+	function generateUrlForLoadingOption(isEditor, value) {
+		/** @type {{[name:string]: string;}} */
+		const newQueryOptions = {};
+		const newEditorQueryValue = isEditor ? value : editorQueryValue;
+		const newPluginsQueryValue = isEditor ? pluginsQueryValue : value;
+		if (newEditorQueryValue !== defaultEditorQueryValue) {
+			newQueryOptions[editorQueryName] = newEditorQueryValue;
+		}
+		if (newPluginsQueryValue !== defaultPluginsQueryValue) {
+			newQueryOptions[pluginsQueryName] = newPluginsQueryValue;
+		}
+
+		let search = Object.keys(newQueryOptions)
+			.map((key) => `${key}=${newQueryOptions[key]}`)
+			.join('&amp;');
+
+		if (search.length > 0) {
+			search = '?' + search;
+		}
+		return toHREF(search);
+	}
+
+	/**
+	 * @param {string} search
+	 */
+	function toHREF(search) {
+		let port = window.location.port;
+		if (port.length > 0) {
+			port = ':' + port;
+		}
+		return (
+			window.location.protocol +
+			'//' +
+			window.location.hostname +
+			port +
+			window.location.pathname +
+			search +
+			window.location.hash
+		);
+	}
+
+	function loadScript(path, callback) {
+		const script = document.createElement('script');
+		script.onload = callback;
+		script.async = true;
+		script.type = 'text/javascript';
+		script.src = path;
+		document.head.appendChild(script);
+	}
+})();

package/test/manual/diff.html

@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
+	</head>
+	<body>
+		<div
+			id="container"
+			style="float: left; width: 800px; height: 450px; border: 1px solid grey"
+		></div>
+		<div style="clear: both"></div>
+
+		<script src="dev-setup.js"></script>
+		<script>
+			loadEditor(function () {
+				require(['./diff'], function () {});
+			});
+		</script>
+	</body>
+</html>