Skip to content

Instantly share code, notes, and snippets.

@dance2die

dance2die/1. TL;DR.md

Last active June 20, 2022 02:25
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save dance2die/da426bb0de5ee41afec2d84a31e728ab to your computer and use it in GitHub Desktop.
Save dance2die/da426bb0de5ee41afec2d84a31e728ab to your computer and use it in GitHub Desktop.
Download ZIP
A new INK project with "create-ink-app"
Raw
1. TL;DR.md

Set up an INK project

# Create a folder
mkdir ink3

# Go to the folder
cd ink3

# Create the ink project
npx create-ink-app --typescript

# Install dependencies
npm i -D eslint eslint-config-xo-typescript eslint-config-xo-typescript eslint-plugin-unicorn

# Update package version
npx ncu -u

# Remove packages and lock file
rm -rf node_modules package-lock.json

# Install NPM packages
npm intall

Update package.json

	"ava": {
		"typescript": {
			"extensions": [
				"tsx"
			],
			"rewritePaths": {
				"source/": "dist/"
			},
			"compile": false
		}
	},
	"xo": {
		"extends": "xo-react",
		"rules": {
			"react/prop-types": "off"
		}
	},
	"eslintConfig": {
		"env": {
			"es2022": true
		},
		"extends": "plugin:unicorn/recommended"
	},

Update tsconfig.json

Copy paste,

{
	"extends": "@sindresorhus/tsconfig",
	"compilerOptions": {
		"module": "es2022",
		"jsx": "react",
		"esModuleInterop": true,
		"outDir": "dist"
	},
	"include": ["source"]
}
Raw
2. How to create a new INK project.md

Creating a new INK project with npx create-ink-app --typescript causes many errors when you try to "test" with npm test.

I will show you how to make the testing work.
Fixing linting issues is outside the scope.

Let's start with a new project.

Bootstrapping a new INK project

Create a new folder, and go into the folder.

# bash
mkdir ink3
cd ink3

#zsh - this will create  a new folder and take you there
take ink3

And bootstrap a new project.
NOTE - This command will bootstrap a new project in the current folder.

npx create-ink-app --typescript

Install Depedencies

npm i -D eslint eslint-config-xo-typescript eslint-config-xo-typescript eslint-plugin-unicorn

Initial project test run

Run the test after the project is created.

npm test

You will be greeted with the following error

 dance2die@ooboontoo  ~/src/throwaway/CLI/ink3  npx create-ink-app --typescript   

  ✔ Copy files
  ✔ Install dependencies
  ✔ Link executable
 dance2die@ooboontoo  ~/src/throwaway/CLI/ink3  npm test

> ink3@0.0.0 pretest
> npm run build


> ink3@0.0.0 build
> tsc && chmod +x dist/cli.js


> ink3@0.0.0 test
> xo && ava

Error [ERR_PACKAGE_PATH_NOT_EXPORTED]: Failed to load plugin 'unicorn' declared in 'BaseConfig » /home/dance2die/src/throwaway/CLI/ink3/node_modules/xo/config/plugins.js': Package subpath './lib/rules/no-warning-comments' is not defined by "exports" in /home/dance2die/src/throwaway/CLI/ink3/node_modules/eslint/package.json
Referenced from: /home/dance2die/src/throwaway/CLI/ink3/node_modules/xo/config/plugins.js
    at new NodeError (node:internal/errors:388:5)
    at throwExportsNotFound (node:internal/modules/esm/resolve:440:9)
    at packageExportsResolve (node:internal/modules/esm/resolve:719:3)
    at resolveExports (node:internal/modules/cjs/loader:488:36)
    at Module._findPath (node:internal/modules/cjs/loader:528:31)
    at Module._resolveFilename (node:internal/modules/cjs/loader:932:27)
    at Module._load (node:internal/modules/cjs/loader:787:27)
    at Module.require (node:internal/modules/cjs/loader:1012:19)
    at require (node:internal/modules/cjs/helpers:102:18)
    at Object.<anonymous> (/home/dance2die/src/throwaway/CLI/ink3/node_modules/eslint-plugin-unicorn/rules/expiring-todo-comments.js:5:18)
 ✘ dance2die@ooboontoo  ~/src/throwaway/CLI/ink3 

Updating NPM packages

Run npm-check-updates to update NPM package versions in package.json. This only updates package.json file; You need to run npm install yourself.

