neo.mjs 9.16.0 → 10.0.0-alpha.2

package/src/main/render/DomApiRenderer.mjs

@@ -0,0 +1,138 @@
+import {voidAttributes} from '../../vdom/domConstants.mjs';
+
+const DomApiRenderer = {
+    /**
+     * Recursively creates a DOM element (or DocumentFragment) from a VNode tree.
+     * This method handles two primary modes based on `isRoot`:
+     * 1. If `isRoot` is true:
+     *   a. Builds a detached DocumentFragment: if `parentNode` is null. Returns the fragment.
+     *   b. Builds and inserts directly into a host DOM: if `parentNode` is provided. Inserts the fragment.
+     * 2. If `isRoot` is false (default for recursive calls):
+     *   Appends created DOM nodes directly to the provided `parentNode` (which is the DOM element of the direct parent VNode).
+     *
+     * @param {Object}      config
+     * @param {Number}      [config.index]           The index within `parentNode` to insert the root fragment (used when `isRoot` is true).
+     * @param {Boolean}     [config.isRoot=false]    If true, this is the root call for the VNode tree.
+     * @param {HTMLElement} [config.parentNode=null] The parent DOM node to insert into. Its role changes based on `isRoot`.
+     * @param {Object}      config.vnode             The VNode object to convert to a real DOM element.
+     * @returns {DocumentFragment|HTMLElement|null}  The created DOM node, the root DocumentFragment, or null.
+     * @private
+     */
+    createDomTree({index, isRoot=false, parentNode, vnode}) {
+        let domNode;
+
+        // No node or just a reference node, opt out
+        if (!vnode || vnode.componentId) {
+            return null
+        }
+
+        // Handle text nodes
+        if (vnode.vtype === 'text') {
+            domNode = document.createTextNode(vnode.textContent || '');
+
+            // Wrap in comment for consistency with delta updates
+            const
+                commentStart = document.createComment(` ${vnode.id} `),
+                commentEnd   = document.createComment(' /neo-vtext '),
+                fragment     = document.createDocumentFragment();
+
+            fragment.append(commentStart, domNode, commentEnd);
+            domNode = fragment
+        }
+        // Handle regular elements
+        else if (vnode.nodeName) {
+            if (vnode.ns) { // For SVG, ensure correct namespace
+                domNode = document.createElementNS(vnode.ns, vnode.nodeName)
+            } else {
+                domNode = document.createElement(vnode.nodeName)
+            }
+
+            // Apply the top-level 'id' property first (guaranteed to exist)
+            domNode[Neo.config.useDomIds ? 'id' : 'data-neo-id'] = vnode.id;
+
+            // Apply Attributes
+            Object.entries(vnode.attributes).forEach(([key, value]) => {
+                if (voidAttributes.has(key)) {
+                    domNode[key] = (value === 'true' || value === true)
+                } else if (key === 'value') {
+                    domNode.value = value
+                } else if (value !== null && value !== undefined) {
+                    domNode.setAttribute(key, value)
+                }
+            });
+
+            // Apply Classes
+            if (vnode.className.length > 0) {
+                domNode.classList.add(...vnode.className)
+            }
+
+            // Apply Styles
+            if (Neo.isObject(vnode.style)) {
+                Object.entries(vnode.style).forEach(([key, value]) => {
+                    let important;
+
+                    if (Neo.isString(value) && value.includes('!important')) {
+                        value = value.replace('!important', '').trim();
+                        domNode.style.setProperty(Neo.decamel(key), value, 'important');
+                        important = 'important'
+                    }
+
+                    domNode.style.setProperty(Neo.decamel(key), value, important)
+                })
+            }
+
+            // Handle innerHTML & textContent
+            // This applies to elements that contain only plain text (e.g., <span>Hello</span>)
+            // If the VNode has childNodes, this block is skipped, and content is handled recursively.
+            if (vnode.childNodes.length < 1) {
+                if (vnode.innerHTML) {
+                    domNode.innerHTML = vnode.innerHTML
+                } else if (vnode.textContent) {
+                    domNode.textContent = vnode.textContent
+                }
+            }
+        } else {
+            console.error('Unhandled VNode type or missing nodeName:', vnode);
+            return null
+        }
+
+        // Recursively process children
+        vnode.childNodes.forEach(childVnode => {
+            this.createDomTree({parentNode: domNode, vnode: childVnode})
+        })
+
+        // Final step: handle insertion based on `isRoot` and `parentNode`
+        if (isRoot) {
+            // This will be either HTMLElement or a DocumentFragment (for text vnodes)
+            let nodeToInsert = domNode;
+
+            if (nodeToInsert && parentNode && index !== -1) {
+                // If a specific host and index are provided, perform the insertion directly
+                if (index < parentNode.childNodes.length) {
+                    parentNode.insertBefore(nodeToInsert, parentNode.childNodes[index])
+                } else {
+                    parentNode.appendChild(nodeToInsert)
+                }
+
+                // Return the actual root DOM node (or fragment for text) that was inserted
+                return domNode
+            } else {
+                // If no specific host or index, return the detached nodeToInsert (HTMLElement or DocumentFragment)
+                return nodeToInsert
+            }
+        } else {
+            // For recursive calls (isRoot is false), append directly to the provided parentNode.
+            if (parentNode) { // parentNode here is the intermediate DOM parent
+                parentNode.append(domNode)
+            }
+
+            // Return the appended node (or null)
+            return domNode
+        }
+    }
+};
+
+const ns = Neo.ns('Neo.main.render', true);
+ns.DomApiRenderer = DomApiRenderer;
+
+export default DomApiRenderer;

