native-document 1.0.0

package/src/data/Observable.js

@@ -0,0 +1,162 @@
+import ObservableItem from './ObservableItem';
+import Validator from "../utils/validator";
+import MemoryManager from "./MemoryManager";
+import NativeDocumentError from "../errors/NativeDocumentError";
+import {throttle} from "../utils/helpers.js";
+
+/**
+ *
+ * @param {*} value
+ * @returns {ObservableItem}
+ * @constructor
+ */
+export function Observable(value) {
+    return new ObservableItem(value);
+}
+
+
+Observable.computed = function(callback, dependencies = []) {
+    const initialValue = callback();
+    const observable = new ObservableItem(initialValue);
+
+    const updatedValue = throttle(() => observable.set(callback()), 10, { debounce: true });
+
+    dependencies.forEach(dependency => dependency.subscribe(updatedValue));
+
+    return observable;
+};
+
+/**
+ *
+ * @param {ObservableItem} observable
+ */
+Observable.cleanup = function(observable) {
+    observable.cleanup();
+};
+
+/**
+ * Get the value of an observable or an object of observables.
+ * @param {ObservableItem|Object<ObservableItem>} object
+ * @returns {{}|*|null}
+ */
+Observable.value = function(data) {
+    if(Validator.isObservable(data)) {
+        return data.val();
+    }
+    if(Validator.isProxy(data)) {
+        return data.$val();
+    }
+    if(Validator.isArray(data)) {
+        const result = [];
+        data.forEach(item => {
+            result.push(Observable.value(item));
+        });
+        return result;
+    }
+    return data;
+}
+
+/**
+ *
+ * @param {Object} value
+ * @returns {Proxy}
+ */
+Observable.init = function(value) {
+    const data = {};
+    for(const key in value) {
+        const itemValue = value[key];
+        if(Validator.isJson(itemValue)) {
+            console.log(itemValue)
+            data[key] = Observable.init(itemValue);
+            continue;
+        }
+        data[key] = Observable(itemValue);
+    }
+
+    const $val = function() {
+        const result = {};
+        for(const key in data) {
+            const dataItem = data[key];
+            if(Validator.isObservable(dataItem)) {
+                result[key] = dataItem.val();
+            } else if(Validator.isProxy(dataItem)) {
+                result[key] = dataItem.$val();
+            } else {
+                result[key] = dataItem;
+            }
+        }
+        return result;
+    };
+
+    return new Proxy(data, {
+        get(target, property) {
+            if(property === '__isProxy__') {
+                return true;
+            }
+            if(property === '$val') {
+                return $val;
+            }
+            if(target[property] !== undefined) {
+                return target[property];
+            }
+            return undefined;
+        },
+        set(target, prop, newValue) {
+            if(target[prop] !== undefined) {
+                target[prop].set(newValue);
+            }
+        }
+    })
+};
+
+Observable.object = Observable.init;
+/**
+ *
+ * @param {Array} target
+ * @returns {ObservableItem}
+ */
+Observable.array = function(target) {
+    if(!Array.isArray(target)) {
+        throw new NativeDocumentError('Observable.array : target must be an array');
+    }
+    const observer = Observable(target);
+
+    const methods = ['push', 'pop', 'shift', 'unshift', 'reverse', 'sort', 'splice'];
+
+    methods.forEach((method) => {
+        observer[method] = function(...values) {
+            const target = observer.val();
+            const result = target[method].apply(target, arguments);
+            observer.trigger();
+            return result;
+        };
+    });
+
+    const overrideMethods = ['map', 'filter', 'reduce', 'some', 'every', 'find'];
+    overrideMethods.forEach((method) => {
+        observer[method] = function(callback) {
+            return observer.val()[method](callback);
+        };
+    })
+
+    return observer;
+};
+
+/**
+ * Enable auto cleanup of observables.
+ * @param {Boolean} enable
+ * @param {{interval:Boolean, threshold:number}} options
+ */
+Observable.autoCleanup = function(enable = false, options = {}) {
+    if(!enable) {
+        return;
+    }
+    const { interval = 60000, threshold = 100 } = options;
+
+    window.addEventListener('beforeunload', () => {
+        MemoryManager.cleanup();
+    });
+
+    setInterval(() => MemoryManager.cleanObservables(threshold), interval);
+}
+