dance2die@ooboontoo  ~/src/throwaway/CLI/ink3  npx npm-check-updates -u
Upgrading /home/dance2die/src/throwaway/CLI/ink3/package.json
[====================] 14/14 100%

 meow    ^9.0.0  →  ^10.1.2     
 react  ^17.0.2  →  ^18.2.0     
 chalk   ^4.1.2  →   ^5.0.1     
 xo     ^0.39.1  →  ^0.50.0     

Run npm install to install new versions

Reinstalling packages

IMPORTANT: Delete both node_modules and package-lock.json.
If you don't do this, nothing will work.

rm -rf node_modules package-lock.json

Now reinstall pacakges.

npm install

This will install packages (creating node_modules folder again) and create a fresh package-lock.json.

Second test run

When you run the test again with npm test, you will get the following error.

 dance2die@ooboontoo  ~/src/throwaway/CLI/ink3  npm test

> ink3@0.0.0 test /home/dance2die/src/throwaway/CLI/ink3
> xo && ava

Error: Missing 'compile' property in TypeScript configuration for AVA. See https://github.com/avajs/typescript/blob/v3.0.1/README.md
    at validate (file:///home/dance2die/src/throwaway/CLI/ink3/node_modules/@ava/typescript/index.js:21:11)
    at main (file:///home/dance2die/src/throwaway/CLI/ink3/node_modules/@ava/typescript/index.js:83:4)
    at collectProviders (file:///home/dance2die/src/throwaway/CLI/ink3/node_modules/ava/lib/eslint-plugin-helper-worker.js:19:10)
    at async file:///home/dance2die/src/throwaway/CLI/ink3/node_modules/ava/lib/eslint-plugin-helper-worker.js:45:22
    at async resolveGlobs (file:///home/dance2die/src/throwaway/CLI/ink3/node_modules/ava/lib/eslint-plugin-helper-worker.js:50:28)
    at async handleMessage (file:///home/dance2die/src/throwaway/CLI/ink3/node_modules/ava/lib/eslint-plugin-helper-worker.js:60:17)
 ELIFECYCLE  Test failed. See above for more details.

The error is saying that we need to tell AVA not to compile.

Now let's update ava and eslintConfig in package.json.

Updating AVA and eslintConfig in package.json

Inside package.json, update the configuration as shown below.

	"ava": {
		"typescript": {
			"extensions": [
				"tsx"
			],
			"rewritePaths": {
				"source/": "dist/"
-			}
+			},
+			"compile": false
		}
	},
	"xo": {
		"extends": "xo-react",
		"rules": {
			"react/prop-types": "off"
		}
	},
+	"eslintConfig": {
+		"env": {
+			"es2022": true
+		},
+		"extends": "plugin:unicorn/recommended"
+	},

Update tsconfig.json

You need to change the TypeScript module option from commonjs to es2022.

{
	"extends": "@sindresorhus/tsconfig",
	"compilerOptions": {
-		"module": "commonjs",
+		"module": "es2022",
		"jsx": "react",
		"esModuleInterop": true,
		"outDir": "dist"
	},
	"include": ["source"]
}

The final test run

When you run the test again, you can see that AVA correctly reports the issue.
Fixing these issues is outside the scope so I won't cover it here.

 dance2die@ooboontoo  ~/src/throwaway/CLI/ink3  npm test

> ink3@0.0.0 test /home/dance2die/src/throwaway/CLI/ink3
> xo && ava


  source/cli.tsx:5:17
  ✖   5:17  Missing file extension "tsx" for "./ui"           import/extensions
  ✖  20:18  Missing trailing comma.                           @typescript-eslint/comma-dangle
  ✖  21:4   Missing trailing comma.                           @typescript-eslint/comma-dangle
  ✖  22:3   Missing trailing comma.                           @typescript-eslint/comma-dangle

  source/ui.tsx:4:34
  ✖   4:34  Function component is not a function declaration  react/function-component-definition
  ✖   6:22  Unexpected usage of doublequote.                  jsx-quotes
  ✖  10:1   Do not use "module".                              unicorn/prefer-module

  source/test.tsx:5:17
  ✖   5:17  Missing file extension "tsx" for "./ui"           import/extensions
  ✖  14:39  Unexpected usage of doublequote.                  jsx-quotes

  9 errors
 ELIFECYCLE  Test failed. See above for more details.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment