neo.mjs 10.2.0 → 10.3.0

package/src/functional/component/Base.mjs

@@ -1,6 +1,7 @@
-import Abstract from '../../component/Abstract.mjs';
-import Effect   from '../../core/Effect.mjs';
-import NeoArray from '../../util/Array.mjs';
+import Abstract         from '../../component/Abstract.mjs';
+import Effect           from '../../core/Effect.mjs';
+import NeoArray         from '../../util/Array.mjs';
+import {isHtmlTemplate} from '../util/html.mjs';
 
 const
     activeDomListenersSymbol = Symbol.for('activeDomListeners'),
@@ -44,6 +45,11 @@ class FunctionalBase extends Abstract {
      * @member {Map|null} childComponents=null
      */
     childComponents = null
+    /**
+     * @member {Neo.functional.util.HtmlTemplateProcessor|null} htmlTemplateProcessor=null
+     * @private
+     */
+    htmlTemplateProcessor = Neo.ns('Neo.functional.util.HtmlTemplateProcessor')
     /**
      * Internal Map to store the next set of components after the createVdom() Effect has run.
      * @member {Map|null} nextChildComponents=null
@@ -60,6 +66,11 @@ class FunctionalBase extends Abstract {
         let me   = this,
             opts = {configurable: true, enumerable: false, writable: true};
 
+        // The build process will replace `render()` with `createVdom()`.
+        if (Neo.config.environment !== 'development') {
+            me.enableHtmlTemplates = false
+        }
+
         Object.defineProperties(me, {
             [activeDomListenersSymbol]: {...opts, value: []},
             [hookIndexSymbol]         : {...opts, value: 0},
@@ -85,35 +96,32 @@ class FunctionalBase extends Abstract {
     }
 
     /**
-     * Triggered after the mounted config got changed
+     * Triggered after the isReady config got changed
      * @param {Boolean} value
      * @param {Boolean} oldValue
      * @protected
      */
-    afterSetMounted(value, oldValue) {
-        super.afterSetMounted(value, oldValue);
-
-        if (oldValue !== undefined) {
-            const me = this;
+    afterSetIsReady(value, oldValue) {
+        const me = this;
 
-            if (value) { // mount
-                // Initial registration of DOM event listeners when component mounts
-                me.applyPendingDomListeners();
-            }
+        if (value && me.missedReadyState) {
+            me.vdomEffect.run();
+            delete me.missedReadyState
         }
     }
 
     /**
-     * Triggered after the enableHtmlTemplates config got changed.
+     * Triggered after the mounted config got changed
      * @param {Boolean} value
      * @param {Boolean} oldValue
      * @protected
      */
-    afterSetEnableHtmlTemplates_(value, oldValue) {
-        if (value && !this.htmlParser) {
-            import('../util/html.mjs').then(module => {
-                this.htmlParser = module.default;
-            });
+    afterSetMounted(value, oldValue) {
+        super.afterSetMounted(value, oldValue);
+
+        if (value && oldValue !== undefined) {
+            // Initial registration of DOM event listeners when component mounts
+            this.applyPendingDomListeners()
         }
     }
 
@@ -188,6 +196,89 @@ class FunctionalBase extends Abstract {
         // This method can be overridden by subclasses
     }
 
+    /**
+     * This method is called by the HtmlTemplateProcessor after the async parsing is complete.
+     * It then continues the component update lifecycle.
+     * @param {Object} parsedVdom The VDOM object received from the parser addon.
+     * @protected
+     */
+    continueUpdateWithVdom(parsedVdom) {
+        const me = this;
+
+        // Create a new map for components instantiated in this render cycle
+        me.#nextChildComponents = new Map();
+
+        // Process the newVdom to instantiate components
+        // The parentId for these components will be the functional component's id
+        const processedVdom = me.processVdomForComponents(parsedVdom, me.id);
+
+        // Destroy components that are no longer present in the new VDOM
+        if (me.childComponents?.size > 0) {
+            [...me.childComponents].forEach(([key, childData]) => {
+                if (!me.#nextChildComponents.has(key)) {
+                    me.childComponents.delete(key);
+                    childData.instance.destroy()
+                }
+            })
+        }
+
+        // If this component created other classic or functional components,
+        // include their full vdom into the next update cycle.
+        const oldKeys = me.childComponents ? new Set(me.childComponents.keys()) : new Set();
+        let hasNewChildren = false;
+
+        for (const newKey of me.#nextChildComponents.keys()) {
+            if (!oldKeys.has(newKey)) {
+                hasNewChildren = true;
+                break
+            }
+        }
+
+        if (hasNewChildren) {
+            // When new child components are created, we need to send their full VDOM
+            // to the vdom-worker, so they can get rendered.
+            // Subsequent updates will be granular via diffAndSet() => set() on the child.
+            me.updateDepth = -1;
+        }
+
+        // Update the main map of instantiated components
+        me.childComponents = me.#nextChildComponents;
+
+        // Clear the old vdom properties
+        for (const key in me.vdom) {
+            delete me.vdom[key]
+        }
+
+        // Assign the new properties
+        Object.assign(me.vdom, processedVdom); // Use processedVdom here
+
+        me[vdomToApplySymbol] = null;
+
+        const root = me.getVdomRoot();
+
+        if (me.cls) {
+            root.cls = NeoArray.union(me.cls, root.cls)
+        }
+
+        if (me.id) {
+            root.id = me.id
+        }
+
+        // Re-hydrate the new vdom with stable IDs from the previous vnode tree.
+        // This is crucial for functional components where the vdom is recreated on every render,
+        // ensuring the diffing algorithm can track nodes correctly.
+        me.syncVdomIds();
+
+        if (me.beforeUpdate() !== false) {
+            me.updateVdom()
+        }
+
+        // Update DOM event listeners based on the new render
+        if (me.mounted) {
+            me.applyPendingDomListeners()
+        }
+    }
+
     /**
      * Override this method in your functional component to return its VDOM structure.
      * This method will be automatically re-executed when any of the component's configs change.
@@ -198,10 +289,10 @@ class FunctionalBase extends Abstract {
     createVdom(config) {
         const me = this;
 
-        if (me.enableHtmlTemplates && typeof me.createTemplateVdom === 'function') {
-            return me.createTemplateVdom(config)
+        if (me.enableHtmlTemplates && typeof me.render === 'function') {
+            return me.render(config)
         }
-        // This method should be overridden by subclasses
+
         return {}
     }
 
@@ -257,6 +348,20 @@ class FunctionalBase extends Abstract {
         }
     }
 
+    /**
+     * @returns {Promise<void>}
+     */
+    async initAsync() {
+        await super.initAsync();
+
+        if (this.enableHtmlTemplates && Neo.config.environment === 'development') {
+            if (!Neo.ns('Neo.functional.util.HtmlTemplateProcessor')) {
+                const module = await import('../util/HtmlTemplateProcessor.mjs');
+                this.htmlTemplateProcessor = module.default
+            }
+        }
+    }
+
     /**
      * This handler runs when the effect's `isRunning` state changes.
      * It runs outside the effect's tracking scope, preventing feedback loops.
@@ -270,78 +375,22 @@ class FunctionalBase extends Abstract {
                   newVdom = me[vdomToApplySymbol];
 
             if (newVdom) {
-                // Create a new map for components instantiated in this render cycle
-                me.#nextChildComponents = new Map();
-
-                // Process the newVdom to instantiate components
-                // The parentId for these components will be the functional component's id
-                const processedVdom = me.processVdomForComponents(newVdom, me.id);
-
-                // Destroy components that are no longer present in the new VDOM
-                if (me.childComponents?.size > 0) {
-                    [...me.childComponents].forEach(([key, childData]) => {
-                        if (!me.#nextChildComponents.has(key)) {
-                            me.childComponents.delete(key);
-                            childData.instance.destroy()
-                        }
-                    })
-                }
-
-                // If this component created other classic or functional components,
-                // include their full vdom into the next update cycle.
-                const oldKeys = me.childComponents ? new Set(me.childComponents.keys()) : new Set();
-                let hasNewChildren = false;
-
-                for (const newKey of me.#nextChildComponents.keys()) {
-                    if (!oldKeys.has(newKey)) {
-                        hasNewChildren = true;
-                        break
+                // If the result is an HtmlTemplate, hand it off to the processor
+                if (newVdom[isHtmlTemplate]) {
+                    if (me.htmlTemplateProcessor) {
+                        me.htmlTemplateProcessor.process(newVdom, me)
+                    } else {
+                        me.missedReadyState = true;
+                        // By calling this with an empty object, we ensure that the parent container
+                        // renders a placeholder DOM node for this component, which we can then
+                        // populate later once the template processor is ready.
+                        me.continueUpdateWithVdom({})
                     }
+                    return // Stop execution, the processor will call back
                 }
 
-                if (hasNewChildren) {
-                    // When new child components are created, we need to send their full VDOM
-                    // to the vdom-worker, so they can get rendered.
-                    // Subsequent updates will be granular via diffAndSet() => set() on the child.
-                    me.updateDepth = -1;
-                }
-
-                // Update the main map of instantiated components
-                me.childComponents = me.#nextChildComponents;
-
-                // Clear the old vdom properties
-                for (const key in me.vdom) {
-                    delete me.vdom[key]
-                }
-
-                // Assign the new properties
-                Object.assign(me.vdom, processedVdom); // Use processedVdom here
-
-                me[vdomToApplySymbol] = null;
-
-                const root = me.getVdomRoot();
-
-                if (me.cls) {
-                    root.cls = NeoArray.union(me.cls, root.cls)
-                }
-
-                if (me.id) {
-                    root.id = me.id
-                }
-
-                // Re-hydrate the new vdom with stable IDs from the previous vnode tree.
-                // This is crucial for functional components where the vdom is recreated on every render,
-                // ensuring the diffing algorithm can track nodes correctly.
-                me.syncVdomIds();
-
-                if (me.beforeUpdate() !== false) {
-                    me.updateVdom()
-                }
-
-                // Update DOM event listeners based on the new render
-                if (me.mounted) {
-                    me.applyPendingDomListeners()
-                }
+                // Continue with the standard JSON-based VDOM update
+                me.continueUpdateWithVdom(newVdom)
             }
         }
     }
@@ -374,8 +423,8 @@ class FunctionalBase extends Abstract {
 
             if (!componentKey) {
                 console.error([
-                    'Component definition in functional component VDOM is missing an "id". For stable reconciliation, ',
-                    'especially in dynamic lists, provide a unique "id" property.'
+                        'Component definition in functional component VDOM is missing an "id". For stable reconciliation, ',
+                        'especially in dynamic lists, provide a unique "id" property.'
                     ].join(''),
                     vdomTree
                 )

package/src/functional/util/HtmlTemplateProcessor.mjs

@@ -0,0 +1,243 @@
+import Base           from '../../../src/core/Base.mjs';
+import {HtmlTemplate} from './html.mjs';
+import * as parse5    from '../../../dist/parse5.mjs';
+
+// This file uses several regular expressions to parse and transform the template string.
+// Defining them as constants at the module level is a performance best practice,
+// as it prevents them from being re-created on every function call.
+const
+    // Finds an attribute name right before an interpolated value (e.g., `... testText="${...}"`)
+    // This is crucial for preserving the original mixed-case spelling of attributes.
+    regexAttribute            = /\s+([a-zA-Z][^=]*)\s*=\s*"?$/,
+    // Finds a placeholder for a dynamic value that is the entire attribute value.
+    regexDynamicValue         = /^__DYNAMIC_VALUE_(\d+)__$/,
+    // Finds all dynamic value placeholders within a string (globally).
+    regexDynamicValueG        = /__DYNAMIC_VALUE_(\d+)__/g,
+    // Finds placeholders for nested templates or dynamic component tags to re-index them.
+    regexNested               = /(__DYNAMIC_VALUE_|neotag)(\d+)/g,
+    // Extracts the original tag name from its source code string to preserve case sensitivity.
+    regexOriginalTagName      = /<([\w\.]+)/,
+    // parse5 cannot handle self-closing tags, this regex will add closing tags for all custom components
+    selfClosingComponentRegex = /<((?:[A-Z][\w\.]*)|(?:neotag\d+))([^>]*?)\/>/g;
+
+/**
+ * A singleton class responsible for processing HtmlTemplate objects.
+ * The core challenge is to convert a tagged template literal (which is just strings and values)
+ * into a valid Neo.mjs VDOM structure. This requires several steps:
+ * 1. Flattening nested templates into a single string with placeholders.
+ * 2. Using a robust HTML parser (`parse5`) to create an Abstract Syntax Tree (AST).
+ * 3. Traversing the AST and converting it back into a Neo.mjs VDOM object, re-inserting
+ *    the original dynamic values (like functions, objects, and components) in the correct places.
+ * @class Neo.functional.util.HtmlTemplateProcessor
+ * @extends Neo.core.Base
+ * @singleton
+ */
+class HtmlTemplateProcessor extends Base {
+    static config = {
+        /**
+         * @member {String} className='Neo.functional.util.HtmlTemplateProcessor'
+         * @protected
+         */
+        className: 'Neo.functional.util.HtmlTemplateProcessor',
+        /**
+         * @member {Boolean} singleton=true
+         * @protected
+         */
+        singleton: true
+    }
+
+    /**
+     * Recursively converts a single parse5 AST node into a Neo.mjs VDOM node.
+     * This is the heart of the transformation process.
+     * @param {Object}   node             The parse5 AST node
+     * @param {Array<*>} values           The array of interpolated values from the flattened template
+     * @param {String}   originalString   The flattened template string
+     * @param {Object}   attributeNameMap A map of dynamic value indices to original, case-sensitive attribute names
+     * @returns {Object|String|null} A VDOM node, a text string, or null if the node is empty
+     */
+    convertNodeToVdom(node, values, originalString, attributeNameMap) {
+        // 1. Handle text nodes: Convert text content, re-inserting any dynamic values.
+        if (node.nodeName === '#text') {
+            const text = node.value.trim();
+            if (!text) return null;
+
+            const replacedText = text.replace(regexDynamicValueG, (m, i) => {
+                const value = values[parseInt(i, 10)];
+                return Neo.isObject(value) ? JSON.stringify(value) : value
+            });
+
+            return {vtype: 'text', text: replacedText}
+        }
+
+        // 2. Handle element nodes: This is where most of the logic resides.
+        if (node.nodeName && node.sourceCodeLocation?.startTag) {
+            const
+                vdom    = {},
+                tagName = node.tagName;
+
+            // A `neotag` is a placeholder for a dynamically injected component constructor (e.g., `<${Button}>`).
+            if (tagName.startsWith('neotag')) {
+                const index = parseInt(tagName.replace('neotag', ''), 10);
+                vdom.module = values[index]
+            } else {
+                // parse5 lowercases all tag names. To support case-sensitive component tags (e.g., `<MyComponent>`),
+                // we must retrieve the original tag name from the source string.
+                const
+                    {startTag}      = node.sourceCodeLocation,
+                    startTagStr     = originalString.substring(startTag.startOffset, startTag.endOffset),
+                    originalTagName = startTagStr.match(regexOriginalTagName)[1];
+
+                // By convention, a tag starting with an uppercase letter is a Neo.mjs component.
+                if (originalTagName[0] === originalTagName[0].toUpperCase()) {
+                    const resolvedModule = Neo.ns(originalTagName, false);
+
+                    if (resolvedModule) {
+                        vdom.module = resolvedModule
+                    } else {
+                        throw new Error(`Could not resolve component tag <${originalTagName}> from global namespace.`)
+                    }
+                } else {
+                    vdom.tag = originalTagName
+                }
+            }
+
+            // Re-construct attributes, re-inserting dynamic values and preserving original case.
+            node.attrs?.forEach(attr => {
+                const match = attr.value.match(regexDynamicValue);
+                // If the entire attribute is a dynamic value, we can directly assign the rich data type (object, array, function).
+                if (match) {
+                    const
+                        dynamicValueIndex = parseInt(match[1], 10),
+                        attrName          = attributeNameMap[dynamicValueIndex] || attr.name; // Use the map
+
+                    vdom[attrName] = values[dynamicValueIndex]
+                } else {
+                    // If the attribute is a mix of strings and dynamic values, we must coerce everything to a string.
+                    vdom[attr.name] = attr.value.replace(regexDynamicValueG, (m, i) => values[parseInt(i, 10)])
+                }
+            });
+
+            // Recursively process child nodes.
+            if (node.childNodes?.length > 0) {
+                vdom.cn = node.childNodes.map(child => this.convertNodeToVdom(child, values, originalString, attributeNameMap)).filter(Boolean);
+
+                // Optimization: If a node has only one child and it's a text node, we can simplify the VDOM
+                // by moving the text content directly into the parent's `text` property.
+                if (vdom.cn.length === 1 && vdom.cn[0].vtype === 'text') {
+                    vdom.text = vdom.cn[0].text;
+                    delete vdom.cn
+                }
+            }
+
+            return vdom
+        }
+
+        return null
+    }
+
+    /**
+     * Kicks off the AST to VDOM conversion for the entire template.
+     * @param {Object}   ast              The root parse5 AST
+     * @param {Array<*>} values           Interpolated values
+     * @param {String}   originalString   The flattened template string
+     * @param {Object}   attributeNameMap The original attribute names with mixed case, mapped by dynamic value index
+     * @returns {Object} The final Neo.mjs VDOM
+     */
+    convertAstToVdom(ast, values, originalString, attributeNameMap) {
+        if (!ast.childNodes || ast.childNodes.length < 1) {
+            return {}
+        }
+
+        const children = ast.childNodes.map(child => this.convertNodeToVdom(child, values, originalString, attributeNameMap)).filter(Boolean);
+
+        // If the template has only one root node, we return it directly.
+        // Otherwise, we return a fragment-like object with children in a `cn` array.
+        if (children.length === 1) {
+            return children[0]
+        }
+
+        return {cn: children}
+    }
+
+    /**
+     * Flattens a potentially nested HtmlTemplate object into a single string and a corresponding array of values.
+     * This is a necessary pre-processing step before parsing with parse5, which only accepts a single string.
+     * @param {Neo.functional.util.HtmlTemplate} template The root template object
+     * @returns {{flatString: string, flatValues: Array<*>, attributeNameMap: Object}}
+     */
+    flattenTemplate(template) {
+        let flatString = '';
+        const
+            flatValues       = [],
+            attributeNameMap = {};
+
+        for (let i = 0; i < template.strings.length; i++) {
+            let str = template.strings[i];
+            flatString += str;
+
+            if (i < template.values.length) {
+                const
+                    value     = template.values[i],
+                    attrMatch = str.match(regexAttribute);
+
+                // If a value is another HtmlTemplate, we recursively flatten it and merge the results.
+                if (value instanceof HtmlTemplate) {
+                    const nested = this.flattenTemplate(value);
+                    // The indices of the nested template's values need to be shifted to avoid collisions.
+                    const nestedString = nested.flatString.replace(regexNested, (match, p1, p2) => {
+                        const
+                            oldIndex = parseInt(p2, 10),
+                            newIndex = oldIndex + flatValues.length;
+                        // Adjust keys in nested.attributeNameMap before merging
+                        if (nested.attributeNameMap[oldIndex]) {
+                            attributeNameMap[newIndex] = nested.attributeNameMap[oldIndex]
+                        }
+                        return `${p1}${newIndex}`
+                    });
+
+                    flatString += nestedString;
+                    flatValues.push(...nested.flatValues)
+                    // No need to push nested.attributeNames, as we merged the map above
+                }
+                // Falsy values like false, null, and undefined should not be rendered.
+                // This is crucial for enabling conditional rendering with `&&`.
+                else if (value !== false && value != null) {
+                    // If a dynamic value is a component constructor, we replace it with a special `neotag` placeholder.
+                    if (template.strings[i].trim().endsWith('<') || template.strings[i].trim().endsWith('</')) {
+                        flatString += `neotag${flatValues.length}`
+                    } else {
+                        flatString += `__DYNAMIC_VALUE_${flatValues.length}__`
+                    }
+
+                    flatValues.push(value);
+                    if (attrMatch) {
+                        // Store attribute name by its dynamic value index
+                        attributeNameMap[flatValues.length - 1] = attrMatch[1]
+                    }
+                }
+            }
+        }
+
+        return {flatString, flatValues, attributeNameMap};
+    }
+
+    /**
+     * The main entry point for processing a template.
+     * It orchestrates the flattening, parsing, and VDOM conversion, and then passes the result
+     * back to the component to continue its update lifecycle.
+     * @param {Neo.functional.util.HtmlTemplate} template  The root template object
+     * @param {Neo.functional.component.Base}    component The component instance
+     */
+    process(template, component) {
+        const
+            me                                         = this,
+            {flatString, flatValues, attributeNameMap} = me.flattenTemplate(template), // Change variable name
+            stringWithClosingTags                      = flatString.replace(selfClosingComponentRegex, '<$1$2></$1>'),
+            ast                                        = parse5.parseFragment(stringWithClosingTags, {sourceCodeLocationInfo: true}),
+            parsedVdom                                 = me.convertAstToVdom(ast, flatValues, stringWithClosingTags, attributeNameMap);
+
+        component.continueUpdateWithVdom(parsedVdom)
+    }
+}
+
+export default Neo.setupClass(HtmlTemplateProcessor);

package/src/functional/util/html.mjs

@@ -1,75 +1,32 @@
-import { rawDimensionTags, voidAttributes, voidElements } from '../../vdom/domConstants.mjs';
+const isHtmlTemplate = Symbol.for('neo.isHtmlTemplate');
 
 /**
+ * A container for the result of an `html` tagged template literal.
+ * It holds the static strings and the dynamic values of the template.
+ * @class Neo.functional.util.HtmlTemplate
+ */
+class HtmlTemplate {
+    /**
+     * @param {Array<String>} strings The static parts of the template
+     * @param {Array<*>} values The dynamic values of the template
+     */
+    constructor(strings, values) {
+        this.strings = strings;
+        this.values  = values;
+        this[isHtmlTemplate] = true;
+    }
+}
+
+/**
+ * A tagged template literal function that creates an `HtmlTemplate` instance.
+ * This function does not perform any parsing or string concatenation itself.
+ * It simply captures the template's parts for later processing.
  * @param {Array<String>} strings
  * @param {Array<*>} values
- * @returns {Object} A VDomNodeConfig object.
+ * @returns {Neo.functional.util.HtmlTemplate} An instance of HtmlTemplate
  */
 const html = (strings, ...values) => {
-    let fullString = '';
-    for (let i = 0; i < strings.length; i++) {
-        fullString += strings[i];
-        if (i < values.length) {
-            // Use a unique placeholder for dynamic values
-            fullString += `__DYNAMIC_VALUE_${i}__`;
-        }
-    }
-
-    // Very basic parsing: find the first tag and its content
-    const tagRegex = /<(\w+)([^>]*)>([\s\S]*?)<\/\1>/;
-    const match = fullString.match(tagRegex);
-
-    if (!match) {
-        // If no matching tag, return a simple text node or empty div
-        return { tag: 'div', text: fullString.replace(/__DYNAMIC_VALUE_\d+__/g, (m) => {
-            const index = parseInt(m.match(/\d+/)[0]);
-            return values[index];
-        }) };
-    }
-
-    const rootTag = match[1];
-    const attributesString = match[2];
-    let innerContent = match[3];
-
-    const vdomNode = {
-        tag: rootTag,
-        cn: []
-    };
-
-    // Parse attributes (very basic: only id for now)
-    const idMatch = attributesString.match(/id="([^"]+)"/);
-    if (idMatch) {
-        vdomNode.id = idMatch[1];
-    }
-
-    // Replace dynamic placeholders with actual values in innerContent
-    innerContent = innerContent.replace(/__DYNAMIC_VALUE_(\d+)__/g, (m, index) => {
-        return values[parseInt(index)];
-    });
-
-    // For the current test case, we know it's <p> and <span>
-    // This is still not a generic parser, but a step towards it.
-    const pSpanRegex = /<p>([\s\S]*?)<\/p>\s*<span>([\s\S]*?)<\/span>/;
-    const pSpanMatch = innerContent.match(pSpanRegex);
-
-    if (pSpanMatch) {
-        vdomNode.cn.push({
-            tag: 'p',
-            text: pSpanMatch[1]
-        });
-        vdomNode.cn.push({
-            tag: 'span',
-            text: pSpanMatch[2]
-        });
-    } else {
-        // Fallback for simpler cases or if the regex doesn't match
-        vdomNode.cn.push({
-            tag: 'div', // Default child tag
-            text: innerContent // Treat as plain text for now
-        });
-    }
-
-    return vdomNode;
+    return new HtmlTemplate(strings, values);
 };
 
-export default html;
+export { html, isHtmlTemplate, HtmlTemplate };

package/src/list/Base.mjs

@@ -235,7 +235,7 @@ class List extends Component {
      * @protected
      */
     afterSetDisableSelection(value, oldValue) {
-        value && this.rendered && this.selectionModel?.deselectAll()
+        value && this.vnodeInitialized && this.selectionModel?.deselectAll()
     }
 
     /**
@@ -796,7 +796,7 @@ class List extends Component {
     onStoreLoad() {
         let me = this;
 
-        if (!me.mounted && me.rendering) {
+        if (!me.mounted && me.isVnodeInitializing) {
             me.on('mounted', () => {
                 me.createItems()
             }, me, {once: true});

package/src/manager/Toast.mjs

@@ -157,7 +157,7 @@ class Toast extends Manager {
      * @param {Neo.component.Toast} toast
      */
     showToast(toast) {
-        toast.render(true);
+        toast.initVnode(true);
 
         let me = this;