vadimdemedes/create-ink-app

Generate a starter Ink app

create-ink-app

Generate a starter Ink app

Usage

This helper tool scaffolds out basic project structure for Ink apps and lets you avoid the boilerplate and get to building beautiful CLIs in no time.

$ npx create-ink-app js-app
$ js-app

# Or create with TypeScript
$ npx create-ink-app --typescript ts-app
$ ts-app

create-ink-app's Issues

Typescript

a typescript template version would be awesome!

`npm run test` in freshly created app fails with error

I created an ink app with npx create-ink-app my-ink-cli . After the setup was done, I cd into the example dir, and ran npm run test . That gave the following error -

> npm run test

> [email protected] test
> prettier --check . && xo && ava

Checking formatting...
All matched files use Prettier code style!
TypeError: Cannot read properties of undefined (reading 'getAllComments')
Occurred while linting /ink-example/test.js:1
Rule: "unicorn/expiring-todo-comments"
    at Object.Program (/ink-example/node_modules/eslint/lib/rules/no-warning-comments.js:193:45)
    at Program (/ink-example/node_modules/eslint-plugin-unicorn/rules/expiring-todo-comments.js:511:10)
    at /ink-example/node_modules/eslint-plugin-unicorn/rules/utils/rule.js:39:18
    at ruleErrorHandler (/ink-example/node_modules/eslint/lib/linter/linter.js:1076:28)
    at /ink-example/node_modules/eslint/lib/linter/safe-emitter.js:45:58
    at Array.forEach (<anonymous>)
    at Object.emit (/ink-example/node_modules/eslint/lib/linter/safe-emitter.js:45:38)
    at NodeEventGenerator.applySelector (/ink-example/node_modules/eslint/lib/linter/node-event-generator.js:297:26)
    at NodeEventGenerator.applySelectors (/ink-example/node_modules/eslint/lib/linter/node-event-generator.js:326:22)
    at NodeEventGenerator.enterNode (/ink-example/node_modules/eslint/lib/linter/node-event-generator.js:340:14)

Note : I have truncated the path in error log, it is not actually installed at / .

I expected that the fresh install should be in working condition including tests. Thanks!

`npx create-ink-app js-app` fails due to missing `.gitignore` in `/templates/_common/`

Issue

It seems like the .gitignore file is missing in the package.

Makes the installer throw an exception and exit not copying any files to destination.

Possible solution

https://stackoverflow.com/a/71232660 (not tested)

TypeScript start command executes compiled JavaScript

Is your feature request related to a problem? Please describe.
I can't npm start the latest version of my code without npx tsc to TypeScript compile everytime first.

Describe the solution you'd like
I would like for npm start to execute the TypeScript code instead.

Like so:
npm i -D ts-node
"start": "ts-node source/cli.tsx"

Describe alternatives you've considered
I've considered running npx tsc -w to compile TypeScript in watch mode to continuously update the JavaScript and still executing the compiled JavaScript without any code changes to create-ink-app.

Additional context
N/A

Replace npm install --global by npm link in the readme

I have been using the typescript version of the command.

npx create-ink-app --typescript my_module

In the readme, npm install globally does not work anymore but npm link does.

$ npm install --global my_module

TypeScript test command fails

Is your feature request related to a problem? Please describe.
npm test results in error:
✘ Missing 'compile' property in TypeScript configuration for AVA. See https://github.com/avajs/typescript/blob/v3.0.1/README.md

Describe the solution you'd like
Setting up npm install --save-dev @ava/typescript during generation and setting ava.typescript.compile in package.json to false just like the docs say should resolve it.

Describe alternatives you've considered
None really. Following the instructions in the link of the error fixes it.

Additional context
I was only looking at ava to compare it to jest because I was considering volunteering to write snapshot unit tests, only because I consider them the extreme base of the testing pyramid, where it's easy to write and maintain lots and get more instant feedback on changes to function outputs.

TypeScript template does not produce a working run script in package.json

Expected behavior:

After running npx create-ink-app --typescript there should be a package.json file that has a run script which launches the dist/cli.js file w/ Node.js.

Actual behavior:

The package.json file is missing a call to node. It should really generate the following output:

