vaderjs 1.4.1-lv56aadeg5 → 1.4.2

package/client/runtime/router.js

@@ -0,0 +1,235 @@
+/**
+ * @fileoverview - A simple router for vaderjs - Kuai
+ * @version - 1.0.0
+ */
+export class Kuai{
+    constructor(config = { container: '#app'}){
+        this.routes = [];
+        this.middleware = [];
+        this.container =  config.container ? config.container : document.getElementById('app');
+        this.renderPlugins = [];
+    }
+  
+    res = {
+        /** 
+         * @description render text to the container
+         * @param {string} data 
+         */
+        text: (data) => {
+            this.container.innerHTML = data;
+        },
+        /**
+         * @method html
+         * @description render html to the container
+         * @param {any} data 
+         * @returns 
+         */
+        html: (data) => {
+            switch(typeof data){
+                case 'function':
+                    if(this.renderPlugins.length > 0){
+                        this.renderPlugins.forEach((plugin) => {
+                            if(plugin.for === 'html'){
+                                console.log('Plugin', plugin)
+                                plugin.plugin(data, this.container)
+                            }
+                        })
+                        return;
+                    }
+                    this.container.innerHTML = data();
+                    break;
+                case 'string':
+                    this.container.innerHTML = data;
+                    break;
+            } 
+  
+        },
+        /**
+         * @method json
+         * @description render json to the container
+         * @param {Object} data 
+         */
+        json: (data) => {
+            this.container.innerHTML =  `<Oject data=${JSON.stringify(data)}></Object>`
+        }
+    }
+    req = {
+        /**
+         * @method navigate
+         * @description - navigate to a new route
+         * @param {string} path 
+         */
+        navigate: (path) => {
+            window.history.pushState({}, '', path);
+            let currentPath = this.match(window.location.pathname.replace('/index.html', ''))
+            if(currentPath){
+                this.currentRoute = currentPath.path
+                currentPath.callback(this.res, currentPath.params, this.extractQueryParams(window.location.search));
+            }
+        },
+        /**
+         * @method back
+         * @description - go back to the previous route
+         */
+        back: () => {
+            window.history.back();
+        },
+
+        /**
+         * @method forward
+         * @description - go forward to the next route
+         * @returns {void}
+         * **/
+        forward: () => {
+            window.history.forward();
+        },
+        url: window.location
+    }
+    /**
+     * @private
+     */
+    extractQueryParams(path){
+        let params = new URLSearchParams(path);
+        let query = {};
+        for(let param of params){
+            query[param[0]] = param[1];
+        }
+        return query;
+    }
+     /**
+     * @private
+     */
+    extractParams(routePath, currentPath){
+        const routeParts = routePath.split('/').filter((part) => part !== '');
+        const hashParts = currentPath.split('/').filter((part) => part !== ''); 
+        const params = {};
+        routeParts.forEach((part, index) => {
+          if (part.startsWith(':')) {
+            const paramName = part.slice(1);
+            params[paramName] = hashParts[index];
+          }else if(part.startsWith('*')){ 
+            let array = hashParts.slice(index)
+            array.forEach((i, index)=>{
+              params[index] = i
+            })
+          };
+        });
+        return params;
+    }
+    use(path, middleware){
+        this.middleware.push({path, middleware}); 
+    }
+    /**
+     * @method usePlugin
+     * @description - add a plugin to handle how the route should be rendered
+     * @param {Function} plugin 
+     * @param {('html')} method 
+     */
+    usePlugin(plugin, method){
+        this.renderPlugins.push({plugin, for: method})
+    }
+    /**
+     * @method match
+     * @description - match a route to the current path and return the route object
+     * @param {string} route 
+     * @returns  {Object} -  {path: string, callback: Function, params: Object}
+     */
+    match(hash){
+        hash = hash.endsWith('/') ? hash.slice(0, -1) : hash;  
+        hash.includes('index.html') ? hash = hash.replace('index.html', '') : null;
+        if(hash.includes('?')){
+          hash = hash.split('?')[0]
+       } 
+        let route = this.routes.find((route) => {  
+          if (route.path === hash) { 
+            return true;
+          }
+  
+          if(hash === '' && route.path === '/'){
+            return true
+          }
+      
+          
+          if (route.path.includes('*') || route.path.includes(':')) {
+            const routeParts = route.path.split('/').filter((part) => part !== ''); 
+            const hashParts = hash.split('/').filter((part) => part !== '');  
+              if(this.basePath){
+                  hashParts.shift();
+              } 
+            if (routeParts.length !== hashParts.length && !route.path.endsWith('*')) { 
+              return false;
+            }
+      
+            for (let index = 0; index < routeParts.length; index++) {
+              const routePart = routeParts[index];
+              const hashPart = hashParts[index];
+               
+      
+              if (routePart.startsWith(':') || routePart.startsWith('*')) {
+                 
+                continue;
+              }
+      
+              if (routePart !== hashPart) { 
+                return false;
+              }
+            } 
+       
+  
+            return true;
+          }  
+          
+        });  
+        if(route){
+          let params = this.extractParams(route.path, hash)
+          return { ...route, params}
+        }
+        return null;
+   
+    }
+  
+    /**
+     * @description - create a new route
+     * @param {string} path 
+     * @param {Function} callback 
+     */
+    get(path, callback){
+        this.routes.push({path, callback});
+    }
+  
+    /**
+     * @method listen
+     * @description - listen for route changes
+     */
+    listen(){ 
+        let currentPath = this.match(window.location.pathname.replace('/index.html', '')) 
+        if(currentPath){
+            this.middleware.forEach((middleware) => {
+                if(middleware.path === currentPath.path){
+                    middleware.middleware();
+                }
+            });
+            this.currentRoute = currentPath.path
+            let obj = {
+                ...this.res,
+                res: this.res,
+                req:{
+                    ...this.req,
+                    params: (param) => currentPath.params[param]
+                
+                }
+            }
+            currentPath.callback(obj);
+        }
+        window.onpopstate = () => {
+            let currentPath = this.match(window.location.pathname.replace('/index.html', ''))
+            if(currentPath){
+                this.currentRoute = currentPath.path
+                currentPath.callback(this.res, currentPath.params, this.extractQueryParams(window.location.search));
+            }
+        }
+    
+    }
+  }
+  
+  export default Kuai;

