Timeline and page tab

Author: AlemTuzlak

package-lock.json

@@ -73,6 +73,7 @@
   "dependencies": {
     "clsx": "^1.2.1",
     "lucide-react": "^0.252.0",
+    "react-json-view-lite": "^0.9.6",
     "react-use-websocket": "^4.3.1"
   }
-}
+}

package.json

@@ -1,115 +1,112 @@
 import clsx from "clsx";
 import { Logo } from "./Logo";
 import { useEffect, useState } from "react";
-import { GitMerge, Package, Server, Terminal } from "lucide-react";
-import { RoutesTab } from "./tabs/RoutesTab";
-import { TerminalTab } from "./tabs/TerminalTab";
-import { ServerTab } from "./tabs/ServerTab";
-import { PageTab } from "./tabs/PageTab";
+import { RDTContextProvider } from "./context/RDTContext";
+import { tabs } from "./tabs";
+import { useTimelineHandler } from "./hooks/useTimelineHandler";
+import { useRDTContext } from "./context/useRDTContext";
+import { isDev } from "./utils/isDev";
+import { useGetSocket } from "./hooks/useGetSocket";
+import { Radio } from "lucide-react";
 
-interface RemixDevToolsProps {}
-
-let hydrating = true;
-
-function useHydrated() {
-  let [hydrated, setHydrated] = useState(() => !hydrating);
-
-  useEffect(function hydrate() {
-    hydrating = false;
-    setHydrated(true);
-  }, []);
-
-  return hydrated;
-}
-
-type Tabs = "routes" | "terminal" | "server" | "page";
-
-interface Tab {
-  id: Tabs;
-  name: string;
-  icon: React.ReactNode;
-  component: JSX.Element;
-}
-
-const RemixDevTools = ({}: RemixDevToolsProps) => {
+const RemixDevTools = () => {
   const [isOpen, setIsOpen] = useState(true);
-  const [activeTab, setActiveTab] = useState<Tabs>("page");
-  const hydrated = useHydrated();
-
-  if (!hydrated) return null;
-  const tabs: Tab[] = [
-    {
-      name: "Page",
-      icon: <Package size={16} />,
-      id: "page",
-      component: <PageTab />,
-    },
-    {
-      name: "Routes",
-      icon: <GitMerge size={16} />,
-      id: "routes",
-      component: <RoutesTab />,
-    },
-    {
-      name: "Terminal",
-      icon: <Terminal size={16} />,
-      id: "terminal",
-      component: <TerminalTab />,
-    },
-    {
-      name: "Server",
-      icon: <Server size={16} />,
-      id: "server",
-      component: <ServerTab />,
-    },
-  ];
+  const { activeTab, setActiveTab, setShouldConnectWithForge } =
+    useRDTContext();
 
+  useTimelineHandler();
+  const { isConnected, isConnecting } = useGetSocket();
   const Component = tabs.find((tab) => tab.id === activeTab)?.component;
-  return hydrated ? (
+  console.log(window.__remixManifest.routes);
+  return (
     <div className="remix-dev-tools">
       <div
         style={{ zIndex: 9999 }}
         onClick={() => setIsOpen(!isOpen)}
         className={
-          "fixed cursor-pointer bottom-0 m-1 w-14 h-14 right-0 rounded-full "
+          "rdt-fixed rdt-cursor-pointer rdt-bottom-0 rdt-m-1.5 rdt-w-14 rdt-h-14 rdt-right-0 rdt-rounded-full "
         }
       >
         <Logo
           className={clsx(
-            "rounded-full w-14 h-14 duration-200 transition-all",
-            "hover:cursor-pointer hover:ring-2 ring-slate-600"
+            "rdt-rounded-full rdt-w-14 rdt-h-14 rdt-duration-200 rdt-transition-all",
+            "rdt-hover:cursor-pointer rdt-hover:ring-2 rdt-ring-slate-600"
           )}
         />
       </div>
 
       <div
         style={{ zIndex: 9998 }}
         className={clsx(
-          "fixed flex flex-col left-0 box-border bottom-0 transition-all duration-600 opacity-0 bg-[#212121] w-screen text-white",
-          isOpen ? "h-96 drop-shadow-2xl opacity-100" : "h-0"
+          "rdt-fixed rdt-flex rdt-flex-col rdt-resize-y rdt-overflow-auto rdt-left-0 rdt-box-border rdt-bottom-0 rdt-transition-all rdt-duration-600 rdt-opacity-0 rdt-bg-[#212121] rdt-w-screen rdt-text-white",
+          isOpen
+            ? "rdt-drop-shadow-2xl rdt-h-[40vh] rdt-opacity-100"
+            : "rdt-h-0"
         )}
       >
-        <div className="flex h-8 w-full bg-gray-800">
-          {tabs.map((tab) => (
+        <div className="rdt-flex rdt-h-8 rdt-w-full rdt-bg-gray-800">
+          {tabs
+            .filter((tab) => !(!isConnected && tab.requiresForge))
+            .map((tab) => (
+              <div
+                key={tab.id}
+                onClick={() => setActiveTab(tab.id)}
+                className={clsx(
+                  "rdt-flex rdt-font-sans rdt-transition-all rdt-duration-300 rdt-items-center rdt-gap-2 rdt-cursor-pointer rdt-border-r-2 rdt-px-4 rdt-border-0 rdt-border-solid rdt-border-r-[#212121] rdt-border-b rdt-border-b-[#212121]",
+                  activeTab !== tab.id && "rdt-hover:opacity-50",
+                  activeTab === tab.id && "rdt-bg-[#212121]"
+                )}
+              >
+                {tab.icon} {tab.name}
+              </div>
+            ))}
+          {(!isConnected || isConnecting) && (
             <div
-              key={tab.id}
-              onClick={() => setActiveTab(tab.id)}
+              onClick={() => setShouldConnectWithForge(true)}
               className={clsx(
-                "flex font-sans transition-all duration-300 items-center gap-2 cursor-pointer border-r-2 px-4 border-0 border-solid border-r-[#212121] border-b border-b-[#212121]",
-                activeTab !== tab.id && "hover:opacity-50",
-                activeTab === tab.id && "bg-[#212121]"
+                isConnecting
+                  ? "rdt-animate-pulse rdt-pointer-events-none rdt-cursor-default"
+                  : "",
+                "rdt-flex rdt-font-sans rdt-transition-all rdt-duration-300 rdt-items-center rdt-gap-2 rdt-cursor-pointer rdt-border-r-2 rdt-px-4 rdt-border-0 rdt-border-solid rdt-border-r-[#212121] rdt-border-b rdt-border-b-[#212121]"
               )}
             >
-              {tab.icon} {tab.name}
+              <Radio size={16} />
+              {isConnecting
+                ? "Connecting to Forge..."
+                : "Connect to Remix Forge"}
             </div>
-          ))}
+          )}
         </div>
-        <div className="h-full w-full flex">
-          <div className="w-full p-2 pr-16">{Component}</div>
+        <div className="rdt-h-full rdt-w-full rdt-flex rdt-overflow-y-auto">
+          <div className="rdt-w-full rdt-p-2 rdt-pr-16">{Component}</div>
         </div>
       </div>
     </div>
-  ) : null;
+  );
+};
+
+let hydrating = true;
+
+function useHydrated() {
+  let [hydrated, setHydrated] = useState(() => !hydrating);
+
+  useEffect(function hydrate() {
+    hydrating = false;
+    setHydrated(true);
+  }, []);
+
+  return hydrated;
+}
+
+const RDTWithContext = () => {
+  const hydrated = useHydrated();
+  const isDevelopment = isDev();
+  if (!hydrated || !isDevelopment) return null;
+  return (
+    <RDTContextProvider>
+      <RemixDevTools />
+    </RDTContextProvider>
+  );
 };
 
-export { RemixDevTools };
+export { RDTWithContext as RemixDevTools };

src/RemixDevTools/RemixDevTools.tsx

@@ -0,0 +1,31 @@
+import { JsonView, darkStyles, defaultStyles } from "react-json-view-lite";
+import "react-json-view-lite/dist/index.css";
+
+interface JsonRendererProps {
+  data: string | Record<string, unknown>;
+  levelsShown?: number;
+}
+
+const JsonRenderer = ({ data, levelsShown = 0 }: JsonRendererProps) => {
+  return (
+    <JsonView
+      shouldInitiallyExpand={(level) => level < levelsShown}
+      style={{
+        ...darkStyles,
+        basicChildStyle: "rdt-ml-4",
+        container: "-rdt-ml-4",
+        punctuation: "rdt-mr-2 ",
+        pointer: "rdt-mr-2 rdt-text-white rdt-text-lg",
+        label: "rdt-mr-1 rdt-text-white/80",
+        stringValue: "rdt-text-green-500",
+        numberValue: "rdt-text-orange-500",
+        nullValue: "rdt-text-blue-500",
+        undefinedValue: "rdt-text-blue-500",
+        booleanValue: "rdt-text-purple-500",
+      }}
+      data={data}
+    />
+  );
+};
+
+export { JsonRenderer };

src/RemixDevTools/components/jsonRenderer.tsx

@@ -0,0 +1,37 @@
+import type { Dispatch } from "react";
+import React, { useMemo, createContext, useReducer } from "react";
+import {
+  RemixDevToolsActions,
+  RemixDevToolsState,
+  rdtReducer,
+  initialState,
+} from "./rdtReducer";
+
+export const RDTContext = createContext<{
+  state: RemixDevToolsState;
+  dispatch: Dispatch<RemixDevToolsActions>;
+}>({ state: initialState, dispatch: () => null });
+
+RDTContext.displayName = "RDTContext";
+
+interface ContextProps {
+  children: React.ReactNode;
+}
+
+export const REMIX_DEV_TOOLS = "remixDevTools";
+
+export const RDTContextProvider = ({ children }: ContextProps) => {
+  const existingState = sessionStorage.getItem(REMIX_DEV_TOOLS);
+  const settings = localStorage.getItem(REMIX_DEV_TOOLS);
+
+  const [state, dispatch] = useReducer(rdtReducer, {
+    ...initialState,
+    ...(existingState ? JSON.parse(existingState) : {}),
+    settings: settings
+      ? { ...initialState.settings, ...JSON.parse(settings) }
+      : initialState.settings,
+  });
+
+  const value = useMemo(() => ({ state, dispatch }), [state, dispatch]);
+  return <RDTContext.Provider value={value}>{children}</RDTContext.Provider>;
+};