native-document 1.0.185 → 1.0.187

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "native-document",
-  "version": "1.0.185",
+  "version": "1.0.187",
   "description": "A reactive JavaScript framework that preserves native DOM simplicity without sacrificing modern features",
   "author": "AfroCodeur <https://github.com/afrocodeur>",
   "license": "MIT",

package/router.js

@@ -7,5 +7,5 @@ import { Link } from './src/router/link.js';
 export {
     RouteParamPatterns,
     Router,
-    Link
-}
+    Link,
+};

package/src/components/avatar/Avatar.js

@@ -123,13 +123,18 @@ Avatar.prototype.alt = function(alt) {
 
 /**
  * Sets the name associated with the avatar
- * @param {string} name - The name
+ * @param {string|Observable} name - The name
  * @returns {Avatar}
  */
 Avatar.prototype.name = function(name) {
     this.$description.name = name;
     if(!this.$description.initials) {
-        this.$description.initials = name.split(' ').map(n => n[0]).join('');
+        if(name.__$Observable) {
+            this.$description.initials = name.format((value) => value.split(' ').map(n => n[0]).join(''));
+        }
+        else {
+            this.$description.initials = name.split(' ').map(n => n[0]).join('');
+        }
     }
     return this;
 };

package/src/components/dropdown/Dropdown.js

@@ -308,7 +308,7 @@ Dropdown.prototype.trigger = function(trigger, includeTriggerIntoGhost = true) {
  * @returns {this}
  */
 Dropdown.prototype.add = function(item, props = {}) {
-    this.$description.items.push(normalizeDropdownItem(item, null, props));
+    this.$description.items.push(normalizeDropdownItem(item, props));
     return this;
 };
 

package/src/components/dropdown/DropdownItem.js

@@ -36,6 +36,7 @@ export default function DropdownItem(props = {}) {
         data: null,
         render: null,
         renderContent: null,
+        action: null,
         props,
     };
     this.aria = { 'role': 'option', 'tabindex': '-1' };
@@ -115,6 +116,14 @@ DropdownItem.prototype.content = function(content) {
     this.$description.content = content;
     return this;
 };
+/**
+ * @param {Function} action
+ * @returns {this}
+ */
+DropdownItem.prototype.action = function(action) {
+    this.$description.action = action;
+    return this;
+};
 
 /**
  * @param {*} data

package/src/components/dropdown/helpers.js

@@ -18,6 +18,12 @@ export const normalizeDropdownItem = (raw, mapper = null, props = {}) => {
         return raw;
     }
 
+    if(typeof raw === 'function') {
+        const item = new DropdownItem({});
+        raw(item);
+        return item;
+    }
+
     let config;
 
     if(typeof mapper === 'function') {

package/src/components/dropdown/types/DropdownItem.d.ts

@@ -25,6 +25,7 @@ export interface DropdownItemInterface extends BaseComponent {
     content(content: ValidChild): this;
     data(data: unknown): this;
     getData(): unknown;
+    action(action: Function): this;
     shortcut(shortcut: ValidChild): this;
     render(template: (description: DropdownItemDescription, instance: DropdownItemInterface) => ValidChild): this;
     renderContent(callback: (item: DropdownItemInterface) => ValidChild): this;

package/src/core/data/ObservableItem.js

@@ -174,7 +174,12 @@ ObservableItem.prototype.triggerWatchersAndFirstListener = function(operations)
 ObservableItem.prototype.$runAssocTrigger = function() {
     this.$firstListener = null;
     if(this.$watchers?.size && this.$listeners?.length) {
-        this.$trigger = (this.$listeners.length === 1) ? this.triggerWatchersAndFirstListener : this.triggerAll;
+        if(this.$listeners.length === 1) {
+            this.$firstListener = this.$listeners[0];
+            this.$trigger = this.triggerWatchersAndFirstListener;
+        } else {
+            this.$trigger =  this.triggerAll;
+        }
         return;
     }
     if(this.$listeners?.length) {

package/src/core/wrappers/AttributesWrapper.js

@@ -171,10 +171,10 @@ const AttributesWrapper = (element, attributes = {}) => {
             element.setAttribute(attributeName, value);
             continue;
         }
-        if(value.$hydrate) {
-            value.$hydrate(element,  attributeName, 'attribute');
-            continue;
-        }
+        // if(value.$hydrate) {
+        //     value.$hydrate(element,  attributeName, 'attribute');
+        //     continue;
+        // }
         // const attributeName = originalAttributeName.toLowerCase();
         if(value.__$Observable) {
             if(BOOLEAN_ATTRIBUTES.has(attributeName)) {
@@ -199,9 +199,9 @@ const AttributesWrapper = (element, attributes = {}) => {
             continue;
         }
 
-        // if(value.__$isTemplateBinding) {
-        //     // value.$hydrate(element, attributeName, 'attribute');
-        // }
+        if(value.__$isTemplateBinding) {
+            value.$hydrate(element, attributeName, 'attribute');
+        }
 
         element.setAttribute(attributeName, value);
     }

package/src/core/wrappers/template-cloner/NodeCloner.js

@@ -1,7 +1,6 @@
 import {ElementCreator} from '../ElementCreator';
 import {createTextNode} from '../HtmlElementWrapper';
 import {NDElement} from '../NDElement';
-import {call} from '@babel/traverse/lib/path/context';
 
 /**
  * Stores deferred attribute, class, style, and event bindings for a cloneable element.
@@ -66,18 +65,15 @@ const getPropertyValue = (callbackOrProperty, data) => {
 };
 
 
-const $nodeClonedCallbackData = new WeakMap();
-
-const $nodeClonerCallbackCaller = (callback, event) => {
-    const data = $nodeClonedCallbackData.get(event.target);
-    callback.apply(event.target, [...data, event]);
+const $nodeClonerCallbackCaller = function(callback, event) {
+    const data = event.currentTarget.$ndScopeData;
+    callback.apply(event.currentTarget, [...data, event]);
 };
 
 NodeCloner.prototype.resolveMethods = function() {
     for(const methodName in this.$ndMethods) {
         const callback = this.$ndMethods[methodName];
-        const uniqueCallback = $nodeClonerCallbackCaller.bind(null, callback);
-        this.$uniqueCallbacks.set(methodName, uniqueCallback);
+        this.$ndMethods[methodName] = $nodeClonerCallbackCaller.bind($nodeClonerCallbackCaller, callback);
     }
 };
 /**
@@ -86,95 +82,108 @@ NodeCloner.prototype.resolveMethods = function() {
  *
  * @internal
  */
-NodeCloner.prototype.resolve = function() {
-    if(this.$content) {
-        return;
-    }
-    this.resolveMethods();
-    const steps = [];
-    if(this.$ndMethods) {
-        const methods = Object.keys(this.$ndMethods);
-        if(methods.length === 1) {
-            const methodName = methods[0];
-            steps.push((clonedNode) => {
-                const uniqueCallback = this.$uniqueCallbacks.get(methodName);
-                clonedNode.nd[methodName](uniqueCallback);
-            });
+NodeCloner.prototype.$cleanResolve = function() {
+    const fns = [];
+    const fnsParamNames = [];
+    const fnsParams = [];
+
+    const $element = this.$element;
+
+    if(this.$ndMethods !== null) {
+        const methodNames = Object.keys(this.$ndMethods);
+        if(methodNames.length === 1) {
+            const methodName = methodNames[0];
+            const callback = this.$ndMethods[methodName];
+            if($element[methodName]) {
+                fns.push(`clonedNode.${methodName}(callback)`);
+            } else {
+                fns.push(`clonedNode.nd.${methodName}(callback)`);
+            }
+            fnsParamNames.push('callback');
+            fnsParams.push(callback);
         } else {
-            steps.push((clonedNode) => {
-                const nd = clonedNode.nd;
-                for(const methodName in this.$ndMethods) {
-                    const uniqueCallback = this.$uniqueCallbacks.get(methodName);
 
-                    // callback.length === 0 ? callback : this.$ndMethods[methodName].bind(clonedNode, ...data)
-                    nd[methodName](uniqueCallback);
+            for(const methodName in this.$ndMethods) {
+                const callbackName = methodName+'Callback';
+                const callback = this.$ndMethods[methodName];
+                if($element[methodName]) {
+                    fns.push(`clonedNode.${methodName}(${callbackName})`);
+                } else {
+                    fns.push(`clonedNode.nd.${methodName}(${callbackName})`);
                 }
-            });
+                fnsParamNames.push(callbackName);
+                fnsParams.push(callback);
+            }
         }
     }
-    if(this.$classes) {
+    if(this.$classes !== null) {
         const cache = {};
         const keys = Object.keys(this.$classes);
 
         if(keys.length === 1) {
             const key = keys[0];
             const callback = this.$classes[key];
-            steps.push((clonedNode, data) => {
-                cache[key] = getPropertyValue(callback, data);
-                ElementCreator.processClassAttribute(clonedNode, cache);
-            });
+            fns.push(`ElementCreator.processClassAttribute(clonedNode, { ${key}: getPropertyValue(getPropertyValueCallback, data) })`);
+            fnsParamNames.push('getPropertyValueCallback');
+            fnsParams.push(callback);
         } else {
-            steps.push((clonedNode, data) => {
-                ElementCreator.processClassAttribute(clonedNode, buildProperties(cache, this.$classes, data));
-            });
+            fns.push(`const classesCache = {}`);
+            fns.push(`ElementCreator.processClassAttribute(clonedNode, buildProperties(classesCache, $classes, data))`);
+            fnsParamNames.push('$classes');
+            fnsParams.push(this.$classes);
         }
     }
-    if(this.$styles) {
+    if(this.$styles !== null) {
         const cache = {};
         const keys = Object.keys(this.$styles);
 
         if(keys.length === 1) {
             const key = keys[0];
             const callback = this.$styles[key];
-            steps.push((clonedNode, data) => {
-                cache[key] = getPropertyValue(callback, data);
-                ElementCreator.processStyleAttribute(clonedNode, cache);
-            });
+            fns.push(`ElementCreator.processStyleAttribute(clonedNode, { ${key}: getPropertyValue(getStyleValueCallback, data) } )`);
+            fnsParamNames.push('getStyleValueCallback');
+            fnsParams.push(callback);
         } else {
-            steps.push((clonedNode, data) => {
-                ElementCreator.processStyleAttribute(clonedNode, buildProperties(cache, this.$styles, data));
-            });
+            fns.push(`const stylesCache = {}`);
+            fns.push(`ElementCreator.processStyleAttribute(clonedNode, buildProperties(stylesCache, $styles, data))`);
+            fnsParamNames.push('$styles');
+            fnsParams.push(this.$styles);
         }
     }
-    if(this.$attrs) {
+    if(this.$attrs !== null) {
         const cache = {};
         const keys = Object.keys(this.$attrs);
 
         if(keys.length === 1) {
             const key = keys[0];
             const callback = this.$attrs[key];
-            steps.push((clonedNode, data) => {
-                cache[key] = getPropertyValue(callback, data);
-                ElementCreator.processAttributes(clonedNode, cache);
-            });
+            fns.push(`ElementCreator.processAttributes(clonedNode, { ${key}: getPropertyValue(getAttrValueCallback, data) } )`);
+            fnsParamNames.push('getAttrValueCallback');
+            fnsParams.push(callback);
         } else {
-            steps.push((clonedNode, data) => {
-                ElementCreator.processAttributes(clonedNode, buildProperties(cache, this.$attrs, data));
-            });
+            fns.push(`const attrsCache = {}`);
+            fns.push(`ElementCreator.processAttributes(clonedNode, buildProperties(attrsCache, this.$attrs, data))`);
+            fnsParamNames.push('$attrs');
+            fnsParams.push(this.$attrs);
         }
     }
 
-    const stepsCount = steps.length;
-    const $element = this.$element;
+    fnsParamNames.push('ElementCreator', 'buildProperties', 'getPropertyValue', '$element', 'data');
+    fnsParams.push(ElementCreator, buildProperties, getPropertyValue, $element);
+    fns.unshift('const clonedNode = $element.cloneNode(false)', 'clonedNode.$ndScopeData = data');
+    fns.push('return clonedNode');
 
-    this.cloneNode = (data) => {
-        const clonedNode = $element.cloneNode(false);
-        $nodeClonedCallbackData.set(clonedNode, data);
-        for(let i = 0; i < stepsCount; i++) {
-            steps[i](clonedNode, data);
-        }
-        return clonedNode;
-    };
+    this.cloneNode = (new Function(fnsParamNames, fns.join(';'))).bind(null, ...fnsParams);
+};
+
+NodeCloner.prototype.resolve = function() {
+    if(this.$content) {
+        return;
+    }
+    this.resolveMethods();
+    this.$cleanResolve();
+    this.resolve = this.$cleanResolve();
+    return this;
 };
 
 /**

package/src/ui/components/form/fields/FieldRender.js

@@ -1,5 +1,6 @@
 import {Div, Label, Input, Span, ShowIf, ForEachArray} from '../../../../../elements';
 import {buildInputWithSlots} from '../helpers';
+import {Observable} from '../../../../core/data/Observable';
 
 import './field.css';
 
@@ -106,13 +107,14 @@ const setupEvents = (input, $desc, instance) => {
 };
 
 const buildErrors = ($desc) => {
-    return ShowIf($desc.showErrors, () => {
-        return ShowIf($desc.hasErrors,
-            () => Div({class: 'field-errors', ...($desc.elementsProps.error || {})},
-                ForEachArray($desc.errors, (error) =>
-                    Span({class: 'field-error'}, (typeof error === 'string' ? error.toNdChildren() : error)),
-                ),
+    const $shouldShowErrors = Observable.computed((showErrors, hasErrors) => {
+        return showErrors && hasErrors;
+    }, [$desc.showErrors, $desc.hasErrors]);
+    return ShowIf($shouldShowErrors,
+        () => Div({class: 'field-errors', ...($desc.elementsProps.error || {})},
+            ForEachArray($desc.errors, (error) =>
+                Span({class: 'field-error'}, (typeof error === 'string' ? error.toNdChildren() : error)),
             ),
-        );
-    });
+        ),
+    );
 };

package/src/ui/components/popover/PopoverRender.js

@@ -61,6 +61,7 @@ export default function PopoverRender($desc, instance, classPrefix = 'popover')
 
 
     let position;
+    const isSupportsPopover = supportsPopover();
     const updatePosition = (state) => {
         if(!state) {
             return;
@@ -79,7 +80,7 @@ export default function PopoverRender($desc, instance, classPrefix = 'popover')
             if($desc.showIf && $desc.showIf.val() === false) {
                 return;
             }
-            if(supportsPopover()) {
+            if(isSupportsPopover) {
                 popover.showPopover();
             }