Skip to content

Latest commit

 

History

History
118 lines (86 loc) · 8.74 KB

README.md

File metadata and controls

118 lines (86 loc) · 8.74 KB

NPM version Build Status Size License Commitizen friendly Prettier

🚡 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

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