Changelog History
Page 2
-
v3.0.0-6 Changes
July 07, 2020 -
v3.0.0-5 Changes
July 05, 2020 -
v3.0.0-4 Changes
June 23, 2020 -
v3.0.0-3 Changes
June 23, 2020 -
v3.0.0-2 Changes
June 23, 2020 -
v3.0.0-1 Changes
June 21, 2020 -
v3.0.0-0 Changes
June 20, 2020🚀 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 usecolorandbackgroundColorprops 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__transformChildrenfrom<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,StdinContextandStdoutContextin favor ofuseApp,useStdinanduseStdouthooks 055a196Hooks are the future.
// Beforeimport {AppContext, StdinContext, StdoutContext} from 'ink';const Example = () =\> ( \<AppContext.Consumer\> {appProps =\> ( \<StdinContext.Consumer\> {stdinProps =\> ( \<StdoutContext.Consumer\> {stdoutProps =\> ( … )} \</StdoutContext.Consumer\> )} \</StdinContext.Consumer\> )} \</AppContext.Consumer\> );// Afterimport {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-selfproperty 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
useStderrhook 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
falsea056565 - ➕ Add
isActiveoption to useInput hook f419028 - ➕ Add support for
<Box display="none">b51476c - ➕ Add support for React Suspense89425d5
- ⬇️ Reduce rendering speed to 30 frames per second 9b99c5a
- 🔨 Refactor codebase to TypeScript (#264) c9631c2
- ➕ Add
-
v2.7.1 Changes
February 16, 2020 -
v2.7.0 Changes
February 03, 2020 -
v2.6.0 Changes
November 28, 2019Highlights