cradova 3.1.2 → 3.1.4

package/LICENSE

@@ -2,180 +2,180 @@
                            Version 2.0, January 2004
                         http://www.apache.org/licenses/
 
-   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
-
-   1. Definitions.
-
-      "License" shall mean the terms and conditions for use, reproduction,
-      and distribution as defined by Sections 1 through 9 of this document.
-
-      "Licensor" shall mean the copyright owner or entity authorized by
-      the copyright owner that is granting the License.
-
-      "Legal Entity" shall mean the union of the acting entity and all
-      other entities that control, are controlled by, or are under common
-      control with that entity. For the purposes of this definition,
-      "control" means (i) the power, direct or indirect, to cause the
-      direction or management of such entity, whether by contract or
-      otherwise, or (ii) ownership of fifty percent (50%) or more of the
-      outstanding shares, or (iii) beneficial ownership of such entity.
-
-      "You" (or "Your") shall mean an individual or Legal Entity
-      exercising permissions granted by this License.
-
-      "Source" form shall mean the preferred form for making modifications,
-      including but not limited to software source code, documentation
-      source, and configuration files.
-
-      "Object" form shall mean any form resulting from mechanical
-      transformation or translation of a Source form, including but
-      not limited to compiled object code, generated documentation,
-      and conversions to other media types.
-
-      "Work" shall mean the work of authorship, whether in Source or
-      Object form, made available under the License, as indicated by a
-      copyright notice that is included in or attached to the work
-      (an example is provided in the Appendix below).
-
-      "Derivative Works" shall mean any work, whether in Source or Object
-      form, that is based on (or derived from) the Work and for which the
-      editorial revisions, annotations, elaborations, or other modifications
-      represent, as a whole, an original work of authorship. For the purposes
-      of this License, Derivative Works shall not include works that remain
-      separable from, or merely link (or bind by name) to the interfaces of,
-      the Work and Derivative Works thereof.
-
-      "Contribution" shall mean any work of authorship, including
-      the original version of the Work and any modifications or additions
-      to that Work or Derivative Works thereof, that is intentionally
-      submitted to Licensor for inclusion in the Work by the copyright owner
-      or by an individual or Legal Entity authorized to submit on behalf of
-      the copyright owner. For the purposes of this definition, "submitted"
-      means any form of electronic, verbal, or written communication sent
-      to the Licensor or its representatives, including but not limited to
-      communication on electronic mailing lists, source code control systems,
-      and issue tracking systems that are managed by, or on behalf of, the
-      Licensor for the purpose of discussing and improving the Work, but
-      excluding communication that is conspicuously marked or otherwise
-      designated in writing by the copyright owner as "Not a Contribution."
-
-      "Contributor" shall mean Licensor and any individual or Legal Entity
-      on behalf of whom a Contribution has been received by Licensor and
-      subsequently incorporated within the Work.
-
-   2. Grant of Copyright License. Subject to the terms and conditions of
-      this License, each Contributor hereby grants to You a perpetual,
-      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
-      copyright license to reproduce, prepare Derivative Works of,
-      publicly display, publicly perform, sublicense, and distribute the
-      Work and such Derivative Works in Source or Object form.
-
-   3. Grant of Patent License. Subject to the terms and conditions of
-      this License, each Contributor hereby grants to You a perpetual,
-      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
-      (except as stated in this section) patent license to make, have made,
-      use, offer to sell, sell, import, and otherwise transfer the Work,
-      where such license applies only to those patent claims licensable
-      by such Contributor that are necessarily infringed by their
-      Contribution(s) alone or by combination of their Contribution(s)
-      with the Work to which such Contribution(s) was submitted. If You
-      institute patent litigation against any entity (including a
-      cross-claim or counterclaim in a lawsuit) alleging that the Work
-      or a Contribution incorporated within the Work constitutes direct
-      or contributory patent infringement, then any patent licenses
-      granted to You under this License for that Work shall terminate
-      as of the date such litigation is filed.
-
-   4. Redistribution. You may reproduce and distribute copies of the
-      Work or Derivative Works thereof in any medium, with or without
-      modifications, and in Source or Object form, provided that You
-      meet the following conditions:
-
-      (a) You must give any other recipients of the Work or
-          Derivative Works a copy of this License; and
-
-      (b) You must cause any modified files to carry prominent notices
-          stating that You changed the files; and
-
-      (c) You must retain, in the Source form of any Derivative Works
-          that You distribute, all copyright, patent, trademark, and
-          attribution notices from the Source form of the Work,
-          excluding those notices that do not pertain to any part of
-          the Derivative Works; and
-
-      (d) If the Work includes a "NOTICE" text file as part of its
-          distribution, then any Derivative Works that You distribute must
-          include a readable copy of the attribution notices contained
-          within such NOTICE file, excluding those notices that do not
-          pertain to any part of the Derivative Works, in at least one
-          of the following places: within a NOTICE text file distributed
-          as part of the Derivative Works; within the Source form or
-          documentation, if provided along with the Derivative Works; or,
-          within a display generated by the Derivative Works, if and
-          wherever such third-party notices normally appear. The contents
-          of the NOTICE file are for informational purposes only and
-          do not modify the License. You may add Your own attribution
-          notices within Derivative Works that You distribute, alongside
-          or as an addendum to the NOTICE text from the Work, provided
-          that such additional attribution notices cannot be construed
-          as modifying the License.
-
-      You may add Your own copyright statement to Your modifications and
-      may provide additional or different license terms and conditions
-      for use, reproduction, or distribution of Your modifications, or
-      for any such Derivative Works as a whole, provided Your use,
-      reproduction, and distribution of the Work otherwise complies with
-      the conditions stated in this License.
-
-   5. Submission of Contributions. Unless You explicitly state otherwise,
-      any Contribution intentionally submitted for inclusion in the Work
-      by You to the Licensor shall be under the terms and conditions of
-      this License, without any additional terms or conditions.
-      Notwithstanding the above, nothing herein shall supersede or modify
-      the terms of any separate license agreement you may have executed
-      with Licensor regarding such Contributions.
-
-   6. Trademarks. This License does not grant permission to use the trade
-      names, trademarks, service marks, or product names of the Licensor,
-      except as required for reasonable and customary use in describing the
-      origin of the Work and reproducing the content of the NOTICE file.
-
-   7. Disclaimer of Warranty. Unless required by applicable law or
-      agreed to in writing, Licensor provides the Work (and each
-      Contributor provides its Contributions) on an "AS IS" BASIS,
-      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
-      implied, including, without limitation, any warranties or conditions
-      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
-      PARTICULAR PURPOSE. You are solely responsible for determining the
-      appropriateness of using or redistributing the Work and assume any
-      risks associated with Your exercise of permissions under this License.
-
-   8. Limitation of Liability. In no event and under no legal theory,
-      whether in tort (including negligence), contract, or otherwise,
-      unless required by applicable law (such as deliberate and grossly
-      negligent acts) or agreed to in writing, shall any Contributor be
-      liable to You for damages, including any direct, indirect, special,
-      incidental, or consequential damages of any character arising as a
-      result of this License or out of the use or inability to use the
-      Work (including but not limited to damages for loss of goodwill,
-      work stoppage, computer failure or malfunction, or any and all
-      other commercial damages or losses), even if such Contributor
-      has been advised of the possibility of such damages.
-
-   9. Accepting Warranty or Additional Liability. While redistributing
-      the Work or Derivative Works thereof, You may choose to offer,
-      and charge a fee for, acceptance of support, warranty, indemnity,
-      or other liability obligations and/or rights consistent with this
-      License. However, in accepting such obligations, You may act only
-      on Your own behalf and on Your sole responsibility, not on behalf
-      of any other Contributor, and only if You agree to indemnify,
-      defend, and hold each Contributor harmless for any liability
-      incurred by, or claims asserted against, such Contributor by reason
-      of your accepting any such warranty or additional liability.
-
-   END OF TERMS AND CONDITIONS
-
-   APPENDIX: How to apply the Apache License to your work.
+TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
+
+1.  Definitions.
+
+    "License" shall mean the terms and conditions for use, reproduction,
+    and distribution as defined by Sections 1 through 9 of this document.
+
+    "Licensor" shall mean the copyright owner or entity authorized by
+    the copyright owner that is granting the License.
+
+    "Legal Entity" shall mean the union of the acting entity and all
+    other entities that control, are controlled by, or are under common
+    control with that entity. For the purposes of this definition,
+    "control" means (i) the power, direct or indirect, to cause the
+    direction or management of such entity, whether by contract or
+    otherwise, or (ii) ownership of fifty percent (50%) or more of the
+    outstanding shares, or (iii) beneficial ownership of such entity.
+
+    "You" (or "Your") shall mean an individual or Legal Entity
+    exercising permissions granted by this License.
+
+    "Source" form shall mean the preferred form for making modifications,
+    including but not limited to software source code, documentation
+    source, and configuration files.
+
+    "Object" form shall mean any form resulting from mechanical
+    transformation or translation of a Source form, including but
+    not limited to compiled object code, generated documentation,
+    and conversions to other media types.
+
+    "Work" shall mean the work of authorship, whether in Source or
+    Object form, made available under the License, as indicated by a
+    copyright notice that is included in or attached to the work
+    (an example is provided in the Appendix below).
+
+    "Derivative Works" shall mean any work, whether in Source or Object
+    form, that is based on (or derived from) the Work and for which the
+    editorial revisions, annotations, elaborations, or other modifications
+    represent, as a whole, an original work of authorship. For the purposes
+    of this License, Derivative Works shall not include works that remain
+    separable from, or merely link (or bind by name) to the interfaces of,
+    the Work and Derivative Works thereof.
+
+    "Contribution" shall mean any work of authorship, including
+    the original version of the Work and any modifications or additions
+    to that Work or Derivative Works thereof, that is intentionally
+    submitted to Licensor for inclusion in the Work by the copyright owner
+    or by an individual or Legal Entity authorized to submit on behalf of
+    the copyright owner. For the purposes of this definition, "submitted"
+    means any form of electronic, verbal, or written communication sent
+    to the Licensor or its representatives, including but not limited to
+    communication on electronic mailing lists, source code control systems,
+    and issue tracking systems that are managed by, or on behalf of, the
+    Licensor for the purpose of discussing and improving the Work, but
+    excluding communication that is conspicuously marked or otherwise
+    designated in writing by the copyright owner as "Not a Contribution."
+
+    "Contributor" shall mean Licensor and any individual or Legal Entity
+    on behalf of whom a Contribution has been received by Licensor and
+    subsequently incorporated within the Work.
+
+2.  Grant of Copyright License. Subject to the terms and conditions of
+    this License, each Contributor hereby grants to You a perpetual,
+    worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+    copyright license to reproduce, prepare Derivative Works of,
+    publicly display, publicly perform, sublicense, and distribute the
+    Work and such Derivative Works in Source or Object form.
+
+3.  Grant of Patent License. Subject to the terms and conditions of
+    this License, each Contributor hereby grants to You a perpetual,
+    worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+    (except as stated in this section) patent license to make, have made,
+    use, offer to sell, sell, import, and otherwise transfer the Work,
+    where such license applies only to those patent claims licensable
+    by such Contributor that are necessarily infringed by their
+    Contribution(s) alone or by combination of their Contribution(s)
+    with the Work to which such Contribution(s) was submitted. If You
+    institute patent litigation against any entity (including a
+    cross-claim or counterclaim in a lawsuit) alleging that the Work
+    or a Contribution incorporated within the Work constitutes direct
+    or contributory patent infringement, then any patent licenses
+    granted to You under this License for that Work shall terminate
+    as of the date such litigation is filed.
+
+4.  Redistribution. You may reproduce and distribute copies of the
+    Work or Derivative Works thereof in any medium, with or without
+    modifications, and in Source or Object form, provided that You
+    meet the following conditions:
+
+    (a) You must give any other recipients of the Work or
+    Derivative Works a copy of this License; and
+
+    (b) You must cause any modified files to carry prominent notices
+    stating that You changed the files; and
+
+    (c) You must retain, in the Source form of any Derivative Works
+    that You distribute, all copyright, patent, trademark, and
+    attribution notices from the Source form of the Work,
+    excluding those notices that do not pertain to any part of
+    the Derivative Works; and
+
+    (d) If the Work includes a "NOTICE" text file as part of its
+    distribution, then any Derivative Works that You distribute must
+    include a readable copy of the attribution notices contained
+    within such NOTICE file, excluding those notices that do not
+    pertain to any part of the Derivative Works, in at least one
+    of the following places: within a NOTICE text file distributed
+    as part of the Derivative Works; within the Source form or
+    documentation, if provided along with the Derivative Works; or,
+    within a display generated by the Derivative Works, if and
+    wherever such third-party notices normally appear. The contents
+    of the NOTICE file are for informational purposes only and
+    do not modify the License. You may add Your own attribution
+    notices within Derivative Works that You distribute, alongside
+    or as an addendum to the NOTICE text from the Work, provided
+    that such additional attribution notices cannot be construed
+    as modifying the License.
+
+    You may add Your own copyright statement to Your modifications and
+    may provide additional or different license terms and conditions
+    for use, reproduction, or distribution of Your modifications, or
+    for any such Derivative Works as a whole, provided Your use,
+    reproduction, and distribution of the Work otherwise complies with
+    the conditions stated in this License.
+
+5.  Submission of Contributions. Unless You explicitly state otherwise,
+    any Contribution intentionally submitted for inclusion in the Work
+    by You to the Licensor shall be under the terms and conditions of
+    this License, without any additional terms or conditions.
+    Notwithstanding the above, nothing herein shall supersede or modify
+    the terms of any separate license agreement you may have executed
+    with Licensor regarding such Contributions.
+
+6.  Trademarks. This License does not grant permission to use the trade
+    names, trademarks, service marks, or product names of the Licensor,
+    except as required for reasonable and customary use in describing the
+    origin of the Work and reproducing the content of the NOTICE file.
+
+7.  Disclaimer of Warranty. Unless required by applicable law or
+    agreed to in writing, Licensor provides the Work (and each
+    Contributor provides its Contributions) on an "AS IS" BASIS,
+    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+    implied, including, without limitation, any warranties or conditions
+    of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
+    PARTICULAR PURPOSE. You are solely responsible for determining the
+    appropriateness of using or redistributing the Work and assume any
+    risks associated with Your exercise of permissions under this License.
+
+8.  Limitation of Liability. In no event and under no legal theory,
+    whether in tort (including negligence), contract, or otherwise,
+    unless required by applicable law (such as deliberate and grossly
+    negligent acts) or agreed to in writing, shall any Contributor be
+    liable to You for damages, including any direct, indirect, special,
+    incidental, or consequential damages of any character arising as a
+    result of this License or out of the use or inability to use the
+    Work (including but not limited to damages for loss of goodwill,
+    work stoppage, computer failure or malfunction, or any and all
+    other commercial damages or losses), even if such Contributor
+    has been advised of the possibility of such damages.
+
+9.  Accepting Warranty or Additional Liability. While redistributing
+    the Work or Derivative Works thereof, You may choose to offer,
+    and charge a fee for, acceptance of support, warranty, indemnity,
+    or other liability obligations and/or rights consistent with this
+    License. However, in accepting such obligations, You may act only
+    on Your own behalf and on Your sole responsibility, not on behalf
+    of any other Contributor, and only if You agree to indemnify,
+    defend, and hold each Contributor harmless for any liability
+    incurred by, or claims asserted against, such Contributor by reason
+    of your accepting any such warranty or additional liability.
+
+END OF TERMS AND CONDITIONS
+
+APPENDIX: How to apply the Apache License to your work.
 
       To apply the Apache License to your work, attach the following
       boilerplate notice, with the fields enclosed by brackets "[]"
