neo.mjs 9.15.0 → 10.0.0-alpha.1

package/src/vdom/VNode.mjs

@@ -1,5 +1,12 @@
+import StringUtil from '../util/String.mjs';
+
 /**
- * Wrapper class for vnode objects. See the tutorials for further infos.
+ * Wrapper class for vnode objects.
+ * For convenience, a VNode instance will always contain a childNodes array, which can be empty.
+ * A VNode can optionally have `innerHTML` xor `textContent`
+ * `textContent` is better from a XSS security perspective.
+ * If by accident both are set, `innerHTML` will get the priority.
+ *
  * @class Neo.vdom.VNode
  */
 class VNode {
@@ -8,7 +15,8 @@ class VNode {
      */
     constructor(config) {
         /**
-         * @member {Array} attributes=[]
+         * Not set for vtype='text' nodes
+         * @member {Object} attributes={}
          */
 
         /**
@@ -16,6 +24,7 @@ class VNode {
          */
 
         /**
+         * Not set for vtype='text' nodes
          * @member {Array} className=[]
          */
 
@@ -37,33 +46,60 @@ class VNode {
          */
 
         /**
+         * Not set for vtype='text' nodes
          * @member {Object} style
          */
 
+        /**
+         * @member {String} textContent
+         */
+
         /**
          * Valid values are "root", "text" & "vnode"
          * @member {String} vtype='vnode'
          */
 
-        Object.assign(this, {
-            attributes: config.attributes || [],
+        let me            = this,
+            {textContent} = config,
+            hasInnerHtml  = Object.hasOwn(config, 'innerHTML'),
+            isVText       = config.vtype === 'text';
+
+        Object.assign(me, {
             childNodes: config.childNodes || [],
-            className : config.className  || [],
-            id        : config.id         || Neo.getId('vnode'),
-            innerHTML : config.innerHTML,
-            nodeName  : config.nodeName,
-            style     : config.style,
+            id        : config.id         || Neo.getId(isVText ? 'vtext' : 'vnode'),
             vtype     : config.vtype      || 'vnode'
         });
 
+        if (isVText) {
+            // XSS Security: a pure text node is not supposed to contain HTML
+            me.textContent = StringUtil.escapeHtml(hasInnerHtml ? config.innerHTML : textContent)
+        } else {
+            Object.assign(me, {
+                attributes: config.attributes || {},
+                className : config.className  || [],
+                nodeName  : config.nodeName   || 'div',
+                style     : config.style
+            });
+
+            // Use vdom.html on your own risk, it is not fully XSS secure.
+            if (hasInnerHtml) {
+                me.innerHTML = config.innerHTML
+            }
+
+            // We only apply textContent, in case it has content
+            else if (Object.hasOwn(config, 'textContent')) {
+                me.textContent = Neo.config.useStringBasedMounting ? StringUtil.escapeHtml(textContent) : textContent
+            }
+        }
+
         // We only apply the static attribute, in case the value is true
         if (config.static) {
-            this.static = true
+            me.static = true
         }
     }
 }
 
 const ns = Neo.ns('Neo.vdom', true);
-ns['VNode'] = VNode;
+ns.VNode = VNode;
 
 export default VNode;

package/src/vdom/domConstants.mjs

@@ -0,0 +1,65 @@
+/**
+ * The following top-level attributes will get converted into styles:
+ * height, maxHeight, maxWidth, minHeight, minWidth, width
+ *
+ * Some tags must not do the transformation, so we add them here.
+ * @member {Set} rawDimensionTags
+ */
+export const rawDimensionTags = new Set([
+    'circle',
+    'clipPath',
+    'ellipse',
+    'filter',
+    'foreignObject',
+    'image',
+    'marker',
+    'mask',
+    'pattern',
+    'rect',
+    'svg',
+    'use'
+]);
+
+/**
+ * Void attributes inside html tags
+ * @member {Set} voidAttributes
+ * @protected
+ */
+export const voidAttributes = new Set([
+    'checked',
+    'defer',
+    'disabled',
+    'ismap',
+    'multiple',
+    'nohref',
+    'noresize',
+    'noshade',
+    'nowrap',
+    'open',
+    'readonly',
+    'required',
+    'reversed',
+    'selected'
+]);
+
+/**
+ * Void html tags
+ * @member {Set} voidElements
+ * @protected
+ */
+export const voidElements = new Set([
+    'area',
+    'base',
+    'br',
+    'col',
+    'embed',
+    'hr',
+    'img',
+    'input',
+    'link',
+    'meta',
+    'param',
+    'source',
+    'track',
+    'wbr'
+]);

package/src/vdom/util/DomApiVnodeCreator.mjs

@@ -0,0 +1,51 @@
+const DomApiVnodeCreator = {
+    /**
+     * Recursively creates a VNode tree suitable for direct DOM API insertion.
+     * This tree excludes any nodes that are marked as 'moved' within the movedNodes map,
+     * as their DOM manipulation will be handled by separate moveNode deltas.
+     *
+     * @param {Neo.vdom.VNode} vnode        The VNode to process.
+     * @param {Map}            [movedNodes] A map of VNodes that are being moved.
+     * @returns {Object|null} A new VNode tree (or subtree) with moved nodes pruned, or null if the root is a moved node.
+     */
+    create(vnode, movedNodes) {
+        /*
+         * A vnode itself can be null (removeDom: true) => opt out.
+         *
+         * If the node has a componentId, there is nothing to do (scoped vdom updates), opt out.
+         *
+         * If this specific vnode is in the movedNodes map, it means its DOM element
+         * will be moved by a separate delta. So, we should not include it in this fragment.
+         */
+        if (!vnode || vnode.componentId || (vnode.id && movedNodes?.get(vnode.id))) {
+            return null // Prune this branch
+        }
+
+        // For text nodes, we can return the original VNode directly, as they have no childNodes array to modify.
+        if (vnode.vtype === 'text') {
+            return vnode
+        }
+
+        // For other VNodes (vnode or root), create a shallow clone first.
+        let clonedVnode = {...vnode, childNodes: []};
+
+        // Recursively process children
+        if (vnode.childNodes.length > 0) {
+            vnode.childNodes.forEach(child => {
+                const processedChild = DomApiVnodeCreator.create(child, movedNodes);
+
+                // Only add if not pruned
+                if (processedChild) {
+                    clonedVnode.childNodes.push(processedChild)
+                }
+            });
+        }
+
+        return clonedVnode
+    }
+};
+
+const ns = Neo.ns('Neo.vdom.util', true);
+ns.DomApiVnodeCreator = DomApiVnodeCreator;
+
+export default DomApiVnodeCreator;

package/src/vdom/util/StringFromVnode.mjs

@@ -0,0 +1,123 @@
+import NeoString                      from '../../util/String.mjs';
+import {voidAttributes, voidElements} from '../domConstants.mjs';
+
+const StringFromVnode = {
+    /**
+     * @param {Object} vnode
+     * @protected
+     */
+    createCloseTag(vnode) {
+        return voidElements.has(vnode.nodeName) ? '' : '</' + vnode.nodeName + '>'
+    },
+
+    /**
+     * @param {Object} vnode
+     * @protected
+     */
+    createOpenTag(vnode) {
+        let string       = '<' + vnode.nodeName,
+            {attributes} = vnode,
+            cls          = vnode.className,
+            style;
+
+        if (vnode.style) {
+            style = Neo.createStyles(vnode.style);
+
+            if (style !== '') {
+                string += ` style="${style}"`
+            }
+        }
+
+        if (cls) {
+            if (Array.isArray(cls)) {
+                cls = cls.join(' ')
+            }
+
+            if (cls !== '') {
+                string += ` class="${cls}"`
+            }
+        }
+
+        if (vnode.id) {
+            if (Neo.config.useDomIds) {
+                string += ` id="${vnode.id}"`
+            } else {
+                string += ` data-neo-id="${vnode.id}"`
+            }
+        }
+
+        Object.entries(attributes).forEach(([key, value]) => {
+            if (voidAttributes.has(key)) {
+                if (value === 'true') { // vnode attribute values get converted into strings
+                    string += ` ${key}`
+                }
+            } else if (key !== 'removeDom') {
+                if (key === 'value') {
+                    value = NeoString.escapeHtml(value)
+                }
+
+                string += ` ${key}="${value?.replaceAll?.('"', '&quot;') ?? value}"`
+            }
+        });
+
+        return string + '>'
+    },
+
+    /**
+     * @param {Neo.vdom.VNode} vnode
+     * @param {Map}            [movedNodes]
+     */
+    create(vnode, movedNodes) {
+        let me = this,
+            id = vnode?.id;
+
+        // If a content node will get moved by a delta update OP, there is no need to regenerate it. Opt out.
+        if (id && movedNodes?.get(id)) {
+            return ''
+        }
+
+        switch (vnode.vtype) {
+            case 'root':
+                return me.create(vnode.childNodes[0], movedNodes)
+            case 'text':
+                // For text VNodes, `vnode.textContent` holds the HTML-escaped content.
+                // Add the comment wrappers here for string output, aligning with main.mixin.DeltaUpdates.createDomTree().
+                // `vnode.textContent || ''` ensures robustness in case vnode.textContent is not a string (e.g., a number or null).
+                return `<!-- ${vnode.id} -->${vnode.textContent}<!-- /neo-vtext -->`
+            case 'vnode':
+                return me.createOpenTag(vnode) + me.createTagContent(vnode, movedNodes) + me.createCloseTag(vnode)
+            default:
+                return ''
+        }
+    },
+
+    /**
+     * @param {Neo.vdom.VNode} vnode
+     * @param {Map}            [movedNodes]
+     * @protected
+     */
+    createTagContent(vnode, movedNodes) {
+        const hasContent = vnode.innerHTML || vnode.textContent;
+
+        if (hasContent) {
+            return hasContent
+        }
+
+        let string = '',
+            len    = vnode.childNodes ? vnode.childNodes.length : 0,
+            i      = 0,
+            childNode;
+
+        for (; i < len; i++) {
+            childNode = vnode.childNodes[i];
+            string += this.create(childNode, movedNodes)
+        }
+
+        return string
+    }
+};
+
+const ns = Neo.ns('Neo.vdom.util', true);
+ns.StringFromVnode = StringFromVnode;
+
+export default StringFromVnode;

package/src/worker/mixin/RemoteMethodAccess.mjs

@@ -98,7 +98,19 @@ class RemoteMethodAccess extends Base {
 
         if (out instanceof Promise) {
             out
-                .catch(err => {me.reject(msg, err)})
+                /*
+                 * Intended logic:
+                 * If the code of a remote method fails, it would not show any errors inside the console,
+                 * so we want to manually log the error for debugging.
+                 * Rejecting the Promise gives us the chance to recover.
+                 *
+                 * Example:
+                 * Neo.vdom.Helper.update(opts).catch(err => {
+                 *     me.isVdomUpdating = false;
+                 *     reject?.()
+                 * }).then(data => {...})
+                 */
+                .catch(err => {console.error(err); me.reject(msg, err)})
                 .then(data => {me.resolve(msg, data)})
         } else {
             me.resolve(msg, out)

package/resources/data/deck/learnneo/pages/Welcome.md

@@ -1,64 +0,0 @@
-Welcome to Neo.mjs! This set of topics contains information to help you use Neo.mjs. 
-
-
-## Topics
-
-### Benefits
-
-Describes technical and business reasons for using Neo.mjs
-
-### Getting Started
-
-Install instructions, along with fundamental concepts that are good to understand before diving into Neo.mjs.
-
-### Tutorials
-
-Hands-on tutorials where you'll code a few simple Neo.mjs applications.
-
-### Guides
-
-These are in-depth discussions of various topics.
-
-## Using these topics
-
-### Layout 
-
-As you can see, the topics table of contents is on the left. Topic sections and sub-sections are shown on the right.
-And content is here in the middle. There are "next" and "previous" buttons at the bottom of each page, to make it
-easier to read several topics in sequence. 
-
-### Disclosure widgets
-
-Topics sometimes contain "disclosure" widgets, which are just <details> tags. These are used in cases 
-where we want to present high-level points and reveal details when the disclosure is expanded.
-
-<details>
-<summary>This is a disclosure widget</summary>
-<p style="background-color:lightgreen;padding:8px">This is a fascinating piece of information which is revealed when the widget is expanded.</p>
-</details>
-
-### Runnable examples
-
-Topics also sometimes contain runnable examples. These are shown as tab panels with Source and Preview tabs.
-
-You can also launch the preview in a window by going to the Preview tab, then clicking on the little window
-icon on the right  <span class="far fa-xs fa-window-maximize"></span>. This web site is a Neo.mjs application,
-and the ability to launch browser windows &mdash; all integrated within a single app &mdash; is a unique feature of Neo.mjs!
-
-<pre data-neo>
-import Button    from '../button/Base.mjs';
-import Container from '../container/Base.mjs';
-
-class MainView extends Container {
-    static config = {
-        className: 'Example.view.MainView',
-        layout   : {ntype:'vbox', align:'start'},
-        items    : [{
-            module : Button,
-            text   : 'Button'
-        }]
-    }
-}
-
-MainView = Neo.setupClass(MainView);
-</pre>