cradova 3.0.0 → 3.1.1

package/dist/index.js

@@ -1,5 +1,22 @@
+
+/*
+============================================================================="
+    ██████╗   ██████╗    █████═╗   ███████╗    ███████╗    ██╗   ██╗  █████╗   
+   ██╔════╝   ██╔══██╗  ██╔═╗██║   █      ██  ██╔═════╝█   ██║   ██║  ██╔═╗██  
+   ██║        ██████╔╝  ███████║   █      ██  ██║     ██   ██║   ██║  ██████╗  
+   ██║        ██╔══██╗  ██║  ██║   █      ██  ██║     ██   ╚██╗ ██╔╝  ██║  ██╗ 
+   ╚██████╗   ██║  ██║  ██║  ██║   ███████╔╝   ████████      ╚███╔╝   ██║  ██║ 
+    ╚═════╝   ╚═╝  ╚═╝  ╚═╝  ╚═╝   ╚══════╝     ╚════╝        ╚══╝    ╚═╝  ╚═╝ 
+=============================================================================
+Cradova FrameWork
+@version  3.0.0
+License: Apache V2
+Copyright 2022 Friday Candour. 
+Repository - https://github.com/fridaycandour/cradova
+=============================================================================
+*/
 // lib/parts/fns.ts
-var isNode = (node) => typeof node === "object" && typeof node.nodeType === "number";
+var isNode = (element) => element instanceof HTMLElement || element instanceof DocumentFragment;
 var cradovaEvent = class {
   constructor() {
     this.listeners = {};
@@ -10,6 +27,9 @@ var cradovaEvent = class {
     }
     this.listeners[eventName].push(callback);
   }
+  // removeEventListener(eventName: string, num: number) {
+  //   this.listeners[eventName].splice(num, 1);
+  // }
   dispatchEvent(eventName, eventArgs) {
     const eventListeners = this.listeners[eventName] || [];
     for (; eventListeners.length !== 0; ) {
@@ -71,6 +91,12 @@ function assert(condition, ...elements) {
   }
   return void 0;
 }
+function assertOr(condition, ifTrue, ifFalse) {
+  if (condition) {
+    return ifTrue;
+  }
+  return ifFalse;
+}
 function loop(datalist2, component) {
   if (typeof component !== "function") {
     throw new Error(
@@ -79,87 +105,81 @@ function loop(datalist2, component) {
   }
   return Array.isArray(datalist2) ? datalist2.map(component) : void 0;
 }
-function assertOr(condition, ifTrue, ifFalse) {
-  if (condition) {
-    return ifTrue;
-  }
-  return ifFalse;
-}
 var Ref = class {
   constructor(component) {
     this.effects = [];
     this.effectuate = null;
     this.rendered = false;
     this.published = false;
-    this.hasFirstStateUpdateRun = false;
     this.preRendered = null;
     this.reference = new reference();
+    // hooks management
+    this._state = [];
+    this._state_track = {};
+    this._state_index = 0;
     this.component = component.bind(this);
   }
   preRender(data2) {
-    let ihtml = this.component(data2);
-    let phtml;
-    if (typeof ihtml === "function") {
-      phtml = ihtml;
-      ihtml = phtml();
+    let html = this.component(data2);
+    if (typeof html === "function") {
+      html = html();
     }
-    if (ihtml instanceof HTMLElement) {
-      this.preRendered = ihtml;
+    if (isNode(html)) {
+      this.preRendered = html;
     }
     if (!this.preRendered) {
       throw new Error(
         " \u2718  Cradova err :  Invalid component type for cradova Ref got  -  " + this.preRendered
       );
     }
-    this.reference._appendDomForce("element", this.preRendered);
+    this.reference._appendDomForce("html", this.preRendered);
   }
   destroyPreRendered() {
     this.preRendered = null;
   }
+  /**
+   * Cradova Ref
+   * ---
+   * returns html with cradova reference
+   * @param data
+   * @returns () => HTMLElement
+   */
   render(data2, stash) {
     this.effects = [];
     this.rendered = false;
-    this.hasFirstStateUpdateRun = false;
-    let element = null;
-    if (!this.preRendered) {
-      let ihtml = this.component(data2);
-      let phtml;
-      if (typeof ihtml === "function") {
-        phtml = ihtml;
-        ihtml = phtml();
-      }
-      if (ihtml instanceof HTMLElement) {
-        element = ihtml;
-      }
-      if (!element) {
-        throw new Error(
-          " \u2718  Cradova err :  Invalid component type for cradova Ref, got  -  " + element
-        );
-      }
+    let html = this.component(data2);
+    if (typeof html === "function") {
+      html = html();
+    }
+    if (!html) {
+      html = this.preRendered;
     }
     if (stash) {
       this.stash = data2;
     }
-    const av = async () => {
-      await this.effector.apply(this);
-    };
-    CradovaEvent.addEventListener("onmountEvent", av);
-    this.effector();
-    this.published = true;
-    this.rendered = true;
-    if (!element) {
-      element = this.preRendered;
-    }
-    this.reference._appendDomForce("element", element);
-    return element;
+    if (isNode(html)) {
+      this.reference._appendDomForce("html", html);
+      this.effector.apply(this);
+      this.rendered = true;
+      this.published = true;
+    } else {
+      console.error(" \u2718  Cradova err :  Invalid html content, got  - " + html);
+    }
+    return html;
   }
   instance() {
-    return this.reference.element;
+    return this.reference.html;
   }
   _setExtra(Extra) {
     this.Signal = Extra;
   }
-  effect(fn) {
+  _roll_state(data2, idx, get = false) {
+    if (!get) {
+      this._state[idx] = data2;
+    }
+    return this._state[idx];
+  }
+  _effect(fn) {
     if (!this.rendered) {
       this.effects.push(fn.bind(this));
     }
@@ -169,29 +189,30 @@ var Ref = class {
       for (let i2 = 0; i2 < this.effects.length; i2++) {
         await this.effects[i2].apply(this);
       }
+      this.effects = [];
     }
-    if (!this.hasFirstStateUpdateRun && this.effectuate) {
-      await this.effectuate();
+    if (this.effectuate) {
+      this.effectuate();
+      this.effectuate = null;
     }
-    this.hasFirstStateUpdateRun = true;
   }
+  /**
+   * Cradova Ref
+   * ---
+   * update ref component with new data and update the dom.
+   * @param data
+   * @returns
+   */
   updateState(data2, stash) {
-    if (!this) {
-      console.error(
-        " \u2718  Cradova err:  Ref.updateState has is passed out of scope"
-      );
-      return;
-    }
     if (!this.rendered) {
-      async function updateState(data3) {
-        await this.Activate(data3);
-      }
-      this.effectuate = updateState.bind(this, data2);
+      this.effectuate = () => {
+        if (this.published) {
+          this.Activate(data2);
+        }
+      };
     } else {
       if (this.published) {
-        (async () => {
-          await this.Activate(data2);
-        })();
+        this.Activate(data2);
       }
     }
     if (stash) {
@@ -199,40 +220,24 @@ var Ref = class {
     }
   }
   async Activate(data2) {
-    if (!data2) {
-      return;
-    }
+    this._state_index = 0;
     this.published = false;
-    if (!this.reference.element) {
+    if (!this.rendered) {
       return;
     }
-    let ihtml = this.component(data2);
-    let element;
-    let phtml;
-    if (typeof ihtml === "function") {
-      phtml = ihtml;
-      ihtml = phtml();
-    }
-    if (ihtml instanceof HTMLElement) {
-      element = ihtml;
+    let html = this.component(data2);
+    if (typeof html === "function") {
+      html = html();
     }
-    if (!element) {
-      throw new Error(
-        " \u2718  Cradova err :  Invalid component type for cradova Ref, got  -  " + element
-      );
-    }
-    this.reference.element.insertAdjacentElement("beforebegin", element);
-    if (this.reference.element.parentElement) {
-      this.reference.element.parentElement.removeChild(this.reference.element);
+    if (isNode(html)) {
+      this.reference.html.insertAdjacentElement("beforebegin", html);
+      this.reference.html.remove();
+      this.published = true;
+      this.reference._appendDomForce("html", html);
+      CradovaEvent.dispatchEvent("onmountEvent");
     } else {
-      this.reference.element.remove();
+      console.error(" \u2718  Cradova err :  Invalid html content, got  - " + html);
     }
-    this.reference._appendDomForce("element", element);
-    this.published = true;
-    CradovaEvent.dispatchEvent("onmountEvent");
-  }
-  remove() {
-    this.reference.element.remove();
   }
 };
 var frag = function(children) {
@@ -280,6 +285,25 @@ var reference = class {
     this[name] = Element;
   }
 };
+function useState(initialValue, ActiveRef) {
+  ActiveRef._state_index += 1;
+  const idx = ActiveRef._state_index;
+  if (!ActiveRef._state_track[idx]) {
+    ActiveRef._roll_state(initialValue, idx);
+    ActiveRef._state_track[idx] = true;
+  }
+  function setState(newState) {
+    ActiveRef._roll_state(newState, idx);
+    ActiveRef.updateState(newState);
+  }
+  return [ActiveRef._roll_state(null, idx, true), setState];
+}
+function useEffect(effect, ActiveRef) {
+  ActiveRef._effect(effect);
+}
+function useRef() {
+  return new reference();
+}
 
 // lib/parts/track.ts
 function dispatch(element, state) {
@@ -365,6 +389,13 @@ var createSignal = class {
       }
     }
   }
+  /**
+   *  Cradova Signal
+   * ----
+   *  set signal value
+   * @param value - signal value
+   * @returns void
+   */
   set(value, shouldRefRender) {
     if (typeof value === "function") {
       this.value = value(this.value);
@@ -381,6 +412,14 @@ var createSignal = class {
       this.callback(this.value);
     }
   }
+  /**
+   *  Cradova Signal
+   * ----
+   *  set a key value if it's an object
+   * @param key - key of the key
+   * @param value - value of the key
+   * @returns void
+   */
   setKey(key, value, shouldRefRender) {
     if (typeof this.value === "object" && !Array.isArray(this.value)) {
       this.value[key] = value;
@@ -401,6 +440,13 @@ var createSignal = class {
       );
     }
   }
+  /**
+   *  Cradova Signal
+   * ----
+   *  set a key to signal an action
+   * @param name - name of the action
+   * @param action function to execute
+   */
   createAction(name, action) {
     if (typeof name === "string" && typeof action === "function") {
       this.actions[name] = action;
@@ -410,6 +456,13 @@ var createSignal = class {
       );
     }
   }
+  /**
+   *  Cradova Signal
+   * ----
+   *  creates man y actions at a time
+   * @param name - name of the action
+   * @param action function to execute
+   */
   createActions(Actions) {
     for (const [name, action] of Object.entries(Actions)) {
       if (typeof name === "string" && typeof action === "function") {
@@ -421,14 +474,29 @@ var createSignal = class {
       }
     }
   }
+  /**
+   *  Cradova Signal
+   * ----
+   *  fires an action if available
+   * @param key - string key of the action
+   * @param data - data for the action
+   */
   fireAction(key, data2) {
     this._updateState(key, data2);
     if (typeof this.actions[key] === "function") {
-      this.actions[key].call(this, data2);
+      return this.actions[key].call(this, data2);
     } else {
       throw Error("\u2718  Cradova err : action " + key + "  does not exist!");
     }
   }
+  /**
+   * Cradova
+   * ---
+   * is used to bind signal data to elements and Refs
+   *
+   * @param prop
+   * @returns something
+   */
   bind(prop) {
     if (typeof this.value === "object" && typeof this.value[prop] !== "undefined") {
       return [this, prop];
@@ -486,6 +554,14 @@ var createSignal = class {
       }
     }
   }
+  /**
+   *  Cradova Signal
+   * ----
+   *  set a auto - rendering component for this store
+   *
+   * @param Ref component to bind to.
+   * @param path a property in the object to send to attached ref
+   */
   bindRef(ref, binding = { signalProperty: "", _element_property: "" }) {
     if (ref.render) {
       ref.render = ref.render.bind(ref, this.value);
@@ -506,9 +582,21 @@ var createSignal = class {
       "\u2718  Cradova err :  Invalid parameters for binding ref to Signal"
     );
   }
+  /**
+   *  Cradova Signal
+   * ----
+   *  set a update listener on value changes
+   * @param callback
+   */
   listen(callback) {
     this.callback = callback;
   }
+  /**
+   *  Cradova Signal
+   * ----
+   * clear the history on local storage
+   *
+   */
   clearPersist() {
     if (this.persistName) {
       localStorage.removeItem(this.persistName);
@@ -520,7 +608,13 @@ var createSignal = class {
 var localTree = new reference();
 var Screen = class {
   constructor(cradova_screen_initials) {
+    /**
+     * this is a set of added html to the screen
+     */
     this._secondaryChildren = [];
+    /**
+     * error handler for the screen
+     */
     this._errorHandler = null;
     this._packed = false;
     this._template = document.createElement("div");
@@ -533,6 +627,7 @@ var Screen = class {
     this._template.setAttribute("id", "cradova-screen-set");
     if (renderInParallel === true) {
       this._delegatedRoutesCount = 0;
+      this._persist = false;
     } else {
       if (typeof persist === "boolean") {
         this._persist = persist;
@@ -555,7 +650,7 @@ var Screen = class {
   }
   async _package() {
     if (typeof this._html === "function") {
-      let fuc = await this._html.apply(this, this._data);
+      let fuc = await this._html.apply(this);
       if (typeof fuc === "function") {
         fuc = fuc();
         if (isNode(fuc)) {
@@ -566,6 +661,10 @@ var Screen = class {
         if (isNode(fuc)) {
           this._template.innerHTML = "";
           this._template.appendChild(fuc);
+        } else {
+          throw new Error(
+            ` \u2718  Cradova err:  template function for the screen with name '${this._name}' returned ${fuc} instead of html`
+          );
         }
       }
     }
@@ -586,33 +685,25 @@ var Screen = class {
     if (this._deCallBack) {
       await this._deCallBack();
     }
-    if (this._transition) {
-      this._template.classList.remove(this._transition);
-    }
   }
   async _Activate(force = false) {
     if (!this._persist || force || !this._packed) {
       await this._package();
       this._packed = true;
     }
-    if (!localTree._doc) {
-      localTree._appendDomForce(
-        "_doc",
-        document.querySelector("[data-wrapper=app]")
-      );
-    }
-    if (!localTree._doc) {
-      throw new Error(
-        " \u2718  Cradova err: Unable to render, cannot find cradova root <div data-wrapper='app'> ... </div>"
-      );
-    }
     if (this._transition) {
       this._template.classList.add(this._transition);
     }
-    localTree._doc.innerHTML = "";
-    localTree._doc.appendChild(this._template);
     document.title = this._name;
+    localTree.doc.innerHTML = "";
+    localTree.doc.appendChild(this._template);
     CradovaEvent.dispatchEvent("onmountEvent");
+    window.scrollTo({
+      top: 0,
+      left: 0,
+      // @ts-ignore
+      behavior: "instant"
+    });
     if (this._callBack) {
       await this._callBack();
     }
@@ -627,16 +718,16 @@ RouterBox["lastNavigatedRoute"] = null;
 RouterBox["pageShow"] = null;
 RouterBox["pageHide"] = null;
 RouterBox["errorHandler"] = null;
-RouterBox["loadingScreen"] = {};
+RouterBox["loadingScreen"] = null;
 RouterBox["params"] = {};
 RouterBox["routes"] = {};
 RouterBox["pageevents"] = [];
-RouterBox["start_pageevents"] = async function(lastR, newR) {
+RouterBox["start_pageevents"] = async function(url) {
   setTimeout(() => {
     for (let ci = 0; ci < RouterBox["pageevents"].length; ci++) {
-      RouterBox["pageevents"][ci](lastR, newR);
+      RouterBox["pageevents"][ci](url);
     }
-  }, 300);
+  }, 100);
 };
 var checker = (url) => {
   if (RouterBox.routes[url]) {
@@ -732,6 +823,7 @@ RouterBox.router = async function(_e, _force) {
         RouterBox.params.params = params;
       }
       await route._Activate(_force);
+      RouterBox["start_pageevents"](url);
       RouterBox["lastNavigatedRouteController"] && RouterBox["lastNavigatedRouteController"]._deActivate();
       RouterBox["lastNavigatedRoute"] = url;
       RouterBox["lastNavigatedRouteController"] = route;
@@ -750,12 +842,21 @@ RouterBox.router = async function(_e, _force) {
       }
     }
   } else {
-    if (RouterBox.routes["/404"]) {
-      await RouterBox.routes["/404"]._Activate(_force);
+    if (RouterBox.routes["/*"]) {
+      await RouterBox.routes["/*"]._Activate(_force);
     }
   }
 };
 var RouterClass = class {
+  /** cradova router
+   * ---
+   * Registers a route.
+   *
+   * accepts an object containing
+   *
+   * @param {string}   path     Route path.
+   * @param  screen the cradova screen.
+   */
   BrowserRoutes(obj) {
     for (const path in obj) {
       let screen = obj[path];
@@ -770,12 +871,28 @@ var RouterClass = class {
     }
     this._mount();
   }
+  /** 
+    Go back in Navigation history
+    */
   back() {
     history.go(-1);
   }
+  /** 
+    Go forward in Navigation history
+    */
   forward() {
     history.go(1);
   }
+  /**
+   * Cradova Router
+   * ------
+   *
+   * Navigates to a designated screen in your app
+   *
+   * @param href string
+   * @param data object
+   * @param force boolean
+   */
   navigate(href, data2 = null, force = false) {
     if (typeof href !== "string") {
       throw new TypeError(
@@ -786,8 +903,7 @@ var RouterClass = class {
     if (href.includes("://")) {
       window.location.href = href;
     } else {
-      const lastR = window.location.pathname;
-      if (href === lastR) {
+      if (href === window.location.pathname) {
         return;
       }
       [route, params] = checker(href);
@@ -798,9 +914,17 @@ var RouterClass = class {
       RouterBox.params.params = params;
       RouterBox.params.data = data2;
       RouterBox.router(null, force);
-      RouterBox["start_pageevents"](lastR, href);
     }
   }
+  /**
+   * Cradova
+   * ---
+   * Loading screen for your app
+   *
+   * lazy loaded loading use
+   *
+   * @param screen
+   */
   setLoadingScreen(screen) {
     if (screen instanceof Screen) {
       RouterBox["LoadingScreen"] = screen;
@@ -810,6 +934,12 @@ var RouterClass = class {
       );
     }
   }
+  /** cradova router
+   * ---
+   * Listen for navigation events
+   *
+   * @param callback   () => void
+   */
   onPageEvent(callback) {
     if (typeof callback === "function") {
       RouterBox["pageevents"].push(callback);
@@ -819,6 +949,13 @@ var RouterClass = class {
       );
     }
   }
+  /** cradova router
+   * ---
+   * get a screen ready before time.
+   *
+   * @param {string}   path Route path.
+   * @param  data data for the screen.
+   */
   async packageScreen(path, data2 = {}) {
     if (!RouterBox.routes[path]) {
       console.error(" \u2718  Cradova err:  no screen with path " + path);
@@ -830,17 +967,43 @@ var RouterClass = class {
     if (!route._Activate && typeof route === "function") {
       route = await route();
     }
+    if (route._delegatedRoutes !== -1) {
+      route._delegatedRoutes = true;
+      route = new Screen({
+        name: route._name,
+        template: route._html
+      });
+      RouterBox.routes[path] = route;
+    }
     route._package(Object.assign(data2, params || {}));
     route._packed = true;
   }
+  /**
+   * Cradova Router
+   * ------
+   *
+   * return last set router params
+   *
+   * .
+   */
   getParams() {
     return RouterBox["params"];
   }
+  /**
+   * Cradova
+   * ---
+   * Error Handler for your app
+   *
+   * @param callback
+   * @param path? page path
+   */
   addErrorHandler(callback) {
     if (typeof callback === "function") {
       RouterBox["errorHandler"] = callback;
     } else {
-      throw new Error(" \u2718  Cradova err:  callback for event is not a function");
+      throw new Error(
+        " \u2718  Cradova err:  callback for error event is not a function"
+      );
     }
   }
   _mount() {
@@ -850,9 +1013,12 @@ var RouterClass = class {
       doc.setAttribute("data-wrapper", "app");
       document.body.appendChild(doc);
       localTree._appendDomForce("doc", doc);
+    } else {
+      localTree._appendDomForce("doc", doc);
     }
     window.addEventListener("pageshow", RouterBox.router);
     window.addEventListener("popstate", (_e) => {
+      _e.preventDefault();
       RouterBox.router();
     });
   }
@@ -865,12 +1031,12 @@ var makeElement = (element, ElementChildrenAndPropertyList) => {
   if (ElementChildrenAndPropertyList.length !== 0) {
     for (let i2 = 0; i2 < ElementChildrenAndPropertyList.length; i2++) {
       let child = ElementChildrenAndPropertyList[i2];
-      if (child instanceof Ref) {
-        child = child.render();
-      }
       if (typeof child === "function") {
         child = child();
       }
+      if (child instanceof Ref) {
+        child = child.render();
+      }
       if (isNode(child)) {
         element.appendChild(child);
         continue;
@@ -900,52 +1066,27 @@ var makeElement = (element, ElementChildrenAndPropertyList) => {
   if (typeof props === "object" && element) {
     for (const [prop, value] of Object.entries(props)) {
       if (prop === "style" && typeof value === "object") {
-        for (const [k, v] of Object.entries(value)) {
-          if (typeof element.style[k] !== "undefined" && k !== "src") {
-            element.style[k] = v;
-          } else {
-            throw new Error(
-              "\u2718  Cradova err :  " + k + " is not a valid css style property"
-            );
-          }
-        }
-        continue;
-      }
-      if (typeof element.style[prop] !== "undefined" && prop !== "src") {
-        element.style[prop] = value;
-        continue;
-      }
-      if (prop === "text" && typeof value === "string" && value !== "") {
-        text = value;
-        continue;
-      }
-      if (prop === "href" && typeof value === "string") {
-        const href = value || "";
-        if (!href.includes("://")) {
-          element.addEventListener(
-            "click",
-            (e) => {
-              e.preventDefault();
-              Router.navigate(element.pathname);
-            }
-          );
-        }
-        element.setAttribute(prop, value);
+        Object.assign(element.style, value);
         continue;
       }
       if (Array.isArray(value)) {
-        const clas = value;
-        if (clas[0] instanceof createSignal) {
+        if (value[0] instanceof createSignal) {
           element["updateState"] = dispatch.bind(null, element);
-          clas[0].bindRef(element, {
-            _element_property: prop,
-            signalProperty: clas[1]
-          });
+          value[0].bindRef(
+            element,
+            {
+              _element_property: prop,
+              signalProperty: value[1]
+            }
+          );
           continue;
         }
-        if (prop == "reference" && clas[0] instanceof reference) {
+        if (prop == "reference" && value[0] instanceof reference) {
           element["updateState"] = dispatch.bind(null, element);
-          clas[0]._appendDomForce(clas[1], element);
+          value[0]._appendDomForce(
+            value[1],
+            element
+          );
           continue;
         }
       }
@@ -965,6 +1106,30 @@ var makeElement = (element, ElementChildrenAndPropertyList) => {
         element.setAttribute(prop, value);
         continue;
       }
+      if (prop === "href" && typeof value === "string") {
+        const href = value || "";
+        if (!href.includes("://")) {
+          element.addEventListener(
+            "click",
+            (e) => {
+              e.preventDefault();
+              Router.navigate(
+                element.pathname
+              );
+              if (href.includes("#")) {
+                const l = href.split("#").at(-1);
+                document.getElementById("#" + l)?.scrollIntoView();
+              }
+            }
+          );
+        }
+        element.setAttribute(prop, value);
+        continue;
+      }
+      if (typeof element.style[prop] !== "undefined" && prop !== "src") {
+        element.style[prop] = value;
+        continue;
+      }
       element[prop] = value;
     }
   }
@@ -973,46 +1138,89 @@ var makeElement = (element, ElementChildrenAndPropertyList) => {
   }
   return element;
 };
-var cra = (element_initials) => {
-  return (...initials) => {
-    return makeElement(document.createElement(element_initials), initials);
-  };
+var make = function(descriptor) {
+  if (!descriptor.length) {
+    return ["DIV"];
+  }
+  if (Array.isArray(descriptor)) {
+    descriptor = descriptor[0];
+  }
+  let innerValue = "";
+  if (descriptor.includes("|")) {
+    [descriptor, innerValue] = descriptor.split("|");
+    if (!descriptor) {
+      return ["P", void 0, void 0, innerValue];
+    }
+  }
+  let tag;
+  if (!descriptor.includes("#")) {
+    descriptor = descriptor.split(".");
+    tag = descriptor.shift();
+    if (!tag) {
+      tag = "DIV";
+    }
+    return [tag, void 0, descriptor.join(" "), innerValue];
+  } else {
+    if (!descriptor.includes(".")) {
+      descriptor = descriptor.split("#");
+      tag = descriptor.shift();
+      if (!tag) {
+        tag = "DIV";
+      }
+      if (descriptor[0].includes(" ")) {
+        descriptor = [descriptor[0].split(" ")[1]];
+      }
+      return [tag, descriptor[0], void 0, innerValue];
+    }
+  }
+  descriptor = descriptor.split(".");
+  const classes = [];
+  const IDs = [];
+  tag = !descriptor[0].includes("#") && descriptor.shift();
+  if (!tag) {
+    tag = "DIV";
+  }
+  for (let i2 = 0; i2 < descriptor.length; i2++) {
+    if (descriptor[i2].includes("#")) {
+      const item = descriptor[i2].split("#");
+      IDs.push(item[1]);
+      if (i2 === 0) {
+        tag = item[0];
+        continue;
+      }
+      classes.push(item[0]);
+      continue;
+    }
+    classes.push(descriptor[i2]);
+  }
+  return [tag || "DIV", IDs[0], classes.join(" "), innerValue];
+};
+var cra = (tag) => {
+  const extend = (...Children_and_Properties) => makeElement(document.createElement(tag), Children_and_Properties);
+  return extend;
 };
 var a = cra("a");
-var abbr = cra("abbr");
-var address = cra("address");
 var area = cra("area");
 var article = cra("article");
 var aside = cra("aside");
 var audio = cra("audio");
 var b = cra("b");
 var base = cra("base");
-var bdi = cra("bdi");
-var bdo = cra("bdo");
 var blockquote = cra("blockquote");
-var body = cra("body");
 var br = cra("br");
 var button = cra("button");
 var canvas = cra("canvas");
 var caption = cra("caption");
-var cite = cra("cite");
 var code = cra("code");
 var col = cra("col");
 var colgroup = cra("colgroup");
 var data = cra("data");
 var datalist = cra("datalist");
-var dd = cra("dd");
-var del = cra("del");
 var details = cra("details");
-var dfn = cra("dfn");
 var dialog = cra("dialog");
 var div = cra("div");
-var dl = cra("dl");
-var dt = cra("dt");
 var em = cra("em");
 var embed = cra("embed");
-var fieldset = cra("fieldset");
-var figcaption = cra("figcaption");
 var figure = cra("figure");
 var footer = cra("footer");
 var form = cra("form");
@@ -1025,70 +1233,43 @@ var h6 = cra("h6");
 var head = cra("head");
 var header = cra("header");
 var hr = cra("hr");
-var html = cra("html");
 var i = cra("i");
 var iframe = cra("iframe");
 var img = cra("img");
 var input = cra("input");
-var ins = cra("ins");
-var kbd = cra("kbd");
 var label = cra("label");
 var legend = cra("legend");
 var li = cra("li");
 var link = cra("link");
 var main = cra("main");
-var map = cra("map");
-var mark = cra("mark");
-var math = cra("math");
 var menu = cra("menu");
-var meta = cra("meta");
-var meter = cra("meter");
 var nav = cra("nav");
 var object = cra("object");
 var ol = cra("ol");
 var optgroup = cra("optgroup");
 var option = cra("option");
-var output = cra("output");
 var p = cra("p");
-var picture = cra("picture");
-var portal = cra("portal");
 var pre = cra("pre");
 var progress = cra("progress");
 var q = cra("q");
-var rp = cra("rp");
-var rt = cra("rt");
-var ruby = cra("ruby");
-var s = cra("s");
-var samp = cra("samp");
-var script = cra("script");
 var section = cra("section");
 var select = cra("select");
-var slot = cra("slot");
-var small = cra("small");
 var source = cra("source");
 var span = cra("span");
 var strong = cra("strong");
-var style = cra("style");
-var sub = cra("sub");
 var summary = cra("summary");
-var sup = cra("sup");
 var table = cra("table");
 var tbody = cra("tbody");
 var td = cra("td");
 var template = cra("template");
 var textarea = cra("textarea");
-var tfoot = cra("tfoot");
 var th = cra("th");
-var thead = cra("thead");
-var time = cra("time");
 var title = cra("title");
 var tr = cra("tr");
 var track = cra("track");
 var u = cra("u");
 var ul = cra("ul");
-var val = cra("val");
 var video = cra("video");
-var wbr = cra("wbr");
 
 // lib/parts/ajax.ts
 function Ajax(url, opts = {}) {
@@ -1096,7 +1277,7 @@ function Ajax(url, opts = {}) {
   if (typeof url !== "string") {
     throw new Error("\u2718  Cradova err : Ajax invalid url " + url);
   }
-  return new Promise(function(resolve) {
+  return new Promise(function(resolve, reject) {
     const ajax = new XMLHttpRequest();
     const formData = new FormData();
     if (callbacks && typeof callbacks === "object") {
@@ -1120,18 +1301,14 @@ function Ajax(url, opts = {}) {
       }
     }
     ajax.addEventListener("error", () => {
-      console.error(
-        "\u2718  Cradova Ajax err : ",
-        ajax.response || "ERR_INTERNET_DISCONNECTED"
-      );
       if (!navigator.onLine) {
-        resolve(
+        reject(
           JSON.stringify({
             message: `this device is offline!`
           })
         );
       } else {
-        resolve(
+        reject(
           JSON.stringify({
             message: `problem with the action, please try again!`
           })
@@ -1153,67 +1330,6 @@ function Ajax(url, opts = {}) {
 }
 
 // lib/index.ts
-var make = function(txx) {
-  if (Array.isArray(txx)) {
-    txx = txx[0];
-  }
-  if (typeof txx !== "string") {
-    return [];
-  }
-  if (Array.isArray(txx)) {
-    txx = txx[0];
-  }
-  let innerValue = "";
-  if (txx.includes("|")) {
-    [txx, innerValue] = txx.split("|");
-    if (!txx) {
-      return ["P", void 0, void 0, innerValue];
-    }
-  }
-  let tag;
-  let teak;
-  if (!txx.includes("#")) {
-    teak = txx.split(".");
-    tag = teak.shift();
-    if (!tag) {
-      tag = "DIV";
-    }
-    return [tag, void 0, teak.join(" "), innerValue];
-  } else {
-    if (!txx.includes(".")) {
-      teak = txx.split("#");
-      tag = teak.shift();
-      if (!tag) {
-        tag = "DIV";
-      }
-      if (teak[0].includes(" ")) {
-        teak = [teak[0].split(" ")[1]];
-      }
-      return [tag, teak[0], void 0, innerValue];
-    }
-  }
-  teak = txx.split(".");
-  const classes = [];
-  const IDs = [];
-  tag = !teak[0].includes("#") && teak.shift();
-  if (!tag) {
-    tag = "DIV";
-  }
-  for (let i2 = 0; i2 < teak.length; i2++) {
-    if (teak[i2].includes("#")) {
-      const item = teak[i2].split("#");
-      IDs.push(item[1]);
-      if (i2 === 0) {
-        tag = item[0];
-        continue;
-      }
-      classes.push(item[0]);
-      continue;
-    }
-    classes.push(teak[i2]);
-  }
-  return [tag || "DIV", IDs[0], classes.join(" "), innerValue];
-};
 var _2 = (...element_initials) => {
   const {
     0: tag,
@@ -1221,149 +1337,22 @@ var _2 = (...element_initials) => {
     2: className,
     3: innerText
   } = make(element_initials[0]);
-  let props = {};
   const element = tag ? document.createElement(tag) : new DocumentFragment();
-  if (element.tagName) {
+  if (tag) {
     if (className) {
-      props["className"] = className;
+      element.className = className;
     }
     if (id) {
-      props["id"] = id;
+      element.id = id;
     }
     if (innerText) {
-      props["innerText"] = innerText;
+      element.innerText = innerText;
     }
+    element_initials.shift();
   }
-  typeof tag === "string" && element_initials.shift();
-  props && element_initials.push(props);
   return makeElement(element, element_initials);
 };
 var lib_default = _2;
-export {
-  Ajax,
-  Ref,
-  Router,
-  Screen,
-  a,
-  abbr,
-  address,
-  area,
-  article,
-  aside,
-  assert,
-  assertOr,
-  audio,
-  b,
-  base,
-  bdi,
-  bdo,
-  blockquote,
-  body,
-  br,
-  button,
-  canvas,
-  caption,
-  cite,
-  code,
-  col,
-  colgroup,
-  createSignal,
-  css,
-  data,
-  datalist,
-  dd,
-  lib_default as default,
-  del,
-  details,
-  dfn,
-  dialog,
-  div,
-  dl,
-  dt,
-  em,
-  embed,
-  fieldset,
-  figcaption,
-  figure,
-  footer,
-  form,
-  h1,
-  h2,
-  h3,
-  h4,
-  h5,
-  h6,
-  head,
-  header,
-  hr,
-  html,
-  i,
-  iframe,
-  img,
-  input,
-  ins,
-  kbd,
-  label,
-  lazy,
-  legend,
-  li,
-  link,
-  loop,
-  main,
-  makeElement,
-  map,
-  mark,
-  math,
-  menu,
-  meta,
-  meter,
-  nav,
-  object,
-  ol,
-  optgroup,
-  option,
-  output,
-  p,
-  picture,
-  portal,
-  pre,
-  progress,
-  q,
-  reference,
-  rp,
-  rt,
-  ruby,
-  s,
-  samp,
-  script,
-  section,
-  select,
-  slot,
-  small,
-  source,
-  span,
-  strong,
-  style,
-  sub,
-  summary,
-  sup,
-  table,
-  tbody,
-  td,
-  template,
-  textarea,
-  tfoot,
-  th,
-  thead,
-  time,
-  title,
-  tr,
-  track,
-  u,
-  ul,
-  val,
-  video,
-  wbr
-};
-//! always starts events a moment later
-//! value could be a promise
+//! get url hash here and scroll into view
+
+export { Ajax, CradovaEvent, Ref, Rhoda, Router, Screen, a, area, article, aside, assert, assertOr, audio, b, base, blockquote, br, button, canvas, caption, code, col, colgroup, cradovaEvent, createSignal, css, data, datalist, lib_default as default, details, dialog, div, em, embed, figure, footer, form, frag, h1, h2, h3, h4, h5, h6, head, header, hr, i, iframe, img, input, isNode, label, lazy, legend, li, link, loop, main, make, makeElement, menu, nav, object, ol, optgroup, option, p, pre, progress, q, reference, section, select, source, span, strong, summary, table, tbody, td, template, textarea, th, title, tr, track, u, ul, useEffect, useRef, useState, video };