How to safely forward vnode.attrs to other vnodes? #3012

mondolirondo · 2025-04-02T08:11:47Z

mondolirondo
Apr 2, 2025

I'm trying to understand how should I work with Mithril Components, and I'm getting a bit confused.
I have read the documentation and could not understand what is happening.

According to:

https://mithril.js.org/components.html#don't-forward-vnodeattrs-itself-to-other-vnodes

I should not forward vnode.attrs to other vnodes. I see the example and I think that I understand why (spoiler: I don't).

I'm trying to create a simple button component to apply a common style to all the buttons in my application.
Something like:

var MyButton = {
    view: function (vnode) {
        return m('button.my-class', {title: vnode.attrs.tooltip || ''}, vnode.children);
    }
};

But when I use it like this:

m.render(myRootElement, m(MyButton, {tooltip: 'Hello', onclick: e => alert('Hello')}, 'Hello'));

Everything looks as expected, except the onclick handler, that never gets called.
However, if I define:

var MyButton = {
    view: function (vnode) {
        return m('button.my-class', {...vnode.attrs, title: vnode.attrs.tooltip || ''}, vnode.children);
    }
};

Everything works including the onclick handler, but I'm doing what I was supposed not to do!: forwarding vnode.attrs. (By the way, from the example and explanation in the previous link I was expecting the alert() message to appear twice, which is not the case).

What am I misunderstanding?
How can I achieve the desired result without forwarding vnode.attrs?

Answered by dead-claudia

Apr 10, 2025

If that's the case, I was wondering if it would be safe to remove them before forwarding the attrs object (as well as any attribute defined and used only by the component itself).

@mondolirondo You're looking for https://mithril.js.org/censor.html, which does exactly that. It also covers a couple bases you missed:

It also drops attrs.key, so it won't muck with fragments. You probably don't want stuff like [m("a", m.censor(attrs)), m("input[type=number")] to be seen as conditionally-keyed.
To improve performance, it avoids using delete, instead building the object manually and just skipping those keys.
If you have custom attributes (as appears the case here), you can strip those out wit…

View full answer

dead-claudia · 2025-04-03T00:04:54Z

dead-claudia
Apr 3, 2025
Maintainer

You at minimum have to forward onclick for it to work.

var MyButton = {
    view: function (vnode) {
        return m('button.my-class', {title: vnode.attrs.tooltip || '', onclick: vnode.attrs.onclick}, vnode.children);
    }
};

Event listeners are only called on the DOM vnode itself, not on outer component attributes as well. Or to put it another way, events only bubble through the DOM itself, not through Mithril.

Worth mentioning that this is also the case with native custom elements unless composed: true is set on the event at its construction. This is set for all UI events, but not for most other events.

4 replies

mondolirondo Apr 9, 2025
Author

Thanks for your answer!
The point is that if I want to keep it flexible, I should forward every possible event handler (onclick, onmousedown, etc.). In the case of a button (probably a bad example), forwarding onclick may cover 99% of use cases. However, for other components (like a text input/area) with richer interaction schemes, the list would be much longer and more open.
Based on the examples and your answer, I was suspecting that maybe the problems arise from the lifecycle events solely and not other event handlers or attributes. If that's the case, I was wondering if it would be safe to remove them before forwarding the attrs object (as well as any attribute defined and used only by the component itself). Something like this:

function hopefullySafeToForwardAttrs(attrs) {
    const attrsCopy = {...attrs};
    delete(attrsCopy.oninit);
    delete(attrsCopy.oncreate);
    delete(attrsCopy.onupdate);
    delete(attrsCopy.onbeforeremove);
    delete(attrsCopy.onremove);
    delete(attrsCopy.onbeforeupdate);
    return attrsCopy;
}

var MyButton = {
    view: function (vnode) {
        const forwardAttrs = hopefullySafeToForwardAttrs(vnode.attrs);
        delete(forwardAttrs.tooltip);
        return m('button.my-class', {...forwardAttrs, title: vnode.attrs.tooltip || ''}, vnode.children);
    }
};

Any thoughts on this?

dead-claudia Apr 10, 2025
Maintainer

If that's the case, I was wondering if it would be safe to remove them before forwarding the attrs object (as well as any attribute defined and used only by the component itself).

@mondolirondo You're looking for https://mithril.js.org/censor.html, which does exactly that. It also covers a couple bases you missed:

It also drops attrs.key, so it won't muck with fragments. You probably don't want stuff like [m("a", m.censor(attrs)), m("input[type=number")] to be seen as conditionally-keyed.
To improve performance, it avoids using delete, instead building the object manually and just skipping those keys.
If you have custom attributes (as appears the case here), you can strip those out with it, too.

Answer selected by mondolirondo

mondolirondo Apr 11, 2025
Author

Many thanks, @dead-claudia! It was the information and the solution I was looking for, indeed.
I totally missed it!
(Maybe it would be worth mentioning it in the aforementioned documentation: https://mithril.js.org/components.html#don't-forward-vnodeattrs-itself-to-other-vnodes )

dead-claudia Apr 11, 2025
Maintainer

(Maybe it would be worth mentioning it in the aforementioned documentation: https://mithril.js.org/components.html#don't-forward-vnodeattrs-itself-to-other-vnodes )

Done. Check out that link again. 🙂

Also, if you ever have other docs suggestions, we have an entire repo for that: https://github.com/MithrilJS/docs

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

How to safely forward vnode.attrs to other vnodes? #3012

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Replies: 1 comment 4 replies

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

Select a reply

How to safely forward vnode.attrs to other vnodes? #3012

mondolirondo Apr 2, 2025

Replies: 1 comment · 4 replies

dead-claudia Apr 3, 2025 Maintainer

mondolirondo Apr 9, 2025 Author

dead-claudia Apr 10, 2025 Maintainer

mondolirondo Apr 11, 2025 Author

dead-claudia Apr 11, 2025 Maintainer

mondolirondo
Apr 2, 2025

Replies: 1 comment 4 replies

dead-claudia
Apr 3, 2025
Maintainer

mondolirondo Apr 9, 2025
Author

dead-claudia Apr 10, 2025
Maintainer

mondolirondo Apr 11, 2025
Author

dead-claudia Apr 11, 2025
Maintainer