@gondel/core

			Stars	Issues	Version	Updated	Created	Size
	@gondel/core		36	1	1.2.8	a year ago	6 years ago

!Size size-image size-url !License license-image license-url !Commitizen friendly commitizen-image commitizen-url

🚡 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

```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

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 - Provides 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

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: |