lemonade-component
v0.0.1
Published
Minimal component library
Downloads
4
Readme
lemonade-component 🏷
(alpha) 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.
Installation
npm install lemonade-componentUsage
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>Mount a component
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);Unmount components
import { unmount } from "lemonade-component";
function Slider({ onDestroy }) {
onDestroy(() => {
console.log('Slider :: unmounted');
})
}
unmount(document.body);
// Slider :: unmountedAccess children components
function Slider({ children }) {
console.log(children); // [SliderItem, SliderItem, SliderItem]
}
function SliderItem() {}
c('slider', SliderItem);
c('slider-item', SliderItem);
mount(document.body);Dynamic imports
import { c } from "lemonade-component";
c('slider', () => import('./Slider.js'));Watch for DOM changes
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 :: unmountedMount only certains components
import { 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 found