Inkは、インタラクティブなコマンドラインアプリ用のReactレンダラーだが、最近、ターミナルでのフォーカスとストリーム管理(stdinなど)を向上させる新しい組み込みフックを備えたバージョン3を発表した。開発者は、React開発ツールを活用して、Inkアプリのアウトプットを検査できる。Ink 3ではコンポーネントも更新され、それによって、CLIのスタイリング、組み込みのエラーハンドラーとログのインターセプトが改善され、そして、その他のパフォーマンスと安定性が向上した。
Ink 3は、インタラクティブなコマンドラインアプリの開発者に対して7つの新しいフックを提供する。useInput
は、ユーザが何かを入力したときに各文字に対して呼び出されるコールバックを使用してユーザ入力を処理する。useApp
は、アプリを手動で終了する(unmount)メソッドを提供する。useStdin
、useStdout
、useStderr
を使用すると、stdin
、stdout
、stderr
ストリームに直接アクセスできる。useFocus
フックを使用するコンポーネントは、Inkがそのフォーカスが持つため、ユーザがTabキーを押すと、Inkはフォーカスをこのコンポーネントに切り替える。useFocus
フックを実行するコンポーネントが複数ある場合、レンダリングされる順序でこれらのコンポーネントにフォーカスが与えられる。useFocusManager
は、すべてのコンポーネントに対するフォーカス管理を有効または無効にするメソッドや、フォーカスを次のコンポーネントまたは前のコンポーネントに手動で切り替えるメソッドを提供する。
InkはReact Devtoolsをデフォルトでサポートする。開発者は、Inkアプリの出力を検査し、コンポーネントのプロパティを手動で変更し、CLIを再起動することなく、その場で更新を確認できる。
(Source: release note)
Ink 3は、<Color>
コンポーネントのすべての機能を<Text>
コンポーネントにマージし、テキストコンテンツの色の宣言を簡素化した。次のコードを例に挙げる。
<Color red>
<Text bold>Hello World</Text>
</Color>
Ink3では次のように置き換えられる。
<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のボックスは、7つの異なるボーダースタイルを持つことができる。
Ink3は、グローバルなReactエラーバウンダリを使用してReactのエラーメッセージもインターセプトする。Ink 3は、インターセプトしたエラーメッセージとスタックトレースを読みやすい形式で表示し、関連情報のみを保持する。Ink 3は、console
メソッド(console.error
など)の呼び出しもインターセプトし、ログがターミナルアプリのUIの上に正しく表示され、相互に干渉しないようにする。
Ink 3では、パフォーマンスと安定性がさらに向上する。Inkは、ターミナルのサイズが変更されると、再レンダリングする。そして、リファクタリングによってコードベースがTypeScriptになり、React Suspenseをサポートする。Ink 3は、FlexBoxサポートのレンダリングのバグと不整合を修正している。そして、Gatsby、Terraform、tap、Prisma、Shopify、New York Timesなどのユーザから受け取ったフィードバックを取り入れている。
Ink 3の完全なリリースノートはオンラインでアクセスできる。Ink.jsは、MITオープンソースライセンスの下で利用できる。GitHubパッケージを介したコントリビューションは歓迎する。