cradova 3.5.7 → 3.6.0

package/README.md

@@ -1,7 +1,7 @@
 <br/>
 <p align="center">
   <a href="https://github.com/uiedbook/cradova">
-    <img src="icon.png" alt="Logo" width="80" height="80">
+    <img src="https://raw.githubusercontent.com/Uiedbook/cradova/main/icon.png" alt="Logo" width="80" height="80">
   </a>
 
 <h1 align="center">Cradova</h1>
@@ -33,8 +33,14 @@ Build Powerful ⚡ Web Apps with Ease
 
 # Cradova is 3
 
+## 2025 - What's New? Function as reactive components
+
+this can't be better anywhere XD
+
 ```js
-const Cradova = new Comp(function () {
+// functional components
+
+const Cradova = function () {
   const [year, setYear] = useState(3, this);
 
   return h1("Cradova is " + year + " yrs old in ", {
@@ -44,9 +50,37 @@ const Cradova = new Comp(function () {
       });
     },
   });
-});
+};
+
+// NOTE: all cradova elements returns html elements
+
+// converts to html and append to the Dom
+document.body.appendChild(div(Cradova));
+```
+
+## 2024 - What's New? Signals pub/sub
+
+```js
+import { Signal, getSignal, $if, $ifelse, div, h1 } from "cradova";
+
+const signal = new Signal({ name: "john" });
+
+function Hello() {
+  const name = getSignal("name", this).name;
+  return div(
+    $if(name === "john", h1("Hello john")),
+    $if(name === "paul", h1("Goodbye paul")),
+    $ifelse(name === "john", h1("Hello john"), h1("Hello Paul"))
+  );
+}
+
+signal.bind("name", this);
+const html = div(Hello);
+document.body.append(html);
 
-document.body.appendChild(Cradova.render());
+setInterval(() => {
+  signal.publish("name", "paul");
+}, 5000);
 ```
 
 ## 2023 - What's New? Conditionals
