native-document 1.0.70 → 1.0.73

package/src/core/utils/EventEmitter.js

@@ -0,0 +1,46 @@
+import NativeDocumentError from "../errors/NativeDocumentError";
+
+export default function EventEmitter() {
+
+    this.__$events = null;
+
+}
+
+EventEmitter.prototype.on = function(eventName, callback) {
+    if(!this.__$events) {
+        this.__$events = new Map();
+    }
+    if(!this.__$events.has(eventName)) {
+        this.__$events.set(eventName, callback);
+        return;
+    }
+    const existingCallback = this.__$events.get(eventName);
+    if(!Array.isArray(existingCallback)) {
+        this.__$events.set(eventName, [existingCallback, callback]);
+        return;
+    }
+    existingCallback.push(callback);
+};
+
+EventEmitter.prototype.hasListeners = function(eventName) {
+    return !!this.__$events.get(eventName);
+};
+
+EventEmitter.prototype.trigger = async function(eventName, ...args) {
+    const callbacks = this.__$events.get(eventName);
+    if(!callbacks) {
+        // throw new NativeDocumentError(this.constructor.name, 'Event '+eventName+' not found');
+        return;
+    }
+
+    if(typeof callbacks === 'function') {
+        return await Promise.resolve(callbacks.apply(this, args))
+    }
+
+    let result = null;
+    for(let i = 0, length = callbacks.length; i < length; i++) {
+        result = await Promise.resolve(await callbacks[i].apply(this, args));
+    }
+    return result;
+};
+EventEmitter.prototype.emit = EventEmitter.prototype.trigger;

package/src/{utils → core/utils}/helpers.js

@@ -35,6 +35,18 @@ export const debounce = function(fn, delay, options = {}) {
     }
 };
 
