js toolkit

@ studiometa / js-toolkit

Un micro-trame de données JavaScript Data-Attributes a été dirigée avec de nombreuses fonctions d'utilité utiles pour augmenter votre projet.

Installation

Installez la dernière version via NPM:

npm install @studiometa/js-toolkit

Qu'est-ce que c'est?

Ce projet est un micro-trame JavaScript (ainsi que ses fonctions d'utilité) dont les principaux objectifs sont:

• Appliquer les meilleures pratiques et la cohérence entre les projets
• En utilisant facilement des éléments du dom
• Activer les comportements personnalisés sur l'initialisation des composants ou d'autres événements utilisateur
• Désactiver les comportements personnalisés sur la destruction des composants ou d'autres événements utilisateur
• Initialiser les composants au bon endroit au bon moment
• Définir les dépendances entre les composants

Visitez js-toolkit.studiometa.dev pour en savoir plus, ou sautez directement sur ui.studiometa.dev pour découvrir les composants existants.

Aperçu rapide

Ce cadre vous permet de définir les composants comme des classes et de les lier au DOM avec des attributs data-… . Par exemple, voici comment un composant Counter serait défini dans JavaScript:

 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 ;
  }
}

Et son HTML qui l'accompagne serait saupoudré de data-… des attributs pour lier les éléments du DOM à la classe JavaScript.

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

Vous pouvez définir des options qui peuvent être spécifiées avec des attributs data-option-... Premier en JavaScript:

  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;
    }
  }

Puis ajustez-le comme vous le souhaitez dans votre HTML:

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

Le cadre offre également un moyen d'instancier un composant racine en tant qu'application, avec des composants enfants comme dépendances:

 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 ) ;

Visitez notre guide "Getting Starting" pour en savoir plus et essayez le composant ci-dessus en visitant le terrain de jeu. Découvrez notre bibliothèque de composants existante en consultant le package @ studiometa / ui.

Contributif

Ces projets suivent la méthodologie Git Flow pour gérer ses branches et ses fonctionnalités. Les packages et leurs dépendances sont gérés avec des espaces de travail NPM. Les fichiers sont linés avec Eslint, types vérifiés avec TypeScript et formatés avec plus jolis.

Licence

Voir la licence.