console

sandpack-client/src/types.ts

@@ -112,6 +112,19 @@ export interface BaseSandpackMessage {
   codesandbox?: boolean;
 }
 
+export type SandpackConsoleMethods =
+  | "log"
+  | "debug"
+  | "info"
+  | "warn"
+  | "error"
+  | "table"
+  | "clear"
+  | "time"
+  | "timeEnd"
+  | "count"
+  | "assert";
+
 export type SandpackMessage = BaseSandpackMessage &
   (
     | {
@@ -191,4 +204,12 @@ export type SandpackMessage = BaseSandpackMessage &
     | {
         type: "activate-react-devtools";
       }
+    | {
+        type: "console";
+        log: Array<{
+          method: SandpackConsoleMethods;
+          id: string;
+          data: string[];
+        }>;
+      }
   );

sandpack-react/src/components/Console/Console.stories.tsx

@@ -0,0 +1,38 @@
+import { SandpackCodeEditor, SandpackPreview } from "..";
+import { SandpackProvider, SandpackLayout } from "../..";
+
+import { SandpackConsole } from "./";
+
+export default {
+  title: "components/Console",
+};
+
+export const ReactDevTool: React.FC = () => (
+  <SandpackProvider
+    customSetup={{
+      files: {
+        "/App.js": `export default function App() {
+
+    return <>
+      <h1 onClick={()=>console.log({ foo: [] })}>Hello World</h1>
+      <h1 onClick={()=>{
+        console.log("foo", "baz")
+        console.error("foo", "baz")
+      }}>Hello World</h1>
+</>
+  }
+  `,
+      },
+    }}
+    template="react"
+  >
+    <SandpackLayout>
+      <SandpackCodeEditor />
+      <SandpackPreview />
+    </SandpackLayout>
+
+    <SandpackLayout style={{ marginTop: 12 }}>
+      <SandpackConsole />
+    </SandpackLayout>
+  </SandpackProvider>
+);

sandpack-react/src/components/Console/index.tsx

@@ -0,0 +1,84 @@
+import { useClasser } from "@code-hike/classer";
+import * as React from "react";
+
+import { useSandpack } from "../../hooks/useSandpack";
+import { RefreshIcon } from "../../icons";
+import { CodeEditor } from "../CodeEditor";
+
+import type { ConsoleData } from "./utils";
+import { getType } from "./utils";
+
+const MAX_MESSAGE_COUNT = 100;
+
+// TODO: consume clientid
+export const SandpackConsole: React.FC<{ clientId?: string }> = ({
+  clientId,
+}) => {
+  const { listen } = useSandpack();
+  const [logs, setLogs] = React.useState<ConsoleData>([]);
+  const wrapperRef = React.useRef<HTMLDivElement>(null);
+
+  const c = useClasser("sp");
+
+  React.useEffect(() => {
+    const unsubscribe = listen((message) => {
+      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]);
+
+  React.useEffect(() => {
+    if (wrapperRef.current) {
+      wrapperRef.current.scrollTop = wrapperRef.current.scrollHeight;
+    }
+  }, [logs]);
+
+  return (
+    <div className={c("console")}>
+      <div ref={wrapperRef} className={c("console-scroll")}>
+        {logs.map(({ data, id, method }) => {
+          return (
+            <p
+              key={id}
+              className={c("console-item", `console-${getType(method)}`)}
+            >
+              <span />
+              <span className={c("console-message")}>
+                {data.map((msg, index) => {
+                  if (typeof msg === "string") {
+                    return <span key={`${msg}-${index}`}>{msg}</span>;
+                  }
+
+                  const children = JSON.stringify(msg);
+
+                  return (
+                    <span key={`${msg}-${index}`} className={c("console-span")}>
+                      <CodeEditor
+                        code={children}
+                        fileType="js"
+                        initMode="user-visible"
+                        readOnly
+                      />
+                    </span>
+                  );
+                })}
+              </span>
+            </p>
+          );
+        })}
+      </div>
+
+      <button className={c("console-clean")} onClick={(): void => setLogs([])}>
+        <RefreshIcon />
+      </button>
+    </div>
+  );
+};

sandpack-react/src/components/Console/utils.ts

@@ -0,0 +1,21 @@
+import type { SandpackConsoleMethods } from "@codesandbox/sandpack-client";
+
+export const getType = (
+  message: SandpackConsoleMethods
+): "info" | "warning" | "error" => {
+  if (message === "log" || message === "info") {
+    return "info";
+  }
+
+  if (message === "warn") {
+    return "warning";
+  }
+
+  return "error";
+};
+
+export type ConsoleData = Array<{
+  data: Array<string | Record<string, string>>;
+  id: string;
+  method: SandpackConsoleMethods;
+}>;

sandpack-react/src/styles/index.css

@@ -517,15 +517,50 @@
   width: 100%;
 }
 
-.sp-read-only {
-  font-family: var(--sp-font-mono);
-  font-size: 0.8em;
+
+.sp-console {
+  height: var(--sp-layout-height);
+  width: 100%;
+  position: relative;
+}
+
+.sp-console-scroll {
+  overflow: auto;
+  height: 100%;
+  width: 100%;
+}
+
+.sp-console-clean {
   position: absolute;
-  right: var(--sp-space-2);
-  bottom: var(--sp-space-2);
-  z-index: 2;
-  color: var(--sp-colors-bg-active);
-  background-color: var(--sp-colors-fg-active);
-  border-radius: 99999px;
-  padding: calc(var(--sp-space-1) / 2) var(--sp-space-2);
+  right: 0;
+  top: 0;
+}
+
+.sp-console-item {
+  border-top: 1px solid rgba(128, 128, 128, 0.35);
+  border-bottom: 1px solid rgba(128, 128, 128, 0.35);
+  margin-top: -1px;
+  margin-bottom: 0px;
+  padding-left: 10px;
+}
+
+.sp-console-item .sp-cm,
+.sp-console-item .cm-line {
+  padding: 0;
+}
+
+.sp-console-message {
+  padding: 0.4rem 1.5rem 0.4rem 0;
+  margin-left: 15px;
+  min-height: 18px;
+  display: inline-block;
+}
+
+.sp-console-error {
+  color: var(--sp-colors-fg-error);
+}
+
+.sp-console-span {
+  display: inline-block;
+  margin-right: 0.5em;
 }