ink

Bot releases are visible (Hide)

ink -

Published by vadimdemedes about 4 years ago

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

https://github.com/vadimdemedes/ink/compare/v2.7.1...v3.0.0

ink -

Published by vadimdemedes about 4 years ago

Highlights

Move @types/* packages to dev dependencies (#322) 91b2afe
Fix type of <Box> to include ref prop (#330) 32d331e

https://github.com/vadimdemedes/ink/compare/v3.0.0-6...v3.0.0-7

ink -

Published by vadimdemedes over 4 years ago

Highlights

Make sure that stack lines that can't be parsed don't break Ink's error handler (#326) a02a59c
Fall back to 80 columns if the width of the terminal cannot be determined (#327) 4b45184
Add migration guide (#323) f8f9ecf

https://github.com/vadimdemedes/ink/compare/v3.0.0-5...v3.0.0-6

ink -

Published by vadimdemedes over 4 years ago

Highlights

New logo 60e8d15
Fix error boundary failing when error doesn't have a stack 5b6fa97
Remeasure text dimensions when text node is changed 5f080fa
Ignore Ctrl+C in useInput hook 50ecd64

https://github.com/vadimdemedes/ink/compare/v3.0.0-4...v3.0.0-5

ink -

Published by vadimdemedes over 4 years ago

Highlights

Upgrade to Chalk 4 (#316) 9df100a
Ignore <Text> and <Transform> components with falsy children (#315) 8e68295

https://github.com/vadimdemedes/ink/compare/v3.0.0-3...v3.0.0-4

ink -

Published by vadimdemedes over 4 years ago

Highlights

Handle delete key in useInput hook (#314) 0692fa5

https://github.com/vadimdemedes/ink/compare/v3.0.0-2...v3.0.0-3

ink -

Published by vadimdemedes over 4 years ago

Highlights

Fix error handler with non-existent file path in the stack (#313) 4cf1c28
Handle Tab, Shift+Tab and Backspace keys in useInput hook (#312) a715395

https://github.com/vadimdemedes/ink/compare/v3.0.0-1...v3.0.0-2

ink -

Published by vadimdemedes over 4 years ago

Highlights

Fix types for cleanup() method (internal method) c358a06

https://github.com/vadimdemedes/ink/compare/v3.0.0-0...v3.0.0-1

ink -

Published by vadimdemedes over 4 years ago

Ink 3 pre-release is finally here. I'm going to save detailed release description for 3.0.0, but in this one I'm going to link to all important changes that were made and highlight the breaking ones.

Install

$ npm install ink@next react

Breaking changes

Text must be wrapped in `<Text>` component (#299)

There are much more details on this change in the linked PR above, but the TLDR is that all text must be wrapped in <Text> component now. Otherwise Ink will throw an error like this:

Text string "Hello World" must be rendered inside component

If you've used to building apps with React Native, Ink now has the same requirement in regards to text so it should feel familiar to you.

// Before
<Box>Hello World</Box>

// After
<Text>Hello World</Text>

Note: It's allowed to have nested <Text> components.

Merged `<Color>` component functionality into `<Text>` (#301)

In Ink 3 there's no more <Color> component. Instead, you can use color and backgroundColor props directly in <Text>. The way you specify colors has also changed a bit. Before there was a separate prop for each color, now there are just two props, which accept CSS-like values.

// Before
<Color red>
	<Text>Hello World</Text>
</Color>

<Color hex="#ffffff">
	<Text>Hello World</Text>
</Color>

<Color white bgGreen>
	<Text>Hello World</Text>
</Color>

// After
<Text color="red">Hello World</Text>

<Text color="#ffffff">Hello World</Text>

<Text color="white" backgroundColor="green">Hello World</Text>

Removed `<div>` and `<span>` (#306)

It was "illegal" to use these tags directly before, but now they're removed completely. If you are using them, switch from <div> to <Box> and from <span> to <Text>.

Removed `unstable__transformChildren` from `<Box>` and `<Text>` (ab36e7f)

Previously this function was used to transform the string representation of component's children. You can still do the same stuff, but you should use <Transform> component instead.

// Before
<Box unstable__transformChildren={children => children.toUpperCase()}>
	Hello World
</Box>

// After
<Transform transform={children => children.toUpperCase()}>
	<Text>Hello World</Text>
</Transform>

Removed `AppContext`, `StdinContext` and `StdoutContext` in favor of `useApp`, `useStdin` and `useStdout` hooks 055a196

Hooks are the future.

// Before
import {AppContext, StdinContext, StdoutContext} from 'ink';

const Example = () => (
	<AppContext.Consumer>
		{appProps => (
			<StdinContext.Consumer>
				{stdinProps => (
					<StdoutContext.Consumer>
						{stdoutProps => (
							…
						)}
					</StdoutContext.Consumer>
				)}
			</StdinContext.Consumer>
		)}
	</AppContext.Consumer>
);

// After
import {useApp, useStdin, useStdout} from 'ink';

const Example = () => {
	const appProps = useApp();
	const stdinProps = useStdin();
	const stdoutProps = useStdout();

	return …;
};

New `<Static>` component (#281)

Functionality has remained the same, but API has changed and performance has significantly improved. New API looks very similar to the one commonly used in virtual list libraries, like react-tiny-virtual-list.

// Before
<Static>
	{items.map(item => (
		<Text key={item.id}>
			{item.title}
		</Text>
	))}
</Static>

// After
<Static items={items}>
	{item => (
		<Text key={item.id}>
			{item.title}
		</Text>
	)}
</Static>

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

https://github.com/vadimdemedes/ink/compare/v2.7.1...v3.0.0-0

ink -

Published by vadimdemedes over 4 years ago

Highlights

Fix error when squashing empty text nodes (#260) 23563ed

https://github.com/vadimdemedes/ink/compare/v2.7.0...v2.7.1

ink -

Published by sindresorhus over 4 years ago

Highlights

Move @types/react to be an optional peer dependency (#257) 084cded

https://github.com/vadimdemedes/ink/compare/v2.6.0...v2.7.0

ink -

Published by vadimdemedes almost 5 years ago

Highlights

Upgrade dependencies (#247) 2917bf9
Remove @types/react from dependencies (#236) 58314df

https://github.com/vadimdemedes/ink/compare/v2.5.0...v2.6.0

ink -

Published by vadimdemedes about 5 years ago

Highlights

Clear terminal if output is taller than viewport (#210) af480b8
Add useApp, useStdin and useStdout hooks (#235) e0d2b4f
Fix removal of props in non-experimental mode e5b7569
Fix aligning multiple text nodes within <Box> 1f96300

https://github.com/vadimdemedes/ink/compare/v2.4.0...v2.5.0

ink -

Published by vadimdemedes about 5 years ago

Highlights

Add useInput hook to handle user input (#227) 4960ff7
Update react, react-reconciler and scheduler dependencies, which fixes useEffect hook usage 4a0afb6 9487c00
Add new experimental reconciler (#232) 8943332
Don't error on empty string input to (#219) 46f243d

https://github.com/vadimdemedes/ink/compare/v2.3.0...v2.4.0

ink -

Published by vadimdemedes over 5 years ago