cradova 3.3.4 → 3.3.6

package/README.md

@@ -511,9 +511,9 @@ Join Us on [telegram](https://t.me/UiedbookHQ).
 
 If you contribute code to this project, you are implicitly allowing your code to be distributed under same license. You are also implicitly verifying that all code is your original work.
 
-## Supporting Cradova development
+## Supporting Exabase development
 
-Your Support is a good force for change anytime you do it, you can ensure Our projects, growth, Cradova, Cradova, JetPath etc, growth and improvement by making a re-occuring or fixed sponsorship
+Your Support is a good force for change anytime you do it, you can ensure Our projects, growth, Cradova, Exabase, JetPath etc, growth and improvement by making a re-occuring or fixed sponsorship
 to [github sponsors](https://github.com/sponsors/FridayCandour):
 or crypto using
 etheruen: `0xD7DDD4312A4e514751A582AF725238C7E6dF206c`,

package/dist/index.d.ts

@@ -0,0 +1,12 @@
+/*! *****************************************************************************
+Copyright 2022 Friday Candour. All rights reserved.
+Licensed under the Apache License, Version 2.0 (the "License"); you may not use
+this file except in compliance with the License. You may obtain a copy of the
+License at http://www.apache.org/licenses/LICENSE-2.0
+
+See the Apache Version 2.0 License for specific language governing permissions
+and limitations under the License.
+********************************************************************************/
+export * from "./primitives/classes";
+export * from "./primitives/functions";
+export * from "./primitives/dom-objects";

package/dist/index.js

@@ -0,0 +1,1098 @@
+// src/primitives/functions.ts
+function Rhoda(l) {
+  const fg = new DocumentFragment;
+  for (let ch of l) {
+    if (Array.isArray(ch)) {
+      fg.appendChild(Rhoda(ch));
+    } else {
+      if (ch instanceof Ref) {
+        ch = ch.render(undefined);
+      }
+      if (typeof ch === "function") {
+        ch = ch();
+        if (typeof ch === "function") {
+          ch = ch();
+        }
+      }
+      if (typeof ch === "string" || typeof ch === "number") {
+        fg.appendChild(document.createTextNode(ch));
+        continue;
+      }
+      if (ch instanceof HTMLElement || ch instanceof DocumentFragment) {
+        fg.appendChild(ch);
+      } else {
+        if (typeof ch !== "undefined") {
+          throw new Error("  \u2718  Cradova err:  invalid child type: " + ch + " (" + typeof ch + ")");
+        }
+      }
+    }
+  }
+  return fg;
+}
+function $if(condition, ...elements) {
+  if (condition) {
+    return elements;
+  }
+}
+function $ifelse(condition, ifTrue, ifFalse) {
+  if (condition) {
+    return ifTrue;
+  }
+  return ifFalse;
+}
+function $case(value, ...elements) {
+  return (key) => {
+    if (key === value) {
+      return elements;
+    }
+    return;
+  };
+}
+function $switch(key, ...cases) {
+  if (cases.length) {
+    for (let i = 0;i < cases.length; i++) {
+      const case_N = cases[i];
+      const elements = case_N(key);
+      if (elements) {
+        return elements;
+      }
+    }
+  }
+  return;
+}
+function loop(datalist, component) {
+  if (typeof component !== "function") {
+    throw new Error(" \u2718  Cradova err :  Invalid component type, must be a function that returns html  ");
+  }
+  return Array.isArray(datalist) ? datalist.map(component) : undefined;
+}
+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();
+  }
+  return [ActiveRef._roll_state(null, idx, true), setState];
+}
+function useEffect(effect, ActiveRef) {
+  ActiveRef._effect(effect);
+}
+function useRef() {
+  return new reference;
+}
+var makeElement = (element, ElementChildrenAndPropertyList) => {
+  let props = {}, text = null;
+  if (ElementChildrenAndPropertyList.length !== 0) {
+    for (let i = 0;i < ElementChildrenAndPropertyList.length; i++) {
+      let child = ElementChildrenAndPropertyList[i];
+      if (typeof child === "function") {
+        child = child();
+      }
+      if (child instanceof Ref) {
+        child = child.render();
+      }
+      if (child instanceof HTMLElement || child instanceof DocumentFragment) {
+        element.appendChild(child);
+        continue;
+      }
+      if (Array.isArray(child)) {
+        element.appendChild(Rhoda(child));
+        continue;
+      }
+      if (typeof child === "string" || typeof child === "number") {
+        text = child;
+        continue;
+      }
+      if (typeof child === "object") {
+        props = Object.assign(props, child);
+        continue;
+      }
+    }
+  } else {
+    return element;
+  }
+  if (typeof props === "object" && element) {
+    for (const [prop, value] of Object.entries(props)) {
+      if (prop === "style" && typeof value === "object") {
+        Object.assign(element.style, value);
+        continue;
+      }
+      if (prop.includes("data-")) {
+        element.setAttribute(prop, value);
+        continue;
+      }
+      if (prop.includes("aria-")) {
+        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);
+            //! get url hash here and scroll into view
+            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;
+      }
+      if (Array.isArray(value)) {
+        if (prop == "reference" && value[0] instanceof reference) {
+          value[0]._appendDomForce(value[1], element);
+          continue;
+        }
+        if (value[0] instanceof createSignal) {
+          value[0].bindRef(element, {
+            _element_property: prop,
+            signalProperty: value[1]
+          });
+          continue;
+        }
+      }
+      if (prop === "onmount" && typeof props["onmount"] === "function") {
+        const ev = () => {
+          props.onmount?.apply(element);
+          props["onmount"] = undefined;
+        };
+        CradovaEvent.addEventListener("onmountEvent", ev);
+        continue;
+      }
+      element[prop] = value;
+    }
+  }
+  if (text) {
+    element.appendChild(document.createTextNode(text));
+  }
+  return element;
+};
+var cra = (tag) => {
+  const extend = (...Children_and_Properties) => makeElement(document.createElement(tag), Children_and_Properties);
+  return extend;
+};
+var SNRU = {
+  snru: "",
+  memo_SNRU() {
+    let key = 0;
+    const url = window.location.href;
+    for (let i = 0;i < url.length; i++) {
+      key += url.charCodeAt(i);
+    }
+    this.snru = key.toString();
+  }
+};
+var frag = function(children) {
+  const par = document.createDocumentFragment();
+  for (let i = 0;i < children.length; i++) {
+    let html = children[i];
+    if (typeof html === "function") {
+      html = html();
+    }
+    if (html instanceof HTMLElement || html instanceof DocumentFragment) {
+      par.appendChild(html);
+      continue;
+    }
+    if (html instanceof String) {
+      par.appendChild(document.createTextNode(html));
+      continue;
+    }
+    console.error(" \u2718  Cradova err:   wrong element type" + html);
+    throw new TypeError(" \u2718  Cradova err:   invalid element");
+  }
+  return par;
+};
+
+// src/primitives/classes.ts
+class cradovaEvent {
+  listeners = {};
+  active_listeners = {};
+  async addEventListener(eventName, callback) {
+    if (!this.listeners[eventName]) {
+      this.listeners[eventName] = [];
+    }
+    this.listeners[eventName].push(callback);
+  }
+  async addActiveEventListener(eventName, callback) {
+    if (!this.active_listeners[eventName]) {
+      this.active_listeners[eventName] = [];
+    }
+    this.active_listeners[eventName].push(callback);
+  }
+  async dispatchEvent(eventName, eventArgs) {
+    const eventListeners = this.listeners[eventName] || [];
+    for (;eventListeners.length !== 0; ) {
+      eventListeners.shift()(eventArgs);
+    }
+  }
+  async dispatchActiveEvent(eventName, eventArgs) {
+    const eventListeners = this.active_listeners[eventName] || [];
+    eventListeners.length && SNRU.memo_SNRU();
+    for (let i = 0;i < eventListeners.length; i++) {
+      eventListeners[i](eventArgs);
+    }
+  }
+}
+var CradovaEvent = new cradovaEvent;
+
+class Ref {
+  component;
+  effects = [];
+  effectuate = null;
+  methods = {};
+  rendered = false;
+  published = false;
+  preRendered = null;
+  reference = new reference;
+  Signal;
+  _state = [];
+  _state_track = {};
+  _state_index = 0;
+  stash;
+  constructor(component) {
+    this.component = component.bind(this);
+    CradovaEvent.addActiveEventListener("active-Refs", () => {
+      this._state_index = 0;
+      this.published = false;
+    });
+  }
+  preRender(data, stash) {
+    this.preRendered = this.render(data, stash);
+  }
+  destroyPreRendered() {
+    this.preRendered = null;
+  }
+  define(methodName, method) {
+    if (typeof methodName == "string" && typeof method == "function" && !Object.prototype.hasOwnProperty.call(this, methodName)) {
+      this.methods[methodName] = method.bind(this);
+    } else {
+      console.error(" \u2718  Cradova err :  Invalid Ref.define parameters");
+    }
+  }
+  render(data, stash) {
+    this.effects = [];
+    this.rendered = false;
+    if (stash) {
+      this.stash = data;
+    }
+    if (!this.preRendered) {
+      const html = this.component(data);
+      if (html instanceof HTMLElement || html instanceof DocumentFragment) {
+        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;
+    } else {
+      return this.preRendered;
+    }
+  }
+  instance() {
+    return this.reference.current("html");
+  }
+  _setExtra(Extra) {
+    this.Signal = Extra;
+  }
+  _roll_state(data, idx, get = false) {
+    if (!get) {
+      this._state[idx] = data;
+    }
+    return this._state[idx];
+  }
+  _effect(fn) {
+    if (!this.rendered) {
+      this.effects.push(fn.bind(this));
+    }
+  }
+  async effector() {
+    for (let i = 0;i < this.effects.length; i++) {
+      await this.effects[i].apply(this);
+    }
+    this.effects = [];
+    if (this.effectuate) {
+      this.effectuate();
+      this.effectuate = null;
+    }
+  }
+  updateState(data, stash) {
+    if (!this.rendered) {
+      this.effectuate = () => {
+        if (this.published) {
+          this.Activate(data);
+        }
+      };
+    } else {
+      if (this.published) {
+        this.Activate(data);
+      }
+    }
+    if (stash) {
+      this.stash = data;
+    }
+  }
+  async Activate(data) {
+    this._state_index = 0;
+    this.published = false;
+    if (!this.rendered) {
+      return;
+    }
+    const html = this.component(data);
+    if (html instanceof HTMLElement || html instanceof DocumentFragment) {
+      const node = this.reference.current("html");
+      if (node) {
+        node.insertAdjacentElement("beforebegin", html);
+        node.remove();
+      }
+      this.published = true;
+      this.reference._appendDomForce("html", html);
+      CradovaEvent.dispatchEvent("onmountEvent");
+    } else {
+      console.error(" \u2718  Cradova err :  Invalid html content, got  - " + html);
+    }
+  }
+}
+
+class lazy {
+  content;
+  _cb;
+  constructor(cb) {
+    this._cb = cb;
+  }
+  async load() {
+    let content = await this._cb();
+    if (typeof content === "function") {
+      content = await content();
+    } else {
+      content = await content;
+    }
+    const def = content;
+    if (def.default) {
+      this.content = def?.default;
+    }
+  }
+}
+
+class reference {
+  tree = {};
+  globalTree = {};
+  bindAs(name) {
+    return [this, name];
+  }
+  current(name) {
+    if (this.tree[SNRU.snru]) {
+      return this.tree[SNRU.snru][name];
+    }
+    return null;
+  }
+  _appendDomForce(name, Element) {
+    if (this.tree[SNRU.snru]) {
+      this.tree[SNRU.snru][name] = Element;
+    } else {
+      this.tree[SNRU.snru] = {};
+      this.tree[SNRU.snru][name] = Element;
+    }
+  }
+  _appendDomForceGlobal(name, Element) {
+    this.globalTree[name] = Element;
+  }
+}
+var localTree = new reference;
+
+class createSignal {
+  callback;
+  persistName = "";
+  actions = {};
+  ref = [];
+  value;
+  constructor(initial, props) {
+    this.value = initial;
+    if (props && props.persistName) {
+      this.persistName = props.persistName;
+      const key = localStorage.getItem(props.persistName);
+      if (key && key !== "undefined") {
+        this.value = JSON.parse(key);
+      }
+      if (typeof initial === "object") {
+        for (const key2 in initial) {
+          if (!Object.prototype.hasOwnProperty.call(this.value, key2)) {
+            this.value[key2] = initial[key2];
+          }
+        }
+      }
+    }
+  }
+  set(value, shouldRefRender) {
+    if (typeof value === "function") {
+      this.value = value(this.value);
+    } else {
+      this.value = value;
+    }
+    if (this.persistName) {
+      localStorage.setItem(this.persistName, JSON.stringify(this.value));
+    }
+    if (this.ref.length && shouldRefRender !== false) {
+      this._updateState();
+    }
+    if (this.callback) {
+      this.callback(this.value);
+    }
+  }
+  setKey(key, value, shouldRefRender) {
+    if (typeof this.value === "object" && !Array.isArray(this.value)) {
+      this.value[key] = value;
+      if (this.persistName) {
+        localStorage.setItem(this.persistName, JSON.stringify(this.value));
+      }
+      if (this.ref.length && shouldRefRender !== false) {
+        this._updateState();
+      }
+      if (this.callback) {
+        this.callback(this.value);
+      }
+    } else {
+      throw new Error(`\u2718  Cradova err : can't set key ${String(key)} . store.value is not a javascript object`);
+    }
+  }
+  createAction(name, action) {
+    if (typeof name === "string" && typeof action === "function") {
+      this.actions[name] = action;
+    } else {
+      throw new Error(`\u2718  Cradova err : can't create action, ${name} is not a function`);
+    }
+  }
+  createActions(Actions) {
+    for (const [name, action] of Object.entries(Actions)) {
+      if (typeof name === "string" && typeof action === "function") {
+        this.actions[name] = action;
+      } else {
+        throw new Error(`\u2718  Cradova err : can't create action, ${name} is not a function`);
+      }
+    }
+  }
+  fireAction(key, data) {
+    this._updateState(key, data);
+    if (typeof this.actions[key] === "function") {
+      return this.actions[key].call(this, data);
+    } else {
+      throw Error("\u2718  Cradova err : action " + key + "  does not exist!");
+    }
+  }
+  bind(prop) {
+    if (typeof this.value === "object" && typeof this.value[prop] !== "undefined") {
+      return [this, prop];
+    } else {
+      throw new Error("\u2718  Cradova err : can't bind an unavailable property!  " + prop);
+    }
+  }
+  _updateState(name, data) {
+    if (name && data) {
+      this.ref.map((ent) => {
+        if (ent._event === name) {
+          if (ent._element_property && ent._signalProperty) {
+            ent.ref.updateState({
+              [ent._element_property]: data[ent._signalProperty]
+            });
+            return;
+          }
+          if (ent._element_property) {
+            ent.ref.updateState({
+              [ent._element_property]: data
+            });
+            return;
+          }
+          if (ent._signalProperty) {
+            ent.ref.updateState(data[ent._signalProperty]);
+            return;
+          }
+        }
+      });
+    } else {
+      for (let i = 0;i < this.ref.length; i++) {
+        const ent = this.ref[i];
+        if (ent._element_property && ent._signalProperty) {
+          ent.ref.updateState({
+            [ent._element_property]: this.value[ent._signalProperty]
+          });
+          continue;
+        }
+        if (ent._element_property) {
+          ent.ref.updateState({
+            [ent._element_property]: this.value
+          });
+          continue;
+        }
+        if (ent._signalProperty) {
+          ent.ref.updateState(this.value[ent._signalProperty]);
+          continue;
+        }
+        if (!ent._element_property && !ent._signalProperty) {
+          ent.ref.updateState(this.value);
+          continue;
+        }
+      }
+    }
+  }
+  bindRef(ref, binding = { signalProperty: "", _element_property: "" }) {
+    ref.render = ref.render.bind(ref, this.value);
+    ref._setExtra(this);
+    this.ref.push({
+      ref,
+      _signalProperty: binding.signalProperty,
+      _element_property: binding._element_property,
+      _event: binding.event
+    });
+  }
+  listen(callback) {
+    this.callback = callback;
+  }
+  clearPersist() {
+    if (this.persistName) {
+      localStorage.removeItem(this.persistName);
+    }
+  }
+}
+
+class Screen {
+  _name;
+  _html;
+  _packed = false;
+  _template = document.createElement("div");
+  _callBack;
+  _deCallBack;
+  _persist = true;
+  _delegatedRoutesCount = -1;
+  _dropped = false;
+  _errorHandler = null;
+  constructor(cradova_screen_initials) {
+    const { template, name, persist, renderInParallel } = cradova_screen_initials;
+    if (template instanceof Ref) {
+      this._html = () => template.render({});
+    } else {
+      this._html = template;
+    }
+    this._name = name || "Document";
+    this._template.setAttribute("id", "cradova-screen-set");
+    if (renderInParallel === true) {
+      this._delegatedRoutesCount = 0;
+      this._persist = false;
+    } else {
+      if (typeof persist === "boolean") {
+        this._persist = persist;
+      }
+    }
+  }
+  _derive() {
+    return {
+      _name: this._name,
+      _callBack: this._callBack,
+      _deCallBack: this._deCallBack
+    };
+  }
+  _apply_derivation(derivation) {
+    this._name = derivation._name;
+    this._callBack = derivation._callBack;
+    this._deCallBack = derivation._deCallBack;
+  }
+  get _delegatedRoutes() {
+    if (this._delegatedRoutesCount > 100) {
+      return -1;
+    }
+    return this._delegatedRoutesCount;
+  }
+  set _delegatedRoutes(count) {
+    if (count) {
+      this._delegatedRoutesCount += 1;
+    }
+  }
+  setErrorHandler(errorHandler) {
+    this._errorHandler = errorHandler;
+  }
+  async _package() {
+    SNRU.memo_SNRU();
+    if (typeof this._html === "function") {
+      let html = await this._html.apply(this);
+      if (typeof html === "function") {
+        html = html();
+        if (html instanceof HTMLElement || html instanceof DocumentFragment) {
+          this._template.innerHTML = "";
+          this._template.appendChild(html);
+        }
+      } else {
+        if (html instanceof HTMLElement || html instanceof DocumentFragment) {
+          this._template.innerHTML = "";
+          this._template.appendChild(html);
+        } else {
+          throw new Error(` \u2718  Cradova err:  template function for the screen with name '${this._name}' returned ${html} instead of html`);
+        }
+      }
+    }
+  }
+  onActivate(cb) {
+    this._callBack = cb;
+  }
+  onDeactivate(cb) {
+    this._deCallBack = cb;
+  }
+  async _deActivate() {
+    this._deCallBack && await this._deCallBack(localTree.globalTree["doc"]);
+  }
+  drop(state) {
+    if (typeof state === "boolean") {
+      this._dropped = state;
+      return;
+    } else
+      return this._dropped;
+  }
+  async _Activate(force = false) {
+    if (this._dropped) {
+      history.go(-1);
+      return;
+    }
+    CradovaEvent.dispatchActiveEvent("active-Refs");
+    if (!this._persist || force || !this._packed) {
+      await this._package();
+      this._packed = true;
+    }
+    document.title = this._name;
+    localTree.globalTree["doc"].innerHTML = "";
+    localTree.globalTree["doc"].appendChild(this._template);
+    CradovaEvent.dispatchEvent("onmountEvent");
+    window.scrollTo({
+      top: 0,
+      left: 0,
+      behavior: "instant"
+    });
+    this._callBack && await this._callBack(localTree.globalTree["doc"]);
+  }
+}
+
+class RouterBoxClass {
+  lastNavigatedRouteController;
+  nextRouteController;
+  lastNavigatedRoute;
+  pageShow = null;
+  pageHide = null;
+  errorHandler;
+  loadingScreen = null;
+  params = {};
+  routes = {};
+  pageevents = [];
+  paused = false;
+  async start_pageevents(url) {
+    setTimeout(() => {
+      for (let ci = 0;ci < this.pageevents.length; ci++) {
+        this.pageevents[ci](url);
+      }
+    }, 50);
+  }
+  route(path, screen) {
+    if (typeof screen !== "undefined") {
+      if (screen && !screen) {
+        console.error(" \u2718  Cradova err:  not a valid screen  ", screen);
+        throw new Error(" \u2718  Cradova err:  Not a valid cradova screen component");
+      }
+      return this.routes[path] = screen;
+    }
+    return;
+  }
+  async router(_e, _force) {
+    let url = window.location.pathname, route, params;
+    if (this.paused) {
+      window.location.hash = "paused";
+      return;
+    }
+    if (url === this.lastNavigatedRoute) {
+      return;
+    }
+    if (this.nextRouteController) {
+      route = this.nextRouteController;
+      this.nextRouteController = undefined;
+    } else {
+      [route, params] = this.checker(url);
+    }
+    if (typeof route !== "undefined") {
+      try {
+        if (typeof route === "function") {
+          if (this.loadingScreen instanceof Screen) {
+            await this.loadingScreen._Activate();
+          }
+          route = await route();
+          if (!route) {
+            if (this.lastNavigatedRoute) {
+              history.pushState({}, url, this.lastNavigatedRoute);
+            }
+            return;
+          }
+        }
+        if (route._delegatedRoutes !== -1) {
+          route._delegatedRoutes = 1;
+          const a = route._derive();
+          route = new Screen({
+            template: route._html
+          });
+          route._apply_derivation(a);
+          this.routes[url] = route;
+        }
+        if (params) {
+          this.params.params = params;
+        }
+        await route._Activate(_force);
+        this.start_pageevents(url);
+        this.lastNavigatedRouteController && this.lastNavigatedRouteController._deActivate();
+        this.lastNavigatedRoute = url;
+        this.lastNavigatedRouteController = route;
+      } catch (error) {
+        if (route && route["_errorHandler"]) {
+          route._errorHandler(error);
+        } else {
+          if (typeof this.errorHandler === "function") {
+            this.errorHandler(error);
+          } else {
+            console.error(error);
+            throw new Error(" \u2718  Cradova err:  consider adding error boundary to the specific screen  ");
+          }
+        }
+      }
+    } else {
+      if (this.routes["*"]) {
+        await this.routes["*"]._Activate(_force);
+      }
+    }
+  }
+  checker(url) {
+    if (this.routes[url]) {
+      return [this.routes[url], { path: url }];
+    }
+    if (this.routes[url + "/"]) {
+      return [this.routes[url], { path: url }];
+    }
+    for (const path in this.routes) {
+      if (!path.includes(":")) {
+        continue;
+      }
+      const urlFixtures = url.split("/");
+      const pathFixtures = path.split("/");
+      if (url.endsWith("/")) {
+        urlFixtures.pop();
+      }
+      let fixturesX = 0;
+      let fixturesY = 0;
+      urlFixtures.shift();
+      pathFixtures.shift();
+      if (pathFixtures.length === urlFixtures.length) {
+        const routesParams = { _path: "" };
+        for (let i = 0;i < pathFixtures.length; i++) {
+          if (pathFixtures[i].includes(":")) {
+            fixturesY++;
+            continue;
+          }
+          if (urlFixtures[i] === pathFixtures[i]) {
+            fixturesX++;
+          }
+        }
+        if (fixturesX + fixturesY === pathFixtures.length) {
+          for (let i = 0;i < pathFixtures.length; i++) {
+            if (pathFixtures[i].includes(":")) {
+              routesParams[pathFixtures[i].split(":")[1]] = urlFixtures[i];
+            }
+          }
+          routesParams["_path"] = path;
+          return [this.routes[path], routesParams];
+        }
+      }
+    }
+    return [];
+  }
+}
+var RouterBox = new RouterBoxClass;
+
+class Router {
+  static BrowserRoutes(obj) {
+    for (const path in obj) {
+      let screen = obj[path];
+      if (typeof screen === "object" && typeof screen.then === "function" || typeof screen === "function") {
+        RouterBox.routes[path] = async () => {
+          screen = await (typeof screen === "function" ? await screen() : await screen);
+          return RouterBox.route(path, screen?.default || screen);
+        };
+      } else {
+        RouterBox.route(path, screen);
+      }
+    }
+    Router._mount();
+  }
+  static back() {
+    history.go(-1);
+  }
+  static forward() {
+    history.go(1);
+  }
+  static pauseNaviagtion() {
+    RouterBox["paused"] = true;
+    window.location.hash = "paused";
+  }
+  static resumeNaviagtion() {
+    RouterBox["paused"] = false;
+    window.location.replace(window.location.pathname + window.location.search);
+    history.go(-1);
+  }
+  static navigate(href, data = null, force = false) {
+    if (typeof href !== "string") {
+      throw new TypeError(" \u2718  Cradova err:  href must be a defined path but got " + href + " instead");
+    }
+    let route = null, params;
+    if (href.includes("://")) {
+      window.location.href = href;
+    } else {
+      if (href === window.location.pathname) {
+        return;
+      }
+      [route, params] = RouterBox.checker(href);
+      if (route) {
+        RouterBox.nextRouteController = route;
+        window.history.pushState({}, "", href);
+      }
+      RouterBox.params.params = params;
+      RouterBox.params.data = data;
+      RouterBox.router(null, force);
+    }
+  }
+  static setLoadingScreen(screen) {
+    if (screen instanceof Screen) {
+      RouterBox.loadingScreen = screen;
+    } else {
+      throw new Error(" \u2718  Cradova err:  Loading Screen should be a cradova screen class");
+    }
+  }
+  static onPageEvent(callback) {
+    if (typeof callback === "function") {
+      RouterBox["pageevents"].push(callback);
+    } else {
+      throw new Error(" \u2718  Cradova err:  callback for pageShow event is not a function");
+    }
+  }
+  static async packageScreen(path) {
+    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");
+    }
+    let [route] = RouterBox.checker(path);
+    if (typeof route === "function") {
+      route = await route();
+    }
+    if (route._delegatedRoutes !== -1) {
+      route._delegatedRoutes = 1;
+      const a = route._derive();
+      route = new Screen({
+        template: route._html
+      });
+      route._apply_derivation(a);
+      RouterBox.routes[path] = route;
+    }
+    route._package();
+    route._packed = true;
+  }
+  static get Params() {
+    return RouterBox.params;
+  }
+  static addErrorHandler(callback) {
+    if (typeof callback === "function") {
+      RouterBox["errorHandler"] = callback;
+    } else {
+      throw new Error(" \u2718  Cradova err:  callback for error event is not a function");
+    }
+  }
+  static _mount() {
+    let doc = document.querySelector("[data-wrapper=app]");
+    if (!doc) {
+      doc = document.createElement("div");
+      doc.setAttribute("data-wrapper", "app");
+      document.body.appendChild(doc);
+      localTree._appendDomForceGlobal("doc", doc);
+    } else {
+      localTree._appendDomForceGlobal("doc", doc);
+    }
+    window.addEventListener("pageshow", () => RouterBox.router());
+    window.addEventListener("popstate", (_e) => {
+      _e.preventDefault();
+      RouterBox.router();
+    });
+  }
+}
+// src/primitives/dom-objects.ts
+var a = cra("a");
+var article = cra("article");
+var audio = cra("audio");
+var br = cra("br");
+var button = cra("button");
+var canvas = cra("canvas");
+var caption = cra("caption");
+var col = cra("col");
+var colgroup = cra("colgroup");
+var datalist = cra("datalist");
+var details = cra("details");
+var dialog = cra("dialog");
+var div = cra("div");
+var figure = cra("figure");
+var footer = cra("footer");
+var form = cra("form");
+var h1 = cra("h1");
+var h2 = cra("h2");
+var h3 = cra("h3");
+var h4 = cra("h4");
+var h5 = cra("h5");
+var h6 = cra("h6");
+var head = cra("head");
+var header = cra("header");
+var hr = cra("hr");
+var i = cra("i");
+var iframe = cra("iframe");
+var img = cra("img");
+var input = cra("input");
+var label = cra("label");
+var li = cra("li");
+var main = cra("main");
+var nav = cra("nav");
+var ol = cra("ol");
+var optgroup = cra("optgroup");
+var option = cra("option");
+var p = cra("p");
+var progress = cra("progress");
+var q = cra("q");
+var section = cra("section");
+var select = cra("select");
+var source = cra("source");
+var span = cra("span");
+var strong = cra("strong");
+var summary = cra("summary");
+var table = cra("table");
+var tbody = cra("tbody");
+var td = cra("td");
+var template = cra("template");
+var textarea = cra("textarea");
+var th = cra("th");
+var title = cra("title");
+var tr = cra("tr");
+var track = cra("track");
+var u = cra("u");
+var ul = cra("ul");
+var video = cra("video");
+var svg = (svg2, properties) => {
+  const span2 = document.createElement("span");
+  span2.innerHTML = svg2;
+  return makeElement(span2, properties);
+};
+var raw = (html) => {
+  const div2 = document.createElement("div");
+  div2.innerHTML = html;
+  const df = new DocumentFragment;
+  df.append(...Array.from(div2.children));
+  return df;
+};
+
+// src/index.ts
+/*! *****************************************************************************
+Copyright 2022 Friday Candour. All rights reserved.
+Licensed under the Apache License, Version 2.0 (the "License"); you may not use
+this file except in compliance with the License. You may obtain a copy of the
+License at http://www.apache.org/licenses/LICENSE-2.0
+
+See the Apache Version 2.0 License for specific language governing permissions
+and limitations under the License.
+********************************************************************************/
+export {
+  video,
+  useState,
+  useRef,
+  useEffect,
+  ul,
+  u,
+  track,
+  tr,
+  title,
+  th,
+  textarea,
+  template,
+  td,
+  tbody,
+  table,
+  svg,
+  summary,
+  strong,
+  span,
+  source,
+  select,
+  section,
+  reference,
+  raw,
+  q,
+  progress,
+  p,
+  option,
+  optgroup,
+  ol,
+  nav,
+  makeElement,
+  main,
+  loop,
+  li,
+  lazy,
+  label,
+  input,
+  img,
+  iframe,
+  i,
+  hr,
+  header,
+  head,
+  h6,
+  h5,
+  h4,
+  h3,
+  h2,
+  h1,
+  frag,
+  form,
+  footer,
+  figure,
+  div,
+  dialog,
+  details,
+  datalist,
+  createSignal,
+  cra,
+  colgroup,
+  col,
+  caption,
+  canvas,
+  button,
+  br,
+  audio,
+  article,
+  a,
+  Screen,
+  SNRU,
+  Router,
+  Rhoda,
+  Ref,
+  CradovaEvent,
+  $switch,
+  $ifelse,
+  $if,
+  $case
+};

package/package.json

@@ -1,12 +1,11 @@
 {
   "name": "cradova",
-  "version": "3.3.4",
+  "version": "3.3.6",
   "description": "Web framework for building powerful web apps",
   "main": "dist/index.js",
   "type": "module",
   "files": [
     "dist/index.d.ts",
-    "dist/primitives/**",
     "dist/index.js"
   ],
   "repository": {
@@ -66,7 +65,9 @@
     "eslint": "^8.30.0",
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-prettier": "^4.2.1",
-    "prettier": "^2.8.1"
+    "prettier": "^2.8.1",
+    "tsup": "^6.7.0",
+    "typescript": "^4.9.4"
   },
   "dependencies": {
     "csstype": "^3.1.2"