FinOps有望降低企业50%+的云成本! 了解详情
写点什么

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

  • 2020-08-12
  • 本文字数:1149 字

    阅读完需:约 4 分钟

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> 组件中,从而简化了文本内容的颜色声明。因此,如下代码:


<Color red>   <Text bold>Hello World</Text> </Color> 
复制代码


在 Ink 3 中可以替换为:


<Text bold color="red">  Hello World </Text> 
复制代码


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


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


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


<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


2020-08-12 15:321321

评论

发布
暂无评论
发现更多内容

参与开源共建,你不可不知的贡献技巧

OpenHarmony开发者

OpenHarmony

青软集团蝉联华为云「千万俱乐部奖」「最佳销售黑钻奖」两大奖项

神奇视野

深入解析Flutter下一代渲染引擎Impeller

字节跳动终端技术

flutter 字节跳动 渲染器 Impeller 渲染方案

Go Go 简单的很,标准库之 fmt 包的一键入门

梦想橡皮擦

Python 爬虫 8月月更

开源一夏 | MySQL 事务的隔离级别

六月的雨在InfoQ

开源 mysql事务 MySQL 数据库 8月月更

翻译|是否应该在 Kubernetes 上运行数据库

RadonDB

MySQL Kubernetes RadonDB 数据库·

云上开发如何实现持续代码提交

华为云开发者联盟

云计算 后端 代码

开源一夏 | SSO单点登录流程源码学习

六月的雨在InfoQ

redis 开源 SSO 单点登录 8月月更

App Deploy as Code! SAE & Terraform 实现 IaC 式部署应用

阿里巴巴中间件

阿里云 Serverless Terraform 阿里云云原生

翻译 | Kubernetes Operator 对数据库的重要性

RadonDB

Kubernetes operator RadonDB 数据库·

签约计划第三季获奖名单公布,一起见证百人成团!

InfoQ写作社区官方

热门活动 签约计划第三季

企业搭建知识库的重要性,你了解多少?

Geek_da0866

工业智能化转型升级难?华为云这三招,加速商业变现

华为云开发者联盟

云计算 后端 华为云 工业智能化

第一时间快速了解 Kubernetes 1.25

云原生技术社区

容器 云原生 kubernetes入门 kubenetes Kubernetes, 云原生, eBPF

阿里三面被面试官狂问Redis,简历上再也不敢写"精通"了

退休的汤姆

面试题 阿里 秋招 redis 底层原理

如何实现跨数百个K8s集群的管理

云原生技术社区

istio 服务网格 K8s 多集群管理 Istio流量管理

重庆邮电大学新工科训练营 实践Java和大数据方向全真产业项目

神奇视野

Mysql和Redis数据如何保持一致

京东科技开发者

数据 数据一致性 MySQL 数据库 数据库· redis 底层原理

Shopee商家数字商品可配置系统设计与实现

Shopee技术团队

前端 Shopee

关于Copy On Write Array List,你会安全使用么

华为云开发者联盟

List 开发

Bytebase 1.3.1 - 2022.8.18

Bytebase

SQL优化 database SQL审批

"教练,我想打篮球!" —— 给做系统的同学们准备的 AI 学习系列小册

Zilliz

人工智能开源

2000字带您了解什么是 SD-WAN,它是如何工作的?

wljslmz

SD-WAN 网络技术 8月月更

2022秋招,Java岗最全面试攻略,吃透25个技术栈Offer拿到手软

退休的汤姆

面经 社招 Java工程师 秋招 Java八股文

实践基地+新工科实训 青软与西南大学展开多元校企合作

神奇视野

金融机构求索数据价值,“数牍方案”提供可行解 数牍科技

Jessica@数牍

隐私计算 金融行业 数据隐私安全

注册荣耀开发者,惊喜抽好礼!邀请5位好友赢50元购物卡~

荣耀开发者服务平台

开发者 手机 智慧屏 荣耀 honor

前端mcok原来可以如此丝滑

Liam

前端 前端开发 Postman Mock 前端工具

即刻报名|汽车制造行业如何玩转大数据分析?

Kyligence

数据分析 汽车制造

DPDK技术原理与架构

C++后台开发

虚拟化 DDoS DPDK VPP NFV

兆骑科创创新创业服务平台,云路演,人才引进平台

兆骑科创凤阁

  • 需要帮助,请添加网站小助手,进入 InfoQ 技术交流群
Ink 3:内置了全新的Hook、Suspense及React开发工具支持_大前端_Bruno Couriol_InfoQ精选文章