Execute pys-on* events when triggered, not at load (#686)

* Execute pys-on* events when triggered, not at load

Mimicing the behavior of Javascripts 'onLoad' event, we should
not be executing the use code at page-load time, only when
the event is triggered.

* Update examples to new syntax

* Fix merge issue

* Await running event handler code

* Restore pys-on* events with original behavior, deprecation warning

* [pre-commit.ci] auto fixes from pre-commit.com hooks

for more information, see https://pre-commit.ci

* xfail toga example

* Add missing { (typo)

* Adjust callback chandling to make linter happy

* Change alpha to latest (#760)

* Don't create custom elements in main and fix various small issues on tests (#747)

* Create custom elements when the runtime finishes loading

* Remove xfails and fix repl integration test

* Fix commented ignore

* Address Antonio's comments

* Fix bad rebase

* Make ure to wait for repl to be in attached state before asserting content

* Move createCustomeElement up so it runs before we close the loader, xfail flaky d3 test

* Fix xfail

* [pre-commit.ci] pre-commit autoupdate (#762)

updates:
- [github.com/pre-commit/mirrors-eslint: v8.23.0 → v8.23.1](https://github.com/pre-commit/mirrors-eslint/compare/v8.23.0...v8.23.1)

Co-authored-by: pre-commit-ci[bot] <66853113+pre-commit-ci[bot]@users.noreply.github.com>

* change documentation to point to latest instead of frozen alpha (#764)

* Toga example is xpass

* Correct 'xpass' to 'xfail' mark

Co-authored-by: pre-commit-ci[bot] <66853113+pre-commit-ci[bot]@users.noreply.github.com>
Co-authored-by: Peter W <34256109+pww217@users.noreply.github.com>
Co-authored-by: Fábio Rosado <fabiorosado@outlook.com>
This commit is contained in:
Jeff Glass
2022-09-14 20:33:42 -05:00
committed by GitHub
parent 1c0be16f30
commit 0b014eea56
7 changed files with 20 additions and 11 deletions

View File

@@ -106,7 +106,7 @@ pyscript.run_until_complete(start())
</py-script>
<div class="mb10">
<button id="trackbutton" class="bx--btn bx--btn--secondary" type="button" py-onClick="toggle_video">
<button id="trackbutton" class="bx--btn bx--btn--secondary" type="button" py-onClick="toggle_video()">
Toggle Video
</button>
<button id="nextimagebutton" class="mt10 bx--btn bx--btn--secondary" type="button" disabled>

View File

@@ -131,7 +131,7 @@ pyscript.run_until_complete(start())
<div class="mb10">
<p>Use < > to move, ↓ to crouch and x to jump. If video is enabled, say hi to jump as well! </p>
<button id="trackbutton" class="bx--btn bx--btn--secondary" type="button" py-onClick="toggle_video">
<button id="trackbutton" class="bx--btn bx--btn--secondary" type="button" py-onClick="toggle_video()">
Start Video
</button>
<div id="update-note" py-mount class="updatenote mt10">loading model ..</div>

View File

@@ -49,7 +49,7 @@
<div id="python-status">Python is currently starting. Please wait...</div>
</p>
<p>
<button id="run-all-button" class="btn btn-primary" type="submit" py-onClick="run_all_micrograd_demo">Run All</button><br>
<button id="run-all-button" class="btn btn-primary" type="submit" py-onClick="run_all_micrograd_demo()">Run All</button><br>
<py-script src="/micrograd_ai.py"></py-script>
<div id="micrograd-run-all-print-div"></div><br>
<div id="micrograd-run-all-fig1-div"></div>

View File

@@ -49,8 +49,8 @@
</div>
</div>
<div class="control">
<button id="run" type="button" class="button is-primary" py-onClick="run">Run!</button>
<button id="clear" type="button" class="button is-danger" py-onClick="clear">Clear</button>
<button id="run" type="button" class="button is-primary" py-onClick="run()">Run!</button>
<button id="clear" type="button" class="button is-danger" py-onClick="clear()">Clear</button>
</div>
</div>

View File

@@ -28,7 +28,7 @@
</div>
<div>
<input id="new-task-content" class="py-input" type="text">
<button id="new-task-btn" class="py-button" type="submit" py-onClick="add_task">
<button id="new-task-btn" class="py-button" type="submit" py-onClick="add_task()">
Add task
</button>
</div>

View File

@@ -227,12 +227,20 @@ async function createElementsWithEventListeners(runtime: Runtime, pyAttribute: s
}
const handlerCode = el.getAttribute(pyAttribute);
const event = pyAttributeToEvent.get(pyAttribute);
const source = `
from pyodide.ffi import create_proxy
Element("${el.id}").element.addEventListener("${event}", create_proxy(${handlerCode}))
`;
await runtime.run(source);
if (pyAttribute === 'pys-onClick' || pyAttribute === 'pys-onKeyDown'){
console.warn("Use of pys-onClick and pys-onKeyDown attributes is deprecated in favor of py-onClick() and py-onKeyDown(). pys-on* attributes will be deprecated in a future version of PyScript.")
const source = `
from pyodide.ffi import create_proxy
Element("${el.id}").element.addEventListener("${event}", create_proxy(${handlerCode}))
`;
await runtime.run(source);
}
else{
el.addEventListener(event, () => {
(async() => {await runtime.run(handlerCode)})();
});
}
// TODO: Should we actually map handlers in JS instead of Python?
// el.onclick = (evt: any) => {
// console.log("click");

View File

@@ -240,6 +240,7 @@ class TestExamples(PyScriptTest):
assert self.page.title() == "Todo App"
wait_for_render(self.page, "*", "<input.*?id=['\"]new-task-content['\"].*?>")
@pytest.mark.xfail(reason="To be moved to collective and updated, see issue #686")
def test_toga_freedom(self):
self.goto("examples/toga/freedom.html")
self.wait_for_pyscript()