CalDOM
ve++
Eine agnostische, reaktive und minimalistische JavaScript -UI -Bibliothek mit direktem Zugriff auf native DOM.
Anstatt Sie in eine bibliothekspezifische magische Welt zu ziehen, können Sie Caldom vollständig direkt auf das DOM zugreifen , während Sie die Reaktivität beibehalten? So können Sie native APIs voll ausnutzen und sie mit anderen Bibliotheken mischen, um eine überlegene Leistung und Flexibilität im Entwicklungsprozess zu erzielen.
Ein 2-in-1-Virtual-Dom & No-Virtual-Dom-Ansatz, wenn Sie so wollen.
0️⃣ Zero Tooling, 0️⃣ Zero -Abhängigkeiten, 0️⃣ Null neue Syntax, nur reine js.
Im Wesentlichen ist Caldom nur ein Wrapper um den nativen Knoten/Element. Der Gesamtleistungstropfen beträgt ca. 0,04X im Vergleich zu Vanille/reinem JavaScript. Dies basiert auf den gemittelten Benchmarks der Einheitenstufe bei der Behandlung von Einzel- und Mehrfachelementinstanzen: Benchmark-Ergebnisse gegen Vanille JS, JQuery, React JS, Vue & More anzeigen.
Offizielle Seite: Caldom.org
Dokumentation: Caldom.org/docs/
Verwenden Sie es als kettenhaltiger DOM -Traverser und Manipulator, eine leichte JQuery -Alternative.
_ ( "#output-1" )
. append (
_ ( "+h1" ) . text ( "Hello World!" )
) ;
//Short append
_ ( "#output-1" , _ ( "+p" , "This is CalDOM." ) ) ; Reaktive Komponenten bauen. Verwenden Sie es als leichte Reaktion JS/VUE JS -Alternative. Nicht verwenden Klassen, ähnlich wie React -Hooks, aber einfacher.
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 ?" ; Funktioniert auch als erweiterte ES6 -Klasse.
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 ) ; Der einheimische Dom-Knoten ist ein erstklassiger Bürger. Außerdem ist eine Caldom -Instanz nur ein Wrapper um sie herum. Diese agnostische Interoperabilität ermöglicht eine unendliche Menge leistungsstarker Integrationen.
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. ?" ; Kein Fan von Rendering & Virtual-Dom-Dingen? Verwenden Sie Caldom, um den vordefinierten HTML-Inhalt reaktiv zu aktualisieren. Die API von Caldom ist von JQuery inspiriert.
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 ; Effizient aktualisieren () das DOM direkt und/oder fortzusetzen mit dem Rendern von virtuellem Dom, wenn es besser geeignet ist. Verwenden Sie dies. $, Um direkte Dom -Knoten -Referenzen zu halten. Caldom hält sie synchronisiert, selbst wenn sie die Dom -Struktur drastisch verändern.
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 integriert nahtlos in Webkomponenten. Verwenden Sie Caldom, um staatliche und reaktive Webkomponenten zu erstellen. Es akzeptiert auch Webkomponenten als Eingaben.
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" ) )Sie können diese benutzerdefinierten Elemente im HTML -Code nativ wie gewohnt verwenden. Beachten Sie, dass die Browser -Unterstützung für Webkomponenten relativ neu ist (95%). Die Zukunft sieht hell aus! ?
< custom-element onclick =" doSomething() " >
</ custom-element >
< custom-element onclick =" state.msg = 'Native Web Components are awesome! ✌️' " >
</ custom-element > Grundlegende Gebäudebox mit Calom ist nur ein nationaler Knoten/Element. So werden es mit fast jeder DOM -Bibliothek im Web kompatibel.
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!" Sie können eine Bibliothek wie JS-DOM verwenden, um einen Browserkontext auf dem Server zu implementieren.
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
) ;Besuchen Sie Calom.org, um mit vielen Live -Code -Beispielen zu experimentieren.
< script src =" https://unpkg.com/caldom " > </ script >Caldom verwendet standardmäßig eine Variable '_' als globales Kurzschluss. Um einen anderen Alias zu verwenden, setzen Sie das Fenster ['_ Cal_dom_alias'] = 'Different_alias', bevor Sie es geladen haben.
Caldom findet nichts an der globalen Umgebung, wenn sie als Modul verwendet wird.
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" ;Ihre Beiträge sind sehr willkommen und bedanken Sie sich im Voraus. Bitte stellen Sie sicher, dass der Einheitstest nach Änderungen.
Tests implementieren
Eine anfängerfreundliche Dokumentation/eine Anfänger. Aktuell ist zu technisch.
Implementieren Sie hilfreiche Debug -Ausgänge für die Entwicklungsversion.
Gründliche Browser -Versionstests.
Weitere optimieren Sie den virtuellen DOM -Differungsalgorithmus. Siehe Benchmark hier
Müssen Sie größere Implementierungen reduzieren (wie in einer Tabelle, in der jede Zelle ein Subkomponent ist?)
Derzeit befindet sich der gesamte Quellcode in einer Datei. Es gibt also keinen riesigen Build-Prozess, als Uglify-Js zu verwenden, um ihn zu minimieren.
Dies erstellt einfach die .min.js & .min.mjs.js & verwandte .MAP -Dateien im Ordner ./dist/.
# Install dev dependencies
npm install
# Build
npm run buildTests und Benchmarks -Quellen finden Sie im ./Tests_and_Benchmarks. Caldom verwendet ein brandneues Rahmen für Einheitstests und Benchmarking namens PFreak. Das als Nebenprojekt von Caldom geschaffen wurde.
Unit -Testergebnisse für den neuesten Build finden Sie unter caldom.org/tests/
Initiieren Sie PFreak nach der Installation, um SYM -Links ordnungsgemäß festzulegen
pfreak init ./tests_and_benchmarks/internal/
pfreak init ./tests_and_benchmarks/external/Unit -Tests
npm testoder
pfreak test ./tests_and_benchmarks/internal/Führen Sie Benchmarks gegen andere Bibliotheken aus (dies dauert viel Zeit. Sie können Aufgaben selektiv mit Flags ausführen.)
cd ./tests_and_benchmarks/external/
pfreak benchmarkWeitere Informationen finden Sie in Pfreaks Hilfe
pfreak --help
