Proposta para Transformar attributeChanged em um Módulo Separado

[deMGoncalves]

Discussed in #12

^{Originally posted by deMGoncalves September 8, 2024}
Gostaria de propor uma mudança significativa na estrutura do nosso código. Atualmente, o decorator attributeChanged está implementado diretamente no núcleo da biblioteca @bake-js/-o-id. Minha sugestão é transformá-lo em um módulo separado dentro da biblioteca, semelhante ao que fizemos com o módulo Echo.

Proposta

A ideia é criar um módulo separado para o attributeChanged, o que permitirá a importação direta da seguinte forma:

import attributeChanged from '@bake-js/-o-id/attribute';

Vantagens

1. Modularidade: Separar o attributeChanged em um módulo distinto tornará a biblioteca mais modular. Isso facilitará a manutenção e o desenvolvimento futuro, permitindo que novos decorators sejam adicionados ou modificados sem impactar o núcleo da biblioteca.

2. Facilidade de Uso: Ter um módulo separado simplificará a importação e o uso do attributeChanged em projetos. Com uma importação clara e direta, os desenvolvedores poderão integrar facilmente esse decorator em seus componentes.

3. Personalização com Filtros: Com o attributeChanged como um módulo separado, podemos facilitar a inclusão de filtros personalizados. Por exemplo, podemos disponibilizar filtros comuns, como booleanAttribute, diretamente através do módulo:

   const booleanAttribute = (value) => !/(false|0|no)/i.test(value);
   
   export default booleanAttribute;

   Isso permitirá que nossos desenvolvedores utilizem e até criem filtros adicionais de forma mais simples e direta.

4. Documentação e Exemplos: Com um módulo separado, podemos fornecer uma documentação mais focada e exemplos práticos diretamente relacionados ao uso do attributeChanged e seus filtros. Isso melhorará a clareza e a acessibilidade das informações para os usuários da biblioteca.

Exemplo de Uso

Com a nova estrutura, o attributeChanged pode ser utilizado da seguinte forma:

import attributeChanged from '@bake-js/-o-id/attribute';
import booleanAttribute from '@bake-js/-o-id/filters/booleanAttribute'; // Importação do filtro

class MyElement extends HTMLElement {
  #readonly;

  get readonly() {
    return (this.#readonly ??= false);
  }

  @attributeChanged('readonly', booleanAttribute) // Aplicação do decorator com filtro
  @dispatchEvent('readonlyed') // Exemplo de outro decorator aplicado
  set readonly(value) {
    this.#readonly = value;
  }
}

customElements.define('my-element', MyElement);

Implementação

Para implementar essa mudança, precisaremos:

1. Criar o Módulo attributeChanged: Estruturar o novo módulo para incluir a lógica do decorator attributeChanged, permitindo a exportação conforme mostrado acima.

2. Atualizar a Documentação: Revisar e atualizar a documentação para refletir a nova estrutura e fornecer exemplos claros sobre como usar o módulo e os filtros personalizados.

3. Modificar Exemplos e Testes: Ajustar os exemplos e testes existentes para utilizar o novo módulo, garantindo que a integração permaneça consistente e funcional.

Considerações Finais

A transformação do attributeChanged em um módulo separado trará uma série de benefícios para a biblioteca, incluindo melhor modularidade, facilidade de uso e a capacidade de oferecer filtros personalizados. Estou ansioso para ouvir o que vocês acham dessa proposta e discutir os próximos passos para sua implementação.