Portal.view.*: use text over html for vdom props where appropriate #6878

tobiu · tobiu · commit be4bbc32bb78 · 2025-06-27T15:02:06.000+02:00
diff --git a/apps/portal/view/HeaderToolbar.mjs b/apps/portal/view/HeaderToolbar.mjs
@@ -58,23 +58,23 @@ class HeaderToolbar extends Base {
                 iconCls: 'fa-brands fa-github',
                 url    : 'https://github.com/neomjs/neo',
                 tooltip: {
-                    html     : 'GitHub',
+                    text     : 'GitHub',
                     showDelay: 0,
                     hideDelay: 0
                 }
             }, {
                 iconCls: 'fa-brands fa-slack',
                 url    : 'https://join.slack.com/t/neomjs/shared_invite/zt-6c50ueeu-3E1~M4T9xkNnb~M_prEEOA',
                 tooltip: {
-                    html     : 'Join Slack',
+                    text     : 'Join Slack',
                     showDelay: 0,
                     hideDelay: 0
                 }
             }, {
                 iconCls: 'fa-brands fa-discord',
                 url    : 'https://discord.gg/6p8paPq',
                 tooltip: {
-                    html     : 'Join Discord',
+                    text     : 'Join Discord',
                     showDelay: 0,
                     hideDelay: 0
                 }
diff --git a/apps/portal/view/about/Container.mjs b/apps/portal/view/about/Container.mjs
@@ -20,8 +20,8 @@ class Container extends Base {
          * @member {Object[]} items
          */
         items: [{
-            html: 'Meet the Team',
-            tag : 'h1'
+            tag : 'h1',
+            text: 'Meet the Team'
         }, {
             module         : MemberContainer,
             location       : 'Germany',
diff --git a/apps/portal/view/about/MemberContainer.mjs b/apps/portal/view/about/MemberContainer.mjs
@@ -80,7 +80,7 @@ class MemberContainer extends Container {
         if (value) {
             let item = this.items[1];
 
-            item.vdom.cn[1].cn[2].cn[1].html = value;
+            item.vdom.cn[1].cn[2].cn[1].text = value;
             item.update?.()
         }
     }
@@ -95,7 +95,7 @@ class MemberContainer extends Container {
         if (value) {
             let item = this.items[1];
 
-            item.vdom.cn[1].cn[0].html = value;
+            item.vdom.cn[1].cn[0].text = value;
             item.update?.()
         }
     }
@@ -145,7 +145,7 @@ class MemberContainer extends Container {
         if (value) {
             let item = this.items[1];
 
-            item.vdom.cn[1].cn[1].html = value;
+            item.vdom.cn[1].cn[1].text = value;
             item.update?.()
         }
     }
diff --git a/apps/portal/view/examples/List.mjs b/apps/portal/view/examples/List.mjs
@@ -117,8 +117,8 @@ class List extends BaseList {
                     {cls: ['neo-top-20'], cn: [
                         {...me.createSourceLink(record)},
                         {cls: ['neo-inner-content'], cn: [
-                            {cls: ['neo-inner-details'], html: record.browsers.join(', ')},
-                            {cls: ['neo-inner-details'], html: record.environments.join(', ')}
+                            {cls: ['neo-inner-details'], text: record.browsers.join(', ')},
+                            {cls: ['neo-inner-details'], text: record.environments.join(', ')}
                         ]}
                     ]}
                 ]}
@@ -137,8 +137,8 @@ class List extends BaseList {
         vdom = {
             tag : 'a',
             cls : ['neo-title'],
-            cn  : [{html: record.name.replace(List.nameRegEx, "$1")}],
-            href: record.url
+            href: record.url,
+            text: record.name.replace(List.nameRegEx, '$1')
         };
 
         // We can use a shorter syntax for pointing examples to neomjs.com, but not all examples have to be there.
diff --git a/apps/portal/view/home/ContentBox.mjs b/apps/portal/view/home/ContentBox.mjs
@@ -46,7 +46,7 @@ class ContentBox extends Base {
      */
     afterSetContent(value, oldValue) {
         value?.forEach(item => {
-            this.vdom.cn[1].cn.push({tag: 'li', html: item})
+            this.vdom.cn[1].cn.push({tag: 'li', text: item})
         })
 
         this.update()
@@ -59,7 +59,7 @@ class ContentBox extends Base {
      * @protected
      */
     afterSetHeader(value, oldValue) {
-        this.vdom.cn[0].html = value;
+        this.vdom.cn[0].text = value;
         this.update()
     }
 
diff --git a/apps/portal/view/home/FeatureSection.mjs b/apps/portal/view/home/FeatureSection.mjs
@@ -148,7 +148,7 @@ class FeatureSection extends Container {
      * @protected
      */
     afterSetHeadline(value, oldValue) {
-        this.getItem('headline').html = value
+        this.getItem('headline').text = value
     }
 
     /**
@@ -171,7 +171,7 @@ class FeatureSection extends Container {
      * @protected
      */
     afterSetParagraph(value, oldValue) {
-        this.getItem('paragraph').html = value
+        this.getItem('paragraph').text = value
     }
 
     /**
@@ -181,7 +181,7 @@ class FeatureSection extends Container {
      * @protected
      */
     afterSetSubHeadline(value, oldValue) {
-        this.getItem('sub-headline').html = value
+        this.getItem('sub-headline').text = value
     }
 
     /**
diff --git a/apps/portal/view/home/FooterContainer.mjs b/apps/portal/view/home/FooterContainer.mjs
@@ -37,8 +37,8 @@ class FooterContainer extends Container {
             items: [{
                 module: Component,
                 cls   : ['neo-h2'],
-                html  : 'Content',
-                tag   : 'h2'
+                tag   : 'h2',
+                text  : 'Content'
             }, {
                 iconCls: 'fas fa-people-group',
                 route  : '/about-us',
@@ -64,8 +64,8 @@ class FooterContainer extends Container {
             items: [{
                 module: Component,
                 cls   : ['neo-h2'],
-                html  : 'Community',
-                tag   : 'h2'
+                tag   : 'h2',
+                text  : 'Community'
             }, {
                 iconCls: 'fa-brands fa-github',
                 text   : 'Contribute',
@@ -91,8 +91,8 @@ class FooterContainer extends Container {
             items: [{
                 module: Component,
                 cls   : ['neo-h2'],
-                html  : 'Social Media',
-                tag   : 'h2'
+                tag   : 'h2',
+                text  : 'Social Media'
             }, {
                 iconCls: 'fa-brands fa-linkedin',
                 text   : 'LinkedIn',
@@ -107,7 +107,7 @@ class FooterContainer extends Container {
             }, {
                 module: Component,
                 cls   : ['neo-version'],
-                html  : 'v10.0.0-beta.1'
+                text  : 'v10.0.0-beta.1'
             }]
         }],
         /**
diff --git a/apps/portal/view/home/parts/AfterMath.mjs b/apps/portal/view/home/parts/AfterMath.mjs
@@ -28,16 +28,16 @@ class AfterMath extends BaseContainer {
         }, {
             cls : ['neo-h1'],
             flex: 'none',
-            html: 'Next Steps',
-            tag : 'h1'
+            tag : 'h1',
+            text: 'Next Steps'
         }, {
             cls : ['neo-content'],
             flex: 'none',
             tag : 'ul',
 
             html: `
                 <li>To learn more about Neo.mjs please dive into the <a href="#/learn">Learning Section</a> or browse the <a href="#/blog">Blog</a></li>
-                <li>To arrange a demo or to talk to an engineer email <a href="mailto:info@neomjs.com">info@neomjs.com</a></li>
+                <li>To arrange a demo or to talk to an engineer, email <a href="mailto:info@neomjs.com">info@neomjs.com</a></li>
                 <li>For help starting a project email <a href="mailto:services@neomjs.com">services@neomjs.com</a></li>
                 <li>For questions about private training email <a href="mailto:training@neomjs.com">training@neomjs.com</a></li>
             `
diff --git a/apps/portal/view/home/parts/MainNeo.mjs b/apps/portal/view/home/parts/MainNeo.mjs
@@ -30,8 +30,8 @@ class MainNeo extends BaseContainer {
                 cls  : ['vector']
             }, {
                 cls : ['neo-h1'],
-                html: 'Neo.mjs',
-                tag : 'h1'
+                tag : 'h1',
+                text: 'Neo.mjs'
             }]
         }, {
             module   : MagicMoveText,
@@ -59,7 +59,7 @@ class MainNeo extends BaseContainer {
             flex: 'none',
             tag : 'h3',
 
-            html: [
+            text: [
                 'Neo.mjs provides a new approach for building feature-rich web applications. Increase productivity by leveraging ',
                 'a vast component library and harness the power of multi-threading for extreme real-time performance.'
             ].join('')
diff --git a/apps/portal/view/home/parts/References.mjs b/apps/portal/view/home/parts/References.mjs
@@ -29,13 +29,13 @@ class References extends BaseContainer {
         }, {
             cls : 'neo-h1',
             flex: 'none',
-            html: 'References',
-            tag : 'h1'
+            tag : 'h1',
+            text: 'References'
         }, {
             cls : 'neo-h2',
             flex: 'none',
-            html: 'What people think about Neo',
-            tag : 'h2'
+            tag : 'h2',
+            text: 'What people think about Neo'
         }, {
             module: Carousel,
             // will automatically change to the next extry every 5500 ms
@@ -74,10 +74,10 @@ class References extends BaseContainer {
             // each item will be created like the itemTpl structure
             itemTpl: data => [{
                 cls : 'neo-quote',
-                html: data.quote
+                text: data.quote
             }, {
                 cls : 'neo-details',
-                html: `${data.publisher} - ${data.date}`
+                text: `${data.publisher} - ${data.date}`
             }]
         }]
     }
diff --git a/apps/portal/view/learn/PageSectionsContainer.mjs b/apps/portal/view/learn/PageSectionsContainer.mjs
@@ -33,7 +33,7 @@ class PageSectionsContainer extends Container {
         }, {
             vdom:
             {cn: [
-                {tag: 'h3', html: 'On this page'}
+                {tag: 'h3', text: 'On this page'}
             ]}
         }, {
             module   : PageSectionsList,
diff --git a/apps/portal/view/learn/PageSectionsList.mjs b/apps/portal/view/learn/PageSectionsList.mjs
@@ -32,12 +32,12 @@ class PageSectionsList extends List {
     /**
      * @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 {
             cls : `neo-${record.tag}`,
-            html: record[this.displayField]
+            text: record[this.displayField]
         }
     }
 
diff --git a/apps/portal/view/services/Component.mjs b/apps/portal/view/services/Component.mjs
@@ -20,36 +20,36 @@ class Component extends BaseComponent {
          */
         vdom:
         {cn: [
-            {tag: 'h1', cls: ['neo-h1'], html: 'Services'},
+            {tag: 'h1', cls: ['neo-h1'], text: 'Services'},
             {cls: ['info-block'], cn: [
-                {tag: 'h2', cls: ['neo-h2'], html: 'Professional Trainings'},
-                {tag: 'p',  html: [
+                {tag: 'h2', cls: ['neo-h2'], text: 'Professional Trainings'},
+                {tag: 'p',  text: [
                     'While we do have a self-study based Learning Section online, you can also hire us ',
                     'in case you prefer an Instructor-led Training for bringing your team up to speed.'
                 ].join('')},
                 {tag: 'ul', cn: [
-                    {tag: 'li', html: 'One week packed with 40h of intense training.'},
-                    {tag: 'li', html: 'Including hands-on Labs'},
-                    {tag: 'li', html: '6 - 12 attendees'},
-                    {tag: 'li', html: 'While Remote Trainings are possible, we strongly recommend On-Site Trainings instead.'},
+                    {tag: 'li', text: 'One week packed with 40h of intense training.'},
+                    {tag: 'li', text: 'Including hands-on Labs'},
+                    {tag: 'li', text: '6 - 12 attendees'},
+                    {tag: 'li', text: 'While Remote Trainings are possible, we strongly recommend On-Site Trainings instead.'},
                 ]},
                 {tag: 'p',  html: [
                     'Feel free to send us an <a href="mailto:trainings@neomjs.com">Email</a> to plan your training timeframe.',
                 ].join('')},
             ]},
             {cls: ['info-block'], cn: [
-                {tag: 'h2', cls: ['neo-h2'], html: 'Professional Services'},
-                {tag: 'p',  html: [
+                {tag: 'h2', cls: ['neo-h2'], text: 'Professional Services'},
+                {tag: 'p',  text: [
                     'We can help you to ensure your Neo.mjs based projects run successfully.',
                 ].join('')},
                 {tag: 'ul', cn: [
-                    {tag: 'li', html: 'Feasibility Analysis: Is Neo.mjs a good fit for your project needs?'},
-                    {tag: 'li', html: 'Creating a Neo.mjs PoC which matches your specific needs'},
-                    {tag: 'li', html: 'Code Reviews'},
-                    {tag: 'li', html: 'Frontend-Architecture Guidance'},
-                    {tag: 'li', html: 'Application & Framework Debugging'},
-                    {tag: 'li', html: 'Creation of Custom Components, Design Themes & new Features'},
-                    {tag: 'li', html: 'Hands-On Application Development Support'}
+                    {tag: 'li', text: 'Feasibility Analysis: Is Neo.mjs a good fit for your project needs?'},
+                    {tag: 'li', text: 'Creating a Neo.mjs PoC which matches your specific needs'},
+                    {tag: 'li', text: 'Code Reviews'},
+                    {tag: 'li', text: 'Frontend-Architecture Guidance'},
+                    {tag: 'li', text: 'Application & Framework Debugging'},
+                    {tag: 'li', text: 'Creation of Custom Components, Design Themes & new Features'},
+                    {tag: 'li', text: 'Hands-On Application Development Support'}
                 ]},
                 {tag: 'p',  html: [
                     'In case you need help, send us an <a href="mailto:services@neomjs.com">Email</a>.',

Original file line number	Diff line number	Diff line change
`@@ -80,7 +80,7 @@ class MemberContainer extends Container {`
`80`	`80`	`if (value) {`
`81`	`81`	`let item = this.items[1];`
`82`	`82`
`83`		`- item.vdom.cn[1].cn[2].cn[1].html = value;`
	`83`	`+ item.vdom.cn[1].cn[2].cn[1].text = value;`
`84`	`84`	`item.update?.()`
`85`	`85`	`}`
`86`	`86`	`}`
`@@ -95,7 +95,7 @@ class MemberContainer extends Container {`
`95`	`95`	`if (value) {`
`96`	`96`	`let item = this.items[1];`
`97`	`97`
`98`		`- item.vdom.cn[1].cn[0].html = value;`
	`98`	`+ item.vdom.cn[1].cn[0].text = value;`
`99`	`99`	`item.update?.()`
`100`	`100`	`}`
`101`	`101`	`}`
`@@ -145,7 +145,7 @@ class MemberContainer extends Container {`
`145`	`145`	`if (value) {`
`146`	`146`	`let item = this.items[1];`
`147`	`147`
`148`		`- item.vdom.cn[1].cn[1].html = value;`
	`148`	`+ item.vdom.cn[1].cn[1].text = value;`
`149`	`149`	`item.update?.()`
`150`	`150`	`}`
`151`	`151`	`}`