Skip to content

jongacnik/component-box

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 

History

20 Commits
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation

component-box πŸ“¦


A little component cacher for things like nanocomponent

Usage

var Nanocomponent = require('nanocomponent')
var html = require('bel')
var c = require('component-box')

// component
class MyComponent extends Nanocomponent {
  createElement (text) {
    return html`<div>${text}</div>`
  }
}

// function which returns component instance
function createMyComponent () {
  return new MyComponent()
}

c.use({
  mycomponent: createMyComponent
})

// return and render new `mycomponent`
c('mycomponent').render()

Meanwhile in another file...

var c = require('component-box')

// return and render cached `mycomponent`
c('mycomponent').render()

API

component = c(name, key)

Return a component. key is optional. Works as follows:

// return new `mycomponent` and cache as `mycomponent`
c('mycomponent')

// return cached `mycomponent`
c('mycomponent')

// return new `mycomponent` and cache as `boop`
c('mycomponent', 'boop')

// return cached `mycomponent` with key `boop`
c('mycomponent', 'boop')

// always return new `mycomponent` (never cache)
c('mycomponent', false)

c.use([components])

Add components to the store. Object values expect Functions which return a component.

var c = require('component-box')

c.use({
  beep: beepComponent,
  boop: boopComponent
})

c('beep').render()
c('boop').render()

These are shared throughout your app, so in another file you don't need to re-.use:

var c = require('component-box')

c('beep').render()
c('boop').render()

c.delete(key)

Remove component from the cache

// return new `mycomponent` and cache as `mycomponent`
c('mycomponent')

// remove `mycomponent` from cache
c.delete('mycomponent')

// return new `mycomponent` and cache as `mycomponent`
c('mycomponent')

c.cache(cache)

Use a custom cache implementation. Expects an object with .get, .set, and .remove methods.

var c = require('component-box')

c.cache(require('lru')(2)) // only cache 2 instances, using lru eviction

c.use({
  post: postComponent
})

c('post', 'slug1').render()
c('post', 'slug2').render()
c('post', 'slug3').render() // evict 'post-slug1' and return new 'post-slug3' instance

Alternative Pattern

You could also choose to only return the .render method from nanocomponent, allowing for a slightly more concise syntax:

// function which creates component instance and returns render method
function createMyComponent () {
  var component = new MyComponent()
  return function () {
    return component.render(...arguments)
  }
}
// directly calls nanocomponent .render
c('mycomponent')()

Real World

This module is useful when you are creating components on the fly. References to components are saved for you based on keys, that way on app re-renders it will re-use your components so things like load and etc are not wonky.

In this example we are using post slugs as component keys:

var html = require('bel')
var c = require('component-box')

c.use({
  post: require('my-post-component')
})

var postsData = [
  { title: 'Beep', slug: 'beep' },
  { title: 'Boop', slug: 'boop' },
  { title: 'Blap', slug: 'blap' }
]

function view () {
  var posts = postsData.map(function (post) {
    return c('post', post.slug).render(post)
  })

  return html`<div>${posts}</div>`
}

More Examples

var component = require('fun-component')
var html = require('bel')
var c = require('component-box')

// function which returns a component
function mycomponent () {
  return component(function (props) {
    return html`<div>Hello!<div>`
  })
}

c.use({
  mycomponent: mycomponent
})

// return new `mycomponent`
c('mycomponent')()

See Also

License

MIT

About

A little component cacher πŸ“¦

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published