remove pys-on* and py-on* attributes (#1361)

* remove pys-on* and py-on* attributes

* update changelog

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

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

* fix eslint

---------

Co-authored-by: pre-commit-ci[bot] <66853113+pre-commit-ci[bot]@users.noreply.github.com>
This commit is contained in:
Madhur Tandon
2023-04-11 18:59:42 +05:30
committed by GitHub
parent f3db6a339c
commit e3602f464b
13 changed files with 29 additions and 97 deletions

View File

@@ -72,11 +72,6 @@ export function make_PyScript(interpreter: InterpreterClient, app: PyScriptApp)
/** Defines all possible py-on* and their corresponding event types */
const pyAttributeToEvent: Map<string, string> = new Map<string, string>([
// Leaving pys-onClick and pys-onKeyDown for backward compatibility
['pys-onClick', 'click'],
['pys-onKeyDown', 'keydown'],
['py-onClick', 'click'],
['py-onKeyDown', 'keydown'],
// Window Events
['py-afterprint', 'afterprint'],
['py-beforeprint', 'beforeprint'],
@@ -166,15 +161,15 @@ const pyAttributeToEvent: Map<string, string> = new Map<string, string>([
]);
/** Initialize all elements with py-* handlers attributes */
export async function initHandlers(interpreter: InterpreterClient) {
export function initHandlers(interpreter: InterpreterClient) {
logger.debug('Initializing py-* event handlers...');
for (const pyAttribute of pyAttributeToEvent.keys()) {
await createElementsWithEventListeners(interpreter, pyAttribute);
createElementsWithEventListeners(interpreter, pyAttribute);
}
}
/** Initializes an element with the given py-on* attribute and its handler */
async function createElementsWithEventListeners(interpreter: InterpreterClient, pyAttribute: string) {
function createElementsWithEventListeners(interpreter: InterpreterClient, pyAttribute: string) {
const matches: NodeListOf<HTMLElement> = document.querySelectorAll(`[${pyAttribute}]`);
for (const el of matches) {
// If the element doesn't have an id, let's add one automatically!
@@ -183,37 +178,16 @@ async function createElementsWithEventListeners(interpreter: InterpreterClient,
}
const handlerCode = el.getAttribute(pyAttribute);
const event = pyAttributeToEvent.get(pyAttribute);
if (pyAttribute === 'pys-onClick' || pyAttribute === 'pys-onKeyDown') {
const msg =
`The attribute 'pys-onClick' and 'pys-onKeyDown' are deprecated. Please 'py-click="myFunction()"' ` +
` or 'py-keydown="myFunction()"' instead.`;
createDeprecationWarning(msg, msg);
const source = `
from pyodide.ffi import create_proxy
Element("${el.id}").element.addEventListener("${event}", create_proxy(${handlerCode}))
`;
// We meed to run the source code in a try/catch block, because
// the source code may contain a syntax error, which will cause
// the splashscreen to not be removed.
try {
await interpreter.run(source);
} catch (e) {
logger.error((e as Error).message);
}
} else {
el.addEventListener(event, () => {
void (async () => {
try {
await interpreter.run(handlerCode);
} catch (e) {
const err = e as Error;
displayPyException(err, el.parentElement);
}
})();
});
}
el.addEventListener(event, () => {
void (async () => {
try {
await interpreter.run(handlerCode);
} catch (e) {
const err = e as Error;
displayPyException(err, el.parentElement);
}
})();
});
// TODO: Should we actually map handlers in JS instead of Python?
// el.onclick = (evt: any) => {
// console.log("click");
@@ -224,7 +198,7 @@ async function createElementsWithEventListeners(interpreter: InterpreterClient,
// }).then(() => {
// console.log("resolved")
// });
// // let handlerCode = el.getAttribute('py-onClick');
// // let handlerCode = el.getAttribute('py-click');
// // pyodide.runPython(handlerCode);
// }
}

View File

@@ -246,7 +246,7 @@ export class PyScriptApp {
//Takes a runtime and a reference to the PyScriptApp (to access plugins)
createCustomElements(interpreter, this);
await initHandlers(interpreter);
initHandlers(interpreter);
// NOTE: interpreter message is used by integration tests to know that
// pyscript initialization has complete. If you change it, you need to