cradova 3.5.8 → 3.6.1

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,819 @@
-class G{static compId=0;afterMount=[];beforeMountActive=[];afterDeactivate=[];dispatchEvent(H){let T=this[H];if(H.includes("Active")){for(let L=0;L<T.length;L++)T[L]();return}while(T.length!==0)T.shift()()}}var J=new G;class x{id=0;component;effects=[];effectuate=null;rendered=!1;published=!1;preRendered=null;reference=null;subData=null;publish=null;_state=[];_state_index=0;constructor(H){this.component=H.bind(this)}preRender(){this.preRendered=this.render()}render(){if(G.compId+=1,this.id=G.compId,this.effects=[],this.rendered=!1,!this.preRendered){this._state_index=0,this._state=[];let H=this.component();if(H instanceof HTMLElement)this.reference=H,this.effector.apply(this),this.rendered=!0,this.published=!0;else console.error(" ✘  Cradova err :  Invalid html content, got  - "+H);return H}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 T=await this.effects[H].apply(this);if(typeof T==="function")J.afterDeactivate.push(T)}if(this.effects=[],this.effectuate)this.effectuate(),this.effectuate=null}recall(){if(!this.rendered)this.effectuate=()=>{if(this.published)this.activate()};else if(this.published)setTimeout(()=>{this.activate()})}async activate(){if(this.published=!1,!this.rendered)return;this._state_index=0;let H=this.reference;if(document.contains(H)){let T=this.component();if(T instanceof HTMLElement)H.insertAdjacentElement("beforebegin",T),H.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 W{pn;subs;pipe;constructor(H,T){if(this.pipe=H,this.subs={},T&&T.persistName){this.pn=T.persistName;let L=localStorage.getItem(T.persistName);if(L&&L!=="undefined")this.pipe=JSON.parse(L);if(typeof H==="object"){for(let M in H)if(!Object.prototype.hasOwnProperty.call(this.pipe,M))this.pipe[M]=H[M]}}}publish(H,T){this.pipe[H]=T;let L=this.subs[H]||[];for(let M=0;M<L.length;M++){let I=L[M];I.subData=T,I.recall()}if(this.pn)localStorage.setItem(this.pn,JSON.stringify(this.pipe))}subscribe(H,T){if(T instanceof x){if(this.subs[H]?.find((L)=>L.id===T.id))return;if(!this.subs[H])this.subs[H]=[T];else this.subs[H].push(T);if(this.pipe[H])T.subData=this.pipe[H],T.publish=(L)=>{this.publish(H,L)}}}clearPersist(){if(this.pn)localStorage.removeItem(this.pn)}}class U{_name;_html;_template=document.createElement("div");_dropped=!1;_snapshot;_snapshot_html;_deCB;constructor(H){let{template:T,name:L}=H;this._html=T,this._name=L||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 T=await H.text(),M=new DOMParser().parseFromString(T,"text/html");M.title=this._name;let I=M.querySelector('[data-wrapper="app"]');if(I)I.setAttribute("data-snapshot","true"),I.innerHTML=this._snapshot_html;else{console.error("Wrapper or template is not found");return}let V=M.documentElement.outerHTML;await fetch(`${location.origin}`,{body:V,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 z{doc=null;lastNavigatedRouteController;nextRouteController;lastNavigatedRoute;pageShow=null;pageHide=null;errorHandler;loadingPage=null;pageData={params:{}};routes={};paused=!1;route(H,T){if(!T)console.error(" ✘  Cradova err:  not a valid page  ",T);return this.routes[H]=T}async router(H,T){let L=window.location.href,M,I;if(this.paused){window.location.hash="paused";return}if(this.nextRouteController)M=this.nextRouteController,this.nextRouteController=void 0;else[M,I]=this.checker(L);if(typeof M!=="undefined")try{if(typeof M==="function"){if(this.loadingPage instanceof U)await this.loadingPage._activate();M=await M()}if(M?.default)M=M.default;if(!M){if(this.lastNavigatedRoute)history.pushState({},L,this.lastNavigatedRoute);return}if(I)this.pageData.params=I;await M._activate(),this.lastNavigatedRouteController&&this.lastNavigatedRouteController._deCB?.(),this.lastNavigatedRoute=L,this.lastNavigatedRouteController=M}catch(V){if(typeof this.errorHandler==="function")this.errorHandler(V,L);else console.error(V)}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 T,L={};if([H,T]=H.split("?"),new URLSearchParams(T).forEach((M,I)=>{L[I]=M}),this.routes[H])return[this.routes[H],L]}for(let T in this.routes){if(T.includes(":")){let L=H.split("/"),M=T.split("/");if(H.endsWith("/"))L.pop();let I=0,V=0;if(M.length===L.length){for(let D=0;D<M.length;D++){if(M[D].includes(":")){V++;continue}if(L[D]===M[D])I++}if(I+V===M.length){let D={};for(let O=0;O<M.length;O++)if(M[O].includes(":"))D[M[O].split(":")[1]]=L[O];return[this.routes[T],D]}}}if(T.includes("*")){let L=T.slice(0,-1);if(H.startsWith(L))return[this.routes[T],{extraPath:H.slice(L.length)}]}}return[]}}var A=new z;class S{static BrowserRoutes(H){for(let T in H){let L=H[T];if(typeof L==="object"&&typeof L.then==="function"||typeof L==="function")A.routes[T]=async()=>{let M=typeof L==="function"?await L():await L;return A.route(T,M)};else A.route(T,L)}S._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,T){if(typeof H!=="string")console.error(" ✘  Cradova err:  href must be a defined path but got "+H+" instead");let L=null,M;if(H.includes("."))window.location.href=H;else{if([L,M]=A.checker(H),L)A.nextRouteController=L,window.history.pushState({},"",H);A.pageData.params=M,A.pageData.data=T,A.router(null)}}static setLoadingPage(H){if(H instanceof U)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",(T)=>{T.preventDefault(),A.router()})}}class Y{tree={};bindAs(H){return[this,H]}elem(H){let T=this.tree[H];if(document.contains(T))return T;this.tree[H]=void 0}swap(H,T){[this.tree[H],this.tree[T]]=[this.tree[T],this.tree[H]]}_append(H,T){this.tree[H]=T}}var q=(H,T)=>{let L={},M=void 0;if(T.length!==0)for(let I=0;I<T.length;I++){let V=T[I];if(typeof V==="function")V=V();if(V instanceof x)V=V.render();if(V instanceof HTMLElement||V instanceof DocumentFragment){H.appendChild(V);continue}if(Array.isArray(V)){H.appendChild(K(V));continue}if(typeof V==="string"){M=V;continue}if(typeof V==="object"){Object.assign(L,V);continue}}else return H;if(typeof L==="object"&&H)for(let[I,V]of Object.entries(L)){if(I==="style"&&typeof V==="object"){Object.assign(H.style,V);continue}if(I==="href"){let D=V||"";if(!D.includes("://"))H.addEventListener("click",(O)=>{if(O.preventDefault(),S.navigate(H.href),D.includes("#")){let Q=D.split("#").at(-1);document.getElementById("#"+Q)?.scrollIntoView()}});H.setAttribute(I,V);continue}if(I==="onmount"){J.afterMount.push(()=>{typeof L.onmount==="function"&&L.onmount.apply(H)});continue}if(I.includes("data-")||I.includes("aria-")){H.setAttribute(I,V);continue}if(Array.isArray(V)){if(I=="ref"&&V[0]instanceof Y){V[0]._append(V[1],H);continue}}H[I]=V}if(M!==void 0)H.appendChild(document.createTextNode(M));return H},E=(H)=>{return(...T)=>q(document.createElement(H),T)};function K(H){let T=new DocumentFragment;for(let L of H)if(Array.isArray(L))T.appendChild(K(L));else{if(L instanceof x)L=L.render();if(typeof L==="function"){if(L=L(),typeof L==="function")L=L()}if(L instanceof HTMLElement||L instanceof DocumentFragment){T.appendChild(L);continue}if(typeof L==="string")T.appendChild(document.createTextNode(L))}return T}function b(H,...T){if(H)return T}function X(H,T,L){if(H)return T;return L}function y(H,...T){return(L)=>{if(L===H)return T;return}}function j(H,...T){let L;if(T.length){for(let M=0;M<T.length;M++)if(L=T[M](H),L)break}return L}function g(H,T){return Array.isArray(H)?H.map(T):void 0}var F=function(H){let T=document.createDocumentFragment();for(let L=0;L<H.length;L++){let M=H[L];if(typeof M==="function")M=M();if(M instanceof HTMLElement||M instanceof DocumentFragment){T.appendChild(M);continue}if(M instanceof String){T.appendChild(document.createTextNode(M));continue}console.error(" ✘  Cradova err:   wrong element type"+M)}return T};function w(H,T){T._state_index+=1;let L=T._state_index;if(L>=T._state.length)T._state[L]=H;function M(I){if(typeof I==="function")I=I(T._state[L]);T._state[L]=I,T.recall()}return[T._state[L],M]}function n(H,T){T._effect(H)}function _(){return new Y}var c=E("a"),B=E("audio"),N=E("button"),f=E("canvas"),s=E("div"),R=E("footer"),C=E("form"),o=E("h1"),d=E("h2"),v=E("h3"),i=E("h4"),h=E("h5"),p=E("h6"),t=E("header"),u=E("i"),m=E("iframe"),l=E("img"),r=E("input"),a=E("label"),e=E("li"),HH=E("main"),TH=E("nav"),LH=E("ol"),MH=E("optgroup"),EH=E("option"),IH=E("p"),VH=E("section"),AH=E("select"),DH=E("source"),OH=E("span"),JH=E("textarea"),xH=E("ul"),GH=E("video"),SH=E("table"),UH=E("tbody"),YH=E("td"),qH=E("tr"),zH=(H,T)=>{let L=document.createElement("span");return L.innerHTML=H,q(L,T||[])},KH=(H)=>{let T=document.createElement("div");if(Array.isArray(H))T.innerHTML=H[0];else if(typeof H==="string")T.innerHTML=H;let L=new DocumentFragment;return L.append(...Array.from(T.children)),L};export{GH as video,w as useState,_ as useRef,n as useEffect,xH as ul,qH as tr,JH as textarea,YH as td,SH as tbody,UH as table,zH as svg,OH as span,DH as source,AH as select,VH as section,KH as raw,IH as p,EH as option,MH as optgroup,LH as ol,TH as nav,q as makeElement,HH as main,g as loop,e as li,a as label,r as input,l as img,m as iframe,u as i,t as header,p as h6,h as h5,i as h4,v as h3,d as h2,o as h1,F as frag,C as form,R as footer,s as div,E as cra,f as canvas,N as button,B as audio,c as a,W as Signal,S as Router,K as Rhoda,U as Page,J as CradovaEvent,x as Comp,j as $switch,X as $ifelse,b 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 DEFAULT_STATE = {
+  rendered: false,
+  published: false,
+  preRendered: null,
+  reference: null,
+  effectuate: null,
+  _state_index: 0
+};
+var toFunc = (func) => {
+  if (func.id)
+    return funcManager.render(func);
+  cradovaEvent.compId += 1;
+  func.id = cradovaEvent.compId;
+  Object.assign(func, DEFAULT_STATE);
+  func.signals = new Map;
+  func.pipes = new Map;
+  func.effects = [];
+  func._state = [];
+  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,74 +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;
-    publish: ((data: any) => void) | null;
-    _state: Props[];
-    _state_index: number;
-    constructor(component: (this: Comp<Props>) => HTMLElement);
-    preRender(): void;
-    /**
-     * Cradova Comp
-     * ---
-     * returns html with cradova reference
-     * @param data
-     * @returns () => HTMLElement
-     */
-    render(): 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(): void;
-    private activate;
-}
 /**
  *  Cradova Signal
  * ----
@@ -94,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
      * ----
@@ -125,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?;
@@ -204,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,12 +22,10 @@ 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;

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.8",
+  "version": "3.6.1",
   "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",