TypeScript
102 |?
106 |Examples
117 |Options
176 |Run
186 |About
209 |245 | TS changelog 251 |
252 |253 | TS docs 259 |
260 |293 | 294 | Compiler options reference 295 | 296 |
297 | `; 298 | 299 | node.innerHTML = html; 300 | }, 301 | 302 | console() { 303 | if (!window.ts) { 304 | return; 305 | } 306 | 307 | console.log(`Using TypeScript ${window.ts.version}`); 308 | 309 | console.log("Available globals:"); 310 | console.log("\twindow.ts", window.ts); 311 | console.log("\twindow.client", window.client); 312 | }, 313 | 314 | selectVersion(version) { 315 | if (version === window.CONFIG.getLatestVersion()) { 316 | location.href = `${window.CONFIG.baseUrl}${location.hash}`; 317 | return false; 318 | } 319 | 320 | location.href = `${window.CONFIG.baseUrl}?ts=${version}${location.hash}`; 321 | return false; 322 | }, 323 | 324 | selectExample: async function(exampleName) { 325 | try { 326 | const res = await fetch( 327 | `${window.CONFIG.baseUrl}examples/${exampleName}.ts`, 328 | ); 329 | const code = await res.text(); 330 | UI.shouldUpdateHash = false; 331 | State.inputModel.setValue(code.trim()); 332 | location.hash = `example/${exampleName}`; 333 | UI.shouldUpdateHash = true; 334 | } catch (e) { 335 | console.log(e); 336 | } 337 | }, 338 | 339 | setCodeFromHash: async function() { 340 | if (location.hash.startsWith("#example")) { 341 | const exampleName = location.hash.replace("#example/", "").trim(); 342 | UI.selectExample(exampleName); 343 | } 344 | }, 345 | 346 | refreshOutput() { 347 | UI.shouldUpdateHash = false; 348 | State.inputModel.setValue(State.inputModel.getValue()); 349 | UI.shouldUpdateHash = true; 350 | }, 351 | 352 | updateURL() { 353 | const diff = Object.entries(defaultCompilerOptions).reduce( 354 | (acc, [key, value]) => { 355 | if (value !== compilerOptions[key]) { 356 | acc[key] = compilerOptions[key]; 357 | } 358 | 359 | return acc; 360 | }, 361 | {}, 362 | ); 363 | 364 | const hash = `code/${LZString.compressToEncodedURIComponent( 365 | State.inputModel.getValue(), 366 | )}`; 367 | 368 | const urlParams = Object.assign({}, diff); 369 | 370 | ["lib", "ts"].forEach(param => { 371 | if (params.has(param)) { 372 | urlParams[param] = params.get(param); 373 | } 374 | }); 375 | 376 | if (Object.keys(urlParams).length > 0) { 377 | const queryString = Object.entries(urlParams) 378 | .map(([key, value]) => { 379 | return `${key}=${encodeURIComponent(value)}`; 380 | }) 381 | .join("&"); 382 | 383 | window.history.replaceState( 384 | {}, 385 | "", 386 | `${window.CONFIG.baseUrl}?${queryString}#${hash}`, 387 | ); 388 | } else { 389 | window.history.replaceState({}, "", `${window.CONFIG.baseUrl}#${hash}`); 390 | } 391 | }, 392 | 393 | updateCompileOptions(name, value) { 394 | console.log(`${name} = ${value}`); 395 | 396 | Object.assign(compilerOptions, { 397 | [name]: value, 398 | }); 399 | 400 | console.log("Updaring compiler options to", compilerOptions); 401 | monaco.languages.typescript.typescriptDefaults.setCompilerOptions( 402 | compilerOptions, 403 | ); 404 | 405 | let inputCode = inputEditor.getValue(); 406 | State.inputModel.dispose(); 407 | State.inputModel = monaco.editor.createModel( 408 | inputCode, 409 | "typescript", 410 | createFile(compilerOptions) 411 | ); 412 | inputEditor.setModel(State.inputModel); 413 | 414 | UI.refreshOutput(); 415 | 416 | UI.renderSettings(); 417 | 418 | UI.updateURL(); 419 | }, 420 | 421 | getInitialCode() { 422 | if (location.hash.startsWith("#code")) { 423 | const code = location.hash.replace("#code/", "").trim(); 424 | return LZString.decompressFromEncodedURIComponent(code); 425 | } 426 | 427 | return ` 428 | const message: string = 'hello world'; 429 | console.log(message); 430 | `.trim(); 431 | }, 432 | }; 433 | 434 | window.MonacoEnvironment = { 435 | getWorkerUrl: function(workerId, label) { 436 | return `worker.js?version=${window.CONFIG.getMonacoVersion()}`; 437 | }, 438 | }; 439 | 440 | for (const path of window.CONFIG.extraLibs) { 441 | await LibManager.addLib(path); 442 | } 443 | 444 | monaco.languages.typescript.typescriptDefaults.setCompilerOptions( 445 | compilerOptions, 446 | ); 447 | 448 | State.inputModel = monaco.editor.createModel( 449 | UI.getInitialCode(), 450 | "typescript", 451 | createFile(compilerOptions) 452 | ); 453 | 454 | State.outputModel = monaco.editor.createModel( 455 | "", 456 | "javascript", 457 | monaco.Uri.file("output.js"), 458 | ); 459 | 460 | inputEditor = monaco.editor.create( 461 | document.getElementById("input"), 462 | Object.assign({ model: State.inputModel }, sharedEditorOptions), 463 | ); 464 | 465 | outputEditor = monaco.editor.create( 466 | document.getElementById("output"), 467 | Object.assign({ model: State.outputModel }, sharedEditorOptions), 468 | ); 469 | 470 | function updateOutput() { 471 | monaco.languages.typescript.getTypeScriptWorker().then(worker => { 472 | worker(State.inputModel.uri).then((client, a) => { 473 | if (typeof window.client === "undefined") { 474 | UI.renderVersion(); 475 | 476 | // expose global 477 | window.client = client; 478 | UI.console(); 479 | } 480 | 481 | client.getEmitOutput(State.inputModel.uri.toString()).then(result => { 482 | State.outputModel.setValue(result.outputFiles[0].text); 483 | }); 484 | }); 485 | }); 486 | 487 | if (UI.shouldUpdateHash) { 488 | UI.updateURL(); 489 | } 490 | } 491 | 492 | UI.setCodeFromHash(); 493 | 494 | UI.renderSettings(); 495 | UI.fetchTooltips().then(() => { 496 | UI.renderSettings(); 497 | }); 498 | 499 | updateOutput(); 500 | inputEditor.onDidChangeModelContent(() => { 501 | updateOutput(); 502 | }); 503 | UI.shouldUpdateHash = true; 504 | 505 | UI.renderAvailableVersions(); 506 | 507 | /* Run */ 508 | 509 | function runJavaScript() { 510 | console.clear(); 511 | // to hide the stack trace 512 | setTimeout(() => { 513 | eval(State.outputModel.getValue()); 514 | }, 0); 515 | } 516 | 517 | inputEditor.addCommand( 518 | monaco.KeyMod.CtrlCmd | monaco.KeyCode.Enter, 519 | runJavaScript, 520 | ); 521 | 522 | outputEditor.addCommand( 523 | monaco.KeyMod.CtrlCmd | monaco.KeyCode.Enter, 524 | runJavaScript, 525 | ); 526 | 527 | inputEditor.addCommand( 528 | monaco.KeyMod.Alt | monaco.KeyMod.Shift | monaco.KeyCode.KEY_F, 529 | prettier, 530 | ); 531 | 532 | // if the focus is outside the editor 533 | window.addEventListener( 534 | "keydown", 535 | event => { 536 | const S_KEY = 83; 537 | if (event.keyCode == S_KEY && (event.metaKey || event.ctrlKey)) { 538 | event.preventDefault(); 539 | 540 | window.clipboard.writeText(location.href.toString()).then( 541 | () => UI.showFlashMessage("URL is copied to the clipboard!"), 542 | e => { 543 | alert(e); 544 | }, 545 | ); 546 | } 547 | 548 | if ( 549 | event.keyCode === 13 && 550 | (event.metaKey || event.ctrlKey) && 551 | event.target instanceof Node && 552 | event.target === document.body 553 | ) { 554 | event.preventDefault(); 555 | runJavaScript(); 556 | } 557 | }, 558 | false, 559 | ); 560 | 561 | function prettier() { 562 | const PRETTIER_VERSION = "1.14.3"; 563 | 564 | require([ 565 | `https://unpkg.com/prettier@${PRETTIER_VERSION}/standalone.js`, 566 | `https://unpkg.com/prettier@${PRETTIER_VERSION}/parser-typescript.js`, 567 | ], function(prettier, { parsers }) { 568 | const cursorOffset = State.inputModel.getOffsetAt( 569 | inputEditor.getPosition(), 570 | ); 571 | 572 | const formatResult = prettier.formatWithCursor( 573 | State.inputModel.getValue(), 574 | { 575 | parser: parsers.typescript.parse, 576 | cursorOffset, 577 | }, 578 | ); 579 | 580 | State.inputModel.setValue(formatResult.formatted); 581 | const newPosition = State.inputModel.getPositionAt( 582 | formatResult.cursorOffset, 583 | ); 584 | inputEditor.setPosition(newPosition); 585 | }); 586 | } 587 | } 588 | -------------------------------------------------------------------------------- /public/schema/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/agentcooper/typescript-play/a42d10e8d9f7d48deb0c68b3dc8c96f46dce374c/public/schema/.gitkeep -------------------------------------------------------------------------------- /public/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | padding: 0; 4 | width: 100vw; 5 | height: 100vh; 6 | overflow: hidden; 7 | font: normal 16px/1.4em -apple-system, system-ui, BlinkMacSystemFont, 8 | "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", 9 | "Helvetica Neue", Arial, sans-serif; 10 | text-rendering: optimizeLegibility; 11 | } 12 | 13 | header { 14 | display: flex; 15 | background-color: #294e80; 16 | color: white; 17 | } 18 | 19 | header a { 20 | color: white; 21 | text-decoration: none; 22 | border-bottom: 1px solid; 23 | } 24 | 25 | #app { 26 | display: flex; 27 | flex-direction: column; 28 | margin: 0; 29 | padding: 0; 30 | width: 100vw; 31 | height: 100vh; 32 | overflow: hidden; 33 | } 34 | 35 | #playground { 36 | display: flex; 37 | flex: 1; 38 | } 39 | 40 | #input { 41 | flex: 1; 42 | } 43 | 44 | #output { 45 | flex: 1; 46 | } 47 | 48 | #version { 49 | transition: opacity 0.3s; 50 | margin-left: 0.3em; 51 | width: 3em; 52 | } 53 | 54 | .popup { 55 | display: none; 56 | position: absolute; 57 | left: -1em; 58 | padding: 0 1em 1em; 59 | 60 | z-index: 100; 61 | background-color: #294e80; 62 | color: white; 63 | font-size: 80%; 64 | } 65 | 66 | .popup ul { 67 | padding: 0; 68 | margin: 0; 69 | list-style: none; 70 | } 71 | 72 | .popup li { 73 | padding: 0.5em 0; 74 | } 75 | 76 | .button { 77 | cursor: pointer; 78 | } 79 | .button:hover { 80 | color: #ffa700; 81 | } 82 | 83 | .popup-on-hover { 84 | position: relative; 85 | } 86 | 87 | .popup-on-hover:hover .popup { 88 | display: inline-block; 89 | } 90 | 91 | .popup-on-hover:hover .popup-header { 92 | color: #ffa700; 93 | cursor: pointer; 94 | } 95 | 96 | .pointer { 97 | cursor: pointer; 98 | } 99 | 100 | .header-item { 101 | margin-left: 1em; 102 | } 103 | 104 | .header-item--extra-padding { 105 | margin-left: 0; 106 | padding-right: 1em; 107 | } 108 | 109 | .compact-list li { 110 | padding-top: 0.2em; 111 | padding-bottom: 0.2em; 112 | } 113 | 114 | .spinner { 115 | width: 0.5rem; 116 | height: 0.5rem; 117 | border: 0.25rem solid white; 118 | border-bottom: 0.25rem solid rgba(0, 0, 0, 0); 119 | border-radius: 50%; 120 | animation: spin 0.7s linear infinite; 121 | 122 | opacity: 1; 123 | transition: 0.3s opacity; 124 | } 125 | 126 | .spinner--hidden { 127 | opacity: 0; 128 | } 129 | 130 | @keyframes spin { 131 | to { 132 | transform: rotate(360deg); 133 | } 134 | } 135 | 136 | .select-label { 137 | display: inline-block; 138 | width: 3em; 139 | } 140 | 141 | .select select { 142 | display: inline-block; 143 | width: 7em; 144 | margin-left: 1em; 145 | } 146 | 147 | .flash { 148 | top: 0; 149 | left: 0; 150 | right: 0; 151 | bottom: 0; 152 | position: fixed; 153 | z-index: 42; 154 | display: flex; 155 | justify-content: center; 156 | align-items: center; 157 | pointer-events: none; 158 | } 159 | 160 | .flash__message { 161 | border-radius: 1.5em; 162 | padding: 1em 2em; 163 | background-color: black; 164 | color: white; 165 | opacity: 0.7; 166 | transition: opacity 0.1s ease-in-out; 167 | 168 | /* help Safari with blurred text */ 169 | transform: translateZ(0); 170 | } 171 | 172 | .flash--hidden .flash__message { 173 | opacity: 0; 174 | transition: opacity 0.3s ease-in-out; 175 | } 176 | 177 | #settings-popup { 178 | overflow-y: auto; 179 | max-height: calc( 100vh - 5rem ); 180 | } 181 | -------------------------------------------------------------------------------- /public/worker.js: -------------------------------------------------------------------------------- 1 | const params = new URLSearchParams(location.search); 2 | 3 | const version = params.get("version"); 4 | 5 | if (!version) { 6 | throw new Error(`Pass ?version= to worker.js.`); 7 | } 8 | 9 | self.MonacoEnvironment = { 10 | baseUrl: `https://unpkg.com/monaco-editor@${version}/min`, 11 | }; 12 | importScripts( 13 | `https://unpkg.com/monaco-editor@${version}/min/vs/base/worker/workerMain.js`, 14 | ); 15 | -------------------------------------------------------------------------------- /scripts/get-typescript.sh: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env bash 2 | 3 | VERSION="$1" 4 | MONACO_VERSION="${2:-latest}" 5 | rm -rf monaco-typescript 6 | 7 | set -o nounset 8 | set -o errexit 9 | 10 | git clone https://github.com/Microsoft/monaco-typescript 11 | 12 | pushd monaco-typescript 13 | 14 | if [ ! -z "$VERSION" ]; then 15 | # https://github.com/Microsoft/monaco-typescript#updating-typescript 16 | npm install typescript@$VERSION --save-dev 17 | # Continued below after applying patches 18 | fi 19 | 20 | npm install 21 | INSTALLED_VERSION=`node -p "require('typescript').version"` 22 | 23 | if [ ! -z "$VERSION" ]; then 24 | # Patches 25 | if [ $INSTALLED_VERSION = "2.9.1" ]; then 26 | git apply ../patch/2.9.1.patch 27 | fi 28 | if [ $INSTALLED_VERSION = "3.2.1" ]; then 29 | git apply ../patch/3.2.1.patch 30 | fi 31 | if [ $INSTALLED_VERSION = "3.5.1" ]; then 32 | git apply ../patch/3.5.1.patch 33 | fi 34 | 35 | npm run import-typescript 36 | npm run prepublishOnly 37 | fi 38 | 39 | popd 40 | 41 | mkdir -vp ./public/monaco-typescript/${INSTALLED_VERSION} 42 | cp -vr ./monaco-typescript/release/min/ ./public/monaco-typescript/${INSTALLED_VERSION} 43 | 44 | echo "window.localTSVersion = { '$INSTALLED_VERSION': { monaco: '$MONACO_VERSION', lib: '/monaco-typescript/$INSTALLED_VERSION' } }" > public/env.js 45 | 46 | echo 47 | echo "Added typescript version '$INSTALLED_VERSION' with monaco version '$MONACO_VERSION'. Make sure they are compatible!" 48 | echo "(You can customize them via arguments to this script.)" 49 | --------------------------------------------------------------------------------