native-document 1.0.0

package/src/router/modes/HashRouter.js

@@ -0,0 +1,83 @@
+
+
+export default function HashRouter() {
+
+    const $history = [];
+    let $currentIndex = 0;
+
+    /**
+     *
+     * @param {number} delta
+     */
+    const go = (delta) => {
+        const index = $currentIndex + delta;
+        if(!$history[index]) {
+            return;
+        }
+        $currentIndex = index;
+        const { route, params, query, path } = $history[index];
+        setHash(path);
+    };
+
+    const canGoBack = function() {
+        return $currentIndex > 0;
+    };
+    const canGoForward = function() {
+        return $currentIndex < $history.length - 1;
+    };
+
+    /**
+     *
+     * @param {string} path
+     */
+    const setHash = (path) => {
+        window.location.replace(`${window.location.pathname}${window.location.search}#${path}`);
+    }
+
+    const getCurrentHash = () => window.location.hash.slice(1);
+
+    /**
+     * @param {string|{name:string,params?:Object, query?:Object }} target
+     */
+    this.push = function(target) {
+        const { route, params, query, path } = this.resolve(target);
+        if(path === getCurrentHash()) {
+            return;
+        }
+        $history.splice($currentIndex + 1);
+        $history.push({ route, params, query, path });
+        $currentIndex++;
+        setHash(path);
+    };
+    /**
+     *
+     * @param {string|{name:string,params?:Object, query?:Object }} target
+     */
+    this.replace = function(target) {
+        const { route, params, query, path } = this.resolve(target);
+        if(path === getCurrentHash()) {
+            return;
+        }
+        $history[$currentIndex] = { route, params, query, path };
+    };
+    this.forward = function() {
+        return canGoForward() && go(1);
+    };
+    this.back = function() {
+        return canGoBack() && go(-1);
+    };
+
+    /**
+     * @param {string} defaultPath
+     */
+    this.init = function(defaultPath) {
+        window.addEventListener('hashchange', () => {
+            const { route, params, query, path } = this.resolve(getCurrentHash());
+            this.handleRouteChange(route, params, query, path);
+        });
+        const { route, params, query, path } = this.resolve(defaultPath || getCurrentHash());
+        $history.push({ route, params, query, path });
+        $currentIndex = 0;
+        this.handleRouteChange(route, params, query, path);
+    }
+};

package/src/router/modes/HistoryRouter.js

@@ -0,0 +1,66 @@
+import RouterError from '../../errors/RouterError';
+import DebugManager from "../../utils/debug-manager.js";
+
+export default function HistoryRouter() {
+
+    /**
+     *
+     * @param {string|{name:string,params?:Object, query?:Object }} target
+     */
+    this.push = function(target) {
+        try {
+            const { route, path, params, query } = this.resolve(target);
+            if(window.history.state && window.history.state.path === path) {
+                return;
+            }
+            window.history.pushState({ name: route.name(), params, path}, route.name() || path , path);
+            this.handleRouteChange(route, params, query, path);
+        } catch (e) {
+            DebugManager.error('HistoryRouter', 'Error in pushState', e);
+        }
+    };
+    /**
+     *
+     * @param {string|{name:string,params?:Object, query?:Object }} target
+     */
+    this.replace = function(target) {
+        const { route, path, params } = this.resolve(target);
+        try {
+            window.history.replaceState({ name: route.name(), params, path}, route.name() || path , path);
+            this.handleRouteChange(route, params, {}, path);
+        } catch(e) {
+            DebugManager.error('HistoryRouter', 'Error in replaceState', e);
+        }
+    };
+    this.forward = function() {
+        window.history.forward();
+    };
+
+    this.back = function() {
+        window.history.back();
+    };
+
+    /**
+     * @param {string} defaultPath
+     */
+    this.init = function(defaultPath) {
+        window.addEventListener('popstate', (event) => {
+            try {
+                if(!event.state || !event.state.path) {
+                    return;
+                }
+                const statePath = event.state.path;
+                const {route, params, query, path} = this.resolve(statePath);
+                if(!route) {
+                    return;
+                }
+                this.handleRouteChange(route, params, query, path);
+            } catch(e) {
+                DebugManager.error('HistoryRouter', 'Error in popstate event', e);
+            }
+        });
+        const { route, params, query, path } = this.resolve(defaultPath || (window.location.pathname+window.location.search));
+        this.handleRouteChange(route, params, query, path);
+    }
+
+};

