Merge pull request #80 from ClayPulse/add-app-state-snapshot

Add app state snapshot during import & export

Author: Shellishack

.changeset/forty-cows-smell.md

@@ -0,0 +1,6 @@
+---
+"@pulse-editor/shared-utils": patch
+"@pulse-editor/react-api": patch
+---
+
+Add app state snapshot during import & export

.changeset/pre.json

@@ -29,6 +29,7 @@
     "early-pumas-listen",
     "few-wasps-beam",
     "fluffy-poems-cover",
+    "forty-cows-smell",
     "free-ears-swim",
     "fruity-goats-look",
     "full-beans-stop",

npm-packages/react-api/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @pulse-editor/react-api
 
+## 0.1.1-alpha.46
+
+### Patch Changes
+
+- Add app state snapshot during import & export
+- Updated dependencies
+  - @pulse-editor/shared-utils@0.1.1-alpha.46
+
 ## 0.1.1-alpha.45
 
 ### Patch Changes

npm-packages/react-api/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pulse-editor/react-api",
-  "version": "0.1.1-alpha.45",
+  "version": "0.1.1-alpha.46",
   "main": "dist/main.js",
   "files": [
     "dist"
@@ -38,7 +38,7 @@
     "typescript-eslint": "^8.30.1"
   },
   "peerDependencies": {
-    "@pulse-editor/shared-utils": "0.1.1-alpha.45",
+    "@pulse-editor/shared-utils": "0.1.1-alpha.46",
     "react": "^19.0.0",
     "react-dom": "^19.0.0"
   }

npm-packages/react-api/src/hooks/editor/use-loading.ts

@@ -1,11 +1,11 @@
+import { IMCMessage, IMCMessageTypeEnum } from "@pulse-editor/shared-utils";
 import { useEffect, useState } from "react";
 import useIMC from "../../lib/use-imc";
