Open MarcSkovMadsen opened 10 months ago
template="fast"
If I remove template="fast"
in app.py
and go through the steps again, it works. I've clicked the button multiple times. Each time pyodide has successfully run the python code
and the button gets an additional .
.
template='fast'
if I update by hand instead of with init_doc
and write_doc
.If I hand make the <script>
to specifically update the div
for the .servable()
element, it can work. You can see I've been clicking multiple times and each time the component has been rewritten and an additional .
added to the button name.
async function main() {
let pyodide = await loadPyodide();
window.pyodide = pyodide
await pyodide.loadPackage("micropip");
await pyodide.runPythonAsync(`
import micropip
await micropip.install(['https://cdn.holoviz.org/panel/wheels/bokeh-3.3.0-py3-none-any.whl', 'https://cdn.holoviz.org/panel/1.3.1/dist/wheels/panel-1.3.1-py3-none-any.whl', 'pyodide-http==0.2.1']);
`);
code = `
import panel as pn
pn.extension(template="fast")
button = pn.widgets.Button(name="Update")
button.js_on_click(code="update()")
pn.Row(button, pn.bind(lambda c: c, button.param.clicks)).servable(target="fb4cec10-fd14-4f89-bdfe-b56b70da57e6")
`
let myDiv = document.getElementById("fb4cec10-fd14-4f89-bdfe-b56b70da57e6");
while (myDiv.firstChild) {
myDiv.removeChild(myDiv.firstChild);
}
await pyodide.runPythonAsync(code).then(()=>{document.getElementsByTagName("body")[0].className=""});
}
async function update(){
console.log("updating")
code=code.replace("Update", "Update.")
let myDiv = document.getElementById("fb4cec10-fd14-4f89-bdfe-b56b70da57e6");
while (myDiv.firstChild) {
myDiv.removeChild(myDiv.firstChild);
}
await window.pyodide.runPythonAsync(code).then(()=>{console.log("finished")});
}
main();
I'm trying to figure out how I can make a code sandbox/ Panel playground with "hot reload".
To support templates and extensions I need to run my Panel app inside an iframe. Now I'm trying to figure out how I can hot reload the app in my iframe. I cannot figure out how to do this because I experience different issues reported with Pyodide in https://github.com/pyodide/pyodide/issues/4279.
BUT. Now I'm trying to do hot reload when the template, extensions and root do not change with
init_doc
andwrite_doc
. But I getI've been trying to understand why this happens. But its hard for me to understand the Panel pyodie code and even harder to debug as its running inside the browser.
Reproducible example
Start from the
app.py
file.Convert it
Update the
<script>
section toapp.html
```htmlServe the
app.html
file withpython -m http.server
and open it at http://localhost:8000/app.html.The app loads well.
But when clicking the button I see