Nesting Penguins Molt

    @gondel/core
    TypeScript icon, indicating that this package has built-in type declarations

    1.2.7 • Public • Published

    NPM version Build Status Size License Commitizen friendly 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

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

    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

    Keywords

    none

    Install

    npm i @gondel/core

    DownloadsWeekly Downloads

    599

    Version

    1.2.7

    License

    MIT

    Unpacked Size

    229 kB

    Total Files

    37

    Last publish

    Collaborators

    • merkleorg
    • ernscht
    • namicsorg