Gondel is a tiny (3kb) non-intrusive library to help you modularize your code.
It does not ship with a rendering engine to be a perfect fit for most client side rendering engines (e.g. React or Angular) and server side rendering engines (e.g. Java or PHP)
npm i @gondel/core
This button will listen to all click events
events coming from all elements with data-g-name="Button"
and will
show an alert message.
HTML
<button data-g-name="Button">Click me</button>
<button data-g-name="Button">Or click me</button>
JS
import {Component, EventListener, GondelBaseComponent} from '@gondel/core';
// The @Component decorator will connect the class with `data-g-name="Button"` elements.
@Component('Button')
export class Button extends GondelBaseComponent {
@EventListener('click')
_handleChange(event) {
alert('Hello World')
}
}
Gondel follows the rollup recommendations which includes on the one hand ESM for bundle size optimisations and on the other hand a UMD version to be compatible with every former javascript bundling/concatenation strategy.
Gondel is fully typed and exports optional typescript declaration files for typescript projects.
https://codesandbox.io/s/github/merkle-open/gondel/tree/master/examples/hello-world
All contributions are welcome: use-cases, documentation, code, patches, bug reports, feature requests, etc.
The following commands will get you started to work locally:
npm install
npm run build
Running tests:
npm run test:watch
Thanks to all who have contributed (emoji key) so far: