cradova 2.2.3 → 2.3.0

package/README.md

@@ -49,11 +49,12 @@ Cradova follows the [VJS specification](https://github.com/fridaycandour/cradova
 
 Cradova is aimed to be fast and simple with and fewer abstractions and yet easily composable.
 
-Cradova does't rely on visual DOM or diff algorithms to manage the DOM, instead, State management is done more elegantly with a simple predictive model, manually and easily with all the speed.
+Cradova is not built on visual DOM or diff algorithms.
+Instead, State management is done more elegantly with a simple predictive model, simple and easy with all the speed.
 
-### is this a big benefit?
+## Is this a big benefit?
 
-Undoubtedly, this provides a significant advantage. You can experience it firsthand and decide for yourself.
+Undoubtedly, this provides a significant advantage. You can experience it firsthand and decide.
 
 Cradova has already been utilized in multiple production projects, and we will continuously update this page to showcase our advancements as we keep improving.
 
@@ -83,12 +84,10 @@ npm i cradova
 
 Many aspects of Cradova are not reflected in the following example. More functionality will be entailed in future docs.
 
-Here's an example of create a basic component in Cradova:
+## A basic component in Cradova:
 
 ```js
-// cradova v2.0.0 comes with all html tags prebuilt and fully typed
-// this gives your app more performance gain.
-import _, { h1 } from "cradova";
+import { div, h1 } from "cradova";
 
 function Hello(name) {
   return h1("Hello " + name, {
@@ -99,88 +98,56 @@ function Hello(name) {
   });
 }
 
-// document fragment empty cradova call _()
-
-const html = _(Hello("peter"), Hello("joe"));
+const html = div(Hello("peter"), Hello("joe"));
 
 document.body.append(html);
 ```
 
-```js
-// regular example
-import _ from "cradova";
-
-function Hello(name) {
-  return _("h1", "Hello " + name);
-}
-
-const html = _(Hello("peter"), Hello("joe"));
-
-document.body.append(html);
-```
+## working with state:
 
-## Using Screen
+this a collection of basic examples
+you can choose any that best suite what problem you want to solve
 
 ```js
-import _, { Screen, Router } from "cradova";
+import _, {
+  button,
+  createSignal,
+  Ref,
+  reference,
+  h1,
+  br,
+  div,
+} from "../dist/index.js";
 
-function HelloMessage(name) {
-  // an effect run once after screen renders
-  this.effect(() => {
-   const name = new Promise((res) => {
-      res("friday");
-    });
-    this.updateState(await name)
+function Hello(name) {
+  return h1("Hello " + name, {
+    className: "title",
+    style: {
+      color: "grey",
+    },
   });
-  // effects can be used to make api calls needed for the page
-  return _("div", "Hello  " + name);
 }
 
+const html = div(Hello("peter"), Hello("joe"));
+
+// reference (not state)
+
+function typingExample() {
+  const re = new reference();
+  return _(
+    "div",
+    input({
+      oninput() {
+        re.text.innerText = this.value;
+      },
+      placeholder: "typing simulation",
+    }),
+    p(" no thing typed yet!", { reference: re.bindAs("text") })
+  );
+}
 
-/*
-
-when using router and screens
-
-cradova will create a div with data-cra-id=cradova-app-wrapper
-
-if it already exist cradova will use it instead
-
-so if you want to use your own mount point then create a div with data-cra-id="cradova-app-wrapper"
-
-*/
-
-const home = new Screen({
-  name: "hello page", // page title
-  template: HelloMessage,
-  ...
-});
-
-Router.route("/", home);
-
-// navigates to that page
-// Router.navigate("/home", data, force);
-// get the page ready in the background
-// Router.packageScreen("/home");
-// get route params for this page
-// Router.getParams();
-
-```
-
-## State management
-
-```js
-
-
- // element can have this.updateState when the shouldUpdate props is true
-
-// Ref components
-
-// state can be managed from a store when using createSignal or simpleStores
-// this method is not yet documented
-
-import _, { Ref } from "cradova";
-
-// simple count
+// setting shouldUpdate to true
+// gives you this.updateState binding
 
 function counter() {
   let num = 0;
@@ -193,32 +160,42 @@ function counter() {
   });
 }
 
+// Another example with data- attribute
+
 function dataCounter() {
   return _("h1| 0", {
     shouldUpdate: true,
     "data-num": "0",
     onclick() {
-     const num = Number(this.getAttribute("data-num")) + 1;
-      this.updateState({ text: num, $num: num });
+      const num = this.getAttribute("data-num") * 1 + 1;
+      this.updateState({ text: num, "data-num": num });
     },
   });
 }
 
-function HelloMessage(name = "no name") {
-  return _("div.foo#bar", {
+// hello message
+
+function HelloMessage() {
+  return div({
     shouldUpdate: true,
-    text: "hello  " + name,
+    text: "Click to get a greeting",
     onclick() {
       const name = prompt("what are your names");
-      this.updateState({ text: "hello " + name });
+      this.updateState({
+        text: name ? "hello " + name : "Click to get a greeting",
+      });
     },
   });
 }
 
-const nameRef = new Ref(function ( name ) {
+// using cradova Ref
+
+const nameRef = new Ref(function (name) {
   const self = this;
   return _("div.foo#bar", {
-    text: "hello" + (name || "no name"),
+    text: name
+      ? "hello " + (name || " user 2")
+      : "Click to get a second greeting",
     onclick() {
       const name = prompt();
       self.updateState(name);
@@ -226,62 +203,251 @@ const nameRef = new Ref(function ( name ) {
   });
 });
 
-/*
-cradova Ref are component objects
-with methods for rendering, pre-rendering, and updating a it dom elements.
+function App() {
+  return div(counter, dataCounter, HelloMessage, br, nameRef);
+}
 
-Ref also has the feature to stash input values need by the components
+// add your app to the DOM
 
-*/
+document.body.append(App());
+```
+
+## Simple Todo list
+
+Let's see a simple TodoList example
+
+```js
+import _, {
+  button,
+  createSignal,
+  css,
+  div,
+  input,
+  main,
+  p,
+  Ref,
+  reference,
+} from "../dist/index.js";
+
+function TodoList() {
+  // can be used to hold multiple references
+  const referenceSet = new reference();
+
+  // creating a store
+  const todoStore = new createSignal([
+    "take bath",
+    "code code code",
+    "take a break",
+  ]);
+
+  // create actions
+  todoStore.createAction("add-todo", function (todo) {
+    this.set([...this.value, todo]);
+  });
 
+  todoStore.createAction("remove-todo", function (todo) {
+    const ind = this.value.indexOf(todo);
+    this.value.splice(ind, 1);
+    this.set(this.value);
+  });
 
-function Home() {
-  return _("div.foo#bar",
-   counter,
-   dataCounter,
-   HelloMessage,
-   nameRef.render( "no name" )
+  // bind Ref to Signal
+  todoStore.bindRef(todoList);
+
+  // markup
+  return main(
+    _`|Todo List`,
+    div(
+      input({
+        placeholder: "type in todo",
+        reference: referenceSet.bindAs("todoInput"),
+      }),
+      button("Add todo", {
+        onclick() {
+          todoStore.fireAction("add-todo", referenceSet.todoInput.value);
+          referenceSet.todoInput.value = "";
+        },
+      })
+    ),
+    todoList.render
   );
 }
 
+const todoList = new Ref(function () {
+  const self = this;
+  return div(
+    self.Signal.value.map((item) =>
+      p(item, {
+        title: "click to remove",
+        onclick() {
+          self.Signal.fireAction("remove-todo", item);
+        },
+      })
+    )
+  );
+});
+
+document.body.appendChild(TodoList());
+
+css`
+  body {
+    box-sizing: border-box;
+    display: flex;
+  }
+  main {
+    margin: auto;
+  }
+  main > p {
+    font-size: 2rem;
+  }
+`;
+```
+
+## working with screen and Router:
+
+unlike just appending stuff to the DOM,
+a better to build apps is to use a routing system.
+
+Cradova Router is a module that allows you do the following:
+
+Create specified routes in you application
+help you orchestrate navigation
+render a screen on a route
+pre-render a screen in the background if you want to.
+listen to Navigation changes
+create error boundary at screen level.
+persist rendered screens by default
+allow parallel screen rendering for every unique route scheme
+
+let's try an example.
+
+```js
+import _, { Screen, Router } from "cradova";
+
+// Ref can be used as screens
+
+const template = new Ref(function (name) {
+  // an effect run once after screen renders
+  const self = this;
+  self.effect(() => {
+    const name = new Promise((res) => {
+      res("john doe");
+    });
+    setTimeout(async () => {
+      self.updateState(await name);
+    }, 1000);
+  });
+  // effects can be used to make api calls needed for the page
+  return _("div", name ? ">>>>>>>>  Hello  " + name : "  loading...");
+});
+
 const home = new Screen({
   name: "home page", // page title
-  template: Home,
-  ...
+  template,
+});
+
+// in your routes.ts file
+Router.BrowserRoutes({
+  "/home": home,
+  "/lazy-loaded-home": async () => await import("./home"),
 });
+// creates these routes
 
-/*
+Router.packageScreen("/home", data);
+// get the page ready in the background
+
+Router.navigate("/home", data);
+// navigates to that page
 
-Nice things about cradova screens
+Router.getParams();
+// get route params for this current page
+
+Router.onPageEvent((lastRoute, newRoute) => {
+  console.log(lastRoute, newRoute);
+});
+// listen for navigation changes
+```
+
+### More info
+
+---
+
+More info on cradova Router
+
+---
+
+Every cradova app mounts on a div with attribute data-wrapper="app"
+
+if it already exist cradova will use it instead.
+
+cradova will create a div with data-wrapper="app" if it doesn't exists already.
+
+so if you want to use your own mount point then create a div with data-wrapper="app".
+
+---
+
+More info on cradova screens
+
+---
 
 screens are rendered once by default to hack
 responsiveness making your app work fast as user navigates.
 
 this behavior can be override
 by passing
-prerender: false
+persist: false
 in the constructor
 
-
 Cradova screens has
 onActivate() and
-onDeactivate() methods
+onDeactivate() methods which is also available in the
+component function on the this variable bound to it.
 
-these allow you manage rendering
-circle for each in your app
+this allow you manage rendering
+circle for each screen in your app
 
-*/
+---
 
-Router.route("/", home);
-```
+More info on cradova Ref
+
+---
+
+Refs are dynamic components, they have simple abstractions like:
+
+- Effects
+- stash
+- preRender
+- updateState
+
+these behaviors allow you manage rendering
+circle for refs in your app
+
+---
+
+More info on cradova createSignal
+
+---
+
+Cradova Signals allows you to create powerful data stores.
+
+with ability to:
+
+- create store
+- create actions and fire them
+- bind a Ref
+- listen to changes
+- persist changes to localStorage
+- update a cradova Ref and bindings automatically
+
+With these simple and easy abstractions, you can use datastores with powerful convenience.
 
 ## Documentation
 
-At the moment, we're in the process of creating documentation for Cradova, and we have limited resources. If you're interested in lending a hand, we invite you to join our community, gain firsthand experience, and contribute to the advancement of Cradova.
+At the moment, we're in the process of creating a documentation website for Cradova, and we have limited resources. If you're interested in lending a hand, we invite you to join our community, gain firsthand experience, and contribute to the advancement of Cradova.
 
 ## Getting Help
 
-To get further insights and help on Cradova, visit our new [Telegram Community Chat](https://t.me/cradovaframework).
+To get further insights and help on Cradova, visit our [Discord](https://discord.gg/b7fvMg38) and [Telegram](https://t.me/cradovaframework) Community Chats.
 
 ## Contributing
 

package/dist/index.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cradova",
-  "version": "2.2.3",
+  "version": "2.3.0",
   "description": "Web framework for building web apps and PWAs",
   "main": "dist/index.js",
   "type": "module",