feat: add npm scripts to create new version release & npm publish

[ghiscoding]

Add npm scripts to automate version releases, it will follow the steps shown below

1. Ask for version bump type
2. Bump version in "package.json" and "slick.grid.js"
3. Run minify script and add the new version number to each minified file headers
4. Create/Update changelog.md
5. Update (sync) npm lock file with new version
6. Add all changed files to Git ("package.json", "slick.grid.js", "CHANGELOG.md" and all minified files)
7. Create git tag of the new release
8. Commit all files changed to git
9. Push git tags and all commits to remote origin
10. NPM publish
11. Create a Release on GitHub with changelog and new tag

Also created the CHANGELOG.md of all previous versions and commits that followed Conventional Commits. Note that it adds a lot of devDependencies and I could maybe create a separate npm lib for that in the future but for now that will do

Here's a quick preview, we obviously cannot not show all steps below (also the git changes are only shown as a demo, everything is automated even the git add & commits)

[ghiscoding]

@6pac
So here's the promised PR to automate github/npm releases, the entire list of steps are shown in the description of the PR above. Could you please do a quick review of the steps and if you're satisfied, could you then merge the PR, git checkout on your computer the next branch and publish a new alpha 3.0.0 version (breaking change version), it should be as simple as following these steps.

Note: Make sure that you have NPM >= 8.5.0 or else it will throw some errors.

1. merge PR
2. git pull & checkout the next branch on your computer with latest code
3. npm install all deps (npm install)
4. execute release script
   • npm run release
   • or if you prefer to do a dry-run test, you can use npm run preview:release but be sure to discard git changes once you're done, they are part of the dry-run to show which files get changed (also note that all minified files will always change since they get new date timestamp every time the minify script runs)
5. from the increment version prompt, please choose
   • "premajor.alpha (3.0.0-alpha.0)" (same as the one picked in animated gif above)
6. follow all instructions and if all goes well, it should publish a new 3.0 alpha versions on npm with an alpha tag
   • note: at some point in time in the instruction, you will get a link which will prefill a form to create a GitHub Release, so make sure to click the link, it might be a long link. We can automate that part even more in the future with an .env variable, I'll show you how later.

Obviously I could not test every commands, especially for pushing to github and doing npm publish, but hopefully all goes well (crossing my fingers). If you're facing any problems, please reach out here or by email. Cheers

[yamass]

One thing I don't quite like about this is where to put the reference to the ticket number (#xyz) that a commit fixes, for traceability. The spec puts it to the footer which makes it necessary to expand the commit message in order to get that link. I'd rather put it right into the title. What do you think?

[ghiscoding]

@yamass I'm not exactly sure what you're talking about, Conventional Changelog is used by millions of project and was created by a different team (see their Conventional-Changelog GitHub), the changelog are created by using templates, which we don't control, and the most popular template is "angular" and I've been using it in all my projects for years and it's fine by me as long as PRs follow the simple guideline. Currently SlickGrid does not have any changelog, so this PR is a big improvement on that side, the rest of this PR is management stuff and mostly intended for @6pac's use

[yamass]

@ghiscoding Let me clarify.

I agree that we don't control the spec. I also agree that using conventional changelog is a good idea and helps a lot.

However, the spec (both the raw spec and the angular template) explicitly states that the ticket reference goes to the footer. Fortunately, the spec does not forbid putting the ticket reference into the title (which I would prefer).

Anyhow, what I did not know a few hours ago is that it is established practice to still put the ticket reference into the title. As an example, take a look at the angular commit log.

So my question is: Is it OK to do so in this project?

[ghiscoding]

Adding the issue number is a good practice and it will show up in the final changelog entry, whenever I fix an issue I do link in the commit title. The parsing process will also always add the commit hash into each changelog entries. If you look at the new CHANGELOG.md that I added in this PR, you can see that it also links the PR numbers as well as the commit hash which is nice. But again, the thing is that this process only works when users creating PRs follow the conventional commits guideline, I'm about the only person following it here so most of the changelog entries are my PRs... but I'm trying to enforce the guideline for future PRs (as I did in your opened PR) so that future changes are reflected in the changelog.

If you want to know how the parsing and templates are working, you can see the angular templates here. If you need more info, please open a separate "Discussion" to avoid adding too many comments in this PR.