{ "scripts": { "start": "npm run build && node dist/cli.js" } }

Following the usage instructions results in an error

Following the instructions fails with the following error

`
myUserName@pc MINGW64 /c/work/mainFolder/testing
$ mkdir cli-project
myUserName@pc MINGW64 /c/work/mainFolder/testing
$ cd cli-project/
myUserName@pc MINGW64 /c/work/mainFolder/testing/cli-project
$ npx create-ink-app --typescript
Need to install the following packages:
create-ink-app
Ok to proceed? (y) y
npm WARN deprecated [email protected]: Please see https://github.com/lydell/urix#deprecated
npm WARN deprecated [email protected]: https://github.com/lydell/resolve-url#deprecated

√ Copy files
√ Install dependencies
× Link executable
→ Found 1 error.
Error: Command failed: npm run build

[email protected] build
tsc

source/cli.tsx:17:4 - error TS2345: Argument of type '{ flags: { name: { type: "string"; }; }; }' is not assignable to parameter of type 'Options<{ name: { type: "string"; }; }>'.
Property 'importMeta' is missing in type '{ flags: { name: { type: "string"; }; }; }' but required in type 'Options<{ name: { type: "string"; }; }>'.

17 `, {
~
18 flags: {
~~~~~~~~~
...
22 }
~~
23 });
~

node_modules/meow/index.d.ts:33:11
33 readonly importMeta: ImportMeta;
~~~~~~~~~~
'importMeta' is declared here.

Found 1 error.

at makeError (C:\Users\myUserName\AppData\Local\npm-cache\_npx\cc9fa0209c2baa81\node_modules\execa\index.js:174:9)
at C:\Users\myUserName\AppData\Local\npm-cache\_npx\cc9fa0209c2baa81\node_modules\execa\index.js:278:16
at processTicksAndRejections (node:internal/process/task_queues:96:5)
at async Task.task (C:\Users\myUserName\AppData\Local\npm-cache\_npx\cc9fa0209c2baa81\node_modules\create-ink-app\index.js:135:6)

`

Environment: Windows 10, NodeJS 16.5.0

"npx create-ink-app --typescript" fails to install deps

❯ npx create-ink-app --typescript

  ✔ Copy files
  ✖ Install dependencies
    → npm ERR!     XXXX.npm/_logs/2023-06-30T18_29_32_345Z-debug.log
    Format code
    Build
    Link executable
Error: Command failed with exit code 254: npm install
npm WARN EBADENGINE Unsupported engine {
npm WARN EBADENGINE   package: '[email protected]',
npm WARN EBADENGINE   required: { node: '>=14.19 <15 || >=16.15 <17 || >=18' },
npm WARN EBADENGINE   current: { node: 'v16.10.0', npm: '7.24.0' }
npm WARN EBADENGINE }
npm WARN EBADENGINE Unsupported engine {
npm WARN EBADENGINE   package: '[email protected]',
npm WARN EBADENGINE   required: { node: '^14.17.0 || ^16.13.0 || >=18.0.0' },
npm WARN EBADENGINE   current: { node: 'v16.10.0', npm: '7.24.0' }
npm WARN EBADENGINE }
npm ERR! code ENOENT
npm ERR! syscall chmod
npm ERR! path XXXXcode/test-ink/node_modules/xo/node_modules/typescript/bin/tsc
npm ERR! errno -2
npm ERR! enoent ENOENT: no such file or directory, chmod 'XXXXcode/test-ink/node_modules/xo/node_modules/typescript/bin/tsc'
npm ERR! enoent This is related to npm not being able to find a file.
npm ERR! enoent 

npm ERR! A complete log of this run can be found in:
npm ERR!     XXXX.npm/_logs/2023-06-30T18_29_32_345Z-debug.log
    at makeError (file://XXXX.npm/_npx/cc9fa0209c2baa81/node_modules/execa/lib/error.js:59:11)
    at handlePromise (file://XXXX.npm/_npx/cc9fa0209c2baa81/node_modules/execa/index.js:124:26)
    at processTicksAndRejections (node:internal/process/task_queues:96:5)
    at async Task.task (file://XXXX.npm/_npx/cc9fa0209c2baa81/node_modules/create-ink-app/index.js:148:6)```

