Structra

A Structra é uma biblioteca JavaScript que permite a criação e gerenciamento de componentes HTML de maneira modular, reutilizável e flexível. Ela foi projetada para facilitar a construção de interfaces dinâmicas, simplificando a criação de elementos HTML, a manipulação de atributos, classes e conteúdo de forma intuitiva.

Sumário

1. Introdução
2. Instalação
3. Uso Básico
4. Estrutura de Componentes
5. API da Structra
   • Classe Component
   • Métodos da Classe Component
6. Exemplo Completo
7. Considerações Finais
8. Atualizações Futuras

Introdução

A Structra oferece uma maneira eficiente e modular de criar componentes HTML personalizados. Ela permite que você crie componentes reutilizáveis, configure seus atributos, adicione filhos e controle o processo de renderização de maneira simples e eficaz.

Instalação

Com npm (Node Package Manager)

Se você estiver utilizando o Node.js e o npm, basta rodar o seguinte comando:

npm i structra

Com CDN

Você pode também incluir a biblioteca diretamente no seu projeto usando o CDN:

AINDA INDISPONIVEL

Uso Básico

A Structra permite que você crie e renderize componentes HTML de forma muito simples, sem a necessidade de escrever muito código repetitivo. A criação de um componente básico é feita da seguinte maneira:

const myComponent = new Component({
  tag: 'div',
  content: 'Olá, este é um componente simples!'
});

Estrutura de Componentes

Cada componente é uma instância da classe Component, que recebe um objeto de configuração. O principal objetivo da Structra é garantir que seus componentes sejam fáceis de criar, configurar e manipular.

Exemplo de Estrutura de Componente:

const myComponent = new Component({
  tag: 'div',
  id: 'container',
  classes: ['container', 'highlighted'],
  content: 'Bem-vindo à Structra!',
  children: [
    { tag: 'h1', content: 'Título do Componente' },
    { tag: 'p', content: 'Este é um parágrafo dentro do componente.' }
  ]
});

API da Structra

Classe Component

A classe Component é o coração da Structra. Ela representa qualquer componente HTML e oferece um conjunto de métodos para manipulação dos elementos e seus filhos.

Propriedades:

• element: O elemento DOM gerado pela instância da classe. Pode ser manipulado diretamente.
• children: Uma lista de instâncias de Component que são filhos do componente atual.

Construtor da Classe Component:

O construtor recebe um objeto de configuração, que define as propriedades do componente.

new Component({
  tag: 'div',
  id: 'meuComponente',
  classes: ['class1', 'class2'],
  content: 'Conteúdo do componente',
  children: [
    { tag: 'p', content: 'Texto do parágrafo' }
  ]
});

Métodos da Classe Component

• render(parent: HTMLElement): Este método insere o componente no DOM.

  myComponent.render();

  • Renderiza o elemento diretamente no body do documento

  myComponent.render(document.getElementById('custom-container'));

  • Renderiza o elemento em um container específico

• destroy(): Remove o componente e seus filhos do DOM.

  myComponent.destroy();

Exemplo Completo

Aqui está um exemplo completo de uso da Structra:

// Criando um componente principal
const container = new Component({
  tag: 'div',
  id: 'container',
  classes: ['main-container'],
  content: 'Este é o componente principal!',
  children: [
    { tag: 'h1', content: 'Título principal' },
    { tag: 'p', content: 'Texto de exemplo para um parágrafo.' },
    { tag: 'button', content: 'Clique aqui' }
  ]
});

container.render()

Resultado Esperado:

• Um div com o ID container, as classes main-container, e o conteúdo "Este é o componente principal!". Dentro dessa div, há três filhos: um título (h1), um parágrafo (p), e um botão (button). O componente será automaticamente inserido no body da página.

Considerações Finais

A Structra foi criada para simplificar a criação de interfaces dinâmicas e componentes reutilizáveis. Sua estrutura modular e flexível permite que você organize e manipule seu código de maneira mais eficiente, sem precisar lidar com complexidade desnecessária. Se você deseja criar interfaces dinâmicas e customizadas, a Structra é uma escolha excelente para seu projeto.

Atualizações Futuras

A Structra está em constante evolução, e algumas das funcionalidades que estamos planejando para versões futuras incluem:

• Integração com arquivos JSON: Permitir a criação de componentes diretamente a partir de arquivos .json, facilitando a definição da estrutura de componentes de forma dinâmica.

• Suporte a Templates: Implementação de templates para reutilização de componentes.

• Otimização e Performance: Melhorias contínuas na renderização e desempenho da biblioteca.

Fique atento às novas atualizações!