Ink是交互式命令行應用程序的React渲染器,最近發佈了帶有全新內置鉤子(Hook)的版本3,可以在終端中更好地進行聚焦和流管理(比如stdin)。開發人員可以利用React開發工具來檢查Ink應用程序的輸出。Ink 3還更新了組件(這些組件可以更好地設置CLI樣式)、內置的錯誤處理程序和日誌攔截,以及其他性能和穩定性方面的改進。
Ink 3爲交互式命令行應用程序的開發人員提供了7個全新的鉤子。 useInput
通過一個回調來處理用戶輸入,當用戶輸入任何輸入時,該回調會針對每個字符進行調用。 useApp
提供了一種手動退出應用程序(卸載)的方法。 useStdin
、 useStdout
和 useStderr
可以直接訪問 stdin
、 stdout
和 stderr
流。如果組件使用了 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、 Prisma、 New York Times及 其他用戶等。
可以在線訪問Ink 3的完整 發佈說明。 Ink.js在MIT開源許可下可用。歡迎通過 GitHub軟件包進行貢獻。
原文鏈接:
Interactive Terminal Apps with Ink 3 - New Built-In Hooks, Suspense and React Dev Tool Support