js toolkit

@Studiometa/JS-Toolkit

Un micro-marco de JavaScript Data-Atributes se envió con muchas funciones útiles de utilidad para aumentar su proyecto.

Instalación

Instale la última versión a través de NPM:

npm install @studiometa/js-toolkit

¿Qué es?

Este proyecto es un Micro-Framework JavaScript (junto con sus funciones de utilidad) cuyos objetivos principales son:

• Hacer cumplir la mejor práctica y consistencia entre proyectos
• Usar elementos del DOM fácilmente
• Habilitar comportamientos personalizados en la inicialización de componentes u otros eventos de usuario
• Deshabilitar comportamientos personalizados en la destrucción de componentes u otros eventos de usuario
• Inicializar los componentes en el lugar correcto en el momento correcto
• Definición de dependencias entre componentes

Visite js-toolkit.studiometa.dev para obtener más información, o saltar directamente a ui.studiometa.dev para descubrir los componentes existentes.

Descripción general rápida

Este marco le permite definir los componentes como clases y vincularlos al DOM con los atributos data-… Por ejemplo, así es cómo se definiría un Counter componente en 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 ;
  }
}

Y su HTML acompañante se rociaría con data-… atributos para unir elementos del DOM a la clase 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 >

Puede definir opciones que se pueden especificar con los atributos data-option-... también. Primero 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;
    }
  }

Y luego ajustarlo como desee en su 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>

El marco también ofrece una forma de instanciar un componente raíz como una aplicación, con componentes infantiles como dependencias:

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

Visite nuestra guía "Comenzando" para obtener más información y pruebe el componente anterior visitando el patio de recreo. Descubra nuestra biblioteca existente de componentes revisando el paquete @studiometa/ui.

Que contribuye

Estos proyectos siguen la metodología Git Flow para administrar sus ramas y características. Los paquetes y sus dependencias se administran con espacios de trabajo de NPM. Los archivos se pelean con Eslint, escriben con TypeScript y formateados con Prettier.

Licencia

Ver licencia.