package/src/data/ObservableChecker.js

@@ -0,0 +1,24 @@
+/**
+ *
+ * @param {ObservableItem} $observable
+ * @param {Function} $checker
+ * @class ObservableChecker
+ */
+export default function ObservableChecker($observable, $checker) {
+    this.observable = $observable;
+    this.checker = $checker;
+
+    this.subscribe = function(callback) {
+        return $observable.subscribe((value) => {
+            callback && callback($checker(value));
+        });
+    };
+
+    this.val = function() {
+        return $checker && $checker($observable.val());
+    };
+
+    this.cleanup = function() {
+        return $observable.cleanup();
+    }
+}

package/src/data/ObservableItem.js

@@ -0,0 +1,101 @@
+import DebugManager from "../utils/debug-manager";
+import MemoryManager from "./MemoryManager";
+import NativeDocumentError from "../errors/NativeDocumentError";
+import ObservableChecker from "./ObservableChecker";
+
+/**
+ *
+ * @param {*} value
+ * @class ObservableItem
+ */
+export default function ObservableItem(value) {
+    if (value === undefined) {
+        throw new NativeDocumentError('ObservableItem requires an initial value');
+    }
+    if(value instanceof ObservableItem) {
+        throw new NativeDocumentError('ObservableItem cannot be an Observable');
+    }
+
+    const $initialValue = (typeof value === 'object') ? JSON.parse(JSON.stringify(value)) : value;
+
+    let $previousValue = value;
+    let $currentValue = value;
+    let $isCleanedUp = false;
+
+    const $listeners = [];
+
+    const $memoryId = MemoryManager.register(this, $listeners);
+
+    this.trigger = () => {
+        $listeners.forEach(listener => {
+            try {
+                listener($currentValue, $previousValue);
+            } catch (error) {
+                DebugManager.error('Listener Undefined', 'Error in observable listener:', error);
+                this.unsubscribe(listener);
+            }
+        });
+
+    };
+
+    this.originalValue = () => $initialValue;
+
+    /**
+     * @param {*} data
+     */
+    this.set = (data) => {
+        const newValue = (typeof data === 'function') ? data($currentValue) : data;
+        if($currentValue === newValue) {
+            return;
+        }
+        $previousValue = $currentValue;
+        $currentValue = newValue;
+        this.trigger();
+    };
+
+    this.val = () => $currentValue;
+
+    this.cleanup = function() {
+        $listeners.splice(0);
+        $isCleanedUp = true;
+    };
+
+    /**
+     *
+     * @param {Function} callback
+     * @returns {(function(): void)}
+     */
+    this.subscribe = (callback) => {
+        if ($isCleanedUp) {
+            DebugManager.warn('Observable subscription', '⚠️ Attempted to subscribe to a cleaned up observable.');
+            return () => {};
+        }
+        if (typeof callback !== 'function') {
+            throw new NativeDocumentError('Callback must be a function');
+        }
+
+        $listeners.push(callback);
+        return () => this.unsubscribe(callback);
+    };
+
+    /**
+     * Unsubscribe from an observable.
+     * @param {Function} callback
+     */
+    this.unsubscribe = (callback) => {
+        const index = $listeners.indexOf(callback);
+        if (index > -1) {
+            $listeners.splice(index, 1);
+        }
+    };
+
+    /**
+     * Create an Observable checker instance
+     * @param callback
+     * @returns {ObservableChecker}
+     */
+    this.check = function(callback) {
+        return new ObservableChecker(this, callback)
+    };
+
+}

package/src/data/Store.js

