π‘ 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/coreHello 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')
}
}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:
