Add interactive UI #97

zinserjan · 2016-10-09T16:49:29Z

This PR adds a interactive ui when np runs without arguments as suggested in #52.

features:

choose increment type (e.g. patch) or specify own version (e.g. 0.1.3)
choose NPM dist-tag for pre-releases (except packages with "private": true)
- user can choose from a list of already existing tags for this package or
- specifiy a custom tag except latest
show info about which version you're going from and to.
user have to confirm the release to prevent accidental publishing of wrong versions

Edit(sindresorhus):

You can install this PR with: $ npm i -g 'zinserjan/np#interactive-ui' and run it with $ np.

* choose increment type or specify own version * choose NPM dist-tag for pre-releases * private packages don't need dist-tags * version helper for shared stuff

sindresorhus · 2016-10-09T17:13:29Z

cli.js

@@ -2,14 +2,16 @@
 'use strict';
 const meow = require('meow');
 const updateNotifier = require('update-notifier');
+const version = require('./lib/version');
+const interactiveui = require('./lib/interactiveui');


Just call the file and import: ui

What do mean exacly with "just call the file and import ui" ?

const ui = require('./lib/interactiveui');

this?

const ui = require('./lib/ui');

sindresorhus · 2016-10-09T17:14:38Z

cli.js

 const np = require('./');

 const cli = meow(`
 	Usage
 	  $ np <version>

 	  Version can be:
-	    patch | minor | major | prepatch | preminor | premajor | prerelease | 1.2.3
+	    ${version.SEMVER_INCREMENTS.join(' | ')} | 1.2.3



We should have a description here that running just np starts the interactive UI.

sindresorhus · 2016-10-09T17:19:29Z

lib/version.js

+
+exports.satisfies = function satisfies(version, range) {
+	return semver.satisfies(version, range);
+};


Use arrow functions (inline ones when possible) for all these.

sindresorhus · 2016-10-09T17:20:51Z

test/version.js

@@ -0,0 +1,114 @@
+import test from 'ava';
+import {SEMVER_INCREMENTS, PRERELEASE_VERSIONS, isValidVersionInput, isPrereleaseVersion, getNewVersion, isVersionGreater, isVersionLower, satisfies} from '../lib/version';


Too verbose. Just import version and use them as properties.

sindresorhus · 2016-10-09T17:24:21Z

lib/interactiveui.js

+					value: null
+				}
+			]),
+			filter(input) {


Use inline arrow function.

filter => version.isValidVersionInput(input) ? version.getNewVersion(pkg.version, input) : input,

Same for all the other prompt functions.

sindresorhus · 2016-10-09T17:27:29Z

lib/interactiveui.js

+				return !pkg.private && version.isPrereleaseVersion(answers.version) && !options.tag && !answers.tag;
+			},
+			validate(input) {
+				if (!input.length) {


if (input.length === 0) {

sindresorhus · 2016-10-09T17:27:49Z

lib/interactiveui.js

+			name: 'confirm',
+			message(answers) {
+				const tag = answers.tag || options.tag;
+				const msg = `Will bump from ${pkg.version} to ${answers.version}${tag ? ` and tag this release in NPM as ${tag}` : ''}. Continue?`;


sindresorhus · 2016-10-09T17:28:07Z

lib/interactiveui.js

+		{
+			type: 'list',
+			name: 'tag',
+			message: 'How should this pre-release version be tagged in NPM?',


sindresorhus · 2016-10-09T17:28:48Z

lib/interactiveui.js

+			},
+			validate(input) {
+				if (!version.isValidVersionInput(input)) {
+					return 'Please specify a valid semver, e.g. 1.2.3. See http://semver.org/';


http://semver.org/ => http://semver.org

sindresorhus · 2016-10-09T17:31:32Z

lib/interactiveui.js

+			type: 'list',
+			name: 'version',
+			message: 'Select semver increment or specify new version',
+			choices: version.SEMVER_INCREMENTS.concat([


I think we should show what the version would end up being with each increment:

patch (2.3.1) minor (2.4.0) major (3.0.0)

And the (2.3.1) should be dimmed with chalk.gray.dim(text).

https://github.com/chalk/chalk

sindresorhus · 2016-10-09T17:33:40Z

Wow. ❤️ This is a really good pull request!

sindresorhus · 2016-10-09T17:36:52Z

Can you also document the interactive UI feature in the readme? Could have a new top-level section about it.

I think it would be useful to see the current version before the Inquirer questions:

$ np
Current version: 1.4.3
? Select semver increment or specify new version (Use arrow keys)
❯ patch 
  minor 
  major

What do you think?

sindresorhus · 2016-10-09T18:05:20Z

choose NPM dist-tag for pre-releases (except private package)

Why except for private packages?

SamVerschueren · 2016-10-09T18:13:00Z

I think it would be useful to see the current version before the Inquirer questions

Could be useful, but necessary if we show the new version after patch, minor and major? Just wondering though :).

sindresorhus · 2016-10-09T18:17:20Z

@SamVerschueren It gives a clear picture of where you're at without having to calculate backwards.

SamVerschueren · 2016-10-09T18:18:28Z

Fair point :)

zinserjan · 2016-10-09T18:51:59Z

Can you also document the interactive UI feature in the readme? Could have a new top-level section about it.

I think a gif like in the intro section would be cool. How do you created that?

I think it would be useful to see the current version before the Inquirer questions

Makes sense for me.

Why except for private packages?

Private packages are not published to npm, that's why we don't need the "choose your dist-tag" step.
Have a look at this already existing code in index.js

sindresorhus · 2016-10-09T19:27:30Z

I think a gif like in the intro section would be cool. How do you created that?

Yeah. I was planning to create that after this PR. I prefer to do it myself to ensure it's retina and the same style as the existing one. Here's how I do it: sindresorhus/ama#382

Private packages are not published to npm, that's why we don't need the "choose your dist-tag" step.
Have a look at this already existing code in index.js

Right. I was thinking of private packages, which is a thing, not "private": true in package.json.

zinserjan · 2016-10-09T19:54:33Z

Yeah. I was planning to create that after this PR. I prefer to do it myself to ensure it's retina and the same style as the existing one.

Can you also add the desired instructions about the interactive ui when you do this? I have no clear idea about this 😁

zinserjan · 2016-10-09T20:01:40Z

@sindresorhus please have a look again. I've made the requested changes except the instruction things.

sindresorhus · 2016-10-10T20:02:02Z

Looks great to me. I'm gonna use it for some days to ensure it's working fine and look for possible improvements.

@SamVerschueren @kevva @silverwind @scott113341 @unkillbob @developit @Hypercubed Would be awesome if you could try this out and provide some feedback if anything ;)

You can install this PR with: $ npm i -g 'zinserjan/np#interactive-ui' and run it with $ np.

Comment your npm username if you want to get added to https://www.npmjs.com/package/sindre-playground to be able to test publishing with a test package.

sgulseth · 2016-10-10T21:46:58Z

should perhaps be [version], since it's an optional argument.

sgrif · 2016-10-10T22:05:40Z

What is the difference between prepatch and prerelease?

ragingwind · 2016-10-10T22:57:24Z

Please add me. npm-id: ragingwind

unkillbob · 2016-10-11T01:38:04Z

Tested on a couple of real publishes, worked awesome, love it 👌 💯

sindresorhus · 2016-10-11T06:43:10Z

What is the difference between prepatch and prerelease?

That is a very good question. I don't even know. We copied those from npm version --help. The best explanation I could find is in the semver code and it's not even clear: https://github.com/npm/node-semver/blob/d21444a0658224b152ce54965d02dbe0856afb84/semver.js#L411-L413

sindresorhus · 2016-10-11T06:43:26Z

Please add me. npm-id: ragingwind

Done

SamVerschueren · 2016-10-11T06:57:36Z

It turns out the Node.js check is broken

sindresorhus · 2016-10-11T07:01:24Z

should perhaps be [version], since it's an optional argument.

👍

zinserjan · 2016-10-11T08:12:33Z

should perhaps be [version], since it's an optional argument.

Yep, makes sense.

What is the difference between prepatch and prerelease?

I asked myself the same question a few days ago. I figured out that the option prerelease is basically just a way to increment the last pre release number. When the current version of the package isn't a prerelease (e.g. 1.0.0) it acts like prepatch.

Some examples how each option affects the version:

# starting from a normal release version
1.0.0 => prerelease=> 1.0.1-0
1.0.0 => prepatch => 1.0.1-0
1.0.0 => preminor=> 1.1.0-0
1.0.0 => premajor=> 2.0.0-0

# starting from a pre release version
1.0.1-0 => prerelease=> 1.0.1-1
1.1.0-0 => prerelease=> 1.1.0-1
2.0.0-0 => prerelease=> 2.0.0-1

It turns out the Node.js check is broken

Good catch. The version check is in the wrong order.

SamVerschueren · 2016-10-12T10:41:37Z

Should we put the versions in a different color (e.g. 0.2.0 and 0.3.0)?

SamVerschueren · 2016-10-18T15:00:25Z

Ran this for a couple of my releases and it works like a charm. Great work @zinserjan !

Hypercubed · 2016-10-18T15:04:29Z

Works great for me as well. In fact so well I wonder if it could be it's own package. version-chooser or something.

SamVerschueren · 2016-10-18T15:09:13Z

lib/ui.js

+							.map(line => line.split(':')[0].replace(/^\s|\s$/, ''))
+							.filter(line => line.toLowerCase() !== 'latest');
+
+						if (!existingPreleaseTags.length) {


I would explicitely check for 0

existingPreleaseTags.length === 0

SamVerschueren · 2016-10-18T15:09:25Z

lib/ui.js

+			choices: () => {
+				return execa.stdout('npm', ['dist-tag', 'ls'])
+					.then(stdout => {
+						const existingPreleaseTags = stdout.split('\n')


call it existringPrereleaseTags

SamVerschueren · 2016-10-18T15:10:01Z

lib/ui.js

+			message: 'How should this pre-release version be tagged in npm?',
+			when: answers => !pkg.private && version.isPrereleaseVersion(answers.version) && !options.tag,
+			choices: () => {
+				return execa.stdout('npm', ['dist-tag', 'ls'])


Return execa immediately behind the arrow function

choices: () => execa.stdout()

SamVerschueren · 2016-10-18T15:12:02Z

lib/ui.js

+			message: answers => {
+				const tag = answers.tag || options.tag;
+				const msg = `Will bump from ${oldVersion} to ${answers.version}${tag ? ` and tag this release in npm as ${tag}` : ''}. Continue?`;
+				return msg;


I think this would be clearer if it was written like this

const tag = answers.tag || options.tag; const tagPart = tag ? ` and tag this release in npm as ${tag}` : ''; return `Will bump from ${oldVersion} to ${answers.version}${tagPart}. Continue?`;

Hypercubed · 2016-10-22T02:49:30Z

Hi @zinserjan , sorry, this is very tangential but are you interested in publishing your work on ./lib/ui as a separate module.

sindresorhus · 2016-10-22T14:23:00Z

@Hypercubed That's too premature. Better to figure out what works and iterate on this here. We can explore what can be extracted as reusable at a later point.

sindresorhus · 2016-10-22T14:23:36Z

@zinserjan Any chance you could address @SamVerschueren's feedback so we could get this merged?

zinserjan · 2016-10-22T16:34:08Z

@sindresorhus @SamVerschueren
Done. There's an lint issue with a require statements in index.js. I just disabled this for now, cause assign to a unused variable leads to another eslint error.

@Hypercubed I don't see any reason at the moment to publish this under a separate module. When you see a need for this, feel free to do this. I personally don't need this in any other projects.

zinserjan · 2016-10-22T16:46:08Z

Should we put the versions in a different color (e.g. 0.2.0 and 0.3.0)?

@SamVerschueren Any suggestions?

sindresorhus · 2016-11-04T08:13:36Z

Woot. Landed! Thanks so much for working on this @zinserjan :)

SamVerschueren · 2016-11-04T08:15:32Z

Great job @zinserjan !

sindresorhus · 2016-11-04T08:57:17Z

Dogfooding ftw!

zinserjan · 2016-11-04T10:02:30Z

Awesome! Thanks for merging ;)

zckrs · 2016-11-04T10:59:20Z

Just fetched and ported to internal tool.

Thanks :-)

interactive ui when no version is provided

d9582ec

* choose increment type or specify own version * choose NPM dist-tag for pre-releases * private packages don't need dist-tags * version helper for shared stuff

sindresorhus requested changes Oct 9, 2016

View reviewed changes

sindresorhus changed the title ~~interactive ui when no version is provided~~ Add interactive UI Oct 9, 2016

address code style related changes

ef67d6c

show version info

98ce810

zinserjan force-pushed the interactive-ui branch from 993d54e to 98ce810 Compare October 9, 2016 19:44

zinserjan added 2 commits October 11, 2016 20:49

fix Node.js check

ee9ebe5

fix wording in tag error message

b6c0860

SamVerschueren requested changes Oct 18, 2016

View reviewed changes

zinserjan added 2 commits October 22, 2016 18:23

address requested changes

cbcdd85

fix linting issue with new version of xo

4fb32b9

sindresorhus merged commit df32774 into sindresorhus:master Nov 4, 2016

sindresorhus added a commit that referenced this pull request Nov 4, 2016

follow-up to #97

53a7786

revelt mentioned this pull request Nov 7, 2016

Interactive UI #52

Closed

imjeen mentioned this pull request Apr 26, 2022

support custom the version preid for interactive CLI #643

Open

		@@ -0,0 +1,114 @@
		import test from 'ava';
		import {SEMVER_INCREMENTS, PRERELEASE_VERSIONS, isValidVersionInput, isPrereleaseVersion, getNewVersion, isVersionGreater, isVersionLower, satisfies} from '../lib/version';

Add interactive UI #97

Add interactive UI #97

Conversation

zinserjan commented Oct 9, 2016 • edited by sindresorhus

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

sindresorhus commented Oct 9, 2016

sindresorhus commented Oct 9, 2016

sindresorhus commented Oct 9, 2016

SamVerschueren commented Oct 9, 2016

sindresorhus commented Oct 9, 2016

SamVerschueren commented Oct 9, 2016

zinserjan commented Oct 9, 2016

sindresorhus commented Oct 9, 2016

zinserjan commented Oct 9, 2016

zinserjan commented Oct 9, 2016

sindresorhus commented Oct 10, 2016 • edited

sgulseth commented Oct 10, 2016

sgrif commented Oct 10, 2016

ragingwind commented Oct 10, 2016

unkillbob commented Oct 11, 2016

sindresorhus commented Oct 11, 2016

sindresorhus commented Oct 11, 2016

SamVerschueren commented Oct 11, 2016

sindresorhus commented Oct 11, 2016

zinserjan commented Oct 11, 2016

SamVerschueren commented Oct 12, 2016

SamVerschueren commented Oct 18, 2016

Hypercubed commented Oct 18, 2016

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Hypercubed commented Oct 22, 2016

sindresorhus commented Oct 22, 2016

sindresorhus commented Oct 22, 2016 • edited

zinserjan commented Oct 22, 2016

zinserjan commented Oct 22, 2016

sindresorhus commented Nov 4, 2016

SamVerschueren commented Nov 4, 2016

sindresorhus commented Nov 4, 2016

zinserjan commented Nov 4, 2016

zckrs commented Nov 4, 2016

zinserjan commented Oct 9, 2016 •

edited by sindresorhus

sindresorhus commented Oct 10, 2016 •

edited

sindresorhus commented Oct 22, 2016 •

edited