package/src/main/render/StringBasedRenderer.mjs

@@ -0,0 +1,58 @@
+const StringBasedRenderer = {
+    /**
+     * @param {String} html representing a single element
+     * @returns {DocumentFragment}
+     */
+    htmlStringToElement(html) {
+        const template = document.createElement('template');
+        template.innerHTML = html;
+        return template.content
+    },
+
+    /**
+     * Handles string-based insertion of a new node into the DOM.
+     * This method is called by `insertNode()` when `NeoConfig.useStringBasedMounting` is true.
+     *
+     * @param {Object}      data
+     * @param {Boolean}     data.hasLeadingTextChildren Flag to honor leading comments.
+     * @param {Number}      data.index                  The index at which to insert the new node.
+     * @param {String}      data.outerHTML              The HTML string of the node to insert.
+     * @param {HTMLElement} data.parentNode             The parent DOM node to insert into.
+     * @private
+     */
+    insertNodeAsString({hasLeadingTextChildren, index, outerHTML, parentNode}) {
+        let me = this;
+
+        // If comments detected, parse HTML string to a node and use insertBefore/appendChild on childNodes.
+        if (hasLeadingTextChildren) {
+            let node = me.htmlStringToElement(outerHTML);
+
+            if (index < parentNode.childNodes.length) {
+                parentNode.insertBefore(node, parentNode.childNodes[index])
+            } else {
+                parentNode.appendChild(node)
+            }
+        }
+        // If no comments detected, use insertAdjacentHTML for element nodes.
+        else {
+            let countChildren = parentNode.children.length; // Use `children` for `insertAdjacentHTML` context
+
+            if (index > 0 && index >= countChildren) {
+                parentNode.insertAdjacentHTML('beforeend', outerHTML);
+                return
+            }
+            if (countChildren > 0 && countChildren > index) {
+                parentNode.children[index].insertAdjacentHTML('beforebegin', outerHTML)
+            } else if (countChildren > 0) {
+                parentNode.children[countChildren - 1].insertAdjacentHTML('afterend', outerHTML)
+            } else {
+                parentNode.insertAdjacentHTML('beforeend', outerHTML)
+            }
+        }
+    }
+};
+
+const ns = Neo.ns('Neo.main.render', true);
+ns.StringBasedRenderer = StringBasedRenderer;
+
+export default StringBasedRenderer;

package/src/table/View.mjs

@@ -231,7 +231,7 @@ class View extends Component {
         }
 
         if (Neo.typeOf(rendererOutput) === 'Object') {
-            cellConfig.innerHTML = rendererOutput.html  || ''
+            cellConfig.html = rendererOutput.html  || ''
         } else {
             cellConfig.cn = rendererOutput
         }

package/src/table/plugin/CellEditing.mjs

@@ -161,7 +161,7 @@ class CellEditing extends Plugin {
         me.mountedEditor = editor;
 
         cellNode.cn = [editor.createVdomReference()];
-        delete cellNode.innerHTML;
+        delete cellNode.html;
 
         view.updateDepth = -1;
 

package/src/tree/Accordion.mjs

@@ -272,18 +272,18 @@ class AccordionTree extends TreeList {
                         cls  : [itemCls + '-content'],
                         id   : id + '__item-content',
                         style: {pointerEvents: 'none'},
-                        cn   : [{
-                            flag     : 'name',
-                            tag      : 'span',
-                            cls      : [itemCls + '-content-header'],
-                            id       : id + '__item-content-header',
-                            innerHTML: item[me.fields.header]
+                        cn: [{
+                            flag: 'name',
+                            tag : 'span',
+                            cls : [itemCls + '-content-header'],
+                            id  : id + '__item-content-header',
+                            html: item[me.fields.header]
                         }, {
-                            flag     : 'content',
-                            tag      : 'span',
-                            cls      : [itemCls + '-content-text'],
-                            id       : id + '__item-content-text',
-                            innerHTML: item[me.fields.text]
+                            flag: 'content',
+                            tag : 'span',
+                            cls : [itemCls + '-content-text'],
+                            id  : id + '__item-content-text',
+                            html: item[me.fields.text]
                         }]
                     }],
                     style: {

package/src/tree/List.mjs

@@ -184,8 +184,15 @@ class Tree extends Base {
         let me                   = this,
             {folderCls, itemCls} = me,
             cls                  = [itemCls],
+            contentCls           = [itemCls + '-content'],
             itemVdom;
 
+        if (record.iconCls) {
+            contentCls.push(
+                Array.isArray(record.iconCls) ? record.iconCls : record.iconCls.split(' ')
+            )
+        }
+
         if (record.isLeaf) {
             cls.push(itemCls + (record.singleton ? '-leaf-singleton' : '-leaf'))
         } else {
@@ -201,10 +208,10 @@ class Tree extends Base {
             cls,
             id : me.getItemId(record.id),
             cn : [{
-                tag      : 'span',
-                cls      : [itemCls + '-content', record.iconCls],
-                innerHTML: record.name,
-                style    : {pointerEvents: 'none'}
+                tag  : 'span',
+                cls  : contentCls,
+                html : record.name,
+                style: {pointerEvents: 'none'}
             }],
             style: {
                 display : record.hidden ? 'none' : 'flex',
@@ -329,7 +336,7 @@ class Tree extends Base {
                 directMatch = false;
                 node        = me.getVdomChild(me.getItemId(item.id), me.vdom);
 
-                node.cn[0].innerHTML = item[property].replace(valueRegEx, match => {
+                node.cn[0].html = item[property].replace(valueRegEx, match => {
                     directMatch = true;
                     return `<span class="neo-highlight-search">${match}</span>`
                 });