README
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