cradova 3.3.6 → 3.3.8

package/README.md

@@ -511,9 +511,9 @@ Join Us on [telegram](https://t.me/UiedbookHQ).
 
 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.
 
-## Supporting Exabase development
+## Supporting Cradova development
 
-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
+Your Support is a good force for change anytime you do it, you can ensure Our projects, growth, Cradova, Cradova, 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`,

package/dist/index.js

@@ -995,7 +995,7 @@ var video = cra("video");
 var svg = (svg2, properties) => {
   const span2 = document.createElement("span");
   span2.innerHTML = svg2;
-  return makeElement(span2, properties);
+  return makeElement(span2, properties || []);
 };
 var raw = (html) => {
   const div2 = document.createElement("div");

package/dist/primitives/classes.d.ts

@@ -0,0 +1,350 @@
+import { type CradovaScreenType } from "./types";
+/**
+ * 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>;
+}
+export declare const CradovaEvent: cradovaEvent;
+/**
+ * Cradova Ref
+ * -------
+ * create dynamic components
+ */
+export 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);
+    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): any;
+    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
+ */
+export declare class lazy<Type> {
+    content: Type | undefined;
+    private _cb;
+    constructor(cb: () => Promise<unknown>);
+    load(): Promise<void>;
+}
+/**
+ * Cradova
+ * ---
+ * make reference to dom elements
+ */
+export 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
+ * ----
+ *  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 declare class createSignal<Type extends Record<string, any>> {
+    private callback;
+    private persistName;
+    private actions;
+    private ref;
+    value: Type;
+    constructor(initial: Type, props?: {
+        persistName?: string | undefined;
+    });
+    /**
+     *  Cradova Signal
+     * ----
+     *  set signal value
+     * @param value - signal value
+     * @returns void
+     */
+    set(value: Type | ((value: Type) => Type), shouldRefRender?: boolean): void;
+    /**
+     *  Cradova Signal
+     * ----
+     *  set a key value if it's an object
+     * @param key - key of the key
+     * @param value - value of the key
+     * @returns void
+     */
+    setKey<k extends keyof Type>(key: k, value: unknown, shouldRefRender?: boolean): void;
+    /**
+     *  Cradova Signal
+     * ----
+     *  set a key to signal an action
+     * @param name - name of the action
+     * @param action function to execute
+     */
+    createAction(name: string, action: (data?: unknown) => void): void;
+    /**
+     *  Cradova Signal
+     * ----
+     *  creates man y actions at a time
+     * @param name - name of the action
+     * @param action function to execute
+     */
+    createActions(Actions: Record<string, (data?: unknown) => void>): void;
+    /**
+     *  Cradova Signal
+     * ----
+     *  fires an action if available
+     * @param key - string key of the action
+     * @param data - data for the action
+     */
+    fireAction(key: string, data?: Type): Type;
+    /**
+     * Cradova
+     * ---
+     * is used to bind signal data to elements and Refs
+     *
+     * @param prop
+     * @returns something
+     */
+    bind(prop: string): any;
+    private _updateState;
+    /**
+     *  Cradova Signal
+     * ----
+     *  set a auto - rendering component for this store
+     *
+     * @param Ref component to bind to.
+     */
+    bindRef(ref: Ref, binding?: {
+        event?: string;
+        signalProperty: string;
+        _element_property: string;
+    }): void;
+    /**
+     *  Cradova Signal
+     * ----
+     *  set a update listener on value changes
+     * @param callback
+     */
+    listen(callback: (a: Type) => void): void;
+    /**
+     *  Cradova Signal
+     * ----
+     * clear the history on local storage
+     *
+     */
+    clearPersist(): void;
+}
+/**
+ *  Cradova Screen
+ * ---
+ * create instances of manageable pages
+ * @param name
+ * @param template
+ */
+export declare class Screen {
+    /**
+     * used internally
+     */
+    private _name;
+    /**
+     * this should be a cradova screen component
+     */
+    _html: ((this: Screen, data?: unknown) => HTMLElement | DocumentFragment) | HTMLElement | DocumentFragment;
+    _packed: boolean;
+    private _template;
+    private _callBack;
+    private _deCallBack;
+    private _persist;
+    private _delegatedRoutesCount;
+    private _dropped;
+    /**
+     * error handler for the screen
+     */
+    _errorHandler: ((err: unknown) => void) | null;
+    constructor(cradova_screen_initials: CradovaScreenType);
+    _derive(): {
+        _name: string;
+        _callBack: ((cradovaScreenSet: HTMLElement) => void | Promise<void>) | undefined;
+        _deCallBack: ((cradovaScreenSet: HTMLElement) => void | Promise<void>) | undefined;
+    };
+    _apply_derivation(derivation: {
+        _name: string;
+        _callBack: ((cradovaScreenSet: HTMLElement) => void | Promise<void>) | undefined;
+        _deCallBack: ((cradovaScreenSet: HTMLElement) => void | Promise<void>) | undefined;
+    }): void;
+    get _delegatedRoutes(): number;
+    set _delegatedRoutes(count: number);
+    setErrorHandler(errorHandler: (err: unknown) => void): void;
+    _package(): Promise<void>;
+    onActivate(cb: () => Promise<void> | void): void;
+    onDeactivate(cb: () => Promise<void> | void): void;
+    _deActivate(): Promise<void>;
+    drop(state?: boolean): boolean | undefined;
+    _Activate(force?: boolean): Promise<void>;
+}
+/** cradova router
+ * ---
+ * Registers a route.
+ *
+ * @param {string}   path     Route path.
+ * @param  screen the cradova document tree for the route.
+ */
+export declare class Router {
+    /**
+     * cradova router
+     * ---
+     * Registers a route.
+     *
+     * accepts an object containing pat and screen
+     */
+    static BrowserRoutes(obj: Record<string, any>): void;
+    /**
+      Go back in Navigation history
+      */
+    static back(): void;
+    /**
+      Go forward in Navigation history
+      */
+    static forward(): void;
+    /**
+      Pause navigation
+      */
+    static pauseNaviagtion(): void;
+    /**
+     resume navigation
+    */
+    static resumeNaviagtion(): void;
+    /**
+     * Cradova Router
+     * ------
+     *
+     * Navigates to a designated screen in your app
+     *
+     * @param href string
+     * @param data object
+     * @param force boolean
+     */
+    static navigate(href: string, data?: Record<string, unknown> | null, force?: boolean): void;
+    /**
+     * Cradova
+     * ---
+     * Loading screen for your app
+     *
+     * lazy loaded loading use
+     *
+     * @param screen
+     */
+    static setLoadingScreen(screen: Screen): void;
+    /** cradova router
+     * ---
+     * Listen for navigation events
+     *
+     * @param callback   () => void
+     */
+    static onPageEvent(callback: () => void): void;
+    /** cradova router
+     * ---
+     * get a screen ready before time.
+     *
+     * @param {string}   path Route path.
+     * @param  data data for the screen.
+     */
+    static packageScreen(path: string): Promise<void>;
+    /**
+     * Cradova Router
+     * ------
+     *
+     * return last set router params
+     *
+     * .
+     */
+    static get Params(): any;
+    /**
+     * Cradova
+     * ---
+     * Error Handler for your app
+     *
+     * @param callback
+     * @param path? page path
+     */
+    static addErrorHandler(callback: (err: unknown) => void): void;
+    static _mount(): void;
+}
+export {};

package/dist/primitives/dom-objects.d.ts

@@ -0,0 +1,60 @@
+import { type VJS_params_TYPE } from "./types";
+export declare const a: (...Children_and_Properties: VJS_params_TYPE) => HTMLAnchorElement;
+export declare const article: (...Children_and_Properties: VJS_params_TYPE) => HTMLElement;
+export declare const audio: (...Children_and_Properties: VJS_params_TYPE) => HTMLAudioElement;
+export declare const br: (...Children_and_Properties: VJS_params_TYPE) => HTMLBRElement;
+export declare const button: (...Children_and_Properties: VJS_params_TYPE) => HTMLButtonElement;
+export declare const canvas: (...Children_and_Properties: VJS_params_TYPE) => HTMLCanvasElement;
+export declare const caption: (...Children_and_Properties: VJS_params_TYPE) => HTMLTableCaptionElement;
+export declare const col: (...Children_and_Properties: VJS_params_TYPE) => HTMLTableColElement;
+export declare const colgroup: (...Children_and_Properties: VJS_params_TYPE) => HTMLOptGroupElement;
+export declare const datalist: (...Children_and_Properties: VJS_params_TYPE) => HTMLDataListElement;
+export declare const details: (...Children_and_Properties: VJS_params_TYPE) => HTMLDetailsElement;
+export declare const dialog: (...Children_and_Properties: VJS_params_TYPE) => HTMLDialogElement;
+export declare const div: (...Children_and_Properties: VJS_params_TYPE) => HTMLDivElement;
+export declare const figure: (...Children_and_Properties: VJS_params_TYPE) => HTMLElement;
+export declare const footer: (...Children_and_Properties: VJS_params_TYPE) => HTMLElement;
+export declare const form: (...Children_and_Properties: VJS_params_TYPE) => HTMLFormElement;
+export declare const h1: (...Children_and_Properties: VJS_params_TYPE) => HTMLHeadingElement;
+export declare const h2: (...Children_and_Properties: VJS_params_TYPE) => HTMLHeadingElement;
+export declare const h3: (...Children_and_Properties: VJS_params_TYPE) => HTMLHeadingElement;
+export declare const h4: (...Children_and_Properties: VJS_params_TYPE) => HTMLHeadingElement;
+export declare const h5: (...Children_and_Properties: VJS_params_TYPE) => HTMLHeadingElement;
+export declare const h6: (...Children_and_Properties: VJS_params_TYPE) => HTMLHeadingElement;
+export declare const head: (...Children_and_Properties: VJS_params_TYPE) => HTMLHeadElement;
+export declare const header: (...Children_and_Properties: VJS_params_TYPE) => HTMLHeadElement;
+export declare const hr: (...Children_and_Properties: VJS_params_TYPE) => HTMLHRElement;
+export declare const i: (...Children_and_Properties: VJS_params_TYPE) => HTMLLIElement;
+export declare const iframe: (...Children_and_Properties: VJS_params_TYPE) => HTMLIFrameElement;
+export declare const img: (...Children_and_Properties: VJS_params_TYPE) => HTMLImageElement;
+export declare const input: (...Children_and_Properties: VJS_params_TYPE) => HTMLInputElement;
+export declare const label: (...Children_and_Properties: VJS_params_TYPE) => HTMLLabelElement;
+export declare const li: (...Children_and_Properties: VJS_params_TYPE) => HTMLLIElement;
+export declare const main: (...Children_and_Properties: VJS_params_TYPE) => HTMLElement;
+export declare const nav: (...Children_and_Properties: VJS_params_TYPE) => HTMLElement;
+export declare const ol: (...Children_and_Properties: VJS_params_TYPE) => HTMLOListElement;
+export declare const optgroup: (...Children_and_Properties: VJS_params_TYPE) => HTMLOptGroupElement;
+export declare const option: (...Children_and_Properties: VJS_params_TYPE) => HTMLOptionElement;
+export declare const p: (...Children_and_Properties: VJS_params_TYPE) => HTMLParagraphElement;
+export declare const progress: (...Children_and_Properties: VJS_params_TYPE) => HTMLProgressElement;
+export declare const q: (...Children_and_Properties: VJS_params_TYPE) => HTMLQuoteElement;
+export declare const section: (...Children_and_Properties: VJS_params_TYPE) => HTMLElement;
+export declare const select: (...Children_and_Properties: VJS_params_TYPE) => HTMLSelectElement;
+export declare const source: (...Children_and_Properties: VJS_params_TYPE) => HTMLSourceElement;
+export declare const span: (...Children_and_Properties: VJS_params_TYPE) => HTMLSpanElement;
+export declare const strong: (...Children_and_Properties: VJS_params_TYPE) => HTMLElement;
+export declare const summary: (...Children_and_Properties: VJS_params_TYPE) => HTMLElement;
+export declare const table: (...Children_and_Properties: VJS_params_TYPE) => HTMLTableElement;
+export declare const tbody: (...Children_and_Properties: VJS_params_TYPE) => HTMLTableColElement;
+export declare const td: (...Children_and_Properties: VJS_params_TYPE) => HTMLTableCellElement;
+export declare const template: (...Children_and_Properties: VJS_params_TYPE) => HTMLTemplateElement;
+export declare const textarea: (...Children_and_Properties: VJS_params_TYPE) => HTMLTextAreaElement;
+export declare const th: (...Children_and_Properties: VJS_params_TYPE) => HTMLTableSectionElement;
+export declare const title: (...Children_and_Properties: VJS_params_TYPE) => HTMLTitleElement;
+export declare const tr: (...Children_and_Properties: VJS_params_TYPE) => HTMLTableRowElement;
+export declare const track: (...Children_and_Properties: VJS_params_TYPE) => HTMLTrackElement;
+export declare const u: (...Children_and_Properties: VJS_params_TYPE) => HTMLUListElement;
+export declare const ul: (...Children_and_Properties: VJS_params_TYPE) => HTMLUListElement;
+export declare const video: (...Children_and_Properties: VJS_params_TYPE) => HTMLVideoElement;
+export declare const svg: (svg: string, properties?: VJS_params_TYPE) => HTMLSpanElement;
+export declare const raw: (html: string) => DocumentFragment;

package/dist/primitives/functions.d.ts

@@ -0,0 +1,52 @@
+import { type VJS_params_TYPE } from "./types";
+import { Ref } from "./classes";
+export declare const makeElement: <E extends HTMLElement>(element: E & HTMLElement, ElementChildrenAndPropertyList: VJS_params_TYPE) => E;
+export declare const cra: <E extends HTMLElement>(tag: string) => (...Children_and_Properties: VJS_params_TYPE) => E;
+export declare function Rhoda(l: VJS_params_TYPE): DocumentFragment;
+/**
+ *
+ * @param {expression} condition
+ * @param {function} elements[]
+ */
+export declare function $if(condition: any, ...elements: VJS_params_TYPE): any;
+export declare function $ifelse(condition: any, ifTrue: any, ifFalse?: any): any;
+export declare function $case(value: any, ...elements: VJS_params_TYPE): (key: any) => VJS_params_TYPE | undefined;
+export declare function $switch(key: unknown, ...cases: ((key: any) => HTMLElement[] | undefined)[]): HTMLElement[] | undefined;
+type LoopData<Type> = Type[];
+export 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 */
+export declare const SNRU: {
+    snru: string;
+    memo_SNRU(): void;
+};
+/**
+ * Document fragment
+ * @param children
+ * @returns
+ */
+export declare const frag: (children: VJS_params_TYPE) => 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]
+ */
+export 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
+ */
+export declare function useEffect(effect: () => void, ActiveRef: Ref): void;
+/**
+ * Cradova
+ * ---
+Returns a mutable reference object of dom elements that persists across component renders.
+ * @returns reference
+ */
+export declare function useRef(): Record<string, HTMLElement | undefined>;
+export {};

package/dist/primitives/types.d.ts

@@ -0,0 +1,89 @@
+import * as CSS from "csstype";
+import { Ref, Screen, reference } from "./classes";
+type DataAttributes = {
+    [key: `data-${string}`]: string;
+};
+type AriaAttributes = {
+    [key: `aria-${string}`]: string;
+};
+type Attributes = {
+    src?: string;
+    alt?: string;
+    for?: string;
+    rel?: string;
+    href?: string;
+    type?: string;
+    name?: string;
+    rows?: string;
+    value?: string;
+    accept: string;
+    action?: string;
+    target?: string;
+    method?: string;
+    checked?: boolean;
+    required?: string;
+    frameBorder?: string;
+    placeholder?: string;
+    reference?: reference;
+    autocomplete?: string;
+    style?: CSS.Properties;
+    updateState?: (P: any) => void;
+    onmount?: (this: HTMLElement & Attributes) => void;
+};
+export type VJS_params_TYPE = (Ref | Ref[] | string | undefined | HTMLElement | HTMLElement[] | DocumentFragment | Attributes | (() => HTMLElement) | Partial<Attributes> | Partial<HTMLDivElement> | Partial<DataAttributes> | Partial<AriaAttributes> | CSS.Properties<string | number>)[];
+export interface RouterRouteObject {
+    _html: ((this: Screen, data?: unknown) => HTMLElement | DocumentFragment) | HTMLElement | DocumentFragment;
+    _delegatedRoutes: number | boolean;
+    _Activate: (force: boolean) => Promise<void>;
+    _deActivate: (params: object) => void;
+    _package: (params: unknown) => void;
+    _errorHandler: ((err: unknown) => void) | null;
+    _derive(): {
+        _name: string;
+        _callBack: ((cradovaScreenSet: HTMLElement) => void | Promise<void>) | undefined;
+        _deCallBack: ((cradovaScreenSet: HTMLElement) => void | Promise<void>) | undefined;
+    };
+    _apply_derivation(data: {
+        _name: string;
+        _callBack: ((cradovaScreenSet: HTMLElement) => void | Promise<void>) | undefined;
+        _deCallBack: ((cradovaScreenSet: HTMLElement) => void | Promise<void>) | undefined;
+    }): unknown;
+}
+export type CradovaScreenType = {
+    /**
+     * Cradova screen
+     * ---
+     * title of the page
+     * .
+     */
+    name?: string;
+    /**
+     * Cradova screen
+     * ---
+     * The component for the screen
+     * @param data
+     * @returns void
+     * .
+     */
+    template: (this: Screen) => Element | Ref;
+    /**
+     * 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;
+};
+export {};

package/package.json

@@ -1,11 +1,12 @@
 {
   "name": "cradova",
-  "version": "3.3.6",
+  "version": "3.3.8",
   "description": "Web framework for building powerful web apps",
   "main": "dist/index.js",
   "type": "module",
   "files": [
     "dist/index.d.ts",
+    "dist/primitives/**",
     "dist/index.js"
   ],
   "repository": {
@@ -65,9 +66,7 @@
     "eslint": "^8.30.0",
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-prettier": "^4.2.1",
-    "prettier": "^2.8.1",
-    "tsup": "^6.7.0",
-    "typescript": "^4.9.4"
+    "prettier": "^2.8.1"
   },
   "dependencies": {
     "csstype": "^3.1.2"