feat(node): Added resize event (#1037)

.github/workflows/release.yml

@@ -20,7 +20,7 @@ jobs:
       - name: Setup | Node.js
         uses: actions/setup-node@v4
         with:
-          node-version: "16.0.0"
+          node-version: "16.13.0"
 
       - name: Install dependencies and cache
         uses: bahmutov/npm-install@v1

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

@@ -8,13 +8,15 @@ import { INJECT_MESSAGE_TYPE } from "@codesandbox/nodebox";
 import consoleHook from "../../../inject-scripts/dist/consoleHook.js";
 
 import { setupHistoryListeners } from "./historyListener";
+import { watchResize } from "./resize.js";
 
 const scripts = [
   { code: setupHistoryListeners.toString(), id: "historyListener" },
   {
     code: "function consoleHook({ scope }) {" + consoleHook + "\n};",
     id: "consoleHook",
   },
+  { code: watchResize.toString(), id: "watchResize" },
 ];
 
 export const injectScriptToIframe = (

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

@@ -0,0 +1,57 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+
+export function watchResize({ scope }: { scope: { channelId: string } }) {
+  let lastHeight = 0;
+
+  function getDocumentHeight(): number {
+    if (typeof window === "undefined") return 0;
+
+    const { body } = document;
+    const html = document.documentElement;
+
+    return Math.max(body.scrollHeight, body.offsetHeight, html.offsetHeight);
+  }
+
+  function sendResizeEvent() {
+    const height = getDocumentHeight();
+
+    if (lastHeight !== height) {
+      window.parent.postMessage(
+        {
+          type: "resize",
+          height,
+          codesandbox: true,
+          channelId: scope.channelId,
+        },
+        "*"
+      );
+    }
+
+    lastHeight = height;
+  }
+
+  sendResizeEvent();
+
+  let throttle: any;
+  const observer = new MutationObserver(() => {
+    if (throttle === undefined) {
+      sendResizeEvent();
+
+      throttle = setTimeout(() => {
+        throttle = undefined;
+      }, 300);
+    }
+  });
+
+  observer.observe(document, {
+    attributes: true,
+    childList: true,
+    subtree: true,
+  });
+
+  /**
+   * Ideally we should only use a `MutationObserver` to trigger a resize event,
+   * however, we noted that it's not 100% reliable, so we went for polling strategy as well
+   */
+  setInterval(sendResizeEvent, 300);
+}

sandpack-react/src/Playground.stories.tsx

@@ -4,14 +4,12 @@ import React from "react";
 
 import { Sandpack } from "./";
 
+export default {
+  title: "Intro/Playground",
+};
+
 export const Basic: React.FC = () => {
-  return (
-    <Sandpack
-      options={{ classes: { "sp-layout": "fooo" } }}
-      template="nextjs"
-      theme={themes.sandpackDark}
-    />
-  );
+  return <Sandpack template="vite" theme={themes.sandpackDark} />;
 };
 
 export const EslintBasic = () => (