Skip to content

Commit 71bce70

Browse files
committed
Upgrade playground monaco
1 parent 8736f23 commit 71bce70

File tree

4 files changed

+92
-40
lines changed

4 files changed

+92
-40
lines changed

package-lock.json

Lines changed: 34 additions & 18 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

package.json

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@
1414
"trailingComma": "all"
1515
},
1616
"dependencies": {
17+
"@monaco-editor/react": "^4.6.0",
1718
"@types/d3": "^5.16.3",
1819
"@types/lz-string": "^1.3.34",
1920
"@types/react": "^17.0.11",
@@ -28,13 +29,12 @@
2829
"fengari-web": "^0.1.4",
2930
"lua-types": "^2.13.1",
3031
"lz-string": "^1.4.4",
31-
"monaco-editor": "^0.34.1",
32+
"monaco-editor": "^0.50.0",
3233
"path-browserify": "^1.0.1",
3334
"process": "^0.11.10",
3435
"react": "^17.0.2",
3536
"react-dom": "^17.0.2",
3637
"react-json-tree": "^0.17.0",
37-
"react-monaco-editor": "^0.50.1",
3838
"stream-browserify": "^3.0.0",
3939
"typescript-to-lua": "^1.26.0"
4040
},

src/pages/play/Playground.tsx

Lines changed: 26 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
import { useColorMode } from "@docusaurus/theme-common";
22
import clsx from "clsx";
3-
import React, { useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
3+
import React, { useCallback, useContext, useMemo, useState } from "react";
44
import { JSONTree } from "react-json-tree";
5-
import MonacoEditor from "react-monaco-editor";
5+
import MonacoEditor, { OnChange, OnMount } from "@monaco-editor/react";
66
import tstlPackageJson from "typescript-to-lua/package.json";
77
import tsPackageJson from "typescript/package.json";
88
import { debounce } from "../../utils";
9-
import { getInitialCode, updateCodeHistory } from "./code";
9+
import { getInitialCode, getInitialLua, updateCodeHistory } from "./code";
1010
import { ConsoleMessage, executeLua } from "./execute";
1111
import { monaco, useMonacoTheme } from "./monaco";
1212
import styles from "./styles.module.scss";
@@ -41,14 +41,13 @@ interface EditorState {
4141

4242
const EditorContext = React.createContext<EditorContext>(null!);
4343
interface EditorContext extends EditorState {
44-
updateModel(model: monaco.editor.ITextModel): void;
44+
updateModel(worker: monaco.languages.typescript.TypeScriptWorker, model: monaco.editor.ITextModel): void;
4545
}
4646

4747
function EditorContextProvider({ children }: { children: React.ReactNode }) {
4848
const [state, setState] = useState<EditorState>({ source: "", lua: "", ast: {}, sourceMap: "", results: [] });
49-
const updateModel = useCallback<EditorContext["updateModel"]>(async (model) => {
50-
const getWorker = await monaco.languages.typescript.getTypeScriptWorker();
51-
const client = (await getWorker(model.uri)) as CustomTypeScriptWorker;
49+
const updateModel = useCallback<EditorContext["updateModel"]>(async (worker, model) => {
50+
const client = worker as CustomTypeScriptWorker;
5251
const { lua, ast, sourceMap } = await client.getTranspileOutput(model.uri.toString());
5352
const source = model.getValue();
5453

@@ -69,20 +68,26 @@ const commonMonacoOptions: monaco.editor.IEditorConstructionOptions = {
6968

7069
function InputPane() {
7170
const theme = useMonacoTheme();
72-
const ref = useRef<MonacoEditor>(null);
7371
const { updateModel } = useContext(EditorContext);
7472

75-
useEffect(() => {
76-
updateModel(ref.current!.editor!.getModel()!);
77-
}, []);
78-
79-
const onChange = useCallback(
80-
debounce((newValue: string) => {
81-
updateCodeHistory(newValue);
82-
updateModel(ref.current!.editor!.getModel()!);
83-
}, 250),
84-
[],
85-
);
73+
let myWorker: monaco.languages.typescript.TypeScriptWorker | undefined = undefined;
74+
let myEditor: monaco.editor.IStandaloneCodeEditor | undefined = undefined;
75+
76+
const onMount: OnMount = async (editor, monaco) => {
77+
myEditor = editor;
78+
const workerGetter = await monaco.languages.typescript.getTypeScriptWorker();
79+
myWorker = await workerGetter(editor.getModel()!.uri);
80+
updateModel(myWorker, editor.getModel()!);
81+
};
82+
83+
const onChange: OnChange = useCallback(
84+
debounce((newValue) => {
85+
if (myWorker && myEditor)
86+
{
87+
updateCodeHistory(newValue ?? "");
88+
updateModel(myWorker, myEditor.getModel()!);
89+
}
90+
}, 250), [] );
8691

8792
const { activePanel } = useContext(PanelContext);
8893

@@ -93,8 +98,8 @@ function InputPane() {
9398
language="typescript"
9499
defaultValue={getInitialCode()}
95100
options={commonMonacoOptions}
101+
onMount={onMount}
96102
onChange={onChange}
97-
ref={ref}
98103
/>
99104
</div>
100105
);
@@ -174,6 +179,7 @@ function OutputPane() {
174179
<MonacoEditor
175180
theme={theme}
176181
language="lua"
182+
defaultValue={getInitialLua()}
177183
value={lua}
178184
options={{
179185
...commonMonacoOptions,

src/pages/play/code.ts

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,32 @@ function onAbilityCast(this: void, caster: Unit, targetLocation: Vector) {
2121
}
2222
`;
2323

24+
const exampleOutput = `--[[ Generated with https://github.com/TypeScriptToLua/TypeScriptToLua ]]
25+
-- Lua Library inline imports
26+
local function __TS__ArrayFilter(self, callbackfn, thisArg)
27+
local result = {}
28+
local len = 0
29+
for i = 1, #self do
30+
if callbackfn(thisArg, self[i], i - 1, self) then
31+
len = len + 1
32+
result[len] = self[i]
33+
end
34+
end
35+
return result
36+
end
37+
-- End of Lua Library inline imports
38+
function onAbilityCast(caster, targetLocation)
39+
local units = findUnitsInRadius(targetLocation, 500)
40+
local friends = __TS__ArrayFilter(
41+
units,
42+
function(____, unit) return caster:isFriend(unit) end
43+
)
44+
for ____, friend in ipairs(friends) do
45+
friend:givePoints(500)
46+
end
47+
end
48+
`
49+
2450
export function getInitialCode() {
2551
if (window.location.hash.startsWith("#src=")) {
2652
const code = window.location.hash.replace("#src=", "").trim();
@@ -35,6 +61,10 @@ export function getInitialCode() {
3561
return example;
3662
}
3763

64+
export function getInitialLua() {
65+
return exampleOutput;
66+
}
67+
3868
export function updateCodeHistory(code: string) {
3969
const hash = `code/${lzstring.compressToEncodedURIComponent(code)}`;
4070
window.history.replaceState({}, "", `#${hash}`);

0 commit comments

Comments
 (0)