Completely rework monitor handling of Object and Arrays

src/components/monitor-list/monitor-list.jsx

@@ -5,6 +5,7 @@ import Monitor from '../../containers/monitor.jsx';
 import PropTypes from 'prop-types';
 import {OrderedMap} from 'immutable';
 import {stageSizeToTransform} from '../../lib/screen-utils';
+import {sanitizeVariableType} from '../../lib/tw-safe-stringify.js';
 
 import styles from './monitor-list.css';
 
@@ -36,7 +37,7 @@ const MonitorList = props => (
                         params={monitorData.params}
                         spriteName={monitorData.spriteName}
                         targetId={monitorData.targetId}
-                        value={monitorData.value}
+                        value={sanitizeVariableType(monitorData.value, monitorData.mode)}
                         width={monitorData.width}
                         x={monitorData.x}
                         y={monitorData.y}

src/lib/monitor-adapter.js

@@ -2,17 +2,6 @@ import OpcodeLabels from './opcode-labels.js';
 
 const isUndefined = a => typeof a === 'undefined';
 
-const circularReplacer = () => {
-    const stack = new Set();
-    return (_, value) => {
-        if (typeof value === 'object' && value !== null) {
-            if (stack.has(value)) return Array.isArray(value) ? '[...]' : '{...}';
-            stack.add(value);
-        }
-        return value;
-    };
-};
-
 /**
  * Convert monitors from VM format to what the GUI needs to render.
  * - Convert opcode to a label and a category
@@ -48,21 +37,13 @@ export default function ({id, spriteName, opcode, params, value, vm}) {
         value = value.toString();
     }
 
-    // Turn the value to a string, to handle JSON values
-    // do not convert arrays as it will be confused for lists
-    if (typeof value === 'object' && !Array.isArray(value)) {
-        value = JSON.stringify(value, circularReplacer());
-    }
-
-    // Lists can contain booleans or Objects, which should also be turned to strings
+    // Lists can contain booleans, which should also be turned to strings
     if (Array.isArray(value)) {
         value = value.slice();
         for (let i = 0; i < value.length; i++) {
             const item = value[i];
             if (typeof item === 'boolean') {
                 value[i] = item.toString();
-            } else if (typeof value[i] === 'object' && !Array.isArray(value[i])) {
-                value[i] = JSON.stringify(item, circularReplacer());
             }
         }
     }

src/lib/tw-safe-stringify.js

@@ -0,0 +1,30 @@
+const circularReplacer = () => {
+  const seen = new WeakSet();
+  return (_, value) => {
+    if (typeof value === 'object' && value !== null) {
+      if (seen.has(value)) {
+        return Array.isArray(value) ? '[...]' : '{...}';
+      }
+      seen.add(value);
+    }
+    return value;
+  };
+};
+
+const sanitize = (input) => {
+  if (typeof input === "object" && input !== null) {
+    return JSON.stringify(input, circularReplacer());
+  } else {
+    return input;
+  }
+};
+
+const sanitizeVariableType = (input, type) => {
+  if (type === "list") {
+    return input.map(item => sanitize(item));
+  } else {
+    return sanitize(input);
+  }
+};
+
+export { sanitizeVariableType };