native-document 1.0.14 → 1.0.16-8.1

package/src/elements/control/for-each.js

@@ -1,174 +0,0 @@
-import ObservableItem from "../../data/ObservableItem";
-import {Observable} from "../../data/Observable";
-import {createTextNode} from "../../wrappers/HtmlElementWrapper";
-import Validator from "../../utils/validator";
-import {throttle} from "../../utils/helpers.js";
-import Anchor from "../anchor";
-import DebugManager from "../../utils/debug-manager";
-
-
-/**
- *
- * @param {*} item
- * @param {string|null} defaultKey
- * @param {?Function} key
- * @returns {*}
- */
-const getKey = (item, defaultKey, key) => {
-    if(Validator.isFunction(key)) return key(item, defaultKey);
-    if(Validator.isObservable(item)) {
-        const val = item.val();
-        return (val && key) ? val[key] : defaultKey;
-    }
-    return item[key] ?? defaultKey;
-}
-
-/**
- *
- * @param {Map} cache
- * @param {Set} keyIds
- */
-const cleanBlockByCache = (cache, keyIds) => {
-    const toRemove = [];
-    for(const [key, cacheItem] of cache.entries()) {
-        if(keyIds.has(key)) {
-            continue;
-        }
-        toRemove.push({ key, cacheItem });
-    }
-    if(toRemove.length === 0) {
-        return;
-    }
-    toRemove.forEach(({ key, cacheItem }) => {
-        cacheItem.child.remove();
-        cacheItem.indexObserver.cleanup();
-        cache.delete(key);
-    });
-}
-
-/**
- *
- * @param {Array|Object|ObservableItem} data
- * @param {Function} callback
- * @param {?Function} key
- * @returns {DocumentFragment}
- */
-export function ForEach(data, callback, key) {
-    const element = new Anchor('ForEach');
-    const blockEnd = element.endElement();
-    const blockStart = element.startElement();
-
-    let cache = new Map();
-    const keyIds = new Set();
-
-    const handleContentItem = (item, indexKey) => {
-        const keyId = getKey(item, indexKey, key);
-
-        if(cache.has(keyId)) {
-            const cacheItem = cache.get(keyId);
-            cacheItem.indexObserver.set(indexKey);
-            cacheItem.isNew = false;
-        }
-        else {
-
-            try {
-                const indexObserver = Observable(indexKey);
-                let child = callback(item, indexObserver);
-                if(Validator.isStringOrObservable(child)) {
-                    child = createTextNode(child);
-                }
-                cache.set(keyId, { isNew: true, child, indexObserver});
-            } catch (e) {
-                DebugManager.error('ForEach', `Error creating element for key ${keyId}` , e);
-                throw e;
-            }
-        }
-        return keyId;
-    };
-
-    const batchDOMUpdates = () => {
-        const parent = blockEnd.parentNode;
-        if(!parent) {
-            return;
-        }
-
-        let previousElementSibling = blockStart;
-        const elementsToInsert = [];
-        const elementsToMove = [];
-        let fragment = null;
-
-        let saveFragment = (beforeTarget) => {
-            if(fragment) {
-                elementsToInsert.push({ child: fragment, before: beforeTarget });
-                fragment = null;
-            }
-        };
-
-        const keyIdsArray = Array.from(keyIds);
-        for(let i = 0; i < keyIdsArray.length; i++) {
-            const itemKey = keyIdsArray[i];
-            const cacheItem = cache.get(itemKey);
-            if(!cacheItem) {
-                continue;
-            }
-
-            if(previousElementSibling && previousElementSibling.nextSibling === cacheItem.child) {
-                previousElementSibling = cacheItem.child;
-                saveFragment(cacheItem.child);
-                continue;
-            }
-            if(cacheItem.isNew) {
-                fragment = fragment || document.createDocumentFragment();
-                fragment.append(cacheItem.child);
-                cacheItem.isNew = false;
-                continue;
-            }
-            saveFragment(cacheItem.child);
-            const nextChild = cache.get(keyIdsArray[i + 1])?.child;
-            if(nextChild) {
-                if(cacheItem.child.nextSibling !== nextChild) {
-                    elementsToMove.push({ child: cacheItem.child, before: nextChild });
-                }
-            }
-
-            previousElementSibling = cacheItem.child;
-        }
-        saveFragment(blockEnd);
-
-        elementsToInsert.forEach(({ child, before }) => {
-            if(before) {
-                parent.insertBefore(child, before);
-            } else {
-                element.appendChild(child);
-            }
-        });
-
-        elementsToMove.forEach(({ child, before }) => {
-            parent.insertBefore(child, before);
-        })
-        saveFragment = null;
-
-    };
-
-    const buildContent = () => {
-        const items = (Validator.isObservable(data)) ? data.val() : data;
-        keyIds.clear();
-        if(Array.isArray(items)) {
-            items.forEach((item, index) => keyIds.add(handleContentItem(item, index)));
-        } else {
-            for(const indexKey in items) {
-                keyIds.add(handleContentItem(items[indexKey], indexKey));
-            }
-        }
-
-        cleanBlockByCache(cache, keyIds);
-
-        batchDOMUpdates();
-    };
-
-    buildContent();
-    if(Validator.isObservable(data)) {
-        data.subscribe(buildContent)
-    }
-    return element;
-}