package/src/router/modes/MemoryRouter.js

@@ -0,0 +1,71 @@
+
+export default function MemoryRouter() {
+    const $history = [];
+    let $currentIndex = 0;
+
+    /**
+     *
+     * @param {number} delta
+     */
+    const go = (delta) => {
+        const index = $currentIndex + delta;
+        if(!$history[index]) {
+            return;
+        }
+        $currentIndex = index;
+        const { route, params, query, path } = $history[index];
+        this.handleRouteChange(route, params, query, path);
+    };
+
+    const canGoBack = function() {
+        return $currentIndex > 0;
+    };
+    const canGoForward = function() {
+        return $currentIndex < $history.length - 1;
+    };
+
+    /**
+     *
+     * @param {string|{name:string,params?:Object, query?:Object }} target
+     */
+    this.push = function(target) {
+        const { route, params, query, path} = this.resolve(target);
+        if($history[$currentIndex] && $history[$currentIndex].path === path) {
+            return;
+        }
+        $history.splice($currentIndex + 1);
+        $history.push({ route, params, query, path });
+        $currentIndex++;
+        this.handleRouteChange(route, params, query, path);
+    };
+
+    /**
+     *
+     * @param {string|{name:string,params?:Object, query?:Object }} target
+     */
+    this.replace = function(target) {
+        const { route, params, query, path} = this.resolve(target);
+        $history[$currentIndex] = { route, params, query, path };
+        this.handleRouteChange(route, params, query, path);
+    };
+
+    this.forward = function() {
+        return canGoForward() && go(1);
+    };
+
+    this.back = function() {
+        return canGoBack() && go(-1);
+    };
+
+    /**
+     * @param {string} defaultPath
+     */
+    this.init = function(defaultPath) {
+        const currentPath = defaultPath || (window.location.pathname + window.location.search);
+        const { route, params, query, path } = this.resolve(currentPath);
+        $history.push({ route, params, query, path });
+        $currentIndex = 0;
+
+        this.handleRouteChange(route, params, query, path);
+    }
+};

package/src/utils/args-types.js

