neo.mjs 4.0.73 → 4.0.76

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.73",
+    "version": "4.0.76",
     "description": "The webworkers driven UI framework",
     "type": "module",
     "repository": {

package/src/component/Base.mjs

@@ -1567,22 +1567,24 @@ class Base extends CoreBase {
 
         // keep the vnode parent tree in sync
         ComponentManager.getParents(me).forEach((component, index) => {
-            if (!me.vnode) {
-                if (index === 0 && !VNodeUtil.removeChildVnode(component.vnode, me.id)) {
-                    // This can fail, in case the vnode is already removed (not an issue, better safe than sorry)
-                    // console.warn('syncVnodeTree: Could not remove the parent vnode for', me.id, component);
+            if (component._vnode) {
+                if (!me.vnode) {
+                    if (index === 0 && !VNodeUtil.removeChildVnode(component.vnode, me.id)) {
+                        // This can fail, in case the vnode is already removed (not an issue, better safe than sorry)
+                        // console.warn('syncVnodeTree: Could not remove the parent vnode for', me.id, component);
+                    }
                 }
-            }
 
-            // check for dynamically rendered components which get inserted into the component tree
-            else if (index === 0 && me.vnode.outerHTML) {
-                // console.log('dyn item', me.vnode, me.parentIndex);
-                component.vnode.childNodes.splice(me.parentIndex || 0, 0, me.vnode);
-            }
+                // check for dynamically rendered components which get inserted into the component tree
+                else if (index === 0 && me.vnode.outerHTML) {
+                    // console.log('dyn item', me.vnode, me.parentIndex);
+                    component.vnode.childNodes.splice(me.parentIndex || 0, 0, me.vnode);
+                }
 
-            else if (!VNodeUtil.replaceChildVnode(component.vnode, me.vnode.id, me.vnode)) {
-                // todo: can happen for dynamically inserted container items
-                // console.warn('syncVnodeTree: Could not replace the parent vnode for', me.vnode.id, component);
+                else if (!VNodeUtil.replaceChildVnode(component.vnode, me.vnode.id, me.vnode)) {
+                    // todo: can happen for dynamically inserted container items
+                    // console.warn('syncVnodeTree: Could not replace the parent vnode for', me.vnode.id, component);
+                }
             }
         });
 

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

@@ -53,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/util/HashHistory.mjs

@@ -22,11 +22,6 @@ class HashHistory extends Base {
          * @protected
          */
         className: 'Neo.util.HashHistory',
-        /**
-         * @member {String} ntype='hash-history'
-         * @protected
-         */
-        ntype: 'hash-history',
         /**
          * @member {Boolean} singleton=true
          * @protected
@@ -71,10 +66,10 @@ class HashHistory extends Base {
         stack.unshift(data);
 
         if (stack.length > me.maxItems) {
-            stack.length = me.maxItems;
+            stack.pop();
         }
 
-        me.fire('change', data, stack[1]);
+        me.fire('change', data, stack[1] || null);
     }
 }