package/src/elements/control/show-if.js

@@ -1,79 +0,0 @@
-import { Observable } from "../../data/Observable";
-import {createTextNode} from "../../wrappers/HtmlElementWrapper";
-import Validator from "../../utils/validator";
-import DebugManager from "../../utils/debug-manager.js";
-import Anchor from "../anchor";
-
-/**
- * Show the element if the condition is true
- *
- * @param {ObservableItem|ObservableChecker} condition
- * @param {*} child
- * @param {string|null} comment
- * @returns {DocumentFragment}
- */
-export const ShowIf = function(condition, child, comment = null) {
-    if(!(Validator.isObservable(condition))) {
-        return DebugManager.warn('ShowIf', "ShowIf : condition must be an Observable / "+comment, condition);
-    }
-    const element = new Anchor('Show if : '+(comment || ''));
-
-    let childElement = null;
-    const getChildElement = () => {
-        if(childElement) {
-            return childElement;
-        }
-        if(typeof child === 'function') {
-            childElement = child();
-        }
-        else {
-            childElement = child;
-        }
-        if(Validator.isStringOrObservable(childElement)) {
-            childElement = createTextNode(childElement);
-        }
-        return childElement;
-    };
-
-    const currentValue = condition.val();
-
-    if(currentValue) {
-        element.appendChild(getChildElement());
-    }
-    condition.subscribe(value => {
-        if(value) {
-            element.appendChild(getChildElement());
-        } else {
-            element.remove();
-        }
-    });
-
-    return element;
-}
-
-/**
- * Hide the element if the condition is true
- * @param {ObservableItem|ObservableChecker} condition
- * @param child
- * @param comment
- * @returns {DocumentFragment}
- */
-export const HideIf = function(condition, child, comment) {
-
-    const hideCondition = Observable(!condition.val());
-    condition.subscribe(value => hideCondition.set(!value));
-
-    return ShowIf(hideCondition, child, comment);
-}
-
-/**
- * Hide the element if the condition is false
- *
- * @param {ObservableItem|ObservableChecker} condition
- * @param {*} child
- * @param {string|null} comment
- * @returns {DocumentFragment}
- */
-export const HideIfNot = function(condition, child, comment) {
-    return ShowIf(condition, child, comment);
-}

package/src/elements/control/switch.js

@@ -1,98 +0,0 @@
-import NativeDocumentError from "../../errors/NativeDocumentError";
-import {createTextNode} from "../../wrappers/HtmlElementWrapper";
-import Validator from "../../utils/validator";
-import Anchor from "../anchor";
-
-
-
-/**
- *
- * @param {ObservableItem|ObservableChecker} $condition
- * @param {{[key]: *}} values
- * @returns {DocumentFragment}
- */
-export const Match = function($condition, values) {
-
-    if(!Validator.isObservable($condition)) {
-        throw new NativeDocumentError("Toggle : condition must be an Observable");
-    }
-
-    const anchor = new Anchor();
-    const cache = new Map();
-
-    const getItem = function(key) {
-        if(cache.has(key)) {
-            return cache.get(key);
-        }
-        let item = values[key];
-        if(!item) {
-            return null;
-        }
-        if(Validator.isFunction(item)) {
-            item = item();
-        }
-        cache.set(key, item);
-        return item;
-    }
-
-    const defaultValue = $condition.val();
-    const defaultContent = getItem(defaultValue);
-    if(defaultContent) {
-        anchor.appendChild(defaultContent);
-    }
-
-    $condition.subscribe(value => {
-        const content = getItem(value);
-        anchor.remove();
-        if(content) {
-            anchor.appendChild(content);
-        }
-    })
-
-    return anchor;
-}
-
-
-/**
- *
- * @param {ObservableItem|ObservableChecker} $condition
- * @param {*} onTrue
- * @param {*} onFalse
- * @returns {DocumentFragment}
- */
-export const Switch = function ($condition, onTrue, onFalse) {
-
-    if(!Validator.isObservable($condition)) {
-        throw new NativeDocumentError("Toggle : condition must be an Observable");
-    }
-
-    return Match($condition, {
-        true: onTrue,
-        false: onFalse,
-    });
-}
-
-/**
- *
- * @param {ObservableItem|ObservableChecker} $condition
- * @returns {{show: Function, otherwise: (((*) => {}):DocumentFragment)}
- */
-export const When = function($condition) {
-    if(!Validator.isObservable($condition)) {
-        throw new NativeDocumentError("When : condition must be an Observable");
-    }
-
-    let $onTrue = null;
-    let $onFalse = null;
-
-    return {
-        show(onTrue) {
-            $onTrue = onTrue;
-            return this;
-        },
-        otherwise(onFalse) {
-            $onFalse = onFalse;
-            return Switch($condition, $onTrue, $onFalse);
-        }
-    }
-}

