binhend 1.0.11 → 1.1.0

package/example_webcomp/public/layouts/AppToDos.js

@@ -0,0 +1,100 @@
+!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

@@ -0,0 +1,29 @@
+!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

@@ -0,0 +1,52 @@
+!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

@@ -0,0 +1,30 @@
+!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

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

package/example_webcomp/public/services/ServiceToDos.js

@@ -0,0 +1,46 @@
+!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

@@ -0,0 +1,44 @@
+!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

@@ -0,0 +1,9 @@
+!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

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

package/example_webcomp/public/styles/todo.css

@@ -0,0 +1,31 @@
+@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

@@ -0,0 +1,9 @@
+!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/package.json

@@ -1,17 +1,27 @@
 {
   "name": "binhend",
-  "version": "1.0.11",
+  "version": "1.1.0",
   "description": "",
   "main": "index.js",
   "author": "Nguyen Duc Binh",
   "license": "UNLICENSED",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
-    "example": "node example PORT=5555"
+    "example-api": "nodemon example_api PORT=5555",
+    "example-webcomp": "nodemon example_webcomp"
   },
   "dependencies": {
     "express": "^4.17.1"
   },
+  "devDependencies": {
+    "nodemon": "^2.0.20"
+  },
+  "nodemonConfig": {
+    "ignore": [
+      "example_webcomp/public/**"
+    ],
+    "delay": 2500
+  },
   "engines": {
     "node": ">= 16.17.1"
   }

package/src/binh.js

@@ -7,6 +7,7 @@ const { ConfigLoader } = require('./configuration');
 const { HTTPS } = require('./https');
 const { Server } = require('./server');
 const { APIs, Router } = require('./api');
+const Component = require('./component');
 
 const Crypto = require('./cryptography');
 
@@ -78,9 +79,74 @@ function Binh() {
         return new ConfigLoader(config);
     };
 
+    binh.ui = function(amodule, component, htmltags, links) {
+        component.htmltags = htmltags;
+        component.links = links;
+        binh.bundle('ui', amodule, component);
+    };
+
+    binh.service = function(amodule, component, links) {
+        component.links = links;
+        binh.bundle('service', amodule, component);
+    };
+
+    binh.style = function(amodule, component) {
+        binh.bundle('style', amodule, component);
+    };
+
+    binh.css = function(amodule, cssFilename) {
+        var cssFilePath = cssFilename && path.join(amodule.path, cssFilename) || amodule.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', amodule, component);
+    };
+
+    binh.bundle = function(type, amodule, component) {
+        if (!(component instanceof Function)) return;
+
+        var dependencies = {};
+        handleDependencies(dependencies, amodule.children);
+
+        component.type = type;
+        component.dependencies = dependencies;
+        component.path = amodule.filename;
+        component.constructor = Component;
+
+        amodule.exports = component;
+    };
+
+    function handleDependencies(dependencies, children) {
+        children.forEach(function(child) {
+            if (dependencies[child.filename]) return;
+
+            var component = child.exports;
+
+            if (component.constructor === Component) {
+                dependencies[child.filename] = component;
+                handleDependencies(dependencies, child.children);
+            }
+        });
+    }
+
     global.binh = binh;
     global.config = binh.config;
 
+    this.web = function(buildpath, sourcepath) {
+        if (typeof buildpath !== 'string') return this;
+
+        var destination = path.join(rootpath, buildpath);
+
+        this.web.value = destination;
+        
+        if (typeof sourcepath === 'string') {
+            var source = path.join(rootpath, sourcepath);
+            Component.generate(source, destination);
+        }
+
+        return this;
+    };
+
     this.rootpath = function(path) {
         rootpath = typeof path === 'string' ? path : require.main.path;
         return this;
@@ -127,7 +193,7 @@ function Binh() {
     };
 
     this.api = function(api_path) {
-        this.api.value =`${rootpath}/${api_path}`;
+        this.api.value = path.join(rootpath, api_path);
         return this;
     };
 
@@ -157,6 +223,7 @@ function Binh() {
             new Server({
                 port: _this.port.value,
                 api: APIs(_this.api.value),
+                web: _this.web.value,
                 callback: callback,
                 configs: configs
             });

package/src/code.js

@@ -0,0 +1,88 @@
+
+const { parse } = require('path');
+
+function dependencies(component, root) {
+    var code = '', dependencies = component.dependencies;
+
+    for (var filepath in dependencies) {
+        var url = filepath.replace(root, '').replace(/\\/g, '/');
+
+        var name = parse(filepath).name.replace(/-/g, '').replace(/\W.*/, '');
+
+        var dependency = dependencies[filepath];
+
+        code += `var ${name} = Binh.${dependency.type}('${url}', ${dependency.toString()});\r\n\r\n`;
+    }
+
+    code += `Binh.${component.type}(${component.toString()});\r\n`
+
+    return code;
+}
+
+function htmltags(component) {
+    var code = '', list = [],
+        tags = distinctValues(component, 'htmltags');
+
+    tags.forEach(function(tag) {
+        list.push(`${tag} = Binh.el('${tag}')`);
+    });
+
+    if (list.length) {
+        code = `var ${list.join(',\r\n')};`;
+    }
+
+    code += code ? '\r\n' : '';
+
+    return code;
+}
+
+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});`;
+    }
+    else {
+        code = IIF(codes);
+    }
+
+    return code;
+}
+
+function IIF(codes) {
+    return `!function(){\r\n\r\n${codes.join('\r\n')}\r\n}();`
+}
+
+function distinctValues(component, key) {
+    var arrays = [component[key]],
+        dependencies = component.dependencies;
+
+    for (var filepath in dependencies) {
+        arrays.push(dependencies[filepath][key]);
+    }
+
+    return uniquefy(arrays);
+}
+
+function uniquefy(arrays) {
+    var map = {};
+
+    if (!(arrays instanceof Array)) return;
+
+    arrays.forEach(function(array) {
+        if (!(array instanceof Array)) return;
+        
+        array.forEach(function(value) {
+            map[value] = true;
+        });
+    });
+
+    return Object.keys(map);
+}
+
+module.exports = {
+    dependencies,
+    htmltags,
+    prequire,
+    IIF
+};