Ink 3 ❤️

[vadimdemedes]

Opening this umbrella issue for you folks to test drive pre-release of Ink 3 - https://github.com/vadimdemedes/ink/releases/tag/v3.0.0-0! Latest docs are in readme and you can install it via:

$ npm install ink@next react

I haven't migrated any of the 3rd-party components to work with Ink 3 yet, but if you want to migrate a component or two, that's always greatly appreciated! Don't forget to release it as a major version and keep a link to previous docs for those who are still on Ink 2.

Let me know if there are any breaking changes that weren't described in the release notes above. Basically, if anything comes up, just post here and let's talk.

[Eastonboy99]

Hello. I am very new to this library but I love it already! I am currently trying to migrate the ink-select-input and I am running into this issue:

$ C:\Users\user\Documents\Github\ink-select-input\example\node_modules\.bin\ts-node .\index.tsx
C:\Users\user\Documents\Github\ink-select-input\node_modules\yoga-layout-prebuilt\yoga-layout\build\Release\nbind.js:53
        throw ex;
        ^

Error: ENOENT: no such file or directory, open 'C:/Users/user/Documents/Github/ink-select-input/node_modules/ink/src/reconciler.ts'
    at Object.openSync (fs.js:458:3)
    at Object.readFileSync (fs.js:360:35)
    at ErrorOverview (C:\Users\user\Documents\Github\ink-select-input\node_modules\ink\src\components\ErrorOverview.tsx:25:25)
    at renderWithHooks (C:\Users\user\Documents\Github\ink-select-input\node_modules\react-reconciler\cjs\react-reconciler.development.js:6036:18)
    at mountIndeterminateComponent (C:\Users\user\Documents\Github\ink-select-input\node_modules\react-reconciler\cjs\react-reconciler.development.js:8570:13)
    at beginWork$1 (C:\Users\user\Documents\Github\ink-select-input\node_modules\react-reconciler\cjs\react-reconciler.development.js:9938:16)
    at Object.invokeGuardedCallbackImpl (C:\Users\user\Documents\Github\ink-select-input\node_modules\react-reconciler\cjs\react-reconciler.development.js:11563:10)
    at invokeGuardedCallback (C:\Users\user\Documents\Github\ink-select-input\node_modules\react-reconciler\cjs\react-reconciler.development.js:11740:31)
    at beginWork$$1 (C:\Users\user\Documents\Github\ink-select-input\node_modules\react-reconciler\cjs\react-reconciler.development.js:15778:7)
    at performUnitOfWork (C:\Users\user\Documents\Github\ink-select-input\node_modules\react-reconciler\cjs\react-reconciler.development.js:14693:12) {
  errno: -4058,
  syscall: 'open',
  code: 'ENOENT',
  path: 'C:/Users/user/Documents/Github/ink-select-input/node_modules/ink/src/reconciler.ts'
}
error Command failed with exit code 7.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

If anyone has any thoughts as to why that would be a great help.
My code is here: https://github.com/Eastonboy99/ink-select-input

[vadimdemedes]

@Eastonboy99 Fixed via #313. When you update to 3.0.0-2, this error should be gone. Thanks for trying it out!

[vadimdemedes]

Pushed several more pre-releases, which:

