Waiting js till pyscript loads up

[MasterANK]

Hi, I am working on a project and I am currently stuck on the issue where javascript runs before Pyscript and causing some issues where I can access a python object causes it hasn't been declared by Pyscript. I looked into the documentation and it has been stated there that this issue can occur but to solve it they are just delaying the program until a button is clicked which is not ideal for my case.

Link to doc:(https://docs.pyscript.net/latest/guides/passing-objects.html#javascript-to-pyscript:~:text=Since%20PyScript%20tags,would%20be%20valid.)

So I would like to know what other ways I can use instead of a button to run my javascript after Pyscript has loaded up

[WebReflection]

there are events dispatched via pyscript but also a globally shared registry that should guarantee when py-script element is defined the interpreter and the rest of the logic should be available.

customElements.whenDefined('py-script').then(() => {
  // here py-script is surely ready to go
});

// alternative: in a module, via top-level await
await customElements.whenDefined('py-script');

[MasterANK]

The code you have provided do wait until pyscript is defined but the issue is the elements inside the pyscript tags are still not defined.

Like when I run this code:

customElements.whenDefined('py-script').then(() => {
    console.log(`In Python right now`)
    console.log(pyscript.interpreter.globals.get('main'))
 });

I get this as an output log:

[pyscript/main] Executing <py-script> tags...
In Python right now
[pyscript/main] Initializing web components...
[pyscript/main] Startup complete
[py-splashscreen] Closing
[pyscript/main] PyScript page fully initialized
Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'globals')

The last line is a error message: Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'globals')

Is there a way to solve this?

Cause when I use the button method it works completely fine and I get this message on the log
In Python right now, x = <function main at 0xe5d8f0>

[WebReflection]

yes, my bad, my hint wasn't about having the interpreter running, it was about having py-script around, however, one component surely available when the interpreter is ready is py-repl and that's created only after the interpter has been fully bootstrapped.

customElements.whenDefined('py-repl')

this should do for you use case, keeping the rest of the code the same.

If it doesn't I have other ideas so for now, let's try to keep it simple for you.

edit OK, it doesn't work, I'll write another hint ASAP.

[WebReflection]

OK, this is tested and working as expected. It simply tries until the interpreter is ready, starting to try when the py-script element is defined and never before.

This is not super elegant but it gets the job done in a non-blocking, prettty fast, way.

(IMHO) We should have a better way to do this and we will have such better way in next.

<script type="module">
  const interpreter = await customElements.whenDefined('py-script').then(
    function retry() {
      return pyscript.interpreter ||
             new Promise(resolve => queueMicrotask(resolve)).then(retry);
    }
  );

  console.log('Ready', interpreter.globals);
</script>

[MasterANK]

Thanks For the Response, Even though it's a bit complex for someone who is not familiar with javascript this looks super complex but it did work perfectly.

I actually did manage to somehow do this in a simpler way which is,

<script>
    var ispython = false;
    var mainloop = setInterval(function() {
        if (ispython) {
            x = pyscript.interpreter.globals.get('k')
            console.log("k")
        }
        }, 1000);
</script>
<py-script>
    import js
    k=10
    js.ispython = True
</py-script>

here ispython works as a flag and is placed at the end of the py-script code and gets true only when pyscript has finished compiling.

Really Thanks for your reply, as your solution seems can cover all situations.

I am pretty new to javascript so I hope my solution may help others who are also new to Javascript as well.

[WebReflection]

minor nitpicking here:

• I would reduce the interval time or you risk to wait 3+ seconds before anything is usable
• you need to clearInterval(mainloop) when ispython is true otherwise you'll keep executing that interval forever
• this is still not ideal at all as solution, but next will have you covered in a more elegant way (or let's say more standard)

[MasterANK]

Yea it's my bad that I forgot to add "clearinterval" in "mainloop" because I just copied the relevant lines from my project as my project just works in a continuous loop.

Thanks for pointing it out though and regarding a proper way, I will be looking forward for that.