CalDOM
ve++
Una biblioteca agnóstica, reactiva y minimalista (3KB) JavaScript UI con acceso directo al DOM nativo.
En lugar de llevarlo a un mundo mágico específico de la biblioteca, Caldom le permite acceder completamente al DOM directamente mientras mantiene la reactividad . Por lo tanto, podría aprovechar al máximo las API nativas y mezclarlo con otras bibliotecas para obtener un rendimiento y flexibilidad superiores en el proceso de desarrollo.
Un enfoque 2-en-1 Virtual-DOM y No-Virtual-DOM si lo desea.
0ans herramientas cero, 0ans dependencias cero, 0ans nuevas sintaxis, solo js puro.
En esencia, Caldom es solo un envoltorio alrededor del nodo/elemento nativo. La caída general de rendimiento es de aproximadamente 0.04x en comparación con la vainilla/JavaScript puro. Esto se basa en puntos de referencia de nivel de unidad promedio en el manejo de instancias de un solo elemento: ver resultados de referencia contra Vanilla JS, JQuery, React JS, Vue y más.
Sitio oficial: caldom.org
Documentación: caldom.org/docs/
Úselo como un Traverser DOM encadenable y un manipulador, una alternativa de jQuery liviana.
_ ( "#output-1" )
. append (
_ ( "+h1" ) . text ( "Hello World!" )
) ;
//Short append
_ ( "#output-1" , _ ( "+p" , "This is CalDOM." ) ) ; Construir componentes reactivos. Úselo como una alternativa liviana React JS/Vue JS. No usar clases, similar a React Hooks, pero más simple.
let app = _ ( ) . react (
{ } ,
{
render : state =>
_ ( "+h1" , `Hello ${ state . name } ` ) //This is XSS safe by design
}
)
_ ( "#output-2" , app ) ;
//Edit below line to update state
app . state . name = "World Reactively ?" ; También funciona como una clase ES6 extendida.
class HelloWorld extends _ . Component {
constructor ( state ) {
super ( ) ;
this . react ( state ) ;
}
render ( state ) {
return _ ( "+div" , [ //Can pass children as an array too
_ ( "+h1" , "Hello " + state . name ) ,
_ ( "+p" , [ "The time is: " , state . time ] )
] ) ;
}
tick ( ) {
this . state . time = new Date ( ) . toTimeString ( ) . substr ( 0 , 8 ) ;
}
didMount ( ) {
setInterval ( ( ) => this . tick ( ) , 1000 ) ;
}
}
let app = new HelloWorld ( { name : "World!" , time : "" } ) ;
_ ( "#output-3" , app ) ; Native DOM Node es un ciudadano de primera clase. Además, una instancia de Caldom es solo un envoltorio a su alrededor. Esta interoperabilidad agnóstica permite una cantidad infinita de integraciones poderosas.
let app = _ ( ) . react (
{ } ,
{
render : state => {
let div = document . createElement ( "div" ) ;
let heading = document . createElement ( "h1" ) ;
heading . textContent = `I'm a reactive ${ state . name } ` ;
div . appendChild ( heading ) ;
//.elem gives you the direct Element
div . appendChild ( _ ( "+h2" , "???" ) . elem )
return div ;
}
}
)
_ ( "#output-3-1" , app ) ;
app . state . name = "native DOM Element. ?" ; ¿No es fanático de la renderización y las cosas virtuales? Use Caldom para actualizar () contenido HTML predefinido reactivamente. La API de Caldom se inspira en JQuery.
let person_one = _ ( "#person-1" ) . react (
{ } ,
{
update : function ( state , person ) {
person . find ( ".name" ) . text ( state . name ) ;
person . find ( ".age" ) . text ( state . age ) ;
}
}
)
//CalDOM batches these 2 state updates to only render once.
person_one . state . name = "Jane Doe" ;
person_one . state . age = 22 ; Actualizar eficientemente () el DOM directamente y/o proceder a virtual-doms render si es más adecuado. Use esto. $ Para mantener referencias directas de nodo DOM. Caldom los mantiene sincronizados incluso cuando renderiza () altere drásticamente la estructura DOM.
class Person extends _ . Component {
constructor ( ) {
super ( ) ;
this . react ( { name : "John" , likes : [ "SpongeBob" ] } ) ;
}
render ( state ) {
return _ ( "+div" , [
//Saving a reference to the direct DOM Element
this . $ . title = _ ( "+h1" , `I'm ${ state . name } ` ) . elem ,
_ ( "+p" , "I like " + state . likes . join ( " & " ) )
] ) ;
}
update ( state , person , changed_keys , changes_count ) {
if ( changes_count != 1 || ! ( "name" in changed_keys ) )
// Too complex to update, proceed to render.
return true ;
else //Update name directly using the DOM reference
this . $ . title
. textContent = `I'm ${ state . name } Directly. ?` ;
}
}
let user = new Person ( ) ;
_ ( "#output-4" , user ) ;
user . state . likes . push ( "Hulk" ) ; //This is handled by render()
setTimeout ( ( ) =>
user . state . name = "Jane" //This is handled by update()
, 1000 ) ; Caldom se integra a la perfección con los componentes web. Use Caldom para crear componentes web con estado y reactivo. También acepta componentes web como entradas.
class CustomElement extends HTMLElement {
connectedCallback ( ) {
let title = _ ( ) . react (
{ msg : "Hello World!" } ,
{
render : state =>
_ ( "+h2" , state . msg )
}
) ;
// Appending H2 as a child, keeping root intact
// this = <custom-element>
_ ( this , title ) ;
//Just a shortcut to access state easily
this . state = title . state ;
}
doSomething ( ) {
alert ( "Cool Eh!" ) ;
}
}
//Registering custom element.
customElements . define ( "custom-element" , CustomElement ) ;
let hello = document . createElement ( "custom-element" ) ;
document . getElementById ( "output-5-1" ) . appendChild ( hello ) ;
hello . state . msg = "I'm a Reactive, Stateful & Native Web Component. " ;
//Creating a new web component using CalDOM
_ ( "#output-5-1" ) . prepend ( _ ( "+custom-element" ) )Puede usar estos elementos personalizados en el código HTML de forma nativa como de costumbre. Tenga en cuenta que el soporte del navegador para componentes web es relativamente nuevo (95%). ¡El futuro se ve brillante! ?
< custom-element onclick =" doSomething() " >
</ custom-element >
< custom-element onclick =" state.msg = 'Native Web Components are awesome! ✌️' " >
</ custom-element > La caja de construcción básica de la calomio es solo nodo/elemento nativo. Por lo tanto, haciéndolo compatible con casi cualquier biblioteca DOM en la web.
class HelloJquery extends _ . Component {
constructor ( ) {
super ( ) ;
this . react ( { prompt : "" } ) ;
}
render ( state ) {
//Creating element & attaching click event using jQuery
return $ ( "<h1></h1>" )
. text ( state . prompt )
. click ( ( ) => state . prompt = "Hello from jQuery!" ) [ 0 ] ;
}
}
let app = new HelloJquery ( ) ;
_ ( "#output-6" , app ) ;
app . state . prompt = "Click Me!" Puede usar una biblioteca como JS-DOM para implementar un contexto de navegador en el servidor.
const { JSDOM } = require ( "jsdom" ) ;
//Set window in the global scope
window = new JSDOM ( ) . window ;
const _ = require ( "caldom" ) ;
class ServerApp extends _ . Component {
constructor ( ) {
super ( ) ;
this . react ( { msg : "" } ) ;
}
render ( state ) {
return _ ( "+p" , state . msg )
. css ( "color" , "#199646" )
}
}
let app = new ServerApp ( ) ;
_ ( "body" , app ) ;
app . react ( { msg : "Hello from NodeJS " + process . version } ) ;
//Saving generated HTML by the component to a file
require ( "fs" ) . writeFileSync (
"static_content.html" ,
window . document . body . innerHTML
) ;Visite Caldom.org para experimentar con muchos ejemplos de código en vivo.
< script src =" https://unpkg.com/caldom " > </ script >Caldom está utilizando la variable '_' como una mano corta global de forma predeterminada. Para usar un alias diferente, establezca la ventana ['_ cal_dom_alias'] = 'diferente_alias' antes de cargarlo.
Caldom no está conectando nada al entorno global cuando se usa como módulo.
npm install caldom //CalDOM also runs on Node JS with js-dom
const _ = require ( 'caldom' ) ; //RequireJS
requirejs ( [ "caldom" ] , function ( _ ) { } ) ; //ES6 Module
import _ from "./dist/caldom.min.mjs.js" ;Sus contribuciones son muy bienvenidas y gracias de antemano. Asegúrese de probar unidades después de los cambios.
Implementar pruebas
Una documentación/guía para principiantes. El actual es demasiado técnico.
Implemente salidas de depuración útiles para la versión de desarrollo.
Pruebas de versión exhaustivas del navegador.
Optimizar aún más el algoritmo de diferencia DOM virtual. Ver Benchmark aquí
¿Necesita comparar implementaciones más grandes (como en una hoja de cálculo donde cada celda es un subcomponente?)
Actualmente, todo el código fuente está en un archivo. Por lo tanto, no hay un gran proceso de construcción que no sea usar Uglify-JS para minificarlo.
Esto simplemente construya el .min.js & .min.mjs.js y los archivos .map relacionados en la carpeta ./dist/.
# Install dev dependencies
npm install
# Build
npm run buildLas pruebas y las fuentes de referencia están en el ./tests_and_benchmarks. Caldom está utilizando un nuevo marco de pruebas de unidades y comparación de evaluación de benchmarcación llamado PFreak. Que fue creado como un proyecto paralelo de Caldom.
Los resultados de las pruebas unitarias para la última compilación están disponibles en caldom.org/tests/
Iniciar PFreak después de la instalación para establecer los enlaces SYM correctamente
pfreak init ./tests_and_benchmarks/internal/
pfreak init ./tests_and_benchmarks/external/Pruebas unitarias
npm testo
pfreak test ./tests_and_benchmarks/internal/Ejecute puntos de referencia contra otras bibliotecas (esto lleva mucho tiempo, puede ejecutar tareas selectivamente usando banderas).
cd ./tests_and_benchmarks/external/
pfreak benchmarkConsulte la ayuda de PFreak para obtener más detalles
pfreak --help