[6pac]

@ghiscoding what do you mean exactly by 'npm install all deps'
I'm an NPM newb.

[ghiscoding]

@6pac I just mean to run npm install 😉 there's a lot of new devDependencies for the release scripts, so make sure to run the install, that's what I meant

[6pac]

$ npm run release

> [email protected] release
> node ./scripts/release.js --create-release github

G:\Dropbox\Work\SlickGrid\SlickGrid-6pac\scripts\git-utils.js:74
      throw Error('Working tree has uncommitted changes, please commit or remove the following changes before continuing.');
               ^

Error: Working tree has uncommitted changes, please commit or remove the following changes before continuing.
    at Object.hasUncommittedChanges (G:\Dropbox\Work\SlickGrid\SlickGrid-6pac\scripts\git-utils.js: 74:15)
    at processTicksAndRejections (node:internal/process/task_queues:96:5)
    at async main (G:\Dropbox\Work\SlickGrid\SlickGrid-6pac\scripts\release.js:43:3)

[6pac]

$ git status
On branch next
Your branch is up-to-date with 'origin/next'.
Untracked files:
  (use "git add <file>..." to include in what will be committed)

        examples/test1.html

nothing added to commit but untracked files present (use "git add" to track)

[6pac]

So, I have untracked files but the working tree is not dirty.

[ghiscoding]

yeah it will error out if you have files that aren't committed yet, it runs this git command to know this

# check if anything is uncommitted in current branch
git status --porcelain

SlickGrid/scripts/git-utils.js

Lines 70 to 76 in 017bc7f

	async function hasUncommittedChanges({ cwd, dryRun, skipChecks }) {
	const execArgs = ['status', '--porcelain'];
	const { stdout } = await childProcess.exec('git', execArgs, { cwd });
	if (stdout.length && !skipChecks) {
	throw Error('Working tree has uncommitted changes, please commit or remove the following changes before continuing.');
	}
	}

Are you able to cleanup the branch with nothing uncommit before you run the release? If it's a problem, we can maybe disable that line temporarily, technically speaking it will add only the files touched by the release script into git ("package.json", "slick.grid.js", "CHANGELOG.md" and all minified files), every other files will be excluded from the git commit of the release

I don't know anything about examples/test1.html, how come it changed? Can you discard the change and try again?

[6pac]

So I've got a heap of untracked files that I have put in temporarily for debugging purposes, such as the examples/test1.html (I edited out the other 20 or so). These are not part of the repo. GIT will let you stage specific files for commit and just ignores these untracked ones (so I don't have any staged uncommitted files, only unstaged uncommitted files - this is what I interpret as 'clean').

Could we use:

git status -uno --porcelain

noting that the git man pages specifically say that the porcelain versions shouldn't be used in scripting

[6pac]

OK I've committed a change to git-utils.js for execArgs = :

async function hasUncommittedChanges({ cwd, dryRun, skipChecks }) {
  const execArgs = ['status', '--porcelain', '-uno'];
  const { stdout } = await childProcess.exec('git', execArgs, { cwd });
  if (stdout.length && !skipChecks) {
      throw Error('Working tree has uncommitted changes, please commit or remove the following changes before continuing.');
  }
}

That's fixed the untracked files issue, but now I'm finding the option selection is not working. I checked out your screen video above, and for me it's not moving the selection prompt on right/left/up/down arrow. I could possibly fix this, but I'm feeding this back so we can both be across it. I'm assuming probably inquirer is not installed. Shouldn't I be getting a message to that effect?

[ghiscoding]

@6pac damn what's happening with your computer? lol
Inquirer is part of the devDependencies so it should be installed, I think I've seen somewhere that some terminals aren't working good with it though so give it a try with a different terminal like powershell maybe (Git Bash for windows is probably having issues as pointed out in their GitHub issue)

"Git bash" on Windows is one of the rare terminals we cannot support. The problem is it is not a true interactive terminals which makes it incompatible with the redrawing of the screen inquirer is doing.

[6pac]

OK, but I suspect a quite a number of people will be using that terminal! There doesn't appear to be a way to detect if we're running on that. Can I suggest a simpler approach like the LetEncrypt SSL tool?

