vaderjs 1.4.1-lv56aadeg5 → 1.4.2

package/client/index.d.ts

@@ -0,0 +1,226 @@
+//@ts-nocheck
+declare namespace Vader{
+    export let useState: <T>(initialState: T) => [T, (newState: T) => void];
+    export let useReducer: <T>(reducer: (state: T, action: any) => T, initialState: T) => [T, (newState: T) => void];
+    export const useRef: <T>(initialValue: T | null) => { current: T | null };
+    export const Mounted: (fn: () => void) => void;
+} 
+declare global {
+    /**
+     * @type {boolean}
+     * @description A boolean value that returns true if the current environment is a server
+     */
+    const isServer: boolean
+    /**
+     * @type {boolean}
+     * @description Default(true) - A boolean value that lets you opt out of prerendering (Only applies towards using the vaderjs serverside )
+     */
+    var preRender: boolean
+ 
+   
+       /**
+     * @description HTMLTextNode is a global interface that represents a text node
+     */
+
+    interface HTMLTextNode {
+        nodeValue: string;
+        nodeType: number;
+        tagName: string;
+        props:{nodeValue: string};
+        toString: () => string; 
+        insertBefore: (child: HTMLTextNode, ref: HTMLTextNode) => void;
+    }
+       /**
+     * @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; 
+        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[]; 
+    }
+} 
+interface LastModified {
+    date: string;
+    time: string;
+    parsed: string;
+}
+ /**
+     * @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 {LastModified} lastModified - The last modified date
+     * @property {string} mimetype - The file mimetype
+     */
+interface File {
+    name: string;
+    filetype: string;
+    dataUrl: string;
+    fileUrl: string;
+    filesize: number;
+    lastModified: LastModified;
+    mimetype: string;
+}
+
+/**
+ * @description Returns a stateful value, and a function to update it.
+ * @template T
+ * @param {T} initialState - The initial state value.
+ * @returns {[T, (newState: T) => void]} - A tuple containing the current state value and a function to update the state.
+ * @see https://react.dev/reference/react/useState
+ */
+
+declare const useState: <T>(initialState: T) => [T, (newState: T) => void];
+
+ /**
+     * An alternative to `useState`.
+     *
+     * `useReducer` is usually preferable to `useState` when you have complex state logic that involves
+     * multiple sub-values. It also lets you optimize performance for components that trigger deep
+     * updates because you can pass `dispatch` down instead of callbacks.
+     * 
+     * @see https://react.dev/reference/react/useReducer
+     */
+
+declare const useReducer: <T>(reducer: (state: T, action: any) => T, initialState: T) => [T, (newState: T) => void];
+ /**
+     * `useRef` returns a mutable ref object whose `.current` property is initialized to the passed argument
+     * (`initialValue`). The returned object will persist for the full lifetime of the component.
+     *
+     * Note that `useRef()` is useful for more than the `ref` attribute. It’s handy for keeping any mutable
+     * value around similar to how you’d use instance fields in classes.
+     * 
+     * @see https://react.dev/reference/react/useRef
+     */
+ declare const useRef: <T>(initialValue: T | null) => { 
+    current: T extends null ? HTMLElement : T;
+}; 
+
+ /**
+     * Accepts a function that contains imperative, possibly effectful code.
+     *
+     * @param {Function} fn Imperative function that can  be ran once the component is mounted - (does not apply when running on the server)
+     * @returns {void}
+     */
+
+declare function Mounted(fn: Function): void; 
+export { useState, useReducer, useRef, useFile, Mounted, require }
+
+
+
+ 

package/client/runtime/index.js

@@ -0,0 +1,417 @@
+window.vader = {
+    version: '1.0.0'
+}
+globalThis.isServer = false
+window.hasRan = []
+globalThis.memoizedFunctions = []
+const memoizedRefs = []
+/**
+ * @description This function is used to calculate the difference between two nodes - and return the elements in which the difference is found
+ * @param {HTMLElement} oldNode 
+ * @param {HTMLElement} newNode 
+ * @returns 
+ */
+function calculateDiff(oldNode, newNode){  
+    if(oldNode === undefined || newNode === undefined){
+        return []
+    }
+    let diff = [] 
+    if(oldNode?.children.length > 0){
+        for(var i = 0; i < oldNode.children.length; i++){  
+             diff.push(...calculateDiff(oldNode.children[i], newNode.children[i]))
+             
+        } 
+        return diff
+    } 
+       if(!oldNode?._isRoot){  
+        if(oldNode.nodeType === 3 && oldNode.nodeValue !== newNode.nodeValue){
+            diff.push({type: 'REPLACE', oldNode, newNode})
+        }
+        else if(oldNode.nodeType === 1 && oldNode.innerHTML !== newNode.innerHTML
+        ){
+            diff.push({type: 'REPLACE', oldNode, newNode})
+        }
+        else if(oldNode.nodeType === 1 && oldNode.tagName === newNode.tagName){
+            for(var i = 0; i < oldNode.attributes.length; i++){
+                if(oldNode.attributes[i].value !== newNode.attributes[i].value){
+                    diff.push({type: 'PROPS', oldNode, newNode})
+                }
+            }
+        }
+    } 
+
+     
+
+    return diff
+}
+ 
+/**
+ *  @description This function is used to generate functonal components
+ * @param {Function} tag 
+ * @param {Object} props 
+ * @param  {...any} children 
+ * @returns  {Object} - The first child of the functional component
+ */
+function generateJSX(tag, props, ...children){ 
+   let node = {
+     state: {},
+     mainFunction: tag,
+     _key: tag.name || Math.random().toString(36).substring(7),
+     $$typeof: 'JSX_CHILD',
+     firstChild:null,
+     children: children,
+     _name: tag.name,
+   } 
+   
+    node.firstChild = tag() 
+    node.firstChild.htmlNode._key =  node._key
+    node.firstChild.htmlRoot = node
+    node.firstChild.htmlNode._isRoot = true 
+    node.firstChild.props = props || {}  
+    node.firstChild._isRoot = true
+    node.firstChild._key = node._key
+    node.firstChild.props['key'] = node._key 
+    return  node.firstChild
+    
+
+}
+function handleStyles(styles, nodeEl) { 
+
+    for (let key in styles) {
+        if(typeof styles[key] === 'object'){
+            handleStyles(styles[key], nodeEl)
+        }
+        nodeEl.style[key] = styles[key];
+    }
+ 
+}
+
+
+let hasBeenCalled = []
+/**
+ * @description Create a virtual DOM element
+ * @param {string | Function} tag 
+ * @param {Object} props 
+ * @param  {...any} children 
+ * @returns  {Object} - The virtual DOM element
+ */
+function Element(tag, props, ...children){
+    !props ? props = {} : null
+    if(!props?.['$$key']){
+        props['$$key'] = tag.name || Math.random().toString(36).substring(7)
+    }
+
+    if(typeof tag === 'function'){ 
+       return generateJSX(tag, props, children) 
+    }
+    let node = {
+        tag: tag,
+        props: props,
+        children: children, 
+        _key: props['$$key'],
+        events: [],
+        staticEl: document.createElement(tag),
+        parentNode: null
+    }
+    for(var i = 0; i < children.length; i++){
+      if(typeof children[i] === 'string' || typeof children[i] === 'number'){
+        children[i] = {
+          tag: 'TEXT_ELEMENT',
+          props: {nodeValue: children[i]},
+          _key: props['$$key'],
+          parentNode: {tag: tag, props: props, children: children, _key: props['$$key']},
+          children: []
+        }
+      }else{
+          if(children[i]){
+            children[i].parentNode = {tag: tag, props: props, children: children}
+          }
+      }
+    }  
+    let nodeEl = node.tag === 'TEXT_ELEMENT' ? document.createTextNode('') : document.createElement(node.tag)
+    node.staticEl = nodeEl
+     
+    for(var key in props){ 
+       if(key.toLowerCase().startsWith('on')){  
+         nodeEl.addEventListener(key.substring(2).toLowerCase(), props[key])
+         node.events.push({type: key.substring(2).toLowerCase(), listener: props[key]}) 
+         continue
+       }  
+       if(key === '$$key' && !nodeEl._key && nodeEl.nodeType === 1
+       ){
+          Object.defineProperty(nodeEl, '_key', {
+            value: props[key],
+            writable: true
+          })
+          continue
+       }
+
+        if(nodeEl && nodeEl.nodeType === 1){
+            nodeEl.setAttribute(key, props[key])
+        }
+    
+    }
+    if(props.style){
+        handleStyles(props.style, nodeEl)
+    }
+
+    if(props.id){
+        nodeEl.id = props.id
+    }
+    if(props.ref){
+       switch(true){
+        case Array.isArray(props.ref.current):
+            if(!props.ref.current.find((el) => el === nodeEl)){
+                props.ref.current.push(nodeEl)
+            }
+            break;
+        case props.ref.current === HTMLElement:
+            props.ref.current = nodeEl
+            break;
+        case props.ref.current === null:
+            props.ref.current = nodeEl
+            break;
+        case typeof props.ref === 'function' && !window.hasRan.includes(props.ref):
+            window.hasRan.push(props.ref)
+            props.ref(nodeEl)
+            setTimeout(() => {
+                window.hasRan.filter((el) => el !== props.ref)
+            }, 0)
+            break;
+        default:
+            props.ref.current = nodeEl
+            break;
+
+       }
+    }
+    node['htmlNode'] = nodeEl
+      
+      
+    if(nodeEl.nodeType === 1){
+    for(var i = 0; i < children.length; i++){
+      if(children[i]){
+        if(children[i].tag === 'TEXT_ELEMENT'){
+            nodeEl.appendChild(document.createTextNode(children[i].props.nodeValue))
+        } 
+        nodeEl.appendChild(Element(children[i].tag, children[i].props, ...children[i].children).htmlNode)
+      }
+    }
+ 
+}
+   
+    return node;
+}
+ 
+
+function handleDiff(diff){
+    for(var i = 0; i < diff.length; i++){
+       switch(true){
+              case diff[i].type === 'REPLACE' && !diff[i].oldNode._isRoot:
+                let parent = diff[i].oldNode.parentNode  
+                diff[i].oldNode.parentNode.replaceChild(diff[i].newNode, diff[i].oldNode)
+                break;
+              case diff[i].type === 'PROPS': 
+                break;
+       }
+    }
+
+}
+let states = {}
+export const useState = (name,   initialValue)  => {}
+export function useRef(name,  initialValue){
+    let ref = initialValue
+    if(!memoizedRefs.find((el) => el.name === name)){
+        memoizedRefs.push({name, ref})
+    }
+    let getRef = () =>  memoizedRefs.find((el) => el.name === name).ref 
+    let setRef = (newValue) => { 
+        memoizedRefs.find((el) => el.name === name).ref = newValue  
+    }   
+    return  {
+        current: getRef(),
+        name,
+    }
+}
+export function Mounted(fn, node){ 
+    let el = Array.from(document.querySelectorAll('*')).find((el) =>  el._key ===  memoizedFunctions.find((el) => el.mainFunction === node)._key)
+    if(el && !hasBeenCalled.find((el) => el === node)){
+        fn()
+        hasBeenCalled.push(node)
+    }
+    else{
+        setTimeout(() => {
+            Mounted(fn, node)
+        }, 0)
+    }
+}
+ 
+ 
+let effects = []; 
+
+export function  useEffect(fn, deps){ 
+    if(!effects.find((el) => el.fn.toString() === fn.toString())){
+        effects.push({fn, deps})
+    }
+    else{
+        let effect = effects.find((el) => el.fn.toString() === fn.toString())
+        if(effect.deps.toString() !== deps.toString()){
+            effect.deps = deps
+            effect.fn()
+        }
+    }
+    return () => {
+        effects = effects.filter((el) => el.fn !== fn)
+    }
+
+}
+export function useReducer(name, reducer, vnode, initialState){
+    let [state, setState] = useState(name, vnode, initialState)
+    let dispatch = (action) => {
+        let newState = reducer(state, action)
+        setState(newState)
+    }
+
+    return  [state, dispatch]
+
+}
+
+class Component {
+    constructor(props){
+        this.props = props
+        this._key = props['$$key'] || Math.random().toString(36).substring(7)
+        this.state = {}
+        this.htmlNode = null
+        this.firstChild = null
+        this.Element = Element
+    }
+
+
+    setState(newState){
+        this.state = newState
+    }
+
+    handleDiff(diff){
+        for(var i = 0; i < diff.length; i++){
+           switch(true){
+                  case diff[i].type === 'REPLACE' && !diff[i].oldNode._isRoot:
+                    let parent = diff[i].oldNode.parentNode 
+                    diff[i].oldNode.parentNode.replaceChild(diff[i].newNode, diff[i].oldNode)
+                    break;
+                  case diff[i].type === 'PROPS': 
+                    break;
+           }
+        }
+    }
+    calculateDiff(oldNode, newNode){
+        if(oldNode === undefined || newNode === undefined){
+            return []
+        }
+        let diff = [] 
+        if(oldNode?.children.length > 0){
+            for(var i = 0; i < oldNode.children.length; i++){  
+                 diff.push(...this.calculateDiff(oldNode.children[i], newNode.children[i]))
+                 
+            } 
+            return diff
+        } 
+           if(!oldNode?._isRoot){  
+            if(oldNode.nodeType === 3 && oldNode.nodeValue !== newNode.nodeValue){
+                diff.push({type: 'REPLACE', oldNode, newNode})
+            }
+            else if(oldNode.nodeType === 1 && oldNode.innerHTML !== newNode.innerHTML
+            ){
+                diff.push({type: 'REPLACE', oldNode, newNode})
+            }
+            else if(oldNode.nodeType === 1 && oldNode.tagName === newNode.tagName){
+                for(var i = 0; i < oldNode.attributes.length; i++){
+                    if(oldNode.attributes[i].value !== newNode.attributes[i].value){
+                        diff.push({type: 'PROPS', oldNode, newNode})
+                    }
+                }
+            }
+        } 
+
+         
+
+        return diff
+    }
+    useState(name,   initialValue){
+        if(!this.state[name]){
+            this.state[name] = initialValue
+        } 
+        
+        let getState = () => this.state[name]
+        let setState = (newValue) => { 
+            let dEl =  this.firstChild.htmlNode 
+            if(dEl.tagName === 'HTML'){
+                let firstChild = dEl.querySelector('body').firstChild
+                dEl = firstChild
+            } 
+            this.state[name] = newValue 
+            let el = Array.from(document.querySelectorAll('*')).find((el) =>{  
+                return el._key === dEl._key
+            })  
+            let diff = calculateDiff(el, this.render().htmlNode.tagName === 'HTML' ? this.render().htmlNode.querySelector('body').firstChild : this.render().htmlNode) 
+            handleDiff(diff)
+            
+        }  
+        return  [getState, setState] 
+
+    }
+    useEffect = useEffect
+    useReducer(name, reducer, initialState){
+        let [state, setState] = this.useState(name, initialState)
+        let dispatch = (action) => {
+            let newState = reducer(state(), action) 
+            setState(newState)
+        }
+
+        return  [state, dispatch]
+    }
+
+    render(){
+        return null
+    }
+
+}
+ 
+export async function render(vnode, container, ...passProps){  
+    
+    if(!vnode){
+        throw new Error('No vnode was provided')
+    }
+    // create an object for the node then bind to firstChild 
+    let comp = new Component({$$key:  vnode.name || Math.random().toString(36).substring(7)}) 
+    vnode = vnode.bind(comp)
+    comp.render = () =>   {  
+        return vnode(...passProps)
+    }
+     
+    comp.firstChild = comp.render()
+
+    if(comp.firstChild.htmlNode.tagName === 'HTML'){
+        let hasHead = comp.firstChild.htmlNode.querySelector('head') ? true : false
+        let hasBody = comp.firstChild.htmlNode.querySelector('body') ? true : false
+        
+        if(hasHead){
+             document.head.innerHTML = comp.firstChild.htmlNode.querySelector('head').innerHTML 
+             comp.firstChild.children = comp.firstChild.children.filter((el) =>{
+                    return el.htmlNode.tagName !== 'HEAD'
+             })
+        }
+        if(hasBody){ 
+            comp.firstChild.children = comp.firstChild.children.filter((el) =>{
+                if(el.htmlNode.tagName == 'BODY'){
+                    comp.firstChild = el.children[0]
+                }
+            })
+        } 
+      }
+      container.innerHTML = ''
+      
+      container.appendChild(comp.firstChild.htmlNode)
+   
+   
+}
+ 
+export default Element