neo.mjs 10.0.0-alpha.5 → 10.0.0-beta.2

package/apps/portal/view/learn/ContentComponent.mjs

@@ -5,9 +5,9 @@ import {marked}    from '../../../../node_modules/marked/lib/marked.esm.js';
 const
     labCloseRegex        = /<!--\s*\/lab\s*-->/g,
     labOpenRegex         = /<!--\s*lab\s*-->/g,
-    preLivePreviewRegex  = /<pre\s+data-code-livepreview\s*>([\s\S]*?)<\/pre>/g,
-    preJsRegex           = /<pre\s+data-code-readonly\s*>([\s\S]*?)<\/pre>/g,
-    preNeoComponentRegex = /<pre\s+data-neo-component\s*>([\s\S]*?)<\/pre>/g;
+    regexLivePreview     = /```(javascript|html|css|json)\s+live-preview\s*\n([\s\S]*?)\n\s*```/g,
+    regexNeoComponent    = /```json\s+neo-component\s*\n([\s\S]*?)\n\s*```/g,
+    regexReadonly        = /```(javascript|html|css|json)\s+readonly\s*\n([\s\S]*?)\n\s*```/g;
 
 /**
  * @class Portal.view.learn.ContentComponent
@@ -164,48 +164,48 @@ class ContentComponent extends Component {
             {appName, windowId} = me,
             path                = me.getStateProvider().getData('contentPath'),
             pagesFolder         = path.includes('/learn/') ? '' : 'pages/',
-            baseConfigs, content, data, html, instance, modifiedHtml, neoComponents, neoDivs;
+            baseConfigs, content, data, html, instance, neoComponents, neoDivs;
 
         path += `${pagesFolder + record.id.replaceAll('.', '/')}.md`;
 
         if (record.isLeaf && path) {
-            baseConfigs   = {appName, autoMount: true, autoRender: true, parentComponent: me, windowId};
-            data          = await fetch(path);
-            content       = await data.text();
-            content       = me.updateContentSectionsStore(content); // also replaces ## with h2 tags
-            content       = `<h1 class='neo-h1'>${record.name}</h1>\n${content}`;
-            modifiedHtml  = await me.highlightPreContent(content);
+            baseConfigs = {appName, autoMount: true, autoRender: true, parentComponent: me, windowId};
+            data        = await fetch(path);
+            content     = await data.text();
+            // Update content sections (modifies markdown content with h2/h3 tags and IDs)
+            content = me.updateContentSectionsStore(content);
+            content = `<h1 class='neo-h1'>${record.name}</h1>\n${content}`;
+            // Initialize maps for custom components and live previews
             neoComponents = {};
             neoDivs       = {};
-
-            // Replace <pre neo-component></pre> with <div id='neo-component-x'/>
-            // and create a map keyed by ID, whose value is the javascript
-            // from the <pre>
-            modifiedHtml = me.extractNeoComponents(modifiedHtml, neoComponents);
-
-            // Replace <pre data-neo></pre> with <div id='neo-preview-1'/>
-            // and create a map keyed by ID, whose value is the javascript
-            // from the <pre>
-            modifiedHtml = me.extractLivePreviewContent(modifiedHtml, neoDivs);
-
-            html = marked.parse(modifiedHtml);
-            html = me.insertLabDivs(html);
-
-            me.toggleCls('lab', record.name?.startsWith('Lab:'));
-
-            me.html = html;
+            // Process custom Neo.mjs component blocks (synchronous)
+            content = me.processNeoComponentsBlocks(content, neoComponents);
+            // Process custom Live Preview blocks (synchronous)
+            content = me.processLivePreviewBlocks(content, neoDivs);
+            // Process custom Readonly Code blocks (asynchronous due to HighlightJS)
+            // This will replace the markdown fenced block with the highlighted HTML <pre> tag.
+            content = await me.processReadonlyCodeBlocks(content, windowId);
+            // Parse the (now modified) markdown content into HTML
+            // This content string now contains standard markdown PLUS the HTML divs/pres we injected.
+            html = marked.parse(content);
+            // Insert lab divs (these are markdown comments, so process on the final HTML)
+            html = me.insertLabDivs(html); // Keep existing method
+
+            me.toggleCls('lab', record.name?.startsWith('Lab:')); // Keep existing method
+
+            me.html = html; // Set the component's HTML
 
             await me.timeout(Neo.config.environment === 'development' ? 100 : 150);
 
+            // Create instances for custom components and live previews (keep existing logic)
             Object.keys(neoComponents).forEach(key => {
                 instance = Neo.create({
                     ...baseConfigs,
-                    className: 'Neo.component.Base',
+                    className: 'Neo.component.Base', // Adjust if specific component classes are implied by JSON
                     parentId : key,
                     ...neoComponents[key]
                 });
-
-                me.customComponents.push(instance)
+                me.customComponents.push(instance);
             });
 
             Object.keys(neoDivs).forEach(key => {
@@ -213,10 +213,9 @@ class ContentComponent extends Component {
                     ...baseConfigs,
                     module  : LivePreview,
                     parentId: key,
-                    value   : neoDivs[key]
+                    value   : neoDivs[key].code // Pass the extracted code content
                 });
-
-                me.livePreviews.push(instance)
+                me.livePreviews.push(instance);
             });
 
             Neo.main.addon.IntersectionObserver.observe({
@@ -224,87 +223,10 @@ class ContentComponent extends Component {
                 id        : me.id,
                 observe   : ['.neo-h2', '.neo-h3'],
                 windowId  : me.windowId
-            })
+            });
         }
     }
 
-    /**
-     * @param {String} htmlString
-     * @param {Object} map
-     * @returns {String}
-     */
-    extractNeoComponents(htmlString, map) {
-        // 1. Replace <pre data-neo-component> with <div id='neo-learn-content-component-x'/>
-        // and update map with key/value pairs, where the key is the ID and the value is the <pre> contents.
-        // Replace the content with tokens, and create a promise to update the corresponding content
-        return htmlString.replace(preNeoComponentRegex, (match, preContent) => {
-            const key = Neo.core.IdGenerator.getId('learn-content-component');
-            map[key] = JSON.parse(preContent);
-            return `<div id="${key}"></div>`
-        })
-    }
-
-    /**
-     * @param {String} htmlString
-     * @param {Object} map
-     * @returns {String}
-     */
-    extractLivePreviewContent(htmlString, map) {
-        // 1. Replace <pre data-neo> with <div id='neo-pre-live-preview-x'/>
-        // and update map with key/value pairs, where the key is the ID and the value is the <pre> contents.
-        // Replace the content with tokens, and create a promise to update the corresponding content
-        return htmlString.replace(preLivePreviewRegex, (match, preContent) => {
-            const key = Neo.core.IdGenerator.getId('pre-live-preview');
-            map[key] = preContent;
-            return `<div id="${key}"></div>`
-        })
-    }
-
-    /**
-     * @param preContent
-     * @param token
-     * @param id
-     * @returns {Object}
-     */
-    getHighlightPromise(preContent, token, id) {
-        // Resolves to an object of the form {after, token}, where after is the updated <pre> tag content
-        return Neo.main.addon.HighlightJS.highlightAuto({html: preContent, windowId: this.windowId})
-            .then(value => ({after: `<pre data-javascript id="${id}">${value}</pre>`, token}))
-    }
-
-    /**
-     * @param {String} htmlString
-     * @returns {Promise<*>}
-     */
-    async highlightPreContent(htmlString) {
-        // 1. Replace <pre data-javascript> with unique tokens and create a HighlightJS.highlightAuto promise for each
-        // 2. When all promises are resolved, use their values to replace the tokens.
-
-        // Note that if we were to import HighlightJS directly, we wouldn't need all this async code.
-
-        // Create an array to store promises for each replacement
-        const replacementPromises = [];
-        let count = 0;
-
-        // Replace the content with tokens, and create a promise to update the corresponding content
-        let updatedHtml = htmlString.replace(preJsRegex, (match, preContent) => {
-            const token = `__NEO-PRE-TOKEN-${++count}__`;
-            replacementPromises.push(this.getHighlightPromise(preContent, token, `pre-preview-${Neo.core.IdGenerator.getId()}`));
-            return token
-        });
-
-        // Assert: updateHtml is the original, but with <pre data-javascript> replaced with tokens.
-
-        // Wait for all replacement promises to resolve
-        let replacements = await Promise.all(replacementPromises)
-
-        // Replace each token with the resolved content
-        replacements.forEach((replacement) => updatedHtml = updatedHtml.replace(replacement.token, replacement.after));
-
-        // Return the final updated HTML string
-        return updatedHtml
-    }
-
     /**
      * @param {String} inputString
      * @returns {String}
@@ -335,6 +257,75 @@ class ContentComponent extends Component {
         }
     }
 
+    /**
+     * Extracts live preview code blocks from Markdown content before marked.js parsing.
+     * Replaces them with HTML placeholders.
+     * @param {String} contentString The raw Markdown content string.
+     * @param {Object} map A map to store the extracted code content keyed by placeholder ID.
+     * @returns {String} The modified Markdown content string with placeholders.
+     */
+    processLivePreviewBlocks(contentString, map) {
+        return contentString.replace(regexLivePreview, (match, language, code) => {
+            const key = Neo.core.IdGenerator.getId('pre-live-preview');
+            map[key] = {code, language};
+            return `<div id="${key}"></div>`
+        })
+    }
+
+    /**
+     * Extracts Neo.mjs component config blocks from Markdown content before marked.js parsing.
+     * Replaces them with HTML placeholders.
+     * @param {String} contentString The raw Markdown content string.
+     * @param {Object} map A map to store the extracted JSON config keyed by placeholder ID.
+     * @returns {String} The modified Markdown content string with placeholders.
+     */
+    processNeoComponentsBlocks(contentString, map) {
+        return contentString.replace(regexNeoComponent, (match, code) => {
+            const key = Neo.core.IdGenerator.getId('learn-content-component');
+            map[key] = JSON.parse(code);
+            return `<div id="${key}"></div>`
+        })
+    }
+
+    /**
+     * Highlights readonly code blocks using HighlightJS.
+     * Replaces the Markdown fenced block with the highlighted HTML <pre> tag.
+     * @param {String} contentString The raw Markdown content string.
+     * @param {String} windowId The ID of the current window for HighlightJS.
+     * @returns {Promise<String>} A promise that resolves to the modified Markdown string with highlighted HTML.
+     */
+    async processReadonlyCodeBlocks(contentString, windowId) {
+        let replacementPromises = [],
+            count               = 0,
+            replacements;
+
+        // Replace the content with tokens, and create a promise to update the corresponding content
+        let updatedContent = contentString.replace(regexReadonly, (match, language, code) => {
+            const token = `__NEO-READONLY-TOKEN-${++count}__`;
+            // Call HighlightJS.highlightAuto for each block.
+            // The result will be HTML. We'll wrap it in a <pre data-javascript> later.
+            replacementPromises.push(
+                Neo.main.addon.HighlightJS.highlightAuto({html: code, windowId})
+                    .then(highlightedHtml => ({
+                        after: `<pre data-javascript id="pre-readonly-${Neo.core.IdGenerator.getId()}">${highlightedHtml}</pre>`,
+                        token: token
+                    }))
+            );
+
+            return token; // Replace the original Markdown block with a temporary token
+        });
+
+        // Wait for all highlighting promises to resolve
+        replacements = await Promise.all(replacementPromises);
+
+        // Replace each token with the resolved highlighted HTML content
+        replacements.forEach(replacement => {
+            updatedContent = updatedContent.replace(replacement.token, replacement.after)
+        });
+
+        return updatedContent
+    }
+
     /**
      * Updates the contentSections VM store and replaces ## with h2 tags
      * @param {String} content

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

package/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]
         }
     }
 

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
                 }]
             });
         });