How to access a property of App() globally (in React App, from pyodide)

Question

I have implemented pyodide in a React App like so.

In src/App.js in the example from the link above, let's say I have someProperty in App() that I want to access from script.py.

const App = () => {
  const [output, setOutput] = useState("(loading...)");
  const [someProperty, setSomeProperty] = useState("Initial state");  // this one
  const runScript = code => {
    window.pyodide.loadPackage([]).then(() => {
  ...

Under normal circumstances of pyodide, I would use import js to access javascript scope from python like in the docs.

The JavaScript scope can be accessed from Python using the js module (see Using Javascript objects from Python). This module represents the global object window that allows us to directly manipulate the DOM and access global variables and functions from Python.

However, the property is inside App(), not directly under window.

How would I access someProperty inside App() from script.py?

In other words, where is App() located under window property? Is it even possible to access properties of App() globally?

Answer 1

You should be able to create a JS object that has access to those local variables

let my_module = {
  someProperty : function(){
    return someProperty;
  }
};

that you can then register as a Python module with,

pyodide.registerJsModule("my_js_module", my_module);

so it can then imported as,

from my_js_module import someProperty

See the documentation for more details. This will only work with the development version of pyodide or the upcoming 0.17.0 release.