Improve building process (es6 bundle)

.cmds

@@ -1,10 +1,12 @@
 
+# transifex
+tx pull -a
+
 # dependencies checker
 npm-check --skip-unused
 
 # dependencies locker
 npm shrinkwrap --dev
 
-# code validation
+# js code validation
 gulp v
-

.eslintrc.js

@@ -15,7 +15,8 @@ module.exports = {
 		'browser': true
 	},
 	'globals': {
-		'RL_COMMUNITY': true
+		'RL_COMMUNITY': true,
+		'RL_ES6': true
 	},
 	// http://eslint.org/docs/rules/
 	'rules': {

.tx/readme.txt

@@ -1 +0,0 @@
-tx pull -a

dev/Common/Booter.jsx

@@ -17,6 +17,46 @@ window.__rlah_clear = () => clearHash();
 window.__rlah_data = () => RL_APP_DATA_STORAGE;
 /* eslint-enable */
 
+const useJsNextBundle = (function() {
+
+	if (!RL_ES6)
+	{
+		return false;
+	}
+
+	/* eslint-disable  */
+	try {
+
+		eval(`
+ // let + const
+const x = 5; let y = 4; var z = 4;
+
+ // Arrow Function
+const f = () => 'rainloop';
+
+ // Default + Rest + Spread
+const d = (test = 1, ...t) => 'rainloop';
+d(...[1, 2, 3]);
+
+// Destructuring
+let [a, b] = [1, 2];
+({a, b} = {a: 1, b: 2});
+
+// Class
+class Q1 { constructor() {} }
+
+// Class extends + super
+class Q2 extends Q1 { constructor() { super() } }
+
+`);
+		return true;
+	}
+	catch (e) {}
+
+    return false;
+	/* eslint-enable */
+}());
+
 /**
  * @param {string} id
  * @param {string} name
@@ -184,7 +224,7 @@ function runApp()
 	const appData = window.__rlah_data();
 
 	if (window.jassl && progressJs && appData && appData.TemplatesLink && appData.LangLink &&
-		appData.StaticLibJsLink && appData.StaticAppJsLink && appData.StaticEditorJsLink)
+		appData.StaticLibJsLink && appData.StaticAppJsLink && appData.StaticAppJsNextLink && appData.StaticEditorJsLink)
 	{
 		const p = progressJs;
 
@@ -214,7 +254,7 @@ function runApp()
 		Promise.all([libs, common])
 			.then(() => {
 				p.set(30);
-				return window.jassl(appData.StaticAppJsLink);
+				return window.jassl(useJsNextBundle ? appData.StaticAppJsNextLink : appData.StaticAppJsLink);
 			})
 			.then(() => {
 				p.set(50);
@@ -280,12 +320,17 @@ window.__runBoot = function() {
 		window.document.location.replace('./?/NoCookie');
 	}
 
+	const root = document.documentElement;
 	if ('none' !== getComputedStyle('rl-check', 'display'))
 	{
-		const root = document.documentElement;
 		root.className += ' no-css';
 	}
 
+	if (useJsNextBundle)
+	{
+		root.className += ' js-next';
+	}
+
 	if (includeLayout())
 	{
 		includeAppScr(getRainloopBootData());

dev/View/User/Login.js

@@ -1,9 +1,9 @@
 
+import window from 'window';
+import _ from '_';
+import ko from 'ko';
+
 var
-	window = require('window'),
-	_ = require('_'),
-	ko = require('ko'),
-
 	Enums = require('Common/Enums'),
 	Utils = require('Common/Utils'),
 	Links = require('Common/Links'),

gulpfile.js

@@ -22,20 +22,17 @@ var
 		zipFile: '',
 		zipFileShort: '',
 
-		paths: {},
-		uglify: {
-			mangle: true,
-			compress: true
-		}
+		paths: {}
 	},
 
 	_ = require('lodash'),
 	fs = require('node-fs'),
 	path = require('path'),
 	notifier = require('node-notifier'),
+	runSequence = require('run-sequence'),
 
 	webpack = require('webpack'),
-	webpackCfg = require('./webpack.config.js'),
+	webpackCfgBuilder = require('./webpack.config.builder.js'),
 
 	argv = require('yargs').argv,
 
@@ -53,25 +50,68 @@ var
 	livereload = require('gulp-livereload'),
 	eslint = require('gulp-eslint'),
 	cache = require('gulp-cached'),
+	ignore = require('gulp-ignore'),
+	filter = require('gulp-filter'),
 	gutil = require('gulp-util')
 ;
 
 cfg.community = !argv.pro;
+cfg.next = !!argv.next;
 
 // webpack
-if (webpackCfg && webpackCfg.output)
+function initWebpackCfg(wpCfg)
 {
-	webpackCfg.output.publicPath = cfg.paths.staticJS;
+	if (wpCfg)
+	{
+		if (wpCfg.output)
+		{
+			wpCfg.output.publicPath = cfg.paths.staticJS;
+		}
+
+		if (wpCfg.plugins)
+		{
+			wpCfg.plugins.push(new webpack.DefinePlugin({
+				'RL_COMMUNITY': cfg.community,
+				'RL_ES6': cfg.next,
+				'process.env': {
+					NODE_ENV: '"production"'
+				}
+			}));
+		}
+	}
+
+	return wpCfg;
 }
 
-if (webpackCfg && webpackCfg.plugins)
+function webpackCallback(callback)
 {
-	webpackCfg.plugins.push(new webpack.DefinePlugin({
-		'RL_COMMUNITY': !!cfg.community,
-		'process.env': {
-			NODE_ENV: '"production"'
+	return function(err, stats) {
+
+		if (err)
+		{
+			if (cfg.watch)
+			{
+				webpackError(err);
+			}
+			else
+			{
+				throw new gutil.PluginError('webpack', err);
+			}
 		}
-	}));
+		else if (stats && stats.compilation && stats.compilation.errors && stats.compilation.errors[0])
+		{
+			if (cfg.watch)
+			{
+				_.each(stats.compilation.errors, webpackError);
+			}
+			else
+			{
+				throw new gutil.PluginError('webpack', stats.compilation.errors[0]);
+			}
+		}
+
+        callback();
+    };
 }
 
 function webpackError(err) {
@@ -95,18 +135,6 @@ function getHead()
 	return !cfg.community ? head.rainloop : head.agpl;
 }
 
-function regOtherMinTask(sName, sPath, sInc, sOut, sHeader)
-{
-	gulp.task(sName, function() {
-		return gulp.src(sPath + sInc)
-			.pipe(uglify())
-			.pipe(header(sHeader || ''))
-			.pipe(rename(sOut))
-			.pipe(eol('\n', true))
-			.pipe(gulp.dest(sPath));
-	});
-}
-
 function zipDir(sSrcDir, sDestDir, sFileName)
 {
 	return gulp.src(sSrcDir + '**/*')
@@ -170,7 +198,6 @@ cfg.paths.momentLocales = 'rainloop/v/' + cfg.devVersion + '/app/localization/mo
 
 cfg.paths.less = {
 	main: {
-		name: 'less.css',
 		src: 'dev/Styles/@Main.less',
 		watch: ['dev/Styles/*.less'],
 		options: {
@@ -198,8 +225,7 @@ cfg.paths.css = {
 			'node_modules/lightgallery/dist/css/lightgallery.min.css',
 			'node_modules/lightgallery/dist/css/lg-transitions.min.css',
 			'node_modules/Progress.js/minified/progressjs.min.css',
-			'dev/Styles/_progressjs.css',
-			cfg.paths.staticCSS + cfg.paths.less.main.name
+			'dev/Styles/_progressjs.css'
 		]
 	},
 	social: {
@@ -278,48 +304,42 @@ cfg.paths.js = {
 };
 
 // CSS
-gulp.task('less:main', function() {
-	var less = require('gulp-less');
 
-	return gulp.src(cfg.paths.less.main.src)
+gulp.task('css:clean', function() {
+	return cleanDir(cfg.paths.staticCSS + '/*.css');
+});
+
+gulp.task('css:main', function() {
+	var autoprefixer = require('gulp-autoprefixer'),
+		less = require('gulp-less'),
+		lessFilter = filter('**/*.less', {restore: true}),
+		src = cfg.paths.css.main.src.concat([cfg.paths.less.main.src]);
+
+	return gulp.src(src)
+		.pipe(lessFilter)
 		.pipe(gulpif(cfg.watch, plumber({errorHandler: notify.onError("Error: <%= error.message %>")})))
 		.pipe(less({
 			'paths': cfg.paths.less.main.options.paths
 		}))
-		.pipe(rename(cfg.paths.less.main.name))
-		.pipe(eol('\n', true))
-		.pipe(gulp.dest(cfg.paths.staticCSS))
-		.on('error', gutil.log);
-});
-
-gulp.task('css:social', function() {
-	var autoprefixer = require('gulp-autoprefixer');
-	return gulp.src(cfg.paths.css.social.src)
-		.pipe(concat(cfg.paths.css.social.name))
-		.pipe(autoprefixer('last 3 versions', '> 1%', 'ie 9', 'Firefox ESR', 'Opera 12.1'))
-		.pipe(replace(/\.\.\/(img|images|fonts|svg)\//g, '$1/'))
-		.pipe(eol('\n', true))
-		.pipe(gulp.dest(cfg.paths.staticCSS));
-});
-
-gulp.task('css:main-begin', ['less:main', 'css:social'], function() {
-	var autoprefixer = require('gulp-autoprefixer');
-	return gulp.src(cfg.paths.css.main.src)
+		.pipe(lessFilter.restore)
 		.pipe(concat(cfg.paths.css.main.name))
-		.pipe(autoprefixer('last 3 versions', '> 1%', 'ie 9', 'Firefox ESR', 'Opera 12.1'))
+		.pipe(autoprefixer('last 3 versions', '> 1%', 'ie 9', 'ie 10', 'ie 11', 'Firefox ESR'))
 		.pipe(replace(/\.\.\/(img|images|fonts|svg)\//g, '$1/'))
 		.pipe(eol('\n', true))
 		.pipe(gulp.dest(cfg.paths.staticCSS))
 		.pipe(livereload());
 });
 
-gulp.task('css:clear-less', ['css:main-begin'], function() {
-	return gulp.src(cfg.paths.staticCSS + cfg.paths.less.main.name, {read: false})
-		.pipe(require('gulp-rimraf')());
+gulp.task('css:social', function() {
+	var autoprefixer = require('gulp-autoprefixer');
+	return gulp.src(cfg.paths.css.social.src)
+		.pipe(concat(cfg.paths.css.social.name))
+		.pipe(autoprefixer('last 3 versions', '> 1%', 'ie 9', 'ie 10', 'ie 11', 'Firefox ESR'))
+		.pipe(replace(/\.\.\/(img|images|fonts|svg)\//g, '$1/'))
+		.pipe(eol('\n', true))
+		.pipe(gulp.dest(cfg.paths.staticCSS));
 });
 
-gulp.task('css:main', ['css:clear-less']);
-
 gulp.task('css:main:min', ['css:main'], function() {
 	var cleanCSS = require('gulp-clean-css');
 	return gulp.src(cfg.paths.staticCSS + cfg.paths.css.main.name)
@@ -355,11 +375,11 @@ gulp.task('js:openpgpworker', function() {
 		.pipe(gulp.dest(cfg.paths.staticMinJS));
 });
 
-gulp.task('js:moment:locales-clear', function() {
+gulp.task('moment:locales-clear', function() {
 	return cleanDir('rainloop/v/' + cfg.devVersion + '/app/localization/moment/*.js');
 });
 
-gulp.task('js:moment:locales', ['js:moment:locales-clear'], function() {
+gulp.task('moment:locales', ['moment:locales-clear'], function() {
 	return gulp.src(cfg.paths.js.moment.locales)
 		.pipe(gulp.dest(cfg.paths.momentLocales));
 });
@@ -383,36 +403,27 @@ gulp.task('js:ckeditor:beautify', function() {
 		.pipe(gulp.dest(cfg.paths.static + 'ckeditor/'));
 });
 
-gulp.task('js:webpack', function(callback) {
-	webpack(webpackCfg, function(err, stats) {
-
-		if (err)
-		{
-			if (cfg.watch)
-			{
-				webpackError(err);
-			}
-			else
-			{
-				throw new gutil.PluginError('webpack', err);
-			}
-		}
-		else if (stats && stats.compilation && stats.compilation.errors && stats.compilation.errors[0])
-		{
-			if (cfg.watch)
-			{
-				_.each(stats.compilation.errors, webpackError);
-			}
-			else
-			{
-				throw new gutil.PluginError('webpack', stats.compilation.errors[0]);
-			}
-		}
-
-        callback();
-    });
+gulp.task('js:clean', function() {
+	return cleanDir(cfg.paths.staticJS + '/**/*.js');
 });
 
+gulp.task('js:webpack:main', function(callback) {
+	webpack(initWebpackCfg(webpackCfgBuilder()), webpackCallback(callback));
+});
+
+gulp.task('js:webpack:next', function(callback) {
+	if (cfg.next)
+	{
+		webpack(initWebpackCfg(webpackCfgBuilder(true)), webpackCallback(callback));
+	}
+	else
+	{
+		callback();
+	}
+});
+
+gulp.task('js:webpack', ['js:webpack:main', 'js:webpack:next']);
+
 gulp.task('js:app', ['js:webpack'], function() {
 	return gulp.src(cfg.paths.staticJS + cfg.paths.js.app.name)
 		.pipe(header(getHead() + '\n'))
@@ -432,8 +443,12 @@ gulp.task('js:admin', ['js:webpack'], function() {
 // - min
 gulp.task('js:min', ['js:app', 'js:admin', 'js:validate'], function() {
 	return gulp.src(cfg.paths.staticJS + '*.js')
+		.pipe(ignore.exclude('*.next.js'))
 		.pipe(replace(/"rainloop\/v\/([^\/]+)\/static\/js\/"/g, '"rainloop/v/$1/static/js/min/"'))
-		.pipe(uglify(cfg.uglify))
+		.pipe(uglify({
+			mangle: true,
+			compress: true
+		}))
 		.pipe(eol('\n', true))
 		.pipe(gulp.dest(cfg.paths.staticMinJS))
 		.on('error', gutil.log);
@@ -640,10 +655,20 @@ gulp.task('rainloop:owncloud:shortname', ['rainloop:owncloud:zip'], function(cal
 gulp.task('rainloop:owncloud:sign', ['rainloop:owncloud:shortname'], signFileTask);
 
 // MAIN
-gulp.task('js:pgp', ['js:openpgp', 'js:openpgpworker']);
-gulp.task('js:moment', ['js:moment:locales']);
+gulp.task('moment', ['moment:locales']);
+gulp.task('openpgp', ['js:openpgp', 'js:openpgpworker']);
+
+gulp.task('js', ['js:libs', 'js:min']);
+gulp.task('css', ['css:min']);
+
+gulp.task('vendors', ['moment', 'openpgp', 'ckeditor', 'fontastic', 'lightgallery']);
+
+gulp.task('clean', ['js:clean', 'css:clean']);
+
+gulp.task('default', function(callback) {
+	runSequence('clean', ['js', 'css', 'vendors'], callback);
+});
 
-gulp.task('default', ['js:libs', 'js:pgp', 'js:moment', 'js:min', 'css:min', 'ckeditor', 'fontastic', 'lightgallery']);
 gulp.task('fast', ['js:app', 'js:admin', 'css:main']);
 
 gulp.task('rainloop:start', ['rainloop:copy', 'rainloop:setup']);

package.json

@@ -53,8 +53,7 @@
     "babel-loader": "^6.1.0",
     "babel-plugin-transform-runtime": "^6.9.0",
     "babel-preset-es2015": "^6.13.2",
-    "babel-preset-es2015-loose": "^7.0.0",
-    "babel-preset-es2015-loose-native-modules": "^1.0.0",
+    "babel-preset-es2016": "^6.11.3",
     "babel-preset-stage-0": "^6.5.0",
     "babel-runtime": "^6.1.18",
     "es6-promise-polyfill": "^1.2.0",
@@ -66,9 +65,11 @@
     "gulp-concat-util": "^0.5.5",
     "gulp-eol": "^0.1.2",
     "gulp-eslint": "^3.0.1",
-    "gulp-header": "^1.8.7",
+    "gulp-filter": "^4.0.0",
+    "gulp-header": "^1.8.8",
     "gulp-if": "^2.0.1",
-    "gulp-less": "1.3.6",
+    "gulp-ignore": "^2.0.1",
+    "gulp-less": "^3.1.0",
     "gulp-livereload": "~3.8.0",
     "gulp-notify": "~2.2.0",
     "gulp-plumber": "^1.1.0",
@@ -105,6 +106,7 @@
     "raw-loader": "^0.5.1",
     "rifraf": "^2.0.2",
     "rimraf": "^2.5.4",
+    "run-sequence": "^1.2.2",
     "simplestatemanager": "^3.1.3",
     "tinycon": "github:tommoor/tinycon",
     "underscore": "^1.8.3",

rainloop/v/0.0.0/app/libraries/RainLoop/Actions.php

@@ -1947,6 +1947,7 @@ NewThemeLink IncludeCss LoadingDescriptionEsc TemplatesLink LangLink IncludeBack
 
 		$aResult['StaticLibJsLink'] = $this->StaticPath('js/'.($bAppJsDebug ? '' : 'min/').'libs.js');
 		$aResult['StaticAppJsLink'] = $this->StaticPath('js/'.($bAppJsDebug ? '' : 'min/').($bAdmin ? 'admin' : 'app').'.js');
+		$aResult['StaticAppJsNextLink'] = $this->StaticPath('js/'.($bAdmin ? 'admin' : 'app').'.next.js'); // todo min
 		$aResult['StaticEditorJsLink'] = $this->StaticPath('ckeditor/ckeditor.js');
 
 		$aResult['EditorDefaultType'] = \in_array($aResult['EditorDefaultType'], array('Plain', 'Html', 'HtmlForced', 'PlainForced')) ?

vendors/bootstrap/.code-changed

@@ -0,0 +1 @@
+

vendors/bootstrap/less/navbar.less

@@ -185,7 +185,8 @@
 .navbar-static-top .container,
 .navbar-fixed-top .container,
 .navbar-fixed-bottom .container {
-  #grid > .core > .span(@gridColumns);
+  // #grid > .core > .span(@gridColumns); // (less 1.3.6 > 3.1.0)
+  width: (@gridColumnWidth * @gridColumns) + (@gridGutterWidth * (@gridColumns - 1));
 }
 
 // Fixed to top

vendors/inputosaurus/.code-changed

@@ -0,0 +1 @@
+

vendors/jquery-nanoscroller/.code-changed

@@ -0,0 +1 @@
+

vendors/keymaster/.code-changed

@@ -0,0 +1 @@
+

webpack.config.builder.js

@@ -0,0 +1,125 @@
+
+var
+	path = require('path'),
+	webpack = require('webpack'),
+	devPath = path.resolve(__dirname, 'dev');
+
+module.exports = function(es6) {
+	return {
+		entry: es6 ? {
+			'app.next': __dirname + '/dev/app.jsx',
+			'admin.next': __dirname + '/dev/admin.jsx'
+		} : {
+			'boot': __dirname + '/dev/boot.jsx',
+			'app': __dirname + '/dev/app.jsx',
+			'admin': __dirname + '/dev/admin.jsx'
+		},
+		output: {
+			pathinfo: true,
+			path: __dirname + '/rainloop/v/0.0.0/static/js/',
+			filename: '[name].js',
+			publicPath: 'rainloop/v/0.0.0/static/js/'
+		},
+		plugins: [
+			new webpack.optimize.OccurrenceOrderPlugin()
+		],
+		resolve: {
+			modules: [devPath, 'node_modules'],
+			extensions: ['', '.js', '.jsx'],
+			alias: {
+				'Opentip': __dirname  + '/dev/External/Opentip.js',
+				'ko': __dirname  + '/dev/External/ko.js'
+			}
+		},
+		module: {
+			loaders: [
+				{
+					test: /\.jsx?$/,
+					loader: 'babel',
+					include: [devPath],
+					query: !es6 ? {
+						cacheDirectory: true,
+						presets: [['es2015', {loose: true, modules: false}], 'es2016', 'stage-0'],
+						plugins: ['transform-runtime']
+					} : {
+						cacheDirectory: true,
+						plugins: [
+// es2015
+["transform-es2015-template-literals", {loose: true}],
+"transform-es2015-literals",
+"transform-es2015-function-name",
+// ["transform-es2015-arrow-functions")],
+"transform-es2015-block-scoped-functions",
+// ["transform-es2015-classes", loose],
+// "transform-es2015-object-super",
+"transform-es2015-shorthand-properties",
+"transform-es2015-duplicate-keys",
+["transform-es2015-computed-properties", {loose: true}],
+["transform-es2015-for-of", {loose: true}],
+"transform-es2015-sticky-regex",
+"transform-es2015-unicode-regex",
+// "check-es2015-constants",
+//["transform-es2015-spread", {loose: true}],
+// "transform-es2015-parameters",
+//["transform-es2015-destructuring", {loose: true}],
+// "transform-es2015-block-scoping",
+"transform-es2015-typeof-symbol",
+// ["transform-regenerator", { async: false, asyncGenerators: false }],
+
+// es2016
+"transform-exponentiation-operator",
+
+// stage-0
+"transform-do-expressions",
+"transform-function-bind",
+
+// stage-1
+"transform-class-constructor-call",
+"transform-export-extensions",
+
+// stage-2
+"transform-class-properties",
+"transform-object-rest-spread",
+"transform-decorators",
+
+// stage-3
+"syntax-trailing-function-commas",
+"transform-async-to-generator",
+"transform-exponentiation-operator",
+
+// runtime
+'transform-runtime'
+						]
+					}
+				},
+				{
+					test: /\.(html|css)$/,
+					loader: 'raw',
+					include: [devPath]
+				},
+				{
+					test: /\.json$/,
+					loader: 'json',
+					include: [devPath]
+				}
+			]
+		},
+		externals: {
+			'window': 'window',
+			'progressJs': 'window.progressJs',
+			'moment': 'window.moment',
+			'ifvisible': 'window.ifvisible',
+			'crossroads': 'window.crossroads',
+			'hasher': 'window.hasher',
+			'Jua': 'window.Jua',
+			'Autolinker': 'window.Autolinker',
+			'Tinycon': 'window.Tinycon',
+			'ssm': 'window.ssm',
+			'key': 'window.key',
+			'_': 'window._',
+			'qr': 'window.qr',
+			'Promise': 'window.Promise',
+			'$': 'window.jQuery'
+		}
+	}
+};

webpack.config.js

@@ -1,73 +0,0 @@
-
-var
-	path = require('path'),
-	webpack = require('webpack'),
-	jsLoaderQuery = {
-		cacheDirectory: true,
-		presets: ['es2015-loose-native-modules', 'stage-0']
-	}
-;
-
-module.exports = {
-	entry: {
-		'boot': __dirname + '/dev/boot.jsx',
-		'app': __dirname + '/dev/app.jsx',
-		'admin': __dirname + '/dev/admin.jsx'
-	},
-	output: {
-		pathinfo: true,
-		path: __dirname + '/rainloop/v/0.0.0/static/js/',
-		filename: '[name].js',
-		publicPath: 'rainloop/v/0.0.0/static/js/'
-	},
-//	devtool: "#source-map",
-	plugins: [
-//		new webpack.optimize.CommonsChunkPlugin('common.js'),
-		new webpack.optimize.OccurrenceOrderPlugin()
-	],
-	resolve: {
-		modules: [path.resolve(__dirname, 'dev'), 'node_modules'],
-		extensions: ['', '.js', '.jsx'],
-		alias: {
-			'Opentip': __dirname  + '/dev/External/Opentip.js',
-			'ko': __dirname  + '/dev/External/ko.js'
-		}
-	},
-	module: {
-		loaders: [
-			{
-				test: /\.(html|css)$/,
-				loader: 'raw',
-				exclude: /(node_modules|bower_components|vendors)/
-			},
-			{
-				test: /\.json$/,
-				loader: 'json',
-				exclude: /(node_modules|bower_components|vendors)/
-			},
-			{
-				test: /\.jsx$/,
-				loader: 'babel',
-				exclude: /(node_modules|bower_components|vendors)/,
-				query: jsLoaderQuery
-			}
-		]
-	},
-	externals: {
-		'window': 'window',
-		'progressJs': 'window.progressJs',
-		'moment': 'window.moment',
-		'ifvisible': 'window.ifvisible',
-		'crossroads': 'window.crossroads',
-		'hasher': 'window.hasher',
-		'Jua': 'window.Jua',
-		'Autolinker': 'window.Autolinker',
-		'Tinycon': 'window.Tinycon',
-		'ssm': 'window.ssm',
-		'key': 'window.key',
-		'_': 'window._',
-		'qr': 'window.qr',
-		'Promise': 'window.Promise',
-		'$': 'window.jQuery'
-	}
-};