chore: rename terminal to output and refactor terminal component (stackblitz#22)

Author: SamVerschueren

packages/components/react/src/Panels/TerminalPanel.tsx

@@ -1,9 +1,14 @@
 import { lazy, Suspense, useEffect, useState } from 'react';
-import type { Props } from '../Terminal';
+import type { TutorialRunner } from '@tutorialkit/runtime';
 
 const Terminal = lazy(() => import('../Terminal/index.js'));
 
-export function TerminalPanel(props: Props) {
+interface TerminalPanelProps {
+  theme: 'dark' | 'light';
+  tutorialRunner: TutorialRunner
+}
+
+export function TerminalPanel({ theme, tutorialRunner }: TerminalPanelProps) {
   const [domLoaded, setDomLoaded] = useState(false);
 
   useEffect(() => {
@@ -14,14 +19,18 @@ export function TerminalPanel(props: Props) {
     <div className="panel-container bg-tk-elements-app-backgroundColor">
       <div className="panel-header border-y border-tk-elements-app-borderColor">
         <div className="panel-title">
-          <div className="panel-icon i-ph-terminal-window-duotone"></div>
-          <span className="text-sm">Terminal</span>
+          <div className="panel-icon i-ph-newspaper-duotone"></div>
+          <span className="text-sm">Output</span>
         </div>
       </div>
       <div className="h-full overflow-hidden">
         {domLoaded && (
           <Suspense>
-            <Terminal {...props} />
+            <Terminal
+              theme={theme}
+              readonly={true}
+              onTerminalReady={(terminal) => tutorialRunner.hookOutputPanel(terminal)}
+              onTerminalResize={() => tutorialRunner.onOutputResize()}/>
           </Suspense>
         )}
       </div>

packages/components/react/src/Terminal/index.tsx

@@ -1,4 +1,3 @@
-import type { TutorialRunner } from '@tutorialkit/runtime';
 import { FitAddon } from '@xterm/addon-fit';
 import { WebLinksAddon } from '@xterm/addon-web-links';
 import { Terminal as XTerm } from '@xterm/xterm';
@@ -7,12 +6,13 @@ import { useEffect, useRef } from 'react';
 import { darkTheme, lightTheme } from './theme.js';
 
 export interface Props {
-  readonly?: boolean;
-  tutorialRunner: TutorialRunner;
   theme: 'dark' | 'light';
+  readonly?: boolean;
+  onTerminalReady?: (terminal: XTerm) => void;
+  onTerminalResize?: () => void;
 }
 
-export function Terminal({ tutorialRunner, theme, readonly = true }: Props) {
+export function Terminal({ theme, readonly = true, onTerminalReady, onTerminalResize }: Props) {
   const divRef = useRef<HTMLDivElement>(null);
   const terminalRef = useRef<XTerm>();
 
@@ -30,12 +30,17 @@ export function Terminal({ tutorialRunner, theme, readonly = true }: Props) {
     const terminal = new XTerm({
       cursorBlink: true,
       convertEol: true,
-      disableStdin: false,
+      disableStdin: readonly,
       theme: theme === 'dark' ? darkTheme : lightTheme,
       fontSize: 13,
       fontFamily: 'Menlo, courier-new, courier, monospace',
     });
 
+    if (readonly) {
+      // write DECTCEM to the terminal to hide the cursor if we are in readonly mode
+      terminal.write('\x1b[?25l');
+    }
+
     terminalRef.current = terminal;
 
     terminal.loadAddon(fitAddon);
@@ -44,15 +49,15 @@ export function Terminal({ tutorialRunner, theme, readonly = true }: Props) {
 
     fitAddon.fit();
 
-    tutorialRunner.hookTerminal(terminal);
-
     const resizeObserver = new ResizeObserver(() => {
       fitAddon.fit();
-      tutorialRunner.onTerminalResize();
+      onTerminalResize?.();
     });
 
     resizeObserver.observe(element);
 
+    onTerminalReady?.(terminal);
+
     return () => {
       resizeObserver.disconnect();
       terminal.dispose();

packages/runtime/src/tutorial-runner.ts

@@ -66,7 +66,7 @@ export class TutorialRunner {
   private _currentTemplate: Files | undefined = undefined;
   private _currentFiles: Files | undefined = undefined;
   private _currentRunCommands: Commands | undefined = undefined;
-  private _terminal: ITerminal | undefined = undefined;
+  private _output: ITerminal | undefined = undefined;
   private _packageJsonDirty = false;
 
   // this strongly assumes that there's a single package json which might not be true
@@ -287,8 +287,8 @@ export class TutorialRunner {
    *
    * @param terminal Terminal to hook up to WebContainer.
    */
-  hookTerminal(terminal: ITerminal) {
-    this._terminal = terminal;
+  hookOutputPanel(terminal: ITerminal) {
+    this._output = terminal;
 
     if (!isWebContainerSupported()) {
       terminal.write(
@@ -348,8 +348,8 @@ export class TutorialRunner {
     }
   }
 
-  onTerminalResize() {
-    const { cols, rows } = this._terminal ?? {};
+  onOutputResize() {
+    const { cols, rows } = this._output ?? {};
 
     if (cols && rows) {
       this._currentCommandProcess?.resize({ cols, rows });
@@ -464,7 +464,7 @@ export class TutorialRunner {
   }
 
   private async _runCommands(webcontainer: WebContainer, commands: Commands, signal: AbortSignal) {
-    clearTerminal(this._terminal);
+    clearTerminal(this._output);
 
     const abortListener = () => this._currentCommandProcess?.kill();
     signal.addEventListener('abort', abortListener, { once: true });
@@ -495,7 +495,7 @@ export class TutorialRunner {
 
         // print newlines between commands to visually separate them from one another
         if (index > 0) {
-          this._terminal?.write('\n');
+          this._output?.write('\n');
         }
 
         this._currentCommandProcess = await this._newProcess(webcontainer, command.shellCommand);
@@ -547,18 +547,18 @@ export class TutorialRunner {
   private async _newProcess(webcontainer: WebContainer, shellCommand: string) {
     const [command, ...args] = shellCommand.split(' ');
 
-    this._terminal?.write(`${escapeCodes.magenta('❯')} ${escapeCodes.green(command)} ${args.join(' ')}\n`);
+    this._output?.write(`${escapeCodes.magenta('❯')} ${escapeCodes.green(command)} ${args.join(' ')}\n`);
 
     const process = await webcontainer.spawn(command, args, {
-      terminal: this._terminal
+      terminal: this._output
         ? {
-            cols: this._terminal.cols,
-            rows: this._terminal.rows,
+            cols: this._output.cols,
+            rows: this._output.rows,
           }
         : undefined,
     });
 
-    process.output.pipeTo(new WritableStream({ write: (data) => this._terminal?.write(data) }));
+    process.output.pipeTo(new WritableStream({ write: (data) => this._output?.write(data) }));
 
     return process;
   }