js toolkit

@studiometa/js-toolkit

Um JavaScript Data-Atributes acionado por micro-quadro-frame foi enviado com muitas funções de utilidade úteis para aumentar seu projeto.

Instalação

Instale a versão mais recente via NPM:

npm install @studiometa/js-toolkit

O que é?

Este projeto é um micro-quadro JavaScript (juntamente com suas funções de utilidade) cujos principais objetivos são:

• Exibindo a melhor prática e a consistência entre os projetos
• Usando elementos do DOM facilmente
• Permitir comportamentos personalizados na inicialização do componente ou em outros eventos de usuário
• Desativando comportamentos personalizados na destruição de componentes ou em outros eventos de usuário
• Inicializando componentes no lugar certo na hora certa
• Definindo dependências entre componentes

Visite js-toolkit.studiometa.dev para aprender mais ou pule diretamente para ui.studiometa.dev para descobrir os componentes existentes.

Visão geral rápida

Essa estrutura permite definir componentes como classes e ligá-los ao DOM com os atributos data-… . Por exemplo, aqui está como um componente Counter seria definido no 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 ;
  }
}

E seu HTML que acompanha seria polvilhado com data-… atributos para vincular elementos do DOM à 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 >

Você pode definir opções que podem ser especificadas com os atributos data-option-... também. Primeiro em 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;
    }
  }

E depois ajuste -o como desejar em seu 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>

A estrutura também oferece uma maneira de instanciar um componente raiz como um aplicativo, com componentes filhos como dependências:

 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 nosso guia de "começar" para aprender mais e experimente o componente acima visitando o playground. Descubra nossa biblioteca de componentes existente, verificando o pacote @Studiometa/UI.

Contribuindo

Esses projetos seguem a metodologia de fluxo Git para gerenciar seus ramos e recursos. Os pacotes e suas dependências são gerenciados com espaços de trabalho da NPM. Os arquivos são fiados com ESLint, digitam -se com o TypeScript e formatado com mais bonito.

Licença

Consulte a licença.