docs(changeset): add vite-plugin-inspect to devtools

nksaraf · Oct 23, 2023 · b437331 · b437331
1 parent 2cf0023
commit b437331
Show file tree

Hide file tree

Showing 12 changed files with 253 additions and 273 deletions.
diff --git a/.changeset/many-teachers-call.md b/.changeset/many-teachers-call.md
@@ -0,0 +1,6 @@
+---
+"@vinxi/devtools": patch
+"vinxi": patch
+---
+
+add vite-plugin-inspect to devtools
diff --git a/packages/vinxi-devtools/build.js b/packages/vinxi-devtools/build.js
@@ -1,7 +1,7 @@
 import { createApp } from "vinxi";
 
-import { devtoolsClientDev, devtoolsServer } from "./index.js";
+import { devtoolsClientDev } from "./devtools-dev.js";
 
 export default createApp({
-	routers: [devtoolsClientDev(), devtoolsServer()],
+	routers: [devtoolsClientDev()],
 });
diff --git a/packages/vinxi-devtools/dev.js b/packages/vinxi-devtools/dev.js
@@ -1,7 +1,9 @@
 import { createApp } from "vinxi";
 import { config } from "vinxi/plugins/config";
+import inspect from "vite-plugin-inspect";
 
-import { devtoolsClientDev, devtoolsRpc } from "./index.js";
+import { devtoolsClientDev } from "./devtools-dev.js";
+import { devtoolsRpc } from "./index.js";
 
 export default createApp({
 	devtools: false,
@@ -10,7 +12,9 @@ export default createApp({
 			name: "test",
 			mode: "spa",
 			handler: "./test.html",
+			target: "browser",
 			plugins: () => [
+				inspect(),
 				config("test-spa", {
 					build: {
 						rollupOptions: {

diff --git a/packages/vinxi-devtools/devtools-client.jsx b/packages/vinxi-devtools/devtools-client.jsx
@@ -52,6 +52,17 @@ const plugins = [
 			);
 		},
 	},
+	{
+		id: "inspect",
+		icon: "i-carbon:stethoscope",
+		Component: () => {
+			return (
+				<div className="flex-1">
+					<iframe className="w-full h-full" src="/__inspect" />
+				</div>
+			);
+		},
+	},
 ];
 
 const buttonVariants = cva(

diff --git a/packages/vinxi-devtools/devtools-dev.js b/packages/vinxi-devtools/devtools-dev.js
@@ -0,0 +1,17 @@
+import react from "@vitejs/plugin-react";
+import unocss from "unocss/vite";
+
+import { fileURLToPath } from "node:url";
+
+import unocssConfig from "./uno.config.js";
+
+export const devtoolsClientDev = () => {
+	return {
+		name: "devtools-client",
+		mode: "spa",
+		handler: fileURLToPath(new URL("./index.html.js", import.meta.url)),
+		target: "browser",
+		base: "/__devtools/client",
+		plugins: () => [unocss(unocssConfig), react()],
+	};
+};
diff --git a/packages/vinxi-devtools/index.js b/packages/vinxi-devtools/index.js
@@ -1,43 +1,6 @@
-import react from "@vitejs/plugin-react";
-import { presetIcons, presetUno } from "unocss";
-import unocss from "unocss/vite";
-import { createRPCServer } from "vite-dev-rpc";
-
 import { fileURLToPath } from "node:url";
 
-import unocssConfig from "./uno.config.js";
-
-/** @return {import('vinxi').Plugin} */
-function DemoPlugin() {
-	let app;
-	let router;
-	return {
-		name: "demo",
-		configResolved(config) {
-			app = config.app;
-			router = config.router;
-		},
-		configureServer(server) {
-			const rpc = createRPCServer(
-				"demo",
-				server.ws,
-				new Proxy(
-					{},
-					{
-						get(target, prop) {
-							return async (...args) => {
-								const { functions } = await server.ssrLoadModule(
-									fileURLToPath(new URL("./rpc.js", import.meta.url)),
-								);
-								return functions[prop](...args);
-							};
-						},
-					},
-				),
-			);
-		},
-	};
-}
+export { default as inspect } from "vite-plugin-inspect";
 
 export const devtoolsRpc = () => {
 	return {
@@ -49,17 +12,6 @@ export const devtoolsRpc = () => {
 	};
 };
 
-export const devtoolsClientDev = () => {
-	return {
-		name: "devtools-client",
-		mode: "spa",
-		handler: fileURLToPath(new URL("./index.html.js", import.meta.url)),
-		target: "browser",
-		base: "/__devtools/client",
-		plugins: () => [DemoPlugin(), unocss(unocssConfig), react()],
-	};
-};
-
 export const devtoolsClient = () => {
 	return {
 		name: "devtools-client",

diff --git a/packages/vinxi-devtools/mount.js b/packages/vinxi-devtools/mount.js
@@ -91,51 +91,91 @@ export default function mount() {
 				// autoAnimate(ref.current);
 			}, [ref.current]);
 			return html`<div
-				ref=${ref}
 				style=${{
 					position: "fixed",
 					bottom: "0.5rem",
 					left: "50%",
 					transform: "translateX(-50%)",
-					backgroundColor: "black",
-					width: !isOpen ? "4rem" : "60vw",
-					borderRadius: isOpen ? "0.5rem" : "40vh",
-					height: !isOpen ? "2rem" : "24rem",
-					borderColor: "rgba(212,228,254,.191)",
-					display: "flex",
-					flexDirection: "row",
-					overflow: "hidden",
-					transition: "all",
-					alignItems: "center",
-					justifyContent: "center",
-					// nice box shadow
-					boxShadow: "rgba(99, 99, 99, 0.2) 0px 8px 16px 0px",
-				}}
-				onClick=${() => {
-					setIsOpen((o) => !o);
 				}}
 			>
-				${isOpen
-					? html`<iframe
-							style=${{ width: "100%", height: "100%", border: "none" }}
-							src="/__devtools/client/index.html"
-					  />`
-					: html`<svg
-							xmlns="http://www.w3.org/2000/svg"
-							width="1.25rem"
-							height="1.25rem"
-							viewBox="0 0 24 24"
-							style=${{ color: "white" }}
-					  >
+				<div
+					ref=${ref}
+					style=${{
+						position: "absolute",
+						bottom: "100%",
+						transform: "translateX(-50%)",
+						backgroundColor: "rgba(0, 0, 0, 0.90)",
+						width: "4rem",
+						borderRadius: "100px",
+						height: "30px",
+						border: "1px solid #3336",
+						display: "flex",
+						flexDirection: "row",
+						transition: "all",
+						zIndex: 9999999,
+						alignItems: "center",
+						justifyContent: "center",
+						// nice box shadow
+						boxShadow: "rgba(99, 99, 99, 0.2) 0px 8px 16px 0px",
+					}}
+					onClick=${() => {
+						setIsOpen((o) => !o);
+					}}
+				>
+					<svg
+						viewBox="0 0 128 128"
+						fill="none"
+						style=${{ color: "white", width: "16px", height: "16px" }}
+						xmlns="http://www.w3.org/2000/svg"
+					>
+						<g clip-path="url(#clip0_1_9)">
 							<path
-								fill="none"
+								d="M93.0704 3.61125L25.7606 54.3447L25 58.9291L25.7606 60.1516L27.2817 62.291L30.7042 64.4303L35.6479 66.5697L40.2113 68.4034L44.0141 71.154L46.2958 74.5159L47.0563 77.2665V81.5452L34.507 124.333V126.472L35.2676 127.694L36.4085 128L38.6901 127.389L104.479 77.2665L106 75.1271V72.3765L105.239 70.2372L103.338 68.4034L89.6479 61.9853L86.2254 58.9291L83.5634 54.3447V49.4548L96.1127 6.97311V3.30562L94.9718 3L93.0704 3.61125Z"
+								fill="currentColor"
 								stroke="currentColor"
-								stroke-linecap="round"
-								stroke-linejoin="round"
-								stroke-width="1"
-								d="M17.684 3.603c.521-.659.03-1.603-.836-1.603h-6.716a1.06 1.06 0 0 0-.909.502l-5.082 8.456c-.401.666.103 1.497.908 1.497h3.429l-3.23 8.065c-.467 1.02.795 1.953 1.643 1.215L20 9.331h-6.849l4.533-5.728Z"
 							/>
-					  </svg>`}
+						</g>
+						<defs>
+							<clipPath id="clip0_1_9">
+								<rect width="128" height="128" fill="currentColor" />
+							</clipPath>
+						</defs>
+					</svg>
+				</div>
+				${isOpen
+					? html`<div
+							style=${{
+								position: "absolute",
+								bottom: "1rem",
+								zIndex: 9999998,
+
+								left: "50%",
+								transform: "translateX(-50%)",
+								backgroundColor: "black",
+								width: "70vw",
+								borderRadius: "0.5rem",
+								height: "45vh",
+								border: "1px solid #3336",
+								display: "flex",
+								flexDirection: "row",
+								overflow: "hidden",
+								transition: "all",
+								alignItems: "center",
+								justifyContent: "center",
+								// nice box shadow
+								boxShadow: "rgba(99, 99, 99, 0.2) 0px 8px 16px 0px",
+							}}
+					  >
+							<iframe
+								style=${{
+									width: "100%",
+									height: "100%",
+									border: "none",
+								}}
+								src="/__devtools/client/index.html"
+							/>
+					  </div>`
+					: null}
 			</div>`;
 		}
 

diff --git a/packages/vinxi-devtools/package.json b/packages/vinxi-devtools/package.json
@@ -8,6 +8,15 @@
     "build": "node build.js --build"
   },
   "dependencies": {
+    "birpc": "^0.2.14",
+    "ws": "^8.13.0",
+    "vite-plugin-inspect": "^0.7.38"
+  },
+  "exports": {
+    ".": "./index.js",
+    "./mount": "./mount.js"
+  },
+  "devDependencies": {
     "@iconify/json": "^2.2.130",
     "@radix-ui/react-icons": "^1.3.0",
     "@radix-ui/react-tabs": "^1.0.4",
@@ -19,7 +28,6 @@
     "@unocss/preset-uno": "^0.56.5",
     "@unocss/reset": "^0.56.5",
     "@vitejs/plugin-react": "^4.0.4",
-    "birpc": "^0.2.14",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.0.0",
     "react": "0.0.0-experimental-035a41c4e-20230704",
@@ -28,15 +36,6 @@
     "tailwind-merge": "^1.14.0",
     "unocss": "^0.56.5",
     "unocss-preset-radix": "^2.5.5",
-    "vite-dev-rpc": "^0.1.2",
-    "ws": "^8.13.0",
-    "zustand": "^4.4.3"
-  },
-  "exports": {
-    ".": "./index.js",
-    "./mount": "./mount.js"
-  },
-  "devDependencies": {
     "vinxi": "workspace:^"
   }
 }
diff --git a/packages/vinxi-devtools/rpc.client.js b/packages/vinxi-devtools/rpc.client.js
@@ -1,9 +1,8 @@
 import { createBirpc } from "birpc";
-import { createRPCClient } from "vite-dev-rpc";
 
 const clientFunctions = {
 	alert(message) {
-		msg.textContent = message;
+		// msg.textContent = message;
 	},
 };
 /** @typedef {typeof clientFunctions} ClientFunctions */

diff --git a/packages/vinxi-devtools/test.html b/packages/vinxi-devtools/test.html
@@ -4,6 +4,11 @@
 		<meta charset="UTF-8" />
 		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
 		<title>Document</title>
+		<style>
+			body {
+				background-color: black;
+			}
+		</style>
 	</head>
 	<body>
 		<script type="module">

diff --git a/packages/vinxi/lib/dev-server.js b/packages/vinxi/lib/dev-server.js
@@ -1,6 +1,7 @@
 import { consola, withLogger } from "./logger.js";
 
 export * from "./router-dev-plugins.js";
+import { inspect } from '@vinxi/devtools'
 
 /** @typedef {{ force?: boolean; port?: number; dev?: boolean; ws?: { port?: number } }} ServeConfigInput */
 /** @typedef {{ force: boolean; port: number; dev: boolean; ws: { port: number } }} ServeConfig */
@@ -48,11 +49,12 @@ export async function createViteHandler(router, app, serveConfig) {
 		configFile: false,
 		base: router.base,
 		plugins: [
+			app.config.devtools ? inspect() : null,
 			...((
 				(await router.internals.mode.dev.plugins?.(router, app)) ?? []
 			).filter(Boolean) || []),
 			...(((await router.plugins?.(router)) ?? []).filter(Boolean) || []),
-		],
+		].filter(Boolean),
 		optimizeDeps: {
 			force: serveConfig.force,
 		},