@gondel/core

The base core of the gondel library

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
@gondel/core
3741.2.72 years ago5 years agoMinified + gzip package size for @gondel/core in KB

Readme

!NPM versionnpm-imagenpm-url Build Status !Sizesize-imagesize-url !Licenselicense-imagelicense-url !Commitizen friendlycommitizen-imagecommitizen-url Prettier
🚑 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

```bash 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 ```html Click me Or click me ``` JS ```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

  • 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.
  • React Plugin - Adds support to bootstrap React widgets and apps using Gondel and vice versa - 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