neo.mjs 6.7.4 → 6.7.6

package/apps/ServiceWorker.mjs

@@ -20,9 +20,9 @@ class ServiceWorker extends ServiceBase {
          */
         singleton: true,
         /**
-         * @member {String} version='6.7.4'
+         * @member {String} version='6.7.6'
          */
-        version: '6.7.4'
+        version: '6.7.6'
     }
 
     /**

package/apps/covid/view/country/Table.mjs

@@ -121,7 +121,7 @@ class Table extends Container {
         if (oldValue !== undefined) {
             let me             = this,
                 selectionModel = me.selectionModel,
-                view           = me.getView(),
+                view           = me.view,
                 id;
 
             if (view) {
@@ -158,7 +158,7 @@ class Table extends Container {
 
         if (me.store.getCount() > 0) {
             if (item) {
-                item = me.getView().getRecordByRowId(item)?.country;
+                item = me.view.getRecordByRowId(item)?.country;
             }
 
             // in case getRecordByRowId() has no match, the initial row creation will include the selection

package/apps/sharedcovid/view/country/Table.mjs

@@ -124,7 +124,7 @@ class Table extends Container {
                 id;
 
             if (value) {
-                id = `${me.getView().id}__tr__${value}`; // the store can not be loaded on the first selection
+                id = `${me.view.id}__tr__${value}`; // the store can not be loaded on the first selection
 
                 if (!selectionModel.isSelected(id)) {
                     selectionModel.select(id);
@@ -155,7 +155,7 @@ class Table extends Container {
 
         if (me.store.getCount() > 0) {
             if (item) {
-                item = me.getView().getRecordByRowId(item)?.country;
+                item = me.view.getRecordByRowId(item)?.country;
             }
 
             // in case getRecordByRowId() has no match, the initial row creation will include the selection

package/examples/ServiceWorker.mjs

@@ -20,9 +20,9 @@ class ServiceWorker extends ServiceBase {
          */
         singleton: true,
         /**
-         * @member {String} version='6.7.4'
+         * @member {String} version='6.7.6'
          */
-        version: '6.7.4'
+        version: '6.7.6'
     }
 
     /**

package/examples/dialog/DemoDialog.mjs

@@ -8,10 +8,41 @@ import SelectField from '../../src/form/field/Select.mjs';
  */
 class DemoDialog extends Dialog {
     static config = {
-        className: 'Neo.examples.dialog.DemoWindow',
-        modal    : true,
-        title    : 'My Dialog',
-
+        /**
+         * @member {String} className='Neo.examples.dialog.DemoDialog'
+         * @protected
+         */
+        className: 'Neo.examples.dialog.DemoDialog',
+        /**
+         * Custom config to dynamically enable / disable the animateTargetId
+         * @member {Boolean} animated_=true
+         */
+        animated_: true,
+        /**
+         * @member {Object} containerConfig
+         */
+        containerConfig: {
+            style: {
+                padding: '1em'
+            }
+        },
+        /**
+         * Custom config to show the current dialog number
+         * @member {Number} index=1
+         */
+        index: 1,
+        /**
+         * @member {Boolean} modal=true
+         */
+        modal: true,
+        /**
+         * Custom config used by animated_
+         * @member {String|null} optionalAnimateTargetId=null
+         */
+        optionalAnimateTargetId: null,
+        /**
+         * @member {Object} wrapperStyle
+         */
         wrapperStyle: {
             width : '40%'
         }
@@ -26,8 +57,9 @@ class DemoDialog extends Dialog {
         const me = this;
 
         me.items = [{
-            module   : SelectField,
-            labelText: 'Select',
+            module    : SelectField,
+            labelText : 'Select',
+            labelWidth: 80,
 
             store: {
                 data: (() => {
@@ -37,43 +69,90 @@ class DemoDialog extends Dialog {
                         result.push({
                             id   : i,
                             name : `Option ${i + 1}`
-                        });
+                        })
                     }
 
-                    return result;
+                    return result
                 })()
             }
         }, {
             module   : Button,
             handler  : me.createDialog.bind(me),
             iconCls  : 'fa fa-window-maximize',
-            reference: 'create-second-dialog-button',
-            text     : 'Create new modal Dialog',
+            reference: 'create-dialog-button',
+            style    : {marginTop: '3em'},
+            text     : 'Create Dialog ' + (me.index + 1),
         }]
     }
 
