Web Components wrapper with Virtual DOM
JavaScript
Latest commit fc1605b Dec 15, 2014 @ahomu refactor test env
Permalink
Failed to load latest commit information.
dist
src
test
.gitignore
.jshintrc
Gulpfile.js
LICENSE-MIT
README.md
bower.json
demo.html
index.html
package.json
testem.json

README.md

Claylump

Claylump is a Web Components wrapper with Virtual DOM.

Getting Started

Register element

<template cl-element="x-test">
  <h1>Hello World</h1>
  <h2>{{foo}}</h2>
  <h3>{{baz}}</h3>
</template>

<script>
  Claylump('x-test', {
    scope: {
      foo : 'bar',
      baz : 'qux'
    }
  });
</script>

Update DOM

Claylump('x-test', {
  scope: {
    foo : 'bar',
    baz : 'qux'
  },
  attachedCallback: function() {
    setTimeout(function() {
      this.scope.foo = 'changed';
      this.invalidate(); // update (diff & patch) DOM!
    }.bind(this), 1000);
  }
});

Event delegation

Claylump('x-test', {
  events: {
    'dbclick .js-dbclick': function(evt) {
      alert('hi');
    },
    'click .js-click': 'onClick'
  },
  onClick: function() {
    console.log('click!');
  },
});

Dependencies

TODO

  • flux module
  • messaging b/w components

Current restriction

  • Internet Explorer 10~ (using Window#requestAnimationFrame, Element.matches)
  • Cannot use inherit element like is="x-child" in <template>.