{route.route
.split("/")
.filter((p) => p.startsWith(":"))
.map((param) => (
-
+
{param}
diff --git a/src/RemixDevTools/utils/detached.ts b/src/RemixDevTools/utils/detached.ts
new file mode 100644
index 00000000..25bac7b9
--- /dev/null
+++ b/src/RemixDevTools/utils/detached.ts
@@ -0,0 +1,11 @@
+import {
+ REMIX_DEV_TOOLS_DETACHED,
+ REMIX_DEV_TOOLS_DETACHED_OWNER,
+ REMIX_DEV_TOOLS_IS_DETACHED,
+ getBooleanFromSession,
+ getBooleanFromStorage,
+} from "./storage";
+
+export const checkIsDetachedWindow = () => getBooleanFromSession(REMIX_DEV_TOOLS_DETACHED);
+export const checkIsDetached = () => getBooleanFromStorage(REMIX_DEV_TOOLS_IS_DETACHED);
+export const checkIsDetachedOwner = () => getBooleanFromSession(REMIX_DEV_TOOLS_DETACHED_OWNER);
diff --git a/src/RemixDevTools/utils/sanitize.ts b/src/RemixDevTools/utils/sanitize.ts
index e38cc160..5fef6d2b 100644
--- a/src/RemixDevTools/utils/sanitize.ts
+++ b/src/RemixDevTools/utils/sanitize.ts
@@ -6,10 +6,7 @@ type Route = Pick;
* @param chunk Chunk to convert
* @returns Returns the converted chunk
*/
-export const convertRemixPathToUrl = (
- routes: RouteManifest,
- route: Route
-) => {
+export const convertRemixPathToUrl = (routes: RouteManifest, route: Route) => {
let currentRoute: Route | null = route;
const path = [];
@@ -22,3 +19,12 @@ export const convertRemixPathToUrl = (
const output = path.reverse().filter(Boolean).join("/");
return output === "" ? "/" : output;
};
+
+export const tryParseJson = (json: string | null) => {
+ if (!json) return null;
+ try {
+ return JSON.parse(json);
+ } catch (e) {
+ return null;
+ }
+};
diff --git a/src/RemixDevTools/utils/storage.test.ts b/src/RemixDevTools/utils/storage.test.ts
new file mode 100644
index 00000000..57d429e3
--- /dev/null
+++ b/src/RemixDevTools/utils/storage.test.ts
@@ -0,0 +1,53 @@
+import {
+ getStorageItem,
+ getSessionItem,
+ setStorageItem,
+ setSessionItem,
+ getBooleanFromStorage,
+ getBooleanFromSession,
+} from "./storage";
+
+describe("storage utils", () => {
+ beforeEach(() => {
+ localStorage.clear();
+ sessionStorage.clear();
+ });
+
+ test("getStorageItem should return null if key does not exist", () => {
+ expect(getStorageItem("non-existent-key")).toBeNull();
+ });
+
+ test("getSessionItem should return null if key does not exist", () => {
+ expect(getSessionItem("non-existent-key")).toBeNull();
+ });
+
+ test("setStorageItem should set the value for the given key in localStorage", () => {
+ setStorageItem("key", "value");
+ expect(localStorage.getItem("key")).toBe("value");
+ });
+
+ test("setSessionItem should set the value for the given key in sessionStorage", () => {
+ setSessionItem("key", "value");
+ expect(sessionStorage.getItem("key")).toBe("value");
+ });
+
+ test('getBooleanFromStorage should return true if the value for the given key is "true"', () => {
+ localStorage.setItem("key", "true");
+ expect(getBooleanFromStorage("key")).toBe(true);
+ });
+
+ test('getBooleanFromStorage should return false if the value for the given key is not "true"', () => {
+ localStorage.setItem("key", "false");
+ expect(getBooleanFromStorage("key")).toBe(false);
+ });
+
+ test('getBooleanFromSession should return true if the value for the given key is "true"', () => {
+ sessionStorage.setItem("key", "true");
+ expect(getBooleanFromSession("key")).toBe(true);
+ });
+
+ test('getBooleanFromSession should return false if the value for the given key is not "true"', () => {
+ sessionStorage.setItem("key", "false");
+ expect(getBooleanFromSession("key")).toBe(false);
+ });
+});
diff --git a/src/RemixDevTools/utils/storage.ts b/src/RemixDevTools/utils/storage.ts
new file mode 100644
index 00000000..db5e82ea
--- /dev/null
+++ b/src/RemixDevTools/utils/storage.ts
@@ -0,0 +1,15 @@
+export const getStorageItem = (key: string) => localStorage.getItem(key);
+export const setStorageItem = (key: string, value: string) => localStorage.setItem(key, value);
+export const getSessionItem = (key: string) => sessionStorage.getItem(key);
+export const setSessionItem = (key: string, value: string) => sessionStorage.setItem(key, value);
+
+export const getBooleanFromStorage = (key: string) => getStorageItem(key) === "true";
+export const getBooleanFromSession = (key: string) => getSessionItem(key) === "true";
+
+export const REMIX_DEV_TOOLS = "remixDevTools";
+export const REMIX_DEV_TOOLS_STATE = "remixDevTools_state";
+export const REMIX_DEV_TOOLS_SETTINGS = "remixDevTools_settings";
+export const REMIX_DEV_TOOLS_DETACHED = "remixDevTools_detached";
+export const REMIX_DEV_TOOLS_DETACHED_OWNER = "remixDevTools_detached_owner";
+export const REMIX_DEV_TOOLS_IS_DETACHED = "remixDevTools_is_detached";
+export const REMIX_DEV_TOOLS_CHECK_DETACHED = "remixDevTools_check_detached";
diff --git a/src/index.ts b/src/index.ts
index 4f34e01e..72ff906c 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -1,8 +1,7 @@
-import {
- useRemixForgeSocket,
- initClient,
- initServer,
- RemixDevTools,
-} from "./RemixDevTools";
+import { useRemixForgeSocket, initClient, initServer, RemixDevTools } from "./RemixDevTools";
+import { type Tab } from "./RemixDevTools/tabs";
+
+export type Plugin = (...args: any) => Tab;
+
export { useRemixForgeSocket, initClient, initServer };
export default RemixDevTools;
diff --git a/src/input.css b/src/input.css
index 5968e48f..6af84d14 100644
--- a/src/input.css
+++ b/src/input.css
@@ -14,6 +14,9 @@
border-color: #e5e7eb;
/* 2 */
}
+.remix-dev-tools .w-json-view-container {
+ background-color: transparent !important;
+}
/*
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
@@ -361,7 +364,7 @@ Make sure disabled buttons don't get the pointer cursor.
*/
.remix-dev-tools img,
-.remix-dev-tools svg,
+.remix-dev-tools svg:not(.w-rjv-copied),
.remix-dev-tools video,
.remix-dev-tools canvas,
.remix-dev-tools audio,
diff --git a/tsconfig.json b/tsconfig.json
index a3f7f694..72b48add 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -109,6 +109,7 @@
"./bin/mocks/**/*",
"./*.config.ts",
"./src/remix-app-for-testing",
- "./src/epic-stack-remix-dev-tools"
+ "./src/epic-stack-remix-dev-tools",
+ "./plugins/**/*"
]
}
diff --git a/vite.config.ts b/vite.config.ts
index 7e23c184..27021c1b 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -17,8 +17,12 @@ export default defineConfig({
"**/env.ts",
"**/components/**",
"**/context/**",
+ "**/hooks/detached/**",
"**/hooks/useOutletAugment.tsx",
"**/hooks/useHorizontalScroll.ts",
+ "**/hooks/useAttachListener.ts",
+ "**/hooks/useDebounce.ts",
+ "**/hooks/useSetRouteBoundaries.ts",
"**/hooks/useResize.ts",
"**/hooks/useTabs.ts",
"**/hooks/useTerminalShortcuts.ts",
+