[dev] es6 templates

actions/init.js

@@ -1,44 +1,54 @@
-var common = require("./common.js");
+const vfs = require("vinyl-fs");
+const es = require("event-stream");
 
-function run(inq){
+var starter = require("./starter");
 
-	inq.prompt([
+async function run(inq){
+
+	res = await inq.prompt([
 		// Get app name from arguments by default
 		{ type: 'input', name: 'appName', message: 'Give your app a name',
 			"default": "The App!" },
 		{ type: 'confirm', name: 'customTools', message: 'App will use Javascript (ES6) and CSS\n  Do you need advanced preprocessing ( Typescript, Sass, Handlebars ) ?',
 			"default": false },
-		{ type: 'list', name: 'less', message: 'CSS pre-processor ?',
+		{ type: 'list', name: 'css', message: 'CSS pre-processor ?',
 		 	"default": "No", choices:["No", "Less", "Sass"], when: a => a.customTools },
-		{ type: 'list', name: 'template', message: 'External template engine ?',
-		 	"default": "No", choices:["No", "Handlebars"], when: a => a.customTools  },
+		{ type: 'confirm', name: 'handlebars', message: 'Use Handlebars for templating ?',
+		 	"default": false, when: a => a.customTools  },
+		{ type: 'confirm', name: 'typescript', message: 'Use Typescript ?',
+		 	"default": false, when: a => a.customTools },
 		{ type: 'list', name: 'skin', message: 'Default app skin ?',
-		 	"default": "Flat", choices:["Flat", "Compact", "Material"], when: a => a.customTools },
+		 	"default": "Flat", choices:["Flat", "Compact"] },
 		{ type: 'list', name: 'edition', message: 'GPL or Commercial version of Webix UI ?',
-			 "default": "GPL", choices:["GPL", "Commercial"] },
-		{ type: 'confirm', name: 'customFeatures', message: 'Do you need extra features such as Authentication, Localization, etc ?',
-			 "default": false }
-	]).then(res => {
+			 "default": "GPL", choices:["GPL", "Commercial"] }
+	]);
 
+	try {
 		res.appID = res.appName.replace(/[^a-z0-9]+/gi,"-").replace(/-$|^-/, "").toLowerCase();
-		res.fileExt = res.typescript === "Yes" ? "ts" : "js";
-		res.webixPath = res.edition === "GPL" ? "node_modules/webix/" : "node_modules/@xbs/webix-pro/";
+		res.fileExt = res.typescript ? "ts" : "js";
+		res.skin = skins[res.skin];
 
-		var ctp = common.files();
-		ctp.add("/front/package.json");
-		ctp.add("/front/webpack.config.js");
+		res.css = (res.css||"no").toLowerCase();
+		if (res.css === "no") res.css = "css";
+		res.less = res.css === "Less";
+		res.sass = res.css === "Sass";
 
-		if (res.typescript === "Yes")
-			ctp.add("/front/typescript/**", { dot: true });
-		else
-			ctp.add("/front/es6/**", { dot: true });
-
-		ctp.save("./", res);
+		res.webixPath = res.edition === "GPL" ? "node_modules/webix/" : "node_modules/@xbs/webix-pro/";
+		res.webixNPM = res.edition === "GPL" ? "webix" : "@xbs/webix-pro";
 
-	}).catch(e => console.log(e));
+		var files = starter.stream(res);
+		files.pipe(vfs.dest("./"));
+	} catch(e) {
+		console.log(e);
+	}
 
 }
 
+const skins = {
+	"Flat" : "webix.css",
+	"Compact" : "skins/compact.css"
+};
+
 module.exports = {
 	run
 };

actions/starter.js

