neo.mjs 9.15.0 → 10.0.0-alpha.1

package/ServiceWorker.mjs

@@ -20,9 +20,9 @@ class ServiceWorker extends ServiceBase {
          */
         singleton: true,
         /**
-         * @member {String} version='9.15.0'
+         * @member {String} version='10.0.0-alpha.1'
          */
-        version: '9.15.0'
+        version: '10.0.0-alpha.1'
     }
 
     /**

package/apps/email/view/Viewport.mjs

@@ -42,13 +42,13 @@ class Viewport extends BaseViewport {
                     iconCls: 'fa fa-home',
                     text   : 'Tab 1'
                 },
-                vdom: {innerHTML: 'Welcome to your new Neo App.'}
+                vdom: {html: 'Welcome to your new Neo App.'}
             }, {
                 header: {
                     iconCls: 'fa fa-play-circle',
                     text   : 'Tab 2'
                 },
-                vdom: {innerHTML: 'Have fun creating something awesome!'}
+                vdom: {html: 'Have fun creating something awesome!'}
             }]
         }]
     }

package/apps/form/view/Viewport.mjs

@@ -29,7 +29,7 @@ class Viewport extends BaseViewport {
 
             items: [{
                 flex: 'none',
-                vdom: {tag: 'h1', innerHTML: 'Nested Forms'}
+                vdom: {tag: 'h1', html: 'Nested Forms'}
             }, {
                 module   : SideNavList,
                 reference: 'side-nav',

package/apps/portal/index.html

@@ -16,7 +16,7 @@
         "@type": "Organization",
         "name": "Neo.mjs"
       },
-      "datePublished": "2025-06-13",
+      "datePublished": "2025-06-17",
       "publisher": {
         "@type": "Organization",
         "name": "Neo.mjs"

package/apps/portal/view/examples/List.mjs

@@ -163,7 +163,7 @@ class List extends BaseList {
     createSourceLink(record) {
         let vdom = {
             tag   : 'a',
-            cls   : ['fab fa-github', 'neo-github-image'],
+            cls   : ['fab', 'fa-github', 'neo-github-image'],
             href  : record.sourceUrl,
             target: '_blank'
         };

package/apps/portal/view/home/FooterContainer.mjs

@@ -107,7 +107,7 @@ class FooterContainer extends Container {
             }, {
                 module: Component,
                 cls   : ['neo-version'],
-                html  : 'v9.15.0'
+                html  : 'v10.0.0-alpha.1'
             }]
         }],
         /**

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

@@ -5,8 +5,8 @@ import {marked}    from '../../../../node_modules/marked/lib/marked.esm.js';
 const
     labCloseRegex        = /<!--\s*\/lab\s*-->/g,
     labOpenRegex         = /<!--\s*lab\s*-->/g,
-    preJsRegex           = /<pre\s+data-javascript\s*>([\s\S]*?)<\/pre>/g,
-    preNeoRegex          = /<pre\s+data-neo\s*>([\s\S]*?)<\/pre>/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;
 
 /**
@@ -185,7 +185,7 @@ class ContentComponent extends Component {
             // 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.extractNeoContent(modifiedHtml, neoDivs);
+            modifiedHtml = me.extractLivePreviewContent(modifiedHtml, neoDivs);
 
             html = marked.parse(modifiedHtml);
             html = me.insertLabDivs(html);
@@ -248,11 +248,11 @@ class ContentComponent extends Component {
      * @param {Object} map
      * @returns {String}
      */
