Creating terminal help text in JS - javascript

I am using Gulp to create a bunch of tasks for a project I have and when you type gulp I would like to show some instructions on the terminal to show people the commands they can Run and what they do.
I didn't want to use console.log because it blends in and I wanted to give bolds and styles to the lettering.
I was searching for a way to do that but I couldn't find any that worked properly, does anyone know?
Examples of people that have this is Yeoman and Foundation for Apps CLI

If you need to avoid using console.log you can use the underlying standard output, accessible in node through process.stdout
https://nodejs.org/api/process.html#process_process_stdout
The example provided in that link is the actual definition of console.log in node:
console.log = function(d) {
process.stdout.write(d + '\n');
};
For colouring and styling your strings you could use cli-color or chalk.

you can either use gulp-help, which gives you ability to provided even details to be printed for a given task... or use gulp-task-linking which prints tasks as main tasks & sub-tasks
visit the link to know all the options that they provide...

Related

What arguments can be passed to npm-view command?

I am reading documentation about npm and found an interesting command called npm-view.
It looks rather useful, but documentation looks weird.
npm view [<#scope>/]<name>[#<version>] [<field>[.<subfield>]]
First of all I would be glad if someone can explain or give a link where I can read what does all that
[[<[].>#<>/<><>///]] stuff mean, I've seen it plenty of times in different documentations, but no one never explain what is it.
Second I would like to know what does <field> option mean, because documentation says nothing about it. I can figure out that <name> stands for package name and [#<version>] stands for package version (looks like brackets are put around optional parameters), but <field>... How am I supposed know what should be put there?
Thank you.
The square brackets indicate optional tokens. So in the example above, npm view <name> is the minimal syntax, but you can further qualify name with #scope/name#version like #someorg/somerepo#0.0.1. The npm view documentation does further explain the details of it, but not specifically the shorthand.
As for <field>, if you run npm view somepackage you would see all the output of npm view broken out into different sections, like 'dist', 'dependiencies', 'maintainers', etc... These are the fields it's referring to. The docs aren't explicit, but the examples of its usage try to illustrate this.

How do I disable console.log for loaded javascript modules in HTML?

In my HTML I load a Javascript module like this:
<script type="text/javascript" src="static/js/mymodule.js"></script>
But mymodule.js contains console.log commands inside so I can see their outputs every time when I reload the page. How can I prevent it?
Of course, I could remove all console.log calls, but what if I deal with external library that I can't modify? Maybe there's a way to prevent logging in a particular script-tag.
I don't think there is a way to do that (I hope I'm wrong). If an external library has console.logs in their production code, you should consider using an alternative one.
Because you have control of the file where the console.log exists, you should delete it or comment it out.
try this :
console.log = function () {}
You can do that by: stripping out the console.log statements using build tool settings. Enable the build tool settings to strip console.log for production build whereas you can still keep them for development build.
Most of the build tools have support for this. e.g webpack, gulp etc.

SonarQube, sonar-javascript and JSTestDriver - ressource not found

I need your help/guidance about one problem I have for the last two days.
The sonar-javascript plugin is not able to get the results of my Javascript UnitTests. I am generating unit tests and lcov results using JSTestDriver. The lcov results are working and are correctly shown in SonarQube. I also have to say that I am using Windows. Here is the error I have:
Test result will not be saved for test class "UnitTests.controlesTest", because SonarQube associated resource has not been found using file name: UnitTests\controlesTest.js"
The error is very similar to this one: Importing javascript XML JUnit tests to sonar using jstestdriver fails. However, this error seems to be fixed in the last SNAPSHOT (2.8). The file I am trying to access is stored in UnitTests/controlesTest.js. I tried to go into the sonar-javascript source, and find a way to correct this issue (at least, try to understand it). I ended up in the file JsTestDriverSensor.java in the function getTestFileRelativePathToBaseDir. I found that this line is not able to get my file (UnitTests\controles.js). Actually, fileIterator does not contain any InputFile.
Iterator<InputFile> fileIterator = fileSystem.inputFiles(predicate).iterator();
So I tried different predicates to understand why my file is not found. At the end, I found that the following predicate fileSystem.predicates().hasType(InputFile.Type.TEST) is the reason why this file is not found. A quick fix is to change:
- 108 testFilePredicate,
+ 108 mainFilePredicate,
I must be doing something wrong, maybe someone has an idea ?
The "sonar.tests" property has to be set in the sonar-project.properties (or in newer version SonarQube.Analysis.xml). This allows the sonar-javascript plugin to find the javascript test files.

Creating a scrollable/rewritable terminal/stdout interface with Node.js

When I print to my terminal in Node.js, I use console.log to output a new line of text. However, there are some applications that dynamically update the same lines of console output, instead of just adding new ones. A popular example of this is the ASCII loading bar that appears in wget or scp.
There are some applications that fill the entire terminal window with dynamic output. ngrok is an example of this:
This application updates the information above dynamically.
Are there frameworks that will help me create a similar dynamic output in Node.js? Does this have a name?
Well maybe this is too much for what you need.. but I'm going to give you some options of tools that you can use..
A better option to just use a console.log It would be using colors instead:
https://www.npmjs.com/package/color
https://www.npmjs.com/package/chalk
If you need prompt questions to the user:
https://www.npmjs.com/package/inquirer
For create command lines, you have:
https://www.npmjs.com/package/commander
For terminal interfaces you have these:
https://github.com/chjj/blessed
Then on the top of that one you have this one:
https://github.com/Yomguithereal/react-blessed
Those are amazing tools.. I'm using them for my project and they just rock. There are some others.. tell if you need more hehe
You can try this module: ansi.js

Add values to a chosen multiselect

I am wondering whether it's possible to add new values on the fly to a chosen.js multiselect (similar to how tagging works).
I've seen in another SO post a user saying this is possible. He links to an example and a fork on github, but I've had some difficulties implementing those.
The source code is written in CoffeeScript. I've tried compiling it (using an online compiler) to regular JavaScript, copy pasted the code into a blank test project but I got errors. After that, I've loaded The AbstractChosen and SelectParser as well (compiled them to js) and didn't get errors, but the 'add items on the fly' functionality is not there (although i initialized the chosen described in the aforementioned link).
Has anybody worked with this fork? If yes, could you please share your experiences with it?
The problem you have is because you haven't follow the steps in the documentation:
If you download the source, install the correct packages and run the build commands you end with a chosen.jquery.js, chosen.proto.js and chosen.css.
So the following steps should do it for you:
Download: https://github.com/koenpunt/chosen/archive/option_adding.zip
Install packages: npm install && gem install bundler && bundle install
Run build: grunt build (note, for this you'll need the grunt cli)
Edit
Or for your convenience, download a compiled release.
the documentation mentions this option:
Updating Chosen Dynamically
If you need to update the options in your select field and want Chosen
to pick up the changes, you'll need to trigger the "chosen:updated"
event on the field. Chosen will re-build itself based on the updated
content.
with this.
$("#form_field").trigger("chosen:updated");
This can be combined with
// Add field
$("#form_field").append("<option>Utopia</option>");
$("#form_field").trigger("chosen:updated");
Adding this together to an example can be found at the jsfiddle:
http://jsfiddle.net/E5X9x/
The solution is here
$('select').chosen({plugins: ['option-adding']});
or
$(function() {
$(".chzn-select").chosen({
create_option: true,
// persistent_create_option decides if you can add any term, even if part
// of the term is also found, or only unique, not overlapping terms
persistent_create_option: true,
// with the skip_no_results option you can disable the 'No results match..'
// message, which is somewhat redundant when option adding is enabled
skip_no_results: true
});
});

Categories