CalDOM
ve++
ネイティブDOMに直接アクセスできる、不可知論者、リアクティブ＆ミニマリスト（3KB）JavaScript UIライブラリ。
あなたをライブラリ固有の魔法の世界に引き込む代わりに、Caldomは反応性を維持しながら、 DOMに直接アクセスできますか？そのため、ネイティブAPIを最大限に活用し、他のライブラリと混合して、開発プロセスで優れたパフォーマンスと柔軟性を獲得できます。
あなたがそうするなら、2-in-1 Virtual-dom＆no-virtual-domアプローチ。
0️⃣ゼロツール、0法ゼロ依存関係、0法ゼロ新しい構文、純粋なjs。
本質的に、Caldomはネイティブノード/要素の周りのラッパーにすぎません。全体のパフォーマンス低下は、バニラ/純粋なJavaScriptと比較して約0.04倍です。これは、シングルエレメントインスタンスとマルチエレメントインスタンスの処理における平均ユニットレベルベンチマークに基づいています。バニラJS、jQuery、React JS、VUEなどに対するベンチマーク結果を表示します。
公式サイト：caldom.org
ドキュメント：caldom.org/docs/
チェーン可能なDom Traverserおよびマニピュレーター、軽量のjQueryの代替品として使用します。
_ ( "#output-1" )
. append (
_ ( "+h1" ) . text ( "Hello World!" )
) ;
//Short append
_ ( "#output-1" , _ ( "+p" , "This is CalDOM." ) ) ; リアクティブコンポーネントを構築します。軽量のReact JS/VUE JSの代替品として使用します。 Reactフックと同様のクラスを使用していませんが、よりシンプルです。
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 ?" ; 拡張ES6クラスとしても機能します。
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 ) ; ネイティブDOMノードは一流の市民です。また、Calomdインスタンスは、周囲のラッパーにすぎません。この不可知論の相互運用性により、無限の量の強力な統合が可能になります。
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. ?" ; レンダリングとバーチャルドムのもののファンではありませんか？ Caldomを使用して、事前に定義されたHTMLコンテンツを正式に更新します。 CaldomのAPIは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 ; より適切な場合は、DOMを直接（）domを直接更新（）virtual-domレンダリングに進みます。これを使用して、直接DOMノード参照を保持します。 caldomは、render（）が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は、シームレスにWebコンポーネントを統合します。 Caldomを使用して、Stateful＆Reactive Webコンポーネントを作成します。また、Webコンポーネントを入力として受け入れます。
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" ) )これらのカスタム要素は、通常どおりHTMLコードでネイティブに使用できます。 Webコンポーネントのブラウザサポートは比較的新しい（95％）に注意してください。未来は明るく見えます！ ？
< custom-element onclick =" doSomething() " >
</ custom-element >
< custom-element onclick =" state.msg = 'Native Web Components are awesome! ✌️' " >
</ custom-element > Caldomの基本的な建物ボックスは、ネイティブノード/要素にすぎません。したがって、Web上のほぼすべてのDOMライブラリと互換性があります。
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!" JS-DOMなどのライブラリを使用して、サーバーにブラウザコンテキストを実装できます。
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
) ;caldom.orgにアクセスして、多くのライブコードの例を実験してください。
< script src =" https://unpkg.com/caldom " > </ script >Caldomは、デフォルトで「_」変数をグローバルショートハンドとして使用しています。別のエイリアスを使用するには、['_ cal_dom_alias'] = 'differy_alias'をロードする前に、ウィンドウを設定します。
カルダムは、モジュールとして使用された場合、グローバル環境に何も接続していません。
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" ;あなたの貢献は大歓迎です、そして事前にありがとう。変更後は必ずユニットテストをしてください。
テストを実装します
初心者向けのドキュメント/ガイド。現在のものは技術的すぎます。
開発バージョンに役立つデバッグ出力を実装します。
徹底的なブラウザバージョンテスト。
仮想DOM拡散アルゴリズムをさらに最適化します。こちらのベンチマークを参照してください
より大きな実装をベンチマークする必要があります（各セルがサブコンポーネントであるスプレッドシートなど）
現在、ソースコード全体が1つのファイルにあります。したがって、Uglify-JSを使用してそれを削除する以外に、大きなビルドプロセスはありません。
これにより、.min.js＆.min.mjs.js＆関連.mapファイルを./dist/フォルダーに構築するだけです。
# Install dev dependencies
npm install
# Build
npm run buildテストとベンチマークのソースは、./tests_and_benchmarksにあります。 Caldomは、Pfreakと呼ばれる新しいユニットテスト＆ベンチマークフレームワークを使用しています。これは、Calmonのサイドプロジェクトとして作成されました。
最新のビルドのユニットテスト結果は、caldom.org/tests/で入手できます
インストール後にPFREAKを開始して、Symリンクを適切に設定します
pfreak init ./tests_and_benchmarks/internal/
pfreak init ./tests_and_benchmarks/external/ユニットテスト
npm testまたは
pfreak test ./tests_and_benchmarks/internal/他のライブラリに対してベンチマークを実行します（これには多くの時間がかかり、フラグを使用してタスクを選択的に実行できます。）
cd ./tests_and_benchmarks/external/
pfreak benchmark詳細については、Pfreakのヘルプを参照してください
pfreak --help
