close tab when shell exits (#48)

Author: atinylittleshell

apps/app/src/nativeBridge/modules/terminalModule.ts

@@ -70,6 +70,10 @@ class PTYInstance {
   public onData(handler: (_: string) => void): void {
     this.ptyProcess.onData(handler);
   }
+
+  public onExit(handler: () => void): void {
+    this.ptyProcess.onExit(handler);
+  }
 }
 
 @nativeBridgeModule('terminal')
@@ -78,7 +82,7 @@ export class TerminalModule extends NativeBridgeModule {
 
   @moduleFunction()
   public async createTerminalIfNotExist(
-    _mainWindow: BrowserWindow,
+    mainWindow: BrowserWindow,
     id: string,
     cols: number,
     rows: number,
@@ -97,7 +101,10 @@ export class TerminalModule extends NativeBridgeModule {
       startupDirectory,
     );
     ptyInstance.onData((data: string) => {
-      this.onData(_mainWindow, ptyInstance.id, data);
+      this.onData(mainWindow, ptyInstance.id, data);
+    });
+    ptyInstance.onExit(() => {
+      this.onExit(mainWindow, ptyInstance.id);
     });
 
     this.ptyInstances[ptyInstance.id] = ptyInstance;
@@ -149,4 +156,9 @@ export class TerminalModule extends NativeBridgeModule {
   public onData(_mainWindow: BrowserWindow, _id: string, _data: string): void {
     return;
   }
+
+  @moduleEvent('on')
+  public onExit(_mainWindow: BrowserWindow, _id: string): void {
+    return;
+  }
 }

apps/app/tsconfig.json

@@ -10,6 +10,7 @@
     "**/*.tsx"
   ],
   "exclude": [
+    "dist",
     "node_modules"
   ]
 }

apps/terminal/app/page.tsx

@@ -49,11 +49,21 @@ const Page = () => {
     setTabId(newTabId);
   }, [userTabs, config]);
 
