torus
Minor rendering bug fixes
torus-dom ）Torusは、Web向けのイベント駆動型モデルビューUIフレームワークであり、小さく、効率的で、依存関係がないことに焦点を当てています。
あなたはそれを見つけることができますか？ Githubページで、ここのTorusの完全なドキュメント。
Torusには、GitHubページにも、注釈付きの読みやすいバージョン（かなり簡潔な）コードベースもあります。フレームワークの設計方法と、仮想DOMとテンプレートがどのように機能するかについて詳しく知りたい場合は、確認してください。
これがTorusが動作しているように見えるものです！これは完全に機能的なカウンターアプリであり、コンピレーションやバンドルステップは必要ありません。
HTMLにこのスクリプトタグをドロップします
< script src =" https://unpkg.com/torus-dom/dist/index.min.js " > </ script >...そしてこのスクリプトをロードします。
// every view extends Component or StyledComponent
class App extends Torus . StyledComponent {
init ( ) {
// initialize our local state
this . count = 0 ;
}
styles ( ) {
// we can define dynamically and efficiently injected
// styles for our component with styles(), like this.
// These styles are also automatically scoped to the
// component, and we can use the full, nested SCSS syntax.
return css `
font-family: system-ui, sans-serif;
h1 {
text-align: center;
}
button {
padding: 4px 8px;
&:hover {
opacity: .8;
}
}
` ;
}
compose ( ) {
// We define the structure of our component in compose(),
// using a JSX- and lit-html-like syntax as a template string.
return jdom `<main>
<h1>Hi! You clicked ${ this . count } times.</h1>
<button onclick=" ${ ( ) => {
this . count ++ ;
this . render ( ) ;
} } ">Count up!</button>
</main>` ;
}
}
// mount the app to the page
document . body . appendChild ( new App ( ) . node ) ; Torusには生産依存関係がありません。すべての機能を活用するためのビルドステップは必要ありません。テンプレートエンジン、レンダラー、コンポーネント、イベントシステム、CSS-in-JSラッパーを含む5kb未満のGZIPTがあります。これにより、ページ上の単一のコンポーネントのレンダリングからフルスケールのアプリケーションの構築まで、採用して出荷するのが簡単になります。
Torusは、最速の仮想DOMライブラリになるように設計されていません（ infernoのような優れた選択肢があります）が、パフォーマンスと応答性はプロジェクトの主要な目標の1つです。 Torusは小さくなりますが、特にレンダリングでは、可能な限り速く、応答性が高いことを試みます。小さなバンドルサイズと組み合わせて、これにより、あらゆるデバイス上のどこにでもWebアプリケーションを構築するのに最適です。
Torusのアーキテクチャは、コンポーネント自体内のすべてのレンダリングおよび更新ロジックをカプセル化するため、 Component#nodeを使用して、コンポーネントのルートDOM要素への単純なポインターとして扱うことが安全です。ページの周りに移動したり、ドキュメントに出入りしたり、ReactまたはVueコンポーネント、さらにはWebコンポーネントに埋め込んだり、従来のDOM要素を使用できる場所で使用できます。これにより、さまざまなフロントエンドアーキテクチャにTorusコンポーネントとアプリを含めることができます。
トーラスのサイズと組み合わせることで、Torusアプリケーション全体を使用したくない、または出荷できない場合、他のフレームワークの要素を含むより大きなプロジェクトのために、1つまたは数のコンポーネントのみでTorusを出荷することが合理的になります。
Torusは国際化に関係していませんが、開発者として、Torusコンポーネント内で国際化を可能にするAPIを使用できます。 Torusは、レンダリングプロセスと仮想DOMの多くを開発者、開発者に公開し、重要なことに、レンダラーに到達する前にJDOMをpreprocessorし、変更する前に変更できるようにするため、レンダラーが独自のコードで見ているDOMを変更できます。これにより、Torusは非常に拡張可能で、I18Nに最適です。実際、コンポーネントプリプロセッサAPIは、TorusのStyled()コンポーネントを可能にするものです。 （ Styled()コンポーネントがレンダリングされる前に、新しいクラス名をJDOMに追加します。）
たとえば、 I18nComponentを作成する場合があります。これは、このような国際化プロジェクトの基本コンポーネントクラスとして機能する可能性があります。
class I18nComponent extends Component {
// The default preprocess method just returns the jdom as-is. We can override it
// to modify the JDOM given by component's `#compose()` method before it reaches the
// virtual DOM renderer.
preprocess ( jdom , _data ) {
// Here, we might recursively traverse the JDOM tree of children
// and call some custom `translate()` function on each string child
// and any displayed props like `placeholder` and `title`.
// As a trivial example, if we only cared about text nodes on the page,
// we could write...
const translate = jdom => {
if ( typeof jdom === 'string' ) {
// translate text nodes
return yourImplementationOfTranslateString ( jdom ) ;
} else if ( Array . isArray ( jdom . children ) ) {
// it's an object-form JDOM, so recursively translate children
jdom . children = jdom . children . map ( yourImplementationOfTranslateString ) ;
return jdom ;
}
return jdom ;
}
// In production, we'd also want to translate some user-visible properties,
// so we may also detect and translate attrs like `title` and `placeholder`.
return translate ( jdom ) ;
}
} クライアント側のUIライブラリが必要なときに、私の個人プロジェクトのほとんどにTorusを使用します。これらのプロジェクトには次のものがあります。
TorusのAPIは、ユーザーインターフェイスとビューを定義するための宣言的なインターフェイスの混合と、大規模なアプリケーションを構築する際の2つのスタイルの最良のバランスであると個人的に発見する州管理の命令パターンです。一般的な慣行として、コンポーネントは、宣言的かつ慣習的なままであり、データモデルによって公開された公共の安定した命令APIを介してデータモデル /状態と対話するように努める必要があります。
Torusのデザインは、Reactのコンポーネント駆動型アーキテクチャに触発されており、レンダリングの前に仮想DOMで拡散するというアイデア、高次コンポーネントとの構成、CSSとマークアップをJavaScriptに混合して各コンポーネントの懸念を単一クラスに分離するというアイデアなど、Reactエコシステムから共通の概念を借ります。しかし、Torusは、より最小限の、意見の少ない低レベルのAPIを提供し、純粋に機能的であるように努力するビュー/コントローラー層ではなく、ステートフルデータモデルを選択することにより、これらのアイデアに基づいています。
また、Torusは、データの更新がビューや他のモデルにバインドされる方法の背後にイベント駆動型のデザインを持つために、レコードや店舗向けのデータモデル設計でBackboneから借用しています。
最後に、Torusのjdomテンプレートタグは、HTMとLIT-HTMLに触発されました。どちらのテンプレートタグでも、HTMLマークアップを仮想DOMに処理しました。
FrontEnd開発ツールは、ビルド時間 /コンパイル時間でますます多くのことを行う傾向があり、Proposal-Track JavaScript機能やJSXを採用するなど、より豊かな構文と機能を可能にします。 Svelteは、コンパイルタイムツールがユーザーインターフェイスの構築に関するカテゴリー的に違いの考え方を作成する方法の素晴らしい例です。
Torusは別のビルドタイムツールになろうとはしません。 Torusの目標の1つは、パフォーマンスとオーバーヘッドを可能な限り犠牲にしながら、実行時に可能な限り有用であることです。そのため、開発中のコンパイルステップを排除できます。その結果、Torusは、ユーザーインターフェイスのアイデアをプロトタイプするゴールドスタンダードエクスペリエンスです。ドキュメントに<script>タグをドロップして書き込みを開始します。コンパイル時間に対するランタイムのこの意識的な優先順位付けの欠点は、JavaScript構文の一部ではないいくつかの機能がコンパイルステップなしでは不可能であることです。特に、ECMAScriptデコレーターの構文とJSX構文は不可能ですが、Torusアプリを構築する際のコンパイルステップがあれば役立ちます。 JSXにJDOMテンプレートを記述し、統一的に非常に類似していることを記述し、あらゆるインスタンスでthis.render()と.bind(this)を呼び出すのではなく、 @renderおよび@bindデコレーターで状態アップデートメソッドとイベントリスナーをラップすることができます。
コンピレーションサポートの追加は現在ロードマップには載っていませんが、Torusは最新のJavaScriptのサブセットであるため、簡単にする必要があります。特に装飾が提案トラックに進歩を示さない場合、将来の編集のこれらの限界的な利点に対処することに戻るかもしれません。
ReactやPreactのような同様の宣言的UIフレームワークは、関数からの（仮想）DOMノードの配列をレンダリングするための構文糖であるフラグメントの概念を導入しました。これは、コンポーネントに一連のノードを返すことはそれ自体では意味がないため、ラッパー要素のないノードとしてコンポーネントとビューを返す内部関数を持つことがしばしば役立つことが多いためです。 Torusは、ノードのリストの配列表現をネイティブにサポートしています。JDOMオブジェクトを配列にラップするだけです！ Reactとは異なり、コンポーネントは複数のノードをレンダリングすることはできませんが、コンポーネント内で内部的にアレイ内のノードのリストの表現を渡すだけで、フラグメントのほとんどのユースケースがカバーされます。これは、トーラスで直感的にサポートされています。
jdomテンプレートタグを変更して<>...</>のようなフラグメントのテンプレート表現をノードの配列に変えることができるというアイデアをおもちゃにしました。 jdom 、テンプレート内の隣接するトップレベルの要素を単純に解析し、単一の配列に戻すこともできます。しかし、これらのユースケースはJDOMテンプレートの.children返すことができることによって適切にカバーされていると信じているため、おそらく<>...</>フラグメントマーカーに巻き付けられるか、単にJDOMオブジェクトの配列を返すことができると考えています。レンダリング操作から非伝統的な配列を返すことに伴う余分なステップが明示されていることに感謝しています。ビューの一部の中間表現としてアレイを返すことの時折コストは、追加の機能コストの価値がないと思います。
Torusはシンボル、マップ、およびセットを使用するため、Internet Explorer 11を除くすべての主要なブラウザーの最新バージョンと互換性があります。ArraySpreadオペレーターをサポートしていない古いブラウザーでは、Babelなどのツールを使用してライブラリをES5に透過する必要があります。
NPMからtorus-domとしてTorusをインストールできます。トーラスはまだベータ版と見なされており、まだ1.0リリースではありません。 APIは現在安定しており、主要なバグのほとんどは押しつぶされていると思いますが、1.0まで保証はありません。
npm install --save torus-dom
# or
yarn add torus-dom import { StyledComponent , Record , Store , Router } from 'torus-dom' ;または、以下でトーラスをインポートすることもできます。
< script src =" https://unpkg.com/torus-dom/dist/index.min.js " > </ script > Torusはすべてのデフォルトのグローバルをwindow.Torusにエクスポートするため、スクリプトにグローバル名としてアクセスできます。これは、制作アプリでは推奨されませんが、実験に最適です。
バグが見つかった場合は、問題を開いたり、テストでプルリクエストを提出して、トーラスが予想したことに対してバグを再現してください。機能のリクエストがある場合、トーラスは私の個人的なワークフローとアーキテクチャの好みに合わせて主に構築されているため、必ずしもそれを尊重するわけではありません。しかし、私はあなたの意見を聞くことにオープンです！そのため、この機能をTorusに追加することを期待していないことを期待して、問題を自由に開きます（特にバンドルサイズを膨らませるか、トランスピラーが必要な場合）。
NPMとYARNの両方を使用してトーラスを開発できますが、NPMスクリプトはYARNを使用し、糸はトーラスの開発と構築に使用するものであるため、公式にサポートされています。
ソースからトーラスを構築するには、実行します
yarn buildこれにより、カスタムツールチェーンを介して./src/torus.jsが実行され、最初にデバッグ関数呼び出しを削除し、その結果を開発して、 developmentとproductionモードの両方を介して実行します。両方の出力と、Webパック処理のないTorusのバニラバージョンは、 ./dist/に保存されます。 yarn cleanを実行すると、このようなビルドアーティファクトと生成されたカバレッジレポートが削除されます。
Torusには、 //>で始まるコードコメントからドキュメントを生成するためのユニークなシステムがあります。コメントドキュメントを生成するには、実行します
yarn docs Docsファイルは./docs/で生成され、Webブラウザーで表示可能です。このスクリプトが生成するものの例については、このプロジェクトのgithubページをご覧ください。
Torusのユニットテストを実行し、カバレッジレポートをcoverage/ 、実行するには
yarn testこれにより、Torusの開発ビルドに関する基本的なテストスイートが実行されます。 TODOアプリのような完全なユーザーインターフェイスを使用した、より包括的な統合テストがロードマップにあります。
生産ビルドでテストを実行することもできます。
yarn test:prodこれにより、カバレッジレポートは生成されませんが、 dist/torus.min.jsで削除された生産ビルドに対してテストを実行して、コンパイルバグが発生しなかったことを確認します。
カスタム構成を使用して、TorusはEslintで糸くりをします。リナーを実行するには、実行します
yarn lintまたは、Eslintにエディタープラグインを使用することを検討してください。
