Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/studiometa/js-toolkit
🔧 A data-attributes driven JavaScript micro-framework
https://github.com/studiometa/js-toolkit
component components framework javascript javascript-framework javascript-library library toolkit
Last synced: about 1 month ago
JSON representation
🔧 A data-attributes driven JavaScript micro-framework
- Host: GitHub
- URL: https://github.com/studiometa/js-toolkit
- Owner: studiometa
- License: mit
- Created: 2020-02-18T07:55:29.000Z (over 4 years ago)
- Default Branch: develop
- Last Pushed: 2024-04-11T11:28:12.000Z (5 months ago)
- Last Synced: 2024-04-12T09:18:45.994Z (5 months ago)
- Topics: component, components, framework, javascript, javascript-framework, javascript-library, library, toolkit
- Language: TypeScript
- Homepage: https://js-toolkit.studiometa.dev/
- Size: 20.6 MB
- Stars: 25
- Watchers: 17
- Forks: 2
- Open Issues: 8
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# @studiometa/js-toolkit
[](https://www.npmjs.com/package/@studiometa/js-toolkit/)
[](https://www.npmjs.com/package/@studiometa/js-toolkit/v/next)
[](https://www.npmjs.com/package/@studiometa/js-toolkit/)
[](https://bundlephobia.com/package/@studiometa/js-toolkit)
[](https://david-dm.org/studiometa/js-toolkit)
> A JavaScript data-attributes driven micro-framework shipped with plenty of useful utility functions to boost your project.
## Installation
Install the latest version via NPM:
```bash
npm install @studiometa/js-toolkit
```
## What is it?
This project is a JavaScript micro-framework (along with its utility functions) whose main objectives are:
- Enforcing best-practice and consistency between projects
- Using elements from the DOM easily
- Enabling custom behaviours on component initialization or other user events
- Disabling custom behaviours on component destruction or other user events
- Initializing components in the right place at the right time
- Defining dependencies between components
Visit [js-toolkit.studiometa.dev](https://js-toolkit.studiometa.dev) to learn more, or jump directly to [ui.studiometa.dev](https://ui.studiometa.dev) to discover existing components.
## Quick overview
This 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:
```js
import { Base } from '@studiometa/js-toolkit';
export default class Counter extends Base {
static config = {
name: 'Counter',
refs: ['add', 'remove', 'count'],
};
get counter() {
return this.$refs.count.valueAsNumber;
}
set counter(value) {
this.$refs.count.value = value;
}
onAddClick() {
this.counter += 1;
}
onRemoveClick() {
this.counter -= 1;
}
}
```
And its accompanying HTML would be sprinkled with `data-…` attributes to bind elements from the DOM to the JavaScript class.
```html
Add
Remove
```
You can define options that can be specified with `data-option-...` attributes as well. First in JavaScript:
```diff
class Counter extends Base {
static config = {
name: 'Counter',
refs: ['add', 'remove', 'count'],
+ options: {
+ step: {
+ type: Number,
+ default: 1,
+ },
+ },
};
onAddClick() {
- this.counter += 1;
+ this.counter += this.$options.step;
}
onRemoveClick() {
- this.counter -= 1;
+ this.counter -= this.$options.step;
}
}
```
And then adjust it as you wish in your HTML:
```diff
-
+
Add
Remove
```
The framework also offers a way to instantiate a root component as an application, with child components as dependencies:
```js
import { Base, createApp } from '@studiometa/js-toolkit';
import Counter from './components/Counter.js';
class App extends Base {
static config = {
name: 'App',
components: {
Counter,
},
};
}
export default createApp(App);
```
Visit 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&html=eNqFkEsKwzAMRPc9hdDe5EOXcaD0Br2BEyvBkMjGkUN7%2Byb1ogkUupJAmjfMNNatYI0Y1fs5eCYWjXefWChiPvggzrNahILGGqGfzLJoDOoKw0RPGM22YnsBaLok4jnLIg0ajbUHQQ3dqLopkarKEuLmYslie7O2KbL0NyXS7Ff6D3p8%2Fk4sxyHJAdXv0RDkFUgjp7nbY65mQ2ksTw7R8aiqPBwvJF%2BfS1NstbVv4jxoZA%3D%3D&style=eNpLyk%2BpVKjmUlAoSExJycxLt1IwLErNteaqBQBpsgf8). Discover our existing library of components by checking out the [@studiometa/ui](https://github.com/studiometa/ui) package.
## Contributing
This 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.
## License
See [LICENSE](./LICENSE).