User updating

Author: alankrantas

README.md

@@ -4,7 +4,7 @@
 
 A simple demonstration to wrap [`@monaco-editor/react`](https://www.npmjs.com/package/@monaco-editor/react) combined with [`Pyodide`](https://pyodide.org/en/stable/index.html) to create a basic online Python editor component with a few additional packages supported. The React app is [created/built by Vite](https://vitejs.dev/) and deployed to GitHub Pages using Github Actions.
 
-`/src/data/pyodide-settings.json` defines the Pyodide version and packages that would be pre-loaded. Pyodide will automatically install [supported external packages](https://pyodide.org/en/stable/usage/packages-in-pyodide.html) found in imports.
+`preload_packages.jsonn` defines the Python packages that would be pre-loaded. Pyodide will also automatically install [supported external packages](https://pyodide.org/en/stable/usage/packages-in-pyodide.html) found in imports.
 
 ## Development
 

package.json

@@ -7,11 +7,12 @@
         "dev": "vite --port 3000 --open --host",
         "start": "yarn dev",
         "build": "vite build",
-        "preview": "vite preview --port 8080 --open --host",
+        "preview": "yarn copy_pyodide_version && vite preview --port 8080 --open --host",
         "serve": "yarn preview",
         "pull": "git pull origin main",
         "push": "git add . && git commit -m \"User updating\" && git push origin main",
-        "commit": "yarn pull && yarn push"
+        "commit": "yarn pull && yarn push",
+        "copy_pyodide_version": "jq '{version: .dependencies.pyodide}' package.json > src/data/pyodide_version.json"
     },
     "dependencies": {
         "@monaco-editor/react": "^4.7.0",

src/component/MonacoEditor.tsx

@@ -21,7 +21,7 @@ const MonacoEditor: FunctionComponent<MonacoEditorProps> = ({
     const [consoleOutput, setConsoleOutput] = useState<string[]>([]);
 
     useEffect(() => {
-        LoadPyodide().then((loaded) => setPyodide(loaded));
+        if (!pyodide) LoadPyodide().then((loaded) => setPyodide(loaded));
     });
 
     return (
@@ -40,7 +40,7 @@ const MonacoEditor: FunctionComponent<MonacoEditorProps> = ({
                     <div className={styles.padded}>
                         <Editor
                             height="100vh"
-                            theme={editorDarkMode ? "hc-black" : "hc-light"}
+                            theme={editorDarkMode ? "vs-dark" : "vs"}
                             options={EditorOptions}
                             language="python"
                             value={editorCode}

src/component/MonacoEditorExecute.ts

@@ -1,5 +1,5 @@
 import { loadPyodide, type PyodideInterface } from "pyodide";
-import pyodideSettings from "../data/pyodide-settings.json";
+import preload_python_packages from "../data/preload_packages.json";
 
 let consoleOutput: string[] = [];
 
@@ -9,11 +9,22 @@ const stdout = (msg: any) => {
 };
 
 export const LoadPyodide = async (): Promise<PyodideInterface> => {
+    let pyodide_version = "0.0.0";
+
+    if (import.meta.env.DEV) {
+        pyodide_version = (await import('../../package.json')).dependencies.pyodide;
+    } else {
+        pyodide_version = (await import('../data/pyodide_version.json')).version;
+    }
+    pyodide_version = pyodide_version.replaceAll('^', '').replaceAll('~', '');
+
+    console.log(`Found Pyodide version: ${pyodide_version}`);
+
     return loadPyodide({
-        indexURL: `https://cdn.jsdelivr.net/pyodide/v${pyodideSettings.version}/full/`,
+        indexURL: `https://cdn.jsdelivr.net/pyodide/v${pyodide_version}/full/`,
         stdout: stdout,
         stderr: stdout,
-        packages : pyodideSettings.preload_packages,
+        packages: preload_python_packages,
         checkAPIVersion: true,
     });
 };

src/data/exampleCode.txt

@@ -26,4 +26,7 @@ get_target_names = lambda label: iris.target_names[label]
 df['species'] = get_target_names(iris.target)
 
 print(df, end='\n\n')
-print(df.describe())
+print(df.describe(), end='\n\n')
+
+import sys
+print('Python kernel:', sys.version)

src/data/preload_packages.json

@@ -0,0 +1 @@
+[]

src/data/pyodide-settings.json

@@ -0,0 +1,3 @@
+{
+  "version": "^0.27.5"
+}