V1.2.0

Author: AlemTuzlak

README.md

@@ -6,7 +6,7 @@
 ![npm](https://img.shields.io/npm/dy/remix-development-tools?style=plastic) 
 ![GitHub top language](https://img.shields.io/github/languages/top/Code-Forge-Net/Remix-Dev-Tools?style=plastic) 
 
-Remix Development Tools is an open-source package designed to enhance your development workflow when working with Remix, a full-stack JavaScript framework for building web applications. This package provides a user-friendly interface consisting of two tabs, **Active Page** and **Routes**, along with a side tab called **Timeline**. With Remix Development Tools, you can efficiently monitor and manage various aspects of your Remix projects, including page information, URL parameters, server responses, loader data, routes, and more.
+Remix Development Tools is an open-source package designed to enhance your development workflow when working with Remix, a full-stack JavaScript framework for building web applications. This package provides a user-friendly interface consisting of three tabs, **Active Page**, **Terminal** and **Routes**, along with a side tab called **Timeline**. With Remix Development Tools, you can efficiently monitor and manage various aspects of your Remix projects, including page information, URL parameters, server responses, loader data, routes, and more.
 
 ## Features
 
@@ -34,6 +34,15 @@ The **Routes** tab enables you to manage and explore the routes within your Remi
 
 The **Timeline** side tab provides a timeline view of events occurring during the development process. This tab helps you track the sequence of actions and events, providing valuable insights into the execution flow of your application.
 
+### Terminal tab
+
+The terminal tab allows you to run terminal commands from the Remix Dev Tools. This is useful for running commands like `npm run typecheck` or `npm run lint:fix` without having to switch to the terminal in VS code. The tab requires you to connect to Remix Forge VS Code extension to work properly. 
+
+You can press `Arrow Up` and `Arrow Down` to cycle through the history of commands you have run in the terminal.
+You can press `Arrow Left` and `Arrow Right` to cycle through all available commands in your projects package.json file.
+You can press `Ctrl + C` to cancel the current command.
+You can press `Ctrl + L` to clear the terminal.
+
 ## Getting Started
 
 To install and utilize Remix Development Tools, follow these steps:

package-lock.json

@@ -2,7 +2,7 @@
   "name": "remix-development-tools",
   "description": "Remix development tools.",
   "author": "Alem Tuzlak",
-  "version": "1.1.3",
+  "version": "1.2.0",
   "license": "MIT",
   "keywords": [
     "remix",

package.json

@@ -1,11 +1,13 @@
 import { TimelineEvent } from "./timeline";
 import type { Tabs } from "../tabs";
+import { Terminal } from "./terminal";
 
 export type RouteWildcards = Record<string, Record<string, string> | undefined>;
 
 export type RemixDevToolsState = {
   timeline: TimelineEvent[];
   showRouteBoundaries?: boolean;
+  terminals: Terminal[];
   settings: {
     routeWildcards: RouteWildcards;
     activeTab: Tabs;
@@ -18,6 +20,7 @@ export type RemixDevToolsState = {
 export const initialState: RemixDevToolsState = {
   timeline: [],
   showRouteBoundaries: false,
+  terminals: [{ id: 0, locked: false, output: [], history: [] }],
   settings: {
     routeWildcards: {},
     activeTab: "timeline",
@@ -35,11 +38,52 @@ type SetTimelineEvent = {
   payload: TimelineEvent;
 };
 
+type ToggleTerminalLock = {
+  type: "TOGGLE_TERMINAL_LOCK";
+  payload: {
+    terminalId: Terminal["id"];
+    locked?: boolean;
+  };
+};
+
+type AddOrRemoveTerminal = {
+  type: "ADD_OR_REMOVE_TERMINAL";
+  payload?: Terminal["id"];
+};
+
+type AddTerminalOutput = {
+  type: "ADD_TERMINAL_OUTPUT";
+  payload: {
+    terminalId: Terminal["id"];
+    output: Terminal["output"][number];
+  };
+};
+
+type AddTerminalHistory = {
+  type: "ADD_TERMINAL_HISTORY";
+  payload: {
+    terminalId: Terminal["id"];
+    history: Terminal["history"][number];
+  };
+};
+
+type ClearTerminalOutput = {
+  type: "CLEAR_TERMINAL_OUTPUT";
+  payload: Terminal["id"];
+};
+
 type SetActiveTab = {
   type: "SET_ACTIVE_TAB";
   payload: Tabs;
 };
 
+type SetProcessId = {
+  type: "SET_PROCESS_ID";
+  payload: {
+    terminalId: Terminal["id"];
+    processId?: number;
+  };
+};
 type SetDevToolsHeight = {
   type: "SET_HEIGHT";
   payload: number;
@@ -68,7 +112,13 @@ type SetShouldConnectToForgeAction = {
 /** Aggregate of all action types */
 export type RemixDevToolsActions =
   | SetTimelineEvent
+  | ToggleTerminalLock
+  | AddOrRemoveTerminal
+  | AddTerminalOutput
+  | ClearTerminalOutput
+  | AddTerminalHistory
   | SetActiveTab
+  | SetProcessId
   | PurgeTimeline
   | SetRouteWildcards
   | SetDevToolsHeight
@@ -120,7 +170,97 @@ export const rdtReducer = (
           height: payload,
         },
       };
+    case "SET_PROCESS_ID":
+      return {
+        ...state,
+        terminals: state.terminals.map((terminal) => {
+          if (terminal.id === payload.terminalId) {
+            return {
+              ...terminal,
+              processId: payload.processId,
+            };
+          }
+          return terminal;
+        }),
+      };
+    case "TOGGLE_TERMINAL_LOCK":
+      return {
+        ...state,
+        terminals: state.terminals.map((terminal) => {
+          if (terminal.id === payload.terminalId) {
+            return {
+              ...terminal,
+              locked: payload.locked ?? !terminal.locked,
+            };
+          }
+          return terminal;
+        }),
+      };
+    case "ADD_OR_REMOVE_TERMINAL": {
+      const terminalExists = state.terminals.some(
+        (terminal) => terminal.id === payload
+      );
+      if (terminalExists) {
+        return {
+          ...state,
+          terminals: state.terminals
+            .filter((terminal) => terminal.id !== payload)
+            .map((terminal, i) => ({ ...terminal, id: i })),
+        };
+      }
+      return {
+        ...state,
+        terminals: [
+          ...state.terminals,
+          {
+            id: state.terminals.length,
+            locked: false,
+            history: [],
+            output: [],
+          },
+        ],
+      };
+    }
+    case "ADD_TERMINAL_OUTPUT":
+      return {
+        ...state,
+        terminals: state.terminals.map((terminal) => {
+          if (terminal.id === payload.terminalId) {
+            return {
+              ...terminal,
+              output: [...terminal.output, payload.output],
+            };
+          }
+          return terminal;
+        }),
+      };
+    case "CLEAR_TERMINAL_OUTPUT":
+      return {
+        ...state,
+        terminals: state.terminals.map((terminal) => {
+          if (terminal.id === payload) {
+            return {
+              ...terminal,
+              output: [],
+            };
+          }
+          return terminal;
+        }),
+      };
 
+    case "ADD_TERMINAL_HISTORY":
+      return {
+        ...state,
+        terminals: state.terminals.map((terminal) => {
+          if (terminal.id === payload.terminalId) {
+            return {
+              ...terminal,
+              history: [...terminal.history, payload.history],
+            };
+          }
+          return terminal;
+        }),
+      };
     case "SET_SHOULD_CONNECT_TO_FORGE":
       return {
         ...state,

src/RemixDevTools/context/rdtReducer.ts

@@ -0,0 +1,12 @@
+export interface TerminalOutput {
+  type: "output" | "command" | "error";
+  value: string;
+}
+
+export interface Terminal {
+  id: number;
+  locked: boolean;
+  history: string[];
+  output: TerminalOutput[];
+  processId?: number;
+}

src/RemixDevTools/context/terminal/index.ts

@@ -3,14 +3,15 @@ import { RDTContext, REMIX_DEV_TOOLS } from "./RDTContext";
 import { TimelineEvent } from "./timeline";
 import { Tabs } from "../tabs";
 import { RouteWildcards } from "./rdtReducer";
+import { Terminal } from "./terminal";
 
 const useRDTContext = () => {
   const context = useContext(RDTContext);
   if (context === undefined) {
     throw new Error("useRDTContext must be used within a RDTContextProvider");
   }
   const { state, dispatch } = context;
-  const { timeline, settings, showRouteBoundaries } = state;
+  const { timeline, settings, showRouteBoundaries, terminals } = state;
   const { activeTab, shouldConnectWithForge, routeWildcards, port, height } =
     settings;
 
@@ -45,6 +46,40 @@ const useRDTContext = () => {
     },
     [dispatch]
   );
+  const addOrRemoveTerminal = useCallback(
+    (terminalId?: Terminal["id"]) => {
+      dispatch({ type: "ADD_OR_REMOVE_TERMINAL", payload: terminalId });
+    },
+    [dispatch]
+  );
+
+  const toggleTerminalLock = useCallback(
+    (terminalId: Terminal["id"], locked?: boolean) => {
+      dispatch({
+        type: "TOGGLE_TERMINAL_LOCK",
+        payload: { terminalId, locked },
+      });
+    },
+    [dispatch]
+  );
+
+  const addTerminalOutput = useCallback(
+    (terminalId: Terminal["id"], output: Terminal["output"][number]) => {
+      dispatch({
+        type: "ADD_TERMINAL_OUTPUT",
+        payload: { terminalId, output },
+      });
+    },
+    [dispatch]
+  );
+
+  const clearTerminalOutput = useCallback(
+    (terminalId: Terminal["id"]) => {
+      dispatch({ type: "CLEAR_TERMINAL_OUTPUT", payload: terminalId });
+    },
+    [dispatch]
+  );
+
   const setShouldConnectWithForge = useCallback(
     (shouldConnectWithForge: boolean) => {
       dispatch({
@@ -55,6 +90,15 @@ const useRDTContext = () => {
     [dispatch]
   );
 
+  const addTerminalHistory = useCallback(
+    (terminalId: Terminal["id"], history: Terminal["history"][number]) => {
+      dispatch({
+        type: "ADD_TERMINAL_HISTORY",
+        payload: { terminalId, history },
+      });
+    },
+    [dispatch]
+  );
   const setHeight = useCallback(
     (height: number) => {
       dispatch({
@@ -64,6 +108,15 @@ const useRDTContext = () => {
     },
     [dispatch]
   );
+  const setProcessId = useCallback(
+    (terminalId: Terminal["id"], processId?: number) => {
+      dispatch({
+        type: "SET_PROCESS_ID",
+        payload: { terminalId, processId },
+      });
+    },
+    [dispatch]
+  );
 
   return {
     setTimelineEvent,
@@ -79,6 +132,13 @@ const useRDTContext = () => {
     showRouteBoundaries,
     setHeight,
     setRouteWildcards,
+    terminals,
+    addOrRemoveTerminal,
+    toggleTerminalLock,
+    addTerminalOutput,
+    clearTerminalOutput,
+    addTerminalHistory,
+    setProcessId,
   };
 };