added code for sandpack console

.nvmrc

@@ -1 +1 @@
-12.22.0
+12.16.1

beta/src/components/MDX/Sandpack/Console.tsx

@@ -0,0 +1,133 @@
+import cn from 'classnames';
+import * as React from 'react';
+import {IconChevron} from 'components/Icon/IconChevron';
+
+import {SandpackCodeViewer, useSandpack} from '@codesandbox/sandpack-react';
+import type {SandpackMessageConsoleMethods} from '@codesandbox/sandpack-client';
+
+const getType = (
+  message: SandpackMessageConsoleMethods
+): 'info' | 'warning' | 'error' => {
+  if (message === 'log' || message === 'info') {
+    return 'info';
+  }
+
+  if (message === 'warn') {
+    return 'warning';
+  }
+
+  return 'error';
+};
+
+type ConsoleData = Array<{
+  data: Array<string | Record<string, string>>;
+  id: string;
+  method: SandpackMessageConsoleMethods;
+}>;
+
+const MAX_MESSAGE_COUNT = 100;
+
+export const SandpackConsole: React.FC = () => {
+  const {listen} = useSandpack();
+  const [logs, setLogs] = React.useState<ConsoleData>([]);
+  const wrapperRef = React.useRef<HTMLDivElement>(null);
+
+  React.useEffect(() => {
+    const unsubscribe = listen((message) => {
+      if (message.type === 'start') {
+        setLogs([]);
+      }
+
+      if (message.type === 'console' && message.codesandbox) {
+        setLogs((prev) => {
+          const messages = [...prev, ...message.log];
+          messages.slice(Math.max(0, messages.length - MAX_MESSAGE_COUNT));
+
+          return messages;
+        });
+      }
+    });
+
+    return unsubscribe;
+  }, [listen]);
+
+  const [showConsole, toggleConsole] = React.useState(false);
+
+  React.useEffect(() => {
+    if (wrapperRef.current) {
+      wrapperRef.current.scrollTop = wrapperRef.current.scrollHeight;
+    }
+  }, [logs]);
+
+  return (
+    <div
+      className={cn(
+        'absolute dark:border-gray-700 bg-white dark:bg-gray-95 border-t  bottom-0 w-full',
+        !!!logs.length && 'cursor-not-allowed'
+      )}>
+      <div className="flex justify-between h-8 items-center">
+        <div onClick={() => !!logs.length && toggleConsole(!showConsole)}>
+          <IconChevron displayDirection={showConsole ? 'down' : 'right'} />
+        </div>
+        <p className="p-1 text-md">console ({logs.length})</p>
+        <button
+          className={cn('p-1', !!!logs.length && 'cursor-not-allowed')}
+          onClick={() => {
+            setLogs([]);
+            toggleConsole(false);
+          }}>
+          <svg
+            viewBox="0 0 24 24"
+            width="18"
+            height="18"
+            stroke="currentColor"
+            strokeWidth="2"
+            fill="none"
+            strokeLinecap="round"
+            strokeLinejoin="round">
+            <circle cx="12" cy="12" r="10"></circle>
+            <line x1="4.93" y1="4.93" x2="19.07" y2="19.07"></line>
+          </svg>
+        </button>
+      </div>
+      {showConsole && (
+        <div className="w-full h-full border-y bg-white dark:border-gray-700 dark:bg-gray-95 dark:text-white">
+          <div className="max-h-52 h-auto overflow-auto" ref={wrapperRef}>
+            {logs.map(({data, id, method}) => {
+              return (
+                <p
+                  key={id}
+                  className={cn(
+                    'border-y border dark:border-gray-700 text-md p-1 pl-2',
+                    `console-${getType(method)}`
+                  )}>
+                  <span className={cn('console-message')}>
+                    {data.map((msg, index) => {
+                      if (typeof msg === 'string') {
+                        return <span key={`${msg}-${index}`}>{msg}</span>;
+                      }
+
+                      const children = JSON.stringify(msg);
+
+                      return (
+                        <span
+                          className={cn('console-span')}
+                          key={`${msg}-${index}`}>
+                          <SandpackCodeViewer
+                            initMode="user-visible"
+                            // fileType="js"
+                            code={children}
+                          />
+                        </span>
+                      );
+                    })}
+                  </span>
+                </p>
+              );
+            })}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};

beta/src/components/MDX/Sandpack/CustomPreset.tsx

@@ -11,6 +11,7 @@ import {
   SandpackThemeProvider,
   SandpackReactDevTools,
 } from '@codesandbox/sandpack-react';
+import {SandpackConsole} from './Console';
 import scrollIntoView from 'scroll-into-view-if-needed';
 import cn from 'classnames';
 
@@ -23,10 +24,12 @@ import {useSandpackLint} from './useSandpackLint';
 export function CustomPreset({
   isSingleFile,
   showDevTools,
+  showConsole,
   onDevToolsLoad,
   devToolsLoaded,
 }: {
   isSingleFile: boolean;
+  showConsole: boolean;
   showDevTools: boolean;
   devToolsLoaded: boolean;
   onDevToolsLoad: () => void;
@@ -66,11 +69,14 @@ export function CustomPreset({
               showRunButton={false}
               extensions={lintExtensions}
             />
-            <Preview
-              className="order-last xl:order-2"
-              isExpanded={isExpanded}
-              lintErrors={lintErrors}
-            />
+            <div className="sp-stack h-full">
+              <Preview
+                className="h-full"
+                isExpanded={isExpanded}
+                lintErrors={lintErrors}
+              />
+              {showConsole && <SandpackConsole />}
+            </div>
             {isExpandable && (
               <button
                 translate="yes"

beta/src/components/MDX/Sandpack/SandpackRoot.tsx

@@ -4,7 +4,6 @@
 
 import * as React from 'react';
 import {SandpackProvider} from '@codesandbox/sandpack-react';
-import {SandpackLogLevel} from '@codesandbox/sandpack-client';
 import {CustomPreset} from './CustomPreset';
 import {createFileMap} from './createFileMap';
 
@@ -15,6 +14,7 @@ type SandpackProps = {
   autorun?: boolean;
   setup?: SandpackSetup;
   showDevTools?: boolean;
+  showConsole?: boolean;
 };
 
 const sandboxStyle = `
@@ -64,7 +64,13 @@ ul {
 `.trim();
 
 function SandpackRoot(props: SandpackProps) {
-  let {children, setup, autorun = true, showDevTools = false} = props;
+  let {
+    children,
+    setup,
+    autorun = true,
+    showDevTools = false,
+    showConsole = true,
+  } = props;
   const [devToolsLoaded, setDevToolsLoaded] = React.useState(false);
   let codeSnippets = React.Children.toArray(children) as React.ReactElement[];
   let isSingleFile = true;
@@ -83,12 +89,11 @@ function SandpackRoot(props: SandpackProps) {
         customSetup={{...setup, files: files}}
         autorun={autorun}
         initMode="user-visible"
-        initModeObserverOptions={{rootMargin: '1400px 0px'}}
-        bundlerURL="https://22530bfe.sandpack-bundler.pages.dev"
-        logLevel={SandpackLogLevel.None}>
+        initModeObserverOptions={{rootMargin: '1400px 0px'}}>
         <CustomPreset
           isSingleFile={isSingleFile}
           showDevTools={showDevTools}
+          showConsole={showConsole}
           onDevToolsLoad={() => setDevToolsLoaded(true)}
           devToolsLoaded={devToolsLoaded}
         />

beta/src/pages/apis/usecontext.md

@@ -184,6 +184,7 @@ In this example, the `MyApp` component holds a state variable which is then pass
 <Sandpack>
 
 ```js
+
 import { createContext, useContext, useState } from 'react';
 
 const ThemeContext = createContext(null);