-    extractNeoContent(htmlString, map) {
+    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(preNeoRegex, (match, preContent) => {
+        return htmlString.replace(preLivePreviewRegex, (match, preContent) => {
             const key = Neo.core.IdGenerator.getId('pre-live-preview');
             map[key] = preContent;
             return `<div id="${key}"></div>`

package/apps/realworld2/view/HomeContainer.mjs

@@ -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  : {innerHTML: 'todo'}
+                    vdom  : {html: 'todo'}
                 }, {
                     module: PreviewList,
                     header: {iconCls: 'fa fa-globe-europe', text: 'Global Feed'}

package/apps/route/view/center/CardAdministration.mjs

@@ -17,14 +17,14 @@ class CardAdministration extends Container {
         username_: '',
 
         vdom: {
-            tag: 'h1',
-            innerHTML: 'Access Granted.'
+            tag : 'h1',
+            html: 'Access Granted.'
         }
     }
 
 
     afterSetUsername(value, oldValue) {
-        this.vdom.innerHTML = `Access Granted to ${this.username}.`;
+        this.vdom.html = `Access Granted to ${this.username}.`;
     }
 }
 

package/apps/route/view/center/CardAdministrationDenied.mjs

@@ -15,8 +15,8 @@ class CardAdministrationDenied extends Container {
         baseCls: ['route_card_simple_page','neo-container'],
 
         vdom: {
-            tag: 'h1',
-            innerHTML: 'Access Denied.'
+            tag : 'h1',
+            html: 'Access Denied.'
         }
     }
 }

package/apps/route/view/center/CardContact.mjs

@@ -16,8 +16,8 @@ class CardContact extends Container {
 
         items: [
             { cls : ['route_card_simple_page'], vdom: { cn: [
-                {tag: 'h1',innerHTML: 'Contact' },
-                {tag: 'a',  href: 'https://github.com/neomjs/neo', target: '_blank', innerHTML: 'please visit https://github.com/neomjs/neo'}
+                {tag: 'h1', html: 'Contact' },
+                {tag: 'a',  href: 'https://github.com/neomjs/neo', target: '_blank', html: 'please visit https://github.com/neomjs/neo'}
             ] } }
         ]
     }

package/apps/route/view/center/CardHome.mjs

@@ -15,8 +15,8 @@ class CardHome extends Container {
         baseCls: ['route_card_simple_page','neo-container'],
 
         vdom: {
-            tag: 'h1',
-            innerHTML: 'This is the landing page of the example.'
+            tag : 'h1',
+            html: 'This is the landing page of the example.'
         }
     }
 }

package/apps/route/view/center/CardSection1.mjs

@@ -15,8 +15,8 @@ class CardSection1 extends Container {
         baseCls: ['route_card_simple_page','neo-container'],
 
         vdom: {
-            tag: 'h1',
-            innerHTML: 'This is section 1 of the example.'
+            tag : 'h1',
+            html: 'This is section 1 of the example.'
         }
     }
 }

package/apps/route/view/center/CardSection2.mjs

@@ -15,8 +15,8 @@ class CardSection2 extends Container {
         baseCls: ['route_card_simple_page','neo-container'],
 
         vdom: {
-            tag: 'h1',
-            innerHTML: 'This is section 2 of the example.'
+            tag : 'h1',
+            html: 'This is section 2 of the example.'
         }
 
     }

package/buildScripts/createApp.mjs

@@ -234,13 +234,13 @@ if (programOpts.info) {
             "                    iconCls: 'fa fa-home',",
             "                    text   : 'Tab 1'",
             "                },",
-            "                vdom: {innerHTML: 'Welcome to your new Neo App.'}",
+            "                vdom: {html: 'Welcome to your new Neo App.'}",
             "            }, {",
             "                header: {",
             "                    iconCls: 'fa fa-play-circle',",
             "                    text   : 'Tab 2'",
             "                },",
-            "                vdom: {innerHTML: 'Have fun creating something awesome!'}",
+            "                vdom: {html: 'Have fun creating something awesome!'}",
             "            }]",
             "        }]",
             "    }",

package/docs/app/view/classdetails/HeaderComponent.mjs

@@ -64,12 +64,12 @@ class HeaderComponent extends Component {
             }
         }
 
-        me.vdom.cn[0].innerHTML = singleton ? (className + ' → Singleton') : className;
+        me.vdom.cn[0].html = singleton ? (className + ' → Singleton') : className;
 
         if (record.description) {
             me.vdom.cn.push({
-                cls      : ['neo-docs-header-description'],
-                innerHTML: record.description
+                cls : ['neo-docs-header-description'],
+                html: record.description
             })
         }
 

package/docs/app/view/classdetails/MembersList.mjs

@@ -127,8 +127,8 @@ class MembersList extends Base {
             vdom.cn.push({
                 // scrolling placeholder
             }, {
-                cls      : ['neo-docs-memberlist-group-header'],
-                innerHTML: 'Configs',
+                cls : ['neo-docs-memberlist-group-header'],
+                html: 'Configs',
                 'data-list-header': 'Configs'
             })
         }
@@ -152,9 +152,9 @@ class MembersList extends Base {
             vdom.cn.push({
                 // scrolling placeholder
             }, {
-                cls      : ['neo-docs-memberlist-group-header'],
-                innerHTML: 'Events',
-                style    : {zIndex: 3},
+                cls  : ['neo-docs-memberlist-group-header'],
+                html : 'Events',
+                style: {zIndex: 3},
                 'data-list-header': 'Events'
             })
         }
@@ -182,9 +182,9 @@ class MembersList extends Base {
             vdom.cn.push({
                 // scrolling placeholder
             }, {
-                cls      : ['neo-docs-memberlist-group-header'],
-                innerHTML: 'Methods',
-                style    : {zIndex: 2},
+                cls  : ['neo-docs-memberlist-group-header'],
+                html : 'Methods',
+                style: {zIndex: 2},
                 'data-list-header': 'Methods'
             })
         }
@@ -281,26 +281,26 @@ class MembersList extends Base {
                 cn : [{
                     cls: ['neo-list-item-header-container'],
                     cn : [{
-                        cls      : ['neo-list-item-header'],
-                        innerHTML: headerText
+                        cls : ['neo-list-item-header'],
+                        html: headerText
                     }, {
                         style: {
                             flex: 1
                         }
                     }, {
-                        cls      : ['neo-list-item-header'],
-                        innerHTML: itemAttributes.join(', ')
+                        cls : ['neo-list-item-header'],
+                        html: itemAttributes.join(', ')
                     }]
                 }, {
                     cls: 'neo-docs-view-source-link-container',
                     cn :[{
-                        tag      : 'a',
-                        cls      : ['neo-docs-view-source-link'],
-                        href     : `#/viewSource/${item.neoClassName}/line/${item.meta.lineno}`,
-                        innerHTML: `Source: ${path}/${item.meta.filename} (Line ${item.meta.lineno})`
+                        tag : 'a',
+                        cls : ['neo-docs-view-source-link'],
+                        href: `#/viewSource/${item.neoClassName}/line/${item.meta.lineno}`,
+                        html: `Source: ${path}/${item.meta.filename} (Line ${item.meta.lineno})`
                     }]
                 }, {
-                    innerHTML: item.description
+                    html: item.description
                 }]
             };
 
@@ -325,7 +325,7 @@ class MembersList extends Base {
 
             if (item.returns?.[0].type && item.kind !== 'event') {
                 itemConfig.cn.push({
-                    innerHTML: 'Returns {' + MembersList.escapeHtml(item.returns[0].type.names.join('|') + '} ') + (item.returns[0].description || '')
+                    html: 'Returns {' + MembersList.escapeHtml(item.returns[0].type.names.join('|') + '} ') + (item.returns[0].description || '')
                 })
             }
 
@@ -365,37 +365,37 @@ class MembersList extends Base {
             cn : [{
                 tag: 'thead',
                 cn : [{
-                    tag      : 'th',
-                    innerHTML: 'Name'
+                    tag : 'th',
+                    html: 'Name'
                 }, {
-                    tag      : 'th',
-                    innerHTML: 'Type'
+                    tag : 'th',
+                    html: 'Type'
                 }, {
-                    tag      : 'th',
-                    innerHTML: 'Description'
+                    tag : 'th',
+                    html: 'Description'
                 }]
             }]
         };
 
         if (hasDefaultValues) {
             paramTable.cn[0].cn.splice(2, 0, {
-                tag      : 'th',
-                innerHTML: 'Default'
+                tag : 'th',
+                html: 'Default'
             })
         }
 
         if (hasOptionalParams) {
             paramTable.cn[0].cn.splice(2, 0, {
-                tag      : 'th',
-                innerHTML: 'Optional'
+                tag : 'th',
+                html: 'Optional'
             })
         }
 
         params.forEach(param => {
             if (param.name.indexOf('.') < 0) { // ignore nested params
                 description = {
-                    tag      : 'td',
-                    innerHTML: param.description
+                    tag : 'td',
+                    html: param.description
                 };
                 nestedParams = [];
 
@@ -414,36 +414,33 @@ class MembersList extends Base {
                 if (nestedParams.length > 0) {
                     description = {
                         tag: 'td',
-                        cn : [{
-                            innerHTML: description.innerHTML
-                        },
-                            MembersList.createParametersTable(nestedParams)]
+                        cn : [
+                            {html: description.html},
+                            MembersList.createParametersTable(nestedParams)
+                        ]
                     }
                 }
 
                 paramTable.cn.push({
                     tag: 'tr',
-                    cn : [{
-                        tag      : 'td',
-                        innerHTML: param.name
-                    }, {
-                        tag      : 'td',
-                        innerHTML: param.type ? MembersList.escapeHtml(param.type.names.join(' | ')) : ''
-                    },
-                        description]
+                    cn : [
+                        {tag: 'td', html: param.name},
+                        {tag: 'td', html: param.type ? MembersList.escapeHtml(param.type.names.join(' | ')) : ''},
+                        description
+                    ]
                 });
 
                 if (hasDefaultValues) {
                     paramTable.cn[paramTable.cn.length - 1].cn.splice(2, 0, {
-                        tag      : 'td',
-                        innerHTML: param.defaultvalue === undefined ? '' : (param.defaultvalue + '')
+                        tag : 'td',
+                        html: param.defaultvalue === undefined ? '' : (param.defaultvalue + '')
                     })
                 }
 
                 if (hasOptionalParams) {
                     paramTable.cn[paramTable.cn.length - 1].cn.splice(2, 0, {
-                        tag      : 'td',
-                        innerHTML: param.optional
+                        tag : 'td',
+                        html: param.optional
                     })
                 }
             }

package/docs/app/view/classdetails/SourceViewComponent.mjs

@@ -131,7 +131,7 @@ class SourceViewComponent extends Component {
         let me   = this,
             node = me.vdom.cn[0]; // pre tag
 
-        node.cn[0].innerHTML = data; // code tag
+        node.cn[0].html = data; // code tag
         me.update();
 
         me.mounted && me.syntaxHighlight()

package/docs/app/view/classdetails/TutorialComponent.mjs

@@ -66,7 +66,7 @@ class TutorialComponent extends Component {
         if (me.fileType === 'json') {
             me.vdom.cn = data
         } else {
-            me.vdom.innerHTML = data
+            me.vdom.html = data
         }
 
         me.update();

package/examples/component/toast/MainContainer.mjs

@@ -112,24 +112,24 @@ class MainContainer extends Viewport {
 
             itemTpl: data => {
                 return [
-                    {cls: 'import', innerHTML: 'import Toast from \'../../../../node_modules/neo.mjs/src/component/Toast.mjs\';'},
-                    {innerHTML: 'Neo.toast({'},
+                    {cls: 'import', html: 'import Toast from \'../../../../node_modules/neo.mjs/src/component/Toast.mjs\';'},
+                    {html: 'Neo.toast({'},
                     {cls: 'tab', cn: [
-                        {cls: 'grey', innerHTML: '/* mandatory */'},
-                        {innerHTML: `appName: '${data.appName}',`},
-                        {innerHTML: `msg: '${data.msg}',`},
-                        {innerHTML: `windowId: '${data.windowId}',`},
-                        {innerHTML: '/* optional */'},
-                        {innerHTML: `title: '${data.title}',`, removeDom: !data.title},
-                        {innerHTML: `iconCls: '${data.iconCls}',`, removeDom: !data.iconCls},
-                        {innerHTML: `closable: ${data.closable},`, removeDom: !data.closable},
-                        {innerHTML: `position: '${data.position}',`, removeDom: !data.position},
-                        {innerHTML: `slideDirection: '${data.slideDirection}',`, removeDom: !data.slideDirection},
-                        {innerHTML: `maxWidth: ${data.maxWidth},`, removeDom: !data.maxWidth},
-                        {innerHTML: `minHeight: ${data.minHeight},`, removeDom: !data.minHeight},
-                        {innerHTML: `ui: '${data.ui}'`, removeDom: !data.ui},
+                        {cls: 'grey', html: '/* mandatory */'},
+                        {html: `appName: '${data.appName}',`},
+                        {html: `msg: '${data.msg}',`},
+                        {html: `windowId: '${data.windowId}',`},
+                        {html: '/* optional */'},
+                        {html: `title: '${data.title}',`, removeDom: !data.title},
+                        {html: `iconCls: '${data.iconCls}',`, removeDom: !data.iconCls},
+                        {html: `closable: ${data.closable},`, removeDom: !data.closable},
+                        {html: `position: '${data.position}',`, removeDom: !data.position},
+                        {html: `slideDirection: '${data.slideDirection}',`, removeDom: !data.slideDirection},
+                        {html: `maxWidth: ${data.maxWidth},`, removeDom: !data.maxWidth},
+                        {html: `minHeight: ${data.minHeight},`, removeDom: !data.minHeight},
+                        {html: `ui: '${data.ui}'`, removeDom: !data.ui},
                     ]},
-                    {innerHTML: '})'}
+                    {html: '})'}
                 ]
             }
         }]

package/examples/component/wrapper/googleMaps/MarkerDialog.mjs

@@ -27,10 +27,10 @@ class MarkerDialog extends DialogBase {
         }],
 
         itemTpl: data => [
-            {cls: ['detail-depth'],   innerHTML: `Depth: ${data.depth}`},
-            {cls: ['detail-date'],    innerHTML: `${data.visualDate}`},
-            {cls: ['detail-quality'], innerHTML: `Quality: ${data.quality}`},
-            {cls: ['detail-quality'], innerHTML: `Size: ${data.size}`}
+            {cls: ['detail-depth'],   html: `Depth: ${data.depth}`},
+            {cls: ['detail-date'],    html: `${data.visualDate}`},
+            {cls: ['detail-quality'], html: `Quality: ${data.quality}`},
+            {cls: ['detail-quality'], html: `Size: ${data.size}`}
         ]
     }
 

package/examples/fields/MainContainer.mjs

@@ -249,7 +249,7 @@ class MainContainer extends Container {
                 text   : 'Date'
             },
             vdom: {
-                innerHTML: 'todo'
+                html: 'todo'
             }
         }]
     }

package/examples/panel/MainContainer.mjs

@@ -113,7 +113,7 @@ class MainContainer extends Panel {
             items: [{
                 ntype: 'component',
                 vdom : {
-                    innerHTML: 'item 1'
+                    html: 'item 1'
                 }
             }]
         }, {
@@ -157,7 +157,7 @@ class MainContainer extends Panel {
             items: [{
                 ntype: 'component',
                 vdom : {
-                    innerHTML: 'item 2'
+                    html: 'item 2'
                 }
             }]
         }]

package/examples/tab/container/MainContainer.mjs

@@ -179,13 +179,13 @@ class MainContainer extends ConfigurationViewport {
 
             items: [{
                 header: {iconCls: 'fa fa-home', text: 'Tab 1', flag: 'tab1',},
-                vdom  : {innerHTML: 'Tab 1 Content'}
+                vdom  : {html: 'Tab 1 Content'}
             }, {
                 header: {iconCls: 'fa fa-play-circle', text: 'Tab 2'},
-                vdom  : {innerHTML: 'Tab 2 Content'}
+                vdom  : {html: 'Tab 2 Content'}
             }, {
                 header: {iconCls: 'fa fa-user', text: 'Tab 3', badgeText: 'hello'},
-                vdom  : {innerHTML: 'Tab 3 Content'}
+                vdom  : {html: 'Tab 3 Content'}
             }],
 
             listeners: {

package/examples/tabs/MainContainer.mjs

@@ -152,7 +152,7 @@ class MainContainer extends TabContainer {
                 text   : 'Tab 2'
             },
             vdom: {
-                innerHTML: 'Test 2'
+                html: 'Test 2'
             }
         }, {
             header: {
@@ -160,7 +160,7 @@ class MainContainer extends TabContainer {
                 text   : 'Tab 3'
             },
             vdom: {
-                innerHTML: 'Test 3'
+                html: 'Test 3'
             }
         }]
     }

package/examples/tabs/MainContainer2.mjs

@@ -37,7 +37,7 @@ class MainContainer2 extends Container {
                     text   : 'Tab 1'
                 },
                 vdom: {
-                    innerHTML: 'Tab Content 1'
+                    html: 'Tab Content 1'
                 }
             }, {
                 header: {
@@ -45,7 +45,7 @@ class MainContainer2 extends Container {
                     text   : 'Tab 2'
                 },
                 vdom: {
-                    innerHTML: 'Tab Content 2'
+                    html: 'Tab Content 2'
                 }
             }, {
                 ntype : 'container',
@@ -133,7 +133,7 @@ class MainContainer2 extends Container {
                             text   : 'Dynamic Tab ' + this.tabCount
                         },
                         vdom: {
-                            innerHTML: 'Dynamic Tab ' + this.tabCount
+                            html: 'Dynamic Tab ' + this.tabCount
                         }
                     });
                 }

