cradova 3.2.1 → 3.3.0

package/README.md

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

package/dist/index.d.ts

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