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?