fix(SandpackConsole): clear logs based on maxMessageCount option (#866)

codesandbox · Apr 1, 2023 · c8afd3e · c8afd3e · vercel · Apr 1, 2023
1 parent 3bb89b4
commit c8afd3e
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 3 deletions.
diff --git a/sandpack-react/src/components/Console/Console.stories.tsx b/sandpack-react/src/components/Console/Console.stories.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useState } from "react";
 
 import { SandpackCodeEditor, SandpackPreview } from "..";
 import { SandpackProvider, SandpackLayout, Sandpack } from "../..";
@@ -182,3 +182,45 @@ console.log("foo");`,
     </SandpackLayout>
   </SandpackProvider>
 );
+
+export const MaxMessageCount = () => {
+  const [mode, setMode] = useState('client');
+  const [maxMessageCount, setMaxMessageCount] = useState(5);
+
+  return (
+    <>
+      <SandpackProvider
+        key={mode}
+        files={{
+          "/index.js": `new Array(10).fill('').forEach((_, i) => console.log(i));`,
+          "/package.json": JSON.stringify({
+            scripts: { start: "node index.js" },
+          }),
+        }}
+        options={{ visibleFiles: ["/index.js"], recompileDelay: 500 }}
+        template={mode === 'client' ? 'vanilla' : 'node'}
+      >
+        <SandpackLayout>
+          <SandpackCodeEditor />
+          <SandpackConsole standalone maxMessageCount={Number(maxMessageCount)} />
+        </SandpackLayout>
+        <div style={{
+          marginTop: 32,
+          display: 'flex',
+          flexDirection: 'column',
+          gap: 8,
+          justifyItems: 'left',
+          width: 'fit-content'
+        }}>
+          <button onClick={() => setMode(mode === 'client' ? 'server' : 'client')}>
+            Toggle mode: {mode}
+          </button>
+          <label style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
+            <span>Max Message Count</span>
+            <input type="number" value={maxMessageCount} onChange={e => setMaxMessageCount(+e.target.value)} />
+          </label>
+        </div>
+      </SandpackProvider>
+    </>
+  );
+}
diff --git a/sandpack-react/src/components/Console/useSandpackConsole.ts b/sandpack-react/src/components/Console/useSandpackConsole.ts
@@ -67,7 +67,7 @@ export const useSandpackConsole = ({
             }
           );
 
-          while (messages.length > MAX_MESSAGE_COUNT) {
+          while (messages.length > maxMessageCount) {
             messages.shift();
           }
 

diff --git a/sandpack-react/src/hooks/useSandpackShellStdout.ts b/sandpack-react/src/hooks/useSandpackShellStdout.ts
@@ -38,7 +38,7 @@ export const useSandpackShellStdout = ({
             { data: message.payload.data!, id: generateRandomId() },
           ];
 
-          while (messages.length > MAX_MESSAGE_COUNT) {
+          while (messages.length > maxMessageCount) {
             messages.shift();
           }