package/src/elements/description-list.js

@@ -1,5 +0,0 @@
-import HtmlElementWrapper from "../wrappers/HtmlElementWrapper";
-
-export const Dl = HtmlElementWrapper('dl');
-export const Dt = HtmlElementWrapper('dt');
-export const Dd = HtmlElementWrapper('dd');

package/src/elements/form.js

@@ -1,71 +0,0 @@
-import HtmlElementWrapper from "../wrappers/HtmlElementWrapper";
-
-
-export const Form = HtmlElementWrapper('form', function(el) {
-
-    el.submit = function(action) {
-        if(typeof action === 'function') {
-            el.on.submit((e) => {
-                e.preventDefault();
-                action(e);
-            });
-            return el;
-        }
-        this.setAttribute('action', action);
-        return el;
-    };
-    el.multipartFormData = function() {
-        this.setAttribute('enctype', 'multipart/form-data');
-        return el;
-    }
-    el.post = function(action) {
-        this.setAttribute('method', 'post');
-        this.setAttribute('action', action);
-        return el;
-    };
-    el.get = function(action) {
-        this.setAttribute('method', 'get');
-        this.setAttribute('action', action);
-    };
-    return el;
-});
-
-export const Input = HtmlElementWrapper('input');
-
-export const TextArea = HtmlElementWrapper('textarea');
-export const TextInput = TextArea;
-
-export const Select = HtmlElementWrapper('select');
-export const FieldSet = HtmlElementWrapper('fieldset', );
-export const Option = HtmlElementWrapper('option');
-export const Legend = HtmlElementWrapper('legend');
-export const Datalist = HtmlElementWrapper('datalist');
-export const Output = HtmlElementWrapper('output');
-export const Progress = HtmlElementWrapper('progress');
-export const Meter = HtmlElementWrapper('meter');
-
-export const ReadonlyInput = (attributes) => Input({ readonly: true, ...attributes });
-export const HiddenInput = (attributes) => Input({type: 'hidden', ...attributes });
-export const FileInput = (attributes) => Input({ type: 'file', ...attributes });
-export const PasswordInput = (attributes) => Input({ type: 'password', ...attributes });
-export const Checkbox = (attributes) => Input({ type: 'checkbox', ...attributes });
-export const Radio = (attributes) => Input({ type: 'radio', ...attributes });
-
-export const RangeInput = (attributes) => Input({ type: 'range', ...attributes });
-export const ColorInput = (attributes) => Input({ type: 'color', ...attributes });
-export const DateInput = (attributes) => Input({ type: 'date', ...attributes });
-export const TimeInput = (attributes) => Input({ type: 'time', ...attributes });
-export const DateTimeInput = (attributes) => Input({ type: 'datetime-local', ...attributes });
-export const WeekInput = (attributes) => Input({ type: 'week', ...attributes });
-export const MonthInput = (attributes) => Input({ type: 'month', ...attributes });
-export const SearchInput = (attributes) => Input({ type: 'search', ...attributes });
-export const TelInput = (attributes) => Input({ type: 'tel', ...attributes });
-export const UrlInput = (attributes) => Input({ type: 'url', ...attributes });
-export const EmailInput = (attributes) => Input({ type: 'email', ...attributes });
-export const NumberInput = (attributes) => Input({ type: 'number', ...attributes });
-
-
-export const Button = HtmlElementWrapper('button');
-export const SimpleButton = (child, attributes) => Button(child, { type: 'button', ...attributes });
-export const SubmitButton = (child, attributes) => Button(child, { type: 'submit', ...attributes });
-

package/src/elements/html5-semantics.js

@@ -1,12 +0,0 @@
-import HtmlElementWrapper from "../wrappers/HtmlElementWrapper";
-
-export const Main = HtmlElementWrapper('main');
-export const Section = HtmlElementWrapper('section');
-export const Article = HtmlElementWrapper('article');
-export const Aside = HtmlElementWrapper('aside');
-export const Nav = HtmlElementWrapper('nav');
-export const Figure = HtmlElementWrapper('figure');
-export const FigCaption = HtmlElementWrapper('figcaption');
-
-export const Header = HtmlElementWrapper('header');
-export const Footer = HtmlElementWrapper('footer');

