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。
