use a hook instead of a component to load Pyodide

yoctoproject · May 11, 2024 · 335bd83 · 335bd83
1 parent e0ee034
commit 335bd83
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 45 deletions.
diff --git a/src/components/App.tsx b/src/components/App.tsx
@@ -1,11 +1,11 @@
 import React, {useEffect, useState} from "react";
 
 
-import { MantineProvider, createTheme, MantineColorsTuple } from '@mantine/core';
+import {createTheme, MantineColorsTuple, MantineProvider} from '@mantine/core';
 import FetchWithProgress from "./FetchWithProgress";
-import PyodideLoader from "./PyodideLoader";
-import pyodide from "pyodide";
 import AceEditor from "react-ace";
+import "ace-builds/src-noconflict/mode-jsx";
+import {usePyodide} from "../usePyodide";
 
 const myColor: MantineColorsTuple = [
     '#e4f8ff',
@@ -28,22 +28,24 @@ const theme = createTheme({
 
 const Inner: React.FC = () => {
     const [data, setData] = useState<ArrayBuffer | null>(null);
-    const [pyodideModule, setPyodideModule] = useState<pyodide | null>(null);
+
+    const pyodide = usePyodide();
+
     const [ran, setRan] = useState<boolean>(false);
 
     useEffect(() => {
         const go = async () => {
-            if (data && pyodideModule && !ran) {
+            if (data && !ran) {
                 setRan(true);
 
                 console.warn("LOADING SQLITE");
-                await pyodideModule.loadPackage("sqlite3");
+                await pyodide.loadPackage("sqlite3");
                 console.warn("LOADED!");
 
-                pyodideModule.unpackArchive(data, "zip", {
+                pyodide.unpackArchive(data, "zip", {
                     extractDir: "bb"
                 });
-                pyodideModule.runPython(`
+                pyodide.runPython(`
 import os.path
 import sys
 from importlib.abc import Loader, MetaPathFinder
@@ -153,16 +155,16 @@ sys.meta_path.append(BuiltinImporterShim())
 
 print(sys.meta_path)
         `)
-                const file = pyodideModule.FS.readdir("./bb");
+                const file = pyodide.FS.readdir("./bb");
                 console.log(file);
 
-                pyodideModule.runPython(`
+                pyodide.runPython(`
                     import sys
                     sys.path.insert(0, "./bb/bitbake-2.8.0/lib/")
                     from bb.data_smart import DataSmart    
                 `)
 
-                const DataSmart = pyodideModule.globals.get('DataSmart');
+                const DataSmart = pyodide.globals.get('DataSmart');
                 const d = DataSmart();
 
                 d.setVar("A", "B");
@@ -175,16 +177,15 @@ print(sys.meta_path)
                 DataSmart.destroy();
 
             } else {
-                console.warn(`data = ${!!data}, p = ${!!pyodideModule}`);
+                console.warn(`data = ${!!data}, p = ${!!pyodide}`);
             }
         }
 
         go();
-    }, [data, pyodideModule, ran, setRan]);
+    }, [data, pyodide, ran, setRan]);
 
 
     return <>
-        <PyodideLoader pyodide={pyodideModule} setPyodide={setPyodideModule} />
         <FetchWithProgress url={"assets/bitbake-2.8.0.zip"} data={data} setData={setData}/>
     </>;
 }
@@ -197,7 +198,7 @@ export const App: React.FC = () => {
                 mode="java"
                 theme="github"
                 name="UNIQUE_ID_OF_DIV"
-                editorProps={{ $blockScrolling: true }}
+                editorProps={{$blockScrolling: true}}
             />
             <Inner/>
         </MantineProvider>

diff --git a/src/components/PyodideLoader.tsx b/src/components/PyodideLoader.tsx
diff --git a/src/usePyodide.ts b/src/usePyodide.ts
@@ -0,0 +1,27 @@
+import React, { useEffect, useState } from 'react';
+
+export const usePyodide = () => {
+    const [pyodide, setPyodide] = useState(null);
+
+    useEffect(() => {
+        let isActive = true;
+
+        const loadPyodide = async () => {
+            if (!window.pyodide) {
+                const { loadPyodide: loadPyodideModule } = await import("https://cdn.jsdelivr.net/pyodide/v0.25.1/full/pyodide.mjs");
+                window.pyodide = await loadPyodideModule();
+            }
+            if (isActive) {
+                setPyodide(window.pyodide);
+            }
+        };
+
+        loadPyodide();
+
+        return () => {
+            isActive = false;
+        };
+    }, []);
+
+    return pyodide;
+};