gulpfile.js

var gulp = require("gulp");
//var browserSync = require('browser-sync');
var webpackConfig = require("./webpack.config.js");
var webpack = require('webpack');
var gulpWebpack = require('gulp-webpack');
var elasticlunr = require('elasticlunr');
var glob = require('glob');
var fs = require('fs');
var configRegex = /\[(.*)\]/;
var shelljs = require('shelljs');
var runSequence = require('gulp4-run-sequence');

function extend(copied, first, second, deep) {
    var result = copied || {};
    var length = arguments.length;
    if (deep) {
        length = length - 1;
    }
    var _loop_1 = function (i) {
        if (!arguments_1[i]) {
            return 'continue';
        }
        var obj1 = arguments_1[i];
        Object.keys(obj1).forEach(function (key) {
            var src = result[key];
            var copy = obj1[key];
            var clone;
            if (deep && isObject(copy)) {
                clone = isObject(src) ? src : {};
                result[key] = extend({}, clone, copy, true);
            }
            else {
                result[key] = copy;
            }
        });
    };
    var arguments_1 = arguments;
    for (var i = 1; i < length; i++) {
        _loop_1(i);
    }
    return result;
}
function isObject(obj) {
    var objCon = {};
    return (!isNullOrUndefined(obj) && obj.constructor === objCon.constructor);
}

 function isNullOrUndefined(value) {
    return value === undefined || value === null;
}

gulp.task('scripts', gulp.series(function (done) {
    var ts = require('gulp-typescript');
    var tsProject = ts.createProject('tsconfig.json', { typescript: require('typescript') });

    var tsResult = gulp.src(['./**/*.ts', './**/*.tsx', '!./node_modules/**/*.ts', '!./node_modules/**/*.tsx','!./samples/**/*.tsx'], { base: '.' })
        .pipe(tsProject());
    tsResult.js.pipe(gulp.dest('./'))
        .on('end', function () {
            done();
        });
}));
gulp.task('create-locale', gulp.series(function (done) {
    var localeJson = glob.sync('./src/**/locale.json', { silent: true });
    if(localeJson.length) {
       // baseUtil;
    var obj = {};
    for (var i = 0; i < localeJson.length; i++) {
        var compentLocale = JSON.parse(fs.readFileSync(localeJson[i]));
        obj = extend({},obj,compentLocale,true);
    }
    fs.writeFileSync('./src/common/locale-string.ts', 'export let Locale: Object='+JSON.stringify(obj)+';');
} else {
    fs.writeFileSync('./src/common/locale-string.ts', 'export let Locale: Object={};');
}
done();
}));

gulp.task('serve', gulp.series(function () {
    shelljs.exec('node --max-old-space-size=8192 node_modules/gulp/bin/gulp serve-max', { silent: false });
}));

/**
 * Compile styles
 */
gulp.task('styles', gulp.series(function () {
    var sass = require('gulp-sass')(require('sass'));
    return gulp.src(['./**/*.scss', '!./node_modules/**/*.scss'], { base: './' })
        .pipe(sass({
            outputStyle: 'expanded',
            includePaths: './node_modules/@syncfusion/'
        }))
        .pipe(gulp.dest('.'));
}));

