@accelerated-agency/visual-editor 0.2.1 → 0.2.2

package/dist/index.js

@@ -5,6 +5,11 @@ import { persist } from 'zustand/middleware';
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { HexColorPicker } from 'react-colorful';
 
+var PERSIST_NAME_PREFIX = "conversion-editor-variations-v3-";
+function variationsPersistStorageName(experimentId) {
+  const id = experimentId?.trim();
+  return `${PERSIST_NAME_PREFIX}${id && id.length > 0 ? id : "standalone"}`;
+}
 var VARIATION_COLORS = [
   "#0084D1",
   "#F54A00",
@@ -77,16 +82,12 @@ var useVariationsStore = create()(
         }));
       },
       setActiveVariation: (id) => set({ activeVariationId: id }),
-      addMutationToActive: (mutation) => set((s) => {
-        console.log("addMutationToActive", s.activeVariationId, mutation);
-        return {
-          variations: s.variations.map(
-            (v) => v.id === s.activeVariationId ? { ...v, mutations: [...v.mutations, mutation] } : v
-          ),
-          // Clear redo stack for active variation on new mutation
-          redoStacks: { ...s.redoStacks, [s.activeVariationId]: [] }
-        };
-      }),
+      addMutationToActive: (mutation) => set((s) => ({
+        variations: s.variations.map(
+          (v) => v.id === s.activeVariationId ? { ...v, mutations: [...v.mutations, mutation] } : v
+        ),
+        redoStacks: { ...s.redoStacks, [s.activeVariationId]: [] }
+      })),
       removeLastMutationFromActive: () => set((s) => {
         const active = s.variations.find((v) => v.id === s.activeVariationId);
         const removed = active?.mutations[active.mutations.length - 1];
@@ -149,7 +150,8 @@ var useVariationsStore = create()(
       }
     }),
     {
-      name: "conversion-editor-variations",
+      name: variationsPersistStorageName(void 0),
+      skipHydration: true,
       partialize: (state) => ({
         variations: state.variations,
         activeVariationId: state.activeVariationId
@@ -157,6 +159,15 @@ var useVariationsStore = create()(
     }
   )
 );
+async function hydrateVariationsFromStorage(experimentId) {
+  useVariationsStore.persist.setOptions({
+    name: variationsPersistStorageName(experimentId)
+  });
+  try {
+    await useVariationsStore.persist.rehydrate();
+  } catch {
+  }
+}
 function TopBar({
   connectionStatus,
   onLoadUrl,
@@ -4078,6 +4089,9 @@ function sendToPlatform(type, payload) {
     data: { channel: PLATFORM_CHANNEL, type, payload }
   }));
 }
