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

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章