@@ -0,0 +1,74 @@
+import {Observable} from "./Observable";
+
+export const Store = (function() {
+
+    const $stores = new Map();
+
+    return {
+        /**
+         * Create a new state follower and return it.
+         * @param {string} name
+         * @returns {ObservableItem}
+         */
+        use(name) {
+            const {observer: originalObserver, followers } = $stores.get(name);
+            const observerFollower = Observable(originalObserver.val());
+            const unSubscriber = originalObserver.subscribe(value => observerFollower.set(value));
+            const updaterUnsubscriber = observerFollower.subscribe(value => originalObserver.set(value));
+            observerFollower.destroy = () => {
+                unSubscriber();
+                updaterUnsubscriber();
+                observerFollower.cleanup();
+            };
+            followers.add(observerFollower);
+
+            return observerFollower;
+        },
+        /**
+         * @param {string} name
+         * @returns {ObservableItem}
+         */
+        follow(name) {
+            return this.use(name);
+        },
+        /**
+         * Create a new state and return the observer.
+         * @param {string} name
+         * @param {*} value
+         * @returns {ObservableItem}
+         */
+        create(name, value) {
+            const observer = Observable(value);
+            $stores.set(name, { observer, followers: new Set()});
+            return observer;
+        },
+        /**
+         * Get the observer for a state.
+         * @param {string} name
+         * @returns {null|ObservableItem}
+         */
+        get(name) {
+            const item = $stores.get(name);
+            return item ? item.observer : null;
+        },
+        /**
+         *
+         * @param {string} name
+         * @returns {{observer: ObservableItem, followers: Set}}
+         */
+        getWithFollowers(name) {
+            return $stores.get(name);
+        },
+        /**
+         * Delete a state.
+         * @param {string} name
+         */
+        delete(name) {
+            const item = $stores.get(name);
+            if(!item) return;
+            item.observer.cleanup();
+            item.followers.forEach(follower => follower.destroy());
+            item.observer.clear();
+        }
+    };
+}());

package/src/elements/content-formatter.js

@@ -0,0 +1,32 @@
+import HtmlElementWrapper from "../wrappers/HtmlElementWrapper";
+
+export const Div = HtmlElementWrapper('div');
+export const Span = HtmlElementWrapper('span');
+export const Label = HtmlElementWrapper('span');
+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.js

@@ -0,0 +1,110 @@
+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";
+
+
+/**
+ *
+ * @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) => {
+    for(const [key, {child}] of cache.entries()) {
+        if(keyIds.has(key)) {
+            continue;
+        }
+        child.remove();
+    }
+}
+
+/**
+ *
+ * @param {Array|Object|ObservableItem} data
+ * @param {Function} callback
+ * @param {?Function} key
+ * @returns {DocumentFragment}
+ */
+export function ForEach(data, callback, key) {
+    const element = document.createDocumentFragment();
+    const blockStart = document.createComment('Foreach start');
+    const blockEnd = document.createComment('Foreach end');
+
+    element.appendChild(blockStart);
+    element.appendChild(blockEnd);
+
+    let cache = new Map();
+
+    const handleContentItem = (item, indexKey) => {
+        const keyId = getKey(item, indexKey, key);
+
+        if(cache.has(keyId)) {
+            cache.get(keyId).indexObserver.set(indexKey);
+        }
+        else {
+            const indexObserver = Observable(indexKey);
+            let child = callback(item, indexObserver);
+            if(Validator.isStringOrObservable(child)) {
+                child = createTextNode(child);
+            }
+            cache.set(keyId, { child, indexObserver});
+        }
+        return keyId;
+    }
+    const keyIds = new Set();
+
+    const buildContent = () => {
+        const items = (Validator.isObservable(data)) ? data.val() : data;
+        const parent = blockEnd.parentNode;
+        if(!parent) {
+            return;
+        }
+        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);
+        let nextElementSibling = blockEnd;
+        for(const item of [...keyIds].reverse()) {
+            const { child } = cache.get(item);
+            if(child) {
+                if(nextElementSibling && nextElementSibling.previousSibling === child) {
+                    nextElementSibling = child;
+                    continue;
+                }
+                parent.insertBefore(child, nextElementSibling);
+                nextElementSibling = child;
+            }
+        }
+    };
+
+    buildContent();
+    if(Validator.isObservable(data)) {
+        data.subscribe(throttle((newValue, oldValue) => {
+            buildContent(newValue, oldValue);
+        }, 50, { debounce: true }))
+    }
+    return element;
+}

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