@@ -186,16 +186,16 @@
       same "printed page" as the copyright notice for easier
       identification within third-party archives.
 
-   Copyright [yyyy] [name of copyright owner]
+Copyright 2023 friday candour
 
-   Licensed under the Apache License, Version 2.0 (the "License");
-   you may not use this file except in compliance with the License.
-   You may obtain a copy of the License at
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
 
        http://www.apache.org/licenses/LICENSE-2.0
 
-   Unless required by applicable law or agreed to in writing, software
-   distributed under the License is distributed on an "AS IS" BASIS,
-   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-   See the License for the specific language governing permissions and
-   limitations under the License.
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.

package/README.md

@@ -43,13 +43,13 @@ Cradova is a web development framework for building Single Page Applications and
 
 It's a fast and simple framework, it provides an easy to use state management and router system.
 
-Cradova follows the [VJS specification](https://github.com/fridaycandour/cradova/blob/main/spec.md)
+Cradova follows the [VJS specification](https://github.com/FridayCandour/cradova/blob/main/VJS_spec/spec.md)
 
 ## What's the benefit?
 
 Cradova is aimed to be fast and simple with and fewer abstractions and yet easily composable.
 
-Cradova is not built on visual DOM or diff algorithms.
+Cradova is not built on virtual DOM or diff algorithms.
 Instead, State management is done more elegantly with a simple predictive model, simple and easy with all the speed.
 
 ## Is this a big benefit?
@@ -62,24 +62,21 @@ Cradova has already been utilized in multiple production projects, and we will c
 
 ## Installation
 
+### From npm
+
+```bash
+npm i cradova
+```
+
 ### CDN sources
 
 ```html
 <!-- unpkg -->
-
 <script src="https://unpkg.com/cradova/dist/index.js"></script>
-
 <!--    js deliver -->
-
 <script src="https://cdn.jsdelivr.net/npm/cradova/dist/index.js"></script>
 ```
 
-### npm
-
-```bash
-npm i cradova
-```
-
 ## Examples
 
 Many aspects of Cradova are not reflected in the following example. More functionality will be entailed in future docs.
@@ -155,7 +152,7 @@ function HelloMessage() {
   });
 }
 
