mirror of
https://github.com/microsoft/monaco-editor.git
synced 2025-12-22 15:05:39 +01:00
Move into monaco-typescript folder
This commit is contained in:
Alex Dima
parent
4fbf3a1cf2
commit
6bb69eca2b
38 changed files with 0 additions and 0 deletions
241
monaco-typescript/test/custom-worker.html
Normal file
241
monaco-typescript/test/custom-worker.html
Normal file
|
|
@ -0,0 +1,241 @@
|
|||
<!--
|
||||
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="X-UA-Compatible" content="IE=edge" />
|
||||
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
|
||||
<link
|
||||
rel="stylesheet"
|
||||
data-name="vs/editor/editor.main"
|
||||
href="../node_modules/monaco-editor-core/dev/vs/editor/editor.main.css"
|
||||
/>
|
||||
</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>
|
||||
const paths = {
|
||||
'vs/basic-languages': '../node_modules/monaco-languages/release/dev',
|
||||
'vs/language/typescript/fillers/monaco-editor-core':
|
||||
'../out/amd/fillers/monaco-editor-core-amd',
|
||||
'vs/language/typescript': '../out/amd',
|
||||
vs: '../node_modules/monaco-editor-core/dev/vs'
|
||||
};
|
||||
if (document.location.protocol === 'http:') {
|
||||
// Add support for running local http server
|
||||
let testIndex = document.location.pathname.indexOf('/test/');
|
||||
if (testIndex !== -1) {
|
||||
let prefix = document.location.pathname.substr(0, testIndex);
|
||||
paths['vs/language/typescript'] = prefix + '/out/amd';
|
||||
}
|
||||
}
|
||||
self.require = {
|
||||
paths: paths
|
||||
};
|
||||
</script>
|
||||
<script src="../node_modules/monaco-editor-core/dev/vs/loader.js"></script>
|
||||
<script src="../node_modules/monaco-editor-core/dev/vs/editor/editor.main.nls.js"></script>
|
||||
<script src="../node_modules/monaco-editor-core/dev/vs/editor/editor.main.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 };
|
||||
}
|
||||
require([
|
||||
'vs/basic-languages/monaco.contribution',
|
||||
'vs/language/typescript/monaco.contribution'
|
||||
], () => {
|
||||
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>
|
||||
59
monaco-typescript/test/custom-worker.js
Normal file
59
monaco-typescript/test/custom-worker.js
Normal file
|
|
@ -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;
|
||||
210
monaco-typescript/test/index.html
Normal file
210
monaco-typescript/test/index.html
Normal file
|
|
@ -0,0 +1,210 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
|
||||
<link
|
||||
rel="stylesheet"
|
||||
data-name="vs/editor/editor.main"
|
||||
href="../node_modules/monaco-editor-core/dev/vs/editor/editor.main.css"
|
||||
/>
|
||||
</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>Compiler settings</h3>
|
||||
<textarea style="font-family: monospace" id="compilerOpts" cols="60" rows="30"></textarea><br />
|
||||
<button id="updateCompilerSettingsBtn">Update compiler settings</button>
|
||||
|
||||
<script>
|
||||
const paths = {
|
||||
'vs/basic-languages': '../node_modules/monaco-languages/release/dev',
|
||||
'vs/language/typescript/fillers/monaco-editor-core':
|
||||
'../out/amd/fillers/monaco-editor-core-amd',
|
||||
'vs/language/typescript': '../out/amd',
|
||||
vs: '../node_modules/monaco-editor-core/dev/vs'
|
||||
};
|
||||
if (document.location.protocol === 'http:') {
|
||||
// Add support for running local http server
|
||||
let testIndex = document.location.pathname.indexOf('/test/');
|
||||
if (testIndex !== -1) {
|
||||
let prefix = document.location.pathname.substr(0, testIndex);
|
||||
paths['vs/language/typescript'] = prefix + '/out/amd';
|
||||
}
|
||||
}
|
||||
self.require = {
|
||||
paths: paths
|
||||
};
|
||||
</script>
|
||||
<script src="../node_modules/monaco-editor-core/dev/vs/loader.js"></script>
|
||||
<script src="../node_modules/monaco-editor-core/dev/vs/editor/editor.main.nls.js"></script>
|
||||
<script src="../node_modules/monaco-editor-core/dev/vs/editor/editor.main.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 };
|
||||
}
|
||||
require([
|
||||
'vs/basic-languages/monaco.contribution',
|
||||
'vs/language/typescript/monaco.contribution'
|
||||
], () => {
|
||||
const 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());
|
||||
};
|
||||
|
||||
const optsString =
|
||||
localStorage.getItem('compiler-opts') ||
|
||||
JSON.stringify(getDefaultComplierOpts(), null, 4);
|
||||
document.getElementById('compilerOpts').textContent = optsString;
|
||||
monaco.languages.typescript.typescriptDefaults.setCompilerOptions(JSON.parse(optsString));
|
||||
|
||||
document.getElementById('updateCompilerSettingsBtn').onclick = () => {
|
||||
const newOpts = document.getElementById('compilerOpts').value;
|
||||
monaco.languages.typescript.typescriptDefaults.setCompilerOptions(JSON.parse(newOpts));
|
||||
localStorage.setItem('compiler-opts', newOpts);
|
||||
};
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
219
monaco-typescript/test/inlayHints.html
Normal file
219
monaco-typescript/test/inlayHints.html
Normal file
|
|
@ -0,0 +1,219 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
|
||||
<link
|
||||
rel="stylesheet"
|
||||
data-name="vs/editor/editor.main"
|
||||
href="../node_modules/monaco-editor-core/dev/vs/editor/editor.main.css"
|
||||
/>
|
||||
</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>Inlay Hints options</h3>
|
||||
<textarea style="font-family: monospace" id="inlayHintsOpts" cols="60" rows="30"></textarea
|
||||
><br />
|
||||
<button id="updateInlayHintsOptionsBtn">Update Inaly Hints options</button>
|
||||
|
||||
<script>
|
||||
const paths = {
|
||||
'vs/basic-languages': '../node_modules/monaco-languages/release/dev',
|
||||
'vs/language/typescript/fillers/monaco-editor-core':
|
||||
'../out/amd/fillers/monaco-editor-core-amd',
|
||||
'vs/language/typescript': '../out/amd',
|
||||
vs: '../node_modules/monaco-editor-core/dev/vs'
|
||||
};
|
||||
if (document.location.protocol === 'http:') {
|
||||
// Add support for running local http server
|
||||
let testIndex = document.location.pathname.indexOf('/test/');
|
||||
if (testIndex !== -1) {
|
||||
let prefix = document.location.pathname.substr(0, testIndex);
|
||||
paths['vs/language/typescript'] = prefix + '/out/amd';
|
||||
}
|
||||
}
|
||||
self.require = {
|
||||
paths: paths
|
||||
};
|
||||
</script>
|
||||
<script src="../node_modules/monaco-editor-core/dev/vs/loader.js"></script>
|
||||
<script src="../node_modules/monaco-editor-core/dev/vs/editor/editor.main.nls.js"></script>
|
||||
<script src="../node_modules/monaco-editor-core/dev/vs/editor/editor.main.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 getDefaultInlayHintsOpts() {
|
||||
return {
|
||||
includeInlayParameterNameHints: 'all',
|
||||
includeInlayParameterNameHintsWhenArgumentMatchesName: true,
|
||||
includeInlayFunctionParameterTypeHints: true,
|
||||
includeInlayVariableTypeHints: true,
|
||||
includeInlayPropertyDeclarationTypeHints: true,
|
||||
includeInlayFunctionLikeReturnTypeHints: true,
|
||||
includeInlayEnumMemberValueHints: true
|
||||
};
|
||||
}
|
||||
require([
|
||||
'vs/basic-languages/monaco.contribution',
|
||||
'vs/language/typescript/monaco.contribution'
|
||||
], () => {
|
||||
const 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());
|
||||
};
|
||||
|
||||
const optsString =
|
||||
localStorage.getItem('inlay-hints-opts') ||
|
||||
JSON.stringify(getDefaultInlayHintsOpts(), null, 4);
|
||||
document.getElementById('inlayHintsOpts').textContent = optsString;
|
||||
monaco.languages.typescript.typescriptDefaults.setInlayHintsOptions(JSON.parse(optsString));
|
||||
|
||||
document.getElementById('updateInlayHintsOptionsBtn').onclick = () => {
|
||||
const newOpts = document.getElementById('inlayHintsOpts').value;
|
||||
monaco.languages.typescript.typescriptDefaults.setInlayHintsOptions(JSON.parse(newOpts));
|
||||
localStorage.setItem('inlay-hints-opts', newOpts);
|
||||
};
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Add table
Add a link
Reference in a new issue