V3.1.0 - Cache and server info on the client

Author: AlemTuzlak

.eslintrc.cjs

@@ -25,5 +25,6 @@ module.exports = {
     "@typescript-eslint/ban-ts-comment": "off",
     "@typescript-eslint/no-explicit-any": "off",
     "no-console": "warn",
+    "@typescript-eslint/no-unnecessary-type-constraint": "off",
   },
 };

README.md

@@ -26,6 +26,14 @@ Remix Development Tools is an open-source package designed to enhance your devel
 ![route boundaries](./assets/boundaries.png)
 ## What's new?
 
+## v3.1.0
+
+- Cache information on the client side -> shows you how long and where each loader is cached for
+- Server execution timings => shows you all execution timings, average, minimum and maximum execution time for each loader/action
+- Server headers => shows you all headers that are sent from the server via actions/loaders
+- List of all loaders/actions that are executed on the server and their responses
+- UI active page tab revamp and improvements
+
 ## v3.0.0
 Remix Development Tools v3.0.0 is here! This release brings a lot of new features and improvements to the Remix Development Tools. The most notable ones are:
 1. The setup is completely changed (Check the getting started section for more info) 
@@ -80,7 +88,8 @@ Key features include:
 - **URL Parameters**: Easily view and analyze the URL parameters associated with the current page.
 - **Server Responses**: Inspect and review the server responses received by the application for the current page.
 - **Loader Data**: Monitor and track the loader data used by the application during page rendering.
-- **Outlet boundaries** Activate the **Show Route Boundaries** option to see each Outlet and route boundaries by coloring the background. It is locked behind a flag. You can enable it by passing `useRouteBoundaries` prop to `true` in the `RemixDevTools`,first parameter of `initClient` set to `true` and second parameter of `initServer` set to `true`. This feature is experimental and can cause issues in certain scenarios. It will be considered stable with v3.0 release but until then use at your own risk.
+- **Route boundaries** See each Outlet and route boundaries by coloring the background. 
+- **Server info** - See each loader min/max/avg execution time, cache info, headers info and more!
 
 ### Routes Tab
 

package-lock.json

@@ -1,8 +1,8 @@
 {
   "name": "remix-development-tools",
-  "description": "Remix development tools.",
+  "description": "Remix development tools - a set of tools for developing/debugging Remix.run apps",
   "author": "Alem Tuzlak",
-  "version": "3.0.2",
+  "version": "3.1.0",
   "license": "MIT",
   "keywords": [
     "remix",
@@ -89,6 +89,7 @@
     "tsup:dev-server-cjs:watch": "tsup --config tsup-dev-server-cjs.ts --watch",
     "tsup:dev-server-esm:watch": "tsup --config tsup-dev-server-esm.ts --watch",
     "lint": "eslint src --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+    "lint:fix": "eslint src --ext ts,tsx --report-unused-disable-directives --fix",
     "prettier": "prettier --check .",
     "test": "vitest run --coverage",
     "prepare": "husky install",
@@ -171,6 +172,7 @@
     "d3-selection": "^3.0.0",
     "d3-shape": "^3.2.0",
     "d3-zoom": "^3.0.0",
+    "date-fns": "^2.30.0",
     "lucide-react": "^0.263.1",
     "tailwind-merge": "^1.14.0",
     "uuid": "^9.0.1",

package.json

@@ -0,0 +1,29 @@
+import add from "date-fns/add";
+import { CacheControl } from "../../dev-server/parser.js";
+import { useCountdown } from "../hooks/useCountdown.js";
+import formatDistance from "date-fns/formatDistance";
+import { Tag } from "./Tag.js";
+
+interface CacheInfoProps {
+  cacheDate: Date;
+  cacheControl: CacheControl;
+}
+
+const CacheInfo = ({ cacheDate, cacheControl }: CacheInfoProps) => {
+  const { maxAge, sMaxage, private: isPrivate } = cacheControl;
+
+  const age = !isPrivate && !maxAge ? sMaxage : maxAge;
+  const targetDate = add(cacheDate, { seconds: age ? parseInt(age) : 0 });
+  const { minutes, seconds, stringRepresentation } = useCountdown(targetDate);
+  const distance = formatDistance(targetDate, cacheDate, { addSuffix: true });
+  if (seconds <= 0) {
+    return;
+  }
+  return (
+    <Tag color={minutes < 1 ? "RED" : "PURPLE"}>
+      [{cacheControl.private ? "Private" : "Shared"}] Loader Cache expires {distance} ({stringRepresentation})
+    </Tag>
+  );
+};
+
+export { CacheInfo };

src/RemixDevTools/components/CacheInfo.tsx

@@ -0,0 +1,35 @@
+import clsx from "clsx";
+import { ReactNode } from "react";
+
+export const InfoCard = ({
+  children,
+  title,
+  onClear,
+}: {
+  children: ReactNode;
+  title: string;
+  onClear?: () => void;
+}) => {
+  return (
+    <div className="rdt-mb-4 rdt-h-min rdt-rounded-lg rdt-border rdt-border-solid rdt-border-gray-500/40 rdt-px-3 rdt-py-2 rdt-text-base rdt-font-normal rdt-text-white">
+      <h6
+        className={clsx(
+          "rdt-text-left rdt-text-sm",
+          onClear ? "rdt-flex rdt-items-center rdt-justify-between rdt-gap-3" : ""
+        )}
+      >
+        {title}
+        {onClear && (
+          <button
+            onClick={onClear}
+            className="rdt-cursor-pointer rdt-rounded-lg rdt-bg-red-500 rdt-px-2 rdt-py-1 rdt-text-sm rdt-font-semibold rdt-text-white"
+          >
+            Clear
+          </button>
+        )}
+      </h6>
+      <hr className="-rdt-mx-3 rdt-my-1 rdt-border-gray-500/40" />
+      {children}
+    </div>
+  );
+};