binhend 1.5.4 → 1.5.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "binhend",
-  "version": "1.5.4",
+  "version": "1.5.6",
   "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;
@@ -169,8 +173,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,28 @@
 
-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 = {};
+
+    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 +37,22 @@ function processEachFile({ source: sourceRootPath, web: outputRootPath, module:
             return cloneFileIfNew(fileSourcePath, fileOutputPath);
         }
 
-        var code = buildCodeMethod(component, stageRootPath);
+        injectComponentURL(component, stageRootPath + path.sep, externalPath ? `/${externalPath}/` : null, ref);
+
+        if (buildCodeMethod === buildLazyCode) collectExternalComponents(component, externalPath);
+
+        var code = buildCodeMethod(component, externalPath);
         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 +61,87 @@ 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;
+
+    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);
+    }
 }
 
-function lazyload({ source, web, module }) {
-    processEachFile({ source, web, module }, buildLazyCode);
+function collectExternalComponents(component, externalPath) {
+    var cache = copyExternalComponentFiles.cache || (copyExternalComponentFiles.cache = {});
+
+    component.eachChild(childComponent => {
+        var url = childComponent.url;
+
+        if (cache[url]) return;
+
+        if (url.startsWith(`/${externalPath}/`)) {
+            cache[url] = {
+                component: childComponent
+            };
+        }
+
+        collectExternalComponents(childComponent, externalPath);
+    });
+}
+
+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/src/component.file.js

@@ -89,7 +89,7 @@ function cloneFile(filepath, outpath) {
 }
 
 function cloneFileIfNew(filepath, outpath) {
-    if (!existsSync(filepath)) return rm(outpath, { recursive: true, force: true });
+    if (!existsSync(filepath)) return rm(outpath, { recursive: true, force: true }, () => {});
     if (isSameFile(filepath, outpath)) return;
     cloneFile(filepath, outpath);
 }