cradova 1.1.1 → 1.2.0

package/dist/index.d.ts

@@ -67,15 +67,6 @@ declare module "cradova" {
          * @param {any} screen the cradova document tree for the route.
          */
         route: (path: string, screen: CradovaScreenType) => void;
-        routes: Record<string, RouterRouteObject>;
-        lastNavigatedRoute: string | null;
-        lastNavigatedRouteController: RouterRouteObject | null;
-        nextRouteController: RouterRouteObject | null;
-        params: Record<string, any>;
-        /**
-         * n/a
-         */
-        router: (e: any, force?: boolean) => void;
         /**
          * get a screen ready before time.
          *
@@ -83,8 +74,6 @@ declare module "cradova" {
          * @param {any} data data for the screen.
          */
         packageScreen: (path: string, data?: any) => void;
-        pageShow: ((path: string) => void) | null;
-        pageHide: ((path: string) => void) | null;
         onPageShow: (callback: () => void) => void;
         onPageHide: (callback: () => void) => void;
         /**
@@ -198,7 +187,7 @@ declare module "cradova" {
    * - update a cradova Ref/RefList automatically
    * @constructor initial: any, props: {useHistory, persist}
    */
-  export class Signal {
+  export class createSignal {
     private callback;
     private persistName;
     private actions;
@@ -333,7 +322,7 @@ declare module "cradova" {
   export class simpleStore {
     private ref;
     value: any;
-    constructor(initial: unknown, ref: RefType);
+    constructor(initial: unknown, ref?: RefType);
     /**
      *  Cradova simpleStore
      * ----
@@ -491,10 +480,13 @@ _.animate("polarization",
     ifTrue: () => any,
     ifFalse: () => any
   ): () => any;
-  /**
+  /** @deprecated
+   *
    * Create element and get a callback to update their state
    * no need to manage stateIDs
    * ----------------------------------------------------------------
+   * please use element.updateState(state) instead in listeners and mount events
+   * ---
    *
    * @param element_initials
    * @param props

package/dist/index.js

@@ -9,20 +9,16 @@ var Screen = class {
     const { template, name, callBack, transition, persist } = cradova_screen_initials;
     if (typeof template !== "function") {
       throw new Error(
-        " \u2718  Cradova err:   only functions that returns a cradova element is valid as screen"
+        " \u2718  Cradova err: only functions that returns a cradova element is valid as screen"
       );
     }
     this.html = template.bind(this);
     this.name = name;
-    this.template = document.createElement("div");
-    this.template.id = "cradova-screen-set";
+    this.template = document.createDocumentFragment();
     this.callBack = callBack;
     this.transition = transition;
-    if (typeof persist !== "undefined") {
-      this.persist = true;
-    }
-    if (persist === false) {
-      this.persist = false;
+    if (typeof persist === "boolean") {
+      this.persist = persist;
     }
   }
   effect(fn) {
@@ -46,12 +42,15 @@ var Screen = class {
     if (typeof this.html === "function") {
       let fuc = await this.html(data);
       if (typeof fuc === "function") {
-        fuc = fuc(data);
+        fuc = fuc();
         if (!(fuc instanceof HTMLElement)) {
           throw new Error(
             " \u2718  Cradova err:   only parent with descendants is valid"
           );
         } else {
+          if (this.transition) {
+            fuc.classList.add("CRADOVA-UI-" + this.transition);
+          }
           this.template.replaceChildren(fuc);
         }
       }
@@ -61,7 +60,9 @@ var Screen = class {
         " \u2718  Cradova err:  no screen is rendered, may have been past wrongly, try ()=> screen; in cradova Router.route(name, screen)"
       );
     }
-    this.template.append(...this.secondaryChildren);
+    if (this.secondaryChildren.length) {
+      this.template.append(...this.secondaryChildren);
+    }
   }
   onActivate(cb) {
     this.callBack = cb;
@@ -78,6 +79,9 @@ var Screen = class {
   }
   deActivate() {
     this.template.parentElement?.removeChild(this.template);
+    if (!this.persist) {
+      this.rendered = false;
+    }
   }
   async Activate(data, force) {
     if (!this.persist) {
@@ -92,18 +96,18 @@ var Screen = class {
     if (force) {
       await this.package(data);
       this.packed = true;
+      this.rendered = false;
     }
     document.title = this.name;
-    document.querySelector("[data-cra-id=cradova-app-wrapper]").append(this.template);
+    const doc = document.querySelector("[data-cra-id=cradova-app-wrapper]");
+    doc?.replaceChildren(this.template);
     if (!this.persist) {
       this.packed = false;
     }
     await this.effector();
-    if (this.template.firstChild.afterMount) {
-      this.template.firstChild.afterMount();
-    }
-    if (this.transition) {
-      this.template?.classList.add("CRADOVA-UI-" + this.transition);
+    if (doc?.firstChild?.afterMount) {
+      doc?.firstChild.afterMount();
+      doc.firstChild.afterMount = void 0;
     }
     if (this.callBack) {
       await this.callBack(data);
@@ -183,18 +187,19 @@ var Scaffold = class {
 
 // lib/scripts/Router.ts
 var Router = {};
-Router["lastNavigatedRouteController"] = null;
-Router["nextRouteController"] = null;
-Router["lastNavigatedRoute"] = null;
-Router["pageShow"] = null;
-Router["pageHide"] = null;
-Router["params"] = {};
-Router["routes"] = {};
+var RouterBox = {};
+RouterBox["lastNavigatedRouteController"] = null;
+RouterBox["nextRouteController"] = null;
+RouterBox["lastNavigatedRoute"] = null;
+RouterBox["pageShow"] = null;
+RouterBox["pageHide"] = null;
+RouterBox["params"] = {};
+RouterBox["routes"] = {};
 var checker = (url) => {
-  if (Router.routes[url]) {
-    return [Router.routes[url], null];
+  if (RouterBox.routes[url]) {
+    return [RouterBox.routes[url], null];
   }
-  for (const path in Router.routes) {
+  for (const path in RouterBox.routes) {
     if (!path.includes(":")) {
       continue;
     }
@@ -227,7 +232,7 @@ var checker = (url) => {
             routesParams[pathFixtures[i].split(":")[1]] = urlFixtures[i];
           }
         }
-        return [Router.routes[path], routesParams];
+        return [RouterBox.routes[path], routesParams];
       }
     }
   }
@@ -238,7 +243,7 @@ Router.route = function(path = "/", screen) {
     console.error(" \u2718  Cradova err:  not a valid screen  " + screen);
     throw new Error(" \u2718  Cradova err:  Not a valid cradova screen component");
   }
-  Router.routes[path] = {
+  RouterBox.routes[path] = {
     controller: (params, force) => screen.Activate(params, force),
     packager: async (params) => await screen.package(params),
     deactivate: () => {
@@ -257,7 +262,7 @@ Router.navigate = function(href, data = null, force = false) {
     );
   }
   let route = null, params, link = null;
-  if (href.includes(".")) {
+  if (href.includes("://")) {
     window.location.href = href;
   } else {
     if (href === window.location.pathname) {
@@ -265,19 +270,19 @@ Router.navigate = function(href, data = null, force = false) {
     }
     [route, params] = checker(href);
     if (route) {
-      Router["nextRouteController"] = route;
-      Router.params.params = params || null;
-      Router.params.data = data || null;
+      RouterBox["nextRouteController"] = route;
+      RouterBox.params.params = params || null;
+      RouterBox.params.data = data || null;
       link = href;
-      Router["pageHide"] && Router["pageHide"](href + " :navigated");
+      RouterBox["pageHide"] && RouterBox["pageHide"](href + " :navigated");
       window.history.pushState({}, "", link);
       setTimeout(async () => {
-        await Router.router(null, force);
+        await RouterBox.router(null, force);
       }, 0);
     }
   }
 };
-Router.router = async function(e, force = false) {
+RouterBox.router = async function(e, force = false) {
   let Alink, url, route, params;
   if (e && e.target.tagName) {
     Alink = e.target;
@@ -298,22 +303,22 @@ Router.router = async function(e, force = false) {
   if (url === Router["lastNavigatedRoute"]) {
     return;
   }
-  if (Router["nextRouteController"]) {
-    route = Router["nextRouteController"];
-    Router["nextRouteController"] = null;
-    params = Router.params.params;
+  if (RouterBox["nextRouteController"]) {
+    route = RouterBox["nextRouteController"];
+    RouterBox["nextRouteController"] = null;
+    params = RouterBox.params.params;
   } else {
     [route, params] = checker(url);
   }
   if (route) {
-    Router.params.event = e;
-    Router.params.params = params || null;
-    Router.params.data = Router.params.data || null;
-    Router["lastNavigatedRouteController"] && Router["lastNavigatedRouteController"].deactivate();
-    await route.controller(Router.params, force);
-    Router["pageShow"] && Router["pageShow"](url);
-    Router["lastNavigatedRoute"] = url;
-    Router["lastNavigatedRouteController"] = route;
+    RouterBox.params.event = e;
+    RouterBox.params.params = params || null;
+    RouterBox.params.data = RouterBox.params.data || null;
+    RouterBox["lastNavigatedRouteController"] && RouterBox["lastNavigatedRouteController"].deactivate();
+    await route.controller(RouterBox.params, force);
+    RouterBox["pageShow"] && RouterBox["pageShow"](url);
+    RouterBox["lastNavigatedRoute"] = url;
+    RouterBox["lastNavigatedRouteController"] = route;
     Array.from(window.document.querySelectorAll("a")).forEach((a) => {
       a.addEventListener("click", (e2) => {
         e2.preventDefault();
@@ -321,18 +326,18 @@ Router.router = async function(e, force = false) {
       });
     });
   } else {
-    if (Router.routes["/404"]) {
-      Router.routes["/404"].controller(Router.params);
+    if (RouterBox.routes["/404"]) {
+      RouterBox.routes["/404"].controller(RouterBox.params);
     } else {
       console.error(
-        " \u2718  Cradova err: route '" + url + "' does not exist and no /404 route given!"
+        " \u2718  Cradova err: route '" + url + "' does not exist and no '/404' route given!"
       );
     }
   }
 };
 Router["onPageShow"] = function(callback) {
   if (typeof callback === "function") {
-    Router["pageShow"] = callback;
+    RouterBox["pageShow"] = callback;
   } else {
     throw new Error(
       " \u2718  Cradova err:  callback for pageShow event is not a function"
@@ -341,7 +346,7 @@ Router["onPageShow"] = function(callback) {
 };
 Router["onPageHide"] = function(callback) {
   if (typeof callback === "function") {
-    Router["pageHide"] = callback;
+    RouterBox["pageHide"] = callback;
   } else {
     throw new Error(
       " \u2718  Cradova err:  callback for pageHide event is not a function"
@@ -355,10 +360,10 @@ Router.packageScreen = async function(path, data) {
   }
   await Router.routes[path].packager(data);
 };
-window.addEventListener("pageshow", Router.router);
+window.addEventListener("pageshow", RouterBox.router);
 window.addEventListener("popstate", (e) => {
   e.preventDefault();
-  Router.router(e);
+  RouterBox.router(e);
 });
 
 // lib/scripts/fns.ts
@@ -466,7 +471,19 @@ function media(value, ...properties) {
   aniStyleTag.innerHTML = totalAnimation;
   document.head.append(aniStyleTag);
 }
-function css(identifier, properties) {
+function css(identifier, properties = {}) {
+  if (typeof identifier === "string" && typeof properties === "undefined") {
+    let styTag = document.querySelector("style");
+    if (styTag !== null) {
+      identifier += styTag.textContent;
+      styTag.textContent = identifier;
+      return;
+    }
+    styTag = document.createElement("style");
+    styTag.textContent = identifier;
+    document.head.append(styTag);
+    return;
+  }
   const styS = "" + identifier + `{
 `;
   const styE = `}
@@ -536,7 +553,7 @@ function assertOr(condition, ifTrue, ifFalse) {
 }
 function RefElement(element_initials = "div", props = {}, ...other) {
   const stateID = uuid();
-  if (Object.prototype.toString.call(props) !== "[object Object]") {
+  if (typeof props === "object" && !Array.isArray(element_initials[1])) {
     other = props;
     props = { stateID };
   } else {
@@ -754,9 +771,9 @@ var Ref = class {
       cradovaDispatchTrackBreak: true
     });
     if (!guy) {
-      console.error(this.component);
       throw new Error(
-        " \u2718  Cradova err:  Ref is not rendered but updateState was called"
+        " \u2718  Cradova err:  Ref is not rendered but updateState was called",
+        this.component
       );
     }
     const chtml = this.component(data);
@@ -789,15 +806,34 @@ var Ref = class {
     dispatch(this.stateID, { remove: true });
   }
 };
-var frag = function(...children) {
+var frag = function(children) {
   const par = document.createDocumentFragment();
   for (let i = 0; i < children.length; i++) {
-    const ch = children[i]();
-    if (typeof ch === "function") {
-      par.append(ch());
-    } else {
-      if (ch instanceof HTMLElement) {
-        par.append(ch);
+    if (typeof children[i] === "function") {
+      const a = children[i]();
+      if (typeof a === "function") {
+        const b = a();
+        if (b instanceof HTMLElement) {
+          par.append(b);
+        } else {
+          if (!(b instanceof HTMLElement)) {
+            console.error(" \u2718  Cradova err:   wrong element type" + b);
+            throw new TypeError(
+              " \u2718  Cradova err:   invalid element, should be a html element from cradova"
+            );
+          }
+        }
+      } else {
+        if (a instanceof HTMLElement) {
+          par.append(a);
+        } else {
+          if (!(a instanceof HTMLElement)) {
+            console.error(" \u2718  Cradova err:   wrong element type" + a);
+            throw new TypeError(
+              " \u2718  Cradova err:   invalid element, should be a html element from cradova"
+            );
+          }
+        }
       }
     }
   }
@@ -811,7 +847,7 @@ function cradovaDispatchTrack(nodes, state) {
     if (!element) {
       continue;
     }
-    if (typeof state === "object") {
+    if (typeof state === "object" && !Array.isArray(state)) {
       for (const key in state) {
         if (key === "style") {
           for (const [k, v] of Object.entries(state[key])) {
@@ -845,7 +881,7 @@ function cradovaDispatchTrack(nodes, state) {
           }
           continue;
         }
-        if (key === "class" && typeof state[key] === "string") {
+        if (key === "class" && typeof state[key] === "string" && state[key] !== "") {
           const classes = state[key].split(" ");
           for (let i2 = 0; i2 < classes.length; i2++) {
             if (classes[i2]) {
@@ -854,11 +890,11 @@ function cradovaDispatchTrack(nodes, state) {
           }
           continue;
         }
-        if (key === "toggleclass") {
+        if (key === "toggleclass" && state[key] !== "") {
           element.classList.toggle(state[key]);
           continue;
         }
-        if (key === "removeclass") {
+        if (key === "removeclass" && state[key] !== "") {
           element.classList.remove(state[key]);
           continue;
         }
@@ -866,6 +902,10 @@ function cradovaDispatchTrack(nodes, state) {
           element.parentElement?.removeChild(element);
           continue;
         }
+        if (key.includes("$")) {
+          element.setAttribute("data-" + key.split("$")[1], state[key]);
+          continue;
+        }
         if (key === "tree") {
           if (typeof state[key] === "function") {
             state[key] = state[key]();
@@ -880,14 +920,13 @@ function cradovaDispatchTrack(nodes, state) {
           }
           if (!(state[key] instanceof HTMLElement)) {
             console.error(
-              " \u2718  Cradova err:   wrong element type: can't update element state on " + state[key]
+              " \u2718  Cradova err:   wrong element type: can't update tree using " + state[key]
             );
             throw new TypeError(
               " \u2718  Cradova err:   invalid element, should be a html element from cradova"
             );
           }
-          element.replaceChildren();
-          element.append(state[key]);
+          element.replaceChildren(state[key]);
           continue;
         }
         element[key] = state[key];
@@ -896,12 +935,17 @@ function cradovaDispatchTrack(nodes, state) {
   }
 }
 function dispatch(stateID, state) {
+  let ele;
+  if (stateID instanceof HTMLElement) {
+    ele = stateID;
+  }
   let updated = void 0;
-  if (typeof state === "undefined" && typeof stateID === "object") {
+  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 {
@@ -910,19 +954,21 @@ function dispatch(stateID, state) {
         "[data-cra-id=" + stateID + "]"
       );
       if (elements.length) {
-        if (state?.cradovaDispatchTrackBreak) {
-          updated = elements[0];
-        } else {
+        updated = elements.length === 1 ? elements[0] : elements;
+        if (!state?.cradovaDispatchTrackBreak) {
           cradovaDispatchTrack(elements, state);
         }
       }
     }
+    if (ele) {
+      cradovaDispatchTrack([ele], state);
+    }
   }
   return updated;
 }
 
 // lib/scripts/createSignal.ts
-var Signal = class {
+var createSignal = class {
   constructor(initial, props) {
     this.persistName = "";
     this.actions = {};
@@ -1091,7 +1137,9 @@ var simpleStore = class {
   constructor(initial, ref) {
     this.value = null;
     this.value = initial;
-    this.bindRef(ref);
+    if (ref) {
+      this.bindRef(ref);
+    }
   }
   set(value, shouldRefRender) {
     if (typeof value === "function") {
@@ -1562,7 +1610,7 @@ var make = function(txx) {
 };
 var _ = (...element_initials) => {
   let firstProps, firstLevelChildren = [], beforeMount;
-  if (Object.prototype.toString.call(element_initials[1]) === "[object Object]") {
+  if (typeof element_initials[1] === "object" && !Array.isArray(element_initials[1])) {
     firstProps = element_initials[1];
     if (firstProps?.beforeMount) {
       beforeMount = firstProps["beforeMount"];
@@ -1572,9 +1620,7 @@ var _ = (...element_initials) => {
       firstLevelChildren = element_initials.slice(2, element_initials.length);
     }
   } else {
-    if (element_initials[1] instanceof HTMLElement || typeof element_initials[1] === "function" || typeof element_initials[1] === "string") {
-      firstLevelChildren = element_initials.slice(1, element_initials.length);
-    }
+    firstLevelChildren = element_initials.slice(1, element_initials.length);
   }
   if (element_initials[0].raw) {
     element_initials[0] = element_initials[0]["raw"][0];
@@ -1587,7 +1633,7 @@ var _ = (...element_initials) => {
     return (...incoming) => {
       let secondLevelChildren = [], props = {}, text;
       for (let i = 0; i < incoming.length; i++) {
-        if (Object.prototype.toString.call(incoming[i]) === "[object Object]") {
+        if (typeof incoming[i] === "object" && !Array.isArray(incoming[1])) {
           props = incoming[i];
           if (incoming[i].beforeMount) {
             beforeMount = incoming[i]["beforeMount"];
@@ -1646,11 +1692,11 @@ var _ = (...element_initials) => {
           element.style[prop] = props[prop];
           continue;
         }
-        if (prop === "text" && typeof props[prop] === "string") {
+        if (prop === "text" && typeof props[prop] === "string" && props[prop] !== "") {
           text = props[prop];
           continue;
         }
-        if (prop === "class" && typeof props[prop] === "string") {
+        if (prop === "class" && typeof props[prop] === "string" && props[prop] !== "") {
           element.classList.add(props[prop]);
           continue;
         }
@@ -1667,8 +1713,19 @@ var _ = (...element_initials) => {
           element.setAttribute("data-" + prop.split("$")[1], props[prop]);
           continue;
         }
+        if (prop === "shouldUpdate" && props[prop] === true) {
+          element.updateState = dispatch.bind(null, element);
+          continue;
+        }
         try {
-          element[prop] = props[prop];
+          if (typeof element[prop] !== "undefined") {
+            element[prop] = props[prop];
+          } else {
+            element[prop] = props[prop];
+            if (prop !== "afterMount" && prop !== "for" && !prop.includes("aria")) {
+              console.error(" \u2718  Cradova err:  invalid html attribute " + prop);
+            }
+          }
         } catch (error) {
           console.error(" \u2718  Cradova err:  ", error);
         }
@@ -1760,7 +1817,6 @@ export {
   IsElementInView,
   PromptBeforeLeave,
   Ref,
-  RefElement,
   RefList,
   Router,
   Scaffold,
@@ -1769,7 +1825,7 @@ export {
   assert,
   assertOr,
   controls,
-  Signal as createSignal,
+  createSignal,
   css,
   lib_default as default,
   dispatch,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cradova",
-  "version": "1.1.1",
+  "version": "1.2.0",
   "description": "Web framework for building web apps and PWAs",
   "main": "dist/index.js",
   "type": "module",
@@ -12,7 +12,7 @@
     "url": "git+https://github.com/FridayCandour/cradova.git"
   },
   "scripts": {
-    "build": "tsup lib/index.ts && `npm run ts",
+    "build": "tsup lib/index.ts && npm run ts &&  cp lib/types.ts dist/types.ts ",
     "buildts": "tsup lib/index.ts",
     "ts": "cp cradova.d.ts dist/index.d.ts",
     "lint": "eslint . --fix"