+ server: inject script to post the current frame location to PreviewPanel

Author: palkan

patches/@tutorialkit+react+1.5.0.patch

@@ -19,10 +19,57 @@ index 109e4eb..4906be4 100644
          case 'jpg':
          case 'jpeg':
 diff --git a/node_modules/@tutorialkit/react/dist/Panels/PreviewPanel.js b/node_modules/@tutorialkit/react/dist/Panels/PreviewPanel.js
-index 8fe0723..c329c41 100644
+index 8fe0723..46d363c 100644
 --- a/node_modules/@tutorialkit/react/dist/Panels/PreviewPanel.js
 +++ b/node_modules/@tutorialkit/react/dist/Panels/PreviewPanel.js
-@@ -88,11 +88,92 @@ function Preview({ preview, iframe, previewCount, first, last, toggleTerminal, i
+@@ -1,7 +1,7 @@
+ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+ import { useStore } from '@nanostores/react';
+ import { reloadPreview } from '@webcontainer/api/utils';
+-import { createElement, forwardRef, memo, useCallback, useEffect, useImperativeHandle, useRef } from 'react';
++import { createElement, forwardRef, memo, useCallback, useState, useEffect, useImperativeHandle, useRef } from 'react';
+ import { Panel, PanelGroup, PanelResizeHandle } from 'react-resizable-panels';
+ import { BootScreen } from '../BootScreen.js';
+ import resizePanelStyles from '../styles/resize-panel.module.css';
+@@ -71,6 +71,8 @@ export const PreviewPanel = memo(forwardRef(({ showToggleTerminal, toggleTermina
+ PreviewPanel.displayName = 'PreviewPanel';
+ function Preview({ preview, iframe, previewCount, first, last, toggleTerminal, i18n }) {
+     const previewContainerRef = useRef(null);
++    const [currentUrlPath, setCurrentUrlPath] = useState('');
++
+     useEffect(() => {
+         if (!iframe.ref) {
+             return;
+@@ -83,16 +85,122 @@ function Preview({ preview, iframe, previewCount, first, last, toggleTerminal, i
+             iframe.ref.title = preview.title;
+         }
+     }, [preview.url, iframe.ref]);
++
++    useEffect(() => {
++        if (!iframe.ref) {
++            return;
++        }
++
++        const handleLoadMessage = (event) => {
++          if (event.data && event.data.type === '$locationChange') {
++            const iframeSrc = event.data.location.href;
++            if (iframeSrc) {
++              const url = new URL(iframeSrc);
++              const path = url.pathname.replace("/", "") + url.search;
++              setCurrentUrlPath(path);
++            }
++          }
++        };
++
++        window.addEventListener('message', handleLoadMessage);
++
++        return () => {
++          window.removeEventListener('message', handleLoadMessage);
++        };
++    }, [iframe.ref]);
++
+     function reload() {
+         if (iframe.ref) {
              reloadPreview(iframe.ref);
          }
      }
@@ -35,15 +82,15 @@ index 8fe0723..c329c41 100644
 +    function open(newPath) {
 +      if (!preview.url) return;
 +
-+      preview.path = newPath;
++      const baseUrl = new URL(preview.url);
++      const newUrl = new URL(newPath, baseUrl.origin);
++
 +      if (iframe.ref) {
-+        iframe.ref.src = preview.url;
++        iframe.ref.src = newUrl.href;
 +      }
-+
-+      reload();
 +    }
 +
-+    const urlPath = preview.url ? new URL(preview.url).pathname.replace("/", "") + new URL(preview.url).search : '';
++    const urlPath = currentUrlPath || (preview.url ? new URL(preview.url).pathname.replace("/", "") + new URL(preview.url).search : '');
 +
 +    return (
 +        _jsxs("div", {
@@ -80,7 +127,8 @@ index 8fe0723..c329c41 100644
 +                                }),
 +                                _jsx("input", {
 +                                    type: "text",
-+                                    defaultValue: urlPath,
++                                    value: urlPath,
++                                    onChange: (e) => setCurrentUrlPath(e.target.value),
 +                                    className: "bg-transparent border-none focus:outline-none text-sm flex-1",
 +                                    onKeyDown: (e) => {
 +                                      if (e.key === 'Enter') {

src/templates/default/lib/server.js

@@ -1,6 +1,7 @@
 import express from 'express';
 import setCookieParser from 'set-cookie-parser';
 import multer from 'multer';
+import createFrameLocationTrackingMiddleware from './server/frame_location_middleware.js';
 
 class IncomingRequest {
   // We prepare input outside to avoid async Ruby execution for now
@@ -294,6 +295,7 @@ export const createRackServer = async (vm, opts = {}) => {
 
   const upload = multer({ storage: multer.memoryStorage() });
   app.use(upload.any());
+  app.use(createFrameLocationTrackingMiddleware());
 
   const queue = new RequestQueue((req, res) => requestHandler(vm, req, res));
 

src/templates/default/lib/server/frame_location_middleware.js

@@ -0,0 +1,77 @@
+const createFrameLocationTrackingMiddleware = (options = {}) => {
+  const {
+    injectionPoint = '</body>'
+  } = options;
+
+  const trackingScript = `
+    <script>
+      (function() {
+        // Avoid double initialization
+        if (window.__locationTrackingInitialized) return;
+        window.__locationTrackingInitialized = true;
+
+        function notifyParentLocation() {
+          if (window.parent === window) return;
+
+          try {
+            window.parent.postMessage({
+              type: '$locationChange',
+              location: {
+                href: window.location.href,
+              },
+              timestamp: Date.now()
+            }, '*');
+            console.log('notified location change', window.location.href);
+          } catch (e) {
+            console.error('Failed to notify parent:', e);
+          }
+        }
+
+        if (document.readyState === 'loading') {
+          document.addEventListener('DOMContentLoaded', notifyParentLocation);
+        } else {
+          notifyParentLocation();
+        }
+
+        window.addEventListener('popstate', notifyParentLocation);
+        window.addEventListener('hashchange', notifyParentLocation);
+
+        const originalPushState = history.pushState;
+        const originalReplaceState = history.replaceState;
+
+        history.pushState = function() {
+          const result = originalPushState.apply(history, arguments);
+          setTimeout(notifyParentLocation, 0);
+          return result;
+        };
+
+        history.replaceState = function() {
+          const result = originalReplaceState.apply(history, arguments);
+          setTimeout(notifyParentLocation, 0);
+          return result;
+        };
+      })();
+    </script>
+  `;
+
+  return (req, res, next) => {
+    // Store the original send method
+    const originalSend = res.send;
+
+    res.send = function(data) {
+      const contentType = res.get('Content-Type');
+
+      if (contentType && contentType.includes('text/html') && typeof data === 'string') {
+        if (data.includes(injectionPoint)) {
+          data = data.replace(injectionPoint, trackingScript + injectionPoint);
+        }
+      }
+
+      return originalSend.call(this, data);
+    };
+
+    next();
+  };
+};
+
+export default createFrameLocationTrackingMiddleware;