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

package/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>.',

package/apps/realworld/view/FooterComponent.mjs

@@ -17,7 +17,7 @@ class FooterComponent extends Component {
         _vdom:
         {tag: 'footer', cn: [
             {cls: ['container'], cn: [
-                {tag: 'a', cls: ['logo-font'], href: '#/', html: 'conduit'},
+                {tag: 'a', cls: ['logo-font'], href: '#/', text: 'conduit'},
                 {tag: 'span', cls: 'attribution', html: 'An interactive learning project from <a href="https://thinkster.io">Thinkster</a>. Code &amp; design licensed under MIT.'}
             ]}
         ]}

package/apps/realworld/view/HeaderComponent.mjs

@@ -38,34 +38,34 @@ class HeaderComponent extends Component {
         _vdom:
         {tag: 'nav', cls: ['navbar navbar-light'], cn: [
             {cls: ['container'], cn: [
-                {tag: 'a',  cls: ['navbar-brand'], href: '#/', html: 'conduit'},
+                {tag: 'a',  cls: ['navbar-brand'], href: '#/', text: 'conduit'},
                 {tag: 'ul', cls: ['nav navbar-nav', 'pull-xs-right'], cn: [
                     {tag: 'li', cls: ['nav-item'], cn: [
-                        {tag: 'a', cls: ['nav-link'], href: '#/', html: 'Home'}
+                        {tag: 'a', cls: ['nav-link'], href: '#/', text: 'Home'}
                     ]},
                     {tag: 'li', cls: ['nav-item'], removeDom: true, cn: [
                         {tag: 'a', cls: ['nav-link'], href: '#/editor', cn: [
                             {tag: 'i', cls: 'ion-compose'},
-                            {vtype: 'text', html: ' New Article'}
+                            {vtype: 'text', text: ' New Article'}
                         ]}
                     ]},
                     {tag: 'li', cls: ['nav-item'], removeDom: true, cn: [
                         {tag: 'a', cls: ['nav-link'], href: '#/settings', cn: [
                             {tag: 'i', cls: 'ion-gear-a'},
-                            {vtype: 'text', html: ' Settings'}
+                            {vtype: 'text', text: ' Settings'}
                         ]}
                     ]},
                     {tag: 'li', cls: ['nav-item'], removeDom: true, cn: [
                         {tag: 'a', cls : ['nav-link'], href: '#/profile', cn: [
                             {tag: 'img', cls: ['user-pic']},
-                            {vtype: 'text', html: ' Profile'}
+                            {vtype: 'text', text: ' Profile'}
                         ]}
                     ]},
                     {tag: 'li', cls: ['nav-item'], cn: [
-                        {tag : 'a', cls : ['nav-link'], href: '#/login', html: 'Sign in'}
+                        {tag : 'a', cls : ['nav-link'], href: '#/login', text: 'Sign in'}
                     ]},
                     {tag: 'li', cls: ['nav-item'], cn: [
-                        {tag: 'a', cls : ['nav-link'], href: '#/register', html: 'Sign up'}
+                        {tag: 'a', cls : ['nav-link'], href: '#/register', text: 'Sign up'}
                     ]}
                 ]}
             ]}
@@ -140,7 +140,7 @@ class HeaderComponent extends Component {
                 profileLink = me.vdom.cn[0].cn[1].cn[3].cn[0];
 
             profileLink.href = '#/profile/' + value;
-            profileLink.cn[1].html = ' ' + value;
+            profileLink.cn[1].text = ' ' + value;
 
             me.update();
         }

package/apps/realworld/view/HomeComponent.mjs

@@ -65,8 +65,8 @@ class HomeComponent extends Component {
         {cn: [
             {cls: ['banner'], cn: [
                 {cls: ['container'], cn: [
-                    {tag: 'h1', cls: ['logo-font'], html: 'conduit'},
-                    {tag: 'p', html: 'A place to share your knowledge.'}
+                    {tag: 'h1', cls: ['logo-font'], text: 'conduit'},
+                    {tag: 'p', text: 'A place to share your knowledge.'}
                 ]}
             ]},
             {cls: ['container', 'page'], cn: [
@@ -211,7 +211,7 @@ class HomeComponent extends Component {
                         cls : ['page-link', 'prevent-click'],
                         id  : me.getNavLinkVdomId(i),
                         href: '',
-                        html: i
+                        text: i
                     }]
                 });
             }
@@ -274,7 +274,7 @@ class HomeComponent extends Component {
                     tag : 'a',
                     cls : cls,
                     href: '',
-                    html: item.name,
+                    text: item.name,
                     id  : me.id + '__nav-item-link_' + index,
                 }]
             });
@@ -376,7 +376,7 @@ class HomeComponent extends Component {
             opts       = {};
 
         if (!el.vdom.cls.includes('disabled')) {
-            switch (el.vdom.html) {
+            switch (el.vdom.text) {
                 case 'Global Feed':
                     me.activeTag = null;
                     break;
@@ -387,7 +387,7 @@ class HomeComponent extends Component {
                     };
                     break;
                 default: // tag
-                    me.activeTag = el.vdom.html.substring(2); // remove the '# '
+                    me.activeTag = el.vdom.text.substring(2); // remove the '# '
                     break;
             }
 

package/apps/realworld/view/article/CommentComponent.mjs

@@ -49,7 +49,7 @@ class CommentComponent extends Component {
                 {tag: 'a', cls : ['comment-author'], href: '', cn: [
                     {tag: 'img', cls: ['comment-author-img']}
                 ]},
-                {vtype: 'text', html: ' '},
+                {vtype: 'text', text: ' '},
                 {tag: 'a', cls: ['comment-author'], href: ''},
                 {tag: 'span', cls : ['date-posted']},
                 {tag: 'span', cls : ['mod-options'], flag: 'mod-options', cn: [
@@ -90,7 +90,7 @@ class CommentComponent extends Component {
             let me = this;
 
             me.vdom.cn[1].cn[0].cn[0].src = value.image;
-            me.vdom.cn[1].cn[2].html      = value.username;
+            me.vdom.cn[1].cn[2].text      = value.username;
 
             me.update();
             me.onCurrentUserChange();
@@ -105,7 +105,7 @@ class CommentComponent extends Component {
      */
     afterSetBody(value, oldValue) {
         if (value) {
-            this.vdom.cn[0].cn[0].html = value;
+            this.vdom.cn[0].cn[0].text = value;
             this.update();
         }
     }
@@ -118,7 +118,7 @@ class CommentComponent extends Component {
      */
     afterSetCreatedAt(value, oldValue) {
         if (value) {
-            this.vdom.cn[1].cn[3].html = new Intl.DateTimeFormat('en-US', {
+            this.vdom.cn[1].cn[3].text = new Intl.DateTimeFormat('en-US', {
                 day  : 'numeric',
                 month: 'long',
                 year : 'numeric'

package/apps/realworld/view/article/Component.mjs

@@ -87,19 +87,19 @@ class Component extends BaseComponent {
                         ]},
                         {tag: 'button', cls: ['btn', 'btn-sm', 'btn-outline-secondary', 'edit-button'], flag: 'edit-button', removeDom: true, cn: [
                             {tag: 'i', cls: ['ion-edit']},
-                            {vtype: 'text', html: ' Edit Article'}
+                            {vtype: 'text', text: ' Edit Article'}
                         ]},
                         {vtype: 'text', html: '  '},
                         {tag: 'button', cls: ['btn', 'btn-sm', 'btn-outline-primary', 'favorite-button'], flag: 'favorited', cn: [
                             {tag: 'i', cls: ['ion-heart']},
                             {vtype: 'text', html: ' '},
                             {vtype: 'text'},
-                            {vtype: 'text', html: ' Post '},
+                            {vtype: 'text', text: ' Post '},
                             {tag: 'span', cls: ['counter'], flag: 'favoritesCount'}
                         ]},
                         {tag: 'button', cls: ['btn', 'btn-sm', 'btn-outline-danger', 'delete-button'], flag: 'delete-button', removeDom: true, cn: [
                             {tag: 'i', cls: ['ion-trash-a']},
-                            {vtype: 'text', html: ' Delete Article'}
+                            {vtype: 'text', text: ' Delete Article'}
                         ]}
                     ]}
                 ]}
@@ -114,7 +114,7 @@ class Component extends BaseComponent {
                         {tag: 'a', flag: 'userimage', cn: [{tag: 'img'}]},
                         {cls: ['info'], cn: [
                             {tag: 'a', cls: ['author'], flag: 'username'},
-                            {tag: 'span', cls: ['date'], html: 'January 20th'}
+                            {tag: 'span', cls: ['date'], text: 'January 20th'}
                         ]},
                         {tag: 'button', cls: ['btn', 'btn-sm', 'btn-outline-secondary', 'follow-button'], cn: [
                             {tag: 'i', flag: 'followIcon'},
@@ -126,7 +126,7 @@ class Component extends BaseComponent {
                             {tag: 'i', cls: ['ion-heart']},
                             {vtype: 'text', html: ' '},
                             {vtype: 'text'},
-                            {vtype: 'text', html: ' Post '},
+                            {vtype: 'text', text: ' Post '},
                             {tag: 'span', cls: ['counter'], flag: 'favoritesCount'}
                         ]}
                     ]}
@@ -190,7 +190,7 @@ class Component extends BaseComponent {
                 vdom = me.vdom;
 
             VDomUtil.getFlags(vdom, 'followAuthor').forEach(node => {
-                node.html = value.following ? ' Unfollow ' : ' Follow ';
+                node.text = value.following ? ' Unfollow ' : ' Follow ';
             });
 
             VDomUtil.getFlags(vdom, 'followIcon').forEach(node => {
@@ -204,7 +204,7 @@ class Component extends BaseComponent {
 
             VDomUtil.getFlags(vdom, 'username').forEach(node => {
                 node.href = '#/profile/' + value.username;
-                node.html = value.username;
+                node.text = value.username;
             });
 
             me.update();
@@ -286,7 +286,7 @@ class Component extends BaseComponent {
      */
     afterSetCreatedAt(value, oldValue) {
         if (value) {
-            VDomUtil.getByFlag(this.vdom, 'createdAt').html = new Intl.DateTimeFormat('en-US', {
+            VDomUtil.getByFlag(this.vdom, 'createdAt').text = new Intl.DateTimeFormat('en-US', {
                 day  : 'numeric',
                 month: 'long',
                 year : 'numeric'
@@ -306,7 +306,7 @@ class Component extends BaseComponent {
         let me = this;
 
         VDomUtil.getFlags(me.vdom, 'favorited').forEach(node => {
-            node.cn[2].html = value ? 'Unfavorite' : 'Favorite';
+            node.cn[2].text = value ? 'Unfavorite' : 'Favorite';
 
             NeoArray.add(node.cls, value ? 'btn-primary' : 'btn-outline-primary');
             NeoArray.remove(node.cls, value ? 'btn-outline-primary' : 'btn-primary');
@@ -331,10 +331,10 @@ class Component extends BaseComponent {
     afterSetFavoritesCount(value, oldValue) {
         if (Neo.isNumber(value)) {
             VDomUtil.getFlags(this.vdom, 'favoritesCount').forEach(node => {
-                node.html = `(${value})`;
+                node.text = `(${value})`;
             });
 
-            this.update();
+            this.update()
         }
     }
 
@@ -360,7 +360,7 @@ class Component extends BaseComponent {
                 tagList.cn.push({
                     tag : 'li',
                     cls : ['tag-default', 'tag-pill', 'tag-outline'],
-                    html: item
+                    text: item
                 })
             });
 
@@ -381,8 +381,8 @@ class Component extends BaseComponent {
      * @protected
      */
     afterSetTitle(value, oldValue) {
-        VDomUtil.getByFlag(this.vdom, 'title').html = value;
-        this.update();
+        VDomUtil.getByFlag(this.vdom, 'title').text = value;
+        this.update()
     }
 
     /**

package/apps/realworld/view/article/CreateCommentComponent.mjs

@@ -35,7 +35,7 @@ class CreateCommentComponent extends Component {
                 {tag: 'img', cls: ['comment-author-img'], src: 'https://static.productionready.io/images/smiley-cyrus.jpg'},  // https://github.com/gothinkster/realworld/issues/442
                 {vtype: 'text', html: ' '},
                 {tag: 'span', cls: ['comment-author']},
-                {tag: 'button', cls: ['btn', 'btn-sm', 'btn-primary'], html: 'Post Comment', type: 'button'}
+                {tag: 'button', cls: ['btn', 'btn-sm', 'btn-primary'], text: 'Post Comment', type: 'button'}
             ]}
         ]}
     }
@@ -86,8 +86,8 @@ class CreateCommentComponent extends Component {
      */
     afterSetUserName(value, oldValue) {
         if (value) {
-            this.vdom.cn[1].cn[2].html = value;
-            this.update();
+            this.vdom.cn[1].cn[2].text = value;
+            this.update()
         }
     }
 

package/apps/realworld/view/article/CreateComponent.mjs

@@ -66,7 +66,7 @@ class CreateComponent extends Component {
                                     {tag: 'input', cls: ['form-control', 'field-tags'], flag: 'tags', name: 'tags', placeholder: 'Enter tags', type: 'text'},
                                     {cls: ['tag-list'], flag: 'tag-list'}
                                 ]},
-                                {tag: 'button', cls: ['btn', 'btn-lg', 'btn-primary', 'pull-xs-right'], html: 'Publish Article', type: 'button'}
+                                {tag: 'button', cls: ['btn', 'btn-lg', 'btn-primary', 'pull-xs-right'], text: 'Publish Article', type: 'button'}
                             ]}
                         ]}
                     ]}
@@ -128,7 +128,7 @@ class CreateComponent extends Component {
         Object.entries(value || {}).forEach(([key, value]) => {
             list.cn.push({
                 tag : 'li',
-                html: key + ' ' + value.join(' and ')
+                text: key + ' ' + value.join(' and ')
             });
         });
 
@@ -159,7 +159,7 @@ class CreateComponent extends Component {
                     'data-value': value,
                 }, {
                     vtype: 'text',
-                    html : value
+                    text : value
                 }]
             });
         });

package/apps/realworld/view/article/PreviewComponent.mjs

@@ -227,7 +227,7 @@ class PreviewComponent extends Component {
      * @protected
      */
     afterSetTitle(value, oldValue) {
-        VDomUtil.getByFlag(this.vdom, 'title').html = value;
+        VDomUtil.getByFlag(this.vdom, 'title').text = value;
         this.update();
     }
 

package/apps/realworld/view/article/TagListComponent.mjs

@@ -36,7 +36,7 @@ class TagListComponent extends Component {
         _vdom:
         {cn: [
             {cls: ['sidebar'], cn: [
-                {tag: 'p', html: 'Popular Tags'},
+                {tag: 'p', text: 'Popular Tags'},
                 {cls: ['tag-list']}
             ]}
         ]}
@@ -96,7 +96,7 @@ class TagListComponent extends Component {
                     tag : 'a',
                     cls : ['tag-pill', 'tag-default'],
                     href: '',
-                    html: item,
+                    text: item,
                     id  : me.getTagVdomId(item)
                 });
             });

package/apps/realworld/view/user/ProfileComponent.mjs

@@ -69,7 +69,7 @@ class ProfileComponent extends Component {
                             ]},
                             {tag: 'a', cls: ['btn', 'btn-sm', 'btn-outline-secondary', 'action-btn'], flag: 'edit-profile', href: '#/settings', removeDom: true, cn: [
                                 {tag: 'i', cls: ['ion-gear-a']},
-                                {vtype: 'text', html: ' Edit Profile Settings'}
+                                {vtype: 'text', text: ' Edit Profile Settings'}
                             ]}
                         ]}
                     ]}
@@ -81,10 +81,10 @@ class ProfileComponent extends Component {
                         {cls: ['articles-toggle'], cn: [
                             {tag: 'ul', cls: ['nav', 'nav-pills', 'outline-active'], flag: 'feed-header', cn: [
                                 {tag: 'li', cls: ['nav-item'], cn: [
-                                    {tag: 'a', cls: ['nav-link', 'prevent-click', 'active'], href: '', html: 'My Articles'}
+                                    {tag: 'a', cls: ['nav-link', 'prevent-click', 'active'], href: '', text: 'My Articles'}
                                 ]},
                                 {tag: 'li', cls: ['nav-item'], cn: [
-                                    {tag: 'a', cls: ['nav-link', 'prevent-click'], href: '', html: 'Favorited Articles'}
+                                    {tag: 'a', cls: ['nav-link', 'prevent-click'], href: '', text: 'Favorited Articles'}
                                 ]}
                             ]}
                         ]}
@@ -170,7 +170,7 @@ class ProfileComponent extends Component {
      */
     afterSetBio(value, oldValue) {
         if (value) {
-            VDomUtil.getByFlag(this.vdom, 'bio').html = value;
+            VDomUtil.getByFlag(this.vdom, 'bio').text = value;
             this.update();
         }
     }
@@ -190,7 +190,7 @@ class ProfileComponent extends Component {
             NeoArray.add(node.cls, value ? 'btn-secondary' : 'btn-outline-secondary');
 
             node.cn[0].cls  = [value ? 'ion-minus-round' : 'ion-plus-round'];
-            node.cn[1].html = value ? ' Unfollow ' : ' Follow ';
+            node.cn[1].text = value ? ' Unfollow ' : ' Follow ';
             this.update();
         }
     }
@@ -231,8 +231,8 @@ class ProfileComponent extends Component {
     afterSetUsername(value, oldValue) {
         let vdom = this.vdom;
 
-        VDomUtil.getByFlag(vdom, 'following').cn[2].html = value;
-        VDomUtil.getByFlag(vdom, 'username').html = value;
+        VDomUtil.getByFlag(vdom, 'following').cn[2].text = value;
+        VDomUtil.getByFlag(vdom, 'username').text = value;
         this.update();
     }
 
@@ -273,7 +273,7 @@ class ProfileComponent extends Component {
             params     = {};
 
         if (!el.vdom.cls.includes('disabled')) {
-            switch (el.vdom.html) {
+            switch (el.vdom.text) {
                 case 'Favorited Articles':
                     params = {
                         favorited: me.username

package/apps/realworld/view/user/SettingsComponent.mjs

@@ -44,7 +44,7 @@ class SettingsComponent extends Component {
             {cls: ['container', 'page'], cn: [
                 {cls: ['row'], cn: [
                     {cls: ['col-md-6', 'offset-md-3', 'col-xs-12'], cn: [
-                        {tag: 'h1', cls: ['text-xs-center'], html: 'Your Settings'},
+                        {tag: 'h1', cls: ['text-xs-center'], text: 'Your Settings'},
                         {tag: 'ul', cls: ['error-messages'], flag: 'errors', removeDom: true},
                         {tag: 'form', cn: [
                             {tag: 'fieldset', cn: [
@@ -63,11 +63,11 @@ class SettingsComponent extends Component {
                                 {tag: 'fieldset', cls: ['form-group'], cn: [
                                     {tag: 'input', cls: ['form-control', 'form-control-lg'], flag: 'password', placeholder: 'Password', type: 'password'}
                                 ]},
-                                {tag: 'button', cls: ['btn', 'btn-lg', 'btn-primary', 'pull-xs-right'], html: 'Update Settings'}
+                                {tag: 'button', cls: ['btn', 'btn-lg', 'btn-primary', 'pull-xs-right'], text: 'Update Settings'}
                             ]}
                         ]},
                         {tag: 'hr'},
-                        {tag: 'button', cls: ['btn', 'btn-outline-danger'], html: 'Or click here to logout.'}
+                        {tag: 'button', cls: ['btn', 'btn-outline-danger'], text: 'Or click here to logout.'}
                     ]}
                 ]}
             ]}
@@ -133,7 +133,7 @@ class SettingsComponent extends Component {
         Object.entries(value).forEach(([key, value]) => {
             list.cn.push({
                 tag : 'li',
-                html: key + ' ' + value.join(' and ')
+                text: key + ' ' + value.join(' and ')
             });
         });
 

package/apps/realworld/view/user/SignUpComponent.mjs

@@ -93,7 +93,7 @@ class SignUpComponent extends Component {
         Object.entries(value || {}).forEach(([key, value]) => {
             list.cn.push({
                 tag : 'li',
-                html: key + ' ' + value.join(' and ')
+                text: key + ' ' + value.join(' and ')
             });
         });
 
@@ -141,16 +141,16 @@ class SignUpComponent extends Component {
             contentDiv = me.vdom.cn[0].cn[0].cn[0];
 
         // vdom bulk update
-        contentDiv.cn[0].html = isSignup ? 'Sign up' : 'Sign in';
+        contentDiv.cn[0].text = isSignup ? 'Sign up' : 'Sign in';
 
         contentDiv.cn[1].cn[0].href = isSignup ? '#/login' : '#/register';
-        contentDiv.cn[1].cn[0].html = isSignup ? 'Have an account?' : 'Need an account?';
+        contentDiv.cn[1].cn[0].text = isSignup ? 'Have an account?' : 'Need an account?';
 
         // remove the username fieldset if needed
         contentDiv.cn[3].cn[0].cn[0].removeDom = !isSignup;
 
         // submit button text
-        contentDiv.cn[3].cn[0].cn[3].html = isSignup ? 'Sign up' : 'Sign in';
+        contentDiv.cn[3].cn[0].cn[3].text = isSignup ? 'Sign up' : 'Sign in';
 
         me.update();
     }

package/apps/realworld2/view/FooterComponent.mjs

@@ -30,7 +30,7 @@ class FooterComponent extends Component {
                     tag : 'a',
                     cls : ['logo-font'],
                     href: '#/',
-                    html: 'conduit'
+                    text: 'conduit'
                 }, {
                     tag : 'span',
                     cls : 'attribution',

package/apps/realworld2/view/HomeContainer.mjs

@@ -38,10 +38,10 @@ class HomeContainer extends Container {
                     cn : [{
                         tag : 'h1',
                         cls : ['logo-font'],
-                        html: 'conduit v2'
+                        text: 'conduit v2'
                     }, {
                         tag : 'p',
-                        html: 'A place to share your knowledge.'
+                        text: 'A place to share your knowledge.'
                     }]
                 }]
             }
@@ -60,7 +60,7 @@ class HomeContainer extends Container {
                     cls   : ['neo-examples-tab-component'],
                     header: {iconCls: 'fa fa-user-ninja', text: 'Your Feed'},
                     style : {padding: '20px'},
-                    vdom  : {html: 'todo'}
+                    vdom  : {text: 'todo'}
                 }, {
                     module: PreviewList,
                     header: {iconCls: 'fa fa-globe-europe', text: 'Global Feed'}

package/apps/realworld2/view/article/DetailsContainer.mjs

@@ -16,7 +16,7 @@ class DetailsContainer extends Container {
          */
         items: [{
             ntype: 'component',
-            html : 'article.DetailsContainer'
+            text : 'article.DetailsContainer'
         }],
         /**
          * @member {Object} style

package/apps/realworld2/view/article/PreviewComponent.mjs

@@ -85,7 +85,7 @@ class PreviewComponent extends Component {
                 cn  : [
                     {tag: 'h1',   flag: 'title'},
                     {tag: 'p',    flag: 'description'},
-                    {tag: 'span', html: 'Read more...'}
+                    {tag: 'span', text: 'Read more...'}
                 ]
             }]
         }
@@ -120,7 +120,7 @@ class PreviewComponent extends Component {
 
         // todo: disabled until the new profile view is ready
         //node.href = href;
-        node.html = value;
+        node.text = value;
 
         //VDomUtil.getByFlag(vdom, 'userImageLink').href = href;
 
@@ -134,7 +134,7 @@ class PreviewComponent extends Component {
      * @protected
      */
     afterSetCreatedAt(value, oldValue) {
-        VDomUtil.getByFlag(this.vdom, 'createdAt').html = new Intl.DateTimeFormat('en-US', {
+        VDomUtil.getByFlag(this.vdom, 'createdAt').text = new Intl.DateTimeFormat('en-US', {
             day  : 'numeric',
             month: 'long',
             year : 'numeric'
@@ -150,7 +150,7 @@ class PreviewComponent extends Component {
      * @protected
      */
     afterSetDescription(value, oldValue) {
-        VDomUtil.getByFlag(this.vdom, 'description').html = value;
+        VDomUtil.getByFlag(this.vdom, 'description').text = value;
         this.update();
     }
 
@@ -182,7 +182,7 @@ class PreviewComponent extends Component {
      * @protected
      */
     afterSetFavoritesCount(value, oldValue) {
-        VDomUtil.getByFlag(this.vdom, 'favoritesCount').html = ' ' + value;
+        VDomUtil.getByFlag(this.vdom, 'favoritesCount').text = ' ' + value;
         this.update();
     }
 
@@ -225,7 +225,7 @@ class PreviewComponent extends Component {
                 tagList.cn.push({
                     tag : 'li',
                     cls : ['tag-default', 'tag-pill', 'tag-outline'],
-                    html: item
+                    text: item
                 })
             });
 
@@ -242,7 +242,7 @@ class PreviewComponent extends Component {
      * @protected
      */
     afterSetTitle(value, oldValue) {
-        VDomUtil.getByFlag(this.vdom, 'title').html = value;
+        VDomUtil.getByFlag(this.vdom, 'title').text = value;
         this.update();
     }
 

package/apps/realworld2/view/article/TagListComponent.mjs

@@ -38,7 +38,7 @@ class TagListComponent extends Component {
                 cls: ['sidebar'],
                 cn : [{
                     tag : 'p',
-                    html: 'Popular Tags'
+                    text: 'Popular Tags'
                 }, {
                     cls: ['tag-list']
                 }]
@@ -100,7 +100,7 @@ class TagListComponent extends Component {
                     tag : 'a',
                     cls : ['tag-pill', 'tag-default'],
                     href: '',
-                    html: item,
+                    text: item,
                     id  : me.getTagVdomId(item)
                 });
             });

package/apps/realworld2/view/user/ProfileContainer.mjs

@@ -16,7 +16,7 @@ class ProfileContainer extends Container {
          */
         items: [{
             ntype: 'component',
-            html : 'ProfileContainer'
+            text : 'ProfileContainer'
         }],
         /**
          * @member {Object} style