@accelerated-agency/visual-editor 0.2.5 → 0.2.6

package/dist/vite.cjs

@@ -627,7 +627,7 @@ select.pr-inp{cursor:pointer;background:#fff}
       </div>
       <!-- btn-close: hidden visually, kept for JS event listener -->
       <button id="btn-close" style="display:none" title="Close editor"></button>
-      <button class="tb-sim-btn" id="btn-simulate"><i class="bi bi-lightning-charge-fill"></i> Simulate</button>
+      <button class="tb-sim-btn" id="btn-simulate" onclick="simulateExperiment()"><i class="bi bi-lightning-charge-fill"></i> Simulate</button>
       <button class="tb-fin-btn" id="btn-save">Finalize</button>
     </div>
 
@@ -914,6 +914,52 @@ function send(type, payload) {
   window.parent.postMessage({ channel: CHANNEL, type: type, payload: payload || {} }, '*');
 }
 
+function generatePreviewUrlString(args) {
+  var baseUrl = (args && args.url) || '';
+  var test = (args && args.test) || {};
+  var variation = (args && args.variation) || {};
+  if (!baseUrl) return '';
+  var testId = test.iid || test.experimentId || test._id || '';
+  var variationId = variation.iid || variation._id || '';
+  var cId = String(testId || '') + '_' + String(variationId || '');
+  var hasQueryParams = String(baseUrl).indexOf('?') >= 0;
+  return (
+    baseUrl +
+    (hasQueryParams ? '&' : '?') +
+    'codebase_debug=true&cId=' +
+    encodeURIComponent(cId)
+  );
+}
+
+function simulateExperiment() {
+  var test = experimentData || {};
+  var activeVariation = null;
+  if (Array.isArray(variations) && variations.length) {
+    activeVariation =
+      variations.find(function(v) { return v && v._id === activeVarId; }) ||
+      variations[0];
+  }
+  var targetUrl =
+    (Array.isArray(test.urltargeting) && test.urltargeting[0]) ||
+    test.pageUrl ||
+    (test.metadata_1 && test.metadata_1.editor_url) ||
+    '';
+  var url = generatePreviewUrlString({
+    url: targetUrl,
+    test: test,
+    variation: activeVariation || {},
+  });
+  if (!url) {
+    console.warn('[V2] simulateExperiment: missing target URL');
+    return;
+  }
+  try {
+    window.open(url, '_blank');
+  } catch(err) {
+    console.warn('[V2] simulateExperiment:', err);
+  }
+}
+
 window.addEventListener('message', function(e) {
   if (!e.data || e.data.channel !== CHANNEL) return;
   switch (e.data.type) {
@@ -965,6 +1011,13 @@ var changeObserver = null;
 var changeObserverDoc = null;
 /** Incremented while applying changesets / selection chrome so MutationObserver does not mark dirty */
 var suppressIframeMutationDirty = 0;
+/** Throttled reconcile timer to keep DOM aligned with saved changesets. */
+var consistencyReconcileTimer = null;
+/** Background watchdog for late client-side re-renders that wipe applied changesets. */
+var consistencyWatchTimer = null;
+var consistencyWatchDoc = null;
+var consistencyWatchTicks = 0;
+var CONSISTENCY_WATCH_MAX_TICKS = 160;
 /** { doc, onRS } \u2014 iframe document readystate until complete */
 var iframeDocLoadingListeners = null;
 // Each entry: {selector, label, cssProp, value, targetEl}
@@ -1948,9 +2001,71 @@ function clearPendingGranularChangesets() {
   }
 }
 
+function stopConsistencyWatchdog() {
+  if (consistencyWatchTimer) {
+    clearInterval(consistencyWatchTimer);
+    consistencyWatchTimer = null;
+  }
+  consistencyWatchDoc = null;
+  consistencyWatchTicks = 0;
+}
+
+function runConsistencyReconcile() {
+  if (!activeVarId) return;
+  var iframe = document.getElementById('iframeId');
+  var doc = iframe && iframe.contentDocument;
+  if (!doc || !doc.body) return;
+  var variation = variations.find(function(v) { return v._id === activeVarId; });
+  var cs = parseVariationChangesets(variation);
+  if (!cs.length || changesetsHaveBodySnapshot(cs)) return;
+  var granular = filterGranularChangesetEntries(cs);
+  var unresolved = countUnresolvedGranularSelectors(doc, granular);
+  if (unresolved > 0 || changesetListHasStructural(cs)) {
+    reapplyActiveVariationGranular(doc);
+    registerPendingGranularChangesets(cs, doc);
+  }
+}
+
+function scheduleConsistencyReconcile() {
+  if (consistencyReconcileTimer) return;
+  consistencyReconcileTimer = setTimeout(function() {
+    consistencyReconcileTimer = null;
+    runConsistencyReconcile();
+  }, 80);
+}
+
+function startConsistencyWatchdog(doc) {
+  if (!doc || !doc.body) return;
+  if (consistencyWatchDoc === doc && consistencyWatchTimer) return;
+  stopConsistencyWatchdog();
+  consistencyWatchDoc = doc;
+  consistencyWatchTicks = 0;
+  consistencyWatchTimer = setInterval(function() {
+    if (consistencyWatchDoc !== doc) {
+      stopConsistencyWatchdog();
+      return;
+    }
+    var iframe = document.getElementById('iframeId');
+    if (!iframe || iframe.contentDocument !== doc || !doc.body) {
+      stopConsistencyWatchdog();
+      return;
+    }
+    consistencyWatchTicks += 1;
+    scheduleConsistencyReconcile();
+    if (consistencyWatchTicks >= CONSISTENCY_WATCH_MAX_TICKS) {
+      stopConsistencyWatchdog();
+    }
+  }, 400);
+}
+
 function resetIframeBindings() {
   detachIframeLoadingListeners();
   stopIframeContentApplyWatcher();
+  stopConsistencyWatchdog();
+  if (consistencyReconcileTimer) {
+    clearTimeout(consistencyReconcileTimer);
+    consistencyReconcileTimer = null;
+  }
   appliedChangesetSnapshots = {};
   appliedStructuralChangesetKeys = {};
   clickAttachDoc = null;
@@ -3564,10 +3679,31 @@ function attachChangeObserver() {
       changeObserver = null;
       changeObserverDoc = null;
     }
-    changeObserver = new MutationObserver(function() {
+    changeObserver = new MutationObserver(function(mutations) {
       // Dirty state is derived from changesets baseline + stateChanges (not raw DOM mutations).
+      var bodyReplaced = false;
+      for (var mi = 0; mi < mutations.length; mi++) {
+        var m = mutations[mi];
+        if (
+          m &&
+          m.type === 'childList' &&
+          m.target === doc.body &&
+          m.addedNodes &&
+          m.removedNodes &&
+          m.addedNodes.length > 0 &&
+          m.removedNodes.length > 0
+        ) {
+          bodyReplaced = true;
+          break;
+        }
+      }
+      if (bodyReplaced) {
+        // Page JS replaced body children; allow structural rows (insert/reorder) to apply again.
+        appliedStructuralChangesetKeys = {};
+      }
       scheduleDomTreeRefresh();
       scheduleGranularChangesetReapply();
+      scheduleConsistencyReconcile();
     });
     changeObserver.observe(doc.body, {
       childList: true, subtree: true, attributes: true, characterData: true
@@ -3597,6 +3733,8 @@ function syncIframeInteractions(reason) {
     attachClickHandler();
     attachDragReposition();
     attachChangeObserver();
+    startConsistencyWatchdog(doc);
+    scheduleConsistencyReconcile();
     bindSelectionToolbarScroll();
     var inp = document.getElementById('comp-search');
     renderDomTree(inp ? inp.value : '');

package/dist/vite.js

@@ -619,7 +619,7 @@ select.pr-inp{cursor:pointer;background:#fff}
       </div>
       <!-- btn-close: hidden visually, kept for JS event listener -->
       <button id="btn-close" style="display:none" title="Close editor"></button>
-      <button class="tb-sim-btn" id="btn-simulate"><i class="bi bi-lightning-charge-fill"></i> Simulate</button>
+      <button class="tb-sim-btn" id="btn-simulate" onclick="simulateExperiment()"><i class="bi bi-lightning-charge-fill"></i> Simulate</button>
       <button class="tb-fin-btn" id="btn-save">Finalize</button>
     </div>
 
@@ -906,6 +906,52 @@ function send(type, payload) {
   window.parent.postMessage({ channel: CHANNEL, type: type, payload: payload || {} }, '*');
 }
 
+function generatePreviewUrlString(args) {
+  var baseUrl = (args && args.url) || '';
+  var test = (args && args.test) || {};
+  var variation = (args && args.variation) || {};
+  if (!baseUrl) return '';
+  var testId = test.iid || test.experimentId || test._id || '';
+  var variationId = variation.iid || variation._id || '';
+  var cId = String(testId || '') + '_' + String(variationId || '');
+  var hasQueryParams = String(baseUrl).indexOf('?') >= 0;
+  return (
+    baseUrl +
+    (hasQueryParams ? '&' : '?') +
+    'codebase_debug=true&cId=' +
+    encodeURIComponent(cId)
+  );
+}
+
+function simulateExperiment() {
+  var test = experimentData || {};
+  var activeVariation = null;
+  if (Array.isArray(variations) && variations.length) {
+    activeVariation =
+      variations.find(function(v) { return v && v._id === activeVarId; }) ||
+      variations[0];
+  }
+  var targetUrl =
+    (Array.isArray(test.urltargeting) && test.urltargeting[0]) ||
+    test.pageUrl ||
+    (test.metadata_1 && test.metadata_1.editor_url) ||
+    '';
+  var url = generatePreviewUrlString({
+    url: targetUrl,
+    test: test,
+    variation: activeVariation || {},
+  });
+  if (!url) {
+    console.warn('[V2] simulateExperiment: missing target URL');
+    return;
+  }
+  try {
+    window.open(url, '_blank');
+  } catch(err) {
+    console.warn('[V2] simulateExperiment:', err);
+  }
+}
+
 window.addEventListener('message', function(e) {
   if (!e.data || e.data.channel !== CHANNEL) return;
   switch (e.data.type) {
@@ -957,6 +1003,13 @@ var changeObserver = null;
 var changeObserverDoc = null;
 /** Incremented while applying changesets / selection chrome so MutationObserver does not mark dirty */
 var suppressIframeMutationDirty = 0;
+/** Throttled reconcile timer to keep DOM aligned with saved changesets. */
+var consistencyReconcileTimer = null;
+/** Background watchdog for late client-side re-renders that wipe applied changesets. */
+var consistencyWatchTimer = null;
+var consistencyWatchDoc = null;
+var consistencyWatchTicks = 0;
+var CONSISTENCY_WATCH_MAX_TICKS = 160;
 /** { doc, onRS } \u2014 iframe document readystate until complete */
 var iframeDocLoadingListeners = null;
 // Each entry: {selector, label, cssProp, value, targetEl}
@@ -1940,9 +1993,71 @@ function clearPendingGranularChangesets() {
   }
 }
 
+function stopConsistencyWatchdog() {
+  if (consistencyWatchTimer) {
+    clearInterval(consistencyWatchTimer);
+    consistencyWatchTimer = null;
+  }
+  consistencyWatchDoc = null;
+  consistencyWatchTicks = 0;
+}
+
+function runConsistencyReconcile() {
+  if (!activeVarId) return;
+  var iframe = document.getElementById('iframeId');
+  var doc = iframe && iframe.contentDocument;
+  if (!doc || !doc.body) return;
+  var variation = variations.find(function(v) { return v._id === activeVarId; });
+  var cs = parseVariationChangesets(variation);
+  if (!cs.length || changesetsHaveBodySnapshot(cs)) return;
+  var granular = filterGranularChangesetEntries(cs);
+  var unresolved = countUnresolvedGranularSelectors(doc, granular);
+  if (unresolved > 0 || changesetListHasStructural(cs)) {
+    reapplyActiveVariationGranular(doc);
+    registerPendingGranularChangesets(cs, doc);
+  }
+}
+
+function scheduleConsistencyReconcile() {
+  if (consistencyReconcileTimer) return;
+  consistencyReconcileTimer = setTimeout(function() {
+    consistencyReconcileTimer = null;
+    runConsistencyReconcile();
+  }, 80);
+}
+
+function startConsistencyWatchdog(doc) {
+  if (!doc || !doc.body) return;
+  if (consistencyWatchDoc === doc && consistencyWatchTimer) return;
+  stopConsistencyWatchdog();
+  consistencyWatchDoc = doc;
+  consistencyWatchTicks = 0;
+  consistencyWatchTimer = setInterval(function() {
+    if (consistencyWatchDoc !== doc) {
+      stopConsistencyWatchdog();
+      return;
+    }
+    var iframe = document.getElementById('iframeId');
+    if (!iframe || iframe.contentDocument !== doc || !doc.body) {
+      stopConsistencyWatchdog();
+      return;
+    }
+    consistencyWatchTicks += 1;
+    scheduleConsistencyReconcile();
+    if (consistencyWatchTicks >= CONSISTENCY_WATCH_MAX_TICKS) {
+      stopConsistencyWatchdog();
+    }
+  }, 400);
+}
+
 function resetIframeBindings() {
   detachIframeLoadingListeners();
   stopIframeContentApplyWatcher();
+  stopConsistencyWatchdog();
+  if (consistencyReconcileTimer) {
+    clearTimeout(consistencyReconcileTimer);
+    consistencyReconcileTimer = null;
+  }
   appliedChangesetSnapshots = {};
   appliedStructuralChangesetKeys = {};
   clickAttachDoc = null;
@@ -3556,10 +3671,31 @@ function attachChangeObserver() {
       changeObserver = null;
       changeObserverDoc = null;
     }
-    changeObserver = new MutationObserver(function() {
+    changeObserver = new MutationObserver(function(mutations) {
       // Dirty state is derived from changesets baseline + stateChanges (not raw DOM mutations).
+      var bodyReplaced = false;
+      for (var mi = 0; mi < mutations.length; mi++) {
+        var m = mutations[mi];
+        if (
+          m &&
+          m.type === 'childList' &&
+          m.target === doc.body &&
+          m.addedNodes &&
+          m.removedNodes &&
+          m.addedNodes.length > 0 &&
+          m.removedNodes.length > 0
+        ) {
+          bodyReplaced = true;
+          break;
+        }
+      }
+      if (bodyReplaced) {
+        // Page JS replaced body children; allow structural rows (insert/reorder) to apply again.
+        appliedStructuralChangesetKeys = {};
+      }
       scheduleDomTreeRefresh();
       scheduleGranularChangesetReapply();
+      scheduleConsistencyReconcile();
     });
     changeObserver.observe(doc.body, {
       childList: true, subtree: true, attributes: true, characterData: true
@@ -3589,6 +3725,8 @@ function syncIframeInteractions(reason) {
     attachClickHandler();
     attachDragReposition();
     attachChangeObserver();
+    startConsistencyWatchdog(doc);
+    scheduleConsistencyReconcile();
     bindSelectionToolbarScroll();
     var inp = document.getElementById('comp-search');
     renderDomTree(inp ? inp.value : '');

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@accelerated-agency/visual-editor",
-  "version": "0.2.5",
+  "version": "0.2.6",
   "private": false,
   "description": "Conversion visual editor as a reusable React package",
   "type": "module",