vaderjs 1.4.2-yml56 → 1.4.3

package/client/index.d.ts

@@ -1,226 +0,0 @@
-//@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

@@ -1,417 +0,0 @@
-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