package/examples/viewport/MainContainer.mjs

@@ -78,7 +78,7 @@ class MainContainer extends Viewport {
                         text   : 'Tab 2'
                     },
                     vdom: {
-                        innerHTML: 'Test 2'
+                        html: 'Test 2'
                     }
                 }, {
                     header: {
@@ -86,7 +86,7 @@ class MainContainer extends Viewport {
                         text   : 'Tab 3'
                     },
                     vdom: {
-                        innerHTML: 'Test 3'
+                        html: 'Test 3'
                     }
                 }]
             },

package/package.json

@@ -1,6 +1,6 @@
 {
     "name"           : "neo.mjs",
-    "version"        : "9.15.0",
+    "version"        : "10.0.0-alpha.1",
     "description"    : "The webworkers driven UI framework",
     "type"           : "module",
     "repository"     : {
@@ -63,10 +63,10 @@
         "monaco-editor"                : "0.50.0",
         "neo-jsdoc"                    : "1.0.1",
         "neo-jsdoc-x"                  : "1.0.5",
-        "postcss"                      : "^8.5.5",
+        "postcss"                      : "^8.5.6",
         "sass"                         : "^1.89.2",
         "siesta-lite"                  : "5.5.2",
-        "terser"                       : "^5.42.0",
+        "terser"                       : "^5.43.0",
         "url"                          : "^0.11.4",
         "webpack"                      : "^5.99.9",
         "webpack-cli"                  : "^6.0.1",