val

Val

Melhor integração VDOM / DOM

O objetivo deste invólucro é fornecer uma interface consistente em todas as soluções DOM virtuais que fornecem uma função Virtual DOM em estilo hipercript e também forneça uma interface padrão para a criação de DOM real. Isso inclui, mas não está limitado a:

• Reagir
• Preact
• DOM virtual
• Hiperscrito (qualquer implementação)
• Dom real
• ...

npm install @skatejs/val

Justificativa

Os problemas que essas diferentes implementações enfrentam é que a única coisa comum é a função que você chama e os argumentos que aceita, em um nível superior. No entanto, todos se comportam de maneira diferente com os argumentos que você lhes dá.

Por exemplo, o React definirá apenas adereços em elementos DOM que estão na sua lista de permissões. O PreAct definirá adereços nos elementos DOM, se estiverem in element . Há problemas com cada um deles.

O problema com o React é que você não pode passar estruturas de dados complexas para elementos DOM que possuem propriedades que não estão na lista de permissões, à qual todos os componentes da Web estariam sujeitos.

Com o Preact, é principalmente bom. No entanto, a suposição é que sua definição de elemento personalizada é definida antes da pré -reação criar o elemento DOM em sua implementação virtual de DOM. Isso falhará se suas definições de elemento personalizado forem carregadas de forma assíncrona, o que não é incomum ao querer adiar o carregamento de recursos não críticos.

Há outros problemas, como o React não funcionando com eventos personalizados.

Solução

A melhor solução que encontrei até agora é criar um invólucro que funcione para qualquer um deles. O invólucro permite várias coisas:

• Capacidade de passar por um construtor de elemento personalizado como o nome do nó (primeiro argumento).
• Controle explícito sobre quais atributos DOM para definir (via attrs: {} no segundo argumento.)
• Controle explícito sobre quais eventos DOM estão ligados (via events: {} no segundo argumento).
• Controle explícito sobre quais adereços DOM são definidos (via props: {} ) no segundo argumento).
• Todo o resto é passado e sujeito ao comportamento padrão de qualquer biblioteca que você está usando.
• O ref você passa será embrulhado para que val possa fazer suas coisas.

Requisitos

Isso pressupõe que qualquer biblioteca que você está envolvendo tem suporte para um retorno de chamada de ref como uma maneira comum de obter acesso ao elemento DOM bruto que precisamos usar embaixo do capô.

Uso

O uso é simples. Você importa o invólucro e o chama com o único argumento sendo a função virtual do DOM que deseja que ele envolva.

Reagir:

 import { createElement } from "react" ;
import val from "@skatejs/val" ;

export default val ( createElement ) ;

Preact:

 import { h } from "preact" ;
import val from "@skatejs/val" ;

export default val ( h ) ;

Nos seus componentes, você importaria sua função embrulhada em vez da da biblioteca.

 /** @jsx h */

import h from "your-wrapper" ;
import { PureComponent } from "react" ;
import { render } from "react-dom" ;

class WebComponent extends HTMLElement { }
class ReactComponent extends PureComponent {
  render ( ) {
    return < WebComponent /> ;
  }
}

render ( < ReactComponent /> , document . getElementById ( "root" ) ) ;

Dom real

Val envia com um adaptador padrão que gera nós DOM reais. Para fazer isso, basta importar a função h :

 /** @jsx h*/
import { h } from "@skatejs/val" ;

// <div>test</div>
console . log ( < div > test </ div > . outerHTML ) ;

Tudo funciona como anunciado, para que você ainda possa passar por elementos, atributos e eventos personalizados como normalmente faria e as coisas funcionam.

Ser capaz de fazer isso é imensamente útil para testar os componentes reais de DOM e Web. Aplique liberalmente!

Atributos DOM

Os atributos são especificados usando o objeto attrs .

 import h from "your-wrapper" ;

h ( "my-element" , {
  attrs : {
    "my-attribute" : "some value"
  }
} ) ;

Eventos DOM e eventos personalizados

Os eventos estão ligados usando o objeto events . Isso funciona para quaisquer eventos, incluindo eventos personalizados.

 import h from "your-wrapper" ;

h ( "my-element" , {
  events : {
    click ( ) { } ,
    customevent ( ) { }
  }
} ) ;

Propriedades DOM

As propriedades são categorizadas como qualquer coisa que não seja attrs ou events .

 h ( "my-element" , {
  props : {
    someProp : true
  }
} ) ;

Adereços de estrutura padrão

Qualquer outra coisa é transmitida para sua estrutura.

 // @jsx h

import val from "@skatejs/val" ;
import { createElement } from "react" ;

const h = val ( createElement ) ;

// The onClick prop gets passed through to React.
< button onClick = { ( ) => { } } /> ;

Construtores de elementos personalizados

Você também pode usar o seu construtor de componentes da web em vez do nome que foi passado para o customElements.define() .

 // So we have the reference to pass to h().
class CustomElement extends HTMLElement { }

// It must be defined first.
customElements . define ( "custom-element" , CustomElement ) ;

// Now we can use it.
h ( CustomElement ) ;