Fix playground TS compilerOptions

Author: Perryvw

package-lock.json

@@ -36,7 +36,7 @@
         "react-dom": "^17.0.2",
         "react-json-tree": "^0.17.0",
         "stream-browserify": "^3.0.0",
-        "typescript-to-lua": "^1.26.0"
+        "typescript-to-lua": "^1.26.1"
     },
     "devDependencies": {
         "@ark120202/typescript-config": "^2.2.0",

package.json

@@ -2,16 +2,17 @@ import { useColorMode } from "@docusaurus/theme-common";
 import clsx from "clsx";
 import React, { useCallback, useContext, useMemo, useState } from "react";
 import { JSONTree } from "react-json-tree";
-import MonacoEditor, { OnChange, OnMount } from "@monaco-editor/react";
+import MonacoEditor, { BeforeMount, OnChange, OnMount } from "@monaco-editor/react";
 import tstlPackageJson from "typescript-to-lua/package.json";
 import tsPackageJson from "typescript/package.json";
 import { debounce } from "../../utils";
-import { getInitialCode, getInitialLua, updateCodeHistory } from "./code";
+import { getInitialCode, updateCodeHistory } from "./code";
 import { ConsoleMessage, executeLua } from "./execute";
 import { monaco, useMonacoTheme } from "./monaco";
 import styles from "./styles.module.scss";
 import { jsonTreeTheme } from "./themes";
 import type { CustomTypeScriptWorker } from "./ts.worker";
+import { baseCompilerOptions } from "./compilerConfig";
 
 enum PanelKind {
     Input,
@@ -90,6 +91,34 @@ function InputPane() {
         [],
     );
 
+    const beforeMount: BeforeMount = (monaco) => {
+        monaco.languages.typescript.typescriptDefaults.setCompilerOptions({
+            ...monaco.languages.typescript.typescriptDefaults.getCompilerOptions(),
+            ...baseCompilerOptions,
+        });
+
+        // // TODO: Generate it from lua-types/5.4.d.ts
+        for (const module of [
+            require("!!raw-loader!@typescript-to-lua/language-extensions/index.d.ts"),
+            require("!!raw-loader!lua-types/core/coroutine.d.ts"),
+            require("!!raw-loader!lua-types/core/global.d.ts"),
+            require("!!raw-loader!lua-types/core/math.d.ts"),
+            require("!!raw-loader!lua-types/core/metatable.d.ts"),
+            require("!!raw-loader!lua-types/core/string.d.ts"),
+            require("!!raw-loader!lua-types/core/table.d.ts"),
+            require("!!raw-loader!lua-types/core/coroutine.d.ts"),
+            require("!!raw-loader!lua-types/core/coroutine.d.ts"),
+            require("!!raw-loader!lua-types/core/coroutine.d.ts"),
+            require("!!raw-loader!lua-types/core/coroutine.d.ts"),
+            require("!!raw-loader!lua-types/special/5.2-plus.d.ts"),
+            require("!!raw-loader!lua-types/special/5.2-plus-or-jit.d.ts"),
+            require("!!raw-loader!lua-types/special/5.3-plus.d.ts"),
+            require("!!raw-loader!lua-types/special/5.4-pre.d.ts"),
+        ]) {
+            monaco.languages.typescript.typescriptDefaults.addExtraLib(module.default);
+        }
+    };
+
     const { activePanel } = useContext(PanelContext);
 
     return (
@@ -99,6 +128,7 @@ function InputPane() {
                 language="typescript"
                 defaultValue={getInitialCode()}
                 options={commonMonacoOptions}
+                beforeMount={beforeMount}
                 onMount={onMount}
                 onChange={onChange}
             />
@@ -180,7 +210,7 @@ function OutputPane() {
                     <MonacoEditor
                         theme={theme}
                         language="lua"
-                        defaultValue={getInitialLua()}
+                        defaultValue="starting transpiler..."
                         value={lua}
                         options={{
                             ...commonMonacoOptions,

src/pages/play/Playground.tsx

@@ -21,32 +21,6 @@ function onAbilityCast(this: void, caster: Unit, targetLocation: Vector) {
 }
 `;
 
-const exampleOutput = `--[[ Generated with https://github.com/TypeScriptToLua/TypeScriptToLua ]]
--- Lua Library inline imports
-local function __TS__ArrayFilter(self, callbackfn, thisArg)
-    local result = {}
-    local len = 0
-    for i = 1, #self do
-        if callbackfn(thisArg, self[i], i - 1, self) then
-            len = len + 1
-            result[len] = self[i]
-        end
-    end
-    return result
-end
--- End of Lua Library inline imports
-function onAbilityCast(caster, targetLocation)
-    local units = findUnitsInRadius(targetLocation, 500)
-    local friends = __TS__ArrayFilter(
-        units,
-        function(____, unit) return caster:isFriend(unit) end
-    )
-    for ____, friend in ipairs(friends) do
-        friend:givePoints(50)
-    end
-end
-`;
-
 export function getInitialCode() {
     if (window.location.hash.startsWith("#src=")) {
         const code = window.location.hash.replace("#src=", "").trim();
@@ -61,10 +35,6 @@ export function getInitialCode() {
     return example;
 }
 
-export function getInitialLua() {
-    return exampleOutput;
-}
-
 export function updateCodeHistory(code: string) {
     const hash = `code/${lzstring.compressToEncodedURIComponent(code)}`;
     window.history.replaceState({}, "", `#${hash}`);

src/pages/play/code.ts

@@ -0,0 +1,11 @@
+import * as tstl from "typescript-to-lua";
+
+export const baseCompilerOptions: Omit<tstl.CompilerOptions, "module"> = {
+    rootDir: "inmemory://model/",
+    luaLibImport: tstl.LuaLibImportKind.Inline,
+    luaTarget: tstl.LuaTarget.Lua54,
+    sourceMap: true,
+    configFilePath: "inmemory://model/tsconfig.json",
+    strict: true,
+    lib: ["esnext"],
+};

src/pages/play/compilerConfig.ts

@@ -14,7 +14,6 @@ export function useMonacoTheme() {
     return colorMode === "dark" ? "vs-dark" : "vs";
 }
 
-// TODO: MonacoEnvironment should be a var
 (globalThis as { MonacoEnvironment?: typeof MonacoEnvironment }).MonacoEnvironment = {
     getWorker(_workerId, label) {
         if (label === "typescript") {
@@ -24,46 +23,3 @@ export function useMonacoTheme() {
         return new EditorWorker();
     },
 };
-
-function addLibsFromContext(context: __WebpackModuleApi.RequireContext, pathPrefix?: string) {
-    for (const request of context.keys()) {
-        if (pathPrefix) {
-            const filePath = request.replace("./", pathPrefix + "/");
-            monaco.languages.typescript.typescriptDefaults.addExtraLib(context(request).default, filePath);
-        } else {
-            monaco.languages.typescript.typescriptDefaults.addExtraLib(context(request).default, request);
-        }
-    }
-}
-
-// Add typescript libs
-addLibsFromContext(require.context("!!raw-loader!typescript/lib/", false, /lib(\.es(.+))?\.d\.ts$/));
-monaco.languages.typescript.typescriptDefaults.addExtraLib(require("!!raw-loader!./execute/console.d.ts").default);
-
-// Add lua-types
-addLibsFromContext(require.context("!!raw-loader!lua-types/core/", true, /\.d\.ts$/));
-// TODO: Generate it from lua-types/special/5.3.d.ts
-for (const module of [
-    require("!!raw-loader!lua-types/special/5.2-plus.d.ts"),
-    require("!!raw-loader!lua-types/special/5.2-plus-or-jit.d.ts"),
-    require("!!raw-loader!lua-types/special/5.3-plus.d.ts"),
-    require("!!raw-loader!lua-types/special/5.4-pre.d.ts"),
-]) {
-    monaco.languages.typescript.typescriptDefaults.addExtraLib(module.default);
-}
-
-// Add tstl language extension types
-addLibsFromContext(
-    require.context("!!raw-loader!@typescript-to-lua/language-extensions/", true, /\.d\.ts$/),
-    "/language-extensions",
-);
-monaco.languages.typescript.typescriptDefaults.addExtraLib(
-    require("!!raw-loader!@typescript-to-lua/language-extensions/index.d.ts").default,
-    "/language-extensions/index.d.ts",
-);
-
-// Add default ts compiler options
-monaco.languages.typescript.typescriptDefaults.setCompilerOptions({
-    ...monaco.languages.typescript.typescriptDefaults.getCompilerOptions(),
-    strict: true,
-});

src/pages/play/monaco.ts

@@ -54,13 +54,6 @@ export class CustomTypeScriptWorker extends TypeScriptWorker {
         const program = this._languageService.getProgram()!;
         const sourceFile = program.getSourceFile(fileName)!;
 
-        const compilerOptions: tstl.CompilerOptions = program.getCompilerOptions();
-        compilerOptions.rootDir = "inmemory://model/";
-        compilerOptions.luaLibImport = tstl.LuaLibImportKind.Inline;
-        compilerOptions.luaTarget = tstl.LuaTarget.Lua53;
-        compilerOptions.sourceMap = true;
-        compilerOptions.configFilePath = compilerOptions.rootDir + "tsconfig.json";
-
         let ast: tstl.File | undefined;
         let lua: string | undefined;
         let sourceMap: string | undefined;