CalDOM
ve++
Uma biblioteca de interface do usuário JavaScript JavaScript agnóstica, reativa e minimalista (3KB) com acesso direto ao DOM nativo.
Em vez de puxá-lo para um mundo mágico específico da biblioteca, a Caldom permite acessar completamente o DOM diretamente, mantendo a reatividade ? Assim, você pode aproveitar ao máximo as APIs nativas e misturá -lo com outras bibliotecas para obter desempenho superior e flexibilidade no processo de desenvolvimento.
Uma abordagem 2-em-1 virtual-dom e sem virtual, se você quiser.
0️⃣ Ferramentas zero, 0️⃣ dependências zero, 0ulação zero nova sintaxe, apenas JS puro.
Em essência, o Caldom é apenas um invólucro em torno do nó/elemento nativo. A queda geral de desempenho é de cerca de 0,04x em comparação com o Javascript de baunilha/puro. Isso se baseia em benchmarks médios de nível de unidade no manuseio de instâncias de elementos únicos e múltiplos: veja os resultados de referência contra JS de baunilha, jQuery, React JS, Vue e muito mais.
Site oficial: Caldom.org
Documentação: Caldom.org/docs/
Use -o como um Dom Traverser e um manipulador, uma alternativa leve de jQuery.
_ ( "#output-1" )
. append (
_ ( "+h1" ) . text ( "Hello World!" )
) ;
//Short append
_ ( "#output-1" , _ ( "+p" , "This is CalDOM." ) ) ; Construir componentes reativos. Use -o como uma alternativa leve React JS/Vue JS. Não usando classes, semelhantes aos ganchos do React, mas mais 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 ?" ; Também funciona como uma classe ES6 estendida.
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 ) ; O nó nativo Dom é um cidadão de primeira classe. Além disso, uma instância de Caldom é apenas um invólucro ao seu redor. Essa interoperabilidade agnóstica permite uma quantidade infinita de integrações 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. ?" ; Não é um fã de renderização e coisas virtuais? Use Caldom para atualizar () Conteúdo HTML predefinido de forma reativa. A API de Caldom é inspirada no 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 ; Atualize com eficiência () o DOM diretamente e/ou prossiga para renderização virtual-Dom se for mais adequado. Use isso. $ Para manter referências diretas de nó DOM. Caldom os mantém sincronizados mesmo quando renderiza () alteram drasticamente a estrutura 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 perfeitamente aos componentes da Web. Use Caldom para criar componentes da Web Stateful & Reativo. Ele também aceita componentes da 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" ) )Você pode usar esses elementos personalizados no código HTML nativamente, como de costume. Observe que o suporte ao navegador para componentes da Web é relativamente novo (95%). O futuro parece brilhante! ?
< custom-element onclick =" doSomething() " >
</ custom-element >
< custom-element onclick =" state.msg = 'Native Web Components are awesome! ✌️' " >
</ custom-element > A caixa de construção básica de Caldom é apenas nó/elemento nativo. Assim, tornando -o compatível com quase qualquer biblioteca DOM na 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!" Você pode usar uma biblioteca como o JS-DOM para implementar um contexto de navegador no 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 muitos exemplos de código ao vivo.
< script src =" https://unpkg.com/caldom " > </ script >A Caldom está usando a variável '_' como uma mão curta global por padrão. Para usar um alias diferente, defina a janela ['_ cal_dom_alias'] = 'DIFLEST_ALIAS' antes de carregá -lo.
Caldom não está anexando nada ao ambiente global quando usado 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" ;Suas contribuições são muito bem -vindas e obrigado antecipadamente. Certifique-se de teste de unidade após alterações.
Implementar testes
Uma documentação/guia para iniciantes. One atual é muito técnico.
Implementar saídas úteis de depuração para a versão de desenvolvimento.
Testes completos da versão do navegador.
Otimize ainda mais o algoritmo de difusão de DOM virtual. Veja Benchmark aqui
Precisa comparar implementações maiores (como em uma planilha onde cada célula é um subcomponente?)
Atualmente, todo o código -fonte está em um arquivo. Portanto, não há um grande processo de construção senão usar o Uglify-Js para minimizá-lo.
Isso simplesmente construa o .min.js & .min.mjs.js & arquivos .MAP relacionados na pasta ./dist/.
# Install dev dependencies
npm install
# Build
npm run buildAs fontes de testes e benchmarks estão no ./tests_and_benchmarks. A Caldom está usando uma nova estrutura de teste de unidade e benchmarking chamado pfreak. Que foi criado como um projeto paralelo de Caldom.
Os resultados dos testes de unidade para a última compilação estão disponíveis em caldom.org/tests/
Inicie o pfreak após a instalação para definir os links do SYM corretamente
pfreak init ./tests_and_benchmarks/internal/
pfreak init ./tests_and_benchmarks/external/Testes de unidade
npm testou
pfreak test ./tests_and_benchmarks/internal/Execute os benchmarks contra outras bibliotecas (isso leva muito tempo, você pode executar tarefas seletivamente usando sinalizadores.)
cd ./tests_and_benchmarks/external/
pfreak benchmarkConsulte a ajuda de Pfreak para obter detalhes
pfreak --help
