lemonade-component is a minimal component library inspired by modularjs. Its only purpose is to look for registered DOM components and execute a function when it finds one. It supports dynamic imports and can watch for DOM changes. It is not a v-dom library.
npm install lemonade-component
Let's suppose our HTML looks like this:
<body>
<div id="root">
<ul data-component-slider>
<li data-component-slider-item></li>
<li data-component-slider-item></li>
<li data-component-slider-item></li>
</ul>
</div>
</body>import { c, mount } from "lemonade-component"
function Slider({ element }) {
// Slider is mounted
console.log(element); // <ul data-component-slider></ul>
}
c('slider', Slider);
mount(document.body);import { unmount } from "lemonade-component";
function Slider({ onDestroy }) {
onDestroy(() => {
console.log('Slider :: unmounted');
})
}
unmount(document.body);
// Slider :: unmountedfunction Slider({ children }) {
console.log(children); // [SliderItem, SliderItem, SliderItem]
}
function SliderItem() {}
c('slider', SliderItem);
c('slider-item', SliderItem);
mount(document.body);import { c } from "lemonade-component";
c('slider', () => import('./Slider.js'));Use watch instead of mount
import { watch } from "lemonade-component";
function Slider({ onDestroy }) {
console.log('Slider :: mounted');
onDestroy(() => {
console.log('Slider :: unmounted');
});
}
c('slider', Slider);
watch(document.body);
// Slider :: mounted
document.getElementById('root').innerHTML = '';
// Slider :: unmountedimport { mount } from "lemonade-component";
const SliderComponent = c('slider', Slider);
const SliderItemComponent = c('slider-item', SliderItem);
mount(document.body, [SliderComponent]);
// SliderItemComponent will not be mounted if foundMIT License, see LICENSE for details