native-document 1.0.15 → 1.0.16-8.2

package/src/elements/anchor.js

@@ -1,129 +0,0 @@
-import Validator from "../utils/validator";
-import DebugManager from "../utils/debug-manager";
-import {createTextNode} from "../wrappers/HtmlElementWrapper";
-
-
-const getChildAsNode = (child) => {
-    if(Validator.isFunction(child)) {
-        return getChildAsNode(child());
-    }
-    if(Validator.isElement(child)) {
-        return child;
-    }
-    return createTextNode(child)
-}
-
-export default function Anchor(name) {
-    const element = document.createDocumentFragment();
-
-    const anchorStart = document.createComment('Anchor Start : '+name);
-    const anchorEnd = document.createComment('/ Anchor End '+name);
-
-    element.appendChild(anchorStart);
-    element.appendChild(anchorEnd);
-
-    element.nativeInsertBefore = element.insertBefore;
-    element.nativeAppendChild = element.appendChild;
-
-    const insertBefore = function(parent, child, target) {
-        if(parent === element) {
-            parent.nativeInsertBefore(getChildAsNode(child), target);
-            return;
-        }
-        parent.insertBefore(getChildAsNode(child), target);
-    };
-
-    element.appendElement = function(child, before = null) {
-        if(anchorEnd.parentNode === element) {
-            anchorEnd.parentNode.nativeInsertBefore(child, before || anchorEnd);
-            return;
-        }
-        anchorEnd.parentNode?.insertBefore(child, before || anchorEnd);
-    };
-
-    element.appendChild = function(child, before = null) {
-        const parent = anchorEnd.parentNode;
-        if(!parent) {
-            DebugManager.error('Anchor', 'Anchor : parent not found', child);
-            return;
-        }
-        before = before ?? anchorEnd;
-        if(Validator.isArray(child)) {
-            const fragment = document.createDocumentFragment();
-            for(let i = 0, length = child.length; i < length; i++) {
-                fragment.appendChild(getChildAsNode(child[i]));
-            }
-            insertBefore(parent, fragment, before);
-            return element;
-        }
-        insertBefore(parent, child, before);
-    };
-
-    element.removeChildren = function() {
-        const parent = anchorEnd.parentNode;
-        if(parent === element) {
-            return;
-        }
-        if(parent.firstChild === anchorStart && parent.lastChild === anchorEnd) {
-            parent.replaceChildren(anchorStart, anchorEnd);
-            return;
-        }
-
-        let itemToRemove = anchorStart.nextSibling, tempItem;
-        const fragment = document.createDocumentFragment();
-        while(itemToRemove && itemToRemove !== anchorEnd) {
-            tempItem = itemToRemove.nextSibling;
-            fragment.append(itemToRemove);
-            itemToRemove =  tempItem;
-        }
-        fragment.replaceChildren();
-    }
-    element.remove = function() {
-        const parent = anchorEnd.parentNode;
-        if(parent === element) {
-            return;
-        }
-        let itemToRemove = anchorStart.nextSibling, tempItem;
-        while(itemToRemove !== anchorEnd) {
-            tempItem = itemToRemove.nextSibling;
-            element.nativeAppendChild(itemToRemove);
-            itemToRemove = tempItem;
-        }
-    };
-
-    element.removeWithAnchors = function() {
-        element.removeChildren();
-        anchorStart.remove();
-        anchorEnd.remove();
-    };
-
-    element.replaceContent = function(child) {
-        const parent = anchorEnd.parentNode;
-        if(!parent) {
-            return;
-        }
-        if(parent.firstChild === anchorStart && parent.lastChild === anchorEnd) {
-            parent.replaceChildren(anchorStart, child, anchorEnd);
-            return;
-        }
-        element.removeChildren();
-        parent.insertBefore(child, anchorEnd);
-    };
-
-    element.insertBefore = function(child, anchor = null) {
-        element.appendChild(child, anchor);
-    };
-
-    element.clear = function() {
-        element.remove();
-    };
-
-    element.endElement = function() {
-        return anchorEnd;
-    };
-    element.startElement = function() {
-        return anchorStart;
-    };
-
-    return element;
-};

package/src/elements/content-formatter.js

