binhend 1.4.3 → 1.5.0

package/package.json

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

package/src/binh.web.builder.js

@@ -14,16 +14,25 @@ function WebBuilder(binh, Binh) {
         return {
             context,
             tag: tag.bind(context),
+            svg: svg.bind(context),
             script: script.bind(context),
             require: customRequire.bind(context),
             css: css.bind(context)
         };
     };
 
+    function tagnames(tagNames) {
+        return typeof tagNames === 'string' ? tagNames.split(/\s+/) : [];
+    }
+
     function tag(tagNames) {
-        var tags = typeof tagNames === 'string' ? tagNames.split(/\s+/) : [];
         var htmltags = this.component.htmltags;
-        htmltags.push.apply(htmltags, tags);
+        htmltags.push.apply(htmltags, tagnames(tagNames));
+    }
+
+    function svg(tagNames) {
+        var svgtags = this.component.svgtags;
+        svgtags.push.apply(svgtags, tagnames(tagNames));
     }
 
     function script() {
@@ -60,6 +69,7 @@ function WebBuilder(binh, Binh) {
         component.type = type;
 
         component.htmltags = [];
+        component.svgtags = [];
         component.links = [];
         component.options = { csses: [] };
         component.vars = {};
@@ -125,72 +135,71 @@ function WebBuilder(binh, Binh) {
         return Binh;
     };
 
-    Binh.web = function(webPath, sourcePath, modulePath) {
-        switch (arguments.length) {
-            case 1:
-                Binh.webStatic(webPath);
-                break;
+    Binh.webStatic = function(webPath) {
+        Binh.web.value = getAbsolutePath(webPath);
+        return Binh;
+    };
 
-            case 2:
-                Binh.webApp(sourcePath, webPath);
-                break;
-        
-            default:
-                if (arguments.length > 2) {
-                    Binh.webApp(webPath, sourcePath, modulePath);
-                }
-                break;
+    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, onDone);
 
         return Binh;
     };
 
-    Binh.webStatic = function(webPath) {
-        if (!isString(webPath)) return Binh;
-        Binh.web.value = getAbsolutePaths(webPath).web;
+    Binh.webModuleBundle = function({ source, module, web }) {
+        var { source, module, web } = processWebBuildPaths({ source, module, web });
+        ComponentBuild.bundle({ source, module, web });
         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);
-
-        ComponentFormat.generate(source, module, () => ComponentBuild.generate(source, web, module));
-
-        Binh.web.value = web;
-
+    Binh.webModuleLazy = function({ source, module, web }) {
+        var { source, module, web } = processWebBuildPaths({ source, module, web });
+        ComponentBuild.lazyload({ source, module, web });
         return Binh;
     };
 
-    Binh.webModule = function(sourcePath, modulePath) {
-        if (!isString(sourcePath)) return Binh;
-        
-        var { source, module } = getAbsolutePaths(null, sourcePath, modulePath);
-
-        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,23 +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 [variables, tagnames] = processElementTags(tags);
     
-    var variablesList = tags.join(',');
-    tags = tags.map((tag) => JSON.stringify(tag));
+    return [
+        `Binh.els = Binh.element(${tagnames});`, '',
+        `var {${variables}} = Binh.els;`, ''
+    ]
+    .join(`\r\n`);
+}
+
+function bundleHtmlTags(component) {
+    return htmlTags(distinctValues(component, 'htmltags'));
+}
+
+function lazyHtmlTags(component) {
+    return htmlTags(component.htmltags);
+}
+
+function svgTags(tags) {
+    if (!tags.length) return '';
+
+    var [variables, tagnames] = processElementTags(tags);
 
     return [
-        `Binh.els = Binh.element(${tags.join(',')});`,
-        '',
-        `var {${variablesList}} = Binh.els;`,
-        ''
+        `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');
 
@@ -247,8 +290,9 @@ function uniquefy(arrays) {
 }
 
 module.exports = {
-    bundle,
-    htmltags,
+    bundle, lazyload,
+    bundleHtmlTags, lazyHtmlTags,
+    bundleSvgTags, lazySvgTags,
     prequire,
     IIF
 };

package/src/component.build.js

@@ -6,7 +6,7 @@ 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);
@@ -33,24 +33,47 @@ function generate(sourceRootPath, outputRootPath, stageRootPath) {
             return cloneFile(fileSourcePath, fileOutputPath);
         }
 
-        var code = joinCodes(component, stageRootPath);
-
+        var code = buildCodeMethod(component, stageRootPath);
         code = Component.minification ? minifyCode(code) : beautifyCode(code);
-
         writeToFile(fileOutputPath, code);
     });
 }
 
-function joinCodes(component, rootPath) {
-    var mainCode = CodeFormat.prequire(component, [
-        `var _Binh = Binh;\r\n`,
-        CodeFormat.htmltags(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)
     ]);
 }
 
@@ -65,5 +88,5 @@ function beautifyCode(code) {
 }
 
 module.exports = {
-    generate
+    generate, bundle, lazyload
 };

package/src/component.format.js

@@ -1,5 +1,5 @@
 
-const { writeFileSync, readFileSync } = require('fs');
+const { writeFileSync, readFileSync, existsSync } = require('fs');
 const { parse } = require('path');
 const { scanNestedFiles, cloneFile, printError, makeFullDirPath } = require('./component.file');
 
@@ -7,7 +7,7 @@ const { scanNestedFiles, cloneFile, printError, makeFullDirPath } = require('./c
 // [-] Enhance code by removing sync logics (except for existsSync, mkdirSync): readdir, readFileSync, (statSync?)
 
 const PREFIX_CODE =
-`var { context, tag, script, require, css } = binh.context(module, require);
+`var { context, tag, svg, script, require, css } = binh.context(module, require);
 binh.component(context, ui, service, style);
 var ui = null, service = null, style = null;\r\n\r\n`;
 
@@ -38,7 +38,10 @@ function generate(sourceRootPath, outputRootPath, callbackDone) {
 
             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' });
+
+            if (!isSameContent(code, fileSourcePath)) {
+                writeFileSync(fileOutputPath, code, { encoding: 'utf8', flag: 'w' });
+            }
         }
         catch (error) {
             printError('Failed formatting file:', fileSourcePath, error);
@@ -46,6 +49,17 @@ function generate(sourceRootPath, outputRootPath, callbackDone) {
     });
 }
 
+function isSameContent(code, filePath) {
+    var sameContent = false;
+
+    if (existsSync(filePath)) {
+        var current = readFileSync(filePath, { encoding: 'utf8', flag: 'r' });
+        sameContent = code === current;
+    }
+
+    return sameContent;
+}
+
 module.exports = {
     generate
 };

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'
+});