Move lua transpilation to Monaco's TypeScript worker

Author: ark120202

package.json

@@ -24,8 +24,6 @@
         "gh-pages": "^2.2.0",
         "html-loader": "^0.5.5",
         "html-webpack-plugin": "^3.2.0",
-        "monaco-editor-webpack-plugin": "^1.8.2",
-        "node-libs-browser": "^2.2.1",
         "pnp-webpack-plugin": "^1.5.0",
         "prettier": "^1.19.1",
         "raw-loader": "^4.0.0",
@@ -46,6 +44,7 @@
         "fengari-web": "^0.1.4",
         "highlight.js": "^9.18.0",
         "monaco-editor": "^0.19.3",
+        "node-libs-browser": "^2.2.1",
         "renderjson": "^1.4.0",
         "typescript-to-lua": "^0.31.0"
     }

src/playground/fengariWorker.ts src/playground/fengari.worker.tssrc/playground/fengariWorker.ts renamed to src/playground/fengari.worker.ts

@@ -1,11 +1,29 @@
-import { editor } from "monaco-editor/esm/vs/editor/editor.api";
+import * as monaco from "monaco-editor/esm/vs/editor/editor.api";
+import "monaco-editor/esm/vs/basic-languages/lua/lua.contribution";
+import "monaco-editor/esm/vs/basic-languages/typescript/typescript.contribution";
+import "monaco-editor/esm/vs/editor/edcore.main";
+import "monaco-editor/esm/vs/language/typescript/monaco.contribution";
 import renderjson from "renderjson";
 import * as lua from "typescript-to-lua/dist/LuaAST";
 import { version as tstlVersion } from "typescript-to-lua/package.json";
-import FengariWorker from "worker-loader?name=fengari.worker.js!./fengariWorker";
-import TSTLWorker from "worker-loader?name=tstl.worker.js!./tstlWorker";
+import EditorWorker from "worker-loader?name=editor.worker.js!monaco-editor/esm/vs/editor/editor.worker.js";
+import FengariWorker from "worker-loader?name=fengari.worker.js!./fengari.worker";
+import TsWorker from "worker-loader?name=ts.worker.js!./ts.worker";
 import "../../assets/styles/play.scss";
 
+// TODO: Use TypeScript 3.8 type imports
+type CustomTypeScriptWorker = import("./ts.worker").CustomTypeScriptWorker;
+
+(globalThis as any).MonacoEnvironment = {
+    getWorker(_workerId: any, label: string) {
+        if (label === "typescript") {
+            return new TsWorker();
+        }
+
+        return new EditorWorker();
+    },
+};
+
 const container = document.getElementById("editor-ts");
 const outputTerminalHeader = document.getElementById("editor-output-terminal-header");
 const outputTerminalContent = document.getElementById("editor-output-terminal-content");