• Add handling of tab, shift+tab, backspace and delete keys in useInput hook (Handle Tab, Shift+Tab and Backspace keys in useInput hook #312 + Handle delete key in useInput hook #314).
• Fixes rendering of <Text> with undefined or null children (Ignore <Text> and <Transform> components with falsy children #315).

Migrated these components today:

• ink-text-input (Upgrade for Ink 3 ink-text-input#58).
• ink-spinner (Upgrade for Ink 3 ink-spinner#9).

Also migrated Emoj to Ink 3 (sindresorhus/emoj#46).

[milesj]

Migrated my CLI to v3 without much issue. Biggest migration is the Text changes. Everything else seems to just work. milesj/boost@834af7f

Thanks for the update 🙏 Even text wrapping seems to work much better.

[LitoMore]

Let me help you migrate some useful components to Ink 3.

[vadimdemedes]

Thanks @LitoMore and @milesj!

[vadimdemedes]

Published 3.0.0-5 with a fix for rendering text changes and exiting the app. Oh, and there's a new logo!

[vadimdemedes]

Released in v3.0.0-6 with a fix for rendering Ink-based app in a TTY-less process. Thanks @jaredLunde and @bartlangelaan!

[thephilwells]

This might be more of a "Help me set up my babel config" question, but I can't seem to run Jest tests using ink-testing-library since upgrading to Ink 3.

Here's my .babelrc:

{
  "presets": ["@babel/env", "@babel/react", "@babel/preset-typescript"],
  "plugins": ["@babel/transform-runtime"]
}

Here's my test:

import React from 'react'
import { render } from 'ink-testing-library'
import { App } from '../App'

describe('APP', () => {
  it('returns the name of the game', () => {
    // Arrange
    const { lastFrame } = render(<App />)

    // Assert
    expect(lastFrame()).toMatchSnapshot()
  })
})

And here's the app:

import React from 'react'
import { render, Text } from 'ink'

export const App = () => {
  return <Text>foo!</Text>
}

render(<App />)

I get the following error:

 FAIL  src/test/App.test.js
  ● Test suite failed to run

    TypeError: console.Console is not a constructor

      10 | }
      11 |
    > 12 | render(<App />)
         | ^
      13 |

      at Object.patchConsole [as default] (node_modules/patch-console/src/index.ts:36:26)
      at Ink.patchConsole (node_modules/ink/src/ink.tsx:287:37)
      at new Ink (node_modules/ink/src/ink.tsx:95:9)
      at node_modules/ink/src/render.ts:88:9
      at getInstance (node_modules/ink/src/render.ts:126:14)
      at render (node_modules/ink/src/render.ts:86:24)
      at Object.<anonymous> (src/App.js:12:1)
      at Object.<anonymous> (src/test/App.test.js:3:1)

Sorry if I'm missing something obvious. Love the project! ❤️

[vadimdemedes]

@thephilwells Huh, seems like Jest is patching the global console object and forgetting (or doing it on purpose) to assign Console class to it. I'm going to push an update to ink-testing-library to disable Ink's console patching so that there's no interference between Jest and Ink. Will post back here when done!

Thanks for trying out Ink 3!

[vadimdemedes]

Hey @thephilwells, I was wrong, testing in Jest seems to be fine -> vadimdemedes/ink-testing-library#13. Are you using the latest version of Jest?

[SimenB]

Jest's custom console does extends Console. If it somehow breaks Ink we should fix it in Jest, shouldn't need to work around issues

[pepperkick]

Hello,

I was using the Ink 2.7.1 version and migration was pretty easy!

There is this weird issue which I noticed, the 3.0.0-6 flickers a lot more than 2.7.1 when there is any state update. I created a test script to confirm this and indeed it does flicker a lot.

Cli.tsx

import React from 'react';
import { App } from './containers/App';
import { render } from 'ink';
import clear from 'clear';

const initialize = () => {
  // Clear terminal
  clear();

  // Render the container
  render(<App />);
}

initialize()

App.tsx

import React, { Component } from 'react';
import { Box, Text } from 'ink';
import BigText from 'ink-big-text';

interface Props {}

interface State {
  counter: number
}

export class App extends Component<Props, State> {
  state = {
    counter: 0
  }
  
  constructor(props) {
    super(props);

    setInterval(() => {
      this.setState({ counter: ++this.state.counter })
    }, 100)
  }

  render() {  
    return (
      <Box flexDirection="column">
        <BigText colors={["#2196F3", "#212121"]} font="block" text="TEST CLI"/>
        <Text bold>Welcome to Test CLI</Text>
        <Text bold>Counter: {this.state.counter}</Text>        
        <Text bold>End</Text>
      </Box>
    );
  }
}

I used Windows Terminal with SSH.

v2.7.1

v3.0.0-6

[vadimdemedes]

Hey @pepperkick, that looks odd, but I wasn't able to reproduce it on Mac with iTerm 2. I even sped it up to increment every 10ms instead of 100ms and it still wasn't flickering:

I modified code a bit, I doubt that'll help it, but still:

class App extends React.Component {
	constructor(props) {
		super(props);

		this.state = {
			counter: 0
		};
	}

	render() {
		return (
			<Box flexDirection="column">
				<BigText colors={['#2196F3', '#212121']} font="block" text="TEST CLI" />
				<Text bold>Welcome to Test CLI</Text>
				<Text bold>Counter: {this.state.counter}</Text>
				<Text bold>End</Text>
			</Box>
		);
	}

	componentDidMount() {
		this.timer = setInterval(() => {
			this.setState(previousState => ({
				counter: previousState.counter + 1
			}));
		}, 10);
	}

	componentWillUnmount() {
		clearInterval(this.timer);
	}
}

[vadimdemedes]

I used Windows Terminal with SSH.

@pepperkick Oh wait, are you running Ink somewhere else and you're SSHed into that machine? That would definitely explain the flickering, because there's latency and you're updating a screen quite often. Could you clarify your setup? Also, have you tried other terminal apps?

[vadimdemedes]

Jest's custom console does extends Console. If it somehow breaks Ink we should fix it in Jest, shouldn't need to work around issues

@SimenB I think it could be something else in @thephilwells's setup, because I've tried running Ink inside Jest an it worked fine -> vadimdemedes/ink-testing-library#13. You are right though, I'll make sure to open an issue in Jest's repo if we confirm the root cause.

[pepperkick]

Hey @vadimdemedes,
Thanks for trying it out!

@pepperkick Oh wait, are you running Ink somewhere else and you're SSHed into that machine? That would definitely explain the flickering, because there's latency and you're updating a screen quite often. Could you clarify your setup?

Yes, the application is running on another machine and I am connecting via SSH to that machine to view the output. My end application will be running over SSH most of the time.
Both version 2's and 3's output were in Windows Terminal over SSH. Version 2's output seems a lot less flickery than version 3 so I did not think latency would have been the cause.

Also, have you tried other terminal apps?

I tried some other terminals, and it does seem like the issue is only on Windows Terminal over SSH.
putty and vscode (integrated terminal) do not have any flicker while running it over SSH, cmd and powershell over SSH have some flicker but it is manageable. I have only tried version 3 with them though.

I will try some more scenarios and see if there are any more issues like this.
Overall if it's only Windows Terminal being affected then I am fine with it.

This library is actually really awesome!
Thank You!

[vadimdemedes]

Ink 3 is out! Read the full announcement at https://vadimdemedes.com/posts/ink-3 :) Thanks everyone for testing it out, reporting bugs and submitting PRs! I'm going to close this issue, but feel free to open new ones.

[milesj]

To improve developer UX further, Ink 3 intercepts calls to console.log, console.error and other methods to ensure logs are displayed correctly above your app's UI and not interfere with each other. This is necessary, because Ink re-renders your UI all the time, which can overwrite the output from console.log.

OMG yes! I had to do this manually. Love that this is in core 🙏

[AriPerkkio]

I believe this is worth adding here so anyone else won't spend an hour for debugging.

If you are seeing those TypeError: console.Console is not a constructor errors when testing Ink applications with Jest you'll need to update Jest to v26.6.1. They have recently included constructor to console override: jestjs/jest#10502
Everything works flawlessly now.