Advice in support in Vite

[siraisisatoru]

Hi,

I planned to execute Python code on my React and I tried multiple versions of React hooks and js libraries. I also tried this one sometime before but it does not work directly in Vite. Then I did quite a bit of research and managed to get Pyodide Ver 0.25 worker embedded in my React project (can execute code and install package). I may not be able to provide PR but I can provide my version of worker to provide some insights to make a Vite version of this work directly.

My Pyodide worker: https://github.com/siraisisatoru/react-markdown-template/blob/main/src/utils/js/py_worker.js
My Pyodide initialisation useAsync: https://github.com/siraisisatoru/react-markdown-template/blob/fa92e739b3b953695a69158ad2a608f65e6a155f/src/utils/markdownRender.jsx#L227
My Pyodide execution: https://github.com/siraisisatoru/react-markdown-template/blob/fa92e739b3b953695a69158ad2a608f65e6a155f/src/utils/codeblock.jsx#L42

[elilambnz]

Hi, when trying out react-py, did you follow the framework specific guide for Vite?

[siraisisatoru]

Hi,
My approach is to try to eliminate the issue of build your site and serve it. mentioned in framework specific guide for Vite.

I created a minimum test project using react-py and it returned a number of errors in dev mode even though I followed the framework specific guide

React code (App.jsx)

import { useState, useEffect } from "react";
import { PythonProvider } from "react-py";
import { usePython } from "react-py";

import "./App.css";
function Codeblock() {
    const [input, setInput] = useState("");

    // Use the usePython hook to run code and access both stdout and stderr
    const { runPython, stdout, stderr, isLoading, isRunning } = usePython();

    return (
        <>
            {isLoading ? <p>Loading...</p> : <p>Ready!</p>}
            <form>
                <textarea
                    onChange={(e) => setInput(e.target.value)}
                    placeholder="Enter your code here"
                />
                <input
                    type="submit"
                    value={!isRunning ? "Run" : "Running..."}
                    disabled={isLoading || isRunning}
                    onClick={(e) => {
                        e.preventDefault();
                        runPython(input);
                    }}
                />
            </form>
            <p>Output</p>
            <pre>
                <code>{stdout}</code>
            </pre>
            <p>Error</p>
            <pre>
                <code>{stderr}</code>
            </pre>
        </>
    );
}

function App() {
    useEffect(() => {
        navigator.serviceWorker
            .register("/react-py-sw.js")
            .then((registration) =>
                console.log(
                    "Service Worker registration successful with scope: ",
                    registration.scope
                )
            )
            .catch((err) => console.log("Service Worker registration failed: ", err));
    }, []);
    return (
        <>
            <PythonProvider>
                <Codeblock />
            </PythonProvider>
        </>
    );
}

export default App;

File Structure

.
├── dist
│   ├── assets
│   │   ├── index-DmChiKlk.js
│   │   ├── python-console-worker-BOxnldaN.js
│   │   ├── python-worker-kqh_kJwO.js
│   │   └── service-worker-DjzKVtwT.js
│   ├── index.html
│   └── react-py-sw.js
├── public
│   └── react-py-sw.js
├── src
│   ├── assets
│   ├── App.css
│   ├── App.jsx
│   ├── index.css
│   └── main.jsx
├── .eslintrc.cjs
├── .gitignore
├── index.html
├── package-lock.json
├── package.json
├── README.md
└── vite.config.js

However, it is possible to host dist folder using the vscode Go Live after I execute npm run build.

With an error.

---

In contrast, my approach does not require copying the worker, works in dev mode and does not produce errors.

Hosting page: https://siraisinotes-demo.web.app/reactpy_clone
Code: https://github.com/siraisisatoru/react-markdown-template/blob/main/src/page/reactpy_clone.jsx

• BTW I just found an logic error in my code and now it is fixed.