binhend 1.5.5 → 1.5.7

package/package.json

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

package/src/binh.web.builder.js

@@ -75,23 +75,27 @@ function WebBuilder(binh, Binh) {
         component.vars = {};
         component.varname = getVariableName(component.filename);
         component.as = alias;
+        component.eachChild = loopComponentChildren;
     };
 
     binh.final = function(module) {
         var component = module.exports;
 
-        if (!(component instanceof Function)) return;
-        if (component && component.constructor !== Component) return;
-
-        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;
+        component.eachChild(childComponent => {
+            if (childComponent.alias) {
+                component.vars[childComponent.filename] = childComponent.alias;
             }
-        }
+        });
     };
 
+    function loopComponentChildren(callback) {
+        this.module.children.forEach(childModule => {
+            var childComponent = childModule.exports;
+            if (!(childComponent instanceof Function) || childComponent.constructor !== Component) return;
+            callback(childComponent);
+        });
+    }
+
     binh.ui = function(module, component, htmltags, links) {
         binh.component({ module }, component);
         component.htmltags = htmltags;
@@ -115,6 +119,7 @@ function WebBuilder(binh, Binh) {
         var content = fs.readFileSync(cssFilePath, { encoding: 'utf8', flag: 'r' });
         content = UglifyCSS.processString(content);
         var component = new Function(`return function style() { return ${JSON.stringify(content)}; };`)();
+        component.cssFilePath = cssFilePath;
         binh.component({ module }, null, null, component);
         binh.final(module);
     };
@@ -169,8 +174,9 @@ function WebBuilder(binh, Binh) {
         return Binh.webModule({ source, module }, () => ComponentBuild.bundle(absolutePaths));
     };
 
-    Binh.webLazy = function({ source, module, web }) {
+    Binh.webLazy = function({ source, module, web, external }) {
         var absolutePaths = processWebBuildPaths({ source, module, web });
+        absolutePaths.external = external || 'NPM';
         return Binh.webModule({ source, module }, () => ComponentBuild.lazyload(absolutePaths));
     };
 

package/src/code.js

@@ -1,7 +1,9 @@
 
-function getCodeOfDependencies(component, rootPath, metadata) {
+const path = require('path');
+
+function getCodeOfDependencies(component, metadata) {
     var global = metadata || {};
-    var local = getMetadataOfDependencies(component, rootPath);
+    var local = getMetadataOfDependencies(component);
     var codes = [], filenames = Object.keys(local);
 
     filenames.forEach(function(filename) {
@@ -11,9 +13,9 @@ function getCodeOfDependencies(component, rootPath, metadata) {
         
         var { type, url, dependency } = local[filename];
 
-        var dependencyDelaration = getDependencyDelaration(dependency, rootPath);
+        var dependencyDelaration = getDependencyDelaration(dependency);
         var componentCode = dependency.toString();
-        var optionCode = generateOptionCode(dependency, '', rootPath);
+        var optionCode = generateOptionCode(dependency, '');
         var htmlTagDeclaration = getHtmlTagDeclaration(dependency);
 
         if (dependencyDelaration) {
@@ -35,7 +37,7 @@ function getCodeOfDependencies(component, rootPath, metadata) {
 
     filenames.forEach(function(filename) {
         var { dependency } = local[filename];
-        var codeOfDependencies = getCodeOfDependencies(dependency, rootPath, global);
+        var codeOfDependencies = getCodeOfDependencies(dependency, global);
         if (codeOfDependencies) codes.push(codeOfDependencies);
     });
 
@@ -46,8 +48,8 @@ function injectFunctionCodeContent(functionCodeString, injectionCode) {
     return functionCodeString.replace(/(\(.*?\)\s*{|\(.*?\)\s*=>\s*{)/, `$1\r\n${injectionCode}`);
 }
 
-function getDependencyDelaration(component, rootPath) {
-    var dependencies = getMetadataOfDependencies(component, rootPath);
+function getDependencyDelaration(component) {
+    var dependencies = getMetadataOfDependencies(component);
     var codes = [];
 
     for (var filePath in dependencies) {
@@ -71,21 +73,15 @@ function getDependencyDelaration(component, rootPath) {
     return codes.join('\r\n');
 }
 
-function getMetadataOfDependencies(component, rootPath) {
+function getMetadataOfDependencies(component) {
     if (component.dependencies) return component.dependencies;
 
-    var dependencies = component.module.children;
-
     component.dependencies = {};
 
-    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.eachChild(dependency => {
+        var filename = dependency.filename,
+            name = component.vars[filename] || dependency.varname,
+            url = dependency.url;
 
         component.dependencies[filename] = {
             name, url, dependency,
@@ -96,14 +92,13 @@ function getMetadataOfDependencies(component, rootPath) {
     return component.dependencies;
 }
 
-function generateOptionCode(component, varname, rootPath) {
+function generateOptionCode(component, varname) {
     var options = component.options, urls = [];
 
     if (!options) return '';
 
     component.type === 'ui' && options.csses.forEach(function(cssModule) {
-        var url = getRelativeFilePath(cssModule.filename, rootPath);
-        urls.push(JSON.stringify(url));
+        urls.push(JSON.stringify(cssModule.url));
     });
 
     if (urls.length) {
@@ -114,14 +109,18 @@ function generateOptionCode(component, varname, rootPath) {
 }
 
 function getRelativeFilePath(filePath, rootPath) {
-    if (getRelativeFilePath.cache.hasOwnProperty(filePath)) {
-        return getRelativeFilePath.cache[filePath];
+    rootPath += path.sep;
+    
+    var cache = getRelativeFilePath.cache[rootPath] || (getRelativeFilePath.cache[rootPath] = {});
+
+    if (cache.hasOwnProperty(filePath)) {
+        return cache[filePath];
     }
 
     var url = '';
 
     if (filePath.indexOf(rootPath) === 0) {
-        url = filePath.replace(rootPath, '').replace(/\\/g, '/');
+        url = filePath.replace(rootPath, '/').replaceAll(path.sep, '/');
     }
     else {
         var nodeModulePaths = require.main.paths;
@@ -131,34 +130,36 @@ function getRelativeFilePath(filePath, rootPath) {
             var nodeModulePath = nodeModulePaths[i];
 
             if (filePath.indexOf(nodeModulePath) === 0) {
-                url = filePath.replace(nodeModulePath, 'npm:/').replace(/\\/g, '/');
+                url = filePath.replace(nodeModulePath, 'npm:/').replaceAll(path.sep, '/');
                 break;
             }
         }
     }
 
+    cache[filePath] = url;
+
     return url;
 }
 
 getRelativeFilePath.cache = {};
 
-function bundle(component, rootPath) {
-    var codes = getComponentBaseCodes(component, rootPath);
+function bundle(component) {
+    var codes = getComponentBaseCodes(component);
     
-    var codeOfDependencies = getCodeOfDependencies(component, rootPath);
+    var codeOfDependencies = getCodeOfDependencies(component);
     if (codeOfDependencies) codes.push(codeOfDependencies);
 
     return codes.join('\r\n');
 }
 
-function lazyload(component, rootPath) {
-    var codes = getComponentBaseCodes(component, rootPath);
+function lazyload(component) {
+    var codes = getComponentBaseCodes(component);
     return codes.join('\r\n');
 }
 
-function getComponentBaseCodes(component, rootPath) {
-    var dependencyDelaration = getDependencyDelaration(component, rootPath);
-    var optionCode = generateOptionCode(component, '', rootPath);
+function getComponentBaseCodes(component) {
+    var dependencyDelaration = getDependencyDelaration(component);
+    var optionCode = generateOptionCode(component, '');
     var componentCode = component.toString();
     
     if (dependencyDelaration) {
@@ -292,6 +293,6 @@ module.exports = {
     bundle, lazyload,
     bundleHtmlTags, lazyHtmlTags,
     bundleSvgTags, lazySvgTags,
-    prequire,
-    IIF
+    prequire, IIF,
+    getRelativeFilePath
 };

package/src/component.build.js

@@ -1,24 +1,29 @@
 
-const { parse } = require('path');
+const path = require('path');
 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 processEachFile({ source: sourceRootPath, web: outputRootPath, module: stageRootPath }, buildCodeMethod) {
+function processEachFile({ source: sourceRootPath, web: outputRootPath, module: stageRootPath, external: externalPath }, buildCodeMethod, callbackDone) {
     if (sourceRootPath == undefined || outputRootPath == undefined) return;
     stageRootPath = stageRootPath || outputRootPath;
     console.info('[BINHEND][COMPONENT] Build web components from:', stageRootPath);
     console.info('[BINHEND][COMPONENT] to:', outputRootPath);
 
-    scanNestedFiles(stageRootPath, (file) => {
+    var ref = {};
+    externalPath = typeof externalPath === 'string' ? `/${externalPath}/` : null;
+
+    scanNestedFiles(stageRootPath, (file, done) => {
+        if (done) return callbackDone instanceof Function ? callbackDone({ outputRootPath }) : null;
+
         var fileSourcePath = file.path.replace(stageRootPath, sourceRootPath);
         var fileOutputPath = file.path.replace(stageRootPath, outputRootPath);
 
         makeFullDirPath(fileOutputPath);
 
-        if (parse(file.name).ext !== '.js') {
+        if (path.parse(file.name).ext !== '.js') {
             return cloneFileIfNew(fileSourcePath, fileOutputPath);
         }
 
@@ -33,18 +38,22 @@ function processEachFile({ source: sourceRootPath, web: outputRootPath, module:
             return cloneFileIfNew(fileSourcePath, fileOutputPath);
         }
 
-        var code = buildCodeMethod(component, stageRootPath);
+        injectComponentURL(component, stageRootPath + path.sep, externalPath, ref);
+
+        if (buildCodeMethod === buildLazyCode) collectExternalComponents(component, externalPath);
+
+        var code = buildCodeMethod(component);
         code = Component.minification ? minifyCode(code) : beautifyCode(code);
 
         writeToFileIfNew(fileOutputPath, code);
     });
 }
 
-function buildBundleCode(component, rootPath, shouldBundle = true) {
+function buildBundleCode(component) {
     return wrapCode(component, [
         CodeFormat.bundleHtmlTags(component),
         CodeFormat.bundleSvgTags(component),
-        CodeFormat.bundle(component, rootPath, shouldBundle)
+        CodeFormat.bundle(component)
     ]);
 }
 
@@ -53,18 +62,107 @@ function generate({ source, web, module }) {
 }
 
 function bundle({ source, web, module }) {
-    generate({ source, web, module });
+    processEachFile({ source, web, module }, buildBundleCode);
+}
+
+function lazyload(paths) {
+    processEachFile(paths, buildLazyCode, copyExternalComponentFiles);
+}
+
+function copyExternalComponentFiles({ outputRootPath }) {
+    var cache = copyExternalComponentFiles.cache,
+        csses = copyExternalComponentFiles.csses;
+
+    for (var npmPath in cache) {
+        var component = cache[npmPath].component;
+
+        var fileOutputPath = path.join(outputRootPath, npmPath);
+
+        makeFullDirPath(fileOutputPath);
+
+        var code = buildLazyCode(component);
+
+        code = Component.minification ? minifyCode(code) : beautifyCode(code);
+
+        writeToFileIfNew(fileOutputPath, code);
+    }
+
+    for (var cssFileSourcePath in csses) {
+        var cssURL = csses[cssFileSourcePath],
+            cssFileOutputPath = path.join(outputRootPath, cssURL);
+
+        makeFullDirPath(cssFileOutputPath);
+        cloneFileIfNew(cssFileSourcePath, cssFileOutputPath);
+    }
+}
+
+function collectExternalComponents(component, externalPath) {
+    var cache = copyExternalComponentFiles.cache || (copyExternalComponentFiles.cache = {}),
+        csses = copyExternalComponentFiles.csses || (copyExternalComponentFiles.csses = {});
+
+    component.options.csses.forEach(cssModule => {
+        var cssFilePath = cssModule.cssFilePath;
+
+        if (csses[cssFilePath]) return;
+
+        if (cssModule.url.startsWith(externalPath)) {
+            csses[cssFilePath] = cssModule.url.replace(/.js$/, '');
+        }
+    });
+
+    component.eachChild(childComponent => {
+        var url = childComponent.url;
+
+        if (cache[url]) return;
+
+        if (url.startsWith(externalPath)) {
+            cache[url] = {
+                component: childComponent
+            };
+        }
+
+        collectExternalComponents(childComponent, externalPath);
+    });
 }
 
-function lazyload({ source, web, module }) {
-    processEachFile({ source, web, module }, buildLazyCode);
+function injectComponentURL(component, rootPathWithSeparator, externalPath, ref) {
+    var filePath = component.filename;
+
+    if (ref[filePath]) return;
+
+    var pathSeparator = path.sep,
+        relativePath = '';
+
+    if (filePath.indexOf(rootPathWithSeparator) === 0) {
+        relativePath = filePath.replace(rootPathWithSeparator, '/');
+    }
+    else {
+        var nodeModulePaths = require.main.paths,
+            length = nodeModulePaths.length;
+
+        for (var i = 0; i < length; i++) {
+            var nodeModulePath = nodeModulePaths[i] + pathSeparator;
+            if (filePath.indexOf(nodeModulePath) === 0) {
+                relativePath = filePath.replace(nodeModulePath, externalPath || 'npm://');
+                break;
+            }
+        }
+    }
+
+    component.url = relativePath.replaceAll(pathSeparator, '/');
+
+    ref[filePath] = true;
+
+    component.eachChild(childComponent => {
+        injectComponentURL(childComponent, rootPathWithSeparator, externalPath, ref);
+    });
 }
 
-function buildLazyCode(component, rootPath) {
+function buildLazyCode(component) {
     return wrapCode(component, [
         CodeFormat.lazyHtmlTags(component),
         CodeFormat.lazySvgTags(component),
-        CodeFormat.lazyload(component, rootPath)
+        CodeFormat.lazyload(component)
     ]);
 }
 

package/test.js

@@ -1,48 +0,0 @@
-// 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));
-}
-
-abc({
-    a: 'a',
-    b: 'b'
-});