neo.mjs 10.0.0-beta.1 → 10.0.0-beta.2

package/learn/tree.json

@@ -1,53 +1,54 @@
 {"data": [
-    {"name": "Using These Topics",                                 "parentId": null,                                 "id": "UsingTheseTopics" },
-    {"name": "Benefits",                                           "parentId": null,                "isLeaf": false, "id": "Benefits"},
-        {"name": "Introduction ",                                  "parentId": "Benefits",                           "id": "benefits.Introduction"},
-        {"name": "Off the Main Thread",                            "parentId": "Benefits",                           "id": "benefits.OffTheMainThread"},
-        {"name": "4 Environments",                                 "parentId": "Benefits",                           "id": "benefits.FourEnvironments"},
-        {"name": "Unified Config System",                          "parentId": "Benefits",                           "id": "benefits.ConfigSystem"},
-        {"name": "Extreme Speed",                                  "parentId": "Benefits",                           "id": "benefits.Speed"},
-        {"name": "Multi-Window Applications",                      "parentId": "Benefits",                           "id": "benefits.MultiWindow"},
-        {"name": "Quick Application Development",                  "parentId": "Benefits",                           "id": "benefits.Quick"},
-        {"name": "Complexity and Effort",                          "parentId": "Benefits",                           "id": "benefits.Effort"},
-        {"name": "Forms Engine",                                   "parentId": "Benefits",                           "id": "benefits.FormsEngine"},
-        {"name": "Features and Benefits Summary",                  "parentId": "Benefits",                           "id": "benefits.Features"},
-    {"name": "Getting Started",                                    "parentId": null,                "isLeaf": false, "id": "GettingStarted", "collapsed": true},
-        {"name": "Setup",                                          "parentId": "GettingStarted",                     "id": "gettingstarted.Setup"},
-        {"name": "Workspaces and Applications",                    "parentId": "GettingStarted",                     "id": "gettingstarted.Workspaces"},
-        {"name": "Describing a View",                              "parentId": "GettingStarted",                     "id": "gettingstarted.DescribingTheUI"},
-        {"name": "Events",                                         "parentId": "GettingStarted",                     "id": "gettingstarted.Events"},
-        {"name": "Component References",                           "parentId": "GettingStarted",                     "id": "gettingstarted.References"},
-        {"name": "Extending Classes",                              "parentId": "GettingStarted",                     "id": "gettingstarted.Extending"},
-        {"name": "Config",                                         "parentId": "GettingStarted",                     "id": "gettingstarted.Config"},
-        {"name": "Shared Bindable Data",                           "parentId": "GettingStarted",                     "id": "gettingstarted.ComponentModels"},
-    {"name": "Guides",                                             "parentId": null,                "isLeaf": false, "id": "InDepth",  "collapsed": true},
-        {"name": "Application Bootstrap",                          "parentId": "InDepth",                            "id": "guides.ApplicationBootstrap"},
-        {"name": "Declarative Component Trees VS Imperative Vdom", "parentId": "InDepth",                            "id": "guides.DeclarativeComponentTreesVsImperativeVdom"},
-        {"name": "Working with VDom",                              "parentId": "InDepth",                            "id": "guides.WorkingWithVDom"},
-        {"name": "Instance Lifecycle",                             "parentId": "InDepth",                            "id": "guides.InstanceLifecycle", "hidden": true},
-        {"name": "User Input (Forms)",                             "parentId": "InDepth",                            "id": "guides.Forms",  "hidden": true},
-        {"name": "Component and Container Basics",                "parentId": "InDepth",                            "id": "guides.ComponentsAndContainers"},
-        {"name": "Layouts",                                        "parentId": "InDepth",           "isLeaf": false, "id": "guides.Layouts", "hidden": true},
-        {"name": "Shared Bindable Data (State Providers)",         "parentId": "InDepth",                            "id": "guides.StateProviders"},
-        {"name": "Custom Components",                              "parentId": "InDepth",                            "id": "guides.CustomComponents", "hidden": true},
-        {"name": "Events",                                         "parentId": "InDepth",           "isLeaf": false, "id": "GuideEvents"},
-            {"name": "Custom Events",                              "parentId": "GuideEvents",                        "id": "guides.events.CustomEvents"},
-            {"name": "DOM Events",                                 "parentId": "GuideEvents",                        "id": "guides.events.DomEvents"},
-        {"name": "Portal App",                                     "parentId": "InDepth",                            "id": "guides.PortalApp"},
-        {"name": "Tables (Stores)",                                "parentId": "InDepth",                            "id": "guides.Tables", "hidden": true},
-        {"name": "Multi-Window Applications",                      "parentId": "InDepth",                            "id": "guides.MultiWindow", "hidden":  true},
-        {"name": "Main Thread Addons",                             "parentId": "InDepth",           "isLeaf": false, "id": "MainThreadAddons", "hidden": true},
-            {"name": "Introduction",                               "parentId": "MainThreadAddons",                   "id": "guides.MainThreadAddonIntro"},
-            {"name": "Example",                                    "parentId": "MainThreadAddons",                   "id": "guides.MainThreadAddonExample"},
-        {"name": "Mixins",                                         "parentId": "InDepth",                            "id": "guides.Mixins", "hidden": true},
-    {"name": "Tutorials",                                          "parentId": null,                "isLeaf": false, "id": "Tutorials",  "collapsed": true},
-        {"name": "Rock Scissors Paper",                            "parentId": "Tutorials",                          "id": "tutorials.RSP", "hidden": true},
-        {"name": "Earthquakes",                                    "parentId": "Tutorials",                          "id": "tutorials.Earthquakes"},
-        {"name": "Todo List",                                      "parentId": "Tutorials",                          "id": "tutorials.TodoList"},
-    {"name": "JavaScript Classes",                                 "parentId": null,                "isLeaf": false, "id": "JavaScript", "hidden": true},
-        {"name": "Classes, Properties, and Methods",               "parentId": "JavaScript",                         "id": "javascript.Classes"},
-        {"name": "Overriding Methods",                             "parentId": "JavaScript",                         "id": "javascript.Overrides"},
-        {"name": "Other JavaScript Class Features",                "parentId": "JavaScript",                         "id": "javascript.ClassFeatures"},
-        {"name": "Super",                                          "parentId": "JavaScript",                         "id": "javascript.Super"},
-        {"name": "New Node",                                       "parentId": "JavaScript",                         "id": "javascript.NewNode"}
+    {"name": "Using These Topics",                                   "parentId": null,                                 "id": "UsingTheseTopics" },
+    {"name": "Benefits",                                             "parentId": null,                "isLeaf": false, "id": "Benefits"},
+        {"name": "Introduction ",                                    "parentId": "Benefits",                           "id": "benefits.Introduction"},
+        {"name": "Off the Main Thread",                              "parentId": "Benefits",                           "id": "benefits.OffTheMainThread"},
+        {"name": "4 Environments",                                   "parentId": "Benefits",                           "id": "benefits.FourEnvironments"},
+        {"name": "Unified Config System",                            "parentId": "Benefits",                           "id": "benefits.ConfigSystem"},
+        {"name": "RPC Layer",                                        "parentId": "Benefits",                           "id": "benefits.RPCLayer"},
+        {"name": "Extreme Speed",                                    "parentId": "Benefits",                           "id": "benefits.Speed"},
+        {"name": "Multi-Window Applications",                        "parentId": "Benefits",                           "id": "benefits.MultiWindow"},
+        {"name": "Quick Application Development",                    "parentId": "Benefits",                           "id": "benefits.Quick"},
+        {"name": "Complexity and Effort",                            "parentId": "Benefits",                           "id": "benefits.Effort"},
+        {"name": "Forms Engine",                                     "parentId": "Benefits",                           "id": "benefits.FormsEngine"},
+        {"name": "Features and Benefits Summary",                    "parentId": "Benefits",                           "id": "benefits.Features"},
+    {"name": "Getting Started",                                      "parentId": null,                "isLeaf": false, "id": "GettingStarted", "collapsed": true},
+        {"name": "Setup",                                            "parentId": "GettingStarted",                     "id": "gettingstarted.Setup"},
+        {"name": "Workspaces and Applications",                      "parentId": "GettingStarted",                     "id": "gettingstarted.Workspaces"},
+        {"name": "Describing a View",                                "parentId": "GettingStarted",                     "id": "gettingstarted.DescribingTheUI"},
+        {"name": "Events",                                           "parentId": "GettingStarted",                     "id": "gettingstarted.Events"},
+        {"name": "Component References",                             "parentId": "GettingStarted",                     "id": "gettingstarted.References"},
+        {"name": "Extending Classes",                                "parentId": "GettingStarted",                     "id": "gettingstarted.Extending"},
+        {"name": "Config",                                           "parentId": "GettingStarted",                     "id": "gettingstarted.Config"},
+        {"name": "Shared Bindable Data",                             "parentId": "GettingStarted",                     "id": "gettingstarted.ComponentModels"},
+    {"name": "Guides",                                               "parentId": null,                "isLeaf": false, "id": "InDepth",  "collapsed": true},
+        {"name": "Application Bootstrap",                            "parentId": "InDepth",                            "id": "guides.ApplicationBootstrap"},
+        {"name": "Instance Lifecycle",                               "parentId": "InDepth",                            "id": "guides.InstanceLifecycle"},
+        {"name": "Declarative Component Trees VS Imperative Vdom",   "parentId": "InDepth",                            "id": "guides.DeclarativeComponentTreesVsImperativeVdom"},
+        {"name": "Shared Bindable Data (State Providers)",           "parentId": "InDepth",                            "id": "guides.StateProviders"},
+        {"name": "Working with VDom",                                "parentId": "InDepth",                            "id": "guides.WorkingWithVDom"},
+        {"name": "Config System Deep Dive",                          "parentId": "InDepth",                            "id": "guides.ConfigSystemDeepDive"},
+        {"name": "Main Thread Addons: Interacting with the Browser", "parentId": "InDepth",                            "id": "guides.MainThreadAddons"},
+        {"name": "User Input (Forms)",                               "parentId": "InDepth",                            "id": "guides.Forms",  "hidden": true},
+        {"name": "Component and Container Basics",                   "parentId": "InDepth",                            "id": "guides.ComponentsAndContainers"},
+        {"name": "Layouts",                                          "parentId": "InDepth",           "isLeaf": false, "id": "guides.Layouts", "hidden": true},
+        {"name": "Custom Components",                                "parentId": "InDepth",                            "id": "guides.CustomComponents", "hidden": true},
+        {"name": "Events",                                           "parentId": "InDepth",           "isLeaf": false, "id": "GuideEvents"},
+            {"name": "Custom Events",                                "parentId": "GuideEvents",                        "id": "guides.events.CustomEvents"},
+            {"name": "DOM Events",                                   "parentId": "GuideEvents",                        "id": "guides.events.DomEvents"},
+        {"name": "Portal App",                                       "parentId": "InDepth",                            "id": "guides.PortalApp"},
+        {"name": "Tables (Stores)",                                  "parentId": "InDepth",                            "id": "guides.Tables", "hidden": true},
+        {"name": "Multi-Window Applications",                        "parentId": "InDepth",                            "id": "guides.MultiWindow", "hidden":  true},
+        {"name": "Mixins",                                           "parentId": "InDepth",                            "id": "guides.Mixins", "hidden": true},
+    {"name": "Tutorials",                                            "parentId": null,                "isLeaf": false, "id": "Tutorials",  "collapsed": true},
+        {"name": "Rock Scissors Paper",                              "parentId": "Tutorials",                          "id": "tutorials.RSP", "hidden": true},
+        {"name": "Earthquakes",                                      "parentId": "Tutorials",                          "id": "tutorials.Earthquakes"},
+        {"name": "Todo List",                                        "parentId": "Tutorials",                          "id": "tutorials.TodoList"},
+    {"name": "JavaScript Classes",                                   "parentId": null,                "isLeaf": false, "id": "JavaScript", "hidden": true},
+        {"name": "Classes, Properties, and Methods",                 "parentId": "JavaScript",                         "id": "javascript.Classes"},
+        {"name": "Overriding Methods",                               "parentId": "JavaScript",                         "id": "javascript.Overrides"},
+        {"name": "Other JavaScript Class Features",                  "parentId": "JavaScript",                         "id": "javascript.ClassFeatures"},
+        {"name": "Super",                                            "parentId": "JavaScript",                         "id": "javascript.Super"},
+        {"name": "New Node",                                         "parentId": "JavaScript",                         "id": "javascript.NewNode"},
+    {"name": "Glossary",                                             "parentId": null,                                 "id": "Glossary"}
 ]}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name"           : "neo.mjs",
