neo.mjs 4.3.9 → 4.3.11

package/apps/sharedcovid/view/MainContainerController.mjs

@@ -136,18 +136,17 @@ class MainContainerController extends ComponentController {
         vdom.cn[2].cn[1].html = Util.formatNumber({value: data.recovered});
         vdom.cn[3].cn[1].html = Util.formatNumber({value: data.deaths});
 
-        container.vdom = vdom;
+        container.update();
 
         container = me.getReference('last-update');
-        vdom      = container.vdom;
 
-        vdom.html = 'Last Update: ' + new Intl.DateTimeFormat('default', {
+        container.vdom.html = 'Last Update: ' + new Intl.DateTimeFormat('default', {
             hour  : 'numeric',
             minute: 'numeric',
             second: 'numeric'
         }).format(new Date(data.updated));
 
-        container.vdom = vdom;
+        container.update();
     }
 
     /**
@@ -492,10 +491,9 @@ class MainContainerController extends ComponentController {
      *
      */
     onLoadSummaryDataFail() {
-        const table = this.getReference('table'),
-              vdom = table.vdom;
+        const table = this.getReference('table');
 
-        vdom.cn[0].cn[1].cn.push({
+        table.vdom.cn[0].cn[1].cn.push({
             tag  : 'div',
             cls  : ['neo-box-label', 'neo-label'],
             html : [
@@ -509,7 +507,7 @@ class MainContainerController extends ComponentController {
             }
         });
 
-        table.vdom = vdom;
+        table.update();
     }
 
     /**
@@ -559,7 +557,6 @@ class MainContainerController extends ComponentController {
             logo       = me.getReference('logo'),
             logoPath   = 'https://raw.githubusercontent.com/neomjs/pages/master/resources/images/apps/covid/',
             themeLight = button.text === 'Theme Light',
-            vdom       = logo.vdom,
             buttonText, cls, href, iconCls, mapView, mapViewStyle, theme;
 
         if (me.connectedApps.includes('SharedCovidMap')) {
@@ -582,8 +579,8 @@ class MainContainerController extends ComponentController {
             theme        = 'neo-theme-dark';
         }
 
-        vdom.src = logoPath + (theme === 'neo-theme-dark' ? 'covid_logo_dark.jpg' : 'covid_logo_light.jpg');
-        logo.vdom = vdom;
+        logo.vdom.src = logoPath + (theme === 'neo-theme-dark' ? 'covid_logo_dark.jpg' : 'covid_logo_light.jpg');
+        logo.update();
 
 
         if (Neo.config.useCssVars) {
@@ -603,8 +600,8 @@ class MainContainerController extends ComponentController {
             });
 
             button.set({
-                iconCls: iconCls,
-                text   : buttonText
+                iconCls,
+                text: buttonText
             });
         } else {
             [component.appName, ...me.connectedApps].forEach(appName => {

package/apps/website/data/blog.json

@@ -374,7 +374,7 @@
         "publisher"   : "ITNEXT",
         "selectedInto": [],
         "type"        : "Blog Post",
-        "url"         : "https://tobiasuhlig.medium.com/enhance-your-frontend-state-management-with-view-models-7bf49e1a0991?source=friends_link&sk=ac04c44c7cd7af4c34068a87b1207c7e"
+        "url"         : "https://itnext.io/enhance-your-frontend-state-management-with-view-models-7bf49e1a0991?source=friends_link&sk=ac04c44c7cd7af4c34068a87b1207c7e"
     },
     {
         "author"      : "Tobias Uhlig",

package/apps/website/view/blog/List.mjs

@@ -125,10 +125,9 @@ class List extends BaseList {
             emptyValue = !data.value || data.value === '',
             store      = me.store,
             valueRegEx = new RegExp(data.value, 'gi'),
-            vdom       = me.vdom,
             hasMatch, itemName, name, record;
 
-        vdom.cn.forEach((item, index) => {
+        me.vdom.cn.forEach((item, index) => {
             hasMatch = false;
             itemName = VDomUtil.getByFlag(item, 'name');
             record   = store.getAt(index);
@@ -153,7 +152,7 @@ class List extends BaseList {
             }
         });
 
-        me.vdom = vdom;
+        me.update();
     }
 
     /**

package/buildScripts/injectPackageVersion.mjs

@@ -0,0 +1,43 @@
+#!/usr/bin/env node
+
+import chalk   from 'chalk';
+import envinfo from 'envinfo';
+import fs      from 'fs-extra';
+import os      from 'os';
+import path    from 'path';
+
+const
+    __dirname   = path.resolve(),
+    cwd         = process.cwd(),
+    requireJson = path => JSON.parse(fs.readFileSync((path))),
+    packageJson = requireJson(path.join(__dirname, 'package.json')),
+    insideNeo   = packageJson.name === 'neo.mjs',
+    neoPath     = insideNeo ? './' : './node_modules/neo.mjs/',
+    programName = `${packageJson.name} inject-package-version`;
+
+let startDate    = new Date(),
+    configPath   = path.join(__dirname, 'src/DefaultConfig.mjs'),
+    contentArray = fs.readFileSync(configPath).toString().split(os.EOL),
+    i            = 0,
+    len          = contentArray.length,
+    versionString = `'${packageJson.version}'`;
+
+if (!insideNeo) {
+    // todo
+}
+
+for (; i < len; i++) {
+    if (contentArray[i].includes('version:')) {
+        // we want to update the comment inside the DefaultConfig.mjs as well
+        contentArray[i - 5] = contentArray[i - 5].replace(/'\d.+'/, versionString);
+        contentArray[i]     = contentArray[i]    .replace(/'\d.+'/, versionString);
+        break;
+    }
+}
+
+fs.writeFileSync(configPath, contentArray.join(os.EOL));
+
+const processTime = (Math.round((new Date - startDate) * 100) / 100000).toFixed(2);
+console.log(`\nTotal time for ${programName}: ${processTime}s`);
+
+process.exit(0);

package/docs/app/view/ApiTreeList.mjs

@@ -35,13 +35,9 @@ class ApiTreeList extends TreeList {
         Neo.Xhr.promiseJson({
             url: '../../docs/output/structure.json'
         }).then(data => {
-            let vdom     = me.vdom,
-                itemRoot = me.getListItemsRoot();
-
             me.store.data = data.json;
-            itemRoot = me.createItems(null, itemRoot, 0);
-
-            me.vdom = vdom;
+            me.createItems(null, me.getListItemsRoot(), 0);
+            me.update();
         });
     }
 }

package/docs/app/view/ExamplesTreeList.mjs

@@ -44,13 +44,9 @@ class ExamplesTreeList extends TreeList {
         Neo.Xhr.promiseJson({
             url: '../../docs/examples.json'
         }).then(data => {
-            let vdom     = me.vdom,
-                itemRoot = me.getListItemsRoot();
-
             me.store.data = data.json;
-            itemRoot = me.createItems(null, itemRoot, 0);
-
-            me.vdom = vdom;
+            me.createItems(null, me.getListItemsRoot(), 0);
+            me.update();
         });
     }
 }

package/docs/app/view/TutorialsTreeList.mjs

@@ -44,13 +44,9 @@ class TutorialsTreeList extends TreeList {
         Neo.Xhr.promiseJson({
             url: '../../docs/tutorials/tutorials.json'
         }).then(data => {
-            let vdom     = me.vdom,
-                itemRoot = me.getListItemsRoot();
-
             me.store.data = data.json;
-            itemRoot = me.createItems(null, itemRoot, 0);
-
-            me.vdom = vdom;
+            me.createItems(null, me.getListItemsRoot(), 0);
+            me.update();
         });
     }
 }

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

@@ -50,7 +50,6 @@ class HeaderComponent extends Component {
         super.onConstructed();
 
         let me         = this,
-            vdom      = me.vdom,
             className = me.record.className,
             store     = me.up('main-container').store,
             record    = store.find({$kind: className === 'Neo' ? 'module' : 'class', neoClassName: className})[0],
@@ -65,16 +64,16 @@ class HeaderComponent extends Component {
             }
         }
 
-        vdom.cn[0].innerHTML = singleton ? (className + ' → Singleton') : className;
+        me.vdom.cn[0].innerHTML = singleton ? (className + ' → Singleton') : className;
 
         if (record.description) {
-            vdom.cn.push({
+            me.vdom.cn.push({
                 cls      : ['neo-docs-header-description'],
                 innerHTML: record.description
             });
         }
 
-        me.vdom = vdom;
+        me.update();
     }
 }
 

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

@@ -100,14 +100,13 @@ class HierarchyTreeList extends TreeList {
     onLeafItemClick(record) {
         let me       = this,
             vnodeId  = me.getItemId(record.id),
-            vdom     = me.vdom,
             vdomNode = me.getVdomChild(vnodeId);
 
         NeoArray[record.checked ? 'add' : 'remove'](vdomNode.cls, 'unchecked');
 
         record.checked = !record.checked;
 
-        me.vdom = vdom;
+        me.update();
 
         me.fire('refreshClassMembers');
     }

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

@@ -327,13 +327,11 @@ class MembersList extends Base {
             vdom.cn.push(itemConfig);
         });
 
-        me.vdom = vdom;
+        me.update();
 
-        if (hasExamples) {
-            setTimeout(() => {
-                Neo.main.addon.HighlightJS.syntaxHighlightInit();
-            }, 100);
-        }
+        hasExamples && setTimeout(() => {
+            Neo.main.addon.HighlightJS.syntaxHighlightInit();
+        }, 100);
     }
 
     /**

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

@@ -130,15 +130,12 @@ class SourceViewComponent extends Component {
      */
     applySourceCode(data) {
         let me   = this,
-            vdom = me.vdom,
-            node = vdom.cn[0]; // pre tag
+            node = me.vdom.cn[0]; // pre tag
 
         node.cn[0].innerHTML = data; // code tag
-        me.vdom = vdom;
+        me.update();
 
-        if (me.mounted) {
-            me.syntaxHighlight();
-        }
+        me.mounted && me.syntaxHighlight();
     }
 
     /**

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

@@ -61,16 +61,15 @@ class TutorialComponent extends Component {
      * @param {Object} data
      */
     applySourceCode(data) {
-        let me   = this,
-            vdom = me.vdom;
+        let me = this;
 
         if (me.fileType === 'json') {
-            vdom.cn = data;
+            me.vdom.cn = data;
         } else {
-            vdom.innerHTML = data;
+            me.vdom.innerHTML = data;
         }
 
-        me.vdom = vdom;
+        me.update();
 
         setTimeout(() => {
             TutorialComponent.syntaxHighlight();

package/examples/component/coronaGallery/CountryGallery.mjs

@@ -31,43 +31,6 @@ class CountryGallery extends Gallery {
          * @member {Number} itemHeight=240
          */
         itemHeight: 280,
-        /**
-         * @member {Object} itemTpl_
-         */
-        itemTpl:
-        {cls: ['neo-gallery-item', 'image-wrap', 'view', 'neo-transition-1000'], tabIndex: '-1', cn: [
-            {cls: ['neo-item-wrapper'], style: {}, cn: [
-                {tag: 'div', cls: ['neo-country-gallery-item'], style: {}, cn: [
-                    {cls: ['neo-item-header'], cn: [
-                        {tag: 'img', cls: ['neo-flag']},
-                        {}
-                    ]},
-                    {tag: 'table', cls: ['neo-content-table'], cn: [
-                        {tag: 'tr', cn: [
-                            {tag: 'td', html: 'Cases'},
-                            {tag: 'td', cls: ['neo-align-right']},
-                            {tag: 'td', style: {width: '100%'}},
-                            {tag: 'td', html: 'Cases today'},
-                            {tag: 'td', cls: ['neo-align-right']}
-                        ]},
-                        {tag: 'tr', cn: [
-                            {tag: 'td', html: 'Deaths'},
-                            {tag: 'td', cls: ['neo-align-right', 'neo-content-deaths']},
-                            {tag: 'td', style: {width: '100%'}},
-                            {tag: 'td', html: 'Deaths today'},
-                            {tag: 'td', cls: ['neo-align-right', 'neo-content-deaths']}
-                        ]},
-                        {tag: 'tr', cn: [
-                            {tag: 'td', html: 'Recovered'},
-                            {tag: 'td', cls: ['neo-align-right', 'neo-content-recovered']},
-                            {tag: 'td', style: {width: '100%'}},
-                            {tag: 'td', html: 'Critical'},
-                            {tag: 'td', cls: ['neo-align-right', 'neo-content-critical']}
-                        ]}
-                    ]}
-                ]}
-            ]}
-        ]},
         /**
          * The item width of the gallery
          * @member {Number} itemWidth=320
@@ -97,29 +60,43 @@ class CountryGallery extends Gallery {
      * @returns {Object} vdomItem
      */
     createItem(vdomItem, record, index) {
-        let me         = this,
-            firstChild = vdomItem.cn[0].cn[0],
-            table      = firstChild.cn[1];
-
-        vdomItem.id = me.getItemVnodeId(record[me.keyProperty]);
-
-        vdomItem.cn[0].style.height = me.itemHeight + 'px';
+        let me    = this,
+            cls   = ['neo-gallery-item', 'image-wrap', 'view', 'neo-transition-1000'],
+            style = {height: (me.itemHeight - 70) + 'px', width: me.itemWidth  + 'px'};
 
-        firstChild.style.height = (me.itemHeight - 70) + 'px';
-        firstChild.style.width  = me.itemWidth  + 'px';
-
-        firstChild.cn[0].cn[0].src  = me.getCountryFlagUrl(record.country);
-        firstChild.cn[0].cn[1].html = record.country;
-
-        table.cn[0].cn[1].html = record.cases;
-        table.cn[1].cn[1].html = record.deaths;
-        table.cn[2].cn[1].html = record.recovered;
-
-        table.cn[0].cn[4].html = record.todayCases;
-        table.cn[1].cn[4].html = record.todayDeaths;
-        table.cn[2].cn[4].html = record.critical;
-
-        return vdomItem;
+        return {cls, id: me.getItemVnodeId(record[me.keyProperty]), tabIndex: '-1', cn: [
+            {cls: ['neo-item-wrapper'], style: {height: me.itemHeight + 'px'}, cn: [
+                {tag: 'div', cls: ['neo-country-gallery-item'], style, cn: [
+                    {cls: ['neo-item-header'], cn: [
+                        {tag: 'img', cls: ['neo-flag'], src: me.getCountryFlagUrl(record.country)},
+                        {html: record.country}
+                    ]},
+                    {tag: 'table', cls: ['neo-content-table'], cn: [
+                        {tag: 'tr', cn: [
+                            {tag: 'td', html: 'Cases'},
+                            {tag: 'td', cls: ['neo-align-right'], html: record.cases},
+                            {tag: 'td', style: {width: '100%'}},
+                            {tag: 'td', html: 'Cases today'},
+                            {tag: 'td', cls: ['neo-align-right'], html: record.todayCases}
+                        ]},
+                        {tag: 'tr', cn: [
+                            {tag: 'td', html: 'Deaths'},
+                            {tag: 'td', cls: ['neo-align-right', 'neo-content-deaths'], html: record.deaths},
+                            {tag: 'td', style: {width: '100%'}},
+                            {tag: 'td', html: 'Deaths today'},
+                            {tag: 'td', cls: ['neo-align-right', 'neo-content-deaths'], html: record.todayDeaths}
+                        ]},
+                        {tag: 'tr', cn: [
+                            {tag: 'td', html: 'Recovered'},
+                            {tag: 'td', cls: ['neo-align-right', 'neo-content-recovered'], html: record.recovered},
+                            {tag: 'td', style: {width: '100%'}},
+                            {tag: 'td', html: 'Critical'},
+                            {tag: 'td', cls: ['neo-align-right', 'neo-content-critical'], html: record.critical}
+                        ]}
+                    ]}
+                ]}
+            ]}
+        ]};
     }
 
     /**

package/examples/form/field/date/MainContainer.mjs

@@ -121,7 +121,7 @@ class MainContainer extends ConfigurationViewport {
             labelText           : 'Label',
             labelWidth          : 70,
             value               : DateUtil.convertToyyyymmdd(new Date()),
-            width               : 250
+            width               : 270
         });
     }
 }

package/examples/tabs/MainContainer.mjs

@@ -78,8 +78,7 @@ class MainContainer extends TabContainer {
                     handler: function () {
                         let field = Neo.getComponent('firstNameField'),
                             label = field.getLabelEl(),
-                            style = label.style,
-                            vdom  = field.vdom;
+                            style = label.style;
 
                         if (!style) {
                             style = {};
@@ -92,15 +91,14 @@ class MainContainer extends TabContainer {
                         }
 
                         label.style = style;
-                        field.vdom = vdom;
+                        field.update();
                     }
                 }, {
                     text   : 'Move Fields',
                     handler: function () {
                         let field  = Neo.getComponent('firstNameField'),
                             parent = Neo.getComponent(field.parentId),
-                            vdom   = parent.vdom,
-                            cn     = vdom.cn,
+                            cn     = parent.vdom.cn,
                             tmp    = cn[1];
 
                         cn[1] = cn[3];
@@ -109,7 +107,7 @@ class MainContainer extends TabContainer {
                         cn[1].cn[0].style.color = 'steelblue';
                         cn[3].cn[0].style.color = 'green';
 
-                        parent.vdom = vdom;
+                        parent.update();
                     }
                 }, {
                     iconCls: 'fa fa-plus',

package/examples/todoList/version1/MainComponent.mjs

@@ -55,8 +55,7 @@ class MainComponent extends Component {
     }
 
     createItems(data) {
-        let me   = this,
-            vdom = me.vdom,
+        let me = this,
             cls;
 
         data.forEach(item => {
@@ -68,11 +67,11 @@ class MainComponent extends Component {
                 cls.push('far', 'fa-square');
             }
 
-            vdom.cn[0].cn.push({
+            me.vdom.cn[0].cn.push({
                 tag: 'li',
                 cn : [{
                     tag  : 'span',
-                    cls  : cls,
+                    cls,
                     style: {cursor: 'pointer', width: '20px'}
                 }, {
                     vtype: 'text',
@@ -81,7 +80,7 @@ class MainComponent extends Component {
             });
         });
 
-        me.vdom = vdom;
+        me.update();
     }
 
     onAddButtonClick() {
@@ -100,7 +99,6 @@ class MainComponent extends Component {
         let me     = this,
             cls    = ['far', 'fa-square'],
             oldCls = ['fa',  'fa-check'],
-            vdom   = me.vdom,
             node   = VdomUtil.findVdomChild(me.vdom, data.path[0].id).vdom;
 
         if (data.path[0].cls.includes('fa-square')) {
@@ -111,7 +109,7 @@ class MainComponent extends Component {
         NeoArray.remove(node.cls, oldCls);
         NeoArray.add(node.cls, cls);
 
-        me.vdom = vdom;
+        me.update();
     }
 
     onInputFieldChange(data) {

package/examples/todoList/version2/TodoList.mjs

@@ -18,8 +18,7 @@ class TodoList extends List {
     }
 
     /*createItems(data) {
-        let me   = this,
-            vdom = me.vdom,
+        let me = this,
             cls;
 
         data.forEach(item => {
@@ -31,11 +30,11 @@ class TodoList extends List {
                 cls.push('far', 'fa-square');
             }
 
-            vdom.cn.push({
+            me.vdom.cn.push({
                 tag: 'li',
                 cn : [{
                     tag  : 'span',
-                    cls  : cls,
+                    cls,
                     style: {cursor: 'pointer', width: '20px'}
                 }, {
                     vtype: 'text',
@@ -44,7 +43,7 @@ class TodoList extends List {
             });
         });
 
-        me.vdom = vdom;
+        me.update();
     }*/
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "neo.mjs",
-    "version": "4.3.9",
+    "version": "4.3.11",
     "description": "The webworkers driven UI framework",
     "type": "module",
     "repository": {
@@ -20,6 +20,7 @@
         "create-app": "node ./buildScripts/createApp.mjs",
         "create-class": "node ./buildScripts/createClass.mjs",
         "generate-docs-json": "node ./buildScripts/docs/jsdocx.mjs",
+        "inject-package-version": "node ./buildScripts/injectPackageVersion.mjs",
         "server-start": "webpack serve -c ./buildScripts/webpack/webpack.server.config.mjs --open",
         "test": "echo \"Error: no test specified\" && exit 1",
         "watch-themes": "node ./buildScripts/watchThemes.mjs"
@@ -43,19 +44,19 @@
         "@fortawesome/fontawesome-free": "^6.2.0",
         "@material/mwc-button": "^0.27.0",
         "@material/mwc-textfield": "^0.27.0",
-        "autoprefixer": "^10.4.12",
-        "chalk": "^5.0.1",
+        "autoprefixer": "^10.4.13",
+        "chalk": "^5.1.2",
         "clean-webpack-plugin": "^4.0.0",
         "commander": "^9.4.1",
-        "cssnano": "^5.1.13",
+        "cssnano": "^5.1.14",
         "envinfo": "^7.8.1",
         "fs-extra": "^10.1.0",
         "highlightjs-line-numbers.js": "^2.8.0",
-        "inquirer": "^9.1.2",
+        "inquirer": "^9.1.4",
         "neo-jsdoc": "^1.0.1",
         "neo-jsdoc-x": "^1.0.4",
-        "postcss": "^8.4.17",
-        "sass": "^1.55.0",
+        "postcss": "^8.4.18",
+        "sass": "^1.56.0",
         "webpack": "^5.74.0",
         "webpack-cli": "^4.10.0",
         "webpack-dev-server": "4.11.1",

package/resources/scss/src/draggable/tree/DragZone.scss

@@ -1,5 +1,7 @@
 .neo-dragproxy.neo-tree-list {
     .neo-list {
+        overflow: hidden;
+
         .neo-list-item {
             margin-right: 0;
         }
@@ -10,4 +12,4 @@
             content: "\f07b" !important;
         }
     }
-}
+}

package/src/DefaultConfig.mjs

@@ -226,7 +226,15 @@ const DefaultConfig = {
      * @name config.useVdomWorker
      * @type Boolean
      */
-    useVdomWorker: true
+    useVdomWorker: true,
+    /**
+     * buildScripts/injectPackageVersion.mjs will update this value
+     * @default '4.3.10'
+     * @memberOf! module:Neo
+     * @name config.version
+     * @type String
+     */
+    version: '4.3.10'
 };
 
 Object.assign(DefaultConfig, {