CalDOM
ve++
Une bibliothèque d'interface utilisateur JavaScript agnostique, réactive et minimaliste (3KB) avec un accès direct à Dom natif.
Au lieu de vous tirer dans un monde magique spécifique à la bibliothèque, Caldom vous permettait d'accéder complètement au DOM directement tout en gardant la réactivité ?. Vous pouvez donc profiter pleinement des API natives et le mélanger avec d'autres bibliothèques pour obtenir des performances et une flexibilité supérieures dans le processus de développement.
Une approche 2 en 1 dans le domaine virtuel et sans virtuel si vous voulez.
0️⃣ Zero Toolling, 0️⃣ Zero dépendances, 0️⃣ NOUVELLE SYNTAXE, JUSTE JS PURE.
Essentiellement, Caldom est juste un emballage autour du nœud / élément natif. La baisse globale des performances est d'environ 0,04x par rapport à la vanille / pur javascript. Ceci est basé sur des références moyennes de niveau unitaire dans la gestion des instances à éléments uniques et multiples: Voir les résultats de référence contre Vanilla JS, JQuery, React JS, Vue et plus.
Site officiel: Caldom.org
Documentation: caldom.org/docs/
Utilisez-le comme un traverser DOM chaîne et un manipulateur, une alternative JQuery légère.
_ ( "#output-1" )
. append (
_ ( "+h1" ) . text ( "Hello World!" )
) ;
//Short append
_ ( "#output-1" , _ ( "+p" , "This is CalDOM." ) ) ; Construire des composants réactifs. Utilisez-le comme une alternative JS REACT JS / VUE légère. Ne pas utiliser de classes, similaires aux crochets React, mais plus simples.
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 ?" ; Fonctionne également comme une classe ES6 étendue.
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 est un citoyen de première classe. De plus, une instance Caldom n'est qu'un wrapper autour d'eux. Cette interopérabilité agnostique permet une quantité infinie d'intégrations puissantes.
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. ?" ; Pas un fan de rendu et de choses virtuelles? Utilisez Caldom pour mettre à jour () le contenu HTML prédéfini de manière réactive. L'API de Caldom est inspirée par 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 ; Mettre à jour efficacement () le DOM directement et / ou procéder à un rendu de domaine virtuel s'il est plus approprié. Utilisez ce. $ Pour maintenir les références de nœud DOM direct. Caldom les maintient en synchronisation même lorsque Render () modifie considérablement la structure 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 s'intègre parfaitement aux composants Web. Utilisez Caldom pour créer des composants Web avec état et réactifs. Il accepte également les composants Web comme entrées.
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" ) )Vous pouvez utiliser ces éléments personnalisés dans le code HTML nativement comme d'habitude. Notez que la prise en charge du navigateur pour les composants Web est relativement nouvelle (95%). L'avenir a l'air brillant! ?
< custom-element onclick =" doSomething() " >
</ custom-element >
< custom-element onclick =" state.msg = 'Native Web Components are awesome! ✌️' " >
</ custom-element > La boîte de construction de base de Caldom n'est que le nœud / élément natif. Ainsi, le rendre compatible avec presque toutes les bibliothèques DOM sur le 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!" Vous pouvez utiliser une bibliothèque comme JS-DOM pour implémenter un contexte de navigateur sur le serveur.
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
) ;Visitez Caldom.org pour expérimenter de nombreux exemples de code en direct.
< script src =" https://unpkg.com/caldom " > </ script >Caldom utilise la variable '_' comme courte-courbe globale par défaut. Pour utiliser un alias différent, définissez la fenêtre ['_ cal_dom_alias'] = 'différente_alias' avant de le charger.
Caldom ne joigne rien à l'environnement global lorsqu'il est utilisé comme module.
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" ;Vos contributions sont les bienvenues et merci d'avance. Veuillez vous assurer de tester unité après les modifications.
Mettre en œuvre des tests
Une documentation / guide adapté aux débutants. L'autre est trop technique.
Implémentez les sorties de débogage utiles pour la version de développement.
Tests de version du navigateur complet.
Optimiser davantage l'algorithme de difficulté DOM virtuel. Voir Benchmark ici
Besoin de comparer des implémentations plus grandes (comme dans une feuille de calcul où chaque cellule est un sous-composant?)
Actuellement, l'intégralité du code source est dans un seul fichier. Il n'y a donc pas de processus de construction énorme autre que d'utiliser UGLIFY-JS pour l'alimenter.
Cela construit simplement le .min.js & .min.mjs.js et les fichiers .map associés dans le dossier ./dist/.
# Install dev dependencies
npm install
# Build
npm run buildLes sources de tests et de références sont au ./tests_and_benchmarks. Caldom utilise un tout nouveau cadre d'unité et d'analyse comparative appelée Pfreak. Qui a été créé comme un projet parallèle de Caldom.
Les résultats des tests unitaires pour la dernière version sont disponibles sur caldom.org/tests/
Lancer pfreak après l'installation pour définir correctement les liens SYM
pfreak init ./tests_and_benchmarks/internal/
pfreak init ./tests_and_benchmarks/external/Tests unitaires
npm testou
pfreak test ./tests_and_benchmarks/internal/Exécutez des repères contre d'autres bibliothèques (cela prend beaucoup de temps, vous pouvez exécuter des tâches sélectivement à l'aide de drapeaux.)
cd ./tests_and_benchmarks/external/
pfreak benchmarkRéférez-vous à l'aide de Pfreak pour plus de détails
pfreak --help
