binhend 1.1.0 → 1.1.2

package/example_api/routes/test/bb.js

@@ -1,4 +1,4 @@
-const { get } = binh().Router(module);
+const { get } = binh.router(module);
 
 // get('/', function(req, res) {
 //     res.json({ path:'/', dir: __dirname, file: __filename });

package/example_api/routes/test/index.js

@@ -1,4 +1,4 @@
-const { router, get, post } = binh().Router(module);
+const { router, get, post } = binh.router(module);
 
 get('/', function(req, res) {
     res.json({ path:'/', dir: __dirname, file: __filename });

package/example_api/routes/test/some.js

@@ -1,4 +1,4 @@
-const { router, get, post } = binh().Router(module);
+const { router, get, post } = binh.router(module);
 
 get('/', function(req, res) {
     res.json({ path:'/', dir: __dirname, file: __filename });

package/example_api/routes/test.js

@@ -1,4 +1,8 @@
-const { get } = binh().Router(module);
+const { get } = binh.router(module);
+
+get('/', function(req, res) {
+    res.json({ path:'/', dir: __dirname, file: __filename });
+});
 
 get('/bb', function(req, res) {
     res.json({ path:'/bb', dir: __dirname, file: __filename });

package/example_api/routes/testa.js

@@ -1,4 +1,4 @@
-const { router, get, post } = binh().Router(module);
+const { router, get, post } = binh.router(module);
 
 get('/', function(req, res) {
     res.json({ path:'/', dir: __dirname, file: __filename });

package/example_webcomp/components/common/InputText.js

@@ -1,10 +1,20 @@
 
+require('./../services/ServiceToDos').as('Toto');
+
 function main() {
+    // var addTodoItem = Toto.debounce('add', 1500, true);
+
+    // setTimeout(function() {
+    //     addTodoItem('over 10kms');
+    // }, 10000);
+    
     var inputbox = input({ type: 'text', placeholder: 'Enter to-do item' });
+
+    var submit = inputbox.action('submit');
     
     inputbox.on('keypress', function (event) {
         if (event.key === "Enter") {
-            inputbox.does('submit', inputbox.element.value);
+            submit(inputbox.element.value);
         }
     });
     

package/example_webcomp/components/common/Link.js

@@ -1,7 +1,7 @@
 
 
 function Link() {
-    var { a } = Binh.elements;
+    var { a } = Binh.element();
 
     var text = arguments[0];
     var path = arguments[1];

package/example_webcomp/components/common/Link2.js

@@ -1,6 +1,6 @@
 
 Binh.ui(function() {
-    var { a } = Binh.elements;
+    var { a } = Binh.element('a');
 
     var text = arguments[0];
     var path = arguments[1];

package/example_webcomp/components/index.js

@@ -1,6 +1,14 @@
 
+Binh.script('https://cdn.jsdelivr.net/gh/jquery/jquery@3.5.1/dist/jquery.min.js', function() {
+    Binh.link('https://cdn.jsdelivr.net/npm/bootstrap@3.4.1/dist/css/bootstrap.min.css');
+    Binh.script('https://cdn.jsdelivr.net/npm/bootstrap@3.4.1/dist/js/bootstrap.min.js');
+});
+
+Binh.Router.onload(function() {
+    console.log('#### ON ROUTING !!!');
+});
+
 Binh({
     '':         '/layouts/AppMainLayout.js',
     '/todos':    '/layouts/AppToDos.js'
 });
-

package/example_webcomp/components/layouts/AppMainLayout.js

@@ -19,4 +19,4 @@ function AppMainLayout() {
     return MainLayout;
 }
 
-binh.ui(module, AppMainLayout, ['div'], ['https://code.jquery.com/jquery-3.7.0.min.js']);
+binh.ui(module, AppMainLayout, ['div'], ['https://code.jquery.com/jquery-3.7.0.min.js', 'https://code.jquery.com/jquery-3.7.0.min.js']);

package/example_webcomp/components/layouts/AppToDos.js

@@ -1,13 +1,15 @@
 
-// require('./PageHeader');
+require('./PageHeader');
 // require('./ToDoItem');
 require('./../common/InputText');
-require('./../services/ServiceToDos');
+require('./Link');
+require('./../services/ServiceToDos').as('Dodo');
 
 
 function main() {
-    var PageHeader = this.ui('/layouts/PageHeader.js');
-    var ToDoItem = this.ui('/layouts/ToDoItem.js');
+    var ServiceToDos = Dodo;
+    // var PageHeader = Binh.ui('/layouts/PageHeader.js');
+    var ToDoItem = Binh.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
@@ -44,4 +46,4 @@ function main() {
     return maindiv;
 }
 
-binh.ui(module, main, ['div', 'span']);
+binh.ui(module, main, ['div', 'span'], ['https://code.jquery.com/jquery-3.7.0.min.js']);

package/example_webcomp/components/layouts/Link.js

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

package/example_webcomp/components/layouts/PageContent.js

@@ -22,4 +22,4 @@ function PageContent() {
     return PageContent;
 }
 
-binh.ui(module, PageContent, ['div', 'trans']);
+binh.ui(module, PageContent, ['div', 'trans'], ['https://code.jquery.com/jquery-3.7.0.min.js']);

package/example_webcomp/components/layouts/PageHeader.js

@@ -1,8 +1,8 @@
 
-// var { Link } = require('./../common/Link');
+var { Link } = require('./../common/Link');
 
 function PageHeader() {
-    var Link = this.ui('/common/Link2.js');
+    // var Link = Binh.ui('/common/Link2.js');
     
     var PageHeader = div({ id: 'page-header' });
     

package/example_webcomp/components/layouts/ToDoItem.js

@@ -4,14 +4,15 @@ require('./../styles/ToDoItemStyle2');
 // require('../styles/todo.css.js');
 
 function main(props) {
-    // var ToDoItemStyle = this.style('/styles/todo.css');
+    // var ToDoItemStyle = Binh.style('/styles/todo.css');
 
     var todoitem = div({ style: 'margin: 3px;' });
+    var removeToDoItem = todoitem.action('remove');
 
     var remove_button = span({ class: 'btn-remove' })('X');
 
     remove_button.on('click', function() {
-        todoitem.does('remove', props.id);
+        removeToDoItem(props.id);
     });
 
     todoitem(span(props.text), span('-------'), remove_button);

package/example_webcomp/components/styles/temp.css

@@ -1,4 +1,7 @@
+
+@import url("/styles/todo.css");
+
 .btn-remove {
     color: purple;
     margin-left: '15px';
-}
+}

package/example_webcomp/public/Link3.js

@@ -0,0 +1,18 @@
+!function(){
+
+
+Binh.ui(function Link() {
+    var { a } = Binh.element();
+
+    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/common/InputText.js

@@ -1,11 +1,68 @@
 !function(){
 
+!function(){
+
+Toto = 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;
+    }
+});
+
+
+}();
+
+var Toto;
+
 Binh.ui(function main() {
+    // var addTodoItem = Toto.debounce('add', 1500, true);
+
+    // setTimeout(function() {
+    //     addTodoItem('over 10kms');
+    // }, 10000);
+    
     var inputbox = input({ type: 'text', placeholder: 'Enter to-do item' });
+
+    var submit = inputbox.action('submit');
     
     inputbox.on('keypress', function (event) {
         if (event.key === "Enter") {
-            inputbox.does('submit', inputbox.element.value);
+            submit(inputbox.element.value);
         }
     });
     

package/example_webcomp/public/common/Link.js

@@ -1,7 +1,8 @@
 !function(){
 
+
 Binh.ui(function Link() {
-    var { a } = Binh.elements;
+    var { a } = Binh.element();
 
     var text = arguments[0];
     var path = arguments[1];

package/example_webcomp/public/common/Link2.js

@@ -1,6 +1,6 @@
 
 Binh.ui(function() {
-    var { a } = Binh.elements;
+    var { a } = Binh.element('a');
 
     var text = arguments[0];
     var path = arguments[1];

package/example_webcomp/public/index.js

@@ -1,6 +1,14 @@
 
+Binh.script('https://cdn.jsdelivr.net/gh/jquery/jquery@3.5.1/dist/jquery.min.js', function() {
+    Binh.link('https://cdn.jsdelivr.net/npm/bootstrap@3.4.1/dist/css/bootstrap.min.css');
+    Binh.script('https://cdn.jsdelivr.net/npm/bootstrap@3.4.1/dist/js/bootstrap.min.js');
+});
+
+Binh.Router.onload(function() {
+    console.log('#### ON ROUTING !!!');
+});
+
 Binh({
     '':         '/layouts/AppMainLayout.js',
     '/todos':    '/layouts/AppToDos.js'
 });
-

package/example_webcomp/public/layouts/AppMainLayout.js

@@ -1,7 +1,9 @@
-Binh.requires(['https://code.jquery.com/jquery-3.7.0.min.js'], function() {
+Binh.prequire(['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');
+!function(){
+
+PageHeader = Binh.ui('/layouts/PageHeader.js', function PageHeader() {
+    // var Link = Binh.ui('/common/Link2.js');
     
     var PageHeader = div({ id: 'page-header' });
     
@@ -43,7 +45,31 @@ var PageHeader = Binh.ui('/layouts/PageHeader.js', function PageHeader() {
     return PageHeader;
 });
 
-var PageContent = Binh.ui('/layouts/PageContent.js', function PageContent() {
+!function(){
+
+Link = Binh.ui('/common/Link.js', function Link() {
+    var { a } = Binh.element();
+
+    var text = arguments[0];
+    var path = arguments[1];
+
+    var link = a(text).on('click', function() {
+        Binh.Router.navigate(path);
+    });
+
+    return link;
+});
+
+
+}();
+
+var Link;
+
+}();
+
+!function(){
+
+PageContent = Binh.ui('/layouts/PageContent.js', function PageContent() {
     var { Router } = Binh;
 
     var PageContent = div({ id: 'page-content' });
@@ -66,10 +92,53 @@ var PageContent = Binh.ui('/layouts/PageContent.js', function PageContent() {
     return PageContent;
 });
 
-var AnyService = Binh.service('/services/AnyService.js', function AnyService() {
 
+}();
+
+!function(){
+
+AnyService = Binh.service('/services/AnyService.js', function AnyService() {
+
+});
+
+
+}();
+
+!function(){
+
+Button = Binh.ui('npm://binhjsx/node/ui/button/Button.js', function main() {
+    var abutton = button();
+    var trigger = abutton.action('trigger');
+
+    abutton.on('click', trigger);
+    abutton.on('touchend', trigger);
+    
+    return abutton;
 });
 
+
+}();
+
+!function(){
+
+Link3 = Binh.ui('', function Link() {
+    var { a } = Binh.element();
+
+    var text = arguments[0];
+    var path = arguments[1];
+
+    var link = a(text).on('click', function() {
+        Binh.Router.navigate(path);
+    });
+
+    return link;
+});
+
+
+}();
+
+var PageHeader, PageContent, AnyService, Button, Link3;
+
 Binh.ui(function AppMainLayout() {
     var MainLayout = div({ id: 'app-main-layout' });
 
@@ -80,7 +149,8 @@ Binh.ui(function AppMainLayout() {
             setTimeout(function() {
                 console.log('>>> App Main Layout:', thisEl);
             }, 1000);
-        }
+        },
+        Button()('test this button')
     );
     
     return MainLayout;
@@ -91,6 +161,7 @@ nav = Binh.el('nav'),
 ul = Binh.el('ul'),
 li = Binh.el('li'),
 a = Binh.el('a'),
-trans = Binh.el('trans');
+trans = Binh.el('trans'),
+button = Binh.el('button');
 
 });

package/example_webcomp/public/layouts/AppToDos.js

@@ -1,18 +1,126 @@
+Binh.prequire(['https://code.jquery.com/jquery-3.7.0.min.js'], function() {
+
+!function(){
+
+PageHeader = Binh.ui('/layouts/PageHeader.js', function PageHeader() {
+    // var Link = Binh.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;
+});
+
 !function(){
 
-var InputText = Binh.ui('/common/InputText.js', function main() {
+Link = Binh.ui('/common/Link.js', function Link() {
+    var { a } = Binh.element();
+
+    var text = arguments[0];
+    var path = arguments[1];
+
+    var link = a(text).on('click', function() {
+        Binh.Router.navigate(path);
+    });
+
+    return link;
+});
+
+
+}();
+
+var Link;
+
+}();
+
+!function(){
+
+InputText = Binh.ui('/common/InputText.js', function main() {
+    // var addTodoItem = Toto.debounce('add', 1500, true);
+
+    // setTimeout(function() {
+    //     addTodoItem('over 10kms');
+    // }, 10000);
+    
     var inputbox = input({ type: 'text', placeholder: 'Enter to-do item' });
+
+    var submit = inputbox.action('submit');
     
     inputbox.on('keypress', function (event) {
         if (event.key === "Enter") {
-            inputbox.does('submit', inputbox.element.value);
+            submit(inputbox.element.value);
         }
     });
     
     return inputbox;
 });
 
-var ServiceToDos = Binh.service('/services/ServiceToDos.js', function(define, state, http) {
+!function(){
+
+Toto = Binh.service('/services/ServiceToDos.js');
+
+
+}();
+
+var Toto;
+
+}();
+
+!function(){
+
+Link = Binh.ui('/layouts/Link.js', function Link() {
+    var { a } = Binh.element('a');
+
+    var text = arguments[0];
+    var path = arguments[1];
+
+    var link = a(text).on('click', function() {
+        Binh.Router.navigate(path);
+    });
+
+    return link;
+});
+
+
+}();
+
+!function(){
+
+Dodo = Binh.service('/services/ServiceToDos.js', function(define, state, http) {
     var todos = state.as('todos');
     
     todos.schema(function(resolve) {
@@ -54,9 +162,15 @@ var ServiceToDos = Binh.service('/services/ServiceToDos.js', function(define, st
     }
 });
 
+
+}();
+
+var PageHeader, InputText, Link, Dodo;
+
 Binh.ui(function main() {
-    var PageHeader = this.ui('/layouts/PageHeader.js');
-    var ToDoItem = this.ui('/layouts/ToDoItem.js');
+    var ServiceToDos = Dodo;
+    // var PageHeader = Binh.ui('/layouts/PageHeader.js');
+    var ToDoItem = Binh.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
@@ -95,6 +209,10 @@ Binh.ui(function main() {
 
 var div = Binh.el('div'),
 span = Binh.el('span'),
+nav = Binh.el('nav'),
+ul = Binh.el('ul'),
+li = Binh.el('li'),
+a = Binh.el('a'),
 input = Binh.el('input');
 
-}();
+});

package/example_webcomp/public/layouts/Link.js

@@ -0,0 +1,18 @@
+!function(){
+
+
+Binh.ui(function Link() {
+    var { a } = Binh.element('a');
+
+    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/layouts/PageContent.js

@@ -1,4 +1,5 @@
-!function(){
+Binh.prequire(['https://code.jquery.com/jquery-3.7.0.min.js'], function() {
+
 
 Binh.ui(function PageContent() {
     var { Router } = Binh;
@@ -26,4 +27,4 @@ Binh.ui(function PageContent() {
 var div = Binh.el('div'),
 trans = Binh.el('trans');
 
-}();
+});

package/example_webcomp/public/layouts/PageHeader.js

@@ -1,7 +1,27 @@
 !function(){
 
+!function(){
+
+Link = Binh.ui('/common/Link.js', function Link() {
+    var { a } = Binh.element();
+
+    var text = arguments[0];
+    var path = arguments[1];
+
+    var link = a(text).on('click', function() {
+        Binh.Router.navigate(path);
+    });
+
+    return link;
+});
+
+
+}();
+
+var Link;
+
 Binh.ui(function PageHeader() {
-    var Link = this.ui('/common/Link2.js');
+    // var Link = Binh.ui('/common/Link2.js');
     
     var PageHeader = div({ id: 'page-header' });