feat(*): First working version

README.md

@@ -13,27 +13,27 @@
     <img src="https://img.shields.io/github/issues/d4rkr00t/aik.svg" alt="Github Issues">
   </a>
 
-  
+
   <a href="https://travis-ci.org/d4rkr00t/aik">
     <img src="https://img.shields.io/travis/d4rkr00t/aik.svg" alt="Travis Status">
   </a>
-
 
-
+
+
   <a href="https://coveralls.io/github/d4rkr00t/aik">
     <img src="https://img.shields.io/coveralls/d4rkr00t/aik.svg" alt="Coveralls">
   </a>
-
 
-
+
+
   <a href="http://commitizen.github.io/cz-cli/">
     <img src="https://img.shields.io/badge/commitizen-friendly-brightgreen.svg" alt="Commitizen Friendly">
   </a>
-  
+
 </p>
 
 <p align="center"><big>
-Frontend Dev REPL
+Frontend Playground
 </big></p>
 
 
@@ -43,7 +43,7 @@ Frontend Dev REPL
 ## Install
 
 ```sh
-npm install aik
+npm install -g aik
 ```
 
 ## Usage

cli.js

@@ -0,0 +1,40 @@
+#! /usr/bin/env node
+'use strict';
+
+var _meow = require('meow');
+
+var _meow2 = _interopRequireDefault(_meow);
+
+var _lib = require('./lib/');
+
+var _lib2 = _interopRequireDefault(_lib);
+
+var _isEmpty = require('lodash/lang/isEmpty');
+
+var _isEmpty2 = _interopRequireDefault(_isEmpty);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var cli = (0, _meow2.default)({
+  help: ['Usage', '  $ aik filename.js', '', 'Options', '  -p, --port  Web server port. [Default: 8080]', '  -h, --host  Web server host. [Default: localhost]', '  -n, --ngrok  Exposes server to real world by ngrok.', '  -c, --cssmodules  Enables css modules.', '  --help  Shows help.', '', 'Examples', '  $ aik filename.js --port 3000 -n -cm', '  Runs aik web server on 3000 port with ngrok and css modules support']
+}, {
+  alias: {
+    p: 'port',
+    h: 'host',
+    n: 'ngrok',
+    c: 'cssmodules'
+  },
+  default: {
+    port: 8080,
+    host: 'localhost'
+  }
+});
+
+var input = cli.input || [];
+var flags = cli.flags || {};
+
+if ((0, _isEmpty2.default)(input) || flags.help) {
+  console.log(cli.help); // eslint-disable-line
+} else {
+    (0, _lib2.default)(input, flags);
+  }

lib/index.js

