v1.1.0

Author: AlemTuzlak

package.json

@@ -11,13 +11,15 @@
   "private": false,
   "type": "module",
   "main": "./dist/index.umd.cjs",
-  "module": "./dist/index.js",
+  "module": "./dist/index.mjs",
   "exports": {
     "./stylesheet.css": "./dist/stylesheet.css",
     ".": {
-      "import": "./dist/index.js",
+      "import": "./dist/index.mjs",
       "require": "./dist/index.umd.cjs",
-      "types": "./dist/index.d.ts"
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.mjs",
+      "node": "./dist/index.umd.cjs"
     }
   },
   "typings": "./dist/index.d.ts",

src/RemixDevTools/RemixDevTools.tsx

@@ -9,28 +9,48 @@ import { isDev } from "./utils/isDev";
 import { useGetSocket } from "./hooks/useGetSocket";
 import { Radio } from "lucide-react";
 import { useResize } from "./hooks/useResize";
+import { useLocation } from "@remix-run/react";
 
 interface Props {
+  position:
+    | "bottom-right"
+    | "bottom-left"
+    | "top-right"
+    | "top-left"
+    | "middle-right"
+    | "middle-left";
   defaultOpen: boolean;
 }
 
-const RemixDevTools = ({ defaultOpen }: Props) => {
+const RemixDevTools = ({ defaultOpen, position }: Props) => {
   const [isOpen, setIsOpen] = useState(defaultOpen);
   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;
+  const leftSideOriented =
+    position === "top-left" ||
+    position === "bottom-left" ||
+    position === "middle-left";
 
   return (
     <div className="remix-dev-tools">
       <div
         style={{ zIndex: 9999 }}
         onClick={() => setIsOpen(!isOpen)}
-        className={
-          "rdt-fixed rdt-bottom-0 rdt-right-0 rdt-m-1.5 rdt-h-14 rdt-w-14 rdt-cursor-pointer rdt-rounded-full "
-        }
+        className={clsx(
+          "rdt-fixed rdt-m-1.5 rdt-h-14 rdt-w-14 rdt-cursor-pointer rdt-rounded-full ",
+          position === "bottom-right" && "rdt-bottom-0 rdt-right-0",
+          position === "bottom-left" && "rdt-bottom-0 rdt-left-0",
+          position === "top-right" && "rdt-right-0 rdt-top-0",
+          position === "top-left" && "rdt-left-0 rdt-top-0",
+          position === "middle-right" &&
+            "rdt-right-0 rdt-top-1/2 -rdt-translate-y-1/2",
+          position === "middle-left" &&
+            "rdt-left-0 rdt-top-1/2 -rdt-translate-y-1/2"
+        )}
       >
         <Logo
           className={clsx(
@@ -93,11 +113,21 @@ const RemixDevTools = ({ defaultOpen }: Props) => {
           )}
         </div>
         <div className="rdt-flex rdt-h-full rdt-w-full rdt-overflow-y-hidden">
-          <div className="rdt-z-20 rdt-h-full rdt-w-full rdt-bg-[#212121] rdt-p-2  rdt-pl-8 ">
+          <div
+            className={clsx(
+              "rdt-z-20 rdt-h-full rdt-w-full rdt-bg-[#212121] rdt-p-2",
+              leftSideOriented ? "rdt-pl-16" : "rdt-pl-8"
+            )}
+          >
             {Component}
           </div>
           <div className="rdt-w-1 rdt-bg-gray-500/20"></div>
-          <div className="rdt-z-10 rdt-h-full rdt-w-2/3 rdt-p-2 rdt-pr-16">
+          <div
+            className={clsx(
+              "rdt-z-10 rdt-h-full rdt-w-2/3 rdt-p-2",
+              leftSideOriented ? "rdt-pl-16" : "rdt-pr-16"
+            )}
+          >
             {tabs.find((t) => t.id === "timeline")?.component}
           </div>
         </div>
@@ -124,18 +154,27 @@ interface RemixDevToolsProps {
   port?: number;
   // Whether the dev tools should be open by default
   defaultOpen?: boolean;
+  // Whether the dev tools require a url flag to be shown
+  requireUrlFlag?: boolean;
+  // Set the position of the trigger button
+  position?: Props["position"];
 }
 
 const RDTWithContext = ({
   port = 3003,
   defaultOpen = false,
+  requireUrlFlag,
+  position = "bottom-right",
 }: RemixDevToolsProps) => {
   const hydrated = useHydrated();
   const isDevelopment = isDev();
+  const url = useLocation().search;
+
   if (!hydrated || !isDevelopment) return null;
+  if (requireUrlFlag && !url.includes("rdt=true")) return null;
   return (
     <RDTContextProvider port={port}>
-      <RemixDevTools defaultOpen={defaultOpen} />
+      <RemixDevTools position={position} defaultOpen={defaultOpen} />
     </RDTContextProvider>
   );
 };

src/remix-app-for-testing/app/root.tsx

@@ -49,7 +49,7 @@ export default function App() {
         <ScrollRestoration />
         <Scripts />
         <LiveReload />
-        {RemixDevTools && <RemixDevTools defaultOpen />}
+        {RemixDevTools && <RemixDevTools defaultOpen  />}
       </body>
     </html>
   );

vite.config.ts

@@ -41,8 +41,9 @@ export default defineConfig({
     lib: {
       entry: resolve(__dirname, "src/index.ts"),
       name: "Remix Dev Tools",
-      fileName: "index",
+      fileName: (format) => `index.${format === "es" ? "mjs" : "umd.cjs"}`,
     },
+    emptyOutDir: false,
     copyPublicDir: true,
     rollupOptions: {
       external: ["react", "react-dom", "@remix-run/react"],