Building a package.json and Gruntfile using Yeoman - templates

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 %>

Related

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

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.

Jest globalSetup option not working

I'm trying to make a function called loadFixtures available to all Jest tests.
I have the following line within the jest config object inside package.json:
"globalSetup": "<rootDir>/src/test/js/config/setup-globals.js"
setup-globals.js contains:
module.exports = function() {
function loadFixtures(filename) {
console.info('loadFixtures is working');
}
}
Within my tests I have, for example:
beforeEach(() => {
loadFixtures('tooltip-fixture.html');
});
However when I run Jest I get the following for each test:
ReferenceError: loadFixtures is not defined
I verified that the setup-globals.js file is definitely being found and loaded in by Jest before the tests execute.
Can anyone assist in identifying where I've gone wrong here? I've spent pretty much an entire day trying to debug without luck.
You should be using setupFiles and not globalSetup.
// jest config
"setupFiles": [
"<rootDir>/src/test/js/config/setup-globals.js"
]
then src/test/js/config/setup-globals.js:
global.loadFixtures(filename) {
console.info('loadFixtures is working');
}
references: https://medium.com/#justintulk/how-to-mock-an-external-library-in-jest-140ac7b210c2
If you bootstrapped your application using npx create-react-app (CRA), you do not need to add the setupFiles key under your jest key in the package.json file (CRA prevents overriding that key).
what you simply need to do is to add the file setupTests.js in the root of your SRC folder, and populate it with the snippet below:
import { configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
configure({
adapter: new Adapter(),
});
remember you must have earlier installed the right versions of enzyme and enzyme-adapter-react
CRA has been wired to automatically load the setupTests.js file in the src folder if it exists. Hence after adding these, you can then go over to your test and do import {shallow} from enzyme without triggering an error.
if you are not using Create-react-app, all you need to do, in addition to adding the file above to your src folder is to add the key setupFiles into the jest key in your package.json. it should look like this:
"jest": {
"setupFiles": ['<rootDir>/src/setupTests.js'],
}
and you are good to go.
Cheers!
You're defining a function in a different scope. How about you create a separate module and import it directly in your test files. Or if you really want to define it in the global scope, try using the following code in your setup-globals.js file.
module.exports = function() {
global.loadFixtures = function(filename) {
console.info('loadFixtures is working');
}
}

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!

Babel ignore equivalent in ember engines?

In a traditional Ember app, I have something along the lines of this in my ember-cli-build.js:
//ember-cli-build.js
module.exports = function(defaults) {
var app = new EmberApp(defaults, {
babel: {
includePolyfill: true,
ignore: ['my-ember-ui/models/myFile.js'] // <-- question is here
},
Is there an equivalent to this when using an Ember Engine (or addon)? I couldn't find anything within ember-cli-babel or ember-engines.
I understand that ember-cli-build.js is just for the dummy app when using an engine, so I wouldn't make the change there. I attempted similar to above in the index.js file, but did not have any luck. The file was not ignored by babel. I need a way to ignore a particular file. Thanks!
Well, adding new rules to Cli.build.js is ok depends on what you want to do. However, I may have another solution that you can give it a try.
Babel will look for a .babelrc in the current directory of the file being transpiled. If one does not exist, it will travel up the directory tree until it finds either a .babelrc, or a package.json with a "babel": {} hash within.(.babelrc files are serializable JSON).
{
"plugins": ["transform-react-jsx"],
"ignore": [
"foo.js",
"bar/**/*.js"
]
}
or
{
"name": "my-package",
"version": "1.0.0",
"babel": {
// my babel config here
}
}
There should be another way which seems ok to use. the following does work:
babel src --out-dir build --ignore "**/*.test.js" // or simply add your file
For more information, you can read Babel document

CSS files not compiled into app.css as expected in Ember CLI?

Ember CLI docs says about /app/styles folder following:
Contains your stylesheets, whether SASS, LESS, Stylus, Compass, or plain CSS (though only one type is allowed, see Asset Compilation). These are all compiled into app.css.
I have the following files in /app/styles: app.css, one.css, two.css.
I would expect when starting server that in folder /dist/assets there will be file called appName.css and the content would be concatenation of all three files. Instead there is only content of app.css file. So I resolved this with #import in app.css:
#import url("one.css");
#import url("two.css");
That worked with 0.0.46, although not optimal because of more request were made to server. Now I updated to 0.1.1 and files one.css and two.css are no longer copied to /dist/assets folder.
But main question is: How can I achieve the concatenation of all css files in /app/styles folder? Am I missing something basic or are there some commands needed to be included into Brocfile.js?
Updated
Here is the snippet of Brocfile.js showing how we concatenate our CSS files:
var concat = require('broccoli-concat');
var cleanCSS = require('broccoli-clean-css');
var concatenatedCss = concat('app/styles', {
inputFiles: [
'reset.css',
'common.css',
'layout.css',
...
],
outputFile: '/assets/appName.css',
wrapInFunction: false
});
if (app.env === 'production') {
concatenatedCss = cleanCSS(concatenatedCss, {restructuring: false});
}
module.exports = app.toTree([concatenatedCss]);
We manually add files to inputFiles array.
It's known issue with 0.1.1 version: Static css compiler broken (0.1.x regression)
You probably should wait for update.
As for main question, try broccoli-concat.
Now there is this ember-cli-concat add-on available: https://github.com/sir-dunxalot/ember-cli-concat.
Looks super easy to use: https://github.com/sir-dunxalot/ember-cli-concat/wiki/Installation