@@ -1,32 +0,0 @@
-import HtmlElementWrapper from "../wrappers/HtmlElementWrapper";
-
-export const Div = HtmlElementWrapper('div');
-export const Span = HtmlElementWrapper('span');
-export const Label = HtmlElementWrapper('label');
-export const P = HtmlElementWrapper('p');
-export const Paragraph = P;
-export const Strong = HtmlElementWrapper('strong');
-export const H1 = HtmlElementWrapper('h1');
-export const H2 = HtmlElementWrapper('h2');
-export const H3 = HtmlElementWrapper('h3');
-export const H4 = HtmlElementWrapper('h4');
-export const H5 = HtmlElementWrapper('h5');
-export const H6 = HtmlElementWrapper('h6');
-
-export const Br = HtmlElementWrapper('br');
-
-export const Link = HtmlElementWrapper('a');
-export const Pre = HtmlElementWrapper('pre');
-export const Code = HtmlElementWrapper('code');
-export const Blockquote = HtmlElementWrapper('blockquote');
-export const Hr = HtmlElementWrapper('hr');
-export const Em = HtmlElementWrapper('em');
-export const Small = HtmlElementWrapper('small');
-export const Mark = HtmlElementWrapper('mark');
-export const Del = HtmlElementWrapper('del');
-export const Ins = HtmlElementWrapper('ins');
-export const Sub = HtmlElementWrapper('sub');
-export const Sup = HtmlElementWrapper('sup');
-export const Abbr = HtmlElementWrapper('abbr');
-export const Cite = HtmlElementWrapper('cite');
-export const Quote = HtmlElementWrapper('q');

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

