cradova 3.1.6 → 3.2.0

package/dist/index.d.ts

@@ -1,49 +1,28 @@
-/*
-============================================================================="
-    ██████╗   ██████╗    █████═╗   ███████╗    ███████╗    ██╗   ██╗  █████╗   
-   ██╔════╝   ██╔══██╗  ██╔═╗██║   █      ██  ██╔═════╝█   ██║   ██║  ██╔═╗██  
-   ██║        ██████╔╝  ███████║   █      ██  ██║     ██   ██║   ██║  ██████╗  
-   ██║        ██╔══██╗  ██║  ██║   █      ██  ██║     ██   ╚██╗ ██╔╝  ██║  ██╗ 
-   ╚██████╗   ██║  ██║  ██║  ██║   ███████╔╝   ████████      ╚███╔╝   ██║  ██║ 
-    ╚═════╝   ╚═╝  ╚═╝  ╚═╝  ╚═╝   ╚══════╝     ╚════╝        ╚══╝    ╚═╝  ╚═╝ 
-    =============================================================================
-    Cradova FrameWork
-    @version  3.0.0
-    License: Apache V2
-Copyright 2022 Friday Candour. 
-Repository - https://github.com/fridaycandour/cradova
-=============================================================================
-*/
+import * as CSS from 'csstype';
 