@@ -0,0 +1,57 @@
+const vfs = require("vinyl-fs");
+const es = require("event-stream");
+
+const bars = require("handlebars");
+const path = require("path");
+
+function stream(cfg){
+
+	const rootDir = path.resolve(__dirname+"/../templates");
+	const folder = cfg.typescript === "Yes" ? "typescript" : "es6";
+	const front = `${rootDir}/front/${folder}`;
+
+	const source = vfs.src([
+		`${front}/sources/**`,
+		`!${front}/sources/app.{ts,js}`,
+	], { base: front });
+
+	const app = vfs.src([
+		`${front}/sources/app.{ts,js}`,
+	], { base: front })
+		.pipe(through(f => template(f, cfg)));
+
+	const styles = vfs.src([
+		`${rootDir}/front/styles/${cfg.css}/**`
+	])
+		.pipe(through(f => move(f, "sources")));
+
+	const configs = vfs.src([
+		`${front}/*`
+	], { dot: true })
+		.pipe(through(f => template(f, cfg)));
+
+	return es.merge(source, app, configs, styles);
+}
+
+function move(file, name){
+	file.path = path.join(file.base, name,  file.relative);
+	return file;
+}
+
+function template(file, cfg){
+	if (!file.contents) return null;
+	const str = bars.compile(file.contents.toString("utf8"));
+	file.contents = new Buffer(str(cfg));	
+	return file;
+	file.path = file.path.replace(file.base, "")
+}
+
+function through(lambda){
+	return es.through(function(file){
+		const res = lambda(file);
+		if (res !== null)
+			this.emit('data', res);
+	})
+}
+
+module.exports = { stream };

package.json

@@ -16,8 +16,8 @@
   "dependencies": {
     "commander": "^2.15.1",
     "event-stream": "^3.3.4",
+    "handlebars": "^4.0.11",
     "inquirer": "^5.2.0",
-    "lodash.template": "^4.4.0",
     "vinyl-fs": "^3.0.3"
   }
 }

templates/front/es6/.babelrc

@@ -4,8 +4,9 @@
       "targets": {
         "browsers": ["last 2 versions", "IE >= 11"]
       },
-      modules:false,
-      loose:true
+      "modules":false,
+      "loose":true
     }]
-  ]
+  ],
+  "plugins": ["transform-object-rest-spread"]
 }

templates/front/es6/README.md

@@ -1,4 +1,4 @@
-Webix Jet Demo App
+{{appName}}
 ===================
 
 ### How to run
