The assync nature seems to make st_javascript not update every streamlit run

[victorccaldas]

Problem:
streamlit-javascript does not run or fails to run on each streamlit rerun.
I was using javascript to update a counter in localStorage for everytime I pressed an html button.
While the counter in localStorage returned 10, st_javascript returned 5.

Important note: The error continued after updating streamlit at each button click.

Probable cause:
The async nature of the javascript code passed to streamlit-javascript, as seen in result = await eval("(async () => {return " + js_code + "})()"),

[BenSchZA]

Can confirm seeing similar behaviour with the following example.

streamlit_javascript.py:

from streamlit_javascript import st_javascript

script = 'await (async function () { return "test"; })()'
return_value = st_javascript(script)
print(return_value)

Execute script:

streamlit run streamlit_javascript.py

Result (with 3 page reloads):

0
test
0
test
0
test

[toolittlecakes]

I appears that the problem is not in async/await in result = await eval("(async () => {return " + js_code + "})()"), but in a way streamlit communicates with it's custom component: they launch with default state, than they subscribe to events and only than the executes either render or in this case componentDidMount methods.

And the streamlit gets the initial value first and then reruns on update of component.
I created another library that allows to check if the script has actually executed or it "in progress" and returned values is invalid yet.

Here is a discussion topic related to usage of localStorage via custom js code

Here is a library itself

[Strings-RH]

This is caused by a misunderstanding of when ReAct will re-evaluates the script.
It will be re-evaluate if the script changes, not if the result of the evaluation changes.