@@ -78,6 +112,20 @@ function whatsAllowed({ age }) {
 document.body.append(html, whatsAllowed({ age: 26 }));
 ```
 
+## 2023 - What's New? Router
+
+```js
+Router.BrowserRoutes({
+  "/home": home,
+});
+// creates these routes
+Router.navigate("/home", data);
+```
+
+## 2021 - first version
+
+...
+
 # Contents
 
 - [What is Cradova](#what-is-cradova)
@@ -158,7 +206,7 @@ This a collection of basic examples that can give you some ideas
 import {
   br,
   button,
-  Comp,
+  Function,
   createSignal,
   div,
   h1,
@@ -206,7 +254,7 @@ Let's see a simple TodoList example
 ```js
 import {
   button,
-  Comp,
+  Function,
   createSignal,
   div,
   h1,
@@ -237,7 +285,7 @@ const removeTodo = function (todo: string) {
 function TodoList() {
   // can be used to hold multiple references
   const referenceSet = useRef();
-  // bind Comp to Signal
+  // bind Function to Signal
   todoStore.subscribe("todo", todoList);
   // vjs
   return main(
@@ -260,8 +308,8 @@ function TodoList() {
   );
 }
 
-const todoList = new Comp(function () {
-  const data = this.subData;
+const todoList =  function () {
+  const data = this.pipes.get("todo");
   return div(
     data.map((item: any) =>
       p(item, {
@@ -272,7 +320,7 @@ const todoList = new Comp(function () {
       })
     )
   );
-});
+};
 document.body.appendChild(TodoList());
 ```
 
@@ -285,29 +333,12 @@ Cradova Router is a module that allows you do the following:
 
 Create specified routes in you application help you handle navigation render a
 page on a route listen to Navigation changes create error boundary at page level
-apart from Comp level.
+apart from Function level.
 
 let's try an example.
 
 ```js
-import { Page, Router } from "cradova";
-
-// Comp can be used as page template this way
-
-const template = new Comp(function (name) {
-  // an effect run once after page renders
-  const self = this;
-  self.effect(() => {
-    const name = new Promise((res) => {
-      res("john doe");
-    });
-    setTimeout(async () => {
-      self.recall(await name);
-    }, 1000);
-  });
-  // effects can be used to make api calls needed for the page
-  return div(name ? ">>>>>>>>  Hello  " + name : "  loading...");
-});
+import { Page, Router, useEffect } from "cradova";
 
 const home = new Page({
   name: "home page", // page title
@@ -365,11 +396,11 @@ this allow you manage rendering circle for each page in your app
 
 ---
 
-More info on Cradova Comp
+More info on Cradova Function
 
 ---
 
-Cradova Comp is a dynamic component class, which ships simple abstractions like:
+Cradova Function is a dynamic component class, which ships simple abstractions like:
 
 - Signal
 - useEffect
@@ -377,7 +408,7 @@ Cradova Comp is a dynamic component class, which ships simple abstractions like:
 - useRef
 - preRender
 
-these behaviors allow you manage rendering circle for Comps in your app
+these behaviors allow you manage rendering circle for Functions in your app
 
 ---
 
@@ -391,7 +422,7 @@ with ability to:
 
 - create store
 - create actions and fire them
-- bind a Comp
+- bind a Function
 - listen to changes
 - persist changes to localStorage
 

package/dist/index.js

@@ -1 +1,816 @@
-class U{static compId=0;afterMount=[];beforeMountActive=[];afterDeactivate=[];dispatchEvent(H){let L=this[H];if(H.includes("Active")){for(let T=0;T<L.length;T++)L[T]();return}while(L.length!==0)L.shift()()}}var J=new U;class G{id=0;component;effects=[];effectuate=null;rendered=!1;published=!1;preRendered=null;reference=null;subData=null;_state=[];_state_index=0;constructor(H){this.component=H.bind(this)}preRender(H){this.preRendered=this.render(H)}render(H){if(U.compId+=1,this.id=U.compId,this.effects=[],this.rendered=!1,!this.preRendered){this._state_index=0,this._state=[];let L=this.component(H);if(L instanceof HTMLElement)this.reference=L,this.effector.apply(this),this.rendered=!0,this.published=!0;else console.error(" ✘  Cradova err :  Invalid html content, got  - "+L);return L}else return this.preRendered}_effect(H){if(!this.rendered)this.effects.push(H.bind(this))}async effector(){for(let H=0;H<this.effects.length;H++){let L=await this.effects[H].apply(this);if(typeof L==="function")J.afterDeactivate.push(L)}if(this.effects=[],this.effectuate)this.effectuate(),this.effectuate=null}recall(H){if(!this.rendered)this.effectuate=()=>{if(this.published)this.activate(H)};else if(this.published)setTimeout(()=>{this.activate(H)})}async activate(H){if(this.published=!1,!this.rendered)return;this._state_index=0;let L=this.reference;if(document.contains(L)){let T=this.component(H);if(T instanceof HTMLElement)L.insertAdjacentElement("beforebegin",T),L.remove(),this.published=!0,this.reference=T,J.dispatchEvent("afterMount");else console.error(" ✘  Cradova err :  Invalid html, got  - "+T)}else this.reference=null,this.rendered=!1}}class Z{pn;subs;pipe;constructor(H,L){if(this.pipe=H,this.subs={},L&&L.persistName){this.pn=L.persistName;let T=localStorage.getItem(L.persistName);if(T&&T!=="undefined")this.pipe=JSON.parse(T);if(typeof H==="object"){for(let M in H)if(!Object.prototype.hasOwnProperty.call(this.pipe,M))this.pipe[M]=H[M]}}}publish(H,L){this.pipe[H]=L;let T=this.subs[H]||[];for(let M=0;M<T.length;M++){let E=T[M];E.subData=L,E.recall()}if(this.pn)localStorage.setItem(this.pn,JSON.stringify(this.pipe))}subscribe(H,L){if(L instanceof G){if(this.subs[H]?.find((T)=>T.id===L.id))return;if(!this.subs[H])this.subs[H]=[L];else this.subs[H].push(L);if(this.pipe[H])L.subData=this.pipe[H]}}clearPersist(){if(this.pn)localStorage.removeItem(this.pn)}}class q{_name;_html;_template=document.createElement("div");_dropped=!1;_snapshot;_snapshot_html;_deCB;constructor(H){let{template:L,name:T}=H;this._html=L,this._name=T||document.title,this._template.setAttribute("id","page"),this._snapshot=H.snapshotIsolation||!1}async _takeSnapShot(){if(A.doc.dataset.snapshot==="true")return;try{let H=await fetch(location.href);if(!H.ok)throw new Error("Failed to fetch the page");let L=await H.text(),M=new DOMParser().parseFromString(L,"text/html");M.title=this._name;let E=M.querySelector('[data-wrapper="app"]');if(E)E.setAttribute("data-snapshot","true"),E.innerHTML=this._snapshot_html;else{console.error("Wrapper or template is not found");return}let I=M.documentElement.outerHTML;await fetch(`${location.origin}`,{body:I,method:"POST",headers:{"Content-Type":"text/html","cradova-snapshot":location.href.slice(location.origin.length)}})}catch(H){console.error("Snapshot error:",H)}this._snapshot_html=void 0}set onDeactivate(H){this._deCB=H}drop(H){if(typeof H==="boolean"){this._dropped=H;return}else return this._dropped}async _activate(){if(this._dropped){history.go(-1);return}let H=this._html.apply(this);if(H instanceof HTMLElement)this._template.innerHTML="",this._template.appendChild(H);else throw new Error(` ✘  Cradova err:  template function for the page returned ${H} instead of html`);if(document.title=this._name,A.doc.innerHTML="",J.dispatchEvent("beforeMountActive"),this._snapshot)this._snapshot_html=this._template.outerHTML;if(A.doc.appendChild(this._template),J.dispatchEvent("afterMount"),window.scrollTo({top:0,left:0,behavior:"instant"}),J.dispatchEvent("afterDeactivate"),this._snapshot)this._takeSnapShot()}}class Q{doc=null;lastNavigatedRouteController;nextRouteController;lastNavigatedRoute;pageShow=null;pageHide=null;errorHandler;loadingPage=null;pageData={params:{}};routes={};paused=!1;route(H,L){if(!L)console.error(" ✘  Cradova err:  not a valid page  ",L);return this.routes[H]=L}async router(H,L){let T=window.location.href,M,E;if(this.paused){window.location.hash="paused";return}if(this.nextRouteController)M=this.nextRouteController,this.nextRouteController=void 0;else[M,E]=this.checker(T);if(typeof M!=="undefined")try{if(typeof M==="function"){if(this.loadingPage instanceof q)await this.loadingPage._activate();if(M=await M(),M?.default)M=M.default;if(!M){if(this.lastNavigatedRoute)history.pushState({},T,this.lastNavigatedRoute);return}}if(E)this.pageData.params=E;await M._activate(),this.lastNavigatedRouteController&&this.lastNavigatedRouteController._deCB?.(),this.lastNavigatedRoute=T,this.lastNavigatedRouteController=M}catch(I){if(typeof this.errorHandler==="function")this.errorHandler(I,T);else console.error(I)}else if(this.routes["*"])await this.routes["*"]._activate()}checker(H){if(H[0]!=="/")H=H.slice(H.indexOf("/",8));if(this.routes[H])return[this.routes[H],{path:H}];if(H.includes("?")){let L,T={};if([H,L]=H.split("?"),new URLSearchParams(L).forEach((M,E)=>{T[E]=M}),this.routes[H])return[this.routes[H],T]}for(let L in this.routes){if(L.includes(":")){let T=H.split("/"),M=L.split("/");if(H.endsWith("/"))T.pop();let E=0,I=0;if(M.length===T.length){for(let D=0;D<M.length;D++){if(M[D].includes(":")){I++;continue}if(T[D]===M[D])E++}if(E+I===M.length){let D={};for(let O=0;O<M.length;O++)if(M[O].includes(":"))D[M[O].split(":")[1]]=T[O];return[this.routes[L],D]}}}if(L.includes("*")){let T=L.slice(0,-1);if(H.startsWith(T))return[this.routes[L],{extraPath:H.slice(T.length)}]}}return[]}}var A=new Q;class Y{static BrowserRoutes(H){for(let L in H){let T=H[L];if(typeof T==="object"&&typeof T.then==="function"||typeof T==="function")A.routes[L]=async()=>{let M=typeof T==="function"?await T():await T;return A.route(L,M)};else A.route(L,T)}Y._mount()}static pauseNavigation(){A.paused=!0,window.location.hash="paused"}static resumeNavigation(){A.paused=!1,window.location.replace(window.location.pathname+window.location.search),history.go(-1)}static navigate(H,L){if(typeof H!=="string")console.error(" ✘  Cradova err:  href must be a defined path but got "+H+" instead");let T=null,M;if(H.includes("."))window.location.href=H;else{if([T,M]=A.checker(H),T)A.nextRouteController=T,window.history.pushState({},"",H);A.pageData.params=M,A.pageData.data=L,A.router(null)}}static setLoadingPage(H){if(H instanceof q)A.loadingPage=H;else throw new Error(" ✘  Cradova err:  Loading Page should be a cradova page class")}static get PageData(){return A.pageData}static addErrorHandler(H){if(typeof H==="function")A.errorHandler=H;else throw new Error(" ✘  Cradova err:  callback for error event is not a function")}static _mount(){let H=document.querySelector("[data-wrapper=app]");if(H)A.doc=H;else throw new Error(`✘  Cradova err: please add '<div data-wrapper="app"></div>' to the body of your index.html file `);window.addEventListener("pageshow",()=>A.router()),window.addEventListener("popstate",(L)=>{L.preventDefault(),A.router()})}}class z{tree={};bindAs(H){return[this,H]}elem(H){let L=this.tree[H];if(document.contains(L))return L;this.tree[H]=void 0}swap(H,L){[this.tree[H],this.tree[L]]=[this.tree[L],this.tree[H]]}_append(H,L){this.tree[H]=L}}var K=(H,L)=>{let T={},M=void 0;if(L.length!==0)for(let E=0;E<L.length;E++){let I=L[E];if(typeof I==="function")I=I();if(I instanceof G)I=I.render();if(I instanceof HTMLElement||I instanceof DocumentFragment){H.appendChild(I);continue}if(Array.isArray(I)){H.appendChild(S(I));continue}if(typeof I==="string"){M=I;continue}if(typeof I==="object"){Object.assign(T,I);continue}}else return H;if(typeof T==="object"&&H)for(let[E,I]of Object.entries(T)){if(E==="style"&&typeof I==="object"){Object.assign(H.style,I);continue}if(E==="href"){let D=I||"";if(!D.includes("://"))H.addEventListener("click",(O)=>{if(O.preventDefault(),Y.navigate(H.href),D.includes("#")){let W=D.split("#").at(-1);document.getElementById("#"+W)?.scrollIntoView()}});H.setAttribute(E,I);continue}if(E==="onmount"){J.afterMount.push(()=>{typeof T.onmount==="function"&&T.onmount.apply(H)});continue}if(E.includes("data-")||E.includes("aria-")){H.setAttribute(E,I);continue}if(Array.isArray(I)){if(E=="ref"&&I[0]instanceof z){I[0]._append(I[1],H);continue}}H[E]=I}if(M!==void 0)H.appendChild(document.createTextNode(M));return H},V=(H)=>{return(...L)=>K(document.createElement(H),L)};function S(H){let L=new DocumentFragment;for(let T of H)if(Array.isArray(T))L.appendChild(S(T));else{if(T instanceof G)T=T.render();if(typeof T==="function"){if(T=T(),typeof T==="function")T=T()}if(T instanceof HTMLElement||T instanceof DocumentFragment){L.appendChild(T);continue}if(typeof T==="string")L.appendChild(document.createTextNode(T))}return L}function x(H,...L){if(H)return L}function j(H,L,T){if(H)return L;return T}function y(H,...L){return(T)=>{if(T===H)return L;return}}function g(H,...L){let T;if(L.length){for(let M=0;M<L.length;M++)if(T=L[M](H),T)break}return T}function b(H,L){return Array.isArray(H)?H.map(L):void 0}var F=function(H){let L=document.createDocumentFragment();for(let T=0;T<H.length;T++){let M=H[T];if(typeof M==="function")M=M();if(M instanceof HTMLElement||M instanceof DocumentFragment){L.appendChild(M);continue}if(M instanceof String){L.appendChild(document.createTextNode(M));continue}console.error(" ✘  Cradova err:   wrong element type"+M)}return L};function w(H,L){L._state_index+=1;let T=L._state_index;if(T>=L._state.length)L._state[T]=H;function M(E){if(typeof E==="function")E=E(L._state[T]);L._state[T]=E,L.recall()}return[L._state[T],M]}function _(H,L){L._effect(H)}function P(){return new z}var N=V("a"),B=V("audio"),c=V("button"),f=V("canvas"),R=V("div"),C=V("footer"),s=V("form"),v=V("h1"),d=V("h2"),i=V("h3"),o=V("h4"),h=V("h5"),u=V("h6"),m=V("header"),t=V("i"),p=V("iframe"),l=V("img"),r=V("input"),a=V("label"),e=V("li"),HH=V("main"),LH=V("nav"),TH=V("ol"),MH=V("optgroup"),EH=V("option"),IH=V("p"),VH=V("section"),AH=V("select"),DH=V("source"),OH=V("span"),JH=V("textarea"),GH=V("ul"),UH=V("video"),YH=(H,L)=>{let T=document.createElement("span");return T.innerHTML=H,K(T,L||[])},qH=(H)=>{let L=document.createElement("div");if(Array.isArray(H))L.innerHTML=H[0];else if(typeof H==="string")L.innerHTML=H;let T=new DocumentFragment;return T.append(...Array.from(L.children)),T};export{UH as video,w as useState,P as useRef,_ as useEffect,GH as ul,JH as textarea,YH as svg,OH as span,DH as source,AH as select,VH as section,qH as raw,IH as p,EH as option,MH as optgroup,TH as ol,LH as nav,K as makeElement,HH as main,b as loop,e as li,a as label,r as input,l as img,p as iframe,t as i,m as header,u as h6,h as h5,o as h4,i as h3,d as h2,v as h1,F as frag,s as form,C as footer,R as div,V as cra,f as canvas,c as button,B as audio,N as a,Z as Signal,Y as Router,S as Rhoda,q as Page,J as CradovaEvent,G as Comp,g as $switch,j as $ifelse,x as $if,y as $case};
+// src/primitives/functions.ts
+var makeElement = (element, ElementChildrenAndPropertyList) => {
+  const props = {};
+  let text = undefined;
+  if (ElementChildrenAndPropertyList.length !== 0) {
+    for (let i = 0;i < ElementChildrenAndPropertyList.length; i++) {
+      let child = ElementChildrenAndPropertyList[i];
+      if (typeof child === "function") {
+        child = isArrowFunc(child) ? child() : toFunc(child);
+      }
+      if (child instanceof HTMLElement || child instanceof DocumentFragment) {
+        element.appendChild(child);
+        continue;
+      }
+      if (Array.isArray(child)) {
+        element.appendChild(unroll_child_list(child));
+        continue;
+      }
+      if (typeof child === "string") {
+        text = child;
+        continue;
+      }
+      if (typeof child === "object") {
+        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 === "href") {
+        const href = value || "";
+        if (!href.includes("://")) {
+          element.addEventListener("click", (e) => {
+            e.preventDefault();
+            Router.navigate(element.href);
+            if (href.includes("#")) {
+              const l = href.split("#").at(-1);
+              document.getElementById("#" + l)?.scrollIntoView();
+            }
+          });
+        }
+        element.setAttribute(prop, value);
+        continue;
+      }
+      if (prop === "onmount") {
+        CradovaEvent.after_comp_is_mounted.push(() => {
+          typeof props["onmount"] === "function" && props["onmount"].apply(element);
+        });
+        continue;
+      }
+      if (prop.includes("data-") || prop.includes("aria-")) {
+        element.setAttribute(prop, value);
+        continue;
+      }
+      if (Array.isArray(value)) {
+        if (prop == "reference" && value[0] instanceof __raw_ref) {
+          value[0]._append(value[1], element);
+          continue;
+        }
+      }
+      element[prop] = value;
+    }
+  }
+  if (text !== undefined) {
+    element.appendChild(document.createTextNode(text));
+  }
+  return element;
+};
+var cra = (tag) => {
+  return (...Children_and_Properties) => makeElement(document.createElement(tag), Children_and_Properties);
+};
+function unroll_child_list(l) {
+  const fg = new DocumentFragment;
+  for (let ch of l) {
+    if (Array.isArray(ch)) {
+      fg.appendChild(unroll_child_list(ch));
+    } else {
+      if (typeof ch === "function") {
+        ch = isArrowFunc(ch) ? ch() : toFunc(ch);
+        if (typeof ch === "function") {
+          ch = isArrowFunc(ch) ? ch() : toFunc(ch);
+        }
+      }
+      if (ch instanceof HTMLElement || ch instanceof DocumentFragment) {
+        fg.appendChild(ch);
+        continue;
+      }
+      if (typeof ch === "string") {
+        fg.appendChild(document.createTextNode(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) {
+  let elements;
+  if (cases.length) {
+    for (let i = 0;i < cases.length; i++) {
+      elements = cases[i](key);
+      if (elements) {
+        break;
+      }
+    }
+  }
+  return elements;
+}
+function loop(datalist, component) {
+  return Array.isArray(datalist) ? datalist.map(component) : undefined;
+}
+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(" ✘  Cradova err:   wrong element type" + html);
+  }
+  return par;
+};
+function useState(newState, self) {
+  if (typeof self !== "function")
+    return null;
+  const Func = self;
+  Func._state_index += 1;
+  const idx = Func._state_index;
+  if (idx >= Func._state.length) {
+    Func._state[idx] = newState;
+  }
+  function setState(newState2) {
+    if (typeof newState2 === "function") {
+      newState2 = newState2(Func._state[idx]);
+    }
+    Func._state[idx] = newState2;
+    funcManager.recall(Func);
+  }
+  return [Func._state[idx], setState];
+}
+function useEffect(effect, self) {
+  funcManager._effect(self, effect);
+  if (typeof self !== "function")
+    return null;
+}
+function useRef() {
+  return new __raw_ref;
+}
+var getSignal = (func, name) => {
+  return func.pipes.get(name);
+};
+var sendSignal = (func, name, data) => {
+  const signal = func.signals.get(name);
+  if (signal) {
+    signal.publish(name, data);
+  } else {
+    console.error(" ✘  Cradova err :  Invalid signal name " + name);
+  }
+};
+var isArrowFunc = (fn) => !fn.hasOwnProperty("prototype");
+var toFunc = (func) => {
+  if (func.id)
+    return funcManager.render(func);
+  cradovaEvent.compId += 1;
+  func.id = cradovaEvent.compId;
+  func.effects = [];
+  func.rendered = false;
+  func.published = false;
+  func.preRendered = null;
+  func.reference = null;
+  func.signals = new Map;
+  func.pipes = new Map;
+  func._state = [];
+  func._state_index = 0;
+  func.effectuate = null;
+  return funcManager.render(func);
+};
+var funcManager = {
+  render(func) {
+    cradovaEvent.compId += 1;
+    func.id = cradovaEvent.compId;
+    func.effects = [];
+    func.rendered = false;
+    func._state_index = 0;
+    func._state = [];
+    const html = func.apply(func);
+    if (html instanceof HTMLElement) {
+      func.reference = html;
+      this.effector(func);
+      func.rendered = true;
+      func.published = true;
+    } else {
+      console.error(" ✘  Cradova err :  Invalid html content, got  - " + html);
+    }
+    return html;
+  },
+  _effect(func, fn) {
+    if (!func.rendered) {
+      func.effects.push(fn);
+    }
+  },
+  async effector(func) {
+    for (let i = 0;i < func.effects.length; i++) {
+      const fn = await func.effects[i].apply(func);
+      if (typeof fn === "function") {
+        CradovaEvent.after_page_is_killed.push(fn);
+      }
+    }
+    func.effects = [];
+    if (func.effectuate) {
+      func.effectuate();
+      func.effectuate = null;
+    }
+  },
+  recall(func) {
+    if (!func.rendered) {
+      func.effectuate = () => {
+        if (func.published) {
+          this.activate(func);
+        }
+      };
+    } else {
+      if (func.published) {
+        setTimeout(() => {
+          this.activate(func);
+        });
+      }
+    }
+  },
+  async activate(func) {
+    func.published = false;
+    if (!func.rendered) {
+      return;
+    }
+    func._state_index = 0;
+    const node = func.reference;
+    if (document.contains(node)) {
+      const html = func.apply(func);
+      if (html instanceof HTMLElement) {
+        node.insertAdjacentElement("beforebegin", html);
+        node.remove();
+        func.published = true;
+        func.reference = html;
+        CradovaEvent.dispatchEvent("after_comp_is_mounted");
+      } else {
+        console.error(" ✘  Cradova err :  Invalid html, got  - " + html);
+      }
+    } else {
+      func.reference = null;
+      func.rendered = false;
+    }
+  }
+};
+
+// src/primitives/dom-objects.ts
+var a = cra("a");
+var audio = cra("audio");
+var button = cra("button");
+var canvas = cra("canvas");
+var div = cra("div");
+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 header = cra("header");
+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 option = cra("option");
+var p = cra("p");
+var section = cra("section");
+var select = cra("select");
+var span = cra("span");
+var textarea = cra("textarea");
+var ul = cra("ul");
+var video = cra("video");
+var tbody = cra("table");
+var table = cra("tbody");
+var td = cra("td");
+var tr = cra("tr");
+var svg = (svg2, properties) => {
+  const span2 = document.createElement("span");
+  span2.innerHTML = svg2;
+  return makeElement(span2, properties || []);
+};
+var raw = (html) => {
+  const div2 = document.createElement("div");
+  if (Array.isArray(html)) {
+    div2.innerHTML = html[0];
+  } else {
+    if (typeof html === "string") {
+      div2.innerHTML = html;
+    }
+  }
+  const df = new DocumentFragment;
+  df.append(...Array.from(div2.children));
+  return df;
+};
+
+// src/primitives/classes.ts
+class cradovaEvent {
+  static compId = 0;
+  after_comp_is_mounted = [];
+  after_page_is_killed = [];
+  dispatchEvent(eventName) {
+    const eventListeners = this[eventName];
+    if (eventName.includes("Active")) {
+      for (let i2 = 0;i2 < eventListeners.length; i2++) {
+        eventListeners[i2]();
+      }
+      return;
+    }
+    while (eventListeners.length !== 0) {
+      eventListeners.shift()();
+    }
+  }
+}
+var CradovaEvent = new cradovaEvent;
+
+class Signal {
+  pn;
+  subs;
+  pipe;
+  constructor(initial, props) {
+    this.pipe = initial;
+    this.subs = {};
+    if (props && props.persistName) {
+      this.pn = props.persistName;
+      const key = localStorage.getItem(props.persistName);
+      if (key && key !== "undefined") {
+        this.pipe = JSON.parse(key);
+      }
+      if (typeof initial === "object") {
+        for (const key2 in initial) {
+          if (!Object.prototype.hasOwnProperty.call(this.pipe, key2)) {
+            this.pipe[key2] = initial[key2];
+          }
+        }
+      }
+    }
+  }
+  publish(eventName, data) {
+    this.pipe[eventName] = data;
+    const subs = this.subs[eventName] || [];
+    for (let i2 = 0;i2 < subs.length; i2++) {
+      const c = subs[i2];
+      c.pipes.set(eventName, this.pipe[eventName]);
+      funcManager.recall(c);
+    }
+    if (this.pn) {
+      localStorage.setItem(this.pn, JSON.stringify(this.pipe));
+    }
+  }
+  publishObject(events) {
+    const s = new Map;
+    for (const [eventName, data] of Object.entries(events)) {
+      this.pipe[eventName] = data;
+      const subs = this.subs[eventName] || [];
+      for (let i2 = 0;i2 < subs.length; i2++) {
+        const c = subs[i2];
+        c.pipes.set(eventName, this.pipe[eventName]);
+        s.set(c.id, c);
+      }
+    }
+    for (const [_, c] of s) {
+      c.recall();
+    }
+    if (this.pn) {
+      localStorage.setItem(this.pn, JSON.stringify(this.pipe));
+    }
+  }
+  subscribe(eventName, comp) {
+    if (typeof Function === "function") {
+      if (Array.isArray(eventName)) {
+        for (let i2 = 0;i2 < eventName.length; i2++) {
+          const event = eventName[i2];
+          if (this.pipe[event]) {
+            comp.pipes.set(event, this.pipe[event]);
+            comp.signals.set(event, this);
+          } else {
+            console.error(` ✘  Cradova err:  ${event} is not a valid event for this Signal`);
+          }
+          if (this.subs[event]?.find((cmp) => cmp.id === comp.id)) {
+            return;
+          }
+          if (!this.subs[event]) {
+            this.subs[event] = [comp];
+          } else {
+            this.subs[event].push(comp);
+          }
+        }
+        return;
+      }
+      if (this.pipe[eventName]) {
+        comp.pipes.set(eventName, this.pipe[eventName]);
+        comp.signals.set(eventName, this);
+      } else {
+        console.error(` ✘  Cradova err:  ${eventName} is not a valid event for this Signal`);
+      }
+      if (this.subs[eventName]?.find((cmp) => cmp.id === comp.id)) {
+        return;
+      }
+      if (!this.subs[eventName]) {
+        this.subs[eventName] = [comp];
+      } else {
+        this.subs[eventName].push(comp);
+      }
+    } else {
+      console.error(` ✘  Cradova err:  ${comp} is not a valid component`);
+    }
+  }
+  clearPersist() {
+    if (this.pn) {
+      localStorage.removeItem(this.pn);
+    }
+  }
+}
+
+class Page {
+  _name;
+  _html;
+  _template;
+  _dropped = false;
+  _snapshot;
+  _snapshot_html;
+  _deCB;
+  constructor(pageParams) {
+    const { template, name } = pageParams;
+    if (typeof template !== "function") {
+      throw new Error(` ✘  Cradova err:  template function for the page is not a function`);
+    }
+    this._html = template;
+    this._name = name || document.title;
+    this._snapshot = pageParams.snapshotIsolation || false;
+  }
+  async _takeSnapShot() {
+    if (RouterBox.doc.dataset["snapshot"] === "true")
+      return;
+    try {
+      const response = await fetch(location.href);
+      if (!response.ok)
+        throw new Error("Failed to fetch the page");
+      const html = await response.text();
+      const parser = new DOMParser;
+      const doc = parser.parseFromString(html, "text/html");
+      doc.title = this._name;
+      const wrapper = doc.querySelector('[data-wrapper="app"]');
+      if (wrapper) {
+        wrapper.setAttribute("data-snapshot", "true");
+        wrapper.innerHTML = this._snapshot_html;
+      } else {
+        console.error("Wrapper or template is not found");
+        return;
+      }
+      const snapshot = doc.documentElement.outerHTML;
+      await fetch(location.origin, {
+        body: snapshot,
+        method: "POST",
+        headers: {
+          "Content-Type": "text/html",
+          "cradova-snapshot": location.href.slice(location.origin.length)
+        }
+      });
+    } catch (error) {
+      console.error("Snapshot error:", error);
+    }
+    this._snapshot_html = undefined;
+  }
+  set onDeactivate(cb) {
+    this._deCB = cb;
+  }
+  drop(state) {
+    if (typeof state === "boolean") {
+      this._dropped = state;
+      return;
+    } else
+      return this._dropped;
+  }
+  async _activate() {
+    if (this._dropped) {
+      history.go(-1);
+      return;
+    }
+    if (this._name)
+      document.title = this._name;
+    this._template = div({ id: "page" }, this._html);
+    RouterBox.doc.innerHTML = "";
+    if (this._snapshot)
+      this._snapshot_html = this._template.outerHTML;
+    RouterBox.doc.appendChild(this._template);
+    CradovaEvent.dispatchEvent("after_comp_is_mounted");
+    window.scrollTo({
+      top: 0,
+      left: 0,
+      behavior: "instant"
+    });
+    CradovaEvent.dispatchEvent("after_page_is_killed");
+    if (this._snapshot)
+      this._takeSnapShot();
+  }
+}
+
+class RouterBoxClass {
+  doc = null;
+  lastNavigatedRouteController;
+  nextRouteController;
+  lastNavigatedRoute;
+  pageShow = null;
+  pageHide = null;
+  errorHandler;
+  loadingPage = null;
+  pageData = { params: {} };
+  routes = {};
+  paused = false;
+  route(path, page) {
+    if (!page) {
+      console.error(" ✘  Cradova err:  not a valid page  ", page);
+    }
+    return this.routes[path] = page;
+  }
+  async router(_e, _force) {
+    const url = window.location.href;
+    let route, params;
+    if (this.paused) {
+      window.location.hash = "paused";
+      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.loadingPage instanceof Page) {
+            await this.loadingPage._activate();
+          }
+          route = await route();
+        }
+        if (route?.default)
+          route = route.default;
+        if (!route) {
+          if (this.lastNavigatedRoute) {
+            history.pushState({}, url, this.lastNavigatedRoute);
+          }
+          return;
+        }
+        if (params) {
+          this.pageData.params = params;
+        }
+        await route._activate();
+        this.lastNavigatedRouteController && this.lastNavigatedRouteController._deCB?.();
+        this.lastNavigatedRoute = url;
+        this.lastNavigatedRouteController = route;
+      } catch (error) {
+        if (typeof this.errorHandler === "function") {
+          this.errorHandler(error, url);
+        } else {
+          console.error(error);
+        }
+      }
+    } else {
+      if (this.routes["*"]) {
+        await this.routes["*"]._activate();
+      }
+    }
+  }
+  checker(url) {
+    if (url[0] !== "/") {
+      url = url.slice(url.indexOf("/", 8));
+    }
+    if (this.routes[url]) {
+      return [this.routes[url], { path: url }];
+    }
+    if (url.includes("?")) {
+      let search;
+      const params = {};
+      [url, search] = url.split("?");
+      new URLSearchParams(search).forEach((val, key) => {
+        params[key] = val;
+      });
+      if (this.routes[url]) {
+        return [this.routes[url], params];
+      }
+    }
+    for (const path in this.routes) {
+      if (path.includes(":")) {
+        const urlFixtures = url.split("/");
+        const pathFixtures = path.split("/");
+        if (url.endsWith("/")) {
+          urlFixtures.pop();
+        }
+        let fixturesX = 0;
+        let fixturesY = 0;
+        if (pathFixtures.length === urlFixtures.length) {
+          for (let i2 = 0;i2 < pathFixtures.length; i2++) {
+            if (pathFixtures[i2].includes(":")) {
+              fixturesY++;
+              continue;
+            }
+            if (urlFixtures[i2] === pathFixtures[i2]) {
+              fixturesX++;
+            }
+          }
+          if (fixturesX + fixturesY === pathFixtures.length) {
+            const routesParams = {};
+            for (let i2 = 0;i2 < pathFixtures.length; i2++) {
+              if (pathFixtures[i2].includes(":")) {
+                routesParams[pathFixtures[i2].split(":")[1]] = urlFixtures[i2];
+              }
+            }
+            return [this.routes[path], routesParams];
+          }
+        }
+      }
+      if (path.includes("*")) {
+        const p2 = path.slice(0, -1);
+        if (url.startsWith(p2)) {
+          return [this.routes[path], { extraPath: url.slice(p2.length) }];
+        }
+      }
+    }
+    return [];
+  }
+}
+var RouterBox = new RouterBoxClass;
+
+class Router {
+  static BrowserRoutes(obj) {
+    for (const path in obj) {
+      const page = obj[path];
+      if (typeof page === "object" && typeof page.then === "function" || typeof page === "function") {
+        RouterBox.routes[path] = async () => {
+          const paged = typeof page === "function" ? await page() : await page;
+          return RouterBox.route(path, paged);
+        };
+      } else {
+        RouterBox.route(path, page);
+      }
+    }
+    Router._mount();
+  }
+  static pauseNavigation() {
+    RouterBox["paused"] = true;
+    window.location.hash = "paused";
+  }
+  static resumeNavigation() {
+    RouterBox["paused"] = false;
+    window.location.replace(window.location.pathname + window.location.search);
+    history.go(-1);
+  }
+  static navigate(href, data) {
+    if (typeof href !== "string") {
+      console.error(" ✘  Cradova err:  href must be a defined path but got " + href + " instead");
+    }
+    let route = null, params;
+    if (href.includes(".")) {
+      window.location.href = href;
+    } else {
+      [route, params] = RouterBox.checker(href);
+      if (route) {
+        RouterBox.nextRouteController = route;
+        window.history.pushState({}, "", href);
+      }
+      RouterBox.pageData.params = params;
+      RouterBox.pageData.data = data;
+      RouterBox.router(null);
+    }
+  }
+  static setLoadingPage(page) {
+    if (page instanceof Page) {
+      RouterBox.loadingPage = page;
+    } else {
+      throw new Error(" ✘  Cradova err:  Loading Page should be a cradova page class");
+    }
+  }
+  static get PageData() {
+    return RouterBox.pageData;
+  }
+  static addErrorHandler(callback) {
+    if (typeof callback === "function") {
+      RouterBox["errorHandler"] = callback;
+    } else {
+      throw new Error(" ✘  Cradova err:  callback for error event is not a function");
+    }
+  }
+  static _mount() {
+    let doc = document.querySelector("[data-wrapper=app]");
+    if (doc) {
+      RouterBox.doc = doc;
+    } else {
+      throw new Error(`✘  Cradova err: please add '<div data-wrapper="app"></div>' to the body of your index.html file `);
+    }
+    window.addEventListener("pageshow", () => RouterBox.router());
+    window.addEventListener("popstate", (_e) => {
+      _e.preventDefault();
+      RouterBox.router();
+    });
+  }
+}
+
+class __raw_ref {
+  tree = {};
+  bindAs(name) {
+    return [this, name];
+  }
+  elem(name) {
+    return this.tree[name];
+  }
+  _append(name, Element) {
+    this.tree[name] = Element;
+  }
+}
+export {
+  video,
+  useState,
+  useRef,
+  useEffect,
+  ul,
+  tr,
+  textarea,
+  td,
+  tbody,
+  table,
+  svg,
+  span,
+  sendSignal,
+  select,
+  section,
+  raw,
+  p,
+  option,
+  ol,
+  nav,
+  makeElement,
+  main,
+  loop,
+  li,
+  label,
+  input,
+  img,
+  iframe,
+  i,
+  header,
+  h6,
+  h5,
+  h4,
+  h3,
+  h2,
+  h1,
+  getSignal,
+  funcManager,
+  frag,
+  form,
+  footer,
+  div,
+  cradovaEvent,
+  cra,
+  canvas,
+  button,
+  audio,
+  a,
+  __raw_ref,
+  Signal,
+  Router,
+  Page,
+  CradovaEvent,
+  $switch,
+  $ifelse,
+  $if,
+  $case
+};

package/dist/primitives/classes.d.ts

@@ -1,73 +1,28 @@
-import { type browserPageType, type CradovaPageType } from "./types.js";
+import type { browserPageType, CradovaPageType } from "./types.js";
 /**
  * Cradova event
  */
-declare class cradovaEvent {
+export declare class cradovaEvent {
     static compId: number;
     /**
-     * the events runs only once and removed.
-     * these event are call and removed once when when a comp is rendered to the dom
+     * the events runs only once and removed to avoid duplication when added on the next rendering
+     * these event are call and removed once when when a Function is rendered to the dom
      * @param callback
      */
-    afterMount: Function[];
-    /**
-     * the events runs many times.
-     * these event are called before a comp is rendered to the dom
-     * @param callback
-     */
-    beforeMountActive: Function[];
+    after_comp_is_mounted: Function[];
     /**
      * the events runs once after comps unmounts.
-     * these event are called before a comp is rendered to the dom
+     * these event are called before a Function is rendered to the dom
      * @param callback
      */
-    afterDeactivate: Function[];
+    after_page_is_killed: Function[];
     /**
      * Dispatch any event
      * @param eventName
      */
-    dispatchEvent(eventName: "beforeMountActive" | "afterMount" | "afterDeactivate"): void;
+    dispatchEvent(eventName: "after_comp_is_mounted" | "after_page_is_killed"): void;
 }
 export declare const CradovaEvent: cradovaEvent;
-/**
- * Cradova Comp
- * -------
- * create dynamic components
- */
-export declare class Comp<Props extends Record<string, any> = any> {
-    id: number;
-    private component;
-    private effects;
-    private effectuate;
-    private rendered;
-    private published;
-    private preRendered;
-    private reference;
-    subData: Props | null;
-    _state: Props[];
-    _state_index: number;
-    constructor(component: (this: Comp<Props>, data?: Props) => HTMLElement);
-    preRender(props: Props): void;
-    /**
-     * Cradova Comp
-     * ---
-     * returns html with cradova reference
-     * @param data
-     * @returns () => HTMLElement
-     */
-    render(props?: Props): HTMLElement;
-    _effect(fn: () => Promise<void> | void): void;
-    private effector;
-    /**
-     * Cradova Comp
-     * ---
-     * update comp component with new data and update the dom.
-     * @param data
-     * @returns
-     */
-    recall(props?: Props): void;
-    private activate;
-}
 /**
  *  Cradova Signal
  * ----
@@ -93,14 +48,23 @@ export declare class Signal<Type extends Record<string, any>> {
      * @param data - data for the action
      */
     publish<T extends keyof Type>(eventName: T, data: Type[T]): void;
+    /**
+     *  Cradova Signal
+     * ----
+     *  fires an action if available
+     * @param key - string key of the action
+     * @param data - data for the action
+     */
+    publishObject<T extends keyof Type>(events: Record<T, Type[T]>): void;
     /**
      *  Cradova Signal
      * ----
      *  subscribe to an event
      *
-     * @param Comp component to bind to.
+     * @param name of event.
+     * @param Func component to bind to.
      */
-    subscribe<T extends keyof Type>(eventName: T, comp: Comp): void;
+    subscribe<T extends keyof Type>(eventName: T | T[], comp: any): void;
     /**
      *  Cradova Signal
      * ----
@@ -124,7 +88,7 @@ export declare class Page {
      * this should be a cradova page component
      */
     _html: (this: Page) => HTMLElement;
-    private _template;
+    _template?: HTMLElement;
     private _dropped;
     private _snapshot;
     private _snapshot_html?;
@@ -203,4 +167,27 @@ export declare class Router {
     static addErrorHandler(callback: (err?: unknown, pagePath?: string) => void): void;
     static _mount(): void;
 }
-export {};
+/**
+ * Cradova
+ * ---
+ * make reference to dom elements
+ */
+export declare class __raw_ref {
+    tree: Record<string, any>;
+    /**
+     * Bind a DOM element to a reference name.
+     * @param name - The name to reference the DOM element by.
+     */
+    bindAs(name: string): __raw_ref;
+    /**
+     * Retrieve a referenced DOM element.
+     * @param name - The name of the referenced DOM element.
+     */
+    elem<ElementType extends HTMLElement = HTMLElement>(name: string): ElementType | undefined;
+    /**
+     * Append a DOM element to the reference, overwriting any existing reference.
+     * @param name - The name to reference the DOM element by.
+     * @param element - The DOM element to reference.
+     */
+    _append(name: string, Element: HTMLElement): void;
+}

package/dist/primitives/dom-objects.d.ts

@@ -22,15 +22,17 @@ export declare const li: (...Children_and_Properties: VJS_params_TYPE<HTMLLIElem
 export declare const main: (...Children_and_Properties: VJS_params_TYPE<HTMLElement>) => HTMLElement;
 export declare const nav: (...Children_and_Properties: VJS_params_TYPE<HTMLElement>) => HTMLElement;
 export declare const ol: (...Children_and_Properties: VJS_params_TYPE<HTMLOListElement>) => HTMLOListElement;
-export declare const optgroup: (...Children_and_Properties: VJS_params_TYPE<HTMLOptGroupElement>) => HTMLOptGroupElement;
 export declare const option: (...Children_and_Properties: VJS_params_TYPE<HTMLOptionElement>) => HTMLOptionElement;
 export declare const p: (...Children_and_Properties: VJS_params_TYPE<HTMLParagraphElement>) => HTMLParagraphElement;
 export declare const section: (...Children_and_Properties: VJS_params_TYPE<HTMLElement>) => HTMLElement;
 export declare const select: (...Children_and_Properties: VJS_params_TYPE<HTMLSelectElement>) => HTMLSelectElement;
-export declare const source: (...Children_and_Properties: VJS_params_TYPE<HTMLSourceElement>) => HTMLSourceElement;
 export declare const span: (...Children_and_Properties: VJS_params_TYPE<HTMLSpanElement>) => HTMLSpanElement;
 export declare const textarea: (...Children_and_Properties: VJS_params_TYPE<HTMLTextAreaElement>) => HTMLTextAreaElement;
 export declare const ul: (...Children_and_Properties: VJS_params_TYPE<HTMLUListElement>) => HTMLUListElement;
 export declare const video: (...Children_and_Properties: VJS_params_TYPE<HTMLVideoElement>) => HTMLVideoElement;
+export declare const tbody: (...Children_and_Properties: VJS_params_TYPE<HTMLTableElement>) => HTMLTableElement;
+export declare const table: (...Children_and_Properties: VJS_params_TYPE<HTMLTableSectionElement>) => HTMLTableSectionElement;
+export declare const td: (...Children_and_Properties: VJS_params_TYPE<HTMLTableCellElement>) => HTMLTableCellElement;
+export declare const tr: (...Children_and_Properties: VJS_params_TYPE<HTMLTableColElement>) => HTMLTableColElement;
 export declare const svg: (svg: string, properties?: VJS_params_TYPE<HTMLSpanElement>) => HTMLSpanElement;
 export declare const raw: (html: string | TemplateStringsArray) => DocumentFragment;

package/dist/primitives/func.d.ts

@@ -0,0 +1,8 @@
+import type { CradovaFunc } from "./types";
+export declare const funcManager: {
+    render(func: CradovaFunc): HTMLElement;
+    _effect(func: CradovaFunc, fn: () => Promise<void> | void): void;
+    effector(func: CradovaFunc): Promise<void>;
+    recall(func: CradovaFunc): void;
+    activate(func: CradovaFunc): Promise<void>;
+};

package/dist/primitives/functions.d.ts

@@ -1,36 +1,7 @@
-import { type VJS_params_TYPE } from "./types.js";
-import { Comp } from "./classes.js";
-/**
- * Cradova
- * ---
- * make reference to dom elements
- */
-declare class __raw_ref {
-    tree: Record<string, any>;
-    /**
-     * Bind a DOM element to a reference name.
-     * @param name - The name to reference the DOM element by.
-     */
-    bindAs(name: string): __raw_ref;
-    /**
-     * Retrieve a referenced DOM element.
-     * @param name - The name of the referenced DOM element.
-     */
-    elem<ElementType extends HTMLElement = HTMLElement>(name: string): ElementType | undefined;
-    /**
-     * Swap referenced DOM element.
-     */
-    swap(name1: string, name2: string): void;
-    /**
-     * Append a DOM element to the reference, overwriting any existing reference.
-     * @param name - The name to reference the DOM element by.
-     * @param element - The DOM element to reference.
-     */
-    _append(name: string, Element: HTMLElement): void;
-}
+import type { VJS_params_TYPE, CradovaFunc } from "./types.js";
+import { __raw_ref } from "./classes.js";
 export declare const makeElement: <E extends HTMLElement>(element: E & HTMLElement, ElementChildrenAndPropertyList: VJS_params_TYPE<E>) => E;
 export declare const cra: <E extends HTMLElement>(tag: string) => (...Children_and_Properties: VJS_params_TYPE<E>) => E;
-export declare function Rhoda(l: VJS_params_TYPE<HTMLElement>): DocumentFragment;
 /**
  * @param {expression} condition
  * @param {function} elements[]
@@ -52,18 +23,18 @@ export declare const frag: (children: VJS_params_TYPE<HTMLElement>) => DocumentF
  * ---
  *  Allows functional components to manage state by providing a state value and a function to update it.
  * @param initialValue
- * @param Comp
+ * @param Func
  * @returns [state, setState]
  */
-export declare function useState<S = unknown>(newState: S, Comp: Comp<any>): [S, (newState: S | ((preS: S) => S)) => void];
+export declare function useState<S = unknown>(newState: S, self: any): [S, (newState: S | ((preS: S) => S)) => void];
 /**
  * Cradova
  * ---
-Allows side effects to be performed in functional components (Comps), such as fetching data or subscribing to events.
+Allows side effects to be performed in functional components, such as fetching data or subscribing to events.
  * @param effect
  * @returns
  */
-export declare function useEffect(effect: () => void, Comp: Comp): void;
+export declare function useEffect(effect: () => void, self: any): any;
 /**
  * Cradova
  * ---
@@ -71,4 +42,13 @@ Returns a mutable reference object of dom elements.
  * @returns reference
  */
 export declare function useRef(): __raw_ref;
+export declare const getSignal: (func: CradovaFunc, name: string) => any;
+export declare const sendSignal: (func: CradovaFunc, name: string, data: any) => void;
+export declare const funcManager: {
+    render(func: CradovaFunc): HTMLElement;
+    _effect(func: CradovaFunc, fn: () => Promise<void> | void): void;
+    effector(func: CradovaFunc): Promise<void>;
+    recall(func: CradovaFunc): void;
+    activate(func: CradovaFunc): Promise<void>;
+};
 export {};

package/dist/primitives/types.d.ts

@@ -1,5 +1,5 @@
 import * as CSS from "csstype";
-import { Comp, Page } from "./classes.js";
+import { __raw_ref, Page, Signal } from "./classes.js";
 type DataAttributes = {
     [key: `data-${string}`]: string;
 };
@@ -24,13 +24,13 @@ type Attributes = {
     required?: string;
     frameBorder?: string;
     placeholder?: string;
-    ref?: [any, string];
+    ref?: __raw_ref;
     autocomplete?: string;
     style?: CSS.Properties;
     recall?: (P: any) => void;
     onmount?: (this: HTMLElement & Attributes) => void;
 };
-export type VJS_params_TYPE<E extends HTMLElement> = (Comp | Comp[] | string | undefined | HTMLElement | HTMLElement[] | DocumentFragment | DocumentFragment[] | Attributes | Partial<Attributes> | (() => HTMLElement) | Partial<E> | Record<string, (this: E) => void> | Partial<DataAttributes> | Partial<AriaAttributes> | CSS.Properties<string | number>)[];
+export type VJS_params_TYPE<E extends HTMLElement> = (string | undefined | HTMLElement | HTMLElement[] | DocumentFragment | DocumentFragment[] | Attributes | Partial<Attributes> | (() => HTMLElement) | Partial<E> | Record<string, (this: E) => void> | Partial<DataAttributes> | Partial<AriaAttributes> | CSS.Properties<string | number>)[];
 export interface RouterRouteObject {
     _html: ((this: Page, data?: unknown) => HTMLElement | DocumentFragment) | HTMLElement | DocumentFragment;
     _delegatedRoutes: number | boolean;
@@ -78,4 +78,17 @@ export type CradovaPageType = {
     snapshotIsolation?: boolean;
 };
 export type browserPageType<importType = Page> = importType | Promise<importType> | (() => Promise<importType>);
+export type CradovaFunc = {
+    (): HTMLElement;
+    id?: number;
+    rendered: boolean;
+    published: boolean;
+    reference: HTMLElement | null;
+    signals: Map<string, Signal<any>>;
+    pipes: Map<string, any>;
+    _state: unknown[];
+    _state_index: number;
+    effects: (() => Promise<void> | void)[];
+    effectuate: ((this: any) => void) | null;
+};
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cradova",
-  "version": "3.5.7",
+  "version": "3.6.0",
   "description": "Build Powerful ⚡ Web Apps with Ease",
   "main": "dist/index.js",
   "type": "module",
@@ -21,7 +21,6 @@
     "PWA",
     "webapp",
     "SPA",
-    "Comps",
     "Signal",
     "VJS",
     "vjs specification",