{"id":19742115,"url":"https://github.com/merkle-open/gondel","last_synced_at":"2025-08-22T11:42:47.671Z","repository":{"id":42676610,"uuid":"130660155","full_name":"merkle-open/gondel","owner":"merkle-open","description":"🚡 Gondel is a tiny library to bootstrap frontend components","archived":false,"fork":false,"pushed_at":"2025-02-07T23:29:37.000Z","size":7110,"stargazers_count":36,"open_issues_count":1,"forks_count":11,"subscribers_count":13,"default_branch":"master","last_synced_at":"2025-03-27T01:07:05.039Z","etag":null,"topics":["component","frontend"],"latest_commit_sha":null,"homepage":"https://gondel.js.org","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/merkle-open.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":".github/contributing.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-04-23T07:52:31.000Z","updated_at":"2025-02-07T23:29:42.000Z","dependencies_parsed_at":"2024-06-18T18:33:05.534Z","dependency_job_id":"bfddbb7f-7a6f-407c-b241-41cd1f50dc97","html_url":"https://github.com/merkle-open/gondel","commit_stats":{"total_commits":256,"total_committers":11,"mean_commits":"23.272727272727273","dds":0.5625,"last_synced_commit":"80fea01f6a27f31a164db8011f05e2d05c2c883d"},"previous_names":[],"tags_count":20,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/merkle-open%2Fgondel","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/merkle-open%2Fgondel/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/merkle-open%2Fgondel/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/merkle-open%2Fgondel/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/merkle-open","download_url":"https://codeload.github.com/merkle-open/gondel/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247353731,"owners_count":20925329,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["component","frontend"],"created_at":"2024-11-12T01:29:12.065Z","updated_at":"2025-04-05T15:06:08.326Z","avatar_url":"https://github.com/merkle-open.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"[![NPM version][npm-image]][npm-url]\n[![Build Status](https://github.com/merkle-open/gondel/workflows/ci/badge.svg?branch=master)](https://github.com/merkle-open/gondel/actions)\n[![Size][size-image]][size-url]\n[![License][license-image]][license-url] \n[![Commitizen friendly][commitizen-image]][commitizen-url] \n[![Prettier](https://img.shields.io/badge/Code%20Style-Prettier-green.svg)](https://github.com/prettier/prettier)\n\n# 🚡 Gondel\n\n[Gondel](https://en.wikipedia.org/wiki/Gondola) is a tiny (3kb) non-intrusive library to help you modularize your code.  \nIt 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)\n\n## Installation\n\n```bash\nnpm i @gondel/core\n```\n\n## Hello World\n\nThis button will listen to all `click events` events coming from all elements with `data-g-name=\"Button\"` and will\nshow an alert message.\n\nHTML\n\n```html\n \u003cbutton data-g-name=\"Button\"\u003eClick me\u003c/button\u003e\n\n \u003cbutton data-g-name=\"Button\"\u003eOr click me\u003c/button\u003e\n```\n\nJS\n\n```js\nimport {Component, EventListener, GondelBaseComponent} from '@gondel/core';\n\n// The @Component decorator will connect the class with `data-g-name=\"Button\"` elements.\n@Component('Button')\nexport class Button extends GondelBaseComponent {\n  @EventListener('click') \n  _handleChange(event) {\n    alert('Hello World')\n  }\n}\n```\n\n[Hello World Example](https://codesandbox.io/s/github/merkle-open/gondel/tree/master/examples/hello-world)\n\n## Module format \n\nGondel 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.\n\nGondel is fully typed and exports optional typescript declaration files for typescript projects.\n\n## Plugins\n\n- [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)\n- [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)\n- [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.\n- [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)\n- [React Plugin](https://github.com/merkle-open/gondel/tree/master/packages/plugins/react) - 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)\n- [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)\n\n## Playground\n\nhttps://codesandbox.io/s/github/merkle-open/gondel/tree/master/examples/hello-world\n\n## Examples\n\n+ [Hello World](https://codesandbox.io/s/github/merkle-open/gondel/tree/master/examples/hello-world)\n+ [Chunk Splitting](https://codesandbox.io/s/github/merkle-open/gondel/tree/master/examples/lazy-load)\n+ [Star Rating](https://codesandbox.io/s/github/merkle-open/gondel/tree/master/examples/five-star)\n+ [Gondel with Typescript](https://codesandbox.io/s/github/merkle-open/gondel/tree/master/examples/typescript)\n+ [Using Gondel from React](https://codesandbox.io/s/github/merkle-open/gondel/tree/master/examples/react-gondel)\n+ [Using React from Gondel](https://codesandbox.io/s/github/merkle-open/gondel/tree/master/examples/gondel-react)\n+ [Communication getComponentByDomNode](https://codesandbox.io/s/github/merkle-open/gondel/tree/master/examples/get-component-by-dom-node)\n+ [Communication findComponents](https://codesandbox.io/s/github/merkle-open/gondel/tree/master/examples/find-components)\n+ [Communication triggerPublicEvent](https://codesandbox.io/s/github/merkle-open/gondel/tree/master/examples/trigger-public-event)\n+ [Plugin Data](https://codesandbox.io/s/github/merkle-open/gondel/tree/master/examples/plugin-data)\n+ [Plugin Media Queries](https://codesandbox.io/s/github/merkle-open/gondel/tree/master/examples/plugin-media-query)\n+ [Plugin Resize](https://codesandbox.io/s/github/merkle-open/gondel/tree/master/examples/plugin-resize)\n\n## Contributing to Gondel\n\nAll contributions are welcome: use-cases, documentation, code, patches, bug reports, feature requests, etc.  \nThe following commands will get you started to work locally:\n\n```\nnpm install\nnpm run build\n```\n\nRunning tests:\n\n```\nnpm run test:watch\n```\n\nThanks to all who have contributed ([emoji key](https://allcontributors.org/docs/en/emoji-key)) so far:\n\n\u003c!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section --\u003e\n\u003c!-- prettier-ignore --\u003e\n| [\u003cimg src=\"https://avatars2.githubusercontent.com/u/4113649?v=4\" width=\"100px;\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eJan Nicklas\u003c/b\u003e\u003c/sub\u003e](https://twitter.com/jantimon)\u003cbr /\u003e[💻](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\") | [\u003cimg src=\"https://avatars1.githubusercontent.com/u/149406?v=4\" width=\"100px;\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eErnst Ammann\u003c/b\u003e\u003c/sub\u003e](https://github.com/ernscht)\u003cbr /\u003e[💻](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\") | [\u003cimg src=\"https://avatars1.githubusercontent.com/u/9339019?v=4\" width=\"100px;\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eDušan Perković\u003c/b\u003e\u003c/sub\u003e](https://github.com/noblica)\u003cbr /\u003e[💻](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, \u0026 Feedback\") [⚠️](https://github.com/merkle-open/gondel/commits?author=noblica \"Tests\") | [\u003cimg src=\"https://avatars1.githubusercontent.com/u/4563751?v=4\" width=\"100px;\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eJan R. Biasi\u003c/b\u003e\u003c/sub\u003e](https://aviormusic.com)\u003cbr /\u003e[💻](https://github.com/merkle-open/gondel/commits?author=janbiasi \"Code\") [📖](https://github.com/merkle-open/gondel/commits?author=janbiasi \"Documentation\") [🤔](#ideas-janbiasi \"Ideas, Planning, \u0026 Feedback\") [⚠️](https://github.com/merkle-open/gondel/commits?author=janbiasi \"Tests\") [👀](#review-janbiasi \"Reviewed Pull Requests\") | [\u003cimg src=\"https://avatars1.githubusercontent.com/u/3381820?v=4\" width=\"100px;\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eJan Widmer\u003c/b\u003e\u003c/sub\u003e](https://github.com/janwidmer)\u003cbr /\u003e[💻](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, \u0026 Feedback\") [🔌](#plugin-janwidmer \"Plugin/utility libraries\") | [\u003cimg src=\"https://avatars1.githubusercontent.com/u/3457712?v=4\" width=\"100px;\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eClaudio Bianucci\u003c/b\u003e\u003c/sub\u003e](https://github.com/chezdev)\u003cbr /\u003e[💻](https://github.com/merkle-open/gondel/commits?author=chezdev \"Code\") [🤔](#ideas-chezdev \"Ideas, Planning, \u0026 Feedback\") |\n| :---: | :---: | :---: | :---: | :---: | :---: |\n\u003c!-- ALL-CONTRIBUTORS-LIST:END --\u003e\n\n### License\n\n[MIT license](./LICENSE)\n\n[npm-image]: https://badge.fury.io/js/%40gondel%2Fcore.svg\n[npm-url]: https://npmjs.org/package/@gondel/core\n[license-image]: https://img.shields.io/badge/license-MIT-green.svg\n[license-url]: http://opensource.org/licenses/MIT\n[commitizen-image]: https://img.shields.io/badge/commitizen-friendly-brightgreen.svg\n[commitizen-url]: http://commitizen.github.io/cz-cli/\n[size-image]: http://img.badgesize.io/merkle-open/gondel/master/packages/core/dist/gondel.es5.min.js.svg?compression=gzip\u0026label=gzip%20size\n[size-url]: https://unpkg.com/@gondel/core/dist/gondel.es5.min.js\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmerkle-open%2Fgondel","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmerkle-open%2Fgondel","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmerkle-open%2Fgondel/lists"}