Upgrade playground monaco

Author: Perryvw

package-lock.json

@@ -14,6 +14,7 @@
         "trailingComma": "all"
     },
     "dependencies": {
+        "@monaco-editor/react": "^4.6.0",
         "@types/d3": "^5.16.3",
         "@types/lz-string": "^1.3.34",
         "@types/react": "^17.0.11",
@@ -28,13 +29,12 @@
         "fengari-web": "^0.1.4",
         "lua-types": "^2.13.1",
         "lz-string": "^1.4.4",
-        "monaco-editor": "^0.34.1",
+        "monaco-editor": "^0.50.0",
         "path-browserify": "^1.0.1",
         "process": "^0.11.10",
         "react": "^17.0.2",
         "react-dom": "^17.0.2",
         "react-json-tree": "^0.17.0",
-        "react-monaco-editor": "^0.50.1",
         "stream-browserify": "^3.0.0",
         "typescript-to-lua": "^1.26.0"
     },

package.json

@@ -1,12 +1,12 @@
 import { useColorMode } from "@docusaurus/theme-common";
 import clsx from "clsx";
-import React, { useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
+import React, { useCallback, useContext, useMemo, useState } from "react";
 import { JSONTree } from "react-json-tree";
-import MonacoEditor from "react-monaco-editor";
+import MonacoEditor, { 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, updateCodeHistory } from "./code";
+import { getInitialCode, getInitialLua, updateCodeHistory } from "./code";
 import { ConsoleMessage, executeLua } from "./execute";
 import { monaco, useMonacoTheme } from "./monaco";
 import styles from "./styles.module.scss";
@@ -41,14 +41,13 @@ interface EditorState {
 
 const EditorContext = React.createContext<EditorContext>(null!);
 interface EditorContext extends EditorState {
-    updateModel(model: monaco.editor.ITextModel): void;
+    updateModel(worker: monaco.languages.typescript.TypeScriptWorker, model: monaco.editor.ITextModel): void;
 }
 
 function EditorContextProvider({ children }: { children: React.ReactNode }) {
     const [state, setState] = useState<EditorState>({ source: "", lua: "", ast: {}, sourceMap: "", results: [] });
-    const updateModel = useCallback<EditorContext["updateModel"]>(async (model) => {
-        const getWorker = await monaco.languages.typescript.getTypeScriptWorker();
-        const client = (await getWorker(model.uri)) as CustomTypeScriptWorker;
+    const updateModel = useCallback<EditorContext["updateModel"]>(async (worker, model) => {
+        const client = worker as CustomTypeScriptWorker;
         const { lua, ast, sourceMap } = await client.getTranspileOutput(model.uri.toString());
         const source = model.getValue();
 
@@ -69,20 +68,26 @@ const commonMonacoOptions: monaco.editor.IEditorConstructionOptions = {
 
 function InputPane() {
     const theme = useMonacoTheme();
-    const ref = useRef<MonacoEditor>(null);
     const { updateModel } = useContext(EditorContext);
 
-    useEffect(() => {
-        updateModel(ref.current!.editor!.getModel()!);
-    }, []);
-
-    const onChange = useCallback(
-        debounce((newValue: string) => {
-            updateCodeHistory(newValue);
-            updateModel(ref.current!.editor!.getModel()!);
-        }, 250),
-        [],
-    );
+    let myWorker: monaco.languages.typescript.TypeScriptWorker | undefined = undefined;
+    let myEditor: monaco.editor.IStandaloneCodeEditor | undefined = undefined;
+
+    const onMount: OnMount = async (editor, monaco) => {
+        myEditor = editor;
+        const workerGetter = await monaco.languages.typescript.getTypeScriptWorker();
+        myWorker = await workerGetter(editor.getModel()!.uri);
+        updateModel(myWorker, editor.getModel()!);
+    };
+
+    const onChange: OnChange = useCallback(
+        debounce((newValue) => {
+            if (myWorker && myEditor)
+            {
+                updateCodeHistory(newValue ?? "");
+                updateModel(myWorker, myEditor.getModel()!);
+            }
+            }, 250), [] );
 
     const { activePanel } = useContext(PanelContext);
 
@@ -93,8 +98,8 @@ function InputPane() {
                 language="typescript"
                 defaultValue={getInitialCode()}
                 options={commonMonacoOptions}
+                onMount={onMount}
                 onChange={onChange}
-                ref={ref}
             />
         </div>
     );
@@ -174,6 +179,7 @@ function OutputPane() {
                     <MonacoEditor
                         theme={theme}
                         language="lua"
+                        defaultValue={getInitialLua()}
                         value={lua}
                         options={{
                             ...commonMonacoOptions,

src/pages/play/Playground.tsx

@@ -21,6 +21,32 @@ 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(500)
+    end
+end
+`
+
 export function getInitialCode() {
     if (window.location.hash.startsWith("#src=")) {
         const code = window.location.hash.replace("#src=", "").trim();
@@ -35,6 +61,10 @@ 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}`);