native-document 1.0.8 → 1.0.10

package/index.js

@@ -2,6 +2,7 @@ export { default as HtmlElementWrapper, ElementCreator } from './src/wrappers/Ht
 
 import './src/utils/prototypes.js';
 
+export * from './src/utils/plugins-manager';
 export * from './src/utils/args-types';
 export * from './src/data/Observable';
 export * from './src/data/Store';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "native-document",
-  "version": "1.0.8",
+  "version": "1.0.10",
   "main": "index.js",
   "type": "module",
   "scripts": {

package/src/data/Observable.js

@@ -69,6 +69,10 @@ Observable.init = function(value) {
             data[key] = Observable.init(itemValue);
             continue;
         }
+        else if(Validator.isArray(itemValue)) {
+            data[key] = Observable.array(itemValue);
+            continue;
+        }
         data[key] = Observable(itemValue);
     }
 
@@ -86,6 +90,9 @@ Observable.init = function(value) {
         }
         return result;
     };
+    const $clone = function() {
+
+    };
 
     return new Proxy(data, {
         get(target, property) {
@@ -95,6 +102,9 @@ Observable.init = function(value) {
             if(property === '$val') {
                 return $val;
             }
+            if(property === '$clone') {
+                return $clone;
+            }
             if(target[property] !== undefined) {
                 return target[property];
             }
@@ -109,6 +119,27 @@ Observable.init = function(value) {
 };
 
 Observable.object = Observable.init;
+Observable.json = Observable.init;
+Observable.update = function($target, data) {
+    for(const key in data) {
+        const targetItem = $target[key];
+        const newValue = data[key];
+
+        if(Validator.isObservable(targetItem)) {
+            if(Validator.isArray(newValue)) {
+                Observable.update(targetItem, newValue);
+                continue;
+            }
+            targetItem.set(newValue);
+            continue;
+        }
+        if(Validator.isProxy(targetItem)) {
+            Observable.update(targetItem, newValue);
+            continue;
+        }
+        $target[key] = newValue;
+    }
+};
 /**
  *
  * @param {Array} target

package/src/data/ObservableItem.js

@@ -98,4 +98,15 @@ export default function ObservableItem(value) {
         return new ObservableChecker(this, callback)
     };
 
+    const $object = this;
+    Object.defineProperty($object, '$value', {
+        get() {
+            return $object.val();
+        },
+        set(value) {
+            $object.set(value);
+            return $object;
+        }
+    })
+
 }

package/src/elements/anchor.js

@@ -0,0 +1,84 @@
+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(String(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.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)) {
+            child.forEach((element) => {
+                insertBefore(parent, element, before);
+            });
+            return element;
+        }
+        insertBefore(parent, child, before);
+    };
+
+    element.remove = function(trueRemove) {
+        if(anchorEnd.parentNode === element) {
+            return;
+        }
+        let itemToRemove = anchorStart.nextSibling, tempItem;
+        while(itemToRemove !== anchorEnd) {
+            tempItem = itemToRemove.nextSibling;
+            trueRemove ? itemToRemove.remove() : element.nativeAppendChild(itemToRemove);
+            itemToRemove = tempItem;
+        }
+        if(trueRemove) {
+            anchorEnd.remove();
+            anchorStart.remove();
+        }
+    };
+
+    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/control/for-each.js

@@ -3,6 +3,7 @@ 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";
 
 
 /**
@@ -43,12 +44,8 @@ const cleanBlockByCache = (cache, keyIds) => {
  * @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);
+    const element = new Anchor('ForEach');
+    const blockEnd = element.endElement();
 
     let cache = new Map();
 

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

@@ -2,6 +2,7 @@ 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
@@ -15,12 +16,7 @@ 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 = document.createDocumentFragment();
-    const positionKeeperStart = document.createComment('Show if : '+(comment || ''));
-    const positionKeeperEnd = document.createComment('Show if : '+(comment || ''));
-
-    element.appendChild(positionKeeperStart);
-    element.appendChild(positionKeeperEnd);
+    const element = new Anchor('Show if : '+(comment || ''));
 
     let childElement = null;
     const getChildElement = () => {
@@ -45,13 +41,10 @@ export const ShowIf = function(condition, child, comment = null) {
         element.appendChild(getChildElement());
     }
     condition.subscribe(value => {
-        const parent = positionKeeperEnd.parentNode;
-        if(value && parent) {
-            parent.insertBefore(getChildElement(), positionKeeperEnd);
+        if(value) {
+            element.appendChild(getChildElement());
         } else {
-            if(Validator.isElement(childElement)){
-                childElement.remove();
-            }
+            element.remove();
         }
     });
 

package/src/elements/control/switch.js

@@ -1,88 +1,98 @@
 import NativeDocumentError from "../../errors/NativeDocumentError";
 import {createTextNode} from "../../wrappers/HtmlElementWrapper";
 import Validator from "../../utils/validator";
+import Anchor from "../anchor";
+
+
 
 /**
  *
- * @param {ObservableItem|ObservableChecker} condition
- * @param {*} onTrue
- * @param {*} onFalse
+ * @param {ObservableItem|ObservableChecker} $condition
+ * @param {{[key]: *}} values
  * @returns {DocumentFragment}
  */
-export const Switch = function (condition, onTrue, onFalse) {
+export const Match = function($condition, values) {
 
-    if(!Validator.isObservable(condition)) {
+    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 anchor = new Anchor();
+    const cache = new Map();
 
-    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);
+    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;
     }
-    if(Validator.isStringOrObservable(elements.onFalseNode)) {
-        elements.onFalseNode = createTextNode(elements.onFalseNode);
+
+    const defaultValue = $condition.val();
+    const defaultContent = getItem(defaultValue);
+    if(defaultContent) {
+        anchor.appendChild(defaultContent);
     }
 
-    const handle = (value) => {
-        const parent = commentEnd.parentNode;
-        if(!parent) {
-            return;
+    $condition.subscribe(value => {
+        const content = getItem(value);
+        anchor.remove();
+        if(content) {
+            anchor.appendChild(content);
         }
-        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);
-        }
-    };
+    })
+
+    return anchor;
+}
 
-    condition.subscribe(handle);
-    handle(condition.val());
 
-    return element;
+/**
+ *
+ * @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 condition
+ * @param {ObservableItem|ObservableChecker} $condition
  * @returns {{show: Function, otherwise: (((*) => {}):DocumentFragment)}
  */
-export const When = function(condition) {
+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) {
-            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);
+            return Switch($condition, $onTrue, $onFalse);
         }
     }
 }

package/src/router/Router.js

@@ -227,5 +227,24 @@ Router.create = function(options, callback) {
 };
 
 Router.get = function(name) {
-    return Router.routers[name || DEFAULT_ROUTER_NAME];
+    const router = Router.routers[name || DEFAULT_ROUTER_NAME];
+    if(!router) {
+        throw new RouterError(`Router not found for name: ${name}`);
+    }
+    return router;
+};
+
+Router.push = function(target, name = null) {
+    return Router.get(name).push(target);
+};
+
+Router.replace = function(target, name = null) {
+    return Router.get(name).replace(target);
+};
+
+Router.forward = function(name = null) {
+    return Router.get(name).forward();
+};
+Router.back = function(name = null) {
+    return Router.get(name).back();
 };

package/src/utils/plugins-manager.js

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

package/src/utils/prototypes.js

@@ -1,4 +1,6 @@
 import {withValidation} from "./args-types.js";
+import {Observable} from "../data/Observable";
+import Validator from "./validator";
 
 
 Function.prototype.args = function(...args) {
@@ -13,4 +15,18 @@ Function.prototype.errorBoundary = function(callback) {
             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));
 }

package/src/utils/validator.js

@@ -70,7 +70,13 @@ const Validator = {
 
         return children;
     },
-
+    containsObservables(data) {
+        if(!data) {
+            return false;
+        }
+        return Validator.isObject(data)
+            && Object.values(data).some(value => Validator.isObservable(value));
+    },
     validateAttributes(attributes) {
         if (!attributes || typeof attributes !== 'object') {
             return attributes;

package/src/wrappers/HtmlElementWrapper.js

@@ -4,6 +4,8 @@ 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";
 
 /**
  *
@@ -51,6 +53,20 @@ const addUtilsMethods = function(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);
 
@@ -89,7 +105,7 @@ export const ElementCreator = {
      * @returns {HTMLElement|DocumentFragment}
      */
     createElement(name)  {
-        return name ? document.createElement(name) : document.createDocumentFragment();
+        return name ? document.createElement(name) : new Anchor('Fragment');
     },
     /**
      *
@@ -101,6 +117,14 @@ export const ElementCreator = {
         const childrenArray = Array.isArray(children) ? children : [children];
         childrenArray.forEach(child => {
             if (child === null) return;
+            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;
@@ -137,6 +161,11 @@ export const ElementCreator = {
         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;
     }
 };