Enhance coding experience
We need to have a single web worker which persists across all relevant routes to eliminate the problem where the first execution on an editor is slow.
We attempt to do this by lifting the PythonProvider up to the SidebarLayout level.
stdout and stderr will require some modification, only update display when the editor's ID is prepended to stdout or stderr.
I may need to modify this - https://github.com/elilambnz/react-py/blob/main/src/hooks/usePython.ts#L123
Instead of modifying the package, each Python editor may be able to send a special message when it begins executing it's code.
runPython(`${writeFilesPreamble()}\nprint(${id})\n${tabs[tabIndex].content}`)
In this way, we can have a useEffect which only updates an internal output. So we have a global output which comes from react-py, and an internal output which we manage using state and effect. Our internal output only changes for global output changes which have the correct ID prepended to them.
Context needs to be in the layout so that it is shared across page navigations. Some client component children like Editors in the MDX should be able to access the context, but MDX does not work with app router (at least I can't figure it out) https://github.com/vercel/next.js/issues/50110
usePython hook runs even with no provider. The provider seems to pass information about packages and stuff down to consumers. This information seems to be all optional.
Each usePython hook does some useEffect stuff to load the worker script. https://github.com/elilambnz/react-py/blob/main/src/providers/PythonProvider.tsx#L23. Because each usePython hook has it's own useEffect to load this, and each editor calls usePython, this loads many Pythons.
The usePython hook can maybe be migrated into a context that can be shared, either by rerolling the package or just importing stuff if that works.