fix(serialization): handle large objects and p5.Font serialization

Author: lirenjie95

client/modules/IDE/hooks/useHandleMessageEvent.js

@@ -14,6 +14,13 @@ export default function useHandleMessageEvent() {
   ) => {
     if (typeof obj !== 'object' || obj === null) return obj;
 
+    if (obj && obj.constructor && obj.constructor.name === 'p5.Font') {
+      return {
+        _type: 'p5.Font',
+        name: obj.name || 'Font',
+      };
+    }
+
     if (depth >= maxDepth) {
       if (seen.has(obj)) return '[Circular Reference]';
     }

client/utils/dispatcher.js

@@ -28,7 +28,7 @@ function notifyListener(message) {
 }
 
 function notifyFrames(message) {
-  const rawMessage = JSON.parse(JSON.stringify(message));
+  const rawMessage = processMessage(message);
   Object.keys(frames).forEach((frameId) => {
     const { frame, origin } = frames[frameId];
     if (frame && frame.postMessage) {
@@ -37,12 +37,35 @@ function notifyFrames(message) {
   });
 }
 
+// Helper function to handle p5.Font objects
+const handleP5Font = (obj) => {
+  if (obj && obj.constructor && obj.constructor.name === 'p5.Font') {
+    return {
+      _type: 'p5.Font',
+      name: obj.name || 'Font',
+    };
+  }
+  return obj;
+};
+
+// Message processing logic to handle nested objects and arrays
+const processMessage = (message) => {
+  if (typeof message === 'object' && message !== null) {
+    if (Array.isArray(message)) {
+      return message.map(processMessage);
+    }
+    return Object.fromEntries(
+      Object.entries(message).map(([key, value]) => [
+        key,
+        processMessage(handleP5Font(value))
+      ])
+    );
+  }
+  return message;
+};
+
 export function dispatchMessage(message) {
   if (!message) return;
-
-  // maybe one day i will understand why in the codesandbox
-  // code they leave notifyListeners in here?
-  // notifyListener(message);
   notifyFrames(message);
 }
 

client/utils/previewEntry.js

@@ -17,11 +17,27 @@ window.objectPaths[blobPath] = 'index.html';
 
 window.loopProtect = loopProtect;
 
+// Helper function to handle p5.Font objects
+const handleP5Font = (obj) => {
+  if (obj && obj.constructor && obj.constructor.name === 'p5.Font') {
+    return {
+      _type: 'p5.Font',
+      name: obj.name || 'Font',
+    };
+  }
+  return obj;
+};
+
 const consoleBuffer = [];
 const LOGWAIT = 500;
 Hook(window.console, (log) => {
+  // Process p5.Font objects in logs
+  const processedLog = {
+    ...log,
+    data: log.data ? log.data.map(handleP5Font) : log.data
+  };
   consoleBuffer.push({
-    log
+    log: processedLog
   });
 });
 setInterval(() => {