首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

Ink 3:内置了全新的Hook、Suspense及React开发工具支持

Ink是交互式命令行应用程序的React渲染器,最近发布了带有全新内置钩子(Hook)的版本3,可以在终端中更好地进行聚焦和流管理(比如stdin)。开发人员可以利用React开发工具来检查Ink应用程序的输出。Ink 3还更新了组件(这些组件可以更好地设置CLI样式)、内置的错误处理程序和日志拦截,以及其他性能和稳定性方面的改进。

Ink 3为交互式命令行应用程序的开发人员提供了7个全新的钩子。 useInput 通过一个回调来处理用户输入,当用户输入任何输入时,该回调会针对每个字符进行调用。 useApp 提供了一种手动退出应用程序(卸载)的方法。 useStdinuseStdoutuseStderr 可以直接访问 stdinstdoutstderr 流。如果组件使用了 useFocus 钩子,则其焦点由Ink处理,因此当用户按下Tab键时,Ink会将焦点切换到该组件。如果有多个执行 useFocus 钩子的组件,焦点将按照这些组件渲染的顺序进行分配。 useFocusManager 用于公开方法来启用或禁用所有组件的焦点管理,或手动将焦点切换到下一个或上一个组件。

Ink开箱即用地支持 React Devtools。开发人员可以检查其Ink应用程序的输出,手动更改任何组件的属性,并可以即时查看CLI更新,而无需重新启动。

(来源: 发布说明

Ink 3将 <Color> 组件的所有功能合并到了 <Text> 组件中,从而简化了文本内容的颜色声明。因此,如下代码:

代码语言:javascript
复制
<Color red> 
  <Text bold>Hello World</Text> 
</Color> 

在Ink 3中可以替换为:

代码语言:javascript
复制
<Text bold color="red"> 
 Hello World 
</Text> 

如果目标终端支持,开发人员可以使用HEX或RGB颜色:

代码语言:javascript
复制
<Text  color="green">Green</Text> 
<Text  color="#005cc5">Blue</Text> 
<Text  color="rgb(232, 131, 136)">Red</Text> 

开发者还可以通过 backgroundcolor 属性设置彩色背景:

代码语言:javascript
复制
<Text  color="black"  backgroundColor="green"> 
 Black on Green 
</Text> 

Ink 3的Box现在可以有七种不同的边框样式:

Ink 3还通过全局的 React错误边界拦截React的错误消息。Ink 3打印拦截的错误消息和堆栈跟踪,且只保留相关的信息。Ink 3还会拦截对 console 方法的调用(例如 console.error ),以确保日志能在终端应用程序的UI上方正确显示,并且不会相互干扰。

Ink 3还提供了性能和稳定性方面的改进。现在, 调整终端大小时,Ink会重新渲染, 将代码库重构为TypeScript,并支持 React Suspense。 Ink 3修复了FlexBox支持中渲染错误和不一致的地方,并整合了来自其用户的反馈——例如 Gatsby、 Terraform tap PrismaNew York Times其他用户等。

可以在线访问Ink 3的完整 发布说明。 Ink.js在MIT开源许可下可用。欢迎通过 GitHub软件包进行贡献。

原文链接:

Interactive Terminal Apps with Ink 3 - New Built-In Hooks, Suspense and React Dev Tool Support

  • 发表于:
  • 本文为 InfoQ 中文站特供稿件
  • 首发地址https://www.infoq.cn/article/1AoKel9rMw7rSE4PO9yM
  • 如有侵权,请联系 cloudcommunity@tencent.com 删除。

扫码

添加站长 进交流群

领取专属 10元无门槛券

私享最新 技术干货

扫码加入开发者社群
领券