binhend 1.3.0 → 1.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "binhend",
-  "version": "1.3.0",
+  "version": "1.4.0",
   "description": "",
   "main": "index.js",
   "author": "Nguyen Duc Binh",
@@ -15,7 +15,10 @@
     "example-web2": "node example_web2"
   },
   "dependencies": {
-    "express": "^4.17.1"
+    "express": "^4.17.1",
+    "js-beautify": "^1.15.1",
+    "uglify-js": "^3.17.4",
+    "uglifycss": "^0.0.29"
   },
   "engines": {
     "node": ">=16.17.1",

package/src/binh.web.builder.js

@@ -1,10 +1,13 @@
 
 const path = require('path');
+const fs = require('fs');
 
 const Component = require('./component');
 const ComponentFormat = require('./component.format');
 const ComponentBuild = require('./component.build');
 
+const UglifyCSS = require('uglifycss');
+
 function WebBuilder(binh, Binh) {
     binh.context = function(module, defaultRequire) {
         var context = { module, require: defaultRequire };
@@ -44,14 +47,24 @@ function WebBuilder(binh, Binh) {
         var component = ui || service || style;
         var type = ui && 'ui' || service && 'service' || style && 'style';
 
-        if (component == null) return;
+        if (!(component instanceof Function)) return;
 
         context.component = component;
+
+        var module = context.module;
+        module.exports = component;
+
+        component.module = module;
+        component.constructor = Component;
+        component.filename = module.filename;
+        component.type = type;
+
         component.htmltags = [];
         component.links = [];
         component.options = { csses: [] };
-
-        binh.bundle(type, context.module, component);
+        component.vars = {};
+        component.varname = getVariableName(component.filename);
+        component.as = alias;
     };
 
     binh.final = function(module) {
@@ -60,62 +73,58 @@ function WebBuilder(binh, Binh) {
         if (!(component instanceof Function)) return;
         if (component && component.constructor !== Component) return;
 
-        module.children.forEach(function(child) {
-            child = child.exports;
-            if (child.constructor !== Component) return;
-            if (child.alias) {
-                component.vars[child.filename] = child.alias;
+        for (var index in module.children) {
+            var dependency = module.children[index].exports;
+            if (dependency.constructor !== Component) continue;
+            if (dependency.alias) {
+                component.vars[dependency.filename] = dependency.alias;
             }
-        });
+        }
     };
 
     binh.ui = function(module, component, htmltags, links) {
+        binh.component({ module }, component);
         component.htmltags = htmltags;
         component.links = links;
-        binh.bundle('ui', module, component);
+        binh.final(module);
     };
 
     binh.service = function(module, component, links) {
+        binh.component({ module }, null, component, null);
         component.links = links;
-        binh.bundle('service', module, component);
+        binh.final(module);
     };
 
     binh.style = function(module, component) {
-        binh.bundle('style', module, component);
+        binh.component({ module }, null, null, component);
+        binh.final(module);
     };
 
     binh.css = function(module, cssFilename) {
         var cssFilePath = cssFilename && path.join(module.path, cssFilename) || module.filename.replace(/.js$/, '');
-        var content = require('fs').readFileSync(cssFilePath, { encoding: 'utf8', flag: 'r' });
-        content = content.replace(/\s+/g, ' ');
-        var component = new Function(`return ${JSON.stringify(content)};`);
-        binh.bundle('style', module, component);
-    };
-
-    binh.bundle = function(type, module, component) {
-        if (!(component instanceof Function)) return;
-
-        component.type = type;
-        component.filename = module.filename;
-        component.constructor = Component;
-        component.module = module;
-        component.as = alias;
-        component.vars = {};
-
-        module.exports = component;
-
-        module.children.forEach(function(child) {
-            child = child.exports;
-            if (child.constructor !== Component) return;
-            if (child.alias) component.vars[child.filename] = child.alias;
-        });
+        var content = fs.readFileSync(cssFilePath, { encoding: 'utf8', flag: 'r' });
+        content = UglifyCSS.processString(content);
+        var component = new Function(`return function style() { return ${JSON.stringify(content)}; };`)();
+        binh.component({ module }, null, null, component);
+        binh.final(module);
     };
 
     function alias(name) {
+        if (!isString(name)) return this;
+        name = name.trim();
         this.alias = name;
         return this;
     }
 
+    function getVariableName(filePath) {
+        return path.parse(filePath).name.replace(/-/g, '').replace(/\W.*/, '').trim();
+    }
+
+    Binh.minify = function(flag = true) {
+        Component.minification = flag;
+        return Binh;
+    };
+
     Binh.web = function(webPath, sourcePath, modulePath) {
         switch (arguments.length) {
             case 1:

package/src/code.js

@@ -1,138 +1,190 @@
 
-const { parse } = require('path');
+function getCodeOfDependencies(component, rootPath, metadata) {
+    var global = metadata || {};
+    var local = getMetadataOfDependencies(component, rootPath);
+    var codes = [], filenames = Object.keys(local);
 
-function dependencies(component, root, metadata) {
-    var global = metadata || {}, local = {}, variables = {}, code = '';
-
-    var children = component.module.children;
-
-    children.forEach(function(child) {
-        child = child.exports;
-
-        if (child.constructor !== component.constructor) return;
-
-        var filename = child.filename;
+    filenames.forEach(function(filename) {
+        var existed = global[filename];
+        
+        if (existed) return;
+        
+        var { type, url, dependency } = local[filename];
 
-        var url = '';
+        var dependencyDelaration = getDependencyDelaration(dependency, rootPath);
+        var componentCode = dependency.toString();
+        var optionCode = generateOptionCode(dependency, '', rootPath);
+        var htmlTagDeclaration = getHtmlTagDeclaration(dependency);
 
-        if (filename.indexOf(root) === 0) {
-            url = filename.replace(root, '').replace(/\\/g, '/');
+        if (dependencyDelaration) {
+            componentCode = componentCode.replace('{', `{\r\n${dependencyDelaration}\r\n`);
         }
-        else {
-            var nodeModulePaths = require.main.paths;
-            var length = nodeModulePaths.length;
 
-            for (var i = 0; i < length; i++) {
-                var nodeModulePath = nodeModulePaths[i];
-
-                if (filename.indexOf(nodeModulePath) === 0) {
-                    url = filename.replace(nodeModulePath, 'npm:/').replace(/\\/g, '/');
-                    break;
-                }
-            }
+        var blockCodes = [];
+        blockCodes.push(`Binh.${type}('${url}', ${type})${optionCode};`);
+        if (htmlTagDeclaration) {
+            blockCodes.push(htmlTagDeclaration);
         }
+        blockCodes.push(componentCode);
 
-        var name = component.vars[filename] || parse(filename).name.replace(/-/g, '').replace(/\W.*/, '');
+        codes.push(IIF(blockCodes));
+        codes.push('');
 
-        local[filename] = {
-            name, url,
-            type: child.type,
-            component: child
-        };
+        global[filename] = local[filename];
     });
 
-    Object.keys(local).forEach(function(filename) {
-        var declaration = '',
-            current = local[filename],
-            existed = global[filename];
+    filenames.forEach(function(filename) {
+        var { dependency } = local[filename];
+        var codeOfDependencies = getCodeOfDependencies(dependency, rootPath, global);
+        if (codeOfDependencies) codes.push(codeOfDependencies);
+    });
+
+    return codes.join('\r\n');
+}
 
-        var { type, name, url, component } = current;
+function getDependencyDelaration(component, rootPath) {
+    var dependencies = getMetadataOfDependencies(component, rootPath);
+    var codes = [], fullCode = '';
 
-        if (existed) {
-            declaration += `Binh.later(function() {${name} = Binh.${type}('${url}');});\r\n`;
-            variables[name] = true;
+    for (var filePath in dependencies) {
+        var { name, url, type } = dependencies[filePath];
+        if (name) {
+            codes.push(` ${name} = Binh.${type}('${url}')`);
         }
-        else {
-            declaration += `${name} = Binh.${type}('${url}', ${component.toString()});\r\n`;
-            global[filename] = local[filename];
-            variables[name] = true;
-        };
+    }
 
-        var optionCode = buildCodeApplyOptions(name, component);
+    var declarationCode = codes.join(',');
 
-        if (optionCode) {
-            declaration += `Binh.later(function() {${optionCode};});\r\n`;
-        }
+    if (declarationCode) {
+        fullCode = [
+            `var Binh = _Binh;`,
+            `var${declarationCode};`,
+            ''
+        ].join('\r\n');
+    }
 
-        code += IIF([
-            dependencies(component, root, Object.assign({}, global, local)),
-            declaration
-        ]);
+    return fullCode;
+}
 
-        code += '\r\n\r\n';
-    });
+function getMetadataOfDependencies(component, rootPath) {
+    if (component.dependencies) return component.dependencies;
 
-    var vars = Object.keys(variables);
+    var dependencies = component.module.children;
 
-    if (vars.length) {
-        code += `var ${vars.join(', ')};\r\n`;
-    }
+    component.dependencies = {};
 
-    return code;
+    dependencies.forEach(function(module) {
+        var dependency = module.exports;
+
+        if (dependency.constructor !== component.constructor) return;
+
+        var filename = dependency.filename;
+        var name = component.vars[filename] || dependency.varname;
+        var url = getRelativeFilePath(filename, rootPath);
+
+        component.dependencies[filename] = {
+            name, url, dependency,
+            type: dependency.type
+        };
+    });
+    
+    return component.dependencies;
 }
 
-function buildCodeApplyOptions(componentName, component) {
-    var options = component.options, variableNames = [];
+function generateOptionCode(component, varname, rootPath) {
+    var options = component.options, urls = [];
 
     if (!options) return '';
 
     component.type === 'ui' && options.csses.forEach(function(cssModule) {
-        var filename = cssModule.filename;
-        var variableName = component.vars[filename] || parse(filename).name.replace(/-/g, '').replace(/\W.*/, '');
-        variableNames.push(variableName);
+        var url = getRelativeFilePath(cssModule.filename, rootPath);
+        urls.push(JSON.stringify(url));
     });
 
-    if (variableNames.length) {
-        return `${componentName}.style([${variableNames.join(',')}])`;
+    if (urls.length) {
+        return `${varname}.style([${urls.join(',')}])`;
     }
 
     return '';
 }
 
-function bundle(component, root) {
-    var code = '';
+function getRelativeFilePath(filePath, rootPath) {
+    if (getRelativeFilePath.cache.hasOwnProperty(filePath)) {
+        return getRelativeFilePath.cache[filePath];
+    }
 
-    code += dependencies(component, root);
+    var url = '';
 
-    code += '\r\n';
+    if (filePath.indexOf(rootPath) === 0) {
+        url = filePath.replace(rootPath, '').replace(/\\/g, '/');
+    }
+    else {
+        var nodeModulePaths = require.main.paths;
+        var length = nodeModulePaths.length;
 
-    code += `Binh.${component.type}(${component.toString()})${buildCodeApplyOptions('', component)};\r\n`;
+        for (var i = 0; i < length; i++) {
+            var nodeModulePath = nodeModulePaths[i];
 
-    return code;
-}
+            if (filePath.indexOf(nodeModulePath) === 0) {
+                url = filePath.replace(nodeModulePath, 'npm:/').replace(/\\/g, '/');
+                break;
+            }
+        }
+    }
 
-function htmltags(component) {
-    var code = '', list = [],
-        tags = distinctValues(component, 'htmltags');
+    return url;
+}
 
-    tags.forEach(function(tag) {
-        list.push(`${tag} = Binh.el('${tag}')`);
-    });
+getRelativeFilePath.cache = {};
 
-    if (list.length) {
-        code = `var ${list.join(',\r\n')};`;
+function bundle(component, rootPath) {
+    var codeOfDependencies = getCodeOfDependencies(component, rootPath);
+    var dependencyDelaration = getDependencyDelaration(component, rootPath);
+    var optionCode = generateOptionCode(component, '', rootPath);
+    var componentCode = component.toString();
+    
+    if (dependencyDelaration) {
+        componentCode = componentCode.replace('{', `{\r\n${dependencyDelaration}`);
     }
 
-    code += code ? '\r\n' : '';
+    var codes = [];
 
-    return code;
+    if (codeOfDependencies) codes.push(codeOfDependencies);
+    if (componentCode) codes.push(`Binh.${component.type}(${componentCode})${optionCode};`);
+
+    return codes.join('\r\n');
+}
+
+function getHtmlTagDeclaration(component) {
+    var variablesList = component.htmltags.join(','); 
+
+    if (!variablesList) return '';
+
+    return `var {${variablesList}} = Binh.els;\r\n`;
+}
+
+function htmltags(component) {
+    var tags = distinctValues(component, 'htmltags');
+
+    if (!tags.length) return '';
+    
+    var variablesList = tags.join(',');
+    tags = tags.map((tag) => JSON.stringify(tag));
+
+    return [
+        `Binh.els = Binh.element(${tags.join(',')});`,
+        '',
+        `var {${variablesList}} = Binh.els;`,
+        ''
+    ]
+    .join(`\r\n`);
 }
 
 function prequire(component, codes) {
     var code = '', links = distinctValues(component, 'links');
 
     if (links.length) {
-        code = `Binh.prequire(['${links.join("','")}'], function() {\r\n\r\n${codes.join('\r\n')}\r\n});`;
+        code = `Binh.prequire(['${links.join("','")}'], function() {\r\n${codes.join('\r\n')}\r\n});`;
     }
     else {
         code = IIF(codes);
@@ -142,7 +194,7 @@ function prequire(component, codes) {
 }
 
 function IIF(codes) {
-    return `!function(){\r\n\r\n${codes.join('\r\n')}\r\n}();`
+    return `!function(){\r\n${codes.join('\r\n')}\r\n}();`;
 }
 
 function distinctValues(component, key) {

package/src/component.build.js

@@ -3,9 +3,8 @@ const { parse } = require('path');
 const { scanNestedFiles, cloneFile, writeToFile, makeFullDirPath } = require('./component.file');
 const CodeFormat = require('./code');
 const Component = require('./component');
-
-// TODO
-// [-] Able to minify/beautify generated files
+const UglifyJS = require('uglify-js');
+const BeautifyJS = require('js-beautify/js');
 
 function generate(sourceRootPath, outputRootPath, stageRootPath) {
     if (sourceRootPath == undefined || outputRootPath == undefined) return;
@@ -36,17 +35,33 @@ function generate(sourceRootPath, outputRootPath, stageRootPath) {
 
         var code = joinCodes(component, stageRootPath);
 
+        code = Component.minification ? minifyCode(code) : beautifyCode(code);
+
         writeToFile(fileOutputPath, code);
     });
 }
 
 function joinCodes(component, rootPath) {
-    var fullcode = CodeFormat.prequire(component, [
-        CodeFormat.bundle(component, rootPath),
-        CodeFormat.htmltags(component)
+    var mainCode = CodeFormat.prequire(component, [
+        `var _Binh = Binh;\r\n`,
+        CodeFormat.htmltags(component),
+        CodeFormat.bundle(component, rootPath)
+    ]);
+
+    return CodeFormat.IIF([
+        `var Binh = window.Binh;`,
+        mainCode
     ]);
+}
+
+function minifyCode(code) {
+    var result = UglifyJS.minify(code);
+    if (result.error) throw result.error;
+    return result.code;
+}
 
-    return fullcode;
+function beautifyCode(code) {
+    return BeautifyJS.js(code);
 }
 
 module.exports = {

package/src/component.js

@@ -102,7 +102,8 @@ function showError(message, id, error) {
 }
 
 var Component = {
-    generate
+    generate,
+    minification: false
 };
 
 module.exports = Component;

package/test.js

@@ -0,0 +1,22 @@
+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'));