cache

fun-component/cache

Cache component element for reuse.

Usage

When working with 3rd party libraries you might not want the element to rerender every time it is removed and added back to the page. This examples illustrates caching a Mapbox container element.

const html = require('nanohtml')
const component = require('fun-component')
const cache = require('fun-component/cache')

const map = component(function map (ctx, coordinates) {
  return html`<div class="Map"></div>`
})

// register cache middleware
map.use(cache())

map.on('load', function (ctx, el, coordinates) {
  if (ctx.map) {
    // recenter existing map
    ctx.map.setCenter([coordinates.lng, coordinates.lat])
  } else {
    // initialize new map
    ctx.map = new mapboxgl.Map({
      container: el,
      center: [coordinates.lng, coordinates.lat],
    })
  }
})

map.on('update', function (ctx, [coordinates], [prev]) {
  if (coordinates.lng !== prev.lng || coordinates.lat !== prev.lat) {
    ctx.map.setCenter([coordinates.lng, coordinates.lat])
  }
  return false
})

API

cache()

Create middleware that saves a reference to mounted element as ctx.cached. Use this property to check whether a new element is being mounted or if using the cache.

Clearing cached elements

Unset ctx.cached to have a element be re-created on next render.

const html = require('nanohtml')
const component = require('fun-component')
const cache = require('fun-component/cache')

const render = component(function uncached (ctx) {
  return html`<div></div>`
})

// register cache middleware
render.use(cache())

render.on('unload', function (ctx) {
  // unset cache to create a new element on next render
  if (someCondition) delete ctx.cached
})