Using chmod inside of link scripts breaks Windows

The use of chmod causes the link step to break for Windows users.

It looks likes these are used in npm run build script:

create-ink-component

Context: #5 (comment)

The logic of create-ink-app and create-ink-component are similar. I think we can add the command create-ink-component to this project.

For example:

{
  "bin": {
    "create-ink-app": "cli.js",
    "create-ink-component": "cli.js"
  }
}

We can get the command name from process.argv.

@vadimdemedes What do you think?

Cannot find module 'ink-testing-library' or its corresponding type declarations

Out of the box, test.tsx is showing typescript errors. It needs to be included inside of tsconfig.json since it's outside of the sources folder.

Error: React.createElement argument is undefined

hi.there.
I runing the default command.I have not done anything.But, it's error.

code

Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check the render method of `App`.
    in App
    in InternalApp

  ERROR Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got:
       undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and
       named imports.

       Check the render method of `App`.

environment

• node: v14.12
• package.json:

{
	"name": "ink-1",
	"version": "0.0.0",
	"license": "MIT",
	"bin": "cli.js",
	"engines": {
		"node": ">=8"
	},
	"scripts": {
		"test": "xo && ava"
	},
	"files": [
		"cli.js",
		"ui.js"
	],
	"dependencies": {
		"import-jsx": "^4.0.0",
		"ink": "^3.0.6",
		"meow": "^7.1.1",
		"prop-types": "^15.7.2",
		"react": "^16.13.1"
	},
	"devDependencies": {
		"@babel/preset-react": "^7.10.4",
		"@babel/register": "^7.11.5",
		"ava": "^3.12.1",
		"chalk": "^4.1.0",
		"eslint-config-xo-react": "^0.23.0",
		"eslint-plugin-react": "^7.21.0",
		"eslint-plugin-react-hooks": "^4.1.2",
		"ink-testing-library": "^2.0.1",
		"xo": "^0.33.1"
	},
	"ava": {
		"require": [
			"@babel/register"
		]
	},
	"babel": {
		"presets": [
			"@babel/preset-react"
		]
	},
	"xo": {
		"extends": "xo-react"
	}
}

thanks.

Add --copy-files to build/dev scripts

Hi!

It might be useful to mention in the docs that for JavaScript build/dev developers might want to update the package generated by https://github.com/vadimdemedes/create-ink-app/blob/main/templates/js/_package.json, and add --copy-files, eg:

  "scripts": {
    "build": "babel --out-dir=dist source --copy-files",
    "dev": "babel --out-dir=dist --watch source --copy-files",

I think it will surprise people if lookups fail for non-js files in their code, and they might not know how to carry non-compiled files over into their dist.

'dist' is not recognized as an internal or external command, operable program or batch file.

create-ink-app/templates/ts/_package.json

Line 11 in 3d416ba

"start": "npm run build && dist/cli.js",

Should be node dist/cli.js instead :)

@types/node missing

If you run a clean install with --typescript, Typescript prompts an error when opening the file ui.tsx, because the package @types/node is missing. It should be included as devDependency.

Getting a lot of strange errors on new Typescript project

Not a typescripter much so confused :-D

Move to ESM

Related issue: sindresorhus/meow#172 (comment)

Blocked by vadimdemedes/import-jsx#15

npm link sometimes needs root

My system node modules directory is only writable by root, so when I run create-ink-app as a regular user it fails with:

$ npx create-ink-app
npx: installed 260 in 8.762s

  ✔ Copy files
  ✔ Install dependencies
  ✖ Link executable
    → npm ERR!     /home/mgalgs/.npm/_logs/2019-10-08T00_44_52_001Z-debug.log
