From 84ecf54ffb98c8de5c562e72d97e1a5368af01b3 Mon Sep 17 00:00:00 2001
From: Nicolas D'Amours <nicolas@folkshr.com>
Date: Mon, 17 Apr 2023 11:31:16 -0400
Subject: [PATCH] fix(dev): chunk message data

Added chunking to bridge `send` function, in the electron shell backend, to prevent crash when sending very large payload.
---
 packages/shared-utils/src/util.ts      | 20 ++++++++++++++++++++
 packages/shell-electron/src/backend.js |  9 +++++++--
 2 files changed, 27 insertions(+), 2 deletions(-)

diff --git a/packages/shared-utils/src/util.ts b/packages/shared-utils/src/util.ts
index 8a1f20bfc..d8592619a 100644
--- a/packages/shared-utils/src/util.ts
+++ b/packages/shared-utils/src/util.ts
@@ -769,3 +769,23 @@ export function copyToClipboard (state) {
 export function isEmptyObject (obj) {
   return obj === UNDEFINED || !obj || Object.keys(obj).length === 0
 }
+
+/**
+ * chunk an array into smaller chunk of given size.
+ * @see https://stackoverflow.com/a/37826698
+ * @param array
+ * @param size
+ */
+export function chunk (array: unknown[], size: number): unknown[][] {
+  return array.reduce((resultArray, item, index) => {
+    const chunkIndex = Math.floor(index / size)
+
+    if (!resultArray[chunkIndex]) {
+      resultArray[chunkIndex] = [] // start a new chunk
+    }
+
+    resultArray[chunkIndex].push(item)
+
+    return resultArray
+  }, []) as unknown[][]
+}
diff --git a/packages/shell-electron/src/backend.js b/packages/shell-electron/src/backend.js
index 9c8cf6113..5374738c2 100644
--- a/packages/shell-electron/src/backend.js
+++ b/packages/shell-electron/src/backend.js
@@ -1,13 +1,14 @@
 import io from 'socket.io-client'
 import { initBackend } from '@back'
 import { installToast } from '@back/toast'
-import { Bridge, target } from '@vue-devtools/shared-utils'
+import { Bridge, target, chunk } from '@vue-devtools/shared-utils'
 
 const host = target.__VUE_DEVTOOLS_HOST__ || 'http://localhost'
 const port = target.__VUE_DEVTOOLS_PORT__ !== undefined ? target.__VUE_DEVTOOLS_PORT__ : 8098
 const fullHost = port ? host + ':' + port : host
 const createSocket = target.__VUE_DEVTOOLS_SOCKET__ || io
 const socket = createSocket(fullHost)
+const MAX_DATA_CHUNK = 2000
 
 const connectedMessage = () => {
   if (target.__VUE_DEVTOOLS_TOAST__) {
@@ -45,7 +46,11 @@ const bridge = new Bridge({
     socket.on('vue-message', data => fn(data))
   },
   send (data) {
-    socket.emit('vue-message', data)
+    const chunks = chunk(data, MAX_DATA_CHUNK)
+
+    for (const chunk of chunks) {
+      socket.emit('vue-message', chunk)
+    }
   },
 })