-// using cradova Ref
+// using CradovaRef
 
 const nameRef = new Ref(function (name) {
   const self = this;
@@ -190,8 +187,6 @@ function App() {
   return div(count, counter, dataCounter, HelloMessage, br, nameRef);
 }
 
-// add your app to the DOM
-
 document.body.append(App());
 ```
 
@@ -201,20 +196,26 @@ Let's see a simple TodoList example
 
 ```js
 import _, {
-  button,
-  createSignal,
-  css,
+  // elements
   div,
-  input,
+  button,
   main,
   p,
+  input,
+  // allows you to create powerful data stores
+  createSignal,
+  // dom ref
+  useRef(),
+  // useState
+  // useEffect
+  // dynamic component class
   Ref,
-  reference,
+  css,
 } from "cradova";
 
 function TodoList() {
   // can be used to hold multiple references
-  const referenceSet = new reference();
+  const referenceSet = useRef();
 
   // creating a store
   const todoStore = new createSignal([
@@ -355,21 +356,21 @@ Router.onPageEvent((lastRoute, newRoute) => {
 
 ---
 
-More info on cradova Router
+More info on Cradova Router
 
 ---
 
-Every cradova app mounts on a div with attribute data-wrapper="app"
+Every Cradova app mounts on a div with attribute data-wrapper="app"
 
-if it already exist cradova will use it instead.
+if it already exist Cradova will use it instead.
 
-cradova will create a div with data-wrapper="app" if it doesn't exists already.
+Cradova will create a div with data-wrapper="app" if it doesn't exists already.
 
 so if you want to use your own mount point then create a div with data-wrapper="app".
 
 ---
 
-More info on cradova screens
+More info on Cradova screens
 
 ---
 
@@ -391,11 +392,11 @@ circle for each screen in your app
 
 ---
 
-More info on cradova Ref
+More info on Cradova Ref
 
 ---
 
-Refs are dynamic components, they have simple abstractions like:
+Cradova Ref is a dynamic component class, which ships simple abstractions like:
 
 - Effects
 - stash
@@ -407,7 +408,7 @@ circle for refs in your app
 
 ---
 
-More info on cradova createSignal
+More info on Cradova createSignal
 
 ---
 
@@ -420,7 +421,7 @@ with ability to:
 - bind a Ref
 - listen to changes
 - persist changes to localStorage
-- update a cradova Ref and bindings automatically
+- update a CradovaRef and bindings automatically
 
 With these simple and easy abstractions, you can use datastores with powerful convenience.
 
@@ -436,7 +437,7 @@ To get further insights and help on Cradova, visit our [Discord](https://discord
 
 We are currently working to [set](https://github.com/fridaycandour/cradova/blob/main/contributing.md) up the following:
 
-- building cradova CLI (in progress)
+- building Cradova CLI (in progress)
 - Cradova Documentation Website
 - UI component libraries for cradova
 - Sample projects

package/dist/index.d.ts

@@ -6,15 +6,17 @@
    ██║        ██╔══██╗  ██║  ██║   █      ██  ██║     ██   ╚██╗ ██╔╝  ██║  ██╗ 
    ╚██████╗   ██║  ██║  ██║  ██║   ███████╔╝   ████████      ╚███╔╝   ██║  ██║ 
     ╚═════╝   ╚═╝  ╚═╝  ╚═╝  ╚═╝   ╚══════╝     ╚════╝        ╚══╝    ╚═╝  ╚═╝ 
-=============================================================================
-Cradova FrameWork
-@version  3.0.0
-License: Apache V2
+    =============================================================================
+    Cradova FrameWork
+    @version  3.0.0
+    License: Apache V2
 Copyright 2022 Friday Candour. 
 Repository - https://github.com/fridaycandour/cradova
 =============================================================================
 */
 
+import * as CSS from "csstype";
+
 declare module "cradova" {
   /**
    *  Cradova Signal
@@ -129,6 +131,19 @@ declare module "cradova" {
     clearPersist(): void;
   }
 
+  export const isNode: (element: unknown) => boolean;
+  /**
+   * Cradova event
+   */
+  export class cradovaEvent {
+    private listeners;
+    addEventListener(eventName: string, callback: () => void): Promise<void>;
+    dispatchEvent(eventName: string, eventArgs?: unknown): Promise<void>;
+  }
+  export const CradovaEvent: cradovaEvent;
+  export function Rhoda(
+    l: VJSType<HTMLElement>[] | (() => any)[] | Ref<unknown>[] | HTMLElement[]
+  ): DocumentFragment;
   export function css(identifier: string | TemplateStringsArray): void;
   /**
    *
@@ -138,7 +153,12 @@ declare module "cradova" {
   export function assert<Type>(
     condition: boolean,
     ...elements: VJS_Child_TYPE<Type | HTMLElement>[]
-  ): HTMLElement[];
+  ): HTMLElement[] | undefined;
+  export function assertOr<Type>(
+    condition: boolean,
+    ifTrue: VJS_Child_TYPE<Type | HTMLElement>,
+    ifFalse: VJS_Child_TYPE<Type | HTMLElement>
+  ): VJS_Child_TYPE<HTMLElement | Type>;
   type LoopData<Type> = Type[];
   export function loop<Type>(
     datalist: LoopData<Type>,
@@ -148,11 +168,6 @@ declare module "cradova" {
       array?: LoopData<Type>
     ) => HTMLElement | DocumentFragment | undefined
   ): HTMLElement[] | undefined;
-  export function assertOr<Type>(
-    condition: boolean,
-    ifTrue: VJS_Child_TYPE<Type | HTMLElement>,
-    ifFalse: VJS_Child_TYPE<Type | HTMLElement>
-  ): HTMLElement;
   /**
    * Cradova Ref
    * -------
@@ -201,6 +216,12 @@ declare module "cradova" {
     updateState(data?: D, stash?: boolean): void;
     private Activate;
   }
+  /**
+   * Document fragment
+   * @param children
+   * @returns
+   */
+  export const frag: (children: VJSType<HTMLElement>[]) => DocumentFragment;
   /**
    * cradova
    * ---
@@ -220,6 +241,7 @@ declare module "cradova" {
   export class reference {
     [x: string]: Record<string, any>;
     bindAs(name: string): reference;
+    dom<ElementType>(name: string): ElementType | undefined;
     _appendDomForce(name: string, Element: HTMLElement): void;
   }
   /**
@@ -230,24 +252,24 @@ declare module "cradova" {
    * @param ActiveRef
    * @returns [state, setState]
    */
-  export function useState<S>(
+  export function useState<S = unknown>(
     initialValue: S,
-    ActiveRef: Ref<S>
+    ActiveRef: Ref<unknown>
   ): [S, (newState: S) => void];
   /**
- * Cradova
- * ---
-Allows side effects to be performed in functional components (Refs), such as fetching data or subscribing to events.
- * @param effect
- * @returns
- */
+     * Cradova
+     * ---
+    Allows side effects to be performed in functional components (Refs), such as fetching data or subscribing to events.
+     * @param effect
+     * @returns
+     */
   export function useEffect(effect: () => void, ActiveRef: Ref<unknown>): void;
   /**
- * Cradova
- * ---
-Returns a mutable reference object of dom elements that persists across component renders.
- * @returns reference
- */
+     * Cradova
+     * ---
+    Returns a mutable reference object of dom elements that persists across component renders.
+     * @returns reference
+     */
   export function useRef(): Record<string, HTMLElement | undefined>;
 
   /**
@@ -269,7 +291,6 @@ Returns a mutable reference object of dom elements that persists across componen
     /**
      * this is a set of added html to the screen
      */
-    _secondaryChildren: VJSType<HTMLElement>[];
     /**
      * error handler for the screen
      */
@@ -285,6 +306,7 @@ Returns a mutable reference object of dom elements that persists across componen
     private _persist;
     private _delegatedRoutesCount;
     private _transition;
+    private _dropped;
     constructor(cradova_screen_initials: CradovaScreenType);
     get _delegatedRoutes(): boolean;
     set _delegatedRoutes(count: boolean);
@@ -292,8 +314,8 @@ Returns a mutable reference object of dom elements that persists across componen
     _package(): Promise<void>;
     onActivate(cb: () => Promise<void> | void): void;
     onDeactivate(cb: () => Promise<void> | void): void;
-    addChildren(...addOns: VJSType<HTMLElement>[]): void;
     _deActivate(): Promise<void>;
+    drop(state: boolean): boolean | undefined;
     _Activate(force?: boolean): Promise<void>;
   }
 
@@ -316,9 +338,9 @@ Returns a mutable reference object of dom elements that persists across componen
       | (() => HTMLElement)
       | Partial<DataAttributes>
       | Partial<AriaAttributes>
-      | Partial<CSSStyleDeclaration>
+      | CSS.Properties
       | {
-          style?: Partial<CSSStyleDeclaration>;
+          style?: CSS.Properties;
           onmount?: (this: T) => void;
           reference?: reference;
         }
@@ -336,9 +358,8 @@ Returns a mutable reference object of dom elements that persists across componen
     | (() => HTMLElement)
     | Partial<DataAttributes>
     | Partial<AriaAttributes>
-    | Partial<CSSStyleDeclaration>
+    | CSS.Properties<string | number>
     | {
-        style?: Partial<CSSStyleDeclaration>;
         src?: string;
         href?: string;
         placeholder?: string;
@@ -354,6 +375,7 @@ Returns a mutable reference object of dom elements that persists across componen
         rel?: string;
         required?: string;
         frameBorder?: string;
+        style?: CSS.Properties;
         onmount?: (this: T) => void;
         reference?: reference;
       }
@@ -412,6 +434,7 @@ Returns a mutable reference object of dom elements that persists across componen
     element: E & HTMLElement,
     ElementChildrenAndPropertyList: VJS_params_TYPE<E>
   ) => E;
+  export const make: (descriptor: any) => any[];
   export const a: VJSType<HTMLAnchorElement>;
   export const area: VJSType<HTMLAreaElement>;
   export const article: VJSType<HTMLElement>;
@@ -491,7 +514,7 @@ Returns a mutable reference object of dom elements that persists across componen
    * @param {string}   path     Route path.
    * @param  screen the cradova document tree for the route.
    */
-  export class RouterClass {
+  export class Router {
     /** cradova router
      * ---
      * Registers a route.
@@ -501,15 +524,23 @@ Returns a mutable reference object of dom elements that persists across componen
      * @param {string}   path     Route path.
      * @param  screen the cradova screen.
      */
-    BrowserRoutes(obj: Record<string, any>): void;
+    static BrowserRoutes(obj: Record<string, any>): void;
+    /**
+          Go back in Navigation history
+          */
+    static back(): void;
     /**
-      Go back in Navigation history
-      */
-    back(): void;
+          Go forward in Navigation history
+          */
+    static forward(): void;
     /**
-      Go forward in Navigation history
-      */
-    forward(): void;
+          Pause navigation
+          */
+    static pauseNaviagtion(): void;
+    /**
+         resume navigation
+        */
+    static resumeNaviagtion(): void;
     /**
      * Cradova Router
      * ------
@@ -520,11 +551,20 @@ Returns a mutable reference object of dom elements that persists across componen
      * @param data object
      * @param force boolean
      */
-    navigate(
+    static navigate(
       href: string,
       data?: Record<string, unknown> | null,
       force?: boolean
     ): void;
+    /**
+     * Cradova Router
+     * ------
+     *
+     * Navigates to a designated screen in your app by loading a seperate page;
+     *
+     * @param pathname string
+     */
+    static navigateNauturally(pathname: string): void;
     /**
      * Cradova
      * ---
@@ -534,14 +574,14 @@ Returns a mutable reference object of dom elements that persists across componen
      *
      * @param screen
      */
-    setLoadingScreen(screen: Screen): void;
+    static setLoadingScreen(screen: Screen): void;
     /** cradova router
      * ---
      * Listen for navigation events
      *
      * @param callback   () => void
      */
-    onPageEvent(callback: () => void): void;
+    static onPageEvent(callback: () => void): void;
     /** cradova router
      * ---
      * get a screen ready before time.
@@ -549,7 +589,10 @@ Returns a mutable reference object of dom elements that persists across componen
      * @param {string}   path Route path.
      * @param  data data for the screen.
      */
-    packageScreen(path: string, data?: Record<string, unknown>): Promise<void>;
+    static packageScreen(
+      path: string,
+      data?: Record<string, unknown>
+    ): Promise<void>;
     /**
      * Cradova Router
      * ------
@@ -558,7 +601,7 @@ Returns a mutable reference object of dom elements that persists across componen
      *
      * .
      */
-    getParams(): any;
+    static getParams(): any;
     /**
      * Cradova
      * ---
@@ -567,10 +610,9 @@ Returns a mutable reference object of dom elements that persists across componen
      * @param callback
      * @param path? page path
      */
-    addErrorHandler(callback: (err: unknown) => void): void;
-    _mount(): void;
+    static addErrorHandler(callback: (err: unknown) => void): void;
+    static _mount(): void;
   }
-  export const Router: RouterClass;
 
   /**
    *

package/dist/index.js

@@ -21,7 +21,7 @@ var cradovaEvent = class {
   constructor() {
     this.listeners = {};
   }
-  addEventListener(eventName, callback) {
+  async addEventListener(eventName, callback) {
     if (!this.listeners[eventName]) {
       this.listeners[eventName] = [];
     }
@@ -30,7 +30,7 @@ var cradovaEvent = class {
   // removeEventListener(eventName: string, num: number) {
   //   this.listeners[eventName].splice(num, 1);
   // }
-  dispatchEvent(eventName, eventArgs) {
+  async dispatchEvent(eventName, eventArgs) {
     const eventListeners = this.listeners[eventName] || [];
     for (; eventListeners.length !== 0; ) {
       eventListeners.shift()?.call(void 0, eventArgs);
@@ -281,6 +281,9 @@ var reference = class {
   bindAs(name) {
     return [this, name];
   }
+  dom(name) {
+    return this[name];
+  }
   _appendDomForce(name, Element) {
     this[name] = Element;
   }
@@ -611,7 +614,7 @@ var Screen = class {
     /**
      * this is a set of added html to the screen
      */
-    this._secondaryChildren = [];
+    // private _secondaryChildren: VJSType<HTMLElement>[] = [];
     /**
      * error handler for the screen
      */
@@ -620,6 +623,7 @@ var Screen = class {
     this._template = document.createElement("div");
     this._persist = true;
     this._delegatedRoutesCount = -1;
+    this._dropped = false;
     const { template: template2, name, persist, renderInParallel, transition } = cradova_screen_initials;
     this._html = template2;
     this._name = name;
@@ -668,9 +672,6 @@ var Screen = class {
         }
       }
     }
-    if (this._secondaryChildren.length) {
-      this._template.appendChild(frag(this._secondaryChildren));
-    }
   }
   onActivate(cb) {
     this._callBack = cb;
@@ -678,15 +679,26 @@ var Screen = class {
   onDeactivate(cb) {
     this._deCallBack = cb;
   }
-  addChildren(...addOns) {
-    this._secondaryChildren.push(...addOns);
-  }
+  // addChildren(...addOns: VJSType<HTMLElement>[]) {
+  //   this._secondaryChildren.push(...addOns);
+  // }
   async _deActivate() {
     if (this._deCallBack) {
       await this._deCallBack();
     }
   }
+  drop(state) {
+    if (typeof state === "boolean") {
+      this._dropped = state;
+      return void 0;
+    } else
+      return this._dropped;
+  }
   async _Activate(force = false) {
+    if (this._dropped) {
+      history.go(-1);
+      return;
+    }
     if (!this._persist || force || !this._packed) {
       await this._package();
       this._packed = true;
@@ -722,6 +734,7 @@ RouterBox["loadingScreen"] = null;
 RouterBox["params"] = {};
 RouterBox["routes"] = {};
 RouterBox["pageevents"] = [];
+RouterBox["paused"] = false;
 RouterBox["start_pageevents"] = async function(url) {
   setTimeout(() => {
     for (let ci = 0; ci < RouterBox["pageevents"].length; ci++) {
@@ -784,9 +797,10 @@ RouterBox.route = (path, screen) => {
   return void 0;
 };
 RouterBox.router = async function(_e, _force) {
-  let url, route, params;
-  if (!url) {
-    url = window.location.pathname;
+  let url = window.location.pathname, route, params;
+  if (RouterBox["paused"]) {
+    window.location.hash = "paused";
+    return;
   }
   if (url === RouterBox["lastNavigatedRoute"]) {
     return;
@@ -847,7 +861,7 @@ RouterBox.router = async function(_e, _force) {
     }
   }
 };
-var RouterClass = class {
+var Router = class {
   /** cradova router
    * ---
    * Registers a route.
@@ -857,7 +871,7 @@ var RouterClass = class {
    * @param {string}   path     Route path.
    * @param  screen the cradova screen.
    */
-  BrowserRoutes(obj) {
+  static BrowserRoutes(obj) {
     for (const path in obj) {
       let screen = obj[path];
       if (typeof screen === "object" && typeof screen.then === "function" || typeof screen === "function") {
@@ -869,20 +883,35 @@ var RouterClass = class {
         RouterBox.route(path, screen);
       }
     }
-    this._mount();
+    Router._mount();
   }
   /** 
     Go back in Navigation history
     */
-  back() {
+  static back() {
     history.go(-1);
   }
   /** 
     Go forward in Navigation history
     */
-  forward() {
+  static forward() {
     history.go(1);
   }
+  /** 
+    Pause navigation
+    */
+  static pauseNaviagtion() {
+    RouterBox["paused"] = true;
+    window.location.hash = "paused";
+  }
+  /** 
+   resume navigation
+  */
+  static resumeNaviagtion() {
+    RouterBox["paused"] = false;
+    window.location.replace(window.location.pathname + window.location.search);
+    history.go(-1);
+  }
   /**
    * Cradova Router
    * ------
@@ -893,7 +922,7 @@ var RouterClass = class {
    * @param data object
    * @param force boolean
    */
-  navigate(href, data2 = null, force = false) {
+  static 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"
@@ -916,6 +945,22 @@ var RouterClass = class {
       RouterBox.router(null, force);
     }
   }
+  /**
+   * Cradova Router
+   * ------
+   *
+   * Navigates to a designated screen in your app by loading a seperate page;
+   *
+   * @param pathname string
+   */
+  static navigateNauturally(pathname) {
+    if (typeof pathname !== "string") {
+      throw new TypeError(
+        " \u2718  Cradova err:  pathname must be a defined path but got " + pathname + " instead"
+      );
+    }
+    window.location.pathname = pathname;
+  }
   /**
    * Cradova
    * ---
@@ -925,7 +970,7 @@ var RouterClass = class {
    *
    * @param screen
    */
-  setLoadingScreen(screen) {
+  static setLoadingScreen(screen) {
     if (screen instanceof Screen) {
       RouterBox["LoadingScreen"] = screen;
     } else {
@@ -940,7 +985,7 @@ var RouterClass = class {
    *
    * @param callback   () => void
    */
-  onPageEvent(callback) {
+  static onPageEvent(callback) {
     if (typeof callback === "function") {
       RouterBox["pageevents"].push(callback);
     } else {
@@ -956,7 +1001,7 @@ var RouterClass = class {
    * @param {string}   path Route path.
    * @param  data data for the screen.
    */
-  async packageScreen(path, data2 = {}) {
+  static async packageScreen(path, data2 = {}) {
     if (!RouterBox.routes[path]) {
       console.error(" \u2718  Cradova err:  no screen with path " + path);
       throw new Error(
@@ -986,7 +1031,7 @@ var RouterClass = class {
    *
    * .
    */
-  getParams() {
+  static getParams() {
     return RouterBox["params"];
   }
   /**
@@ -997,7 +1042,7 @@ var RouterClass = class {
    * @param callback
    * @param path? page path
    */
-  addErrorHandler(callback) {
+  static addErrorHandler(callback) {
     if (typeof callback === "function") {
       RouterBox["errorHandler"] = callback;
     } else {
@@ -1006,7 +1051,7 @@ var RouterClass = class {
       );
     }
   }
-  _mount() {
+  static _mount() {
     let doc = document.querySelector("[data-wrapper=app]");
     if (!doc) {
       doc = document.createElement("div");
@@ -1023,7 +1068,6 @@ var RouterClass = class {
     });
   }
 };
-var Router = new RouterClass();
 
 // lib/parts/elements.ts
 var makeElement = (element, ElementChildrenAndPropertyList) => {
@@ -1053,12 +1097,6 @@ var makeElement = (element, ElementChildrenAndPropertyList) => {
         props = Object.assign(props, child);
         continue;
       }
-      if (typeof child !== "undefined") {
-        console.error(" \u2718  Cradova err:   got", { child });
-        throw new Error(
-          "  \u2718  Cradova err:  invalid child type: (" + typeof child + ")"
-        );
-      }
     }
   } else {
     return element;
@@ -1139,8 +1177,8 @@ var makeElement = (element, ElementChildrenAndPropertyList) => {
   return element;
 };
 var make = function(descriptor) {
-  if (!descriptor.length) {
-    return ["DIV"];
+  if (typeof descriptor !== "string") {
+    return [];
   }
   if (Array.isArray(descriptor)) {
     descriptor = descriptor[0];
@@ -1193,7 +1231,7 @@ var make = function(descriptor) {
     }
     classes.push(descriptor[i2]);
   }
-  return [tag || "DIV", IDs[0], classes.join(" "), innerValue];
+  return [tag, IDs[0], classes.join(" "), innerValue];
 };
 var cra = (tag) => {
   const extend = (...Children_and_Properties) => makeElement(document.createElement(tag), Children_and_Properties);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cradova",
-  "version": "3.1.2",
+  "version": "3.1.4",
   "description": "Web framework for building web apps and PWAs",
   "main": "dist/index.js",
   "type": "module",
@@ -62,6 +62,7 @@
     "@types/jest": "^29.2.4",
     "@typescript-eslint/eslint-plugin": "^5.47.0",
     "@typescript-eslint/parser": "^5.47.0",
+    "csstype": "^3.1.2",
     "eslint": "^8.30.0",
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-prettier": "^4.2.1",