Add behavior to Teal components

Sometimes you want to add client-side behavior to a server-rendered component (like listening to certain events) without using something like real-react.

Setup

Register the plugin as well as the global browserify transform:

var tl = teal();
tl.use('teal-behavior');
tl.use('teal-browserify', { 'global-transform': 'teal-behavior/transform' });

Add some behavior

Create a <component>.init.js file in the same directory your <component>.tl:

/* This function is invoked once for each component instance */
module.exports = function(el) {
  el.addEventListener('click', function() {
    this.classList.toggle('active');
  })
};

Add behavior/add to the element you want to be passed to your initializer:

div {
  .active {
    background: red;
    color: #fff;
  }
  "Click me!"
  behavior/add
}

Run the initializer

Use the following custom element to add a script that loads a browserify bundle which will initialize your components:

body {
  // content goes here
  behavior/setup
}

Manual initialization

If you add dynamically created components to your can manually invoke the initializers like this:

var init = require('teal-behavior/init');
init();
// or init(root) to look only at a certain subtree;

NOTE: For components that have already been initialized the initializer function won't be called a second time. But keep in mind that if you use event delegation and add an event listener to the window or document, it's the responsibility of your script to make sure that the listener is added only once.

License

MIT