Web Components wrapper with Virtual DOM
JavaScript
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
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>.