Make sure we subarray (not slice) buffers to avoid copies

Buffer _should_ create views with slice() anyway, but Uint8Array does
not. The incompatibility means slice() is deprecated, and subarray() is
the correct way to do this that will not copy data in any scenarios.

Author: pimterry

src/components/view/stream-message-rows.tsx

@@ -62,7 +62,7 @@ export const StreamMessageCollapsedRow = React.memo((p: {
                 p.message.content
                 // Limit the length - no point showing huge messages here. On a typical UI, we show about
                 // 100 chars here, so this should give us a good bit of buffer
-                .slice(0, 200)
+                .subarray(0, 200)
             )
         }
     </CollapsedStreamContent>

src/model/events/content-types.ts

@@ -187,7 +187,7 @@ export function getCompatibleTypes(
     }
 
     // Examine the first char of the body, assuming it's ascii
-    const firstChar = body && body.slice(0, 1).toString('ascii');
+    const firstChar = body && body.subarray(0, 1).toString('ascii');
 
     // Allow optionally formatting non-JSON as JSON, if it looks like it might be
     if (firstChar === '{' || firstChar === '[') {

src/model/events/stream-message.ts

@@ -52,7 +52,7 @@ export class StreamMessage {
         }
 
         // prefix+JSON is very common, so we try to parse anything JSON-ish optimistically:
-        const startOfMessage = this.content.slice(0, 10).toString('utf-8').trim();
+        const startOfMessage = this.content.subarray(0, 10).toString('utf-8').trim();
         if (
             startOfMessage.includes('{') ||
             startOfMessage.includes('[') ||

src/services/ui-worker-formatters.ts

@@ -43,7 +43,7 @@ const WorkerFormatters = {
         // available by downloading the whole body.
         const needsTruncation = content.length > FIVE_MB;
         if (needsTruncation) {
-            content = content.slice(0, FIVE_MB)
+            content = content.subarray(0, FIVE_MB)
         }
 
         const formattedContent = bufferToHex(content);

src/util/buffer.ts

@@ -31,7 +31,7 @@ export function isProbablyUtf8(buffer: Buffer) {
         // decode everything up to that point.
 
         const lastUtf8IndexBefore1024 = buffer
-            .slice(1024, 1028) // 4 bytes should be enough - max length of UTF8 char
+            .subarray(1024, 1028) // 4 bytes should be enough - max length of UTF8 char
             .findIndex((byte) =>
                 (byte & 0xC0) != 0x80 // 0x80 === 0b10... => continuation byte
             );
@@ -40,7 +40,7 @@ export function isProbablyUtf8(buffer: Buffer) {
         if (lastUtf8IndexBefore1024 === -1) return false;
         const cleanEndOfUtf8Data = 1024 + lastUtf8IndexBefore1024;
 
-        dataToCheck = buffer.slice(0, cleanEndOfUtf8Data);
+        dataToCheck = buffer.subarray(0, cleanEndOfUtf8Data);
     } else {
         dataToCheck = buffer;
     }

src/util/protobuf.ts

@@ -66,7 +66,7 @@ export const extractProtobufFromGrpc = (input: Buffer, headers: Headers) => {
         const errorPrefix = `gRPC message #${msgIndex} @${offset}: `
         const compressionFlag = input.readUInt8();
         const length = input.readUInt32BE(1);
-        let message = input.slice(5, 5 + length);
+        let message = input.subarray(5, 5 + length);
         if (message.length != length) {
             throw new Error(`${errorPrefix}length of message is corrupted`);
         }
@@ -103,7 +103,7 @@ export const isProbablyGrpcProto = (input: Buffer, headers: Headers) => {
     }
     const compressionFlag = input.readUInt8();
     const length = input.readUInt32BE(1);
-    const firstMessage = input.slice(5, 5 + length);
+    const firstMessage = input.subarray(5, 5 + length);
     return length >= 2 &&  // at least two bytes for Protobuf message (tag & value)
         firstMessage.length == length &&
         (