native-document 1.0.17-1.4 → 1.0.17-1.5

package/package.json

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

package/src/core/data/ObservableItem.js

@@ -160,6 +160,7 @@ ObservableItem.prototype.triggerWatchersAndFirstListener = function(operations)
     this.triggerFirstListener(operations);
 };
 
+
 /**
  * Selects and assigns the optimal trigger strategy based on the current
  * combination of listeners and watchers (internal).
@@ -167,31 +168,40 @@ ObservableItem.prototype.triggerWatchersAndFirstListener = function(operations)
  *
  * @internal
  */
-ObservableItem.prototype.assocTrigger = function() {
+ObservableItem.prototype.$runAssocTrigger = function() {
     this.$firstListener = null;
     if(this.$watchers?.size && this.$listeners?.length) {
-        this.$firstListener = this.$listeners[0];
-        this.trigger = this.$firstListener.length === 0 ? this.$firstListener : this.triggerFirstListener;
-        this.trigger = (this.$listeners.length === 1) ? this.triggerWatchersAndFirstListener : this.triggerAll;
+        this.$trigger = (this.$listeners.length === 1) ? this.triggerWatchersAndFirstListener : this.triggerAll;
         return;
     }
     if(this.$listeners?.length) {
         if(this.$listeners.length === 1) {
             this.$firstListener = this.$listeners[0];
-            this.trigger = this.$firstListener.length === 0 ? this.$firstListener : this.triggerFirstListener;
+            this.$trigger = this.$firstListener.length === 0 ? this.$firstListener : this.triggerFirstListener;
         }
         else {
-            this.trigger = this.triggerListeners;
+            this.$trigger = this.triggerListeners;
         }
         return;
     }
     if(this.$watchers?.size) {
-        this.trigger = this.triggerWatchers;
+        this.$trigger = this.triggerWatchers;
         return;
     }
-    this.trigger = noneTrigger;
+    this.$trigger = noneTrigger;
+};
+ObservableItem.prototype.assocTrigger = function() {
+    this.$trigger = null;
 };
-ObservableItem.prototype.trigger = noneTrigger;
+Object.defineProperty(ObservableItem.prototype, 'trigger', {
+    value: function (operations) {
+        if(!this.$trigger) {
+            this.$runAssocTrigger();
+        }
+        return this.$trigger(operations);
+    },
+    configurable: false,
+});
 
 
 const $setOperation = { action: 'set' };

package/src/core/elements/anchor/anchor.js

@@ -2,6 +2,7 @@ import Validator from '../../utils/validator';
 import {ElementCreator} from '../../wrappers/ElementCreator';
 import AnchorWithSentinel from './anchor-with-sentinel';
 import oneChildAnchorOverwriting from './one-child-anchor-overwriting';
+import DebugManager from '../../utils/debug-manager';
 
 /**
  * Creates an anchor fragment — a managed DocumentFragment delimited by comment sentinels.
@@ -34,7 +35,7 @@ export default function Anchor(name, isUniqueChild = false) {
         ? () => true: (parent) => (parent.firstChild === anchorStart && parent.lastChild === anchorEnd);
 
     const insertBefore = (parent, child, target) => {
-        const childElement = Validator.isElement(child) ? child : ElementCreator.getChild(child);
+        const childElement = child.__$isNativeNode ? child : ElementCreator.getChild(child);
         insertBeforeRaw(parent, childElement, target);
     };
 
@@ -84,7 +85,7 @@ export default function Anchor(name, isUniqueChild = false) {
     anchorFragment.appendRaw = anchorFragment.appendChildRaw;
 
     anchorFragment.insertAtStart = function(child) {
-        child = Validator.isElement(child) ? child : ElementCreator.getChild(child);
+        child = child.__$isNativeNode? child : ElementCreator.getChild(child);
         anchorFragment.insertAtStartRaw(child);
     };
 
@@ -141,7 +142,7 @@ export default function Anchor(name, isUniqueChild = false) {
     anchorFragment.delete = anchorFragment.removeWithAnchors;
 
     anchorFragment.replaceContent = function(child) {
-        const childElement = Validator.isElement(child) ? child : ElementCreator.getChild(child);
+        const childElement = child.__$isNativeNode ? child : ElementCreator.getChild(child);
         anchorFragment.replaceContentRaw(childElement);
     };
 

package/src/core/elements/anchor/one-child-anchor-overwriting.js

@@ -10,7 +10,7 @@ export default function oneChildAnchorOverwriting(anchor, parent) {
     anchor.getParent = () => parent;
 
     anchor.appendChild = (child) => {
-        child = Validator.isElement(child) ? child : ElementCreator.getChild(child);
+        child = child.__$isNativeNode ? child : ElementCreator.getChild(child);
         parent.appendChild(child);
     };
 
@@ -19,7 +19,7 @@ export default function oneChildAnchorOverwriting(anchor, parent) {
     anchor.appendRaw = anchor.appendChildRaw;
 
     anchor.insertAtStart = (child) => {
-        child = Validator.isElement(child) ? child : ElementCreator.getChild(child);
+        child = child.__$isNativeNode ? child : ElementCreator.getChild(child);
         parent.firstChild ? parent.insertBefore(child, parent.firstChild) : parent.appendChild(child);
     };
     anchor.insertAtStartRaw = (child) => {
@@ -33,7 +33,7 @@ export default function oneChildAnchorOverwriting(anchor, parent) {
     };
 
     anchor.replaceContent = function(content) {
-        const child = Validator.isElement(content) ? content : ElementCreator.getChild(content);
+        const child = (content && content.__$isNativeNode) ? content : ElementCreator.getChild(content);
         parent.replaceChildren(child);
     };
 
@@ -43,7 +43,7 @@ export default function oneChildAnchorOverwriting(anchor, parent) {
     anchor.setContent = anchor.replaceContent;
 
     anchor.insertBefore = (child, anchor) => {
-        child = Validator.isElement(child) ? child : ElementCreator.getChild(child);
+        child = child.__$isNativeNode ? child : ElementCreator.getChild(child);
         parent.insertBefore(child, anchor);
     };
     anchor.insertBeforeRaw = (child, anchor) => {

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

@@ -0,0 +1,59 @@
+
+
+export default function ForEachArrayCache(isIndexesRequired) {
+    this.$nodes = new Map();
+    this.$indexes = isIndexesRequired ? new Map() : null;
+
+    this.has = this.$nodes.has.bind(this.$nodes);
+
+    this.keys = function() {
+        return Array.from(this.$nodes.keys());
+    };
+
+    if(isIndexesRequired) {
+        this.delete = function(item) {
+            this.$nodes.get(item)?.nd.destroy();
+            this.$nodes.delete(item);
+            this.$indexes.delete(item);
+        };
+
+        this.set = function(item, child, index) {
+            this.$nodes.set(item, child);
+            this.$indexes.set(item, index);
+        };
+
+        this.clear = function() {
+            for(const [_, node] in this.$nodes.entries()) {
+                node.nd.destroy();
+            }
+            this.$nodes.clear();
+            this.$indexes.clear();
+        };
+
+        this.get = function(item) {
+            return {
+                child: this.$nodes.get(item),
+                indexObserver: this.$indexes.get(item),
+            };
+        };
+    } else {
+
+        this.delete = (item) => {
+            this.$nodes.get(item)?.nd.destroy();
+            this.$nodes.delete(item);
+        };
+        this.set = this.$nodes.set.bind(this.$nodes);
+        this.clear = function() {
+            for(const [_, node] in this.$nodes.entries()) {
+                node.nd.destroy();
+            }
+            this.$nodes.clear();
+        };
+
+        this.get = function(item) {
+            return { child: this.$nodes.get(item), indexObserver: null };
+        };
+    }
+
+}
+

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

@@ -1,6 +1,7 @@
 import Anchor from '../anchor/anchor';
 import { ElementCreator } from '../../wrappers/ElementCreator';
 import NativeDocumentError from '../../errors/NativeDocumentError';
+import ForEachArrayCache from './for-each-array-cache';
 
 
 const CREATE_AND_CACHE_ACTIONS = new Set(['clear', 'push', 'unshift', 'replace']);
@@ -30,9 +31,9 @@ export function ForEachArray(data, callback, configs = {}) {
     const element = Anchor('ForEach Array', configs.isParentUniqueChild);
     const blockEnd = element.endElement();
 
-    const cache = new Map();
     let lastNumberOfItems = 0;
     const isIndexRequired = callback.length >= 2;
+    const cache = new ForEachArrayCache(isIndexRequired);
 
     const clear = (items) => {
         element.removeChildren();

package/src/core/wrappers/AttributesWrapper.js

@@ -99,7 +99,7 @@ export const bindBooleanAttribute = (element, attributeName, value) => {
     const isObservable = value.__$Observable;
     const defaultValue = isObservable? value.val() : value;
 
-    const attributeRealName = BOOL_ATTRIBUTES_NAME[attributeName];
+    const attributeRealName = BOOL_ATTRIBUTES_NAME[attributeName] || attributeName;
 
     if(typeof defaultValue === 'boolean') {
         element[attributeRealName] = defaultValue;
@@ -145,29 +145,29 @@ export const bindAttributeWithObservable = (element, attributeName, value) => {
  * @param {HTMLElement} element
  * @param {Object} attributes
  */
-const AttributesWrapper = (element, attributes) => {
+const AttributesWrapper = (element, attributes = {}) => {
 
     if(process.env.NODE_ENV === 'development') {
         Validator.validateAttributes(attributes);
     }
 
-    for(const originalAttributeName in attributes) {
-        const value = attributes[originalAttributeName];
+    for(const attributeName in attributes) {
+        const value = attributes[attributeName];
         if(value == null) {
             continue;
         }
         const type = typeof value;
         if(type === 'string' || type === 'number') {
-            element.setAttribute(originalAttributeName, value);
+            element.setAttribute(attributeName, value);
             continue;
         }
-        const attributeName = originalAttributeName.toLowerCase();
+        // const attributeName = originalAttributeName.toLowerCase();
         if(value.__$Observable) {
             if(BOOLEAN_ATTRIBUTES.has(attributeName)) {
                 bindBooleanAttribute(element, attributeName, value);
                 continue;
             }
-            bindAttributeWithObservable(element, originalAttributeName, value);
+            bindAttributeWithObservable(element, attributeName, value);
             continue;
         }
         if(type ===  'object') {

package/src/core/wrappers/ElementCreator.js

@@ -7,7 +7,7 @@ export const ElementCreator = {
     createTextNode() {
         if(!$textNodeCache) {
             $textNodeCache = document.createTextNode('');
-            ElementCreator.createTextNode = () => $textNodeCache.cloneNode();
+            ElementCreator.createTextNode = $textNodeCache.cloneNode.bind($textNodeCache);
         }
         return $textNodeCache.cloneNode();
     },
@@ -57,6 +57,11 @@ export const ElementCreator = {
         parent && parent.appendChild(text);
         return text;
     },
+    createStaticTextNodeWithoutParent: (value) => {
+        const text = ElementCreator.createTextNode();
+        text.nodeValue = value;
+        return text;
+    },
     /**
      *
      * @param {string} name
@@ -80,29 +85,29 @@ export const ElementCreator = {
      * @param {HTMLElement|DocumentFragment} parent
      */
     processChildren: (children, parent) => {
-        if(children === null) return;
         if(process.env.NODE_ENV === 'development') {
             PluginsManager.emit('BeforeProcessChildren', parent);
         }
         const child = ElementCreator.getChild(children);
-        if(child) {
-            parent.appendChild(child);
-        }
+        parent.appendChild(child);
         if(process.env.NODE_ENV === 'development') {
             PluginsManager.emit('AfterProcessChildren', parent);
         }
     },
     async safeRemove(element) {
         await element.remove();
-
     },
     getChild: (child) => {
-        if (child == null) return null;
+        if (child == null) {
+            return null;
+        }
 
         child = child.toNdElement();
-        if (child instanceof Node) return child;
+        if (child && child.__$isNativeNode) {
+            return child;
+        }
 
-        while (child != null && !(child instanceof Node)) {
+        while (child != null && !child.__$isNativeNode) {
             child = child.toNdElement?.();
         }
 

package/src/core/wrappers/HtmlElementWrapper.js

@@ -36,10 +36,11 @@ export const createTextNode = (value) => {
  * @returns {HTMLElement} The configured element
  */
 export const createVoidHtmlElement = (element, attributes) => {
-    ElementCreator.processAttributes(element, attributes);
+    attributes && ElementCreator.processAttributes(element, attributes);
     return element;
 };
 
+
 const OBJECT_PROTOTYPE = Object.prototype;
 /**
  * Applies attributes and children to an existing HTMLElement.
@@ -53,13 +54,17 @@ const OBJECT_PROTOTYPE = Object.prototype;
  */
 export const createHtmlElement = (element, _attributes, _children = null) => {
     let attributes = _attributes, children = _children;
-    if((!_attributes || !_children) && (typeof _attributes !== 'object' || Array.isArray(_attributes) || _attributes === null || Object.getPrototypeOf(_attributes) !== OBJECT_PROTOTYPE ||  _attributes.$hydrate)) { // IF it's not a JSON
+    if(_attributes.__$isValidNdChild) { // If attributes is a ValidChild
         attributes = _children;
         children = _attributes;
     }
 
-    ElementCreator.processAttributes(element, attributes);
-    ElementCreator.processChildren(children, element);
+    if(attributes) {
+        ElementCreator.processAttributes(element, attributes);
+    }
+    if(children) {
+        ElementCreator.processChildren(children, element);
+    }
     return element;
 };
 

package/src/core/wrappers/NDElement.js

@@ -195,19 +195,26 @@ NDElement.prototype.destroy = function() {
         observer.disconnect();
     }
 
-    const children = this.$element?.querySelectorAll('[data--nd-before-unmount]');
+    const treewalk = document.createTreeWalker(this.$element, NodeFilter.SHOW_ELEMENT | NodeFilter.SHOW_TEXT);
+    const nodes = [];
+    while(treewalk.nextNode()) {
+        nodes.push(treewalk.currentNode);
+    }
 
-    for(let i = 0, length = children.length; i < length; i++) {
-        const child = children[i];
+    for(let i = 0, length = nodes.length; i < length; i++) {
+        const child = nodes[i];
         child.remove();
-        child.__$controller?.abort();
-        child.__$controller = null;
-        $lifeCycleObservers.delete(child);
+        if(child.__$controller) {
+            child.__$controller.abort();
+            child.__$controller = null;
+            $lifeCycleObservers.delete(child);
+        }
     }
 
     this.$element.__$controller?.abort();
     this.$element.__$controller = null;
     $lifeCycleObservers.delete(this.$element);
+    this.$element.remove();
     this.$element = null;
 };
 

package/src/core/wrappers/NdPrototype.js

@@ -74,7 +74,7 @@ EVENTS_WITH_PREVENT.forEach(eventSourceName => {
  */
 NDElement.prototype.$getSignal = function() {
     if(!this.$element.__$controller) {
-        this.$element.__$controller = new AbortController();
+        // this.$element.__$controller = new AbortController();
     }
     return this.$element.__$controller.signal;
 };

package/src/core/wrappers/constants.js

@@ -3,19 +3,19 @@ export const BOOLEAN_ATTRIBUTES = new Set([
     'checked',
     'selected',
     'disabled',
-    'readonly',
+    'readonly', 'readOnly',
     'required',
-    'autofocus',
+    'autofocus', 'autoFocus',
     'multiple',
-    'autocomplete',
+    'autocomplete', 'autoComplete',
     'hidden',
-    'contenteditable',
-    'spellcheck',
+    'contenteditable', 'contentEditable',
+    'spellcheck', 'spellCheck',
     'translate',
     'draggable',
     'async',
     'defer',
-    'autoplay',
+    'autoplay', 'autoPlay',
     'controls',
     'loop',
     'muted',
@@ -23,13 +23,13 @@ export const BOOLEAN_ATTRIBUTES = new Set([
     'reversed',
     'open',
     'default',
-    'formnovalidate',
-    'novalidate',
+    'formnovalidate', 'formNoValidate',
+    'novalidate', 'noValidate',
     'scoped',
-    'itemscope',
-    'allowfullscreen',
-    'allowpaymentrequest',
-    'playsinline',
+    'itemscope', 'itemScope',
+    'allowfullscreen', 'allowFullscreen',
+    'allowpaymentrequest', 'allowPaymentRequest',
+    'playsinline', 'playsInline',
 ]);
 
 export const BOOL_ATTRIBUTES_NAME = {

package/src/core/wrappers/prototypes/nd-element-extensions.js

@@ -20,9 +20,62 @@ const defineToNdElement = (target, fn) => {
     });
 };
 
+/**
+ * Marks a prototype as a valid NativeDocument child node.
+ *
+ * @param {object} target - The prototype to mark
+ */
+const defineValidNdChild = (target) => {
+    Object.defineProperty(target, '__$isValidNdChild', {
+        value: true,
+        writable: true,
+        configurable: true,
+        enumerable: false,
+    });
+};
+
+/**
+ * Marks a prototype as a native DOM node.
+ * Faster alternative to instanceof Node for hot paths.
+ *
+ * @param {object} target - The prototype to mark
+ */
+const defineNativeNode = (target) => {
+    Object.defineProperty(target, '__$isNativeNode', {
+        value: true,
+        writable: true,
+        configurable: true,
+        enumerable: false,
+    });
+};
+
 NDElement.$getChild = ElementCreator.getChild;
 
-// -- String -------------------------------------------------------------------
+// -- __$isNativeNode ----------------------------------------------------------
+
+defineNativeNode(Element.prototype);
+defineNativeNode(Text.prototype);
+defineNativeNode(Comment.prototype);
+defineNativeNode(Document.prototype);
+defineNativeNode(DocumentFragment.prototype);
+
+// -- __$isValidNdChild --------------------------------------------------------
+
+defineValidNdChild(String.prototype);
+defineValidNdChild(Number.prototype);
+defineValidNdChild(Boolean.prototype);
+defineValidNdChild(Array.prototype);
+defineValidNdChild(Element.prototype);
+defineValidNdChild(Text.prototype);
+defineValidNdChild(Comment.prototype);
+defineValidNdChild(DocumentFragment.prototype);
+defineValidNdChild(NDElement.prototype);
+defineValidNdChild(ObservableItem.prototype);
+defineValidNdChild(ObservableChecker.prototype);
+defineValidNdChild(TemplateBinding.prototype);
+defineValidNdChild(Function.prototype);
+
+// -- toNdElement --------------------------------------------------------------
 
 /**
  * Converts a string to a static text node.
@@ -30,22 +83,18 @@ NDElement.$getChild = ElementCreator.getChild;
  * @returns {Text}
  */
 defineToNdElement(String.prototype, function () {
-    return ElementCreator.createStaticTextNode(null, this);
+    return ElementCreator.createStaticTextNodeWithoutParent(this);
 });
 
-// -- Number -------------------------------------------------------------------
-
 /**
  * Converts a number to a static text node.
  *
  * @returns {Text}
  */
 defineToNdElement(Number.prototype, function () {
-    return ElementCreator.createStaticTextNode(null, this.toString());
+    return ElementCreator.createStaticTextNodeWithoutParent(this.toString());
 });
 
-// -- DOM nodes (identity) -----------------------------------------------------
-
 /**
  * Returns the DOM node itself (identity).
  *
@@ -57,8 +106,6 @@ defineToNdElement(Comment.prototype, function () { return this; });
 defineToNdElement(Document.prototype, function () { return this; });
 defineToNdElement(DocumentFragment.prototype, function () { return this; });
 
-// -- ObservableItem -----------------------------------------------------------
-
 /**
  * Converts an ObservableItem to a reactive text node that updates when the value changes.
  *
@@ -70,8 +117,6 @@ defineToNdElement(ObservableItem.prototype, function () {
 
 ObservableChecker.prototype.toNdElement = ObservableItem.prototype.toNdElement;
 
-// -- NDElement ----------------------------------------------------------------
-
 /**
  * Returns the underlying HTMLElement of this NDElement.
  *
@@ -81,8 +126,6 @@ defineToNdElement(NDElement.prototype, function () {
     return this.$element;
 });
 
-// -- Array --------------------------------------------------------------------
-
 /**
  * Converts the array to a DocumentFragment containing all child elements.
  *
@@ -98,8 +141,6 @@ defineToNdElement(Array.prototype, function () {
     return fragment;
 });
 
-// -- Function -----------------------------------------------------------------
-
 /**
  * Calls the function and converts its return value to a DOM node.
  *
@@ -113,8 +154,6 @@ defineToNdElement(Function.prototype, function () {
     return ElementCreator.getChild(child());
 });
 
-// -- TemplateBinding ----------------------------------------------------------
-
 /**
  * Converts the TemplateBinding to a hydratable DOM node.
  *

package/src/ui/components/accordion/AccordionItemRender.js

@@ -36,8 +36,8 @@ const buildHeader = ($desc, instance, headerId, panelId) => {
     ];
 
     const header = Div({
-        class:          'accordion-header',
-        id:             headerId,
+        class: 'accordion-header',
+        id: headerId,
         // [a11y] aria-expanded reactive, aria-controls points to panel
         'aria-expanded': $desc.expanded.transform((v) => String(v)),
         'aria-controls': panelId,
@@ -64,12 +64,12 @@ const buildIndicator = ($desc) => {
     }, '▾');
 };
 
-const buildContent = ($desc, instance) => {
+const buildContent = ($desc, instance, headerId, panelId) => {
     // [a11y] role=region + aria-labelledby on panel
     const panelProps = {
-        class:            'accordion-content',
-        id:               panelId,
-        role:             'region',
+        class: 'accordion-content',
+        id: panelId,
+        role: 'region',
         'aria-labelledby': headerId,
     };