@@ -0,0 +1,60 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _slicedToArray = function () { function sliceIterator(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"]) _i["return"](); } finally { if (_d) throw _e; } } return _arr; } return function (arr, i) { if (Array.isArray(arr)) { return arr; } else if (Symbol.iterator in Object(arr)) { return sliceIterator(arr, i); } else { throw new TypeError("Invalid attempt to destructure non-iterable instance"); } }; }();
+
+exports.banner = banner;
+exports.default = aikDevServer;
+
+var _chalk = require('chalk');
+
+var _chalk2 = _interopRequireDefault(_chalk);
+
+var _webpack = require('./webpack');
+
+var _webpack2 = _interopRequireDefault(_webpack);
+
+var _ngrok = require('./ngrok');
+
+var _ngrok2 = _interopRequireDefault(_ngrok);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function banner(filename, flags, ngrokUrl) {
+  return '\n  /$$$$$$  /$$$$$$ /$$   /$$\n /$$__  $$|_  $$_/| $$  /$$/\n| $$    $$  | $$  | $$ /$$/\n| $$$$$$$$  | $$  | $$$$$/\n| $$__  $$  | $$  | $$  $$\n| $$  | $$  | $$  | $$  $$\n| $$  | $$ /$$$$$$| $$   $$\n|__/  |__/|______/|__/  __/\n\n     ' + _chalk2.default.yellow('Frontend Playground') + '\n\n' + _chalk2.default.magenta('Server:') + '       ' + _chalk2.default.cyan('http://' + flags.host + ':' + flags.port) + '\n' + _chalk2.default.magenta('CSS Modules:') + '  ' + (flags.cssmodules ? _chalk2.default.green('enabled') : _chalk2.default.dim('disabled')) + '\n' + _chalk2.default.magenta('Ngrok:') + '        ' + (flags.ngrok ? _chalk2.default.green(ngrokUrl) : _chalk2.default.dim('disabled')) + '\n';
+}
+
+/**
+ * Aik dev server
+ *
+ * @param {String[]} input
+ * @param {Object} flags
+ * @param {String} flags.port
+ * @param {String} flags.host
+ * @param {Boolean} flags.ngrok
+ * @param {Boolean} flags.cssmodules
+ *
+ * @return {Type}
+ */
+function aikDevServer(input, flags) {
+  var _input = _slicedToArray(input, 1);
+
+  var filename = _input[0];
+
+  var promiseList = [(0, _webpack2.default)(filename, flags), flags.ngrok && (0, _ngrok2.default)(flags)];
+
+  return Promise.all(promiseList).then(function (_ref) {
+    var _ref2 = _slicedToArray(_ref, 2);
+
+    var ngrokUrl = _ref2[1];
+
+    console.log(banner(filename, flags, ngrokUrl)); // eslint-disable-line
+  }).catch(function (err) {
+    console.error(_chalk2.default.red(err)); // eslint-disable-line
+
+    throw err;
+  });
+}

lib/ngrok.js

@@ -0,0 +1,24 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = createNgrokTunnel;
+
+var _ngrok = require('ngrok');
+
+var _ngrok2 = _interopRequireDefault(_ngrok);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function createNgrokTunnel(flags) {
+  return new Promise(function (resolve, reject) {
+    _ngrok2.default.connect(flags.port, function (err, url) {
+      if (err) {
+        return reject(err);
+      }
+
+      resolve(url);
+    });
+  });
+}

lib/webpack-config-builder.js

@@ -0,0 +1,81 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.makeAbsolutePathToNodeModules = makeAbsolutePathToNodeModules;
+exports.setupEntry = setupEntry;
+exports.setupOutput = setupOutput;
+exports.setupPlugins = setupPlugins;
+exports.setupLoaders = setupLoaders;
+exports.default = webpackConfigBuilder;
+
+var _path = require('path');
+
+var _path2 = _interopRequireDefault(_path);
+
+var _webpack = require('webpack');
+
+var _webpack2 = _interopRequireDefault(_webpack);
+
+var _htmlWebpackPlugin = require('html-webpack-plugin');
+
+var _htmlWebpackPlugin2 = _interopRequireDefault(_htmlWebpackPlugin);
+
+var _npmInstallWebpackPlugin = require('npm-install-webpack-plugin');
+
+var _npmInstallWebpackPlugin2 = _interopRequireDefault(_npmInstallWebpackPlugin);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function makeAbsolutePathToNodeModules(relativePath) {
+  return _path2.default.join(__dirname, '..', 'node_modules', relativePath);
+}
+
+function setupEntry(filename, host, port) {
+  host = host === '::' ? 'localhost' : host;
+
+  return {
+    app: [makeAbsolutePathToNodeModules('webpack-dev-server/client') + '?http://' + host + ':' + port + '/', makeAbsolutePathToNodeModules('webpack/hot/only-dev-server'), _path2.default.join(process.cwd(), filename)]
+  };
+}
+
+function setupOutput(filename) {
+  return {
+    path: _path2.default.join(process.cwd(), _path2.default.dirname(filename)),
+    filename: 'index.js',
+    hash: true
+  };
+}
+
+function setupPlugins() {
+  return [new _webpack2.default.HotModuleReplacementPlugin(), new _htmlWebpackPlugin2.default(), new _npmInstallWebpackPlugin2.default({
+    save: false,
+    saveDev: false,
+    saveExact: false
+  })];
+}
+
+function setupLoaders(cssmodules) {
+  return [{
+    test: /\.css$/,
+    loaders: [makeAbsolutePathToNodeModules('style-loader'), makeAbsolutePathToNodeModules('css-loader') + (cssmodules ? '?modules' : '')]
+  }, {
+    test: /\.jsx?$/,
+    exclude: /(node_modules|bower_components)/,
+    loaders: [makeAbsolutePathToNodeModules('react-hot-loader'), makeAbsolutePathToNodeModules('babel-loader') + '?presets[]=react,presets[]=es2015']
+  }];
+}
+
+function webpackConfigBuilder(filename, flags) {
+  return {
+    entry: setupEntry(filename, flags.host, flags.port),
+    output: setupOutput(filename),
+    debug: true,
+    devtool: 'source-map',
+    plugins: setupPlugins(),
+    module: {
+      loaders: setupLoaders(flags.cssmodules)
+    }
+  };
+}

lib/webpack.js

@@ -0,0 +1,41 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = createWebpackDevServer;
+
+var _webpack = require('webpack');
+
+var _webpack2 = _interopRequireDefault(_webpack);
+
+var _webpackDevServer = require('webpack-dev-server');
+
+var _webpackDevServer2 = _interopRequireDefault(_webpackDevServer);
+
+var _webpackConfigBuilder = require('./webpack-config-builder');
+
+var _webpackConfigBuilder2 = _interopRequireDefault(_webpackConfigBuilder);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function createWebpackDevServer(filename, flags) {
+  var config = (0, _webpackConfigBuilder2.default)(filename, flags);
+  var compiler = (0, _webpack2.default)(config);
+  var server = new _webpackDevServer2.default(compiler, {
+    hot: true,
+    colors: true,
+    noInfo: true,
+    stats: { colors: true }
+  });
+
+  return new Promise(function (resolve, reject) {
+    server.listen(flags.port, flags.host, function (err) {
+      if (err) {
+        return reject(err);
+      }
+
+      resolve(server);
+    });
+  });
+}

package.json

@@ -1,15 +1,26 @@
 {
   "name": "aik",
   "version": "0.0.0",
-  "description": "Frontend Dev REPL",
+  "description": "Frontend Playground",
   "bin": "cli.js",
   "main": "lib/index.js",
   "files": [
     "lib/",
     "cli.js"
   ],
   "keywords": [
-    "node","frontend","repl","react","babel","webpack","playground","experiments","boostrap","boilerplate", "postcss", "cssmodules"
+    "node",
+    "frontend",
+    "repl",
+    "react",
+    "babel",
+    "webpack",
+    "playground",
+    "experiments",
+    "boostrap",
+    "boilerplate",
+    "postcss",
+    "cssmodules"
   ],
   "license": "MIT",
   "repository": {
@@ -42,8 +53,20 @@
     "validate"
   ],
   "dependencies": {
+    "babel-core": "^6.5.2",
+    "babel-loader": "^6.2.3",
+    "babel-preset-es2015": "^6.5.0",
+    "babel-preset-react": "^6.5.0",
+    "chalk": "^1.1.1",
+    "css-loader": "^0.23.1",
+    "html-webpack-plugin": "^2.9.0",
     "meow": "^3.7.0",
-    "chalk": "^1.1.1"
+    "ngrok": "0.1.99",
+    "npm-install-webpack-plugin": "git://github.com/d4rkr00t/npm-install-webpack-plugin.git#search-in-nodemodules",
+    "react-hot-loader": "^1.3.0",
+    "style-loader": "^0.13.0",
+    "webpack": "^1.12.14",
+    "webpack-dev-server": "^1.14.1"
   },
   "devDependencies": {
     "ava": "^0.11.0",