Widgets with choo

I’m trying to create a reusable element that implements Quill but I can’t figure out how to do it. The issue I’m having is that on re-render the Quill editor gets wiped; I don’t know how to maintain the state of it.

The most basic example:

const html = require('choo/html')
const onload = require('on-load')
const Quill = require('quill')

module.exports = richtext

function richtext (state, prev, send) {
  const div = html`<div></div>`
  onload(div, (el) => {
    const quill = new Quill(el)
    quill.on('text-change', () => {
      send() // triggers re-render and DOM state is lost
    })
  })
  return div
}

I used virtual-widget a while back - something like that would be ideal for this.

[yoshuawuyts]

Yay, all the PRs have been merged and it should all be working. As per #1 we’re now building out cache-element/widget which should allow for super clean widgetization of elements ✨ The API looks like this:

const widget = require('cache-element/widget')
const html = require('bel')

const renderEl = widget(function (update) {
  let name = null
  let age = null

  update(onupdate)

  return html`
    <p onload=${onload} onunload=${onunload}>
      Name is ${name} and age is ${age}
    </p>
  `

  function onupdate (newName, newAge) {
    name = newName
    age = newAge
  }

  function onload () {
    console.log('added to DOM')
  }

  function onunload () {
    name = null
    age = null
    console.log('removed from DOM')
  }
})

let el = renderEl('Tubi', 12) // creates new element
let el = renderEl('Tubi', 12) // returns cached element (proxy)
let el = renderEl('Babs', 25) // returns cached element (proxy)

I think this should answer your question; consider watching / contributing to cache-element to get this out faster, but in essence all the lower level components now work and exist 😁

[yoshuawuyts]

waiting on https://github.com/patrick-steele-idem/morphdom/issues/77 to be published; made a demo on how to create widgets with the isSameNode() API here: https://github.com/shama/on-load/issues/10#issuecomment-246118634 (e.g. thunking!)

This should provide exactly the experience we intended to have from the start 🎉