Version 1.0.7 - Resizing

Author: AlemTuzlak

.husky/pre-commit

@@ -0,0 +1,4 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+npm run lint && npm run tsc

.husky/pre-push

@@ -0,0 +1,4 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+npm test

package-lock.json

@@ -2,21 +2,22 @@
   "name": "remix-development-tools",
   "description": "Remix development tools.",
   "author": "Alem Tuzlak",
-  "version": "1.0.6",
+  "version": "1.0.7",
   "license": "MIT",
   "keywords": [
     "remix",
     "remix-dev-tools"
   ],
   "private": false,
   "type": "module",
-  "main": "./dist/index.cjs",
+  "main": "./dist/index.umd.cjs",
   "module": "./dist/index.js",
   "exports": {
     "./stylesheet.css": "./dist/stylesheet.css",
     ".": {
       "import": "./dist/index.js",
-      "require": "./dist/index.cjs"
+      "require": "./dist/index.umd.cjs",
+      "types": "./dist/index.d.ts"
     }
   },
   "typings": "./dist/index.d.ts",
@@ -42,7 +43,12 @@
     "lint": "eslint src --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
     "prettier": "prettier --check .",
     "preview": "vite preview",
-    "test": "vitest run --coverage"
+    "profile": "vite build --profile",
+    "test": "vitest run --coverage",
+    "setup": "npm install && cd ./src/remix-app-for-testing && npm install && cd ../..",
+    "prepare": "husky install",
+    "tsc": "tsc --noEmit",
+    "validate": "npm run lint && npm run tsc && npm run test"
   },
   "workspaces": [
     ".",
@@ -69,6 +75,7 @@
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.3.4",
     "happy-dom": "^9.9.2",
+    "husky": "^8.0.3",
     "nodemon": "^3.0.1",
     "npm-run-all": "^4.1.5",
     "postcss": "^8.4.24",
@@ -92,4 +99,4 @@
     "react-use-websocket": "^4.3.1",
     "tailwind-merge": "^1.13.2"
   }
-}
+}

package.json

@@ -8,16 +8,17 @@ import { useRDTContext } from "./context/useRDTContext";
 import { isDev } from "./utils/isDev";
 import { useGetSocket } from "./hooks/useGetSocket";
 import { Radio } from "lucide-react";
+import { useResize } from "./hooks/useResize";
 
 interface Props {
   defaultOpen: boolean;
 }
 
 const RemixDevTools = ({ defaultOpen }: Props) => {
   const [isOpen, setIsOpen] = useState(defaultOpen);
-  const { activeTab, setActiveTab, setShouldConnectWithForge } =
+  const { activeTab, setActiveTab, setShouldConnectWithForge, height } =
     useRDTContext();
-
+  const { enableResize, disableResize, isResizing } = useResize();
   useTimelineHandler();
   const { isConnected, isConnecting } = useGetSocket();
   const Component = tabs.find((tab) => tab.id === activeTab)?.component;
@@ -38,16 +39,23 @@ const RemixDevTools = ({ defaultOpen }: Props) => {
           )}
         />
       </div>
-
       <div
-        style={{ zIndex: 9998 }}
+        style={{ zIndex: 9998, height }}
         className={clsx(
           "rdt-duration-600 rdt-fixed rdt-bottom-0 rdt-left-0 rdt-box-border rdt-flex rdt-w-screen rdt-resize-y rdt-flex-col rdt-overflow-auto rdt-bg-[#212121] rdt-text-white rdt-opacity-0 rdt-transition-all",
-          isOpen
-            ? "rdt-h-[40vh] rdt-opacity-100 rdt-drop-shadow-2xl"
-            : "rdt-h-0"
+          isOpen ? "rdt-opacity-100 rdt-drop-shadow-2xl" : "rdt-h-0",
+          isResizing ? "rdt-pointer-events-none" : "",
+          isResizing && "rdt-cursor-grabbing "
         )}
       >
+        <div
+          onMouseDown={enableResize}
+          onMouseUp={disableResize}
+          className={clsx(
+            "rdt-absolute rdt-h-1 rdt-w-full rdt-cursor-n-resize",
+            isResizing && "rdt-cursor-grabbing "
+          )}
+        />
         <div className="rdt-flex rdt-h-8 rdt-w-full rdt-bg-gray-800">
           {tabs
             .filter(

src/RemixDevTools/RemixDevTools.tsx

@@ -10,6 +10,7 @@ export type RemixDevToolsState = {
     activeTab: Tabs;
     shouldConnectWithForge: boolean;
     port: number;
+    height: number;
   };
 };
 
@@ -20,6 +21,7 @@ export const initialState: RemixDevToolsState = {
     activeTab: "timeline",
     shouldConnectWithForge: false,
     port: 3003,
+    height: 400,
   },
 };
 