@@ -23,9 +23,4 @@ npm run lint
 npm run build
 ```
 
-After that you can copy the "codebase" folder to the production server
-
-
-### License
-
-MIT
+After that you can copy the "codebase" folder to the production server

templates/front/es6/index.html

@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta charset="utf-8">
+	<title></title>
+	<!-- Webix Library -->
+	<script type="text/javascript" src="./node_modules/{{webixNPM}}/webix.js"></script>
+	<link rel="stylesheet" type="text/css" href="./node_modules/{{webixNPM}}/{{skin}}">
+
+	<!-- App -->
+	<script type="text/javascript" src="codebase/app.js"></script>
+	<link rel="stylesheet" type="text/css" href="codebase/app.css">
+</head>
+<body></body>
+</html>

templates/front/es6/package.json

@@ -0,0 +1,50 @@
+{
+  "name": "{{appID}}",
+  "version": "1.0.0",
+  "description": "{{appName}}",
+  "main": "sources/app.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "lint": "eslint sources/",
+    "build": "webpack --env.production true",
+    "module": "webpack --env.production true --env.module true",
+    "standalone": "webpack --env.production true --env.module true --env.standalone true",
+    "start": "webpack-dev-server --open"
+  },
+  "keywords": [
+    "webix",
+    "jet"
+  ],
+  "license": "MIT",
+  "devDependencies": {
+    "babel-core": "^6.26.0",
+    "babel-loader": "^7.1.2",
+    "babel-preset-env": "^1.6.0",
+    "babel-plugin-transform-object-rest-spread": "^6.26.0",
+    "css-loader": "^0.28.7",
+    "eslint": "^4.7.2",
+    "extract-text-webpack-plugin": "^3.0.0",
+    "file-loader": "^0.11.2",
+    "url-loader": "^0.5.9",
+    "webpack": "^3.6.0",
+    "webpack-dev-server": "^2.8.2"
+  },
+  "dependencies": {
+    {{#if handlebars}}
+    "handlebars": "^4.0.0",
+    "handlebars-loader":"^1.7.0",
+    {{/if}}
+    {{#if less}}
+    "less": "^3.0.0",
+    "less-loader": "^4.1.0",
+    {{/if}}
+    {{#if sass}}
+    "sass": "^1.5.0",
+    "sass-loader": "^7.0.0",
+    {{/if}}
+    {{#if webixNPM}}
+    "{{webixNPM}}":"^5.3.0",
+    {{/if}}
+    "webix-jet": "^1.5.0"
+  }
+}

templates/front/es6/sources/app.js

@@ -0,0 +1,20 @@
+import "./styles/app.{{css}}";
+import {JetApp, EmptyRouter, HashRouter } from "webix-jet";
+
+export default class MyApp extends JetApp{
+	constructor(config){
+		const defaults = {
+			id 		: APPNAME,
+			version : VERSION,
+			router 	: BUILD_AS_MODULE ? EmptyRouter : HashRouter,
+			debug 	: !PRODUCTION,
+			start 	: "/top/start"
+		};
+
+		super({ ...defaults, ...config });
+	}
+}
+
+if (!BUILD_AS_MODULE){
+	webix.ready(() => new MyApp().render() );
+}

templates/front/es6/webpack.config.js

@@ -0,0 +1,104 @@
+var path = require("path");
+var webpack = require("webpack");
+
+module.exports = function(env) {
+
+	var pack = require("./package.json");
+	var ExtractTextPlugin = require("extract-text-webpack-plugin");
+
+	var production = !!(env && env.production === "true");
+	var asmodule = !!(env && env.module === "true");
+	var standalone = !!(env && env.standalone === "true");
+
+	var babelSettings = {
+		extends: path.join(__dirname, '/.babelrc')
+	};
+
+	var config = {
+		entry: "./sources/app.js",
+		output: {
+			path: path.join(__dirname, "codebase"),
+			publicPath:"/codebase/",
+			filename: "app.js"
+		},
+		devtool: "inline-source-map",
+		module: {
+			rules: [
+				{
+					test: /\.js$/,
+					loader: "babel-loader?" + JSON.stringify(babelSettings)
+				},
+				{
+					test: /\.(svg|png|jpg|gif)$/,
+					loader: "url-loader?limit=25000"
+				},
+				{{#if handlebars}}
+				{
+					test: /\.(handlebars)$/,
+					loader: "handlebars-loader"
+				},
+				{{/if}}
+				{{#if less}}
+				{
+					test: /\.less$/,
+					loader: ExtractTextPlugin.extract("css-loader!less-loader")
+				}
+				{{else}}
+				{{#if sass}}
+				{
+					test: /\.scss$/,
+					loader: ExtractTextPlugin.extract("css-loader!sass-loader")
+				}
+				{{else}}
+				{
+					test: /\.(css)$/,
+					loader: ExtractTextPlugin.extract("css-loader")
+				}
+				{{/if}}
+				{{/if}}
+			]
+		},
+		resolve: {
+			extensions: [".js"],
+			modules: ["./sources", "node_modules"],
+			alias:{
+				"jet-views":path.resolve(__dirname, "sources/views"),
+				"jet-locales":path.resolve(__dirname, "sources/locales")
+			}
+		},
+		plugins: [
+			new ExtractTextPlugin("./app.css"),
+			new webpack.DefinePlugin({
+				VERSION: `"${pack.version}"`,
+				APPNAME: `"${pack.name}"`,
+				PRODUCTION : production,
+				BUILD_AS_MODULE : (asmodule || standalone)
+			})
+		]
+	};
+
+	if (production) {
+		config.plugins.push(
+			new  webpack.optimize.UglifyJsPlugin({
+				test: /\.js$/
+			})
+		);
+	}
+
+	if (asmodule){
+		if (!standalone){
+			config.externals = config.externals || {};
+			config.externals = [ "webix-jet" ];
+		}
+
+		const out = config.output;
+		const sub = standalone ? "full" : "module";
+
+		out.library = pack.name.replace(/[^a-z0-9]/gi, "");
+		out.libraryTarget= "umd";
+		out.path = path.join(__dirname, "dist", sub);
+		out.publicPath = "/dist/"+sub+"/";
+	}
+
+	return config;
+}