+    /**
+     * Triggered after the animated config got changed
+     * @param {Boolean} value
+     * @param {Boolean} oldValue
+     * @protected
+     */
+    afterSetAnimated(value, oldValue) {
+        let me = this;
+
+        me.animateTargetId = value ? me.optionalAnimateTargetId : null;
+
+        if (me.dialog) {
+            me.dialog.animated = value
+        }
+    }
+
+    /**
+     * Triggered after the modal config got changed
+     * @param {Boolean} value
+     * @param {Boolean} oldValue
+     * @protected
+     */
+    afterSetModal(value, oldValue) {
+        super.afterSetModal(value, oldValue);
+
+        if (this.dialog) {
+            this.dialog.modal = value
+        }
+    }
+
     /**
      * @param {Object} data
      */
     createDialog(data) {
-        let me = this;
+        let me        = this,
+            button    = data.component,
+            nextIndex = me.index + 1;
 
-        data.component.disabled = true;
+        button.disabled = true;
 
         me.dialog = Neo.create(DemoDialog, {
-            appName            : me.appName,
-            boundaryContainerId: me.boundaryContainerId,
-            listeners          : {close: me.onWindowClose, scope: me},
-            modal              : true,
-            title              : 'Second Dialog'
-        });
+            animated               : me.animated,
+            appName                : me.appName,
+            boundaryContainerId    : me.boundaryContainerId,
+            index                  : nextIndex,
+            listeners              : {close: me.onWindowClose, scope: me},
+            modal                  : me.app.mainView.down({valueLabelText: 'Modal'}).checked,
+            optionalAnimateTargetId: button.id,
+            style                  : {left: me.getOffset(), top: me.getOffset()},
+            title                  : 'Dialog ' + nextIndex
+        })
+    }
+
+    /**
+     * We want new dialogs to have a random left & top offset between -100px & 100px,
+     * to ensure they are not at the exact same position.
+     * @returns {String}
+     */
+    getOffset() {
+        let offset = Math.floor(Math.random() * 200 - 100);
+        return `calc(50% + ${offset}px)`
     }
 
     /**
      *
      */
     onWindowClose() {
-        this.getReference('create-second-dialog-button').disabled = false;
+        this.getReference('create-dialog-button').disabled = false
     }
 }
 

package/examples/dialog/MainContainer.mjs

