Plop.js Template files adding a root directory in the destination folder - plop

I'm running into an issue unsure if it's me.
I'm using Plop.js within a project to quickly code generate boilerplate (bp) for new packages.
I've got 4 different template folders that plop maps from when a user enters the generate command.
User is prompted with a list of package types to create:
choices: ['react', 'node', 'browser', 'isomorphic'],
Based on the users response to the prompts, plop chooses the folder to pull the template files from.
Template folder structure looks like this:
plop-template/
- react/
- node/
- browser/
- isomorphic/
The templateFiles: property is correctly identifying and creating the bp based on the user response.
templateFiles: 'plop_templates/{{project-type}}/**/*/',
the issue i'm running into is the project-type is being added to the file destination path
So what i would like to occur is the
/project-name/ ... boiler plate created
But what is happening is:
/project-name/project-type/ ... boiler plate created
So, is it possible to remove the /project-type/ from the destination path?
Plopfile.js (v. "plop": "3.1.1"):
const findEtensionFile = require("../lib/file-extention-locator");
module.exports = function (plop) {
plop.getDestBasePath;
plop.setGenerator("component", {
prompts: [
{
type: "input",
name: "project-name",
message: "What's the name your project? ",
},
{
type: "list",
name: "project-type",
message: "Project Type:",
choices: ["react", "node", "browser", "isomorphic"],
},
],
actions: function (data) {
var actions = [];
actions.push({
type: "addMany",
globOptions: { dot: true },
destination: "../../../{{project-name}}",
base: "/",
templateFiles: "plop_templates/{{project-type}}/**/*/",
});
return actions;
},
});
};
What I've tried:
filter: property ... This can be used to modify the file contents, seems like that only affects the
base: property (string).. documentation seems to indicate this is the route where I can filter out but can't find a value that doesn't break BP creation.
Any help would be greatly appreciated.

Discovered the error was mine.
Seems like the base: value must match the entire value for templateFiles.
In this case:
base: 'plop_templates/{{project-type}}',
templateFiles: "plop_templates/{{project-type}}/**/*/",
Even though the /plop_templates/ folder wasn't being created in the path.

Related

SourceMap read failed

I have a WinJS-UWP-Application, where I use TypeScript 2.5. I just upgraded from VS2015 to VS2017. When I want to debug my WinJS-UWP-Application the Breakpoints inside my .ts-Files are not noted, because the SourceMap isnt read properly. I didn't change any configuration of the project.
In the output I get this message:
SourceMap
ms-appx://8d7814f6-7286-4475-8ed8-be1c489c2253/js/main.js.map read
failed: The URI prefix is not recognized..
My CompilerOptions are:
"compilerOptions": {
"target": "es5",
"removeComments": true,
"preserveConstEnums": true,
"sourceMap": true
}
The min and target version of the application are: 10.0.14393.0
Do I need to setup anything else in VS2017?
EDIT:
Steps to reproduce:
Create a new UWP WinJS-App in VS 17 with Min and Target Version: 10.0.14393.0
Remove the js\main.js
Add a main.ts file in the js folder
Create a tslib folder and insert the winjs.d.ts inside [For example from DefinetlyTyped]
Add the following code inside the main.ts:
/// <reference path="../tslib/winjs.d.ts"/>
WinJS.UI.processAll().then(() => {
let div: HTMLDivElement = document.createElement("div");
let label: HTMLLabelElement = document.createElement("label");
label.textContent = "Hello from the TypeScript-Side";
div.appendChild(label);
document.body.appendChild(div);
});
Add a new tsconfig.json from the VS17 template.
Start the app with the AnyCPU Configuration
Expected result:
Inside the App you see the text:
Content goes here!
Hello from the TypeScript-Side
In the ouput you see these two messages:
'WWAHost.exe' (Script): Loaded 'Script Code (MSAppHost/3.0)'.
SourceMap ms-appx://32fb2864-03cf-4387-8a05-6c65a66c5a48/js/main.js.map read failed: The URI prefix is not recognized..
EDIT 2:
The content of the main.js.map:
{
"version": 3,
"file": "main.js",
"sourceRoot": "",
"sources": [ "main.ts" ],
"names": [],
"mappings": "AAAA,2CAA2C;AAE3C,KAAK,CAAC,EAAE,CAAC,UAAU,EAAE,CAAC,IAAI,CAAC;IACvB,IAAI,GAAG,GAAmB,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;IACxD,IAAI,KAAK,GAAqB,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;IAC9D,KAAK,CAAC,WAAW,GAAG,gCAAgC,CAAC;IACrD,GAAG,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;IACvB,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,CAAC;AACnC,CAAC,CAAC,CAAC"
}
EDIT3:
TypescriptBuild-Settings:
TypeScript version: 2.5
Compile on save: Yes
Allow implicit 'any' types: Yes
Keep comments in JavaScript output: Yes
Generate declaration files: No
Generate source maps: Yes
Specify root directory of source maps: $(MSBuildProjectDirectory)
Specify root directory of TypeScript files: $(MSBuildProjectDirectory)
Emit on error: No
If I delete the tsconfig.json, the source maps are created correctly. But i need the tsconfig.json for a few other options, so deleting it is not an option!
I found a workaround which fixes the problem for the moment. I don't know why this works, but if you add the line:
"mapRoot": "js/"
it works correctly.
This only works for the default directory setup!

