cradova 3.2.2 → 3.3.1

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,72 @@
     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)
+
+## 2024 - What's New? Ref methods!
+
+```js
+type dataType = { year: string, age: string };
+
+const Header =
+  new Ref() <
+  dataType >
+  function (data = { year: "2023", age: "2" }) {
+    return header(h1("Cradova is " + data.age + " yrs old in " + data.year));
+  };
+
+Header.define("increase", function (isNewYear) {
+  if (isNewYear) {
+    this.updateState({ year: "2024", age: "3" });
+  }
+});
+document.body.appendChild(Header.render());
+Header.methods.increase(true);
+```
+
+## 2023 - 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 +93,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/specification.md)
 
 ## What's the benefit?
 
@@ -58,7 +108,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
 
@@ -100,10 +150,9 @@ const html = div(Hello("peter"), Hello("joe"));
 document.body.append(html);
 ```
 
-## working with state:
+## Basic Samples:
 
-this a collection of basic examples
-you can choose any that best suite what problem you want to solve
+this a collection of basic examples that can give you some ideas
 
 ```js
 import _, { button, createSignal, Ref, reference, h1, br, div } from "cradova";
@@ -196,7 +245,7 @@ Let's see a simple TodoList example
 
 ```js
 import _, {
-  // elements
+  // tags
   div,
   button,
   main,
@@ -206,8 +255,6 @@ import _, {
   createSignal,
   // dom ref
   useRef(),
-  // useState
-  // useEffect
   // dynamic component class
   Ref,
   css,
@@ -431,23 +478,44 @@ 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
+- UI component libraries for cradova (The Sacho Project)
 - Sample projects
 - maintenance and promotion
-<!--
 
-## Sponsor
+```
+    ██████╗   ██████╗    █████═╗   ███████╗    ███████╗    ██╗   ██╗  █████╗
+   ██╔════╝   ██╔══██╗  ██╔═╗██║   █      ██  ██╔═════╝█   ██║   ██║  ██╔═╗██
+   ██║        ██████╔╝  ███████║   █      ██  ██║     ██   ██║   ██║  ██████╗
+   ██║        ██╔══██╗  ██║  ██║   █      ██  ██║     ██   ╚██╗ ██╔╝  ██║  ██╗
+   ╚██████╗   ██║  ██║  ██║  ██║   ███████╔╝   ████████      ╚███╔╝   ██║  ██║
+    ╚═════╝   ╚═╝  ╚═╝  ╚═╝  ╚═╝   ╚══════╝     ╚════╝        ╚══╝    ╚═╝  ╚═╝
+```
+
+## Apache Lincenced
+
+Opensourced And Free.
+
+Uiedbook is an open source team of web focused engineers, Our vision is to make the web better, improving and innovating infrastructures for a better web experience.
+
+Join Us on [telegram](https://t.me/UiedbookHQ).
+
+### Contribution and License Agreement
 
-Your support is appreciated and needed to advance Cradova for more performance and improvements.
+If you contribute code to this project, you are implicitly allowing your code to be distributed under same license. You are also implicitly verifying that all code is your original work.
 
-Sponsorships can be done via [Patreon](https://www.patreon.com/FridayCandour) and [KO-FI](https://www.ko-fi.com/fridaycandour).
+## Supporting Exabase development
 
-Both monthly-recurring sponsorships and one-time donations are accepted. -->
+Your Support is a good force for change anytime you do it, you can ensure Our projects, growth, Cradova, Exabase, JetPath etc, growth and improvement by making a re-occuring or fixed sponsorship
+to [github sponsors](https://github.com/sponsors/FridayCandour):
+or crypto using
+etheruen: `0xD7DDD4312A4e514751A582AF725238C7E6dF206c`,
+Bitcoin: `bc1q5548kdanwyd3y07nyjjzt5zkdxqec4nqqrd760` or
+LTC: `ltc1qgqn6nqq6x555rpj3pw847402aw6kw7a25dc29w`.

package/dist/index.d.ts

@@ -1,5 +1,143 @@
+
+/*
+============================================================================="
+    ██████╗   ██████╗    █████═╗   ███████╗    ███████╗    ██╗   ██╗  █████╗   
+   ██╔════╝   ██╔══██╗  ██╔═╗██║   █      ██  ██╔═════╝█   ██║   ██║  ██╔═╗██  
+   ██║        ██████╔╝  ███████║   █      ██  ██║     ██   ██║   ██║  ██████╗  
+   ██║        ██╔══██╗  ██║  ██║   █      ██  ██║     ██   ╚██╗ ██╔╝  ██║  ██╗ 
+   ╚██████╗   ██║  ██║  ██║  ██║   ███████╔╝   ████████      ╚███╔╝   ██║  ██║ 
+    ╚═════╝   ╚═╝  ╚═╝  ╚═╝  ╚═╝   ╚══════╝     ╚════╝        ╚══╝    ╚═╝  ╚═╝ 
+=============================================================================
+Cradova
+@version  3.3.0
+License: Apache V2
+Copyright 2022 Friday Candour. 
+Repository - https://github.com/fridaycandour/cradova
+=============================================================================
+*/
 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 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>;
+    /**
+     * Active refs is a concept for delegated screens to keep their active refs alive
+     * even in the case of naviagtion
+     * @param eventName
+     * @param eventArgs
+     */
+    dispatchActiveEvent(eventName: string, eventArgs?: unknown): Promise<void>;
+}
+declare const CradovaEvent: cradovaEvent;
+/**
+ * Cradova Ref
+ * -------
+ * create dynamic components
+ */
+declare class Ref<Prop extends Record<string, any> = any> {
+    private component;
+    private effects;
+    private effectuate;
+    methods: Record<string, Function>;
+    private rendered;
+    private published;
+    private preRendered;
+    private reference;
+    Signal: createSignal<any> | undefined;
+    _state: Prop[];
+    _state_track: {
+        [x: number]: boolean;
+    };
+    _state_index: number;
+    stash: Prop | undefined;
+    constructor(component: (this: Ref<Prop>, data: Prop) => HTMLElement | DocumentFragment);
+    preRender(data?: Prop, stash?: boolean): void;
+    destroyPreRendered(): void;
+    /**
+     * Cradova Ref
+     * ---
+     * construct to add custom methods to Refs
+     * @param methodName
+     * @param method
+     * @returns  void
+     */
+    define(methodName: string, method: (this: this, ...arg: any) => void): void;
+    /**
+     * Cradova Ref
+     * ---
+     * returns html with cradova reference
+     * @param data
+     * @returns () => HTMLElement
+     */
+    render(data?: Prop, stash?: boolean): HTMLElement | DocumentFragment;
+    instance(): HTMLElement;
+    _setExtra(Extra: createSignal<any>): void;
+    _roll_state(data: any, idx: number, get?: boolean): Prop;
+    _effect(fn: () => Promise<void> | void): void;
+    private effector;
+    /**
+     * Cradova Ref
+     * ---
+     * update ref component with new data and update the dom.
+     * @param data
+     * @returns
+     */
+    updateState(data?: Prop, stash?: boolean): void;
+    private Activate;
+}
+/**
+ * cradova
+ * ---
+ * lazy load a file
+ */
+declare class lazy<Type> {
+    content: Type | undefined;
+    private _cb;
+    constructor(cb: () => Promise<unknown>);
+    load(): Promise<void>;
+}
+/**
+ * Cradova
+ * ---
+ * make reference to dom elements
+ */
+declare class reference {
+    tree: Record<string, any>;
+    globalTree: Record<string, HTMLElement>;
+    /**
+     * Bind a DOM element to a reference name.
+     * @param name - The name to reference the DOM element by.
+     */
+    bindAs(name: string): reference;
+    /**
+     * Retrieve a referenced DOM element.
+     * @param name - The name of the referenced DOM element.
+     */
+    current<ElementType extends HTMLElement = HTMLElement>(name: string): ElementType;
+    /**
+     * Append a DOM element to the reference, overwriting any existing reference.
+     * @param name - The name to reference the DOM element by.
+     * @param element - The DOM element to reference.
+     */
+    _appendDomForce(name: string, Element: HTMLElement): void;
+    _appendDomForceGlobal(name: string, Element: HTMLElement): void;
+}
 /**
  *  Cradova Signal
  * ----
@@ -14,7 +152,7 @@ import * as CSS from 'csstype';
  * - update a cradova Ref automatically
  * @constructor initial: unknown, props: {useHistory, persist}
  */
-declare class createSignal<Type extends Record<string, unknown>> {
+declare class createSignal<Type extends Record<string, any>> {
     private callback;
     private persistName;
     private actions;
@@ -82,7 +220,7 @@ declare class createSignal<Type extends Record<string, unknown>> {
      * @param Ref component to bind to.
      * @param path a property in the object to send to attached ref
      */
-    bindRef(ref: Partial<Ref<unknown>>, binding?: {
+    bindRef(ref: Partial<Ref>, binding?: {
         event?: string;
         signalProperty: string;
         _element_property: string;
@@ -102,186 +240,46 @@ declare class createSignal<Type extends Record<string, unknown>> {
      */
     clearPersist(): void;
 }
-
-declare const isNode: (element: unknown) => boolean;
-/**
- * Cradova event
- */
-declare class cradovaEvent {
-    private listeners;
-    addEventListener(eventName: string, callback: () => void): Promise<void>;
-    dispatchEvent(eventName: string, eventArgs?: unknown): Promise<void>;
-}
-declare const CradovaEvent: cradovaEvent;
-declare function Rhoda(l: VJSType<HTMLElement>[] | (() => any)[] | Ref<unknown>[] | HTMLElement[]): DocumentFragment;
-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>;
-type LoopData<Type> = Type[];
-declare function loop<Type>(datalist: LoopData<Type>, component: (value: Type, index?: number, array?: LoopData<Type>) => HTMLElement | DocumentFragment | undefined): HTMLElement[] | undefined;
-/**
- * Cradova Ref
- * -------
- * create dynamic components
- */
-declare class Ref<D> {
-    private component;
-    private effects;
-    private effectuate;
-    private rendered;
-    private published;
-    private preRendered;
-    private reference;
-    Signal: createSignal<any> | undefined;
-    _state: D[];
-    _state_track: {
-        [x: number]: boolean;
-    };
-    _state_index: number;
-    stash: D | undefined;
-    constructor(component: (this: Ref<D>, data: D) => HTMLElement | DocumentFragment);
-    preRender(data?: D, stash?: boolean): void;
-    destroyPreRendered(): void;
-    /**
-     * Cradova Ref
-     * ---
-     * returns html with cradova reference
-     * @param data
-     * @returns () => HTMLElement
-     */
-    render(data?: D, stash?: boolean): HTMLElement | DocumentFragment;
-    instance(): HTMLElement;
-    _setExtra(Extra: createSignal<any>): void;
-    _roll_state(data: D, idx: number, get?: boolean): D;
-    _effect(fn: () => Promise<void> | void): void;
-    private effector;
-    /**
-     * Cradova Ref
-     * ---
-     * update ref component with new data and update the dom.
-     * @param data
-     * @returns
-     */
-    updateState(data?: D, stash?: boolean): void;
-    private Activate;
-}
-/**
- * Document fragment
- * @param children
- * @returns
- */
-declare const frag: (children: VJSType<HTMLElement>[]) => DocumentFragment;
-/**
- * cradova
- * ---
- * lazy load a file
- */
-declare class lazy<Type> {
-    content: Type | undefined;
-    private _cb;
-    constructor(cb: () => Promise<unknown>);
-    load(): Promise<void>;
-}
-/**
- * Cradova
- * ---
- * make reference to dom elements
- */
-declare class reference {
-    tree: Record<string, any>;
-    globalTree: Record<string, HTMLElement>;
-    /**
-     * Bind a DOM element to a reference name.
-     * @param name - The name to reference the DOM element by.
-     */
-    bindAs(name: string): reference;
-    /**
-     * Retrieve a referenced DOM element.
-     * @param name - The name of the referenced DOM element.
-     */
-    current<ElementType extends HTMLElement = HTMLElement>(name: string): ElementType;
-    /**
-     * Append a DOM element to the reference, overwriting any existing reference.
-     * @param name - The name to reference the DOM element by.
-     * @param element - The DOM element to reference.
-     */
-    _appendDomForce(name: string, Element: HTMLElement): void;
-    _appendDomForceGlobal(name: string, Element: HTMLElement): void;
-}
-/**
- * Cradova
- * ---
- *  Allows functional components to manage state by providing a state value and a function to update it.
- * @param initialValue
- * @param ActiveRef
- * @returns [state, setState]
- */
-declare function useState<S = unknown>(initialValue: S, ActiveRef: Ref<unknown>): [S, (newState: S) => void];
-/**
- * Cradova
- * ---
-Allows side effects to be performed in functional components (Refs), such as fetching data or subscribing to events.
- * @param effect
- * @returns
- */
-declare function useEffect(effect: () => void, ActiveRef: Ref<unknown>): void;
-/**
- * Cradova
- * ---
-Returns a mutable reference object of dom elements that persists across component renders.
- * @returns reference
- */
-declare function useRef(): Record<string, HTMLElement | undefined>;
-
 /**
  *  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;
+declare class Screen$1 {
     /**
      * used internally
      */
     private _name;
-    private _transition;
-    private _packed;
+    /**
+     * this should be a cradova screen component
+     */
+    _html: ((this: Screen$1, data?: unknown) => HTMLElement | DocumentFragment) | HTMLElement | DocumentFragment;
+    _packed: boolean;
     private _template;
     private _callBack;
     private _deCallBack;
     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;
-        _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;
     }): void;
-    get _delegatedRoutes(): boolean;
-    set _delegatedRoutes(count: boolean);
+    get _delegatedRoutes(): number;
+    set _delegatedRoutes(count: number);
     setErrorHandler(errorHandler: (err: unknown) => void): void;
     _package(): Promise<void>;
     onActivate(cb: () => Promise<void> | void): void;
@@ -290,90 +288,6 @@ declare class Screen {
     drop(state?: boolean): boolean | undefined;
     _Activate(force?: boolean): Promise<void>;
 }
-
-type DataAttributes = {
-    [key: `data-${string}`]: string;
-};
-type AriaAttributes = {
-    [key: `aria-${string}`]: string;
-};
-type VJSType<T> = (...VJS: (undefined | string | HTMLElement | HTMLElement[] | Ref<unknown> | Ref<unknown>[] | DocumentFragment | DocumentFragment[] | TemplateStringsArray | Partial<T> | (() => HTMLElement) | Partial<DataAttributes> | Partial<AriaAttributes> | CSS.Properties | {
-    style?: CSS.Properties;
-    onmount?: (this: T) => void;
-    reference?: reference;
-})[]) => T;
-type VJS_params_TYPE<T> = (undefined | string | HTMLElement | HTMLElement[] | Ref<unknown> | Ref<unknown>[] | DocumentFragment | DocumentFragment[] | TemplateStringsArray | Partial<T> | (() => HTMLElement) | Partial<DataAttributes> | Partial<AriaAttributes> | CSS.Properties<string | number> | {
-    src?: string;
-    href?: string;
-    placeholder?: string;
-    type?: string;
-    action?: string;
-    name?: string;
-    alt?: string;
-    for?: string;
-    method?: string;
-    rows?: string;
-    value?: string;
-    target?: string;
-    rel?: string;
-    required?: string;
-    frameBorder?: string;
-    style?: CSS.Properties;
-    onmount?: (this: T) => void;
-    reference?: reference;
-})[];
-type VJS_Child_TYPE<T> = undefined | string | T | (() => T);
-type VJS_props_TYPE = {
-    style?: CSS.Properties;
-    onmount?: () => void;
-    reference?: reference;
-};
-type CradovaScreenType<T = unknown> = {
-    /**
-     * Cradova screen
-     * ---
-     * title of the page
-     * .
-     */
-    name?: string;
-    /**
-     * Cradova screen
-     * ---
-     * a css className to add to screen when rendering it
-     * Usually for adding css transitions
-     * .
-     */
-    transition?: string;
-    /**
-     * Cradova screen
-     * ---
-     * The component for the screen
-     * @param data
-     * @returns void
-     * .
-     */
-    template: ((this: Screen, data?: T | unknown) => HTMLElement | DocumentFragment) | HTMLElement | DocumentFragment;
-    /**
-     * Cradova screen
-     * ---
-     * Allows this screen render in parallel for unique routes
-     *
-     * limit is 1000
-     *
-     * .
-     */
-    renderInParallel?: boolean;
-    /**
-     * Cradova screen
-     * ---
-     * Should this screen be cached after first render?
-     * you can use Route.navigate(url, null, true) to force later
-     *
-     * .
-     */
-    persist?: boolean;
-};
-
 /** cradova router
  * ---
  * Registers a route.
@@ -437,7 +351,7 @@ declare class Router {
      *
      * @param screen
      */
-    static setLoadingScreen(screen: Screen): void;
+    static setLoadingScreen(screen: Screen$1): void;
     /** cradova router
      * ---
      * Listen for navigation events
@@ -452,7 +366,7 @@ declare class Router {
      * @param {string}   path Route path.
      * @param  data data for the screen.
      */
-    static packageScreen(path: string, data?: Record<string, unknown>): Promise<void>;
+    static packageScreen(path: string): Promise<void>;
     /**
      * Cradova Router
      * ------
@@ -461,7 +375,7 @@ declare class Router {
      *
      * .
      */
-    static getParams(): any;
+    static getParams(): Record<string, unknown>;
     /**
      * Cradova
      * ---
@@ -474,24 +388,167 @@ 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.
+***************************************************************************** */
+
+type DataAttributes = {
+    [key: `data-${string}`]: string;
+};
+type AriaAttributes = {
+    [key: `aria-${string}`]: string;
+};
+type VJSType<T> = (...VJS: (undefined | string | HTMLElement | HTMLElement[] | Ref | Ref[] | DocumentFragment | DocumentFragment[] | TemplateStringsArray | Partial<T> | (() => HTMLElement) | Partial<DataAttributes> | Partial<AriaAttributes> | CSS.Properties | {
+    style?: CSS.Properties;
+    onmount?: (this: T) => void;
+    reference?: reference;
+})[]) => T;
+type VJS_params_TYPE<T> = (undefined | string | HTMLElement | HTMLElement[] | Ref | Ref[] | DocumentFragment | DocumentFragment[] | TemplateStringsArray | Partial<T> | (() => HTMLElement) | Partial<DataAttributes> | Partial<AriaAttributes> | CSS.Properties<string | number> | {
+    src?: string;
+    href?: string;
+    placeholder?: string;
+    type?: string;
+    action?: string;
+    name?: string;
+    alt?: string;
+    for?: string;
+    method?: string;
+    rows?: string;
+    value?: string;
+    target?: string;
+    rel?: string;
+    required?: string;
+    frameBorder?: string;
+    style?: CSS.Properties;
+    onmount?: (this: T) => void;
+    reference?: reference;
+})[];
+type VJS_Child_TYPE<T> = undefined | string | T | (() => T);
+type VJS_props_TYPE = {
+    style?: CSS.Properties;
+    onmount?: () => void;
+    reference?: reference;
+};
+type CradovaScreenType<T = unknown> = {
+    /**
+     * Cradova screen
+     * ---
+     * title of the page
+     * .
+     */
+    name?: string;
+    /**
+     * Cradova screen
+     * ---
+     * a css className to add to screen when rendering it
+     * Usually for adding css transitions
+     * .
+     */
+    /**
+     * Cradova screen
+     * ---
+     * The component for the screen
+     * @param data
+     * @returns void
+     * .
+     */
+    template: ((this: Screen, data?: T | unknown) => HTMLElement | DocumentFragment) | HTMLElement | DocumentFragment | Ref<any>;
+    /**
+     * Cradova screen
+     * ---
+     * Allows this screen render in parallel for unique routes
+     *
+     * limit is 1000
+     *
+     * .
+     */
+    renderInParallel?: boolean;
+    /**
+     * Cradova screen
+     * ---
+     * Should this screen be cached after first render?
+     * you can use Route.navigate(url, null, true) to force later
+     *
+     * .
+     */
+    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.
+********************************************************************************/
+
 declare const makeElement: <E extends HTMLElement>(element: E & HTMLElement, ElementChildrenAndPropertyList: VJS_params_TYPE<E>) => E;
 declare const make: (descriptor: any) => any[];
+declare const cra: <E extends HTMLElement>(tag: string) => VJSType<E>;
+declare function Rhoda(l: VJSType<HTMLElement>[] | (() => any)[] | Ref[] | HTMLElement[]): DocumentFragment;
+declare function css(identifier: string | TemplateStringsArray): void;
+/**
+ *
+ * @param {expression} condition
+ * @param {function} elements[]
+ */
+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> | VJS_Child_TYPE<Type | HTMLElement>[], ifFalse: VJS_Child_TYPE<Type | HTMLElement> | VJS_Child_TYPE<Type | HTMLElement>[]): VJS_Child_TYPE<HTMLElement | Type> | 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;
+/**  Calculate a simple numerical representation of the URL */
+declare let SNRU: string;
+declare function memo_SNRU(): void;
+/**
+ * Document fragment
+ * @param children
+ * @returns
+ */
+declare const frag: (children: VJSType<HTMLElement>[]) => DocumentFragment;
+/**
+ * Cradova
+ * ---
+ *  Allows functional components to manage state by providing a state value and a function to update it.
+ * @param initialValue
+ * @param ActiveRef
+ * @returns [state, setState]
+ */
+declare function useState<S = unknown>(initialValue: S, ActiveRef: Ref): [S, (newState: S) => void];
+/**
+ * Cradova
+ * ---
+Allows side effects to be performed in functional components (Refs), such as fetching data or subscribing to events.
+ * @param effect
+ * @returns
+ */
+declare function useEffect(effect: () => void, ActiveRef: Ref): void;
+/**
+ * Cradova
+ * ---
+Returns a mutable reference object of dom elements that persists across component renders.
+ * @returns reference
+ */
+declare function useRef(): Record<string, HTMLElement | undefined>;
+
 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 +572,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 +600,17 @@ 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;
+declare const raw: (html: string) => HTMLElement[];
 
-/**
- *
- * 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>;
+/*! *****************************************************************************
+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 TemplateType = <E extends HTMLElement>(...element_initials: VJS_params_TYPE<E | HTMLElement>) => E | HTMLElement | DocumentFragment;
 /**
@@ -576,21 +620,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 +636,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, SNRU, Screen$1 as Screen, a, article, audio, br, button, canvas, caption, col, colgroup, cra, 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, 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 v=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.active_listeners[e]||(this.active_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 v,h=class{constructor(e){this.effects=[];this.effectuate=null;this.methods={};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),f.addActiveEventListener("active-Refs",()=>{this._state_index=0,this.published=!1;});}preRender(e,t){this.preRendered=this.render(e,t);}destroyPreRendered(){this.preRendered=null;}define(e,t){typeof e=="string"&&typeof t=="function"&&!Object.prototype.hasOwnProperty.call(this,e)?this.methods[e]=t.bind(this):console.error(" \u2718  Cradova err :  Invalid Ref.define parameters");}render(e,t){if(this.effects=[],this.rendered=!1,t&&(this.stash=e),this.preRendered)return this.preRendered;{let n=this.component(e);return n instanceof HTMLElement||n instanceof DocumentFragment?(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(t instanceof HTMLElement||t instanceof DocumentFragment){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);}},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[p]?this.tree[p][e]:null}_appendDomForce(e,t){this.tree[p]?this.tree[p][e]=t:(this.tree[p]={},this.tree[p][e]=t);}_appendDomForceGlobal(e,t){this.globalTree[e]=t;}},d=new u,_=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);}},m=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:i}=e;t instanceof h?this._html=()=>t.render({}):this._html=t,this._name=n||"Document",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,_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(),(e instanceof HTMLElement||e instanceof DocumentFragment)&&(this._template.innerHTML="",this._template.appendChild(e));else if(e instanceof HTMLElement||e instanceof DocumentFragment)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(d.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}w(),f.dispatchActiveEvent("active-Refs"),(!this._persist||e||!this._packed)&&(await this._package(),this._packed=!0),document.title=this._name,d.globalTree.doc.innerHTML="",d.globalTree.doc.appendChild(this._template),f.dispatchEvent("onmountEvent"),window.scrollTo({top:0,left:0,behavior:"instant"}),this._callBack&&await this._callBack(d.globalTree.doc);}},E=class{constructor(){this.pageShow=null;this.pageHide=null;this.loadingScreen=null;this.params={};this.routes={};this.pageevents=[];this.paused=!1;}async start_pageevents(e){setTimeout(()=>{for(let t=0;t<this.pageevents.length;t++)this.pageevents[t](e);},100);}route(e,t){if(typeof t<"u"){if(t&&!t)throw console.error(" \u2718  Cradova err:  not a valid screen  ",t),new Error(" \u2718  Cradova err:  Not a valid cradova screen component");return this.routes[e]=t}}async router(e,t){let n=window.location.pathname,o,i;if(this.paused){window.location.hash="paused";return}if(n!==this.lastNavigatedRoute)if(this.nextRouteController?(o=this.nextRouteController,this.nextRouteController=void 0):[o,i]=this.checker(n),typeof o<"u")try{if(typeof o=="function"&&(this.loadingScreen instanceof m&&await this.loadingScreen._Activate(),o=await o(),!o)){this.lastNavigatedRoute&&history.pushState({},n,this.lastNavigatedRoute);return}if(o._delegatedRoutes!==-1){o._delegatedRoutes=1;let l=o._derive();o=new m({template:o._html}),o._apply_derivation(l),this.routes[n]=o;}i&&(this.params.params=i),await o._Activate(t),this.start_pageevents(n),this.lastNavigatedRouteController&&this.lastNavigatedRouteController._deActivate(),this.lastNavigatedRoute=n,this.lastNavigatedRouteController=o;}catch(l){if(o&&o._errorHandler)o._errorHandler(l);else if(typeof this.errorHandler=="function")this.errorHandler(Error);else throw console.error(l),new Error(" \u2718  Cradova err:  consider adding error boundary to the specific screen  ")}else this.routes["*"]&&await this.routes["*"]._Activate(t);}checker(e){if(this.routes[e])return [this.routes[e],{path:e}];if(this.routes[e+"/"])return [this.routes[e],{path:e}];for(let t in this.routes){if(!t.includes(":"))continue;let n=e.split("/"),o=t.split("/");e.endsWith("/")&&n.pop();let i=0,l=0;if(n.shift(),o.shift(),o.length===n.length){let y={_path:""};for(let c=0;c<o.length;c++){if(o[c].includes(":")){l++;continue}n[c]===o[c]&&i++;}if(i+l===o.length){for(let c=0;c<o.length;c++)o[c].includes(":")&&(y[o[c].split(":")[1]]=n[c]);return y._path=t,[this.routes[t],y]}}}return []}},s=new E,g=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);}g._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.checker(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 m)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){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[t]=s.checker(e);if(typeof t=="function"&&(t=await t()),t._delegatedRoutes!==-1){t._delegatedRoutes=1;let n=t._derive();t=new m({template:t._html}),t._apply_derivation(n),s.routes[e]=t;}t._package(),t._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||(e=document.createElement("div"),e.setAttribute("data-wrapper","app"),document.body.appendChild(e)),d._appendDomForceGlobal("doc",e),window.addEventListener("pageshow",()=>s.router()),window.addEventListener("popstate",t=>{t.preventDefault(),s.router();});}};var T=(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 h&&(i=i.render()),i instanceof HTMLElement||i instanceof DocumentFragment){r.appendChild(i);continue}if(Array.isArray(i)){r.appendChild(x(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(o=="reference"&&i[0]instanceof u){i[0]._appendDomForce(i[1],r);continue}if(i[0]instanceof _){i[0].bindRef(r,{_element_property:o,signalProperty:i[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,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",y=>{y.preventDefault(),g.navigate(r.pathname);if(l.includes("#")){let c=l.split("#").at(-1);document.getElementById("#"+c)?.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},L=function(r){if(Array.isArray(r)&&(r=r[0]),typeof r!="string")return [];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)=>T(document.createElement(r),t);function x(r){let e=new DocumentFragment;for(let t of r)if(Array.isArray(t))e.appendChild(x(t));else {if(t instanceof h&&(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(t instanceof HTMLElement||t instanceof DocumentFragment)e.appendChild(t);else if(typeof t<"u")throw new Error("  \u2718  Cradova err:  invalid child type: "+t+" ("+typeof t+")")}return e}function P(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 R(r,...e){if(r)return e}function D(r,e,t){return r?e:t}function A(r,...e){return t=>{if(t===r)return e}}function N(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 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}var p;function w(){let r=0,e=window.location.href;for(let t=0;t<e.length;t++)r+=e.charCodeAt(t);p=r.toString();}var V=function(r){let e=document.createDocumentFragment();for(let t=0;t<r.length;t++){let n=r[t];if(typeof n=="function"&&(n=n()),n instanceof HTMLElement||n instanceof DocumentFragment){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};function J(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();}return [e._roll_state(null,t,!0),n]}function B(r,e){e._effect(r);}function I(){return new u}var O=a("a"),$=a("article"),U=a("audio"),G=a("br"),q=a("button"),K=a("canvas"),Q=a("caption"),W=a("col"),X=a("colgroup"),Z=a("datalist"),z=a("details"),ee=a("dialog"),te=a("div"),ne=a("em"),re=a("embed"),oe=a("figure"),ae=a("footer"),ie=a("form"),se=a("h1"),le=a("h2"),ce=a("h3"),pe=a("h4"),ue=a("h5"),de=a("h6"),fe=a("head"),he=a("header"),me=a("hr"),ge=a("i"),ye=a("iframe"),Te=a("img"),_e=a("input"),ve=a("label"),Ee=a("li"),we=a("main"),He=a("nav"),Le=a("ol"),xe=a("optgroup"),Me=a("option"),be=a("p"),Se=a("progress"),ke=a("q"),Ce=a("section"),Pe=a("select"),Re=a("source"),De=a("span"),Ae=a("strong"),Ne=a("summary"),Fe=a("table"),Ve=a("tbody"),Je=a("td"),Be=a("template"),Ie=a("textarea"),je=a("th"),Ye=a("title"),Oe=a("tr"),$e=a("track"),Ue=a("u"),Ge=a("ul"),qe=a("video"),Ke=(r,e)=>{let t=document.createElement("span");return t.innerHTML=r,T(t,[e])},Qe=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}=L(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()),T(i,r)},Ze=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 { A as $case, R as $if, D as $ifelse, N as $switch, f as CradovaEvent, h as Ref, x as Rhoda, g as Router, p as SNRU, m as Screen, O as a, $ as article, U as audio, G as br, q as button, K as canvas, Q as caption, W as col, X as colgroup, a as cra, _ as createSignal, P as css, Z as datalist, Ze as default, z as details, ee as dialog, te as div, ne as em, re as embed, oe as figure, ae as footer, ie as form, V as frag, se as h1, le as h2, ce as h3, pe as h4, ue as h5, de as h6, fe as head, he as header, me as hr, ge as i, ye as iframe, Te as img, _e as input, ve as label, H as lazy, Ee as li, F as loop, we as main, L as make, T as makeElement, w as memo_SNRU, He as nav, Le as ol, xe as optgroup, Me as option, be as p, Se as progress, ke as q, Qe as raw, u as reference, Ce as section, Pe as select, Re as source, De as span, Ae as strong, Ne as summary, Ke as svg, Fe as table, Ve as tbody, Je as td, Be as template, Ie as textarea, je as th, Ye as title, Oe as tr, $e as track, Ue as u, Ge as ul, B as useEffect, I as useRef, J as useState, qe 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.1",
+  "description": "Web framework for building powerful web apps",
   "main": "dist/index.js",
   "type": "module",
   "files": [
@@ -13,19 +13,22 @@
     "url": "git+https://github.com/FridayCandour/cradova.git"
   },
   "scripts": {
-    "build": "tsup lib/index.ts",
-    "pub": "tsup lib/index.ts && npm publish",
+    "build": "tsup src/index.ts",
+    "pub": "tsup src/index.ts && npm publish",
     "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"
   },