npm - binhend - Versions diffs - 1.0.11 → 1.1.0 - Mend

binhend 1.0.11 → 1.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (51) hide show

package/example_webcomp/components/AnUserInterface.js +0 -0
package/example_webcomp/components/common/InputText.js +14 -0
package/example_webcomp/components/common/Link.js +16 -0
package/example_webcomp/components/common/Link2.js +13 -0
package/example_webcomp/components/index.html +18 -0
package/example_webcomp/components/index.js +6 -0
package/example_webcomp/components/layouts/AppMainLayout.js +22 -0
package/example_webcomp/components/layouts/AppToDos.js +47 -0
package/example_webcomp/components/layouts/PageContent.js +25 -0
package/example_webcomp/components/layouts/PageHeader.js +49 -0
package/example_webcomp/components/layouts/ToDoItem.js +25 -0
package/example_webcomp/components/services/AnyService.js +6 -0
package/example_webcomp/components/services/ServiceToDos.js +42 -0
package/example_webcomp/components/styles/ToDoItemStyle.js +40 -0
package/example_webcomp/components/styles/ToDoItemStyle2.js +2 -0
package/example_webcomp/components/styles/temp.css +4 -0
package/example_webcomp/components/styles/todo.css +31 -0
package/example_webcomp/components/styles/todo.css.js +2 -0
package/example_webcomp/config.js +13 -0
package/example_webcomp/index.js +10 -0
package/example_webcomp/public/AnUserInterface.js +0 -0
package/example_webcomp/public/common/InputText.js +17 -0
package/example_webcomp/public/common/Link.js +17 -0
package/example_webcomp/public/common/Link2.js +13 -0
package/example_webcomp/public/index.html +18 -0
package/example_webcomp/public/index.js +6 -0
package/example_webcomp/public/layouts/AppMainLayout.js +96 -0
package/example_webcomp/public/layouts/AppToDos.js +100 -0
package/example_webcomp/public/layouts/PageContent.js +29 -0
package/example_webcomp/public/layouts/PageHeader.js +52 -0
package/example_webcomp/public/layouts/ToDoItem.js +30 -0
package/example_webcomp/public/services/AnyService.js +8 -0
package/example_webcomp/public/services/ServiceToDos.js +46 -0
package/example_webcomp/public/styles/ToDoItemStyle.js +44 -0
package/example_webcomp/public/styles/ToDoItemStyle2.js +9 -0
package/example_webcomp/public/styles/temp.css +4 -0
package/example_webcomp/public/styles/todo.css +31 -0
package/example_webcomp/public/styles/todo.css.js +9 -0
package/package.json +12 -2
package/src/binh.js +68 -1
package/src/code.js +88 -0
package/src/component.js +108 -0
package/src/server.js +9 -0
package/testa.js +28 -0
/package/{example → example_api}/config.js +0 -0
/package/{example → example_api}/index.js +0 -0
/package/{example → example_api}/routes/test/bb.js +0 -0
/package/{example → example_api}/routes/test/index.js +0 -0
/package/{example → example_api}/routes/test/some.js +0 -0
/package/{example → example_api}/routes/test.js +0 -0
/package/{example → example_api}/routes/testa.js +0 -0

package/example_webcomp/components/AnUserInterface.js ADDED Viewed

File without changes

package/example_webcomp/components/common/InputText.js ADDED Viewed

@@ -0,0 +1,14 @@
+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;
+}
+binh.ui(module, main, ['input']);

package/example_webcomp/components/common/Link.js ADDED Viewed

@@ -0,0 +1,16 @@
+function Link() {
+    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;
+}
+binh.ui(module, Link);

package/example_webcomp/components/common/Link2.js ADDED Viewed

@@ -0,0 +1,13 @@
+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/components/index.html ADDED Viewed

@@ -0,0 +1,18 @@
+<!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/components/index.js ADDED Viewed

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

package/example_webcomp/components/layouts/AppMainLayout.js ADDED Viewed

@@ -0,0 +1,22 @@
+require('./PageHeader');
+require('./PageContent');
+require('./../services/AnyService');
+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;
+}
+binh.ui(module, AppMainLayout, ['div'], ['https://code.jquery.com/jquery-3.7.0.min.js']);

package/example_webcomp/components/layouts/AppToDos.js ADDED Viewed

@@ -0,0 +1,47 @@
+// require('./PageHeader');
+// require('./ToDoItem');
+require('./../common/InputText');
+require('./../services/ServiceToDos');
+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;
+}
+binh.ui(module, main, ['div', 'span']);

package/example_webcomp/components/layouts/PageContent.js ADDED Viewed

@@ -0,0 +1,25 @@
+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;
+}
+binh.ui(module, PageContent, ['div', 'trans']);

package/example_webcomp/components/layouts/PageHeader.js ADDED Viewed

@@ -0,0 +1,49 @@
+// var { Link } = require('./../common/Link');
+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 htmltags = ['div', 'nav', 'ul', 'li', 'a'];
+binh.ui(module, PageHeader, htmltags);

package/example_webcomp/components/layouts/ToDoItem.js ADDED Viewed

@@ -0,0 +1,25 @@
+// require('./../styles/ToDoItemStyle');
+require('./../styles/ToDoItemStyle2');
+// require('../styles/todo.css.js');
+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);
+}
+binh.ui(module, main, ['div', 'span']);

package/example_webcomp/components/services/AnyService.js ADDED Viewed

@@ -0,0 +1,6 @@
+function AnyService() {
+}
+binh.service(module, AnyService);

package/example_webcomp/components/services/ServiceToDos.js ADDED Viewed

@@ -0,0 +1,42 @@
+binh.service(module, 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/components/styles/ToDoItemStyle.js ADDED Viewed

@@ -0,0 +1,40 @@
+binh.style(module, 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/components/styles/ToDoItemStyle2.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+
2	+ binh.css(module, './todo.css');

package/example_webcomp/components/styles/temp.css ADDED Viewed

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

package/example_webcomp/components/styles/todo.css ADDED Viewed

@@ -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/components/styles/todo.css.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+
2	+ binh.css(module);

package/example_webcomp/config.js ADDED Viewed

@@ -0,0 +1,13 @@
+module.exports = function(loader) {
+    var sample = {
+        ABC: 123,
+        Text: 'Hello',
+        NAME: 'MyApp',
+        PORT: 1400
+    };
+    var { filter, object } = loader;
+    filter(object, sample, ['PORT', 'NAME']);
+};

package/example_webcomp/index.js ADDED Viewed

@@ -0,0 +1,10 @@
+'use strict';
+const { Binh } = require('../src/binh');
+new Binh()
+    .web('public', 'components')
+    .port(1234)
+    .start(function(server, configs) {
+        console.log('### START >>> configs:', configs);
+    });

package/example_webcomp/public/AnUserInterface.js ADDED Viewed

File without changes

package/example_webcomp/public/common/InputText.js ADDED Viewed

@@ -0,0 +1,17 @@
+!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/Link.js ADDED Viewed

@@ -0,0 +1,17 @@
+!function(){
+Binh.ui(function Link() {
+    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/common/Link2.js ADDED Viewed

@@ -0,0 +1,13 @@
+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 ADDED Viewed

@@ -0,0 +1,18 @@
+<!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 ADDED Viewed

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

package/example_webcomp/public/layouts/AppMainLayout.js ADDED Viewed

@@ -0,0 +1,96 @@
+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');
+});