v2.1.3 - Json reader defer and depth upgrade

Author: AlemTuzlak

README.md

@@ -1,5 +1,5 @@
 <center>
-<img src="./assets/remix-dev-tools.png" align="center" style="width:160px; height:160px;" />
+<img src="./assets/remix-dev-tools.png" align="middle" width="160" height="160" alt="Remix Development Tools"  />
 </center>
 
 # Remix Development Tools
@@ -22,6 +22,9 @@ Remix Development Tools is an open-source package designed to enhance your devel
 
 ## What's new?
 
+## v2.1.3
+- Deferred data support! You can see your deferred data in the active page tab now being loaded and swapped in realtime
+- Settings option to change the default expansion level of json viewer (Default: 0)
 ### v2.1.0
  Detached mode support!
 

package-lock.json

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

package.json

@@ -1,15 +1,49 @@
 import JsonView from "@uiw/react-json-view";
 import { darkTheme } from "@uiw/react-json-view/dark";
+import { useMemo, useState } from "react";
+import { useSettingsContext } from "../context/useRDTContext";
 
 interface JsonRendererProps {
   data: string | Record<string, unknown>;
 }
 
+const isPromise = (value: any): value is Promise<any> => {
+  return value && typeof value.then === "function";
+};
+
 const JsonRenderer = ({ data }: JsonRendererProps) => {
-  if (typeof data === "string") {
-    return <div className="rdt-text-green-600">{data}</div>;
+  const { settings } = useSettingsContext();
+  const originalData = useMemo(
+    () =>
+      typeof data === "string"
+        ? data
+        : Object.entries(data)
+            .map(([key, value]) => {
+              if (isPromise(value)) {
+                value.then((res) => {
+                  setJson((json: any) => ({
+                    ...json,
+                    [key]: res,
+                  }));
+                });
+                return { [key]: "Loading deferred data..." };
+              }
+              return { [key]: value };
+            })
+            .reduce((acc, curr) => {
+              return { ...acc, ...curr };
+            }, {}),
+    [data]
+  );
+  const [json, setJson] = useState(originalData);
+
+  if (typeof json === "string") {
+    return <div className="rdt-text-green-600">{json}</div>;
   }
-  return <JsonView collapsed={0} style={{ ...(darkTheme as any) }} value={data} />;
+
+  return (
+    <JsonView highlightUpdates collapsed={settings.expansionLevel} style={{ ...(darkTheme as any) }} value={json} />
+  );
 };
 
 export { JsonRenderer };

src/RemixDevTools/components/jsonRenderer.tsx

@@ -90,7 +90,7 @@ export const RDTContextProvider = ({ children }: ContextProps) => {
     const { settings, detachedWindow, detachedWindowOwner, ...rest } = state;
     // Store user settings for dev tools into local storage
     setStorageItem(REMIX_DEV_TOOLS_SETTINGS, JSON.stringify(settings));
-    // Store general state into session storage
+    // Store general state into local storage
     setStorageItem(REMIX_DEV_TOOLS_STATE, JSON.stringify(rest));
   }, [state]);
 

src/RemixDevTools/context/RDTContext.tsx

@@ -36,6 +36,7 @@ export type RemixDevToolsState = {
     defaultOpen: boolean;
     hideUntilHover: boolean;
     position: TriggerPosition;
+    expansionLevel: number;
     hoveredRoute: string;
     isHoveringRoute: boolean;
   };
@@ -59,6 +60,7 @@ export const initialState: RemixDevToolsState = {
     defaultOpen: false,
     hideUntilHover: false,
     position: "bottom-right",
+    expansionLevel: 0,
     hoveredRoute: "",
     isHoveringRoute: false,
   },

src/RemixDevTools/context/rdtReducer.ts

@@ -20,13 +20,17 @@ export const useListenToRouteChange = () => {
   const ref = useRef(locationRoute);
   const route = getRouteFromLocalStorage();
 
+  // Used by the owner window only
   useEffect(() => {
+    // If the route changes and this is the original window store the event into local storage
     if (route !== locationRoute && detachedWindowOwner) {
       setRouteInLocalStorage(locationRoute);
     }
   }, [locationRoute, detachedWindowOwner, route]);
 
+  // Used to sync the route between the routes
   useAttachListener("storage", "window", (e: any) => {
+    // We only care about the key that changes the route
     if (e.key !== LOCAL_STORAGE_ROUTE_KEY) {
       return;
     }

src/RemixDevTools/hooks/detached/useListenToRouteChange.ts

@@ -11,6 +11,7 @@ export const SettingsTab = () => {
   const { settings, setSettings } = useSettingsContext();
   const [minHeight, setMinHeight] = useState(settings.minHeight.toString());
   const [maxHeight, setMaxHeight] = useState(settings.maxHeight.toString());
+  const [expansionLevel, setExpansionLevel] = useState(settings.expansionLevel.toString());
   return (
     <Stack className="rdt-mb-4">
       <h1>
@@ -28,9 +29,7 @@ export const SettingsTab = () => {
       <Checkbox
         id="hideUntilHover"
         hint="The dev tools trigger will be hidden on the page until you hover over it."
-        onChange={() =>
-          setSettings({ hideUntilHover: !settings.hideUntilHover })
-        }
+        onChange={() => setSettings({ hideUntilHover: !settings.hideUntilHover })}
         value={settings.hideUntilHover}
       >
         Hide the trigger until hovered
@@ -46,12 +45,7 @@ export const SettingsTab = () => {
           onChange={(e) => setMinHeight(e.target.value ?? "")}
           onBlur={(e) => {
             const value = parseInt(e.target.value);
-            if (
-              value &&
-              !isNaN(value) &&
-              value < settings.maxHeight &&
-              value > 100
-            ) {
+            if (value && !isNaN(value) && value < settings.maxHeight && value > 100) {
               setSettings({ minHeight: value });
             }
           }}
@@ -70,6 +64,20 @@ export const SettingsTab = () => {
             }
           }}
         />
+        <Input
+          name="expansionLevel"
+          id="expansionLevel"
+          label="Depth of expansion for JSON objects"
+          hint="This allows you to change the depth of expanded properties of json objects."
+          value={expansionLevel}
+          onChange={(e) => setExpansionLevel(e.target.value ?? "")}
+          onBlur={(e) => {
+            const value = parseInt(e.target.value);
+            if (value && !isNaN(value) && value >= 0) {
+              setSettings({ expansionLevel: value });
+            }
+          }}
+        />
         <SelectWithOptions
           label="Trigger position"
           onSelect={(value) => setSettings({ position: value })}

src/RemixDevTools/tabs/SettingsTab.tsx

@@ -1,5 +1,5 @@
 import type { ActionArgs } from "@remix-run/node";
-import { json, redirect, type LoaderArgs } from "@remix-run/node";
+import { json, redirect, type LoaderArgs, defer } from "@remix-run/node";
 import type { V2_MetaFunction } from "@remix-run/node";
 import { Link, useFetcher, useLoaderData, useSubmit } from "@remix-run/react";
 
@@ -11,7 +11,12 @@ export const meta: V2_MetaFunction = () => {
 };
 
 export const loader = async ({ request }: LoaderArgs) => {
-  return json({ message: "Hello World!" });
+  const test = new Promise((resolve) => {
+    setTimeout(() => {
+      resolve("test");
+    }, 1000);
+  })
+  return defer({ message: "Hello World!", test });
 };
 
 export const action = async ({ request }: ActionArgs) => {