+export const nextTick = function(fn) {
+    let pending = false;
+    return function(...args) {
+        if (pending) return;
+        pending = true;
+
+        Promise.resolve().then(() => {
+            fn.apply(this, args);
+            pending = false;
+        });
+    };
+};
 
 /**
  *

package/src/{utils → core/utils}/validator.js

@@ -3,6 +3,7 @@ import DebugManager from "./debug-manager";
 import NativeDocumentError from "../errors/NativeDocumentError";
 import ObservableChecker from "../data/ObservableChecker";
 import {NDElement} from "../wrappers/NDElement";
+import TemplateBinding from "../wrappers/TemplateBinding";
 
 const COMMON_NODE_TYPES = {
     ELEMENT: 1,
@@ -16,6 +17,9 @@ const Validator = {
     isObservable(value) {
         return  value?.__$isObservable || value instanceof ObservableItem || value instanceof ObservableChecker;
     },
+    isTemplateBinding(value) {
+        return  value?.__$isTemplateBinding || value instanceof TemplateBinding;
+    },
     isObservableWhenResult(value) {
         return value && (value.__$isObservableWhen || (typeof value === 'object' && '$target' in value && '$observer' in value));
     },
@@ -25,6 +29,9 @@ const Validator = {
     isProxy(value) {
         return value?.__isProxy__
     },
+    isObservableOrProxy(value) {
+        return Validator.isObservable(value) || Validator.isProxy(value);
+    },
     isAnchor(value) {
         return value?.__Anchor__
     },

package/src/{wrappers → core/wrappers}/ElementCreator.js

@@ -2,7 +2,7 @@ import Anchor from "../elements/anchor";
 import Validator from "../utils/validator";
 import AttributesWrapper from "./AttributesWrapper";
 import PluginsManager from "../utils/plugins-manager";
-import validator from "../utils/validator";
+import './prototype-extensions';
 
 const $nodeCache = new Map();
 let $textNodeCache = null;
@@ -92,41 +92,18 @@ export const ElementCreator = {
         PluginsManager.emit('AfterProcessChildren', parent);
     },
     getChild(child) {
-        if(child === null) {
+        if(child == null) {
             return null;
         }
-        if(Validator.isString(child)) {
-            child = child.resolveObservableTemplate ? child.resolveObservableTemplate() : child;
-            if(Validator.isString(child)) {
-                return ElementCreator.createStaticTextNode(null, child);
-            }
-        }
-        if (Validator.isElement(child)) {
-            return child;
-        }
-        if (Validator.isObservable(child)) {
-            return ElementCreator.createObservableNode(null, child);
-        }
-        if(Validator.isNDElement(child)) {
-            return child.$element ?? child.$build?.() ?? null;
-        }
-        if(validator.$element) {
-            return validator.$element;
-        }
-        if(Validator.isArray(child)) {
-            const fragment = document.createDocumentFragment();
-            for(let i = 0, length = child.length; i < length; i++) {
-                fragment.appendChild(this.getChild(child[i]));
-            }
-            return fragment;
-        }
-        if(Validator.isFunction(child)) {
-            PluginsManager.emit('BeforeProcessComponent', child);
-            return this.getChild(child());
-        }
-        if(child?.$hydrate) {
-            return ElementCreator.createHydratableNode(null, child);
+        if(child.toNdElement) {
+            do {
+                child =  child.toNdElement();
+                if(Validator.isElement(child)) {
+                    return child;
+                }
+            } while (child.toNdElement);
         }
+
         return ElementCreator.createStaticTextNode(null, child);
     },
     /**

package/src/{wrappers → core/wrappers}/NDElement.js

@@ -1,11 +1,8 @@
 import DocumentObserver from "./DocumentObserver";
 import PluginsManager from "../utils/plugins-manager";
-import Validator from "../utils/validator";
 import NativeDocumentError from "../errors/NativeDocumentError.js";
 import DebugManager from "../utils/debug-manager.js";
 
-import {EVENTS} from "../utils/events";
-
 export function NDElement(element) {
     this.$element = element;
     this.$observer = null;
@@ -104,136 +101,12 @@ NDElement.prototype.closedShadow = function(style = null) {
     return this.shadow('closed', style);
 };
 
-NDElement.prototype.attach = function(bindingHydrator) {
-    bindingHydrator.$hydrate(this.$element);
+NDElement.prototype.attach = function(methodName, bindingHydrator) {
+    bindingHydrator.$hydrate(this.$element, methodName);
     return this.$element;
 };
 
 
-/**
- *
- * ND events API
- *
- */
-
-const DelegatedEventsCallbackStore = {};
-
-const addCallbackToCallbacksStore = function(element, eventName, callback) {
-    if(!element) return;
-    if(!DelegatedEventsCallbackStore[eventName]) {
-        const eventStore = new WeakMap();
-        DelegatedEventsCallbackStore[eventName] = eventStore;
-        eventStore.set(element, callback);
-        return;
-    }
-    const eventStore = DelegatedEventsCallbackStore[eventName];
-
-    if(!eventStore.has(element)) {
-        eventStore.set(element, callback);
-        return;
-    }
-    const existingCallbacks = eventStore.get(element);
-    if(!Validator.isArray(existingCallbacks)) {
-        eventStore.set(element, [store[eventName], callback]);
-        return;
-    }
-    existingCallbacks.push(callback);
-}
-
-const handleDelegatedCallbacks = function(container, eventName) {
-    container.addEventListener(eventName, (event) => {
-        const eventStore = DelegatedEventsCallbackStore[eventName];
-        if(!eventStore) {
-            return;
-        }
-        let target = event.target;
-        while(target && target !== container) {
-            const callback = eventStore.get(target);
-            if(!callback) {
-                target = target.parentElement;
-                continue;
-            }
-
-            if(Validator.isFunction(callback)) {
-                callback.call(target, event);
-            }
-            else {
-                for(let i = 0; i < callback.length; i++) {
-                    callback[i].call(target, event);
-                }
-            }
-            return;
-        }
-    });
-};
-
-const preventDefaultWrapper = function(element, eventName, callback) {
-    element.addEventListener(eventName, (event) => {
-        event.preventDefault();
-        callback && callback.call(element, event);
-    });
-    return this;
-}
-
-const stopPropagationWrapper = function(element, eventName, callback) {
-    element.addEventListener(eventName, (event) => {
-        event.stopPropagation();
-        callback && callback.call(element, event);
-    });
-    return this;
-};
-
-const preventDefaultAndStopPropagationWrapper = function(element, eventName, callback) {
-    element.addEventListener(eventName, (event) => {
-        event.stopPropagation();
-        event.preventDefault();
-        callback && callback.call(element, event);
-    });
-    return this;
-};
-
-const captureEventWrapper = function(element, eventName, directHandler) {
-    if(directHandler) {
-        element.addEventListener(eventName, directHandler);
-        return this;
-    }
-    handleDelegatedCallbacks(element, eventName);
-    return this;
-}
-
-for(const event of EVENTS) {
-    const eventName = event.toLowerCase();
-    NDElement.prototype['on'+event] = function(callback) {
-        this.$element.addEventListener(eventName, callback);
-        return this;
-    };
-
-    NDElement.prototype['onPrevent'+event] = function(callback) {
-        preventDefaultWrapper(this.$element, eventName, callback);
-        return this;
-    };
-
-    NDElement.prototype['onStop'+event] = function(callback) {
-        stopPropagationWrapper(this.$element, eventName, callback);
-        return this;
-    };
-
-    NDElement.prototype['onPreventStop'+event] = function(callback) {
-        preventDefaultAndStopPropagationWrapper(this.$element, eventName, callback);
-        return this;
-    };
-
-    NDElement.prototype['when'+event] = function(callback) {
-        addCallbackToCallbacksStore(this.$element, eventName, callback);
-        return this;
-    };
-
-    NDElement.prototype['capture'+event] = function(directHandler) {
-        captureEventWrapper(this.$element, eventName, directHandler);
-        return this;
-    };
-}
-
 NDElement.prototype.with = function(methods) {
     if (!methods || typeof methods !== 'object') {
         throw new NativeDocumentError('extend() requires an object of methods');

package/src/core/wrappers/NdPrototype.js

@@ -0,0 +1,147 @@
+import { NDElement } from "./NDElement";
+import {EVENTS} from "../utils/events";
+
+let createNdElementInstance = (target) => {
+    attachEventPrototypes && attachEventPrototypes();
+    attachEventPrototypes = null;
+    createNdElementInstance = (target) => new NDElement(target);
+    return  new NDElement(target);
+};
+const property = {
+    configurable: true,
+    get() {
+        return createNdElementInstance(this);
+    }
+};
+
+Object.defineProperty(HTMLElement.prototype, 'nd', property);
+
+Object.defineProperty(DocumentFragment.prototype, 'nd', property);
+Object.defineProperty(NDElement.prototype, 'nd', {
+    configurable: true,
+    get: function() {
+        return this;
+    }
+});
+
+
+
+// ----------------------------------------------------------------
+// Events helpers
+// ----------------------------------------------------------------
+
+let attachEventPrototypes = () => {
+    EVENTS.forEach(eventSourceName => {
+        const eventName = eventSourceName.toLowerCase();
+        NDElement.prototype['on'+eventSourceName] = function(callback) {
+            this.$element.addEventListener(eventName, callback);
+            return this;
+        };
+
+        NDElement.prototype['onPrevent'+eventSourceName] = function(callback) {
+            _prevent(this.$element, eventName, callback);
+            return this;
+        };
+
+        NDElement.prototype['onStop'+eventSourceName] = function(callback) {
+            _stop(this.$element, eventName, callback);
+            return this;
+        };
+
+        NDElement.prototype['onPreventStop'+eventSourceName] = function(callback) {
+            _preventStop(this.$element, eventName, callback);
+            return this;
+        };
+    })
+};
+
+NDElement.prototype.on = function(name, callback, options) {
+    this.$element.addEventListener(name.toLowerCase(), callback, options);
+    return this;
+};
+
+const _prevent = function(element, eventName, callback) {
+    const handler = (event) => {
+        event.preventDefault();
+        callback && callback.call(element, event);
+    };
+    element.addEventListener(eventName, handler);
+    return this;
+}
+
+const _stop = function(element, eventName, callback) {
+    const handler = (event) => {
+        event.stopPropagation();
+        callback && callback.call(element, event);
+    };
+    element.addEventListener(eventName, handler);
+    return this;
+};
+
+const _preventStop = function(element, eventName, callback) {
+    const handler = (event) => {
+        event.stopPropagation();
+        event.preventDefault();
+        callback && callback.call(element, event);
+    };
+    element.addEventListener(eventName, handler);
+    return this;
+};
+
+
+
+// ----------------------------------------------------------------
+// Class attributes binder
+// ----------------------------------------------------------------
+const classListMethods = {
+    getClasses() {
+        return this.$element.className?.split(' ').filter(Boolean);
+    },
+    add(value) {
+        const classes = this.getClasses();
+        if(classes.indexOf(value) >= 0) {
+            return;
+        }
+        classes.push(value);
+        this.$element.className = classes.join(' ');
+    },
+    remove(value) {
+        const classes = this.getClasses();
+        const index = classes.indexOf(value);
+        if(index < 0) {
+            return;
+        }
+        classes.splice(index, 1);
+        this.$element.className = classes.join(' ');
+    },
+    toggle(value, force = undefined) {
+        const classes = this.getClasses();
+        const index = classes.indexOf(value);
+        if(index >= 0) {
+            if(force === true) {
+                return;
+            }
+            classes.splice(index, 1);
+        }
+        else {
+            if(force === false) {
+                return;
+            }
+            classes.push(value);
+        }
+        this.$element.className = classes.join(' ');
+    },
+    contains(value) {
+        return this.getClasses().indexOf(value) >= 0;
+    }
+}
+
+Object.defineProperty(HTMLElement.prototype, 'classes', {
+    configurable: true,
+    get() {
+        return {
+            $element: this,
+            ...classListMethods
+        };
+    }
+});

package/src/core/wrappers/TemplateBinding.js

@@ -0,0 +1,7 @@
+
+
+export default function TemplateBinding(hydrate) {
+    this.$hydrate = hydrate;
+}
+
+TemplateBinding.prototype.__$isTemplateBinding = true;

package/src/{wrappers → core/wrappers}/TemplateCloner.js

@@ -1,6 +1,7 @@
 import {ElementCreator} from "./ElementCreator";
 import {createTextNode} from "./HtmlElementWrapper";
 import Anchor from "../elements/anchor";
+import TemplateBinding from "./TemplateBinding";
 
 const cloneBindingsDataCache = new WeakMap();
 
@@ -8,7 +9,7 @@ const cloneBindingsDataCache = new WeakMap();
 const bindAttributes = (node, bindDingData, data) => {
     let attributes = null;
     if(bindDingData.attributes) {
-        attributes = attributes || {};
+        attributes = {};
         for (const attr in bindDingData.attributes) {
             attributes[attr] = bindDingData.attributes[attr](...data);
         }
@@ -38,29 +39,29 @@ const bindAttributes = (node, bindDingData, data) => {
     return null;
 };
 
-const $hydrateFn = function(hydrateFunction, target, element, property) {
+const $hydrateFn = function(hydrateFunction, targetType, element, property) {
     if(!cloneBindingsDataCache.has(element)) {
         // { classes, styles, attributes, value, attach }
         cloneBindingsDataCache.set(element, {});
     }
     const hydrationState = cloneBindingsDataCache.get(element);
-    if(target === 'value') {
+    if(targetType === 'value') {
         hydrationState.value = hydrateFunction;
         return;
     }
-    if(target === 'attach') {
-        hydrationState.attach = hydrateFunction;
-        return;
-    }
-    hydrationState[target] = hydrationState[target] || {};
-    hydrationState[target][property] = hydrateFunction;
+    hydrationState[targetType] = hydrationState[targetType] || {};
+    hydrationState[targetType][property] = hydrateFunction;
 }
 
 const bindAttachMethods = function(node, bindDingData, data) {
     if(!bindDingData.attach) {
         return null;
     }
-    bindDingData.attach(node, ...data);
+    for(const methodName in bindDingData.attach) {
+        node.nd[methodName](function(...args) {
+            bindDingData.attach[methodName].call(this, ...[...args, ...data]);
+        });
+    }
 };
 
 export function TemplateCloner($fn) {
@@ -108,13 +109,11 @@ export function TemplateCloner($fn) {
     };
 
 
-    const createBinding = (hydrateFunction, target) => {
-        return {
-            $hydrate : (element, property) => {
-                $hasBindingData = true;
-                $hydrateFn(hydrateFunction, target, element, property)
-            },
-        }
+    const createBinding = (hydrateFunction, targetType) => {
+        return new TemplateBinding((element, property) => {
+            $hasBindingData = true;
+            $hydrateFn(hydrateFunction, targetType, element, property)
+        });
     };
 
     this.style = (fn) => {

package/src/core/wrappers/prototype-extensions.js

@@ -0,0 +1,56 @@
+import ObservableItem from "../data/ObservableItem";
+import {NDElement} from "./NDElement";
+import TemplateBinding from "./TemplateBinding";
+import {ElementCreator} from "./ElementCreator";
+import PluginsManager from "../utils/plugins-manager";
+import Validator from "../utils/validator";
+
+String.prototype.toNdElement = function () {
+    const formattedChild = this.resolveObservableTemplate ? this.resolveObservableTemplate() : this;
+    if(Validator.isString(formattedChild)) {
+        return ElementCreator.createStaticTextNode(null, formattedChild);
+    }
+    return ElementCreator.getChild(null, formattedChild);
+};
+
+Element.prototype.toNdElement = function () {
+    return this;
+};
+Text.prototype.toNdElement = function () {
+    return this;
+};
+Comment.prototype.toNdElement = function () {
+    return this;
+};
+Document.prototype.toNdElement = function () {
+    return this;
+};
+DocumentFragment.prototype.toNdElement = function () {
+    return this;
+};
+
+ObservableItem.prototype.toNdElement = function () {
+    return ElementCreator.createObservableNode(null, this);
+};
+
+NDElement.prototype.toNdElement = function () {
+    return this.$element ?? this.$build?.() ?? this.build?.() ?? null;
+};
+
+Array.prototype.toNdElement = function () {
+    const fragment = document.createDocumentFragment();
+    for(let i = 0, length = this.length; i < length; i++) {
+        fragment.appendChild(ElementCreator.getChild(this[i]));
+    }
+    return fragment;
+};
+
+Function.prototype.toNdElement = function () {
+    const child = this;
+    PluginsManager.emit('BeforeProcessComponent', child);
+    return ElementCreator.getChild(child());
+};
+
+TemplateBinding.prototype.toNdElement = function () {
+    return ElementCreator.createHydratableNode(null, this);
+};

package/src/devtools/hrm/ComponentRegistry.js

@@ -1,5 +1,5 @@
 import {Anchor} from "../../../elements.js";
-import Validator from "../../utils/validator";
+import Validator from "../../core/utils/validator";
 
 const ComponentRegistry = (function() {
     const registry = new Map();

package/src/router/Route.js

@@ -1,4 +1,4 @@
-import {trim} from "../utils/helpers.js";
+import {trim} from "../core/utils/helpers.js";
 
 export const RouteParamPatterns = {
 

package/src/router/RouteGroupHelper.js

@@ -1,4 +1,4 @@
-import {trim} from "../utils/helpers.js";
+import {trim} from "../core/utils/helpers.js";
 
 export const RouteGroupHelper = {
     /**

package/src/router/Router.js

@@ -1,12 +1,12 @@
 import {Route} from "./Route.js";
-import Validator from "../utils/validator.js";
-import RouterError from "../errors/RouterError.js";
+import Validator from "../core/utils/validator.js";
+import RouterError from "../core/errors/RouterError.js";
 import {RouteGroupHelper} from "./RouteGroupHelper.js";
-import {trim} from "../utils/helpers.js";
+import {trim} from "../core/utils/helpers.js";
 import HashRouter from "./modes/HashRouter.js";
 import HistoryRouter from "./modes/HistoryRouter.js";
 import MemoryRouter from "./modes/MemoryRouter.js";
-import DebugManager from "../utils/debug-manager.js";
+import DebugManager from "../core/utils/debug-manager.js";
 import {RouterComponent} from "./RouterComponent.js";
 
 export const DEFAULT_ROUTER_NAME = 'default';

package/src/router/RouterComponent.js

@@ -1,3 +1,5 @@
+import Validator from "../core/utils/validator";
+
 /**
  *
  * @param {Router} router
@@ -6,15 +8,24 @@
 export function RouterComponent(router, container) {
 
     const $cache = new Map();
+    let $lastNodeInserted  = null;
 
     const updateContainer = function(node, route) {
         container.innerHTML = '';
+        let nodeToInsert = node;
         const layout = route.layout();
+        if(Validator.isNDElement(node)) {
+            nodeToInsert = node.node();
+        }
         if(layout) {
-            container.appendChild(layout(node));
+            container.appendChild(layout(nodeToInsert));
             return;
         }
-        container.appendChild(node);
+        if(Validator.isAnchor($lastNodeInserted)) {
+            $lastNodeInserted.remove();
+        }
+        container.appendChild(nodeToInsert);
+        $lastNodeInserted = node;
     };
 
     const handleCurrentRouterState = function(state) {

package/src/router/link.js

@@ -1,7 +1,7 @@
-import Validator from "../utils/validator.js";
+import Validator from "../core/utils/validator.js";
 import {Link as NativeLink} from "../../elements.js";
 import Router, {DEFAULT_ROUTER_NAME} from "./Router.js";
-import RouterError from "../errors/RouterError.js";
+import RouterError from "../core/errors/RouterError.js";
 
 
 export function Link(options, children){

package/src/router/modes/HistoryRouter.js

@@ -1,5 +1,5 @@
-import RouterError from '../../errors/RouterError';
-import DebugManager from "../../utils/debug-manager.js";
+import RouterError from '../../core/errors/RouterError';
+import DebugManager from "../../core/utils/debug-manager.js";
 
 export default function HistoryRouter() {