Update template to respect pyodide v0.18 recommended style

xhlulu · xhlulu · commit b71d1996f432 · 2021-09-18T23:26:56.000-04:00
diff --git a/public/index.html b/public/index.html
@@ -25,11 +25,7 @@
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
     <title>React App</title>
-    <script type="text/javascript">
-      // set the pyodide files URL (packages.json, pyodide.asm.data etc)
-      window.languagePluginUrl = 'https://cdn.jsdelivr.net/pyodide/v0.17.0/full/';
-    </script>
-    <script src="https://cdn.jsdelivr.net/pyodide/v0.17.0/full/pyodide.js"></script>
+    <script src="https://cdn.jsdelivr.net/pyodide/v0.18.1/full/pyodide.js"></script>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
diff --git a/src/App.js b/src/App.js
@@ -1,25 +1,28 @@
 import { useEffect, useState } from 'react';
-import script from './python/script.py';
+import script from './python/main.py';
 import logo from './logo.svg';
 import './App.css';
 
-function App() {
-  const [output, setOutput] = useState("(loading...)");
+const runScript = async (code) => {
+  const pyodide = await window.loadPyodide({
+    indexURL : "https://cdn.jsdelivr.net/pyodide/v0.18.1/full/"
+  });
 
-  const runScript = code => {
-    window.pyodide.loadPackage([]).then(() => {
-      const output = window.pyodide.runPython(code);
-      setOutput(output);
-    })
-  }
+  return await pyodide.runPythonAsync(code);
+}
+
+const App = () => {
+  const [output, setOutput] = useState("(loading...)");
 
   useEffect(() => {
-    window.languagePluginLoader.then(() => {
-      fetch(script)
-        .then(src => src.text())
-        .then(runScript)
-    })
-  })
+    const run = async () => {
+      const scriptText = await (await fetch(script)).text();
+      const out = await runScript(scriptText);
+      setOutput(out);
+    }
+    run();
+
+  }, []);
 
   return (
     <div className="App">
diff --git a/src/python/main.py b/src/python/main.py