@@ -67,14 +85,35 @@ if (queryStringSrcStart == 0) {
 }
 
 if (container && exampleLua && astLua) {
-    let tsEditor = editor.create(container, {
+    renderjson.set_show_to_level(1);
+    renderjson.set_replacer((key: string, value: any) => {
+        if (key === "kind") {
+            return lua.SyntaxKind[value];
+        }
+
+        return value;
+    });
+
+    async function compileLua() {
+        const model = tsEditor.getModel()!;
+        const getWorker = await monaco.languages.typescript.getTypeScriptWorker();
+        const client = (await getWorker(model.uri)) as CustomTypeScriptWorker;
+        const { code, ast } = await client.getTranspileOutput();
+
+        luaEditor.setValue(code);
+        astLua!.innerText = "";
+        astLua!.appendChild(renderjson(ast));
+        fengariWorker.postMessage({ luaStr: code });
+    }
+
+    let tsEditor = monaco.editor.create(container, {
         value: example,
         language: "typescript",
         minimap: { enabled: false },
         theme: "vs-dark",
     });
 
-    let luaEditor = editor.create(exampleLua, {
+    let luaEditor = monaco.editor.create(exampleLua, {
         value: "",
         language: "lua",
         minimap: { enabled: false },
@@ -87,20 +126,19 @@ if (container && exampleLua && astLua) {
         luaEditor.layout();
     };
 
-    const tstlWorker = new TSTLWorker();
-    tstlWorker.postMessage({ tsStr: tsEditor.getValue() });
+    compileLua();
 
     let timerVar: any;
     let ignoreHashChange = false;
 
     tsEditor.onDidChangeModelContent(e => {
         clearInterval(timerVar);
-        // wait one second before submitting work
+        // Update transpile result only once per 250s
         timerVar = setTimeout(() => {
-            tstlWorker.postMessage({ tsStr: tsEditor.getValue() });
+            compileLua();
             window.location.replace("#src=" + encodeURIComponent(tsEditor.getValue()));
             ignoreHashChange = true;
-        }, 500);
+        }, 250);
     });
 
     window.onhashchange = () => {
@@ -111,26 +149,6 @@ if (container && exampleLua && astLua) {
     };
 
     const fengariWorker = new FengariWorker();
-
-    tstlWorker.onmessage = (event: MessageEvent) => {
-        if (event.data.luaStr) {
-            luaEditor.setValue(event.data.luaStr);
-
-            astLua.innerText = "";
-            astLua.appendChild(
-                renderjson.set_show_to_level(1).set_replacer((name: string, val: any) => {
-                    if (name === "kind") {
-                        return lua.SyntaxKind[val];
-                    }
-                    return val;
-                })(event.data.luaAST),
-            );
-            fengariWorker.postMessage({ luaStr: event.data.luaStr });
-        } else {
-            luaEditor.setValue(event.data.diagnostics);
-        }
-    };
-
     fengariWorker.onmessage = (event: MessageEvent) => {
         if (outputTerminalContent) {
             outputTerminalContent.innerText = event.data.luaPrint;

src/playground/index.ts

@@ -0,0 +1,46 @@
+// @ts-ignore
+import * as worker from "monaco-editor/esm/vs/editor/editor.worker";
+import { TypeScriptWorker } from "monaco-editor/esm/vs/language/typescript/tsWorker";
+import * as ts from "typescript";
+import * as tstl from "typescript-to-lua";
+
+const emitHost: tstl.EmitHost = {
+    getCurrentDirectory: () => ".",
+    readFile: (fileName: string) => {
+        let featureName = fileName.replace("/dist/lualib/", "").replace(".lua", "");
+        return require(`raw-loader!typescript-to-lua/dist/lualib/${featureName}.lua`).default;
+    },
+};
+
+// TODO: In latest monaco-typescript it returns `ts.Diagnostic[]`
+const clearDiagnostics = (TypeScriptWorker as any).clearFiles;
+
+export class CustomTypeScriptWorker extends TypeScriptWorker {
+    public async getTranspileOutput() {
+        const { transpiledFiles } = this.transpileLua();
+        const [transpiledFile] = transpiledFiles;
+        return { code: transpiledFile.lua!, ast: transpiledFile.luaAst! };
+    }
+
+    public async getSemanticDiagnostics(fileName: string) {
+        const diagnostics = await super.getSemanticDiagnostics(fileName);
+        const { diagnostics: transpileDiagnostics } = this.transpileLua();
+        clearDiagnostics(transpileDiagnostics);
+        return [...diagnostics, ...transpileDiagnostics];
+    }
+
+    private transpileLua() {
+        const program = ((this as any)._languageService as ts.LanguageService).getProgram()!;
+
+        const compilerOptions = program.getCompilerOptions();
+        compilerOptions.luaLibImport = tstl.LuaLibImportKind.Inline;
+        compilerOptions.luaTarget = tstl.LuaTarget.Lua53;
+
+        const sourceFiles = program.getRootFileNames().map(n => program.getSourceFile(n)!);
+        return tstl.transpile({ program, emitHost, sourceFiles });
+    }
+}
+
+globalThis.onmessage = () => {
+    worker.initialize((context: any, createData: any) => new CustomTypeScriptWorker(context, createData));
+};

src/playground/ts.worker.ts

@@ -1,6 +1,5 @@
 const webpack = require("webpack");
 const path = require("path");
-const MonacoWebpackPlugin = require("monaco-editor-webpack-plugin");
 const HtmlWebpackPlugin = require("html-webpack-plugin");
 const PnpWebpackPlugin = require("pnp-webpack-plugin");
 
@@ -46,7 +45,6 @@ module.exports = {
             contentFile: "landing.html",
         }),
 
-        new MonacoWebpackPlugin({ languages: ["javascript", "typescript", "lua"] }),
         new HtmlWebpackPlugin({
             title: "TypeScriptToLua - Online Compiler",
             chunks: ["play_bundle"],
@@ -58,12 +56,20 @@ module.exports = {
         // Ignore pnpapi reference in patched typescript source
         new webpack.IgnorePlugin(/pnpapi/),
 
-        // Exclude `typescript` from `play_bundle` referenced from `typescript-to-lua/dist/LuaAST`
         new webpack.NormalModuleReplacementPlugin(/typescript/, resource => {
+            // Exclude `typescript` from `play_bundle` referenced from `typescript-to-lua/dist/LuaAST`
             const { issuer, compiler } = (resource.resourceResolveData && resource.resourceResolveData.context) || {};
             if (issuer === require.resolve("typescript-to-lua/dist/LuaAST") && compiler !== "worker") {
                 resource.resource = emptyModulePath;
             }
+
+            // Replace vendored monaco-typescript's services build with full TypeScript API.
+            if (
+                resource.resource ===
+                require.resolve("monaco-editor/esm/vs/language/typescript/lib/typescriptServices.js")
+            ) {
+                resource.request = require.resolve("typescript");
+            }
         }),
     ],
 };

src/playground/tstlWorker.ts

@@ -3945,18 +3945,6 @@ fsevents@~2.1.2:
   languageName: node
   linkType: hard
 
-"monaco-editor-webpack-plugin@npm:^1.8.2":
-  version: 1.8.2
-  resolution: "monaco-editor-webpack-plugin@npm:1.8.2"
-  dependencies:
-    loader-utils: ^1.2.3
-  peerDependencies:
-    monaco-editor: ^0.19.1
-    webpack: ^4.5.0
-  checksum: 44bcc76dfe7fae0cf57138435b87deb1b71bd0bcdd5792c97891bc84406305a2a6f96c82f0fc4a0735da34db5d6a1e6bfcea240de7f1f6110849fd3259b4904f
-  languageName: node
-  linkType: hard
-
 "monaco-editor@npm:^0.19.3":
   version: 0.19.3
   resolution: "monaco-editor@npm:0.19.3"
@@ -6352,7 +6340,6 @@ resolve@^1.13.1:
     html-loader: ^0.5.5
     html-webpack-plugin: ^3.2.0
     monaco-editor: ^0.19.3
-    monaco-editor-webpack-plugin: ^1.8.2
     node-libs-browser: ^2.2.1
     pnp-webpack-plugin: ^1.5.0
     prettier: ^1.19.1