@accelerated-agency/visual-editor 0.2.1 → 0.2.3

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,
@@ -1832,13 +1843,10 @@ function ElementIcon({ tag }) {
   return /* @__PURE__ */ jsx("span", { className: "shrink-0 w-5 h-5 rounded flex items-center justify-center", style: { backgroundColor: bgColor }, children: /* @__PURE__ */ jsx("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", children: /* @__PURE__ */ jsx("rect", { x: "1.5", y: "1.5", width: "9", height: "9", rx: "1.5", stroke: iconColor, strokeWidth: "1.2" }) }) });
 }
 var CHANNEL = "conversion-editor";
-var IFRAME_LOAD_GUARD_MS = 13e4;
 function IframeCanvas({ url, password, proxyBaseUrl = "", onBridgeReady, onPong }) {
   const iframeElRef = useRef(null);
-  const loadGuardRef = useRef(null);
   const setSelectedElement = useMutationsStore((s) => s.setSelectedElement);
   const addMutationToActive = useVariationsStore((s) => s.addMutationToActive);
-  const [loading, setLoading] = useState(false);
   useEffect(() => {
     setIframeRef(iframeElRef.current);
     return () => setIframeRef(null);
@@ -1877,25 +1885,6 @@ function IframeCanvas({ url, password, proxyBaseUrl = "", onBridgeReady, onPong
     window.addEventListener("message", handleMessage);
     return () => window.removeEventListener("message", handleMessage);
   }, [handleMessage]);
-  useEffect(() => {
-    if (!url) return;
-    setLoading(true);
-    if (loadGuardRef.current) clearTimeout(loadGuardRef.current);
-    loadGuardRef.current = setTimeout(() => {
-      loadGuardRef.current = null;
-      setLoading(false);
-    }, IFRAME_LOAD_GUARD_MS);
-    return () => {
-      if (loadGuardRef.current) clearTimeout(loadGuardRef.current);
-    };
-  }, [url]);
-  const clearLoadGuard = useCallback(() => {
-    if (loadGuardRef.current) {
-      clearTimeout(loadGuardRef.current);
-      loadGuardRef.current = null;
-    }
-    setLoading(false);
-  }, []);
   let resolvedUrl;
   if (url.toLowerCase() === "test") {
     resolvedUrl = "/test";
@@ -1910,27 +1899,16 @@ function IframeCanvas({ url, password, proxyBaseUrl = "", onBridgeReady, onPong
       /* @__PURE__ */ jsx("p", { className: "text-sm text-gray-400", children: 'Load a page from the Page dropdown in the top bar, or type "test" for the local test page' })
     ] });
   }
-  return /* @__PURE__ */ jsxs("div", { className: "relative w-full h-full", children: [
-    loading && /* @__PURE__ */ jsxs("div", { className: "absolute inset-0 z-10 flex flex-col gap-4 p-8", style: { backgroundColor: "#F9FAFB" }, children: [
-      /* @__PURE__ */ jsx("div", { className: "h-8 w-3/4 rounded-md animate-pulse", style: { backgroundColor: "#E5E5E5" } }),
-      /* @__PURE__ */ jsx("div", { className: "h-4 w-1/2 rounded-md animate-pulse", style: { backgroundColor: "#E5E5E5" } }),
-      /* @__PURE__ */ jsx("div", { className: "h-48 w-full rounded-md animate-pulse", style: { backgroundColor: "#E5E5E5" } }),
-      /* @__PURE__ */ jsx("div", { className: "h-4 w-2/3 rounded-md animate-pulse", style: { backgroundColor: "#E5E5E5" } }),
-      /* @__PURE__ */ jsx("div", { className: "h-4 w-1/3 rounded-md animate-pulse", style: { backgroundColor: "#E5E5E5" } }),
-      /* @__PURE__ */ jsx("div", { className: "h-32 w-full rounded-md animate-pulse", style: { backgroundColor: "#E5E5E5" } })
-    ] }),
-    /* @__PURE__ */ jsx(
-      "iframe",
-      {
-        ref: iframeElRef,
-        src: resolvedUrl,
-        className: "w-full h-full border-0",
-        sandbox: "allow-scripts allow-same-origin allow-forms allow-popups",
-        onLoad: clearLoadGuard,
-        onError: clearLoadGuard
-      }
-    )
-  ] });
+  return /* @__PURE__ */ jsx("div", { className: "relative w-full h-full", children: /* @__PURE__ */ jsx(
+    "iframe",
+    {
+      ref: iframeElRef,
+      src: resolvedUrl,
+      className: "w-full h-full border-0",
+      sandbox: "allow-scripts allow-same-origin allow-forms allow-popups",
+      title: "Visual editor page"
+    }
+  ) });
 }
 function ElementOverlayToolbar() {
   const selectedElement = useMutationsStore((s) => s.selectedElement);
@@ -4078,6 +4056,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 +4071,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 +4090,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 +4140,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 +4173,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 +4210,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 +4264,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 +4375,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 +4577,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 +4791,6 @@ function PlatformVisualEditorV2({
   renderLoading,
   renderError
 }) {
-  console.log(experiment);
   const iframeRef = useRef(null);
   const [editorReady, setEditorReady] = useState(false);
   const [dirty, setDirty] = useState(false);
@@ -4978,4 +4980,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.3",
   "private": false,
   "description": "Conversion visual editor as a reusable React package",
   "type": "module",