fixed visibility error

Author: levizwannah

OpenScript.js

@@ -2203,12 +2203,30 @@ var OpenScript = {
 
                     k = k.replace(/_/g, "-");
 
-                    if(k === "class" || k === "Class") val = root.getAttribute(k) ?? "" + ` ${val}`;
+                    if(k === "class" || k === "Class"){
+                        val = (root.getAttribute(k) ?? "") + ` ${val}`;
+                    } 
 
                     root.setAttribute(k, val);
                 }
             }
 
+            const parse = (arg, isComp) => {
+                if(arg instanceof DocumentFragment || arg instanceof HTMLElement) {
+                    if(isComp) return true;
+
+                    rootFrag.append(arg);
+                    return true;   
+                }
+    
+                if(typeof arg === "object") {
+                    parseAttr(arg); 
+                    return true;
+                }
+
+                return false;
+            }
+
 
             for(let arg of args) {
 
@@ -2217,24 +2235,17 @@ var OpenScript = {
                 if(arg instanceof OpenScript.State) continue;
 
                 if(Array.isArray(arg)) {
+                    
                     if(isComponent) continue;
-                    arg.forEach(e => {
-                        if(e) rootFrag.append(this.toElement(e));
+
+                    arg.forEach(e => { 
+                        if(e) parse(e, isComponent);
                     });
-                    continue;
-                }
-    
-                if(arg instanceof DocumentFragment || arg instanceof HTMLElement) {
-                    if(isComponent) continue;
 
-                    rootFrag.append(arg);
-                    continue;   
-                }
-    
-                if(typeof arg === "object") {
-                    parseAttr(arg); 
                     continue;
                 }
+    
+                if(parse(arg, isComponent)) continue;
 
                 if(isComponent) continue;
 
@@ -2261,7 +2272,7 @@ var OpenScript = {
                     parent.append(root);
                 }
 
-                checkComponentsVisibility();
+                // checkComponentsVisibility();
 
                 if(component){
                     component.emit(event, eventParams);
@@ -2297,7 +2308,7 @@ var OpenScript = {
          * @param {function} f - This function should return an HTMLElement or a string or an Array of either
          * @returns {HTMLElement|string|Array<HTMLElement|string>}
          */
-        call = (f = () => `<ojs-group></ojs-group>`) => {
+        call = (f = () => h['ojs-group']()) => {
             return f();
         }
 

example/components/App.js

@@ -9,6 +9,7 @@ class App extends OpenScript.Component {
         req("MainNav");
         req("Blog.List");
         req("Counter");
+        req('Chart');
     }
 
     render(...args) {
@@ -61,6 +62,10 @@ class App extends OpenScript.Component {
                 h.BlogCounter(context("blogCxt").counter, {
                     class: "p-1"
                 }),
+
+                h.Chart(200, {
+                    class: "mb-3"
+                }),
 
                 h.BlogList(context("blogCxt").blogs, context('blogCxt').counter, "I am a blog List. I re-render when counter changes"),
 

example/components/Chart.js

@@ -0,0 +1,58 @@
+class ProgressBar extends OpenScript.Component {
+
+    render(width, ...args){
+        
+        return h.div(
+            {
+                class: "progress",
+                role: "progressbar",
+                aria_label: "Basic example",
+                aria_valuenow: "0",
+                aria_valuemin: "0",
+                aria_valuemax: "100"
+            },
+            h.div(        {
+                    class: "progress-bar",
+                    style: `width: ${width}%`
+                }
+            ),
+            ...args
+        )
+    }
+
+    async $$numberChanged(){
+        this.markup().forEach(element => {
+            element.querySelector(".progress-bar").style.width = `${Math.floor(Math.random() * 100) % 100}%`;
+        });
+    }
+}
+
+class Chart extends OpenScript.Component {
+
+    render(number, ...args) {
+
+        return h.div(
+            {
+                class: "card mb-3"
+            },
+            
+            h.div({class: 'card-header'}, `I am ${this.name} Component & I re-render`),
+
+            h.div(
+                { class: "card-body "},
+                h.h4({ class: "card-text" }, "Highest: ", 200),
+                h.call(() => {
+                    let bars = [];
+
+                    for(let i = 0; i < 10; i++){
+                        let width = Math.floor(Math.random() * 100) % 100;
+                        bars.push(h.ProgressBar(width, {class: "mb-3"}))
+                    }
+
+                    return bars;
+                })
+            ),
+            ...args
+        )
+    }
+}

example/contexts/Root.js

@@ -0,0 +1,7 @@
+class Root extends OpenScript.Context {
+
+    constructor() {
+        super();
+        this.test = state(1);
+    }
+}

example/contexts/RootContext.js

@@ -1,7 +1,7 @@
 ojs(async e => {
 
-    fetchContext("rootCxt", "RootContext");
-    fetchContext("blogCxt", "Blog.Context");
+    fetchContext("rootCxt", "Root");
+    putContext("blogCxt", "Blog.Context");
 
     req("App");
 
@@ -25,6 +25,8 @@ ojs(async e => {
     bc.put("counter", state(0));
     bc.put("blogs", blog);
 
+    bc.number = state(0);
+
     let rc = context("rootCxt");
     rc.domRoot = h.dom.querySelector("#root");
 
@@ -51,5 +53,10 @@ ojs(async e => {
 
     }, 1000);
 
+    setInterval(() => {
+        bc.number.value++;
+        broker.send('numberChanged')
+    }, 500);
+
 });
 

example/logic.js

@@ -3,12 +3,19 @@
  |----------------------------------
 */
 
+/**----------------------------------
+ * 
+ * Set the default route path here
+ * ----------------------------------
+ */
+route.basePath('example'); // === '/'
+
 /*-----------------------------------
  | set the directories in which we
  | can find the context files
  |-----------------------------------
 */
-ContextProvider.directory = './contexts';
+ContextProvider.directory = route.baseUrl('contexts');
 
 /*-----------------------------------
  | set the version number of the
@@ -19,17 +26,75 @@ ContextProvider.directory = './contexts';
 */
 ContextProvider.version = '1.0.0';
 
+/*-----------------------------------
+ | Set the Mediators directory
+ | so that we an load the mediators
+ | from that directory
+ |-----------------------------------
+*/
+MediatorManager.directory = route.baseUrl('mediators');
+
+/*-----------------------------------
+ | Set the version number of the 
+ | mediator files so that we can
+ | always load a fresh copy of the
+ | mediators files upon changes.
+ |----------------------------------
+*/
+MediatorManager.version = '1.0.0';
+
 /*-----------------------------------
  | Set the default component
  | directory for the loader
  |-----------------------------------
 */
-loader.dir = "./components";
+loader.dir = route.baseUrl('components');
 
 /*-----------------------------------
  | set the version number of the
  | component files so that we load
  | a fresh file when they change
  |-----------------------------------
 */
-loader.version = "1.0.0";
+loader.version = '1.0.0';
+
+/*-----------------------------------
+ | Set the default directory of the
+ | autoload object for loading
+ | files.
+ |-----------------------------------
+*/
+
+autoload.dir = route.baseUrl('classes');
+
+/*-----------------------------------
+ | set the version number of the
+ | JS files so that we load
+ | a fresh file when they change
+ |-----------------------------------
+*/
+autoload.version = '1.0.0';
+
+/*--------------------------------
+ | Set the logs clearing interval
+ | for the broker to remove stale
+ | events. (milliseconds)
+ |--------------------------------
+*/
+broker.CLEAR_LOGS_AFTER = 30000; // 30 secs
+
+/*--------------------------------
+ | Set how old an event must be
+ | to be deleted from the broker's
+ | event log during logs clearing
+ |--------------------------------
+*/
+broker.TIME_TO_GC = 10000; // 10 secs
+
+
+/*-------------------------------------------
+ | Start the garbage 
+ | collector for the broker
+ |-------------------------------------------
+*/
+broker.removeStaleEvents(); // broker garbage collection started