Hyperapp#2 lifecycle events helper

example.js

import { h } from 'hyperapp'
import Lifecycle, { withChildLifeCycle } from 'lifecycle'

// 'customEvent.detail' contains element triggered lifecycle event
// please use effects to properly manipulate dom element
const action = (state, customEvent) => state

// and somewhere 
<Lifecycle>
  <div oncreated={ action }>created</div>
</Lifecycle>

// or 
{ withChildLifeCycle(<form>
  <input type="text" oncreated={ action } />
</form>) }

lifecycle.js

import { h } from 'hyperapp'

const wrap = (method, eventName) => function (el){
  const event = new CustomEvent(eventName, { detail: el })
  setTimeout(() => el.dispatchEvent(event))
  return Object.getPrototypeOf(this)[method].call(this, el)
}

export const withChildLifeCycle = node => {
  return { ...node, props: {
    appendChild: wrap('appendChild', 'create'),
    removeChild: wrap('removeChild', 'remove'),
    ...node.props
  }}
}

export default (props, child) =>
  withChildLifeCycle(<div {...props} >{ child }</div>)

Also see, hyperapp-lifecycle