Lemonade-component NPM

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:

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

Access 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 :: unmounted

Mount 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

component lemonade dom

@everything-registry/sub-chunk-2057 @infinitebrahmanuniverse/nolb-lem @zalastax/nolb-lem

0.0.1

5 years ago