Splitting Yeoman prompts into multiple separate groups - yeoman

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);
},
});

Related

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
}
});

Calling a javascript function, which is passed as a parameter from a javascript library

I'm currently trying to implement the fullcalendar javascript library into an angular 2 dart webapp.
I'm having problems porting this javascript code to dart though:
$('#fullCalendar').fullCalendar(
{
events: function(start, end, timezone, callback) {
var generated_events=[
{
title : 'test',
start : '2016-08-08'
}];
callback(generated_events);
},
allDaySlot: false
//More options can go here
});
I've gotten as far as being able to pass a dart function to the events parameter with this code:
context.callMethod(r'$',['#fullCalendar'])
.callMethod('fullCalendar',[new JsObject.jsify({
'events': (start, end, timezone, callback){
print("called!");
List<FullCalendarEvent> generated_events= [
new FullCalendarEvent(title: "test", start: "2016-08-08")
];
try{
callback(generated_events);
}catch(exception,stackTrace){
print("Caught exception!");
print(exception);
print(stackTrace);
}
},
'allDaySlot': false
//more options can go here
})]);
Where the FullCalendarEvent is a simple anoymous class structure:
#JS()
#anonymous
class FullCalendarEvent{
external String get title;
external set title(String v);
external String get start;
external set start(String v);
external factory FullCalendarEvent({
String title,
String start
});
}
However the callback(generated_events); throws this exception:
NoSuchMethodError: method not found: 'call$1' (callback.call$1 is not a function)
Edit:
With the help of Günter's replies I managed to fix the problem. Instead of doing callback(generated_events); I instead use callback.apply([generated_events]); Additionally instead of using
List<FullCalendarEvent> generated_events= [
new FullCalendarEvent(title: "test", start: "2016-08-08")
];
I instead use:
var generated_events = new JsObject.jsify([{'title':'test','start':'2016-08-08'}]);
My working code looks like this:
context.callMethod(r'$',['#fullCalendar'])
.callMethod('fullCalendar',[new JsObject.jsify({
'events': (start, end, timezone, callback){
print("called!");
var generated_events = new JsObject.jsify([{'title':'test','start':'2016-08-08'}]);
try{
callback.apply([generated_events]);
}catch(exception,stackTrace){
print("Caught exception!");
print(exception);
print(stackTrace);
}
},
'allDaySlot': false
//more options can go here
})]);
A JS function should be callable with
callback.apply([gen‌​erated_events])

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);
}

Trying to use jqplot with jquery mobile, marionette and requirejs

