Yeoman generator: how do I access user supplied options? - yeoman

I'm building a yeoman generator. I prompt the user to name the project like this:
SimplesiteGenerator.prototype.askFor = function askFor() {
var cb = this.async();
console.log(this.yeoman);
var prompts = [{
name: 'siteName',
message: 'What do you want to call your site?'
}];
this.prompt(prompts, function (props) {
this.siteName = props.siteName;
cb();
}.bind(this));
};
Further on, I build the file system:
SimplesiteGenerator.prototype.app = function app() {
this.mkdir( 'app');
this.mkdir('app/templates');
this.mkdir( 'img');
I'd like to build the filesystem within a directory that is given the same name as the project. How do I get the user-supplied option and pass it into app ?

You will need to make an empty global variable, then assign it the value of the users answer like so
var projectFolderName = '';
this.prompt(prompts, function (props) {
this.siteName = props.siteName;
projectFolderName = props.siteName;
cb();
}.bind(this));
Then inject this variable into your build path string via concatenation like so
SimplesiteGenerator.prototype.app = function app() {
this.mkdir( 'app/' + projectFolderName);
this.mkdir('app/templates');
this.mkdir( 'img');
}

Related

Unable to reset store values

I would like to reset an existing store's values to the defaults. For UX reasons, I don't want to create a new store.
const defaults = {
name: {
value: "",
},
foo: [],
some: {
other: {
data: ""
}
}
};
const store = writable(defaults);
export const myStore = {
subscribe: store.subscribe,
reset: () => {
store.set(defaults);
}
};
The store behaves as expected, with the exception of the reset() method. Whenever it's called it does not update the store, none of the reactive bindings reflect what should be the default values.
...
$myStore.name.value = "foo";
// foo
myStore.reset();
$myStore.name.value;
// foo
This isn't an issue with Svelte, but with how javascript handles objects. When you assign an object to another variable, it will only assign a reference, and not clone the object. This means that, when you call $myStore.name.value = "foo";, you are actually updating the same object that is stored in defaults.
You can observe this by running the code below
let a = {name: ''};
let b = a;
b.name = 'test';
console.log(a); // {name: 'test'}
Since you're using objects inside objects, just destructuring default also won't work, since you'll only get a shallow copy of an object, meaning that you could update $myStore.name but wouldn't be able to update $myStore.name.value properly.
To properly copy defaults, you could use structuredClone, which is available in Chrome 98, Firefox 94 and Node 17. Rewriting your code, it would be something like this:
const store = writable(structuredClone(defaults));
export const myStore = {
subscribe: store.subscribe,
reset: () => {
store.set(structuredClone(defaults));
}
};

Trying to Script a Search Result into a Netsuite Entity Field

Having two issues with this. One is that I keep getting an error when trying to upload my script. The other is that one version that I did get to upload, didn't load any value into the field (ie. field blank after script ran)
The error I keep getting on upload is "Fail to evaluate script: All SuiteScript API Modules are unavailable while executing your define callback." And although I've made drastic changes to the script, it still won't allow me to upload.
/**
*#NApiVersion 2.x
*#NScriptType ScheduledScript
*/
define(['N/search', "N/record"],
function(search, record) {
function loadAndRunSearch(scriptContext) {
var mySearch = search.load({
id: 'customsearch1088'
});
mySearch.run().each(function (result) {
var countt = result.getValue({
name: 'number'
});
var entity = result.getValue({
name: 'internalid'
});
var objRecord = record.load({
type: record.Type.CUSTOMER,
id: entity,
isDynamic: true,
});
var vfield = objRecord.getField({
fieldId: 'custentity_orders_12m'
});
objRecord.setValue({fieldId: 'custentity_orders_12m', value: countt});
objRecord.save();
});
}
return {
execute: loadAndRunSearch
};
});
That's the script stripped down to the bare bones (FYI still doesn't upload), and the script that uploaded was basically a more complicated version of the same script, except it didn't set the field value. Can anyone see where I've gone wrong?
You haven't returned the entry function.
/**
*#NApiVersion 2.x
*#NScriptType ScheduledScript
*/
define(['N/search', 'N/record'],
function(search, record) {
function loadAndRunSearch(scriptContext) {
var mySearch = search.load({
id: 'customsearch1088'
});
mySearch.run().each(function (result) {
var countt = result.getValue({
name: 'number'
});
var entity = result.getValue({
name: 'internalid'
});
record.submitField({
type: record.Type.CUSTOMER,
id: entity,
values: {
'custentity_orders_12m' :countt
}
});
});
}
return {
execute : loadAndRunSearch
}
});

Copy all files but change the name of some automatically in yeoman

