@harmoniclabs/monaco-editor 0.52.0

package/test/manual/samples.js

@@ -0,0 +1,287 @@
+/// <reference path="../../node_modules/monaco-editor-core/monaco.d.ts" />
+
+define(['./generated/all-samples'], function (ALL_SAMPLES) {
+	var XHR_SAMPLES = {};
+	ALL_SAMPLES.forEach(function (sample) {
+		XHR_SAMPLES[sample.name] = sample.content;
+	});
+
+	var samples = [];
+
+	var modesIds = monaco.languages.getLanguages().map(function (language) {
+		return language.id;
+	});
+	modesIds.sort();
+
+	modesIds.forEach(function (modeId) {
+		samples.push({
+			name: 'sample - ' + modeId,
+			mimeType: modeId,
+			loadText: function () {
+				return Promise.resolve(XHR_SAMPLES['sample.' + modeId + '.txt']);
+			}
+		});
+	});
+
+	function addXHRSample(name, modelUrl, mimeType, textModifier) {
+		textModifier =
+			textModifier ||
+			function (text) {
+				return text;
+			};
+		samples.push({
+			name: name,
+			mimeType: mimeType,
+			loadText: function () {
+				return Promise.resolve(XHR_SAMPLES[modelUrl]).then(textModifier);
+			}
+		});
+	}
+
+	function addStringPowerXHRSample(name, modelUrl, mimeType, power) {
+		addXHRSample(name, modelUrl, mimeType, function (text) {
+			var result = text;
+			for (var i = 0; i < power; ++i) {
+				result += '\n' + result;
+			}
+			return result;
+		});
+	}
+
+	function addSample(name, mimeType, modelText) {
+		samples.push({
+			name: name,
+			mimeType: mimeType,
+			loadText: function () {
+				return Promise.resolve(modelText);
+			}
+		});
+	}
+
+	addXHRSample('Y___FailingJS', 'run-editor-failing-js.txt', 'text/javascript');
+	addXHRSample('Y___DefaultJS', 'run-editor-sample-js.txt', 'text/javascript');
+	addStringPowerXHRSample('Y___BigJS', 'run-editor-sample-js.txt', 'text/javascript', 11);
+	addXHRSample('Y___BigJS_msn', 'run-editor-sample-msn-js.txt', 'text/javascript');
+	addXHRSample('Y___BigCSS', 'run-editor-sample-big-css.txt', 'text/css');
+	addStringPowerXHRSample('Y___BigHTML', 'run-editor-sample-html.txt', 'text/html', 10);
+	addXHRSample('Y___Korean', 'run-editor-korean.txt', 'text/plain');
+	addXHRSample('Y___BOM.cs', 'run-editor-sample-bom-cs.txt', 'text/x-csharp');
+	addXHRSample('Z___CR.ps1', 'run-editor-sample-cr-ps1.txt', 'text/x-powershell');
+
+	addXHRSample('Z___jquery-min.js', 'run-editor-jquery-min-js.txt', 'text/javascript');
+
+	addXHRSample(
+		'Z___scrolling-strategy.js',
+		'run-editor-sample-js.txt',
+		'text/plain',
+		function (text) {
+			console.log('here I am');
+			var lines = text.split('\n');
+			var newLines = lines.slice(0);
+
+			var problemIsAt = 80733 + 5;
+			while (newLines.length < problemIsAt) {
+				newLines = newLines.concat(lines);
+			}
+
+			newLines = newLines.slice(0, problemIsAt);
+			return newLines.join('\n');
+		}
+	);
+
+	addSample(
+		'Z___special-chars',
+		'text/plain',
+		[
+			'// single line \u000D comment', // Carriage return
+			'// single line \u2028 comment', // Line separator
+			'// single line \u2029 comment' // Paragraph separator
+		].join('\n')
+	);
+
+	// http://www.cl.cam.ac.uk/~mgk25/ucs/examples/UTF-8-test.txt
+	addSample(
+		'Z___invalid-unicode',
+		'text/plain',
+		[
+			'\uFFFE\uFFFF',
+			'\uD800\uDC00',
+			'\uD800\uDFFF',
+			'\uDB7F\uDC00',
+			'\uDB7F\uDFFF',
+			'\uDB80\uDC00',
+			'\uDB80\uDFFF',
+			'\uDBFF\uDC00',
+			'\uDBFF\uDFFF'
+		].join('\n')
+	);
+
+	addSample(
+		'Z___easy-debug.js',
+		'text/plain',
+		(function () {
+			var myValue = 'Line1';
+			for (var i = 2; i < 50; i++) {
+				myValue += '\nLine' + i;
+			}
+			return myValue;
+		})()
+	);
+
+	addSample(
+		'Z___copy-paste.txt',
+		'text/plain',
+		(function () {
+			var i = 0,
+				sampleCopyPasteLine = '';
+			while (sampleCopyPasteLine.length < 1000) {
+				i++;
+				sampleCopyPasteLine += i;
+			}
+			var sampleCopyPaste = sampleCopyPasteLine;
+			for (i = 1; i <= 600; i++) {
+				sampleCopyPaste += '\n' + sampleCopyPasteLine;
+			}
+			return sampleCopyPaste;
+		})()
+	);
+
+	addSample(
+		'Z___xss',
+		'text/html',
+		(function () {
+			var xssRepresentations = [
+				'<',
+				'BAD\u2028CHARACTER',
+				'%3C',
+				'&lt',
+				'&lt;',
+				'&LT',
+				'&LT;',
+				'&#60',
+				'&#060',
+				'&#0060',
+				'&#00060',
+				'&#000060',
+				'&#0000060',
+				'&#60;',
+				'&#060;',
+				'&#0060;',
+				'&#00060;',
+				'&#000060;',
+				'&#0000060;',
+				'&#x3c',
+				'&#x03c',
+				'&#x003c',
+				'&#x0003c',
+				'&#x00003c',
+				'&#x000003c',
+				'&#x3c;',
+				'&#x03c;',
+				'&#x003c;',
+				'&#x0003c;',
+				'&#x00003c;',
+				'&#x000003c;',
+				'&#X3c',
+				'&#X03c',
+				'&#X003c',
+				'&#X0003c',
+				'&#X00003c',
+				'&#X000003c',
+				'&#X3c;',
+				'&#X03c;',
+				'&#X003c;',
+				'&#X0003c;',
+				'&#X00003c;',
+				'&#X000003c;',
+				'&#x3C',
+				'&#x03C',
+				'&#x003C',
+				'&#x0003C',
+				'&#x00003C',
+				'&#x000003C',
+				'&#x3C;',
+				'&#x03C;',
+				'&#x003C;',
+				'&#x0003C;',
+				'&#x00003C;',
+				'&#x000003C;',
+				'&#X3C',
+				'&#X03C',
+				'&#X003C',
+				'&#X0003C',
+				'&#X00003C',
+				'&#X000003C',
+				'&#X3C;',
+				'&#X03C;',
+				'&#X003C;',
+				'&#X0003C;',
+				'&#X00003C;',
+				'&#X000003C;',
+				'\x3c',
+				'\x3C',
+				'\u003c',
+				'\u003C'
+			];
+			return xssRepresentations.length + ':\n' + xssRepresentations.join('\n');
+		})()
+	);
+
+	addSample(
+		'Z___many-links.js',
+		'text/javascript',
+		(function () {
+			var result = 'bla bla a url: https://microsoft.com some more bla bla';
+			for (var i = 0; i < 13; ++i) {
+				result += '\n' + result;
+			}
+			return '/*' + result + '\n*/';
+		})()
+	);
+
+	addSample(
+		'Z___line-separators.js',
+		'text/javascript',
+		(function () {
+			return [
+				"var x = '1'; // And\u2028 here I have a nice comment.",
+				'',
+				"var y = x + ' +\u2028 2 = res';",
+				'',
+				"y.replace(/re\u2028s/gi, '3');"
+			].join('\n');
+		})()
+	);
+
+	addXHRSample('Z___intellisense.js', 'run-editor-intellisense-js.txt', 'text/javascript');
+
+	addSample(
+		'Z___recursion attack',
+		'text/html',
+		(function () {
+			var arr = [];
+			for (var i = 0; i < 10000; i++) {
+				arr.push('\n<script type="text/html">');
+			}
+			return arr.length + ':\n' + arr.join('');
+		})()
+	);
+
+	addSample('empty', 'text/plain', '');
+
+	addXHRSample('Z___dynamic', 'run-editor-sample-dynamic.txt', {
+		name: 'custom.1.',
+		tokenizer: {
+			root: [
+				[/\[error.*/, 'custom-error'],
+				[/\[notice.*/, 'custom-notice'],
+				[/\[info.*/, 'custom-info'],
+				[/\[[a-zA-Z 0-9:]+\]/, 'custom-date']
+			]
+		}
+	});
+
+	addXHRSample('Z___f12___css', 'run-editor-sample-f12-css.txt', 'text/css');
+
+	return samples;
+});

package/test/manual/shadow-dom.html

@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
+	</head>
+	<body>
+		<h2>Monaco Editor Shadow DOM</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>
+			const container = document.getElementById('container');
+			const shadowRoot = container.attachShadow({
+				mode: 'closed'
+			});
+			loadEditor(function () {
+				const innerContainer = document.createElement('div');
+				shadowRoot.appendChild(innerContainer);
+				innerContainer.style.width = '800px';
+				innerContainer.style.height = '450px';
+
+				// We must move all CSS inside the shadow root, pick only link tags relevant to the editor
+				const documentLinks = Array.prototype.slice
+					.call(document.getElementsByTagName('link'), 0)
+					.filter((documentLink) => {
+						if (/vs\/(base|editor|platform)/.test(documentLink.getAttribute('href'))) {
+							return true;
+						}
+						console.log(`Not moving: `, documentLink);
+						return true;
+					});
+				documentLinks.forEach((documentLink) => shadowRoot.appendChild(documentLink));
+
+				// We must define the font face outside the shadowroot
+				const codiconCSS = `@font-face { font-family: "codicon"; src: url("${getCodiconPath()}") format("truetype"); }`;
+				const style = document.createElement('style');
+				style.type = 'text/css';
+				style.media = 'screen';
+				document.getElementsByTagName('head')[0].appendChild(style);
+				style.innerHTML = codiconCSS;
+
+				monaco.editor.create(innerContainer, {
+					value: ['function hello() {', '\tconsole.log("hello world");', '}', ''].join('\n'),
+					language: 'javascript',
+					ariaContainerElement: innerContainer
+				});
+			});
+		</script>
+	</body>
+</html>

package/test/manual/transform.html

@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
+		<style type="text/css">
+			#editor {
+				position: relative;
+				left: 500px;
+				top: 20px;
+				width: 600px;
+				height: 400px;
+				border: 1px solid #ccc;
+			}
+		</style>
+	</head>
+	<body style="transform: scale(0.75)">
+		<div id="editor"></div>
+
+		<script src="dev-setup.js"></script>
+		<script>
+			loadEditor(function () {
+				monaco.editor.create(document.getElementById('editor'), {
+					value: document.documentElement.innerHTML,
+					language: 'xml'
+				});
+			});
+		</script>
+	</body>
+</html>

package/test/manual/typescript/custom-worker.html

@@ -0,0 +1,210 @@
+<!--
+  To test this file, you need to use a local server. The recommendation is that you run:
+
+    npx serve .
+
+  Then open http://localhost:5000/test/custom-worker
+-->
+
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
+	</head>
+	<body>
+		<h2>Monaco Editor TypeScript test page</h2>
+		<button id="resetBtn">Reset Sample</button>
+		<div id="container" style="width: 800px; height: 600px; border: 1px solid grey"></div>
+		<h3>Custom webworker</h3>
+		<button id="logDTS">Log DTS</button>
+		<button id="getAST">Print AST to console</button>
+
+		<script src="../dev-setup.js"></script>
+
+		<script>
+			function getDefaultCode() {
+				return [
+					'/* Game of Life',
+					' * Implemented in TypeScript',
+					' * To learn more about TypeScript, please visit http://www.typescriptlang.org/',
+					' */',
+					'',
+					'module Conway {',
+					'',
+					'	export class Cell {',
+					'		public row: number;',
+					'		public col: number;',
+					'		public live: boolean;',
+					'',
+					'		constructor(row: number, col: number, live: boolean) {',
+					'			this.row = row;',
+					'			this.col = col;',
+					'			this.live = live',
+					'		}',
+					'	}',
+					'',
+					'	export class GameOfLife {',
+					'		private gridSize: number;',
+					'		private canvasSize: number;',
+					'		private lineColor: string;',
+					'		private liveColor: string;',
+					'		private deadColor: string;',
+					'		private initialLifeProbability: number;',
+					'		private animationRate: number;',
+					'		private cellSize: number;',
+					'		private context: CanvasRenderingContext2D;',
+					'		private world;',
+					'',
+					'',
+					'		constructor() {',
+					'			this.gridSize = 50;',
+					'			this.canvasSize = 600;',
+					"			this.lineColor = '#cdcdcd';",
+					"			this.liveColor = '#666';",
+					"			this.deadColor = '#eee';",
+					'			this.initialLifeProbability = 0.5;',
+					'			this.animationRate = 60;',
+					'			this.cellSize = 0;',
+					'			this.world = this.createWorld();',
+					'			this.circleOfLife();',
+					'		}',
+					'',
+					'		public createWorld() {',
+					'			return this.travelWorld( (cell : Cell) =>  {',
+					'				cell.live = Math.random() < this.initialLifeProbability;',
+					'				return cell;',
+					'			});',
+					'		}',
+					'',
+					'		public circleOfLife() : void {',
+					'			this.world = this.travelWorld( (cell: Cell) => {',
+					'				cell = this.world[cell.row][cell.col];',
+					'				this.draw(cell);',
+					'				return this.resolveNextGeneration(cell);',
+					'			});',
+					'			setTimeout( () => {this.circleOfLife()}, this.animationRate);',
+					'		}',
+					'',
+					'		public resolveNextGeneration(cell : Cell) {',
+					'			var count = this.countNeighbors(cell);',
+					'			var newCell = new Cell(cell.row, cell.col, cell.live);',
+					'			if(count < 2 || count > 3) newCell.live = false;',
+					'			else if(count == 3) newCell.live = true;',
+					'			return newCell;',
+					'		}',
+					'',
+					'		public countNeighbors(cell : Cell) {',
+					'			var neighbors = 0;',
+					'			for(var row = -1; row <=1; row++) {',
+					'				for(var col = -1; col <= 1; col++) {',
+					'					if(row == 0 && col == 0) continue;',
+					'					if(this.isAlive(cell.row + row, cell.col + col)) {',
+					'						neighbors++;',
+					'					}',
+					'				}',
+					'			}',
+					'			return neighbors;',
+					'		}',
+					'',
+					'		public isAlive(row : number, col : number) {',
+					'			if(row < 0 || col < 0 || row >= this.gridSize || col >= this.gridSize) return false;',
+					'			return this.world[row][col].live;',
+					'		}',
+					'',
+					'		public travelWorld(callback) {',
+					'			var result = [];',
+					'			for(var row = 0; row < this.gridSize; row++) {',
+					'				var rowData = [];',
+					'				for(var col = 0; col < this.gridSize; col++) {',
+					'					rowData.push(callback(new Cell(row, col, false)));',
+					'				}',
+					'				result.push(rowData);',
+					'			}',
+					'			return result;',
+					'		}',
+					'',
+					'		public draw(cell : Cell) {',
+					'			if(this.context == null) this.context = this.createDrawingContext();',
+					'			if(this.cellSize == 0) this.cellSize = this.canvasSize/this.gridSize;',
+					'',
+					'			this.context.strokeStyle = this.lineColor;',
+					'			this.context.strokeRect(cell.row * this.cellSize, cell.col*this.cellSize, this.cellSize, this.cellSize);',
+					'			this.context.fillStyle = cell.live ? this.liveColor : this.deadColor;',
+					'			this.context.fillRect(cell.row * this.cellSize, cell.col*this.cellSize, this.cellSize, this.cellSize);',
+					'		}',
+					'',
+					'		public createDrawingContext() {',
+					"			var canvas = <HTMLCanvasElement> document.getElementById('conway-canvas');",
+					'			if(canvas == null) {',
+					"					canvas = document.createElement('canvas');",
+					"					canvas.id = 'conway-canvas';",
+					'					canvas.width = this.canvasSize;',
+					'					canvas.height = this.canvasSize;',
+					'					document.body.appendChild(canvas);',
+					'			}',
+					"			return canvas.getContext('2d');",
+					'		}',
+					'	}',
+					'}',
+					'',
+					'var game = new Conway.GameOfLife();'
+				].join('\n');
+			}
+
+			function getDefaultComplierOpts() {
+				return { target: 99, jsx: 1, allowNonTsExtensions: true };
+			}
+			loadEditor(() => {
+				const dirname = (path) => {
+					const slashIndex = path.lastIndexOf('/');
+					if (slashIndex >= 0) {
+						return path.substring(0, slashIndex);
+					}
+					return path;
+				};
+				const customWorkerPath = `${dirname(location.href)}/custom-worker.js`;
+				monaco.languages.typescript.typescriptDefaults.setWorkerOptions({
+					customWorkerPath: customWorkerPath
+				});
+				monaco.languages.typescript.typescriptDefaults.setCompilerOptions({
+					target: 99,
+					jsx: 1,
+					allowNonTsExtensions: true,
+					declaration: true,
+					noLibCheck: true
+				});
+
+				var editor = monaco.editor.create(document.getElementById('container'), {
+					value: localStorage.getItem('code') || getDefaultCode(),
+					language: 'typescript',
+					lightbulb: { enabled: true }
+				});
+
+				editor.onDidChangeModelContent(() => {
+					const code = editor.getModel().getValue();
+					localStorage.setItem('code', code);
+				});
+
+				document.getElementById('resetBtn').onclick = () => {
+					editor.setValue(getDefaultCode());
+				};
+
+				document.getElementById('logDTS').onclick = async () => {
+					const model = editor.getModel();
+					const worker = await monaco.languages.typescript.getTypeScriptWorker();
+					const thisWorker = await worker(model.uri);
+					const dts = await thisWorker.getDTSEmitForFile(model.uri.toString());
+					console.log(dts);
+				};
+
+				document.getElementById('getAST').onclick = async () => {
+					const model = editor.getModel();
+					const worker = await monaco.languages.typescript.getTypeScriptWorker();
+					const thisWorker = await worker(model.uri);
+					const ast = await thisWorker.printAST(model.uri.toString());
+					console.log(ast);
+				};
+			});
+		</script>
+	</body>
+</html>

package/test/manual/typescript/custom-worker.js

@@ -0,0 +1,59 @@
+// This example uses @typescript/vfs to create a virtual TS program
+// which can do work on a bg thread.
+
+// This version of the vfs edits the global scope (in the case of a webworker, this is 'self')
+importScripts('https://unpkg.com/@typescript/vfs@1.3.0/dist/vfs.globals.js');
+
+/** @type { import("@typescript/vfs") } */
+const tsvfs = globalThis.tsvfs;
+
+/** @type {import("../src/tsWorker").CustomTSWebWorkerFactory }*/
+const worker = (TypeScriptWorker, ts, libFileMap) => {
+	return class MonacoTSWorker extends TypeScriptWorker {
+		// Adds a custom function to the webworker
+		async getDTSEmitForFile(fileName) {
+			const result = await this.getEmitOutput(fileName);
+			const firstDTS = result.outputFiles.find((o) => o.name.endsWith('.d.ts'));
+			return (firstDTS && firstDTS.text) || '';
+		}
+
+		async printAST(fileName) {
+			console.log('Creating virtual TS project');
+			const compilerOptions = this.getCompilationSettings();
+			const fsMap = new Map();
+			for (const key of Object.keys(libFileMap)) {
+				fsMap.set(key, '/' + libFileMap[key]);
+			}
+
+			const thisCode = await this.getScriptText(fileName);
+			fsMap.set('index.ts', thisCode);
+
+			console.log('Starting up TS program');
+			const system = tsvfs.createSystem(fsMap);
+			const host = tsvfs.createVirtualCompilerHost(system, compilerOptions, ts);
+
+			const program = ts.createProgram({
+				rootNames: [...fsMap.keys()],
+				options: compilerOptions,
+				host: host.compilerHost
+			});
+
+			// Now I can look at the AST for the .ts file too
+			const mainSrcFile = program.getSourceFile('index.ts');
+			let miniAST = 'SourceFile';
+
+			const recurse = (parent, depth) => {
+				if (depth > 5) return;
+				ts.forEachChild(parent, (node) => {
+					const spaces = '  '.repeat(depth + 1);
+					miniAST += `\n${spaces}${ts.SyntaxKind[node.kind]}`;
+					recurse(node, depth + 1);
+				});
+			};
+			recurse(mainSrcFile, 0);
+			return miniAST;
+		}
+	};
+};
+
+self.customTSWorkerFactory = worker;