Stuck on an issue?

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],
  }
)

2. 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.