Categories
程式開發

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:内置了全新的Hook、Suspense及React开发工具支持 1

(来源: 发布说明

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

 
  Hello World 
 

在Ink 3中可以替换为:

 
 Hello World 
 

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

Green 
Blue 
Red 

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

 
 Black on Green 
 

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

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

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