How to load RubyMotion table view cell data from file

I'm getting started with RubyMotion and ProMotion. I'm building a table view and I would like to move the data out into an external file to make it easier to manage. Here's what I have so far:
class MasterScreen < PM::TableScreen
title 'States'
def table_data
[{
title: "Northwest States",
cells: [
{ title: "Oregon", action: :view_details, arguments: { state: #oregon }},
{ title: "Washington", action: :view_details, arguments: { state: #washington }}
]
}]
end
def view_details
open DetailScreen.new(nav_bar: true)
end
end
I'd like to move the names of the states (basically the cell titles) into something like a YAML or JSON file that I can load and iterate over. How can I achieve something like this?
Update: I managed to figure out how to load text from a file.
First I added bubble-wrap to my Gemfile and ran bundle install. BubbleWrap provides the helper method App.resources_path.
In my_app/resources/states.txt I have a list of states, separated by new lines:
Oregon
Washington
Foobar
In my Table View Controller, I read the file and split the file into an array of lines.
class MasterScreen < PM::TableScreen
title 'States'
def on_load
data = File.read("#{App.resources_path}/states.txt")
#states = data.lines
end
def table_data
[{
title: "Northwest States",
cells: #states.map do |state|
{
title: state,
action: :view_details,
arguments: { state: state }
}
end
}]
end
def view_details(arguments)
open DetailScreen.new(nav_bar: true, title: arguments[:state])
end
end
This works, but it's only part of what I was trying to do. I would still like to use a structure like YAML to represent titles and subtitles. What would be the RubyMotion way to do this sort of thing?
Figured out how to do it. I came across a RubyMotion gem called motion-yaml. Simply add it to your Gemfile, add your YAML file to your resources directory, and use it like you would YAML in Ruby.
data = YAML.load(File.read("#{App.resources_path}/my_yaml_file.yml"))
Note: You will need to add bubble-wrap to your Gemfile in order to have the App.resources_path. I'm not sure if there is an easy way to do it without bubble-wrap.

Building a package.json and Gruntfile using Yeoman

New to Yeoman as of today. I am building a generator that will create a new package.json with data that will help build the applications Gruntfile. For (probably) unnecessary reasons, I separated out the Yeoman pieces into 2 files. Below is an excerpt from index.js...
// index.js
myGenerator.prototype.packagejson = function packagejson() {
var projectName = this.projectName;
var pkg = {
"name": projectName,
"version": "0.0.0",
"dependencies": {},
"srcDir": process.cwd(),
};
this.write('package.json',JSON.stringify(pkg));
};
myGenerator.prototype.gruntfile = function gruntfile(){
this.template('Gruntfile.js','Gruntfile.js');
}
This creates a package.json file and writes the JSON string to the file. projectName is a prompt asked when the template is loaded in the command line. Process.cwd() refers to the current file directory.
Then it creates a Gruntfile from a template. Except below:
//Grunt - Yeoman template
module.exports = function(grunt){
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
sync:{
dev:{
files:[
{src:['./index.html','./app.css','./js/*.js'],dest:'m:/dev/project/'},
{cwd:"<% pkg.srcDir %>", src:['**/*.js','**/*.css','**/*.html'], dest:'m:/dev/project/'}
]
}
}
})
};
This, in my mind should...
Create a path that was generated by index.js (via process.cwd()) that was printed to the package.json file. This is read into the gruntfile via grunt.file.readJSON.
Then the path reference (string) should be accessible through the object property: pkg.srcDir.
However, I only get back an empty string.
// Gruntfile.js for new application
cwd:"", src:['**/*.js','**/*.css','**/*.html'], dest:'m:/dev/project/'
Any obvious reason why I am not able to read in the package.json info and populate my gruntfile?
Thanks
Add double percent in the opening template tag
<%% pkg.srcDir %>

How to Populate koGrid Groups Array

I have a koGrid configured as follows:
var myItemsGrid = {
data: myItems,
columnDefs: [
{ field: 'item.title', displayName: 'Title', cellTemplate: $("#cdfUrlCellTemplate").html() },
{ field: 'item.dueTimeUtc', displayName: 'Due', cellFormatter: formatDate, sortFn: sortDates },
{ field: 'id', displayName: 'Edit', cellTemplate: $("#editCellTemplate").html() }
],
showGroupPanel: true,
groups: ['item.title'],
showFilter: false,
canSelectRows: false
};
My problem is that the groups array, which I have tried to populate using the field name of one of the fields in my grid, causes the following error:
TypeError: Cannot read property 'isAggCol' of undefined
How should I be populating the groups array so that I can set up initial grouping for my grid?
I had the same problem and took a different approach by sending an event to the grid control to group by the first heading. Something like this:
jQuery("#symbolPickerView").find(".kgGroupIcon").first().click();
This works until there is some sort of patch generally available.
I ended up having to patch the koGrid script to get the initial grouping of columns to work.
If anyone else has the problem I'm happy to provide the patched script. I will look at making a pull request to get the fix into the koGrid repository after putting it through its paces a bit more.

Test of an unobtainable value in JSSpec

I am learning JSSpec. Here's my problem.
In this code :
describe("Buttons' events", {
'when I click on a button with an id of #b1...': function() {
click_me(document.getElementById("b1"));
},
'...then URL should have a parameter b with the value someURL1 and a parameter ui with the value 527bd5b5d689e2c32ae974c6229ff785), because #b1\'s class is .testme': function() {
value_of(observer.URLforTests_lg).should_match(/http:\/\/swkyb\.com:9000/);
value_of(observer.URLforTests_lg).should_match(/ui=527bd5b5d689e2c32ae974c6229ff785/);
value_of(observer.URLforTests_lg).should_match(/b=someURL1/);
value_of(observer.URLforTests_lg).should_match(/s=tester/);
value_of(observer.URLforTests_lg).should_match(/e=button/);
value_of(observer.URLforTests_lg).should_match(/api=testv/);
}
I don't understand where the value 527bd5b5d689e2c32ae974c6229ff785 in observer.URLforTests_lg).should_match(/ui=527bd5b5d689e2c32ae974c6229ff785/); comes from.
I have looked for this String on my project but I don't find where it is defined (if so).
Resolved: 527bd5b5d689e2c32ae974c6229ff785 is just the md5 code for john, which is in the project configuration files.