discussion: Change API to be in line with native DOM events?

[yoshuawuyts]

Part of the webcomponents spec is about custom elements. Event handlers for these elements are part of the specification and are triggered when certain actions occur. Having overlap between the methods morphdom / yo-yo / choo use, and what is native to the browser would be neat - less to learn, and in line with the philosophy of not introducing new abstractions on top of the DOM.

The custom elements events seem to have some overlap in behavior with the current morphdom-hooks api:

// custom elements                         // morphdom-hooks

.createdCallback()                         // no equiv
.attachedCallback()                        .onadd()
.detachedCallback()                        .ondiscard()
.attributeChangedCallback(attr, old, nw)   .onupdate()

But the overlap is not complete. There is no equivalent for .createdCallback() and .attributeChangedCallback(); for updates there's only .onupdate(). So if to mimick the custom elements api I'd propose:

.attachedCallback()
.detachedCallback()
.changedCallback()

Which is almost the same, but not entirely. I wonder if this would be a good change.

There's also another alternative, which is to move towards a .addEventListener() API, similar in spirit to https://github.com/shama/base-element/issues/7#issuecomment-107649072. This has the benefit of working with existing DOM manipulation libraries, allowing for potentially creative uses to happen:

// custom element style
.addEventListener('attach')
.addEventListener('detach')
.addEventListener('change')

// morphdom style
.addEventListener('add')
.addEventListener('discard')
.addEventListener('update')

// derpy custom style?
.addEventListener('add')
.addEventListener('remove')
.addEventListener('update')

// react derivative style?
.addEventListener('mount')
.addEventListener('unmount')
.addEventListener('update')

Anyway: I feel there's ways we could expose an API that requires less learning, and feels closer to the browser APIs. Thanks for reading through this wall of text, keen to hear your thoughts. Cheers!

[callum]

I've somehow completely missed this until now - sorry about that! Looks like you've got hooks all figured out in choo now anyway.

[yoshuawuyts]

:sparkles: haha yeah we should be all sweet - there's still some bugs, but we're churning through them :grin: