matrix-react-sdk, 用于响应Javascript的矩阵 SDK

分享于 

11分钟阅读

GitHub

  繁體 雙語
Matrix SDK for React Javascript
  • 源代码名称:matrix-react-sdk
  • 源代码网址:http://www.github.com/matrix-org/matrix-react-sdk
  • matrix-react-sdk源代码文档
  • matrix-react-sdk源代码下载
  • Git URL:
    git://www.github.com/matrix-org/matrix-react-sdk.git
    Git Clone代码到本地:
    git clone http://www.github.com/matrix-org/matrix-react-sdk
    Subversion代码到本地:
    $ svn co --depth empty http://www.github.com/matrix-org/matrix-react-sdk
    Checked out revision 1.
    $ cd repo
    $ svn up trunk
    
    matrix-react-sdk

    这是一个基于React的SDK,用于将矩阵聊天/voip客户端插入网页。

    这个包提供了使用响应构建矩阵网络客户端所需的响应组件。 它不能独立使用,必须从'皮肤'中使用。 皮肤提供:

    • 演示组件的自定义实现。
    • 自定义 CSS
    • 包含应用程序
    • 零个或者多个包含非用户界面功能的'模块'

    在 2016年07月的基础上,由于 matrix-react-sdk 迅速发展,为了满足暴乱( 代号矢量)的需要,皮肤抽象被破坏了。 现在 matrix-react-sdk 依赖于 riot-web ( 比如 )的一些功能。 CSS ) 和 matrix-react-sdk 包含一些反暴乱行为( grep'矢量')。 一旦暴露开发稳定,这个分层将被修复,但目前我们不建议为matrix-react-sdk创建新皮肤。

    在临时阶段,vector-im/riot-webmatrix-org/matrix-react-sdk 应该被看作是单个项目( 例如,matrix-react-sdk Bug 目前是针对矢量/的,而不是这个项目的。)。

    翻译状态

    Translation status

    开发人员指南

    平台目标:

    所有代码都在 develop 分支上- master 只用于稳定的发行版。 develop 文件

    请遵循捐赠者的标准矩阵指南: https://github.com/matrix-org/synapse/tree/master/CONTRIBUTING.rst

    请按照下面的矩阵 js/React代码样式进行操作: https://github.com/matrix-org/matrix-react-sdk/blob/master/code_style.md

    虽然matrix-react-sdk和暴乱之间的分层分离是中断的( 从 2016年07月 ),但应该按如下方式提交代码:

    matrix-react-sdk中的React成分有两种不同的味道: '结构'还有'视图'结构是处理应用程序更复杂的业务逻辑的有状态组件,它将它的实际呈现呈现给无状态'视图'组件。 例如,组织给定矩阵聊天室内容的RoomView组件跟踪它的子组件的大量状态,以通过道具传递。

    通过采用使用SDK的各种最佳实践来维护组件的良好分离需要注意和维护:

    • 组件的名称为 upper camel ( 比如。 views/rooms/EventTile.js)

    • 在通常两级层次结构中组织它们- 首先是组件是视图还是结构,然后是一个广泛的功能分组( 比如 )。 "房间"

    • 创建新组件后,必须运行 npm run reskindex 以重新生成SDK的component-index.js ( 用于以后的皮肤用于皮肤)

    • 视图文件的CSS必须具有相同的NAME ( 比如。 当前matrix-react-sdk的view/rooms/MessageTile.css). CSS位于 https://github.com/vector-im/riot-web/tree/master/src/skins/vector/css/matrix-react-sdk

    • 尽管 CSS inherit unusual它可以选择从应用程序的其他部分中选择它的所有样式,但这对于任何非结构化组件的( 缺少表示逻辑) 和最简单的视图组件来说都是例外。

    • 视图必须 引用在它自己的CSS文件中定义的CSS规则。 '偷'从其他组件( 包括父级) 中设置样式信息) 并不酷,因为它破坏了组件的独立性。

    • CSS类用特定的名称空间前缀命名,以避免CSS冲突。 由 Matrix.org 与matrix-react-sdk发送的基肤使用命名前缀"mx _"。 一家叫做Yoyodyne公司的公司可能使用类似"yy _ n"的前缀作为它的特定的类。

    • CSS类在描述React组件时使用上面的flex例子- 比如。mx_messagetile是应用于MessageTile视图的CSS的选择器。

    • view视图中DOM元素的CSS类在视图 NAME - 比如 中附加一个小写camel标识符。mx_messagetile_randomdiv是如何在视图中添加任意div的类的。

    • 我们有意使用 3.0避免将任何更多魔术依赖性添加到混合中,比我们已经有。 应用开发者欢迎使用他们的船。 将来我们将开始使用CSS来支持CSS变量支持之类的特性。

    • 组件的CSS可以重写子组件的规则。 例如在RoomList视图的上下文中查看时,mx_roomlist。mx_roomtile。{} 将是重写RoomTiles样式的选择器。 重写必须限定为视图类的CSS scoped 换句话说,不只是定义。mx_roomtile {},只允许定义它自己的CSS。 相反,mx_roomlist。mx_roomtile {} 将覆盖范围只映射到RoomList视图的上下文。 在一般的CSS inheritence中,N.B. 替代应该是相对少见的。

    • 组件应该只在它的最外层DOM元素的边界框内呈现。 页面绝对定位和负CSS边距和类似的差异通常不会在不同的地方容易使用。

    最初 matrix-react-sdk 按照 http://patternlab.io的原子设计 Pattern,尝试鼓励模块化的体系结构。 然而,我们发现将组件分组到 atoms/molecules/organisms 使得它们难以找到功能拆分的relative,并没有强调'结构结构'和'视图'组件之间的区别,所以我们从它后面后退了一步。

    Github问题

    所有问题都应在 https://github.com/vector-im/riot-web/issues 下归档。

    过时:创建你自己的皮肤

    这是目前的 skinning目前 skinning skinning - 请参见本主题顶部的警告部分。

    外观是从 lib 目录中的这样一个包导出的模块。 lib/skins 包含每个皮肤的一个目录,以皮肤命名,modules 目录包含模块作为它们的javascript文件。

    在matrix-react-skin包中提供了基本外观。 这还包含一个最小的应用程序,它实例化基本皮肤,使之成为工作矩阵客户机。

    可以直接使用 matrix-react-sdk,但是要做到这一点,你必须为每个UI组件提供'视图'。 要快速入门,请使用 matrix-react-skin。

    若要实际更改外观的外观,可以创建基础皮肤( 它不使用任何其他皮肤的视图),或者可以使派生皮肤变为。 注意,派生皮肤目前是实验性的: 例如它所基于的皮肤的CSS不会自动包含。

    要创建皮肤,为你希望在 src/skins/<skin name> 中添加的任何定制组件创建React类。 这些可以基于 matrix-react-skin 包中 views 中的文件,适当修改 require() 语句。

    如果生成衍生外观,只需复制希望自定义的文件即可。

    一旦你制作了所有的视图文件,你就需要做一个 skinfo.json。 这包含了皮肤的所有元数据。 这是一个目前为单个键的JSON文件,'baseskin'。 设置为空字符串,如果皮肤为基肤或者派生皮肤,将它的设置为基础 skinfo.json的路径。

    现在你有了皮肤的基础,你需要生成一个 skindex.json 文件。 matrix-react-sdk中的reskindex.js 工具为你实现了。 建议你添加一个npm脚本来运行这个脚本,如matrix-react-skin中所示。

    有关这些步骤的更详细的详细信息,请查看 matrix-react-skin。

    替代指令:

    • 创建新的NPM项目。 一定要直接依赖于React,( 否则你就会得到两个副本)。
    • 创建一个设置响应的index.js 文件。 为响应和matrix-react-sdk添加require语句。 使用SDK上的'loadskin'方法加载皮肤并调用 Render。 这可以是由单独包提供的皮肤,也可以是同一包中的皮肤。
    • 添加用于生成项目的方法: 我们建议从 matrix-react-skin ( 它使用babel和 web pack ) 复制脚本的block。 你可以使用不同的工具,但是要记住,至少项目的外观和模块应该以纯( IE ) 方式结束。 在生成过程结束时,库目录中的非 ES6,非 JSX ) javascript,以及你可以能做的任何包装。
    • 在你所使用的皮肤中创建一个 index.html 文件,在你的编译的javascript和CSS包中提取。 现在,你还需要从皮肤inherts的任何皮肤手动导入 CSS。

    JAVA  Javascript  react  MAT  SDK  Matrix  
    相关文章