perf: render messages concurrently

Author: ItzDerock

src/generator/index.tsx

@@ -9,6 +9,7 @@ import { revealSpoiler, scrollToMessage } from '../static/client';
 import { readFileSync } from 'fs';
 import path from 'path';
 import { renderToString } from '@derockdev/discord-components-core/hydrate';
+import { isDefined } from '../utils/utils';
 
 // read the package.json file and get the @derockdev/discord-components-core version
 let discordComponentsVersion = '^3.6.1';
@@ -39,18 +40,19 @@ export type RenderMessageContext = {
 
 export default async function renderMessages({ messages, channel, callbacks, ...options }: RenderMessageContext) {
   const profiles = buildProfiles(messages);
-  const chatBody: React.ReactElement[] = [];
-
-  for (const message of messages) {
-    const rendered = await renderMessage(message, {
-      messages,
-      channel,
-      callbacks,
-      ...options,
-    });
 
-    if (rendered) chatBody.push(rendered);
-  }
+  const chatBody = (
+    await Promise.all(
+      messages.map((message) =>
+        renderMessage(message, {
+          messages,
+          channel,
+          callbacks,
+          ...options,
+        })
+      )
+    )
+  ).filter(isDefined);
 
   const elements = (
     <DiscordMessages style={{ minHeight: '100vh' }}>

src/index.ts

@@ -55,7 +55,11 @@ export async function generateFromMessages<T extends ExportReturnType = ExportRe
 
   // get the time it took to render the messages
   // const renderTime = process.hrtime(startTime);
-  // console.log(`[discord-html-transcripts] Rendered ${transformedMessages.length} messages in ${renderTime[0]}s ${renderTime[1] / 1000000}ms`);
+  // console.log(
+  //   `[discord-html-transcripts] Rendered ${transformedMessages.length} messages in ${renderTime[0]}s ${
+  //     renderTime[1] / 1000000
+  //   }ms`
+  // );
 
   // return the html in the specified format
   if (options.returnType === ExportReturnType.Buffer) {

src/utils/utils.ts

@@ -2,6 +2,10 @@ import type { APIMessageComponentEmoji, Emoji } from 'discord.js';
 import { request } from 'undici';
 import twemoji from 'twemoji';
 
+export function isDefined<T>(value: T | undefined | null): value is T {
+  return value !== undefined && value !== null;
+}
+
 export function formatBytes(bytes: number, decimals = 2) {
   if (bytes === 0) return '0 Bytes';