cradova 3.3.0 → 3.3.1

package/README.md

@@ -27,7 +27,28 @@
 [![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/uiedbook/cradova?style=social) ![Stargazers](https://img.shields.io/github/stars/uiedbook/cradova?style=social)
 
-## What's New? Conditionals!
+## 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";
@@ -72,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/uiedbook/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?
 
@@ -129,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";
@@ -225,7 +245,7 @@ Let's see a simple TodoList example
 
 ```js
 import _, {
-  // elements
+  // tags
   div,
   button,
   main,
@@ -235,8 +255,6 @@ import _, {
   createSignal,
   // dom ref
   useRef(),
-  // useState
-  // useEffect
   // dynamic component class
   Ref,
   css,
@@ -468,7 +486,7 @@ We are currently working to [set](https://github.com/uiedbook/cradova/blob/main/
 
 - 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
 
@@ -481,12 +499,23 @@ We are currently working to [set](https://github.com/uiedbook/cradova/blob/main/
     ╚═════╝   ╚═╝  ╚═╝  ╚═╝  ╚═╝   ╚══════╝     ╚════╝        ╚══╝    ╚═╝  ╚═╝
 ```
 
-## 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).
 
-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:
+### Contribution and License Agreement
 
-https://www.buymeacoffee.com/fridaycandour
+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.
 
-Or Click.
+## Supporting Exabase development
 
-<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>
+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,3 +1,20 @@
+
+/*
+============================================================================="
+    ██████╗   ██████╗    █████═╗   ███████╗    ███████╗    ██╗   ██╗  █████╗   
+   ██╔════╝   ██╔══██╗  ██╔═╗██║   █      ██  ██╔═════╝█   ██║   ██║  ██╔═╗██  
+   ██║        ██████╔╝  ███████║   █      ██  ██║     ██   ██║   ██║  ██████╗  
+   ██║        ██╔══██╗  ██║  ██║   █      ██  ██║     ██   ╚██╗ ██╔╝  ██║  ██╗ 
+   ╚██████╗   ██║  ██║  ██║  ██║   ███████╔╝   ████████      ╚███╔╝   ██║  ██║ 
+    ╚═════╝   ╚═╝  ╚═╝  ╚═╝  ╚═╝   ╚══════╝     ╚════╝        ╚══╝    ╚═╝  ╚═╝ 
+=============================================================================
+Cradova
+@version  3.3.0
+License: Apache V2
+Copyright 2022 Friday Candour. 
+Repository - https://github.com/fridaycandour/cradova
+=============================================================================
+*/
 import * as CSS from 'csstype';
 
 /*! *****************************************************************************
@@ -8,8 +25,119 @@ 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
  * ----
@@ -24,7 +152,7 @@ and limitations under the License.
  * - 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;
@@ -92,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;
@@ -112,179 +240,6 @@ 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;
-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>, 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
- * -------
- * 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, 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
-     * ---
-     * 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>;
-
-/*! *****************************************************************************
-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
  * ---
@@ -292,7 +247,7 @@ and limitations under the License.
  * @param name
  * @param template
  */
-declare class Screen {
+declare class Screen$1 {
     /**
      * used internally
      */
@@ -300,8 +255,8 @@ declare class Screen {
     /**
      * this should be a cradova screen component
      */
-    _html: ((this: Screen, data?: unknown) => HTMLElement | DocumentFragment) | HTMLElement | DocumentFragment;
-    private _packed;
+    _html: ((this: Screen$1, data?: unknown) => HTMLElement | DocumentFragment) | HTMLElement | DocumentFragment;
+    _packed: boolean;
     private _template;
     private _callBack;
     private _deCallBack;
@@ -320,12 +275,11 @@ declare class Screen {
     };
     _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;
@@ -334,109 +288,6 @@ declare class Screen {
     drop(state?: boolean): boolean | undefined;
     _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;
-};
-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
-     * .
-     */
-    /**
-     * 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;
-};
-
-/*! *****************************************************************************
-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.
@@ -500,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
@@ -515,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
      * ------
@@ -524,7 +375,7 @@ declare class Router {
      *
      * .
      */
-    static getParams(): any;
+    static getParams(): Record<string, unknown>;
     /**
      * Cradova
      * ---
@@ -547,8 +398,148 @@ 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 article: VJSType<HTMLElement>;
 declare const audio: VJSType<HTMLAudioElement>;
@@ -611,6 +602,16 @@ declare const video: VJSType<HTMLVideoElement>;
 declare const svg: (svg: string, properties?: VJS_props_TYPE) => HTMLSpanElement;
 declare const raw: (html: string) => HTMLElement[];
 
+/*! *****************************************************************************
+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;
 /**
  * Cradova
@@ -635,4 +636,4 @@ type TemplateType = <E extends HTMLElement>(...element_initials: VJS_params_TYPE
  */
 declare const _: TemplateType;
 
-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 };
+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

@@ -15,6 +15,6 @@ Copyright 2022 Friday Candour.
 Repository - https://github.com/fridaycandour/cradova
 =============================================================================
 */
-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;
+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 { 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 };
+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,6 +1,6 @@
 {
   "name": "cradova",
-  "version": "3.3.0",
+  "version": "3.3.1",
   "description": "Web framework for building powerful web apps",
   "main": "dist/index.js",
   "type": "module",
@@ -13,8 +13,8 @@
     "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": [