@@ -1,280 +0,0 @@
-import Anchor from "../anchor";
-import {Observable} from "../../data/Observable";
-import Validator from "../../utils/validator";
-import {createTextNode} from "../../wrappers/HtmlElementWrapper";
-import DebugManager from "../../utils/debug-manager";
-import {getKey} from "../../utils/helpers";
-
-export function ForEachArray(data, callback, key, configs = {}) {
-    const element = new Anchor('ForEach Array');
-    const blockEnd = element.endElement();
-    const blockStart = element.startElement();
-
-    let cache = new Map();
-    let nodeCacheByElement = new WeakMap();
-    let lastNumberOfItems = 0;
-
-    const keysCache = new WeakMap();
-
-    const clear = () => {
-        element.removeChildren();
-        cleanCache();
-        lastNumberOfItems = 0;
-    };
-    const getItemKey = (item, indexKey) => {
-        if(keysCache.has(item)) {
-            return keysCache.get(item);
-        }
-        return getKey(item, indexKey, key);
-    }
-
-    const updateIndexObservers = (items, startFrom = 0) => {
-        if(callback.length < 2) {
-            return;
-        }
-        let index = startFrom;
-        for(let i = startFrom, length = items?.length; i < length; i++) {
-            const cacheItem = cache.get(getItemKey(items[i], i));
-            if(!cacheItem) {
-                continue;
-            }
-            cacheItem.indexObserver?.deref()?.set(index);
-            index++;
-        }
-    };
-
-    const removeCacheItem = (cacheItem, removeChild = true) => {
-        if(!cacheItem) {
-            return;
-        }
-        const child = cacheItem.child?.deref();
-        cacheItem.indexObserver?.deref()?.cleanup();
-        cacheItem.child = null;
-        cacheItem.indexObserver = null;
-        nodeCacheByElement.delete(cacheItem.item);
-        keysCache.delete(cacheItem.item);
-        cacheItem.item = null;
-        if(removeChild) {
-            child?.remove();
-            cache.delete(cacheItem.keyId);
-        }
-    }
-
-    const removeCacheItemByKey = (keyId, removeChild = true) => {
-        removeCacheItem(cache.get(keyId), removeChild);
-    };
-
-    const cleanCache = () => {
-        for (const [keyId, cacheItem] of cache.entries()) {
-            removeCacheItem(cacheItem, false);
-        }
-        cache.clear();
-    }
-
-    const buildItem = (item, indexKey) => {
-        const keyId = getItemKey(item, indexKey);
-
-        if(cache.has(keyId)) {
-            const cacheItem = cache.get(keyId);
-            cacheItem.indexObserver?.deref()?.set(indexKey);
-            cacheItem.isNew = false;
-            const child = cacheItem.child?.deref();
-            if(child) {
-                return child;
-            }
-            cache.delete(keyId);
-        }
-
-        try {
-            const indexObserver = callback.length >= 2 ? Observable(indexKey) : null;
-            let child = callback(item, indexObserver);
-            if(Validator.isStringOrObservable(child)) {
-                child = createTextNode(child);
-            }
-            cache.set(keyId, {
-                keyId,
-                isNew: true,
-                item,
-                child: new WeakRef(child),
-                indexObserver: (indexObserver ? new WeakRef(indexObserver) : null)
-            });
-            keysCache.set(item, keyId);
-            if(Validator.isObject(item)) {
-                nodeCacheByElement.set(item, child);
-            }
-            return child;
-        } catch (e) {
-            DebugManager.error('ForEach', `Error creating element for key ${keyId}` , e);
-            throw e;
-        }
-    };
-    const getChildByKey = function(keyId, fragment) {
-        const cacheItem = cache.get(keyId);
-        if(!cacheItem) {
-            return null;
-        }
-        const child = cacheItem.child?.deref();
-        if(!child) {
-            removeCacheItem(cacheItem, false);
-            return null;
-        }
-        return child;
-    };
-
-    const removeByKey = function(keyId, fragment) {
-        const cacheItem = cache.get(keyId);
-        if(!cacheItem) {
-            return null;
-        }
-        const child = cacheItem.child?.deref();
-        if(!child) {
-            return null;
-        }
-
-        if(fragment) {
-            fragment.appendChild(child);
-            return;
-        }
-        child.remove();
-    }
-
-    const Actions = {
-        toFragment(items, startIndexFrom = 0){
-            const fragment = document.createDocumentFragment();
-            for(let i = 0, length = items.length; i < length; i++) {
-                fragment.append(buildItem(items[i], lastNumberOfItems));
-                lastNumberOfItems++;
-            }
-            return fragment;
-        },
-        add(items, delay = 0) {
-            setTimeout(() => {
-                element.appendElement(Actions.toFragment(items))
-            }, delay);
-        },
-        replace(items) {
-            clear();
-            Actions.add(items);
-        },
-        reOrder(items) {
-            let child = null;
-            const fragment = document.createDocumentFragment();
-            for(const item of items) {
-                child = nodeCacheByElement.get(item);
-                if(child) {
-                    fragment.appendChild(child);
-                }
-            }
-            child = null;
-            element.appendElement(fragment, blockEnd);
-        },
-        removeOne(element, index) {
-            let child = nodeCacheByElement.get(element);
-            if(child) {
-                child.remove();
-                nodeCacheByElement.delete(element);
-                removeCacheItemByKey(getItemKey(element, index));
-            }
-            child = null;
-        },
-        clear,
-        push(items) {
-            let delay = 0;
-            if(configs.pushDelay) {
-                delay = configs.pushDelay(items) ?? 0;
-            } else {
-                delay = (items.length >= 1000) ? 10 : 0;
-            }
-            Actions.add(items, delay);
-        },
-        unshift(values){
-            element.insertBefore(Actions.toFragment(values), blockStart.nextSibling);
-        },
-        splice(args, deleted) {
-            const [start, deleteCount, ...values] = args;
-            let elementBeforeFirst = null;
-            const garbageFragment = document.createDocumentFragment();
-
-            if(deleted.length > 0) {
-                let firstKey = getItemKey(deleted[0], start);
-                if(deleted.length === 1) {
-                    removeByKey(firstKey, garbageFragment);
-                } else if(deleted.length > 1) {
-                    const firstChildRemoved = getChildByKey(firstKey);
-                    elementBeforeFirst = firstChildRemoved?.previousSibling;
-
-                    for(let i = 0; i < deleted.length; i++) {
-                        const keyId = getItemKey(deleted[i], start + i, key);
-                        removeByKey(keyId, garbageFragment);
-                    }
-                }
-            } else {
-                elementBeforeFirst = blockEnd;
-            }
-            garbageFragment.replaceChildren();
-
-            if(values && values.length && elementBeforeFirst) {
-                element.insertBefore(Actions.toFragment(values), elementBeforeFirst.nextSibling);
-            }
-
-        },
-        reverse(_, reversed) {
-            Actions.reOrder(reversed);
-        },
-        sort(_, sorted) {
-            Actions.reOrder(sorted);
-        },
-        remove(_, deleted) {
-            Actions.removeOne(deleted);
-        },
-        pop(_, deleted) {
-            Actions.removeOne(deleted);
-        },
-        shift(_, deleted) {
-            Actions.removeOne(deleted);
-        },
-        swap(args, elements) {
-            const parent = blockEnd.parentNode;
-
-            let childA = nodeCacheByElement.get(elements[0]);
-            let childB = nodeCacheByElement.get(elements[1]);
-            if(!childA || !childB) {
-                return;
-            }
-
-            const childBNext = childB.nextSibling;
-            parent.insertBefore(childB, childA);
-            parent.insertBefore(childA, childBNext);
-            childA = null;
-            childB = null;
-        }
-    };
-
-    const buildContent = (items, _, operations) => {
-        if(operations.action === 'clear' || !items.length) {
-            if(lastNumberOfItems === 0) {
-                return;
-            }
-            clear();
-        }
-
-        if(!operations?.action) {
-            if(lastNumberOfItems === 0) {
-                Actions.add(items);
-                return;
-            }
-            Actions.replace(items);
-        }
-        else if(Actions[operations.action]) {
-            Actions[operations.action](operations.args, operations.result);
-        }
-        updateIndexObservers(items, 0);
-    };
-
-    buildContent(data.val(), null, {action: null});
-    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 });
-