Jaspp is Lightweight JavaScript library for handle javascript in a website.
- Tiny < 3kb
- 0 dependencies
- Component oriented
Install Jaspp with npm or yarn:
npm install jaspp
Create a component to handle javascript of a DOM Element
//components/YourComponent.js
import {AbstractComponent} from 'jaspp'
class YourComponent extend AbstractComponent
{
render(el) {
// handle javascript of el element
}
}
Create Application and register your components
//index.js
import {Application} from "jasp";
import YourComponent from "components/YourComponent.js";
const components = {
'YourComponent' : YourComponent
};
const app = new Application(components);
app.start();
If you use webpack, you can use class ComponentsLoader to load automatically all components inside a folder
import {Application, ComponentsLoader} from "../../dist/index.js";
// load all components inside components folder
const components = ComponentsLoader.import(require.context('./components/', true, /\.js$/));
const app = new Application(components);
// ...
Activate a component on specific DOM Element with data attribute data-view-component and component's name.
<div data-view-component="YourComponent">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
</section>
Different events are available in Application:
- before:start is dispatch before render of components
- after:start is dispatch after render of components
- error is dispatch when there is an error inside a component, it's can be util to log error.
//index.js
// ...
const app = new Application(components);
app.start();
app.addEventListener('before:start', (app) => {
console.log('Application before start event');
});
app.addEventListener('after:start', (app) => {
console.log('Application after start event');
});
app.addEventListener('error', (exception) => {
console.log('Application after start event');
});
- dom.update This event enables components on dynamically added HTML.
import {AbstractComponent} from 'jaspp'
class YourComponent extend AbstractComponent
{
render(el) {
const template = `
<div id="example" data-view-component="OtherComponent"></div>
`;
el.insertAdjacentHTML('beforeend', template);
this.application.dispatch('dom.update', el.querySelector(#example));
}
}