feat(build): replace iocraft with opentui + yoga-layout renderer#1202
Closed
John-David Dalton (jdalton) wants to merge 4 commits intomainfrom
Closed
feat(build): replace iocraft with opentui + yoga-layout renderer#1202John-David Dalton (jdalton) wants to merge 4 commits intomainfrom
John-David Dalton (jdalton) wants to merge 4 commits intomainfrom
Conversation
WIP: OpenTUI-based terminal UI renderer with yoga-layout flexbox. Replaces iocraft's native rendering with: - yoga-layout WASM (153KB, from socket-btm) for flexbox computation - opentui.node (266 functions, from socket-btm) for buffer drawing - Custom render engine mapping Element trees to yoga nodes + opentui buffers Current state: - 25/26 iocraft feature tests passing - CLI --help renders correctly with full color support - Full flexbox: row/column, gap, padding, margin, borders, absolute positioning - All border styles (single, double, rounded, bold, classic, etc.) - Named colors, hex, ANSI 256 palette - Text attributes (bold, dim, italic, underline, strikethrough) - MixedText, Fragment support Remaining: - MixedText ANSI adjacency in renderToString (1 test) - iocraft-properties.test.mts full flexbox property tests - Renderer snapshot tests (may need snapshot updates)
|
Review the following changes in direct dependencies. Learn more about Socket for GitHub. |
- renderToString returns plain text (matching iocraft behavior) - printComponent/eprintComponent use ANSI-colored output - Custom buffer serializer reads cell data directly for clean output - Fix Fragment root handling (wrap in implicit View for yoga) - Fix border corner character order (bl/br swap) - Update renderer snapshots for plain-text output format All 86 terminal UI tests pass: - 26/26 iocraft-new-features tests - 54/54 iocraft-properties tests - 6/6 renderer snapshot tests
Add opentui .node binary download configuration to download-assets.mjs alongside existing iocraft config. Downloads from socket-btm releases.
Add @socketaddon/opentui/react module that provides a React renderer
mapping JSX components to the OpenTUI render engine's Element tree.
Components: <box>, <text>, <mixed-text>, <br>
Props: All flexbox (via yoga-layout), borders, colors, text styling
API: render(element, engine), renderToString(element, engine),
renderToElementTree(element)
Uses react-reconciler@0.33.0 with synchronous rendering
(updateContainerSync + flushSyncWork) for deterministic output.
Example:
import { render } from '@socketaddon/opentui/react'
render(
<box borderStyle="rounded" padding={1}>
<text color="green" bold>Hello React!</text>
</box>,
engine
)
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Replace iocraft's native terminal UI renderer with opentui + yoga-layout:
Architecture
Test results
--helprenders correctly with full color supportRemaining
Test plan
pnpm run build:clisucceedsnode packages/cli/dist/index.js --helprenders correctly