Welcome to Goodness Squad!

If you are reading this readme, chances are you've decided to contribute to Ink. It's good to have you here! Let's get started.

Getting Started

Make sure you have Git, Node.js (at least v12.x) and npm installed.

• Git installation guide
• Node.js and npm installation guide

If you're on macOS or Linux, you're good to go.

If you're on Windows, you should also install a modern terminal. I haven't tested these myself, but either should work fine:

• New Windows Terminal
• Terminus
• Hyper
• Cygwin

Projects

You can see the list of ideas in the Goodness Squad project in this repository. Each issue is assigned a label, which signals its difficulty level - starter, medium or advanced. Issues have brief descriptions, hints and relevant links for you to look at before working on it.

If you have questions, please ask right away. Normally I'd recommend spending some time on digging stuff up yourself, but we've got only 5 hours, so don't hesitate.

If you've decided to work on a particular issue, make sure to reply inside the issue, so that other people don't end up working on the same thing as you.

There are 3 types of projects:

• Direct contributions to Ink
• Standalone components
• CLIs

Direct contributions to Ink

This involves contributing to Ink itself by modifying its source code.

1. Fork vadimdemedes/ink repository
2. Clone your fork
3. Install npm dependencies
4. Create a new branch
5. Make changes
6. Push to your fork
7. Create a pull request on Ink's repository
8. Wait for a review, address feedback and PR will be merged

Make sure to read the readme first.

Useful commands:

• npm run build - Compiles source code
• npm test - Runs tests

Source code lives in src directory. Essential files inside are:

• render.ts - renders an Ink app, similar to render from react-dom
• ink.tsx - instance of Ink app that manages everything, from rendering to exiting the app
• log-update.ts - erases last output and renders new text output
• reconciler.ts - custom React reconciler
• dom.ts - implementation of a simple DOM
• styles.ts - applies CSS styles to Yoga nodes
• output.ts - generates a text output of all components given their coordinates and dimensions

Standalone components

If issue description recommends creating a standalone component, that means it's better to publish it as a separate package, outside of Ink. I recommend this in cases where mentioned functionality isn't essential to all Ink users, so it shouldn't be in the core source code.

Copy the source code of vadimdemedes/ink-spinner repository and replace the readme and code with yours. It has pretty much everything to get started with your own component.

When you're done, ping me and we'll go through it together and then publish!

CLIs

If you want to create your own CLI using Ink, there's no simpler way to start than create-ink-app. One command and you're good to go:

$ npx create-ink-app