Make a useful sample

5 years ago · 3e1a236812
parent 26d78129fa
commit 3e1a236812
2 changed files with 27 additions and 17 deletions
--- a/test/custom-worker.html
+++ b/test/custom-worker.html
@ -1,3 +1,11 @@
+<!--
+  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>
@ -10,9 +18,8 @@
 <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>
+<h3>Custom webworker</h3>
+<button id="logDTS">Log DTS</button>

 <script>
 	var paths = {
@ -174,14 +181,15 @@
 		'vs/language/typescript/monaco.contribution'
 	], () => {

+    monaco.languages.typescript.typescriptDefaults.setWorkerOptions({ customWorkerPath: "http://localhost:5000/test/custom-worker.js" })
+    monaco.languages.typescript.typescriptDefaults.setCompilerOptions({ target: 99, jsx: 1, allowNonTsExtensions: true, declaration: true })

 		var editor = monaco.editor.create(document.getElementById('container'), {
 			value: localStorage.getItem("code") || getDefaultCode(),
 			language: 'typescript',
-			lightbulb: { enabled: true }
+      lightbulb: { enabled: true }
    });

-    console.log("OK")


 		editor.onDidChangeModelContent(() => {
@ -191,18 +199,15 @@

 		document.getElementById('resetBtn').onclick = () => {
      editor.setValue(getDefaultCode());
-      monaco.languages.typescript.typescriptDefaults.setWorkerOptions({ customWorkerPath: "http://localhost:5000/test/custom-worker.js" })
-
-		};
+    };

-		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('logDTS').onclick = async () => {
+      const model = editor.getModel()

-		document.getElementById('updateCompilerSettingsBtn').onclick = () => {
-			const newOpts = document.getElementById('compilerOpts').value
-			monaco.languages.typescript.typescriptDefaults.setCompilerOptions(JSON.parse(newOpts))
-			localStorage.setItem("compiler-opts", newOpts)
+      const worker = await monaco.languages.typescript.getTypeScriptWorker()
+      const thisWorker = await worker(model.uri)
+      const dts = await thisWorker.getDTSEmitForFile(model.uri.toString())
+      console.log(dts)
 		};

 	});
--- a/test/custom-worker.js
+++ b/test/custom-worker.js
@ -1,9 +1,14 @@
 /// <reference lib="webworker">

-console.log("worker")
-
 self.extendTSWorkerFactory = (TypeScriptWorker) => {
  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) || ""
+    }
+
  }
 }