@absmartly/sdk-plugins 1.2.2 → 1.3.2

package/es/core/DOMManipulatorLite.js

@@ -34,7 +34,7 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
     }
     return to.concat(ar || Array.prototype.slice.call(from));
 };
-import { logDebug, logChangeApplication } from '../utils/debug';
+import { logDebug, logChangeApplication, logProductionWarn } from '../utils/debug';
 import { PendingChangeManager } from './PendingChangeManager';
 var DOMManipulatorLite = /** @class */ (function () {
     function DOMManipulatorLite(debug, plugin) {
@@ -50,9 +50,120 @@ var DOMManipulatorLite = /** @class */ (function () {
             return _this.applyChange(change, experimentName);
         }, debug);
     }
+    /**
+     * Execute a user-authored JavaScript DOM change against an element.
+     *
+     * Strategy:
+     *   1. Primary path uses `new Function(...)`. On pages whose CSP includes
+     *      `unsafe-eval` this succeeds and keeps the fast debug-friendly path
+     *      with a `//# sourceURL` tag.
+     *   2. When CSP blocks dynamic code evaluation the fallback injects a
+     *      one-shot `<script>` element that calls an anonymous IIFE with the
+     *      target element bound through a temporary `window` slot. This path
+     *      works on pages that allow inline scripts but not eval.
+     *   3. If both paths fail, the error is logged unconditionally at
+     *      `console.error` and surfaced via a `CustomEvent('absmartly:js-error', ...)`
+     *      on `document` so hosting code (browser extension preview, telemetry,
+     *      etc.) can distinguish CSP failures from runtime errors.
+     *
+     * Returns true when the code executed successfully through either path.
+     */
+    DOMManipulatorLite.prototype.executeUserJavaScript = function (code, element, experimentName, selector) {
+        var sourceTag = "absmartly-experiment-".concat(experimentName || 'unknown', ".js");
+        var debugPrelude = "var _debug = (typeof _debug !== 'undefined' ? _debug : { debugLog: console.log.bind(console), debugWarn: console.warn.bind(console), debugError: console.error.bind(console) });\n";
+        try {
+            var fn = new Function('element', debugPrelude + code + "\n//# sourceURL=".concat(sourceTag));
+            fn(element);
+            return true;
+        }
+        catch (evalError) {
+            var evalMessage = evalError instanceof Error ? evalError.message : String(evalError);
+            var cspBlockedEval = evalError instanceof EvalError ||
+                /unsafe-eval|Content Security Policy|CSP|refused to evaluate/i.test(evalMessage);
+            if (!cspBlockedEval) {
+                // Runtime error in user code — don't try the fallback, surface immediately.
+                this.reportJsExecutionFailure({
+                    experimentName: experimentName,
+                    selector: selector,
+                    reason: 'runtime',
+                    error: evalMessage,
+                    stack: evalError instanceof Error ? evalError.stack : undefined,
+                });
+                return false;
+            }
+            // Fallback: inline <script> tag that binds the element through a temporary window slot.
+            // When CSP blocks inline scripts, appendChild does NOT throw — Chrome silently refuses
+            // execution and logs a console violation. We detect that by flipping a sentinel inside
+            // the injected script and checking it after append.
+            try {
+                var slotId = "__absmartly_js_target_".concat(Date.now(), "_").concat(Math.floor(Math.random() * 1e9));
+                var sentinelId = "".concat(slotId, "_ran");
+                window[slotId] = element;
+                window[sentinelId] = false;
+                var script = document.createElement('script');
+                script.textContent =
+                    "(function(element){".concat(debugPrelude).concat(code, "\n})(window['").concat(slotId, "']);\n") +
+                        "window['".concat(sentinelId, "'] = true;\n") +
+                        "try { delete window['".concat(slotId, "']; } catch(_e) { window['").concat(slotId, "'] = undefined; }\n") +
+                        "//# sourceURL=".concat(sourceTag);
+                var parent_1 = document.head || document.documentElement;
+                parent_1.appendChild(script);
+                script.remove();
+                var ran = window[sentinelId] === true;
+                try {
+                    delete window[sentinelId];
+                }
+                catch (_a) {
+                    window[sentinelId] = undefined;
+                }
+                if (!ran) {
+                    this.reportJsExecutionFailure({
+                        experimentName: experimentName,
+                        selector: selector,
+                        reason: 'csp',
+                        error: "CSP blocked dynamic script execution. eval(): ".concat(evalMessage, "; inline <script> did not execute (likely blocked by script-src without 'unsafe-inline')."),
+                    });
+                    return false;
+                }
+                return true;
+            }
+            catch (scriptError) {
+                var scriptMessage = scriptError instanceof Error ? scriptError.message : String(scriptError);
+                this.reportJsExecutionFailure({
+                    experimentName: experimentName,
+                    selector: selector,
+                    reason: 'csp',
+                    error: "CSP blocked dynamic script execution. eval(): ".concat(evalMessage, "; inline <script>: ").concat(scriptMessage),
+                    stack: scriptError instanceof Error ? scriptError.stack : undefined,
+                });
+                return false;
+            }
+        }
+    };
+    /**
+     * Report a JavaScript execution failure to listeners, without relying on this.debug.
+     * Always logs at `console.error` and dispatches a `CustomEvent` on `document`.
+     */
+    DOMManipulatorLite.prototype.reportJsExecutionFailure = function (detail) {
+        try {
+            logProductionWarn("[ABsmartly] JavaScript DOM change failed (".concat(detail.reason, ") for \"").concat(detail.experimentName, "\" selector \"").concat(detail.selector, "\": ").concat(detail.error), detail.stack ? { stack: detail.stack } : undefined);
+        }
+        catch (_a) {
+            // console unavailable; ignore
+        }
+        try {
+            if (typeof document !== 'undefined' && typeof CustomEvent === 'function') {
+                document.dispatchEvent(new CustomEvent('absmartly:js-error', { detail: detail }));
+            }
+        }
+        catch (_b) {
+            // environments without CustomEvent support
+        }
+    };
     DOMManipulatorLite.prototype.applyChange = function (change, experimentName) {
+        var e_1, _a, e_2, _b, e_3, _c;
         var _this = this;
-        var _a, _b, _c, _d;
+        var _d, _e, _f, _g, _h, _j, _k, _l;
         if (!change.enabled && change.enabled !== undefined) {
             logDebug("Skipping disabled change for experiment: ".concat(experimentName), {
                 experimentName: experimentName,
@@ -64,7 +175,7 @@ var DOMManipulatorLite = /** @class */ (function () {
         var isReapplying = !!this.plugin.reapplyingElements &&
             Array.from(this.plugin.reapplyingElements).length > 0;
         // Get user's variant for this experiment
-        var userVariant = (_b = (_a = this.plugin.config) === null || _a === void 0 ? void 0 : _a.context) === null || _b === void 0 ? void 0 : _b.peek(experimentName);
+        var userVariant = (_e = (_d = this.plugin.config) === null || _d === void 0 ? void 0 : _d.context) === null || _e === void 0 ? void 0 : _e.peek(experimentName);
         if (this.debug) {
             logDebug("[DOM-APPLY] [".concat(experimentName, "] ").concat(isReapplying ? 'RE-APPLYING' : 'APPLYING', " change"), {
                 experimentName: experimentName,
@@ -72,7 +183,7 @@ var DOMManipulatorLite = /** @class */ (function () {
                 selector: change.selector,
                 type: change.type,
                 timestamp: Date.now(),
-                callStack: (_c = new Error().stack) === null || _c === void 0 ? void 0 : _c.split('\n').slice(2, 4).join('\n'),
+                callStack: (_f = new Error().stack) === null || _f === void 0 ? void 0 : _f.split('\n').slice(2, 4).join('\n'),
             });
         }
         try {
@@ -92,10 +203,10 @@ var DOMManipulatorLite = /** @class */ (function () {
                 return false;
             }
             var elements = document.querySelectorAll(change.selector);
-            var appliedElements_1 = [];
+            var appliedElements = [];
             if (elements.length === 0) {
                 // Add to pending if waitForElement is explicitly true OR if SPA mode is enabled
-                var shouldWaitForElement = change.waitForElement || ((_d = this.plugin.config) === null || _d === void 0 ? void 0 : _d.spa);
+                var shouldWaitForElement = change.waitForElement || ((_g = this.plugin.config) === null || _g === void 0 ? void 0 : _g.spa);
                 if (shouldWaitForElement) {
                     if (this.debug) {
                         logDebug("[ABsmartly] Element not found, adding to pending: ".concat(change.selector));
@@ -117,45 +228,65 @@ var DOMManipulatorLite = /** @class */ (function () {
                 });
                 return false;
             }
-            elements.forEach(function (element) {
-                var _a, _b, _c, _d;
-                if (_this.debug && change.type === 'style') {
-                    var oldStyles_1 = {};
-                    if (change.value && typeof change.value === 'object') {
-                        Object.keys(change.value).forEach(function (prop) {
-                            var cssProp = prop.replace(/([A-Z])/g, '-$1').toLowerCase();
-                            oldStyles_1[cssProp] = element.style.getPropertyValue(cssProp);
+            try {
+                for (var elements_1 = __values(elements), elements_1_1 = elements_1.next(); !elements_1_1.done; elements_1_1 = elements_1.next()) {
+                    var element = elements_1_1.value;
+                    if (this.debug && change.type === 'style') {
+                        var oldStyles = {};
+                        if (change.value && typeof change.value === 'object') {
+                            try {
+                                for (var _m = (e_2 = void 0, __values(Object.keys(change.value))), _o = _m.next(); !_o.done; _o = _m.next()) {
+                                    var prop = _o.value;
+                                    var cssProp = prop.replace(/([A-Z])/g, '-$1').toLowerCase();
+                                    oldStyles[cssProp] = element.style.getPropertyValue(cssProp);
+                                }
+                            }
+                            catch (e_2_1) { e_2 = { error: e_2_1 }; }
+                            finally {
+                                try {
+                                    if (_o && !_o.done && (_b = _m.return)) _b.call(_m);
+                                }
+                                finally { if (e_2) throw e_2.error; }
+                            }
+                        }
+                        logDebug("[DOM-BEFORE-APPLY] Element styles before change", {
+                            experimentName: experimentName,
+                            selector: change.selector,
+                            element: element.tagName,
+                            oldStyles: oldStyles,
+                            newStyles: change.value,
                         });
                     }
-                    logDebug("[DOM-BEFORE-APPLY] Element styles before change", {
-                        experimentName: experimentName,
-                        selector: change.selector,
-                        element: element.tagName,
-                        oldStyles: oldStyles_1,
-                        newStyles: change.value,
-                    });
-                }
-                _this.applyChangeToElement(element, change);
-                if (_this.debug && change.type === 'style') {
-                    var appliedStyles_1 = {};
-                    if (change.value && typeof change.value === 'object') {
-                        Object.keys(change.value).forEach(function (prop) {
-                            var cssProp = prop.replace(/([A-Z])/g, '-$1').toLowerCase();
-                            appliedStyles_1[cssProp] = element.style.getPropertyValue(cssProp);
+                    this.applyChangeToElement(element, change);
+                    if (this.debug && change.type === 'style') {
+                        var appliedStyles = {};
+                        if (change.value && typeof change.value === 'object') {
+                            try {
+                                for (var _p = (e_3 = void 0, __values(Object.keys(change.value))), _q = _p.next(); !_q.done; _q = _p.next()) {
+                                    var prop = _q.value;
+                                    var cssProp = prop.replace(/([A-Z])/g, '-$1').toLowerCase();
+                                    appliedStyles[cssProp] = element.style.getPropertyValue(cssProp);
+                                }
+                            }
+                            catch (e_3_1) { e_3 = { error: e_3_1 }; }
+                            finally {
+                                try {
+                                    if (_q && !_q.done && (_c = _p.return)) _c.call(_p);
+                                }
+                                finally { if (e_3) throw e_3.error; }
+                            }
+                        }
+                        logDebug("[DOM-AFTER-APPLY] Element styles after change", {
+                            experimentName: experimentName,
+                            selector: change.selector,
+                            element: element.tagName,
+                            appliedStyles: appliedStyles,
                         });
                     }
-                    logDebug("[DOM-AFTER-APPLY] Element styles after change", {
-                        experimentName: experimentName,
-                        selector: change.selector,
-                        element: element.tagName,
-                        appliedStyles: appliedStyles_1,
-                    });
-                }
-                if (change.type === 'javascript') {
-                    if (change.value) {
-                        var userVariant_1 = (_b = (_a = _this.plugin.config) === null || _a === void 0 ? void 0 : _a.context) === null || _b === void 0 ? void 0 : _b.peek(experimentName);
-                        try {
-                            if (_this.debug) {
+                    if (change.type === 'javascript') {
+                        if (change.value) {
+                            var userVariant_1 = (_j = (_h = this.plugin.config) === null || _h === void 0 ? void 0 : _h.context) === null || _j === void 0 ? void 0 : _j.peek(experimentName);
+                            if (this.debug) {
                                 logDebug("[JAVASCRIPT] [".concat(experimentName, "] Executing JavaScript change"), {
                                     experimentName: experimentName,
                                     userVariant: userVariant_1,
@@ -165,93 +296,85 @@ var DOMManipulatorLite = /** @class */ (function () {
                                 });
                             }
                             var codeString = String(change.value);
-                            logDebug("[JAVASCRIPT] [".concat(experimentName, "] Creating function with code: ").concat(codeString));
-                            var fn = new Function('element', codeString);
-                            logDebug("[JAVASCRIPT] [".concat(experimentName, "] Function created, now executing..."));
-                            fn(element);
-                            logDebug("[JAVASCRIPT] [".concat(experimentName, "] Function executed, element is:"), {
-                                elementTag: element.tagName,
-                                elementClass: element.className,
-                                elementId: element.id,
-                            });
-                            appliedElements_1.push(element);
-                            if (_this.debug) {
-                                logDebug("[JAVASCRIPT] [".concat(experimentName, "] \u2713 JavaScript executed successfully"), {
-                                    experimentName: experimentName,
-                                    userVariant: userVariant_1,
-                                    selector: change.selector,
-                                    element: element.tagName,
-                                    code: codeString,
-                                });
+                            var executed = this.executeUserJavaScript(codeString, element, experimentName, change.selector);
+                            if (executed) {
+                                appliedElements.push(element);
+                                if (this.debug) {
+                                    logDebug("[JAVASCRIPT] [".concat(experimentName, "] \u2713 JavaScript executed successfully"), {
+                                        experimentName: experimentName,
+                                        userVariant: userVariant_1,
+                                        selector: change.selector,
+                                        element: element.tagName,
+                                        code: codeString,
+                                    });
+                                }
                             }
                         }
-                        catch (error) {
-                            logDebug("[JAVASCRIPT] [".concat(experimentName, "] \u2717 JavaScript execution error:"), {
+                        else {
+                            logDebug("[JAVASCRIPT] [".concat(experimentName, "] \u2717 No JavaScript code provided in change.value"), {
                                 experimentName: experimentName,
-                                userVariant: userVariant_1,
                                 selector: change.selector,
-                                element: element.tagName,
-                                code: String(change.value),
-                                error: error instanceof Error ? error.message : String(error),
-                                stack: error instanceof Error ? error.stack : undefined,
                             });
                         }
                     }
+                    else if (change.type === 'move') {
+                        var targetSelector = change.targetSelector ||
+                            (change.value && typeof change.value === 'object'
+                                ? change.value.targetSelector
+                                : null);
+                        var position = change.position ||
+                            (change.value && typeof change.value === 'object'
+                                ? change.value.position
+                                : null);
+                        if (targetSelector) {
+                            var target = document.querySelector(targetSelector);
+                            if (target) {
+                                this.moveElement(element, target, position);
+                                appliedElements.push(element);
+                            }
+                            else if (this.debug) {
+                                logDebug("[ABsmartly] Move target not found: ".concat(targetSelector));
+                            }
+                        }
+                    }
                     else {
-                        logDebug("[JAVASCRIPT] [".concat(experimentName, "] \u2717 No JavaScript code provided in change.value"), {
+                        appliedElements.push(element);
+                    }
+                    // Watch element for persistence or SPA hydration recovery
+                    var shouldWatch = (change.type === 'style' && change.persistStyle) ||
+                        (change.type === 'attribute' && change.persistAttribute) ||
+                        (change.type === 'javascript' && change.persistScript === true) ||
+                        ((_k = this.plugin.config) === null || _k === void 0 ? void 0 : _k.spa); // SPA mode watches ALL types for hydration recovery
+                    if (shouldWatch) {
+                        this.plugin.watchElement(element, experimentName, change);
+                    }
+                    else if (this.debug) {
+                        logDebug("[WATCH-SKIP] NOT watching element - no persist flag and SPA disabled", {
                             experimentName: experimentName,
                             selector: change.selector,
+                            element: element.tagName,
+                            changeType: change.type,
+                            spaMode: (_l = this.plugin.config) === null || _l === void 0 ? void 0 : _l.spa,
                         });
                     }
                 }
-                else if (change.type === 'move') {
-                    var targetSelector = change.targetSelector ||
-                        (change.value && typeof change.value === 'object'
-                            ? change.value.targetSelector
-                            : null);
-                    var position = change.position ||
-                        (change.value && typeof change.value === 'object'
-                            ? change.value.position
-                            : null);
-                    if (targetSelector) {
-                        var target = document.querySelector(targetSelector);
-                        if (target) {
-                            _this.moveElement(element, target, position);
-                            appliedElements_1.push(element);
-                        }
-                        else if (_this.debug) {
-                            logDebug("[ABsmartly] Move target not found: ".concat(targetSelector));
-                        }
-                    }
-                }
-                else {
-                    appliedElements_1.push(element);
-                }
-                // Watch element for React hydration recovery (ALL types) OR style persistence (styles only)
-                var shouldWatch = (change.type === 'style' && change.persistStyle) || // Explicit style persistence
-                    ((_c = _this.plugin.config) === null || _c === void 0 ? void 0 : _c.spa); // SPA mode watches ALL types for hydration recovery
-                if (shouldWatch) {
-                    _this.plugin.watchElement(element, experimentName, change);
-                }
-                else if (change.type === 'style' && _this.debug) {
-                    logDebug("[WATCH-SKIP] NOT watching element - persistStyle and SPA both disabled", {
-                        experimentName: experimentName,
-                        selector: change.selector,
-                        element: element.tagName,
-                        persistStyle: change.persistStyle,
-                        spaMode: (_d = _this.plugin.config) === null || _d === void 0 ? void 0 : _d.spa,
-                    });
+            }
+            catch (e_1_1) { e_1 = { error: e_1_1 }; }
+            finally {
+                try {
+                    if (elements_1_1 && !elements_1_1.done && (_a = elements_1.return)) _a.call(elements_1);
                 }
-            });
-            if (appliedElements_1.length > 0) {
+                finally { if (e_1) throw e_1.error; }
+            }
+            if (appliedElements.length > 0) {
                 this.trackAppliedChange(experimentName, change);
                 if (change.waitForElement) {
                     this.pendingManager.removePending(change.selector, experimentName, change.observerRoot);
                 }
                 // Throttle logs during style persistence reapplies (animations can trigger many times per second)
-                var isReapplying_1 = appliedElements_1.some(function (el) { var _a; return (_a = _this.plugin.reapplyingElements) === null || _a === void 0 ? void 0 : _a.has(el); });
+                var isReapplying_1 = appliedElements.some(function (el) { var _a; return (_a = _this.plugin.reapplyingElements) === null || _a === void 0 ? void 0 : _a.has(el); });
                 if (!isReapplying_1) {
-                    logChangeApplication(experimentName, change.selector, change.type, appliedElements_1.length, true);
+                    logChangeApplication(experimentName, change.selector, change.type, appliedElements.length, true);
                 }
                 return true;
             }
@@ -300,7 +423,7 @@ var DOMManipulatorLite = /** @class */ (function () {
         }
     };
     DOMManipulatorLite.prototype.createElement = function (change, _experimentName) {
-        var e_1, _a;
+        var e_4, _a;
         if (!change.element || !change.targetSelector) {
             return null;
         }
@@ -324,12 +447,12 @@ var DOMManipulatorLite = /** @class */ (function () {
                 this.moveElement(child, target, change.position);
             }
         }
-        catch (e_1_1) { e_1 = { error: e_1_1 }; }
+        catch (e_4_1) { e_4 = { error: e_4_1 }; }
         finally {
             try {
                 if (children_1_1 && !children_1_1.done && (_a = children_1.return)) _a.call(children_1);
             }
-            finally { if (e_1) throw e_1.error; }
+            finally { if (e_4) throw e_4.error; }
         }
         // Return the first element for compatibility
         return children[0];
@@ -369,7 +492,7 @@ var DOMManipulatorLite = /** @class */ (function () {
         }
     };
     DOMManipulatorLite.prototype.applyChangeToElement = function (element, change) {
-        var _a, _b;
+        var e_5, _a, _b, _c, e_6, _d;
         switch (change.type) {
             case 'text':
                 if (change.value !== undefined) {
@@ -383,33 +506,51 @@ var DOMManipulatorLite = /** @class */ (function () {
                 break;
             case 'style':
                 if (change.value && typeof change.value === 'object') {
-                    Object.entries(change.value).forEach(function (_a) {
-                        var _b = __read(_a, 2), property = _b[0], value = _b[1];
-                        var cssProperty = property.replace(/([A-Z])/g, '-$1').toLowerCase();
-                        var priority = change.important === true ? 'important' : '';
-                        element.style.setProperty(cssProperty, String(value), priority);
-                    });
+                    try {
+                        for (var _e = __values(Object.entries(change.value)), _f = _e.next(); !_f.done; _f = _e.next()) {
+                            var _g = __read(_f.value, 2), property = _g[0], value = _g[1];
+                            var cssProperty = property.replace(/([A-Z])/g, '-$1').toLowerCase();
+                            var priority = change.important === true ? 'important' : '';
+                            element.style.setProperty(cssProperty, String(value), priority);
+                        }
+                    }
+                    catch (e_5_1) { e_5 = { error: e_5_1 }; }
+                    finally {
+                        try {
+                            if (_f && !_f.done && (_a = _e.return)) _a.call(_e);
+                        }
+                        finally { if (e_5) throw e_5.error; }
+                    }
                 }
                 break;
             case 'class':
                 if (change.add && Array.isArray(change.add)) {
-                    (_a = element.classList).add.apply(_a, __spreadArray([], __read(change.add), false));
+                    (_b = element.classList).add.apply(_b, __spreadArray([], __read(change.add), false));
                 }
                 if (change.remove && Array.isArray(change.remove)) {
-                    (_b = element.classList).remove.apply(_b, __spreadArray([], __read(change.remove), false));
+                    (_c = element.classList).remove.apply(_c, __spreadArray([], __read(change.remove), false));
                 }
                 break;
             case 'attribute':
                 if (change.value && typeof change.value === 'object') {
-                    Object.entries(change.value).forEach(function (_a) {
-                        var _b = __read(_a, 2), attr = _b[0], value = _b[1];
-                        if (value === null || value === undefined) {
-                            element.removeAttribute(attr);
+                    try {
+                        for (var _h = __values(Object.entries(change.value)), _j = _h.next(); !_j.done; _j = _h.next()) {
+                            var _k = __read(_j.value, 2), attr = _k[0], value = _k[1];
+                            if (value === null || value === undefined) {
+                                element.removeAttribute(attr);
+                            }
+                            else {
+                                element.setAttribute(attr, String(value));
+                            }
                         }
-                        else {
-                            element.setAttribute(attr, String(value));
+                    }
+                    catch (e_6_1) { e_6 = { error: e_6_1 }; }
+                    finally {
+                        try {
+                            if (_j && !_j.done && (_d = _h.return)) _d.call(_h);
                         }
-                    });
+                        finally { if (e_6) throw e_6.error; }
+                    }
                 }
                 break;
             case 'move':
@@ -434,36 +575,25 @@ var DOMManipulatorLite = /** @class */ (function () {
         try {
             this.applyChangeToElement(element, change);
             if (change.type === 'javascript' && change.value) {
-                try {
-                    if (this.debug) {
-                        logDebug("[JAVASCRIPT] [".concat(experimentName, "] Executing JavaScript on specific element"), {
-                            experimentName: experimentName,
-                            selector: change.selector,
-                            element: element.tagName,
-                            code: String(change.value).substring(0, 100) + '...',
-                        });
-                    }
-                    var fn = new Function('element', String(change.value));
-                    fn(element);
-                    if (this.debug) {
-                        logDebug("[JAVASCRIPT] [".concat(experimentName, "] \u2713 JavaScript executed successfully"), {
-                            experimentName: experimentName,
-                            selector: change.selector,
-                            element: element.tagName,
-                        });
-                    }
-                }
-                catch (error) {
-                    logDebug("[JAVASCRIPT] [".concat(experimentName, "] \u2717 JavaScript execution error on specific element:"), {
+                if (this.debug) {
+                    logDebug("[JAVASCRIPT] [".concat(experimentName, "] Executing JavaScript on specific element"), {
                         experimentName: experimentName,
                         selector: change.selector,
                         element: element.tagName,
-                        code: String(change.value),
-                        error: error instanceof Error ? error.message : String(error),
-                        stack: error instanceof Error ? error.stack : undefined,
+                        code: String(change.value).substring(0, 100) + '...',
                     });
+                }
+                var executed = this.executeUserJavaScript(String(change.value), element, experimentName, change.selector);
+                if (!executed) {
                     return false;
                 }
+                if (this.debug) {
+                    logDebug("[JAVASCRIPT] [".concat(experimentName, "] \u2713 JavaScript executed successfully"), {
+                        experimentName: experimentName,
+                        selector: change.selector,
+                        element: element.tagName,
+                    });
+                }
             }
             else if (change.type === 'move') {
                 var targetSelector = change.targetSelector ||
@@ -484,8 +614,10 @@ var DOMManipulatorLite = /** @class */ (function () {
                     }
                 }
             }
-            // Watch element for React hydration recovery (ALL types) OR style persistence (styles only)
-            var shouldWatch = (change.type === 'style' && change.persistStyle) || // Explicit style persistence
+            // Watch element for persistence or SPA hydration recovery
+            var shouldWatch = (change.type === 'style' && change.persistStyle) ||
+                (change.type === 'attribute' && change.persistAttribute) ||
+                (change.type === 'javascript' && change.persistScript === true) ||
                 ((_a = this.plugin.config) === null || _a === void 0 ? void 0 : _a.spa); // SPA mode watches ALL types for hydration recovery
             if (shouldWatch) {
                 this.plugin.watchElement(element, experimentName, change);