elkit

About

A handy toolkit for creating, diffing, and updating html elements with support for building stateful components, this package is a collection of modules including bel, nanomorph & a component module.

This collection of modules is what I use for building components for UI projects, but you may prefer to use bel & nanomorph separately, use similar alternatives, or use a different component module like nanocomponent.

Install

npm install --save elkit

Usage

Create an html element:

var html = require('elkit/html')

var el = html`<p>hi</p>`

Update an html element:

var html = require('elkit/html')
var update = require('elkit/update')

var el = html`<p>hi</p>`

update(el, html`<p>hola</p>`)

console.log(el)
// => '<p>hola</p>'

Server-side usage:

var html = require('elkit/html')

var el = html`<p>hi</p>`
var str = el.toString() // send this string value in http responses, for example

Create stateful components:

var html = require('elkit/html')
var createComponent = require('elkit/component')

var component = createComponent({
  initialize: function (state) {
    state.value = 'message'
  },
  render: function (props, state) {
    return html`<p>${state.value}: ${props.value}</p>`
  }
})

var el = component.render({ value: 'hi!' })

console.log(el)
// => <p>message: hi</p>

Examples

• Basic usage
• Component

See also

• elkit is compatible with and shares modules with choo
• it's inspired by yo-yo
• the component module is based in part on nanocomponent

Contributing

Contributions are welcome! Please read the contributing guidelines first.

Conduct

It's important that this project contributes to a friendly, safe, and welcoming environment for all, particularly for folks that are historically underrepresented in technology. Read this project's code of conduct

Change log

Read about the changes to this project in CHANGELOG.md. The format is based on Keep a Changelog and this project adheres to Semantic Versioning.

License

ISC