Update dependency ink to v5 #3289

renovate · 2024-05-13T00:18:57Z

This PR contains the following updates:

Package	Change	Age	Adoption	Passing	Confidence
ink	`2.7.1` -> `5.1.0`

Release Notes

vadimdemedes/ink (ink)

`v5.1.0`

Compare Source

Support space-evenly value for justifyContent attribute (#678) 1588397

`v5.0.1`

Compare Source

Fix: Only focus active elements (#631) d8bcff8

`v5.0.0`

Compare Source

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

Use simpler CI detection (#638) fd0698b
Require Node.js 18 (#635) d73468a

`v4.4.1`

Compare Source

Highlights

Fix React Devtools integration (#626) 3d02a16
Fix inability to read user input after app exit (#622) 45dcc1e
Fix broken link escapes (#623) adc2c0c

`v4.4.0`

Compare Source

Highlights

Add index property to Transform (#619) 0ee8e89
Use readable event instead of data to read from stdin (#616) 814f33e

Credits

Thanks to @isaacs and @matteodepalo for contributing to this release!

`v4.3.1`

Compare Source

This release brings back compatibility with Node.js v14.x. See https://github.com/vadimdemedes/ink/issues/617 for details. Thanks @newhouse and @AlCalzone for handling it!

`v4.3.0`

Compare Source

Highlights

Speed up generation of output (#564) 9ff4d20
Dim border color (#582) 8a04760
Batch state updates in useInput callback (#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 🔥

`v4.2.0`

Compare Source

New features

Custom border style

fb66872

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

015202c

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

3e0aeab

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

Rework parsing keyboard input in useInput (#576) 6f99ca3
Detect arrow keys when pressed together with meta key 8180c1c
Fix tab key incorrectly having ctrl equal to true 26b8364
Fix arrow and page up/down keys detected as meta keys (#573) 09261d5
Improve diffing of styles (#566) 690d48c

`v4.1.0`

Compare Source

Highlights

Support for `gap` in `Box`

4a67772

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 B

Wrapping of flex items

7bdbde5

@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 C

Customizable overflow behavior in `Box`

6278b81

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>
// Hello

WASM build of Yoga

c97a2ee

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

e635106

@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

Fix missing element dimensions (#561) 5f09368

`v4.0.0`

Compare Source

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, hwb and ansi color formats in Text's color prop.
Move react-devtools-core to 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 👏

`v3.2.0`

Compare Source

Highlights

Support React 17 5b10413
Update ws dependency to fix a security alert 7fac58a

Highlights

Fix border rendering containing emojis and wide characters (#444) a8f563c
Fix undefined errors for focusing unmounted elements (#404) deb9d96
Fix the TypeScript definitions for the backgroundColor prop of the <Box> component (#451) 7a3b32d

`v3.0.8`

Compare Source

Highlights

Fix React Devtools integration (regression after 3.0.7 release) (#390) 1396566

`v3.0.7`

Compare Source

Highlights

Remove import type statements 8389496
Import devtools only when DEV=true (#385) e8f2b34
Fix borderColor type (#379) ac28ae4

`v3.0.6`

Compare Source

Highlights

Add remove escape keyboard sequence as delete key in useInput (#364) 96568dd

`v3.0.5`

Compare Source

Highlights

Fallback to 80 if number of columns isn't set (#368) 447078b

`v3.0.4`

Compare Source

Highlights

Fix Static rendering stale items on unmount (#361) 6ae66e6

`v3.0.3`

Compare Source

Highlights

Let useInput handle Ctrl+C if exitOnCtrlC is disabled (#353) 7de558e
Add inverse prop to Text component (#347) 8e8c1ba

`v3.0.2`

Compare Source

Highlights

Export DOMElement type (#351) 950b1d2

`v3.0.1`

Compare Source

Highlights

Throw error when <Box> is nested inside <Text> component (#346) 377adbb
Fix border re-rendering (#345) 7077188
Add support to useInput for Page Up and Page Down keys (#336) 4a94374
Improve auto-complete for color and backgroundColor props for <Text> (#338) 66cb353

`v3.0.0`

Compare Source

This day is finally here - Ink 3 is out! Read the full announcement at https://vadimdemedes.com/posts/ink-3.

Highlights

Add measureElement() API (#307) d0c4417
Free memory from unused Yoga nodes (#308) 7c17e85
Rerender on resize (#304) 155e1a0
Add global error boundary (#303) 2bcb4c0
Remove prop types 2b5dbad
Add support for borders in <Box> component (#300) 96625bf
Rewrite text rendering (#299) ab0f986
Add focus management (#295) 706fdb2
Add align-self property to <Box> (#296) 125148a
Add <Spacer> component e8ae2af
Update only changed props and styles of the node 5739a75
Add <Newline> component 9f4c6f8
Display console.* logs above main output acb6ed2
Add clear() method to clear output fec1c4d
Add support for React Devtools (#287) 1a44aac
Add useStderr hook to access and write to stderr stream (#286) 360d2da
Add write() function to write any string to stdout (#285) 27e313e
Add <Transform> component (#277) 9ed46a5
Render all frames when CI environment variable is explicitly set to false a056565
Add isActive option to useInput hook f419028
Add support for <Box display="none"> b51476c
Add support for React Suspense 89425d5
Reduce rendering speed to 30 frames per second 9b99c5a
Refactor codebase to TypeScript (#264) c9631c2

Configuration

📅 Schedule: Branch creation - "on monday before 6:00am" in timezone UTC, Automerge - At any time (no schedule defined).

🚦 Automerge: Disabled by config. Please merge this manually once you are satisfied.

♻ Rebasing: Whenever PR becomes conflicted, or you tick the rebase/retry checkbox.

🔕 Ignore: Close this PR and you won't be reminded about this update again.

If you want to rebase/retry this PR, check this box

This PR was generated by Mend Renovate. View the repository job log.

renovate bot added the dependencies Pull requests that update a dependency file label May 13, 2024

renovate bot force-pushed the renovate/ink-5.x branch from 6132be7 to 254d33c Compare May 31, 2024 22:06

Update dependency ink to v5

dcf30a9

renovate bot force-pushed the renovate/ink-5.x branch from 254d33c to dcf30a9 Compare November 25, 2024 11:38

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Update dependency ink to v5 #3289

Update dependency ink to v5 #3289

renovate bot commented May 13, 2024 •

edited

Loading

Update dependency ink to v5 #3289

Are you sure you want to change the base?

Update dependency ink to v5 #3289

Conversation

renovate bot commented May 13, 2024 • edited Loading

Release Notes

Highlights

Highlights

Highlights

Credits

Highlights

Thank you

New features

Custom border style

Individual colors for each border side

Toggle visibility of individual border sides

Other changes

Highlights

Support for gap in Box

Wrapping of flex items

Customizable overflow behavior in Box

WASM build of Yoga

Faster rendering

Other changes

Breaking changes

Thank you

Highlights

Highlights

Highlights

Highlights

Highlights

Highlights

Highlights

Highlights

Highlights

Highlights

Highlights

Highlights

Configuration

renovate bot commented May 13, 2024 •

edited

Loading

Support for `gap` in `Box`

Customizable overflow behavior in `Box`