O projeto

Piece.js foi desenvolvido com a missão de ajudar desenvolvedores que ainda atuam usando JavaScript Vanilla, por meio da componentização, sistema usado hoje pelos mais famosos frameworks JavaScript. Através dessa ferramenta, é possível criar um arquivo html com função especifica e integra-la as mais diversas páginas, evetiando a repetição de código html.

Estrutura de um projeto usando Piece.js

Components
  -> ComponentName
    -> index.html
    -> style.css
  -> Components.json
    [ 
      { "component": "ComponentName" }, 
      { "component": "ComponentName" }
    ]
  -> index.js

Função de cada arquivo

Components: Conterá todos os components
Components.json: Irá deixar público quais components existem na pasta Components
ComponentName: É a pasta do componente
Index.js: Arquivo responsavel por converter os conteudos de um componente em uma tag

Todo componente deve conter a seguinte estrutura

  <componentName-component></componentName-component>

Como usar no HTML

Para o usuário conseguir manusear o framework corretamente, é nescessário seguir os seguintes padrões

 <body>
   <componentName-component></componentName-component>

   <script src="./Components/index.js" />
 </body>

Adicionar atributos dinamicamente

<componentName-component>
 id-tagNameId-html
 class-tagNameClass-attributes
> </componentName-component>

O usuário pode usar os seguintes atributos:

html: Permite que o usuário adicione html dinamicamente para o elemento através do componente
attributes: Permite que o usuário adicionar atributos como classes ou ações de clicks pelo componente

DamasoMagno / piece