package/config/index.ts

@@ -0,0 +1,68 @@
+/**
+ * @description Instruct the compiler to use the provided configuration
+ * @typedef {Object} Config
+ * @property {string} target - The target environment
+ * @property {Object} host - The host object
+ * @property {string} host.hostname - The hostname of the application
+ * @property {string} host.provider - The provider of the application
+ * @property {Object} compilerOptions - The compiler options
+ * @property {string} compilerOptions.outDir - The output directory
+ * @property {string} compilerOptions.target - The target of the compiler
+ * @property {any[]} plugins - The plugins to be used in the application
+ * @property {string} mode - The mode of the application
+ * @param config  - The configuration object 
+ * @returns 
+ */
+/**
+ * Defines the configuration options for VaderJS.
+ * @param {Object} config - The configuration object.
+ * @param {string} config.target - The target platform for the code ('web' or 'bun').
+ * @param {Object} [config.host] - The host configuration.
+ * @param {string} [config.host.hostname] - The hostname for the host.
+ * @param {('vercel','netlify')} [config.host.provider] - The provider for the host ('vercel', 'netlify', 'aws', 'azure', 'gcp').
+ * @param {number} [config.host.port] - The port number for the host.
+ * @param {Object} [config.compilerOptions] - The compiler options.
+ * @param {string} [config.compilerOptions.outDir] - The output directory for the compiled code.
+ * @param {string} [config.mode] - The mode for the configuration.
+ * @param {Array} [config.plugins] - The plugins for the configuration.
+ * @param {Object} [config.env] - The environment variables for the configuration.
+ * @returns {Object} The configured object.
+ */
+export const defineConfig = (config: { 
+    /**
+     * @type {string}
+     * @param {('web'|'bun')} target
+     */
+    target:string,
+    host?: {
+        hostname?: string,
+        /**
+         * @param {('vercel', 'netlify', 'aws', 'azure', 'gcp')} provider
+         */
+        provider?: string,
+        port?: number
+    },
+    compilerOptions?: {
+        outDir?: string, 
+    },
+    mode?: string,
+    plugins?: any[]
+    env?: {
+        [key: string]: any
+    }
+}) => {
+    // add config.env to globalThis.env
+    let env = {}
+    if(config.env){
+        for(let key in config.env){
+            env[key] = config.env[key]
+        }
+        for(let key in globalThis.env){
+            env[key] = globalThis.env[key]
+        }
+    }
+
+    //@ts-ignore
+    globalThis.env = env
+    return config
+}

