1
1
import { useColorMode } from "@docusaurus/theme-common" ;
2
2
import clsx from "clsx" ;
3
- import React , { useCallback , useContext , useEffect , useMemo , useRef , useState } from "react" ;
3
+ import React , { useCallback , useContext , useMemo , useState } from "react" ;
4
4
import { JSONTree } from "react-json-tree" ;
5
- import MonacoEditor from "react- monaco-editor" ;
5
+ import MonacoEditor , { OnChange , OnMount } from "@ monaco-editor/react " ;
6
6
import tstlPackageJson from "typescript-to-lua/package.json" ;
7
7
import tsPackageJson from "typescript/package.json" ;
8
8
import { debounce } from "../../utils" ;
9
- import { getInitialCode , updateCodeHistory } from "./code" ;
9
+ import { getInitialCode , getInitialLua , updateCodeHistory } from "./code" ;
10
10
import { ConsoleMessage , executeLua } from "./execute" ;
11
11
import { monaco , useMonacoTheme } from "./monaco" ;
12
12
import styles from "./styles.module.scss" ;
@@ -41,14 +41,13 @@ interface EditorState {
41
41
42
42
const EditorContext = React . createContext < EditorContext > ( null ! ) ;
43
43
interface EditorContext extends EditorState {
44
- updateModel ( model : monaco . editor . ITextModel ) : void ;
44
+ updateModel ( worker : monaco . languages . typescript . TypeScriptWorker , model : monaco . editor . ITextModel ) : void ;
45
45
}
46
46
47
47
function EditorContextProvider ( { children } : { children : React . ReactNode } ) {
48
48
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 ;
52
51
const { lua, ast, sourceMap } = await client . getTranspileOutput ( model . uri . toString ( ) ) ;
53
52
const source = model . getValue ( ) ;
54
53
@@ -69,20 +68,26 @@ const commonMonacoOptions: monaco.editor.IEditorConstructionOptions = {
69
68
70
69
function InputPane ( ) {
71
70
const theme = useMonacoTheme ( ) ;
72
- const ref = useRef < MonacoEditor > ( null ) ;
73
71
const { updateModel } = useContext ( EditorContext ) ;
74
72
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 ) , [ ] ) ;
86
91
87
92
const { activePanel } = useContext ( PanelContext ) ;
88
93
@@ -93,8 +98,8 @@ function InputPane() {
93
98
language = "typescript"
94
99
defaultValue = { getInitialCode ( ) }
95
100
options = { commonMonacoOptions }
101
+ onMount = { onMount }
96
102
onChange = { onChange }
97
- ref = { ref }
98
103
/>
99
104
</ div >
100
105
) ;
@@ -174,6 +179,7 @@ function OutputPane() {
174
179
< MonacoEditor
175
180
theme = { theme }
176
181
language = "lua"
182
+ defaultValue = { getInitialLua ( ) }
177
183
value = { lua }
178
184
options = { {
179
185
...commonMonacoOptions ,
0 commit comments