@@ -36,6 +38,11 @@ type SetActiveTab = {
   payload: Tabs;
 };
 
+type SetDevToolsHeight = {
+  type: "SET_HEIGHT";
+  payload: number;
+};
+
 type SetRouteWildcards = {
   type: "SET_ROUTE_WILDCARDS";
   payload: RouteWildcards;
@@ -62,6 +69,7 @@ export type RemixDevToolsActions =
   | SetActiveTab
   | PurgeTimeline
   | SetRouteWildcards
+  | SetDevToolsHeight
   | SetShouldConnectToForgeAction
   | SetIsSubmittedAction;
 
@@ -102,6 +110,15 @@ export const rdtReducer = (
           routeWildcards: payload,
         },
       };
+    case "SET_HEIGHT":
+      return {
+        ...state,
+        settings: {
+          ...state.settings,
+          height: payload,
+        },
+      };
+
     case "SET_SHOULD_CONNECT_TO_FORGE":
       return {
         ...state,

src/RemixDevTools/context/rdtReducer.ts

@@ -11,7 +11,8 @@ const useRDTContext = () => {
   }
   const { state, dispatch } = context;
   const { timeline, settings } = state;
-  const { activeTab, shouldConnectWithForge, routeWildcards, port } = settings;
+  const { activeTab, shouldConnectWithForge, routeWildcards, port, height } =
+    settings;
 
   useEffect(() => {
     const reducedState = { ...state };
@@ -53,6 +54,17 @@ const useRDTContext = () => {
     },
     [dispatch]
   );
+
+  const setHeight = useCallback(
+    (height: number) => {
+      dispatch({
+        type: "SET_HEIGHT",
+        payload: height,
+      });
+    },
+    [dispatch]
+  );
+
   return {
     setTimelineEvent,
     setActiveTab,
@@ -63,6 +75,8 @@ const useRDTContext = () => {
     shouldConnectWithForge,
     routeWildcards,
     port,
+    height,
+    setHeight,
     setRouteWildcards,
   };
 };

src/RemixDevTools/context/useRDTContext.ts

@@ -1,14 +1,9 @@
 import { useCallback, useEffect, useState } from "react";
+import { useRDTContext } from "../context/useRDTContext";
 
-type UseResizeProps = {
-  minHeight: number;
-};
-
-const useResize = (
-  { minHeight = 384 }: UseResizeProps = { minHeight: 384 }
-) => {
+const useResize = () => {
+  const { height, setHeight } = useRDTContext();
   const [isResizing, setIsResizing] = useState(false);
-  const [height, setHeight] = useState(minHeight);
 
   const enableResize = useCallback(() => {
     setIsResizing(true);
@@ -24,12 +19,11 @@ const useResize = (
         const newHeight = window.innerHeight - e.clientY; // Calculate the new height based on the mouse position
 
         //const newHeight = e.clientY; // You may want to add some offset here from props
-        if (newHeight >= minHeight) {
-          setHeight(newHeight);
-        }
+
+        setHeight(newHeight);
       }
     },
-    [minHeight, isResizing, setHeight]
+    [isResizing, setHeight]
   );
 
   useEffect(() => {
@@ -42,7 +36,7 @@ const useResize = (
     };
   }, [disableResize, resize]);
 
-  return { height, enableResize };
+  return { height, enableResize, disableResize, isResizing };
 };
 
 export { useResize };

src/RemixDevTools/hooks/useResize.ts

@@ -1 +1,2 @@
 export * from "./RemixDevTools";
+export { RemixDevTools as default } from "./RemixDevTools";

src/RemixDevTools/index.ts

@@ -43,8 +43,9 @@ const PageTab = () => {
   const reversed = routes.reverse();
   const { revalidate, state } = useRevalidator();
   const { isConnected, sendJsonMessage } = useGetSocket();
+
   return (
-    <div className="rdt-relative rdt-flex rdt-h-[40vh] rdt-flex-col rdt-overflow-y-auto rdt-p-6 rdt-px-6">
+    <div className="rdt-relative rdt-flex rdt-h-full rdt-flex-col rdt-overflow-y-auto rdt-p-6 rdt-px-6">
       <button
         onClick={() => revalidate()}
         className={clsx(