cradova 1.0.8 → 1.0.10

package/CHANGELOG.md

@@ -36,3 +36,9 @@ and we went along with it.
 - bug fixes
 - big performance gain
 - battle testing green
+
+## 1.0.7
+
+- bug fixes
+- big performance gain
+- battle testing green

package/dist/index.d.ts

@@ -1,392 +1,12 @@
-/**
- * swipe
- * ---
- * Now you can detect swipes the best way possible
- *
- * @param callabck
- * @param touching?
- */
-export function swipe(callabck: (swipe_data: Record<string, number>) => void, touching?: boolean): {
-    start(): void;
-    stop(): void;
-};
-/**
- *  Cradova Signal
- * ----
- *  create stateful data store.
- * ability to:
- * - create a store
- * - create actions and fire them
- * - bind a Ref or RefList
- * - listen to changes
- * -  persist changes to localStorage
- * - go back and forward in value history
- * - set keys instead of all values
- * - update a cradova Ref/RefList automatically
- * @constructor initial: any, props: {useHistory, persist}
- */
-export class createSignal {
-    value: any;
-    constructor(initial: unknown, props?: {
-        useHistory?: boolean;
-        persistName?: string | undefined;
-    });
-    /**
-     *  Cradova Signal
-     * ----
-     *  set signal value
-     * @param value - signal value
-     * @returns void
-     */
-    set(value: unknown, shouldRefRender?: boolean): void;
-    /**
-     *  Cradova Signal
-     * ----
-     *  set a key value if it's an object
-     * @param name - name of the key
-     * @param value - value of the key
-     * @returns void
-     */
-    setKey(name: string, value: any, shouldRefRender?: boolean): void;
-    /**
-     *  Cradova Signal
-     * ----
-     *  set a prop value inside an object prop of the store
-     * @param key - a prop of the store - object value
-     * @param name - prop of the key object
-     * @param value - value of the name
-     * @returns void
-     */
-    setPath(key: string, name: string, value: any, shouldRefRender?: boolean): void;
-    /**
-     *  Cradova Signal
-     * ----
-     *  set a prop value inside an array prop of the store
-     * @param key - a prop of the store - object value
-     * @param index - index of the key object
-     * @param value - value of the index
-     * @returns void
-     */
-    setIndex(key: string, index: number, value: any, 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 | Record<string, (self?: any, data?: any) => void>, action?: (self?: any, data?: any) => void): void;
-    /**
-     *  Cradova Signal
-     * ----
-     *  fires an action if available
-     * @param name - string name of the action
-     * @param data - data for the action
-     */
-    fireAction(name: string, data?: any): void;
-    /**
-     *  Cradova Signal
-     * ----
-     *  set a auto - rendering component for this store
-     *
-     * @param Ref component to bind to.
-     * @param path a property in the object to send to attached ref
-     */
-    bindRef(Ref: any, path?: string): void;
-    /**
-     *  Cradova Signal
-     * ----
-     *  set signal value to a future one
-     * @returns void
-     */
-    forward(): void;
-    /**
-     *  Cradova Signal
-     * ----
-     *  set signal value to a old past one
-     * @returns void
-     */
-    backward(): void;
-    /**
-     *  Cradova Signal
-     * ----
-     *  set a update listener on value changes
-     * @param callback
-     */
-    listen(callback: (a: any) => void): void;
-    /**
-     * Cradova Signal
-     * ----
-     * get value */
-    get(): any;
-    /**
-     *  Cradova Signal
-     * ----
-     * clear the history on local storage
-     */
-    clearPersist(): void;
-}
-type CradovaScreenType = {
-    name: string;
-    template: Function | HTMLElement;
-    transition?: string;
-    callBack?: (html?: any, data?: Record<string, any>) => void;
-    persist?: boolean;
-    effect: (fn: () => any) => void;
-};
-type RouterRouteObject = {
-    controller: (params: object, force?: boolean) => any;
-    deactivate: (params: object) => any;
-    packager: (params: any) => void;
-};
-/**
- * Cradova Router
- * ---
- * Facilitates navigation within the application and initializes
- * page views based on the matched routes.
- */
-type RouterType = {
-    /**
-     * Registers a route.
-     *
-     * @param {string}   path     Route path.
-     * @param {any} screen the cradova document tree for the route.
-     */
-    route: (path: string, screen: CradovaScreenType) => void;
-    routes: Record<string, RouterRouteObject>;
-    lastNavigatedRoute: string | null;
-    lastNavigatedRouteController: RouterRouteObject | null;
-    nextRouteController: RouterRouteObject | null;
-    params: Record<string, any>;
-    /**
-     * n/a
-     */
-    router: (e: any, force?: boolean) => void;
-    /**
-     * get a screen ready before time.
-     *
-     * @param {string}   path     Route path.
-     * @param {any} data data for the screen.
-     */
-    packageScreen: (path: string, data?: any) => void;
-    pageShow: ((path: string) => void) | null;
-    pageHide: ((path: string) => void) | null;
-    onPageShow: (callback: () => void) => void;
-    onPageHide: (callback: () => void) => void;
-    /**
-     * Cradova Router
-     * ------
-     *
-     * Navigates to a designated screen in your app
-     */
-    navigate: (href: string, data?: Record<string, any> | null, force?: boolean) => void;
-} | Record<string, any>;
-/**
- * Cradova Router
- * ---
- * Facilitates navigation within the application and initializes
- * page views based on the matched routes.
- */
-export const Router: RouterType;
-/**
- * @param name
- * @param template
- * @param transitions
- */
-export class Screen {
-    /**
-     * this is the name of the screen that appears as the title
-     */
-    name: string;
-    secondaryChildren: Array<any>;
-    static SCALE_IN: string;
-    static SCALE_OUT: string;
-    static CIRCLE_IN: string;
-    static CIRCLE_OUT: string;
-    static FADE_OUT: string;
-    static FADE_IN: string;
-    static SLIDE_UP: string;
-    static SLIDE_DOWN: string;
-    static SLIDE_LEFT: string;
-    static SLIDE_RIGHT: string;
-    /**
-     * this tells cradova to persist state on the screen or not
-     * persisting is better
-     */
-    persist: boolean;
-    rendered: boolean;
-    constructor(cradova_screen_initials: CradovaScreenType);
-    effect(fn: () => unknown | Promise<unknown>): Promise<void>;
-    package(data: any): Promise<void>;
-    onActivate(cb: (data: any) => void): void;
-    onDeactivate(cb: (data: any) => void): void;
-    addChild(...addOns: any[]): void;
-    detach(): void;
-    Activate(data: any, force: boolean): Promise<void>;
-}
-export class Scaffold {
-    push(label: string, data?: unknown, force?: boolean): Promise<void>;
-    pop(data?: unknown, force?: boolean): Promise<void>;
-    addScaffolds(scaffolds: Record<string, CradovaScreenType>): Promise<void>;
-}
-export const controls: () => void;
-export function uuid(num?: number): string;
-export function PromptBeforeLeave(callback?: (e: any) => void): void;
-/**
-Write CSS media in javascript
-
-@example
-
-_.media("min-width: 790px",
-["#container",
-{
-    width: "100%",
-    height: "100%",
-    "background-color": "#0000"
-}],
-
-["#header",
-{
-    width: "100%",
-    height: "20%",
-    "background-color": "#fff"
-}]
-)
-*/
-export function media(value: string, ...properties: any[]): void;
-/**
-Write CSS styles in Javascript
-@example
-
-css("#container",
-{
-    height: "100%",
-    height: "100%",
-    background-color: "#ff9800"
-})
-
-css(".btn:hover",
-{
-    height: "100%",
-    height: "100%",
-    background-color: "#ff9800"
-})
-
-*/
-export function css(identifier: string, properties: Record<string, string>): void;
-/**
-Write animation value in javascript
-
-@example
-
-_.animate("polarization",
-["from",
-{
-    transform: "scale3D(2)" ,
-    height: "10%",
-    "background-color": "#0000"
-}],
-
-["to",
-{
-    transform: "scale3D(1)" ,
-    height: "100%",
-    "background-color": "#ff9800"
-}]
-)
-
-*/
-export function animate(identifier: string, ...properties: any[]): void;
-/**
- *
- * @param {expression} condition
- * @param {function} callback
- */
-export function assert(condition: any, ...callback: (() => any)[]): "" | (() => any)[];
-export function assertOr(condition: any, ifTrue: () => any, ifFalse: () => any): () => any;
-/**
- * Create element and get a callback to update their state
- * no need to manage stateIDs
- * ----------------------------------------------------------------
- *
- * @param element_initials
- * @param props
- * @returns
- */
-export function RefElement(element_initials?: string, props?: Record<string, string>): {
-    render(data: any): any;
-    updateState(state: Record<string, any>): void;
-};
-export const ls: Record<string, Function>;
-export function fullScreen(e: Element): {
-    set(): void;
-    exist(): void;
-};
-export class RefList {
-    constructor(component: (...data: any) => any);
-    stale(datas: any): void;
-    render(datas?: any): any;
-    updateState(datas: any[]): void;
-}
-/**
- * Cradova Ref
- * -------
- * create dynamic components
- *
- */
-export class Ref {
-    constructor(component: (...data: any) => any);
-    stale(...data: any): void;
-    /**
-     * Cradova Ref
-     * ---
-     * returns html with cradova reference
-     * @param data
-     * @returns html
-     */
-    render(...data: any): () => any;
-    onStateUpdate(cb: any): void;
-    /**
-     * Cradova Ref
-     * ---
-     * update ref component with new data and update the dom.
-     * @param data
-     * @returns void
-     */
-    updateState(...data: any): void;
-    remove(): void;
-}
-/**
- * Document fragment
- * @param children
- * @returns
- */
-type fragmentTYPE = () => (() => HTMLElement) | HTMLElement;
-export const frag: (...children: fragmentTYPE[]) => DocumentFragment;
-/**
- * Send a new state to specified element with stateID
- *
- * @param stateID
- * @param state
- * @returns element(s)
- */
-export function dispatch(stateID: string | Record<string, any>, state?: Record<string, any>): Node[];
-/**
- *
- * Cradova Ajax
- * ------------------
- * your new axios alternative
- * supports files upload
- * @param url string
- * @param {{method: string;data;header;callbacks;}} opts
- * @returns any
- */
-export function Ajax(url: string | URL, opts?: {
-    method?: string;
-    data?: Record<string, any>;
-    header?: Record<string, any>;
-    callbacks?: Record<string, (arg: any) => void>;
-} | any): Promise<unknown>;
+export { swipe } from "./sacho/swipe";
+export { Signal as createSignal } from "./scripts/createSignal";
+export { Router } from "./scripts/Router";
+export { Screen } from "./scripts/Screen";
+export { Scaffold } from "./scripts/Scaffold";
+export { dispatch } from "./scripts/track";
+export { Ajax } from "./scripts/ajax";
+export { IsElementInView } from "./scripts/utils";
+export { frag, fullScreen, assert, uuid, animate, controls, PromptBeforeLeave, RefElement, css, media, ls, Ref, RefList, assertOr, } from "./scripts/fns";
 /**
  * Creates new cradova HTML element
  *  @example
@@ -424,5 +44,3 @@ export function Ajax(url: string | URL, opts?: {
  */
 declare const _: any;
 export default _;
