cradova 2.0.0 → 2.1.1

package/README.md

@@ -132,6 +132,19 @@ function HelloMessage(name) {
   return _("div", "Hello  " + name);
 }
 
+
+/*
+
+when using router and screens
+
+cradova will create a div with data-cra-id=cradova-app-wrapper
+
+if it already exist cradova will use it instead
+
+so if you want to use your own mount point then create a div with data-cra-id="cradova-app-wrapper"
+
+*/
+
 const home = new Screen({
   name: "hello page", // page title
   template: HelloMessage,
@@ -152,9 +165,9 @@ Router.route("/", home);
 ## State management
 
 ```js
-// dispatch - global (element) requires state ID
 
-// element can have this.updateState when shouldUpdate is true
+
+ // element can have this.updateState when the shouldUpdate props is true
 
 // Ref components
 
@@ -209,6 +222,15 @@ const nameRef = new Ref(function ( name ) {
   });
 });
 
+/*
+cradova Ref are component objects
+with methods for rendering, pre-rendering, and updating a it dom elements.
+
+Ref also has the feature to stash input values need by the components
+
+*/
+
+
 function Home() {
   return _("div.foo#bar",
    counter,
@@ -224,6 +246,28 @@ const home = new Screen({
   ...
 });
 
+/*
+
+Nice things about cradova screens
+
+screens are rendered once by default to hack
+responsiveness making your app work fast as user navigates.
+
+this behavior can be override
+by passing
+prerender: false
+in the constructor
+
+
+Cradova screens has
+onActivate() and
+onDeactivate() methods
+
+these allow you manage rendering
+circle for each in your app
+
+*/
+
 Router.route("/", home);
 ```
 

package/dist/index.d.ts

@@ -79,8 +79,8 @@ declare module "cradova" {
      * @param action function to execute
      */
     createAction(
-      key: string | Record<string, (self?: this, data?: Type) => void>,
-      action?: (self?: this, data?: Type) => void
+      key: string | Record<string, (data?: Type) => void>,
+      action?: (data?: Type) => void
     ): void;
     /**
      *  Cradova Signal
@@ -317,8 +317,8 @@ declare module "cradova" {
     constructor(cradova_screen_initials: CradovaScreenType);
     setErrorHandler(errorHandler: () => void): void;
     package(): Promise<void>;
-    onActivate(cb: (data: any) => Promise<void>): void;
-    onDeactivate(cb: (data: any) => Promise<void>): void;
+    onActivate(cb: () => Promise<void> | void): void;
+    onDeactivate(cb: () => Promise<void> | void): void;
     addChild(...addOns: any[]): void;
     deActivate(): void;
     Activate(force?: boolean): Promise<void>;
@@ -475,7 +475,6 @@ declare module "cradova" {
   export const sub: ElementType<HTMLElement>;
   export const summary: ElementType<HTMLElement>;
   export const sup: ElementType<HTMLElement>;
-  export const svg: ElementType<HTMLOrSVGElement>;
   export const table: ElementType<HTMLTableElement>;
   export const tbody: ElementType<HTMLTableColElement>;
   export const td: ElementType<HTMLTableCellElement>;
@@ -530,6 +529,18 @@ css(".btn:hover",
     condition: any,
     ...callback: (() => any)[]
   ): "" | (() => any)[];
+
+  export function loop(
+    datalist: any[],
+    component: (value: any, index?: number, array?: any[]) => HTMLElement
+  ): any;
+
+  export function svgNS(
+    type: string,
+    props: Record<string, any>,
+    ...children: any
+  ): HTMLElement;
+
   export function assertOr(
     condition: boolean,
     ifTrue: () => any,

package/dist/index.js

@@ -1,8 +1,10 @@
 // lib/utils/init.ts
 var Init = function() {
-  const Wrapper = document.createElement("div");
-  Wrapper.setAttribute("data-cra-id", "cradova-app-wrapper");
-  document.body.appendChild(Wrapper);
+  if (!document.querySelector("[data-cra-id=cradova-app-wrapper]")) {
+    const Wrapper = document.createElement("div");
+    Wrapper.setAttribute("data-cra-id", "cradova-app-wrapper");
+    document.body.appendChild(Wrapper);
+  }
 };
 
 // lib/utils/fns.ts
@@ -61,6 +63,9 @@ function assert(condition, ...callback) {
   }
   return "";
 }
+function loop(datalist2, component) {
+  return Array.isArray(datalist2) && datalist2.map(component);
+}
 function assertOr(condition, ifTrue, ifFalse) {
   if (condition) {
     return ifTrue;
@@ -227,6 +232,26 @@ var frag = function(children) {
   }
   return par;
 };
+var svgNS = (type, props, ...children) => {
+  const sc = document.createElementNS(
+    props.xmlns || "http://www.w3.org/2000/svg",
+    type
+  );
+  delete props.xmlns;
+  for (const p2 in props) {
+    sc.setAttributeNS(null, p2, props[p2]);
+  }
+  for (let ch of children) {
+    if (typeof ch === "function") {
+      ch = ch();
+    }
+    if (typeof ch === "function") {
+      ch = ch();
+    }
+    sc.appendChild(ch);
+  }
+  return sc;
+};
 
 // lib/utils/track.ts
 function cradovaDispatchTrack(nodes, state) {
@@ -389,7 +414,7 @@ var simpleStore = class {
       }
     }
   }
-  bindRef(ref, key, prop) {
+  _bindRef(ref, key, prop) {
     if (ref && ref.updateState && prop) {
       this.ref.push({ prop, ref, key });
       if (ref.reader) {
@@ -519,7 +544,7 @@ var createSignal = class {
       throw new Error(
         `\u2718  Cradova err : can't set key ${String(
           key
-        )} . store value is not a javascript object`
+        )} . store.value is not a javascript object`
       );
     }
   }
@@ -909,6 +934,24 @@ var cra = (element_initials) => {
           continue;
         }
         if (Array.isArray(child)) {
+          let rload2 = function(l) {
+            const fg = new DocumentFragment();
+            for (let ch of l) {
+              if (Array.isArray(ch)) {
+                fg.appendChild(rload2(ch));
+              } else {
+                if (typeof ch === "function") {
+                  ch = ch();
+                }
+                if (typeof ch === "function") {
+                  ch = ch();
+                }
+                fg.appendChild(ch);
+              }
+            }
+            return fg;
+          };
+          var rload = rload2;
           const arrCXLength = child.length;
           for (let p2 = 0; p2 < arrCXLength; p2++) {
             let childly = child[p2];
@@ -918,6 +961,9 @@ var cra = (element_initials) => {
             if (typeof childly === "function") {
               childly = childly();
             }
+            if (Array.isArray(childly)) {
+              childly = rload2(childly);
+            }
             if (isNode(childly)) {
               element.appendChild(childly);
             } else {
@@ -946,7 +992,7 @@ var cra = (element_initials) => {
         );
       }
     }
-    if (typeof props === "object") {
+    if (typeof props === "object" && element) {
       for (const prop in props) {
         if (prop === "style" && typeof props[prop] === "object") {
           for (const [k, v] of Object.entries(props[prop])) {
@@ -960,6 +1006,10 @@ var cra = (element_initials) => {
           }
           continue;
         }
+        if (typeof element.style[prop] !== "undefined" && prop !== "src") {
+          element.style[prop] = props[prop];
+          continue;
+        }
         if (prop === "text" && typeof props[prop] === "string" && props[prop] !== "") {
           text = props[prop];
           continue;
@@ -982,7 +1032,7 @@ var cra = (element_initials) => {
         }
         if (Array.isArray(props[prop]) && props[prop][0] instanceof simpleStore) {
           element.updateState = dispatch.bind(null, element);
-          props[prop][0].bindRef(element, prop, props[prop][1]);
+          props[prop][0]._bindRef(element, prop, props[prop][1]);
           continue;
         }
         if (prop === "shouldUpdate" && props[prop] === true) {
@@ -1001,11 +1051,17 @@ var cra = (element_initials) => {
           if (typeof element[prop] !== "undefined") {
             element[prop] = props[prop];
           } else {
+            if (prop.includes("data-")) {
+              element.setAttribute(prop, props[prop]);
+              continue;
+            }
             element[prop] = props[prop];
-            if (prop !== "for" && prop !== "text" && prop !== "class" && !prop.includes("aria")) {
+            if (prop !== "for" && prop !== "text" && prop !== "class" && prop !== "tabindex" && !prop.includes("aria")) {
               console.error(" \u2718  Cradova err:  invalid html attribute ", {
                 prop
               });
+            } else {
+              continue;
             }
           }
         } catch (error) {
@@ -1015,7 +1071,7 @@ var cra = (element_initials) => {
       }
     }
     if (text) {
-      element.innerText = text;
+      element.appendChild(document.createTextNode(text));
     }
     if (typeof beforeMount === "function") {
       beforeMount.apply(element);
@@ -1118,7 +1174,6 @@ var style = cra("style");
 var sub = cra("sub");
 var summary = cra("summary");
 var sup = cra("sup");
-var svg = cra("svg");
 var table = cra("table");
 var tbody = cra("tbody");
 var td = cra("td");
@@ -1269,6 +1324,24 @@ var _ = (...element_initials) => {
           continue;
         }
         if (Array.isArray(child)) {
+          let rload2 = function(l) {
+            const fg = new DocumentFragment();
+            for (let ch of l) {
+              if (Array.isArray(ch)) {
+                fg.appendChild(rload2(ch));
+              } else {
+                if (typeof ch === "function") {
+                  ch = ch();
+                }
+                if (typeof ch === "function") {
+                  ch = ch();
+                }
+                fg.appendChild(ch);
+              }
+            }
+            return fg;
+          };
+          var rload = rload2;
           const arrCXLength = child.length;
           for (let p2 = 0; p2 < arrCXLength; p2++) {
             let childly = child[p2];
@@ -1278,9 +1351,13 @@ var _ = (...element_initials) => {
             if (typeof childly === "function") {
               childly = childly();
             }
+            if (Array.isArray(childly)) {
+              childly = rload2(childly);
+            }
             if (isNode(childly)) {
               element.appendChild(childly);
             } else {
+              console.log(childly);
               if (typeof childly !== "undefined") {
                 throw new Error(
                   "  \u2718  Cradova err:  invalid child type: " + childly + " (" + typeof childly + ")"
@@ -1350,7 +1427,7 @@ var _ = (...element_initials) => {
         }
         if (Array.isArray(props[prop]) && props[prop][0] instanceof simpleStore) {
           element.updateState = dispatch.bind(null, element);
-          props[prop][0].bindRef(element, prop, props[prop][1]);
+          props[prop][0]._bindRef(element, prop, props[prop][1]);
           continue;
         }
         if (prop === "shouldUpdate" && props[prop] === true) {
@@ -1369,11 +1446,17 @@ var _ = (...element_initials) => {
           if (typeof element[prop] !== "undefined") {
             element[prop] = props[prop];
           } else {
+            if (prop.includes("data-")) {
+              element.setAttribute(prop, props[prop]);
+              continue;
+            }
             element[prop] = props[prop];
-            if (prop !== "for" && prop !== "text" && prop !== "class" && !prop.includes("aria")) {
+            if (prop !== "for" && prop !== "text" && prop !== "class" && prop !== "tabindex" && !prop.includes("aria")) {
               console.error(" \u2718  Cradova err:  invalid html attribute ", {
                 prop
               });
+            } else {
+              continue;
             }
           }
         } catch (error) {
@@ -1383,7 +1466,7 @@ var _ = (...element_initials) => {
       }
     }
     if (text) {
-      element.innerText = text;
+      element.appendChild(document.createTextNode(text));
     }
     if (typeof beforeMount === "function") {
       beforeMount.apply(element);
@@ -1464,6 +1547,7 @@ export {
   legend,
   li,
   link,
+  loop,
   main,
   map,
   mark,
@@ -1501,7 +1585,7 @@ export {
   sub,
   summary,
   sup,
-  svg,
+  svgNS,
   table,
   tbody,
   td,

package/package.json

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