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-component
`

Usage

Let's suppose our HTML looks like this:

`html





`

$3

`js
import { c, mount } from "lemonade-component"

function Slider({ element }) {
// Slider is mounted
console.log(element); //

}

c('slider', Slider);

mount(document.body);
`

$3

`js
import { unmount } from "lemonade-component";

function Slider({ onDestroy }) {
onDestroy(() => {
console.log('Slider :: unmounted');
})
}

unmount(document.body);
// Slider :: unmounted
`

$3

`js
function Slider({ children }) {
console.log(children); // [SliderItem, SliderItem, SliderItem]
}

function SliderItem() {}

c('slider', SliderItem);
c('slider-item', SliderItem);

mount(document.body);
`

$3

`js
import { c } from "lemonade-component";

c('slider', () => import('./Slider.js'));
`

$3

Use watch instead of mount

`js
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 :: unmounted
`

$3

`js
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
``