🚡 Gondel

Gondel is a tiny (2kb) 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)

Installation

npm i @gondel/core

Hello World

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>

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')
  }
}

Module format

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.

Plugins

Media Queries Plugin - Provide a custom gondel event which will fire once a given media query is met - Demo

Contributing to Gondel

Feel free to contribute to gondel.
The following commands will get you started:

npm install
npm run build

Running tests:

npm run test:watch

Playground

https://stackblitz.com/fork/gondel

Examples

Gondel 5 Star - https://stackblitz.com/edit/gondel-5-star
Chunk Splitting - https://stackblitz.com/edit/gondel-lazy-load
Media Queries - CodeSandbox

License

MIT license

chastel/gondel