feat: add console hook to static template

Author: SSHari

sandpack-client/rollup.config.js

@@ -25,6 +25,23 @@ const configs = [
     ],
     external: [],
   },
+  {
+    input: "src/clients/static/inject-scripts/consoleHook.ts",
+    output: {
+      file: "src/clients/static/inject-scripts/dist/consoleHook.js",
+      format: "es",
+    },
+    plugins: [
+      typescript({
+        tsconfig: "./tsconfig.json",
+        compilerOptions: { declaration: false },
+      }),
+      commonjs(),
+      nodeResolve(),
+      terser({ compress: { passes: 2 } }),
+    ],
+    external: [],
+  },
 
   {
     input: {

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

@@ -15,6 +15,10 @@ 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;
@@ -50,6 +54,10 @@ export class SandpackStatic extends SandpackClient {
               content,
               options.externalResources
             );
+            content = this.injectContentIntoHead(
+              content,
+              `<script>${consoleHook}</script>`
+            );
           } catch (err) {
             console.error("Runtime injection failed", err);
           }
@@ -79,6 +87,11 @@ export class SandpackStatic extends SandpackClient {
         "accelerometer; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; clipboard-write;"
       );
     }
+
+    this.eventListener = this.eventListener.bind(this);
+    if (typeof window !== "undefined") {
+      window.addEventListener("message", this.eventListener);
+    }
   }
 
   private injectContentIntoHead(
@@ -166,6 +179,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
    */
@@ -187,5 +215,6 @@ export class SandpackStatic extends SandpackClient {
 
   public destroy(): void {
     this.emitter.cleanup();
+    window.removeEventListener("message", this.eventListener);
   }
 }

sandpack-client/src/clients/static/inject-scripts/consoleHook.ts

@@ -0,0 +1,15 @@
+/* eslint-disable @typescript-eslint/no-explicit-any,@typescript-eslint/ban-ts-comment,no-console,@typescript-eslint/explicit-function-return-type, no-restricted-globals */
+import Hook from "console-feed/lib/Hook";
+import { Encode } from "console-feed/lib/Transform";
+
+Hook(window.console, (log) => {
+  const encodeMessage = Encode(log) as any;
+  parent.postMessage(
+    {
+      type: "console",
+      codesandbox: true,
+      log: Array.isArray(encodeMessage) ? encodeMessage[0] : encodeMessage,
+    },
+    "*"
+  );
+});