C:\deploy-bundles\LetsEncrypt>wacs

 A simple Windows ACMEv2 client (WACS)
 Software version 2.1.22.1267 (release, pluggable, standalone, 64-bit)
 Connecting to https://acme-v02.api.letsencrypt.org/...
 Scheduled task looks healthy
 Please report issues at https://github.com/win-acme/win-acme

 N: Create certificate (default settings)
 M: Create certificate (full options)
 R: Run renewals (0 currently due)
 A: Manage renewals (4 total)
 O: More options...
 Q: Quit

 Please choose from the menu:

[ghiscoding]

No one but you will be running this script (not even me), it`s to create a new SlickGrid version release. I created it to help you with releases. We can also add letter choice with Inquirer but I prefer the arrow, because with letter choice it adds them in the question (please choose nmraoq) which looks a bit funny

Are you able to continue at least? I'd really like to have an alpha or beta 3,0 released so that I can continue the implementation in my libs. Thanks

EDIT

Looking at inquirer, you can maybe choose rawlist instead of list for the prompt, it adds 1, 2, 3, ... prefixes in the front of each answer, that should be enough

SlickGrid/scripts/release.js

Lines 240 to 244 in f213d8b

	const answers = await inquirer.prompt([
	{
	type: 'list',
	name: 'prompt',
	message: message.trim(),

(see Inquirer rawlist)

[6pac]

So there were a number of roadblocks with the release script (you can read about them in the commit history if you're interested) but I finally got through them. unfortunately, it had been so long since reading the initial instructions that I just did the 3.0.0. release, not the pre-alpha. Damn.

I happen to know you can't delete or overwrite NPM tags so what do you think I should do now? I can remove the Git push and the tags and do a pre-alpha, but that's not going to remove the NPM release.
I'm sorry for this-should have been paying more attention but I got kind of sucked down the debugging rabbit hole.

BTW, I am more than happy for you to do releases with the script - I think it's best if we are both set up for that.

Also, thanks for the scripts! It has been really great for me to be forced to use NPM and see modern javascript in action. Unfortunately a few of my clients use IE11 still, so I've not used ES6 in production and still haven't seen a lot of its features. They are way cool. And it's triggered me to start up a test TypeScript/Nodejs VS solution to check out the tooling and debugging. This could be the start of my next technological leap. I note with interest that ts can compile to either ES5 or ES6.

I feel like I might appear to be a bit of a dinosaur, but I can learn new languages and dev environments very quickly. It's just that I've been a professional dev since 1986, so I've seen a hell of a lot of frameworks and trends come and go in the sector, and I have to be impressed by something and convinced of its commercial sense before I commit the time and resouces to learn it and possibly to retool to it. That's (unfortunately) a fairly high bar to clear.

[ghiscoding]

to rollback a version, you can reach out to the npm team here (I did in the past), it`s best if no one downloaded the version yet (I did not on my side). It might be easier to ask them to simply add a beta tag. They're usually pretty quick to reply and do the action, they might not accept if someone downloaded the version or if it's been too long, so if you want to rollback then do it quickly, Worst case, we could also keep the version, I was nearly done with it, I wanted to eventually look at that other guy big PR but that could also wait, so up to you if you want to reach out to npm or just use 3.0

As for the script, I couldn't test everything because the end goal is a release and I don't have access to that (at least not in npm since I'm not a contributor there). I was able to test about 60% of the script. What problem did you encounter? I saw you made a commit, did you fix all the issues in script for the next release to work? The goal is really to make it a lot simpler for you to release a new version and I'm pretty sure it would achieve this goal in the future. Also I assume you should have received a link to create the GitHub Release, did you see that? If so you have to click on it and it should provide open a GitHub Release with all the field as prefilled (if you already closed the script, then just do it the next time)

🏷️ (GitHub Release web interface) - 🔗 https://github.com....

I'm not a contributor on npm (I don't know who that other guy is either 😬)

Hey what happened to the prompt? Didn't you break it by replacing it with console logs? Oh ok I see you replaced that with direct node input, inquirer can do that too, I would prefer to stick with inquirer as much as possible

SlickGrid/scripts/release.js

Lines 263 to 267 in 7e7328d

	// display propmpt message and choices
	console.log(message.trim());
	for (var i=0; i<choices.length; i++) {
	console.log(' ' + (i+1) + ' - ' + choices[i].name);
	}