-import * as CSS from "csstype";
-
-declare module "cradova" {
-  /**
-   *  Cradova Signal
-   * ----
-   *  Create stateful data store.
-   *  Features:
-   * - create a store
-   * - create actions and fire them
-   * - bind a Ref and elements
-   * - listen to updates
-   * - set object keys instead of all values
-   * - persist changes to localStorage
-   * - update a cradova Ref automatically
-   * @constructor initial: unknown, props: {useHistory, persist}
-   */
-  export class createSignal<Type extends Record<string, unknown>> {
+/**
+ *  Cradova Signal
+ * ----
+ *  Create stateful data store.
+ *  Features:
+ * - create a store
+ * - create actions and fire them
+ * - bind a Ref and elements
+ * - listen to updates
+ * - set object keys instead of all values
+ * - persist changes to localStorage
+ * - update a cradova Ref automatically
+ * @constructor initial: unknown, props: {useHistory, persist}
+ */
+declare class createSignal<Type extends Record<string, unknown>> {
     private callback;
     private persistName;
     private actions;
     private ref;
     value: Type;
-    constructor(
-      initial: Type,
-      props?: {
+    constructor(initial: Type, props?: {
         persistName?: string | undefined;
-      }
-    );
+    });
     /**
      *  Cradova Signal
      * ----
@@ -60,11 +39,7 @@ declare module "cradova" {
      * @param value - value of the key
      * @returns void
      */
-    setKey<k extends keyof Type>(
-      key: k,
-      value: unknown,
-      shouldRefRender?: boolean
-    ): void;
+    setKey<k extends keyof Type>(key: k, value: unknown, shouldRefRender?: boolean): void;
     /**
      *  Cradova Signal
      * ----
@@ -107,14 +82,11 @@ declare module "cradova" {
      * @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<unknown>>, binding?: {
         event?: string;
         signalProperty: string;
         _element_property: string;
-      }
-    ): void;
+    }): void;
     /**
      *  Cradova Signal
      * ----
@@ -129,51 +101,35 @@ declare module "cradova" {
      *
      */
     clearPersist(): void;
-  }
+}
 
-  export const isNode: (element: unknown) => boolean;
-  /**
-   * Cradova event
-   */
-  export class cradovaEvent {
+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>;
-  }
-  export const CradovaEvent: cradovaEvent;
-  export function Rhoda(
-    l: VJSType<HTMLElement>[] | (() => any)[] | Ref<unknown>[] | HTMLElement[]
-  ): DocumentFragment;
-  export function css(identifier: string | TemplateStringsArray): void;
-  /**
-   *
-   * @param {expression} condition
-   * @param {function} elements[]
-   */
-  export function assert<Type>(
-    condition: boolean,
-    ...elements: VJS_Child_TYPE<Type | HTMLElement>[]
-  ): HTMLElement[] | undefined;
-  export 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[];
-  export function loop<Type>(
-    datalist: LoopData<Type>,
-    component: (
-      value: Type,
-      index?: number,
-      array?: LoopData<Type>
-    ) => HTMLElement | DocumentFragment | undefined
-  ): HTMLElement[] | undefined;
-  /**
-   * Cradova Ref
-   * -------
-   * create dynamic components
-   */
-  export class Ref<D> {
+}
+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;
@@ -181,17 +137,16 @@ declare module "cradova" {
     private published;
     private preRendered;
     private reference;
+    private current_id?;
     Signal: createSignal<any> | undefined;
     _state: D[];
     _state_track: {
-      [x: number]: boolean;
+        [x: number]: boolean;
     };
     _state_index: number;
     stash: D | undefined;
-    constructor(
-      component: (this: Ref<D>, data: D) => HTMLElement | DocumentFragment
-    );
-    preRender(data?: D): void;
+    constructor(component: (this: Ref<D>, data: D) => HTMLElement | DocumentFragment);
+    preRender(data?: D, stash?: boolean): void;
     destroyPreRendered(): void;
     /**
      * Cradova Ref
@@ -215,82 +170,86 @@ declare module "cradova" {
      */
     updateState(data?: D, stash?: boolean): void;
     private Activate;
-  }
-  /**
-   * Document fragment
-   * @param children
-   * @returns
-   */
-  export const frag: (children: VJSType<HTMLElement>[]) => DocumentFragment;
-  /**
-   * cradova
-   * ---
-   * lazy load a file
-   */
-  export class lazy<Type> {
+}
+/**
+ * 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
-   */
-  export class reference {
+}
+/**
+ * Cradova
+ * ---
+ * make reference to dom elements
+ */
+declare class reference {
     [x: string]: Record<string, any>;
+    /**
+     * Bind a DOM element to a reference name.
+     * @param name - The name to reference the DOM element by.
+     */
     bindAs(name: string): reference;
-    dom<ElementType>(name: string): ElementType | undefined;
-    _appendDomForce(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]
-   */
-  export 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
+    /**
+     * Retrieve a referenced DOM element.
+     * @param name - The name of the referenced DOM element.
      */
-  export function useEffect(effect: () => void, ActiveRef: Ref<unknown>): void;
-  /**
-     * Cradova
-     * ---
-    Returns a mutable reference object of dom elements that persists across component renders.
-     * @returns reference
+    dom<ElementType extends HTMLElement>(name: string): ElementType | undefined;
+    /**
+     * 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.
      */
-  export function useRef(): Record<string, HTMLElement | undefined>;
+    _appendDomForce(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
-   * @param name
-   * @param template
-   * @param transitions
-   */
-  export class Screen {
+/**
+ *  Cradova Screen
+ * ---
+ * create instances of manageable pages and scaffolds
+ * @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;
-    /**
-     * this is a set of added html to the screen
-     */
+    _html: ((this: Screen, data?: unknown) => HTMLElement | DocumentFragment) | HTMLElement | DocumentFragment;
     /**
      * error handler for the screen
      */
@@ -315,73 +274,48 @@ declare module "cradova" {
     onActivate(cb: () => Promise<void> | void): void;
     onDeactivate(cb: () => Promise<void> | void): void;
     _deActivate(): Promise<void>;
-    drop(state: boolean): boolean | undefined;
+    drop(state?: boolean): boolean | undefined;
     _Activate(force?: boolean): Promise<void>;
-  }
+}
 
-  type DataAttributes = {
+type DataAttributes = {
     [key: `data-${string}`]: string;
-  };
-  type AriaAttributes = {
+};
+type AriaAttributes = {
     [key: `aria-${string}`]: string;
-  };
-  type VJSType<T> = (
-    ...VJS: (
-      | undefined
-      | string
-      | HTMLElement
-      | HTMLElement[]
-      | 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[]
-    | 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 CradovaScreenType<T = unknown> = {
+};
+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
      * ---
@@ -405,10 +339,7 @@ declare module "cradova" {
      * @returns void
      * .
      */
-    template:
-      | ((this: Screen, data?: T | unknown) => HTMLElement | DocumentFragment)
-      | HTMLElement
-      | DocumentFragment;
+    template: ((this: Screen, data?: T | unknown) => HTMLElement | DocumentFragment) | HTMLElement | DocumentFragment;
     /**
      * Cradova screen
      * ---
@@ -428,93 +359,16 @@ declare module "cradova" {
      * .
      */
     persist?: boolean;
-  };
-
-  export const makeElement: <E extends HTMLElement>(
-    element: E & HTMLElement,
-    ElementChildrenAndPropertyList: VJS_params_TYPE<E>
-  ) => E;
-  export const make: (descriptor: any) => any[];
-  export const a: VJSType<HTMLAnchorElement>;
-  export const area: VJSType<HTMLAreaElement>;
-  export const article: VJSType<HTMLElement>;
-  export const aside: VJSType<HTMLElement>;
-  export const audio: VJSType<HTMLAudioElement>;
-  export const b: VJSType<HTMLElement>;
-  export const base: VJSType<HTMLBaseElement>;
-  export const blockquote: VJSType<HTMLElement>;
-  export const br: VJSType<HTMLBRElement>;
-  export const button: VJSType<HTMLButtonElement>;
-  export const canvas: VJSType<HTMLCanvasElement>;
-  export const caption: VJSType<HTMLTableCaptionElement>;
-  export const code: VJSType<HTMLElement>;
-  export const col: VJSType<HTMLTableColElement>;
-  export const colgroup: VJSType<HTMLOptGroupElement>;
-  export const data: VJSType<HTMLDataElement>;
-  export const datalist: VJSType<HTMLDataListElement>;
-  export const details: VJSType<HTMLDetailsElement>;
-  export const dialog: VJSType<HTMLDialogElement>;
-  export const div: VJSType<HTMLDivElement>;
-  export const em: VJSType<HTMLElement>;
-  export const embed: VJSType<HTMLEmbedElement>;
-  export const figure: VJSType<HTMLElement>;
-  export const footer: VJSType<HTMLElement>;
-  export const form: VJSType<HTMLFormElement>;
-  export const h1: VJSType<HTMLHeadingElement>;
-  export const h2: VJSType<HTMLHeadingElement>;
-  export const h3: VJSType<HTMLHeadingElement>;
-  export const h4: VJSType<HTMLHeadingElement>;
-  export const h5: VJSType<HTMLHeadingElement>;
-  export const h6: VJSType<HTMLHeadingElement>;
-  export const head: VJSType<HTMLHeadElement>;
-  export const header: VJSType<HTMLHeadElement>;
-  export const hr: VJSType<HTMLHRElement>;
-  export const i: VJSType<HTMLLIElement>;
-  export const iframe: VJSType<HTMLIFrameElement>;
-  export const img: VJSType<HTMLImageElement>;
-  export const input: VJSType<HTMLInputElement>;
-  export const label: VJSType<HTMLLabelElement>;
-  export const legend: VJSType<HTMLLegendElement>;
-  export const li: VJSType<HTMLLIElement>;
-  export const link: VJSType<HTMLLinkElement>;
-  export const main: VJSType<HTMLElement>;
-  export const menu: VJSType<HTMLMenuElement>;
-  export const nav: VJSType<HTMLElement>;
-  export const object: VJSType<HTMLObjectElement>;
-  export const ol: VJSType<HTMLOListElement>;
-  export const optgroup: VJSType<HTMLOptGroupElement>;
-  export const option: VJSType<HTMLOptionElement>;
-  export const p: VJSType<HTMLParagraphElement>;
-  export const pre: VJSType<HTMLPreElement>;
-  export const progress: VJSType<HTMLProgressElement>;
-  export const q: VJSType<HTMLQuoteElement>;
-  export const section: VJSType<HTMLElement>;
-  export const select: VJSType<HTMLSelectElement>;
-  export const source: VJSType<HTMLSourceElement>;
-  export const span: VJSType<HTMLSpanElement>;
-  export const strong: VJSType<HTMLElement>;
-  export const summary: VJSType<HTMLElement>;
-  export const table: VJSType<HTMLTableElement>;
-  export const tbody: VJSType<HTMLTableColElement>;
-  export const td: VJSType<HTMLTableCellElement>;
-  export const template: VJSType<HTMLTemplateElement>;
-  export const textarea: VJSType<HTMLTextAreaElement>;
-  export const th: VJSType<HTMLTableSectionElement>;
-  export const title: VJSType<HTMLTitleElement>;
-  export const tr: VJSType<HTMLTableRowElement>;
-  export const track: VJSType<HTMLTrackElement>;
-  export const u: VJSType<HTMLUListElement>;
-  export const ul: VJSType<HTMLUListElement>;
-  export const video: VJSType<HTMLVideoElement>;
+};
 
-  /** cradova router
-   * ---
-   * Registers a route.
-   *
-   * @param {string}   path     Route path.
-   * @param  screen the cradova document tree for the route.
-   */
-  export class Router {
+/** cradova router
+ * ---
+ * Registers a route.
+ *
+ * @param {string}   path     Route path.
+ * @param  screen the cradova document tree for the route.
+ */
+declare class Router {
     /** cradova router
      * ---
      * Registers a route.
@@ -526,20 +380,20 @@ declare module "cradova" {
      */
     static BrowserRoutes(obj: Record<string, any>): void;
     /**
-          Go back in Navigation history
-          */
+      Go back in Navigation history
+      */
     static back(): void;
     /**
-          Go forward in Navigation history
-          */
+      Go forward in Navigation history
+      */
     static forward(): void;
     /**
-          Pause navigation
-          */
+      Pause navigation
+      */
     static pauseNaviagtion(): void;
     /**
-         resume navigation
-        */
+     resume navigation
+    */
     static resumeNaviagtion(): void;
     /**
      * Cradova Router
@@ -551,11 +405,7 @@ declare module "cradova" {
      * @param data object
      * @param force boolean
      */
-    static navigate(
-      href: string,
-      data?: Record<string, unknown> | null,
-      force?: boolean
-    ): void;
+    static navigate(href: string, data?: Record<string, unknown> | null, force?: boolean): void;
     /**
      * Cradova Router
      * ------
@@ -589,10 +439,7 @@ declare module "cradova" {
      * @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, data?: Record<string, unknown>): Promise<void>;
     /**
      * Cradova Router
      * ------
@@ -612,66 +459,136 @@ declare module "cradova" {
      */
     static addErrorHandler(callback: (err: unknown) => void): void;
     static _mount(): void;
-  }
+}
 
-  /**
-   *
-   * Cradova Ajax
-   * ------------------
-   * your new axios alternative
-   * supports files upload
-   * @param url string
-   * @param {{method: string;data;header;callbacks;}} opts
-   * @returns unknown
-   */
-  export function Ajax(
-    url: string | URL,
-    opts?: {
-      method?: "GET" | "POST";
-      data?: Record<string, unknown>;
-      header?: {
+declare const makeElement: <E extends HTMLElement>(element: E & HTMLElement, ElementChildrenAndPropertyList: VJS_params_TYPE<E>) => E;
+declare const make: (descriptor: any) => any[];
+declare const a: VJSType<HTMLAnchorElement>;
+declare const area: VJSType<HTMLAreaElement>;
+declare const article: VJSType<HTMLElement>;
+declare const aside: VJSType<HTMLElement>;
+declare const audio: VJSType<HTMLAudioElement>;
+declare const b: VJSType<HTMLElement>;
+declare const base: VJSType<HTMLBaseElement>;
+declare const blockquote: VJSType<HTMLElement>;
+declare const br: VJSType<HTMLBRElement>;
+declare const button: VJSType<HTMLButtonElement>;
+declare const canvas: VJSType<HTMLCanvasElement>;
+declare const caption: VJSType<HTMLTableCaptionElement>;
+declare const code: VJSType<HTMLElement>;
+declare const col: VJSType<HTMLTableColElement>;
+declare const colgroup: VJSType<HTMLOptGroupElement>;
+declare const data: VJSType<HTMLDataElement>;
+declare const datalist: VJSType<HTMLDataListElement>;
+declare const details: VJSType<HTMLDetailsElement>;
+declare const dialog: VJSType<HTMLDialogElement>;
+declare const div: VJSType<HTMLDivElement>;
+declare const em: VJSType<HTMLElement>;
+declare const embed: VJSType<HTMLEmbedElement>;
+declare const figure: VJSType<HTMLElement>;
+declare const footer: VJSType<HTMLElement>;
+declare const form: VJSType<HTMLFormElement>;
+declare const h1: VJSType<HTMLHeadingElement>;
+declare const h2: VJSType<HTMLHeadingElement>;
+declare const h3: VJSType<HTMLHeadingElement>;
+declare const h4: VJSType<HTMLHeadingElement>;
+declare const h5: VJSType<HTMLHeadingElement>;
+declare const h6: VJSType<HTMLHeadingElement>;
+declare const head: VJSType<HTMLHeadElement>;
+declare const header: VJSType<HTMLHeadElement>;
+declare const hr: VJSType<HTMLHRElement>;
+declare const i: VJSType<HTMLLIElement>;
+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>;
+declare const select: VJSType<HTMLSelectElement>;
+declare const source: VJSType<HTMLSourceElement>;
+declare const span: VJSType<HTMLSpanElement>;
+declare const strong: VJSType<HTMLElement>;
+declare const summary: VJSType<HTMLElement>;
+declare const table: VJSType<HTMLTableElement>;
+declare const tbody: VJSType<HTMLTableColElement>;
+declare const td: VJSType<HTMLTableCellElement>;
+declare const template: VJSType<HTMLTemplateElement>;
+declare const textarea: VJSType<HTMLTextAreaElement>;
+declare const th: VJSType<HTMLTableSectionElement>;
+declare const title: VJSType<HTMLTitleElement>;
+declare const tr: VJSType<HTMLTableRowElement>;
+declare const track: VJSType<HTMLTrackElement>;
+declare const u: VJSType<HTMLUListElement>;
+declare const ul: VJSType<HTMLUListElement>;
+declare const video: VJSType<HTMLVideoElement>;
+declare const svg: (svg: string, properties?: VJS_props_TYPE) => HTMLSpanElement;
+
+/**
+ *
+ * Cradova Ajax
+ * ------------------
+ * your new axios alternative
+ * supports files upload
+ * @param url string
+ * @param {{method: string;data;header;callbacks;}} opts
+ * @returns unknown
+ */
+declare function Ajax(url: string | URL, opts?: {
+    method?: "GET" | "POST";
+    data?: Record<string, unknown>;
+    header?: {
         "content-type"?: string;
-      } & Record<string, string>;
-      callbacks?: Record<string, (arg: Function) => void>;
-    }
-  ): Promise<string>;
+    } & Record<string, string>;
+    callbacks?: Record<string, (arg: Function) => void>;
+}): Promise<string>;
 
-  type TemplateType = <E extends HTMLElement>(
-    ...element_initials: VJS_params_TYPE<E | HTMLElement>
-  ) => E | HTMLElement | DocumentFragment;
-  /**
-   * Cradova
-   * ---
-   * Creates new cradova HTML element
-   *  @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
-   * _("p", // template first
-   *  // property next if wanted
-   *  {style: {color: "brown"}, // optional
-   *  // the rest should be children or text
-   * _("span", " am a span tag text like so"),
-   * ...
-   * )
-   *
-   * @param element_initials
-   * @returns function - cradova element
-   */
-  const _: TemplateType;
-  export default _;
-}
+type TemplateType = <E extends HTMLElement>(...element_initials: VJS_params_TYPE<E | HTMLElement>) => E | HTMLElement | DocumentFragment;
+/**
+ * Cradova
+ * ---
+ * Creates new cradova HTML element
+ *  @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
+ * _("p", // template first
+ *  // property next if wanted
+ *  {style: {color: "brown"}, // optional
+ *  // the rest should be children or text
+ * _("span", " am a span tag text like so"),
+ * ...
+ * )
+ *
+ * @param element_initials
+ * @returns function - cradova element
+ */
+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 };

package/dist/index.js

@@ -125,13 +125,9 @@ var Ref = class {
     this._state_track = {};
     this._state_index = 0;
     this.component = component.bind(this);
-    const Recusr = () => {
-      CradovaEvent.addEventListener("onTransition", () => {
-        this.current_id = SNRU(location.href);
-        Recusr();
-      });
-    };
-    Recusr();
+    CradovaEvent.addEventListener("onTransition", () => {
+      this.current_id = SNRU(location.href);
+    });
   }
   preRender(data2, stash) {
     this.reference._appendDomForce(
@@ -163,6 +159,7 @@ var Ref = class {
       this.stash = data2;
     }
     if (isNode(html)) {
+      this.current_id = SNRU(location.href);
       this.reference._appendDomForce(
         this.current_id,
         html
@@ -176,7 +173,8 @@ var Ref = class {
     return html;
   }
   instance() {
-    return this.reference.html;
+    this.current_id = SNRU(location.href);
+    return this.reference[this.current_id];
   }
   _setExtra(Extra) {
     this.Signal = Extra;
@@ -212,10 +210,10 @@ var Ref = class {
    * @returns
    */
   updateState(data2, stash) {
-    this.current_id = SNRU(location.href);
     if (!this.rendered) {
       this.effectuate = () => {
         if (this.published) {
+          this.current_id = SNRU(location.href);
           this.Activate(data2);
         }
       };
@@ -239,8 +237,11 @@ var Ref = class {
       html = html();
     }
     if (isNode(html)) {
-      this.reference.html.insertAdjacentElement("beforebegin", html);
-      this.reference.html.remove();
+      this.reference[this.current_id].insertAdjacentElement(
+        "beforebegin",
+        html
+      );
+      this.reference[this.current_id].remove();
       this.published = true;
       this.reference._appendDomForce(
         this.current_id,
@@ -636,10 +637,6 @@ var createSignal = class {
 var localTree = new reference();
 var Screen = class {
   constructor(cradova_screen_initials) {
-    /**
-     * this is a set of added html to the screen
-     */
-    // private _secondaryChildren: VJSType<HTMLElement>[] = [];
     /**
      * error handler for the screen
      */
@@ -704,13 +701,13 @@ var Screen = class {
   onDeactivate(cb) {
     this._deCallBack = cb;
   }
-  // addChildren(...addOns: VJSType<HTMLElement>[]) {
-  //   this._secondaryChildren.push(...addOns);
-  // }
   async _deActivate() {
     if (this._deCallBack) {
       await this._deCallBack();
     }
+    if (this._transition) {
+      this._template.classList.remove(this._transition);
+    }
   }
   drop(state) {
     if (typeof state === "boolean") {
@@ -761,7 +758,6 @@ RouterBox["routes"] = {};
 RouterBox["pageevents"] = [];
 RouterBox["paused"] = false;
 RouterBox["start_pageevents"] = async function(url) {
-  CradovaEvent.dispatchEvent("onTransition");
   setTimeout(() => {
     for (let ci = 0; ci < RouterBox["pageevents"].length; ci++) {
       RouterBox["pageevents"][ci](url);
@@ -858,6 +854,7 @@ RouterBox.router = async function(_e, _force) {
           template: route._html
         });
         RouterBox.routes[url] = route;
+        CradovaEvent.dispatchEvent("onTransition");
       }
       if (params) {
         RouterBox.params.params = params;
@@ -1334,9 +1331,9 @@ var track = cra("track");
 var u = cra("u");
 var ul = cra("ul");
 var video = cra("video");
-var ___svg = (svg, properties) => {
+var svg = (svg2, properties) => {
   const span2 = document.createElement("span");
-  span2.innerHTML = svg;
+  span2.innerHTML = svg2;
   return makeElement(span2, [properties]);
 };
 
@@ -1421,8 +1418,7 @@ var _2 = (...element_initials) => {
   }
   return makeElement(element, element_initials);
 };
-_2.__proto__.svg = ___svg;
 var lib_default = _2;
 //! get url hash here and scroll into view
 
-export { Ajax, CradovaEvent, Ref, Rhoda, Router, Screen, ___svg, a, area, article, aside, assert, assertOr, audio, b, base, blockquote, br, button, canvas, caption, code, col, colgroup, createSignal, css, data, datalist, lib_default 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, table, tbody, td, template, textarea, th, title, tr, track, u, ul, useEffect, useRef, useState, video };
+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, lib_default 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 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cradova",
-  "version": "3.1.6",
+  "version": "3.2.0",
   "description": "Web framework for building web apps and PWAs",
   "main": "dist/index.js",
   "type": "module",
@@ -13,10 +13,8 @@
     "url": "git+https://github.com/FridayCandour/cradova.git"
   },
   "scripts": {
-    "build": "tsup lib/index.ts && npm run cp:typedef",
-    "build:ts": "tsup lib/index.ts",
-    "cp:typedef": "cp cradova.d.ts dist/index.d.ts",
-    "cp:types": "cp lib/types.ts dist/types.ts",
+    "build": "tsup lib/index.ts",
+    "pub": "tsup lib/index.ts && npm publish",
     "lint": "eslint . --fix"
   },
   "keywords": [