I am trying to create a yeoman generator where I have to copy from templatePath to destinationPath some files and folders, but I would want to have some of this files with a variable that yeoman could change by one of the user's inputs.
like: "<%=name%>-plugin.php" -> "hello-plugin.php"
I saw some references that this can be done but I can't find how.
I am doing right now:
//Copy the configuration files
app: function () {
this.fs.copyTpl(
this.templatePath('**'),
this.destinationPath(),
{
name: this.props.pluginName,
name_function: this.props.pluginName.replace('-', '_'),
name_class: this.props.className,
description: this.props.pluginDescription
}
);
}
I thought that with that code my <%=name%> would magically changed on copyTpl but it doesn't work
I've just found the solution:
Use this.registerTransformStream(); to pipe all files through some node.js script.
var rename = require("gulp-rename");
//other dependecies...
module.exports = yeoman.Base.extend({
//some other things generator do...
writing: function() {
var THAT = this;
this.registerTransformStream(rename(function(path) {
path.basename = path.basename.replace(/(666replacethat666)/g, THAT.props.appName);
path.dirname = path.dirname.replace(/(666replacethat666)/g, THAT.props.appName);
}));
this.fs.copyTpl(
this.templatePath(),
this.destinationPath(), {
appName: this.props.appName
});
}
});
I'm using here gulp-rename to change file names to something else.
Assuming that this.props.appName == "myFirstApp", this:
666replacethat666-controller.html
will change its name to
myFirstApp-controller.html
Following #piotrek answer, I made a function to replace all props with some pattern (like ejs does) -> $$[your prop name]$$. warning: ES6 inside
var rename = require("gulp-rename");
//other dependecies...
module.exports = yeoman.Base.extend({
//some other things generator do...
writing: function() {
this.registerTransformStream(rename((path) => {
for (let prop in this.props) {
let regexp = new RegExp('\\$\\$' + prop + '\\$\\$', 'g')
path.basename = path.basename.replace(regexp, this.props[prop]);
path.dirname = path.dirname.replace(regexp, this.props[prop]);
}
}));
this.fs.copyTpl(
this.templatePath(),
this.destinationPath(), {
appName: this.props.appName
});
}
});
Example:
Let's assume you have this.props.appname = MyApp and this.props.AnotherProps = Test and you want to rename file or folder.
Name your file or folder MyFile$$appname$$.js -> MyFileMyApp.js
Name your file or folder $$appname$$.js -> MyApp.js
Name your file or folder $$AnotherProps$$.js -> Test.js
This is not possible anymore. The feature was bloated and was removed at some point in 2015.
For now, just rename the file:
this.fs.copy('name.js', 'new-name.js')

Splitting Yeoman prompts into multiple separate groups

how would one split a yeoman prompt into parts?
I have a rather extended prompt that i'd like to split into parts with a title for each part.
CSS
- prompt1
HTML
-prompt 2
Something like this:
prompt1: function(){
var done = this.async();
condole.log('title 1');
var prompts = [{
name: 'prompt1',
message: 'Prompt 1:',
}]
},
prompt2: function(){
var done = this.async();
condole.log('title 2');
var prompts = [{
name: 'prompt2',
message: 'Prompt 2:',
}]
},
Thanks!
Update as #Deimyts notes in the comments, the original code stopped working. This is due to API changes in Inquirer.JS documented here.
The base API interface is now inquirer.prompt(questions).then(). There's no more callback function.
Any async question functions is taking a promise as return value instead of requiring this.async().
In a nutshell, instead of using the old var done = this.async() API and resolving the prompt inside the callback with done() just return a promise from the prompting functions (see docs).
prompt1: function() {
this.log("HTML")
return this.prompt([
// configure prompts as before
]).then(function (answers) {
// callback body as before, but no more calling done()
}.bind(this));
},
For more details see #Deimyts answer below.
Yeoman uses a run loop with certain predefined priorities that you can use to put your actions into. As mentioned in the ☞ docs you can group several methods at one priority. Here is a snippet to illustrate a generator with prompts split into two groups HTML and CSS:
'use strict';
var generators = require('yeoman-generator');
module.exports = generators.Base.extend({
constructor: function () {
generators.Base.apply(this, arguments);
},
prompting: {
prompt1: function() {
this.log("HTML")
var done = this.async();
this.prompt([{
type : 'input',
name : 'foo',
message : 'Foo',
}, {
type : 'input',
name : 'bar',
message : 'Bar'
}], function (answers) {
this.foo = answers.foo;
this.bar = answers.bar;
done();
}.bind(this));
},
prompt2: function() {
this.log("CSS")
var done = this.async();
this.prompt([{
type : 'input',
name : 'bam',
message : 'Bam',
}], function (answers) {
this.bam = answers.bam;
done();
}.bind(this));
}
},
configuring: function () {
console.log(this.foo, this.bar, this.bam);
}
});
Using this feature of Yeoman you could modularize your code even further, e.g. by putting your different prompts in separate code files and require / import them into your generator file. But basically the above snippet should do the trick.
Let me know if that helps.
The previous answer wasn't working for me until I made several modifications to the example code.
I can't be 100% certain, but I believe that the difference might be due to differing versions of the yeoman-generator module. So, I'm recording this here in case anyone else runs into the same issue.
For reference, I'm using yeoman-generator v0.23.4, yo v1.8.4, node v6.2.2, & npm v3.9.5.
Modifications:
Remove all instances of var done = this.async(); and done().
The async() function was causing the generator to exit after prompt1, and never run prompt2 or the configuring function.
Add return before calling this.prompt();
Removing async() causes the generator to rush through the prompts without waiting for an answer. Adding return fixes this.
Replace the callback function inside this.prompt() with .then().
Before making this change, the generator would run through the prompts correctly, but would not save the answers, and configuring would simply log undefined undefined undefined.
Original: this.prompt(prompts, callback(answers).bind(this))
Revised: this.prompt(prompts).then(callback(answers).bind(this));
Full Example:
'use strict';
var generators = require('yeoman-generator');
module.exports = generators.Base.extend({
constructor: function () {
generators.Base.apply(this, arguments);
},
prompting: {
prompt1: function() {
this.log("HTML")
return this.prompt([{
type : 'input',
name : 'foo',
message : 'Foo',
}, {
type : 'input',
name : 'bar',
message : 'Bar'
}]).then(function (answers) {
this.foo = answers.foo;
this.bar = answers.bar;
}.bind(this));
},
prompt2: function() {
this.log("CSS")
return this.prompt([{
type : 'input',
name : 'bam',
message : 'Bam',
}])
.then(function(answers) {
this.bam = answers.bam;
}.bind(this));
}
},
configuring: function () {
console.log(this.foo, this.bar, this.bam);
console.log('Config: ', this.config);
},
});

