/gondel

🚑 Gondel is a tiny library to bootstrap frontend components

Primary LanguageTypeScriptMIT LicenseMIT

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