crel

Qué

Una utilidad de creación de DOM pequeña, sencilla y rápida.

Por qué

Escribir HTML es una estupidez. Es lento, complicado y no debe hacerse en JavaScript.

La mejor manera de crear elementos DOM es mediante document.createElement , pero crear muchos de ellos con él es tedioso.

Crel facilita este proceso.

La inspiración fue tomada de lacónica, pero Crel no joderá a tus malos oyentes de eventos en DOM, y es más pequeño, más rápido, etc.

Registro de cambios

Ver registro de cambios

Instalación

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 el estilo de etiqueta de script estándar:

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

Uso

Sintaxis:

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

donde childN puede ser:

• un elemento DOM,
• una cadena, que se insertará como un textNode ,
• null , que será ignorado, o
• una Array que contiene cualquiera de los anteriores

Ejemplos

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

// Do something with 'element'

Puede agregar atributos que tengan guiones o palabras clave reservadas en el nombre, utilizando cadenas para las claves de los objetos:

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

Puede definir una funcionalidad personalizada para ciertas claves que se ven en el 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' ) ;
    }
} } ) ;

Puede pasar elementos ya disponibles a Crel para modificar sus atributos/agregarles elementos secundarios

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

Puede asignar elementos secundarios a variables durante la creación:

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

Probablemente podrías usar Crel para reorganizar los elementos DOM existentes.

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

Pero no lo hagas.

Soporte de proxy

Si está utilizando Crel en un entorno que admite Proxies, también puede utilizar la nueva API:

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

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

Soporte del navegador

Crel utiliza funciones de ES6, por lo que funcionará en todos los navegadores tradicionales.

Objetivos

Fácil de usar y pequeño

Menos de 1K minificado, alrededor de 500 bytes comprimidos === Pequeño

Rápido

Crel es rápido. Dependiendo del navegador que utilice, está a la altura de las llamadas directas document.createElement : http://jsperf.com/dom-creation-libs/10

Licencia

MIT