add option to clear the console log

Author: jjspace

packages/sandcastle/public/Sandcastle-client.js

@@ -15,6 +15,17 @@
     return "undefined";
   }
 
+  const originalClear = console.clear;
+  console.clear = function () {
+    originalClear();
+    window.parent.postMessage(
+      {
+        type: "consoleClear",
+      },
+      "*",
+    );
+  };
+
   const originalLog = console.log;
   console.log = function (d1) {
     originalLog.apply(console, arguments);

packages/sandcastle/src/App.tsx

@@ -196,7 +196,7 @@ export type SandcastleAction =
 function App() {
   const { settings, updateSettings } = useContext(SettingsContext);
   const rightSideRef = useRef<RightSideRef>(null);
-  const consoleCollapsedHeight = 26;
+  const consoleCollapsedHeight = 33;
   const [consoleExpanded, setConsoleExpanded] = useState(false);
 
   const isStartingWithCode = !!(window.location.search || window.location.hash);
@@ -319,14 +319,27 @@ function App() {
     [consoleExpanded],
   );
 
-  const resetConsole = useCallback(() => {
-    if (codeState.runNumber > 0) {
-      // the console should only be cleared by the Bucket when the viewer page
-      // has actually reloaded and stopped sending console statements
-      // otherwise some could bleed into the "next run"
-      setConsoleMessages([]);
-    }
-  }, [codeState.runNumber]);
+  const resetConsole = useCallback(
+    ({ showMessage = false } = {}) => {
+      if (codeState.runNumber > 0) {
+        // the console should only be cleared by the Bucket when the viewer page
+        // has actually reloaded and stopped sending console statements
+        // otherwise some could bleed into the "next run"
+        if (showMessage) {
+          setConsoleMessages([
+            {
+              id: crypto.randomUUID(),
+              type: "special",
+              message: "Console was cleared",
+            },
+          ]);
+        } else {
+          setConsoleMessages([]);
+        }
+      }
+    },
+    [codeState.runNumber],
+  );
 
   function runSandcastle() {
     dispatch({ type: "runSandcastle" });
@@ -634,6 +647,7 @@ function App() {
                 logs={consoleMessages}
                 expanded={consoleExpanded}
                 toggleExpanded={() => rightSideRef.current?.toggleExpanded()}
+                resetConsole={resetConsole}
               />
             </Allotment.Pane>
           </RightSideAllotment>

packages/sandcastle/src/Bucket.tsx

@@ -5,6 +5,7 @@ import { ConsoleMessageType } from "./ConsoleMirror";
 
 type SandcastleMessage =
   | { type: "reload" }
+  | { type: "consoleClear" }
   | { type: "consoleLog"; log: string }
   | { type: "consoleWarn"; warn: string }
   | { type: "consoleError"; error: string; lineNumber?: number; url?: string }
@@ -30,7 +31,7 @@ function Bucket({
    */
   highlightLine: (lineNumber: number) => void;
   appendConsole: (type: ConsoleMessageType, message: string) => void;
-  resetConsole: () => void;
+  resetConsole: (options?: { showMessage?: boolean | undefined }) => void;
 }) {
   const bucket = useRef<HTMLIFrameElement>(null);
   const lastRunNumber = useRef<number>(Number.NEGATIVE_INFINITY);
@@ -172,6 +173,8 @@ function Bucket({
           // into the iframe, causing the demo to run there.
           activateBucketScripts(bucket.current, code, html);
         }
+      } else if (e.data.type === "consoleClear") {
+        resetConsole({ showMessage: true });
       } else if (e.data.type === "consoleLog") {
         // Console log messages from the iframe display in Sandcastle.
         appendConsole("log", e.data.log);

packages/sandcastle/src/ConsoleMirror.css

@@ -14,12 +14,21 @@
       var(--stratakit-color-border-neutral-muted);
 
     .title {
-      /* Match the height of the badge to avoid flow shifts when adding them */
-      height: 20px;
+      /* Match the height of buttons to avoid flow shifts when adding them */
+      height: 24px;
       align-content: center;
       margin-right: var(--stratakit-space-x1);
     }
+
+    .spacer {
+      flex-grow: 100;
+    }
+  }
+
+  &:not(.expanded) .clear-button {
+    display: none;
   }
+
   .logs {
     overflow: auto;
     padding: 0 var(--stratakit-space-x2);
@@ -39,6 +48,7 @@
       /* "Filler" icon to take up the same space */
       width: 1rem;
       height: 1rem;
+      flex-shrink: 0;
     }
     .message-index {
       user-select: none;
@@ -56,5 +66,9 @@
     .message.error {
       color: var(--stratakit-color-text-critical-base);
     }
+    .message.special {
+      font-style: italic;
+      color: var(--stratakit-color-text-neutral-tertiary);
+    }
   }
 }

packages/sandcastle/src/ConsoleMirror.tsx

@@ -2,11 +2,17 @@ import classNames from "classnames";
 import "./ConsoleMirror.css";
 import { useLayoutEffect, useRef } from "react";
 import useStayScrolled from "react-stay-scrolled";
-import { Badge } from "@stratakit/bricks";
-import { caretDown, caretUp, statusError, statusWarning } from "./icons";
+import { Badge, Button } from "@stratakit/bricks";
+import {
+  caretDown,
+  caretUp,
+  deleteIcon,
+  statusError,
+  statusWarning,
+} from "./icons";
 import { Icon } from "@stratakit/foundations";
 
-export type ConsoleMessageType = "log" | "warn" | "error";
+export type ConsoleMessageType = "log" | "warn" | "error" | "special";
 export type ConsoleMessage = {
   type: ConsoleMessageType;
   message: string;
@@ -27,10 +33,12 @@ export function ConsoleMirror({
   logs,
   expanded: consoleExpanded,
   toggleExpanded,
+  resetConsole,
 }: {
   logs: ConsoleMessage[];
   expanded: boolean;
   toggleExpanded: () => void;
+  resetConsole: (options?: { showMessage?: boolean }) => void;
 }) {
   const logsRef = useRef<HTMLDivElement>(document.createElement("div"));
   // TODO: determine if we need this lib or can implement ourselves. It's a little outdated
@@ -64,6 +72,19 @@ export function ConsoleMirror({
         {errors.length > 0 && (
           <Badge label={errors.length} tone="critical" variant="muted" />
         )}
+        <div className="spacer"></div>
+        <Button
+          className="clear-button"
+          variant="ghost"
+          onClick={(e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            resetConsole({ showMessage: true });
+          }}
+        >
+          <Icon href={deleteIcon} />
+          Clear console
+        </Button>
       </div>
       <div className="logs" ref={logsRef}>
         {logs.length === 0 && (
@@ -79,6 +100,7 @@ export function ConsoleMirror({
               className={classNames("message", {
                 warning: log.type === "warn",
                 error: log.type === "error",
+                special: log.type === "special",
               })}
             >
               <ConsoleIcon type={log.type} />

packages/sandcastle/src/icons.ts

@@ -21,6 +21,7 @@ import documentation from "@stratakit/icons/documentation.svg";
 import info from "@stratakit/icons/info.svg";
 import copy from "@stratakit/icons/copy.svg";
 import retry from "@stratakit/icons/retry.svg";
+import deleteIcon from "@stratakit/icons/delete.svg";
 
 export {
   add,
@@ -46,4 +47,5 @@ export {
   info,
   copy,
   retry,
+  deleteIcon,
 };