neo.mjs 10.0.0-beta.4 → 10.0.0-beta.6

package/src/code/LivePreview.mjs

@@ -3,10 +3,9 @@ import MonacoEditor from '../component/wrapper/MonacoEditor.mjs'
 import TabContainer from '../tab/Container.mjs';
 
 const
-    classDeclarationRegex = /class\s+([a-zA-Z$_][a-zA-Z0-9$_]*)\s*(?:extends\s+[a-zA-Z$_][a-zA-Z0-9$_]*)?\s*{[\s\S]*?}/g,
-    classNameRegex        = /className\s*:\s*['"]([^'"]+)['"]/g,
-    exportRegex           = /export\s+(?:default\s+)?(?:const|let|var|class|function|async\s+function|generator\s+function|async\s+generator\s+function|(\{[\s\S]*?\}))/g,
-    importRegex           = /import\s+([\w-]+)\s+from\s+['"]([^'"]+)['"]/;
+    classNameRegex = /className\s*:\s*['\"]([^'\"]+)['\"]/g,
+    exportRegex    = /export\s+(?:default\s+)?(?:const|let|var|class|function|async\s+function|generator\s+function|async\s+generator\s+function|(\{[\s\S]*?\}))/g,
+    importRegex    = /import\s+(?:([\w-]+)|\{([^}]+)\})\s+from\s+['\"]([^'\"]+)['\"]/;
 
 /**
  * @class Neo.code.LivePreview
@@ -35,6 +34,7 @@ class LivePreview extends Container {
         /**
          * Valid values are 'preview' and 'source'
          * @member {String} activeView_='source'
+         * @reactive
          */
         activeView_: 'source',
         /**
@@ -51,6 +51,7 @@ class LivePreview extends Container {
         enableFullscreen: true,
         /**
          * @member {Object|String} layout='fit'
+         * @reactive
          */
         layout: 'fit',
         /**
@@ -78,6 +79,7 @@ class LivePreview extends Container {
         /**
          * The code to display inside the Monaco editor
          * @member {String|null} value_=null
+         * @reactive
          */
         value_: null,
     }