Error: Command failed: npm link
npm ERR! path /home/mgalgs/src/kbrowse
npm ERR! code EACCES
npm ERR! errno -13
npm ERR! syscall symlink
npm ERR! Error: EACCES: permission denied, symlink '/home/mgalgs/src/kbrowse' -> '/usr/lib/node_modules/kbrowse'
npm ERR!  { [Error: EACCES: permission denied, symlink '/home/mgalgs/src/kbrowse' -> '/usr/lib/node_modules/kbrowse']
npm ERR!   stack:
npm ERR!    'Error: EACCES: permission denied, symlink \'/home/mgalgs/src/kbrowse\' -> \'/usr/lib/node_modules/kbrowse\'',
npm ERR!   errno: -13,
npm ERR!   code: 'EACCES',
npm ERR!   syscall: 'symlink',
npm ERR!   path: '/home/mgalgs/src/kbrowse',
npm ERR!   dest: '/usr/lib/node_modules/kbrowse' }
npm ERR!
npm ERR! The operation was rejected by your operating system.
npm ERR! It is likely you do not have the permissions to access this file as the current user
npm ERR!
npm ERR! If you believe this might be a permissions issue, please double-check the
npm ERR! permissions of the file and its containing directories, or try running
npm ERR! the command again as root/Administrator (though this is not recommended).

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/mgalgs/.npm/_logs/2019-10-08T00_44_52_001Z-debug.log


    at makeError (/home/mgalgs/.npm/_npx/17549/lib/node_modules/create-ink-app/node_modules/execa/index.js:174:9)
    at Promise.all.then.arr (/home/mgalgs/.npm/_npx/17549/lib/node_modules/create-ink-app/node_modules/execa/index.js:278:16)
    at process._tickCallback (internal/process/next_tick.js:68:7)

Is it really necessary to link the package on initial creation? Or should that be a separate step (left for the user to execute if/when it's appropriate)?

Add a default `.gitignore` file to the template

I was pushing a repo created by create-ink-app & it was pushing node_modules. I quickly noticed it doesn't have its own .gitignore.

I think a .gitignore file should exist by default. I personally prefer using a .gitignore generated by npx gitignore node.

Should create in named folder, not current folder

create-react-app (and most other generators) will require a folder to generate into so you don't accidentally fill your root directory with a bunch of files. Should be npx create-ink-app my-app to create the app at the directory my-app

sh: dist/cli.js: Permission denied

I tried scaffolding a project using the typescript option and then starting the app using the start script:

npm run start

I immediately ran into this issue:

jpersson---C02TW0FZHTD6:tetris jpersson$ npm run start

> [email protected] start /Users/jpersson/open-source/npm/my-cli
> npm run build && dist/cli.js


> [email protected] build /Users/jpersson/open-source/npm/my-cli
> tsc

sh: dist/cli.js: Permission denied
npm ERR! code ELIFECYCLE
npm ERR! errno 126
npm ERR! [email protected] start: `npm run build && dist/cli.js`
npm ERR! Exit status 126
npm ERR!
npm ERR! Failed at the [email protected] start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/jpersson/.npm/_logs/2021-04-15T21_02_40_871Z-debug.log

Any pointers as to why would be greatly appreciated.

Error: current file is a CommonJS module whose imports will produce 'require' calls

I'm running this command:

npx create-ink-app --typescript globalscribe

And getting this error:

  ✔ Copy files
  ✔ Install dependencies
  ✖ Link executable
    → Found 1 error in source/test.tsx:4
Error: Command failed: npm run build


> [email protected] build
> tsc && chmod +x dist/cli.js

source/test.tsx:4:22 - error TS1479: The current file is a CommonJS module whose imports will produce 'require' calls; however, the referenced file is an ECMAScript module and cannot be imported with 'require'. Consider writing a dynamic 'import("ink-testing-library")' call instead.
  To convert this file to an ECMAScript module, add the field `"type": "module"` to '/Users/lars/dev/globalscribe/package.json'.

4 import {render} from 'ink-testing-library';
                       ~~~~~~~~~~~~~~~~~~~~~


Found 1 error in source/test.tsx:4


    at makeError (/Users/lars/.npm/_npx/cc9fa0209c2baa81/node_modules/execa/index.js:174:9)
    at /Users/lars/.npm/_npx/cc9fa0209c2baa81/node_modules/execa/index.js:278:16
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async Task.task (/Users/lars/.npm/_npx/cc9fa0209c2baa81/node_modules/create-ink-app/index.js:135:6)

My node version is v18.16.0