torus
Minor rendering bug fixes
torus-dom ）Torus是一個針對Web的事件驅動的模型視圖UI框架，專注於微小，高效且無依賴性。
你可以找到嗎？ github頁面上的圓環的完整文檔。
Torus還具有帶註釋的，易於閱讀的版本，該版本也在GitHub頁面上。如果您想了解更多有關框架的設計方式以及虛擬DOM和模板的工作方式，請檢查一下！
這是圓環在行動中的樣子！這是一個功能齊全的計數應用程序，無需彙編或捆綁步驟。
將此腳本標籤放在您的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沒有生產依賴性，不需要構建步驟就可以利用其所有功能，並且在5KB GZB中的權重包括模板引擎，渲染器，組件和事件系統以及CSS-IN-JS包裝器。這使得採用和運輸變得簡單，從渲染頁面上的一個組件到構建全尺寸應用程序的任何內容。
Torus並不是最快的虛擬DOM庫（像inferno這樣的替代方案），但性能和響應能力是該項目的主要目標。在保持微小的同時，Torus試圖盡可能快地響應，尤其是在渲染方面。結合小捆的尺寸，這使得圓環非常適合在任何設備上為任何地方構建Web應用程序。
Torus的體系結構封裝了組件本身內的所有渲染和更新邏輯，因此可以安全地將Component#node作為簡單的指針將其視為組件的根DOM元素。您可以在頁面上移動它，將其輸入和移出文檔，將其嵌入React或Vue組件甚至Web組件中，否則在任何地方都可以使用傳統的DOM元素。這使您可以在各種前端體系結構中包括圓環組件和應用程序。
再加上小尺寸的圓環，這使得僅用一個或幾個組件運送一個較大項目的圓環是合理的，該項目包括其他框架中的元素，如果您不想或不能運送整個圓環應用程序。
Torus並不關心國際化，但是作為開發人員，我們可以使用可用的API使我們的國際化在我們的圓環組成部分內成為可能。 Torus向您，開發人員揭露了大部分渲染過程和虛擬DOM，並且重要的是讓我們創建一個可以在JDOR中進行的preprocessor ，並在達到渲染器之前對其進行修改，因此我們可以對DOM進行修改，以使渲染器看到我們自己的代碼。這使得圓環高度可擴展，並且是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庫時，我（Linus）將圓環用於我的大多數個人項目。其中一些項目包括：
Torus的API是用於定義用戶界面和視圖的聲明性接口的混合物，以及用於狀態管理的命令模式，我個人發現這是構建大型應用程序時兩種樣式的最佳平衡。作為一般實踐，組件應試圖保持聲明性和掌握性，並通過數據模型暴露的公共穩定的勢在必行的API與數據模型 /狀態進行交互。
Torus的設計靈感來自React的組件驅動的結構，並藉用了React生態系統的共同概念，例如在渲染前進行虛擬DOM擴散的概念，具有高階組件的組成，將CSS和標記混合到JavaScript中，以將每個組件的關注點分為單個類別。但是，托魯斯通過提供更小，較少的低級API並選擇一種狀態的數據模型而不是努力純粹功能性的視圖/控制器層來建立這些想法。
Torus還在其數據模型設計中藉用了骨幹，用於記錄和商店，是因為如何在數據更新與視圖和其他模型綁定的背後具有事件驅動的設計。
最後，Torus的jdom模板標籤的靈感來自HTM和LIT-HTML，這兩個模板標籤都將HTML標記處理到虛擬DOM中。
前端開發工具一直處於趨勢，可以在構建時間 /編譯時間越來越多地進行越來越多的句法，從而使更豐富的語法和功能成為可能，例如採用提案軌道track-track javaScript功能和JSX。 Svelte是編譯時工具如何創建有關構建用戶界面的思考方式的一個很好的例子。
Torus不會嘗試成為另一個構建時間工具。 Torus的目標之一是在運行時盡可能有用，同時犧牲了盡可能少的性能和開銷，以便我們可以消除開發中的編譯步驟。結果，圓環是原型用戶界面創意的金標準體驗：只需在文檔中刪除<script>標籤並開始寫作即可。這種有意識的運行時間優先級以上的縮寫的缺點是，如果沒有編譯步驟，某些不是JavaScript語法的一部分。值得注意的是，如果在構建Torus應用程序中有一個編譯步驟，則不可能，但將很有用。我們可以在JSX中編寫JDOM模板，該模板在句法上非常相似，並在@render和@bind Decorator中包裹狀態更新的方法和事件偵聽器，而不是在每個實例上調用this.render()和.bind(this) 。
目前，添加彙編支持不在路線圖上，但應該很簡單，因為Torus是現代JavaScript的子集。將來，我們可能會回到解決這些彙編的邊緣好處，尤其是如果裝飾者在提案軌道上沒有進展的情況下。
類似的聲明性UI框架（例如React和preact）引入了片段的概念，該片段是從函數中呈現一系列（虛擬）DOM節點的語法糖。這是因為，雖然讓組件返回一個節點數組並沒有任何意義，但是具有內部功能將組件的部分和視圖返回沒有包裝元素的節點通常是有用的。 Torus本地支持一個節點列表的數組表示形式 - 只需將JDOM對象包裝在數組中！儘管與React不同，組件不能呈現一個以上的節點，但大多數片段用例都可以通過簡單地將組件內部數組中的一個節點列表的表示形式傳遞給組件內部的一個片段，並且這是在圓環中直觀地支持的。
我已經想到了修改jdom模板標籤的想法，以便能夠將<>...</>片段的模板表示變成節點的數組。 jdom還能夠簡單地簡單地解析模板中的相鄰頂級元素，然後將它們返回單個數組。但是，我決定暫時不運送這些功能，因為我相信這些用例可以通過返回JDOM模板的.children來充分涵蓋這些功能，甚至可能包裹在<>...</>片段中以獲得可讀性，或者簡單地返回一系列JDOM對象。我感謝從渲染操作中返回非傳統陣列所涉及的額外步驟的明確性，我認為偶爾返回陣列作為視圖部分的中間表示的成本不值得額外的功能成本。
Torus使用符號，地圖和集合，因此與除Internet Explorer 11以外的所有主要瀏覽器的最新版本兼容。在不支持EG Array Array差價運算符的較舊瀏覽器上，您可能需要使用Babel等工具將庫將庫轉移到ES5。
您可以從NPM作為torus-dom安裝圓環。 Torus仍然被認為是Beta ，而不是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將將其所有默認的Globals導出到window.Torus ，因此它們可以作為腳本的全局名稱訪問。這不建議在生產應用中使用，但非常適合實驗。
如果發現錯誤，請打開問題或提出帶有測試的拉請請求，以根據您的期望的圓環重新創建錯誤。如果您有功能請求，我可能不一定會尊重它，因為您是為了適合我的個人工作流程和架構偏好而建造的。但是我願意聽到您的意見！因此，請隨意打開一個問題，希望我可能不會決定將功能添加到圓環中（尤其是如果它會誇大捆綁包的大小或需要轉板器。）
您可以同時使用NPM和紗線來開發圓環，但是NPM腳本使用紗線，紗線得到了正式支持，因為這是我用來開發和構建圓環的東西。
要從源構建圓環，請運行
yarn build這將通過自定義工具鏈運行./src/torus.js ，首先通過development和production模式刪除任何調試功能調用並通過webpack運行。兩種輸出以及沒有Webpack處理的圓環的香草版都保存到./dist/ 。運行yarn clean將刪除任何此類構建工件，以及任何生成的覆蓋報告。
Torus具有獨特的系統，用於從以//>開頭的代碼註釋中生成文檔。要生成評論文檔，請運行
yarn docs DOCS文件將在./docs/上生成，並且可以在Web瀏覽器上查看。查看此項目的GitHub頁面，以獲取此腳本生成的示例。
要運行Torus的單元測試並生成覆蓋coverage/運行
yarn test這將在圓環的開發版本上運行基本的測試套件。使用完整的用戶界面（例如TODO應用程序）進行了更全面的集成測試。
我們還可以對生產構建進行測試，並通過：
yarn test:prod這不會產生覆蓋範圍報告，但會在dist/torus.min.js上進行縮小的生產測試，以驗證不會發生任何彙編錯誤。
使用自定義配置，帶有Eslint的圓環。要運行襯裡，運行
yarn lint或考慮使用編輯插件進行ESLINT。