@@ -0,0 +1,86 @@
+import { Observable } from "../../data/Observable";
+import {createTextNode} from "../../wrappers/HtmlElementWrapper";
+import Validator from "../../utils/validator";
+import DebugManager from "../../utils/debug-manager.js";
+
+/**
+ * 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) {
+    if(!(Validator.isObservable(condition))) {
+        return DebugManager.warn('ShowIf', "ShowIf : condition must be an Observable / "+comment, condition);
+    }
+    const element = document.createDocumentFragment();
+    const positionKeeperStart = document.createComment('Show if : '+(comment || ''));
+    const positionKeeperEnd = document.createComment('Show if : '+(comment || ''));
+
+    element.appendChild(positionKeeperStart);
+    element.appendChild(positionKeeperEnd);
+
+    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 => {
+        const parent = positionKeeperEnd.parentNode;
+        if(value && parent) {
+            parent.insertBefore(getChildElement(), positionKeeperEnd);
+        } else {
+            if(Validator.isElement(childElement)){
+                childElement.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

@@ -0,0 +1,88 @@
+import NativeDocumentError from "../../errors/NativeDocumentError";
+import {createTextNode} from "../../wrappers/HtmlElementWrapper";
+import Validator from "../../utils/validator";
+
+/**
+ *
+ * @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");
+    }
+
+    const commentStart = document.createComment('Toggle Start');
+    const commentEnd = document.createComment('Toggle End');
+
+    const element = document.createDocumentFragment();
+    element.appendChild(commentStart);
+    element.appendChild(commentEnd);
+
+    const elements = {
+        onTrueNode: (Validator.isFunction(onTrue)) ? null : onTrue,
+        onFalseNode: (Validator.isFunction(onFalse)) ? null : onFalse,
+    };
+
+    if(Validator.isStringOrObservable(elements.onTrueNode)) {
+        elements.onTrueNode = createTextNode(elements.onTrueNode);
+    }
+    if(Validator.isStringOrObservable(elements.onFalseNode)) {
+        elements.onFalseNode = createTextNode(elements.onFalseNode);
+    }
+
+    const handle = (value) => {
+        const parent = commentEnd.parentNode;
+        if(!parent) {
+            return;
+        }
+        if(value) {
+            if(!elements.onTrueNode && Validator.isFunction(onTrue)) {
+                elements.onTrueNode = onTrue();
+            }
+            elements.onFalseNode && elements.onFalseNode.remove();
+            parent.insertBefore(elements.onTrueNode, commentEnd);
+        } else {
+            if(!elements.onFalseNode && Validator.isFunction(onFalse)) {
+                elements.onFalseNode = onFalse();
+            }
+            elements.onTrueNode && elements.onTrueNode.remove();
+            parent.insertBefore(elements.onFalseNode, commentEnd);
+        }
+    };
+
+    condition.subscribe(handle);
+    handle(condition.val());
+
+    return element;
+}
+
+/**
+ *
+ * @param condition
+ * @returns {{show: Function, otherwise: (((*) => {}):DocumentFragment)}
+ */
+export const When = function(condition) {
+    let $onTrue = null;
+    let $onFalse = null;
+
+    return {
+        show(onTrue) {
+            if(!Validator.isElement(onTrue) && !Validator.isFunction(onTrue)) {
+                throw new NativeDocumentError("When : onTrue must be a valid Element");
+            }
+            $onTrue = onTrue;
+            return this;
+        },
+        otherwise(onFalse) {
+            if(!Validator.isElement(onFalse) && !Validator.isFunction(onFalse)) {
+                throw new NativeDocumentError("When : onFalse must be a valid Element");
+            }
+            $onFalse = onFalse;
+            return Switch(condition, $onTrue, $onFalse);
+        }
+    }
+}

package/src/elements/description-list.js

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