+function experimentIframeContextKey(exp) {
+  return [exp.experimentId ?? "", exp.pageUrl ?? "", exp.editorPassword ?? ""].join("
");
+}
 function EditorShell({ initialExperiment, embeddedMode, proxyBaseUrl }) {
   const [url, setUrl] = useState("");
   const [password, setPassword] = useState("");
@@ -4090,7 +4104,8 @@ function EditorShell({ initialExperiment, embeddedMode, proxyBaseUrl }) {
   );
   const [experimentData, setExperimentData] = useState(null);
   const experimentDataRef = useRef(null);
-  const lastInitialExperimentKeyRef = useRef("");
+  const lastAppliedRunKeyRef = useRef("");
+  const iframeContextKeyRef = useRef("");
   useEffect(() => {
     experimentDataRef.current = experimentData;
   }, [experimentData]);
@@ -4108,7 +4123,6 @@ function EditorShell({ initialExperiment, embeddedMode, proxyBaseUrl }) {
   const clearAll = useVariationsStore((s) => s.clearAll);
   const setSelectedElement = useMutationsStore((s) => s.setSelectedElement);
   const selectedElement = useMutationsStore((s) => s.selectedElement);
-  const activeVariationId = useVariationsStore((s) => s.activeVariationId);
   const variations = useVariationsStore((s) => s.variations);
   const removeLastMutationFromActive = useVariationsStore((s) => s.removeLastMutationFromActive);
   const removeMutationsForSelector = useVariationsStore((s) => s.removeMutationsForSelector);
@@ -4159,7 +4173,6 @@ function EditorShell({ initialExperiment, embeddedMode, proxyBaseUrl }) {
   }, [embedded, experimentData, toast, buildPlatformVariations]);
   const pingIntervalRef = useRef(null);
   const pongTimeoutRef = useRef(null);
-  const syncDebounceRef = useRef(null);
   const stopHeartbeat = useCallback(() => {
     if (pingIntervalRef.current) {
       clearInterval(pingIntervalRef.current);
@@ -4193,15 +4206,24 @@ function EditorShell({ initialExperiment, embeddedMode, proxyBaseUrl }) {
     },
     [stopHeartbeat, clearAll, setSelectedElement]
   );
+  useEffect(() => {
+    if (initialExperiment) return;
+    let cancelled = false;
+    void (async () => {
+      await hydrateVariationsFromStorage(void 0);
+      if (cancelled) return;
+    })();
+    return () => {
+      cancelled = true;
+    };
+  }, [initialExperiment]);
   useEffect(() => {
     if (!initialExperiment) return;
-    const key = JSON.stringify(initialExperiment);
-    if (lastInitialExperimentKeyRef.current === key) return;
-    lastInitialExperimentKeyRef.current = key;
-    setExperimentData(initialExperiment);
-    if (initialExperiment.pageUrl) {
-      handleLoadUrl(initialExperiment.pageUrl, initialExperiment.editorPassword || void 0);
-    }
+    const runKey = JSON.stringify(initialExperiment);
+    if (lastAppliedRunKeyRef.current === runKey) return;
+    const ctx = experimentIframeContextKey(initialExperiment);
+    const sameIframeContext = iframeContextKeyRef.current !== "" && iframeContextKeyRef.current === ctx;
+    let cancelled = false;
     const sourceVariations = Array.isArray(initialExperiment.variations) ? initialExperiment.variations : [];
     const editorVariations = sourceVariations.map((v, idx) => {
       let mutations = [];
@@ -4221,7 +4243,31 @@ function EditorShell({ initialExperiment, embeddedMode, proxyBaseUrl }) {
         mutations
       };
     });
-    loadExperimentVariations(editorVariations);
+    setExperimentData(initialExperiment);
+    if (sameIframeContext) {
+      void (async () => {
+        await hydrateVariationsFromStorage(initialExperiment.experimentId);
+        if (cancelled) return;
+        loadExperimentVariations(editorVariations);
+        lastAppliedRunKeyRef.current = runKey;
+      })();
+      return () => {
+        cancelled = true;
+      };
+    }
+    if (initialExperiment.pageUrl) {
+      handleLoadUrl(initialExperiment.pageUrl, initialExperiment.editorPassword || void 0);
+      iframeContextKeyRef.current = ctx;
+    }
+    void (async () => {
+      await hydrateVariationsFromStorage(initialExperiment.experimentId);
+      if (cancelled) return;
+      loadExperimentVariations(editorVariations);
+      lastAppliedRunKeyRef.current = runKey;
+    })();
+    return () => {
+      cancelled = true;
+    };
   }, [initialExperiment, handleLoadUrl, loadExperimentVariations]);
   const handleBridgeReady = useCallback(() => {
     setConnectionStatus("connected");
@@ -4251,33 +4297,44 @@ function EditorShell({ initialExperiment, embeddedMode, proxyBaseUrl }) {
       switch (msg.type) {
         case "load-experiment": {
           const data = msg.payload;
-          setExperimentData(data);
           experimentDataRef.current = data;
-          if (data.pageUrl && !msg.payload?.skipUrlReload) {
-            handleLoadUrl(data.pageUrl, data.editorPassword || void 0);
-          }
-          if (Array.isArray(data.variations)) {
-            const editorVariations = data.variations.map((v, idx) => {
-              let mutations = [];
-              try {
-                const chainSets = JSON.parse(v.changesets || "[]");
-                if (Array.isArray(chainSets) && chainSets.length > 0) {
-                  mutations = convertChainSetsToMutations(chainSets);
-                }
-              } catch {
+          const editorVariations = Array.isArray(data.variations) ? data.variations.map((v, idx) => {
+            let mutations = [];
+            try {
+              const chainSets = JSON.parse(v.changesets || "[]");
+              if (Array.isArray(chainSets) && chainSets.length > 0) {
+                mutations = convertChainSetsToMutations(chainSets);
               }
-              return {
-                id: v._id || `v_${idx}`,
-                platformIid: v.iid,
-                name: v.name,
-                isControl: v.baseline || false,
-                traffic_allocation: v.traffic_allocation,
-                mutations
-              };
-            });
-            loadExperimentVariations(editorVariations);
+            } catch {
+            }
+            return {
+              id: v._id || `v_${idx}`,
+              platformIid: v.iid,
+              name: v.name,
+              isControl: v.baseline || false,
+              traffic_allocation: v.traffic_allocation,
+              mutations
+            };
+          }) : [];
+          setExperimentData(data);
+          const ctx = experimentIframeContextKey(data);
+          let reloadedIframe = false;
+          if (data.pageUrl && !data.skipUrlReload) {
+            if (iframeContextKeyRef.current !== ctx) {
+              handleLoadUrl(data.pageUrl, data.editorPassword || void 0);
+              iframeContextKeyRef.current = ctx;
+              reloadedIframe = true;
+            }
           }
-          toast(`Loaded experiment: ${data.name || "Untitled"}`, "info");
+          void (async () => {
+            await hydrateVariationsFromStorage(data.experimentId);
+            if (Array.isArray(data.variations)) {
+              loadExperimentVariations(editorVariations);
+            }
+            if (reloadedIframe) {
+              toast(`Loaded experiment: ${data.name || "Untitled"}`, "info");
+            }
+          })();
           break;
         }
         case "request-save": {
@@ -4351,27 +4408,6 @@ function EditorShell({ initialExperiment, embeddedMode, proxyBaseUrl }) {
   useEffect(() => {
     sendToBridge({ type: "setMode", mode: interactionMode });
   }, [interactionMode]);
-  useEffect(() => {
-    if (syncDebounceRef.current) {
-      clearTimeout(syncDebounceRef.current);
-      syncDebounceRef.current = null;
-    }
-    if (connectionStatus !== "connected") return;
-    syncDebounceRef.current = setTimeout(() => {
-      const currentActiveMutations = useVariationsStore.getState().getActiveMutations();
-      sendToBridge({ type: "clearAllMutations" });
-      if (currentActiveMutations.length > 0) {
-        sendToBridge({ type: "applyMutationBatch", mutations: currentActiveMutations });
-      }
-      syncDebounceRef.current = null;
-    }, 350);
-    return () => {
-      if (syncDebounceRef.current) {
-        clearTimeout(syncDebounceRef.current);
-        syncDebounceRef.current = null;
-      }
-    };
-  }, [connectionStatus, activeVariationId, experimentData?.experimentId]);
   useEffect(() => {
     const handler = (e) => {
       const meta = e.metaKey || e.ctrlKey;
@@ -4574,7 +4610,7 @@ function PlatformVisualEditor({
   renderLoading,
   renderError
 }) {
-  console.log(experiment);
+  console.log("experiment", experiment);
   const [editorReady, setEditorReady] = useState(false);
   const [dirty, setDirty] = useState(false);
   const dirtyRef = useRef(false);
@@ -4788,7 +4824,6 @@ function PlatformVisualEditorV2({
   renderLoading,
   renderError
 }) {
-  console.log(experiment);
   const iframeRef = useRef(null);
   const [editorReady, setEditorReady] = useState(false);
   const [dirty, setDirty] = useState(false);
@@ -4978,4 +5013,4 @@ function PlatformVisualEditorV2({
   ] });
 }
 
-export { EditorShell, PlatformVisualEditor, PlatformVisualEditorV2, ToastProvider, useToast };
+export { EditorShell, PlatformVisualEditor, PlatformVisualEditorV2, ToastProvider, hydrateVariationsFromStorage, useToast, variationsPersistStorageName };

package/package.json

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