package/src/elements/img.js

@@ -1,45 +0,0 @@
-import HtmlElementWrapper from "../wrappers/HtmlElementWrapper"
-import Validator from "../utils/validator";
-import NativeDocumentError from "../errors/NativeDocumentError";
-
-export const BaseImage = HtmlElementWrapper('img');
-export const Img = function(src, attributes) {
-    return BaseImage({ src, ...attributes });
-};
-
-/**
- *
- * @param {string} src
- * @param {string|null} defaultImage
- * @param {Object} attributes
- * @param {?Function} callback
- * @returns {Image}
- */
-export const AsyncImg = function(src, defaultImage, attributes, callback) {
-    const image = Img(defaultImage || src, attributes);
-    const img = new Image();
-    img.onload = () => {
-        Validator.isFunction(callback) && callback(null, image);
-        image.src = src;
-    };
-    img.onerror = () => {
-        Validator.isFunction(callback) && callback(new NativeDocumentError('Image not found'));
-    };
-    if(Validator.isObservable(src)) {
-        src.subscribe(newSrc => {
-            img.src = newSrc;
-        });
-    }
-    img.src = src;
-    return image;
-};
-
-/**
- *
- * @param {string} src
- * @param {Object} attributes
- * @returns {Image}
- */
-export const LazyImg = function(src, attributes) {
-    return Img(src, { ...attributes, loading: 'lazy' });
-};

package/src/elements/interactive.js

@@ -1,7 +0,0 @@
-import HtmlElementWrapper from "../wrappers/HtmlElementWrapper";
-
-
-export const Details = HtmlElementWrapper('details');
-export const Summary = HtmlElementWrapper('summary');
-export const Dialog = HtmlElementWrapper('dialog');
-export const Menu = HtmlElementWrapper('menu');

package/src/elements/list.js

@@ -1,6 +0,0 @@
-import HtmlElementWrapper from "../wrappers/HtmlElementWrapper";
-
-export const OrderedList = HtmlElementWrapper('ol');
-export const UnorderedList = HtmlElementWrapper('ul');
-export const ListItem = HtmlElementWrapper('li');
-

package/src/elements/medias.js

@@ -1,8 +0,0 @@
-import HtmlElementWrapper from "../wrappers/HtmlElementWrapper";
-
-export const Audio = HtmlElementWrapper('audio');
-export const Video = HtmlElementWrapper('video');
-export const Source = HtmlElementWrapper('source');
-export const Track = HtmlElementWrapper('track');
-export const Canvas = HtmlElementWrapper('canvas');
-export const Svg = HtmlElementWrapper('svg');

package/src/elements/meta-data.js

@@ -1,9 +0,0 @@
-import HtmlElementWrapper from "../wrappers/HtmlElementWrapper";
-
-export const Time = HtmlElementWrapper('time');
-export const Data = HtmlElementWrapper('data');
-export const Address = HtmlElementWrapper('address');
-export const Kbd = HtmlElementWrapper('kbd');
-export const Samp = HtmlElementWrapper('samp');
-export const Var = HtmlElementWrapper('var');
-export const Wbr = HtmlElementWrapper('wbr');

package/src/elements/table.js

@@ -1,14 +0,0 @@
-import HtmlElementWrapper from "../wrappers/HtmlElementWrapper";
-
-export const Caption = HtmlElementWrapper('caption');
-export const Table = HtmlElementWrapper('table');
-export const THead = HtmlElementWrapper('thead');
-export const TFoot = HtmlElementWrapper('tfoot');
-export const TBody = HtmlElementWrapper('tbody');
-export const Tr = HtmlElementWrapper('tr');
-export const TRow = Tr;
-export const Th = HtmlElementWrapper('th');
-export const THeadCell = Th;
-export const TFootCell = Th;
-export const Td = HtmlElementWrapper('td');
-export const TBodyCell = Td;

package/src/utils/args-types.js

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

@@ -1,31 +0,0 @@
-const DebugManager = {
-    enabled: false,
-
-    enable() {
-        this.enabled = true;
-        console.log('🔍 NativeDocument Debug Mode enabled');
-    },
-
-    disable() {
-        this.enabled = false;
-    },
-
-    log(category, message, data) {
-        if (!this.enabled) return;
-        console.group(`🔍 [${category}] ${message}`);
-        if (data) console.log(data);
-        console.trace();
-        console.groupEnd();
-    },
-
-    warn(category, message, data) {
-        if (!this.enabled) return;
-        console.warn(`⚠️ [${category}] ${message}`, data);
-    },
-
-    error(category, message, error) {
-        console.error(`❌ [${category}] ${message}`, error);
-    }
-};
-
-export default DebugManager;