neo.mjs 4.0.74 → 4.0.77

package/buildScripts/createClass.mjs

@@ -143,7 +143,7 @@ if (programOpts.info) {
         isDrop      = programOpts.drop,
         isSingleton = singleton === 'yes',
         startDate   = new Date(),
-        baseFileName, baseType, classFolder, configName, file, folderDelta, importName, importPath, index, ns, root, rootLowerCase, viewFile;
+        baseType, classFolder, configName, file, folderDelta, importName, importPath, index, ns, root, rootLowerCase, viewFile;
 
     if (className.endsWith('.mjs')) {
         className = className.slice(0, -4);
@@ -162,8 +162,8 @@ if (programOpts.info) {
         if (isDrop === true) {
             ns = [];
 
-            let pathInfo = path.parse(cwd),
-                sep      = path.sep,
+            let pathInfo      = path.parse(cwd),
+                sep           = path.sep,
                 baseName, loc = baseName = '',
                 tmpNs;
 
@@ -226,89 +226,18 @@ if (programOpts.info) {
             folderDelta = ns.length + 2;
         }
 
-        fs.mkdirpSync(classFolder);
-
-        baseFileName = baseClass.split('.').pop();
-
-        if (baseFileName === file) {
-            baseFileName = baseClass.split('.');
-            baseFileName = baseFileName.map(e => capitalize(e)).join('');
-        }
-
-        fs.writeFileSync(path.join(classFolder, file + '.mjs'), createContent({
+        createClass({
             baseClass,
-            baseFileName,
             className,
             isSingleton,
             file,
             folderDelta,
             ns,
             root
-        }));
-
-        switch(baseClass) {
-            case 'controller.Component': {
-                baseType   = 'Neo.controller.Component';
-                configName = 'controller';
-                importName = file;
-                importPath = `./${importName}.mjs`;
-                index      = file.indexOf('Controller');
-
-                if (index > 0) {
-                    viewFile = path.join(classFolder, file.substr(0, index) + '.mjs');
-
-                    if (fs.existsSync(viewFile)) {
-                        adjustView({baseType, configName, importName, importPath, viewFile});
-                    }
-                }
-                break;
-            }
-
-            case 'data.Store': {
-                baseType   = 'Neo.data.Model';
-                configName = 'model';
-                importName = className.replace('.store.', '.model.');
-
-                if (importName.endsWith('ies')) {
-                    importName.replace(new RegExp('ies$'), 'y')
-                } else {
-                    importName = importName.slice(0, -1);
-                }
-
-                viewFile = importName.split('.');
-                viewFile.shift();
-
-                importPath = `../${viewFile.join('/')}.mjs`;
-                viewFile   = path.join(classFolder, importPath);
-
-                // checking for the data.Model file
-                if (fs.existsSync(viewFile)) {
-                    // adjusting the data.Store file
-                    viewFile   = path.join(classFolder, file + '.mjs');
-                    importName = importName.split('.');
-                    importName = importName.pop();
-
-                    adjustView({baseType, configName, importName, importPath, viewFile});
-                }
-                break;
-            }
-
-            case 'model.Component': {
-                baseType   = 'Neo.model.Component';
-                configName = 'model';
-                importName = file;
-                importPath = `./${importName}.mjs`;
-                index      = file.indexOf('Model');
-
-                if (index > 0) {
-                    viewFile = path.join(classFolder, file.substr(0, index) + '.mjs');
+        });
 
-                    if (fs.existsSync(viewFile)) {
-                        adjustView({baseType, configName, importName, importPath, viewFile});
-                    }
-                }
-                break;
-            }
+        if (baseClass === 'data.Model') {
+            // todo: add a question for auto-generating a matching store
         }
     }
 
@@ -490,6 +419,113 @@ if (programOpts.info) {
         return typeof value === 'string' && value[0].toUpperCase() + value.slice(1);
     }
 
+    /**
+     * @param {Object} opts
+     * @param {String} opts.baseClass
+     * @param {String} opts.className
+     * @param {Boolean} opts.isSingleton
+     * @param {String} opts.file
+     * @param {Number} opts.folderDelta
+     * @param {String[]} opts.ns
+     * @param {String} opts.root
+     */
+    function createClass(opts) {
+        let {
+            baseClass,
+            className,
+            isSingleton,
+            file,
+            folderDelta,
+            ns,
+            root
+        } = opts, baseFileName;
+
+        fs.mkdirpSync(classFolder);
+
+        baseFileName = baseClass.split('.').pop();
+
+        if (baseFileName === file) {
+            baseFileName = baseClass.split('.');
+            baseFileName = baseFileName.map(e => capitalize(e)).join('');
+        }
+
+        fs.writeFileSync(path.join(classFolder, file + '.mjs'), createContent({
+            baseClass,
+            baseFileName,
+            className,
+            isSingleton,
+            file,
+            folderDelta,
+            ns,
+            root
+        }));
+
+        switch(baseClass) {
+            case 'controller.Component': {
+                baseType   = 'Neo.controller.Component';
+                configName = 'controller';
+                importName = file;
+                importPath = `./${importName}.mjs`;
+                index      = file.indexOf('Controller');
+
+                if (index > 0) {
+                    viewFile = path.join(classFolder, file.substr(0, index) + '.mjs');
+
+                    if (fs.existsSync(viewFile)) {
+                        adjustView({baseType, configName, importName, importPath, viewFile});
+                    }
+                }
+                break;
+            }
+
+            case 'data.Store': {
+                baseType   = 'Neo.data.Model';
+                configName = 'model';
+                importName = className.replace('.store.', '.model.');
+
+                if (importName.endsWith('ies')) {
+                    importName.replace(new RegExp('ies$'), 'y')
+                } else {
+                    importName = importName.slice(0, -1);
+                }
+
+                viewFile = importName.split('.');
+                viewFile.shift();
+
+                importPath = `../${viewFile.join('/')}.mjs`;
+                viewFile   = path.join(classFolder, importPath);
+
+                // checking for the data.Model file
+                if (fs.existsSync(viewFile)) {
+                    // adjusting the data.Store file
+                    viewFile   = path.join(classFolder, file + '.mjs');
+                    importName = importName.split('.');
+                    importName = importName.pop();
+
+                    adjustView({baseType, configName, importName, importPath, viewFile});
+                }
+                break;
+            }
+
+            case 'model.Component': {
+                baseType   = 'Neo.model.Component';
+                configName = 'model';
+                importName = file;
+                importPath = `./${importName}.mjs`;
+                index      = file.indexOf('Model');
+
+                if (index > 0) {
+                    viewFile = path.join(classFolder, file.substr(0, index) + '.mjs');
+
+                    if (fs.existsSync(viewFile)) {
+                        adjustView({baseType, configName, importName, importPath, viewFile});
+                    }
+                }
+                break;
+            }
+        }
+    }
+
     /**
      * Creates the content of the neo-class .mjs file
      * @param {Object} opts

package/examples/component/carousel/MainContainer.mjs

@@ -0,0 +1,54 @@
+import CheckBox              from '../../../src/form/field/CheckBox.mjs';
+import Carousel              from '../../../src/component/Carousel.mjs';
+import ConfigurationViewport from '../../ConfigurationViewport.mjs';
+import RangeField            from '../../../src/form/field/Range.mjs';
+
+/**
+ * @class Neo.examples.component.carousel.MainContainer
+ * @extends Neo.examples.ConfigurationViewport
+ */
+class MainContainer extends ConfigurationViewport {
+    static getConfig() {return {
+        className: 'Neo.examples.component.carousel.MainContainer',
+        autoMount: true,
+        layout   : {ntype: 'hbox', align: 'stretch'}
+    }}
+
+    createConfigurationComponents() {
+        let me = this;
+
+        return [{
+            module   : CheckBox,
+            checked  : me.exampleComponent.autoRun,
+            labelText: 'autoRun',
+            listeners: {change: me.onConfigChange.bind(me, 'autoRun')}
+        }, {
+            module    :  RangeField,
+            labelText : 'height',
+            listeners : {change: me.onConfigChange.bind(me, 'height')},
+            maxValue  : 800,
+            minValue  : 200,
+            stepSize  : 1,
+            value     : me.exampleComponent.height
+        }, {
+            module    :  RangeField,
+            labelText : 'width',
+            listeners : {change: me.onConfigChange.bind(me, 'width')},
+            maxValue  : 800,
+            minValue  : 200,
+            stepSize  : 1,
+            value     : me.exampleComponent.width
+        }];
+    }
+
+    createExampleComponent() {
+        return Neo.create(Carousel, {
+            height: 500,
+            width : 500
+        });
+    }
+}
+
+Neo.applyClassConfig(MainContainer);
+
+export default MainContainer;

package/examples/component/carousel/app.mjs

@@ -0,0 +1,6 @@
+import MainContainer from './MainContainer.mjs';
+
+export const onStart = () => Neo.app({
+    mainView: MainContainer,
+    name    : 'Neo.examples.component.carousel'
+});

package/examples/component/carousel/index.html

@@ -0,0 +1,11 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta charset="UTF-8">
+    <title>Neo Carousel</title>
+</head>
+<body>
+    <script src="../../../src/MicroLoader.mjs" type="module"></script>
+</body>
+</html>

package/examples/component/carousel/neo-config.json

@@ -0,0 +1,6 @@
+{
+    "appPath"    : "examples/component/carousel/app.mjs",
+    "basePath"   : "../../../",
+    "environment": "development",
+    "mainPath"   : "./Main.mjs"
+}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "neo.mjs",
-    "version": "4.0.74",
+    "version": "4.0.77",
     "description": "The webworkers driven UI framework",
     "type": "module",
     "repository": {

package/src/component/Base.mjs

@@ -410,7 +410,7 @@ class Base extends CoreBase {
                     app.un('mounted', listenerId);
 
                     setTimeout(() => {
-                        me.updateVdom(me.vdom, me.vnode);
+                        me.vnode && me.updateVdom(me.vdom, me.vnode);
                     }, 50);
                 });
             } else if (me.mounted) {

package/src/component/Carousel.mjs

@@ -3,7 +3,6 @@ import Component       from './Base.mjs';
 import Store           from '../data/Store.mjs';
 import TaskManager     from '../manager/Task.mjs';
 
-
 /**
  * @class Neo.component.Carousel
  * @extends Neo.component.Base
@@ -107,26 +106,27 @@ class Carousel extends Component {
 
     /**
      * Triggered after autoRun config got changed
-     * @param {boolean|integer} value
+     * @param {Boolean|Number} value
+     * @param {Boolean|Number} oldValue
      * @protected
      */
     afterSetAutoRun(value, oldValue) {
-        let me = this;
+        if (value) {
+            let me   = this,
+                vdom = me._vdom;
 
-        if(!value) return;
-
-        TaskManager.start({
-            id: this.id,
-            interval: value,
-            run: function() {
-                me.onCarouselBtnClick('forward');
-            }
-        });
+            TaskManager.start({
+                id      : me.id,
+                interval: value,
+                run     : function () {
+                    me.onCarouselBtnClick('forward');
+                }
+            });
 
-        let vdom = this._vdom;
-        vdom.cn[0].cn[0].removeDom = true;
+            vdom.cn[0].cn[0].removeDom = true;
 
-        this._vdom = vdom;
+            me._vdom = vdom;
+        }
     }
 
     /**
@@ -148,18 +148,21 @@ class Carousel extends Component {
 
     /**
      * Ensure the itemTpl is setup correctly to match a valid JSON
-     * @param {String} value
+     * @param {String|null} value
+     * @param {String|null} oldValue
      * @returns {String}
      * @protected
      */
-    beforeSetItemTpl(value) {
-        let itemTpl = value.replaceAll('\'', '"');
+    beforeSetItemTpl(value, oldValue) {
+        if (value) {
+            value = value.replaceAll('\'', '"');
 
-        itemTpl = itemTpl.replace(/(\w+:)|(\w+ :)/g, function(matchedStr) {
-            return `"${matchedStr.substring(0, matchedStr.length - 1)}":`;
-        });
+            value = value.replace(/(\w+:)|(\w+ :)/g, function(matchedStr) {
+                return `"${matchedStr.substring(0, matchedStr.length - 1)}":`;
+            });
+        }
 
-        return itemTpl;
+        return value;
     }
 
     /**

package/src/controller/Base.mjs

@@ -33,12 +33,7 @@ class Base extends CoreBase {
     construct(config) {
         super.construct(config);
 
-        let me          = this,
-            currentHash = HashHistory.first();
-
-        currentHash && me.onHashChange(currentHash, null);
-
-        HashHistory.on('change', me.onHashChange, me);
+        HashHistory.on('change', this.onHashChange, this);
     }
 
     /**
@@ -58,6 +53,17 @@ class Base extends CoreBase {
     onHashChange(value, oldValue) {
 
     }
+
+    /**
+     *
+     */
+    onConstructed() {
+        let currentHash = HashHistory.first();
+
+        currentHash && this.onHashChange(currentHash, null);
+
+        super.onConstructed();
+    }
 }
 
 Neo.applyClassConfig(Base);

package/src/vdom/Helper.mjs

@@ -167,9 +167,6 @@ class Helper extends Base {
             // use case: calendar week view => move an event into a column on the right side
 
             if (movedNode) {
-
-                // todo: check if there is a real index change
-
                 deltas.push({
                     action: 'moveNode',
                     id      : oldVnode.id,
@@ -786,8 +783,8 @@ class Helper extends Base {
      * @returns {Object|Promise<Object>}
      */
     update(opts) {
-        let me     = this,
-            node   = me.parseHelper(opts.vdom),
+        let me   = this,
+            node = me.parseHelper(opts.vdom),
 
         deltas = me.createDeltas({
             newVnode: node,