diff --git a/sandpack-react/src/components/Console/Console.stories.tsx b/sandpack-react/src/components/Console/Console.stories.tsx index dee1e0ef0..6824820c1 100644 --- 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");`, ); + +export const MaxMessageCount = () => { + const [mode, setMode] = useState('client'); + const [maxMessageCount, setMaxMessageCount] = useState(5); + + return ( + <> + console.log(i));`, + "/package.json": JSON.stringify({ + scripts: { start: "node index.js" }, + }), + }} + options={{ visibleFiles: ["/index.js"], recompileDelay: 500 }} + template={mode === 'client' ? 'vanilla' : 'node'} + > + + + + +
+ + +
+
+ + ); +} diff --git a/sandpack-react/src/components/Console/useSandpackConsole.ts b/sandpack-react/src/components/Console/useSandpackConsole.ts index b6a0c13f0..d8b88dae5 100644 --- 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 index f3531a764..67d7b02d6 100644 --- 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(); }