cradova 3.4.1 → 3.5.0

package/README.md

@@ -58,7 +58,7 @@ 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")),
+    $ifelse(name === "john", h1("Hello john"), h1("Hello Paul"))
   );
 }
 
@@ -70,8 +70,8 @@ function whatsAllowed({ age }) {
       age,
       $case(12, h1("too young")),
       $case(26, h1("you are welcome")),
-      $case(52, h1("too old")),
-    ),
+      $case(52, h1("too old"))
+    )
   );
 }
 
@@ -166,14 +166,6 @@ import {
   useRef,
 } from "cradova";
 
-const count = new Comp(function () {
-  const [count, setCounter] = useState(0, this);
-  setTimeout(() => {
-    setCounter(count + 1);
-  }, 1000);
-  return h1(" count: " + count);
-});
-
 // hello message
 
 function HelloMessage() {
@@ -185,22 +177,6 @@ function HelloMessage() {
   });
 }
 
-// using CradovaRef
-
-const nameRef = new Comp(function () {
-  const [name, setName] = (useState < string) | (undefined > (undefined, this));
-  return div(name ? "hello " + name : "Click to get a second greeting", {
-    onclick() {
-      const name = prompt();
-      if (name) {
-        setName(name);
-      } else {
-        alert("Please provide a valid name");
-      }
-    },
-  });
-});
-
 // reference (not state)
 
 function typingExample() {
@@ -212,12 +188,12 @@ function typingExample() {
       },
       placeholder: "typing simulation",
     }),
-    p(" no thing typed yet!", { reference: ref.bindAs("text") }),
+    p(" no thing typed yet!", { reference: ref.bindAs("text") })
   );
 }
 
 function App() {
-  return div(count, typingExample, HelloMessage, nameRef);
+  return div(typingExample, HelloMessage);
 }
 
 document.body.append(App());
@@ -241,34 +217,31 @@ import {
   useState,
 } from "../dist/index.js";
 
