vaderjs 1.0.3 → 1.0.5

package/jsconfig.json

@@ -2,8 +2,13 @@
     "compilerOptions": {
         "allowJs": true,
         "checkJs": true,
-        
+        "jsx": "react",
+        "module": "esnext",
+        "moduleResolution": "node",
+        "noEmit": true,
+        "strict": true, // Enforce strict type checking
+        "forceConsistentCasingInFileNames": true, // Ensures consistent file name casing
+        "noImplicitAny": true,
     },
-    "include": ["/"],
-    
-}
+    "include": ["/"]
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vaderjs",
-  "version": "1.0.3",
+  "version": "1.0.5",
   "description": "A Reactive Framework for Single-Page Applications (SPA)",
   "main": "vader.js",
   "scripts": {

package/vader.js

@@ -96,19 +96,17 @@ export function component(name, options) {
    * @returns  {Array} [state, setState]
    * @description Allows you to bind state to component
    */
-  const useState = (key, initialValue) => {
-    if (!(key in states)) {
-      states[key] = initialValue;
-      window.props[key] = initialValue;
+  const useState = ( initialValue) => {
+    let state = states[name];
+    if (!state) {
+      state = initialValue;
+      states[name] = state;
     }
-
-    /**
-     * @Array state
-     * @param {*} states
-     * @description Allows you to get state of component
-     */
-
-    return [states[key], (newValue) => setState(key, newValue)];
+    const setState = (value) => {
+      states[name] = value;
+      updateComponent();
+    }
+    return [state, setState];
   };
   /**
    * @function useEffect
@@ -310,14 +308,15 @@ export function component(name, options) {
   window.useEffect = useEffect;
   window.useAuth = useAuth;
   window.useSyncStore = useSyncStore;
-  const updateComponent = () => {
+ 
+  const updateComponent = async () => {
     const componentContainer = document.querySelector(
       `[data-component="${name}"]`
     );
     if (componentContainer) {
       runEffects;
 
-      componentContainer.innerHTML = options.render(
+      componentContainer.innerHTML = await options.render(
         states,
         (storedProps = null)
       );
@@ -332,22 +331,20 @@ export function component(name, options) {
    * @returns 
    */
 
-  const render = (props) => {
+  const render = async (props) => {
     storedProps = props;
     const componentContainer = document.querySelector(
       `[data-component="${name}"]`
     );
+ 
     if (componentContainer) {
       runEffects();
 
-      componentContainer.innerHTML = options.render(
-        states,
-        (storedProps = null)
-      );
+      componentContainer.innerHTML =  await options.render( states, props);
     } else {
       return vhtml`
           <div data-component="${name}">
-            ${options.render(
+            ${await options.render(
               states,
               props
             )}
@@ -371,3 +368,22 @@ export function component(name, options) {
 export const rf = (name, fn) => {
   window[name] = fn;
 };
+/**
+ * @function include
+ * @description Allows you to include html file
+ * @returns   - modified string with html content
+ * @param {string}  path 
+ */
+
+export const include = (path) => {
+  return fetch(`./${path}`)
+  .then((res) => {
+    if(res.status === 404){
+      throw new Error(`No file found at ${path}`)
+    }
+    return res.text()
+  })
+  .then((data) => {
+    return new Function(`return \`${data}\`;`)()
+  })
+};

package/vaderRouter.js

@@ -81,7 +81,15 @@ class VaderRouter {
           status: 404,
           message: "Page not found",
         };
-        this.handleError("404", errBody);
+        const res = {
+          return: function (data) {
+            this.hooked = false;
+          },
+          render: function (selector, data) {
+            document.querySelector(selector).innerHTML = data;
+          }
+        }
+        this.handleError("404", errBody, res);
       }
     });
   }
@@ -111,9 +119,9 @@ class VaderRouter {
    * @description used by start() to handle errors.
    */
 
-  handleError(type, data) {
+  handleError(type, data, res) {
     if (this.errorHandlers[type]) {
-      this.errorHandlers[type](data);
+      this.errorHandlers[type](data, res);
     } else {
       console.error(`No error handler found for type: ${type}`);
     }

package/components/header.html

@@ -1,20 +0,0 @@
-<header>
-    <div>
-        <h1>Header</h1>
-        <test
-        ${props.styles}
-        >${props.color}</test>
-
-        ${
-          function(){
-      
-                if(props.color === 'red'){
-                    return `<h1>Red</h1>`
-                }else{
-                    return `<h1>Not Red</h1>`
-                }
-               
-          }()
-        }
-    </div>
-</header>   

package/config.json

@@ -1,7 +0,0 @@
-{
-     "port": 3001,
-     "type": "http",
-     "origin": "http://localhost:3000",
-      "path": "/api"
-  
-}