-import { IMCMessage, IMCMessageTypeEnum } from "@pulse-editor/shared-utils";
 
 export default function useLoading() {
   const receiverHandlerMap = new Map<
     IMCMessageTypeEnum,
-    (senderWindow: Window, message: IMCMessage) => Promise<void>
+    (senderWindow: Window, message: IMCMessage) => Promise<any>
   >();
 
   const { imc, isReady } = useIMC(receiverHandlerMap);

npm-packages/react-api/src/hooks/editor/use-snapshot-state.ts

@@ -0,0 +1,64 @@
+import { useContext, useEffect, useState } from "react";
+import { SnapshotContext } from "../../providers/snapshot-provider";
+
+export default function useSnapShotState<T>(
+  key: string,
+  initialValue?: T,
+  onRestore?: (value: T) => void
+) {
+  const snapshotContext = useContext(SnapshotContext);
+
+  if (!snapshotContext) {
+    throw new Error("useSnapShotState must be used within a SnapshotProvider");
+  }
+
+  const { states, setStates } = snapshotContext;
+
+  // Initialize state with the value from context or the initial value
+  const [state, setState] = useState<T>(
+    states[key] !== undefined ? states[key] : initialValue
+  );
+
+  // Update context whenever state changes
+  const setSnapshotState: React.Dispatch<React.SetStateAction<T>> = (value) => {
+    setState((prev) => {
+      const newValue =
+        typeof value === "function" ? (value as (prev: T) => T)(prev) : value;
+
+      // Defer the setStates call to next microtask, outside render phase
+      Promise.resolve().then(() => {
+        setStates((prevStates) => ({
+          ...prevStates,
+          [key]: newValue,
+        }));
+      });
+
+      return newValue;
+    });
+  };
+
+  // Set the initial value in context if not already set
+  useEffect(() => {
+    // Only set if the key does not exist in the context
+    if (states[key] === undefined && initialValue !== undefined) {
+      setStates((prevStates) => ({
+        ...prevStates,
+        [key]: initialValue,
+      }));
+    }
+  }, []);
+
+  // Restore state from context when key or states change
+  useEffect(() => {
+    console.log("Restoring state for key:", key, states[key]);
+
+    if (states[key] !== undefined && states[key] !== state) {
+      setState(states[key]);
+      if (onRestore) {
+        onRestore(states[key]);
+      }
+    }
+  }, [states[key]]);
+
+  return [state, setSnapshotState] as const;
+}

npm-packages/react-api/src/lib/use-imc.tsx

@@ -1,6 +1,6 @@
-import { InterModuleCommunication } from "@pulse-editor/shared-utils";
 import {
   IMCMessageTypeEnum,
+  InterModuleCommunication,
   ReceiverHandlerMap,
 } from "@pulse-editor/shared-utils";
 import { useEffect, useState } from "react";
@@ -35,9 +35,8 @@ export default function useIMC(handlerMap: ReceiverHandlerMap) {
       await newImc.initOtherWindow(targetWindow);
       setImc(newImc);
 
-      newImc.sendMessage(IMCMessageTypeEnum.AppReady).then(() => {
-        setIsReady(true);
-      });
+      await newImc.sendMessage(IMCMessageTypeEnum.AppReady);
+      setIsReady(true);
     }
 
     initIMC();

npm-packages/react-api/src/main.ts

@@ -1,9 +1,9 @@
 import useAgentTools from "./hooks/agent/use-agent-tools";
 import useAgents from "./hooks/agent/use-agents";
-import useRegisterAction from "./hooks/editor/use-register-action";
 import useFileView from "./hooks/editor/use-file-view";
 import useLoading from "./hooks/editor/use-loading";
 import useNotification from "./hooks/editor/use-notification";
+import useRegisterAction from "./hooks/editor/use-register-action";
 import useTheme from "./hooks/editor/use-theme";
 import useToolbar from "./hooks/editor/use-toolbar";
 
@@ -14,20 +14,24 @@ import useSTT from "./hooks/ai-modality/use-stt";
 import useTTS from "./hooks/ai-modality/use-tts";
 import useVideoGen from "./hooks/ai-modality/use-video-gen";
 import usePulseEnv from "./hooks/editor/use-env";
+import useSnapshotState from "./hooks/editor/use-snapshot-state";
 import useTerminal from "./hooks/terminal/use-terminal";
+import SnapshotProvider from "./providers/snapshot-provider";
 
 export {
+  SnapshotProvider,
   useAgentTools,
   useAgents,
-  useRegisterAction,
   useFileView,
   useImageGen,
   useLLM,
   useLoading,
   useNotification,
   useOCR,
   usePulseEnv,
+  useRegisterAction,
   useSTT,
+  useSnapshotState,
   useTTS,
   useTerminal,
   useTheme,

npm-packages/react-api/src/providers/snapshot-provider.tsx

@@ -0,0 +1,63 @@
+import { IMCMessage, IMCMessageTypeEnum } from "@pulse-editor/shared-utils";
+import React, {
+  createContext,
+  Dispatch,
+  ReactNode,
+  SetStateAction,
+  useEffect,
+  useState,
+} from "react";
+import useIMC from "../lib/use-imc";
+
+export const SnapshotContext = createContext<SnapshotContextType | undefined>(
+  undefined
+);
+
+export type SnapshotContextType = {
+  states: { [key: string]: any };
+  setStates: Dispatch<SetStateAction<{ [key: string]: any }>>;
+};
+
+export default function SnapshotProvider({
+  children,
+}: {
+  children: ReactNode;
+}) {
+  const receiverHandlerMap = new Map<
+    IMCMessageTypeEnum,
+    (senderWindow: Window, message: IMCMessage) => Promise<any>
+  >([
+    [
+      IMCMessageTypeEnum.EditorAppStateSnapshotRestore,
+      async (senderWindow: Window, message: IMCMessage) => {
+        const { states } = message.payload;
+
+        // Update all states in the context
+        setStates((prev) => ({ ...states }));
+      },
+    ],
+    [
+      IMCMessageTypeEnum.EditorAppStateSnapshotSave,
+      async (senderWindow: Window, message: IMCMessage) => {
+        // Return current states in the context
+        return { states };
+      },
+    ],
+  ]);
+
+  const { imc, isReady } = useIMC(receiverHandlerMap);
+
+  const [states, setStates] = useState<{ [key: string]: any }>({});
+
+  useEffect(() => {
+    if (isReady) {
+      imc?.updateReceiverHandlerMap(receiverHandlerMap);
+    }
+  }, [isReady, states]);
+
+  return (
+    <SnapshotContext.Provider value={{ states, setStates }}>
+      {children}
+    </SnapshotContext.Provider>
+  );
+}

npm-packages/shared-utils/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @pulse-editor/shared-utils
 
+## 0.1.1-alpha.46
+
+### Patch Changes
+
+- Add app state snapshot during import & export
+
 ## 0.1.1-alpha.45
 
 ### Patch Changes