Implementing this should be fairly straight forward; most could be copied from https://github.com/yoshuawuyts/playground-stateful-choo/blob/master/index.js

If someone wants to implement this comment below; will guide and assist along the way where needed. If nobody steps up I'll build it out sometime this week. Cheers! ✨

I'm trying to create multiple widgets using cache-element/widget. Is it possible to have multiple widgets? It seems like its creating the first one and then just trying to update that one instead of creating the second one.

My example is in a dat-stats branch. I create the widgets here and load the widget here.

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

module.exports = createWidget

function createWidget () {
  // variables are bound in the closure
  return widget({
    onload: function () {
    },
    onunload: function () {
    },
    onupdate: function (link) {
    },
    render: function () {
      // return html
    }
  })
}

Closer to react's stateful components but without all the this stuff - also heaps less confusing and relying on implicit ordering of things

As @emmak pointed out having a pure render element would be cool - cache vanilla elements:

var pure = require('cache-element/pure')
var html = require('bel')

// this element is now cached without complicated comparisons
var el = Element()

function Element () {
  return pure(html`
    <section>
      <p>Hello world</p>
      <p>Hello planet</p>
    </section>
  `)
}

Feedback would be great!

It would be nice to have a UMD build to use with unpkg.

Now that nanocomponent is a thing I think we can change this lib to only cache elements statically I think; e.g. as per #17

Code:

function createStaticElement (element) {
  var isMounted = false
  var isProxied = false
  var proxy = null

  onload(element, handleLoad, handleUnload)

  return function render () {
    if (!isMounted) {
      return element
    } else if (!isProxied) {
      proxy = html`<div></div>`
      proxy.isSameNode = function (el) {
        return (el === element)
      }
    }
    return proxy
  }

  function handleLoad () {
    isMounted = true
  }

  function handleUnload () {
    isMounted = false
    isProxied = false
    proxy = null
  }
}

var cache = require('cache-element')
var html = require('bel')

var elInstance = null
var el = Element()

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

function Element () {
  return cache(function (name, age) {
    return html`
      <section>
        <p>The person's name is ${name}</p>
        <p>The person's age is ${age}</p>
      </section>
    `
  })
}

Keeps var is local scope which means less messing around with prev. In this case the compare arg is still optional, but by default it compares the list of args passed in the prior run against the subsequent run

Has anyone got a working example of this module? I'm trying to use it with leaflet and the examples in the readme don't appear to work.

I reread through the old cache-element code last night and compared it to the new cache-element, and I realized we lost some desirable behavior in the switchover to nanocomponent.

In the old cache-element, when the cache is invalidated, we do a pure re-render of the component and return that (just like a function that returns a belement). In the nanocomponent world, there simply is no way to do that. Nanocomponent will always return a proxy node and its up to you to internally morph any new changes.

Additionally, the current behavior of cache-element would be more aptly named freeze-element since once its rendered, it never updates again.

I propose that we take the current cache-element and turn it into a new component called freeze-element and then redo cache-element to work like it does in e5c5d74 but change it to use a prototype class API like nanocomponent uses. Or maybe do a cachelement (or call it horn? since trains have bel's and horns? edit: nm its taken :() that backs a higher level cache-element module in this repo that restores the old module's function signature?

I would be interested in doing this. What do you think about the name change?

It seems like the onload handler isn't called on the top level element. If I move the handler to the .inner element it works just fine.

Here is how my component looks like:

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

const myComponent = widget((update) => {
  update(onupdate)

  return html`   
    <div class='outer' onload=${onload} onunload=${onunload}>
      <div class='inner'></div>
    </div> 
  `

  function onupdate (stat, prev, send) {
   // update
  }

  function onload (el) {
    console.log('loaded')
  }

  function onunload () {
    // unload
  }
})

The first sentence in the README is

Cache a bel element.

But this lib can be used with anything as long as it creates a DOM element.
I think we should make it at least apparent.

Ex:

function createEl (name, age) {
  var element = document.createElement('p')
  element.innerHTML = `The person's name is ${name}`
  return element
}

Thoughts? 😃