@@ -38,16 +38,17 @@ class MainContainer extends Viewport {
         me.items = [{
             module: Toolbar,
             items :[{
-                module : Button,
-                handler: me.createDialog.bind(me),
-                iconCls: 'fa fa-window-maximize',
-                text   : 'Create Dialog',
+                module   : Button,
+                handler  : me.createDialog.bind(me),
+                iconCls  : 'fa fa-window-maximize',
+                reference: 'create-dialog-button',
+                text     : 'Create Dialog',
             }, {
                 module        : CheckBox,
                 checked       : true,
                 hideLabel     : true,
                 hideValueLabel: false,
-                listeners     : {change: me.onDragLimitChange, scope: me},
+                listeners     : {change: me.onConfigChange.bind(me, 'boundaryContainerId')},
                 style         : {marginLeft: '3em'},
                 valueLabelText: 'Limit Drag&Drop to the document.body'
             }, {
@@ -55,7 +56,16 @@ class MainContainer extends Viewport {
                 checked       : true,
                 hideLabel     : true,
                 hideValueLabel: false,
+                listeners     : {change: me.onConfigChange.bind(me, 'animated')},
                 style         : {marginLeft: '3em'},
+                valueLabelText: 'Animated'
+            }, {
+                module        : CheckBox,
+                checked       : true,
+                hideLabel     : true,
+                hideValueLabel: false,
+                listeners     : {change: me.onConfigChange.bind(me, 'modal')},
+                style         : {marginLeft: '1em'},
                 valueLabelText: 'Modal'
             }, '->', {
                 module : Button,
@@ -75,30 +85,31 @@ class MainContainer extends Viewport {
         data.component.disabled = true;
 
         me.dialog = Neo.create(DemoDialog, {
-            animateTargetId    : data.component.id,
-            appName            : me.appName,
-            boundaryContainerId: me.boundaryContainerId,
-            listeners          : {close: me.onWindowClose, scope: me},
-            modal              : me.down({ valueLabelText : 'Modal' }).checked
-        });
+            animated               : me.down({valueLabelText: 'Animated'}).checked,
+            appName                : me.appName,
+            boundaryContainerId    : me.boundaryContainerId,
+            listeners              : {close: me.onWindowClose, scope: me},
+            modal                  : me.down({valueLabelText: 'Modal'}).checked,
+            optionalAnimateTargetId: data.component.id,
+            title                  : 'Dialog 1'
+        })
     }
 
     /**
-     * @param {Object} data
+     * @param {String} config
+     * @param {Object} opts
      */
-    onDragLimitChange(data) {
-        this.dialog.boundaryContainerId = data.value ? 'document.body' : null
+    onConfigChange(config, opts) {
+        if (this.dialog) {
+            this.dialog[config] = opts.value ? 'document.body' : null
+        }
     }
 
     /**
      *
      */
     onWindowClose() {
-        let button = this.down({
-            text: 'Create Dialog'
-        });
-
-        button.disabled = false;
+        this.getReference('create-dialog-button').disabled = false
     }
 
     /**

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "neo.mjs",
-    "version": "6.7.4",
+    "version": "6.7.6",
     "description": "The webworkers driven UI framework",
     "type": "module",
     "repository": {
@@ -56,7 +56,7 @@
         "inquirer": "^9.2.11",
         "neo-jsdoc": "1.0.1",
         "neo-jsdoc-x": "1.0.5",
-        "postcss": "^8.4.30",
+        "postcss": "^8.4.31",
         "sass": "^1.68.0",
         "showdown": "^2.1.0",
         "webpack": "^5.88.2",

package/resources/scss/src/dialog/Base.scss

@@ -39,6 +39,12 @@
         transition-timing-function: ease-out;
     }
 
+    &.neo-dragproxy {
+        > * {
+            height: fit-content;
+        }
+    }
+
     &.neo-maximized {
         height   : 98% !important;
         left     : 1%  !important;

package/resources/scss/src/draggable/DragProxyComponent.scss

@@ -14,12 +14,12 @@
     }
 
     > * {
-        height   : 100%     !important;
-        left     : 0        !important;
-        position : relative !important;
-        opacity  : 1        !important;
-        top      : 0        !important;
-        transform: none     !important;
-        width    : 100%     !important;
+        height   : 100%;
+        left     : 0;
+        position : relative;
+        opacity  : 1;
+        top      : 0;
+        transform: none;
+        width    : 100%;
     }
-}
+}

package/resources/scss/src/tab/header/Toolbar.scss

@@ -1,6 +1,6 @@
 .neo-tab-header-toolbar {
     background-color: transparent;
-    height          : var(--tab-button-height-pressed);
+    flex            : 0 0 auto;
     padding         : 0;
 
     &.neo-dock-bottom {

package/src/DefaultConfig.mjs

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

package/src/Neo.mjs

@@ -371,17 +371,13 @@ Neo = globalThis.Neo = Object.assign({
      * @returns {Object} target
      */
     merge(target, source) {
-        if (Neo.typeOf(target) === 'Object') {
-            for (let key in source) {
-                if (Neo.typeOf(source[key]) === 'Object') {
-                    if (!target[key]) {
-                        target[key] = source[key];
-                    } else {
-                        Neo.merge(target[key], source[key]);
-                    }
-                } else {
-                    target[key] = source[key];
-                }
+        for (const key in source) {
+            const value = source[key];
+
+            if (Neo.typeOf(value) === 'Object') {
+                target[key] = Neo.merge(target[key], value);
+            } else {
+                target[key] = value;
             }
         }
 

package/src/calendar/view/MainContainer.mjs

@@ -445,6 +445,7 @@ class MainContainer extends Container {
             height   : me.sideBarWidth,
             listeners: {change: me.onDateSelectorChange, scope: me},
             parentId : me.id, // we need the parentId to access the model inside the ctor
+            value    : null,
 
             bind: {
                 locale              : data => data.locale,

package/src/component/Base.mjs

@@ -48,9 +48,10 @@ class Base extends CoreBase {
         ntype: 'component',
         /**
          * The default alignment specification to position this Component relative to some other
-         * Component, or Element or Rectangle.
+         * Component, or Element or Rectangle. Only applies in case floating = true.
+         * @member {Object|String} align_={edgeAlign:'t-b',constrainTo:'document.body'}
          */
-        align_ : {
+        align_: {
             edgeAlign   : 't-b',
             constrainTo : 'document.body'
         },
@@ -970,26 +971,30 @@ class Base extends CoreBase {
     }
 
     /**
-     * @param {Object|String} align
+     * Triggered before the align config gets changed.
+     * @param {Object|String} value
+     * @param {Object} oldValue
      * @returns {Object}
+     * @protected
      */
-    beforeSetAlign(align) {
+    beforeSetAlign(value, oldValue) {
         let me = this;
 
         // Just a simple 't-b'
-        if (typeof align === 'string') {
-            align = {
-                edgeAlign: align
-            };
+        if (typeof value === 'string') {
+            value = {
+                edgeAlign: value
+            }
         }
         // merge the incoming alignment specification into the configured default
-        return me.merge(me.merge({}, me.constructor.config.align), align);
+        return Neo.merge(Neo.merge({}, me.constructor.config.align), value)
     }
 
     /**
      * Triggered before the cls config gets changed.
      * @param {String[]} value
      * @param {String[]} oldValue
+     * @returns {String[]}
      * @protected
      */
     beforeSetCls(value, oldValue) {
@@ -1018,8 +1023,9 @@ class Base extends CoreBase {
 
     /**
      * Triggered before the domListeners config gets changed.
-     * @param {Object} value
-     * @param {Object} oldValue
+     * @param {Object|Object[]} value
+     * @param {Object[]} oldValue
+     * @returns {Object[]}
      * @protected
      */
     beforeSetDomListeners(value, oldValue) {
@@ -1034,6 +1040,7 @@ class Base extends CoreBase {
      * Triggered before the hideMode config gets changed
      * @param {String} value
      * @param {String} oldValue
+     * @returns {String}
      * @protected
      */
      beforeSetHideMode(value, oldValue) {
@@ -1045,6 +1052,7 @@ class Base extends CoreBase {
      * Creates a KeyNavigation instance if needed.
      * @param {Object} value
      * @param {Object} oldValue
+     * @returns {Neo.util.KeyNavigation}
      * @protected
      */
     beforeSetKeys(value, oldValue) {
@@ -1088,6 +1096,7 @@ class Base extends CoreBase {
      * Triggered before the plugins config gets changed.
      * @param {Object[]} value
      * @param {Object[]} oldValue
+     * @returns {Neo.plugin.Base[]}
      * @protected
      */
     beforeSetPlugins(value, oldValue) {
@@ -1129,7 +1138,7 @@ class Base extends CoreBase {
 
         if (typeof value === 'object') {
             // merge the incoming style specification into the configured default
-            value = me.merge(me.merge({}, me.constructor.config.style), value)
+            value = Neo.merge(Neo.merge({}, me.constructor.config.style), value)
         }
 
         return value
@@ -2006,7 +2015,7 @@ class Base extends CoreBase {
      * hideMode: 'removeDom'  uses vdom removeDom.
      * hideMode: 'visibility' uses css visibility.
      */
-    show(align) {
+    show() {
         const me = this;
 
         if (me.hideMode !== 'visibility') {

package/src/component/DateSelector.mjs

@@ -346,16 +346,18 @@ class DateSelector extends Component {
     afterSetValue(value, oldValue) {
         let me = this;
 
-        if (!me.isUpdating) {
-            me.currentDate = new Date(`${value}T00:00:00.000Z`);
+        if (value) {
+            if (!me.isUpdating) {
+                me.currentDate = new Date(`${value}T00:00:00.000Z`);
 
-            me.fire('change', {
-                component: me,
-                oldValue,
-                value
-            })
-        } else {
-            me.cacheUpdate()
+                me.fire('change', {
+                    component: me,
+                    oldValue,
+                    value
+                })
+            } else {
+                me.cacheUpdate()
+            }
         }
     }
 

package/src/core/Base.mjs

@@ -364,26 +364,6 @@ class Base {
         }
     }
 
-    /**
-     * Merges nested objects
-     * @param {Object} dest={}
-     * @param {Object} src
-     * @returns {Object}
-     */
-    merge(dest={}, src) {
-        for (const key in src) {
-            const value = src[key];
-
-            if (typeof value === 'object') {
-                dest[key] = this.merge(dest[key], value);
-            }
-            else {
-                dest[key] = value;
-            }
-        }
-        return dest;
-    }
-
     /**
      * Override this method to change the order configs are applied to this instance.
      * @param {Object} config

package/src/dialog/Base.mjs

@@ -136,11 +136,21 @@ class Base extends Panel {
     construct(config) {
         super.construct(config);
 
-        let me = this;
+        let me    = this,
+            style = me.style;
 
         me.createHeader();
 
-        me.autoShow && me.show()
+        if (!me.animateTargetId) {
+            Neo.assignDefaults(style, {
+                left     : '50%',
+                top      : '50%',
+                transform: 'translate(-50%, -50%)',
+                width    : '50%'
+            });
+
+            me.style = style
+        }
     }
 
     /**
@@ -224,7 +234,7 @@ class Base extends Panel {
             cls = me.vdom.cls; // todo: using wrapperCls
 
         NeoArray.toggle(cls, 'neo-maximized', value);
-        me.update();
+        me.update()
     }
 
     /**
@@ -234,16 +244,12 @@ class Base extends Panel {
      * @protected
      */
     afterSetModal(value, oldValue) {
-        const
-            me      = this,
-            { cls } = me.vdom;
+        let me = this;
 
-        NeoArray.toggle(cls, 'neo-modal', value);
+        NeoArray.toggle(me.vdom.cls, 'neo-modal', value);
         me.update();
 
-        if (me.rendered) {
-            me.syncModalMask()
-        }
+        me.rendered && me.syncModalMask()
     }
 
     /**
@@ -322,10 +328,12 @@ class Base extends Panel {
 
         me.closeOrHide(false);
 
-        await Neo.applyDeltas(appName, [
-            {id, cls: {remove: ['animated-hiding-showing']}},
-            {id, action: 'removeNode'}
-        ])
+        if (me.closeAction === 'hide') {
+            await Neo.applyDeltas(appName, [
+                {id, cls: {remove: ['animated-hiding-showing']}},
+                {id, action: 'removeNode'}
+            ])
+        }
     }
 
     /**
@@ -360,7 +368,7 @@ class Base extends Panel {
                 add: ['animated-hiding-showing']
             },
             style: {
-                height   : style?.height    || '',
+                height   : style?.height    || null, // height will point to the animation origin, so we need a reset
                 left     : style?.left      || '50%',
                 top      : style?.top       || '50%',
                 transform: style?.transform || 'translate(-50%, -50%)',
@@ -404,13 +412,20 @@ class Base extends Panel {
      * @param {Boolean} animate=!!this.animateTargetId
      */
     async closeOrHide(animate=!!this.animateTargetId) {
-        const
-            me     = this,
-            { id } = me;
+        let me = this;
 
         me[me.closeAction](animate);
         await me.timeout(30);
-        me.syncModalMask(id)
+        me.syncModalMask(me.id)
+    }
+
+    /**
+     * Action when clicking the X button inside the header toolbar.
+     * @param {Object} data
+     * @protected
+     */
+    closeOrHideAction(data) {
+        this.closeOrHide()
     }
 
     /**
@@ -447,7 +462,7 @@ class Base extends Panel {
         let me = this,
 
         map = {
-            close   : me.closeOrHide,
+            close   : me.closeOrHideAction,
             maximize: me.maximize
         };
 
@@ -500,6 +515,23 @@ class Base extends Panel {
         me.syncModalMask()
     }
 
+    /**
+     *
+     */
+    init() {
+        super.init();
+
+        let me = this;
+
+        if (me.animateTargetId) {
+            me.autoShow && me.show()
+        } else {
+            me.timeout(100).then(() => {
+                me.syncModalMask()
+            })
+        }
+    }
+
     /**
      * @param {Object} [data]
      */
@@ -642,7 +674,7 @@ class Base extends Panel {
      */
     syncModalMask(id=this.id) {
         // This should sync the visibility and position of the modal mask element.
-        Neo.main.DomAccess.syncModalMask({ id, modal: this.modal });
+        Neo.main.DomAccess.syncModalMask({ id, modal: this.modal })
     }
 }
 

package/src/main/DomAccess.mjs

@@ -390,6 +390,10 @@ class DomAccess extends Base {
         return returnData
     }
 
+    /**
+     * @param {Object|String} data
+     * @returns {Neo.util.Rectangle}
+     */
     getClippedRect(data) {
         let node            = this.getElement(typeof data === 'object' ? data.id : data),
             { defaultView } = node.ownerDocument,
@@ -404,21 +408,6 @@ class DomAccess extends Base {
         return rect
     }
 
-    onDocumentMutation(mutations) {
-        const me = this;
-
-        // If the mutations are purely align subjects being added or removed, take no action.
-        if (!mutations.every(({ type, addedNodes, removedNodes }) => {
-            if (type === 'childList') {
-                const nodes = [...Array.from(addedNodes), ...Array.from(removedNodes)];
-
-                return nodes.every(a => me.isAlignSubject(a))
-            }
-        })) {
-            me.syncAligns();
-        }
-    }
-
     /**
      * @param {String|HTMLElement} nodeId
      * @returns {HTMLElement}
@@ -537,6 +526,24 @@ class DomAccess extends Base {
         return value;
     }
 
+    /**
+     * @param {Array} mutations
+     */
+    onDocumentMutation(mutations) {
+        const me = this;
+
+        // If the mutations are purely align subjects being added or removed, take no action.
+        if (!mutations.every(({ type, addedNodes, removedNodes }) => {
+            if (type === 'childList') {
+                const nodes = [...Array.from(addedNodes), ...Array.from(removedNodes)];
+
+                return nodes.every(a => me.isAlignSubject(a))
+            }
+        })) {
+            me.syncAligns();
+        }
+    }
+
     /**
      *
      */
@@ -548,6 +555,7 @@ class DomAccess extends Base {
 
     /**
      * @param {Object} data
+     * @param {String} data.id
      * @param {String} data.nodeId
      */
     onGetOffscreenCanvas(data) {
@@ -627,7 +635,7 @@ class DomAccess extends Base {
             data,
             replyId: data.id,
             success: true
-        });
+        })
     }
 
     /**
@@ -636,7 +644,7 @@ class DomAccess extends Base {
      */
     read(data) {
         if (typeof data === 'function') {
-            data();
+            data()
         }
     }
 
@@ -836,6 +844,11 @@ class DomAccess extends Base {
         })
     }
 
+    /**
+     * @param {Object} data
+     * @param {String} data.id
+     * @param {Boolean} data.modal
+     */
     syncModalMask({ id, modal }) {
         const el = id && this.getElement(id);
 
@@ -843,7 +856,7 @@ class DomAccess extends Base {
         if (el && modal && el.ownerDocument.contains(el) && el.ownerDocument.defaultView.getComputedStyle(el).getPropertyValue('display') !== 'none') {
             document.body.insertBefore(this.modalMask, el);
         }
-        // Otherwise, the mask needs to be blow the next topmost modal dialog if possible, or hidden
+        // Otherwise, the mask needs to be below the next topmost modal dialog if possible, or hidden
         else {
             const
                 modals       = document.querySelectorAll('.neo-modal'),
@@ -851,9 +864,8 @@ class DomAccess extends Base {
 
             // Move the mask under the next topmost modal now modal "id" is gone.
             if (topmostModal) {
-                this.syncModalMask({ id : topmostModal.id, modal : true })
-            }
-            else {
+                this.syncModalMask({ id: topmostModal.id, modal: true })
+            } else {
                 this._modalMask?.remove()
             }
         }

package/src/worker/App.mjs

@@ -200,8 +200,8 @@ class App extends Base {
         }
 
         return import(
-            /* webpackInclude: /[\\\/]app.mjs$/ */
-            /* webpackExclude: /[\\\/]node_modules/ */
+            /* webpackInclude: /(?:\/|\\)app.mjs$/ */
+            /* webpackExclude: /(?:\/|\\)node_modules/ */
             /* webpackMode: "lazy" */
             `../../${path}.mjs`
         )