From c0be45f4e114143a1c6ae695aa41e3078a0cd4bb Mon Sep 17 00:00:00 2001
From: Nikhil Saraf <nsaraf98@gmail.com>
Date: Sat, 2 Dec 2023 21:15:22 +0530
Subject: [PATCH] fix: server functions test

---
 packages/vinxi-devtools/dev.js              |  2 +
 packages/vinxi-devtools/devtools-client.jsx | 64 +++++++++------------
 packages/vinxi-devtools/devtools-dev.js     |  4 +-
 packages/vinxi-devtools/dist/mount.js       |  1 -
 packages/vinxi-devtools/mount.jsx           | 40 ++++++-------
 packages/vinxi-devtools/tsconfig.json       | 48 +++++++---------
 packages/vinxi-server-functions/plugin.js   |  2 +-
 test/templates/react-srv-fn/app/App.tsx     | 14 +++++
 test/templates/react-srv-fn/app/client.tsx  | 12 +---
 9 files changed, 88 insertions(+), 99 deletions(-)
 create mode 100644 test/templates/react-srv-fn/app/App.tsx

diff --git a/packages/vinxi-devtools/dev.js b/packages/vinxi-devtools/dev.js
index 5a9012f4..ff41f338 100644
--- a/packages/vinxi-devtools/dev.js
+++ b/packages/vinxi-devtools/dev.js
@@ -1,6 +1,7 @@
 import { createApp } from "vinxi";
 import { config } from "vinxi/plugins/config";
 import inspect from "vite-plugin-inspect";
+import solid from "vite-plugin-solid";
 
 import { devtoolsClientDev } from "./devtools-dev.js";
 import { devtoolsRpc } from "./index.js";