-    "version"        : "10.0.0-beta.1",
+    "version"        : "10.0.0-beta.2",
     "description"    : "Neo.mjs: The multi-threaded UI framework for building ultra-fast, desktop-like web applications with uncompromised responsiveness, inherent security, and a transpilation-free dev mode.",
     "type"           : "module",
     "repository"     : {
@@ -87,7 +87,7 @@
         "highlightjs-line-numbers.js"  : "^2.9.0",
         "html-minifier-terser"         : "^7.2.0",
         "inquirer"                     : "^12.6.3",
-        "marked"                       : "^15.0.12",
+        "marked"                       : "^16.0.0",
         "monaco-editor"                : "0.50.0",
         "neo-jsdoc"                    : "1.0.1",
         "neo-jsdoc-x"                  : "1.0.5",

package/src/DefaultConfig.mjs

@@ -289,12 +289,12 @@ const DefaultConfig = {
     useVdomWorker: true,
     /**
      * buildScripts/injectPackageVersion.mjs will update this value
-     * @default '10.0.0-beta.1'
+     * @default '10.0.0-beta.2'
      * @memberOf! module:Neo
      * @name config.version
      * @type String
      */
-    version: '10.0.0-beta.1'
+    version: '10.0.0-beta.2'
 };
 
 Object.assign(DefaultConfig, {

package/src/Main.mjs

@@ -1,10 +1,11 @@
-import Neo           from './Neo.mjs';
-import * as core     from './core/_export.mjs';
-import DomAccess     from './main/DomAccess.mjs'; // has to get imported before DeltaUpdates
-import DeltaUpdates  from './main/DeltaUpdates.mjs';
-import DomEvents     from './main/DomEvents.mjs';
-import Observable    from './core/Observable.mjs';
-import WorkerManager from './worker/Manager.mjs';
+import Neo                   from './Neo.mjs';
+import * as core             from './core/_export.mjs';
+import ClassHierarchyManager from './manager/ClassHierarchy.mjs';
+import DomAccess             from './main/DomAccess.mjs'; // has to get imported before DeltaUpdates
+import DeltaUpdates          from './main/DeltaUpdates.mjs';
+import DomEvents             from './main/DomEvents.mjs';
+import Observable            from './core/Observable.mjs';
+import WorkerManager         from './worker/Manager.mjs';
 
 /**
  * @class Neo.Main

package/src/Neo.mjs

@@ -466,11 +466,11 @@ Neo = globalThis.Neo = Object.assign({
             proto      = cls.prototype || cls,
             ns         = Neo.ns(proto.constructor.config.className, false),
             protos     = [],
-            cfg, config, ctor, ntype;
+            cfg, config, ctor, hierarchyInfo, ntype;
 
         /*
          * If the namespace already exists, directly return it.
-         * This can happen when using different versions of neo.mjs
+         * This can happen when using different versions of Neo.mjs
          * => Especially singletons (IdGenerator) must stay unique.
          *
          * This can also happen when using different environments of neo.mjs in parallel.
@@ -583,6 +583,20 @@ Neo = globalThis.Neo = Object.assign({
             Neo.applyToGlobalNs(cls)
         }
 
+        hierarchyInfo = {
+            className      : proto.className,
+            module         : cls,
+            ntype          : Object.hasOwn(proto, 'ntype') ? proto.ntype : null,
+            parentClassName: proto.__proto__?.className || null
+        };
+
+        if (Neo.manager?.ClassHierarchy) {
+            Neo.manager.ClassHierarchy.add(hierarchyInfo)
+        } else {
+            Neo.classHierarchyMap ??= {};
+            Neo.classHierarchyMap[proto.className] = hierarchyInfo
+        }
+
         return cls
     },
 

package/src/button/Base.mjs

@@ -100,9 +100,9 @@ class Button extends Component {
         route_: null,
         /**
          * The text displayed on the button [optional]
-         * @member {String|null} text_=null
+         * @member {String|null} text=null
          */
-        text_: null,
+        text: null,
         /**
          * Transforms the button tag into an a tag [optional]
          * @member {String|null} url_=null

package/src/calendar/view/SettingsContainer.mjs

@@ -95,8 +95,8 @@ class SettingsContainer extends Container {
                 ntype : 'component',
                 flag  : 'day',
                 header: {text: 'Day'},
-                html  : 'Day',
-                style : {padding: '20px'}
+                style : {padding: '20px'},
+                test  : 'Day'
             }, {
                 module: () => import('./settings/WeekContainer.mjs'),
                 flag  : 'week',

package/src/calendar/view/YearComponent.mjs

@@ -490,7 +490,7 @@ class YearComponent extends Component {
                             {cls: ['neo-animation-wrapper'], cn: [
                                 {cls: ['neo-content-wrapper'], cn: [
                                     {cls: ['neo-year-header'], cn: [
-                                        {html: me.currentDate.getFullYear()},
+                                        {text: me.currentDate.getFullYear()},
                                         {cls: ['neo-nav-button', 'neo-prev-button']},
                                         {cls: ['neo-nav-button', 'neo-next-button']}
                                     ]},
@@ -539,7 +539,7 @@ class YearComponent extends Component {
         for (; i < 7; i++) {
             node = {
                 cls : ['neo-cell', 'neo-weekday-cell'],
-                html: me.intlFormat_day.format(date)
+                text: me.intlFormat_day.format(date)
             };
 
             day = date.getDay();
@@ -591,8 +591,8 @@ class YearComponent extends Component {
 
                 cn: [{
                     cls      : ['neo-cell', 'neo-weeknumber-cell'],
-                    html     : DateUtil.getWeekOfYear(weekDate),
-                    removeDom: !me.showWeekNumbers
+                    removeDom: !me.showWeekNumbers,
+                    text     : DateUtil.getWeekOfYear(weekDate)
                 }]
             };
 
@@ -610,7 +610,7 @@ class YearComponent extends Component {
 
                     cn: [{
                         cls : ['neo-cell-content'],
-                        html: hasContent ? day : me.showDisabledDays ? date.getDate() : ''
+                        text: hasContent ? day : me.showDisabledDays ? date.getDate() : ''
                     }]
                 };
 
@@ -679,7 +679,7 @@ class YearComponent extends Component {
 
                 monthVdom =
                 {cls: ['neo-month'], cn: [
-                    {cls: ['neo-month-name'], html: me.intlFormat_month.format(currentDate)},
+                    {cls: ['neo-month-name'], text: me.intlFormat_month.format(currentDate)},
                     me.createDayNamesRow()
                 ]};
 
@@ -809,7 +809,7 @@ class YearComponent extends Component {
                     day  = date.getDay();
                     node = vdom.cn[0].cn[1].cn[j].cn[1].cn[i];
 
-                    node.html = me.intlFormat_day.format(date);
+                    node.text = me.intlFormat_day.format(date);
 
                     if (!me.showWeekends && (day === 0 || day === 6)) {
                         node.removeDom = true
@@ -829,7 +829,7 @@ class YearComponent extends Component {
      *
      */
     updateHeaderYear() {
-        this.vdom.cn[0].cn[0].cn[0].html = this.currentDate.getFullYear()
+        this.vdom.cn[0].cn[0].cn[0].text = this.currentDate.getFullYear()
     }
 
     /**
@@ -852,7 +852,7 @@ class YearComponent extends Component {
                 currentDate.setMonth(i);
                 currentDate.setDate(1);
 
-                vdom.cn[0].cn[1].cn[i].cn[0].html = me.intlFormat_month.format(currentDate)
+                vdom.cn[0].cn[1].cn[i].cn[0].text = me.intlFormat_month.format(currentDate)
             }
 
             !silent && me.update()

package/src/calendar/view/calendars/ColorsList.mjs

@@ -63,7 +63,7 @@ class ColorsList extends List {
      * Override this method for custom renderers
      * @param {Object} record
      * @param {Number} index
-     * @returns {Object|Object[]|String} Either a config object to assign to the item, a vdom cn array or a html string
+     * @returns {Object|Object[]|String} Either a config object to assign to the item, a vdom cn array or a string.
      */
     createItemContent(record, index) {
         return {style: {

package/src/calendar/view/calendars/List.mjs

@@ -43,7 +43,7 @@ class List extends ComponentList {
      * Override this method for custom renderers
      * @param {Object} record
      * @param {Number} index
-     * @returns {Object|Object[]|String} Either a config object to assign to the item, a vdom cn array or a html string
+     * @returns {Object|Object[]|String} Either a config object to assign to the item, a vdom cn array or a string.
      */
     createItemContent(record, index) {
         let me       = this,

package/src/calendar/view/month/Component.mjs

@@ -485,10 +485,10 @@ class Component extends BaseComponent {
                             tag : 'span',
                             cls : ['neo-month-name'],
                             flag: 'month-name',
-                            html: me.intlFormat_month.format(date)
+                            text: me.intlFormat_month.format(date)
                         }, {
                             vtype: 'text',
-                            html : ` ${date.getFullYear()}`
+                            text : ` ${date.getFullYear()}`
                         }]
                     }]
                 };
@@ -499,8 +499,8 @@ class Component extends BaseComponent {
                 id : `${me.id}__day__${ymdDate}`,
                 cn : [{
                     cls : ['neo-day-number'],
-                    html: day,
-                    id : `${me.id}__day_number__${ymdDate}`
+                    id : `${me.id}__day_number__${ymdDate}`,
+                    text: day
                 }]
             };
 
@@ -530,12 +530,12 @@ class Component extends BaseComponent {
 
                             cn: [{
                                 cls : ['neo-event-title'],
-                                html: record.title,
-                                id  : me.id + '__title__' + recordKey
+                                id  : me.id + '__title__' + recordKey,
+                                text: record.title
                             }, {
                                 cls : ['neo-event-time'],
-                                html: me.intlFormat_time.format(record.startDate),
-                                id  : me.id + '__time__' + recordKey
+                                id  : me.id + '__time__' + recordKey,
+                                text: me.intlFormat_time.format(record.startDate)
                             }]
                         });
                     }
@@ -729,8 +729,8 @@ class Component extends BaseComponent {
             if (flag) {
                 date = new Date(flag);
                 date.setMonth(date.getMonth() + 1);
-                header.cn[0].html = me.intlFormat_month.format(date);
-                header.cn[1].html = ` ${date.getFullYear()}`;
+                header.cn[0].text = me.intlFormat_month.format(date);
+                header.cn[1].text = ` ${date.getFullYear()}`;
                 break
             }
         }
@@ -753,8 +753,8 @@ class Component extends BaseComponent {
             i      = 1,
             day, node;
 
-        header.cn[0].html = me.intlFormat_month.format(date);
-        header.cn[1].html = ` ${date.getFullYear()}`;
+        header.cn[0].text = me.intlFormat_month.format(date);
+        header.cn[1].text = ` ${date.getFullYear()}`;
 
         date.setDate(me.currentDate.getDate() - me.currentDate.getDay() + me.weekStartDay);
 
@@ -764,7 +764,7 @@ class Component extends BaseComponent {
             if (create) {
                 node = {
                     cls : ['neo-day-name'],
-                    html: me.intlFormat_day.format(date)
+                    text: me.intlFormat_day.format(date)
                 };
 
                 if (!me.showWeekends && (day === 0 || day === 6)) {
@@ -777,7 +777,7 @@ class Component extends BaseComponent {
 
                 // the method could be called before the header content got created
                 if (node) {
-                    node.html = me.intlFormat_day.format(date);
+                    node.text = me.intlFormat_day.format(date);
 
                     if (!me.showWeekends && (day === 0 || day === 6)) {
                         node.removeDom = true
@@ -802,7 +802,7 @@ class Component extends BaseComponent {
             months = VDomUtil.getFlags(me.vdom, 'month-name');
 
         months.forEach(month => {
-            month.html = me.intlFormat_month.format(date);
+            month.text = me.intlFormat_month.format(date);
             date.setMonth(date.getMonth() + 1);
         });
 

package/src/calendar/view/week/Component.mjs

@@ -582,8 +582,8 @@ class Component extends BaseComponent {
 
         header =
         {cls: ['neo-header-row-item'], removeDom: removeDom, cn: [
-            {cls: ['neo-day'], html: me.intlFormat_day.format(date)},
-            {cls: dateCls,     html: currentDate}
+            {cls: ['neo-day'], text: me.intlFormat_day.format(date)},
+            {cls: dateCls,     text: currentDate}
         ]};
 
         return {column, header}
@@ -906,17 +906,17 @@ class Component extends BaseComponent {
 
                             cn: [{
                                 cls : ['neo-event-time'],
-                                html: me.intlFormat_time.format(record.startDate),
-                                id  : `${me.id}__time__${recordKey}`
+                                id  : `${me.id}__time__${recordKey}`,
+                                text: me.intlFormat_time.format(record.startDate)
                             }, {
                                 cls : ['neo-event-title'],
-                                html: record.title,
-                                id  : `${me.id}__title__${recordKey}`
+                                id  : `${me.id}__title__${recordKey}`,
+                                text: record.title
                             }, {
                                 cls      : ['neo-event-time', 'neo-event-end-time'],
-                                html     : me.intlFormat_time.format(record.endDate),
                                 id       : `${me.id}__enddate__${recordKey}`,
-                                removeDom: !showEventEndTime
+                                removeDom: !showEventEndTime,
+                                text     : me.intlFormat_time.format(record.endDate)
                             }],
 
                             style: {
@@ -975,8 +975,8 @@ class Component extends BaseComponent {
 
                 header.cn.push(
                 {cls: ['neo-header-row-item'], id: headerId, removeDom, cn: [
-                    {cls: ['neo-day'], html: me.intlFormat_day.format(date), id: `${headerId}_day`},
-                    {cls : dateCls,    html: currentDate,                    id: `${headerId}_date`}
+                    {cls: ['neo-day'], id: `${headerId}_day`,  text: me.intlFormat_day.format(date)},
+                    {cls : dateCls,    id: `${headerId}_date`, text: currentDate}
                 ]})
             } else {
                 Object.assign(content.cn[i], {
@@ -987,8 +987,8 @@ class Component extends BaseComponent {
                 });
 
                 Object.assign(header.cn[i],       {id: headerId, removeDom});
-                Object.assign(header.cn[i].cn[0], {html: me.intlFormat_day.format(date), id: `${headerId}_day`});
-                Object.assign(header.cn[i].cn[1], {cls: dateCls, html: currentDate, id: `${headerId}_date`})
+                Object.assign(header.cn[i].cn[0], {id: `${headerId}_day`, text: me.intlFormat_day.format(date)});
+                Object.assign(header.cn[i].cn[1], {cls: dateCls, id: `${headerId}_date`, text: currentDate})
             }
 
             date.setDate(date.getDate() + 1)

package/src/calendar/view/week/EventDragZone.mjs

@@ -450,8 +450,8 @@ class EventDragZone extends DragZone {
                 endDate = me.adjustEndDate(endDate);
 
                 deltas.push({
-                    id       : me.dragProxy.vdom.cn[2].id,
-                    innerHTML: owner.intlFormat_time.format(endDate)
+                    id         : me.dragProxy.vdom.cn[2].id,
+                    textContent: owner.intlFormat_time.format(endDate)
                 });
 
                 if (keepEndDate || keepStartDate) {
@@ -460,8 +460,8 @@ class EventDragZone extends DragZone {
                 }
 
                 deltas.push({
-                    id       : me.dragProxy.vdom.cn[0].id,
-                    innerHTML: owner.intlFormat_time.format(startDate)
+                    id         : me.dragProxy.vdom.cn[0].id,
+                    textContent: owner.intlFormat_time.format(startDate)
                 });
 
                 // check if the node got added yet

package/src/calendar/view/week/TimeAxisComponent.mjs

@@ -179,16 +179,16 @@ class TimeAxisComponent extends Component {
      */
     createItems() {
         let {vdom} = this,
-            html, i;
+            text, i;
 
         vdom.cn = [];
 
         for (i=0; i < 25; i++) {
-            html = i === 24 ? '00:00' : (i < 10 ? '0' : '') + i + ':00';
+            text = i === 24 ? '00:00' : (i < 10 ? '0' : '') + i + ':00';
 
             vdom.cn.push({
                 cls: ['neo-c-w-timeaxis-item'],
-                cn : [{html}]
+                cn : [{text}]
             })
         }
     }

package/src/component/Base.mjs

@@ -342,6 +342,11 @@ class Component extends Base {
          * @member {String|null} tag_=null
          */
         tag_: null,
+        /**
+         * The top level textContent of the component
+         * @member {String|null} text_=null
+         */
+        text_: null,
         /**
          * Add tooltip config object or a string containing the display text
          * See tooltip/Base.mjs
@@ -995,6 +1000,16 @@ class Component extends Base {
         }
     }
 
+    /**
+     * Triggered after the text config got changed
+     * @param {String|null} value
+     * @param {String|null} oldValue
+     * @protected
+     */
+    afterSetText(value, oldValue) {
+        this.changeVdomRootKey('text', value)
+    }
+
     /**
      * Triggered after the tooltip config got changed
      * @param {Object|String} value
@@ -1417,8 +1432,8 @@ class Component extends Base {
                     cls: this.loadingSpinnerCls
                 }, {
                     cls      : ['neo-loading-message'],
-                    html     : loadingMessage,
-                    removeDom: !Neo.isString(loadingMessage)
+                    removeDom: !Neo.isString(loadingMessage),
+                    text     : loadingMessage
                 }]
             }]
         }

package/src/component/Carousel.mjs

@@ -65,10 +65,10 @@ class Carousel extends Component {
          *      record = {foo: ... , bar: ...}
          *      data => [{
          *          cls: 'css-foo-class',
-         *          html: data.foo
+         *          text: data.foo
          *      },
          *      {
-         *          html: data.baa
+         *          text: data.bar
          *      }]"
          */
         itemTpl_: null,

package/src/component/Chip.mjs

@@ -38,9 +38,9 @@ class Chip extends Component {
         iconCls_: null,
         /**
          * The text displayed on the button [optional]
-         * @member {String|null} text_=null
+         * @member {String|null} text=null
          */
-        text_: null,
+        text: null,
         /**
          * Set this one to false when used in lists
          * @member {Boolean} useDomListeners=true
@@ -132,7 +132,7 @@ class Chip extends Component {
             textNode.removeDom = true
         } else {
             textNode.removeDom = false;
-            textNode.html      = value
+            textNode.text      = value
         }
 
         this.update()

package/src/component/Circle.mjs

@@ -850,8 +850,8 @@ class Circle extends Component {
         let me          = this,
             innerCircle = me.getInnerCircle();
 
-        innerCircle.cn[0].html = me.store?.getCount() || 0;
-        innerCircle.cn[1].html = me.title;
+        innerCircle.cn[0].text = me.store?.getCount() || 0;
+        innerCircle.cn[1].text = me.title;
 
         !silent && me.update()
     }