‘yo’ to the rescue – Part 2

‘yo’ to the rescue – Part 2

By | February 16th, 2018
No Comments on ‘yo’ to the rescue – Part 2

THE YEOMAN RUN-LOOP There are some methods that are defined within the

class. Any genera-tor class can have some any number of methods. Each

method that is directly attached to the generator prototype is considered

to be a task. Each task is run in sequence by the Yeoman environment run

loop. In other words, every […]


														
							

THE YEOMAN RUN-LOOP

There are some methods that are defined within the class. Any genera-tor class can have some any number of methods. Each method that is directly attached to the generator prototype is considered to be a task. Each task is run in sequence by the Yeoman environment run loop. In other words, every method that is in the class will get called. This can be a problem in case you want to create some helper or private methods that you don’t want called when other tasks are being executed.To create a private method you need to add _ (an underscore) before the method name so that the Generator does not execute that helper method. Another way to create helper methods to add them to the instance variable – create a set of instance methods whenever you want to create some helper methods. The Yeoman run loop prioritises methods using the Grouped-queue module. Priorities are defined in your code as special prototype method names. When a method name is the same as a priority name, the run loop pushes the method into this special queue. If the method name doesn’t match a priority, it is pushed in the
default group. The generator follows an available list of priority methods (in running order):

1. initializing: Your initialization methods (checking current project state, getting configs, etc)2. prompting: Where you prompt users for options – you’d call this.prompt()
3. configuring: Saving configurations and configure the project (creatin.editorconfig files and other meta-
data files)

4. default: If the method name doesn’t match a priority, it will be pushed to this group.
5. Writing: Where you write the generator specific files (routes, controllers, etc)

6. conflicts: Where conflicts are handled (used internally)

7. install: Where installations are run (npm, bower)
8. end: Called last, cleanup, say good bye, etc Now these methods are called in
sequence and if you want to add some method in some group you may group them likewise.

ASYNC

There are many ways to stop the yeo-man run-loop and the easiest one is to return a promise. The run-loop will halt till the promise is resolved or will exit whenever the promise is rejected.Now if you are using some old libraries that do not support promise yet then you have to use this.async to halt
the run-loop, like mentioned here: http://dgit.in/AsyncCde

HANDLING USER RESPONSE
Your generator will interact a lot with the end user and though Yeoman is primarily based on CLI, its sheer flexibility allows any generator to be run in any environment. Yeoman provides a set of abstractions to the end user, and it’s your responsibility as an author to use
the abstractions. Yeoman uses the prompt module provided by inquirer.js. You should refer to their list of APIs for a list of options available to the user. The prompt method is asynchronous and returns a promise. You will need to return the promise from your task, and wait for it’s completion before
running another. In our example, you will first see the line for logging where this.log is used, and whenever logging some output you should also use this.log instead of console.log because that
is in the current running context of the generator. In our example, we’re asking the user about:

• Name
• Email id (with validation)
• The app’s name
• The port value in which the user
would like to create the application
(default port: 3000)
• The license Thus, after adding each of the prompts, our prompting function should look like this:
We encourage you to add some prompts to get an idea about how differnt types of prompts work.
Our index.js (http://dgit.in/IndexJS)has a lot of code to digest. Starting with the prompt function, we are adding a prompt whenever data is required. At the end of the prompt, we handle the promise and add the answers to Yeoman’s run context.Next, at the writing function, we add the required code for copying values from source to destination. Working with filesystems is very easy in Yeoman, because it provides a lot of utility functions in the code. The Yeoman generator context has all the functions mentioned within the code itself to make life easier.
In the writing function, you first need to prepare our package.json, then you overwrite the value in the pack- age.json file. In Yeoman, there are mainly two contexts are defined for file
oprations. The first is the destination context, and the second is the template context. The destination context is just the folder where the user is running the application.

Suppose you are running your application in ~/Projects. For that project this.destinationRoot() => returns ‘~/Projects’ and this. destinationPath(‘index.js’) => returns ‘~/Projects/index.js’.
The important thing about any copy function is that when something is missing, Yeoman will create
that directory or file for you. You don’t have to explicitly create every file or folder, and all opertaions are synchronous. In the template context similarly, this.sourceRoot() => returns‘./templates’ this.templatePath(‘package.json’) => returns ‘./templates/package.json’

Now at line 88 you can see we have used the copyTpl method to overwrite the EJS compliant
variable to assign a dynamic port number to our project here. After copying everything the last step that remains is installing the required modules for your code to run. We are only using
express, so we will install express in the end. If you need to, you can use other modules. Also, there is another feature where you can add ‘save-dev’:true and install some
devDependencies.
In the end, to wrap up, we are sending another yosay message to the user to inform the user what else needs to be done to start the app. If you have gotten this far, there’s just one step that remains – linking the package. To do that, at the generator directory write npm link. After linking create a test directory to test-run your generator. Now, in the test directory you will see all the files are created with the relevant values replaced. All you need to do to start the app is send out the com-
mand: npm start

IN THE END
There are a lot of scaffolding tools in the market and Yeoman is only one of them. And beyond this article, there are certainly a lot of other parts to be uncovered. There are some pretty awesome generators available over there and you can publish your own awesome one too.

Google
Ashutosh Gupta
Share a little biographical information to fill out your profile. This may be shown publicly. In WordPress version 2.9, a new filter was added to make changing the [...] string in the excerpt. Do not use both of these methods in