native-document 1.0.14 → 1.0.16-8.1

package/src/utils/helpers.js

@@ -1,37 +0,0 @@
-/**
- *
- * @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/plugins-manager.js

@@ -1,12 +0,0 @@
-
-const pluginsManager = (function() {
-
-    const $plugins = [];
-
-    return {
-        list : () => $plugins,
-        add : (plugin) => $plugins.push(plugin)
-    };
-}());
-
-export default pluginsManager;

package/src/utils/prototypes.js

@@ -1,45 +0,0 @@
-import {withValidation} from "./args-types.js";
-import {Observable} from "../data/Observable";
-import Validator from "./validator";
-
-
-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);
-        }
-    };
-};
-
-String.prototype.use = function(args) {
-    const value = this;
-
-    return Observable.computed(() => {
-        return value.replace(/\$\{(.*?)}/g, (match, key) => {
-            const data = args[key];
-            if(Validator.isObservable(data)) {
-                return data.val();
-            }
-            return data;
-        });
-    }, Object.values(args));
-};
-
-String.prototype.resolveObservableTemplate = function() {
-    if(!Validator.containsObservableReference(this)) {
-        return this;
-    }
-    return this.split(/(\{\{#ObItem::\([0-9]+\)\}\})/g).filter(Boolean).map((value) => {
-        if(!Validator.containsObservableReference(value)) {
-            return value;
-        }
-        const [_, id] = value.match(/\{\{#ObItem::\(([0-9]+)\)\}\}/);
-        return Observable.getById(id);
-    });
-}

package/src/wrappers/AttributesWrapper.js

@@ -1,157 +0,0 @@
-import Validator from "../utils/validator";
-import NativeDocumentError from "../errors/NativeDocumentError";
-import {BOOLEAN_ATTRIBUTES} from "./constants.js";
-import {Observable} from "../data/Observable";
-
-/**
- *
- * @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 {string} attributeName
- * @param {boolean|number|Observable} value
- */
-function bindBooleanAttribute(element, attributeName, value) {
-    const defaultValue = Validator.isObservable(value) ? value.val() : value;
-    if(Validator.isBoolean(defaultValue)) {
-        element[attributeName] = defaultValue;
-    }
-    else {
-        element[attributeName] = defaultValue === element.value;
-    }
-    if(Validator.isObservable(value)) {
-        if(['checked'].includes(attributeName)) {
-            element.addEventListener('input', () => {
-                if(Validator.isBoolean(defaultValue)) {
-                    value.set(element[attributeName]);
-                    return;
-                }
-                value.set(element.value);
-            });
-        }
-        value.subscribe(newValue => {
-            if(Validator.isBoolean(newValue)) {
-                element[attributeName] = newValue;
-                return;
-            }
-            element[attributeName] = newValue === element.value;
-        });
-    }
-}
-
-
-/**
- *
- * @param {HTMLElement} element
- * @param {string} attributeName
- * @param {Observable} value
- */
-function bindAttributeWithObservable(element, attributeName, value) {
-    const applyValue = (newValue) => {
-        if(attributeName === 'value') {
-            element.value = newValue;
-            return;
-        }
-        element.setAttribute(attributeName, newValue);
-    };
-    value.subscribe(applyValue);
-    applyValue(value.val())
-
-    if(attributeName === 'value') {
-        element.addEventListener('input', () => value.set(element.value));
-    }
-}
-
-/**
- *
- * @param {HTMLElement} element
- * @param {Object} attributes
- */
-export default function AttributesWrapper(element, attributes) {
-
-    Validator.validateAttributes(attributes);
-
-    if(!Validator.isObject(attributes)) {
-        throw new NativeDocumentError('Attributes must be an object');
-    }
-
-    for(let key in attributes) {
-        const attributeName = key.toLowerCase();
-        let value = attributes[attributeName];
-        if(Validator.isString(value) && Validator.isFunction(value.resolveObservableTemplate)) {
-            value = value.resolveObservableTemplate();
-            if(Validator.isArray(value)) {
-                const observables = value.filter(item => Validator.isObservable(item));
-                value = Observable.computed(() => {
-                    return value.map(item => Validator.isObservable(item) ? item.val() : item).join(' ') || ' ';
-                }, observables);
-            }
-        }
-        if(BOOLEAN_ATTRIBUTES.includes(attributeName)) {
-            bindBooleanAttribute(element, attributeName, value);
-            continue;
-        }
-        if(Validator.isObservable(value)) {
-            bindAttributeWithObservable(element, attributeName, 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

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

package/src/wrappers/HtmlElementEventsWrapper.js

@@ -1,77 +0,0 @@
-function eventWrapper(element, name, callback) {
-    element.addEventListener(name, callback);
-    return element;
-}
-
-/**
- *
- * @param {HTMLElement} element
- * @returns {HTMLElement}
- */
-export default function HtmlElementEventsWrapper(element) {
-
-    if(!element.nd) {
-        element.nd = {};
-    }
-
-    /**
-     * @param {Object<string,Function>} events
-     */
-    element.nd.on = function(events) {
-        for(const event in events) {
-            const callback = events[event];
-            eventWrapper(element, event, callback);
-        }
-        return element;
-    };
-    element.nd.on.prevent = function(events) {
-        for(const event in events) {
-            const callback = events[event];
-            eventWrapper(element, event, (event) => {
-                event.preventDefault();
-                callback && callback(event);
-                return element;
-            });
-        }
-        return element;
-    };
-    const events = {
-        click: (callback) => eventWrapper(element, 'click', callback),
-        focus: (callback) => eventWrapper(element, 'focus', callback),
-        blur: (callback) => eventWrapper(element, 'blur', callback),
-        input: (callback) => eventWrapper(element, 'input', callback),
-        change: (callback) => eventWrapper(element, 'change', callback),
-        keyup: (callback) => eventWrapper(element, 'keyup', callback),
-        keydown: (callback) => eventWrapper(element, 'keydown', callback),
-        beforeInput: (callback) => eventWrapper(element, 'beforeinput', callback),
-        mouseOver: (callback) => eventWrapper(element, 'mouseover', callback),
-        mouseOut: (callback) => eventWrapper(element, 'mouseout', callback),
-        mouseDown: (callback) => eventWrapper(element, 'mousedown', callback),
-        mouseUp: (callback) => eventWrapper(element, 'mouseup', callback),
-        mouseMove: (callback) => eventWrapper(element, 'mousemove', callback),
-        hover: (mouseInCallback, mouseOutCallback) => {
-            element.addEventListener('mouseover', mouseInCallback);
-            element.addEventListener('mouseout', mouseOutCallback);
-        },
-        dropped: (callback) => eventWrapper(element, 'drop', callback),
-        submit: (callback) => eventWrapper(element, 'submit', callback),
-        dragEnd: (callback) => eventWrapper(element, 'dragend', callback),
-        dragStart: (callback) => eventWrapper(element, 'dragstart', callback),
-        drop: (callback) => eventWrapper(element, 'drop', callback),
-        dragOver: (callback) => eventWrapper(element, 'dragover', callback),
-        dragEnter: (callback) => eventWrapper(element, 'dragenter', callback),
-        dragLeave: (callback) => eventWrapper(element, 'dragleave', callback),
-    };
-    for(let event in events) {
-        element.nd.on[event] = events[event];
-        element.nd.on.prevent[event] = function(callback) {
-            eventWrapper(element, event.toLowerCase(), (event) => {
-                event.preventDefault();
-                callback && callback(event);
-            });
-            return element;
-        };
-    }
-
-    return element;
-}

package/src/wrappers/HtmlElementWrapper.js

@@ -1,206 +0,0 @@
-import HtmlElementEventsWrapper from "./HtmlElementEventsWrapper";
-import AttributesWrapper from "./AttributesWrapper";
-import NativeDocumentError from "../errors/NativeDocumentError";
-import DocumentObserver from "./DocumentObserver";
-import Validator from "../utils/validator";
-import DebugManager from "../utils/debug-manager";
-import Anchor from "../elements/anchor";
-import PluginsManager from "../utils/plugins-manager";
-
-/**
- *
- * @param {HTMLElement|DocumentFragment} parent
- * @param {ObservableItem} observable
- * @returns {Text}
- */
-const createObservableNode = function(parent, observable) {
-    const text = document.createTextNode('');
-    observable.subscribe(value => text.textContent = String(value));
-    text.textContent = observable.val();
-    parent && parent.appendChild(text);
-    return text;
-}
-
-/**
- *
- * @param {HTMLElement|DocumentFragment} parent
- * @param {*} value
- * @returns {Text}
- */
-const createStaticTextNode = function(parent, value) {
-    const text = document.createTextNode('');
-    text.textContent = String(value);
-    parent && parent.appendChild(text);
-    return text;
-}
-
-/**
- *
- * @param {HTMLElement} element
- */
-const addUtilsMethods = function(element) {
-    element.nd.wrap = (callback) => {
-        if(!Validator.isFunction(callback)) {
-            throw new NativeDocumentError('Callback must be a function');
-        }
-        callback && callback(element);
-        return element;
-    };
-    element.nd.ref = (target, name) => {
-        target[name] = element;
-        return element;
-    };
-
-    let $observer = null;
-
-    element.nd.appendChild = function(child) {
-        if(Validator.isArray(child)) {
-            ElementCreator.processChildren(child, element);
-            return;
-        }
-        if(Validator.isFunction(child)) {
-            child = child();
-            ElementCreator.processChildren(child(), element);
-        }
-        if(Validator.isElement(child)) {
-            ElementCreator.processChildren(child, element);
-        }
-    };
-
-    element.nd.lifecycle = function(states) {
-        $observer = $observer || DocumentObserver.watch(element);
-
-        states.mounted && $observer.mounted(states.mounted);
-        states.unmounted && $observer.unmounted(states.unmounted);
-        return element;
-    };
-
-    element.nd.mounted = (callback) => {
-        $observer = $observer || DocumentObserver.watch(element);
-        $observer.mounted(callback);
-        return element;
-    };
-    element.nd.unmounted = (callback) => {
-        $observer = $observer || DocumentObserver.watch(element);
-        $observer.unmounted(callback);
-        return element;
-    };
-};
-
-/**
- *
- * @param {*} value
- * @returns {Text}
- */
-export const createTextNode = function(value) {
-    return (Validator.isObservable(value))
-        ? createObservableNode(null, value)
-        : createStaticTextNode(null, value);
-};
-
-export const ElementCreator = {
-    /**
-     *
-     * @param {string} name
-     * @returns {HTMLElement|DocumentFragment}
-     */
-    createElement(name)  {
-        return name ? document.createElement(name) : new Anchor('Fragment');
-    },
-    /**
-     *
-     * @param {*} children
-     * @param {HTMLElement|DocumentFragment} parent
-     */
-    processChildren(children, parent) {
-        if(children === null) return;
-        const childrenArray = Array.isArray(children) ? children : [children];
-        childrenArray.forEach(child => {
-            if (child === null) return;
-            if(Validator.isString(child) && Validator.isFunction(child.resolveObservableTemplate)) {
-                child = child.resolveObservableTemplate();
-            }
-            if(Validator.isFunction(child)) {
-                this.processChildren(child(), parent);
-                return;
-            }
-            if(Validator.isArray(child)) {
-                this.processChildren(child, parent);
-                return;
-            }
-            if (Validator.isElement(child)) {
-                parent.appendChild(child);
-                return;
-            }
-            if (Validator.isObservable(child)) {
-                createObservableNode(parent, child);
-                return;
-            }
-            if (child) {
-                createStaticTextNode(parent, child);
-            }
-        });
-    },
-    /**
-     *
-     * @param {HTMLElement} element
-     * @param {Object} attributes
-     */
-    processAttributes(element, attributes) {
-        if(Validator.isFragment(element)) return;
-        if (attributes) {
-            AttributesWrapper(element, attributes);
-        }
-    },
-    /**
-     *
-     * @param {HTMLElement} element
-     * @param {Object} attributes
-     * @param {?Function} customWrapper
-     * @returns {HTMLElement|DocumentFragment}
-     */
-    setup(element, attributes, customWrapper) {
-        element.nd = {};
-        HtmlElementEventsWrapper(element);
-        const item = (typeof customWrapper === 'function') ? customWrapper(element) : element;
-        addUtilsMethods(item);
-
-        PluginsManager.list().forEach(plugin => {
-            plugin?.element?.setup && plugin.element.setup(item, attributes);
-        });
-
-        return item;
-    }
-};
-
-/**
- *
- * @param {string} name
- * @param {?Function} customWrapper
- * @returns {Function}
- */
-export default function HtmlElementWrapper(name, customWrapper) {
-    const $tagName = name.toLowerCase().trim();
-
-    const builder = function(attributes, children = null) {
-        try {
-            if(Validator.isValidChildren(attributes)) {
-                const tempChildren = children;
-                children = attributes;
-                attributes = tempChildren;
-            }
-            const element = ElementCreator.createElement($tagName);
-
-            ElementCreator.processAttributes(element, attributes);
-            ElementCreator.processChildren(children, element);
-
-            return ElementCreator.setup(element, attributes, customWrapper);
-        } catch (error) {
-            DebugManager.error('ElementCreation', `Error creating ${$tagName}`, error);
-        }
-    };
-
-    builder.hold = (children, attributes) => (() => builder(children, attributes));
-
-    return builder;
-}

package/src/wrappers/constants.js

@@ -1,2 +0,0 @@
-
-export const BOOLEAN_ATTRIBUTES = ['checked', 'selected', 'disabled', 'readonly', 'required', 'autofocus', 'multiple', 'autocomplete', 'hidden', 'contenteditable', 'spellcheck', 'translate', 'draggable', 'async', 'defer', 'autoplay', 'controls', 'loop', 'muted', 'download', 'reversed', 'open', 'default', 'formnovalidate', 'novalidate', 'scoped', 'itemscope', 'allowfullscreen', 'allowpaymentrequest', 'playsinline'];