-
-//# sourceMappingURL=index.d.ts.map

package/dist/index.js

@@ -1,3 +1,4 @@
+/* eslint-disable no-undef */
 /*
 
 """"""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
@@ -46,6 +47,7 @@ export { Screen } from "./scripts/Screen";
 export { Scaffold } from "./scripts/Scaffold";
 export { dispatch } from "./scripts/track";
 export { Ajax } from "./scripts/ajax";
+export { IsElementInView } from "./scripts/utils";
 export { frag, fullScreen, assert, uuid, animate, controls, PromptBeforeLeave, RefElement, css, media, ls, Ref, RefList, assertOr, } from "./scripts/fns";
 import { Init } from "./scripts/init";
 ("use strict");
@@ -190,24 +192,14 @@ const _ = (...element_initials) => {
             let childrens2rd = [], props = {}, text;
             for (let i = 0; i < incoming.length; i++) {
                 if (typeof incoming[i] === "function" ||
-                    incoming[i] instanceof HTMLElement
-                // ||
-                // incoming[i].tagName
-                ) {
+                    incoming[i] instanceof HTMLElement) {
                     childrens2rd.push(incoming[i]);
                     continue;
                 }
-                if (
-                // !incoming[i].tagName &&
-                !(incoming[i] instanceof HTMLElement) &&
-                    !Array.isArray(incoming[i]) &&
-                    typeof incoming[i] === "object" &&
-                    !incoming[i].tagName) {
+                if (!Array.isArray(incoming[i]) && typeof incoming[i] === "object") {
                     if (incoming[i].beforeMount) {
                         beforeMount = incoming[i]["beforeMount"];
-                        continue;
-                    }
-                    if (incoming[i].composedPath) {
+                        incoming[i]["beforeMount"] = undefined;
                         continue;
                     }
                     props = incoming[i];
@@ -219,6 +211,8 @@ const _ = (...element_initials) => {
                     continue;
                 }
             }
+            // @ts-ignore
+            incoming = undefined;
             if (childrens.length) {
                 childrens2rd.push(...childrens);
             }
@@ -236,15 +230,26 @@ const _ = (...element_initials) => {
                 element.className = initials.className.trim();
             }
             if (initials.ID) {
-                element.id = initials.ID.trim();
+                element.setAttribute("id", initials.ID.trim());
             }
             if (initials.innerValue) {
-                element.append(initials.innerValue);
+                element.innerText = initials.innerValue;
             }
             for (const prop in properties) {
                 if (prop === "style" && typeof properties[prop] === "object") {
                     for (const [k, v] of Object.entries(properties[prop])) {
-                        element.style[k] = v;
+                        if ((element.style[k] === "" && k !== "src") ||
+                            typeof element.style[k] === "string") {
+                            element.style[k] = v;
+                        }
+                        else {
+                            console.error(element);
+                            throw new Error("✘  Cradova err :  " +
+                                element +
+                                " does not have " +
+                                k +
+                                " as a valid css style property");
+                        }
                     }
                     continue;
                 }
@@ -262,7 +267,7 @@ const _ = (...element_initials) => {
                     continue;
                 }
                 if (prop === "text") {
-                    element.innerText = properties[prop];
+                    text = properties[prop];
                     continue;
                 }
                 try {
@@ -283,7 +288,14 @@ const _ = (...element_initials) => {
                 for (const prop in props) {
                     if (prop === "style" && typeof props[prop] === "object") {
                         for (const [k, v] of Object.entries(props[prop])) {
-                            element.style[k] = v;
+                            if (typeof element.style[k] !== "undefined" && k !== "src") {
+                                element.style[k] = v;
+                            }
+                            else {
+                                throw new Error("✘  Cradova err :  " +
+                                    k +
+                                    " is not a valid css style property");
+                            }
                         }
                         continue;
                     }
@@ -292,7 +304,7 @@ const _ = (...element_initials) => {
                         continue;
                     }
                     if (prop === "text" && typeof props[prop] === "string") {
-                        element.innerText = props[prop];
+                        text = props[prop];
                         continue;
                     }
                     if (prop === "class" && typeof props[prop] === "string") {
@@ -301,6 +313,7 @@ const _ = (...element_initials) => {
                     }
                     if (prop === "beforeMount") {
                         beforeMount = props["beforeMount"];
+                        props["beforeMount"] = undefined;
                         continue;
                     }
                     try {
@@ -365,8 +378,7 @@ const _ = (...element_initials) => {
                     }
                     const child = childrens2rd[i];
                     if (child instanceof HTMLElement ||
-                        child instanceof DocumentFragment ||
-                        typeof child === "string") {
+                        child instanceof DocumentFragment) {
                         element.append(child);
                         // @ts-ignore
                         if (child.afterMount) {
@@ -377,20 +389,23 @@ const _ = (...element_initials) => {
                         }
                     }
                     else {
-                        console.error(" ✘  Cradova err:   got", child);
-                        throw new Error("  ✘  Cradova err:  invalid child type: " +
-                            "(" +
-                            typeof child +
-                            ")");
+                        if (typeof child === "string") {
+                            text = child;
+                        }
+                        else {
+                            console.error(" ✘  Cradova err:   got", child);
+                            throw new Error("  ✘  Cradova err:  invalid child type: " +
+                                "(" +
+                                typeof child +
+                                ")");
+                        }
                     }
                 }
             }
             //
             if (text) {
-                element.append(text);
+                element.innerText = text;
             }
-            // TODO: this will be updated to use data-stateid soon
-            // speed test still going on
             if (element.stateID) {
                 // adding cradova dynamic signature
                 element.classList.add("cra_child_doc");
@@ -405,11 +420,15 @@ const _ = (...element_initials) => {
         console.error(" ✘  Cradova err: NO TEMPLATE STRING PROVIDED");
         return () => "NO TEMPLATE STRING PROVIDED";
     }
-    const CradovaElement = identify(element_initials);
-    if (!CradovaElement) {
-        throw new Error(" ✘  Cradova err:  invalid element initials  " + element_initials);
-    }
-    return CradovaElement;
+    // const CradovaElement: () => HTMLElement | undefined =
+    //   identify(element_initials);
+    // if (!CradovaElement) {
+    //   throw new Error(
+    //     " ✘  Cradova err:  invalid element initials  " + element_initials
+    //   );
+    // }
+    // return CradovaElement;
+    return identify(element_initials);
 };
 Init();
 export default _;