@@ -0,0 +1,100 @@
+import Validator from "./validator";
+import ArgTypesError from "../errors/ArgTypesError";
+import NativeDocumentError from "../errors/NativeDocumentError";
+
+/**
+ *
+ * @type {{string: (function(*): {name: *, type: string, validate: function(*): boolean}),
+ *      number: (function(*): {name: *, type: string, validate: function(*): boolean}),
+ *      boolean: (function(*): {name: *, type: string, validate: function(*): boolean}),
+ *      observable: (function(*): {name: *, type: string, validate: function(*): boolean}),
+ *      element: (function(*): {name: *, type: string, validate: function(*): *}),
+ *      function: (function(*): {name: *, type: string, validate: function(*): boolean}),
+ *      object: (function(*): {name: *, type: string, validate: function(*): boolean}),
+ *      objectNotNull: (function(*): {name: *, type: string, validate: function(*): *}),
+ *      children: (function(*): {name: *, type: string, validate: function(*): *}),
+ *      attributes: (function(*): {name: *, type: string, validate: function(*): *}),
+ *      optional: (function(*): *&{optional: boolean}),
+ *      oneOf: (function(*, ...[*]): {name: *, type: string, types: *[],
+ *      validate: function(*): boolean})
+ * }}
+ */
+export const ArgTypes = {
+    string: (name) => ({ name, type: 'string', validate: (v) => Validator.isString(v) }),
+    number: (name) => ({ name, type: 'number', validate: (v) => Validator.isNumber(v) }),
+    boolean: (name) => ({ name, type: 'boolean', validate: (v) => Validator.isBoolean(v) }),
+    observable: (name) => ({ name, type: 'observable', validate: (v) => Validator.isObservable(v) }),
+    element: (name) => ({ name, type: 'element', validate: (v) => Validator.isElement(v) }),
+    function: (name) => ({ name, type: 'function', validate: (v) => Validator.isFunction(v) }),
+    object: (name) => ({ name, type: 'object', validate: (v) => (Validator.isObject(v)) }),
+    objectNotNull: (name) => ({ name, type: 'object', validate: (v) => (Validator.isObject(v) && v !== null) }),
+    children: (name) => ({ name, type: 'children', validate: (v) => Validator.validateChildren(v) }),
+    attributes: (name) => ({ name, type: 'attributes', validate: (v) => Validator.validateAttributes(v) }),
+
+    // Optional arguments
+    optional: (argType) => ({ ...argType, optional: true }),
+
+    // Union types
+    oneOf: (name, ...argTypes) => ({
+        name,
+        type: 'oneOf',
+        types: argTypes,
+        validate: (v) => argTypes.some(type => type.validate(v))
+    })
+};
+
+/**
+ *
+ * @param {Array} args
+ * @param {Array} argSchema
+ * @param {string} fnName
+ */
+const validateArgs = (args, argSchema, fnName = 'Function') => {
+    if (!argSchema) return;
+
+    const errors = [];
+
+    // Check the number of arguments
+    const requiredCount = argSchema.filter(arg => !arg.optional).length;
+    if (args.length < requiredCount) {
+        errors.push(`${fnName}: Expected at least ${requiredCount} arguments, got ${args.length}`);
+    }
+
+    // Validate each argument
+    argSchema.forEach((schema, index) => {
+        const position = index + 1;
+        const value = args[index];
+
+        if (value === undefined) {
+            if (!schema.optional) {
+                errors.push(`${fnName}: Missing required argument '${schema.name}' at position ${position}`);
+            }
+            return;
+        }
+
+        if (!schema.validate(value)) {
+            const valueTypeOf = value?.constructor?.name || typeof value;
+            errors.push(`${fnName}: Invalid argument '${schema.name}' at position ${position}, expected ${schema.type}, got ${valueTypeOf}`);
+        }
+    });
+
+    if (errors.length > 0) {
+        throw new ArgTypesError(`Argument validation failed`, errors);
+    }
+};
+
+/**
+ * @param {Function} fn
+ * @param {Array} argSchema
+ * @param {string} fnName
+ * @returns {Function}
+ */
+export const withValidation = (fn, argSchema, fnName = 'Function') => {
+    if(!Validator.isArray(argSchema)) {
+        throw new NativeDocumentError('withValidation : argSchema must be an array');
+    }
+    return function(...args) {
+        validateArgs(args, argSchema, fn.name || fnName);
+        return fn.apply(this, args);
+    };
+};

package/src/utils/debug-manager.js

@@ -0,0 +1,34 @@
+// Build configuration
+const isProd = process.env.NODE_ENV === 'production';
+
+const DebugManager = {
+    enabled: !isProd,
+
+    enable() {
+        this.enabled = true;
+        console.log('🔍 NativeDocument Debug Mode enabled');
+    },
+
+    disable() {
+        this.enabled = false;
+    },
+
+    log: isProd ? () => {} : function(category, message, data) {
+        if (!this.enabled) return;
+        console.group(`🔍 [${category}] ${message}`);
+        if (data) console.log(data);
+        console.trace();
+        console.groupEnd();
+    },
+
+    warn: isProd ? () => {} : function(category, message, data) {
+        if (!this.enabled) return;
+        console.warn(`⚠️ [${category}] ${message}`, data);
+    },
+
+    error: isProd ? () => {} : function(category, message, error) {
+        console.error(`❌ [${category}] ${message}`, error);
+    }
+};
+
+export default DebugManager;

package/src/utils/helpers.js

@@ -0,0 +1,37 @@
+/**
+ *
+ * @param {Function} fn
+ * @param {number} delay
+ * @param {{leading?:Boolean, trailing?:Boolean, debounce?:Boolean}}options
+ * @returns {(function(...[*]): void)|*}
+ */
+export const throttle = function(fn, delay, options = {}) {
+    let timer = null;
+    let lastExecTime = 0;
+    const { leading = true, trailing = true, debounce = false } = options;
+
+    return  function(...args) {
+        const now = Date.now();
+        if (debounce) {
+            // debounce mode: reset the timer for each call
+            clearTimeout(timer);
+            timer = setTimeout(() => fn.apply(this, args), delay);
+            return;
+        }
+        if (leading && now - lastExecTime >= delay) {
+            fn.apply(this, args);
+            lastExecTime = now;
+        }
+        if (trailing && !timer) {
+            timer = setTimeout(() => {
+                fn.apply(this, args);
+                lastExecTime = Date.now();
+                timer = null;
+            }, delay - (now - lastExecTime));
+        }
+    }
+};
+
+export const trim = function(str, char) {
+    return str.replace(new RegExp(`^[${char}]+|[${char}]+$`, 'g'), '');
+}

