expose a few state props for debugging (#1008)

* expose a few state props for debugging

* rename h.appState & add h.setState

* support setting elements

src/components/App.tsx

@@ -64,7 +64,7 @@ import {
 import { KEYS, isArrowKey } from "../keys";
 
 import { findShapeByKey, shapesShortcutKeys } from "../shapes";
-import { createHistory } from "../history";
+import { createHistory, SceneHistory } from "../history";
 
 import ContextMenu from "./ContextMenu";
 
@@ -113,33 +113,6 @@ function withBatchedUpdates<
   }) as TFunction;
 }
 
-// -----------------------------------------------------------------------------
-// TEST HOOKS
-// -----------------------------------------------------------------------------
-
-declare global {
-  interface Window {
-    __TEST__: {
-      elements: readonly ExcalidrawElement[];
-      appState: AppState;
-    };
-  }
-}
-
-if (process.env.NODE_ENV === "test") {
-  window.__TEST__ = {} as Window["__TEST__"];
-}
-
-// -----------------------------------------------------------------------------
-
-if (process.env.NODE_ENV === "test") {
-  Object.defineProperty(window.__TEST__, "elements", {
-    get() {
-      return globalSceneState.getAllElements();
-    },
-  });
-}
-
 const { history } = createHistory();
 
 let cursorX = 0;
@@ -476,11 +449,23 @@ export class App extends React.Component<any, AppState> {
 
   private unmounted = false;
   public async componentDidMount() {
-    if (process.env.NODE_ENV === "test") {
-      Object.defineProperty(window.__TEST__, "appState", {
-        configurable: true,
-        get: () => {
-          return this.state;
+    if (
+      process.env.NODE_ENV === "test" ||
+      process.env.NODE_ENV === "development"
+    ) {
+      const setState = this.setState.bind(this);
+      Object.defineProperties(window.h, {
+        state: {
+          configurable: true,
+          get: () => {
+            return this.state;
+          },
+        },
+        setState: {
+          configurable: true,
+          value: (...args: Parameters<typeof setState>) => {
+            return this.setState(...args);
+          },
         },
       });
     }
@@ -2447,3 +2432,39 @@ export class App extends React.Component<any, AppState> {
     }
   }
 }
+
+// -----------------------------------------------------------------------------
+// TEST HOOKS
+// -----------------------------------------------------------------------------
+
+declare global {
+  interface Window {
+    h: {
+      elements: readonly ExcalidrawElement[];
+      state: AppState;
+      history: SceneHistory;
+    };
+  }
+}
+
+if (process.env.NODE_ENV === "test" || process.env.NODE_ENV === "development") {
+  window.h = {} as Window["h"];
+
+  Object.defineProperties(window.h, {
+    elements: {
+      get() {
+        return globalSceneState.getAllElements();
+      },
+      set(elements: ExcalidrawElement[]) {
+        return globalSceneState.replaceAllElements(elements);
+      },
+    },
+    history: {
+      get() {
+        return history;
+      },
+    },
+  });
+}
+
+// -----------------------------------------------------------------------------