From 656a541a2f038f635acca49b4729fa59ba2f4a53 Mon Sep 17 00:00:00 2001 From: Alexandre Tolstenko Date: Tue, 5 Mar 2024 12:55:21 -0500 Subject: [PATCH] fix: some minor problems with types --- .../src/components/SyntaxTraining.tsx | 103 +++++++++--------- .../src/components/emception.ts | 21 +++- 2 files changed, 69 insertions(+), 55 deletions(-) diff --git a/demo-syntax-training/src/components/SyntaxTraining.tsx b/demo-syntax-training/src/components/SyntaxTraining.tsx index 6fa9d045..c98a2e6a 100644 --- a/demo-syntax-training/src/components/SyntaxTraining.tsx +++ b/demo-syntax-training/src/components/SyntaxTraining.tsx @@ -49,6 +49,10 @@ interface SyntaxTrainingPageProps { height?: string; } +type EmceptionWrapper = { + worker: Comlink.Remote | null; +} + const SyntaxTrainingPage: React.FC = ({ assignment = HelloWorldCPP, theme = "vs-dark", @@ -57,12 +61,14 @@ const SyntaxTrainingPage: React.FC = ({ }) => { const [cppFlags, setCppFlags] = useState("-O2 -fexceptions --proxy-to-worker -sEXIT_RUNTIME=1 -std=c++20"); + const [code, setCode] = useState(assignment.initialCode); + const [emceptionLoaded, setEmceptionLoaded] = useState(false); const [api, contextHolder] = notification.useNotification(); let [consoleOutput, setConsoleOutput] = useState(""); - const [emception, setEmception] = useState | null>(null); + const [emception, setEmception] = useState({ worker: null }); const writeLineToConsole = (str: any) => { console.log(str); @@ -93,7 +99,6 @@ const SyntaxTrainingPage: React.FC = ({ return; setEmceptionLoaded(true); - console.log("load worker"); // todo: is it possible to not refer as url? const emceptionWorker = new Worker(new URL('./emception.worker.ts', import.meta.url), { type: 'module' }); @@ -102,24 +107,15 @@ const SyntaxTrainingPage: React.FC = ({ showNotification("Emception worker error"); } - console.log("Post message to worker"); - - //let emception: Comlink.Remote = Comlink.wrap(emceptionWorker); let emception: Comlink.Remote = Comlink.wrap(emceptionWorker); - console.log("Post wrap"); - - setEmception(emception); - - console.log("Post set"); + setEmception({ worker: emception }); emception.onstdout.bind(console.log); emception.onstderr.bind(console.log); emception.onprocessstart.bind(console.log); emception.onprocessend.bind(console.log); - console.log("Post bind"); - await emception.init(); console.log("Post init"); @@ -127,29 +123,33 @@ const SyntaxTrainingPage: React.FC = ({ } useEffect(() => { + if(emceptionLoaded) + return; loadEmception(); + setEmceptionLoaded(true); }, []); - let editorRef = useRef(null) - let monacoRef = useRef(null); - - function handleEditorChange(value: any, event: any) { + // todo: type corretly the event monaco.editor.IModelContentChangedEvent + function handleEditorChange(value: string|undefined, event: any) { // here is the current value + if (value === undefined) + return; + setCode(value); console.log(value); console.log('event', event); } - function handleEditorDidMount(editor: editor.IStandaloneCodeEditor, monaco: any) { - editorRef.current = editor; - monacoRef.current = monaco; - console.log('onMount: the editor instance:', editor); - console.log('onMount: the monaco instance:', monaco); - } + // function handleEditorDidMount(editor: editor.IStandaloneCodeEditor, monaco: any) { + // editorRef.current = editor; + // monacoRef.current = monaco; + // console.log('onMount: the editor instance:', editor); + // console.log('onMount: the monaco instance:', monaco); + // } - function handleEditorWillMount(monaco: any) { - monacoRef.current = monaco; - console.log('beforeMount: the monaco instance:', monaco); - } + // function handleEditorWillMount(monaco: any) { + // monacoRef.current = monaco; + // console.log('beforeMount: the monaco instance:', monaco); + // } function handleEditorValidation(markers: any) { // model markers @@ -165,32 +165,29 @@ const SyntaxTrainingPage: React.FC = ({ const onRunClick = async () => { // try { - clearConsole(); - if (!emception) { - showNotification("Emception not loaded"); - console.log("Emception not loaded"); - return; - } + clearConsole(); + if (!emception || !emception.worker) { + showNotification("Emception not loaded"); + console.log("Emception not loaded"); + return; + } - const code = editorRef.current?.getValue() || ''; - await emception.fileSystem.writeFile("/working/main.cpp", code); - const cmd = `em++ ${cppFlags} -sSINGLE_FILE=1 -sUSE_CLOSURE_COMPILER=0 /working/main.cpp -o /working/main.js`; - writeLineToConsole(`\$ ${cmd}`); - const result = await emception.run(cmd); - console.log(result); - showNotification(JSON.stringify(result)); + try { + await emception.worker.fileSystem.writeFile("/working/main.cpp", code); + const cmd = `em++ ${cppFlags} -sSINGLE_FILE=1 -sMINIFY_HTML=0 -sUSE_CLOSURE_COMPILER=0 /working/main.cpp -o /working/main.js`; + onprocessstart(`/emscripten/${cmd}`.split(/\s+/g)); + const result = await emception.worker.run(cmd); if (result.returncode == 0) { - writeLineToConsole("Emception compilation finished"); - const content = await emception.fileSystem.readFile("/working/main.js", { encoding: "utf8" }); - writeLineToConsole(content); + const content = await emception.worker.fileSystem.readFile("/working/main.js", { encoding: "utf8" }); + console.log(content); eval(content); } else { - writeLineToConsole(`Emception compilation failed`); - writeLineToConsole(JSON.stringify(result)); + console.log(`Emception compilation failed`); } - // } catch (e) { - // writeLineToConsole(JSON.stringify(e)); - // } + } catch (err) { + console.error(err); + } finally { + } } const showNotification = (message: string) => { @@ -205,10 +202,10 @@ const SyntaxTrainingPage: React.FC = ({ label: `nav ${ index + 1 }`, })); - const resetCode = () => { - editorRef.current?.setValue(assignment.initialCode); - showNotification('Code reset'); - } + // const resetCode = () => { + // editorRef.current?.setValue(assignment.initialCode); + // showNotification('Code reset'); + // } const copyCode = async () => { // await navigator.clipboard.writeText(editorRef.current?.getValue() || '') @@ -250,8 +247,6 @@ const SyntaxTrainingPage: React.FC = ({ theme={ theme } defaultValue={ assignment.initialCode } onChange={ handleEditorChange } - onMount={ handleEditorDidMount } - beforeMount={ handleEditorWillMount } onValidate={ handleEditorValidation } options={ { automaticLayout: true, wordWrap: 'on' } } /> @@ -262,7 +257,7 @@ const SyntaxTrainingPage: React.FC = ({ - + {/**/} diff --git a/demo-syntax-training/src/components/emception.ts b/demo-syntax-training/src/components/emception.ts index bfd568cf..6bda65dc 100755 --- a/demo-syntax-training/src/components/emception.ts +++ b/demo-syntax-training/src/components/emception.ts @@ -109,6 +109,7 @@ class Emception { onstderr = (str) => {console.error(str)}; run(...args) { + console.log("Running: ", args); if (this.fileSystem.exists("/emscripten/cache/cache.lock")) { this.fileSystem.unlink("/emscripten/cache/cache.lock"); } @@ -132,7 +133,18 @@ class Emception { } _run_process_impl(argv, opts:any = {}) { - const emscripten_script = argv[0].match(/^((\/lazy)?\/emscripten\/.+?)(?:\.py)?$/)?.[1] + + // if argv[0] is an array, recreate the command line arguments + if (Array.isArray(argv[0])) { + argv = argv[0]; + console.warn("argv[0] is an array, recreating the command line arguments. FIXME!"); // todo: fix this + } + + console.log("pre match", argv[0]) + const argv0 = String(argv[0]); + console.log("argv0", argv0) // strangely this prints "argv0" "/usr/bin/clang,--version" + const emscripten_script = argv0?.match(/^((\/lazy)?\/emscripten\/.+?)(?:\.py)?$/)?.[1] + console.log("emscripten_script", emscripten_script) if (emscripten_script && this.fileSystem.exists(`${emscripten_script}.py`)) { argv = [ "/usr/bin/python", @@ -143,8 +155,11 @@ class Emception { } const tool_name = tools_info[argv[0]]; + + console.log("tool_name: ", tool_name); const tool = this.tools[tool_name]?.find(p => !p.running); if (!tool) { + console.log(`Emception tool not found: ${JSON.stringify(argv[0])}`); const result = { returncode: 1, stdout: "", @@ -152,6 +167,8 @@ class Emception { }; return result; } + + console.log(`Running ${tool_name} with ${JSON.stringify(argv)}`); const result = tool.exec(argv, { ...opts, @@ -159,6 +176,8 @@ class Emception { path: ["/emscripten"] }); + console.log(`Emception tool ${tool_name} finished with ${result.returncode}`); + this.fileSystem.push(); return result; };