vaderjs 1.4.2 → 1.4.4

package/index.ts

@@ -1,344 +1,305 @@
-//@ts-nocheck
-import {Element} from 'vaderjs/binaries/Kalix'
-import React from 'react'
-export const Vader = {
-    version: "0.0.1",
+let isClassComponent = function(element) {
+  return element.toString().startsWith("class");
+};
+
+declare global {
+  interface Window {
+    onbeforeunload: any;
+    localStorage: any;
+    sessionStorage: any;
+  } 
+  const genKey: any; 
+  let isServer: boolean;
 }
+//@ts-ignore
+globalThis.isServer = typeof window === "undefined";
  
-declare global {
-    /**
-     * @type {boolean}
-     * @description A boolean value that returns true if the current environment is a server
-     */
-    const isServer: boolean;
-    var location: {
-        href: string,
-        pathname: string,
-        search: string,
-        hash: string,
-        host: string,
-        hostname: string,
-        port: string,
-        protocol: string,
-        origin: string,
-        reload: () => void,
-    }
-    /**
-     * @description The env object - refers to the env variable either set in config or through the process.env
-     * @type {Object} [env]
-     */
-    var env:{
-        [key: string]: any
+
+/**
+ * @description useFetch allows you to make POST - GET - PUT - DELETE requests then returns the data, loading state and error
+ * @param url 
+ * @param options 
+ * @returns  [data, loading, error]
+ */
+export const useFetch = (url: string, options: any) => {
+  return [null, true, null];
+};
+
+/**
+ * @description A custom hook that allows you to use state in a functional component
+ * @param key 
+ * @param promise 
+ * @returns 
+ */
+export const useAsyncState = (key: string, promise: Promise<any>) => {
+  return [null, () => {}];
+}
+export const useEffect = (callback:any, dependencies: any[]) => {
+  dependencies = dependencies.map((dep) => dep.toString());
+  if (dependencies.length === 0) {
+    callback();
+  }
+}
+
+/**
+ * @description - Create a new element
+ * @param element 
+ * @param props 
+ * @param children 
+ * @returns 
+ */
+export const e = (element: any, props: any, ...children: any[]) => {
+  if(typeof element === "function"){ 
+    let instance = new Component(); 
+    instance.render = element;
+    return instance.render()  
+  }
+  return { type: element, props: props || {}, children: children || [] };
+};
+
+/**
+ * @description - Create a new element
+ * @param key 
+ * @param initialState 
+ * @returns {state,  (newState: any, Element: string) => void, key}
+ */
+export const useState = (key, initialState) => {
+  const instance = new Component;
+  return  [instance.state[key],
+  /**
+   * @description - Set the state of the component
+   * @param newState 
+   * @param Element 
+   */
+  (newState: any, Element: string) => {
+    instance.setState({ [key]: newState }, Element);
+  }, key];
+}
+//@ts-ignore
+let state = {};
+export class Component {
+  props: any;
+  state: any;
+  element: any;
+  Mounted: boolean;
+  effect: any[];
+  key: string;
+  prevState: any;
+  constructor() {
+    this.key = Math.random().toString(36).substring(7);
+    this.props = {};
+    //@ts-ignore
+    state[this.key] = {};
+    this.state = state[this.key];
+    this.effect = [];
+    this.Mounted = false;
+    this.element = null;
+  }
+  setState(newState: any, Element: string) {
+    state[this.key] = { ...this.state, ...newState };
+    console.log(state[this.key]);
+    this.forceUpdate(Element);
+  }
+
+  useEffect(callback: any, dependencies: any[]) {
+    if (dependencies.length === 0 && this.Mounted && this.effect.length === 0) {
+      callback();
+      this.effect.push(callback);
+    }else{
+      for (let i = 0; i < dependencies.length; i++) {
+        if (this.effect[i] !== dependencies[i]) {
+          this.effect = dependencies;
+          callback();
+        } 
+      }
     }
-    var history: {
-        pushState: (state: any, title: string, url: string) => void,
-        replaceState: (state: any, title: string, url: string) => void,
-        go: (delta: number) => void,
-        back: () => void,
-        forward: () => void,
+  }  
+  useState(key: string, initialState: any) {
+    if (!this.state[key]) { 
+      console.log(`State ${key} does not exist`)
+      this.state[key] = initialState;
     }
-    var localStorage: {
-        getItem: (key: string) => string,
-        setItem: (key: string, value: string) => void,
-        removeItem: (key: string) => void,
-        clear: () => void,
+
+    window.onbeforeunload = () => {
+      sessionStorage.setItem("state", JSON.stringify({}));
     }
     /**
-     * @description The window object - used to manipulate the browser window
-     * @property {string} location.href - The URL of the current page
-     * @property {string} location.pathname - The path of the current page
-     * @property {string} location.search - The query string of the current page
-     * @property {string} location.hash - The hash of the current page
-     * @property {string} location.host - The host of the current page
-     * @property {string} location.hostname - The hostname of the current page
-     * @property {string} location.port - The port of the current page
-     * @property {string} location.protocol - The protocol of the current page
-     * @property {string} location.origin - The origin of the current page
-     * @property {Function} location.reload - Reloads the current page
-     * @property {Object} history - The history object
-     * @property {Function} history.pushState - Pushes a new state to the history object
+     * 
+     * @param {*} newState 
+     * @param {*} Element  - The element affected by the state change
      */
-    var window: {
-        location: {
-            href: string,
-            /**
-             *  @property {string} location.pathname - The path of the current page
-             */
-            pathname: string,
-            search: string,
-            hash: string,
-            host: string,
-            hostname: string,
-            port: string,
-            protocol: string,
-            origin: string,
-            reload: () => void,
-        },
-        history: {
-            pushState: (state: any, title: string, url: string) => void,
-            replaceState: (state: any, title: string, url: string) => void,
-            go: (delta: number) => void,
-            back: () => void,
-            forward: () => void,
-        },
-        localStorage: {
-            getItem: (key: string) => string,
-            setItem: (key: string, value: string) => void,
-            removeItem: (key: string) => void,
-            clear: () => void,
-        },
+    const setState = (newState, Element) => {
+      this.prevState = { ...this.state };
+      this.state[key] = newState;
+      state[this.key] = { ...this.state };
+      this.forceUpdate(Element);
+    }; 
+    const returnKey = key;
+    return [this.state[key], setState, returnKey];
+  }
 
-    };
-    var preRender: boolean;
-    /**
-     * @type {Object}
-     * @description The file object
-     * @property {string} name - The name of the file
-     * @property {string} filetype - The type of the file
-     * @property {string} dataUrl - The data url of the file
-     * @property {string} text - The text content of the file
-     * @property {string} fileUrl - The file url
-     * @property {number} filesize - The file size
-     * @property {Blob} blob - The file blob
-     * @property {number} lastModified - The last modified date
-     * @property {string} mimetype - The file mimetype
-     */
-     
-    const requirePath: (path: string) => any;
+  useFetch(url, options) {
+    const { key } = options;
 
-    const useFile: (file: string) => {
-        name: string,
-        type: string,
-        lastModified:{
-            date: string,
-            time: string,
-            parsed: string,
-        },
-        size: number,
-        fileContent: string,
+    console.log(key);
+    if (!key) {
+        throw new Error(`You must supply a key for the affected element in the options object`);
     }
-       /**
-     * @description HTMLTextNode is a global interface that represents a text node
-     */
 
-    interface HTMLTextNode{
-        nodeType: number,
-        textContent: string,
-        toString: () => string,
-    }
-       /**
-     * @description HTMLElement is a global interface that represents an HTML element
-     */
-    interface HTMLElement{
-        tagName: string,
-        id: string, 
-        nodeType: number,
-        classList:{
-            add: (className: string) => void,
-            remove: (className: string) => void,
-            toggle: (className: string) => void,
-            contains: (className: string) => boolean,
-        }
-        props: {
-            [key: string]: string,
-        }
-        children: HTMLElement[],
-        outerHTML: string,
-        innerHTML: string, 
-        textContent: string,
-        firstChild: HTMLElement | HTMLTextNode | null,
-        style?: {
-            
-            display: string,
-            position: string,
-            top: string,
-            left: string,
-            right: string,
-            bottom: string,
-            width: string,
-            height: string,
-            maxWidth: string,
-            maxHeight: string,
-            minWidth: string,
-            minHeight: string, 
-            margin: string,
-            marginTop: string,
-            marginRight: string,
-            marginBottom: string,
-            marginLeft: string, 
-            padding: string, 
-            paddingTop: string,
-            paddingRight: string,
-            paddingBottom: string,
-            paddingLeft: string,  
-            overflow: string,
-            zIndex: string,
-            cursor: string,
-            textAlign: string,
-            fontSize: string,
-            fontWeight: string,
-            fontStyle: string,
-            textDecoration: string,
-            lineHeight: string,
-            letterSpacing: string,
-            textTransform: string,
-            backgroundColor: string,
-            backgroundImage: string,
-            backgroundSize: string,
-            backgroundPosition: string,
-            backgroundRepeat: string,
-            backgroundAttachment: string,
-            backgroundClip: string,
-            backgroundOrigin: string,
-            backgroundBlendMode: string,
-            boxShadow: string,
-            transition: string,
-            transform: string,
-            transformOrigin: string,
-            transformStyle: string,
-            perspective: string,
-            perspectiveOrigin: string,
-            backfaceVisibility: string,
-            filter: string,
-            backdropFilter: string,
-            mixBlendMode: string,
-            border: string,
-            borderTop: string,
-            borderRight: string,
-            borderBottom: string,
-            borderLeft: string,
-            borderStyle: string,
-            borderTopStyle: string,
-            borderRightStyle: string,
-            borderBottomStyle: string,
-            borderLeftStyle: string,
-            borderColor: string,
-            borderTopColor: string,
-            borderRightColor: string,
-            borderBottomColor: string,
-            borderLeftColor: string,
-            borderRadius: string,
-            borderTopLeftRadius: string,
-            borderTopRightRadius: string,
-            borderBottomRightRadius: string,
-            borderBottomLeftRadius: string,
-            borderWidth: string,
-            borderTopWidth: string,
-            borderRightWidth: string,
-            borderBottomWidth: string,
-            borderLeftWidth: string, 
-            
-            [key: string]: string,
-        } 
-        attributes: {
-            [key: string]: string,
-        },
-        events: [],
-        toString: () => string,
-        getAttribute: (attr: string) => string | null, 
-        setAttribute: (attr: string, value: string) => void,
-        appendChild: (child: HTMLElement) => void,
-        prepend: (child: HTMLElement) => void,
-        append: (...child: HTMLElement[]) => void,
-        insertBefore: (node1: HTMLElement, node2: HTMLElement) => void,
-        removeChild: (child: HTMLElement) => void,
-        querySelector: (selector: string) => HTMLElement | null,
-        querySelectorAll: (selector: string) => HTMLElement[], 
-    }
-} 
-let states = []
+    const loadingKey = "loading_" + url;
+    const errorKey = "error" + url;
+    const dataKey = "_data" + url;
 
-export const useState = (initialState: any) => {
-    let state = initialState
-    let setState = (newState: any) => {
-        state = newState
-    }
-    states.push({state, setState})
-    return [state, setState]
-}
+    // Initialize loading to false if loadingKey doesn't exist in state
+    const loading = state[this.key][loadingKey] !== undefined ? state[this.key][loadingKey] : true;
+    const error = state[this.key][errorKey] || null;
+    const data = state[this.key][dataKey] || null;
 
-export const useReducer = (reducer: any, initialState: any) => {
-    let state = initialState
-    let dispatch = (action: any) => {
-        state = reducer(state, action)
-    }
-    states.push({state, dispatch})
-    return [state, dispatch]
-}
-let refs = [] 
-   
+    if (loading && !error && !data) {
+        state[this.key][loadingKey] = true;
 
-export const useRef = <T>(defaultValue: T) => {
-    if(!globalThis.isNotFirstRun) {
-        console.warn(`⚠️  Note: useRef in the server environment  will not work like it does in the client, you cannot  store the reference in a variable within mounted!
-        `)
+        fetch(url, options)
+            .then((res) => res.json())
+            .then((data) => {
+                state[this.key][dataKey] = data;
+                state[this.key][loadingKey] = false;
+                this.forceUpdate(key);
+            })
+            .catch((err) => {
+                state[this.key][errorKey] = err;
+                state[this.key][loadingKey] = false;
+                this.forceUpdate(key);
+            });
     }
-    let refKey = "${Math.random().toString(36).substring(7).replace('.', '').replace('\d', '')}"
-    let ref = {name: refKey, current: defaultValue}
-    refs.push(ref)
-    return ref
-}
- 
-/**
- * @description The mounted function is called when the component is mounted based on pregenerated keys
- * @param callback {Function}
- * @param parent {Function}
- */
-export const Mounted = (callback: Function, parent: Function) => {
-    callback()
+
+    return [data, loading, error];
 }
- 
-let effects = []
- /**
-     * Use this to perform DOM mutations. This is the primary method you use to update the user interface in response to event handlers and server responses. 
-     * Prefer the standard `useEffect` when possible to avoid blocking visual updates.
-     */
 
-export const useEffect = (callback: Function, dependencies: any[]) => {
-    if(!effects.includes(callback)){
-        effects.push({callback, dependencies})
+
+  forceUpdate(key) { 
+    //@ts-ignore
+    let el = Array.from(document.querySelectorAll("*")).filter((el2: any) =>{ return el2.key === key})[0]; 
+    let newl = this.parseToElement(this.render());    
+    if(newl.key !== key){  
+      //@ts-ignore 
+      newl = Array.from(newl.children).filter((el2) => el2.key === key)[0];
+    } 
+    if (this.Reconciler.shouldUpdate(el, newl)) {
+       el.replaceWith(newl);
     }
-    let deps = effects.find((effect: any) => effect.callback === callback).dependencies
-    if(deps){
-        deps.forEach((dep: any) => {
-            if(dep !== dependencies[0]){
-                callback()
-            }
-        })
-    }else{
-        callback() 
+  }
+  Reconciler = {
+     shouldUpdate(oldElement, newElement) {
+       if(oldElement.outerHTML === newElement.outerHTML){
+          return false;
+       }
+       let attributes = oldElement.attributes;
+        let newAttributes = newElement.attributes;
+      for (let i = 0; i < attributes.length; i++) {
+        let attribute = attributes[i];
+        if (attribute.name === "key") {
+          continue;
+        }
+        if (attribute.name === "class") {
+          if (attribute.value !== newElement.className) {
+            return true;
+          }
+          continue;
+        }
+        if (attribute.value !== newAttributes[attribute.name]) {
+          return true;
+        }
+      }
+      return true;
     }
-}
-
-globalThis.window = {
-    location: {
-        href: '',
-        pathname: '',
-        search: '',
-        hash: '',
-        host: '',
-        hostname: '',
-        port: '',
-        protocol: '',
-        origin: '',
-        reload: () => {}
-    },
-    history: {
-        pushState: (state: any, title: string, url: string) => {},
-        replaceState: (state: any, title: string, url: string) => {},
-        go: (delta: number) => {},
-        back: () => {},
-        forward: () => {},
-    },
-    localStorage: {
-        getItem: (key: string) => '',
-        setItem: (key: string, value: string) => {},
-        removeItem: (key: string) => {},
-        clear: () => {},
+  }; 
+   
+  parseToElement = (element: any) => { 
+    if(!element) return document.createElement("div");
+    let el = document.createElement(element.type);
+    let isText = typeof element === "string" || typeof element === "number" || typeof element === "boolean";
+    if (isText) {
+      el.textContent = element;
+    } else {
+      let attributes = element.props;
+      let children = element.children;
+      for (let key in attributes) {
+        if(key === "key"){ 
+          el.key = attributes[key];
+          continue;
+        }
+        if (key === "className") {
+          el.className = attributes[key];
+          continue;
+        }
+        if (key === "style") {
+          for (let styleKey in attributes[key]) {
+            el.style[styleKey] = attributes[key][styleKey];
+          }
+          continue;
+        }
+        //@ts-ignore
+        if (key.startsWith("on")) { 
+          console.log(key.substring(2).toLowerCase());
+          el.addEventListener(key.substring(2).toLowerCase(), attributes[key]);
+          continue;
+        }
+        el.setAttribute(key, attributes[key]);
+      }
+      for (let i = 0;i < children.length; i++) {
+        let child = children[i];
+        if (Array.isArray(child)) {
+          child.forEach((c) => {
+            el.appendChild(this.parseToElement(c));
+          });
+        }
+        if(typeof child === "function"){
+          el.appendChild(this.parseToElement(child()));
+        }else
+        if (typeof child === "object") {
+        el.appendChild(this.parseToElement(child));
+        }else{ 
+           let span = document.createElement("span");
+            span.innerHTML = child;
+            el.appendChild(span);
+        }
+      }
     }
+    return el;
+  };
+  e(element: string | Function, props: any, ...children: any[]) {
+    if(typeof element === "function"){
+      return element();
+    }
+    return { type: element, props: props || {}, children: children || [] };
+  }
+  toElement() { 
+    let children = this.render();
+    let el = this.parseToElement(children);
+    return el;
+  }
+  render() {
+    return "";
+  }
 }
-
-export const render = (element: any, container: any) => {
-    container.appendChild(element)
+ 
+export function render(element: any, container) {
+  if (isClassComponent(element)) {
+    const instance = new element();  
+    instance.Mounted = true;  
+    let el = instance.toElement();  
+    instance.element = el;  
+    container.innerHTML = ""; 
+    container.replaceWith(el);
+  } else {
+    const newInstance = new Component;
+    element = element.bind(newInstance);
+    newInstance.render = element; 
+    newInstance.Mounted = true;
+    let el = newInstance.toElement(); 
+    newInstance.element = el;
+    container.innerHTML = "";   
+    container.replaceWith(el);
+  }
 }
-export default  Element
+