+ RailsPathLinkHandler: open server when clicked on localhost:3000

Start server automatically if preview is not ready

Author: palkan

patches/@tutorialkit+react+1.5.0.patch

@@ -19,7 +19,7 @@ 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..46d363c 100644
+index 8fe0723..66a4e34 100644
 --- a/node_modules/@tutorialkit/react/dist/Panels/PreviewPanel.js
 +++ b/node_modules/@tutorialkit/react/dist/Panels/PreviewPanel.js
 @@ -1,7 +1,7 @@
@@ -40,7 +40,7 @@ index 8fe0723..46d363c 100644
      useEffect(() => {
          if (!iframe.ref) {
              return;
-@@ -83,16 +85,122 @@ function Preview({ preview, iframe, previewCount, first, last, toggleTerminal, i
+@@ -83,16 +85,123 @@ function Preview({ preview, iframe, previewCount, first, last, toggleTerminal, i
              iframe.ref.title = preview.title;
          }
      }, [preview.url, iframe.ref]);
@@ -128,6 +128,7 @@ index 8fe0723..46d363c 100644
 +                                _jsx("input", {
 +                                    type: "text",
 +                                    value: urlPath,
++                                    name: "tutorialkit-preview-navigation",
 +                                    onChange: (e) => setCurrentUrlPath(e.target.value),
 +                                    className: "bg-transparent border-none focus:outline-none text-sm flex-1",
 +                                    onKeyDown: (e) => {

src/components/RailsPathLinkHandler.tsx

@@ -1,9 +1,39 @@
 import { useEffect } from 'react';
+import { useStore } from '@nanostores/react';
 import tutorialStore from "tutorialkit:store";
+import { webcontainer } from 'tutorialkit:core';
+import type { PreviewInfo } from '@tutorialkit/runtime';
+
+const ensureRailsServerStarted = async (preview: PreviewInfo) => {
+  if (preview.ready) return;
+
+  const terminalConfig = tutorialStore.terminalConfig.get()
+  const terminal = terminalConfig.panels.find(panel => panel.type === 'terminal');
+  if (!terminal || !terminal.process) return;
+
+  terminal.input(`bin/rails s\n`);
+
+  await new Promise<void>((resolve, reject) => {
+    const tid = setTimeout(() => {
+      clearInterval(tick);
+      reject();
+    }, 10000);
+
+    const tick = setInterval(() => {
+      if (preview.ready) {
+        clearInterval(tick);
+        clearTimeout(tid);
+        resolve();
+      }
+    }, 200);
+  });
+}
 
 export default function RailsPathLinkHandler() {
+  const previews = useStore(tutorialStore.previews);
+
   useEffect(() => {
-    function handleClick(event: MouseEvent) {
+    async function handleClick(event: MouseEvent) {
       const target = event.target as HTMLElement;
       const link = target.closest('.rails-path-link');
 
@@ -14,6 +44,41 @@ export default function RailsPathLinkHandler() {
         if (railsPath) {
           tutorialStore.setSelectedFile(`/workspace/store/${railsPath}`);
         }
+        return;
+      }
+
+      if (target.tagName === 'A') {
+        const linkTarget = target as HTMLAnchorElement;
+
+        if (linkTarget.href.startsWith('http://localhost:3000')) {
+          event.preventDefault();
+
+          const railsPreview = previews.find((pr) => pr.port === 3000);
+
+          if (!railsPreview) return;
+
+          try {
+            await ensureRailsServerStarted(railsPreview)
+          } catch(e) {
+            console.error("failed to start Rails server", e);
+            return;
+          }
+
+          const input = document.querySelector('input[type="text"][name="tutorialkit-preview-navigation"]') as HTMLInputElement;
+          if (!input) return;
+
+          const newPath = linkTarget.href.replace('http://localhost:3000/', '');
+
+          input.value = newPath;
+          const ev = new KeyboardEvent('keydown', {
+            key: 'Enter',
+            code: 'Enter',
+            keyCode: 13,
+            bubbles: true,
+            cancelable: true,
+          });
+          input.dispatchEvent(ev);
+        }
       }
     }
 
@@ -22,7 +87,7 @@ export default function RailsPathLinkHandler() {
     return () => {
       document.removeEventListener('click', handleClick);
     };
-  }, []);
+  }, [previews]);
 
   return null;
 }