I am trying to use jqplot with Jquery mobile, marionette and requirejs. I have included all jqplot required CSS as well as script files in head tags, but when i am trying to plot a chart using below code
define([ 'jquery', 'plot' ],
function($) {
console.log("Success..Inside Offer Page Script.");
console.log("Plot..."+$.jqplot);
console.log("jquery..."+$);
$.jqplot.config.enablePlugins = true;
var s1 = [ 2, 6, 7, 10 ];
var ticks = [ 'a', 'b', 'c', 'd' ];
plot1 = $.jqplot('chart1', [ s1 ], {
seriesDefaults : {
renderer : $.jqplot.BarRenderer,
pointLabels : {
show : true
}
},
axes : {
xaxis : {
renderer : $.jqplot.CategoryAxisRenderer,
ticks : ticks
}
},
highlighter : {
show : false
}
});
});
it gives me errors like
Uncaught TypeError: undefined is not a function jqplot.barRenderer.js:41
(line 41: $.jqplot.BarRenderer.prototype = new $.jqplot.LineRenderer();)
Uncaught TypeError: Cannot call method 'push' of undefined jqplot.pointLabels.js:377
(line 377: $.jqplot.postSeriesInitHooks.push($.jqplot.PointLabels.init);)
The plot in my above code's define is
define([
'../scripts/ext_libs/jquery.jqplot'
],
function () {
var plot;
require([
'../scripts/ext_libs/jqplot.barRenderer',
'../scripts/ext_libs/jqplot.pointLabels',
'../scripts/ext_libs/jqplot.categoryAxisRenderer',
],
function () {
plot = $.jqplot;
});
return plot;
});
Can anyone please help me how can i solve these errors. Is their a problem using jqplot with requirejs?
Thanks in advance.
I'm not using marionette, but everything else works fine on my side. I have a jqplot module like this:
define([
'../js/plugins/jqplot/jquery.jqplot'
, 'css!../js/plugins/jqplot/jquery.jqplot'
],
function () {
var plot;
require([
'../js/plugins/jqplot/plugins/jqplot.barRenderer'
, '../js/plugins/jqplot/plugins/jqplot.logAxisRenderer'
, '../js/plugins/jqplot/plugins/jqplot.categoryAxisRenderer'
, '../js/plugins/jqplot/plugins/jqplot.canvasAxisTickRenderer'
, '../js/plugins/jqplot/plugins/jqplot.canvasTextRenderer'
, '../js/plugins/jqplot/plugins/jqplot.pointLabels'
, '../js/plugins/jqplot/plugins/jqplot.enhancedLegendRenderer'
],
function () {
plot = $.jqplot;
});
return plot;
}
);
which I'm requiring requiring normally from my page script like this:
require(["plot"], function (plot) {
// do something here with plot or... $.jqplot
};
You should be able to use $.plot right away, because once you require the module, jqplot will be available on $.
EDIT:
Try this:
define([ 'jquery', 'plot' ],
function($) {
console.log("Success..Inside Offer Page Script.");
console.log($);
console.log($.jqplot);
$.jqplot.config.enablePlugins = true;
var s1 = [ 2, 6, 7, 10 ];
var ticks = [ 'a', 'b', 'c', 'd' ];
plot1 = $.jqplot('chart1', [ s1 ], {
seriesDefaults : {
renderer : $.jqplot.BarRenderer,
pointLabels : {
show : true
}
},
axes : {
xaxis : {
renderer : $.jqplot.CategoryAxisRenderer,
ticks : ticks
}
},
highlighter : {
show : false
}
});
});
Bit late to the game but.... above doesn't work because require is async to return, so able to return jqplot without any jqplot plugins loaded! async safe solution below
Nasty problem, as it's a chain of three dependencies
jquery is required for jqplot which is required for jqplot plugins, I have a simpler solution based on the same lines as the one above
first do your requirejs "main.js" config like so
requirejs.config({
paths: {
"jquery": "path/to/jquery-1.10.2.min",
// WORKAROUND : jQuery plugins + shims
"jqplot.core": "path/to/jquery-jqplot-1.0.8.min",
"jqplot": "jquery-jqplot-module-with-plugins-1.0.8"
},
shim: {
"jqplot.core": {deps: ["jquery"]},
"jqplot": {deps: ["jqplot.core"]}
}
});
create a wrapper file module file called "jquery-jqplot-module-with-plugins-1.0.8.js", containing :
// wraps jquery jqplot plugin in define statement
define([
"jquery",
"path/to/jqplot.highlighter.min",
"path/to/jqplot.cursor.min",
"path/to/jqplot.dateAxisRenderer.min",
"path/to/jqplot.canvasTextRenderer.min",
"path/to/jqplot.canvasAxisLabelRenderer.min",
"path/to/jqplot.enhancedLegendRenderer.min",
"path/to/jqplot.pieRenderer.min",
"path/to/jqplot.donutRenderer.min",
], function($) {
var jqplot;
jqplot = $.jqplot;
return jqplot;
});
Then when ever you need jqplot with those plugins, simply call for "jqplot" which will load "jquery" then "jqplot.core" then all the jqplot modules, then finally return the jqplot object :)
require(["jquery", "jqplot"], function ($, $jqplot) {
console.log("Success..Inside Require JS");
console.log("Plot...", $.jqplot, $jqplot);
});
or
define(["jquery", "jqplot"], function ($, $jqplot) {
console.log("Success..Inside Define JS");
console.log("Plot...", $.jqplot, $jqplot);
});
tada! :)
ps jquery plugins are evil, no suggestion how to fix that situation, just a statement of fact
cheers
Ant
Looks like plot is returned before require(...) initializes it. I used to have common solution and my plot was partly populated. I ended up with setting all jqplot plugins in shim and changed my `plot.js' accordingly, as was suggested here.
requirejs.config
shim: {
'jqplot': ['jquery'],
'lib/jquery/jqplot/plugins/jqplot.canvasTextRenderer': ['jqplot'],
'lib/jquery/jqplot/plugins/jqplot.pieRenderer': ['jqplot'],
'lib/jquery/jqplot/plugins/jqplot.barRenderer': ['jqplot'],
'lib/jquery/jqplot/plugins/jqplot.categoryAxisRenderer': ['jqplot'],
'lib/jquery/jqplot/plugins/jqplot.canvasAxisLabelRenderer': ['jqplot'],
'lib/jquery/jqplot/plugins/jqplot.enhancedLegendRenderer': ['jqplot'],
'lib/jquery/jqplot/plugins/jqplot.highlighter': ['jqplot'],
}
plot.js
define(['lib/jquery/jqplot/plugins/jqplot.canvasTextRenderer',
'lib/jquery/jqplot/plugins/jqplot.pieRenderer',
'lib/jquery/jqplot/plugins/jqplot.barRenderer',
'lib/jquery/jqplot/plugins/jqplot.categoryAxisRenderer',
'lib/jquery/jqplot/plugins/jqplot.canvasAxisLabelRenderer',
'lib/jquery/jqplot/plugins/jqplot.enhancedLegendRenderer',
'lib/jquery/jqplot/plugins/jqplot.highlighter'],
function() {
return $.jqplot;
});

Extending Backbone to Support Rails Style Errors

I'm looking for an approach to reduce code duplication. Currently, whenever I save a Backbone model, I always provide the following code to deserialize the Rails stock 422 response into an errors property:
model.save({ name: "..." }, error: function(model, response) {
result = $.parseJSON(response.responseText)
model.errors = result.errors
...
});
Is it possible to configure Backbone so it deserializes errors before calling my callback? I tried overriding the sync method but at that point the callback is wrapped in a anonymous function (and no longer accessible).
You can use a ErrorHandler model that is extended by other models requiring error parsing. The ErrorHandler model should listen for the "error" event (triggered by the sync function when errors occur after a request).
var ErrorHandler = Backbone.Model.extend({
initialize: function() {
this.on("error", this.defaultErrorHandler, this);
},
defaultErrorHandler: function(model, error) {
result = $.parseJSON(response.responseText)
model.errors = result.errors
...
}
});
var OtherModel = ErrorHandler.extend({
...
});
var model = new OtherModel();
model.save({ name: "..." });

Resources