Let monitors handle objects properly

Author: CubesterYT

src/common/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 default sanitizeVariableType;

src/scaffolding/monitor.js

@@ -4,6 +4,8 @@ import styles from './style.css';
 import {readAsText} from '../common/readers';
 import downloadBlob from './download';
 
+import sanitizeVariableType from '../common/safe-stringify';
+
 class Monitor {
   constructor (parent, monitor) {
     this.parent = parent;
@@ -194,7 +196,7 @@ class VariableMonitor extends Monitor {
       return;
     }
 
-    let value = monitor.get('value');
+    let value = sanitizeVariableType(monitor.get('value'), '');
     if (typeof value === 'number') {
       value = Number(value.toFixed(6));
     }
@@ -547,7 +549,7 @@ class ListMonitor extends Monitor {
     this.root.style.width = `${this.width}px`;
     this.root.style.height = `${this.height}px`;
 
-    this.updateValue(monitor.get('value'));
+    this.updateValue(sanitizeVariableType(monitor.get('value'), 'list'));
   }
 
   createRow (index) {