` のようなもので、Flexbox と Grid レイアウトをサポートします。
```tsx
import { Box, Text } from "tinky";
// Flexbox レイアウト
左
右
// Grid レイアウト
列 1
列 2
列 3
// ボーダーとパディング付き
スタイル付き Box
```
### Text
`
` コンポーネントは、色、太字、斜体などのスタイル付きテキストをレンダリングします。
```tsx
import { Text } from "tinky";
青いテキスト
ハイライト
スタイル付きテキスト
16進数カラーも使えます！
```
### Static
`` コンポーネントは、更新されない静的コンテンツをレンダリングします。ログや履歴に最適です。
```tsx
import { Static, Text } from "tinky";
const logs = ["ログ 1", "ログ 2", "ログ 3"];
{(log, index) => {log}};
```
### Transform
`` コンポーネントを使用すると、子要素の出力を変換できます。
```tsx
import { Transform, Text } from "tinky";
output.toUpperCase()}>
hello
;
// レンダリング結果: HELLO
```
### Newline と Spacer
```tsx
import { Box, Text, Newline, Spacer } from "tinky";
// Newline - 垂直方向のスペースを追加
1行目
2行目
// Spacer - flex コンテナ内の柔軟なスペース
左
右
```
## 🪝 フック
### useInput
コンポーネント内でキーボード入力を処理します。
```tsx
import { useInput, useApp } from "tinky";
function MyComponent() {
const { exit } = useApp();
useInput((input, key) => {
if (key.escape) {
exit();
}
if (key.upArrow) {
// 上矢印キーを処理
}
if (input === "q") {
exit();
}
});
return 'q' を押して終了;
}
```
### useApp
アプリインスタンスにアクセスして終了動作を制御します。
```tsx
import { useApp } from "tinky";
function MyComponent() {
const { exit } = useApp();
// エラーで終了
exit(new Error("エラーが発生しました"));
// 正常終了
exit();
}
```
### useFocus と useFocusManager
インタラクティブコンポーネントのフォーカスを管理します。
```tsx
import { useFocus, Box, Text } from "tinky";
function FocusableItem({ label }: { label: string }) {
const { isFocused } = useFocus();
return (
{label}
);
}
```
### useStdin、useStdout、useStderr
stdin、stdout、stderr ストリームに直接アクセスします。
```tsx
import { useStdout, useEffect } from "tinky";
function MyComponent() {
const { write } = useStdout();
useEffect(() => {
write("stdout からこんにちは！\n");
}, []);
return null;
}
```
## 🎨 スタイリング
### Flexbox プロパティ
```tsx
```
### Grid プロパティ
```tsx
```
### ボーダースタイル
```tsx
// ┌─┐
// ╔═╗
// ╭─╮
// ┏━┓
// +--+
```
### カラー
Tinky は複数のカラー形式をサポートしています：
```tsx
// 名前付きカラー
// 16進数カラー
// RGB カラー
// ANSI 256 カラー
```
## 🔧 API リファレンス
完全な API ドキュメントは [API ドキュメント](./docs/api/globals.md) を参照してください。
### render(element, options?)
React 要素をターミナルにレンダリングします。
```tsx
import { render } from "tinky";
const { unmount, waitUntilExit, rerender, clear } = render(, {
stdout: process.stdout,
stdin: process.stdin,
stderr: process.stderr,
exitOnCtrlC: true,
patchConsole: true,
});
// アプリの終了を待機
await waitUntilExit();
// 新しい props で再レンダリング
rerender();
// アプリをアンマウント
unmount();
// 出力をクリア
clear();
```
### incrementalRendering
`incrementalRendering` を使うと、Tinky がインタラクティブフレームを更新する
方法を選べます。run モードはターミナルセル単位で diff し、変更区間だけを書
き込みます。line モードは行単位で diff し、変更行を再描画します。
```tsx
import { render } from "tinky";
render(, {
// 次と同じ: { strategy: "run" }
incrementalRendering: true,
});
render(, {
incrementalRendering: { strategy: "line" },
});
render(, {
incrementalRendering: { enabled: false },
});
```
`debug`、スクリーンリーダー、CI 環境では、Tinky は自動的に非 run パスへ
フォールバックします。戦略の比較と挙動の詳細は
[増分レンダリングガイド](./docs/incremental-rendering.ja-JP.md) を参照して
ください。
### measureElement(ref)
レンダリングされた要素のサイズを測定します。
```tsx
import { measureElement, Box, useRef, useEffect } from "tinky";
function MyComponent() {
const ref = useRef(null);
useEffect(() => {
if (ref.current) {
const { width, height } = measureElement(ref.current);
console.log(`サイズ: ${width}x${height}`);
}
}, []);
return コンテンツ;
}
```
## 🧪 テスト
Tinky は Bun を使用してテストを行います。テストスイートを実行：
```bash
bun test
```
増分レンダリングのローカルベンチマークを実行するには、次を実行します。
```bash
bun run perf:render
```
CI と同じ性能ゲートを実行するには、次を実行します。
```bash
bun run perf:gate
```
## 📄 ライセンス
MIT © [ByteLandTechnology](https://github.com/ByteLandTechnology)
## 🙏 謝辞
- [Ink](https://github.com/vadimdemedes/ink) — オリジナルの React CLI フレームワーク
- [Taffy](https://github.com/DioxusLabs/taffy) — 高性能 CSS レイアウトエンジン
- [React](https://reactjs.org/) — これを可能にした UI ライブラリ