Revert on-load attribute special case behaviour

[greghuc]

This PR reverts the special case behaviour added in "morph onload tags on root": so the root element on-load attribute value is not maintained from oldTree to newTree.

Why this change?

1. The current special case behaviour is breaking onUnload callbacks set up by the on-load library. Explanation below.
2. Nanomorph can't be a generally applicable library if it has special cases like this. The README says that nanomorph can "guarantee a consistent, out-of-the box experience for all your diffing needs". This special case definitely isn't consistent :-). It threw me for a while: I couldn't explain why onUnload callbacks weren't firing after I switched from morphdom to nanomorph.
3. If the intent of the special case behaviour is to enable onload/onunload lifecycle events for an html component that re-renders on data changes (with no on-load events on re-renders), then on-load does allow for this without the special case. Explanation below.

What's the issue with onUnload callbacks not firing?

This explanation requires understanding of the on-load library's source code..

For a given element, the on-load library updates the onloadid attribute value on every call to onload(el, on, off, caller), say from 'o1' -> 'o2'. This attribute value change is seen by on-load's MutationObserver, which then calls the off (onUnload) function associated with 'o1' (and the on (onLoad) function associated with 'o2').

The special case behaviour copies the onloadid attribute value from oldTree's root element to newTree's root element ('o1' -> 'o1'). If newTree already has an onloadid attribute (e.g. 'o2'), this is overwritten (with 'o1'). Since the root element's attribute value remains the same (always 'o1'), the MutationObserver doesn't fire, and the onUnload callback isn't called.

Thoughts on html components

I'm not sure why this special case was added in the first place. My guess is that it aims to help with the lifecycle of an html component that re-renders on data changes:

1. creation: an html component is rendered as renderedElement, and added to the dom. onload is called as we want the onLoad callback to fire:

renderedElement = bel'<span>${data}</span>'
onload(renderedElement, onLoad, onUnload, caller)
component = renderedElement
document.body.appendChild(component)

2. re-render: the component is re-rendered on data changes, with onload called as part of the process. But we don't want any on-load callbacks to fire as we're just re-rendering the same component. So we introduce the special case of maintaining the current onloadid attribute value between old and new versions of component, ignoring the new value from renderedElement:

renderedElement = bel'<span>${data}</span>'
onload(renderedElement, onLoad, onUnload, caller)
nanomorph(component, renderedElement)

3. deletion: the component is removed from the dom. The onUnload callback fires:

component.parentNode.removeChild(component)

If the special case was to avoid on-load callbacks on component re-renders, then there is a better way: for all onload(renderedElement, on, off, caller) calls made for the component, use the same unique-id for caller. The on-load library skips callbacks when the onloadid attribute value changes for an element, but the associated caller value stays the same. See sameOrigin function at: https://github.com/shama/on-load/blob/master/index.js#L55

Hope this makes sense!

[yoshuawuyts]

It definitely does! - See #63; we'll need to also fix this behavior upstream for this to work, but yeah agree (:

[greghuc]

@yoshuawuyts cool re removing special casing on #63. After seeing your remove onload pr for bel, I started using onload with bel directly, and it worked fine.

[yoshuawuyts]

yay

[yoshuawuyts]

v5.0.0