Xterm.js: 功能请求：导出 React 组件

这真的是一个非常有趣的场景。 我们尽量让 xterm.js 保持自包含和轻量级，因为它已经拥有足够的功能和复杂性。

我认为虽然创建一个 xtermjs/xterm-react 存储库和一个 xterm-react npm 模块帽子只是将 xterm.js 包装在一个 React 组件中就可以完成这项工作。 听上去怎么样？

那很好啊 ：）

我真的很想解决这个问题，但我发现了一些在调整代码而又不使其过于零散的问题。 问题是 xtem.js 在很大程度上依赖于与 DOM 的交互，因此分离视图逻辑非常困难。

我想提出一个功能请求，以允许不同组件接管渲染的方式分离逻辑和 DOM 处理。 我建议从 Terminal 中提取 Terminal.UI，这将负责将事件附加到 DOM、创建和更新元素等。Terminal 将等待 Terminal.UI 触发事件，例如按键和滚动，即它将与渲染完全分离。 我认为您开始使用视口朝那个方向发展，但我相信完全分离是有必要的。

我想听听您对此的看法，如果您认为相关，我愿意提供帮助。

我相信对于这个项目中代码的复杂性，一些关注点分离确实有助于未来的开发和维护，我是单一责任原则的忠实拥护者:smile:

@iMoses我们一直在慢慢尝试模块化代码，只是刚刚添加了将模块移出主文件的能力。 这是一个相关的问题，也需要这种分离： https ://github.com/sourcelair/xterm.js/issues/266

从视口开始，以保​​持不同的可管理性听起来不错👍

从#285 继续讨论，因为我认为它更合适。

@iMoses你能说出核心模块的哪些方法让你难以实现 react 组件吗？

也许最好的办法是只在他们自己的模块中分支这些。

并非此列表中的所有内容都难以使用，例如，如果我不使用open方法，则不会触发其他有问题的方法，但我仍然认为它们应该被分离到不同的模块中。 我将在此处列出的大部分内容都可以在 Interface.js 文件中的拉取请求中找到。

Viewport 和 CompositionHelper 中的任何内容，但这很明显 :)

从 xterm.js 文件中，这些是应该分离的主要方法：
模糊，焦点，绑定*，initGlobal，prepareCopiedTextForClipboard，insertRow，打开，loadAddon，销毁，刷新，attachCustomKeydownHandler，keyDown，evaluateKeyEscapeSequence，keyPress，铃，取消。

'bell' 和 'application-mode' 应该触发事件而不是与 UI 逻辑交互。

我相信这是大部分，但我们确实需要注意代码中 UI 元素的使用（例如 this.viewport 和 this.element 不应该被核心模块直接使用。

希望这有帮助。

附言
正如我所说，我目前正在研究一个 Reach XTerm.js 示例，为此我将 xterm 库剥离为我需要的基本要素。 我希望在不到一周的时间内完成，然后我将与您分享我的代码以供审查。
它目前在我的机器上运行良好，但有以下例外：我还没有附加鼠标事件，我有一个小渲染问题，我需要通过重写refresh的部分来解决这个事实我希望 React 处理渲染逻辑而不是库。

希望这可以帮助

在尝试解决此问题之前查看https://github.com/sourcelair/xterm.js/issues/266可能会很好

如果我们将核心逻辑和 UI 逻辑分开，就可以初始化核心而不用担心 dom，并且只有在需要时才能初始化视图，并传递给它一个终端核心实例来使用。

我正在尝试测试鼠标事件以查看我没有破坏任何东西，并且我找不到具有完整鼠标支持的终端应用程序，例如包括鼠标移动。 你们在测试这个库以验证鼠标事件是否正常工作？

我实际上为 react-xterm 组件创建了一个 npm 包。
你可以从那里开始。
如果需要，我什至可以转移 github 源项目
https://github.com/farfromrefug/react-xterm

谢谢@farfromrefug！ 如果我们不从“tabula rasa”开始，那就太好了。

这是由社区 imo 更好地完成的事情，我正在关闭以减少我们的问题数量，但我鼓励有人把它放在一起。

希望您不介意我对已关闭的问题发表评论，但我一直在开发自定义 React 渲染器以与 xtermjs 一起使用。 它提供了许多可用于写入终端输出的元素（例如<text> 、 <line> 、 <br> ）。 为了使用它，该包导出了一个render(element, HTMLElement)方法，该方法将终端呈现给提供的 DOM 元素。 它还可以通过提供一个<Terminal>组件与现有的 React-DOM 项目一起使用，该组件可以放在任何现有组件的render方法中。 不确定您是否想对这个项目做任何事情，但只是想我会在这里突出显示它，以防有人仍然想要反应集成：
https://github.com/alex-saunders/xterm-react-renderer

（仍然是一个 WIP，但它目前用作概念证明）

@alex-saunders 感谢您提出来，很高兴在这个问题上有一个链接，以防人们正在寻找👌

你好。 我能够设置一个几乎没有代码的反应组件，并使用“新”钩子系统。 但是，它与 node-pty 紧密耦合，用于电子场景。 我现在不能分享任何代码，因为它是一个封闭的内部项目，但我鼓励每个人使用基于钩子的解决方案来解决这个问题——这是值得的！