Releases: vadimdemedes/ink
v5.1.0
v5.0.1
v5.0.0
Even though this release is major, it doesn't have any breaking changes. The reason it's 5.0.0 is because after #635, Ink requires Node.js 18.
Huge thanks to @sindresorhus for maintaining Ink 💛
Highlights
Contributors
Assets 2
v4.4.1
v4.4.0
v4.3.1
This release brings back compatibility with Node.js v14.x. See #617 for details. Thanks @newhouse and @AlCalzone for handling it!
Contributors
Assets 2
v4.3.0
Highlights
- Speed up generation of output (#564) 9ff4d20
- Dim border color (#582) 8a04760
- Batch state updates in
useInputcallback (#581) eed2a11
Thank you
Huge shoutout goes to @AlCalzone for performance improvements in the generation of output, which speeds up rendering and significantly reduces CPU usage 🔥
Contributors
Assets 2
v4.2.0
New features
Custom border style
With the addition of borderStyle prop to Box, you can define custom border style for rendering borders.
<Box
borderStyle={{
topLeft: '↘',
top: '↓',
topRight: '↙',
left: '→',
bottomLeft: '↗',
bottom: '↑',
bottomRight: '↖',
right: '←'
}}
>
<Text>Content</Text>
</Box>
Individual colors for each border side
Box has supported borderColor prop for a while now to change the color of the border. In this release, there are new borderTopColor, borderBottomColor, borderLeftColor and borderRightColor props to change the color for each border side individually.
<Box
borderStyle="single"
borderTopColor="magenta"
borderBottomColor="green"
borderLeftColor="yellow"
borderRightColor="cyan"
>
<Text>So colorful</Text>
</Box>
Toggle visibility of individual border sides
As you can see, this is a pretty border-themed release. Continuing with the trend, now you toggle visibility of any border side individually via borderTop, borderBottom, borderLeft and borderRight props.
For example, if you wanted to hide top and bottom borders, you'd pass false to borderTop and borderBottom props respectively.
<Box
borderStyle="single"
borderTop={false}
borderBottom={false}
>
<Text>Content</Text>
</Box>
Other changes
v4.1.0
Highlights
Support for gap in Box
Box supports gap prop now to easily add space between columns and rows without manually assigning margins. Similar to CSS, gap is a shorthand for setting both columnGap and rowGap at the same time.
<Box gap={1}>
<Text>A</Text>
<Text>B</Text>
</Box>
// A BWrapping of flex items
@jodevsa contributed support for wrapping of flex items in via flexWrap prop, similar to flex-wrap CSS property.
<Box width={2} flexWrap="wrap">
<Text>A</Text>
<Text>BC</Text>
</Box>
// A
// B CCustomizable overflow behavior in Box
Box supports an overflow prop, which controls the visibility of an element's overflow. It can be set to "visible" (default) and "hidden", which hides any content that overflows element's boundaries. Like in CSS, overflow is a shorthand for setting both overflowX and overflowY.
<Box width={6} overflow="hidden">
<Box width={16} flexShrink={0}>
<Text>Hello World</Text>
</Box>
</Box>
// HelloWASM build of Yoga
Thanks to @amitdahan, Ink now uses a WASM build of Yoga provided by the yoga-wasm-web package. Starting with this release, Ink no longer uses yoga-layout-prebuilt package that is lagging behind Yoga releases.
Faster rendering
@AlCalzone contributed an impressive performance boost (~150%) to slice-ansi, which Ink heavily uses for generating output before writing it to the terminal. This release updates Ink to use a newer version of slice-ansi, so this should translate to faster rendering in Ink as well.
Other changes
Contributors
Assets 2
v4.0.0
Breaking changes
- This package is now pure ESM. Please read this.
- Require Node.js 14.16 (#546) aaf45a1
- Require React 18. (#546) aaf45a1
- Delete support for
hsl,hsv,hwbandansicolor formats inText'scolorprop. - Move
react-devtools-coreto optional peer dependency (#498) 8c2378a
Thank you
Major shoutout goes to @pepicrft and @amitdahan for leading the migration of Ink to ESM 💛
Thanks to @sindresorhus for support and helping reviewing these massive changes 👏
