🚡 Gondel

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)

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>

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

Hello World Example

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

• Data Plugin - Provide auto binding of data attributes - Demo
• Hot Plugin - Adds support for hot-module-reloading (hmr) for Gondel components. - Demo
• jQuery Plugin - Adds support for easy access to the current ctx as jQuery collection.
• Media Queries Plugin - Provide a custom gondel event which will fire once a given media query is met - Demo
• React Plugin - Adds support to bootstrap React widgets and apps using Gondel and vice versa - Demo
• Resize Plugin - Provide an event when the window or the component resized - Demo

Playground

https://codesandbox.io/s/github/merkle-open/gondel/tree/master/examples/hello-world

Examples

• Hello World
• Chunk Splitting
• Star Rating
• Gondel with Typescript
• Using Gondel from React
• Using React from Gondel
• Communication getComponentByDomNode
• Communication findComponents
• Communication triggerPublicEvent
• Plugin Data
• Plugin Media Queries
• Plugin Resize

Contributing to Gondel

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:

Jan Nicklas 💻 📖 🐛 💡 🚇 🔌 ⚠️ 👀	Ernst Ammann 💻 📖 🚇 📦 👀	Dušan Perković 💻 📖 🔌 🤔 ⚠️	Jan R. Biasi 💻 📖 🤔 ⚠️ 👀	Jan Widmer 💻 📖 💡 🤔 🔌	Claudio Bianucci 💻 🤔

License

MIT license