iobroker.mywebui 1.37.85 → 1.37.87

package/io-package.json

@@ -1,7 +1,7 @@
 {
   "common": {
     "name": "mywebui",
-    "version": "1.37.85",
+    "version": "1.37.87",
     "titleLang": {
       "en": "mywebui",
       "de": "mywebui",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "iobroker.mywebui",
-  "version": "1.37.85",
+  "version": "1.37.87",
   "description": "ioBroker mywebui - Custom edited mywebui by gokturk413",
   "type": "module",
   "main": "dist/backend/main.js",

package/www/dist/frontend/config/IobrokerWebuiScreenEditor.js

@@ -22,6 +22,7 @@ export class IobrokerWebuiScreenEditor extends BaseCustomWebComponentConstructor
     _styleBindings;
     _settingsChanged;
     _designerScriptObject = null;
+    _designerFacade = null;
     async initialize(name, type, html, style, script, settings, properties, serviceContainer) {
         if (name[0] == '/')
             name = name.substring(1);
@@ -650,11 +651,11 @@ export class IobrokerWebuiScreenEditor extends BaseCustomWebComponentConstructor
     dispose() {
         if (this._designerScriptObject?.disconnectedCallback) {
             try {
-                const rootEl = this.documentContainer.designerView.designerCanvas.rootDesignItem?.element;
-                this._designerScriptObject.disconnectedCallback(rootEl, rootEl?.shadowRoot);
+                this._designerScriptObject.disconnectedCallback(this._designerFacade, this._designerFacade?.shadowRoot);
             } catch (err) {}
         }
         this._designerScriptObject = null;
+        this._designerFacade = null;
         this.removeBindings();
         this.documentContainer.dispose();
         this._configChangedListener?.dispose();
@@ -673,15 +674,48 @@ export class IobrokerWebuiScreenEditor extends BaseCustomWebComponentConstructor
         const shadowRoot = rootEl?.shadowRoot;
         if (!rootEl || !shadowRoot) return;
         try {
-            const url = URL.createObjectURL(new Blob([scriptCode], { type: 'application/javascript' }));
-            let scriptObj = await import(url);
+            // Proxy wraps rootEl so ALL native HTMLElement methods (attachInternals, querySelector,
+            // closest, matches, getBoundingClientRect, etc.) work automatically.
+            // Custom WebUI API (_getDomElement, _assignEvent, shadowRoot) is injected via the handler.
+            const overrides = {
+                shadowRoot,
+                _getDomElement(id) {
+                    return shadowRoot.getElementById(id) ?? shadowRoot.querySelector(`[name="${id}"]`);
+                },
+                _assignEvent(id, evtName, handler) {
+                    const el = overrides._getDomElement(id);
+                    if (el) el.addEventListener(evtName, handler);
+                },
+            };
+            const facade = new Proxy(rootEl, {
+                get(target, prop, receiver) {
+                    if (prop in overrides) {
+                        const v = overrides[prop];
+                        return typeof v === 'function' ? v.bind(overrides) : v;
+                    }
+                    const v = target[prop];
+                    return typeof v === 'function' ? v.bind(target) : v;
+                },
+                set(target, prop, value) {
+                    if (prop in overrides) { overrides[prop] = value; return true; }
+                    target[prop] = value;
+                    return true;
+                },
+            });
+            this._designerFacade = facade;
+            // Use scriptSystem.assignAllScripts — handles @event attrs, init(), applyBindings, etc.
+            let scriptObj = await window.appShell.scriptSystem.assignAllScripts(
+                'designer-control - ' + this._name,
+                scriptCode,
+                shadowRoot,
+                facade,
+                iobrokerHandler
+            );
             if (scriptObj?.default && !scriptObj?.connectedCallback)
                 scriptObj = scriptObj.default;
             this._designerScriptObject = scriptObj;
-            if (scriptObj?.init)
-                scriptObj.init(rootEl, shadowRoot);
             if (scriptObj?.connectedCallback)
-                scriptObj.connectedCallback(rootEl, shadowRoot);
+                scriptObj.connectedCallback(facade, shadowRoot);
         } catch (err) {
             console.warn('Designer script execution failed:', err);
         }