lifecycle events

[joshgillies]

Adds onload and onunload lifecycle hooks.

[WebReflection]

Remember, hyperHTML.wire() witohut a reference does the whole parsing circus every single time.

You are working with components here, and using an explicit render() method.

If I were you, I would drop the render(render, whatever) { return rendertemplate; } and use the following approach instead:

const Button = component({
  onload: (e) => {
    console.log(e, 'loaded')
  },
  onunload: (e) => {
    console.log(e, 'unloaded')
  },
  render: (text) => hyperHTML.wire(this)`
    <button onclick="${(e) => e.target.parentNode.removeChild(e.target)}">
      ${text}
    </button>
  `
})

and I am assuming you are using different instances of the same component each time.

With my example, you'd parse the template and create the magic hyperHTML hooks lazily and only the very first time. Every other time that .render(text) call will be lightening fast 😉

[joshgillies]

@WebReflection thanks so much for the above feedback! I'm going to merge this PR as it serves as a nice base for what I'm now working on in #2. Please feel free to take a look if you have the time. 👍