{"id":14155353,"url":"https://github.com/studiometa/js-toolkit","last_synced_at":"2025-04-04T20:31:29.768Z","repository":{"id":36968885,"uuid":"241303276","full_name":"studiometa/js-toolkit","owner":"studiometa","description":"🔧 A data-attributes driven JavaScript micro-framework","archived":false,"fork":false,"pushed_at":"2024-04-11T11:28:12.000Z","size":21586,"stargazers_count":25,"open_issues_count":8,"forks_count":2,"subscribers_count":17,"default_branch":"develop","last_synced_at":"2024-04-12T09:18:45.994Z","etag":null,"topics":["component","components","framework","javascript","javascript-framework","javascript-library","library","toolkit"],"latest_commit_sha":null,"homepage":"https://js-toolkit.studiometa.dev/","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/studiometa.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"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}},"created_at":"2020-02-18T07:55:29.000Z","updated_at":"2024-04-14T19:21:49.136Z","dependencies_parsed_at":"2024-01-15T20:31:10.365Z","dependency_job_id":"3e46479e-7fc7-450d-9937-8041eda4ef14","html_url":"https://github.com/studiometa/js-toolkit","commit_stats":{"total_commits":1237,"total_committers":13,"mean_commits":95.15384615384616,"dds":0.07113985448666127,"last_synced_commit":"a5d99e7d5f763613c504abad54ac8be8039da517"},"previous_names":[],"tags_count":114,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/studiometa%2Fjs-toolkit","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/studiometa%2Fjs-toolkit/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/studiometa%2Fjs-toolkit/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/studiometa%2Fjs-toolkit/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/studiometa","download_url":"https://codeload.github.com/studiometa/js-toolkit/tar.gz/refs/heads/develop","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247246420,"owners_count":20907798,"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","components","framework","javascript","javascript-framework","javascript-library","library","toolkit"],"created_at":"2024-08-17T08:02:56.661Z","updated_at":"2025-04-04T20:31:29.762Z","avatar_url":"https://github.com/studiometa.png","language":"TypeScript","funding_links":[],"categories":["library"],"sub_categories":[],"readme":"# @studiometa/js-toolkit\n\n[![NPM Version](https://img.shields.io/npm/v/@studiometa/js-toolkit.svg?style=flat\u0026colorB=3e63dd\u0026colorA=414853)](https://www.npmjs.com/package/@studiometa/js-toolkit/)\n[![Downloads](https://img.shields.io/npm/dm/@studiometa/js-toolkit?style=flat\u0026colorB=3e63dd\u0026colorA=414853)](https://www.npmjs.com/package/@studiometa/js-toolkit/)\n[![Size](https://img.shields.io/bundlephobia/minzip/@studiometa/js-toolkit?style=flat\u0026colorB=3e63dd\u0026colorA=414853\u0026label=size)](https://bundlephobia.com/package/@studiometa/js-toolkit)\n[![Dependency Status](https://img.shields.io/librariesio/release/npm/@studiometa/js-toolkit?style=flat\u0026colorB=3e63dd\u0026colorA=414853)](https://david-dm.org/studiometa/js-toolkit)\n![Codecov](https://img.shields.io/codecov/c/github/studiometa/js-toolkit?style=flat\u0026colorB=3e63dd\u0026colorA=414853)\n\n\u003e A JavaScript data-attributes driven micro-framework shipped with plenty of useful utility functions to boost your project.\n\n## Installation\n\nInstall the latest version via NPM:\n\n```bash\nnpm install @studiometa/js-toolkit\n```\n\n## What is it?\n\nThis project is a JavaScript micro-framework (along with its utility functions) whose main objectives are:\n\n- Enforcing best-practice and consistency between projects\n- Using elements from the DOM easily\n- Enabling custom behaviours on component initialization or other user events\n- Disabling custom behaviours on component destruction or other user events\n- Initializing components in the right place at the right time\n- Defining dependencies between components\n\nVisit [js-toolkit.studiometa.dev](https://js-toolkit.studiometa.dev) to learn more, jump directly to [ui.studiometa.dev](https://ui.studiometa.dev) to discover existing components, or open [the playground](https://ui.studiometa.dev/-/play/) to test it live.\n\n## Quick overview\n\nThis framework lets you define components as classes, and bind them to the DOM with `data-…` attributes. For example, here is how a `Counter` component would be defined in JavaScript:\n\n```js\nimport { Base } from '@studiometa/js-toolkit';\n\nexport default class Counter extends Base {\n  static config = {\n    name: 'Counter',\n    refs: ['add', 'remove', 'count'],\n  };\n\n  get counter() {\n    return this.$refs.count.valueAsNumber;\n  }\n\n  set counter(value) {\n    this.$refs.count.value = value;\n  }\n\n  onAddClick() {\n    this.counter += 1;\n  }\n\n  onRemoveClick() {\n    this.counter -= 1;\n  }\n}\n```\n\nAnd its accompanying HTML would be sprinkled with `data-…` attributes to bind elements from the DOM to the JavaScript class.\n\n```html\n\u003cdiv data-component=\"Counter\"\u003e\n  \u003cbutton data-ref=\"add\"\u003eAdd\u003c/button\u003e\n  \u003cbutton data-ref=\"remove\"\u003eRemove\u003c/button\u003e\n  \u003cinput data-ref=\"count\" type=\"number\" value=\"0\" /\u003e\n\u003c/div\u003e\n```\n\nYou can define options that can be specified with `data-option-...` attributes as well. First in JavaScript:\n\n```diff\n  class Counter extends Base {\n    static config = {\n      name: 'Counter',\n      refs: ['add', 'remove', 'count'],\n+     options: {\n+       step: {\n+         type: Number,\n+         default: 1,\n+       },\n+     },\n    };\n\n    onAddClick() {\n-     this.counter += 1;\n+     this.counter += this.$options.step;\n    }\n\n    onRemoveClick() {\n-     this.counter -= 1;\n+     this.counter -= this.$options.step;\n    }\n  }\n```\n\nAnd then adjust it as you wish in your HTML:\n\n```diff\n- \u003cdiv data-component=\"Counter\"\u003e\n+ \u003cdiv data-component=\"Counter\" data-option-step=\"2\"\u003e\n    \u003cbutton data-ref=\"add\"\u003eAdd\u003c/button\u003e\n    \u003cbutton data-ref=\"remove\"\u003eRemove\u003c/button\u003e\n    \u003cinput data-ref=\"count\" type=\"number\" value=\"0\"\u003e\n  \u003c/div\u003e\n```\n\nThe framework also offers a way to instantiate a root component as an application, with child components as dependencies:\n\n```js\nimport { Base, createApp } from '@studiometa/js-toolkit';\nimport Counter from './components/Counter.js';\n\nclass App extends Base {\n  static config = {\n    name: 'App',\n    components: {\n      Counter,\n    },\n  };\n}\n\nexport default createApp(App);\n```\n\nVisit our [\"Getting Started\" guide](https://js-toolkit.studiometa.dev/guide/) to learn more and try the above component by visiting [the playground](https://ui.studiometa.dev/-/play/#script=eNqVkjFPwzAQhff%2BijcguRVtEGurSpTuDKyIwdiXYprYkX2pQFX%2BO7bjlg6A1EiJndO97873bNrOecYRjzLQHMqTZNp0HQbU3rUQD4F7bVxLLO8%2BwoKda%2FaGxWoyUY0MAVvXWyYP%2BmSyOmQOjhMgsGSjoJytzQ7rHAOsbGkJUVRinoOe6rDEi5BaizmEp9YdKO1UShOvY5br2DgbE0dSqkDdzx%2FAX11kP%2FXtG%2FlRkh5NtewbXuL%2BFBvGzRC%2FQzwHsCOOfeaOprMC9MS9t%2BB3E6qb1GCVM6qDbHrahLHKKiESIVwQcsYJ87s%2BjiOvZ72zG623jVH7cwNZWZi4XRdSGUKVzn6hfs4j%2Bwew%2BBsQEaOVyfbrbIyKYqFy8SJZsnzhTzG5TDstcdyp2umSTeM7W30DtazCdQ%3D%3D\u0026html=eNqFkEsKwzAMRPc9hdDe5EOXcaD0Br2BEyvBkMjGkUN7%2Byb1ogkUupJAmjfMNNatYI0Y1fs5eCYWjXefWChiPvggzrNahILGGqGfzLJoDOoKw0RPGM22YnsBaLok4jnLIg0ajbUHQQ3dqLopkarKEuLmYslie7O2KbL0NyXS7Ff6D3p8%2Fk4sxyHJAdXv0RDkFUgjp7nbY65mQ2ksTw7R8aiqPBwvJF%2BfS1NstbVv4jxoZA%3D%3D\u0026style=eNpLyk%2BpVKjmUlAoSExJycxLt1IwLErNteaqBQBpsgf8). Discover our existing library of components by checking out the [@studiometa/ui](https://github.com/studiometa/ui) package.\n\n## Contributing\n\nThis projects follows the [Git Flow](https://github.com/petervanderdoes/gitflow-avh) methodology to manage its branches and features. The packages and their dependencies are managed with NPM workspaces. The files are linted with ESLint, type checked with TypeScript and formatted with Prettier.\n\n## License\n\nSee [LICENSE](./LICENSE).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstudiometa%2Fjs-toolkit","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fstudiometa%2Fjs-toolkit","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstudiometa%2Fjs-toolkit/lists"}