Arbitrary 'on*' handlers

[daurnimator]

Can we support any on* handlers on any element?

• Use a namespaced attribute in html to know that it's lua? e.g. <button lua:onclick="foo()">
• Use a mutation observer to watch for adding/removal of the :on* properties
• Would mean that at load time we have to iterate every element to check for attributes: is that too expensive?
  • The query selector [attr^=val] is for the value starting with 'val', not attribute names starting with 'val'.

[ashwalk33r]

Why (applies to each point)?

Why do you want to see a events bound to HTML element from HTML markup itself? How this is beneficiary in contrast to its persumed cost (cost of runnig through each HTML element can be tested by you on your browser)

Mutation observers are not supported in some browsers: https://caniuse.com/#feat=mutationobserver

Queries: would it be OK https://github.com/jquery/sizzle/wiki ?

[daurnimator]

Why do you want to see a events bound to HTML element from HTML markup itself? How this is beneficiary in contrast to its persumed cost (cost of runnig through each HTML element can be tested by you on your browser)

Because one of the goals of fengari is to make it possible to use Lua in the browser wherever you would write JS instead. As people write things like <button onclick="submit()"/>, I want to make that possible writing lua instead.

Mutation observers are not supported in some browsers: https://caniuse.com/#feat=mutationobserver

All modern browsers are in there: if this one feature doesn't work in IE10 then so-be-it. (or can fall back to some horrifically expensive alternate API where all events on all DOM objects are monitored)

Queries: would it be OK https://github.com/jquery/sizzle/wiki ?

See #15

[daurnimator]

Misc notes:

• Do we need to watch sub-documents (like in iframes?)
• Should we automatically start .observe on page load? or make it opt-in?
  • Perhaps have it opt-in to start with?
• attributeFilter only takes an array of specific attributes. there's no way to e.g. specify a prefix natively

Example MutationObserver code:

const cb = function(mutationRecord) {
  const attributeName = mutationRecord.attributeName;
  const target = mutationRecord.target;
  // trim off `lua:` prefix
  const name = attributeName.substring(4);
  if (!(name in target)) {
    console.warn("Invalid field for target", mutationRecord);
    return;
  }
  const attr = mutationRecord.target.attributes[attributeName];
  if (attr === void 0) {
    // has been removed; should use `removeEventListener`
  } else {
    console.log("Setting on* handler", mutationRecord);
    const value = attr.nodeValue;
    const func = fengari.load(value);
    target[name] = func; // Should use `addEventListener` here
  }
};
const observer = new MutationObserver(function(mutationList, observer) {
  mutationList
    .filter((mutationRecord) => mutationRecord.attributeName.startsWith("lua:on"))
    .forEach(cb);
}); 
observer.observe(document, {
  subtree: true,
  attributes: true,
});