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

1npm 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 to learn more, jump directly to ui.studiometa.dev to discover existing components, or open the playground to test it live.

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:

1import { Base } from '@studiometa/js-toolkit';
2
3export default class Counter extends Base {
4  static config = {
5    name: 'Counter',
6    refs: ['add', 'remove', 'count'],
7  };
8
9  get counter() {
10    return this.$refs.count.valueAsNumber;
11  }
12
13  set counter(value) {
14    this.$refs.count.value = value;
15  }
16
17  onAddClick() {
18    this.counter += 1;
19  }
20
21  onRemoveClick() {
22    this.counter -= 1;
23  }
24}

And its accompanying HTML would be sprinkled with data-… attributes to bind elements from the DOM to the JavaScript class.

1<div data-component="Counter">
2  <button data-ref="add">Add</button>
3  <button data-ref="remove">Remove</button>
4  <input data-ref="count" type="number" value="0" />
5</div>

You can define options that can be specified with data-option-... attributes as well. First in JavaScript:

1  class Counter extends Base {
2    static config = {
3      name: 'Counter',
4      refs: ['add', 'remove', 'count'],
5+     options: {
6+       step: {
7+         type: Number,
8+         default: 1,
9+       },
10+     },
11    };
12
13    onAddClick() {
14-     this.counter += 1;
15+     this.counter += this.$options.step;
16    }
17
18    onRemoveClick() {
19-     this.counter -= 1;
20+     this.counter -= this.$options.step;
21    }
22  }

And then adjust it as you wish in your HTML:

1- <div data-component="Counter">
2+ <div data-component="Counter" data-option-step="2">
3    <button data-ref="add">Add</button>
4    <button data-ref="remove">Remove</button>
5    <input data-ref="count" type="number" value="0">
6  </div>

The framework also offers a way to instantiate a root component as an application, with child components as dependencies:

1import { Base, createApp } from '@studiometa/js-toolkit';
2import Counter from './components/Counter.js';
3
4class App extends Base {
5  static config = {
6    name: 'App',
7    components: {
8      Counter,
9    },
10  };
11}
12
13export default createApp(App);

Visit our "Getting Started" guide to learn more and try the above component by visiting the playground. Discover our existing library of components by checking out the @studiometa/ui package.

Contributing

This projects follows the Git Flow 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.