Rewrite #1113

- It did an unnecessary extra list copy by using .map. Might've caused extra re-renders though not sure.
- Did not stringify null
- Had a lot of lint errors though we don't enforce that here

Author: GarboMuffin

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

@@ -5,7 +5,6 @@ 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';
 
@@ -37,7 +36,7 @@ const MonitorList = props => (
                         params={monitorData.params}
                         spriteName={monitorData.spriteName}
                         targetId={monitorData.targetId}
-                        value={sanitizeVariableType(monitorData.value, monitorData.mode)}
+                        value={monitorData.value}
                         width={monitorData.width}
                         x={monitorData.x}
                         y={monitorData.y}

src/lib/monitor-adapter.js

@@ -1,4 +1,5 @@
 import OpcodeLabels from './opcode-labels.js';
+import {safeStringify} from './tw-safe-stringify.js';
 
 const isUndefined = a => typeof a === 'undefined';
 
@@ -32,20 +33,17 @@ export default function ({id, spriteName, opcode, params, value, vm}) {
         value = Number(value.toFixed(6));
     }
 
-    // Turn the value to a string, to handle boolean values
-    if (typeof value === 'boolean') {
-        value = value.toString();
-    }
-
-    // Lists can contain booleans, which should also be turned to strings
+    // Anything that isn't a string or number, such as a boolean or object, should be converted to string.
     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();
+            if (typeof item !== 'string' || typeof item !== 'number') {
+                value[i] = safeStringify(item);
             }
         }
+    } else if (typeof value !== 'string' || typeof value !== 'number') {
+        value = safeStringify(value);
     }
 
     return {id, label, category, value};

src/lib/tw-safe-stringify.js

@@ -1,30 +1,24 @@
 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 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 sanitizeVariableType = (input, type) => {
-  if (type === "list") {
-    return input.map(item => sanitize(item));
-  } else {
-    return sanitize(input);
-  }
+/**
+ * Safely stringify, properly handling circular relations.
+ * @param {unknown} input Any value
+ * @returns {string} A stringified version of the input.
+ */
+export const safeStringify = input => {
+    if (typeof input === 'object' && input !== null) {
+        return JSON.stringify(input, circularReplacer());
+    }
+    return `${input}`;
 };
-
-export { sanitizeVariableType };