One UI to rule them all

Apêndice

Este é um estudo sobre web-component ou algo parecido para construir componentes reutilizáveis para Vue e React.

Ferramentas objetivo:

• Web component nativo
• StencilJS
• Lit (antigo polymer)
• Mitosis

Autores

• @schirrel

Componentes

• Button
  • type: button, submit e reset
  • adicionado customização de loading
• Input
  • com value sendo indentificado pelos frameworks
  • tipos de acordo com MDN

Estrutura

Componentes

• lit: desenvolvimento de componentes com Lit
• stencil: desenvolvimento de componentes com Stencil
• vanilla-js: desenvolvimento de componentes com web componentes 100% javascript puro

Examples

• lit: exemplos dos componentes desenvolvidos com Lit
• stencil: exemplos dos componentes desenvolvidos com Stencil
• vanilla-js: exemplos dos componentes desenvolvidos com web componentes 100% javascript puro

Documentação

Button

• type: button, reset, submit
  • type button é o default aqui, em vez do submit

Funcionando:

• @click do Vue
• onClick do React
• addEventListener("click" do JS vanilla

Não funciona:

• onclick nativo no Elemento.

Input

• type: todos os types que estão no MDN

Funcionando:

• v-model do Vue
• onInput do React (Exceto no Lit)

"Gambiarra":

• onChange do React: O onChange não ouve o evento nativo de change, mesmo o emitindo de varias maneiras. Analisando o código da pra perceber que o react implementa uma propriedade __reactEventHandlers onde esta possui uma função onChange.

Em andamento

• Validações de form como required

Funcionalidades

• Button
  • button, submit e reset
• Input
  • com atualização de value no framework
  • validação de form - EM ANDAMENTO

Referência

• Plain Web Components | Web Components | Open WC
• Lit | Docs
• Mitosis | Docs | Tutorial | mitosis issue asked
• Stencil | Docs

Demonstração

Demo