package/src/utils/prototypes.js

@@ -0,0 +1,16 @@
+import {withValidation} from "./args-types.js";
+
+
+Function.prototype.args = function(...args) {
+    return withValidation(this, args);
+};
+
+Function.prototype.errorBoundary = function(callback) {
+    return (...args)  => {
+        try {
+            return this.apply(this, args);
+        } catch(e) {
+            return callback(e);
+        }
+    };
+}

package/src/utils/validator.js

@@ -0,0 +1,96 @@
+import ObservableItem from "../data/ObservableItem";
+import DebugManager from "./debug-manager";
+import NativeDocumentError from "../errors/NativeDocumentError";
+import ObservableChecker from "../data/ObservableChecker";
+
+const Validator = {
+    isObservable(value) {
+        return value instanceof ObservableItem || value instanceof ObservableChecker;
+    },
+    isProxy(value) {
+        return value?.__isProxy__
+    },
+    isObservableChecker(value) {
+        return value instanceof ObservableChecker;
+    },
+    isArray(value) {
+        return Array.isArray(value);
+    },
+    isString(value) {
+        return typeof value === 'string';
+    },
+    isNumber(value) {
+        return typeof value === 'number';
+    },
+    isBoolean(value) {
+        return typeof value === 'boolean';
+    },
+    isFunction(value) {
+        return typeof value === 'function';
+    },
+    isObject(value) {
+        return typeof value === 'object';
+    },
+    isJson(value) {
+        return typeof value === 'object' && value !== null && !Array.isArray(value);
+    },
+    isElement(value) {
+        return value instanceof HTMLElement || value instanceof DocumentFragment  || value instanceof Text;
+    },
+    isFragment(value) {
+        return value instanceof DocumentFragment;
+    },
+    isStringOrObservable(value) {
+        return this.isString(value) || this.isObservable(value);
+    },
+
+    isValidChild(child) {
+        return child === null ||
+            this.isElement(child) ||
+            this.isObservable(child) ||
+            ['string', 'number', 'boolean'].includes(typeof child);
+    },
+    isValidChildren(children) {
+        if (!Array.isArray(children)) {
+            children = [children];
+        }
+
+        const invalid = children.filter(child => !this.isValidChild(child));
+        return invalid.length === 0;
+    },
+    validateChildren(children) {
+        if (!Array.isArray(children)) {
+            children = [children];
+        }
+
+        const invalid = children.filter(child => !this.isValidChild(child));
+        if (invalid.length > 0) {
+            throw new NativeDocumentError(`Invalid children detected: ${invalid.map(i => typeof i).join(', ')}`);
+        }
+
+        return children;
+    },
+
+    validateAttributes(attributes) {
+        if (!attributes || typeof attributes !== 'object') {
+            return attributes;
+        }
+
+        const reserved = [];
+        const foundReserved = Object.keys(attributes).filter(key => reserved.includes(key));
+
+        if (foundReserved.length > 0) {
+            DebugManager.warn('Validator', `Reserved attributes found: ${foundReserved.join(', ')}`);
+        }
+
+        return attributes;
+    },
+
+    validateEventCallback(callback) {
+        if (typeof callback !== 'function') {
+            throw new NativeDocumentError('Event callback must be a function');
+        }
+    }
+};
+
+export default Validator;

package/src/wrappers/AttributesWrapper.js

