question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Accept array of functions for event handlers

See original GitHub 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],
  }
)
  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.

Issue Analytics

  • State:closed
  • Created 6 years ago
  • Comments:5 (3 by maintainers)

github_iconTop GitHub Comments

1reaction
johan-gortercommented, Jan 18, 2018

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.
0reactions
CitrusFruitscommented, Jan 18, 2018

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

Read more comments on GitHub >

github_iconTop Results From Across the Web

Filling array on event and access it outside the event function ...
This is what I tried so far, but I just can't figure how to access the array outside the event handler function. Here's...
Read more >
Writing Event Handlers :: COM and DDE Support ... - MatLab
When writing an event handler function, use the Event Name argument to identify the source of the event. Get the arguments passed by...
Read more >
Event handling (overview) - Event reference - MDN Web Docs
The most flexible way to set an event handler on an element is to use the EventTarget.addEventListener method. This approach allows multiple ......
Read more >
MATLAB eventlisteners - MathWorks
This MATLAB function lists the events and their event handler routines registered ... has no registered events, eventlisteners returns an empty cell array....
Read more >
React onClick Event Handling (With Examples) - Upmostly
In React, the onClick handler allows you to call a function and perform an action when an element is clicked. onClick is the...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found