[Preview] Separate out functions for react and immutable (#5014)

flow-typed/debugger-html.js

@@ -70,17 +70,6 @@ declare module "debugger-html" {
     condition: ?string
   };
 
-  /**
-   * Breakpoint sync data
-   *
-   * @memberof types
-   * @static
-   */
-  declare type BreakpointSyncData = {
-    previousLocation: Location | null,
-    breakpoint: Breakpoint
-  };
-
   /**
    * Breakpoint Result is the return from an add/modify Breakpoint request
    *
@@ -224,7 +213,8 @@ declare module "debugger-html" {
     url: string,
     fileName: string,
     message: string,
-    name: string
+    name: string,
+    ownProperties?: Object
   };
 
   /**
@@ -239,7 +229,7 @@ declare module "debugger-html" {
     frozen: boolean,
     isGlobal: boolean,
     ownPropertyLength: number,
-    preview: PreviewGrip,
+    preview?: PreviewGrip,
     sealed: boolean,
     type: string
   };

src/actions/breakpoints/syncBreakpoint.js

@@ -15,13 +15,18 @@ import { getGeneratedLocation } from "../../utils/source-maps";
 import { originalToGeneratedId } from "devtools-source-map";
 import { getSource } from "../../selectors";
 import type {
-  BreakpointSyncData,
   Location,
   ASTLocation,
   PendingBreakpoint,
-  SourceId
+  SourceId,
+  Breakpoint
 } from "debugger-html";
 
+type BreakpointSyncData = {
+  previousLocation: Location | null,
+  breakpoint: Breakpoint
+};
+
 async function makeScopedLocation(
   { name, offset }: ASTLocation,
   location: Location,

src/actions/preview.js

@@ -1,7 +1,12 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at <http://mozilla.org/MPL/2.0/>. */
+
 // @flow
 
 import { findBestMatchExpression } from "../utils/ast";
 import { getTokenLocation } from "../utils/editor";
+import { isReactComponent, isImmutable } from "../utils/preview";
 import { isGeneratedId } from "devtools-source-map";
 import { PROMISE } from "./utils/middleware/promise";
 
@@ -20,14 +25,41 @@ import { isEqual } from "lodash";
 import type { ThunkArgs } from "./types";
 import type { AstLocation } from "../workers/parser";
 
-const extraProps = {
-  react: { displayName: "this._reactInternalInstance.getName()" },
-  immutable: {
-    isImmutable: exp => `Immutable.Iterable.isIterable(${exp})`,
-    entries: exp => `${exp}.toJS()`,
-    type: exp => `${exp}.constructor.name`
+async function getReactProps(evaluate) {
+  const reactDisplayName = await evaluate(
+    "this._reactInternalInstance.getName()"
+  );
+
+  return {
+    displayName: reactDisplayName.result
+  };
+}
+
+async function getImmutableProps(expression: string, evaluate) {
+  const immutableEntries = await evaluate((exp => `${exp}.toJS()`)(expression));
+
+  const immutableType = await evaluate(
+    (exp => `${exp}.constructor.name`)(expression)
+  );
+
+  return {
+    type: immutableType.result,
+    entries: immutableEntries.result
+  };
+}
+
+async function getExtraProps(expression, result, evaluate) {
+  const props = {};
+  if (isReactComponent(result)) {
+    props.react = await getReactProps(evaluate);
   }
-};
+
+  if (isImmutable(result)) {
+    props.immutable = await getImmutableProps(expression, evaluate);
+  }
+
+  return props;
+}
 
 export function updatePreview(target: HTMLElement, editor: any) {
   return ({ dispatch, getState, client, sourceMaps }: ThunkArgs) => {
@@ -101,13 +133,10 @@ export function setPreview(
     await dispatch({
       type: "SET_PREVIEW",
       [PROMISE]: (async function() {
-        let immutableType = null;
-        let immutableEntries = null;
-
         const source = getSelectedSource(getState());
         const symbols = getSymbols(getState(), source.toJS());
-
         const found = findBestMatchExpression(symbols, tokenPos, token);
+
         if (!found) {
           return;
         }
@@ -133,56 +162,19 @@ export function setPreview(
         }
 
         const selectedFrame = getSelectedFrame(getState());
-        const { result } = await client.evaluate(expression, {
-          frameId: selectedFrame.id
-        });
-
-        const reactDisplayName = await client.evaluate(
-          extraProps.react.displayName,
-          {
-            frameId: selectedFrame.id
-          }
+        const { result } = await client.evaluateInFrame(
+          selectedFrame.id,
+          expression
         );
 
-        const immutable = await client.evaluate(
-          extraProps.immutable.isImmutable(expression),
-          {
-            frameId: selectedFrame.id
-          }
-        );
-
-        if (immutable.result === true) {
-          immutableEntries = await client.evaluate(
-            extraProps.immutable.entries(expression),
-            {
-              frameId: selectedFrame.id
-            }
-          );
-
-          immutableType = await client.evaluate(
-            extraProps.immutable.type(expression),
-            {
-              frameId: selectedFrame.id
-            }
-          );
-        }
-
-        const extra = {
-          react: {
-            displayName: reactDisplayName.result
-          },
-          immutable: {
-            isImmutable:
-              immutable.result && immutable.result.type !== "undefined",
-            type: immutableType && immutableType.result,
-            entries: immutableEntries && immutableEntries.result
-          }
-        };
-
         if (result === undefined) {
           return;
         }
 
+        const extra = await getExtraProps(expression, result, expr =>
+          client.evaluateInFrame(selectedFrame.id, expr)
+        );
+
         return {
           expression,
           result,

src/actions/tests/__snapshots__/preview.spec.js.snap

@@ -1,19 +1,52 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`setPreview member expression 1`] = `
+exports[`setPreview Immutable list 1`] = `
 Object {
   "cursorPos": undefined,
-  "expression": "this.bazz",
+  "expression": "list",
   "extra": Object {
     "immutable": Object {
-      "entries": null,
-      "isImmutable": undefined,
-      "type": null,
+      "entries": Object {
+        "actor": "bazz",
+        "preview": Object {},
+      },
+      "type": "Listless",
     },
-    "react": Object {
-      "displayName": undefined,
+  },
+  "location": Object {
+    "end": Object {
+      "column": 4,
+      "line": 1,
+    },
+    "start": Object {
+      "column": 0,
+      "line": 1,
+    },
+  },
+  "result": Object {
+    "actor": "server1.conn34.child2/obj341",
+    "preview": Object {
+      "ownProperties": Object {
+        "__altered": Object {},
+        "__hash": Object {},
+        "__ownerID": Object {},
+        "_root": Object {},
+      },
     },
   },
+  "tokenPos": Object {
+    "column": 4,
+    "line": 1,
+  },
+  "updating": false,
+}
+`;
+
+exports[`setPreview member expression 1`] = `
+Object {
+  "cursorPos": undefined,
+  "expression": "this.bazz",
+  "extra": Object {},
   "location": Object {
     "end": Object {
       "column": 37,
@@ -36,20 +69,46 @@ Object {
 }
 `;
 
-exports[`setPreview this 1`] = `
+exports[`setPreview react instance 1`] = `
 Object {
   "cursorPos": undefined,
   "expression": "this",
   "extra": Object {
-    "immutable": Object {
-      "entries": null,
-      "isImmutable": undefined,
-      "type": null,
-    },
     "react": Object {
-      "displayName": undefined,
+      "displayName": "Foo",
+    },
+  },
+  "location": Object {
+    "end": Object {
+      "column": 32,
+      "line": 1,
+    },
+    "start": Object {
+      "column": 28,
+      "line": 1,
+    },
+  },
+  "result": Object {
+    "actor": "server1.conn34.child2/obj341",
+    "preview": Object {
+      "ownProperties": Object {
+        "_reactInternalInstance": Object {},
+      },
     },
   },
+  "tokenPos": Object {
+    "column": 30,
+    "line": 1,
+  },
+  "updating": false,
+}
+`;
+
+exports[`setPreview this 1`] = `
+Object {
+  "cursorPos": undefined,
+  "expression": "this",
+  "extra": Object {},
   "location": Object {
     "end": Object {
       "column": 32,

src/actions/tests/pause.spec.js

@@ -2,6 +2,7 @@ import {
   actions,
   selectors,
   createStore,
+  waitForState,
   makeSource
 } from "../../utils/test-head";
 
@@ -83,19 +84,20 @@ describe("pause", () => {
 
     it("resuming - will re-evaluate watch expressions", async () => {
       const store = createStore(mockThreadClient);
-      const { dispatch } = store;
+      const { dispatch, getState } = store;
       const mockPauseInfo = createPauseInfo();
 
       await dispatch(actions.newSource(makeSource("foo1")));
-      await dispatch(actions.addExpression("foo"));
+
+      dispatch(actions.addExpression("foo"));
+      await waitForState(store, state => selectors.getExpression(state, "foo"));
 
       mockThreadClient.evaluate = () => new Promise(r => r("YAY"));
       await dispatch(actions.paused(mockPauseInfo));
 
       await dispatch(actions.resumed());
-      expect(selectors.getExpression(store.getState(), "foo").value).toEqual(
-        "YAY"
-      );
+      const expression = selectors.getExpression(getState(), "foo");
+      expect(expression.value).toEqual("YAY");
     });
   });
 });