package/index.ts

@@ -0,0 +1,344 @@
+//@ts-nocheck
+import {Element} from 'vaderjs/binaries/Kalix'
+import React from 'react'
+export const Vader = {
+    version: "0.0.1",
+}
+ 
+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
+    }
+    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,
+    }
+    var localStorage: {
+        getItem: (key: string) => string,
+        setItem: (key: string, value: string) => void,
+        removeItem: (key: string) => void,
+        clear: () => void,
+    }
+    /**
+     * @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
+     */
+    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,
+        },
+
+    };
+    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;
+
+    const useFile: (file: string) => {
+        name: string,
+        type: string,
+        lastModified:{
+            date: string,
+            time: string,
+            parsed: string,
+        },
+        size: number,
+        fileContent: string,
+    }
+       /**
+     * @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 = []
+
+export const useState = (initialState: any) => {
+    let state = initialState
+    let setState = (newState: any) => {
+        state = newState
+    }
+    states.push({state, setState})
+    return [state, setState]
+}
+
+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 = [] 
+   
+
+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!
+        `)
+    }
+    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()
+}
+ 
+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})
+    }
+    let deps = effects.find((effect: any) => effect.callback === callback).dependencies
+    if(deps){
+        deps.forEach((dep: any) => {
+            if(dep !== dependencies[0]){
+                callback()
+            }
+        })
+    }else{
+        callback() 
+    }
+}
+
+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: () => {},
+    }
+}
+
+export const render = (element: any, container: any) => {
+    container.appendChild(element)
+}
+export default  Element

package/package.json

@@ -1,36 +1,25 @@
 {
   "name": "vaderjs",
-  "description": "A Reactive library aimed to helping you build reactive applications inspired by react.js",
-  "module": "vader.js",
-  "version": "1.4.1-lv56aadeg5",
-  "bin": {
-    "vader": "./vader.js"
+  "description": "A reactive framework for building fast and scalable web applications",
+  "version": "1.4.2",
+  "main": "vader.js",
+  "author": {
+    "name": "Malikwhitten67",
+    "email": "malikwhitterb@gmail.com"
   },
-  "keywords": [
-    "react",
-    "reactive",
-    "nextjs",
-    "pages router",
-    "bun.js",
-    "severside generation",
-    "spa",
-    "vanillajs",
-    "vanilla js"
-  ],
-  "type": "module",
   "license": "MIT",
-  "homepage": "https://vader-js.pages.dev",
   "repository": {
     "type": "git",
     "url": "https://github.com/Postr-Inc/Vader.js"
   },
-  "author": {
-    "name": "Malik Whitten",
-    "email": "malikwhitterb@gmail.com"
+  "type": "module",
+  "bin":{
+    "vader":"./vader.js"
+  },
+  "dependencies": {
+    "ws": "latest"
   },
-  "dependencies": { 
-    "playwright": "latest",  
-    "source-map": "latest",
+  "devDependencies": { 
     "ws": "latest"
   }
-}
+}