-function TodoList() {
-  // can be used to hold multiple references
-  const referenceSet = useRef();
+// creating a store
+const todoStore = new Signal({
+  todo: ["take bath", "code coded", "take a break"],
+});
 
-  // creating a store
-  const todoStore = new createSignal([
-    "take bath",
-    "code coded",
-    "take a break",
-  ]);
+// create actions
+const addTodo = function (todo: string) {
+  todoStore.publish("todo", [...todoStore.pipe.todo, todo]);
+};
 
-  // create actions
-  todoStore.createAction("add-todo", function (todo) {
-    this.set([...this.value, todo]);
-  });
+const removeTodo = function (todo: string) {
+  const ind = todoStore.pipe.todo.indexOf(todo);
+  todoStore.pipe.todo.splice(ind, 1);
+  todoStore.publish("todo", todoStore.pipe.todo);
+};
 
-  todoStore.createAction("remove-todo", function (todo) {
-    const ind = this.value.indexOf(todo);
-    this.value.splice(ind, 1);
-    this.set(this.value);
-  });
 
+function TodoList() {
+  // can be used to hold multiple references
+  const referenceSet = useRef();
   // bind Comp to Signal
-  todoStore.bindRef(todoList);
-
-  // markup
+  todoStore.subscribe("todo", todoList);
+  // vjs
   return main(
-    p(`|Todo List`),
+    h1(`Todo List`),
     div(
       input({
         placeholder: "type in todo",
@@ -276,29 +249,28 @@ function TodoList() {
       }),
       button("Add todo", {
         onclick() {
-          todoStore.fireAction(
-            "add-todo",
-            referenceSet.current("todoInput").value,
+          addTodo(
+            referenceSet.elem<HTMLInputElement>("todoInput")!.value || ""
           );
-          referenceSet.current("todoInput").value = "";
+          referenceSet.elem<HTMLInputElement>("todoInput")!.value = "";
         },
-      }),
+      })
     ),
-    todoList.render,
+    todoList
   );
 }
 
 const todoList = new Comp(function () {
-  const self = this;
+  const data = this.subData;
   return div(
-    self.Signal.value.map((item) =>
+    data.map((item: any) =>
       p(item, {
         title: "click to remove",
         onclick() {
-          self.Signal.fireAction("remove-todo", item);
+          removeTodo(item);
         },
       })
-    ),
+    )
   );
 });
 document.body.appendChild(TodoList());

package/dist/index.d.ts

@@ -1,3 +1,3 @@
-export * from "./primitives/classes";
-export * from "./primitives/functions";
-export * from "./primitives/dom-objects";
+export * from "./primitives/classes.js";
+export * from "./primitives/functions.js";
+export * from "./primitives/dom-objects.js";

package/dist/index.js

@@ -162,6 +162,9 @@ class Signal {
       } else {
         this.subs[eventName].push(comp);
       }
+      if (this.pipe[eventName]) {
+        comp.subData = this.pipe[eventName];
+      }
     }
   }
   clearPersist() {
@@ -178,11 +181,47 @@ class Page {
   _callBack;
   _deCallBack;
   _dropped = false;
-  constructor(cradova_page_initials) {
-    const { template, name } = cradova_page_initials;
+  _snapshot;
+  _snapshot_html;
+  constructor(pageParams) {
+    const { template, name } = pageParams;
     this._html = template;
     this._name = name || "Document";
     this._template.setAttribute("id", "page");
+    this._snapshot = pageParams.snapshotIsolation || false;
+  }
+  async _takeSnapShot() {
+    if (RouterBox.doc.dataset["snapshot"] === "true")
+      return;
+    try {
+      const response = await fetch(location.href);
+      if (!response.ok)
+        throw new Error("Failed to fetch the page");
+      const html = await response.text();
+      const parser = new DOMParser;
+      const doc = parser.parseFromString(html, "text/html");
+      doc.title = this._name;
+      const wrapper = doc.querySelector('[data-wrapper="app"]');
+      if (wrapper) {
+        wrapper.setAttribute("data-snapshot", "true");
+        wrapper.innerHTML = this._snapshot_html;
+      } else {
+        console.error("Wrapper or template is not found");
+        return;
+      }
+      const snapshot = doc.documentElement.outerHTML;
+      await fetch(`${location.origin}`, {
+        body: snapshot,
+        method: "POST",
+        headers: {
+          "Content-Type": "text/html",
+          "cradova-snapshot": location.href
+        }
+      });
+    } catch (error) {
+      console.error("Snapshot error:", error);
+    }
+    this._snapshot_html = undefined;
   }
   onActivate(cb) {
     this._callBack = cb;
@@ -215,6 +254,8 @@ class Page {
     document.title = this._name;
     RouterBox.doc.innerHTML = "";
     CradovaEvent.dispatchEvent("beforeMountActive");
+    if (this._snapshot)
+      this._snapshot_html = this._template.outerHTML;
     RouterBox.doc.appendChild(this._template);
     CradovaEvent.dispatchEvent("afterMount");
     window.scrollTo({
@@ -224,6 +265,8 @@ class Page {
     });
     this._callBack && await this._callBack();
     CradovaEvent.dispatchEvent("afterDeactivate");
+    if (this._snapshot)
+      this._takeSnapShot();
   }
 }
 
@@ -382,11 +425,11 @@ class Router {
   static forward() {
     history.go(1);
   }
-  static pauseNaviagtion() {
+  static pauseNavigation() {
     RouterBox["paused"] = true;
     window.location.hash = "paused";
   }
-  static resumeNaviagtion() {
+  static resumeNavigation() {
     RouterBox["paused"] = false;
     window.location.replace(window.location.pathname + window.location.search);
     history.go(-1);
@@ -435,13 +478,10 @@ class Router {
   }
   static _mount() {
     let doc = document.querySelector("[data-wrapper=app]");
-    if (!doc) {
-      doc = document.createElement("div");
-      doc.setAttribute("data-wrapper", "app");
-      document.body.appendChild(doc);
+    if (doc) {
       RouterBox.doc = doc;
     } else {
-      RouterBox.doc = doc;
+      throw new Error(`\u2718  Cradova err: please add '<div data-wrapper="app"></div>' to the body of your index.html file `);
     }
     window.addEventListener("pageshow", () => RouterBox.router());
     window.addEventListener("popstate", (_e) => {

package/dist/primitives/classes.d.ts

@@ -1,32 +1,34 @@
-import { type browserPageType, type CradovaPageType } from "./types";
+import { type browserPageType, type CradovaPageType } from "./types.js";
 /**
  * Cradova event
  */
 declare class cradovaEvent {
-    static refid: number;
-    /**
-     * the events runs only once and removed.
-     * these event are call and removed once when when a comp is rendered to the dom
-     * @param callback
-     */
-    afterMount: Function[];
-    /**
-     * the events runs many times.
-     * these event are called before a comp is rendered to the dom
-     * @param callback
-     */
-    beforeMountActive: Function[];
-    /**
-     * the events runs once after comps unmounts.
-     * these event are called before a comp is rendered to the dom
-     * @param callback
-     */
-    afterDeactivate: Function[];
-    /**
-     * Dispatch any event
-     * @param eventName
-     */
-    dispatchEvent(eventName: "beforeMountActive" | "afterMount" | "afterDeactivate"): void;
+  static refid: number;
+  /**
+   * the events runs only once and removed.
+   * these event are call and removed once when when a comp is rendered to the dom
+   * @param callback
+   */
+  afterMount: Function[];
+  /**
+   * the events runs many times.
+   * these event are called before a comp is rendered to the dom
+   * @param callback
+   */
+  beforeMountActive: Function[];
+  /**
+   * the events runs once after comps unmounts.
+   * these event are called before a comp is rendered to the dom
+   * @param callback
+   */
+  afterDeactivate: Function[];
+  /**
+   * Dispatch any event
+   * @param eventName
+   */
+  dispatchEvent(
+    eventName: "beforeMountActive" | "afterMount" | "afterDeactivate",
+  ): void;
 }
 export declare const CradovaEvent: cradovaEvent;
 /**
@@ -35,80 +37,79 @@ export declare const CradovaEvent: cradovaEvent;
  * create dynamic components
  */
 export declare class Comp<Prop extends Record<string, any> = any> {
-    id: number;
-    private component;
-    private effects;
-    private effectuate;
-    private rendered;
-    private published;
-    private preRendered;
-    private reference;
-    subData: Prop | null;
-    _state: Prop[];
-    _state_index: number;
-    test?: string;
-    constructor(component: (this: Comp<Prop>) => HTMLElement);
-    preRender(): void;
-    /**
-     * Cradova Comp
-     * ---
-     * returns html with cradova reference
-     * @param data
-     * @returns () => HTMLElement
-     */
-    render(): any;
-    _effect(fn: () => Promise<void> | void): void;
-    private effector;
-    /**
-     * Cradova Comp
-     * ---
-     * update comp component with new data and update the dom.
-     * @param data
-     * @returns
-     */
-    recall(): void;
-    private activate;
+  id: number;
+  private component;
+  private effects;
+  private effectuate;
+  private rendered;
+  private published;
+  private preRendered;
+  private reference;
+  subData: Prop | null;
+  _state: Prop[];
+  _state_index: number;
+  test?: string;
+  constructor(component: (this: Comp<Prop>) => HTMLElement);
+  preRender(): void;
+  /**
+   * Cradova Comp
+   * ---
+   * returns html with cradova reference
+   * @param data
+   * @returns () => HTMLElement
+   */
+  render(): HTMLElement;
+  _effect(fn: () => Promise<void> | void): void;
+  private effector;
+  /**
+   * Cradova Comp
+   * ---
+   * update comp component with new data and update the dom.
+   * @param data
+   * @returns
+   */
+  recall(): void;
+  private activate;
 }
 /**
  *  Cradova Signal
  * ----
- *  Create stateful data store.
+ *  Create a pub&sub store.
  *  Features:
  * - create a store
  * - subscribe components to events
- * - set object keys instead of all values
  * - persist changes to localStorage
- * @constructor initial: unknown, props: {useHistory, persist}
+ * @constructor initial: Record<string, any>, props: {persist}
  */
 export declare class Signal<Type extends Record<string, any>> {
-    private pn?;
-    private subs?;
-    pipe: Type;
-    constructor(initial: Type, props?: {
-        persistName?: string | undefined;
-    });
-    /**
-     *  Cradova Signal
-     * ----
-     *  fires an action if available
-     * @param key - string key of the action
-     * @param data - data for the action
-     */
-    publish<T extends keyof Type>(eventName: T, data: Type[T]): void;
-    /**
-     *  Cradova Signal
-     * ----
-     *  subscribe to an event
-     *
-     * @param Comp component to bind to.
-     */
-    subscribe<T extends keyof Type>(eventName: T, comp: Comp): void;
-    /**
-     *  Cradova Signal
-     * ----
-     * clear the history on local storage
-     */
-    clearPersist(): void;
+  private pn?;
+  private subs?;
+  pipe: Type;
+  constructor(initial: Type, props?: {
+    persistName?: string | undefined;
+  });
+  /**
+   *  Cradova Signal
+   * ----
+   *  fires an action if available
+   * @param key - string key of the action
+   * @param data - data for the action
+   */
+  publish<T extends keyof Type>(eventName: T, data: Type[T]): void;
+  /**
+   *  Cradova Signal
+   * ----
+   *  subscribe to an event
+   *
+   * @param Comp component to bind to.
+   */
+  subscribe<T extends keyof Type>(eventName: T, comp: Comp): void;
+  /**
+   *  Cradova Signal
+   * ----
+   * clear the history on local storage
+   */
+  clearPersist(): void;
 }
 /**
  *  Cradova Page
@@ -118,24 +119,27 @@ export declare class Signal<Type extends Record<string, any>> {
  * @param template
  */
 export declare class Page {
-    /**
-     * used internally
-     */
-    private _name;
-    /**
-     * this should be a cradova page component
-     */
-    _html: (this: Page) => HTMLElement;
-    private _template;
-    private _callBack;
-    private _deCallBack;
-    private _dropped;
-    constructor(cradova_page_initials: CradovaPageType);
-    onActivate(cb: () => Promise<void> | void): void;
-    onDeactivate(cb: () => Promise<void> | void): void;
-    _deActivate(): Promise<void>;
-    drop(state?: boolean): boolean | undefined;
-    _activate(): Promise<void>;
+  /**
+   * used internally
+   */
+  private _name;
+  /**
+   * this should be a cradova page component
+   */
+  _html: (this: Page) => HTMLElement;
+  private _template;
+  private _callBack;
+  private _deCallBack;
+  private _dropped;
+  private _snapshot;
+  private _snapshot_html?;
+  constructor(pageParams: CradovaPageType);
+  private _takeSnapShot;
+  onActivate(cb: () => Promise<void> | void): void;
+  onDeactivate(cb: () => Promise<void> | void): void;
+  _deActivate(): Promise<void>;
+  drop(state?: boolean): boolean | undefined;
+  _activate(): Promise<void>;
 }
 /** cradova router
  * ---
@@ -145,79 +149,83 @@ export declare class Page {
  * @param  page the cradova document tree for the route.
  */
 export declare class Router {
-    /**
-     * cradova router
-     * ---
-     * Registers a route.
-     *
-     * accepts an object containing pat and page
-     */
-    static BrowserRoutes(obj: Record<string, browserPageType<Page | unknown>>): void;
-    /**
+  /**
+   * cradova router
+   * ---
+   * Registers a route.
+   *
+   * accepts an object containing pat and page
+   */
+  static BrowserRoutes(
+    obj: Record<string, browserPageType<Page | unknown>>,
+  ): void;
+  /**
       Go back in Navigation history
       */
-    static back(): void;
-    /**
+  static back(): void;
+  /**
       Go forward in Navigation history
       */
-    static forward(): void;
-    /**
+  static forward(): void;
+  /**
       Pause navigation
       */
-    static pauseNaviagtion(): void;
-    /**
+  static pauseNavigation(): void;
+  /**
      resume navigation
     */
-    static resumeNaviagtion(): void;
-    /**
-     * Cradova Router
-     * ------
-     *
-     * Navigates to a designated page in your app
-     *
-     * @param href string
-     * @param data object
-     * @param force boolean
-     */
-    static navigate(href: string, data?: Record<string, any>): void;
-    /**
-     * Cradova
-     * ---
-     * Loading page for your app
-     *
-     * lazy loaded loading use
-     *
-     * @param page
-     */
-    static setLoadingPage(page: Page): void;
-    /** cradova router
-     * ---
-     * Listen for navigation events
-     *
-     * @param callback   () => void
-     */
-    static onPageEvent(callback: () => void): void;
-    /**
-     * Cradova Router
-     * ------
-     *
-     * return last set router params
-     *
-     * .
-     */
-    static get PageData(): {
-        params: Record<string, string>;
-        data?: Record<string, any>;
-    };
-    /**
-     * Cradova
-     * ---
-     * Error Handler for your app
-     *
-     * @param callback
-     * @param path? page path
-     */
-    static addErrorHandler(callback: (err?: unknown, pagePath?: string) => void): void;
-    static _mount(): void;
+  static resumeNavigation(): void;
+  /**
+   * Cradova Router
+   * ------
+   *
+   * Navigates to a designated page in your app
+   *
+   * @param href string
+   * @param data object
+   * @param force boolean
+   */
+  static navigate(href: string, data?: Record<string, any>): void;
+  /**
+   * Cradova
+   * ---
+   * Loading page for your app
+   *
+   * lazy loaded loading use
+   *
+   * @param page
+   */
+  static setLoadingPage(page: Page): void;
+  /** cradova router
+   * ---
+   * Listen for navigation events
+   *
+   * @param callback   () => void
+   */
+  static onPageEvent(callback: () => void): void;
+  /**
+   * Cradova Router
+   * ------
+   *
+   * return last set router params
+   *
+   * .
+   */
+  static get PageData(): {
+    params: Record<string, string>;
+    data?: Record<string, any>;
+  };
+  /**
+   * Cradova
+   * ---
+   * Error Handler for your app
+   *
+   * @param callback
+   * @param path? page path
+   */
+  static addErrorHandler(
+    callback: (err?: unknown, pagePath?: string) => void,
+  ): void;
+  static _mount(): void;
 }
 export {};

package/dist/primitives/dom-objects.d.ts

@@ -1,54 +1,161 @@
-import { type VJS_params_TYPE } from "./types";
-export declare const a: (...Children_and_Properties: VJS_params_TYPE<HTMLAnchorElement>) => HTMLAnchorElement;
-export declare const audio: (...Children_and_Properties: VJS_params_TYPE<HTMLAudioElement>) => HTMLAudioElement;
-export declare const br: (...Children_and_Properties: VJS_params_TYPE<HTMLBRElement>) => HTMLBRElement;
-export declare const button: (...Children_and_Properties: VJS_params_TYPE<HTMLButtonElement>) => HTMLButtonElement;
-export declare const canvas: (...Children_and_Properties: VJS_params_TYPE<HTMLCanvasElement>) => HTMLCanvasElement;
-export declare const caption: (...Children_and_Properties: VJS_params_TYPE<HTMLTableCaptionElement>) => HTMLTableCaptionElement;
-export declare const datalist: (...Children_and_Properties: VJS_params_TYPE<HTMLDataListElement>) => HTMLDataListElement;
-export declare const details: (...Children_and_Properties: VJS_params_TYPE<HTMLDetailsElement>) => HTMLDetailsElement;
-export declare const dialog: (...Children_and_Properties: VJS_params_TYPE<HTMLDialogElement>) => HTMLDialogElement;
-export declare const div: (...Children_and_Properties: VJS_params_TYPE<HTMLDivElement>) => HTMLDivElement;
-export declare const footer: (...Children_and_Properties: VJS_params_TYPE<HTMLElement>) => HTMLElement;
-export declare const form: (...Children_and_Properties: VJS_params_TYPE<HTMLFormElement>) => HTMLFormElement;
-export declare const h1: (...Children_and_Properties: VJS_params_TYPE<HTMLHeadingElement>) => HTMLHeadingElement;
-export declare const h2: (...Children_and_Properties: VJS_params_TYPE<HTMLHeadingElement>) => HTMLHeadingElement;
-export declare const h3: (...Children_and_Properties: VJS_params_TYPE<HTMLHeadingElement>) => HTMLHeadingElement;
-export declare const h4: (...Children_and_Properties: VJS_params_TYPE<HTMLHeadingElement>) => HTMLHeadingElement;
-export declare const h5: (...Children_and_Properties: VJS_params_TYPE<HTMLHeadingElement>) => HTMLHeadingElement;
-export declare const h6: (...Children_and_Properties: VJS_params_TYPE<HTMLHeadingElement>) => HTMLHeadingElement;
-export declare const head: (...Children_and_Properties: VJS_params_TYPE<HTMLHeadElement>) => HTMLHeadElement;
-export declare const header: (...Children_and_Properties: VJS_params_TYPE<HTMLHeadElement>) => HTMLHeadElement;
-export declare const hr: (...Children_and_Properties: VJS_params_TYPE<HTMLHRElement>) => HTMLHRElement;
-export declare const i: (...Children_and_Properties: VJS_params_TYPE<HTMLLIElement>) => HTMLLIElement;
-export declare const iframe: (...Children_and_Properties: VJS_params_TYPE<HTMLIFrameElement>) => HTMLIFrameElement;
-export declare const img: (...Children_and_Properties: VJS_params_TYPE<HTMLImageElement>) => HTMLImageElement;
-export declare const input: (...Children_and_Properties: VJS_params_TYPE<HTMLInputElement>) => HTMLInputElement;
-export declare const label: (...Children_and_Properties: VJS_params_TYPE<HTMLLabelElement>) => HTMLLabelElement;
-export declare const li: (...Children_and_Properties: VJS_params_TYPE<HTMLLIElement>) => HTMLLIElement;
-export declare const main: (...Children_and_Properties: VJS_params_TYPE<HTMLElement>) => HTMLElement;
-export declare const nav: (...Children_and_Properties: VJS_params_TYPE<HTMLElement>) => HTMLElement;
-export declare const ol: (...Children_and_Properties: VJS_params_TYPE<HTMLOListElement>) => HTMLOListElement;
-export declare const optgroup: (...Children_and_Properties: VJS_params_TYPE<HTMLOptGroupElement>) => HTMLOptGroupElement;
-export declare const option: (...Children_and_Properties: VJS_params_TYPE<HTMLOptionElement>) => HTMLOptionElement;
-export declare const p: (...Children_and_Properties: VJS_params_TYPE<HTMLParagraphElement>) => HTMLParagraphElement;
-export declare const progress: (...Children_and_Properties: VJS_params_TYPE<HTMLProgressElement>) => HTMLProgressElement;
-export declare const q: (...Children_and_Properties: VJS_params_TYPE<HTMLQuoteElement>) => HTMLQuoteElement;
-export declare const section: (...Children_and_Properties: VJS_params_TYPE<HTMLElement>) => HTMLElement;
-export declare const select: (...Children_and_Properties: VJS_params_TYPE<HTMLSelectElement>) => HTMLSelectElement;
-export declare const source: (...Children_and_Properties: VJS_params_TYPE<HTMLSourceElement>) => HTMLSourceElement;
-export declare const span: (...Children_and_Properties: VJS_params_TYPE<HTMLSpanElement>) => HTMLSpanElement;
-export declare const strong: (...Children_and_Properties: VJS_params_TYPE<HTMLElement>) => HTMLElement;
-export declare const summary: (...Children_and_Properties: VJS_params_TYPE<HTMLElement>) => HTMLElement;
-export declare const table: (...Children_and_Properties: VJS_params_TYPE<HTMLTableElement>) => HTMLTableElement;
-export declare const tbody: (...Children_and_Properties: VJS_params_TYPE<HTMLTableColElement>) => HTMLTableColElement;
-export declare const td: (...Children_and_Properties: VJS_params_TYPE<HTMLTableCellElement>) => HTMLTableCellElement;
-export declare const textarea: (...Children_and_Properties: VJS_params_TYPE<HTMLTextAreaElement>) => HTMLTextAreaElement;
-export declare const th: (...Children_and_Properties: VJS_params_TYPE<HTMLTableSectionElement>) => HTMLTableSectionElement;
-export declare const title: (...Children_and_Properties: VJS_params_TYPE<HTMLTitleElement>) => HTMLTitleElement;
-export declare const tr: (...Children_and_Properties: VJS_params_TYPE<HTMLTableRowElement>) => HTMLTableRowElement;
-export declare const u: (...Children_and_Properties: VJS_params_TYPE<HTMLUListElement>) => HTMLUListElement;
-export declare const ul: (...Children_and_Properties: VJS_params_TYPE<HTMLUListElement>) => HTMLUListElement;
-export declare const video: (...Children_and_Properties: VJS_params_TYPE<HTMLVideoElement>) => HTMLVideoElement;
-export declare const svg: (svg: string, properties?: VJS_params_TYPE<HTMLSpanElement>) => HTMLSpanElement;
-export declare const raw: (html: string | TemplateStringsArray) => DocumentFragment;
+import { type VJS_params_TYPE } from "./types.js";
+export declare const a: (
+  ...Children_and_Properties: VJS_params_TYPE<HTMLAnchorElement>
+) => HTMLAnchorElement;
+export declare const audio: (
+  ...Children_and_Properties: VJS_params_TYPE<HTMLAudioElement>
+) => HTMLAudioElement;
+export declare const br: (
+  ...Children_and_Properties: VJS_params_TYPE<HTMLBRElement>
+) => HTMLBRElement;
+export declare const button: (
+  ...Children_and_Properties: VJS_params_TYPE<HTMLButtonElement>
+) => HTMLButtonElement;
+export declare const canvas: (
+  ...Children_and_Properties: VJS_params_TYPE<HTMLCanvasElement>
+) => HTMLCanvasElement;
+export declare const caption: (
+  ...Children_and_Properties: VJS_params_TYPE<HTMLTableCaptionElement>
+) => HTMLTableCaptionElement;
+export declare const datalist: (
+  ...Children_and_Properties: VJS_params_TYPE<HTMLDataListElement>
+) => HTMLDataListElement;
+export declare const details: (
+  ...Children_and_Properties: VJS_params_TYPE<HTMLDetailsElement>
+) => HTMLDetailsElement;
+export declare const dialog: (
+  ...Children_and_Properties: VJS_params_TYPE<HTMLDialogElement>
+) => HTMLDialogElement;
+export declare const div: (
+  ...Children_and_Properties: VJS_params_TYPE<HTMLDivElement>
+) => HTMLDivElement;
+export declare const footer: (
+  ...Children_and_Properties: VJS_params_TYPE<HTMLElement>
+) => HTMLElement;
+export declare const form: (
+  ...Children_and_Properties: VJS_params_TYPE<HTMLFormElement>
+) => HTMLFormElement;
+export declare const h1: (
+  ...Children_and_Properties: VJS_params_TYPE<HTMLHeadingElement>
+) => HTMLHeadingElement;
+export declare const h2: (
+  ...Children_and_Properties: VJS_params_TYPE<HTMLHeadingElement>
+) => HTMLHeadingElement;
+export declare const h3: (
+  ...Children_and_Properties: VJS_params_TYPE<HTMLHeadingElement>
+) => HTMLHeadingElement;
+export declare const h4: (
+  ...Children_and_Properties: VJS_params_TYPE<HTMLHeadingElement>
+) => HTMLHeadingElement;
+export declare const h5: (
+  ...Children_and_Properties: VJS_params_TYPE<HTMLHeadingElement>
+) => HTMLHeadingElement;
+export declare const h6: (
+  ...Children_and_Properties: VJS_params_TYPE<HTMLHeadingElement>
+) => HTMLHeadingElement;
+export declare const head: (
+  ...Children_and_Properties: VJS_params_TYPE<HTMLHeadElement>
+) => HTMLHeadElement;
+export declare const header: (
+  ...Children_and_Properties: VJS_params_TYPE<HTMLHeadElement>
+) => HTMLHeadElement;
+export declare const hr: (
+  ...Children_and_Properties: VJS_params_TYPE<HTMLHRElement>
+) => HTMLHRElement;
+export declare const i: (
+  ...Children_and_Properties: VJS_params_TYPE<HTMLLIElement>
+) => HTMLLIElement;
+export declare const iframe: (
+  ...Children_and_Properties: VJS_params_TYPE<HTMLIFrameElement>
+) => HTMLIFrameElement;
+export declare const img: (
+  ...Children_and_Properties: VJS_params_TYPE<HTMLImageElement>
+) => HTMLImageElement;
+export declare const input: (
+  ...Children_and_Properties: VJS_params_TYPE<HTMLInputElement>
+) => HTMLInputElement;
+export declare const label: (
+  ...Children_and_Properties: VJS_params_TYPE<HTMLLabelElement>
+) => HTMLLabelElement;
+export declare const li: (
+  ...Children_and_Properties: VJS_params_TYPE<HTMLLIElement>
+) => HTMLLIElement;
+export declare const main: (
+  ...Children_and_Properties: VJS_params_TYPE<HTMLElement>
+) => HTMLElement;
+export declare const nav: (
+  ...Children_and_Properties: VJS_params_TYPE<HTMLElement>
+) => HTMLElement;
+export declare const ol: (
+  ...Children_and_Properties: VJS_params_TYPE<HTMLOListElement>
+) => HTMLOListElement;
+export declare const optgroup: (
+  ...Children_and_Properties: VJS_params_TYPE<HTMLOptGroupElement>
+) => HTMLOptGroupElement;
+export declare const option: (
+  ...Children_and_Properties: VJS_params_TYPE<HTMLOptionElement>
+) => HTMLOptionElement;
+export declare const p: (
+  ...Children_and_Properties: VJS_params_TYPE<HTMLParagraphElement>
+) => HTMLParagraphElement;
+export declare const progress: (
+  ...Children_and_Properties: VJS_params_TYPE<HTMLProgressElement>
+) => HTMLProgressElement;
+export declare const q: (
+  ...Children_and_Properties: VJS_params_TYPE<HTMLQuoteElement>
+) => HTMLQuoteElement;
+export declare const section: (
+  ...Children_and_Properties: VJS_params_TYPE<HTMLElement>
+) => HTMLElement;
+export declare const select: (
+  ...Children_and_Properties: VJS_params_TYPE<HTMLSelectElement>
+) => HTMLSelectElement;
+export declare const source: (
+  ...Children_and_Properties: VJS_params_TYPE<HTMLSourceElement>
+) => HTMLSourceElement;
+export declare const span: (
+  ...Children_and_Properties: VJS_params_TYPE<HTMLSpanElement>
+) => HTMLSpanElement;
+export declare const strong: (
+  ...Children_and_Properties: VJS_params_TYPE<HTMLElement>
+) => HTMLElement;
+export declare const summary: (
+  ...Children_and_Properties: VJS_params_TYPE<HTMLElement>
+) => HTMLElement;
+export declare const table: (
+  ...Children_and_Properties: VJS_params_TYPE<HTMLTableElement>
+) => HTMLTableElement;
+export declare const tbody: (
+  ...Children_and_Properties: VJS_params_TYPE<HTMLTableColElement>
+) => HTMLTableColElement;
+export declare const td: (
+  ...Children_and_Properties: VJS_params_TYPE<HTMLTableCellElement>
+) => HTMLTableCellElement;
+export declare const textarea: (
+  ...Children_and_Properties: VJS_params_TYPE<HTMLTextAreaElement>
+) => HTMLTextAreaElement;
+export declare const th: (
+  ...Children_and_Properties: VJS_params_TYPE<HTMLTableSectionElement>
+) => HTMLTableSectionElement;
+export declare const title: (
+  ...Children_and_Properties: VJS_params_TYPE<HTMLTitleElement>
+) => HTMLTitleElement;
+export declare const tr: (
+  ...Children_and_Properties: VJS_params_TYPE<HTMLTableRowElement>
+) => HTMLTableRowElement;
+export declare const u: (
+  ...Children_and_Properties: VJS_params_TYPE<HTMLUListElement>
+) => HTMLUListElement;
+export declare const ul: (
+  ...Children_and_Properties: VJS_params_TYPE<HTMLUListElement>
+) => HTMLUListElement;
+export declare const video: (
+  ...Children_and_Properties: VJS_params_TYPE<HTMLVideoElement>
+) => HTMLVideoElement;
+export declare const svg: (
+  svg: string,
+  properties?: VJS_params_TYPE<HTMLSpanElement>,
+) => HTMLSpanElement;
+export declare const raw: (
+  html: string | TemplateStringsArray,
+) => DocumentFragment;

package/dist/primitives/functions.d.ts

@@ -1,52 +1,83 @@
-import { type VJS_params_TYPE } from "./types";
-import { Comp } from "./classes";
+import { type VJS_params_TYPE } from "./types.js";
+import { Comp } from "./classes.js";
 /**
  * Cradova
  * ---
  * make reference to dom elements
  */
 declare class __raw_ref {
-    tree: Record<string, any>;
-    /**
-     * Bind a DOM element to a reference name.
-     * @param name - The name to reference the DOM element by.
-     */
-    bindAs(name: string): __raw_ref;
-    /**
-     * Retrieve a referenced DOM element.
-     * @param name - The name of the referenced DOM element.
-     */
-    elem<ElementType extends HTMLElement = HTMLElement>(name: string): ElementType | undefined;
-    /**
-     * Swap referenced DOM element.
-     */
-    swap(name1: string, name2: string): void;
-    /**
-     * 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.
-     */
-    _append(name: string, Element: HTMLElement): void;
+  tree: Record<string, any>;
+  /**
+   * Bind a DOM element to a reference name.
+   * @param name - The name to reference the DOM element by.
+   */
+  bindAs(name: string): __raw_ref;
+  /**
+   * Retrieve a referenced DOM element.
+   * @param name - The name of the referenced DOM element.
+   */
+  elem<ElementType extends HTMLElement = HTMLElement>(
+    name: string,
+  ): ElementType | undefined;
+  /**
+   * Swap referenced DOM element.
+   */
+  swap(name1: string, name2: string): void;
+  /**
+   * 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.
+   */
+  _append(name: string, Element: HTMLElement): void;
 }
-export declare const makeElement: <E extends HTMLElement>(element: E & HTMLElement, ElementChildrenAndPropertyList: VJS_params_TYPE<E>) => E;
-export declare const cra: <E extends HTMLElement>(tag: string) => (...Children_and_Properties: VJS_params_TYPE<E>) => E;
-export declare function Rhoda(l: VJS_params_TYPE<HTMLElement>): DocumentFragment;
+export declare const makeElement: <E extends HTMLElement>(
+  element: E & HTMLElement,
+  ElementChildrenAndPropertyList: VJS_params_TYPE<E>,
+) => E;
+export declare const cra: <E extends HTMLElement>(
+  tag: string,
+) => (...Children_and_Properties: VJS_params_TYPE<E>) => E;
+export declare function Rhoda(
+  l: VJS_params_TYPE<HTMLElement>,
+): DocumentFragment;
 /**
  * @param {expression} condition
  * @param {function} elements[]
  */
-export declare function $if<E extends HTMLElement>(condition: any, ...elements: VJS_params_TYPE<E>): any;
-export declare function $ifelse(condition: any, ifTrue: any, ifFalse?: any): any;
-export declare function $case<E extends HTMLElement = HTMLElement>(value: any, ...elements: VJS_params_TYPE<E>): (key: any) => VJS_params_TYPE<E> | undefined;
-export declare function $switch(key: unknown, ...cases: ((key: any) => any)[]): any;
+export declare function $if<E extends HTMLElement>(
+  condition: any,
+  ...elements: VJS_params_TYPE<E>
+): any;
+export declare function $ifelse(
+  condition: any,
+  ifTrue: any,
+  ifFalse?: any,
+): any;
+export declare function $case<E extends HTMLElement = HTMLElement>(
+  value: any,
+  ...elements: VJS_params_TYPE<E>
+): (key: any) => VJS_params_TYPE<E> | undefined;
+export declare function $switch(
+  key: unknown,
+  ...cases: ((key: any) => any)[]
+): any;
 type LoopData<Type> = Type[];
-export declare function loop<Type>(datalist: LoopData<Type>, component: (value: Type, index?: number, array?: LoopData<Type>) => HTMLElement | DocumentFragment | undefined): HTMLElement[] | undefined;
+export declare function loop<Type>(
+  datalist: LoopData<Type>,
+  component: (
+    value: Type,
+    index?: number,
+    array?: LoopData<Type>,
+  ) => HTMLElement | DocumentFragment | undefined,
+): HTMLElement[] | undefined;
 /**
  * Document fragment
  * @param children
  * @returns
  */
-export declare const frag: (children: VJS_params_TYPE<HTMLElement>) => DocumentFragment;
+export declare const frag: (
+  children: VJS_params_TYPE<HTMLElement>,
+) => DocumentFragment;
 /**
  * Cradova
  * ---
@@ -55,7 +86,10 @@ export declare const frag: (children: VJS_params_TYPE<HTMLElement>) => DocumentF
  * @param Comp
  * @returns [state, setState]
  */
-export declare function useState<S = unknown>(newState: S, Comp: Comp<any>): [S, (newState: S | ((preS: S) => S)) => void];
+export declare function useState<S = unknown>(
+  newState: S,
+  Comp: Comp<any>,
+): [S, (newState: S | ((preS: S) => S)) => void];
 /**
  * Cradova
  * ---

package/dist/primitives/types.d.ts

@@ -1,71 +1,112 @@
 import * as CSS from "csstype";
-import { Comp, Page } from "./classes";
+import { Comp, Page } from "./classes.js";
 type DataAttributes = {
-    [key: `data-${string}`]: string;
+  [key: `data-${string}`]: string;
 };
 type AriaAttributes = {
-    [key: `aria-${string}`]: string;
+  [key: `aria-${string}`]: string;
 };
 type Attributes = {
-    src?: string;
-    alt?: string;
-    for?: string;
-    rel?: string;
-    href?: string;
-    type?: string;
-    name?: string;
-    rows?: string;
-    value?: string;
-    accept: string;
-    action?: string;
-    target?: string;
-    method?: string;
-    checked?: boolean;
-    required?: string;
-    frameBorder?: string;
-    placeholder?: string;
-    reference?: [any, string];
-    autocomplete?: string;
-    style?: CSS.Properties;
-    recall?: (P: any) => void;
-    onmount?: (this: HTMLElement & Attributes) => void;
+  src?: string;
+  alt?: string;
+  for?: string;
+  rel?: string;
+  href?: string;
+  type?: string;
+  name?: string;
+  rows?: string;
+  value?: string;
+  accept: string;
+  action?: string;
+  target?: string;
+  method?: string;
+  checked?: boolean;
+  required?: string;
+  frameBorder?: string;
+  placeholder?: string;
+  reference?: [any, string];
+  autocomplete?: string;
+  style?: CSS.Properties;
+  recall?: (P: any) => void;
+  onmount?: (this: HTMLElement & Attributes) => void;
 };
-export type VJS_params_TYPE<E extends HTMLElement> = (Comp | Comp[] | string | undefined | HTMLElement | HTMLElement[] | DocumentFragment | DocumentFragment[] | Attributes | (() => HTMLElement) | Partial<Attributes> | Partial<E> | Record<string, (this: E) => void> | Partial<DataAttributes> | Partial<AriaAttributes> | CSS.Properties<string | number>)[];
+export type VJS_params_TYPE<E extends HTMLElement> = (
+  | Comp
+  | Comp[]
+  | string
+  | undefined
+  | HTMLElement
+  | HTMLElement[]
+  | DocumentFragment
+  | DocumentFragment[]
+  | Attributes
+  | Partial<Attributes>
+  | (() => HTMLElement)
+  | Partial<E>
+  | Record<string, (this: E) => void>
+  | Partial<DataAttributes>
+  | Partial<AriaAttributes>
+  | CSS.Properties<string | number>
+)[];
 export interface RouterRouteObject {
-    _html: ((this: Page, data?: unknown) => HTMLElement | DocumentFragment) | HTMLElement | DocumentFragment;
-    _delegatedRoutes: number | boolean;
-    _Activate: (force: boolean) => Promise<void>;
-    _deActivate: (params: object) => void;
-    _package: (params: unknown) => void;
-    _errorHandler: ((err: unknown) => void) | null;
-    _derive(): {
-        _name: string;
-        _callBack: ((cradovaPageSet: HTMLElement) => void | Promise<void>) | undefined;
-        _deCallBack: ((cradovaPageSet: HTMLElement) => void | Promise<void>) | undefined;
-    };
-    _apply_derivation(data: {
-        _name: string;
-        _callBack: ((cradovaPageSet: HTMLElement) => void | Promise<void>) | undefined;
-        _deCallBack: ((cradovaPageSet: HTMLElement) => void | Promise<void>) | undefined;
-    }): unknown;
+  _html:
+    | ((this: Page, data?: unknown) => HTMLElement | DocumentFragment)
+    | HTMLElement
+    | DocumentFragment;
+  _delegatedRoutes: number | boolean;
+  _Activate: (force: boolean) => Promise<void>;
+  _deActivate: (params: object) => void;
+  _package: (params: unknown) => void;
+  _errorHandler: ((err: unknown) => void) | null;
+  _derive(): {
+    _name: string;
+    _callBack:
+      | ((cradovaPageSet: HTMLElement) => void | Promise<void>)
+      | undefined;
+    _deCallBack:
+      | ((cradovaPageSet: HTMLElement) => void | Promise<void>)
+      | undefined;
+  };
+  _apply_derivation(data: {
+    _name: string;
+    _callBack:
+      | ((cradovaPageSet: HTMLElement) => void | Promise<void>)
+      | undefined;
+    _deCallBack:
+      | ((cradovaPageSet: HTMLElement) => void | Promise<void>)
+      | undefined;
+  }): unknown;
 }
 export type CradovaPageType = {
-    /**
-     * Cradova page
-     * ---
-     * title of the page
-     * .
-     */
-    name?: string;
-    /**
-     * Cradova page
-     * ---
-     * The component for the page
-     * @param data
-     * @returns void
-     * .
-     */
-    template: (this: Page) => HTMLElement;
+  /**
+   * Cradova page
+   * ---
+   * title of the page
+   * .
+   */
+  name?: string;
+  /**
+   * Cradova page
+   * ---
+   * The component for the page
+   * @param data
+   * @returns void
+   * .
+   */
+  template: (this: Page) => HTMLElement;
+  /**
+   * Cradova page
+   * ---
+   * a snapshot is the initial render of a page.
+   * snapshot isolation allows for good SEO guarantee with the flexibility of client based rendering
+   * the origin server should accept post requesting to save a snapshot of this page for future use.
+   * the origin server should respond with the snapshot for future request to the page url
+   * the origin server should implement suitable mechanisms to invalidate it's caches
+   */
+  snapshotIsolation?: boolean;
 };
-export type browserPageType<importType = Page> = importType | Promise<importType> | (() => Promise<importType>);
+export type browserPageType<importType = Page> =
+  | importType
+  | Promise<importType>
+  | (() => Promise<importType>);
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cradova",
-  "version": "3.4.1",
+  "version": "3.5.0",
   "description": "Build Powerful ⚡ Web Apps with Ease",
   "main": "dist/index.js",
   "type": "module",