cradova 2.3.0 → 2.3.1

package/README.md

@@ -58,7 +58,7 @@ Undoubtedly, this provides a significant advantage. You can experience it firsth
 
 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#v220)
+[current version changes](https://github.com/fridaycandour/cradova/blob/main/CHANGELOG.md#v230)
 
 ## Installation
 
@@ -109,42 +109,7 @@ this a collection of basic examples
 you can choose any that best suite what problem you want to solve
 
 ```js
-import _, {
-  button,
-  createSignal,
-  Ref,
-  reference,
-  h1,
-  br,
-  div,
-} from "../dist/index.js";
-
-function Hello(name) {
-  return h1("Hello " + name, {
-    className: "title",
-    style: {
-      color: "grey",
-    },
-  });
-}
-
-const html = div(Hello("peter"), Hello("joe"));
-
-// reference (not state)
-
-function typingExample() {
-  const re = new reference();
-  return _(
-    "div",
-    input({
-      oninput() {
-        re.text.innerText = this.value;
-      },
-      placeholder: "typing simulation",
-    }),
-    p(" no thing typed yet!", { reference: re.bindAs("text") })
-  );
-}
+import _, { button, createSignal, Ref, reference, h1, br, div } from "cradova";
 
 // setting shouldUpdate to true
 // gives you this.updateState binding
@@ -203,6 +168,22 @@ const nameRef = new Ref(function (name) {
   });
 });
 
+// reference (not state)
+
+function typingExample() {
+  const re = new reference();
+  return _(
+    "div",
+    input({
+      oninput() {
+        re.text.innerText = this.value;
+      },
+      placeholder: "typing simulation",
+    }),
+    p(" no thing typed yet!", { reference: re.bindAs("text") })
+  );
+}
+
 function App() {
   return div(counter, dataCounter, HelloMessage, br, nameRef);
 }
@@ -227,7 +208,7 @@ import _, {
   p,
   Ref,
   reference,
-} from "../dist/index.js";
+} from "cradova";
 
 function TodoList() {
   // can be used to hold multiple references

package/dist/index.d.ts

@@ -11,9 +11,9 @@ declare module "cradova" {
           beforeMount?: () => void;
           afterMount?: () => void;
           text?: string;
+          reference?: any;
           stateID?: string;
           shouldUpdate?: boolean;
-          assert?: any;
         }
     )[]
   ) => T;
@@ -80,10 +80,6 @@ declare module "cradova" {
     persist?: boolean;
   };
 
-  export const makeElement: (
-    element: Record<string, any>,
-    ...ElementChildrenAndPropertyList: ElementType<HTMLElement>[]
-  ) => Record<string, any>;
   export const a: ElementType<HTMLAnchorElement>;
   export const abbr: ElementType<HTMLElement>;
   export const address: ElementType<HTMLElement>;
@@ -150,7 +146,6 @@ declare module "cradova" {
   export const meta: ElementType<HTMLMetaElement>;
   export const meter: ElementType<HTMLMeterElement>;
   export const nav: ElementType<HTMLElement>;
-  export const noscript: ElementType<HTMLElement>;
   export const object: ElementType<HTMLObjectElement>;
   export const ol: ElementType<HTMLOListElement>;
   export const optgroup: ElementType<HTMLOptGroupElement>;
@@ -222,32 +217,16 @@ declare module "cradova" {
   ): Promise<unknown>;
 
   /**
-   * Cradova afterMount event
+   * Cradova event
    */
-  export let cradovaAftermountEvent: CustomEvent<unknown>;
-  /**
-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;
+  export class cradovaEvent {
+    private listeners;
+    addEventListener(eventName: string, callback: any): void;
+    removeEventListener(eventName: string, callback: any): void;
+    dispatchEvent(eventName: string, eventArgs?: any): void;
+  }
+  export const CradovaEvent: cradovaEvent;
+  export function css(identifier: string | TemplateStringsArray): void;
   /**
    *
    * @param {expression} condition
@@ -271,13 +250,14 @@ css(".btn:hover",
   type RefProps<D> = D | any;
   export class Ref<D> {
     private component;
-    private stateID;
     private effects;
     private effectuate;
     private rendered;
     private published;
     private hasFirstStateUpdateRun;
     private preRendered;
+    private reference;
+    Signal: createSignal<any> | undefined;
     stash: D | undefined;
     constructor(component: (data?: RefProps<D>) => any);
     preRender(data?: RefProps<D>): void;
@@ -290,7 +270,8 @@ css(".btn:hover",
      * @returns () => HTMLElement
      */
     render(data?: D, stash?: boolean): HTMLElement;
-    instance(): any;
+    instance(): Record<string, any>;
+    _setExtra(Extra: createSignal<any>): void;
     /**
      * Cradova Ref
      * ---
@@ -324,6 +305,12 @@ css(".btn:hover",
     constructor(cb: () => Promise<any>);
     load(): Promise<void>;
   }
+  export class reference {
+    [x: string]: Record<string, any>;
+    bindAs(name: string): any;
+    _appendDom(name: string, Element: any): void;
+    _appendDomForce(name: string, Element: any): void;
+  }
 
   /**
    *  Cradova Signal
@@ -391,11 +378,11 @@ css(".btn:hover",
      * @param key - string key of the action
      * @param data - data for the action
      */
-    fireAction(key: string, data?: Type): void;
+    fireAction(key: string, data?: unknown): void;
     /**
      * Cradova
      * ---
-     * is used to bind store data to an element
+     * is used to bind store data to any element
      *
      * @param prop
      * @returns something
@@ -412,7 +399,7 @@ css(".btn:hover",
      */
     bindRef(
       ref: any,
-      binding: {
+      binding?: {
         event?: string;
         signalProperty: string;
         _element_property: string;
@@ -458,13 +445,75 @@ css(".btn:hover",
     state?: stateType
   ): any;
 
-  /**
-   * Cradova Router
+  /** cradova router
    * ---
-   * Facilitates navigation within the application and initializes
-   * page views based on the matched routes.
+   * Registers a route.
+   *
+   * @param {string}   path     Route path.
+   * @param {any} screen the cradova document tree for the route.
    */
-  export const Router: Record<string, any>;
+  class RouterClass {
+    /** cradova router
+     * ---
+     * Registers a route.
+     *
+     * accepts an object containing
+     *
+     * @param {string}   path     Route path.
+     * @param {any} screen the cradova screen.
+     */
+    BrowserRoutes(obj: Record<string, any>): void;
+    /**
+     * Cradova Router
+     * ------
+     *
+     * Navigates to a designated screen in your app
+     *
+     * @param href string
+     * @param data object
+     * @param force boolean
+     */
+    navigate(
+      href: string,
+      data?: Record<string, any> | null,
+      force?: boolean
+    ): void;
+    /** cradova router
+     * ---
+     * Listen for navigation events
+     *
+     * @param callback   () => void
+     */
+    onPageEvent(callback: () => void): void;
+    /** cradova router
+     * ---
+     * get a screen ready before time.
+     *
+     * @param {string}   path Route path.
+     * @param {any} data data for the screen.
+     */
+    packageScreen(path: string, data?: any): Promise<void>;
+    /**
+     * Cradova Router
+     * ------
+     *
+     * return last set router params
+     *
+     * .
+     */
+    getParams: () => any;
+    /**
+     * Cradova
+     * ---
+     * Error Handler for your app
+     *
+     * @param callback
+     * @param path? page path
+     */
+    addErrorHandler(callback: () => void): void;
+    _mount(): void;
+  }
+  export const Router: RouterClass;
 
   /**
    *  Cradova Screen

package/dist/index.js

@@ -601,7 +601,6 @@ var createSignal = class {
 };
 
 // lib/utils/Router.ts
-var Router = {};
 var RouterBox = {};
 RouterBox["lastNavigatedRouteController"] = null;
 RouterBox["nextRouteController"] = null;
@@ -669,69 +668,6 @@ RouterBox.route = (path, screen) => {
   RouterBox.routes[path] = screen;
   return RouterBox.routes[path];
 };
-Router.BrowserRoutes = function(obj) {
-  for (const path in obj) {
-    let screen = obj[path];
-    if (screen.catch || typeof screen === "function") {
-      RouterBox["routes"][path] = async () => {
-        if (typeof screen === "function") {
-          screen = await screen();
-        } else {
-          screen = await screen;
-        }
-        return RouterBox.route(path, screen.default);
-      };
-    } else {
-      RouterBox.route(path, screen);
-    }
-  }
-  Router.mount();
-};
-Router.delegateScreen = function(path = "/", screen) {
-  RouterBox.routes[path] = {
-    controller: async (params, force) => await screen.Activate(params, force),
-    packager: async (params) => await screen.package(params),
-    deactivate: async () => {
-      await screen.deActivate();
-    },
-    paramData: (data2) => {
-      screen.paramData = data2;
-    }
-  };
-  if (typeof screen.errorHandler === "function") {
-    RouterBox["errorHandler"][path] = screen.errorHandler;
-  }
-};
-Router.navigate = function(href, data2 = null, force = false) {
-  if (typeof href !== "string") {
-    throw new TypeError(
-      " \u2718  Cradova err:  href must be a defined path but got " + href + " instead"
-    );
-  }
-  if (typeof data2 === "boolean") {
-    force = true;
-    data2 = null;
-  }
-  let route = null, params;
-  if (href.includes("://")) {
-    window.location.href = href;
-  } else {
-    const lastR = window.location.pathname;
-    if (href === lastR) {
-      return;
-    }
-    [route, params] = checker(href);
-    if (route) {
-      RouterBox["nextRouteController"] = route;
-      RouterBox.params.params = params;
-      route._paramData = params;
-      RouterBox.params.data = data2 || null;
-      window.history.pushState({}, "", href);
-    }
-    RouterBox.router(null, force);
-    RouterBox["start_pageevents"](lastR, href);
-  }
-};
 RouterBox.router = async function(e, force = false) {
   let url, route, params;
   if (e) {
@@ -752,7 +688,7 @@ RouterBox.router = async function(e, force = false) {
   if (!url) {
     url = window.location.pathname;
   }
-  if (url === Router["lastNavigatedRoute"]) {
+  if (url === RouterBox["lastNavigatedRoute"]) {
     return;
   }
   if (RouterBox["nextRouteController"]) {
@@ -796,46 +732,101 @@ RouterBox.router = async function(e, force = false) {
     }
   }
 };
-Router["onPageEvent"] = function(callback) {
-  if (typeof callback === "function") {
-    RouterBox["pageevents"].push(callback);
-  } else {
-    throw new Error(
-      " \u2718  Cradova err:  callback for pageShow event is not a function"
-    );
+var RouterClass = class {
+  constructor() {
+    this.getParams = function() {
+      return RouterBox["params"];
+    };
   }
-};
-Router.packageScreen = async function(path, data2 = {}) {
-  if (!RouterBox.routes[path]) {
-    console.error(" \u2718  Cradova err:  no screen with path " + path);
-    throw new Error(" \u2718  Cradova err:  cradova err: Not a defined screen path");
+  BrowserRoutes(obj) {
+    for (const path in obj) {
+      let screen = obj[path];
+      if (screen.catch || typeof screen === "function") {
+        RouterBox["routes"][path] = async () => {
+          if (typeof screen === "function") {
+            screen = await screen();
+          } else {
+            screen = await screen;
+          }
+          return RouterBox.route(path, screen.default);
+        };
+      } else {
+        RouterBox.route(path, screen);
+      }
+    }
+    this._mount();
+  }
+  navigate(href, data2 = null, force = false) {
+    if (typeof href !== "string") {
+      throw new TypeError(
+        " \u2718  Cradova err:  href must be a defined path but got " + href + " instead"
+      );
+    }
+    if (typeof data2 === "boolean") {
+      force = true;
+      data2 = null;
+    }
+    let route = null, params;
+    if (href.includes("://")) {
+      window.location.href = href;
+    } else {
+      const lastR = window.location.pathname;
+      if (href === lastR) {
+        return;
+      }
+      [route, params] = checker(href);
+      if (route) {
+        RouterBox["nextRouteController"] = route;
+        RouterBox.params.params = params;
+        route._paramData = params;
+        RouterBox.params.data = data2 || null;
+        window.history.pushState({}, "", href);
+      }
+      RouterBox.router(null, force);
+      RouterBox["start_pageevents"](lastR, href);
+    }
   }
-  let [route, params] = checker(path);
-  if (!route._Activate && typeof route === "function") {
-    route = await route();
+  onPageEvent(callback) {
+    if (typeof callback === "function") {
+      RouterBox["pageevents"].push(callback);
+    } else {
+      throw new Error(
+        " \u2718  Cradova err:  callback for pageShow event is not a function"
+      );
+    }
   }
-  route._package(Object.assign(data2, params || {}));
-  route._packed = true;
-};
-Router.getParams = function() {
-  return RouterBox["params"];
-};
-Router["addErrorHandler"] = function(callback) {
-  if (typeof callback === "function") {
-    RouterBox["errorHandler"] = callback;
-  } else {
-    throw new Error(
-      " \u2718  Cradova err:  callback for ever event event is not a function"
-    );
+  async packageScreen(path, data2 = {}) {
+    if (!RouterBox.routes[path]) {
+      console.error(" \u2718  Cradova err:  no screen with path " + path);
+      throw new Error(
+        " \u2718  Cradova err:  cradova err: Not a defined screen path"
+      );
+    }
+    let [route, params] = checker(path);
+    if (!route._Activate && typeof route === "function") {
+      route = await route();
+    }
+    route._package(Object.assign(data2, params || {}));
+    route._packed = true;
+  }
+  addErrorHandler(callback) {
+    if (typeof callback === "function") {
+      RouterBox["errorHandler"] = callback;
+    } else {
+      throw new Error(
+        " \u2718  Cradova err:  callback for ever event event is not a function"
+      );
+    }
+  }
+  _mount() {
+    window.addEventListener("pageshow", RouterBox.router);
+    window.addEventListener("popstate", (e) => {
+      e.preventDefault();
+      RouterBox.router();
+    });
   }
 };
-Router.mount = () => {
-  window.addEventListener("pageshow", RouterBox.router);
-  window.addEventListener("popstate", (e) => {
-    e.preventDefault();
-    RouterBox.router();
-  });
-};
+var Router = new RouterClass();
 
 // lib/utils/elements.ts
 var makeElement = (element, ...ElementChildrenAndPropertyList) => {

package/package.json

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