WIP

package.json

@@ -65,10 +65,12 @@
     "@types/react-dom": "^18.2.25",
     "ace-builds": "^1.33.1",
     "classnames": "^2.5.1",
+    "immer": "^10.1.1",
     "pyodide": "^0.25.1",
     "react": "^18.2.0",
     "react-ace": "^11.0.1",
     "react-dom": "^18.2.0",
-    "react-error-boundary": "^4.0.13"
+    "react-error-boundary": "^4.0.13",
+    "use-immer": "^0.9.0"
   }
 }

src/components/App.tsx

@@ -1,11 +1,13 @@
 import React, {useEffect, useState} from "react";
 
 
-import {createTheme, MantineColorsTuple, MantineProvider} from '@mantine/core';
+import {AppShell, Burger, createTheme, MantineColorsTuple, MantineProvider} from '@mantine/core';
 import FetchWithProgress from "./FetchWithProgress";
 import AceEditor from "react-ace";
 import "ace-builds/src-noconflict/mode-jsx";
 import {usePyodide} from "../usePyodide";
+import {useDisclosure} from "@mantine/hooks";
+import {useImmer} from "use-immer";
 
 const myColor: MantineColorsTuple = [
     '#e4f8ff',
@@ -29,15 +31,21 @@ const theme = createTheme({
 const Inner: React.FC = () => {
     const [data, setData] = useState<ArrayBuffer | null>(null);
 
-    const pyodide = usePyodide();
+    const {pyodide, status: pyodideStatus } = usePyodide();
 
     const [ran, setRan] = useState<boolean>(false);
 
+    const [output, setOutput] = useImmer<string[]>([]);
+
     useEffect(() => {
         const go = async () => {
             if (data && !ran) {
                 setRan(true);
 
+                pyodide.setStdout({
+                    batched: (msg) => setOutput(o => { o.push(msg); })
+                })
+
                 console.warn("LOADING SQLITE");
                 await pyodide.loadPackage("sqlite3");
                 console.warn("LOADED!");
@@ -187,20 +195,53 @@ print(sys.meta_path)
 
     return <>
         <FetchWithProgress url={"assets/bitbake-2.8.0.zip"} data={data} setData={setData}/>
+        <p>pyodide: {pyodideStatus}</p>
+        <ul>
+            {output.map(e => <li>{e}</li>)}
+        </ul>
     </>;
 }
 
 export const App: React.FC = () => {
+    const [opened, { toggle }] = useDisclosure();
 
     return (
         <MantineProvider theme={theme}>
-            <AceEditor
-                mode="java"
-                theme="github"
-                name="UNIQUE_ID_OF_DIV"
-                editorProps={{$blockScrolling: true}}
-            />
-            <Inner/>
+
+            <AppShell
+                header={{ height: 60 }}
+                navbar={{
+                    width: 300,
+                    breakpoint: 'sm',
+                    collapsed: { mobile: !opened },
+                }}
+                padding="md"
+            >
+                <AppShell.Header>
+                    <Burger
+                        opened={opened}
+                        onClick={toggle}
+                        hiddenFrom="sm"
+                        size="sm"
+                    />
+                    <div>Logo</div>
+                </AppShell.Header>
+
+                <AppShell.Navbar p="md">Navbar</AppShell.Navbar>
+
+                <AppShell.Main>
+
+
+                    <AceEditor
+                        mode="java"
+                        theme="github"
+                        name="UNIQUE_ID_OF_DIV"
+                        editorProps={{$blockScrolling: true}}
+                    />
+                    <Inner/>
+                </AppShell.Main>
+            </AppShell>
+
         </MantineProvider>
     );
 };

src/usePyodide.ts

@@ -1,15 +1,21 @@
-import React, { useEffect, useState } from 'react';
+import {useEffect, useState} from 'react';
+
+import pyodide from "pyodide";
 
 export const usePyodide = () => {
-    const [pyodide, setPyodide] = useState(null);
+    const [pyodide, setPyodide] = useState<pyodide>(null);
+    const [status, setStatus] = useState<string>('idle');
 
     useEffect(() => {
         let isActive = true;
 
         const loadPyodide = async () => {
             if (!window.pyodide) {
+                setStatus("importing");
                 const { loadPyodide: loadPyodideModule } = await import("https://cdn.jsdelivr.net/pyodide/v0.25.1/full/pyodide.mjs");
+                setStatus("loading");
                 window.pyodide = await loadPyodideModule();
+                setStatus("done");
             }
             if (isActive) {
                 setPyodide(window.pyodide);
@@ -19,9 +25,10 @@ export const usePyodide = () => {
         loadPyodide();
 
         return () => {
+            setStatus("inactive");
             isActive = false;
         };
     }, []);
 
-    return pyodide;
+    return { pyodide, status } as const;
 };