Port TW Monitor Changes (#178)

Author: SharkPool-SP

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';
 
@@ -37,7 +38,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 function replacer(_, 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
@@ -64,8 +53,6 @@ export default function ({id, spriteName, opcode, params, value, vm}) {
                 // check if this is a pure object or custom display
                 if (typeof (item.toListItem || value.toMonitorContent || item.toReporterContent) === 'function') {
                     value[i].isHTML = true;
-                } else {
-                    value[i] = JSON.stringify(item, circularReplacer());
                 }
             }
         }
@@ -78,9 +65,6 @@ export default function ({id, spriteName, opcode, params, value, vm}) {
             value = value.toMonitorContent
               ? value.toMonitorContent() : value.toReporterContent();
             isHTML = true;
-        } else if (!Array.isArray(value)) {
-            // only applies to objects
-            value = JSON.stringify(value, circularReplacer());
         }
     }
 

src/lib/tw-safe-stringify.js

@@ -0,0 +1,47 @@
+/**
+ * Since PenguinMod has custom monitor displays,
+ * we have to handle that too when sanitizing.
+ */
+const isCustomMonitor = (value) => {
+  if (
+    typeof (item.toListItem || value.toMonitorContent || item.toReporterContent) === 'function'
+  ) {
+    return true;
+  } else {
+    return false
+  }
+}
+
+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
+    && !isCustomMonitor(input)
+  ) {
+    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 };