@@ -226,19 +228,20 @@ class LivePreview extends Container {
             {environment}     = Neo.config,
             container         = me.getPreviewContainer(),
             source            = me.editorValue || me.value,
-            className         = me.findLastClassName(source),
+            className         = me.findMainClassName(source),
             cleanLines        = [],
             moduleNameAndPath = [],
             params            = [],
             vars              = [],
-            codeString, promises;
+            codeString, module, promises;
 
         source.split('\n').forEach(line => {
             let importMatch = line.match(importRegex);
 
             if (importMatch) {
-                let moduleName = importMatch[1],
-                    path       = importMatch[2],
+                let defaultImport = importMatch[1],
+                    namedImports  = importMatch[2]?.split(',').map(name => name.trim()),
+                    path          = importMatch[3],
                     index;
 
                 // We want the non-minified version for code which can not get bundled.
@@ -263,7 +266,7 @@ class LivePreview extends Container {
                     }
                 }
 
-                moduleNameAndPath.push({moduleName, path})
+                moduleNameAndPath.push({defaultImport, namedImports, path})
             } else if (line.match(exportRegex)) {
                 // Skip export statements
             } else {
@@ -286,9 +289,15 @@ class LivePreview extends Container {
         //   });
         // Making the promise part of the eval seems weird, but it made it easier to
         // set up the import vars.
-        promises = moduleNameAndPath.map(item => {
-            params.push(`${item.moduleName}Module`);
-            vars.push(`    const ${item.moduleName} = ${item.moduleName}Module.default;`);
+        promises = moduleNameAndPath.map((item, i) => {
+            let moduleAlias = `Module${i}`;
+            params.push(moduleAlias);
+            if (item.defaultImport) {
+                vars.push(`    const ${item.defaultImport} = ${moduleAlias}.default;`);
+            }
+            if (item.namedImports) {
+                vars.push(`    const {${item.namedImports.join(', ')}} = ${moduleAlias};`);
+            }
             return `import('${item.path}')`
         });
 
@@ -299,11 +308,19 @@ class LivePreview extends Container {
             `${vars.join('\n')}`,
             `    ${cleanLines.join('\n')}`,
             '',
-            `    if (${className} && Neo.component.Base.isPrototypeOf(${className})) {`,
-            `        container.add({module:${className}})`,
+            `    module = Neo.ns('${className}');`,
+            '',
+            `    if (module && (`,
+            `        Neo.component.Base.isPrototypeOf(module) ||`,
+            `        Neo.functional.component.Base.isPrototypeOf(module)`,
+            `    )) {`,
+            `        container.add({module})`,
             '    }',
             '})',
-            '.catch(error => container.add({ntype:\'component\', html:error.message}));'
+            '.catch(error => {',
+            '    console.warn("LivePreview Error:", error);',
+            '    container.add({ntype:\'component\', html:error.message});',
+            '})'
         ].join('\n')
 
         container.removeAll();
@@ -321,7 +338,7 @@ class LivePreview extends Container {
         });
 
         try {
-            new Function('container', codeString)(container);
+            new Function('container', 'module', codeString)(container, module);
         } catch (error) {
             container.add({
                 ntype: 'component',
@@ -349,18 +366,29 @@ class LivePreview extends Container {
      * @param {String} sourceCode
      * @returns {String|null}
      */
-    findLastClassName(sourceCode) {
-        let lastClassName = null,
-            match;
+    findMainClassName(sourceCode) {
+        let classNames = this.findClassNames(sourceCode),
+            mainName   = null,
+            prioNames  = ['MainContainer', 'MainComponent', 'MainView', 'Main'];
+
+        if (classNames.length > 0) {
+            for (const name of prioNames) {
+                mainName = classNames.find(className => className.endsWith(name));
+                if (mainName) {
+                    break
+                }
+            }
 
-        while ((match = classDeclarationRegex.exec(sourceCode)) !== null) {
-            // Update the last class name found
-            lastClassName = match[1]
+            if (!mainName) {
+                mainName = classNames[classNames.length - 1]
+            }
         }
 
-        return lastClassName
+        return mainName
     }
 
+    
+
     /**
      * @returns {Neo.component.Base|null}
      */

package/src/collection/Base.mjs

@@ -16,6 +16,7 @@ const countMutations   = Symbol('countMutations'),
 /**
  * @class Neo.collection.Base
  * @extends Neo.core.Base
+ * @mixes Neo.core.Observable
  */
 class Collection extends Base {
     /**
@@ -51,6 +52,7 @@ class Collection extends Base {
         /**
          * Stores the items.length of the items array in use
          * @member {Number} count_=0
+         * @reactive
          */
         count_: 0,
         /**
@@ -62,10 +64,12 @@ class Collection extends Base {
         /**
          * An Array containing Neo.util.Filter config objects or instances
          * @member {Array} filters_=[]
+         * @reactive
          */
         filters_: [],
         /**
          * @member {Object[]|null} items_=null
+         * @reactive
          */
         items_: null,
         /**
@@ -83,6 +87,7 @@ class Collection extends Base {
          * A map containing the key & reference of each collection item for faster access
          * @member {Map} map_=null
          * @protected
+         * @reactive
          */
         map_: null,
         /**
@@ -100,11 +105,13 @@ class Collection extends Base {
         /**
          * An Array containing Neo.util.Sorter config objects or instances
          * @member {Array} sorters_=[]
+         * @reactive
          */
         sorters_: [],
         /**
          * The id of another collection instance to use as this data source
          * @member {String|null} sourceId_=null
+         * @reactive
          */
         sourceId_: null
     }
@@ -144,16 +151,6 @@ class Collection extends Base {
         return this.splice(null, null, item).addedItems
     }
 
-    /**
-     * Triggered after the badgePosition config got changed
-     * @param {Number} value
-     * @param {Number} oldValue
-     * @protected
-     */
-    afterSetCount(value, oldValue) {
-        this.fire('countChange', {oldValue, value})
-    }
-
     /**
      * Triggered after the filters config got changed
      * @param {Array} value
@@ -454,13 +451,17 @@ class Collection extends Base {
             filters = me._filters || [],
             sorters = me._sorters || [];
 
+        // Ensure the keyProperty does not get lost.
+        config.keyProperty = me.keyProperty;
+
         delete config.id;
         delete config.filters;
         delete config.items;
         delete config.sorters;
 
         if (me._items.length > 0) {
-            config.items = [...me._items]
+            config.items  = [...me._items];
+            config.count = config.items.length;
         }
 
         config.filters = [];
@@ -694,7 +695,8 @@ class Collection extends Base {
 
                 me.allItems = Neo.create(Collection, {
                     ...Neo.clone(config, true, true),
-                    id          : me.id + '-all',
+                    id         : me.id + '-all',
+                    items      : [...me._items], // Initialize with a shallow copy of current items
                     keyProperty: me.keyProperty,
                     sourceId   : me.id
                 })

package/src/collection/Filter.mjs

@@ -4,6 +4,7 @@ import Observable from '../core/Observable.mjs';
 /**
  * @class Neo.collection.Filter
  * @extends Neo.core.Base
+ * @mixes Neo.core.Observable
  */
 class Filter extends Base {
     /**
@@ -38,11 +39,13 @@ class Filter extends Base {
         /**
          * Setting disabled to true will exclude this filter from the collection filtering logic
          * @member {Boolean} disabled_=false
+         * @reactive
          */
         disabled_: false,
         /**
          * Provide a custom filtering function which has a higher priority than property, operator & value
          * @member {Function|null} filterBy_=null
+         * @reactive
          */
         filterBy_: null,
         /**
@@ -54,6 +57,7 @@ class Filter extends Base {
          * Set this flag to true before starting bulk updates (e.g. changing property & value)
          * to prevent multiple change events
          * @member {Boolean} isUpdating_=false
+         * @reactive
          */
         isUpdating_: false,
         /**
@@ -83,6 +87,7 @@ class Filter extends Base {
         /**
          * The property to filter by (use the combination of property, operator & value)
          * @member {String} property_='id'
+         * @reactive
          */
         property_: 'id',
         /**
@@ -93,6 +98,7 @@ class Filter extends Base {
         /**
          * The value to filter by (use the combination of property, operator & value)
          * @member {String} value_=null
+         * @reactive
          */
         value_: null
     }

package/src/collection/Sorter.mjs

@@ -4,6 +4,7 @@ import Observable from '../core/Observable.mjs';
 /**
  * @class Neo.collection.Sorter
  * @extends Neo.core.Base
+ * @mixes Neo.core.Observable
  */
 class Sorter extends Base {
     /**
@@ -33,6 +34,7 @@ class Sorter extends Base {
         /**
          * The sort direction when using a property.
          * @member {String} direction_='ASC'
+         * @reactive
          */
         direction_: 'ASC',
         /**
@@ -44,6 +46,7 @@ class Sorter extends Base {
         /**
          * The property to sort by.
          * @member {String} property_='id'
+         * @reactive
          */
         property_: 'id',
         /**