feat(webpack): merge es2016 and typescript skeletons

Author: niieani

README.md

@@ -11,9 +11,8 @@ This library is part of the [Aurelia](http://www.aurelia.io/) platform and provi
 
 Please see the individual readme file within each skeleton for an explanation of how to get setup.
 
-* **skeleton-es2016-webpack** - This project is configured to use the Babel transpiler so that you can write your application in ES 2016 code. It should work well with any standard text editor. This skeleton uses NPM for package management and Webpack for bundling.
+* **skeleton-webpack** - This project is configured to use either the Babel or the TypeScript transpiler so that you can write your application using either language. It should work well with any standard text editor. This skeleton uses NPM for package management and Webpack for bundling.
 * **skeleton-es2016** - This project is configured to use the Babel transpiler so that you can write your application in ES 2016 code. It should work well with any standard text editor. This skeleton uses JSPM for package management and SystemJS for loading and bundling.
-* **skeleton-typescript-webpack** - This project is configured to use the TypeScript transpiler so that you can write your application using TypeScript. It should work well with any standard text editor. This skeleton uses NPM for package management and Webpack for bundling.
 * **skeleton-typescript** - This project is configured to use the TypeScript transpiler so that you can write your application using TypeScript. It should work well with any standard text editor, however it has been specially configured to work well with VSCode and Atom, including full TypeScript intellisense for app, unit test and e2e test code. This skeleton uses JSPM for package management and SystemJS for loading and bundling.
 * **skeleton-typescript-aspnetcore** - This is an ASP.NET Core web project configured for building a .NET backend and an Aurelia front-end. It is configured for full TypeScript support, similar to the standard skeleton-typescript option.  This skeleton uses JSPM for package management and SystemJS for loading and bundling.
 * **skeleton-es2016-aspnetcore** - This is an ASP.NET Core web project pre-configured for building a .NET backend and an Aurelia front-end. It is configured for full ES 2016 support with Babel, similar to the standard skeleton-es2016 option. This skeleton uses JSPM for package management and SystemJS for loading and bundling.

skeleton-typescript-webpack/.eslintrc

@@ -0,0 +1,7 @@
+{
+  "extends": "./node_modules/aurelia-tools/.eslintrc.json",
+  "rules": {
+    "no-alert": 0,
+    "consistent-return": 0
+  }
+}

skeleton-typescript-webpack/README.md

@@ -1,4 +1,4 @@
-# aurelia-skeleton-typescript-webpack
+# aurelia-skeleton-webpack
 
 ## Getting started
 

skeleton-typescript-webpack/config/helpers.js

@@ -3,14 +3,18 @@
  * https://github.com/AngularClass/angular2-webpack-starter
  */
 
-var path = require('path');
+const path = require('path');
+const fs = require('fs');
 
 // Helper functions
-var ROOT = path.resolve(__dirname, '..');
+const ROOT = path.resolve(__dirname, '..');
+const jsonfile = require('jsonfile');
+const del = require('del');
 
-var jsonfile = require('jsonfile');
-
-console.log('root directory:', root() + '\n');
+const pkg = JSON.parse(fs.readFileSync(root('package.json')));
+const language = (pkg.language || 'javascript').toLowerCase();
+const readdir = require('recursive-readdir-sync');
+const moduleType = 'es2015'; // in case of weird problems try 'commonjs'; uncompressed bundle will be ~35KB larger
 
 function hasProcessFlag(flag) {
   return process.argv.join('').indexOf(flag) > -1;
@@ -21,15 +25,28 @@ function root(args) {
   return path.join.apply(path, [ROOT].concat(args));
 }
 
-const fileSystem = require('fs');
-const readdir = require('recursive-readdir-sync');
-const moduleType = 'es2015'; // or in case of problems try 'commonjs'; bundle will be ~35KB larger
+function selectLanguage(target) {
+  if (!!pkg.language) {
+    throw new Error('You have previously selected a language. If you know what you\'re doing, do the change manually in package.json.');
+  }
+  target = target.toLowerCase();
+  if (target != 'typescript' && target != 'javascript') {
+    throw new Error('Available languages are: typescript or javascript');
+  }
+  
+  fs.renameSync(root(target + '-src'), root('src'));
+  fs.renameSync(root(target + '-test'), root('test'));
+  const other = target === 'typescript' ? 'javascript' : 'typescript';
+  del.sync([root(other + '-src/**'), root(other + '-test/**')]);
+  pkg.language = target;
+  jsonfile.writeFileSync(root('package.json'), pkg, {spaces: 2});
+  return true;
+}
 
 function generateMeta(input) {
   var aureliaPackages = input.aurelia;
   var bootstrapPackages = input.bootstrap;
   var excludeFromAureliaBundle = input.excludeFromAureliaBundle;
-  var pkg = JSON.parse(fileSystem.readFileSync(root('package.json')));
   var packages = Object.keys(pkg.dependencies || {});
   packages = packages.concat(aureliaPackages.filter(item => packages.indexOf(item) < 0));
   var aliases = {};
@@ -38,7 +55,7 @@ function generateMeta(input) {
   packages.forEach(function (moduleId) {
     var vendorPath = path.resolve(root('node_modules'), moduleId);
     var vendorPkgPath = path.resolve(vendorPath, 'package.json');
-    var vendorPkg = JSON.parse(fileSystem.readFileSync(vendorPkgPath, 'utf8'));
+    var vendorPkg = JSON.parse(fs.readFileSync(vendorPkgPath, 'utf8'));
 
     if (vendorPkg._npmUser && vendorPkg._npmUser.name === 'aureliaeffect' || aureliaPackages.indexOf(moduleId) >= 0) {
       // enable for es2015 builds:
@@ -66,6 +83,9 @@ function generateMeta(input) {
   return { aliases, vendorPackages, aureliaPackages, bootstrapPackages };
 }
 
-exports.hasProcessFlag = hasProcessFlag;
-exports.root = root;
-exports.generateMeta = generateMeta;
+module.exports.hasProcessFlag = hasProcessFlag;
+module.exports.root = root;
+module.exports.generateMeta = generateMeta;
+module.exports.language = language;
+module.exports.selectLanguage = selectLanguage;
+module.exports.package = pkg;

skeleton-typescript-webpack/config/karma.conf.js

@@ -3,8 +3,10 @@
  * https://github.com/AngularClass/angular2-webpack-starter
  */
 
+import testWebpackConfig from './webpack.test';
+
 module.exports = function(config) {
-  var testWebpackConfig = require('./webpack.test.js');
+  // var testWebpackConfig = require('./webpack.test');
 
   config.set({
 
@@ -27,15 +29,15 @@ module.exports = function(config) {
      * we are building the test environment in ./spec-bundle.js
      */
     files: [
-      { pattern: './config/spec-bundle.js', watched: false },
+      { pattern: './spec-bundle.js', watched: false },
     ],
 
     /*
      * preprocess matching files before serving them to the browser
      * available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
      */
     preprocessors: {
-      './config/spec-bundle.js': [/*'coverage', */'webpack', 'sourcemap']
+      './spec-bundle.js': [/*'coverage', */'webpack', 'sourcemap']
     },
 
     // Webpack Config at ./webpack.test.js

skeleton-typescript-webpack/config/protractor.conf.js

@@ -1,12 +1,11 @@
-require('ts-babel-node/register');
-var helpers = require('./helpers');
+const helpers = require('./helpers');
 
 exports.config = {
   baseUrl: 'http://localhost:3000/',
 
   // use `npm run e2e`
   specs: [
-    helpers.root('test/e2e/src/**/*.ts')
+    helpers.root(helpers.language === 'javascript' ? 'test/e2e/**/*.js' : 'test/e2e/**/*.ts')
   ],
   exclude: [],
 
@@ -30,6 +29,14 @@ exports.config = {
     }
   },
 
+  onPrepare: function() {
+    if (helpers.language === 'javascript') {
+      require('babel-register');
+    } else {
+      require('ts-babel-node-extendable').register({ compilerOptions: { allowJs: false } });
+    }
+  },
+
   /**
    * Aurelia configuration
    */

skeleton-typescript-webpack/config/select-language.js

@@ -0,0 +1,22 @@
+const helpers = require('./helpers');
+
+if (!!helpers.package.language) {
+  const inquirer = require('inquirer');
+  inquirer.prompt([
+    {
+      type: 'list',
+      name: 'language',
+      message: 'Which language would you like to use with Aurelia?',
+      choices: [
+        'JavaScript',
+        'TypeScript'
+      ]
+    }
+  ]).then(function (answers) {
+    try {
+      helpers.selectLanguage(answers.language);
+    } catch (e) {
+      console.error(e.message);
+    }
+  });
+}

skeleton-typescript-webpack/config/spec-bundle.js

@@ -30,7 +30,7 @@ require('aurelia-pal-browser').initialize();
  * any file that ends with spec.js and get its path. By passing in true
  * we say do this recursively
  */
-var testContext = require.context('../test/unit', true, /\.spec\.ts/);
+var testContext = require.context('../test/unit', true, /\.spec\.(ts|js)/);
 
 /*
  * get all the files, for each file, call the context function

skeleton-typescript-webpack/config/webpack.base-dev.js

@@ -14,20 +14,22 @@ const METADATA = {
 
 const config = {
   metadata: METADATA,
+  
   /**
    * Switch loaders to debug mode.
    *
    * See: http://webpack.github.io/docs/configuration.html#debug
    */
   debug: true,
+
   /**
    * Developer tool to enhance debugging
    *
    * See: http://webpack.github.io/docs/configuration.html#devtool
    * See: https://github.com/webpack/docs/wiki/build-performance#sourcemaps
    */
-  devtool: 'eval',
-  // devtool: 'cheap-module-eval-source-map',
+  devtool: 'cheap-module-eval-source-map',
+  // devtool: 'eval',
   // devtool: 'cheap-module-source-map',
   // devtool: 'eval-source-map',
 
@@ -105,6 +107,11 @@ const config = {
     resourcePath: 'src'
   },
 
+  eslint: {
+    emitError: false,
+    configFile: helpers.root('.eslintrc')
+  },
+
   /**
    * Webpack Development Server configuration
    * Description: The webpack-dev-server is a little node.js Express server.

skeleton-typescript-webpack/config/webpack.base-javascript.js

@@ -0,0 +1,34 @@
+import * as helpers from './helpers';
+
+const config = {
+  module: {
+    preLoaders: [
+      /*
+       * eslint loader support for *.js files
+       *
+       * See: https://github.com/MoOx/eslint-loader
+       */
+       { test: /\.js$/, loader: 'eslint', exclude: [ helpers.root('node_modules'), helpers.root('config'), helpers.root('index.js') ] }
+    ],
+    loaders: [
+      /*
+       * Babel loader support for ES2015
+       *
+       * See: https://github.com/babel/babel-loader
+       */
+      {
+        test: /\.js$/,
+        loader: 'babel',
+        exclude: [/\.(spec|e2e)\.js$/, helpers.root('node_modules'), helpers.root('config')],
+        query: {
+          plugins: ['transform-decorators-legacy'],
+          presets: ['es2015-loose-native-modules', 'stage-1'],
+          cacheDirectory: true,
+        }
+      }
+    ]
+  },
+  plugins: []
+}
+
+export default config;

skeleton-typescript-webpack/config/webpack.base-production.js

@@ -138,6 +138,11 @@ const config = {
     resourcePath: 'src'
   },
 
+  eslint: {
+    emitError: true,
+    configFile: helpers.root('.eslintrc')
+  },
+
   /**
    * Html loader advanced options
    *

skeleton-typescript-webpack/config/webpack.base-typescript.js

@@ -0,0 +1,43 @@
+import * as helpers from './helpers';
+const ForkCheckerPlugin = require('awesome-typescript-loader').ForkCheckerPlugin;
+
+const config = {
+  module: {
+    preLoaders: [
+      /*
+       * Tslint loader support for *.ts files
+       *
+       * See: https://github.com/wbuchwalter/tslint-loader
+       */
+       { test: /\.ts$/, loader: 'tslint', exclude: [ helpers.root('node_modules'), helpers.root('config') ] }
+    ],
+    loaders: [
+      /*
+       * Typescript loader support for .ts
+       *
+       * See: https://github.com/s-panferov/awesome-typescript-loader
+       */
+      {
+        test: /\.ts$/,
+        loader: 'awesome-typescript',
+        exclude: [/\.(spec|e2e|d)\.ts$/, /node_modules/, helpers.root('config')],
+        query: {
+          tsconfig: 'tsconfig.webpack.json'
+        }
+      }
+    ]
+  },
+  plugins: [
+    
+    /*
+     * Plugin: ForkCheckerPlugin
+     * Description: Do type checking in a separate process, so webpack don't need to wait.
+     *
+     * See: https://github.com/s-panferov/awesome-typescript-loader#forkchecker-boolean-defaultfalse
+     */
+    new ForkCheckerPlugin()
+
+  ]
+}
+
+export default config;

skeleton-typescript-webpack/config/webpack.base-web.js

@@ -9,12 +9,12 @@ const config = {
     ...base.module,
     loaders: [
       ...base.module.loaders,
-      /*
-        * Raw loader support for *.css files
-        * Returns file content as string
-        *
-        * See: https://github.com/webpack/raw-loader
-        */
+     /**
+      * Raw loader support for *.css files
+      * Returns file content as string
+      *
+      * See: https://github.com/webpack/raw-loader
+      */
       {
         test: /\.css$/,
         loaders: ExtractTextPlugin.extract('style', 'css')
@@ -23,7 +23,7 @@ const config = {
   },
   plugins: [
     ...base.plugins,
-    /*
+    /**
      * Plugin: HtmlWebpackPlugin
      * Description: Simplifies creation of HTML files to serve your webpack bundles.
      * This is especially useful for webpack bundles that include a hash in the filename
@@ -40,7 +40,7 @@ const config = {
       }
     }),
 
-    /*
+    /**
      * Plugin: CommonsChunkPlugin
      * Description: Shares common code between the pages.
      * It identifies common modules and put them into a commons chunk.