cradova 3.2.2 → 3.3.0

package/README.md

@@ -1,6 +1,6 @@
 <br/>
 <p align="center">
-  <a href="https://github.com/fridaycandour/cradova">
+  <a href="https://github.com/uiedbook/cradova">
     <img src="cradova.png" alt="Logo" width="80" height="80">
   </a>
 
@@ -10,22 +10,51 @@
     Cradova is a JavaScript framework for building Single Page Applications and PWAs.
     <br/>
     <br/>
-    <a href="https://github.com/fridaycandour/cradova#examples"><strong>Explore the 🎙️ docs »</strong></a>
+    <a href="https://github.com/uiedbook/cradova#examples"><strong>Explore the 🎙️ docs »</strong></a>
     <br/>
     <br/>
-    <a href="https://t.me/cradovaframework">Join Community</a>
+    <a href="https://t.me/uiedbookHQ">Join Community</a>
     .
-    <a href="https://github.com/fridaycandour/cradova/issues">Report Bug</a>
+    <a href="https://github.com/uiedbook/cradova/issues">Report Bug</a>
     .
-    <a href="https://github.com/fridaycandour/cradova/issues">Request Feature</a>
+    <a href="https://github.com/uiedbook/cradova/issues">Request Feature</a>
   </p>
 </p>
 
