added fragments for UI

Author: levizwannah

OpenScript.js

@@ -443,19 +443,25 @@ var OpenScript = {
 
         /**
          * Add Event Listeners
-         * @param {string} event
+         * @param {string} events - space separated events
          * @param {function} listener - asynchronous function
          */
-        on(event, listener) {
-            if (this.#logs[event]) {
-                let emitted = this.#logs[event];
+        on(events, listener) {
+            events = events.split(/[\s\|]+/);
 
-                for (let i = 0; i < emitted.length; i++) {
-                    listener(...emitted[i].args);
+            for(let event of events) {
+                event.trim();
+                if (this.#logs[event]) {
+                    let emitted = this.#logs[event];
+    
+                    for (let i = 0; i < emitted.length; i++) {
+                        listener(...emitted[i].args);
+                    }
                 }
+
+                this.#emitter.on(event, listener);
             }
 
-            return this.#emitter.on(event, listener);
         }
 
         /**
@@ -1487,9 +1493,17 @@ var OpenScript = {
                 attr[`s-${s.id}`] = s.id;
             });
 
+            let markup = this.render(...args, { withCAttr: true });
+            
+            if(markup.tagName == 'FRAGMENT' && markup.childNodes.length > 0) {
+
+                let children = markup.childNodes;
+                
+                return children.length > 1 ? children : children[0];
+            } 
+
             if (!this.visible) attr.style = "display: none;";
 
-            let markup = this.render(...args, { withCAttr: true });
             let cAttributes = {};
 
             if (markup instanceof HTMLElement) {
@@ -2280,7 +2294,7 @@ var OpenScript = {
             } else {
                 root = this.dom.createElement(name);
             }
-
+            
             let parseAttr = (obj) => {
                 for (let k in obj) {
                     let v = obj[k];
@@ -2342,11 +2356,18 @@ var OpenScript = {
                         val = (root.getAttribute(k) ?? "") + ` ${val}`;
                     }
 
-                    root.setAttribute(k, val);
+                    try{
+                        root.setAttribute(k, val);
+                    }
+                    catch(e) {
+                        console.error(`Attributes resulting in the error: `, obj);
+                        throw Error(e);
+                    }
                 }
             };
 
             const parse = (arg, isComp) => {
+                
                 if (
                     arg instanceof DocumentFragment ||
                     arg instanceof HTMLElement
@@ -2375,7 +2396,7 @@ var OpenScript = {
 
                 if (arg instanceof OpenScript.State) continue;
 
-                if (Array.isArray(arg)) {
+                if (Array.isArray(arg) || arg instanceof HTMLCollection || arg instanceof NodeList) {
                     if (isComponent) continue;
 
                     arg.forEach((e) => {

example/components/App.js

@@ -1,3 +1,36 @@
+class Table extends OpenScript.Component {
+    render(...args) {
+        return h.fragment(
+            h.table(
+                {class:  'table'},
+                h.tbody(
+                    each([1, 2, 3, 4, 5, 6], () => h.Row("Column")),
+                ),
+                ...args
+            )
+        )
+    }
+}
+
+class Row extends OpenScript.Component {
+    render(text, ...args){
+        return h.fragment(
+            h.tr(
+                each([1, 2, 3, 4], () => h.Column(text)),
+                ...args
+            )
+        )
+    }
+}
+
+class Column extends OpenScript.Component {
+    render(text, ...args) {
+        return h.fragment(
+            h.td(text, ...args)
+        );
+    }
+}
+
 class App extends OpenScript.Component {
 
     constructor(){
@@ -69,7 +102,9 @@ class App extends OpenScript.Component {
 
                 h.BlogList(context("blogCxt").blogs, context('blogCxt').counter, "I am a blog List. I re-render when counter changes"),
 
-                h.BlogList(context("blogCxt").blogs, { value: 0 }, 'I am the same blog list. I do not re-render when counter changes because I do not listen its changes.' )
+                h.BlogList(context("blogCxt").blogs, { value: 0 }, 'I am the same blog list. I do not re-render when counter changes because I do not listen its changes.' ),
+
+                h.Table()
             ),
 
             ...args

example/ojs-config.js

@@ -134,4 +134,4 @@ broker.removeStaleEvents(); // broker garbage collection started
  | in the console when they are fired
  |------------------------------------------
 */
-broker.withLogs(true); 
+broker.withLogs(false);