@@ -15,6 +16,7 @@ export default createApp({
 			target: "browser",
 			plugins: () => [
 				inspect(),
+				solid(),
 				config("test-spa", {
 					build: {
 						rollupOptions: {
diff --git a/packages/vinxi-devtools/devtools-client.jsx b/packages/vinxi-devtools/devtools-client.jsx
index 6b82d490..7ba7e4fd 100644
--- a/packages/vinxi-devtools/devtools-client.jsx
+++ b/packages/vinxi-devtools/devtools-client.jsx
@@ -1,18 +1,9 @@
-import {
-	Box,
-	Button,
-	Container,
-	Flex,
-	Theme,
-	ThemePanel,
-} from "@radix-ui/themes";
 import "@radix-ui/themes/styles.css";
+import { A, Route, Router, Routes } from "@solidjs/router";
 import "@unocss/reset/tailwind.css";
 import { cva } from "class-variance-authority";
 import { clsx } from "clsx";
-import { use } from "react";
-import { createRoot } from "react-dom/client";
-import { BrowserRouter, Link, NavLink, Route, Routes } from "react-router-dom";
+import { render } from "solid-js/web";
 import { twMerge } from "tailwind-merge";
 import "virtual:uno.css";
 
@@ -97,7 +88,7 @@ const buttonVariants = cva(
 
 function Devtools() {
 	return (
-		<Theme appearance="dark">
+		<div className="dark-mode">
 			<div className="h-screen w-full flex flex-col bg-sky1 font-sans n-panel-grids">
 				{/* <div className="flex items-center justify-between px-4 py-2 border-b border-gray-200 dark:border-gray-700">
 					<h1 className="font-semibold text-lg text-gray-800 dark:text-gray-200">
@@ -107,33 +98,29 @@ function Devtools() {
 				<div className="flex flex-1 overflow-hidden">
 					<div className="border-r n-border-base text-sky1-fg w-12 flex flex-col gap-1 items-center py-1 n-bg-base">
 						<div className="py-1 border-b n-border-base w-full flex items-center justify-center">
-							<NavLink
-								className={({ isActive }) =>
-									buttonVariants({
-										variant: "ghost",
-										size: "sm",
-										className: isActive ? "text-sky8" : null,
-									})
-								}
-								to={`/index.html`}
+							<A
+								activeClass={buttonVariants({
+									variant: "ghost",
+									size: "sm",
+									className: "text-sky8",
+								})}
+								href={`/index.html`}
 							>
 								<VinxiLogo />
-							</NavLink>
+							</A>
 						</div>
 
 						{plugins.map((plugin) => (
-							<NavLink
-								className={({ isActive }) =>
-									buttonVariants({
-										variant: "ghost",
-										size: "sm",
-										className: isActive ? "text-sky8" : null,
-									})
-								}
-								to={`/${plugin.id}`}
+							<A
+								className={buttonVariants({
+									variant: "ghost",
+									size: "sm",
+									className: "text-sky8",
+								})}
+								href={`/${plugin.id}`}
 							>
 								<span className={cn(plugin.icon, "text-lg")} />
-							</NavLink>
+							</A>
 						))}
 					</div>
 					<Routes>
@@ -156,7 +143,7 @@ function Devtools() {
 					</Routes>
 				</div>
 			</div>
-		</Theme>
+		</div>
 	);
 }
 
@@ -199,8 +186,11 @@ function Input({ icon, ...props }) {
 	);
 }
 
-createRoot(document.getElementById("devtools")).render(
-	<BrowserRouter basename="/__devtools/client">
-		<Devtools />
-	</BrowserRouter>,
+render(
+	() => (
+		<Router base="/__devtools/client">
+			<Devtools />
+		</Router>
+	),
+	document.getElementById("devtools"),
 );
diff --git a/packages/vinxi-devtools/devtools-dev.js b/packages/vinxi-devtools/devtools-dev.js
index 5db14eca..f2621394 100644
--- a/packages/vinxi-devtools/devtools-dev.js
+++ b/packages/vinxi-devtools/devtools-dev.js
@@ -1,6 +1,6 @@
-import react from "@vitejs/plugin-react";
 import unocss from "unocss/vite";
 import { config } from "vinxi/plugins/config";
+import solid from "vite-plugin-solid";
 
 import { fileURLToPath } from "node:url";
 
@@ -16,7 +16,7 @@ export const devtoolsClientDev = () => {
 		base: "/__devtools/client",
 		plugins: () => [
 			unocss(unocssConfig),
-			react(),
+			solid(),
 			{
 				name: "remove-vinxi-inject",
 				config(config) {
diff --git a/packages/vinxi-devtools/dist/mount.js b/packages/vinxi-devtools/dist/mount.js
index 17687ff0..65285dc1 100644
--- a/packages/vinxi-devtools/dist/mount.js
+++ b/packages/vinxi-devtools/dist/mount.js
@@ -517,7 +517,6 @@ async function mount() {
                 ]
               })
             }),
-            "$",
             isOpen ? o3("div", {
               className: "nuxt-devtools-frame",
               style: {
diff --git a/packages/vinxi-devtools/mount.jsx b/packages/vinxi-devtools/mount.jsx
index c975c517..a50e837f 100644
--- a/packages/vinxi-devtools/mount.jsx
+++ b/packages/vinxi-devtools/mount.jsx
@@ -1,5 +1,5 @@
-import { Fragment, h, render } from "preact";
-import { useEffect, useRef, useState } from "preact/hooks";
+import { createEffect, createSignal } from "solid-js";
+import { render } from "solid-js/web";
 
 import style from "./style.css?raw";
 
@@ -97,11 +97,10 @@ export default async function mount() {
 	// };
 
 	function App(props) {
-		const [isOpen, setIsOpen] = useState(false);
-		const ref = useRef();
-
-		const [isHovering, setIsHovering] = useState(false);
-		useEffect(() => {
+		const [isOpen, setIsOpen] = createSignal(true);
+		let ref;
+		const [isHovering, setIsHovering] = createSignal(false);
+		createEffect(() => {
 			// autoAnimate(ref.current, (el, action, oldCoords, newCoords) => {
 			// 	console.log(action);
 			// 	let keyframes;
@@ -167,13 +166,13 @@ export default async function mount() {
 			// 	});
 			// });
 			// autoAnimate(ref.current);
-		}, [ref.current]);
+		});
 		return (
 			<>
 				<style>{style}</style>
 				<div
 					id="nuxt-devtools-anchor"
-					className={!isHovering ? "nuxt-devtools-hide" : ""}
+					// className={!isHovering ? "nuxt-devtools-hide" : ""}
 					style={{
 						left: "50%",
 					}}
@@ -181,7 +180,7 @@ export default async function mount() {
 						setIsHovering(true);
 					}}
 				>
-					<div className="nuxt-devtools-glowing" />
+					<div class="nuxt-devtools-glowing" />
 					<div
 						ref={ref}
 						className="nuxt-devtools-panel"
@@ -221,29 +220,28 @@ export default async function mount() {
 							</defs>
 						</svg>
 					</div>
-					$
-					{isOpen ? (
+					{isOpen() ? (
 						<div
-							className="nuxt-devtools-frame"
+							class="nuxt-devtools-frame"
 							style={{
 								position: "absolute",
 								bottom: "1rem",
 								left: "0px",
-								zIndex: 9999998,
+								"z-index": 9999998,
 								transform: "translate(-50%, 0)",
-								backgroundColor: "black",
+								"background-color": "black",
 								width: "70vw",
-								borderRadius: "0.5rem",
+								"border-radius": "0.5rem",
 								height: "45vh",
 								border: "1px solid #3336",
 								display: "flex",
-								flexDirection: "row",
+								"flex-direction": "row",
 								overflow: "hidden",
 								transition: "all",
-								alignItems: "center",
-								justifyContent: "center",
+								"align-items": "center",
+								"justify-content": "center",
 								// nice box shadow
-								boxShadow: "rgba(99, 99, 99, 0.2) 0px 8px 16px 0px",
+								"box-shadow": "rgba(99, 99, 99, 0.2) 0px 8px 16px 0px",
 							}}
 						>
 							<iframe src="/__devtools/client/index.html" />
@@ -254,5 +252,5 @@ export default async function mount() {
 		);
 	}
 
-	render(<App />, shadow.shadowRoot);
+	render(() => <App />, shadow.shadowRoot);
 }
diff --git a/packages/vinxi-devtools/tsconfig.json b/packages/vinxi-devtools/tsconfig.json
index f6638507..4d30cfe1 100644
--- a/packages/vinxi-devtools/tsconfig.json
+++ b/packages/vinxi-devtools/tsconfig.json
@@ -1,29 +1,23 @@
 {
-  "compilerOptions": {
-    "target": "ESNext",
-    "module": "ESNext",
-    "moduleResolution": "Bundler",
-    "allowSyntheticDefaultImports": true,
-    "esModuleInterop": true,
-    "allowJs": true,
-    "checkJs": true,
-    "noEmit": false,
-    "jsx": "react-jsx",
-    "isolatedModules": true,
-    "strict": true,
-    "declarationMap": true,
-    "declaration": true,
-    "skipLibCheck": true,
-    "emitDeclarationOnly": true,
-    "types": [
-      "react/experimental",
-      "react-dom/experimental",
-      "vinxi/types/client"
-    ],
-    "outDir": "./dist/types"
-  },
-  "include": [
-    "./mount.jsx",
-    "./index.js"
-  ]
+	"compilerOptions": {
+		"target": "ESNext",
+		"module": "ESNext",
+		"moduleResolution": "Bundler",
+		"allowSyntheticDefaultImports": true,
+		"esModuleInterop": true,
+		"allowJs": true,
+		"checkJs": true,
+		"noEmit": false,
+		"jsx": "preserve",
+		"jsxImportSource": "solid-js",
+		"isolatedModules": true,
+		"strict": true,
+		"declarationMap": true,
+		"declaration": true,
+		"skipLibCheck": true,
+		"emitDeclarationOnly": true,
+		"types": ["vinxi/types/client"],
+		"outDir": "./dist/types"
+	},
+	"include": ["./mount.jsx", "./index.js"]
 }
diff --git a/packages/vinxi-server-functions/plugin.js b/packages/vinxi-server-functions/plugin.js
index 8e7a1afe..c34d2f98 100644
--- a/packages/vinxi-server-functions/plugin.js
+++ b/packages/vinxi-server-functions/plugin.js
@@ -6,7 +6,7 @@ import { server } from "./server.js";
 export const serverFunctions = {
 	client: client,
 	server: server,
-	router: ({ runtime, ...overrides }) => ({
+	router: ({ runtime, ...overrides } = {}) => ({
 		name: "server-fns",
 		mode: "handler",
 		base: "/_server",
diff --git a/test/templates/react-srv-fn/app/App.tsx b/test/templates/react-srv-fn/app/App.tsx
new file mode 100644
index 00000000..e205b92f
--- /dev/null
+++ b/test/templates/react-srv-fn/app/App.tsx
@@ -0,0 +1,14 @@
+async function greetServer(name: string) {
+	"use server";
+	console.log(`Hi, server. My name is ${name}.`);
+}
+
+export function App() {
+	return (
+		<div>
+			<button onClick={() => greetServer("client")} data-test-id="button">
+				Greet Server
+			</button>
+		</div>
+	);
+}
diff --git a/test/templates/react-srv-fn/app/client.tsx b/test/templates/react-srv-fn/app/client.tsx
index 9eadeef4..1f24dbd9 100644
--- a/test/templates/react-srv-fn/app/client.tsx
+++ b/test/templates/react-srv-fn/app/client.tsx
@@ -1,13 +1,5 @@
 /// <reference types="vinxi/types/client" />
 import ReactDOM from "react-dom/client";
+import { App } from "./App";
 
-async function greetServer(name: string) {
-	"use server";
-	console.log(`Hi, server. My name is ${name}.`);
-}
-
-ReactDOM.createRoot(document.getElementById("root")).render(
-	<div>
-		<button onClick={() => greetServer("client")} data-test-id="button">Greet Server</button>
-	</div>,
-);
\ No newline at end of file
+ReactDOM.createRoot(document.getElementById("root")).render(<App />);