{"id":15653772,"url":"https://github.com/vitkarpov/jblocks","last_synced_at":"2025-08-05T02:24:37.979Z","repository":{"id":1631075,"uuid":"43454094","full_name":"vitkarpov/jblocks","owner":"vitkarpov","description":":star: A tiny JavaScript library to create UI-components in a declarative way","archived":false,"fork":false,"pushed_at":"2023-03-15T09:52:10.000Z","size":1094,"stargazers_count":28,"open_issues_count":1,"forks_count":3,"subscribers_count":8,"default_branch":"master","last_synced_at":"2025-04-30T21:50:06.858Z","etag":null,"topics":["javascript","javascript-library","ui","ui-framework"],"latest_commit_sha":null,"homepage":"http://vitkarpov.github.io/jblocks/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/vitkarpov.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2015-09-30T19:25:49.000Z","updated_at":"2023-03-23T12:25:38.000Z","dependencies_parsed_at":"2023-07-06T09:16:27.578Z","dependency_job_id":null,"html_url":"https://github.com/vitkarpov/jblocks","commit_stats":null,"previous_names":[],"tags_count":11,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vitkarpov%2Fjblocks","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vitkarpov%2Fjblocks/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vitkarpov%2Fjblocks/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vitkarpov%2Fjblocks/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/vitkarpov","download_url":"https://codeload.github.com/vitkarpov/jblocks/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251789308,"owners_count":21644081,"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":["javascript","javascript-library","ui","ui-framework"],"created_at":"2024-10-03T12:47:01.536Z","updated_at":"2025-04-30T21:50:41.011Z","avatar_url":"https://github.com/vitkarpov.png","language":"JavaScript","readme":"# jBlocks\n\n[![NPM version](https://badge.fury.io/js/jblocks.svg)](http://badge.fury.io/js/jblocks)\n![Tests Status](https://github.com/vitkarpov/jblocks/workflows/Unit%20Tests/badge.svg)\n\n- **[Codepen DEMO](http://codepen.io/vitkarpov/pen/eZReaE?editors=0010)**\n- **[Full API Doc created from source](https://github.com/vitkarpov/jblocks/blob/master/API.md)**\n\njBlocks helps to create interface components in a functional programming flavour.\n\nIt's build on the following simple rules:\n\n- declare your components\n- set special data-attributes in HTML to bind an instance of the component (will be created in the future) to the node\n- interact with components using API, events and other components\n\n## Give me an example\n\nLet we have a simple component.\n\nCounter with 2 buttons to increase and decrease its value. It could be a lot of independent counters on a page with different initials values.\n\nAt first we need to declare a component in JavaScript and then mark some nodes in HTML using special data-attributes.\n\n## Declare a component in JavaScript\n\nDeclare a component:\n\n```js\njBlocks.define('counter', {\n    events: {\n        'click .js-inc': 'inc',\n        'click .js-dec': 'dec'\n    },\n\n    methods: {\n        oninit: function() {\n            this._currentValue = Number(this.props.initialValue);\n        },\n        ondestroy: function() {\n            this._currentValue = null;\n        },\n        /**\n         * Increases the counter, emits changed event\n         */\n        inc: function() {\n            this._currentValue++;\n            this.emit('changed', {\n                value: this._currentValue\n            });\n        },\n        /**\n         * Decreases the counter, emits changed event\n         */\n        dec: function() {\n            this._currentValue--;\n            this.emit('changed', {\n                value: this._currentValue\n            });\n        },\n        /**\n         * Returns the current value\n         * @return {Number}\n         */\n        getCurrentValue: function() {\n            return this._currentValue;\n        }\n    }\n})\n```\n\n## Declare a component in HTML\n\nTo make some node as a root node of the component we should set special `data` attributes:\n\n- `data-component` — name of the given component (`counter` in this case)\n- `data-props` — initial properties (`{ \"initialValue\": 2 }` in this case)\n\n```html\n\u003cdiv class=\"js-counter\" data-component=\"counter\" data-props='{ \"initialValue\": 2 }'\u003e\n    \u003cbutton class=\"js-inc\"\u003e+\u003c/button\u003e\n    \u003cbutton class=\"js-dec\"\u003e-\u003c/button\u003e\n\u003c/div\u003e\n```\n\n## Create instances and interact with them\n\nAfter describing all components in declarative way it's time to create an instance and interact with it using API:\n\n```js\n// somewhere in my program...\n\nvar counter = jBlocks.get(document.querySelector('.js-counter'));\n\n// use event to react on what happens during lifecycle\ncounter.on('changed', function() {\n    console.log('hello, world!');\n});\n\n// ... when user clicks on inc button\n// log =\u003e 'hello, world!'\n\n// log =\u003e 3, cause the counter has been increased\ncounter.getCurrentValue();\n\n// ... then I decided to decrease it using API\ncounter.dec();\n\n// log =\u003e 2\ncounter.getCurrentValue();\n\n// If I remove nodes from DOM instance should be destroyed\ncounter.destroy();\n```\n\n## Usage\n\n### CDN\n\nInclude the library:\n\n```html\n\u003cscript type=\"text/javascript\" src=\"https://unpkg.com/jblocks@latest/jblocks.js\"\u003e\u003c/script\u003e\n```\n\n:warning: You may use any available version instead of `latest` in the URL above.\n\n`jBlocks` namespace is now in global scope.\n\n### Commonjs\n\nFirst of all, get the package using npm:\n\n```\nnpm install jblocks\n```\n\nAfter the package ends up in you `node_modules`:\n\n```js\nvar jblocks = require('jblocks');\n```\n\nYou can use the **[full API Doc generated from source](http://vitkarpov.com/jblocks)**.\n\nAlso, feel free to drop me a line — [viktor.s.karpov@gmail.com](mailto:viktor.s.karpov@gmail.com)\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvitkarpov%2Fjblocks","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fvitkarpov%2Fjblocks","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvitkarpov%2Fjblocks/lists"}