Building interactive command line interfaces with Ink

@aleksandrasays

whoami?

Hasura Console Tech Lead

 

Twitter: @aleksandrasays

GitHub: @beerose

Blog: aleksandra.codes

@aleksandrasays

  1. What is Ink?
  2. Why Ink?
  3. How to build apps with Ink?
  4. Demo

Agenda

@aleksandrasays

Ink is a React renderer for CLIs.

It provides the same experience that React offers in the browser.

What is Ink?

Uses Yoga to build Flexbox layouts.

Yoga is a cross-platform layout engine which implements Flexbox.

@aleksandrasays

Why Ink?

If you know React, you know Ink.

Embrace component-driven design.

Create user-friendly interactive CLI interfaces easily

@aleksandrasays

Who's using Ink?

Gatsby

Parcel

Yarn 2

Prisma

Blitz

and many, many more...

@aleksandrasays

How to scaffold a new Ink-based CLI?

@aleksandrasays

mkdir my-fancy-cli
cd my-fancy-cli
npx create-ink-app
# Or create with TypeScript React
npx create-ink-app --typescript

create-ink-app

.
├── dist
│   ├── cli.d.ts
│   ├── cli.js
│   ├── test.d.ts
│   ├── test.js
│   ├── ui.d.ts
│   └── ui.js
├── package-lock.json
├── package.json
├── readme.md
├── source
│   ├── cli.tsx
│   ├── test.tsx
│   └── ui.tsx
└── tsconfig.json

it uses meow as CLI helper

const cli = meow(
  `
	Usage
	  $ foo <input>

	Options
	  --rainbow, -r  Include a rainbow

	Examples
	  $ foo unicorns --rainbow
	  🌈 unicorns 🌈
`,
  {
    flags: {
      rainbow: {
        type: 'boolean',
        alias: 'r',
      },
    },
  }
);

@aleksandrasays

Babel

# .babelrc
{
  "presets": [
    "@babel/preset-react",
    [
      "@babel/preset-env",
	  { "targets": { "node": true } }
    ]
  ]
}
npx babel source.js -o cli.js
npm install --save-dev @babel/preset-react

@aleksandrasays

import-jsx — require and transpile JSX on the fly 

const importJsx = require('import-jsx');
importJsx('./Counter');
npm install --save import-jsx

@aleksandrasays

ts-node

ts-node -O '{\"module\": \"commonjs\"}'

Demo

@aleksandrasays

Takeaways

@aleksandrasays

Thank you!

@aleksandrasays

Ink

By Aleksandra Sikora

Ink

  • 1,907

More from Aleksandra Sikora