-  const closeTab = useCallback(() => {
-    const newTabs = userTabs.filter((t) => t.tabId !== tabId);
-    setUserTabs(newTabs);
-    setTabId(_.max(newTabs.map((t) => t.tabId)) || 0);
-  }, [userTabs, tabId]);
+  const closeTab = useCallback(
+    (targetTabId: number) => {
+      const newTabs = userTabs.filter((t) => t.tabId !== targetTabId);
+      if (newTabs.length === 0) {
+        window.TerminalOne?.app.quit();
+      } else {
+        setUserTabs(newTabs);
+        setTabId(_.max(newTabs.map((t) => t.tabId)) || 0);
+      }
+    },
+    [userTabs],
+  );
+  const closeCurrentTab = useCallback(() => {
+    closeTab(tabId);
+  }, [closeTab, tabId]);
 
   const nextTab = useCallback(() => {
     const currentTabIndex = userTabs.findIndex((t) => t.tabId === tabId);
@@ -126,7 +136,7 @@ const Page = () => {
 
   useEffect(() => {
     commands.on('createTab', createTab);
-    commands.on('closeTab', closeTab);
+    commands.on('closeTab', closeCurrentTab);
     commands.on('nextTab', nextTab);
     commands.on('previousTab', previousTab);
     commands.on('tab1', switchToTab1);
@@ -141,7 +151,7 @@ const Page = () => {
 
     return () => {
       commands.off('createTab', createTab);
-      commands.off('closeTab', closeTab);
+      commands.off('closeTab', closeCurrentTab);
       commands.off('nextTab', nextTab);
       commands.off('previousTab', previousTab);
       commands.off('tab1', switchToTab1);
@@ -157,7 +167,7 @@ const Page = () => {
   }, [
     commands,
     createTab,
-    closeTab,
+    closeCurrentTab,
     nextTab,
     previousTab,
     switchToTab1,
@@ -229,7 +239,7 @@ const Page = () => {
                 <button
                   className="btn btn-ghost btn-square btn-xs opacity-50 hover:bg-transparent hover:opacity-100 ml-2"
                   onClick={() => {
-                    closeTab();
+                    closeTab(tabId);
                   }}
                 >
                   <FiX />
@@ -265,6 +275,9 @@ const Page = () => {
                 key={userTab.tabId}
                 active={tabId === userTab.tabId}
                 tabId={userTab.tabId}
+                close={() => {
+                  closeTab(userTab.tabId);
+                }}
               />
             );
           })}

apps/terminal/components/Tab/index.tsx

@@ -3,12 +3,20 @@ import _ from 'lodash';
 import { TabContextProvider } from '../../hooks/TabContext';
 import { TerminalTreeNode } from '../TerminalTreeNode';
 
-const Tab = ({ tabId, active }: { tabId: number; active: boolean }) => {
+const Tab = ({
+  tabId,
+  active,
+  close,
+}: {
+  tabId: number;
+  active: boolean;
+  close: () => void;
+}) => {
   return (
     <div
       className={`w-full h-full absolute ${active ? 'visible' : 'invisible'}`}
     >
-      <TabContextProvider active={active} tabId={tabId}>
+      <TabContextProvider active={active} tabId={tabId} close={close}>
         <TerminalTreeNode data={null} />
       </TabContextProvider>
     </div>

apps/terminal/components/Terminal/index.tsx

@@ -24,7 +24,7 @@ const Terminal = ({
   const [shellName, setShellName] = useState<string | null | undefined>(
     undefined,
   );
-  const { handleKey } = useKeybindContext();
+  const { handleKey, commands } = useKeybindContext();
   const terminalRef = useRef<HTMLDivElement>(null);
   const xtermRef = useRef<XTerm | null>(null);
   const { root, activeTerminalId, onTerminalActive, onTerminalCreated } =
@@ -129,6 +129,12 @@ const Terminal = ({
           }
           xterm.write(data);
         });
+        window.TerminalOne?.terminal?.onExit((_e, id: string) => {
+          if (id !== terminalId) {
+            return;
+          }
+          commands.emit('closePane', terminalId);
+        });
 
         // make backend pty size consistent with xterm on the frontend
         fitAddon.fit();
@@ -194,6 +200,7 @@ const Terminal = ({
     terminalId,
     config,
     handleKey,
+    commands,
     onTerminalActive,
     onTerminalCreated,
   ]);

apps/terminal/hooks/TabContext.tsx

@@ -35,6 +35,7 @@ const lookupTerminalById = (root: TerminalTreeNodeData, terminalId: string) => {
 const createCloseHandler = (
   root: TerminalTreeNodeData,
   setRoot: (root: TerminalTreeNodeData) => void,
+  closeRoot: () => void,
 ) => {
   return (terminalId: string) => {
     const node = lookupTerminalById(root, terminalId);
@@ -44,6 +45,7 @@ const createCloseHandler = (
 
     const replaceTarget = node.parent;
     if (!replaceTarget) {
+      closeRoot();
       return;
     }
     if (replaceTarget.nodeType === 'terminal') {
@@ -248,6 +250,7 @@ export const TabContextProvider = (
   props: React.PropsWithChildren<{
     active: boolean;
     tabId: number;
+    close: () => void;
   }>,
 ) => {
   const { commands } = useKeybindContext();
@@ -293,7 +296,9 @@ export const TabContextProvider = (
       onTerminalActive,
       'right',
     );
-    const closePane = createCloseHandler(root, setRoot);
+    const closePane = createCloseHandler(root, setRoot, () => {
+      props.close();
+    });
 
     commands.on('splitVertical', splitVertical);
     commands.on('splitHorizontal', splitHorizontal);
@@ -316,7 +321,7 @@ export const TabContextProvider = (
 
       commands.off('closePane', closePane);
     };
-  }, [commands, onTerminalActive, root]);
+  }, [commands, onTerminalActive, root, props]);
 
   return (
     <TabContext.Provider

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@terminalone/monorepo",
   "productName": "Terminal One",
-  "version": "1.4.2",
+  "version": "1.5.0",
   "description": "A fast, elegant and intelligent cross-platform terminal.",
   "author": "atinylittleshell <shell@atinylittleshell.me>",
   "license": "MIT",

packages/types/nativeBridge.ts

@@ -76,6 +76,9 @@ export type INativeBridge = {
         _data: string,
       ) => void,
     ) => void;
+    onExit: (
+      _callback: (_event: ElectronOpaqueEvent, _id: string) => void,
+    ) => void;
   };
   config: {
     getConfig: () => Promise<ResolvedConfig>;