From 042fdbd98f61aa5e18b70a7cc2ec012d26696e63 Mon Sep 17 00:00:00 2001 From: Anthony Truskinger Date: Mon, 8 Jun 2015 05:03:20 +1000 Subject: [PATCH] Finished es6 integration into build - babel source maps appear to work (w00t!) - changed process so babel compile happens before copy and templating - changed process so that babel tranpiles unit tests as well! :-D - fixed problems with unit tests (mostly because of bad injectors with lazy DI syntax) - added babel polyfill so things like WeakSets are supported in old browsers - tested some es6 features in home.js - added a plugin that allowed karma to report errors in source maps. --- .gitignore | 1 + Gruntfile.js | 62 +++++++++---------- buildConfig/build.config.js | 2 + buildConfig/karma-unit.tpl.js | 13 ++-- package.json | 6 +- src/app/home/home.js | 33 ++++++++++ src/app/home/home.tpl.html | 2 +- .../directives/baw-toggle/bawToggle.js | 5 +- .../services/predictiveCache.spec.js | 15 ++--- src/components/services/queryBuilder.spec.js | 2 +- 10 files changed, 91 insertions(+), 50 deletions(-) diff --git a/.gitignore b/.gitignore index 28ddaf99..637e4cf5 100644 --- a/.gitignore +++ b/.gitignore @@ -66,6 +66,7 @@ npm-debug.log node_modules/ build/ bin/ +es6/ vendor/ src/assets/temp .sass-cache \ No newline at end of file diff --git a/Gruntfile.js b/Gruntfile.js index d89398c8..caaade85 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -22,7 +22,6 @@ module.exports = function (grunt) { grunt.loadNpmTasks("grunt-bump"); grunt.loadNpmTasks("grunt-sass"); grunt.loadNpmTasks("grunt-karma"); - grunt.loadNpmTasks("grunt-ngmin"); grunt.loadNpmTasks("grunt-html2js"); grunt.loadNpmTasks("grunt-contrib-connect"); grunt.loadNpmTasks("grunt-babel"); @@ -168,7 +167,8 @@ module.exports = function (grunt) { others: { src: [ '<%= build_dir %>', - '<%= compile_dir %>' + '<%= compile_dir %>', + '<%= es6_dir %>' ] } }, @@ -234,7 +234,7 @@ module.exports = function (grunt) { // for now since the angular templates use tpl as well, // we'll cheat and just use a direct file reference var bc = grunt.config('build_configs'); - if (srcPath === bc.configFile) { + if (srcPath.indexOf(bc.configFile) >= 0) { // then process as template! return grunt.template.process(content, {data: bc}); @@ -245,9 +245,10 @@ module.exports = function (grunt) { }, files: [ { - src: ['<%= app_files.js %>'], - dest: '<%= build_dir %>/', - cwd: '.', + src: ['<%= app_files.js %>', "**/!(*.spec).js.map"], + // copy transpiled es6 JS into dest dir + dest: "<%= build_dir %>/", + cwd: "<%= es6_dir %>", expand: true, nonull: true } @@ -280,6 +281,24 @@ module.exports = function (grunt) { } }, + babel: { + options: { + sourceMap: true, + optional: ["es7.comprehensions"] + }, + transpile_appjs: { + files: [ + { + src: [ "<%= app_files.js %>", "<%= app_files.jsunit %>"], + dest: "<%= es6_dir %>", + cwd: ".", + expand: true, + nonull: true + } + ] + } + }, + /** * `grunt concat` concatenates multiple source files into a single file. */ @@ -324,23 +343,6 @@ module.exports = function (grunt) { } }, - /** - * `ng-min` annotates the sources before minifying. That is, it allows us - * to code without the array syntax. - */ - ngmin: { - compile: { - files: [ - { - src: ['<%= app_files.js %>'], - cwd: '<%= build_dir %>', - dest: '<%= build_dir %>', - expand: true - } - ] - } - }, - /** * Minify the sources! */ @@ -413,6 +415,7 @@ module.exports = function (grunt) { sub: true, boss: true, eqnull: true, + esnext: true, /* HACK: At some point this should be turned off!" */ force: true, @@ -492,7 +495,6 @@ module.exports = function (grunt) { '<%= html2js.common.dest %>', '<%= html2js.app.dest %>', '<%= vendor_files.css %>', - /*'<%= recess.build.dest %>',*/ '<%= build_dir %>/assets/styles/*' ] }, @@ -507,7 +509,6 @@ module.exports = function (grunt) { src: [ '<%= concat.compile_js.dest %>', '<%= vendor_files.css %>', - /*'<%= recess.compile.dest %>',*/ '<%= build_dir %>/assets/styles/*.css' ] } @@ -629,9 +630,8 @@ module.exports = function (grunt) { files: [ '<%= app_files.js %>' ], - // karma:unit:run is disabled because it breaks watch by stopping it - // see https://github.com/karma-runner/grunt-karma/issues/30 - tasks: ['jshint:src', 'karma:unit:run', 'copy:build_appjs'] + // recent modification: files are copied before unit tests are run! + tasks: ['jshint:src', 'babel:transpile_appjs', 'copy:build_appjs', 'karma:unit:run' ] }, /** @@ -680,7 +680,7 @@ module.exports = function (grunt) { files: [ '<%= app_files.jsunit %>' ], - tasks: ['jshint:test', 'karma:unit:run'], + tasks: ['babel:transpile_appjs', 'jshint:test', 'karma:unit:run'], options: { livereload: false } @@ -714,7 +714,7 @@ module.exports = function (grunt) { grunt.registerTask('build', [ 'clean', 'html2js', 'jshint', 'sass:build', 'concat:build_css', 'copy:build_app_assets', 'copy:build_vendor_assets', - 'copy:build_appjs', 'copy:build_vendorjs', 'index:build', 'karmaconfig', + 'babel:transpile_appjs', 'copy:build_appjs', 'copy:build_vendorjs', 'index:build', 'karmaconfig', 'karma:continuous' ]); @@ -723,7 +723,7 @@ module.exports = function (grunt) { * minifying your code. */ grunt.registerTask('compile', [ - 'sass:compile', 'concat:build_css', 'copy:compile_assets', 'ngmin', 'concat:compile_js', 'uglify', + 'sass:compile', 'concat:build_css', 'copy:compile_assets', 'concat:compile_js', 'uglify', 'index:compile' ]); diff --git a/buildConfig/build.config.js b/buildConfig/build.config.js index f719d7ff..948ac6ac 100644 --- a/buildConfig/build.config.js +++ b/buildConfig/build.config.js @@ -8,6 +8,7 @@ module.exports = { * development and the `compile_dir` folder is where our app resides once it's * completely built. */ + es6_dir: "es6", build_dir: 'build', compile_dir: 'bin', @@ -77,6 +78,7 @@ module.exports = { 'vendor/round-date/roundDate.js' ], js: [ + "node_modules/babel/node_modules/babel-core/browser-polyfill.js", 'vendor/jquery/dist/jquery.js', 'vendor/angular/angular.js', diff --git a/buildConfig/karma-unit.tpl.js b/buildConfig/karma-unit.tpl.js index dd73f290..95378ebd 100644 --- a/buildConfig/karma-unit.tpl.js +++ b/buildConfig/karma-unit.tpl.js @@ -22,8 +22,8 @@ module.exports = function (config) { "vendor/objectdiff/objectDiff.js", "vendor/jasmine-expect/dist/jasmine-matchers.js" ].concat(JSON.parse(fileJson).concat([ - 'src/**/*.js', - 'src/**/*.spec.js' + 'es6/**/*.js', + 'es6/**/*.spec.js' ])); // HACK!: use vendor files out of the build directory since they undergo a transform on build @@ -33,7 +33,7 @@ module.exports = function (config) { }); configObject.exclude = [ - 'src/assets/**/*.js' + 'es6/assets/**/*.js' ]; configObject.frameworks = [ 'jasmine' ]; @@ -42,12 +42,13 @@ module.exports = function (config) { 'karma-firefox-launcher', /*'karma-chrome-launcher',*/ require('../node_modules/karma-chrome-launcher'), - 'karma-phantomjs-launcher' + 'karma-phantomjs-launcher', /*require('../node_modules/karma-phantomjs-launcher'),*/ + "karma-sourcemap-loader" ]; configObject.preprocessors = { - + '**/*.js': ['sourcemap'] }; /** @@ -66,7 +67,7 @@ module.exports = function (config) { configObject.reporters.push('coverage'); configObject.plugins.push('karma-coverage'); - configObject.preprocessors['src/**/!(*.spec)+(.js)'] = 'coverage'; + configObject.preprocessors['es6/**/!(*.spec)+(.js)'] = 'coverage'; } /** diff --git a/package.json b/package.json index 5576acc1..9c2503a3 100644 --- a/package.json +++ b/package.json @@ -29,16 +29,18 @@ "grunt-conventional-changelog": "^1.2", "grunt-html2js": "~0.3.2", "grunt-karma": "^0.10", - "grunt-ngmin": "0.0.3", "grunt-sass": "^0.18.1", "karma-chrome-launcher": "~0.1.1", "karma-coverage": "^0.3", "karma-firefox-launcher": "~0.1.3", "karma-jasmine": "^0.3.x", "karma-phantomjs-launcher": "~0.1.1", + "karma-sourcemap-loader": "^0.3.5", "lodash": "^3.7", "slash": "^1.0.0" }, "private": true, - "dependencies": {} + "dependencies": { + "babel": "^5.5.4" + } } diff --git a/src/app/home/home.js b/src/app/home/home.js index 67d19dec..ef084dbc 100644 --- a/src/app/home/home.js +++ b/src/app/home/home.js @@ -3,6 +3,39 @@ angular.module('bawApp.home', []) .controller('HomeCtrl', ['$scope', '$resource', '$routeParams', 'Project', function HomeCtrl($scope, $resource, $routeParams, Project) { +/* // testing some es6 features + + var numbers = (new Array(100)).map((x,i) => i); + console.log(numbers); + + var evenNumbers = numbers.filter(x => !(x & 1) ); + console.log("even:", evenNumbers); + + var newObj = { + numbers, + toString() { + "use strict"; + console.warn(this.numbers); + return numbers; + }, + [ "sum_" + evenNumbers.reduce( (a, x) => a + x, 0)]: " test!" + }; + console.info(newObj); + + var [a, b, c] = [1, 2, 3]; + var {numbers: ns} = newObj; + console.log(a, b, c, ns); + + var s = new Set(); + evenNumbers.forEach( x => s.add(x)); + numbers.forEach( x => s.add(x)); + console.log(s.size); + + var w = new WeakSet(); + w.add(newObj); + console.warn(w);*/ + + //// TODO: disabled - authentication required for home page - BAD! //// TODO: properly package this mess ... way too much in this controller // // to get projects to display diff --git a/src/app/home/home.tpl.html b/src/app/home/home.tpl.html index f7b958a1..cf6b528f 100644 --- a/src/app/home/home.tpl.html +++ b/src/app/home/home.tpl.html @@ -1,4 +1,4 @@ -
+

Welcome to a place where you can listen, learn, share your discoveries and help out the environment! The Bioacoustic Workbench is a repository for audio recordings of the environment and tools that aid in diff --git a/src/components/directives/baw-toggle/bawToggle.js b/src/components/directives/baw-toggle/bawToggle.js index 3113a962..1b6dbcd5 100644 --- a/src/components/directives/baw-toggle/bawToggle.js +++ b/src/components/directives/baw-toggle/bawToggle.js @@ -79,7 +79,8 @@ angular.module("bawApp.directives.toggleSwitch", ["ng"]) element.classList.add("toggle-switch-animate"); }, 0); }, - controller: function($scope, $element, $attrs) { + controller: ["$scope", "$element", "$attrs", + function($scope, $element, $attrs) { console.debug("controller function", $scope.$id); @@ -91,6 +92,6 @@ angular.module("bawApp.directives.toggleSwitch", ["ng"]) $scope.model = !$scope.model; } }; - } + }] }; }]); \ No newline at end of file diff --git a/src/components/services/predictiveCache.spec.js b/src/components/services/predictiveCache.spec.js index 5264d4df..11727902 100644 --- a/src/components/services/predictiveCache.spec.js +++ b/src/components/services/predictiveCache.spec.js @@ -50,10 +50,10 @@ describe("The predictiveCache service", function () { describe("The predictive cache http interceptor", function () { var predictiveCacheInterceptor, $httpBackend; - beforeEach(inject(function (_predictiveCacheInterceptor_, $injector) { + beforeEach(inject(["predictiveCacheInterceptor", "$injector", function (_predictiveCacheInterceptor_, $injector) { predictiveCacheInterceptor = _predictiveCacheInterceptor_; $httpBackend = $injector.get("$httpBackend"); - })); + }])); it("ensure the interceptor implements the expected methods", function () { expect(predictiveCacheInterceptor).toImplement({ @@ -129,7 +129,8 @@ describe("The predictiveCache service", function () { $http, exampleUrl = "http://www.google.com?page=1&size=10", httpEvents = [], - predictiveCache; + predictiveCache, + $httpBackend; beforeEach(function () { module(function ($provide) { @@ -149,7 +150,7 @@ describe("The predictiveCache service", function () { $httpProvider.interceptors.push("unitTestInterceptor"); }); - inject(function ($injector) { + inject(["$injector", function ($injector) { $httpBackend = $injector.get("$httpBackend"); // create .when for requests common to all tests @@ -160,7 +161,7 @@ describe("The predictiveCache service", function () { // set up the cache service (register everything) predictiveCache = $injector.get("predictiveCache"); configuredProfile = predictiveCache(testProfile); - }); + }]); httpEvents = []; }); @@ -403,9 +404,9 @@ describe("The predictiveCache service", function () { describe("Validating the input profile", function () { var predictiveCache; - beforeEach(inject(function (_predictiveCache_) { + beforeEach(inject(["predictiveCache", function (_predictiveCache_) { predictiveCache = _predictiveCache_; - })); + }])); it("requires an object to function", function () { diff --git a/src/components/services/queryBuilder.spec.js b/src/components/services/queryBuilder.spec.js index 176eb432..8620ab3b 100644 --- a/src/components/services/queryBuilder.spec.js +++ b/src/components/services/queryBuilder.spec.js @@ -362,7 +362,7 @@ describe("The QueryBuilder", function () { }; // this essentially represents paging with the default options - actual = q.page.disable().page({}); + var actual = q.page.disable().page({}); expect(actual.toJSON(spaces)).toBe(j(expected)); });