gulp.task('generate-router', gulp.series(function (done) {
    var imports = '';
    var compRoutes = '';
    var allconfig = '';
    var categories = '{';
    var files = glob.sync('./src/**/config.tsx');
    elasticlunr.clearStopWords();
    var instance = elasticlunr(function () {
        this.addField('component');
        this.addField('name');
        this.setRef('uid');
    });
    var uid = 0;
    for (var file of files) {
        var routeconfig = '';
        var localimports = '';
        var routes = ''
        var path = file.slice(0, file.lastIndexOf('/'));
        var compName = path.slice(path.lastIndexOf('/') + 1);
        var componentName = compName.replace(/-/g, '');
        var curfile = JSON.stringify(fs.readFileSync(file, 'utf8'));
        var trimmedFile = curfile.replace(/\\n|\\r/g, '');
        routeconfig = trimmedFile.match(configRegex)[1];
        routeconfig = "{\"value\":[" + routeconfig + "]}";
        routeconfig = routeconfig.replace(/'/g, '"');
        var configCollection = JSON.parse(routeconfig).value;
        var category = {};
        for (var configs of configCollection) {
            var isExists = fs.existsSync(path + "/" + configs.path.split('/')[1] + '-functional.tsx');
            // Based on the gulp arguments demo samples run with functional or class snippet.
            // `gulp serve` - Loads the functional component samples preview for React. If demo having functional component samples then SB run with functional snippet otherwise run with class snippet.
            // `gulp serve --class` - Loads the class component samples preview for React.
            if (process.argv[3] == '--class' || !isExists) {
                localimports += 'import { ' + configs.component + ' } from \'./' + configs.path.split('/')[1] + '\';\n';
            } else if (isExists) {
                localimports += 'import ' + configs.component + ' from \'./' + configs.path.split('/')[1] + '-functional' + '\';\n';
            }
            routes += '         <Route  path=\'/:theme/' + configs.path + '\' Component={ ' + configs.component + ' }/>\n';
            category[configs.path.split('/')[1]] = { 'name': configs.name, 'category': configs.category };
            var curSearchObject = {name:configs.name,uid:uid,path:configs.path};
            curSearchObject.component =  configs.path.split('/')[0].replace(/-/g,'');
            var url = configs.path.split('/')[1];
            instance.addDoc(curSearchObject);
            uid++;
        }
        category['defaultSample'] = configCollection[0].path;
        var routeContent = fs.readFileSync('./src/common/templates/route-template', 'utf8');
        routeContent = routeContent.replace(/{{routerimports}}/, localimports);
        routeContent = routeContent.replace(/{{component}}/g,componentName);
        routeContent = routeContent.replace(/{{routes}}/, routes);
        routeContent = routeContent.replace(/{{category}}/,JSON.stringify(category));
        imports += 'import { '+componentName+'Routes } from \'../'+ path.split('/')[2] + '/' + componentName+'-routes\';\n';
        categories += '"' + compName + '": ' + JSON.stringify(category) + ',\n';
        compRoutes += '        {' +componentName+'Routes}\n';
        fs.writeFileSync(path+'/'+componentName+'-routes.tsx', routeContent);
    }
    categories = categories.slice(0, -2) + '\n}';
    var allroutes = fs.readFileSync('./src/common/templates/route-all-template', 'utf8');
    allroutes = allroutes.replace(/{{imports}}/,imports);
    allroutes = allroutes.replace(/{{routerCollection}}/,compRoutes);
    allroutes = allroutes.replace(/{{category}}/, categories);
    fs.writeFileSync('./src/common/all-routes.tsx',allroutes);
    fs.writeFileSync('./src/common/search-index.json', JSON.stringify(instance.toJSON()));
    done();
}));
gulp.task('build', gulp.series(function (done) {
    // var sValue = shelljs.exec('node --max-old-space-size=4096 ./node_modules/gulp/bin/gulp.js react-build', { silent: true });
    if( shelljs.exec('node --max-old-space-size=4096 ./node_modules/gulp/bin/gulp.js react-build').code !==0){
      process.exit(1);   
    }
    done();
}));

gulp.task('react-build', gulp.series(function (done) {
    runSequence('create-locale','generate-router','styles','scripts','bundle','cssfile', done);
}));

gulp.task('bundle', gulp.series(function () {
    return gulp.src("./src/common/index.js")
    .pipe(gulpWebpack(webpackConfig, webpack))
    .pipe(gulp.dest('dist/'));
}));

gulp.task('plnkr-json', gulp.series(function(done) {
    var files = glob.sync('./src/**/*.tsx', { silent: true, ignore: [
        './src/common/**/*.tsx', './src/**/*-routes.tsx', './src/**/config.tsx'] });
    var sys = fs.readFileSync('./src/common/plnk-template/systemjs.config.js','utf8');
    var ind = fs.readFileSync('./src/common/plnk-template/index.html', 'utf8');
    var sBase = fs.readFileSync('./src/common/plnk-template/sample-base.tsx', 'utf8');
    var propPane = fs.readFileSync('./src/common/property-pane.tsx', 'utf8');
    var ajaxRegex = /Ajax\(\'\.\/src\//;
    var sbRegex = /(import[^;]+sample-base[^;]+;)/;
    var gJsonRegex = /import[^;]+\.json[^;]+;/g;
    var jsonRegex = /import[^;]+\.json[^;]+;/;
    var imgRegex = /(<img[^\/]+\/)|(imageUrl)|(background-image: url\((\'|\"|)(\.\/|)src)|((\'|\")(\.\/|)src\/[^\'\"]+.png(\'|\"))/;
    var srcRegex = /(\.\/|)src\//;
    var aSrcRegex = /('|")\.\/src[^'"]+('|")/;
    var cPathRegex = /..\/common\//g;
    var pathRegex = /\'[^\']+\'/;
    var quotesRegex = /(\'|\")/g;
    var impRegex = /import[^;]+\.\/[^;]+;/g;
    var slashRegex = /\.\//;
    var impCssRegex = /import[^'"]+('|")[^'"]+css('|")(;|)/;
    var impPropRegex = /import[^;]+\/property-pane[^;]+;/
    var classRegex = /class [^ ]+/;
    var bgRegex = /background-image: url\(\'\.\/src/g;
    var render = '\nReactDOM.render(<{{:Comp}} />, document.getElementById(\'sample\'));';
    var dSrc = 'demos/src/';
    var link = 'http://cdn.syncfusion.com/ej2/'; //Dependency Packages Link
    var sbLink = 'http://ej2.syncfusion.com/react/'; //Sample Browser support Link
    sys = sys.replace(/{{:CDN_LINK}}/g, link);
    ind = ind.replace(/{{:CDN_LINK}}/g, link);
    var comp;
    for(var i = 0; i < files.length; i++) {
        var plnkr = { 'index.css': '' };
        var name = files[i].slice(files[i].lastIndexOf('/') + 1, files[i].indexOf('.tsx'));
        var path = files[i].slice(0, files[i].lastIndexOf('/') + 1);
        var tsxFile = fs.readFileSync(files[i], 'utf8');
        var className = tsxFile.match(classRegex)[0].slice(6);
        //CSS imports processing
        if(impCssRegex.test(tsxFile)) {
            var styleName = tsxFile.match(impCssRegex)[0].match(/(\'|\")[^\'\"]+(\'|\")/)[0].replace(quotesRegex,'').slice(2);
            var cfile = fs.readFileSync(path + styleName, 'utf8');
            if(imgRegex.test(cfile)) {
                var clines = cfile.split('\n');
                for(var x = 0; x < clines.length; x++) {
                    if(imgRegex.test(clines[x])) {
                        clines[x] = clines[x].replace(srcRegex, sbLink + dSrc);
                    }
                }
                cfile = clines.join('\n');
            }
            plnkr['index.css'] = cfile;
        }
        //Sample-Base Processing
        tsxFile = tsxFile.replace(sbRegex, 'import { SampleBase } from \'./sample-base\';').replace(impCssRegex, '');
        //Property-pane Processing
        if(impPropRegex.test(tsxFile)) {
            tsxFile = tsxFile.replace(impPropRegex, 'import { PropertyPane } from \'./property-pane\';');
            plnkr['app/property-pane.tsx'] = propPane;
        }
        tsxFile = tsxFile + '\nReactDOM.render(<' + className + ' />, document.getElementById(\'sample\'));';
        tsxFile = getStringWithOutDescription(tsxFile, /id(| )=(| )('|")description/);
        tsxFile = getStringWithOutDescription(tsxFile, /('|")action-description/);
        //Background Image Processing
        if(bgRegex.test(tsxFile)) {
            var tLines = tsxFile.split('\n');
            for (var j = 0; j < tLines.length; j++) {
                if(bgRegex.test(tLines[j])) {
                    tLines[j] = tLines[j].slice(0, tLines[j].indexOf('./src')) + 
                        sbLink + 'demos/' + tLines[j].slice(tLines[j].indexOf('src/'));
                }
            }
            tsxFile = tLines.join('\n');
        }
        //Imports Processing other than css, sample base, property-pane, json
        var imports = tsxFile.match(impRegex);
        if(imports.length) {
            for(var y = 0; y < imports.length; y++) {
                if(!sbRegex.test(imports[y]) && !impPropRegex.test(imports[y]) && !jsonRegex.test(imports[y])) {
                    var imFile = imports[y].match(pathRegex)[0].replace(quotesRegex,'').slice(2);
                    plnkr[ imFile ] = fs.readFileSync(path + imFile + '.ts', 'utf8');
                    tsxFile = tsxFile.replace(imports[y], imports[y].replace(slashRegex, '../'));
                }
            }
        }
        //Img processing - sbLink
        if(imgRegex.test(tsxFile)) {
            var tlines = tsxFile.split('\n');
            for(var x = 0; x < tlines.length; x++) {
                if(imgRegex.test(tlines[x])) {
                    tlines[x] = tlines[x].replace(srcRegex, sbLink + dSrc);
                }
            }
            tsxFile = tlines.join('\n');
        }
        //Ajax online link processing - sbLink
        if(ajaxRegex.test(tsxFile)) {
            var tslines = tsxFile.split('\n');
            for(var z = 0; z < tslines.length; z++) {
                if(ajaxRegex.test(tslines[z])) {
                    var aFile = tslines[z].match(aSrcRegex)[0].replace(/\'/g, '').replace(/\"/g, '');
                    plnkr[aFile.slice(2)] = fs.readFileSync(aFile, 'utf8');
                }
            }
            tsxFile = tslines.join('\n');
        }
        //JSON imports processing
        if(jsonRegex.test(tsxFile)) {
            var jsonImports = tsxFile.match(gJsonRegex);
            for(var a = 0; a < jsonImports.length; a++) {
                var jFile = jsonImports[a].match(/\'[^\']+\'/)[0].replace(quotesRegex,'');
                plnkr['app' + jFile.slice(2)] = fs.readFileSync(path + jFile, 'utf8');
            }
        }
        //JSON imports path processing
        if(cPathRegex.test(tsxFile)) {
            tsxFile = tsxFile.replace(cPathRegex, './common/');
        }
        plnkr['systemjs.config.js'] = sys;
        plnkr['index.html'] = ind;
        plnkr['app/index.tsx'] = tsxFile;
        plnkr['app/sample-base.tsx'] = sBase;
        fs.writeFileSync(path + name + '-plnkr.json', JSON.stringify(plnkr), 'utf8');            
        var samplePath = 'samples' + path.slice(5) + name;
        shelljs.mkdir('-p', samplePath);
        samplePath += '/';
        var plFiles = Object.keys(plnkr);
        for (var p = 0; p < plFiles.length; p++) {
            if (plFiles[p].split('/').length === 1) {
                fs.writeFileSync(samplePath + plFiles[p], plnkr[plFiles[p]]);
            } else {
                var dirPath = plFiles[p].split('/');
                shelljs.mkdir('-p', (samplePath + dirPath.splice(0, dirPath.length - 1).join('/')));
                fs.writeFileSync(samplePath + plFiles[p], plnkr[plFiles[p]]);
            }
        }

    }
    done();
}));
function getStringWithOutDescription(code, descRegex) {
        var lines = code.split('\n');
        var desStartLine = null;
        var desEndLine = null;
        var desInsideDivCnt = 0;
        for (var i = 0; i < lines.length; i++) {
            var curLine = lines[i];
            if (desStartLine !== null) {
                if (/<div/g.test(curLine)) {
                    desInsideDivCnt = desInsideDivCnt + 1;
                }
                if (desInsideDivCnt && /<\/div>/g.test(curLine)) {
                    desInsideDivCnt = desInsideDivCnt - 1;
                } else if (!desEndLine && /<\/div>/g.test(curLine)) {
                    desEndLine = i + 1;
                }
            }
            if (descRegex.test(curLine)) {
                desStartLine = i;
	
            }
        }
        if (desEndLine && (desStartLine !== null)) {
            lines.splice(desStartLine, desEndLine - desStartLine);
        }
        return lines.join('\n');
    }
gulp.task('serve-max', gulp.series('react-build', function (done) {
    var browserSync = require('browser-sync');
    var bs = browserSync.create('Essential JS 2 react');
    var options = {
        server: {
            baseDir: './'
        },
        ui: false
    };
    bs.init(options, done);
}));

gulp.task('cssfile', gulp.series(function (done) {
    gulp.src('./node_modules/@syncfusion/ej2/*.css')
    .pipe(gulp.dest('./styles/'));
    done();
}));