Upgrade Playground to TypeScript 4

fabiandev · Nov 10, 2020 · 2a43967 · 2a43967
1 parent 503cb2c
commit 2a43967
Show file tree

Hide file tree

Showing 4 changed files with 37 additions and 20 deletions.
diff --git a/package.json b/package.json
@@ -63,8 +63,8 @@
     "lodash.debounce": "^4.0.8",
     "mocha": "^5.0.0",
     "module-alias": "^2.0.0",
-    "monaco-editor": "^0.10.0",
-    "monaco-typescript": "git+https://git@github.com/Microsoft/monaco-typescript",
+    "monaco-editor": "^0.21.2",
+    "monaco-typescript": "Microsoft/monaco-typescript",
     "normalize.css": "^8.0.0",
     "null-loader": "^0.1.1",
     "nyc": "^13.0.1",

diff --git a/src/playground/index.ts b/src/playground/index.ts
@@ -1,3 +1,4 @@
+import type * as monaco from 'monaco-editor';
 import debounce = require('lodash.debounce');
 import { Options } from '../options';
 import { FileReflection } from '../host';
@@ -7,11 +8,20 @@ import runWindowHtmlPlain = require('./run-plain.html');
 
 let lib = '';
 require.ensure(['monaco-typescript/src/lib/lib'], require => {
-  const libs = require('monaco-typescript/src/lib/lib');
-  lib = libs.lib_es2015_dts + "" + libs.lib_dom_dts;
+  const libs = require('monaco-typescript/src/lib/lib').libFileMap;
+
+  const keys = Object.keys(libs).filter(key => {
+    return key.startsWith('lib.es2015') || key.startsWith('lib.es5') || key.startsWith('lib.dom');
+  });
+
+  for (const key of keys) {
+    lib += libs[key];
+  }
+
   bootstrap();
 }, error => {
   console.error('Could not not load lib declarations:', error);
+  window.alert('Could not not load lib declarations. Please try to refresh the page.');
 }, 'tslibs');
 
 interface PlaygroundOptions {
@@ -75,8 +85,8 @@ function setDefaultOptions(): void {
       experimentalDecorators: true,
       emitDecoratorMetadata: false,
       allowNonTsExtensions: true,
-      module: monaco.languages.typescript.ModuleKind.ES2015,
-      target: monaco.languages.typescript.ScriptTarget.ES2015
+      module: window.monaco.languages.typescript.ModuleKind.ES2015,
+      target: window.monaco.languages.typescript.ScriptTarget.ES2015
     },
     windowOptions: {
       console: true
@@ -123,7 +133,7 @@ function init(): void {
 
   updateCompilerOptions();
 
-  tsEditor = monaco.editor.create(_editorTs, {
+  tsEditor = window.monaco.editor.create(_editorTs, {
     value: defaultValue,
     language: 'typescript',
     automaticLayout: true,
@@ -133,7 +143,7 @@ function init(): void {
     selectionClipboard: false
   });
 
-  jsEditor = monaco.editor.create(_editorJs, {
+  jsEditor = window.monaco.editor.create(_editorJs, {
     value: [
       '',
     ].join('\n'),
@@ -145,8 +155,8 @@ function init(): void {
     },
     // contextmenu: false,
     quickSuggestions: false,
-    parameterHints: false,
-    autoClosingBrackets: false,
+    parameterHints: { enabled: false },
+    autoClosingBrackets: 'never',
     suggestOnTriggerCharacters: false,
     snippetSuggestions: 'none',
     wordBasedSuggestions: false,
@@ -368,7 +378,7 @@ function updateCompilerOptions(): void {
   const compilerOptions = getCompilerOptions();
   compilerOptions.allowNonTsExtensions = true;
   compilerOptions.noEmit = true;
-  monaco.languages.typescript.typescriptDefaults.setCompilerOptions(compilerOptions);
+  window.monaco.languages.typescript.typescriptDefaults.setCompilerOptions(compilerOptions);
 }
 
 function setOptions(opts: { [index: string]: any }, base = (window as any).tsp.options) {

diff --git a/src/playground/types/monaco.d.ts b/src/playground/types/monaco.d.ts
@@ -1,2 +1,9 @@
 import * as monaco from 'monaco-editor';
-declare var monaco: typeof monaco;
+
+declare global {
+  interface Window {
+    MonacoEnvironment?: monaco.Environment;
+    require: MonacoLoader;
+    monaco: typeof monaco;
+  }
+}
diff --git a/yarn.lock b/yarn.lock
@@ -4401,14 +4401,14 @@ module-alias@^2.0.0:
   resolved "https://registry.yarnpkg.com/module-alias/-/module-alias-2.2.0.tgz#a2e32275381642252bf0c51405f7a09a367479b5"
   integrity sha512-O4bbvlZkHj2LUQhieQWWCr486ddc8X+WwRqi3QGnFKfknaxdHTOB7+xRgeyWHc6arpjgtT5SLLMMTFwUM3/x5w==
 
-monaco-editor@^0.10.0:
-  version "0.10.1"
-  resolved "https://registry.yarnpkg.com/monaco-editor/-/monaco-editor-0.10.1.tgz#8c96c4f15b6b5258bf92cbde93cad8a7e3007e14"
-  integrity sha1-jJbE8VtrUli/ksvek8rYp+MAfhQ=
-
-"monaco-typescript@git+https://git@github.com/Microsoft/monaco-typescript":
-  version "3.4.1"
-  resolved "git+https://git@github.com/Microsoft/monaco-typescript#76253915904f7ceae3d2dd02969ad43e3fc07bd6"
+monaco-editor@^0.21.2:
+  version "0.21.2"
+  resolved "https://registry.yarnpkg.com/monaco-editor/-/monaco-editor-0.21.2.tgz#37054e63e480d51a2dd17d609dcfb192304d5605"
+  integrity sha512-jS51RLuzMaoJpYbu7F6TPuWpnWTLD4kjRW0+AZzcryvbxrTwhNy1KC9yboyKpgMTahpUbDUsuQULoo0GV1EPqg==
+
+monaco-typescript@Microsoft/monaco-typescript:
+  version "4.1.1"
+  resolved "https://codeload.github.com/Microsoft/monaco-typescript/tar.gz/2dcf85a5e8a63cb3a39a09a317fa99642a892088"
 
 move-concurrently@^1.0.1:
   version "1.0.1"