crel

O que

Um utilitário de criação de DOM pequeno, simples e rápido

Por que

Escrever HTML é estúpido. É lento, confuso e não deve ser feito em JavaScript.

A melhor maneira de criar elementos DOM é por meio de document.createElement , mas criar muitos deles com ele é entediante.

Crel facilita esse processo.

A inspiração foi tirada do lacônico, mas Crel não vai mexer com seus ouvintes de eventos in-DOM ruins e é menor, mais rápido, etc.

Registro de alterações

Ver registro de alterações

Instalando

Para navegar:

npm i crel

 let crel = require ( 'crel' ) ;

Para AMD:

 require . config ( { paths : { crel : 'https://cdnjs.cloudflare.com/ajax/libs/crel/4.0.1/crel.min' } } ) ;
require ( [ 'crel' ] , ( crel ) => {
    // Your code
} ) ;

Usando ES6+:

 import crel from 'crel' ;

Para estilo de tag de script padrão:

 < script src =" crel.min.js " > </ script >

Uso

Sintaxe:

 // Returns a DOM element
crel ( tagName / domElement , attributes , child1 , child2 , childN ) ;

onde childN pode ser:

• um elemento DOM,
• uma string, que será inserida como textNode ,
• null , que será ignorado, ou
• um Array contendo qualquer um dos itens acima

Exemplos

 let element = crel ( 'div' ,
    crel ( 'h1' , 'Crello World!' ) ,
    crel ( 'p' , 'This is crel' ) ,
    crel ( 'input' , { type : 'number' } )
) ;

// Do something with 'element'

Você pode adicionar atributos que possuem traços ou palavras-chave reservadas no nome, usando strings para as chaves dos objetos:

 crel ( 'div' , { 'class' : 'thing' , 'data-attribute' : 'majigger' } ) ;

Você pode definir funcionalidades personalizadas para determinadas chaves vistas no objeto de atributos:

 crel . attrMap [ 'on' ] = ( element , value ) => {
    for ( let eventName in value ) {
        element . addEventListener ( eventName , value [ eventName ] ) ;
    }
} ;
// Attaches an onClick event to the img element
crel ( 'img' , { on : {
    click : ( ) => {
        console . log ( 'Clicked' ) ;
    }
} } ) ;

Você pode passar elementos já disponíveis para Crel para modificar seus atributos/adicionar elementos filhos a eles

 crel ( document . body , crel ( 'h1' , 'Page title' ) ) ;

Você pode atribuir elementos filhos a variáveis ​​durante a criação:

 let button ;
let wrapper = crel ( 'div' ,
    button  = crel ( 'button' )
) ;

Você provavelmente poderia usar o Crel para reorganizar os elementos DOM existentes.

 crel ( someDiv , crel ( someOtherDiv , anotherOne ) ) ;

Mas não.

Suporte de proxy

Se você estiver usando Crel em um ambiente compatível com Proxies, também poderá usar a nova API:

 let crel = require ( 'crel' ) . proxy ;

let element = crel . div (
    crel . h1 ( 'Crello World!' ) ,
    crel . p ( 'This is crel' ) ,
    crel . input ( { type : 'number' } )
) ;

Suporte ao navegador

Crel usa recursos ES6, portanto funcionará em todos os navegadores perenes.

Metas

Fácil de usar e minúsculo

Menos de 1K minificado, cerca de 500 bytes compactados === Smal

Rápido

Crel é rápido. Dependendo do navegador que você usa, ele está disponível com chamadas diretas document.createElement : http://jsperf.com/dom-creation-libs/10

Licença

MIT