binhend 1.4.4 → 1.5.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "binhend",
-  "version": "1.4.4",
+  "version": "1.5.1",
   "description": "",
   "main": "index.js",
   "author": "Nguyen Duc Binh",

package/src/binh.web.builder.js

@@ -135,72 +135,71 @@ function WebBuilder(binh, Binh) {
         return Binh;
     };
 
-    Binh.web = function(webPath, sourcePath, modulePath) {
-        switch (arguments.length) {
-            case 1:
-                Binh.webStatic(webPath);
-                break;
-
-            case 2:
-                Binh.webApp(sourcePath, webPath);
-                break;
-        
-            default:
-                if (arguments.length > 2) {
-                    Binh.webApp(webPath, sourcePath, modulePath);
-                }
-                break;
-        }
-
-        return Binh;
-    };
-
     Binh.webStatic = function(webPath) {
-        if (!isString(webPath)) return Binh;
-        Binh.web.value = getAbsolutePaths(webPath).web;
+        Binh.web.value = getAbsolutePath(webPath);
         return Binh;
     };
 
-    Binh.webApp = function(sourcePath, webPath, modulePath) {
-        if (!isString(sourcePath)) return Binh;
-
-        modulePath = isString(modulePath) ? modulePath : isString(webPath) ? webPath : null;
-
-        var { source, web, module } = getAbsolutePaths(webPath, sourcePath, modulePath);
+    Binh.webModule = function({ source, module }, onDone) {
+        if (!(isString(source) && isString(module))) {
+            throw new Error(`[BINHEND][WEB-BUILDER] Require paths for source and module. Current: { source: ${source}, module: ${module} }`);
+        }
+        
+        var { source, module } = getAbsolutePaths({ source, module });
 
-        ComponentFormat.generate(source, module, () => ComponentBuild.generate(source, web, module));
+        ComponentFormat.generate(source, module, onDone);
 
-        Binh.web.value = web;
+        return Binh;
+    };
 
+    Binh.webModuleBundle = function({ source, module, web }) {
+        var { source, module, web } = processWebBuildPaths({ source, module, web });
+        ComponentBuild.bundle({ source, module, web });
         return Binh;
     };
 
-    Binh.webModule = function(sourcePath, modulePath) {
-        if (!isString(sourcePath)) return Binh;
-        
-        var { source, module } = getAbsolutePaths(null, sourcePath, modulePath);
+    Binh.webModuleLazy = function({ source, module, web }) {
+        var { source, module, web } = processWebBuildPaths({ source, module, web });
+        ComponentBuild.lazyload({ source, module, web });
+        return Binh;
+    };
 
-        ComponentFormat.generate(source, module);
+    Binh.webBundle = function({ source, module, web }) {
+        var absolutePaths = processWebBuildPaths({ source, module, web });
+        return Binh.webModule({ source, module }, () => ComponentBuild.bundle(absolutePaths));
+    };
 
-        return Binh;
+    Binh.webLazy = function({ source, module, web }) {
+        var absolutePaths = processWebBuildPaths({ source, module, web });
+        return Binh.webModule({ source, module }, () => ComponentBuild.lazyload(absolutePaths));
     };
 
-    function getAbsolutePaths(webPath, sourcePath, modulePath) {
-        webPath = isString(webPath) ? webPath : 'web/app';
-        modulePath = isString(modulePath) ? modulePath : 'web/modules';
+    Binh.web = Binh.webBundle;
 
-        var rootpath = Binh.getRootpath(),
-        sourcePathAbsolute = isString(sourcePath) ? path.join(rootpath, sourcePath) : null,
-        webPathAbsolute = path.join(rootpath, webPath),
-        modulePathAbsolute = path.join(rootpath, modulePath);
+    function getAbsolutePath(relativePath) {
+        return isString(relativePath) ? path.join(Binh.getRootpath(), relativePath) : null;
+    }
 
+    function getAbsolutePaths({ source, module, web }) {
         return {
-            web: webPathAbsolute,
-            source: sourcePathAbsolute,
-            module: modulePathAbsolute
+            source: getAbsolutePath(source),
+            module: getAbsolutePath(module),
+            web: getAbsolutePath(web)
         };
     }
 
+    function processWebBuildPaths({ source, module, web }) {
+        if (!(isString(source) && isString(module) && isString(web))) {
+            throw new Error(`[BINHEND][WEB-BUILDER] Require paths for source, module and web. Current: { source: ${source}, module: ${module}, web: ${web} }`);
+        }
+
+        var absolutePaths = getAbsolutePaths({ source, module, web });
+
+        Binh.web.value = absolutePaths.web;
+
+        return absolutePaths;
+    }
+
     function isString(input) {
         return typeof input === 'string';
     }

package/src/code.js

@@ -143,6 +143,20 @@ function getRelativeFilePath(filePath, rootPath) {
 getRelativeFilePath.cache = {};
 
 function bundle(component, rootPath) {
+    var codes = getComponentBaseCodes(component, rootPath);
+    
+    var codeOfDependencies = getCodeOfDependencies(component, rootPath);
+    if (codeOfDependencies) codes.push(codeOfDependencies);
+
+    return codes.join('\r\n');
+}
+
+function lazyload(component, rootPath) {
+    var codes = getComponentBaseCodes(component, rootPath);
+    return codes.join('\r\n');
+}
+
+function getComponentBaseCodes(component, rootPath) {
     var dependencyDelaration = getDependencyDelaration(component, rootPath);
     var optionCode = generateOptionCode(component, '', rootPath);
     var componentCode = component.toString();
@@ -154,14 +168,12 @@ function bundle(component, rootPath) {
     var codes = [];
 
     if (componentCode) {
-        codes.push(`Binh.${component.type}(${component.type})${optionCode};`);
+        var url = getRelativeFilePath(component.filename, rootPath);
+        codes.push(`Binh.${component.type}('${url}', ${component.type})${optionCode};`);
         codes.push(`${componentCode}\r\n`);
     }
-    
-    var codeOfDependencies = getCodeOfDependencies(component, rootPath);
-    if (codeOfDependencies) codes.push(codeOfDependencies);
 
-    return codes.join('\r\n');
+    return codes;
 }
 
 function getHtmlTagDeclaration(component) {
@@ -172,40 +184,54 @@ function getHtmlTagDeclaration(component) {
     return `var {${variablesList}} = Binh.els;\r\n`;
 }
 
-function htmltags(component) {
-    var tags = distinctValues(component, 'htmltags');
+function processElementTags(tags) {
+    var
+    variables = tags.join(','),
+    tagnames = tags.map((tag) => JSON.stringify(tag)).join(',');
 
+    return [variables, tagnames];
+}
+
+function htmlTags(tags) {
     if (!tags.length) return '';
-    
-    var variablesList = tags.join(',');
-    tags = tags.map((tag) => JSON.stringify(tag));
 
+    var [variables, tagnames] = processElementTags(tags);
+    
     return [
-        `Binh.els = Binh.element(${tags.join(',')});`,
-        '',
-        `var {${variablesList}} = Binh.els;`,
-        ''
+        `Binh.els = Binh.element(${tagnames});`, '',
+        `var {${variables}} = Binh.els;`, ''
     ]
     .join(`\r\n`);
 }
 
-function svgtags(component) {
-    var tags = distinctValues(component, 'svgtags');
+function bundleHtmlTags(component) {
+    return htmlTags(distinctValues(component, 'htmltags'));
+}
+
+function lazyHtmlTags(component) {
+    return htmlTags(component.htmltags);
+}
 
+function svgTags(tags) {
     if (!tags.length) return '';
-    
-    var variablesList = tags.join(',');
-    tags = tags.map((tag) => JSON.stringify(tag));
+
+    var [variables, tagnames] = processElementTags(tags);
 
     return [
-        `Binh.SVGs = Binh.svgs(${tags.join(',')});`,
-        '',
-        `var {${variablesList}} = Binh.SVGs;`,
-        ''
+        `Binh.SVGs = Binh.svgs(${tagnames});`, '',
+        `var {${variables}} = Binh.SVGs;`, ''
     ]
     .join(`\r\n`);
 }
 
+function bundleSvgTags(component) {
+    return svgTags(distinctValues(component, 'svgtags'));
+}
+
+function lazySvgTags(component) {
+    return svgTags(component.svgtags);
+}
+
 function prequire(component, codes) {
     var code = '', links = distinctValues(component, 'links');
 
@@ -264,9 +290,9 @@ function uniquefy(arrays) {
 }
 
 module.exports = {
-    bundle,
-    htmltags,
-    svgtags,
+    bundle, lazyload,
+    bundleHtmlTags, lazyHtmlTags,
+    bundleSvgTags, lazySvgTags,
     prequire,
     IIF
 };

package/src/component.build.js

@@ -1,12 +1,12 @@
 
 const { parse } = require('path');
-const { scanNestedFiles, cloneFile, writeToFile, makeFullDirPath } = require('./component.file');
+const { scanNestedFiles, cloneFileIfNew, writeToFileIfNew, makeFullDirPath } = require('./component.file');
 const CodeFormat = require('./code');
 const Component = require('./component');
 const UglifyJS = require('uglify-js');
 const BeautifyJS = require('js-beautify/js');
 
-function generate(sourceRootPath, outputRootPath, stageRootPath) {
+function processEachFile({ source: sourceRootPath, web: outputRootPath, module: stageRootPath }, buildCodeMethod) {
     if (sourceRootPath == undefined || outputRootPath == undefined) return;
     stageRootPath = stageRootPath || outputRootPath;
     console.info('[BINHEND][COMPONENT] Build web components from:', stageRootPath);
@@ -19,39 +19,62 @@ function generate(sourceRootPath, outputRootPath, stageRootPath) {
         makeFullDirPath(fileOutputPath);
 
         if (parse(file.name).ext !== '.js') {
-            return cloneFile(fileSourcePath, fileOutputPath);
+            return cloneFileIfNew(fileSourcePath, fileOutputPath);
         }
 
         try {
             var component = require(file.path);
         }
         catch (error) {
-            return cloneFile(fileSourcePath, fileOutputPath);
+            return cloneFileIfNew(fileSourcePath, fileOutputPath);
         }
 
         if (!(component instanceof Function) || component.constructor !== Component) {
-            return cloneFile(fileSourcePath, fileOutputPath);
+            return cloneFileIfNew(fileSourcePath, fileOutputPath);
         }
 
-        var code = joinCodes(component, stageRootPath);
-
+        var code = buildCodeMethod(component, stageRootPath);
         code = Component.minification ? minifyCode(code) : beautifyCode(code);
 
-        writeToFile(fileOutputPath, code);
+        writeToFileIfNew(fileOutputPath, code);
     });
 }
 
-function joinCodes(component, rootPath) {
-    var mainCode = CodeFormat.prequire(component, [
-        `var _Binh = Binh;\r\n`,
-        CodeFormat.htmltags(component),
-        CodeFormat.svgtags(component),
-        CodeFormat.bundle(component, rootPath)
+function buildBundleCode(component, rootPath, shouldBundle = true) {
+    return wrapCode(component, [
+        CodeFormat.bundleHtmlTags(component),
+        CodeFormat.bundleSvgTags(component),
+        CodeFormat.bundle(component, rootPath, shouldBundle)
+    ]);
+}
+
+function generate({ source, web, module }) {
+    processEachFile({ source, web, module }, buildBundleCode);
+}
+
+function bundle({ source, web, module }) {
+    generate({ source, web, module });
+}
+
+function lazyload({ source, web, module }) {
+    processEachFile({ source, web, module }, buildLazyCode);
+}
+
+function buildLazyCode(component, rootPath) {
+    return wrapCode(component, [
+        CodeFormat.lazyHtmlTags(component),
+        CodeFormat.lazySvgTags(component),
+        CodeFormat.lazyload(component, rootPath)
     ]);
+}
+
+function wrapCode(component, inputCodes) {
+    var stackOfCodes = [`var _Binh = Binh;\r\n`];
+    stackOfCodes.push.apply(stackOfCodes, inputCodes);
 
     return CodeFormat.IIF([
         `var Binh = window.Binh;`,
-        mainCode
+        CodeFormat.prequire(component, stackOfCodes)
     ]);
 }
 
@@ -66,5 +89,5 @@ function beautifyCode(code) {
 }
 
 module.exports = {
-    generate
+    generate, bundle, lazyload
 };

package/src/component.file.js

@@ -1,10 +1,7 @@
 
-const { readdir, statSync, existsSync, copyFile, writeFile, mkdirSync } = require('fs');
+const { readdir, statSync, existsSync, copyFile, writeFile, writeFileSync, readFileSync, mkdirSync } = require('fs');
 const { join, dirname } = require('path');
 
-// TODO
-// [-] Enhance code by removing sync logics (except for existsSync, mkdirSync): readdir, readFileSync, (statSync?)
-
 function getItemInfo(itemPath) {
     var info = {};
 
@@ -91,6 +88,22 @@ function cloneFile(filepath, outpath) {
     });
 }
 
+function cloneFileIfNew(filepath, outpath) {
+    if (isSameFile(filepath, outpath)) return;
+    cloneFile(filepath, outpath);
+}
+
+function isSameFile(filePathA, filePathB) {
+    var sameFile = false;
+
+    if (existsSync(filePathA) && existsSync(filePathB)) {
+        var fileA = readFileSync(filePathA), fileB = readFileSync(filePathB);
+        sameFile = fileA.equals(fileB);
+    }
+
+    return sameFile;
+}
+
 function makeFullDirPath(filePath) {
     var dirPath = dirname(filePath);
     if (existsSync(dirPath)) return true;
@@ -106,6 +119,29 @@ function writeToFile(fileOutputPath, content) {
     });
 }
 
+function writeToFileIfNew(fileOutputPath, content) {
+    try {
+        if (isSameContent(fileOutputPath, content)) return false;
+        writeFileSync(fileOutputPath, content, { encoding: 'utf8', flag: 'w' });
+        return true;
+    }
+    catch (error) {
+        printError('Failed writing file', fileOutputPath, error);
+        return false;
+    }
+}
+
+function isSameContent(filePath, content) {
+    var sameContent = false;
+
+    if (existsSync(filePath)) {
+        var current = readFileSync(filePath, { encoding: 'utf8', flag: 'r' });
+        sameContent = content === current;
+    }
+
+    return sameContent;
+}
+
 function printError(message, id, error) {
     console.error(`[BINHEND][COMPONENT] ${message}:`, id);
     console.error('[BINHEND][COMPONENT] Error details:', error);
@@ -117,7 +153,10 @@ module.exports = {
     scanFiles,
     scanNestedFiles,
     cloneFile,
+    cloneFileIfNew,
     makeFullDirPath,
     writeToFile,
+    writeToFileIfNew,
+    isSameContent,
     printError
 };

package/src/component.format.js

@@ -1,10 +1,7 @@
 
-const { writeFileSync, readFileSync } = require('fs');
+const { readFileSync } = require('fs');
 const { parse } = require('path');
-const { scanNestedFiles, cloneFile, printError, makeFullDirPath } = require('./component.file');
-
-// TODO
-// [-] Enhance code by removing sync logics (except for existsSync, mkdirSync): readdir, readFileSync, (statSync?)
+const { scanNestedFiles, cloneFileIfNew, printError, makeFullDirPath, writeToFileIfNew } = require('./component.file');
 
 const PREFIX_CODE =
 `var { context, tag, svg, script, require, css } = binh.context(module, require);
@@ -29,16 +26,17 @@ function generate(sourceRootPath, outputRootPath, callbackDone) {
     
             if (fileExtension === '.css') {
                 var cssModuleCode = 'binh.css(module);';
-                writeFileSync(fileOutputPath + '.js', cssModuleCode, { encoding: 'utf8', flag: 'w' });
+                writeToFileIfNew(fileOutputPath + '.js', cssModuleCode);
             }
     
             if (fileExtension !== '.js') {
-                return cloneFile(fileSourcePath, fileOutputPath);
+                return cloneFileIfNew(fileSourcePath, fileOutputPath);
             }
 
             var content = readFileSync(fileSourcePath, { encoding: 'utf8', flag: 'r' });
             var code = PREFIX_CODE + content.trim() + '\r\n\r\n;binh.final(module);';
-            writeFileSync(fileOutputPath, code, { encoding: 'utf8', flag: 'w' });
+
+            writeToFileIfNew(fileOutputPath, code);
         }
         catch (error) {
             printError('Failed formatting file:', fileSourcePath, error);

package/test.js

@@ -1,22 +1,48 @@
+// const path = require('path');
+
+// function parseFilePathToVariableName(filePath) {
+//     return path.parse(filePath).name.replace(/-/g, '').replace(/\W.*/, '');
+//     // try {
+//     // }
+//     // catch (error) {
+//     //     return '';
+//     // }
+// };
+
+// // console.log(parseFilePathToVariableName(1));
+// console.log(parseFilePathToVariableName(''));
+// // console.log(parseFilePathToVariableName(null));
+// // console.log(parseFilePathToVariableName());
+// // console.log(parseFilePathToVariableName('abc.js'));
+// // console.log(parseFilePathToVariableName('abc,.js'));
+// // console.log(parseFilePathToVariableName('abc.css.js'));
+// // console.log(parseFilePathToVariableName('./uhm/abc.css.js'));
+// console.log(parseFilePathToVariableName('.css.js'));
+
+// var abc = function ab() { return 123; };
+// var cc = () => {};
+
+// !function(callback1, callback2) {
+//     delete callback1.name;
+//     console.log(callback1.toString());
+//     console.log(callback2.toString());
+// }(abc, cc);
+
+// console.log(abc.toString());
+// console.log(cc.toString());
+
 const path = require('path');
 
+// console.log(__dirname);
+// console.log(path.join(__dirname, null));
+
+function abc({ a, b, c }) {
+    console.log(path.join(__dirname, a));
+    console.log(path.join(__dirname, b));
+    console.log(path.join(__dirname, c));
+}
 
-function parseFilePathToVariableName(filePath) {
-    return path.parse(filePath).name.replace(/-/g, '').replace(/\W.*/, '');
-    // try {
-    // }
-    // catch (error) {
-    //     return '';
-    // }
-};
-
-
-// console.log(parseFilePathToVariableName(1));
-console.log(parseFilePathToVariableName(''));
-// console.log(parseFilePathToVariableName(null));
-// console.log(parseFilePathToVariableName());
-// console.log(parseFilePathToVariableName('abc.js'));
-// console.log(parseFilePathToVariableName('abc,.js'));
-// console.log(parseFilePathToVariableName('abc.css.js'));
-// console.log(parseFilePathToVariableName('./uhm/abc.css.js'));
-console.log(parseFilePathToVariableName('.css.js'));
+abc({
+    a: 'a',
+    b: 'b'
+});