lifecycle events as attributes?

I’ve been thinking about this a bit lately. The only reason you would ever need a class-based component (with a redux-style architecture) is if you need the lifecycle events.

The lifecycle events seem awfully similar to the onClick, onMouseDown event handlers, so I’m wondering if it would be possible to include those events like onMount as attributes on the vnodes?

Maybe they would only work on the component level, but with mutation observers, I think they could work on any element. Here’s some repos I’ve used in the past for the mutation events:

• mount: https://github.com/component/inserted
• unmount: https://github.com/component/removed

[matthewmueller]

for what it’s worth, this is what I settled on for functional components:

  return function mounts (node) {
    let attrs = node.attributes
    if (!attrs) return
    else if (!attrs.onMount && !attrs.onUnmount) return

    // create a mount using the ref
    let ref = node.attributes && node.attributes.ref

    node.attributes.ref = (el, send) => {
      const parent = el && el.parentNode

      if (attrs.onMount && el && !parent) {
        // when initially mounted, el will
        // exist but there won't be a parent.
        // we want to defer to ensure that
        // the dimensions have been calculated
        defer(function () { attrs.onMount(el, send) })
      } else if (attrs.onUnmount && !el && !parent) {
        // when unmounting, both el and
        // the parent will be null.
        defer(function () { attrs.onUnmount(null, send) })
      }

      // call original ref, if there is one
      ref && ref(el, send)
    }
  }

The problem I ran into with the previous approaches in the functional case was that inst would get reset and onMount would get called every re-render. By checking the actual element, it will only get called when the element is added and removed.

UPDATE: You’ll also need to add a check for the server. Here’s the complete example: https://github.com/matthewmueller/vcom/blob/2cbffdc7fe4ac2e10c9527c3cb9a0b4541333c7e/index.js#L179-L211

[developit]

@matthewmueller also: I wonder if it would be better to just steal the corresponding lifecycle method names from the Web Components spec?

<div
  createdCallback={ () => console.log('instantiated') }
  attachedCallback={ () => console.log('mounted') }
  detachedCallback={ () => console.log('unmounted') }
/>

Then we could really start to look into making Preact a mechanism for building and shipping Web Components…