Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/merkle-open/gondel

🚡 Gondel is a tiny library to bootstrap frontend components
https://github.com/merkle-open/gondel

component frontend

Last synced: 4 days ago
JSON representation

🚡 Gondel is a tiny library to bootstrap frontend components

Host: GitHub
URL: https://github.com/merkle-open/gondel
Owner: merkle-open
License: mit
Created: 2018-04-23T07:52:31.000Z (over 6 years ago)
Default Branch: master
Last Pushed: 2024-10-24T13:11:41.000Z (2 months ago)
Last Synced: 2024-12-19T21:12:11.085Z (6 days ago)
Topics: component, frontend
Language: TypeScript
Homepage: https://gondel.js.org
Size: 6.78 MB
Stars: 36
Watchers: 14
Forks: 10
Open Issues: 1
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: .github/contributing.md
- License: LICENSE

Awesome Lists containing this project

README

        [![NPM version][npm-image]][npm-url]

[![Build Status](https://github.com/merkle-open/gondel/workflows/ci/badge.svg?branch=master)](https://github.com/merkle-open/gondel/actions)

[![Size][size-image]][size-url]

[![License][license-image]][license-url] 

[![Commitizen friendly][commitizen-image]][commitizen-url] 

[![Prettier](https://img.shields.io/badge/Code%20Style-Prettier-green.svg)](https://github.com/prettier/prettier)

# 🚡 Gondel

[Gondel](https://en.wikipedia.org/wiki/Gondola) 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](https://codesandbox.io/s/github/merkle-open/gondel/tree/master/examples/hello-world)

## Module format 

Gondel follows the [rollup recommendations](https://github.com/rollup/rollup/wiki/pkg.module) 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](https://github.com/merkle-open/gondel/tree/master/packages/plugins/data) - Provide auto binding of data attributes - [Demo](https://codesandbox.io/s/github/merkle-open/gondel/tree/master/examples/plugin-data)

- [Hot Plugin](https://github.com/merkle-open/gondel/tree/master/packages/plugins/hot) - Adds support for hot-module-reloading (hmr) for Gondel components. - [Demo](https://codesandbox.io/s/github/merkle-open/gondel/tree/master/examples/typescript)

- [jQuery Plugin](https://github.com/merkle-open/gondel/tree/master/packages/plugins/jquery) - Adds support for easy access to the current ctx as jQuery collection.

- [Media Queries Plugin](https://github.com/merkle-open/gondel/tree/master/packages/plugins/media-queries) - Provide a custom gondel event which will fire once a given media query is met - [Demo](https://codesandbox.io/s/github/merkle-open/gondel/tree/master/examples/plugin-media-query)

- [React Plugin](https://github.com/merkle-open/gondel/tree/master/packages/plugins/resize) - Adds support to bootstrap React widgets and apps using Gondel and vice versa - [Demo](https://codesandbox.io/s/github/merkle-open/gondel/tree/master/examples/gondel-react)

- [Resize Plugin](https://github.com/merkle-open/gondel/tree/master/packages/plugins/resize) - Provide an event when the window or the component resized - [Demo](https://codesandbox.io/s/github/merkle-open/gondel/tree/master/examples/plugin-resize)

## Playground

https://codesandbox.io/s/github/merkle-open/gondel/tree/master/examples/hello-world

## Examples

+ [Hello World](https://codesandbox.io/s/github/merkle-open/gondel/tree/master/examples/hello-world)

+ [Chunk Splitting](https://codesandbox.io/s/github/merkle-open/gondel/tree/master/examples/lazy-load)

+ [Star Rating](https://codesandbox.io/s/github/merkle-open/gondel/tree/master/examples/five-star)

+ [Gondel with Typescript](https://codesandbox.io/s/github/merkle-open/gondel/tree/master/examples/typescript)

+ [Using Gondel from React](https://codesandbox.io/s/github/merkle-open/gondel/tree/master/examples/react-gondel)

+ [Using React from Gondel](https://codesandbox.io/s/github/merkle-open/gondel/tree/master/examples/gondel-react)

+ [Communication getComponentByDomNode](https://codesandbox.io/s/github/merkle-open/gondel/tree/master/examples/get-component-by-dom-node)

+ [Communication findComponents](https://codesandbox.io/s/github/merkle-open/gondel/tree/master/examples/find-components)

+ [Communication triggerPublicEvent](https://codesandbox.io/s/github/merkle-open/gondel/tree/master/examples/trigger-public-event)

+ [Plugin Data](https://codesandbox.io/s/github/merkle-open/gondel/tree/master/examples/plugin-data)

+ [Plugin Media Queries](https://codesandbox.io/s/github/merkle-open/gondel/tree/master/examples/plugin-media-query)

+ [Plugin Resize](https://codesandbox.io/s/github/merkle-open/gondel/tree/master/examples/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](https://allcontributors.org/docs/en/emoji-key)) so far:

| [
_{Jan Nicklas}](https://twitter.com/jantimon)
[💻](https://github.com/merkle-open/gondel/commits?author=jantimon "Code") [📖](https://github.com/merkle-open/gondel/commits?author=jantimon "Documentation") [🐛](https://github.com/merkle-open/gondel/issues?q=author%3Ajantimon "Bug reports") [💡](#example-jantimon "Examples") [🚇](#infra-jantimon "Infrastructure (Hosting, Build-Tools, etc)") [🔌](#plugin-jantimon "Plugin/utility libraries") [⚠️](https://github.com/merkle-open/gondel/commits?author=jantimon "Tests") [👀](#review-jantimon "Reviewed Pull Requests") | [
_{Ernst Ammann}](https://github.com/ernscht)
[💻](https://github.com/merkle-open/gondel/commits?author=ernscht "Code") [📖](https://github.com/merkle-open/gondel/commits?author=ernscht "Documentation") [🚇](#infra-ernscht "Infrastructure (Hosting, Build-Tools, etc)") [📦](#platform-ernscht "Packaging/porting to new platform") [👀](#review-ernscht "Reviewed Pull Requests") | [
_{Dušan Perković}](https://github.com/noblica)
[💻](https://github.com/merkle-open/gondel/commits?author=noblica "Code") [📖](https://github.com/merkle-open/gondel/commits?author=noblica "Documentation") [🔌](#plugin-noblica "Plugin/utility libraries") [🤔](#ideas-noblica "Ideas, Planning, & Feedback") [⚠️](https://github.com/merkle-open/gondel/commits?author=noblica "Tests") | [
_{Jan R. Biasi}](https://aviormusic.com)
[💻](https://github.com/merkle-open/gondel/commits?author=janbiasi "Code") [📖](https://github.com/merkle-open/gondel/commits?author=janbiasi "Documentation") [🤔](#ideas-janbiasi "Ideas, Planning, & Feedback") [⚠️](https://github.com/merkle-open/gondel/commits?author=janbiasi "Tests") [👀](#review-janbiasi "Reviewed Pull Requests") | [
_{Jan Widmer}](https://github.com/janwidmer)
[💻](https://github.com/merkle-open/gondel/commits?author=janwidmer "Code") [📖](https://github.com/merkle-open/gondel/commits?author=janwidmer "Documentation") [💡](#example-janwidmer "Examples") [🤔](#ideas-janwidmer "Ideas, Planning, & Feedback") [🔌](#plugin-janwidmer "Plugin/utility libraries") | [
_{Claudio Bianucci}](https://github.com/chezdev)
[💻](https://github.com/merkle-open/gondel/commits?author=chezdev "Code") [🤔](#ideas-chezdev "Ideas, Planning, & Feedback") |

| :---: | :---: | :---: | :---: | :---: | :---: |

### License

[MIT license](./LICENSE)

[npm-image]: https://badge.fury.io/js/%40gondel%2Fcore.svg

[npm-url]: https://npmjs.org/package/@gondel/core

[license-image]: https://img.shields.io/badge/license-MIT-green.svg

[license-url]: http://opensource.org/licenses/MIT

[commitizen-image]: https://img.shields.io/badge/commitizen-friendly-brightgreen.svg

[commitizen-url]: http://commitizen.github.io/cz-cli/

[size-image]: http://img.badgesize.io/merkle-open/gondel/master/packages/core/dist/gondel.es5.min.js.svg?compression=gzip&label=gzip%20size

[size-url]: https://unpkg.com/@gondel/core/dist/gondel.es5.min.js