Accept array of functions for event handlers

At my company, we’ve been using maquette a lot for a new project of ours and one thing that I keep running into and thinking “wow it would be nice if maquette did this” is optionally accepting an array of handlers for any event.

Consider the toy script below

document.addEventListener("DOMContentLoaded", function () {
  const h = maquette.h,
    domNode = document.body,
    projector = maquette.createProjector(),
    store = {},
    calculateWidth = (element) => {
      store.width = `${element.getBoundingClientRect().width}px`;
      projector.scheduleRender();
    },
    storeElement = (element) => {
      store.element = element;
    },
    storeElementAndCalculateWidth = (element) => {
      storeElement(element);
      calculateWidth(element);
    };

  const renderMaquette = () => {
    return h("div", [
      h("div",
        {
          class: "my-div",
          styles: {
            width: `${store.width}`,
          },
        },
        [
          "Div",
        ]
      ),
      h("input",
        {
          afterCreate: storeElementAndCalculateWidth,
        }
      ),
    ]);
  };
  projector.append(domNode, renderMaquette);
});

I would like to remove the need for functions like storeElementAndCalculateWidth. I propose one of two solutions.

1. accepting arrays into afterCreate, onclick, onkeypress, etc.

i.e.

h("input",
  {
    afterCreate: [storeElement, calculateWidth],
  }
)

1. Accepting arrays into plural versions of all existing event handlers: afterCreates, onclicks, onkeypresses, etc.

h("input",
  {
    afterCreates: [storeElement, calculateWidth],
  }
)

If you find this to be a good idea, there’s a good chance I could make this change and submit a pull request for it.

[johan-gorter]

The algorithm for event handlers in maquette3 is as follows:

1. Instead of attaching the the event handler that is provided in the VNode to the DOM, we attach a generic event handler.
2. This generic event handler, when invoked, travels up through the evt.currentTarget’s parentElements to the root of the projection, storing the path of DOM Nodes encountered.
3. The VNode-tree for that projection is then used to follow the path obtained from the previous step to find the right VNode in the tree.
4. The event handler on that VNode is then invoked.

[CitrusFruits]

That’s really awesome. Thanks for the help and the explanation, it’s interesting stuff.