Skip to content


Folders and files

Last commit message
Last commit date

Latest commit



19 Commits

Repository files navigation

NanocomponentCache stability

npm version build status downloads js-standard-style

Cache a nanocomponent instance by key. Creates a new instance if the key doesn't exist, otherwise returns the cached instance. A subclass of class-cache providing sane GC function defaults and a set of examples of intended usage. Optional LRU caching.


const NanocomponentCache = require('nanocomponent-cache')
const compare = require('nanocomponent/compare')
const Nanocomponent = require('nanocomponent')
const Tweet = require('twitter-component')
const assert = require('assert')
const html = require('bel')

class TweetList extends Nanocomponent {
  constructor () {
    this.tweetList = null
    // auto-eject last used instances over 100 total cached = new NanocomponentCache({ lru: 100 })
    // Register the components you will be caching, {args: [{ placeholder: false }]} )

  createElement (tweetList) {
    assert(isArray(tweetList), 'tweetList must be an array of tweet URLs')
    this.tweetList = tweetList // Cache a reference to tweetList
    const nc =
    return html`
        ${ => nc.get(tweetURL).render(tweetURL))}

  update (tweetList) {
    assert(isArray(tweetList), 'tweetList must be an array of tweet URLs')
    return compare(this.tweetList, tweetList)

  afterupdate (el) {
    // Periodically run the GC function to clean up unused instances.

module.exports = TweetList



$ npm install nanocomponent-cache


NanocomponentCache = require('nanocomponent-cache')

Require NanocomponentCache class.

c = new NanocomponentCache([opts])

Create a new cache instance.

opts include:

  gc: (component) => !component.element // a default garbage collection function
  args: [] // Default args used for instantiating all classes,
  lru: 0 // Enable LRU gc by setting this to an integer greater than 0

c.register([typeKey = 'default'], SomeNanocomponent, [opts])

Define a Class for the optional typeKey. The default typeKey is default, which is used whenever a typeKey is omitted during gets and sets. opts include:

  gc: undefined // a typeKey specific GC function.
  args: undefined // default arguments instance arguments for `typeKey`. 
  // These options delegate to the top level options if left un-implemented

This is a shortcut for defining with a typeObject:

  typeKey: { class: SomeNanocomponent, ...opts }

c.register({ typeObject })

Define class 'type's using a typeObject definition. A typeObject is an object who's keys define the type name which are associated with a Class and optionally args and a type specific gc function.

  default: SomeNanocomponent, // SomeNanocomponent with no args or gc.  Uses instance gc function.
  baz: { class: SomeNanocomponent, ...opts }

Types are Object.assigned over previously registered types. The opts keys are the same as above.


Pass typeKeys as arguments to un-register them. Instances are untouched during this process.

c.get(key, [Class || typeKey], [opts])

The primary method used to retrieve and create instances. Return instance of Class or defined type class at key. If an instance does not yet exist at key, it will be instantiated with args along with a key specific gc function. If type is not defined, this method will throw.

Omitting optional method arguments delegates to the next most specific option.

c.get('some-key') // Return or create the 'default' Class
c.get('some-key', {args: ['arg0', 'arg2']})
c.get('some-key', null, {args: ['arg0', 'arg2']}) // Return the default registered class with specific args
c.get('some-key', 'some-type', { args: ['arg0', 'arg2'] }) // Return the `some-type` class at `some-key`.
c.get('some-key', SomeOtherNanocomponent, { args: ['arg0', 'arg2'], gc: instance => true })

If key is already instantiated, args is ignored. Pass changing properties as subsequent calls to the returned instance. If type or Class changes, the key instance is re-instantiated.

c.set(key, [Class || type], [opts])

Force instantiate the class instance at key. Follows the same override behavior as get. If you must change args on a key, this is the safest way to do that.

Returns the newly created instance.


Run the various gc functions defined. For each key, only the most specific gc function set is run. Return true from the gc functions to garbage collect that instance, and false to preserve.

This is used to clean out instances you no longer need. Because this iterates over all keys with instances, run this often enough so that the key set doesn't grow too large but not too often to create unnecessary delays in render loops.


Clear all key instances. The gc functions for each instance will be run receiving the following signature: (instance, key, true) => {}. If your instance needs to let go of resources, watch for the second argument to equal true, indicating tht the instance will be deleted.


Delete specific key instance. Will run the gc function passing true as the second argument ((instance, key, true) => {}).


Return true if key exists.

See examples for more details.


See the examples folder for various ideas on how to use this library.

See Also