feat: add console hook to static template

Author: SSHari

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/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,9 @@ export class SandpackStatic extends SandpackClient {
               content,
               options.externalResources
             );
+            content = this.injectScriptIntoHead(content, {
+              script: consoleHook,
+            });
           } catch (err) {
             console.error("Runtime injection failed", err);
           }
@@ -79,6 +86,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(
@@ -134,6 +146,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
@@ -166,6 +193,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 +229,8 @@ export class SandpackStatic extends SandpackClient {
 
   public destroy(): void {
     this.emitter.cleanup();
+    if (typeof window !== "undefined") {
+      window.removeEventListener("message", this.eventListener);
+    }
   }
 }