feat: add console hook to static template

sandpack-client/rollup.config.js

@@ -9,9 +9,9 @@ import pkg from "./package.json";
 
 const configs = [
   {
-    input: "src/clients/node/inject-scripts/consoleHook.ts",
+    input: "src/inject-scripts/consoleHook.ts",
     output: {
-      file: "src/clients/node/inject-scripts/dist/consoleHook.js",
+      file: "src/inject-scripts/dist/consoleHook.js",
       format: "es",
     },
     plugins: [

sandpack-client/src/clients/node/inject-scripts/index.ts

@@ -5,7 +5,7 @@ import { INJECT_MESSAGE_TYPE } from "@codesandbox/nodebox";
 
 // get the bundled file, which contains all dependencies
 // @ts-ignore
-import consoleHook from "./dist/consoleHook.js";
+import consoleHook from "../../../inject-scripts/dist/consoleHook.js";
 import { setupHistoryListeners } from "./historyListener";
 
 const scripts = [

sandpack-client/src/clients/node/types.ts

@@ -6,7 +6,7 @@ import type {
   SandpackLogLevel,
 } from "../..";
 
-type SandpackStandartMessages =
+type SandpackStandardMessages =
   | {
       type: "start";
       firstLoad?: boolean;
@@ -60,9 +60,13 @@ type SandpackShellMessages =
   | { type: "shell/openPreview" }
   | { type: "shell/progress"; data: WorkerStatusUpdate & { command?: string } };
 
+type SandpackConsoleMessages =
+  | { type: "console/register" }
+  | { type: "console/unregister" };
+
 export type SandpackNodeMessage = BaseSandpackMessage &
   (
-    | SandpackStandartMessages
+    | SandpackStandardMessages
     | SandpackURLsMessages
     | SandpackBundlerMessages
     | SandpackShellMessages
@@ -72,6 +76,7 @@ export type SandpackNodeMessage = BaseSandpackMessage &
         payload: SandpackShellStdoutData;
       }
     | SandpackFSMessages
+    | SandpackConsoleMessages
   );
 
 export interface SandpackShellStdoutData {

sandpack-client/src/clients/static/index.ts

@@ -15,10 +15,15 @@ import type { SandpackNodeMessage } from "../node/types";
 
 import { insertHtmlAfterRegex, readBuffer, validateHtml } from "./utils";
 
+// get the bundled file, which contains all dependencies
+// @ts-ignore
+import consoleHook from "../../inject-scripts/dist/consoleHook.js";
+
 export class SandpackStatic extends SandpackClient {
   private emitter: EventEmitter;
   private previewController: PreviewController;
   private files: Map<string, string | Uint8Array> = new Map();
+  private registeredConsoleCount = 0;
 
   public iframe!: HTMLIFrameElement;
   public selector!: string;
@@ -50,6 +55,12 @@ export class SandpackStatic extends SandpackClient {
               content,
               options.externalResources
             );
+
+            if (this.registeredConsoleCount > 0) {
+              content = this.injectScriptIntoHead(content, {
+                script: consoleHook,
+              });
+            }
           } catch (err) {
             console.error("Runtime injection failed", err);
           }
@@ -80,6 +91,11 @@ export class SandpackStatic extends SandpackClient {
       );
     }
 
+    this.eventListener = this.eventListener.bind(this);
+    if (typeof window !== "undefined") {
+      window.addEventListener("message", this.eventListener);
+    }
+
     // Dispatch very first compile action
     this.updateSandbox();
   }
@@ -137,6 +153,21 @@ export class SandpackStatic extends SandpackClient {
     return this.injectContentIntoHead(content, tagsToInsert);
   }
 
+  private injectScriptIntoHead(
+    content: FileContent,
+    opts: { script: string; scope?: Record<string, any> }
+  ): FileContent {
+    const { script, scope = {} } = opts;
+    const scriptToInsert = `
+    <script>
+      const scope = ${JSON.stringify(scope)};
+      ${script}
+    </script>
+    `.trim();
+
+    return this.injectContentIntoHead(content, scriptToInsert);
+  }
+
   public updateSandbox(
     setup = this.sandboxSetup,
     _isInitializationCompile?: boolean
@@ -169,6 +200,21 @@ export class SandpackStatic extends SandpackClient {
     });
   }
 
+  // Handles message windows coming from iframes
+  private eventListener(evt: MessageEvent): void {
+    // skip events originating from different iframes
+    if (evt.source !== this.iframe.contentWindow) {
+      return;
+    }
+
+    const message = evt.data;
+    if (!message.codesandbox) {
+      return;
+    }
+
+    this.dispatch(message);
+  }
+
   /**
    * Bundler communication
    */
@@ -178,6 +224,14 @@ export class SandpackStatic extends SandpackClient {
         this.compile(message.modules);
         break;
 
+      case "console/register":
+        this.registeredConsoleCount += 1;
+        break;
+
+      case "console/unregister":
+        this.registeredConsoleCount -= 1;
+        break;
+
       default:
         this.iframe.contentWindow?.postMessage(message, "*");
         this.emitter.dispatch(message);
@@ -190,5 +244,8 @@ export class SandpackStatic extends SandpackClient {
 
   public destroy(): void {
     this.emitter.cleanup();
+    if (typeof window !== "undefined") {
+      window.removeEventListener("message", this.eventListener);
+    }
   }
 }

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

@@ -235,3 +235,31 @@ export const MaxMessageCount = () => {
     </>
   );
 };
+
+export const StaticTemplateConsole = () => {
+  const indexHtml = `
+<!DOCTYPE html>
+<html>
+
+<head>
+  <script>function logMsg() { console.log('Hello Sandpack!'); }</script>
+</head>
+
+<body>
+  <h1>Hello Sandpack!</h1>
+  <button onclick="logMsg()">Log Message</button>
+</body>
+
+</html>
+`.trim();
+
+  return (
+    <SandpackProvider template="static" files={{ "/index.html": indexHtml }}>
+      <SandpackLayout>
+        <SandpackCodeEditor />
+        <SandpackPreview />
+        <SandpackConsole />
+      </SandpackLayout>
+    </SandpackProvider>
+  );
+};

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

@@ -26,7 +26,14 @@ export const useSandpackConsole = ({
   resetOnPreviewRestart: boolean;
 }): { logs: SandpackConsoleData; reset: () => void } => {
   const [logs, setLogs] = React.useState<SandpackConsoleData>([]);
-  const { listen } = useSandpack();
+  const { listen, dispatch } = useSandpack();
+
+  React.useEffect(() => {
+    dispatch({ type: "console/register" }, clientId);
+    return () => {
+      dispatch({ type: "console/unregister" }, clientId);
+    };
+  }, [dispatch, clientId]);
 
   React.useEffect(() => {
     const unsubscribe = listen((message) => {