Yeoman Prompts with Rx Interface

I'm trying to write a Yeoman generator, and I really don't enjoy the documented interface for writing prompts. The Reactive Interface seems like it would be much easier to write branching and looping interfaces. However when I write mine like so:
prompting: function () {
var prompts = [{ type: 'input',
name: 'howdy',
message:'howdy'
}];
prompts = Rx.Observable.from(prompts);
this.prompt(prompts, function(answers) { this.log(answers); }.bind(this));
},
I get this error:
events.js:85
throw er; // Unhandled 'error' event
^
Error: You must provide a `message` parameter
at Prompt.throwParamError (/Users/user/.nvm/versions/node/v0.12.0/lib/node_modules/yo/node_modules/inquirer/lib/prompts/base.js:88:9)
at Prompt (/Users/user/.nvm/versions/node/v0.12.0/lib/node_modules/yo/node_modules/inquirer/lib/prompts/base.js:44:10)
at new Prompt (/Users/user/.nvm/versions/node/v0.12.0/lib/node_modules/yo/node_modules/inquirer/lib/prompts/input.js:25:15)
at PromptUI.fetchAnswer (/Users/user/.nvm/versions/node/v0.12.0/lib/node_modules/yo/node_modules/inquirer/lib/ui/prompt.js:92:16)
at MapObserver.selector (/Users/user/.nvm/versions/node/v0.12.0/lib/node_modules/yo/node_modules/inquirer/node_modules/rx/dist/rx.js:4215:20)
at MapObserver.tryCatcher (/Users/user/.nvm/versions/node/v0.12.0/lib/node_modules/yo/node_modules/inquirer/node_modules/rx/dist/rx.js:568:29)
at MapObserver.onNext (/Users/user/.nvm/versions/node/v0.12.0/lib/node_modules/yo/node_modules/inquirer/node_modules/rx/dist/rx.js:4423:42)
at MapObserver.tryCatcher (/Users/user/.nvm/versions/node/v0.12.0/lib/node_modules/yo/node_modules/inquirer/node_modules/rx/dist/rx.js:568:29)
at AutoDetachObserverPrototype.next (/Users/user/.nvm/versions/node/v0.12.0/lib/node_modules/yo/node_modules/inquirer/node_modules/rx/dist/rx.js:4856:51)
at AutoDetachObserver.Rx.internals.AbstractObserver.AbstractObserver.onNext (/Users/user/.nvm/versions/node/v0.12.0/lib/node_modules/yo/node_modules/inquirer/node_modules/rx/dist/rx.js:1856:35)
Instead of using the generator's built in instance of Inquirer via this.prompt(), I installed Inquirer and followed their example. It works perfectly; except it duplicates the first prompt.
prompting: function () {
var done = this.async();
var log = function(answers) { this.log(answers); }.bind(this);
var complete = function() {
this.log('complete');
done();
}.bind(this);
var prompts = Rx.Observable.create(function(obs) {
this.log(obs);
obs.onNext({ type: 'input',
name: 'howdy',
message:'howdy'
});
obs.onNext({ type: 'input',
name: 'okee',
message:'okee'
});
obs.onCompleted();
}.bind(this));
inquirer.prompt(prompts).process.subscribe(log, log, complete);
}

Resources