-![Contributors](https://img.shields.io/github/contributors/fridaycandour/cradova?color=dark-green) ![Issues](https://img.shields.io/github/issues/fridaycandour/cradova) ![License](https://img.shields.io/github/license/fridaycandour/cradova)
+![Contributors](https://img.shields.io/github/contributors/uiedbook/cradova?color=dark-green) ![Issues](https://img.shields.io/github/issues/uiedbook/cradova) ![License](https://img.shields.io/github/license/uiedbook/cradova)
 [![npm Version](https://img.shields.io/npm/v/cradova.svg)](https://www.npmjs.com/package/cradova)
 [![License](https://img.shields.io/npm/l/cradova.svg)](https://github.com/cradova/cradova.js/blob/next/LICENSE)
 [![npm Downloads](https://img.shields.io/npm/dm/cradova.svg)](https://www.npmjs.com/package/cradova)
-[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](https://github.com/cradova/cradova.js/blob/next/contributing.md)![Forks](https://img.shields.io/github/forks/fridaycandour/cradova?style=social) ![Stargazers](https://img.shields.io/github/stars/fridaycandour/cradova?style=social)
+[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](https://github.com/cradova/cradova.js/blob/next/contributing.md)![Forks](https://img.shields.io/github/forks/uiedbook/cradova?style=social) ![Stargazers](https://img.shields.io/github/stars/uiedbook/cradova?style=social)
+
+## What's New? Conditionals!
+
+```js
+import { div, h1, $if, $ifelse, $case, $switch } from "cradova";
+
+function Hello({ name }) {
+  return div(
+    $if(name === "john", h1("Hello john")),
+    $if(name === "paul", h1("Goodbye paul")),
+    $ifelse(name === "john", h1("Hello john"), h1("Hello Paul"))
+  );
+}
+
+const html = div(Hello("john"), Hello("paul"));
+
+function whatsAllowed({ age }) {
+  return div(
+    $switch(
+      age,
+      $case(12, h1("too young")),
+      $case(26, h1("you are welcome")),
+      $case(52, h1("too old"))
+    )
+  );
+}
+
+document.body.append(html, whatsAllowed({ age: 26 }));
+```
 
 # Contents
 
@@ -43,7 +72,7 @@ Cradova is a web development framework for building Single Page Applications and
 
 It's a fast and simple framework, it provides an easy to use state management and router system.
 
-Cradova follows the [VJS specification](https://github.com/FridayCandour/cradova/blob/main/VJS_spec/spec.md)
+Cradova follows the [VJS specification](https://github.com/uiedbook/cradova/blob/main/VJS_spec/spec.md)
 
 ## What's the benefit?
 
@@ -58,7 +87,7 @@ Undoubtedly, this provides a significant advantage.
 
 Cradova has already been utilized in multiple production projects, and we will continuously update this page to showcase our advancements as we keep improving.
 
-[current version changes](https://github.com/fridaycandour/cradova/blob/main/CHANGELOG.md#v300)
+[current version changes](https://github.com/uiedbook/cradova/blob/main/CHANGELOG.md#v330)
 
 ## Installation
 
@@ -431,23 +460,33 @@ At the moment, we're in the process of creating a documentation website for Crad
 
 ## Getting Help
 
-To get further insights and help on Cradova, visit our [Discord](https://discord.gg/b7fvMg38) and [Telegram](https://t.me/cradovaframework) Community Chats.
+To get further insights and help on Cradova, visit our [Discord](https://discord.gg/b7fvMg38) and [Telegram](https://t.me/uiedbookHQ) Community Chats.
 
 ## Contributing
 
-We are currently working to [set](https://github.com/fridaycandour/cradova/blob/main/contributing.md) up the following:
+We are currently working to [set](https://github.com/uiedbook/cradova/blob/main/contributing.md) up the following:
 
 - building Cradova CLI (in progress)
 - Cradova Documentation Website
 - UI component libraries for cradova
 - Sample projects
 - maintenance and promotion
-<!--
+
+```
+    ██████╗   ██████╗    █████═╗   ███████╗    ███████╗    ██╗   ██╗  █████╗
+   ██╔════╝   ██╔══██╗  ██╔═╗██║   █      ██  ██╔═════╝█   ██║   ██║  ██╔═╗██
+   ██║        ██████╔╝  ███████║   █      ██  ██║     ██   ██║   ██║  ██████╗
+   ██║        ██╔══██╗  ██║  ██║   █      ██  ██║     ██   ╚██╗ ██╔╝  ██║  ██╗
+   ╚██████╗   ██║  ██║  ██║  ██║   ███████╔╝   ████████      ╚███╔╝   ██║  ██║
+    ╚═════╝   ╚═╝  ╚═╝  ╚═╝  ╚═╝   ╚══════╝     ╚════╝        ╚══╝    ╚═╝  ╚═╝
+```
 
 ## Sponsor
 
-Your support is appreciated and needed to advance Cradova for more performance and improvements.
+Your contribution(s) is a good force for change anytime you do it, you can ensure Cradova's growth and improvement by contributing a re-occuring or fixed donations to:
+
+https://www.buymeacoffee.com/fridaycandour
 
-Sponsorships can be done via [Patreon](https://www.patreon.com/FridayCandour) and [KO-FI](https://www.ko-fi.com/fridaycandour).
+Or Click.
 
-Both monthly-recurring sponsorships and one-time donations are accepted. -->
+<a href="https://www.buymeacoffee.com/fridaycandour"><img src="https://img.buymeacoffee.com/button-api/?text=Buy us a coffee&emoji=&slug=fridaycandour&button_colour=FFDD00&font_colour=000000&outline_colour=000000&coffee_colour=ffffff" /></a>

package/dist/index.d.ts

@@ -1,5 +1,15 @@
 import * as CSS from 'csstype';
 
+/*! *****************************************************************************
+Copyright 2022 Friday Candour. All rights reserved.
+Licensed under the Apache License, Version 2.0 (the "License"); you may not use
+this file except in compliance with the License. You may obtain a copy of the
+License at http://www.apache.org/licenses/LICENSE-2.0
+
+See the Apache Version 2.0 License for specific language governing permissions
+and limitations under the License.
+***************************************************************************** */
+
 /**
  *  Cradova Signal
  * ----
@@ -103,14 +113,27 @@ declare class createSignal<Type extends Record<string, unknown>> {
     clearPersist(): void;
 }
 
+/*! *****************************************************************************
+Copyright 2022 Friday Candour. All rights reserved.
+Licensed under the Apache License, Version 2.0 (the "License"); you may not use
+this file except in compliance with the License. You may obtain a copy of the
+License at http://www.apache.org/licenses/LICENSE-2.0
+
+See the Apache Version 2.0 License for specific language governing permissions
+and limitations under the License.
+***************************************************************************** */
+
 declare const isNode: (element: unknown) => boolean;
 /**
  * Cradova event
  */
 declare class cradovaEvent {
     private listeners;
+    private active_listeners;
     addEventListener(eventName: string, callback: () => void): Promise<void>;
+    addActiveEventListener(eventName: string, callback: () => void): Promise<void>;
     dispatchEvent(eventName: string, eventArgs?: unknown): Promise<void>;
+    dispatchActiveEvent(eventName: string, eventArgs?: unknown): Promise<void>;
 }
 declare const CradovaEvent: cradovaEvent;
 declare function Rhoda(l: VJSType<HTMLElement>[] | (() => any)[] | Ref<unknown>[] | HTMLElement[]): DocumentFragment;
@@ -120,10 +143,13 @@ declare function css(identifier: string | TemplateStringsArray): void;
  * @param {expression} condition
  * @param {function} elements[]
  */
-declare function assert<Type>(condition: boolean, ...elements: VJS_Child_TYPE<Type | HTMLElement>[]): HTMLElement[] | undefined;
-declare function assertOr<Type>(condition: boolean, ifTrue: VJS_Child_TYPE<Type | HTMLElement>, ifFalse: VJS_Child_TYPE<Type | HTMLElement>): VJS_Child_TYPE<HTMLElement | Type>;
+declare function $if<Type>(condition: boolean, ...elements: VJS_Child_TYPE<Type | HTMLElement>[]): HTMLElement[] | undefined;
+declare function $ifelse<Type>(condition: boolean, ifTrue: VJS_Child_TYPE<Type | HTMLElement>, ifFalse: VJS_Child_TYPE<Type | HTMLElement>): VJS_Child_TYPE<HTMLElement | Type>;
+declare function $case<Type>(value: any, ...elements: VJS_Child_TYPE<Type | HTMLElement>[]): (key: any) => HTMLElement[] | undefined;
+declare function $switch(key: unknown, ...cases: ((key: any) => HTMLElement[] | undefined)[]): HTMLElement[] | undefined;
 type LoopData<Type> = Type[];
 declare function loop<Type>(datalist: LoopData<Type>, component: (value: Type, index?: number, array?: LoopData<Type>) => HTMLElement | DocumentFragment | undefined): HTMLElement[] | undefined;
+declare function memo_SNRU(): void;
 /**
  * Cradova Ref
  * -------
@@ -144,9 +170,20 @@ declare class Ref<D> {
     };
     _state_index: number;
     stash: D | undefined;
-    constructor(component: (this: Ref<D>, data: D) => HTMLElement | DocumentFragment);
+    constructor(component: (this: Ref<D>, data: D) => HTMLElement | DocumentFragment, options?: {
+        active: boolean;
+    } | boolean);
     preRender(data?: D, stash?: boolean): void;
     destroyPreRendered(): void;
+    /**
+     * Cradova Ref
+     * ---
+     * construct to add custom methods to Refs
+     * @param methodName
+     * @param method
+     * @returns  void
+     */
+    define(methodName: string, method: () => void): void;
     /**
      * Cradova Ref
      * ---
@@ -238,28 +275,32 @@ Returns a mutable reference object of dom elements that persists across componen
  */
 declare function useRef(): Record<string, HTMLElement | undefined>;
 
+/*! *****************************************************************************
+Copyright 2022 Friday Candour. All rights reserved.
+Licensed under the Apache License, Version 2.0 (the "License"); you may not use
+this file except in compliance with the License. You may obtain a copy of the
+License at http://www.apache.org/licenses/LICENSE-2.0
+
+See the Apache Version 2.0 License for specific language governing permissions
+and limitations under the License.
+***************************************************************************** */
+
 /**
  *  Cradova Screen
  * ---
- * create instances of manageable pages and scaffolds
+ * create instances of manageable pages
  * @param name
  * @param template
- * @param transitions
  */
 declare class Screen {
-    /**
-     * this should be a cradova screen component
-     */
-    _html: ((this: Screen, data?: unknown) => HTMLElement | DocumentFragment) | HTMLElement | DocumentFragment;
-    /**
-     * error handler for the screen
-     */
-    _errorHandler: ((err: unknown) => void) | null;
     /**
      * used internally
      */
     private _name;
-    private _transition;
+    /**
+     * this should be a cradova screen component
+     */
+    _html: ((this: Screen, data?: unknown) => HTMLElement | DocumentFragment) | HTMLElement | DocumentFragment;
     private _packed;
     private _template;
     private _callBack;
@@ -267,12 +308,15 @@ declare class Screen {
     private _persist;
     private _delegatedRoutesCount;
     private _dropped;
+    /**
+     * error handler for the screen
+     */
+    _errorHandler: ((err: unknown) => void) | null;
     constructor(cradova_screen_initials: CradovaScreenType);
     _derive(): {
         _name: string;
-        _transition: string | undefined;
-        _callBack: (() => void | Promise<void>) | undefined;
-        _deCallBack: (() => void | Promise<void>) | undefined;
+        _callBack: ((cradovaScreenSet: HTMLElement) => void | Promise<void>) | undefined;
+        _deCallBack: ((cradovaScreenSet: HTMLElement) => void | Promise<void>) | undefined;
     };
     _apply_derivation(derivation: {
         _name: string;
@@ -291,6 +335,16 @@ declare class Screen {
     _Activate(force?: boolean): Promise<void>;
 }
 
+/*! *****************************************************************************
+Copyright 2022 Friday Candour. All rights reserved.
+Licensed under the Apache License, Version 2.0 (the "License"); you may not use
+this file except in compliance with the License. You may obtain a copy of the
+License at http://www.apache.org/licenses/LICENSE-2.0
+
+See the Apache Version 2.0 License for specific language governing permissions
+and limitations under the License.
+***************************************************************************** */
+
 type DataAttributes = {
     [key: `data-${string}`]: string;
 };
@@ -343,7 +397,6 @@ type CradovaScreenType<T = unknown> = {
      * Usually for adding css transitions
      * .
      */
-    transition?: string;
     /**
      * Cradova screen
      * ---
@@ -374,6 +427,16 @@ type CradovaScreenType<T = unknown> = {
     persist?: boolean;
 };
 
+/*! *****************************************************************************
+Copyright 2022 Friday Candour. All rights reserved.
+Licensed under the Apache License, Version 2.0 (the "License"); you may not use
+this file except in compliance with the License. You may obtain a copy of the
+License at http://www.apache.org/licenses/LICENSE-2.0
+
+See the Apache Version 2.0 License for specific language governing permissions
+and limitations under the License.
+***************************************************************************** */
+
 /** cradova router
  * ---
  * Registers a route.
@@ -474,24 +537,27 @@ declare class Router {
     static _mount(): void;
 }
 
+/*! *****************************************************************************
+Copyright 2022 Friday Candour. All rights reserved.
+Licensed under the Apache License, Version 2.0 (the "License"); you may not use
+this file except in compliance with the License. You may obtain a copy of the
+License at http://www.apache.org/licenses/LICENSE-2.0
+
+See the Apache Version 2.0 License for specific language governing permissions
+and limitations under the License.
+***************************************************************************** */
+
 declare const makeElement: <E extends HTMLElement>(element: E & HTMLElement, ElementChildrenAndPropertyList: VJS_params_TYPE<E>) => E;
 declare const make: (descriptor: any) => any[];
 declare const a: VJSType<HTMLAnchorElement>;
-declare const area: VJSType<HTMLAreaElement>;
 declare const article: VJSType<HTMLElement>;
-declare const aside: VJSType<HTMLElement>;
 declare const audio: VJSType<HTMLAudioElement>;
-declare const b: VJSType<HTMLElement>;
-declare const base: VJSType<HTMLBaseElement>;
-declare const blockquote: VJSType<HTMLElement>;
 declare const br: VJSType<HTMLBRElement>;
 declare const button: VJSType<HTMLButtonElement>;
 declare const canvas: VJSType<HTMLCanvasElement>;
 declare const caption: VJSType<HTMLTableCaptionElement>;
-declare const code: VJSType<HTMLElement>;
 declare const col: VJSType<HTMLTableColElement>;
 declare const colgroup: VJSType<HTMLOptGroupElement>;
-declare const data: VJSType<HTMLDataElement>;
 declare const datalist: VJSType<HTMLDataListElement>;
 declare const details: VJSType<HTMLDetailsElement>;
 declare const dialog: VJSType<HTMLDialogElement>;
@@ -515,18 +581,13 @@ declare const iframe: VJSType<HTMLIFrameElement>;
 declare const img: VJSType<HTMLImageElement>;
 declare const input: VJSType<HTMLInputElement>;
 declare const label: VJSType<HTMLLabelElement>;
-declare const legend: VJSType<HTMLLegendElement>;
 declare const li: VJSType<HTMLLIElement>;
-declare const link: VJSType<HTMLLinkElement>;
 declare const main: VJSType<HTMLElement>;
-declare const menu: VJSType<HTMLMenuElement>;
 declare const nav: VJSType<HTMLElement>;
-declare const object: VJSType<HTMLObjectElement>;
 declare const ol: VJSType<HTMLOListElement>;
 declare const optgroup: VJSType<HTMLOptGroupElement>;
 declare const option: VJSType<HTMLOptionElement>;
 declare const p: VJSType<HTMLParagraphElement>;
-declare const pre: VJSType<HTMLPreElement>;
 declare const progress: VJSType<HTMLProgressElement>;
 declare const q: VJSType<HTMLQuoteElement>;
 declare const section: VJSType<HTMLElement>;
@@ -548,25 +609,7 @@ declare const u: VJSType<HTMLUListElement>;
 declare const ul: VJSType<HTMLUListElement>;
 declare const video: VJSType<HTMLVideoElement>;
 declare const svg: (svg: string, properties?: VJS_props_TYPE) => HTMLSpanElement;
-
-/**
- *
- * Cradova Ajax
- * ------------------
- * your new axios alternative
- * supports files upload
- * @param url string
- * @param {{method: string;data;header;callbacks;}} opts
- * @returns unknown
- */
-declare function Ajax(url: string | URL, opts?: {
-    method?: "GET" | "POST";
-    data?: Record<string, unknown>;
-    header?: {
-        "content-type"?: string;
-    } & Record<string, string>;
-    callbacks?: Record<string, (arg: Function) => void>;
-}): Promise<string>;
+declare const raw: (html: string) => HTMLElement[];
 
 type TemplateType = <E extends HTMLElement>(...element_initials: VJS_params_TYPE<E | HTMLElement>) => E | HTMLElement | DocumentFragment;
 /**
@@ -576,21 +619,9 @@ type TemplateType = <E extends HTMLElement>(...element_initials: VJS_params_TYPE
  *  @example
  * // using template
  * const p = _("p");
- * _("p.class");
- * _("p#id");
- * _("p.class#id");
  * _("p.foo.bar#poo.loo");
  *
- * // using inline props
- *
- * _("p",{
- * text: "am a p tag",
- * style: {
- * color: "blue"
- * }
- * })
- *
- * // props and children
+ * // full example
  * _("p", // template first
  *  // property next if wanted
  *  {style: {color: "brown"}, // optional
@@ -604,4 +635,4 @@ type TemplateType = <E extends HTMLElement>(...element_initials: VJS_params_TYPE
  */
 declare const _: TemplateType;
 
-export { Ajax, CradovaEvent, Ref, Rhoda, Router, Screen, a, area, article, aside, assert, assertOr, audio, b, base, blockquote, br, button, canvas, caption, code, col, colgroup, createSignal, css, data, datalist, _ as default, details, dialog, div, em, embed, figure, footer, form, frag, h1, h2, h3, h4, h5, h6, head, header, hr, i, iframe, img, input, isNode, label, lazy, legend, li, link, loop, main, make, makeElement, menu, nav, object, ol, optgroup, option, p, pre, progress, q, reference, section, select, source, span, strong, summary, svg, table, tbody, td, template, textarea, th, title, tr, track, u, ul, useEffect, useRef, useState, video };
+export { $case, $if, $ifelse, $switch, CradovaEvent, Ref, Rhoda, Router, Screen, a, article, audio, br, button, canvas, caption, col, colgroup, createSignal, css, datalist, _ as default, details, dialog, div, em, embed, figure, footer, form, frag, h1, h2, h3, h4, h5, h6, head, header, hr, i, iframe, img, input, isNode, label, lazy, li, loop, main, make, makeElement, memo_SNRU, nav, ol, optgroup, option, p, progress, q, raw, reference, section, select, source, span, strong, summary, svg, table, tbody, td, template, textarea, th, title, tr, track, u, ul, useEffect, useRef, useState, video };

package/dist/index.js

@@ -8,14 +8,13 @@
    ╚██████╗   ██║  ██║  ██║  ██║   ███████╔╝   ████████      ╚███╔╝   ██║  ██║ 
     ╚═════╝   ╚═╝  ╚═╝  ╚═╝  ╚═╝   ╚══════╝     ╚════╝        ╚══╝    ╚═╝  ╚═╝ 
 =============================================================================
-Cradova FrameWork
-@version  3.0.0
+Cradova
+@version  3.3.0
 License: Apache V2
 Copyright 2022 Friday Candour. 
 Repository - https://github.com/fridaycandour/cradova
 =============================================================================
 */
-var u=r=>r instanceof HTMLElement||r instanceof DocumentFragment,H=class{constructor(){this.listeners={};}async addEventListener(e,t){this.listeners[e]||(this.listeners[e]=[]),this.listeners[e].push(t);}async dispatchEvent(e,t){let n=this.listeners[e]||[];for(;n.length!==0;)n.shift()?.call(void 0,t);}},h=new H;function b(r){let e=new DocumentFragment;for(let t of r)if(Array.isArray(t))e.appendChild(b(t));else {if(t instanceof T&&(t=t.render(void 0)),typeof t=="function"&&(t=t(),typeof t=="function"&&(t=t())),typeof t=="string"||typeof t=="number"){e.appendChild(document.createTextNode(t));continue}if(u(t))e.appendChild(t);else if(typeof t<"u")throw new Error("  \u2718  Cradova err:  invalid child type: "+t+" ("+typeof t+")")}return e}function A(r){if(Array.isArray(r)&&(r=r[0]),typeof r=="string"){let e=document.querySelector("style");if(e!==null){e.textContent=r+e.textContent;return}e=document.createElement("style"),e.textContent=r,document.head.appendChild(e);}}function N(r,...e){if(r)return e}function j(r,e,t){return r?e:t}function F(r,e){if(typeof e!="function")throw new Error(" \u2718  Cradova err :  Invalid component type, must be a function that returns html  ");return Array.isArray(r)?r.map(e):void 0}function x(){let r=0,e=window.location.href;for(let t=0;t<e.length;t++)r+=e.charCodeAt(t);return r.toString()}var T=class{constructor(e){this.effects=[];this.effectuate=null;this.rendered=!1;this.published=!1;this.preRendered=null;this.reference=new f;this._state=[];this._state_track={};this._state_index=0;this.component=e.bind(this);}preRender(e,t){this.reference._appendDomForce("html",this.render(e,t));}destroyPreRendered(){this.preRendered=null;}render(e,t){this.effects=[],this.rendered=!1;let n=this.component(e);return typeof n=="function"&&(n=n()),n||(n=this.preRendered),t&&(this.stash=e),u(n)?(this.reference._appendDomForce("html",n),this.effector.apply(this),this.rendered=!0,this.published=!0):console.error(" \u2718  Cradova err :  Invalid html content, got  - "+n),n}instance(){return this.reference.current("html")}_setExtra(e){this.Signal=e;}_roll_state(e,t,n=!1){return n||(this._state[t]=e),this._state[t]}_effect(e){this.rendered||this.effects.push(e.bind(this));}async effector(){if(!this.rendered){for(let e=0;e<this.effects.length;e++)await this.effects[e].apply(this);this.effects=[];}this.effectuate&&(this.effectuate(),this.effectuate=null);}updateState(e,t){this.rendered?this.published&&this.Activate(e):this.effectuate=()=>{this.published&&this.Activate(e);},t&&(this.stash=e);}async Activate(e){if(this._state_index=0,this.published=!1,!this.rendered)return;let t=this.component(e);if(typeof t=="function"&&(t=t()),u(t)){let n=this.reference.current("html");n&&(n.insertAdjacentElement("beforebegin",t),n.remove()),this.published=!0,this.reference._appendDomForce("html",t),h.dispatchEvent("onmountEvent");}else console.error(" \u2718  Cradova err :  Invalid html content, got  - "+t);}},M=function(r){let e=document.createDocumentFragment();for(let t=0;t<r.length;t++){let n=r[t];if(typeof n=="function"&&(n=n()),u(n)){e.appendChild(n);continue}if(n instanceof String){e.appendChild(document.createTextNode(n));continue}throw console.error(" \u2718  Cradova err:   wrong element type"+n),new TypeError(" \u2718  Cradova err:   invalid element")}return e},C=class{constructor(e){this._cb=e;}async load(){let e=await this._cb();typeof e=="function"?e=await e():e=await e;let t=e;t.default&&(this.content=t?.default);}},f=class{constructor(){this.tree={};this.globalTree={};}bindAs(e){return [this,e]}current(e){return this.tree[x()]?this.tree[x()][e]:null}_appendDomForce(e,t){let n=x();this.tree[n]?this.tree[n][e]=t:(this.tree[n]={},this.tree[n][e]=t);}_appendDomForceGlobal(e,t){this.globalTree[e]=t;}};function V(r,e){e._state_index+=1;let t=e._state_index;e._state_track[t]||(e._roll_state(r,t),e._state_track[t]=!0);function n(o){e._roll_state(o,t),e.updateState(o);}return [e._roll_state(null,t,!0),n]}function J(r,e){e._effect(r);}function O(){return new f}function k(r,e){if(r){if(typeof e=="object"&&!Array.isArray(e))for(let t in e){if(t==="style"&&typeof e[t]=="object"){for(let[o,i]of Object.entries(e[t]))if(typeof r.style[o]<"u"&&o!=="src"&&typeof i=="string")r.style[o]=i;else throw new Error("\u2718  Cradova err : "+o+" is not a valid css style property");continue}let n=e;if(typeof r[t]=="function"){t.startsWith("on")?r[t]=n[t]:r[t].apply(r);continue}if(t==="text"){r.innerText=n[t];continue}if(t==="tree"){r.innerHTML="",r.appendChild(M([n[t]]));continue}if(t.includes("data-")){r.setAttribute(t,n[t]);continue}r[t]=n[t];}if(typeof e=="string"){r.innerText=e;return}if(typeof e=="function"){r.appendChild(M([e]));return}if(e instanceof HTMLElement&&r.appendChild(e),!(typeof e=="object"&&!Array.isArray(e)))throw new Error(` \u2718  Cradova err: Cradova got invalid state  => 
-`+String(e))}}var _=class{constructor(e,t){this.persistName="";this.actions={};this.ref=[];if(this.value=e,t&&t.persistName){this.persistName=t.persistName;let n=localStorage.getItem(t.persistName);if(n&&n!=="undefined"&&(this.value=JSON.parse(n)),typeof e=="object")for(let o in e)Object.prototype.hasOwnProperty.call(this.value,o)||(this.value[o]=e[o]);}}set(e,t){typeof e=="function"?this.value=e(this.value):this.value=e,this.persistName&&localStorage.setItem(this.persistName,JSON.stringify(this.value)),this.ref.length&&t!==!1&&this._updateState(),this.callback&&this.callback(this.value);}setKey(e,t,n){if(typeof this.value=="object"&&!Array.isArray(this.value))this.value[e]=t,this.persistName&&localStorage.setItem(this.persistName,JSON.stringify(this.value)),this.ref.length&&n!==!1&&this._updateState(),this.callback&&this.callback(this.value);else throw new Error(`\u2718  Cradova err : can't set key ${String(e)} . store.value is not a javascript object`)}createAction(e,t){if(typeof e=="string"&&typeof t=="function")this.actions[e]=t;else throw new Error(`\u2718  Cradova err : can't create action, ${e} is not a function`)}createActions(e){for(let[t,n]of Object.entries(e))if(typeof t=="string"&&typeof n=="function")this.actions[t]=n;else throw new Error(`\u2718  Cradova err : can't create action, ${t} is not a function`)}fireAction(e,t){if(this._updateState(e,t),typeof this.actions[e]=="function")return this.actions[e].call(this,t);throw Error("\u2718  Cradova err : action "+e+"  does not exist!")}bind(e){if(typeof this.value=="object"&&typeof this.value[e]<"u")return [this,e];throw new Error("\u2718  Cradova err : can't bind an unavailable property!  "+e)}_updateState(e,t){if(e&&t)this.ref.map(n=>{if(n._event===e){if(n._element_property&&n._signalProperty){n.ref?.updateState({[n._element_property]:t[n._signalProperty]});return}if(n._element_property){n.ref.updateState({[n._element_property]:t});return}if(n._signalProperty){n.ref.updateState(t[n._signalProperty]);return}}});else for(let n=0;n<this.ref.length;n++){let o=this.ref[n];if(o._element_property&&o._signalProperty){o.ref.updateState({[o._element_property]:this.value[o._signalProperty]});continue}if(o._element_property){o.ref.updateState({[o._element_property]:this.value});continue}if(o._signalProperty){o.ref.updateState(this.value[o._signalProperty]);continue}if(!o._element_property&&!o._signalProperty){o.ref.updateState(this.value);continue}}}bindRef(e,t={signalProperty:"",_element_property:""}){if(e.render&&(e.render=e.render.bind(e,this.value)),e._setExtra&&e._setExtra(this),e&&e.updateState){this.ref.push({ref:e,_signalProperty:t.signalProperty,_element_property:t._element_property,_event:t.event});return}throw new Error("\u2718  Cradova err :  Invalid parameters for binding ref to Signal")}listen(e){this.callback=e;}clearPersist(){this.persistName&&localStorage.removeItem(this.persistName);}};var v=new f,g=class{constructor(e){this._errorHandler=null;this._packed=!1;this._template=document.createElement("div");this._persist=!0;this._delegatedRoutesCount=-1;this._dropped=!1;let{template:t,name:n,persist:o,renderInParallel:i,transition:l}=e;this._html=t,this._name=n||"Document",this._transition=l,this._template.setAttribute("id","cradova-screen-set"),i===!0?(this._delegatedRoutesCount=0,this._persist=!1):typeof o=="boolean"&&(this._persist=o);}_derive(){return {_name:this._name,_transition:this._transition,_callBack:this._callBack,_deCallBack:this._deCallBack}}_apply_derivation(e){this._name=e._name,this._transition=e._transition,this._callBack=e._callBack,this._deCallBack=e._deCallBack;}get _delegatedRoutes(){return this._delegatedRoutesCount>100?-1:this._delegatedRoutesCount}set _delegatedRoutes(e){e&&(this._delegatedRoutesCount+=1);}setErrorHandler(e){this._errorHandler=e;}async _package(){if(typeof this._html=="function"){let e=await this._html.apply(this);if(typeof e=="function")e=e(),u(e)&&(this._template.innerHTML="",this._template.appendChild(e));else if(u(e))this._template.innerHTML="",this._template.appendChild(e);else throw new Error(` \u2718  Cradova err:  template function for the screen with name '${this._name}' returned ${e} instead of html`)}}onActivate(e){this._callBack=e;}onDeactivate(e){this._deCallBack=e;}async _deActivate(){this._deCallBack&&await this._deCallBack(),this._transition&&this._template.classList.remove(this._transition);}drop(e){if(typeof e=="boolean"){this._dropped=e;return}else return this._dropped}async _Activate(e=!1){if(this._dropped){history.go(-1);return}(!this._persist||e||!this._packed)&&(await this._package(),this._packed=!0),this._transition&&this._template.classList.add(this._transition),document.title=this._name,v.globalTree.doc.innerHTML="",v.globalTree.doc.appendChild(this._template),h.dispatchEvent("onmountEvent"),window.scrollTo({top:0,left:0,behavior:"instant"}),this._callBack&&this._callBack();}};var s={};s.lastNavigatedRouteController=null;s.nextRouteController=null;s.lastNavigatedRoute=null;s.pageShow=null;s.pageHide=null;s.errorHandler=null;s.loadingScreen=null;s.params={};s.routes={};s.pageevents=[];s.paused=!1;s.start_pageevents=async function(r){setTimeout(()=>{for(let e=0;e<s.pageevents.length;e++)s.pageevents[e](r);},100);};var S=r=>{if(s.routes[r])return [s.routes[r],{path:r}];if(s.routes[r+"/"])return [s.routes[r],{path:r}];for(let e in s.routes){if(!e.includes(":"))continue;let t=r.split("/"),n=e.split("/");r.endsWith("/")&&t.pop();let o=0,i=0;if(t.shift(),n.shift(),n.length===t.length){let l={_path:""};for(let c=0;c<n.length;c++){if(n[c].includes(":")){i++;continue}t[c]===n[c]&&o++;}if(o+i===n.length){for(let c=0;c<n.length;c++)n[c].includes(":")&&(l[n[c].split(":")[1]]=t[c]);return l._path=e,[s.routes[e],l]}}}return []};s.route=(r,e)=>{if(typeof e<"u"){if(e&&!e._Activate)throw console.error(" \u2718  Cradova err:  not a valid screen  ",e),new Error(" \u2718  Cradova err:  Not a valid cradova screen component");return s.routes[r]=e}};s.router=async function(r,e){let t=window.location.pathname,n,o;if(s.paused){window.location.hash="paused";return}if(t!==s.lastNavigatedRoute)if(s.nextRouteController?(n=s.nextRouteController,s.nextRouteController=null):[n,o]=S(t),typeof n<"u")try{if(typeof n=="function"&&(s.LoadingScreen&&s.LoadingScreen._Activate&&await s.LoadingScreen._Activate(),n=await n(),!n)){s.lastNavigatedRoute&&history.pushState({},t,s.lastNavigatedRoute);return}if(n._delegatedRoutes!==-1){n._delegatedRoutes=!0;let i=n._derive();n=new g({template:n._html}),n._apply_derivation(i),s.routes[t]=n,h.dispatchEvent("onTransition");}o&&(s.params.params=o),await n._Activate(e),s.start_pageevents(t),s.lastNavigatedRouteController&&s.lastNavigatedRouteController._deActivate(),s.lastNavigatedRoute=t,s.lastNavigatedRouteController=n;}catch(i){if(n&&n._errorHandler)n._errorHandler(i);else if(s.errorHandler)s.errorHandler(i);else throw console.error(i),new Error(" \u2718  Cradova err:  consider adding error boundary to the specific screen  ")}else s.routes["*"]&&await s.routes["*"]._Activate(e);};var y=class{static BrowserRoutes(e){for(let t in e){let n=e[t];typeof n=="object"&&typeof n.then=="function"||typeof n=="function"?s.routes[t]=async()=>(n=await(typeof n=="function"?await n():await n),s.route(t,n?.default||n)):s.route(t,n);}y._mount();}static back(){history.go(-1);}static forward(){history.go(1);}static pauseNaviagtion(){s.paused=!0,window.location.hash="paused";}static resumeNaviagtion(){s.paused=!1,window.location.replace(window.location.pathname+window.location.search),history.go(-1);}static navigate(e,t=null,n=!1){if(typeof e!="string")throw new TypeError(" \u2718  Cradova err:  href must be a defined path but got "+e+" instead");let o=null,i;if(e.includes("://"))window.location.href=e;else {if(e===window.location.pathname)return;[o,i]=S(e),o&&(s.nextRouteController=o,window.history.pushState({},"",e)),s.params.params=i,s.params.data=t,s.router(null,n);}}static navigateNauturally(e){if(typeof e!="string")throw new TypeError(" \u2718  Cradova err:  pathname must be a defined path but got "+e+" instead");window.location.pathname=e;}static setLoadingScreen(e){if(e instanceof g)s.LoadingScreen=e;else throw new Error(" \u2718  Cradova err:  Loading Screen should be a cradova screen class")}static onPageEvent(e){if(typeof e=="function")s.pageevents.push(e);else throw new Error(" \u2718  Cradova err:  callback for pageShow event is not a function")}static async packageScreen(e,t={}){if(!s.routes[e])throw console.error(" \u2718  Cradova err:  no screen with path "+e),new Error(" \u2718  Cradova err:  cradova err: Not a defined screen path");let[n,o]=S(e);!n._Activate&&typeof n=="function"&&(n=await n()),n._delegatedRoutes!==-1&&(n._delegatedRoutes=!0,n=new g({name:n._name,template:n._html}),s.routes[e]=n),n._package(Object.assign(t,o||{})),n._packed=!0;}static getParams(){return s.params}static addErrorHandler(e){if(typeof e=="function")s.errorHandler=e;else throw new Error(" \u2718  Cradova err:  callback for error event is not a function")}static _mount(){let e=document.querySelector("[data-wrapper=app]");e?v._appendDomForceGlobal("doc",e):(e=document.createElement("div"),e.setAttribute("data-wrapper","app"),document.body.appendChild(e),v._appendDomForceGlobal("doc",e)),window.addEventListener("pageshow",s.router),window.addEventListener("popstate",t=>{t.preventDefault(),s.router();});}};var E=(r,e)=>{let t={},n=null;if(e.length!==0)for(let o=0;o<e.length;o++){let i=e[o];if(typeof i=="function"&&(i=i()),i instanceof T&&(i=i.render()),u(i)){r.appendChild(i);continue}if(Array.isArray(i)){r.appendChild(b(i));continue}if(typeof i=="string"||typeof i=="number"){n=i;continue}if(typeof i=="object"){t=Object.assign(t,i);continue}}else return r;if(typeof t=="object"&&r)for(let[o,i]of Object.entries(t)){if(o==="style"&&typeof i=="object"){Object.assign(r.style,i);continue}if(Array.isArray(i)){if(i[0]instanceof _){r.updateState=k.bind(null,r),i[0].bindRef(r,{_element_property:o,signalProperty:i[1]});continue}if(o=="reference"&&i[0]instanceof f){r.updateState=k.bind(null,r),i[0]._appendDomForce(i[1],r);continue}}if(o==="onmount"&&typeof t.onmount=="function"){let l=()=>{t.onmount?.apply(r),t.onmount=void 0;};h.addEventListener("onmountEvent",l);continue}if(o.includes("data-")){r.setAttribute(o,i);continue}if(o.includes("aria-")){r.setAttribute(o,i);continue}if(o==="href"&&typeof i=="string"){let l=i||"";l.includes("://")||r.addEventListener("click",c=>{c.preventDefault(),y.navigate(r.pathname);if(l.includes("#")){let p=l.split("#").at(-1);document.getElementById("#"+p)?.scrollIntoView();}}),r.setAttribute(o,i);continue}if(typeof r.style[o]<"u"&&o!=="src"){r.style[o]=i;continue}r[o]=i;}return n&&r.appendChild(document.createTextNode(n)),r},R=function(r){if(typeof r!="string")return [];Array.isArray(r)&&(r=r[0]);let e="";if(r.includes("|")&&([r,e]=r.split("|"),!r))return ["P",void 0,void 0,e];let t;if(r.includes("#")){if(!r.includes("."))return r=r.split("#"),t=r.shift(),t||(t="DIV"),r[0].includes(" ")&&(r=[r[0].split(" ")[1]]),[t,r[0],void 0,e]}else return r=r.split("."),t=r.shift(),t||(t="DIV"),[t,void 0,r.join(" "),e];r=r.split(".");let n=[],o=[];t=!r[0].includes("#")&&r.shift(),t||(t="DIV");for(let i=0;i<r.length;i++){if(r[i].includes("#")){let l=r[i].split("#");if(o.push(l[1]),i===0){t=l[0];continue}n.push(l[0]);continue}n.push(r[i]);}return [t,o[0],n.join(" "),e]},a=r=>(...t)=>E(document.createElement(r),t),te=a("a"),ne=a("area"),re=a("article"),oe=a("aside"),ae=a("audio"),ie=a("b"),se=a("base"),le=a("blockquote"),ce=a("br"),pe=a("button"),ue=a("canvas"),de=a("caption"),fe=a("code"),me=a("col"),he=a("colgroup"),ge=a("data"),ye=a("datalist"),Te=a("details"),_e=a("dialog"),ve=a("div"),Ee=a("em"),we=a("embed"),Le=a("figure"),xe=a("footer"),He=a("form"),be=a("h1"),Me=a("h2"),ke=a("h3"),Se=a("h4"),Ce=a("h5"),Re=a("h6"),De=a("head"),Pe=a("header"),Ae=a("hr"),Ne=a("i"),je=a("iframe"),Fe=a("img"),Ve=a("input"),Je=a("label"),Oe=a("legend"),Be=a("li"),Ie=a("link"),Ye=a("main"),qe=a("menu"),Ge=a("nav"),$e=a("object"),Ue=a("ol"),Xe=a("optgroup"),Ke=a("option"),We=a("p"),Qe=a("pre"),Ze=a("progress"),ze=a("q"),et=a("section"),tt=a("select"),nt=a("source"),rt=a("span"),ot=a("strong"),at=a("summary"),it=a("table"),st=a("tbody"),lt=a("td"),ct=a("template"),pt=a("textarea"),ut=a("th"),dt=a("title"),ft=a("tr"),mt=a("track"),ht=a("u"),gt=a("ul"),yt=a("video"),Tt=(r,e)=>{let t=document.createElement("span");return t.innerHTML=r,E(t,[e])};function D(r,e={}){let{method:t,data:n,header:o,callbacks:i}=e;if(typeof r!="string")throw new Error("\u2718  Cradova err : Ajax invalid url "+r);return new Promise(function(l,c){let p=new XMLHttpRequest,w=new FormData;if(i&&typeof i=="object")for(let[m,L]of Object.entries(i))p.addEventListener(m,L);if(p.addEventListener("load",function(){l(p.response);}),n&&typeof n=="object")for(let[m,L]of Object.entries(n)){let d=L;typeof d=="object"&&d&&!d.name&&(d=JSON.stringify(d),w.set(m,d)),typeof d=="string"&&w.set(m,d);}p.addEventListener("error",()=>{navigator.onLine?c(JSON.stringify({message:"problem with the action, please try again!"})):c(JSON.stringify({message:"this device is offline!"}));}),t?p.open(t,r,!0):p.open(n&&typeof n=="object"?"POST":"GET",r,!0),o&&typeof o=="object"&&Object.keys(o).forEach(function(m){p.setRequestHeader(m,o[m]);}),p.send(w);})}var P=(...r)=>{let{0:e,1:t,2:n,3:o}=R(r[0]),i=e?document.createElement(e):new DocumentFragment;return e&&(n&&(i.className=n),t&&(i.id=t),o&&(i.innerText=o),r.shift()),E(i,r)},wt=P;
+var p=r=>r instanceof HTMLElement||r instanceof DocumentFragment,T=class{constructor(){this.listeners={};this.active_listeners={};}async addEventListener(e,t){this.listeners[e]||(this.listeners[e]=[]),this.listeners[e].push(t);}async addActiveEventListener(e,t){this.listeners[e]||(this.listeners[e]=[]),this.active_listeners[e].push(t);}async dispatchEvent(e,t){let n=this.listeners[e]||[];for(;n.length!==0;)n.shift()(t);}async dispatchActiveEvent(e,t){let n=this.listeners[e]||[];n.length&&w();for(let o=0;o<n.length;o++)n[o](t);}},f=new T;function E(r){let e=new DocumentFragment;for(let t of r)if(Array.isArray(t))e.appendChild(E(t));else {if(t instanceof v&&(t=t.render(void 0)),typeof t=="function"&&(t=t(),typeof t=="function"&&(t=t())),typeof t=="string"||typeof t=="number"){e.appendChild(document.createTextNode(t));continue}if(p(t))e.appendChild(t);else if(typeof t<"u")throw new Error("  \u2718  Cradova err:  invalid child type: "+t+" ("+typeof t+")")}return e}function k(r){if(Array.isArray(r)&&(r=r[0]),typeof r=="string"){let e=document.querySelector("style");if(e!==null){e.textContent=r+e.textContent;return}e=document.createElement("style"),e.textContent=r,document.head.appendChild(e);}}function S(r,...e){if(r)return e}function C(r,e,t){return r?e:t}function R(r,...e){return t=>{if(t===r)return e}}function D(r,...e){if(e.length)for(let t=0;t<e.length;t++){let n=e[t],o=n(r);if(o)return o}}function P(r,e){if(typeof e!="function")throw new Error(" \u2718  Cradova err :  Invalid component type, must be a function that returns html  ");return Array.isArray(r)?r.map(e):void 0}var d;function w(){let r=0,e=window.location.href;for(let t=0;t<e.length;t++)r+=e.charCodeAt(t);d=r.toString();}var v=class{constructor(e,t){this.effects=[];this.effectuate=null;this.rendered=!1;this.published=!1;this.preRendered=null;this.reference=new u;this._state=[];this._state_track={};this._state_index=0;this.component=e.bind(this),t&&(t===!0||t.active)&&f.addActiveEventListener("active-Refs",()=>{this.updateState(this.stash);});}preRender(e,t){this.reference._appendDomForce("html",this.render(e,t));}destroyPreRendered(){this.preRendered=null;}define(e,t){typeof e=="string"&&typeof t=="function"&&!Object.prototype.hasOwnProperty.call(this,e)?this[e]=t.bind(this):console.error(" \u2718  Cradova err :  Invalid Ref.define parameters");}render(e,t){this.effects=[],this.rendered=!1;let n=this.component(e);return typeof n=="function"&&(n=n()),n||(n=this.preRendered),t&&(this.stash=e),p(n)?(this.reference._appendDomForce("html",n),this.effector.apply(this),this.rendered=!0,this.published=!0):console.error(" \u2718  Cradova err :  Invalid html content, got  - "+n),n}instance(){return this.reference.current("html")}_setExtra(e){this.Signal=e;}_roll_state(e,t,n=!1){return n||(this._state[t]=e),this._state[t]}_effect(e){this.rendered||this.effects.push(e.bind(this));}async effector(){if(!this.rendered){for(let e=0;e<this.effects.length;e++)await this.effects[e].apply(this);this.effects=[];}this.effectuate&&(this.effectuate(),this.effectuate=null);}updateState(e,t){this.rendered?this.published&&this.Activate(e):this.effectuate=()=>{this.published&&this.Activate(e);},t&&(this.stash=e);}async Activate(e){if(this._state_index=0,this.published=!1,!this.rendered)return;let t=this.component(e);if(typeof t=="function"&&(t=t()),p(t)){let n=this.reference.current("html");n&&(n.insertAdjacentElement("beforebegin",t),n.remove()),this.published=!0,this.reference._appendDomForce("html",t),f.dispatchEvent("onmountEvent");}else console.error(" \u2718  Cradova err :  Invalid html content, got  - "+t);}},A=function(r){let e=document.createDocumentFragment();for(let t=0;t<r.length;t++){let n=r[t];if(typeof n=="function"&&(n=n()),p(n)){e.appendChild(n);continue}if(n instanceof String){e.appendChild(document.createTextNode(n));continue}throw console.error(" \u2718  Cradova err:   wrong element type"+n),new TypeError(" \u2718  Cradova err:   invalid element")}return e},H=class{constructor(e){this._cb=e;}async load(){let e=await this._cb();typeof e=="function"?e=await e():e=await e;let t=e;t.default&&(this.content=t?.default);}},u=class{constructor(){this.tree={};this.globalTree={};}bindAs(e){return [this,e]}current(e){return this.tree[d]?this.tree[d][e]:null}_appendDomForce(e,t){this.tree[d]?this.tree[d][e]=t:(this.tree[d]={},this.tree[d][e]=t);}_appendDomForceGlobal(e,t){this.globalTree[e]=t;}};function N(r,e){e._state_index+=1;let t=e._state_index;e._state_track[t]||(e._roll_state(r,t),e._state_track[t]=!0);function n(o){e._roll_state(o,t),e.updateState(o);}return [e._roll_state(null,t,!0),n]}function F(r,e){e._effect(r);}function V(){return new u}var y=class{constructor(e,t){this.persistName="";this.actions={};this.ref=[];if(this.value=e,t&&t.persistName){this.persistName=t.persistName;let n=localStorage.getItem(t.persistName);if(n&&n!=="undefined"&&(this.value=JSON.parse(n)),typeof e=="object")for(let o in e)Object.prototype.hasOwnProperty.call(this.value,o)||(this.value[o]=e[o]);}}set(e,t){typeof e=="function"?this.value=e(this.value):this.value=e,this.persistName&&localStorage.setItem(this.persistName,JSON.stringify(this.value)),this.ref.length&&t!==!1&&this._updateState(),this.callback&&this.callback(this.value);}setKey(e,t,n){if(typeof this.value=="object"&&!Array.isArray(this.value))this.value[e]=t,this.persistName&&localStorage.setItem(this.persistName,JSON.stringify(this.value)),this.ref.length&&n!==!1&&this._updateState(),this.callback&&this.callback(this.value);else throw new Error(`\u2718  Cradova err : can't set key ${String(e)} . store.value is not a javascript object`)}createAction(e,t){if(typeof e=="string"&&typeof t=="function")this.actions[e]=t;else throw new Error(`\u2718  Cradova err : can't create action, ${e} is not a function`)}createActions(e){for(let[t,n]of Object.entries(e))if(typeof t=="string"&&typeof n=="function")this.actions[t]=n;else throw new Error(`\u2718  Cradova err : can't create action, ${t} is not a function`)}fireAction(e,t){if(this._updateState(e,t),typeof this.actions[e]=="function")return this.actions[e].call(this,t);throw Error("\u2718  Cradova err : action "+e+"  does not exist!")}bind(e){if(typeof this.value=="object"&&typeof this.value[e]<"u")return [this,e];throw new Error("\u2718  Cradova err : can't bind an unavailable property!  "+e)}_updateState(e,t){if(e&&t)this.ref.map(n=>{if(n._event===e){if(n._element_property&&n._signalProperty){n.ref?.updateState({[n._element_property]:t[n._signalProperty]});return}if(n._element_property){n.ref.updateState({[n._element_property]:t});return}if(n._signalProperty){n.ref.updateState(t[n._signalProperty]);return}}});else for(let n=0;n<this.ref.length;n++){let o=this.ref[n];if(o._element_property&&o._signalProperty){o.ref.updateState({[o._element_property]:this.value[o._signalProperty]});continue}if(o._element_property){o.ref.updateState({[o._element_property]:this.value});continue}if(o._signalProperty){o.ref.updateState(this.value[o._signalProperty]);continue}if(!o._element_property&&!o._signalProperty){o.ref.updateState(this.value);continue}}}bindRef(e,t={signalProperty:"",_element_property:""}){if(e.render&&(e.render=e.render.bind(e,this.value)),e._setExtra&&e._setExtra(this),e&&e.updateState){this.ref.push({ref:e,_signalProperty:t.signalProperty,_element_property:t._element_property,_event:t.event});return}throw new Error("\u2718  Cradova err :  Invalid parameters for binding ref to Signal")}listen(e){this.callback=e;}clearPersist(){this.persistName&&localStorage.removeItem(this.persistName);}};var m=new u,h=class{constructor(e){this._packed=!1;this._template=document.createElement("div");this._persist=!0;this._delegatedRoutesCount=-1;this._dropped=!1;this._errorHandler=null;let{template:t,name:n,persist:o,renderInParallel:s}=e;this._html=t,this._name=n||"Document",this._template.setAttribute("id","cradova-screen-set"),s===!0?(this._delegatedRoutesCount=0,this._persist=!1):typeof o=="boolean"&&(this._persist=o);}_derive(){return {_name:this._name,_callBack:this._callBack,_deCallBack:this._deCallBack}}_apply_derivation(e){this._name=e._name,this._callBack=e._callBack,this._deCallBack=e._deCallBack;}get _delegatedRoutes(){return this._delegatedRoutesCount>100?-1:this._delegatedRoutesCount}set _delegatedRoutes(e){e&&(this._delegatedRoutesCount+=1);}setErrorHandler(e){this._errorHandler=e;}async _package(){if(typeof this._html=="function"){let e=await this._html.apply(this);if(typeof e=="function")e=e(),p(e)&&(this._template.innerHTML="",this._template.appendChild(e));else if(p(e))this._template.innerHTML="",this._template.appendChild(e);else throw new Error(` \u2718  Cradova err:  template function for the screen with name '${this._name}' returned ${e} instead of html`)}}onActivate(e){this._callBack=e;}onDeactivate(e){this._deCallBack=e;}async _deActivate(){this._deCallBack&&await this._deCallBack(m.globalTree.doc);}drop(e){if(typeof e=="boolean"){this._dropped=e;return}else return this._dropped}async _Activate(e=!1){if(this._dropped){history.go(-1);return}!this._persist||e||!this._packed?(w(),await this._package(),this._packed=!0):f.dispatchActiveEvent("active-Refs"),document.title=this._name,m.globalTree.doc.innerHTML="",m.globalTree.doc.appendChild(this._template),f.dispatchEvent("onmountEvent"),window.scrollTo({top:0,left:0,behavior:"instant"}),this._callBack&&await this._callBack(m.globalTree.doc);}};var a={};a.lastNavigatedRouteController=null;a.nextRouteController=null;a.lastNavigatedRoute=null;a.pageShow=null;a.pageHide=null;a.errorHandler=null;a.loadingScreen=null;a.params={};a.routes={};a.pageevents=[];a.paused=!1;a.start_pageevents=async function(r){setTimeout(()=>{for(let e=0;e<a.pageevents.length;e++)a.pageevents[e](r);},100);};var L=r=>{if(a.routes[r])return [a.routes[r],{path:r}];if(a.routes[r+"/"])return [a.routes[r],{path:r}];for(let e in a.routes){if(!e.includes(":"))continue;let t=r.split("/"),n=e.split("/");r.endsWith("/")&&t.pop();let o=0,s=0;if(t.shift(),n.shift(),n.length===t.length){let l={_path:""};for(let c=0;c<n.length;c++){if(n[c].includes(":")){s++;continue}t[c]===n[c]&&o++;}if(o+s===n.length){for(let c=0;c<n.length;c++)n[c].includes(":")&&(l[n[c].split(":")[1]]=t[c]);return l._path=e,[a.routes[e],l]}}}return []};a.route=(r,e)=>{if(typeof e<"u"){if(e&&!e._Activate)throw console.error(" \u2718  Cradova err:  not a valid screen  ",e),new Error(" \u2718  Cradova err:  Not a valid cradova screen component");return a.routes[r]=e}};a.router=async function(r,e){let t=window.location.pathname,n,o;if(a.paused){window.location.hash="paused";return}if(t!==a.lastNavigatedRoute)if(a.nextRouteController?(n=a.nextRouteController,a.nextRouteController=null):[n,o]=L(t),typeof n<"u")try{if(typeof n=="function"&&(a.LoadingScreen&&a.LoadingScreen._Activate&&await a.LoadingScreen._Activate(),n=await n(),!n)){a.lastNavigatedRoute&&history.pushState({},t,a.lastNavigatedRoute);return}if(n._delegatedRoutes!==-1){n._delegatedRoutes=!0;let s=n._derive();n=new h({template:n._html}),n._apply_derivation(s),a.routes[t]=n;}o&&(a.params.params=o),await n._Activate(e),a.start_pageevents(t),a.lastNavigatedRouteController&&a.lastNavigatedRouteController._deActivate(),a.lastNavigatedRoute=t,a.lastNavigatedRouteController=n;}catch(s){if(n&&n._errorHandler)n._errorHandler(s);else if(a.errorHandler)a.errorHandler(s);else throw console.error(s),new Error(" \u2718  Cradova err:  consider adding error boundary to the specific screen  ")}else a.routes["*"]&&await a.routes["*"]._Activate(e);};var g=class{static BrowserRoutes(e){for(let t in e){let n=e[t];typeof n=="object"&&typeof n.then=="function"||typeof n=="function"?a.routes[t]=async()=>(n=await(typeof n=="function"?await n():await n),a.route(t,n?.default||n)):a.route(t,n);}g._mount();}static back(){history.go(-1);}static forward(){history.go(1);}static pauseNaviagtion(){a.paused=!0,window.location.hash="paused";}static resumeNaviagtion(){a.paused=!1,window.location.replace(window.location.pathname+window.location.search),history.go(-1);}static navigate(e,t=null,n=!1){if(typeof e!="string")throw new TypeError(" \u2718  Cradova err:  href must be a defined path but got "+e+" instead");let o=null,s;if(e.includes("://"))window.location.href=e;else {if(e===window.location.pathname)return;[o,s]=L(e),o&&(a.nextRouteController=o,window.history.pushState({},"",e)),a.params.params=s,a.params.data=t,a.router(null,n);}}static navigateNauturally(e){if(typeof e!="string")throw new TypeError(" \u2718  Cradova err:  pathname must be a defined path but got "+e+" instead");window.location.pathname=e;}static setLoadingScreen(e){if(e instanceof h)a.LoadingScreen=e;else throw new Error(" \u2718  Cradova err:  Loading Screen should be a cradova screen class")}static onPageEvent(e){if(typeof e=="function")a.pageevents.push(e);else throw new Error(" \u2718  Cradova err:  callback for pageShow event is not a function")}static async packageScreen(e,t={}){if(!a.routes[e])throw console.error(" \u2718  Cradova err:  no screen with path "+e),new Error(" \u2718  Cradova err:  cradova err: Not a defined screen path");let[n,o]=L(e);!n._Activate&&typeof n=="function"&&(n=await n()),n._delegatedRoutes!==-1&&(n._delegatedRoutes=!0,n=new h({name:n._name,template:n._html}),a.routes[e]=n),n._package(Object.assign(t,o||{})),n._packed=!0;}static getParams(){return a.params}static addErrorHandler(e){if(typeof e=="function")a.errorHandler=e;else throw new Error(" \u2718  Cradova err:  callback for error event is not a function")}static _mount(){let e=document.querySelector("[data-wrapper=app]");e?m._appendDomForceGlobal("doc",e):(e=document.createElement("div"),e.setAttribute("data-wrapper","app"),document.body.appendChild(e),m._appendDomForceGlobal("doc",e)),window.addEventListener("pageshow",a.router),window.addEventListener("popstate",t=>{t.preventDefault(),a.router();});}};var _=(r,e)=>{let t={},n=null;if(e.length!==0)for(let o=0;o<e.length;o++){let s=e[o];if(typeof s=="function"&&(s=s()),s instanceof v&&(s=s.render()),p(s)){r.appendChild(s);continue}if(Array.isArray(s)){r.appendChild(E(s));continue}if(typeof s=="string"||typeof s=="number"){n=s;continue}if(typeof s=="object"){t=Object.assign(t,s);continue}}else return r;if(typeof t=="object"&&r)for(let[o,s]of Object.entries(t)){if(o==="style"&&typeof s=="object"){Object.assign(r.style,s);continue}if(Array.isArray(s)){if(o=="reference"&&s[0]instanceof u){s[0]._appendDomForce(s[1],r);continue}if(s[0]instanceof y){s[0].bindRef(r,{_element_property:o,signalProperty:s[1]});continue}}if(o==="onmount"&&typeof t.onmount=="function"){let l=()=>{t.onmount?.apply(r),t.onmount=void 0;};f.addEventListener("onmountEvent",l);continue}if(o.includes("data-")){r.setAttribute(o,s);continue}if(o.includes("aria-")){r.setAttribute(o,s);continue}if(o==="href"&&typeof s=="string"){let l=s||"";l.includes("://")||r.addEventListener("click",c=>{c.preventDefault(),g.navigate(r.pathname);if(l.includes("#")){let b=l.split("#").at(-1);document.getElementById("#"+b)?.scrollIntoView();}}),r.setAttribute(o,s);continue}if(typeof r.style[o]<"u"&&o!=="src"){r.style[o]=s;continue}r[o]=s;}return n&&r.appendChild(document.createTextNode(n)),r},x=function(r){if(typeof r!="string")return [];Array.isArray(r)&&(r=r[0]);let e="";if(r.includes("|")&&([r,e]=r.split("|"),!r))return ["P",void 0,void 0,e];let t;if(r.includes("#")){if(!r.includes("."))return r=r.split("#"),t=r.shift(),t||(t="DIV"),r[0].includes(" ")&&(r=[r[0].split(" ")[1]]),[t,r[0],void 0,e]}else return r=r.split("."),t=r.shift(),t||(t="DIV"),[t,void 0,r.join(" "),e];r=r.split(".");let n=[],o=[];t=!r[0].includes("#")&&r.shift(),t||(t="DIV");for(let s=0;s<r.length;s++){if(r[s].includes("#")){let l=r[s].split("#");if(o.push(l[1]),s===0){t=l[0];continue}n.push(l[0]);continue}n.push(r[s]);}return [t,o[0],n.join(" "),e]},i=r=>(...t)=>_(document.createElement(r),t),Q=i("a"),W=i("article"),X=i("audio"),Z=i("br"),z=i("button"),ee=i("canvas"),te=i("caption"),ne=i("col"),re=i("colgroup"),oe=i("datalist"),ae=i("details"),ie=i("dialog"),se=i("div"),le=i("em"),ce=i("embed"),pe=i("figure"),ue=i("footer"),de=i("form"),fe=i("h1"),me=i("h2"),he=i("h3"),ge=i("h4"),ve=i("h5"),ye=i("h6"),_e=i("head"),Te=i("header"),Ee=i("hr"),we=i("i"),Le=i("iframe"),He=i("img"),xe=i("input"),be=i("label"),Me=i("li"),ke=i("main"),Se=i("nav"),Ce=i("ol"),Re=i("optgroup"),De=i("option"),Pe=i("p"),Ae=i("progress"),Ne=i("q"),Fe=i("section"),Ve=i("select"),Be=i("source"),Je=i("span"),Ie=i("strong"),je=i("summary"),Oe=i("table"),Ye=i("tbody"),$e=i("td"),Ge=i("template"),Ue=i("textarea"),qe=i("th"),Ke=i("title"),Qe=i("tr"),We=i("track"),Xe=i("u"),Ze=i("ul"),ze=i("video"),et=(r,e)=>{let t=document.createElement("span");return t.innerHTML=r,_(t,[e])},tt=r=>{let e=document.createElement("div");return e.innerHTML=r,Array.from(e.children)};var M=(...r)=>{let{0:e,1:t,2:n,3:o}=x(r[0]),s=e?document.createElement(e):new DocumentFragment;return e&&(n&&(s.className=n),t&&(s.id=t),o&&(s.innerText=o),r.shift()),_(s,r)},ot=M;
 
-export { D as Ajax, h as CradovaEvent, T as Ref, b as Rhoda, y as Router, g as Screen, te as a, ne as area, re as article, oe as aside, N as assert, j as assertOr, ae as audio, ie as b, se as base, le as blockquote, ce as br, pe as button, ue as canvas, de as caption, fe as code, me as col, he as colgroup, _ as createSignal, A as css, ge as data, ye as datalist, wt as default, Te as details, _e as dialog, ve as div, Ee as em, we as embed, Le as figure, xe as footer, He as form, M as frag, be as h1, Me as h2, ke as h3, Se as h4, Ce as h5, Re as h6, De as head, Pe as header, Ae as hr, Ne as i, je as iframe, Fe as img, Ve as input, u as isNode, Je as label, C as lazy, Oe as legend, Be as li, Ie as link, F as loop, Ye as main, R as make, E as makeElement, qe as menu, Ge as nav, $e as object, Ue as ol, Xe as optgroup, Ke as option, We as p, Qe as pre, Ze as progress, ze as q, f as reference, et as section, tt as select, nt as source, rt as span, ot as strong, at as summary, Tt as svg, it as table, st as tbody, lt as td, ct as template, pt as textarea, ut as th, dt as title, ft as tr, mt as track, ht as u, gt as ul, J as useEffect, O as useRef, V as useState, yt as video };
+export { R as $case, S as $if, C as $ifelse, D as $switch, f as CradovaEvent, v as Ref, E as Rhoda, g as Router, h as Screen, Q as a, W as article, X as audio, Z as br, z as button, ee as canvas, te as caption, ne as col, re as colgroup, y as createSignal, k as css, oe as datalist, ot as default, ae as details, ie as dialog, se as div, le as em, ce as embed, pe as figure, ue as footer, de as form, A as frag, fe as h1, me as h2, he as h3, ge as h4, ve as h5, ye as h6, _e as head, Te as header, Ee as hr, we as i, Le as iframe, He as img, xe as input, p as isNode, be as label, H as lazy, Me as li, P as loop, ke as main, x as make, _ as makeElement, w as memo_SNRU, Se as nav, Ce as ol, Re as optgroup, De as option, Pe as p, Ae as progress, Ne as q, tt as raw, u as reference, Fe as section, Ve as select, Be as source, Je as span, Ie as strong, je as summary, et as svg, Oe as table, Ye as tbody, $e as td, Ge as template, Ue as textarea, qe as th, Ke as title, Qe as tr, We as track, Xe as u, Ze as ul, F as useEffect, V as useRef, N as useState, ze as video };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "cradova",
-  "version": "3.2.2",
-  "description": "Web framework for building web apps and PWAs",
+  "version": "3.3.0",
+  "description": "Web framework for building powerful web apps",
   "main": "dist/index.js",
   "type": "module",
   "files": [
@@ -18,14 +18,17 @@
     "lint": "eslint . --fix"
   },
   "keywords": [
-    "javascript",
-    "typescript",
-    "frontend",
-    "framework",
     "PWA",
-    "web",
-    "app",
-    "mobile"
+    "webapp",
+    "parallel rendering",
+    "conditionals",
+    "prerendering",
+    "cradova elements",
+    "Refs",
+    "createSignal",
+    "VJS",
+    "vjs specification",
+    "cradova"
   ],
   "author": {
     "name": "friday candour",
@@ -57,15 +60,12 @@
   },
   "homepage": "https://github.com/FridayCandour/cradova",
   "devDependencies": {
-    "@types/jest": "^29.2.4",
     "@typescript-eslint/eslint-plugin": "^5.47.0",
     "@typescript-eslint/parser": "^5.47.0",
     "eslint": "^8.30.0",
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-prettier": "^4.2.1",
-    "jest": "^29.3.1",
     "prettier": "^2.8.1",
-    "ts-jest": "^29.0.3",
     "tsup": "^6.7.0",
     "typescript": "^4.9.4"
   },