cradova 2.2.2 → 2.3.0

package/dist/index.js

@@ -1,135 +1,56 @@
 // lib/utils/init.ts
 var Init = function() {
-  if (!document.querySelector("[data-cra-id=cradova-app-wrapper]")) {
+  if (!document.querySelector("[data-wrapper=app]")) {
     const Wrapper = document.createElement("div");
-    Wrapper.setAttribute("data-cra-id", "cradova-app-wrapper");
+    Wrapper.setAttribute("data-wrapper", "app");
     document.body.appendChild(Wrapper);
   }
 };
 
-// lib/utils/track.ts
-function cradovaDispatchTrack(nodes, state) {
-  for (let i2 = 0; i2 < nodes.length; i2++) {
-    const element = nodes[i2];
-    if (!element) {
-      continue;
+// lib/utils/fns.ts
+var isNode = (node) => typeof node === "object" && typeof node.nodeType === "number";
+var cradovaEvent = class {
+  constructor() {
+    this.listeners = {};
+  }
+  addEventListener(eventName, callback) {
+    if (!this.listeners[eventName]) {
+      this.listeners[eventName] = [];
     }
-    if (typeof state === "object" && !Array.isArray(state)) {
-      for (const key in state) {
-        if (key === "style") {
-          for (const [k, v] of Object.entries(state[key])) {
-            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[key] === "function") {
-          if (key.startsWith("on")) {
-            element[key] = state[key];
-          } else {
-            element[key].apply(element);
-          }
-          continue;
-        }
-        if (key === "text") {
-          element.innerText = state[key];
-          continue;
-        }
-        if (key === "remove") {
-          if (element.parentElement) {
-            element.parentElement?.removeChild(element);
-          } else {
-            element.remove();
-          }
-          continue;
-        }
-        if (key.includes("$")) {
-          element.setAttribute("data-" + key.split("$")[1], state[key]);
-          continue;
-        }
-        if (key === "tree") {
-          element.innerHTML = "";
-          element.appendChild(frag(state[key]));
-          continue;
-        }
-        try {
-          if (typeof element[key] !== "undefined") {
-            element[key] = state[key];
-          } else {
-            element[key] = state[key];
-            if (key !== "for" && key !== "text" && key !== "class" && key !== "tabindex" && key !== "disabled" && !key.includes("aria")) {
-              console.error(" \u2718  Cradova err:  invalid html attribute " + key);
-            }
-          }
-        } catch (error) {
-          console.error(" \u2718  Cradova err: Cradova got ", state);
-          console.error(" \u2718  Cradova err:  ", error);
-        }
+    this.listeners[eventName].push(callback);
+  }
+  removeEventListener(eventName, callback) {
+    if (this.listeners[eventName]) {
+      const index = this.listeners[eventName].indexOf(callback);
+      if (index !== -1) {
+        this.listeners[eventName].splice(index, 1);
       }
-    } else {
-      throw new TypeError(" \u2718  Cradova err:   invalid state object" + state);
     }
   }
-}
-function dispatch(stateID, state) {
-  let ele;
-  if (stateID instanceof HTMLElement) {
-    ele = stateID;
-  }
-  let updated = void 0;
-  if (typeof state === "undefined" && typeof stateID === "object" && !ele) {
-    for (const [id, eachState] of Object.entries(stateID)) {
-      const elements = document.querySelectorAll(
-        "[data-cra-id=" + id + "]"
-      );
-      updated = elements.length === 1 ? elements[0] : elements;
-      cradovaDispatchTrack(elements, eachState);
-    }
-  } else {
-    if (typeof stateID === "string") {
-      const elements = document.querySelectorAll(
-        "[data-cra-id=" + stateID + "]"
-      );
-      if (elements.length) {
-        updated = elements.length === 1 ? elements[0] : elements;
-        if (!state?.cradovaDispatchTrackBreak) {
-          cradovaDispatchTrack(elements, state);
-        }
+  dispatchEvent(eventName, eventArgs) {
+    const eventListeners = this.listeners[eventName];
+    if (eventListeners) {
+      for (let i2 = 0; i2 < eventListeners.length; i2++) {
+        eventListeners[i2](eventArgs);
       }
     }
-    if (ele) {
-      cradovaDispatchTrack([ele], state);
-    }
   }
-  return updated;
-}
-
-// lib/utils/fns.ts
-var isNode = (node) => typeof node === "object" && typeof node.nodeType === "number";
-var cradovaAftermountEvent = new CustomEvent("cradova-aftermount");
-function uuid() {
-  let t = Date.now ? +Date.now() : +new Date();
-  return "cradova-id-xxxxxx".replace(/[x]/g, function(e) {
-    const r = (t + 16 * Math.random()) % 16 | 0;
-    return ("x" === e ? r : 7 & r | 8).toString(16);
-  });
-}
+};
+var CradovaEvent = new cradovaEvent();
 function Rhoda(l) {
   const fg = new DocumentFragment();
   for (let ch of l) {
     if (Array.isArray(ch)) {
       fg.appendChild(Rhoda(ch));
     } else {
-      if (typeof ch === "function") {
-        ch = ch();
+      if (ch?.render) {
+        ch = ch.render();
       }
       if (typeof ch === "function") {
         ch = ch();
+        if (typeof ch === "function") {
+          ch = ch();
+        }
       }
       if (typeof ch === "string" || typeof ch === "number") {
         fg.appendChild(document.createTextNode(ch));
@@ -148,45 +69,20 @@ function Rhoda(l) {
   }
   return fg;
 }
-function css(identifier, properties) {
-  if (typeof identifier === "string" && typeof properties === "undefined") {
+function css(identifier) {
+  if (Array.isArray(identifier)) {
+    identifier = identifier[0];
+  }
+  if (typeof identifier === "string") {
     let styTag = document.querySelector("style");
     if (styTag !== null) {
-      identifier += styTag.textContent;
-      styTag.textContent = identifier;
+      styTag.textContent = identifier + styTag.textContent;
       return;
     }
     styTag = document.createElement("style");
     styTag.textContent = identifier;
     document.head.appendChild(styTag);
-    return;
-  }
-  if (!properties) {
-    return;
-  }
-  const styS = "" + identifier + `{
-`;
-  const styE = `}
-`;
-  let style2 = "", totalStyle = "";
-  for (const [k, v] of Object.entries(properties)) {
-    style2 += "" + k + ": " + v + `;
-`;
-  }
-  let styleTag = document.querySelector("style");
-  if (styleTag !== null) {
-    totalStyle += styleTag.innerHTML;
-    totalStyle += styS + style2 + styE;
-    styleTag.innerHTML = totalStyle;
-    return;
   }
-  styleTag = document.createElement("style");
-  totalStyle += styleTag.innerHTML + `
-
-`;
-  totalStyle += styS + style2 + styE;
-  styleTag.innerHTML = totalStyle;
-  document.head.appendChild(styleTag);
 }
 function assert(condition, ...elements) {
   if (condition) {
@@ -210,28 +106,28 @@ function assertOr(condition, ifTrue, ifFalse) {
 }
 var Ref = class {
   constructor(component) {
-    this.stateID = uuid();
     this.effects = [];
     this.effectuate = null;
     this.rendered = false;
     this.published = false;
     this.hasFirstStateUpdateRun = false;
     this.preRendered = null;
+    this.reference = new reference();
     this.component = component.bind(this);
   }
   preRender(data2) {
     const chtml = this.component(data2);
     if (chtml instanceof HTMLElement) {
-      chtml.setAttribute("data-cra-id", this.stateID);
       this.preRendered = chtml;
     } else {
-      this.preRendered = chtml({ stateID: this.stateID });
+      this.preRendered = chtml();
     }
-    if (typeof this.preRendered === "undefined") {
+    if (!this.preRendered) {
       throw new Error(
-        " \u2718  Cradova err :  Invalid component type for cradova Ref, got  -  " + this.preRendered
+        " \u2718  Cradova err :  Invalid component type for cradova Ref got  -  " + this.preRendered
       );
     }
+    this.reference._appendDomForce("reference", this.preRendered);
   }
   destroyPreRendered() {
     this.preRendered = null;
@@ -244,12 +140,11 @@ var Ref = class {
     if (!this.preRendered) {
       const chtml = this.component(data2);
       if (chtml instanceof HTMLElement) {
-        chtml.setAttribute("data-cra-id", this.stateID);
         element = chtml;
       } else {
-        element = chtml({ stateID: this.stateID });
+        element = chtml();
       }
-      if (typeof element === "undefined") {
+      if (!element) {
         throw new Error(
           " \u2718  Cradova err :  Invalid component type for cradova Ref, got  -  " + element
         );
@@ -260,21 +155,23 @@ var Ref = class {
     }
     const av = async () => {
       await this.effector.apply(this);
-      window.removeEventListener("cradova-aftermount", av);
+      CradovaEvent.removeEventListener("cradovaAftermountEvent", av);
     };
-    window.addEventListener("cradova-aftermount", av);
+    CradovaEvent.addEventListener("cradovaAftermountEvent", av);
     this.effector();
     this.published = true;
     this.rendered = true;
     if (!element) {
       element = this.preRendered;
     }
+    this.reference._appendDomForce("reference", element);
     return element;
   }
   instance() {
-    return dispatch(this.stateID, {
-      cradovaDispatchTrackBreak: true
-    });
+    return this.reference.reference;
+  }
+  _setExtra(Extra) {
+    this.Signal = Extra;
   }
   effect(fn) {
     if (!this.rendered) {
@@ -320,34 +217,38 @@ var Ref = class {
       return;
     }
     this.published = false;
-    const guy = dispatch(this.stateID, {
-      cradovaDispatchTrackBreak: true
-    });
-    if (!guy) {
+    if (!this.reference.reference) {
       return;
     }
     const chtml = this.component(data2);
     let element;
     if (chtml instanceof HTMLElement) {
-      chtml.setAttribute("data-cra-id", this.stateID);
       element = chtml;
     } else {
-      element = chtml({ stateID: this.stateID });
+      element = chtml();
+    }
+    if (!element) {
+      throw new Error(
+        " \u2718  Cradova err :  Invalid component type for cradova Ref, got  -  " + element
+      );
     }
     try {
-      guy.insertAdjacentElement("beforebegin", element);
-      if (guy.parentElement) {
-        guy.parentElement.removeChild(guy);
+      this.reference.reference.insertAdjacentElement("beforebegin", element);
+      if (this.reference.reference.parentElement) {
+        this.reference.reference.parentElement.removeChild(
+          this.reference.reference
+        );
       } else {
-        guy.remove();
+        this.reference.reference.remove();
       }
+      this.reference._appendDomForce("reference", element);
     } catch (e0) {
       console.error(e0);
     }
     this.published = true;
   }
   remove() {
-    dispatch(this.stateID, { remove: true });
+    this.reference.reference.remove();
   }
 };
 var frag = function(children) {
@@ -368,10 +269,8 @@ var frag = function(children) {
       par.appendChild(document.createTextNode(a2));
       continue;
     }
-    {
-      console.error(" \u2718  Cradova err:   wrong element type" + a2);
-      throw new TypeError(" \u2718  Cradova err:   invalid element");
-    }
+    console.error(" \u2718  Cradova err:   wrong element type" + a2);
+    throw new TypeError(" \u2718  Cradova err:   invalid element");
   }
   return par;
 };
@@ -410,6 +309,121 @@ var lazy = class {
     this.content = this.content.default;
   }
 };
+var reference = class {
+  bindAs(name) {
+    return [this, name];
+  }
+  _appendDom(name, Element) {
+    if (!Object.hasOwnProperty.call(this, name)) {
+      this[name] = Element;
+    } else {
+      if (Array.isArray(this[name])) {
+        this[name].push(Element);
+      } else {
+        this[name] = [this[name], Element];
+      }
+    }
+  }
+  _appendDomForce(name, Element) {
+    this[name] = Element;
+  }
+};
+
+// lib/utils/track.ts
+function cradovaDispatchTrack(nodes, state) {
+  for (let i2 = 0; i2 < nodes.length; i2++) {
+    const element = nodes[i2];
+    if (!element) {
+      continue;
+    }
+    if (typeof state === "object" && !Array.isArray(state)) {
+      for (const key in state) {
+        if (key === "style") {
+          for (const [k, v] of Object.entries(state[key])) {
+            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[key] === "function") {
+          if (key.startsWith("on")) {
+            element[key] = state[key];
+          } else {
+            element[key].apply(element);
+          }
+          continue;
+        }
+        if (key === "text") {
+          element.innerText = state[key];
+          continue;
+        }
+        if (key === "tree") {
+          element.innerHTML = "";
+          element.appendChild(frag(state[key]));
+          continue;
+        }
+        try {
+          if (typeof element[key] !== "undefined") {
+            element[key] = state[key];
+          } else {
+            if (key.includes("data-")) {
+              element.setAttribute(key, state[key]);
+              continue;
+            } else {
+              element[key] = state[key];
+            }
+            if (key !== "for" && key !== "text" && key !== "class" && key !== "tabindex" && key !== "disabled" && !key.includes("aria")) {
+              console.error(" \u2718  Cradova err:  invalid html attribute " + key);
+            }
+          }
+        } catch (error) {
+          console.error(" \u2718  Cradova err: Cradova got ", state);
+          console.error(" \u2718  Cradova err:  ", error);
+        }
+      }
+    } else {
+      console.log(nodes, state);
+      throw new TypeError(" \u2718  Cradova err:   invalid state object" + state);
+    }
+  }
+}
+function dispatch(stateID, state) {
+  if (stateID instanceof HTMLElement) {
+    cradovaDispatchTrack([stateID], state);
+  }
+  let ele;
+  let updated = void 0;
+  if (typeof state === "undefined" && typeof stateID === "object" && !ele) {
+    for (const [id, eachState] of Object.entries(stateID)) {
+      const elements = document.querySelectorAll(
+        "[data-cra-id=" + id + "]"
+      );
+      updated = elements.length === 1 ? elements[0] : elements;
+      cradovaDispatchTrack(elements, eachState);
+    }
+  } else {
+    if (typeof stateID === "string") {
+      const elements = document.querySelectorAll(
+        "[data-cra-id=" + stateID + "]"
+      );
+      if (elements.length) {
+        updated = elements.length === 1 ? elements[0] : elements;
+        if (!state?.cradovaDispatchTrackBreak) {
+          cradovaDispatchTrack(elements, state);
+        }
+      }
+    }
+    if (ele) {
+      cradovaDispatchTrack([ele], state);
+    }
+  }
+  return updated;
+}
 
 // lib/utils/createSignal.ts
 var createSignal = class {
@@ -474,9 +488,9 @@ var createSignal = class {
       this.actions[key] = action;
     } else {
       if (typeof key === "object" && !action) {
-        for (const [nam, action2] of Object.entries(key)) {
-          if (typeof nam === "string" && typeof action2 === "function") {
-            this.actions[nam] = action2;
+        for (const [nam, act] of Object.entries(key)) {
+          if (typeof nam === "string" && typeof action === "function") {
+            this.actions[nam] = act;
           } else {
             throw new Error(`\u2718  Cradova err : can't create action ${nam}`);
           }
@@ -487,14 +501,13 @@ var createSignal = class {
     }
   }
   fireAction(key, data2) {
-    if (this.actions[key].updateState) {
-      this.actions[key].updateState(this, data2);
-      this._updateState(key, data2);
+    this._updateState(key, data2);
+    if (this.actions[key] && this.actions[key].updateState) {
+      this.actions[key].updateState(data2);
       return;
     } else {
       if (typeof this.actions[key] === "function") {
-        this.actions[key](this, data2);
-        this._updateState(key, data2);
+        this.actions[key].bind(this)(data2);
         return;
       }
     }
@@ -550,13 +563,20 @@ var createSignal = class {
           ent.ref.updateState(this.value[ent._signalProperty]);
           continue;
         }
+        if (!ent._element_property && !ent._signalProperty) {
+          ent.ref.updateState(this.value);
+          continue;
+        }
       }
     }
   }
-  bindRef(ref, binding) {
+  bindRef(ref, binding = { signalProperty: "", _element_property: "" }) {
     if (ref.render) {
       ref.render = ref.render.bind(ref, this.value);
     }
+    if (ref._setExtra) {
+      ref._setExtra(this);
+    }
     if (ref && ref.updateState) {
       this.ref.push({
         ref,
@@ -591,6 +611,12 @@ RouterBox["pageHide"] = null;
 RouterBox["errorHandler"] = null;
 RouterBox["params"] = {};
 RouterBox["routes"] = {};
+RouterBox["pageevents"] = [];
+RouterBox["start_pageevents"] = function(lastR, newR) {
+  for (let ci = 0; ci < RouterBox["pageevents"].length; ci++) {
+    RouterBox["pageevents"][ci](lastR, newR);
+  }
+};
 var checker = (url) => {
   if (RouterBox.routes[url]) {
     return [RouterBox.routes[url], { path: url }];
@@ -686,11 +712,12 @@ Router.navigate = function(href, data2 = null, force = false) {
     force = true;
     data2 = null;
   }
-  let route = null, params, link2 = null;
+  let route = null, params;
   if (href.includes("://")) {
     window.location.href = href;
   } else {
-    if (href === window.location.pathname) {
+    const lastR = window.location.pathname;
+    if (href === lastR) {
       return;
     }
     [route, params] = checker(href);
@@ -699,11 +726,10 @@ Router.navigate = function(href, data2 = null, force = false) {
       RouterBox.params.params = params;
       route._paramData = params;
       RouterBox.params.data = data2 || null;
-      link2 = href;
-      RouterBox["pageHide"] && RouterBox["pageHide"](href + " :navigated");
-      window.history.pushState({}, "", link2);
+      window.history.pushState({}, "", href);
     }
     RouterBox.router(null, force);
+    RouterBox["start_pageevents"](lastR, href);
   }
 };
 RouterBox.router = async function(e, force = false) {
@@ -755,9 +781,11 @@ RouterBox.router = async function(e, force = false) {
       RouterBox["lastNavigatedRouteController"] && RouterBox["lastNavigatedRouteController"]._deActivate();
       RouterBox["lastNavigatedRoute"] = url;
       RouterBox["lastNavigatedRouteController"] = route;
-      RouterBox["pageShow"] && RouterBox["pageShow"](url);
     } catch (error) {
-      const errorHandler = RouterBox.routes[RouterBox.params.params._path].errorHandler || RouterBox.errorHandler;
+      let errorHandler;
+      if (RouterBox.routes[RouterBox.params.params._path]) {
+        errorHandler = RouterBox.routes[RouterBox.params.params._path].errorHandler || RouterBox.errorHandler;
+      }
       if (errorHandler) {
         errorHandler(error);
       }
@@ -765,34 +793,19 @@ RouterBox.router = async function(e, force = false) {
   } else {
     if (RouterBox.routes["/404"]) {
       RouterBox.routes["/404"].controller();
-    } else {
-      if (Object.keys(RouterBox.routes).length > 0) {
-        console.error(
-          " \u2718  Cradova err: route '" + url + "' does not exist and no '/404' route given!"
-        );
-      }
     }
   }
 };
-Router["onPageShow"] = function(callback) {
+Router["onPageEvent"] = function(callback) {
   if (typeof callback === "function") {
-    RouterBox["pageShow"] = callback;
+    RouterBox["pageevents"].push(callback);
   } else {
     throw new Error(
       " \u2718  Cradova err:  callback for pageShow event is not a function"
     );
   }
 };
-Router["onPageHide"] = function(callback) {
-  if (typeof callback === "function") {
-    RouterBox["pageHide"] = callback;
-  } else {
-    throw new Error(
-      " \u2718  Cradova err:  callback for pageHide event is not a function"
-    );
-  }
-};
-Router.packageScreen = async function(path, data2) {
+Router.packageScreen = async function(path, data2 = {}) {
   if (!RouterBox.routes[path]) {
     console.error(" \u2718  Cradova err:  no screen with path " + path);
     throw new Error(" \u2718  Cradova err:  cradova err: Not a defined screen path");
@@ -824,13 +837,16 @@ Router.mount = () => {
   });
 };
 
-// lib/utils/tags.ts
+// lib/utils/elements.ts
 var makeElement = (element, ...ElementChildrenAndPropertyList) => {
   let beforeMount = null;
   let props = null, text = null;
   if (ElementChildrenAndPropertyList.length) {
     for (let i2 = 0; i2 < ElementChildrenAndPropertyList.length; i2++) {
       let child = ElementChildrenAndPropertyList[i2];
+      if (child?.render) {
+        child = child.render();
+      }
       if (typeof child === "function") {
         child = child();
         if (typeof child === "function") {
@@ -914,16 +930,21 @@ var makeElement = (element, ...ElementChildrenAndPropertyList) => {
         });
         continue;
       }
+      if (prop == "reference" && Array.isArray(props[prop]) && props[prop][0] instanceof reference) {
+        element.updateState = dispatch.bind(null, element);
+        props[prop][0]._appendDom(props[prop][1], element);
+        continue;
+      }
       if (prop === "shouldUpdate" && props[prop] === true) {
         element.updateState = dispatch.bind(void 0, element);
         continue;
       }
       if (prop === "afterMount" && typeof props["afterMount"] === "function") {
-        const av = () => {
+        const avi = () => {
           props["afterMount"].apply(element);
-          window.removeEventListener("cradova-aftermount", av);
+          CradovaEvent.removeEventListener("cradovaAftermountEvent", avi);
         };
-        window.addEventListener("cradova-aftermount", av);
+        CradovaEvent.addEventListener("cradovaAftermountEvent", avi);
         continue;
       }
       try {
@@ -955,7 +976,7 @@ var makeElement = (element, ...ElementChildrenAndPropertyList) => {
   if (typeof beforeMount === "function") {
     beforeMount.apply(element);
   }
-  if (element.tagName === "A") {
+  if (element.tagName === "A" && window) {
     if (element.href.includes(window.location.origin)) {
       element.addEventListener("click", (e) => {
         e.preventDefault();
@@ -966,10 +987,10 @@ var makeElement = (element, ...ElementChildrenAndPropertyList) => {
   return element;
 };
 var cra = (element_initials) => {
-  return (...bo) => {
+  return (...initials) => {
     return makeElement(
       document.createElement(element_initials),
-      ...bo
+      ...initials
     );
   };
 };
@@ -1039,7 +1060,6 @@ var menu = cra("menu");
 var meta = cra("meta");
 var meter = cra("meter");
 var nav = cra("nav");
-var noscript = cra("noscript");
 var object = cra("object");
 var ol = cra("ol");
 var optgroup = cra("optgroup");
@@ -1158,12 +1178,6 @@ var Screen = class {
     this._params = null;
     this._delegatedRoutesCount = -1;
     const { template: template2, name, persist, renderInParallel, transition } = cradova_screen_initials;
-    if (typeof template2 !== "function") {
-      console.error(" \u2718  Cradova err: expected a screen but got ", template2);
-      throw new Error(
-        " \u2718  Cradova err: only functions that returns a cradova element is valid as screen"
-      );
-    }
     this._html = template2;
     this._name = name;
     this._transition = transition || "";
@@ -1199,6 +1213,10 @@ var Screen = class {
     this.errorHandler = errorHandler;
   }
   async _package() {
+    if (this._html.render) {
+      this._template.innerHTML = "";
+      this._template.appendChild(this._html.render(this._data));
+    }
     if (typeof this._html === "function") {
       let fuc = await this._html.apply(this, this._data);
       if (typeof fuc === "function") {
@@ -1225,8 +1243,9 @@ var Screen = class {
       }
     }
     if (!this._template.firstChild) {
+      console.error(" \u2718  Cradova err: expected a screen but got ", this._html);
       throw new Error(
-        " \u2718  Cradova err:  no screen is rendered, may have been past wrongly."
+        " \u2718  Cradova err: only functions that returns a cradova element is valid as screen"
       );
     }
     if (this._secondaryChildren.length) {
@@ -1263,10 +1282,10 @@ var Screen = class {
         await this._package();
       }
     }
-    const doc = document.querySelector("[data-cra-id=cradova-app-wrapper]");
+    const doc = document.querySelector("[data-wrapper=app]");
     if (!doc) {
       throw new Error(
-        " \u2718  Cradova err: Unable to render, cannot find cradova root <div data-cra-id='cradova-app-wrapper'> ... </div>"
+        " \u2718  Cradova err: Unable to render, cannot find cradova root <div data-wrapper='app'> ... </div>"
       );
     }
     if (this._transition) {
@@ -1278,114 +1297,99 @@ var Screen = class {
     if (this._callBack) {
       await this._callBack();
     }
-    window.dispatchEvent(cradovaAftermountEvent);
-    window.scrollTo(0, 0);
+    CradovaEvent.dispatchEvent("cradovaAftermountEvent");
+    if (window) {
+      window.scrollTo(0, 0);
+    }
   }
 };
 
 // lib/index.ts
 var make = function(txx) {
-  if (!txx) {
-    return {
-      tag: "div"
-    };
+  if (!txx.length) {
+    return ["DIV"];
+  }
+  if (Array.isArray(txx)) {
+    txx = txx[0];
   }
-  let tag;
   let innerValue = "";
   if (txx.includes("|")) {
-    const tc = txx.split("|");
-    innerValue = tc[1];
-    txx = tc[0] && tc[0];
-  }
-  const itemsPurifier = () => {
-    if (!txx.includes("#")) {
-      txx = txx.split(".");
-      tag = txx[0];
-      if (tag) {
-        txx.shift();
-      } else {
-        tag = "div";
-      }
-      return [txx, []];
-    } else {
-      if (!txx.includes(".")) {
-        txx = txx.split("#");
-        tag = txx[0];
-        if (tag) {
-          txx.shift();
-        } else {
-          tag = "div";
-        }
-        if (txx[0].includes(" ")) {
-          txx = [txx[0].split(" ")[1]];
-        }
-        return [[], txx];
-      }
+    [txx, innerValue] = txx.split("|");
+    if (!txx) {
+      return ["P", void 0, void 0, innerValue];
     }
+  }
+  let tag;
+  if (!txx.includes("#")) {
     txx = txx.split(".");
-    const pureItems = [];
-    const impureItems = [];
-    tag = !txx[0].includes("#") && txx[0];
-    if (tag) {
-      txx.shift();
-    }
-    for (let i2 = 0; i2 < txx.length; i2++) {
-      if (txx[i2].includes("#")) {
-        const item = txx[i2].split("#");
-        impureItems.push(item[1]);
-        if (i2 === 0) {
-          tag = item[0];
-          continue;
-        }
-        pureItems.push(item[0]);
+    tag = txx.shift();
+    if (!tag) {
+      tag = "DIV";
+    }
+    return [tag, void 0, txx.join(" "), innerValue];
+  } else {
+    if (!txx.includes(".")) {
+      txx = txx.split("#");
+      tag = txx.shift();
+      if (!tag) {
+        tag = "DIV";
+      }
+      if (txx[0].includes(" ")) {
+        txx = [txx[0].split(" ")[1]];
+      }
+      return [tag, txx[0], void 0, innerValue];
+    }
+  }
+  txx = txx.split(".");
+  const classes = [];
+  const IDs = [];
+  tag = !txx[0].includes("#") && txx.shift();
+  if (!tag) {
+    tag = "DIV";
+  }
+  for (let i2 = 0; i2 < txx.length; i2++) {
+    if (txx[i2].includes("#")) {
+      const item = txx[i2].split("#");
+      IDs.push(item[1]);
+      if (i2 === 0) {
+        tag = item[0];
         continue;
       }
-      pureItems.push(txx[i2]);
-    }
-    if (!tag) {
-      tag = "div";
+      classes.push(item[0]);
+      continue;
     }
-    return [pureItems, impureItems];
-  };
-  const [classes, ids] = itemsPurifier();
-  const ID = ids && ids[0];
-  const className = classes && classes.join(" ");
-  return { tag, className, ID, innerValue };
+    classes.push(txx[i2]);
+  }
+  return [tag || "DIV", IDs[0], classes.join(" "), innerValue];
 };
 var _2 = (...element_initials) => {
-  if (element_initials[0].raw) {
-    element_initials[0] = element_initials["raw"][0];
-  }
-  if (typeof element_initials[0] !== "string") {
-    return frag(element_initials);
-  }
   const initials = make(element_initials.shift());
   let props = void 0;
   let element;
   try {
-    element = document.createElement(initials.tag.trim());
+    element = document.createElement(initials[0]);
   } catch (error) {
-    throw new TypeError(" \u2718  Cradova err:  invalid tag given  " + initials.tag);
+    throw new TypeError(" \u2718  Cradova err:  invalid tag given  " + initials[0]);
   }
-  if (initials.className) {
+  if (initials[2]) {
     if (props) {
-      props["className"] = initials.className.trim();
+      props["className"] = initials[2];
     } else {
-      props = { className: initials.className.trim() };
+      props = { className: initials[2] };
     }
   }
-  if (initials.ID) {
+  if (initials[1]) {
     if (props) {
-      props["id"] = initials.ID.trim();
+      props["id"] = initials[1];
     } else {
-      props = { id: initials.ID.trim() };
+      props = { id: initials[1] };
     }
   }
-  if (initials.innerValue) {
+  if (initials[3]) {
     if (props) {
-      props["innerText"] = initials.innerValue;
+      props["innerText"] = initials[3];
     } else {
-      props = { innerText: initials.innerValue };
+      props = { innerText: initials[3] };
     }
   }
   return makeElement(element, props, ...element_initials);
@@ -1394,6 +1398,7 @@ Init();
 var lib_default = _2;
 export {
   Ajax,
+  CradovaEvent,
   Ref,
   Router,
   Screen,
@@ -1420,7 +1425,6 @@ export {
   code,
   col,
   colgroup,
-  cradovaAftermountEvent,
   createSignal,
   css,
   data,
@@ -1473,7 +1477,6 @@ export {
   meta,
   meter,
   nav,
-  noscript,
   object,
   ol,
   optgroup,
@@ -1485,6 +1488,7 @@ export {
   pre,
   progress,
   q,
+  reference,
   rp,
   rt,
   ruby,