@@ -0,0 +1,94 @@
+import Validator from "../utils/validator";
+import NativeDocumentError from "../errors/NativeDocumentError";
+
+
+/**
+ *
+ * @param {HTMLElement} element
+ * @param {string} className
+ * @param {string} value
+ */
+const toggleClassItem = function(element, className, value) {
+    if(value) {
+        element.classList.add(className);
+    } else {
+        element.classList.remove(className);
+    }
+}
+
+/**
+ *
+ * @param {HTMLElement} element
+ * @param {Object} data
+ */
+function bindClassAttribute(element, data) {
+    for(let className in data) {
+        const value = data[className];
+        if(Validator.isObservable(value)) {
+            toggleClassItem(element, className, value.val());
+            value.subscribe(newValue => toggleClassItem(element, className, newValue));
+            continue;
+        }
+        toggleClassItem(element, className, value);
+    }
+}
+
+/**
+ *
+ * @param {HTMLElement} element
+ * @param {Object} data
+ */
+function bindStyleAttribute(element, data) {
+    for(let styleName in data) {
+        const value = data[styleName];
+        if(Validator.isObservable(value)) {
+            element.style[styleName] = value.val();
+            value.subscribe(newValue => {
+                element.style[styleName] = newValue;
+            });
+            continue;
+        }
+        element.style[styleName] = value;
+    }
+}
+
+/**
+ *
+ * @param {HTMLElement} element
+ * @param {Object} attributes
+ */
+export default function AttributesWrapper(element, attributes) {
+
+    Validator.validateAttributes(attributes);
+
+    if(!Validator.isObject(attributes)) {
+        console.log(attributes);
+        throw new NativeDocumentError('Attributes must be an object');
+    }
+
+    for(let attributeName in attributes) {
+        const value = attributes[attributeName];
+        if(Validator.isObservable(value)) {
+            value.subscribe(newValue => element.setAttribute(attributeName, newValue));
+            element.setAttribute(attributeName, value.val());
+            if(attributeName === 'value') {
+                if(['checkbox', 'radio'].includes(element.type)) {
+                    element.addEventListener('input', () => value.set(element.checked));
+                } else {
+                    element.addEventListener('input', () => value.set(element.value));
+                }
+            }
+            continue;
+        }
+        if(attributeName === 'class' && Validator.isJson(value)) {
+            bindClassAttribute(element, value);
+            continue;
+        }
+        if(attributeName === 'style' && Validator.isJson(value)) {
+            bindStyleAttribute(element, value);
+            continue;
+        }
+        element.setAttribute(attributeName, value);
+    }
+    return element;
+}

package/src/wrappers/DocumentObserver.js

@@ -0,0 +1,51 @@
+import {throttle} from "../utils/helpers";
+
+const DocumentObserver = {
+    elements: new Map(),
+    observer: null,
+    checkMutation: throttle(function() {
+        for(const [element, data] of DocumentObserver.elements.entries()) {
+            const isCurrentlyInDom = document.body.contains(element);
+            if(isCurrentlyInDom && !data.inDom) {
+                data.inDom = true;
+                data.mounted.forEach(callback => callback(element));
+            } else if(!isCurrentlyInDom && data.inDom) {
+                data.inDom = false;
+                data.unmounted.forEach(callback => callback(element));
+            }
+        }
+    }, 10, { debounce: true }),
+    /**
+     *
+     * @param {HTMLElement} element
+     * @returns {{watch: (function(): Map<any, any>), disconnect: (function(): boolean), mounted: (function(*): Set<any>), unmounted: (function(*): Set<any>)}}
+     */
+    watch: function(element) {
+        let data = {};
+        if(DocumentObserver.elements.has(element)) {
+            data = DocumentObserver.elements.get(element);
+        } else {
+            const inDom = document.body.contains(element);
+            data = {
+                inDom,
+                mounted: new Set(),
+                unmounted: new Set(),
+            };
+            DocumentObserver.elements.set(element, data);
+        }
+
+        return {
+            watch: () => DocumentObserver.elements.set(element, data),
+            disconnect: () => DocumentObserver.elements.delete(element),
+            mounted: (callback) => data.mounted.add(callback),
+            unmounted: (callback) => data.unmounted.add(callback)
+        };
+    }
+};
+
+DocumentObserver.observer = new MutationObserver(DocumentObserver.checkMutation);
+DocumentObserver.observer.observe(document.body, {
+    childList: true,
+    subtree: true,
+});
+export default DocumentObserver;