superfine
8.2.0
Superfineは、Webインターフェイスを構築するための最小限のビューレイヤーです。絶対的な最小値（1 kbミニファイド+gzipted）である場合は、州のマシン、効果、サブスクリプションなしでは、フレームワークなしでハイパーアップを考えてください。お気に入りの州管理ライブラリと混ぜるか、スタンドアロンを使用して最大限の柔軟性を備えてください。
これがあなたを始めた最初の例です。ここで試してみてください - 必要なステップは必要ありません！
<!DOCTYPE html >
< html lang =" en " >
< head >
< script type =" module " >
import { h , text , patch } from "https://unpkg.com/superfine"
const setState = ( state ) =>
patch (
document . getElementById ( "app" ) ,
h ( "main" , { } , [
h ( "h1" , { } , text ( state ) ) ,
h ( "button" , { onclick : ( ) => setState ( state - 1 ) } , text ( "-" ) ) ,
h ( "button" , { onclick : ( ) => setState ( state + 1 ) } , text ( "+" ) ) ,
] )
)
setState ( 0 )
</ script >
</ head >
< body >
< main id =" app " > </ main >
</ body >
</ html >ページがSuperfineでどのように見えるかを説明するとき、マークアップを書きません。代わりに、 h()およびtext()関数を使用して、dom（または略して仮想dom）の軽量表現を作成し、実際にdomをレンダリングしてpatch() 。
Superfineは、 patch()を使用するたびにDOM全体を再作成しません。古い仮想DOMと新しい仮想DOMを比較することにより、すべてをゼロからレンダリングするのではなく、変更する必要があるDOMの部分のみを変更できます。
次に、簡単なTODOアプリを見てみましょう。 Todosを追加または越えてしかできません。コードを少し突っ込んで、何が起こっているのかを理解できますか？ここに行ってください。
< script type =" module " >
import { h , text , patch } from "https://unpkg.com/superfine"
const updateValue = ( state , value ) => ( { ... state , value } )
const addTodo = ( state ) => ( {
... state ,
value : "" ,
todos : state . todos . concat ( state . value ) . filter ( any => any ) ,
} )
const setState = ( state ) => {
patch (
document . getElementById ( "app" ) ,
h ( "main" , { } , [
h ( "h2" , { } , text ( "To-do list" ) ) ,
h ( "ul" , { } ,
state . todos . map ( ( todo ) =>
h ( "li" , { } , [
h ( "label" , { } , [
h ( "input" , { type : "checkbox" } ) ,
h ( "span" , { } , text ( todo ) )
] ) ,
] )
)
) ,
h ( "section" , { } , [
h ( "input" , {
type : "text" ,
value : state . value ,
oninput : ( { target } ) =>
setState ( updateValue ( state , target . value ) ) ,
} ) ,
h ( "button" ,
{ onclick : ( ) => setState ( addTodo ( state ) ) } ,
text ( "Add todo" )
) ,
] ) ,
] )
)
}
setState ( { todos : [ "Learn Quantum Physics" ] , value : "" } )
</ script >その他の例をご覧ください
これで、スピンのためにスーパーファインを取る番です。すべてのTODOをクリアするためのボタンを追加できますか？行われたとおりのかさばりはどうですか？立ち往生しているか、質問をしたい場合は、問題を提出してください。私はあなたを助けようとします。
npm install superfine h(type, props, [children])それらを作成する仮想DOMノード！ h()ノードタイプを取得します。 HTMLまたはSVG属性のオブジェクト、および子ノードの配列（または1つの子ノード）。
h ( "main" , { class : "relative" } , [
h ( "label" , { for : "outatime" } , text ( "Destination time:" ) ) ,
h ( "input" , { id : "outatime" , type : "date" , value : "2015-10-21" } ) ,
] )text(string)仮想DOMテキストノードを作成します。
h ( "h1" , { } , text ( "1.21 Gigawatts!?!" ) )patch(node, vdom) DOMで仮想DOMを効率的にレンダリングします。 patch() 、既存のDOMノードである仮想DOMを取得し、パッチされたばかりのDOMを返します。
const node = patch (
document . getElementById ( "app" ) ,
h ( "main" , { } , [
// ...
] )
) Superfineノードは、HTML属性、SVG属性、DOMイベント、キーを使用できます。
class: 1つ以上のCSSクラスを指定するには、 class属性を使用します。これは、すべての通常のDOM要素とSVG要素に同様に適用されます。 class属性は文字列を期待します。
const mainView = h ( "main" , { class : "relative flux" } , [
// ...
] )style: style属性を使用して、任意のCSSルールをDOMノードに適用します。 style属性は文字列を期待します。
重要：スタイリング要素の主要な手段として、
style属性を使用することはお勧めしません。ほとんどの場合、class、外部CSSスタイルシートで定義されたクラスを参照するために使用する必要があります。
const alertView = h ( "h1" , { style : "color:red" } , text ( "Great Scott!" ) )key:キーは、DOMを更新するたびにノードを識別するのに役立ちます。仮想DOMノードにkeyプロパティを設定することにより、ノードは特定のDOM要素に対応する必要があることを宣言します。これにより、ポジションが変更された場合、それを破壊するリスクではなく、要素を新しい位置に並べ替えることができます。
重要：キーは兄弟ノードの中で一意でなければなりません。
import { h } from "superfine"
export const imageGalleryView = ( images ) =>
images . map ( ( { hash , url , description } ) =>
h ( "li" , { key : hash } , [
h ( "img" , {
src : url ,
alt : description ,
} ) ,
] )
) Superfineは、新しい要素を作成する代わりに、既存のコンテンツをリサイクルし、サーバー側のレンダリングHTMLにパッチを当てます。検索エンジンクローラーは完全にレンダリングされたページをより簡単に表示するため、この手法により、より良いSEOが可能になります。また、インターネットや遅いデバイスでは、JavaScriptがダウンロードされて実行される前にHTMLレンダリングが行われるため、ユーザーはコンテンツまでの時間が速くなります。
<!DOCTYPE html >
< html lang =" en " >
< head >
< script type =" module " >
import { h , text , patch } from "https://unpkg.com/superfine"
const setState = ( state ) =>
patch (
document . getElementById ( "app" ) ,
h ( "main" , { } , [
h ( "h1" , { } , text ( state ) ) ,
h ( "button" , { onclick : ( ) => setState ( state - 1 ) } , text ( "-" ) ) ,
h ( "button" , { onclick : ( ) => setState ( state + 1 ) } , text ( "+" ) ) ,
] )
)
setState ( 0 )
</ script >
</ head >
< body >
< main id =" app " > < h1 > 0 </ h1 > < button > - </ button > < button > + </ button > </ main >
</ body >
</ html >必要なすべてのHTMLがすでにドキュメントに添えられていることに注意してください。
Superfineは、マークアップがサーバーとクライアントの間で同じであると予想しています。不一致をバグとして扱い、それらを修正してください！これで、ブラウザにコンテンツを送信する方法が必要です。
JSXは、JavaScriptが散在するHTMLタグを作成できる言語構文拡張機能です。 JSXをJavaScriptにコンパイルするには、JSX Transform Pluginをインストールし、このようにプロジェクトのルートで.babelrcファイルを作成します。
{
"plugins" : [[ " transform-react-jsx " , { "pragma" : " h " }]]
}SuperfineはJSXを箱から出してサポートしていませんが、プロジェクトに追加するのは簡単です。
import { h , text } from "superfine"
const jsx = ( type , props , ... children ) =>
typeof type === "function"
? type ( props , children )
: h ( type , props || { } , children . flatMap ( ( any ) =>
typeof any === "string" || typeof any === "number" ? text ( any ) : any
)
)JSXを使用しているすべての場所でインポートすると、行ってもいいでしょう。これが実用的な例です。
import jsx from "./jsx.js"
import { patch } from "superfine" mit
