base-element

base-element

An element authoring library for creating standalone and performant elements.

View this example List element in use with:

• React
• Ember
• Web Component
• or just standalone

example usage

Create a generic JavaScript "class" that inherits BaseElement:

var BaseElement = require('base-element')

function Bear () {
  BaseElement.call(this)
}
Bear.prototype = Object.create(BaseElement.prototype)
// Or inherits(Bear, BaseElement)

Then build your elements:

Bear.prototype.render = function (typeOfBear) {
  // Create a virtual DOM tree
  var vtree = this.html('div.bear', ['Im a ' + typeOfBear + '!'])
  // Call the super() render method with your vtree
  return this.super(vtree)
}

data down, events up

DOMs work best (in the opinion of myself and many) when data goes down and event (or actions) go up.

A simple example is a button element that changes when clicked. How it changes is up to the element but what it changes to is up to the user.

This is our Button element:

var BaseElement = require('base-element')

function Button () {
  BaseElement.call(this)
}
Button.prototype = Object.create(BaseElement.prototype)
// Or inherits(Button, BaseElement)

Button.prototype.render = function (label) {
  var self = this
  // The "label" data is coming down
  return this.super(this.html('button', {
    onclick: function (event) {
      // We send the "clicked" event up
      self.send('clicked', event.target)
    }
  }, label))
}

and this is the user's implementation, creates a button and on every click it changes to a random number:

var button = require('your-button')()
button.on('clicked', function (button) {
  button.render('button label ' + Math.random())
})

api

var element = new BaseElement([attachTo])

attachTo is a DOM element you want to append to. Defaults to document.body.

element.render(vtree)

Renders your virtual DOM tree to the DOM element.

element.send(name[, params])

Sends an event up with a given name and params.

element.on(name, function)

Register an event listener for a given name:

element.on('clicked', function (params) {})

element.super([params])

This method can be called within any inherited method. It will call the parent's class of the same name.

Button.prototype.render = function (data) {
  var tree = this.html('button')
  // Calls the render method on BaseElement
  return this.super(vtree)
}

element.html(tag[, options], value)

A convenience wrapper for creating virtual-hyperscript nodes, i.e.:

var h = require('virtual-dom/h')
var vtree = h('div', 'Testing')

// is the same as
var vtree = this.html('div', 'Testing')

element.element

The root DOM node the virtual tree resides on.

element.vtree

The current virtual DOM tree of the base element.

license

(c) 2015 Kyle Robinson Young. MIT License