@spinnakernordic/micro-components
v1.0.2
Published
Microframework for mounting code on top of DOM elements
Downloads
157
Readme
Micro-components
Micro-components is a lightweight framework that allows code to be mounted on DOM elements.
Installation
$ yarn add @spinnakernordic/micro-components
Components
Creating a component
import type { ComponentType } from '@spinnakernordic/micro-components';
const Component: ComponentType = (node, { app, emitter }) => {
console.log(node); // The DOM element
console.log(app); // The app instance
console.log(emitter); // Event emitter
};
export default Component;
Registering a component
import { App } from '@spinnakernordic/micro-components';
const app = new App({
// Asynchronous, loads component with custom loaders/event listeners
'my-component': ['mouseenter', () => import('components/my-component')],
// Synchronous, loads component immediately
'my-component': require('components/my-component'),
});
app.mount();
Create DOM element(s) with the attribute data-component
containing the name of your component
<div data-component="my-component"></div>
Creating custom loaders
When default DOM events are not sufficient to load your component, you may want to create a custom loader.
import type { ComponentLoaderType } from '@spinnakernordic/micro-components';
const Loader: ComponentLoaderType = ({ node, emitter }, load) => {
// In this example we call load() on a custom event listener
document.addEventListener('my-custom-event', load);
// Return a function which disconnects the listener
return () => {
document.removeEventListener('my-custom-event', load);
};
};
export default Loader;
Register the loader on a component
import customLoader from 'loaders/custom-loader',
const app = new App({
'my-component': [customLoader, () => import('components/my-component')],
});
app.mount();
Using multiple loaders
It is very simple to add multiple loaders for a component. In cases where only regular events that are emitted from the node itself is used, you can pass a single string containing these. If you want to combine multiple custom loaders, you can use an array.
import customLoader from 'loaders/custom-loader',
import otherCustomLoader from 'loaders/other-custom-loader',
const app = new App({
// Multiple regular events
'my-component': ['mouseenter click', () => import('components/my-component')],
// Combine multiple custom loaders
'my-component': [
[customLoader, otherCustomLoader, 'mouseenter'],
() => import('components/my-component'),
],
});
app.mount();