Add full access to browser environment in pyodide

[TobiasHT5]

I didn't know how to phrase the title any better, but I'll just describe what I mean.

Pyodide running in the main thread of the browser has access to core attributes like window, document, Audio etc, which are important for building a good web web experience on some webapp I'm working on with flet. I've been trying to access these attributes with flet running on pyodide but I was getting attribute errors. A search on pyodide issues revealed that pyodide running on worker threads may not have access to such core attributes that are only available on the main thread.
Is there a way we can make this attribute available to flet web apps?

[FeodorFitsner]

I don't remember why I decided to put pyodide into worker, maybe the concern was CPU-intensive methods freezing UI.

You can give it a try and rewrite it to be initialized in the main thread to see if that works:
https://github.com/flet-dev/flet-build-template/tree/main/%7B%7Bcookiecutter.out_dir%7D%7D/web

If that works we could give users the option then and explain the differences.

[FeodorFitsner]

No worries, we all learn from this project :)

[TobiasHT5]

@FeodorFitsner thought it's possible to postMessage the needed objects but turns out you can't do that. So the python-worker.js file code needs to just be modified to run in python.js. It seems to do the trick but haven't figured out how to address your issue of CPU intensive task blocking the UI. Don't even know where to start. Haven't faced the challenge though. I think it'd probably be good to have a build tag such as --run_pyodide_on_main (or probably something shorter) which builds the webapp with pyodide running on main. Access to the the window, document and other browser attributes is quite useful and important in some use cases.

[FeodorFitsner]

An option sounds good. Are you able to share your python.js?

[TobiasHT5]

well @FeodorFitsner my attempt was to copy parts of python-worker.js into python.js and strip unnecessary code.
I remained with something like this.

importScripts("https://cdn.jsdelivr.net/pyodide/v0.24.1/full/pyodide.js");

let micropipIncludePre = false;
let pythonModuleName = null;
let initialized = false;
let flet_js = {}; // namespace for Python global functions

let initPyodide = async function () {
    let pyodide = await loadPyodide();
    pyodide.registerJsModule("flet_js", flet_js);
    flet_js.documentUrl = documentUrl;
    await pyodide.loadPackage("micropip");
    let pre = micropipIncludePre ? "True" : "False";
    await pyodide.runPythonAsync(`
    import micropip
    import os
    from pyodide.http import pyfetch
    response = await pyfetch("app.tar.gz")
    await response.unpack_archive()
    if os.path.exists("requirements.txt"):
        with open("requirements.txt", "r") as f:
            deps = [line.rstrip() for line in f]
            print("Loading requirements.txt:", deps)
            await micropip.install(deps, pre=${pre})
  `);
    pyodide.pyimport(pythonModuleName);
};

await initPyodide();

still don't think it's the ideal

[TobiasHT5]

@FeodorFitsner apparently what I considered to be working was just cached code, so I unfortunately don't know if that snippet even works now.

[TobiasHT5]

Are we still considering this option though? Of running pyodide in the main thread instead of worker thread?