Skip to content

feat(component): add less support #115

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
wants to merge 1 commit into from
Closed
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 8 additions & 4 deletions addon/ng2/blueprints/component/index.js
Original file line number Diff line number Diff line change
@@ -1,7 +1,8 @@
var stringUtils = require('ember-cli/lib/utilities/string');
var fs = require('fs');

module.exports = {
description: ''
description: 'Generates a component.',

//locals: function(options) {
// // Return custom template variables here.
Expand All @@ -10,7 +11,10 @@ module.exports = {
// };
//}

// afterInstall: function(options) {
// // Perform extra work here.
// }
afterInstall: function(options) {
switch (options.style) {
case 'less':
fs.renameSync(options.project.root + '/src/app/components/' + options.args[1] + '/' + options.args[1] + '.css', options.project.root + '/src/app/components/' + options.args[1] + '/' + options.args[1] + '.less');
}
}
};
23 changes: 23 additions & 0 deletions addon/ng2/commands/generate.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
'use strict';

var GenerateCommand = require('ember-cli/lib/commands/generate');

module.exports = GenerateCommand.extend({
availableOptions: [
{ name: 'dry-run', type: Boolean, default: false, aliases: ['d'] },
{ name: 'verbose', type: Boolean, default: false, aliases: ['v'] },
{ name: 'blueprint', type: String, default: 'ng2', aliases: ['b'] },
{ name: 'name', type: String, default: '', aliases: ['n'] },
{ name: 'style', type: String, default: 'css', aliases: ['s'] }
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

we need a test for this

],

_defaultBlueprint: function() {
if (this.project.isEmberCLIAddon()) {
return 'addon';
} else {
return 'ng2';
}
},
});

module.exports.overrideCore = true;
3 changes: 2 additions & 1 deletion addon/ng2/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,8 @@ module.exports = {
includedCommands: function() {
return {
'new': require('./commands/new'),
'init': require('./commands/init')
'init': require('./commands/init'),
'generate': require('./commands/generate')
};
}
};
11 changes: 9 additions & 2 deletions lib/broccoli/angular2-app.js
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
var Concat = require('broccoli-concat');
var configReplace = require('./broccoli-config-replace');
var compileWithTypescript = require('./broccoli-typescript').default;
var compileLess = require('broccoli-less');
var fs = require('fs');
var Funnel = require('broccoli-funnel');
var mergeTrees = require('broccoli-merge-trees');
Expand Down Expand Up @@ -45,7 +46,7 @@ Angular2App.prototype.toTree = function () {
'systemjs/dist/system.src.js'
],
destDir: 'vendor'
})
});

// var appJs = new Concat(mergeTrees([tsTree, jsTree]), {
// inputFiles: [
Expand All @@ -55,7 +56,13 @@ Angular2App.prototype.toTree = function () {
// outputFile: '/app.js'
// });

return mergeTrees([assetTree, tsSrcTree, tsTree, jsTree, this.index(), vendorJsTree], { overwrite: true });
var lessTree = new Funnel(sourceTree, {
include: ['**/*.less'],
allowEmpty: true
});
var lessSrcTree = compileLess(lessTree);

return mergeTrees([assetTree, tsSrcTree, tsTree, jsTree, this.index(), lessSrcTree, vendorJsTree], { overwrite: true });
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm not sure how the Funnel works, but I think that this should also be based on options.style, so if the user decides to go with Sass for example it wouldn't break.

Instead of lessSrcTree I'd call it stylesSrcTree.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The tricky thing about here is that we would need to pull the config from somewhere - the only approaches I see right now is to check for the existence of a less file in a component directory (a hack), or save the config somewhere when generating the component. Saving the config somewhere might be ok, since we should be able to safely assume that a user is going to be only using one CSS preprocessor ever, but then comes the question of how should we be saving it. Should we save that information right in the generated package.json?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think that the package.json is good enough for prototyping.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Alright, will try to fix that up sometime this week.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@wesleycho here is an example of current usage of package.json for storing angular-cli config: #134 (comment)

};

/**
Expand Down
1 change: 1 addition & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,7 @@
"broccoli": "^0.16.3",
"broccoli-concat": "0.0.13",
"broccoli-funnel": "^1.0.0",
"broccoli-less": "^2.1.0",
"broccoli-merge-trees": "^1.0.0",
"broccoli-writer": "^0.1.1",
"chalk": "^1.1.0",
Expand Down
108 changes: 108 additions & 0 deletions tests/acceptance/generate.spec.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,108 @@
'use strict';

var ng = require('../helpers/ng');
var expect = require('chai').expect;
var Blueprint = require('ember-cli/lib/models/blueprint');
var path = require('path');
var tmp = require('../helpers/tmp');
var root = process.cwd();
var conf = require('ember-cli/tests/helpers/conf');
var forEach = require('lodash/collection/forEach');
var existsSync = require('exists-sync');

var defaultIgnoredFiles = Blueprint.ignoredFiles;

describe('Acceptance: ng generate', function() {
this.timeout(20000);

before(function() {
conf.setup();
});

after(function() {
conf.restore();
});

beforeEach(function() {
Blueprint.ignoredFiles = defaultIgnoredFiles;

return tmp.setup('./tmp')
.then(function() {
process.chdir('./tmp');
}).then(function() {
return ng([
'new',
'foo',
'--skip-npm',
'--skip-bower',
'--skip-git'
]);
});
});

afterEach(function() {
return tmp.teardown('./tmp');
});

function confirmBlueprinted(files) {
forEach(files, function(file) {
expect(existsSync(file));
});
}

function confirmBlueprintedComponent(settings) {
settings = settings || {
style: 'css'
};

var componentPath = path.join(process.cwd(), 'src/app/components/bar');

var files = [
path.join(componentPath, 'bar.' + settings.style),
path.join(componentPath, 'bar.html'),
path.join(componentPath, 'bar.ts'),
path.join(componentPath, 'bar.spec.ts')
];

confirmBlueprinted(files);
}

function confirmBlueprintedService() {
process.chdir('./src/app/services/bar');

var servicePath = path.join(process.cwd(), 'src/app/services/bar');

var files = [
path.join(servicePath, 'bar.ts'),
path.join(servicePath, 'bar.spec.ts')
];

confirmBlueprinted(files);
}

it('component', function() {
return ng([
'generate',
'component',
'bar'
]).then(confirmBlueprintedComponent());
});

it('component with less', function() {
return ng([
'generate',
'component',
'bar',
'--style=less'
]).then(confirmBlueprintedComponent({style: 'less'}));
});

it('services', function() {
return ng([
'generate',
'service',
'bar'
]).then(confirmBlueprintedService);
});

});