cradova 1.4.1 → 1.5.0

package/README.md

@@ -1,6 +1,12 @@
-<a><img src="cradova.png" alt="logo" width="80" height="80" align="right"></a>
+<div style="display: flex; align-items:center; justify-content: space-around; width: 100%;">
+<h1 style="border: none"> Cradova</h1>
+<a><img src="cradova.png" alt="cradova logo" width="100" height="100"></a>
+</div>
+<br>
+<hr>
+<br>
+<br>
 
-# Cradova.js
 [![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)
@@ -8,28 +14,33 @@
 [![Donate at OpenCollective](https://img.shields.io/opencollective/all/cradova.svg?colorB=brightgreen)](https://opencollective.com/cradova)
 [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](https://github.com/cradova/cradova.js/blob/next/contributing.md)
 
-  
 ## Contents
 
-- [What is Cradova](#what-is-cradovajs)
-- [Why did we build Cradova?](#whats-the-benefit)
+- [What is Cradova](#what-is-cradova)
+- [Why Cradova?](#whats-the-benefit)
 - [Installation](#installation)
 - [Examples](#examples)
 - [Documentation](#documentation)
 - [Getting Help](#getting-help)
 - [Contributing](#contributing)
 
-## What is cradova.js?
+## What is Cradova?
 
 Cradova is a JavaScript framework for building Single Page Applications and PWAs.
 
-It's small, fast and provides state management, routing and XHR utilities out of the box.
+It's small, fast and provides state management, routing and a rest API utility out of the box.
+
+Cradova follows the [VJS specification](https://github.com/fridaycandour/cradova/blob/main/spec.md)
 
 ## What's the benefit?
-We aim to be fast and simple with and no hidden abstractions whatsoever.
-We don't use visual DOM or any diff algorithms to manage the DOM.
 
-Cradova has been used in production and we will update this README to reflect our lessons as we go.
+Cradova is aimed to be fast and simple with and fewer abstractions and yet easily composable.
+
+We don't use visual DOM or diff algorithms to manage the DOM.
+
+State management is done more elegantly with the predictive model, manually and easily with all the speed.
+
+Cradova has been used on a couple of projects in production and we will update this page to reflect our progress as we keep improving.
 
 ## Installation
 
@@ -51,36 +62,38 @@ Cradova has been used in production and we will update this README to reflect ou
 npm i cradova
 ```
 
-
 ## Examples
+
 Many aspects of Cradova are not reflected in the following example. More functionality will be entailed in future docs.
 
 Here's an example of create a basic component in Cradova:
 
 ```js
-import _, { frag } from "cradova";
+import _ from "cradova";
 
 function Hello(name) {
   return _("h1", "Hello " + name);
 }
 
-// calling Hello returns the HTML
-const html = Hello("peter")(); // or
-// using frag
-const html = frag(Hello("peter"), Hello("joe"));
+// document fragment empty cradova call _()
+
+const html = _(Hello("peter"), Hello("joe"));
+
 document.body.append(html);
 ```
 
 ## Using Screen
+
 ```js
 import _, { Screen, Router } from "cradova";
 
 function HelloMessage(name) {
   // an effect run once after screen renders
   this.effect(() => {
-    return new Promise((res) => {
+   const name = new Promise((res) => {
       res("friday");
     });
+    this.updateState(await name)
   });
   // effects can be used to make api calls needed for the page
   return _("div", "Hello  " + name);
@@ -129,10 +142,21 @@ function counter() {
   });
 }
 
-function HelloMessage(name) {
+function dataCounter() {
+  return _("h1| 0", {
+    shouldUpdate: true,
+    $num: "0", // data-num
+    onclick() {
+     const num = Number(this.getAttribute("data-num")) + 1;
+      this.updateState({ text: num, $num: num });
+    },
+  });
+}
+
+function HelloMessage(name = "no name") {
   return _("div.foo#bar", {
     shouldUpdate: true,
-    text: "hello  " + (name || "no name"),
+    text: "hello  " + name,
     onclick() {
       const name = prompt("what are your names");
       this.updateState({ text: "hello " + name });
@@ -140,13 +164,13 @@ function HelloMessage(name) {
   });
 }
 
-const nameRef = new Ref(function ({ name }) {
+const nameRef = new Ref(function ( name ) {
   const self = this;
   return _("div.foo#bar", {
     text: "hello" + (name || "no name"),
     onclick() {
       const name = prompt();
-      self.updateState({ name });
+      self.updateState(name);
     },
   });
 });
@@ -154,8 +178,9 @@ const nameRef = new Ref(function ({ name }) {
 function Home() {
   return _("div.foo#bar",
    counter,
+   dataCounter,
    HelloMessage,
-   nameRef.render({ name: "no name" })
+   nameRef.render( "no name" )
   );
 }
 
@@ -169,22 +194,27 @@ Router.route("/", home);
 ```
 
 ## Documentation
+
 We are currently building cradova's documentation and we have only a few hands, if you're interested in helping you can join the community, learn first hand, and support cradova's progress.
 
 ## Getting Help
+
 To get further insights and help on Cradova, visit our new [Telegram Community Chat](https://t.me/cradovaframework).
 
 ## Contributing
-We are currently working to set up:
 
+We are currently working to [set](https://github.com/fridaycandour/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
-- building cradova CLI
-
 
 ## Sponsor
-Your support is appriciated and needed to advance Cradova further into the future.\
-Sponsorships can be done via [Patreon](https://www.patreon.com/FridayCandour).\
-Both monthly-recurring sponsorships and one-time donations are accepted. Recurring sponsorships will be entitled to logo placements in Tiers.
+
+Your support is appreciated and needed to advance Cradova for more performance and improvements.
+
+Sponsorships can be done via [Patreon](https://www.patreon.com/FridayCandour) and [KO-FI](https://www.ko-fi.com/fridaycandour).
+
+Both monthly-recurring sponsorships and one-time donations are accepted.

package/dist/index.d.ts

@@ -35,9 +35,7 @@ declare module "cradova" {
     updateState(data: unknown): void;
   };
 
-  type CradovaElementType = Record<string, any>;
-
-  type RefType = {
+  export type RefType<D> = {
     /**
      * Cradova Ref
      * ---
@@ -45,7 +43,7 @@ declare module "cradova" {
      * @param data
      * @returns HTMLElement
      */
-    render(data?: any): () => any;
+    render(data?: D): () => any;
     /**
      * Cradova Ref
      * ---
@@ -61,7 +59,7 @@ declare module "cradova" {
      * @param data
      * @returns void
      */
-    updateState(data: any): void;
+    updateState(data: D, stash?: boolean): void;
     /**
      * Cradova Ref
      * ---
@@ -77,7 +75,15 @@ declare module "cradova" {
      *
      */
     effect(fn: (data: unknown) => Promise<void> | void): void;
+    /**
+     * Cradova Ref
+     * ---
+     * returns last set stashed Ref data
+     *
+     */
+    stash: D;
   };
+
   /**
    * Cradova Router
    * ---
@@ -235,7 +241,7 @@ declare module "cradova" {
    * - update a cradova Ref automatically
    * @constructor initial: any, props: {useHistory, persist}
    */
-  export class createSignal {
+  export class createSignal<Type> {
     private callback;
     private persistName;
     private actions;
@@ -246,7 +252,7 @@ declare module "cradova" {
     private path;
     value: any;
     constructor(
-      initial: unknown,
+      initial: Type,
       props?: {
         useHistory?: boolean;
         persistName?: string | undefined;
@@ -259,46 +265,21 @@ declare module "cradova" {
      * @param value - signal value
      * @returns void
      */
-    set(value: unknown, shouldRefRender?: boolean): void;
+    set(value: Type, 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
+     * @param shouldRefRender? boolean
      * @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;
+    setKey(name: string, value: unknown, shouldRefRender?: boolean): void;
     /**
      *  Cradova Signal
      * ----
@@ -307,8 +288,8 @@ declare module "cradova" {
      * @param action function to execute
      */
     createAction(
-      name: string | Record<string, (self?: any, data?: any) => void>,
-      action?: (self?: any, data?: any) => void
+      name: string | Record<string, (self?: this, data?: Type) => void>,
+      action?: (self?: this, data?: any) => void
     ): void;
     /**
      *  Cradova Signal
@@ -317,7 +298,7 @@ declare module "cradova" {
      * @param name - string name of the action
      * @param data - data for the action
      */
-    fireAction(name: string, data?: any): void;
+    fireAction(name: string, data?: Type): void;
     /**
      *  Cradova Signal
      * ----
@@ -347,7 +328,7 @@ declare module "cradova" {
      *  set a update listener on value changes
      * @param callback
      */
-    listen(callback: (a: any) => void): void;
+    listen(callback: (data: Type) => void): void;
     /**
      *  Cradova Signal
      * ----
@@ -367,10 +348,10 @@ declare module "cradova" {
    * @constructor initial: any, Ref: any
    */
 
-  export class $ {
+  export class $<Type> {
     private ref;
     value: any;
-    constructor(initial: unknown);
+    constructor(initial: Type);
     /**
      *  Cradova simpleStore
      * ----
@@ -378,7 +359,7 @@ declare module "cradova" {
      * @param value - simpleStore value
      * @returns void
      */
-    set(value: unknown, shouldRefRender?: boolean): void;
+    set(value: Type, shouldRefRender?: boolean): void;
     /**
      *  Cradova simpleStore
      * ----
@@ -387,7 +368,7 @@ declare module "cradova" {
      * @param value - value of the key
      * @returns void
      */
-    setKey(name: string, value: any, shouldRefRender?: boolean): void;
+    setKey(name: string, value: unknown, shouldRefRender?: boolean): void;
     /**
      *  Cradova simpleStore
      * ---
@@ -414,9 +395,9 @@ declare module "cradova" {
     url: string | URL,
     opts?:
       | {
-          method?: string;
+          method?: "GET" | "POST";
           data?: Record<string, any>;
-          header?: Record<string, any>;
+          header?: { "content-type": string } & Record<string, any>;
           callbacks?: Record<string, (arg: any) => void>;
         }
       | any
@@ -480,8 +461,8 @@ css(".btn:hover",
    * create dynamic components
    *
    */
-  export class Ref {
-    constructor(component: (...data: any) => any);
+  export class Ref<D> {
+    constructor(component: (data: D) => any);
     /**
      * Cradova Ref
      * ---
@@ -489,7 +470,7 @@ css(".btn:hover",
      * @param data
      * @returns HTMLElement
      */
-    render(data?: any): () => any;
+    render(data?: D, stash?: boolean): () => any;
     /**
      * Cradova Ref
      * ---
@@ -505,7 +486,7 @@ css(".btn:hover",
      * @param data
      * @returns void
      */
-    updateState(data: any): void;
+    updateState(data: D, stashed?: boolean): void;
     /**
      * Cradova Ref
      * ---
@@ -521,6 +502,13 @@ css(".btn:hover",
      *
      */
     effect(fn: (data: unknown) => Promise<void> | void): void;
+    /**
+     * Cradova Ref
+     * ---
+     * returns last set stashed Ref data
+     *
+     */
+    stash: D;
   }
 
   /**

package/dist/index.js

@@ -89,7 +89,6 @@ var createSignal = class {
     this.history = [];
     this.index = 0;
     this.path = null;
-    this.value = null;
     this.value = initial;
     if (props && props.persistName) {
       this.persistName = props.persistName;
@@ -125,7 +124,7 @@ var createSignal = class {
     if (!this.useHistory)
       return;
     this.index += 1;
-    this.history.push(value);
+    this.history.push(this.value);
   }
   setKey(name, value, shouldRefRender) {
     if (typeof this.value === "object" && !Array.isArray(this.value)) {
@@ -147,37 +146,13 @@ var createSignal = class {
         return;
       this.history.push(this.value);
       this.index += 1;
-    }
-  }
-  setPath(key, name, value, shouldRefRender) {
-    if (this.value[key]) {
-      this.value[key][name] = value;
-    } else {
-      this.value[key] = { [name]: [value] };
-    }
-    if (this.ref && shouldRefRender !== false) {
-      if (this.path) {
-        this.ref.updateState(this.value[this.path]);
-      } else {
-        this.ref.updateState(this.value);
-      }
-    }
-  }
-  setIndex(key, index, value, shouldRefRender) {
-    if (Array.isArray(this.value[key])) {
-      this.value[key][index] = value;
     } else {
       throw new Error(
-        "\u2718  Cradova err :  " + this.value[key] + "  is not an array "
+        `\u2718  Cradova err : can't set key ${String(
+          name
+        )} . store value is not a javascript object`
       );
     }
-    if (this.ref && shouldRefRender !== false) {
-      if (this.path) {
-        this.ref.updateState(this.value[this.path]);
-      } else {
-        this.ref.updateState(this.value);
-      }
-    }
   }
   createAction(name, action) {
     if (typeof name === "string" && typeof action === "function") {
@@ -240,7 +215,7 @@ var createSignal = class {
   }
   clearPersist() {
     if (this.persistName) {
-      localStorage.setItem(this.persistName, "");
+      localStorage.removeItem(this.persistName);
     }
   }
 };
@@ -274,7 +249,7 @@ function css(identifier, properties) {
     }
     styTag = document.createElement("style");
     styTag.textContent = identifier;
-    document.head.append(styTag);
+    document.head.appendChild(styTag);
     return;
   }
   if (!properties) {
@@ -302,7 +277,7 @@ function css(identifier, properties) {
 `;
   totalStyle += styS + style + styE;
   styleTag.innerHTML = totalStyle;
-  document.head.append(styleTag);
+  document.head.appendChild(styleTag);
 }
 function assert(condition, ...callback) {
   if (condition) {
@@ -326,34 +301,20 @@ ls.retrieve = (name) => {
 ls.remove = (name) => {
   localStorage.removeItem(name);
 };
-ls.getKey = (index) => {
-  return window.localStorage.key(index);
-};
-ls.clear = () => {
-  localStorage.clear();
-};
-function fullScreen(e) {
-  return {
-    set() {
-      e.requestFullscreen().catch((err2) => {
-        throw err2;
-      });
-    },
-    exist() {
-      document.exitFullscreen();
-    }
-  };
-}
 var Ref = class {
   constructor(component) {
     this.stateID = uuid();
-    this.rendered = false;
     this.effects = [];
     this.effectuate = null;
+    this.rendered = false;
+    this.published = false;
     this.hasFirstStateUpdateRun = false;
+    this.testName = null;
     this.component = component.bind(this);
   }
-  render(data) {
+  render(data, stash) {
+    this.rendered = false;
+    this.hasFirstStateUpdateRun = false;
     const chtml = this.component(data);
     if (typeof chtml !== "function") {
       throw new Error(
@@ -368,17 +329,25 @@ var Ref = class {
      \x1B[35m Exception: ref only  a function that returns cradova element or cradova element tree. \x1B[35m
       
       to track and debug this element add a
-      beforeMount or afterMount prop to the element
+      beforeMount or afterMount property to the element
       `
         ],
         `Cradova can't render component make sure it's a valid component`
       );
     }
-    const av = () => {
-      this.effector.apply(this);
+    if (stash) {
+      this.stash = data;
+    }
+    const av = () => __async(this, null, function* () {
+      yield this.effector.apply(this);
       window.removeEventListener("cradova-aftermount", av);
-    };
-    window.addEventListener("cradova-aftermount", av);
+    });
+    if (!this.published) {
+      this.published = true;
+      window.addEventListener("cradova-aftermount", av);
+    } else {
+      this.effector();
+    }
     return () => element;
   }
   instance() {
@@ -387,39 +356,32 @@ var Ref = class {
     });
   }
   effect(fn) {
-    if (this.rendered) {
-      return;
+    if (!this.rendered) {
+      this.effects.push(fn.bind(this));
     }
-    fn = fn.bind(this);
-    this.effects.push(
-      new Promise((res, rej) => __async(this, null, function* () {
-        try {
-          yield fn();
-          if (!this.hasFirstStateUpdateRun && this.effectuate) {
-            this.hasFirstStateUpdateRun = true;
-            yield this.effectuate();
-          }
-          res(void 0);
-        } catch (error) {
-          rej(error);
-        }
-      }))
-    );
   }
   effector() {
     return __async(this, null, function* () {
-      yield Promise.allSettled(this.effects);
+      if (!this.rendered) {
+        for (const effect of this.effects) {
+          yield effect.apply(this);
+        }
+      }
+      if (!this.hasFirstStateUpdateRun && this.effectuate) {
+        yield this.effectuate();
+      }
       this.rendered = true;
       this.hasFirstStateUpdateRun = true;
     });
   }
-  updateState(data) {
+  updateState(data, stash) {
     if (!this.rendered) {
-      this.rendered = true;
       function updateState(data2) {
         return __async(this, null, function* () {
-          if (this.instance()) {
+          if (this.rendered) {
             yield this.Activate(data2);
+            this.rendered = true;
+            this.hasFirstStateUpdateRun = true;
           } else {
             setTimeout(updateState.bind(this, data2), 4);
           }
@@ -429,7 +391,10 @@ var Ref = class {
     } else {
       (() => __async(this, null, function* () {
         yield this.Activate(data);
-      })).bind(this)();
+      }))();
+    }
+    if (stash) {
+      this.stash = data;
     }
   }
   Activate(data) {
@@ -473,7 +438,7 @@ var Ref = class {
     dispatch(this.stateID, { remove: true });
   }
 };
-var frag = function(...children) {
+var frag = function(children) {
   const par = document.createDocumentFragment();
   for (let i = 0; i < children.length; i++) {
     if (typeof children[i] === "function") {
@@ -481,7 +446,7 @@ var frag = function(...children) {
       if (typeof a === "function") {
         const b = a();
         if (b instanceof HTMLElement) {
-          par.append(b);
+          par.appendChild(b);
         } else {
           if (!(b instanceof HTMLElement)) {
             console.error(" \u2718  Cradova err:   wrong element type" + b);
@@ -490,7 +455,7 @@ var frag = function(...children) {
         }
       } else {
         if (a instanceof HTMLElement) {
-          par.append(a);
+          par.appendChild(a);
         } else {
           if (!(a instanceof HTMLElement)) {
             console.error(" \u2718  Cradova err:   wrong element type" + a);
@@ -533,21 +498,13 @@ function cradovaDispatchTrack(nodes, state) {
           continue;
         }
         if (typeof element[key] === "function") {
-          element[key](element);
+          element[key].apply(element);
           continue;
         }
         if (key === "text") {
           element.innerText = state[key];
           continue;
         }
-        if (key === "fullscreen") {
-          if (state[key]) {
-            fullScreen(element).set();
-          } else {
-            fullScreen(element).exist();
-          }
-          continue;
-        }
         if (key === "class" && typeof state[key] === "string" && state[key] !== "") {
           const classes = state[key].split(" ");
           for (let i2 = 0; i2 < classes.length; i2++) {
@@ -557,14 +514,6 @@ function cradovaDispatchTrack(nodes, state) {
           }
           continue;
         }
-        if (key === "toggleclass" && state[key] !== "") {
-          element.classList.toggle(state[key]);
-          continue;
-        }
-        if (key === "removeclass" && state[key] !== "") {
-          element.classList.remove(state[key]);
-          continue;
-        }
         if (key === "remove") {
           if (element.parentElement) {
             (_a = element.parentElement) == null ? void 0 : _a.removeChild(element);
@@ -578,31 +527,8 @@ function cradovaDispatchTrack(nodes, state) {
           continue;
         }
         if (key === "tree") {
-          if (typeof state[key] === "function") {
-            state[key] = state[key]();
-          } else {
-            throw new TypeError(
-              " \u2718  Cradova err: invalid tree element type, should be a single parent cradova element tree"
-            );
-          }
-          if (typeof state[key] === "function") {
-            state[key] = state[key]();
-          }
-          if (Array.isArray(state[key])) {
-            throw new TypeError(
-              " \u2718  Cradova err: invalid tree element type, should be a single parent cradova element tree"
-            );
-          }
-          if (!(state[key] instanceof HTMLElement)) {
-            console.error(
-              " \u2718  Cradova err:  wrong element type: can't update tree using " + state[key]
-            );
-            throw new TypeError(
-              " \u2718  Cradova err: invalid tree element type, should be a single parent cradova element tree"
-            );
-          }
           element.innerHTML = "";
-          element.appendChild(state[key]);
+          element.appendChild(frag(state[key]));
           continue;
         }
         try {
@@ -1005,7 +931,7 @@ RouterBox.router = function(e, force = false) {
           }
         });
       } catch (error) {
-        const errorHandler = RouterBox.errorHandler[params.path || "all"];
+        const errorHandler = RouterBox.errorHandler[params && params.path || "all"];
         if (errorHandler) {
           errorHandler(error);
         }
@@ -1014,7 +940,7 @@ RouterBox.router = function(e, force = false) {
       if (RouterBox.routes["/404"]) {
         RouterBox.routes["/404"].controller(RouterBox.params);
       } else {
-        const errorHandler = RouterBox.errorHandler[params.path || "all"];
+        const errorHandler = RouterBox.errorHandler[params && params.path || "all"];
         if (errorHandler) {
           errorHandler(
             " \u2718  Cradova err: route '" + url + "' does not exist and no '/404' route given!"
@@ -1100,7 +1026,7 @@ var Screen = class {
   }
   effect(fn) {
     if (!this.rendered) {
-      this.effects.push(fn);
+      this.effects.push(fn.bind(this));
     }
   }
   effector() {
@@ -1111,21 +1037,21 @@ var Screen = class {
         }
       }
       if (!this.hasFirstStateUpdateRun && this.effectuate) {
-        this.hasFirstStateUpdateRun = true;
         yield this.effectuate();
       }
+      this.hasFirstStateUpdateRun = true;
       this.rendered = true;
     });
   }
   updateState(data) {
     if (!this.rendered) {
-      function updateState(data2) {
+      function effectuate(data2) {
         return __async(this, null, function* () {
           this.data = data2;
           yield this.Activate(true);
         });
       }
-      this.effectuate = updateState.bind(this, data);
+      this.effectuate = effectuate.bind(this, data);
     } else {
       (() => __async(this, null, function* () {
         this.data = data;
@@ -1158,7 +1084,9 @@ var Screen = class {
         );
       }
       if (this.secondaryChildren.length) {
-        this.template.append(this.secondaryChildren);
+        for (const child of this.secondaryChildren) {
+          this.template.appendChild(child);
+        }
       }
     });
   }
@@ -1166,9 +1094,11 @@ var Screen = class {
     this.callBack = cb;
   }
   addChild(...addOns) {
-    this.secondaryChildren.push(frag(...addOns));
+    this.secondaryChildren.push(frag(addOns));
   }
   deActivate() {
+    this.rendered = false;
+    this.hasFirstStateUpdateRun = false;
     if (this.transition) {
       this.template.classList.remove("CRADOVA-UI-" + this.transition);
     }
@@ -1227,7 +1157,6 @@ Screen.SLIDE_RIGHT = "SLIDE-RIGHT";
 var simpleStore = class {
   constructor(initial) {
     this.ref = [];
-    this.value = null;
     this.value = initial;
   }
   set(value, shouldRefRender) {
@@ -1295,7 +1224,7 @@ var Init = function() {
   }
   const Wrapper = document.createElement("div");
   Wrapper.setAttribute("data-cra-id", "cradova-app-wrapper");
-  document.body.append(Wrapper);
+  document.body.appendChild(Wrapper);
 };
 
 // lib/index.ts
@@ -1368,13 +1297,12 @@ var make = function(txx) {
   return { tag, className, ID, innerValue };
 };
 var _ = (...element_initials) => {
+  if (typeof element_initials[0] !== "string") {
+    return frag(element_initials);
+  }
   if (element_initials[0].raw) {
     element_initials[0] = element_initials[0]["raw"][0];
   }
-  if (typeof element_initials[0] !== "string") {
-    console.error(" \u2718  Cradova err: NO TEMPLATE STRING PROVIDED");
-    return () => " \u2718 NO TEMPLATE STRING PROVIDED";
-  }
   let beforeMount = null, firstLevelChildren = [];
   if (element_initials.length > 1) {
     firstLevelChildren = element_initials.splice(1);
@@ -1580,7 +1508,6 @@ export {
   css,
   lib_default as default,
   dispatch,
-  frag,
   loadCradovaUICss,
   ls
 };

package/dist/types.ts

@@ -45,77 +45,6 @@ export type CradovaHTMLElementType = (
   | ((...element_initials: any[]) => HTMLElement | undefined);
 
 export type CradovaScreenType = {
-  /**
-   * Cradova screen
-   * ---
-   * title of the page
-   * @param data
-   * @returns void
-   *
-   *
-   * .
-   *
-   */
-  name: string;
-  /**
-   * Cradova screen
-   * ---
-   * The component for the screen
-   * @param data
-   * @returns void
-   *
-   *
-   * .
-   *
-   */
-  template: Function | HTMLElement;
-  /**
-   * Cradova screen
-   * ---
-   * Screen transition from the screen class
-   * @param data
-   * @returns void
-   *
-   *
-   * .
-   *
-   */
-  transition?: string;
-  /**
-   * Cradova screen
-   * ---
-   * gets called when the the screen is displayed
-   * @param data
-   * @returns void
-   *
-   *
-   * .
-   *
-   */
-  onActivate: (fn: (data: any) => void) => Promise<void>;
-  /**
-   * Cradova screen
-   * ---
-   * Should this screen be cached after first render?
-   * @param data
-   * @returns void
-   *
-   *
-   * .
-   *
-   */
-  persist?: boolean;
-  /**
-   * Cradova screen
-   * ---
-   * run once on first render and update the screen immediately.
-   * @param fn () => void
-   * @returns void
-   *
-   *
-   * .
-   *
-   */
   effect(fn: () => void | Promise<void>): void;
   /**
    * Cradova Screen
@@ -128,11 +57,10 @@ export type CradovaScreenType = {
    *
    * *
    */
-
-  updateState(data: unknown): void;
+  updateState(data: unknown, stash?: unknown): void;
 };
 
-export type RefType = {
+export type RefType<D> = {
   /**
    * Cradova Ref
    * ---
@@ -140,7 +68,7 @@ export type RefType = {
    * @param data
    * @returns HTMLElement
    */
-  render(data?: any): () => any;
+  render(data?: D): () => any;
   /**
    * Cradova Ref
    * ---
@@ -156,7 +84,7 @@ export type RefType = {
    * @param data
    * @returns void
    */
-  updateState(data: any): void;
+  updateState(data: D, stash?: boolean): void;
   /**
    * Cradova Ref
    * ---
@@ -172,6 +100,13 @@ export type RefType = {
    *
    */
   effect(fn: (data: unknown) => Promise<void> | void): void;
+  /**
+   * Cradova Ref
+   * ---
+   * returns last set stashed Ref data
+   *
+   */
+  stash: D;
 };
 
 /**
@@ -219,6 +154,7 @@ export type SignalType = {
    *  set a key value if it's an object
    * @param name - name of the key
    * @param value - value of the key
+   * @param shouldRefRender? boolean
    * @returns void
    *
    *
@@ -227,45 +163,6 @@ export type SignalType = {
    */
 
   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
    * ----

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cradova",
-  "version": "1.4.1",
+  "version": "1.5.0",
   "description": "Web framework for building web apps and PWAs",
   "main": "dist/index.js",
   "type": "module",