Getting Started

Installing

With Node.js / io.js

• In your project folder with a package.json file, run the command: npm install base-element --save to install.
• Using a module bundler such as Browserify or webpack, var BaseElement = require('base-element') to use the library.
• Bundle your code using a module bundler and include the compiled file with a <script src="bundle.js"></script> in your HTML.

With just a web browser

• Download and extract the latest release from: https://github.com/shama/base-element/releases
• Copy the dist/base-element.js file into your project
• Create a <script src="base-element.js"></script> in your HTML.
• Use the library with the global variable: BaseElement

Your First Element

Create a function that represents your element and inherits the prototype of BaseElement:

function Bear (rootNode) {
  // Optionally pass a rootNode on where in the DOM your element will get attached
  BaseElement.call(this, rootNode)
}
Bear.prototype = Object.create(BaseElement.prototype)

Then add a render method to your element:

Bear.prototype.render = function (typeOfBear) {

  // HTML tags are created using: this.html(tag, content)
  var vtree = this.html('div.bear', ['Im a ' + typeOfBear + '!'])
  // A virtual DOM tree will be returned that represents your HTML

  // Once you have finished constructing your HTML tree
  // Call this.afterRender() with your tree and return it
  return this.afterRender(vtree)

}

Now you can create and render your element with:

var grizzly = new Bear(document.body)
grizzly.render('grizzly')

Which will create a <div class="bear">Im a grizzly!</div> element in your document.body.