binhend 1.1.0 → 1.1.1

package/src/code.js

@@ -1,20 +1,76 @@
 
 const { parse } = require('path');
 
-function dependencies(component, root) {
-    var code = '', dependencies = component.dependencies;
+function dependencies(component, root, metadata) {
+    var global = metadata || {}, local = {}, variables = {}, code = '';
 
-    for (var filepath in dependencies) {
-        var url = filepath.replace(root, '').replace(/\\/g, '/');
+    var children = component.module.children;
 
-        var name = parse(filepath).name.replace(/-/g, '').replace(/\W.*/, '');
+    children.forEach(function(child) {
+        child = child.exports;
 
-        var dependency = dependencies[filepath];
+        if (child.constructor !== component.constructor) return;
 
-        code += `var ${name} = Binh.${dependency.type}('${url}', ${dependency.toString()});\r\n\r\n`;
+        var filename = child.filename;
+        var url = filename.replace(root, '').replace(/\\/g, '/');
+        var name = component.vars[filename] || parse(filename).name.replace(/-/g, '').replace(/\W.*/, '');
+
+        local[filename] = {
+            name, url,
+            type: child.type,
+            component: child
+        };
+    });
+
+    Object.keys(local).forEach(function(filename) {
+        var declaration = '',
+            current = local[filename],
+            existed = global[filename];
+
+        var { type, name, url, component } = current;
+
+        if (existed) {
+            var sameVariableName = (name === existed.name);
+            if (sameVariableName) return;
+
+            declaration += `${name} = Binh.${type}('${url}');\r\n`;
+            variables[name] = true;
+        }
+        else {
+            declaration += `${name} = Binh.${type}('${url}', ${component.toString()});\r\n`;
+            global[filename] = local[filename];
+            variables[name] = true;
+        };
+
+        code += IIF([
+            declaration,
+            dependencies(component, root, Object.assign({}, global, local))
+        ]);
+
+        code += '\r\n\r\n';
+    });
+
+    var vars = Object.keys(variables);
+
+    if (vars.length) {
+        code += `var ${vars.join(', ')};\r\n`;
     }
 
-    code += `Binh.${component.type}(${component.toString()});\r\n`
+    return code;
+}
+
+function bundle(component, root) {
+    var code = '';
+
+    if (component.filename.indexOf('AppToDos.js') > -1) {
+        console.log('debug');
+    }
+
+    code += dependencies(component, root);
+
+    code += '\r\n';
+
+    code += `Binh.${component.type}(${component.toString()});\r\n`;
 
     return code;
 }
@@ -40,7 +96,7 @@ function prequire(component, codes) {
     var code = '', links = distinctValues(component, 'links');
 
     if (links.length) {
-        code = `Binh.requires(['${links.join("','")}'], function() {\r\n\r\n${codes.join('\r\n')}\r\n});`;
+        code = `Binh.prequire(['${links.join("','")}'], function() {\r\n\r\n${codes.join('\r\n')}\r\n});`;
     }
     else {
         code = IIF(codes);
@@ -54,12 +110,11 @@ function IIF(codes) {
 }
 
 function distinctValues(component, key) {
-    var arrays = [component[key]],
-        dependencies = component.dependencies;
+    var arrays = [component[key]];
 
-    for (var filepath in dependencies) {
-        arrays.push(dependencies[filepath][key]);
-    }
+    component.module.children.forEach(function(child) {
+        arrays.push(child.exports[key]);
+    });
 
     return uniquefy(arrays);
 }
@@ -81,7 +136,7 @@ function uniquefy(arrays) {
 }
 
 module.exports = {
-    dependencies,
+    bundle,
     htmltags,
     prequire,
     IIF

package/src/component.js

@@ -81,7 +81,7 @@ function ensureDirectoryExistence(filepath) {
 
 function joinCodes(component, root) {
     var fullcode = CodeFormat.prequire(component, [
-        CodeFormat.dependencies(component, root),
+        CodeFormat.bundle(component, root),
         CodeFormat.htmltags(component)
     ]);
 

package/src/cryptography.js

@@ -4,6 +4,10 @@ const algorithm = 'aes-256-cbc';
 const lenght_iv = 16;
 const lenght_key = 32;
 
+function randomUUID(disableEntropyCache = true) {
+    crypto.randomUUID({ disableEntropyCache });
+}
+
 function generateSecurityKey() {
     return crypto.randomBytes(lenght_key).toString('hex');
 }
@@ -45,5 +49,6 @@ function hash(text, encoding = 'hex', length = 256) {
 module.exports = {
     encrypt, decrypt, hash,
     generateSecurityKey,
-    generateInitialVector
+    generateInitialVector,
+    randomUUID
 };

package/example_webcomp/public/common/InputText.js

@@ -1,17 +0,0 @@
-!function(){
-
-Binh.ui(function main() {
-    var inputbox = input({ type: 'text', placeholder: 'Enter to-do item' });
-    
-    inputbox.on('keypress', function (event) {
-        if (event.key === "Enter") {
-            inputbox.does('submit', inputbox.element.value);
-        }
-    });
-    
-    return inputbox;
-});
-
-var input = Binh.el('input');
-
-}();

package/example_webcomp/public/common/Link2.js

@@ -1,13 +0,0 @@
-
-Binh.ui(function() {
-    var { a } = Binh.elements;
-
-    var text = arguments[0];
-    var path = arguments[1];
-
-    var link = a(text).on('click', function() {
-        Binh.Router.navigate(path);
-    });
-
-    return link;
-});

package/example_webcomp/public/index.html

@@ -1,18 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <title>Binh Demo</title>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <!-- <link rel="stylesheet" href="/lib/bootstrap.3.4.1.min.css"> -->
-    <!-- <link rel="stylesheet" href="style.css"> -->
-    <!-- <script src="/lib/jquery.3.5.1.min.js"></script>
-    <script src="/lib/bootstrap.3.4.1.min.js"></script> -->
-
-    <script src="http://localhost:1300/dev/binh.min.js"></script>
-    <!-- <script src="https://binhjs.pages.dev/dist/binh.min.js"></script> -->
-    <!-- <script src="https://cdn.jsdelivr.net/gh/penciless/binhjs/dist/binh.min.js"></script> -->
-    <script src="/index.js"></script>
-  </head>
-  <body></body>
-</html>

package/example_webcomp/public/index.js

@@ -1,6 +0,0 @@
-
-Binh({
-    '':         '/layouts/AppMainLayout.js',
-    '/todos':    '/layouts/AppToDos.js'
-});
-

package/example_webcomp/public/layouts/AppMainLayout.js

@@ -1,96 +0,0 @@
-Binh.requires(['https://code.jquery.com/jquery-3.7.0.min.js'], function() {
-
-var PageHeader = Binh.ui('/layouts/PageHeader.js', function PageHeader() {
-    var Link = this.ui('/common/Link2.js');
-    
-    var PageHeader = div({ id: 'page-header' });
-    
-    PageHeader(
-        div({ class: 'container' })(
-            div({ class: 'row' })(
-                nav({ class: 'navbar navbar-default' })(
-                    div({ class: 'container-fluid' })([
-                        div({ class: 'navbar-header' })(
-                            a({ class: 'navbar-brand', href: '#' })(
-                                'Website Name'
-                            )
-                        ),
-                        ul({ class: 'nav navbar-nav' })(
-                            li({ class: 'active' })(
-                                Link('Home', '/')
-                            ),
-                            li(
-                                Link('Abc', '/abc')
-                            ),
-                            li(
-                                Link('Haha', '/haha')
-                            ),
-                            li(
-                                a('Page 3')
-                            )
-                        )
-                    ])
-                )
-            )
-        ),
-        function (thisEl) {
-            setTimeout(function() {
-                console.log('>>> Page Header:', thisEl);
-            }, 1000);
-        }
-    );
-    
-    return PageHeader;
-});
-
-var PageContent = Binh.ui('/layouts/PageContent.js', function PageContent() {
-    var { Router } = Binh;
-
-    var PageContent = div({ id: 'page-content' });
-
-    PageContent(
-        new Router({
-            '': div('default work!'),
-            '/abc': div('abc work!'),
-            '/haha': trans('haha work!')
-        })
-    )
-    (
-        function (thisEl) {
-            setTimeout(function() {
-                console.log('>>> Page Content:', thisEl);
-            }, 1000);
-        }
-    );
-
-    return PageContent;
-});
-
-var AnyService = Binh.service('/services/AnyService.js', function AnyService() {
-
-});
-
-Binh.ui(function AppMainLayout() {
-    var MainLayout = div({ id: 'app-main-layout' });
-
-    MainLayout(
-        PageHeader,
-        PageContent,
-        function (thisEl) {
-            setTimeout(function() {
-                console.log('>>> App Main Layout:', thisEl);
-            }, 1000);
-        }
-    );
-    
-    return MainLayout;
-});
-
-var div = Binh.el('div'),
-nav = Binh.el('nav'),
-ul = Binh.el('ul'),
-li = Binh.el('li'),
-a = Binh.el('a'),
-trans = Binh.el('trans');
-
-});

package/example_webcomp/public/layouts/AppToDos.js

@@ -1,100 +0,0 @@
-!function(){
-
-var InputText = Binh.ui('/common/InputText.js', function main() {
-    var inputbox = input({ type: 'text', placeholder: 'Enter to-do item' });
-    
-    inputbox.on('keypress', function (event) {
-        if (event.key === "Enter") {
-            inputbox.does('submit', inputbox.element.value);
-        }
-    });
-    
-    return inputbox;
-});
-
-var ServiceToDos = Binh.service('/services/ServiceToDos.js', function(define, state, http) {
-    var todos = state.as('todos');
-    
-    todos.schema(function(resolve) {
-        new http(api('get'))
-            .get(function(response) {
-                resolve(parseResponse(response));
-            });
-    });
-    
-    function handleResponse(response) {
-        todos.set(parseResponse(response));
-    }
-    
-    function parseResponse(response) {
-        var todoitems = [];
-    
-        Object.keys(response).forEach(function(key) {
-            var each = response[key];
-            todoitems.push({ id: key, text: each.text });
-        });
-    
-        return todoitems;
-    }
-    
-    define('add', function(value) {
-        new http(api('add'))
-            .body({ text: value })
-            .post(handleResponse);
-    });
-    
-    define('remove', function(id) {
-        new http(api('remove'))
-            .body({ id: id })
-            .post(handleResponse);
-    });
-    
-    function api(relative_url) {
-        return 'https://todolist-of-binh.fly.dev/todos/' + relative_url;
-    }
-});
-
-Binh.ui(function main() {
-    var PageHeader = this.ui('/layouts/PageHeader.js');
-    var ToDoItem = this.ui('/layouts/ToDoItem.js');
-    // var addTodoItem = ServiceToDos.does('add');
-    // var addTodoItem = ServiceToDos.debounce('add', 1500); // trailing only
-    var addTodoItem = ServiceToDos.debounce('add', 1500, true); // both leading & trailing
-    // var addTodoItem = ServiceToDos.debounce('add', 1500, true, true); // leading only
-    // var addTodoItem = ServiceToDos.throttle('add', 1500);
-    // var addTodoItem = ServiceToDos.once('add', 1500);
-    
-    var inputbox = InputText().when('submit', addTodoItem);
-    
-    var todolist = div({ class: 'todo-items' });
-    
-    todolist.subscribe('todos', function(data) {
-        todolist.empty();
-        data.forEach(function(datum) {
-            todolist(
-                ToDoItem(datum).when('remove', ServiceToDos.instant('remove'))
-            );
-        });
-    });
-    
-    var maindiv = div({ class: 'container' });
-    var left_section = div({ id: 'left-section' })('left section')(PageHeader);
-    var right_section = div({ id: 'right-section' })('right section');
-    
-    maindiv(
-        left_section,
-        right_section(
-            div('To-Do List'),
-            inputbox,
-            todolist
-        )
-    );
-    
-    return maindiv;
-});
-
-var div = Binh.el('div'),
-span = Binh.el('span'),
-input = Binh.el('input');
-
-}();

package/example_webcomp/public/layouts/PageContent.js

@@ -1,29 +0,0 @@
-!function(){
-
-Binh.ui(function PageContent() {
-    var { Router } = Binh;
-
-    var PageContent = div({ id: 'page-content' });
-
-    PageContent(
-        new Router({
-            '': div('default work!'),
-            '/abc': div('abc work!'),
-            '/haha': trans('haha work!')
-        })
-    )
-    (
-        function (thisEl) {
-            setTimeout(function() {
-                console.log('>>> Page Content:', thisEl);
-            }, 1000);
-        }
-    );
-
-    return PageContent;
-});
-
-var div = Binh.el('div'),
-trans = Binh.el('trans');
-
-}();

package/example_webcomp/public/layouts/PageHeader.js

@@ -1,52 +0,0 @@
-!function(){
-
-Binh.ui(function PageHeader() {
-    var Link = this.ui('/common/Link2.js');
-    
-    var PageHeader = div({ id: 'page-header' });
-    
-    PageHeader(
-        div({ class: 'container' })(
-            div({ class: 'row' })(
-                nav({ class: 'navbar navbar-default' })(
-                    div({ class: 'container-fluid' })([
-                        div({ class: 'navbar-header' })(
-                            a({ class: 'navbar-brand', href: '#' })(
-                                'Website Name'
-                            )
-                        ),
-                        ul({ class: 'nav navbar-nav' })(
-                            li({ class: 'active' })(
-                                Link('Home', '/')
-                            ),
-                            li(
-                                Link('Abc', '/abc')
-                            ),
-                            li(
-                                Link('Haha', '/haha')
-                            ),
-                            li(
-                                a('Page 3')
-                            )
-                        )
-                    ])
-                )
-            )
-        ),
-        function (thisEl) {
-            setTimeout(function() {
-                console.log('>>> Page Header:', thisEl);
-            }, 1000);
-        }
-    );
-    
-    return PageHeader;
-});
-
-var div = Binh.el('div'),
-nav = Binh.el('nav'),
-ul = Binh.el('ul'),
-li = Binh.el('li'),
-a = Binh.el('a');
-
-}();

package/example_webcomp/public/layouts/ToDoItem.js

@@ -1,30 +0,0 @@
-!function(){
-
-var ToDoItemStyle2 = Binh.style('/styles/ToDoItemStyle2.js', function anonymous(
-) {
-return "@charset \"utf-8\"; @import url(\"/styles/temp.css\"); /* .btn-remove { color: blue; margin-left: '15px'; } */ @media (min-width: 800px) { .btn-remove { color: red; margin-left: '15px'; } } @keyframes slidein { from { transform: translateX(0%); } to { transform: translateX(100%); } } @page { size: 8.5in 9in; margin-top: 4in; }";
-});
-
-Binh.ui(function main(props) {
-    // var ToDoItemStyle = this.style('/styles/todo.css');
-
-    var todoitem = div({ style: 'margin: 3px;' });
-
-    var remove_button = span({ class: 'btn-remove' })('X');
-
-    remove_button.on('click', function() {
-        todoitem.does('remove', props.id);
-    });
-
-    todoitem(span(props.text), span('-------'), remove_button);
-
-    // return todoitem.style(ToDoItemStyle);
-    // return todoitem.style('styles/todo.css');
-    return todoitem.style(ToDoItemStyle2);
-    // return todoitem.style(todo);
-});
-
-var div = Binh.el('div'),
-span = Binh.el('span');
-
-}();

package/example_webcomp/public/services/AnyService.js

@@ -1,8 +0,0 @@
-!function(){
-
-Binh.service(function AnyService() {
-
-});
-
-
-}();

package/example_webcomp/public/services/ServiceToDos.js

@@ -1,46 +0,0 @@
-!function(){
-
-Binh.service(function(define, state, http) {
-    var todos = state.as('todos');
-    
-    todos.schema(function(resolve) {
-        new http(api('get'))
-            .get(function(response) {
-                resolve(parseResponse(response));
-            });
-    });
-    
-    function handleResponse(response) {
-        todos.set(parseResponse(response));
-    }
-    
-    function parseResponse(response) {
-        var todoitems = [];
-    
-        Object.keys(response).forEach(function(key) {
-            var each = response[key];
-            todoitems.push({ id: key, text: each.text });
-        });
-    
-        return todoitems;
-    }
-    
-    define('add', function(value) {
-        new http(api('add'))
-            .body({ text: value })
-            .post(handleResponse);
-    });
-    
-    define('remove', function(id) {
-        new http(api('remove'))
-            .body({ id: id })
-            .post(handleResponse);
-    });
-    
-    function api(relative_url) {
-        return 'https://todolist-of-binh.fly.dev/todos/' + relative_url;
-    }
-});
-
-
-}();

package/example_webcomp/public/styles/ToDoItemStyle.js

@@ -1,44 +0,0 @@
-!function(){
-
-Binh.style(function(css) {
-    // css('@charset "utf-8";');
-
-    css(`@import url("styles/temp.css");`);
-    
-
-    css('.btn-remove', [
-        'color: purple;',
-        'margin-left: 10px'
-    ]);
-
-    css(
-    `@media (min-width: 800px) {
-        .btn-remove {
-            color: red;
-            margin-left: '15px';
-        }
-    }`
-    );
-
-    css(`
-    @keyframes slidein {
-        from {
-            transform: translateX(0%);
-        }
-    
-        to {
-            transform: translateX(100%);
-        }
-    }
-    `);
-
-    css(`
-    @page {
-        size: 8.5in 9in;
-        margin-top: 4in;
-    }
-    `);
-});
-
-
-}();

package/example_webcomp/public/styles/ToDoItemStyle2.js

@@ -1,9 +0,0 @@
-!function(){
-
-Binh.style(function anonymous(
-) {
-return "@charset \"utf-8\"; @import url(\"/styles/temp.css\"); /* .btn-remove { color: blue; margin-left: '15px'; } */ @media (min-width: 800px) { .btn-remove { color: red; margin-left: '15px'; } } @keyframes slidein { from { transform: translateX(0%); } to { transform: translateX(100%); } } @page { size: 8.5in 9in; margin-top: 4in; }";
-});
-
-
-}();

package/example_webcomp/public/styles/temp.css

@@ -1,4 +0,0 @@
-.btn-remove {
-    color: purple;
-    margin-left: '15px';
-}

package/example_webcomp/public/styles/todo.css

@@ -1,31 +0,0 @@
-@charset "utf-8";
-
-@import url("/styles/temp.css");
-
-/* .btn-remove {
-    color: blue;
-    margin-left: '15px';
-} */
-
-@media (min-width: 800px) {
-
-    .btn-remove {
-        color: red;
-        margin-left: '15px';
-    }
-}
-
-@keyframes slidein {
-    from {
-        transform: translateX(0%);
-    }
-
-    to {
-        transform: translateX(100%);
-    }
-}
-
-@page {
-    size: 8.5in 9in;
-    margin-top: 4in;
-}

package/example_webcomp/public/styles/todo.css.js

@@ -1,9 +0,0 @@
-!function(){
-
-Binh.style(function anonymous(
-) {
-return "@charset \"utf-8\"; @import url(\"/styles/temp.css\"); /* .btn-remove { color: blue; margin-left: '15px'; } */ @media (min-width: 800px) { .btn-remove { color: red; margin-left: '15px'; } } @keyframes slidein { from { transform: translateX(0%); } to { transform: translateX(100%); } } @page { size: 8.5in 9in; margin-top: 4in; }";
-});
-
-
-}();