expand on embedded mode

Author: rossipedia

Diff for: package-lock.json

@@ -68,9 +68,11 @@
 		"docs": "npm run dev -w docs",
 		"prepublishOnly": "npm run build",
 		"remix-vite": "npm run dev -w test-apps/remix-vite",
+		"remix-vite-embedded": "npm run dev -w test-apps/remix-vite-embedded",
 		"remix-website": "npm run dev -w test-apps/remix-website",
 		"runner": "npm-run-all -s build -p watch-all",
 		"dev": "npm run runner remix-vite",
+		"dev:embedded": "npm run runner remix-vite-embedded",
 		"dev:website": "npm run runner remix-website ",
 		"build": "run-s  tsup:* -- --clean",
 		"watch-all": "npm-run-all -p tsup:index:watch tsup:client:watch tsup:server:watch -- --watch",

Diff for: package.json

@@ -2,7 +2,7 @@ import { useLocation } from "@remix-run/react"
 import clsx from "clsx"
 import { useEffect, useState } from "react"
 import type { RemixDevToolsProps } from "./RemixDevTools.js"
-import { RDTContextProvider } from "./context/RDTContext.js"
+import { RDTContextProvider, RDTEmbeddedContextProvider as RemixDevToolsEmbeddedMode } from "./context/RDTContext.js"
 import { useSettingsContext } from "./context/useRDTContext.js"
 import { useBorderedRoutes } from "./hooks/useBorderedRoutes.js"
 import { useSetRouteBoundaries } from "./hooks/useSetRouteBoundaries.js"

Diff for: src/client/EmbeddedDevTools.tsx

@@ -1,6 +1,6 @@
 import type { Dispatch } from "react"
 import type React from "react"
-import { createContext, useEffect, useMemo, useReducer } from "react"
+import { createContext, useContext, useEffect, useMemo, useReducer } from "react"
 import { useRemoveBody } from "../hooks/detached/useRemoveBody.js"
 import { checkIsDetached, checkIsDetachedOwner, checkIsDetachedWindow } from "../utils/detached.js"
 import { tryParseJson } from "../utils/sanitize.js"
@@ -20,6 +20,16 @@ export const RDTContext = createContext<{
 	dispatch: Dispatch<RemixDevToolsActions>
 }>({ state: initialState, dispatch: () => null })
 
+const RDTEmbeddedContext = createContext<boolean>(false)
+
+export function RDTEmbeddedContextProvider({ children }: React.PropsWithChildren) {
+	return <RDTEmbeddedContext.Provider value={true}>{children}</RDTEmbeddedContext.Provider>
+}
+
+export function useIsEmbeddedRDT() {
+	return useContext(RDTEmbeddedContext)
+}
+
 RDTContext.displayName = "RDTContext"
 
 interface ContextProps {

Diff for: src/client/context/RDTContext.tsx

@@ -1,7 +1,7 @@
 import { useEffect, useState } from "react"
 import { createPortal } from "react-dom"
 import { RemixDevTools, type RemixDevToolsProps } from "../RemixDevTools.js"
-import type { RdtClientConfig } from "../context/RDTContext.js"
+import { RDTEmbeddedContextProvider, type RdtClientConfig, useIsEmbeddedRDT } from "../context/RDTContext.js"
 import { hydrationDetector } from "./hydration.js"
 
 let hydrating = true
@@ -19,34 +19,53 @@ function useHydrated() {
 
 export const defineClientConfig = (config: RdtClientConfig) => config
 
-export const withDevTools = (Component: any, config?: RemixDevToolsProps) => () => {
-	hydrationDetector()
-	const hydrated = useHydrated()
-	if (!hydrated) return <Component />
-
-	return (
-		<>
-			<Component />
-			{createPortal(<RemixDevTools {...config} />, document.body)}
-		</>
-	)
-}
-
-/**
- *
- * @description Injects the dev tools into the Vite App, ONLY meant to be used by the package plugin, do not use this yourself!
- */
-export const withViteDevTools = (Component: any, config?: RemixDevToolsProps) => () => {
-	hydrationDetector()
-	function AppWithDevTools(props: any) {
+export const withDevTools =
+	(Component: any, config?: RemixDevToolsProps & { panelMode?: "auto" | "embedded" }) => () => {
+		hydrationDetector()
 		const hydrated = useHydrated()
+		const isEmbedded = useIsEmbeddedRDT()
 		if (!hydrated) return <Component />
+
+		if ((config?.panelMode ?? "auto") === "embedded") {
+			return (
+				<RDTEmbeddedContextProvider>
+					<Component />
+				</RDTEmbeddedContextProvider>
+			)
+		}
+
 		return (
 			<>
-				<Component {...props} />
-				{createPortal(<RemixDevTools {...config} />, document.body)}
+				<Component />
+				{!isEmbedded && createPortal(<RemixDevTools {...config} />, document.body)}
 			</>
 		)
 	}
-	return AppWithDevTools
-}
+
+/**
+ *
+ * @description Injects the dev tools into the Vite App, ONLY meant to be used by the package plugin, do not use this yourself!
+ */
+export const withViteDevTools =
+	(Component: any, config?: RemixDevToolsProps & { panelMode?: "auto" | "embedded" }) => () => {
+		hydrationDetector()
+		function AppWithDevTools(props: any) {
+			const hydrated = useHydrated()
+			if (!hydrated) return <Component />
+			if ((config?.panelMode ?? "auto") === "embedded") {
+				return (
+					<RDTEmbeddedContextProvider>
+						<Component />
+					</RDTEmbeddedContextProvider>
+				)
+			}
+
+			return (
+				<>
+					<Component {...props} />
+					{createPortal(<RemixDevTools {...config} />, document.body)}
+				</>
+			)
+		}
+		return AppWithDevTools
+	}

Diff for: src/client/init/root.tsx

@@ -30,27 +30,36 @@ const MainPanel = ({ children, isOpen, isEmbedded = false, className }: MainPane
 
 	return (
 		<div
-			style={{
-				zIndex: 9998,
-				...(!isEmbedded && { height: detachedWindow ? window.innerHeight : height }),
-			}}
+			style={
+				!isEmbedded
+					? {
+							zIndex: 9998,
+							height: detachedWindow ? window.innerHeight : height,
+						}
+					: undefined
+			}
 			className={clsx(
-				"duration-600 box-border flex w-screen flex-col overflow-auto bg-main text-white opacity-0 transition-all",
+				"duration-600 box-border flex overflow-auto bg-main text-white opacity-0 transition-all",
 				isOpen ? "opacity-100 drop-shadow-2xl" : "!h-0",
 				isResizing && "cursor-grabbing ",
-				!isEmbedded ? `fixed left-0 ${panelLocation === "bottom" ? "bottom-0" : "top-0 border-b-2 border-main"}` : "",
+				!isEmbedded
+					? clsx(
+							"flex-col fixed left-0 w-screen",
+							panelLocation === "bottom" ? "bottom-0" : "top-0 border-b-2 border-main"
+						)
+					: "flex-row",
 				className
 			)}
 		>
-			{panelLocation === "bottom" && (
+			{!isEmbedded && panelLocation === "bottom" && (
 				<div
 					onMouseDown={enableResize}
 					onMouseUp={disableResize}
 					className={clsx("absolute z-50 h-1 w-full", isResizing ? "cursor-grabbing" : "cursor-ns-resize")}
 				/>
 			)}
 			{children}
-			{panelLocation === "top" && (
+			{!isEmbedded && panelLocation === "top" && (
 				<div
 					onMouseDown={enableResize}
 					onMouseUp={disableResize}