Switch to Preact!!!

package-lock.json

@@ -30,10 +30,8 @@
         "codemirror": "^6.0.1",
         "framer-motion": "^9.0.4",
         "parse-color": "^1.0.0",
-        "react": "^18.2.0",
+        "preact-router": "^4.1.0",
-        "react-dom": "^18.2.0",
+        "react-helmet-async": "^1.3.0"
-        "react-helmet-async": "^1.3.0",
-        "react-router-dom": "^6.8.1"
       },
       "devDependencies": {
         "@preact/preset-vite": "^2.5.0",
@@ -46,7 +44,6 @@
         "@types/react-dom": "^18.0.6",
         "@typescript-eslint/eslint-plugin": "^5.52.0",
         "@typescript-eslint/parser": "^5.52.0",
-        "@vitejs/plugin-react": "^3.0.0",
         "autoprefixer": "^10.4.13",
         "concurrently": "^7.6.0",
         "eslint": "^8.34.0",
@@ -402,36 +399,6 @@
         "@babel/core": "^7.0.0-0"
       }
     },
-    "node_modules/@babel/plugin-transform-react-jsx-self": {
-      "version": "7.18.6",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx-self/-/plugin-transform-react-jsx-self-7.18.6.tgz",
-      "integrity": "sha512-A0LQGx4+4Jv7u/tWzoJF7alZwnBDQd6cGLh9P+Ttk4dpiL+J5p7NSNv/9tlEFFJDq3kjxOavWmbm6t0Gk+A3Ig==",
-      "dev": true,
-      "dependencies": {
-        "@babel/helper-plugin-utils": "^7.18.6"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.0.0-0"
-      }
-    },
-    "node_modules/@babel/plugin-transform-react-jsx-source": {
-      "version": "7.19.6",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx-source/-/plugin-transform-react-jsx-source-7.19.6.tgz",
-      "integrity": "sha512-RpAi004QyMNisst/pvSanoRdJ4q+jMCWyk9zdw/CyLB9j8RXEahodR6l2GyttDRyEVWZtbN+TpLiHJ3t34LbsQ==",
-      "dev": true,
-      "dependencies": {
-        "@babel/helper-plugin-utils": "^7.19.0"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.0.0-0"
-      }
-    },
     "node_modules/@babel/runtime": {
       "version": "7.20.13",
       "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.20.13.tgz",
@@ -1863,14 +1830,6 @@
         "@babel/runtime": "^7.13.10"
       }
     },
-    "node_modules/@remix-run/router": {
-      "version": "1.3.2",
-      "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.3.2.tgz",
-      "integrity": "sha512-t54ONhl/h75X94SWsHGQ4G/ZrCEguKSRQr7DrjTciJXW0YU1QhlwYeycvK5JgkzlxmvrK7wq1NB/PLtHxoiDcA==",
-      "engines": {
-        "node": ">=14"
-      }
-    },
     "node_modules/@rollup/pluginutils": {
       "version": "4.2.1",
       "resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-4.2.1.tgz",
@@ -2691,25 +2650,6 @@
         "url": "https://opencollective.com/typescript-eslint"
       }
     },
-    "node_modules/@vitejs/plugin-react": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/@vitejs/plugin-react/-/plugin-react-3.1.0.tgz",
-      "integrity": "sha512-AfgcRL8ZBhAlc3BFdigClmTUMISmmzHn7sB2h9U1odvc5U/MjWXsAaz18b/WoppUTDBzxOJwo2VdClfUcItu9g==",
-      "dev": true,
-      "dependencies": {
-        "@babel/core": "^7.20.12",
-        "@babel/plugin-transform-react-jsx-self": "^7.18.6",
-        "@babel/plugin-transform-react-jsx-source": "^7.19.6",
-        "magic-string": "^0.27.0",
-        "react-refresh": "^0.14.0"
-      },
-      "engines": {
-        "node": "^14.18.0 || >=16.0.0"
-      },
-      "peerDependencies": {
-        "vite": "^4.1.0-beta.0"
-      }
-    },
     "node_modules/@vitest/expect": {
       "version": "0.29.2",
       "resolved": "https://registry.npmjs.org/@vitest/expect/-/expect-0.29.2.tgz",
@@ -5476,18 +5416,6 @@
         "yallist": "^3.0.2"
       }
     },
-    "node_modules/magic-string": {
-      "version": "0.27.0",
-      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.27.0.tgz",
-      "integrity": "sha512-8UnnX2PeRAPZuN12svgR9j7M1uWMovg/CEnIwIG0LFkXSJJe4PdfUGiTGl8V9bsBHFUtfVINcSyYxd7q+kx9fA==",
-      "dev": true,
-      "dependencies": {
-        "@jridgewell/sourcemap-codec": "^1.4.13"
-      },
-      "engines": {
-        "node": ">=12"
-      }
-    },
     "node_modules/merge2": {
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
@@ -6066,13 +5994,20 @@
       "version": "10.13.0",
       "resolved": "https://registry.npmjs.org/preact/-/preact-10.13.0.tgz",
       "integrity": "sha512-ERdIdUpR6doqdaSIh80hvzebHB7O6JxycOhyzAeLEchqOq/4yueslQbfnPwXaNhAYacFTyCclhwkEbOumT0tHw==",
-      "dev": true,
       "peer": true,
       "funding": {
         "type": "opencollective",
         "url": "https://opencollective.com/preact"
       }
     },
+    "node_modules/preact-router": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/preact-router/-/preact-router-4.1.0.tgz",
+      "integrity": "sha512-y1w2YvVpKAju9FMV+fAVR1NpH4MW5q07BZrziMZeg6F/rGJ9KvLUZtjOqsy2I8fDYiX36AM1AQTXIIK3jigBhA==",
+      "peerDependencies": {
+        "preact": ">=10"
+      }
+    },
     "node_modules/prelude-ls": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz",
@@ -6184,6 +6119,7 @@
       "version": "18.2.0",
       "resolved": "https://registry.npmjs.org/react/-/react-18.2.0.tgz",
       "integrity": "sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==",
+      "peer": true,
       "dependencies": {
         "loose-envify": "^1.1.0"
       },
@@ -6195,6 +6131,7 @@
       "version": "18.2.0",
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz",
       "integrity": "sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==",
+      "peer": true,
       "dependencies": {
         "loose-envify": "^1.1.0",
         "scheduler": "^0.23.0"
@@ -6229,15 +6166,6 @@
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
       "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
     },
-    "node_modules/react-refresh": {
-      "version": "0.14.0",
-      "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.14.0.tgz",
-      "integrity": "sha512-wViHqhAd8OHeLS/IRMJjTSDHF3U9eWi62F/MledQGPdJGDhodXJ9PBLNGr6WWL7qlH12Mt3TyTpbS+hGXMjCzQ==",
-      "dev": true,
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
     "node_modules/react-remove-scroll": {
       "version": "2.5.5",
       "resolved": "https://registry.npmjs.org/react-remove-scroll/-/react-remove-scroll-2.5.5.tgz",
@@ -6293,36 +6221,6 @@
       "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.5.0.tgz",
       "integrity": "sha512-336iVw3rtn2BUK7ORdIAHTyxHGRIHVReokCR3XjbckJMK7ms8FysBfhLR8IXnAgy7T0PTPNBWKiH514FOW/WSg=="
     },
-    "node_modules/react-router": {
-      "version": "6.8.1",
-      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.8.1.tgz",
-      "integrity": "sha512-Jgi8BzAJQ8MkPt8ipXnR73rnD7EmZ0HFFb7jdQU24TynGW1Ooqin2KVDN9voSC+7xhqbbCd2cjGUepb6RObnyg==",
-      "dependencies": {
-        "@remix-run/router": "1.3.2"
-      },
-      "engines": {
-        "node": ">=14"
-      },
-      "peerDependencies": {
-        "react": ">=16.8"
-      }
-    },
-    "node_modules/react-router-dom": {
-      "version": "6.8.1",
-      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.8.1.tgz",
-      "integrity": "sha512-67EXNfkQgf34P7+PSb6VlBuaacGhkKn3kpE51+P6zYSG2kiRoumXEL6e27zTa9+PGF2MNXbgIUHTVlleLbIcHQ==",
-      "dependencies": {
-        "@remix-run/router": "1.3.2",
-        "react-router": "6.8.1"
-      },
-      "engines": {
-        "node": ">=14"
-      },
-      "peerDependencies": {
-        "react": ">=16.8",
-        "react-dom": ">=16.8"
-      }
-    },
     "node_modules/react-style-singleton": {
       "version": "2.2.1",
       "resolved": "https://registry.npmjs.org/react-style-singleton/-/react-style-singleton-2.2.1.tgz",
@@ -6537,6 +6435,7 @@
       "version": "0.23.0",
       "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.0.tgz",
       "integrity": "sha512-CtuThmgHNg7zIZWAXi3AsyIzA3n4xx7aNyjwC2VJldO2LMVDhFK+63xGqq6CsJH4rTAt6/M+N4GhZiDYPx9eUw==",
+      "peer": true,
       "dependencies": {
         "loose-envify": "^1.1.0"
       }
@@ -7867,24 +7766,6 @@
         "@babel/plugin-transform-react-jsx": "^7.18.6"
       }
     },
-    "@babel/plugin-transform-react-jsx-self": {
-      "version": "7.18.6",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx-self/-/plugin-transform-react-jsx-self-7.18.6.tgz",
-      "integrity": "sha512-A0LQGx4+4Jv7u/tWzoJF7alZwnBDQd6cGLh9P+Ttk4dpiL+J5p7NSNv/9tlEFFJDq3kjxOavWmbm6t0Gk+A3Ig==",
-      "dev": true,
-      "requires": {
-        "@babel/helper-plugin-utils": "^7.18.6"
-      }
-    },
-    "@babel/plugin-transform-react-jsx-source": {
-      "version": "7.19.6",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx-source/-/plugin-transform-react-jsx-source-7.19.6.tgz",
-      "integrity": "sha512-RpAi004QyMNisst/pvSanoRdJ4q+jMCWyk9zdw/CyLB9j8RXEahodR6l2GyttDRyEVWZtbN+TpLiHJ3t34LbsQ==",
-      "dev": true,
-      "requires": {
-        "@babel/helper-plugin-utils": "^7.19.0"
-      }
-    },
     "@babel/runtime": {
       "version": "7.20.13",
       "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.20.13.tgz",
@@ -8947,11 +8828,6 @@
         "@babel/runtime": "^7.13.10"
       }
     },
-    "@remix-run/router": {
-      "version": "1.3.2",
-      "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.3.2.tgz",
-      "integrity": "sha512-t54ONhl/h75X94SWsHGQ4G/ZrCEguKSRQr7DrjTciJXW0YU1QhlwYeycvK5JgkzlxmvrK7wq1NB/PLtHxoiDcA=="
-    },
     "@rollup/pluginutils": {
       "version": "4.2.1",
       "resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-4.2.1.tgz",
@@ -9429,19 +9305,6 @@
         "eslint-visitor-keys": "^3.3.0"
       }
     },
-    "@vitejs/plugin-react": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/@vitejs/plugin-react/-/plugin-react-3.1.0.tgz",
-      "integrity": "sha512-AfgcRL8ZBhAlc3BFdigClmTUMISmmzHn7sB2h9U1odvc5U/MjWXsAaz18b/WoppUTDBzxOJwo2VdClfUcItu9g==",
-      "dev": true,
-      "requires": {
-        "@babel/core": "^7.20.12",
-        "@babel/plugin-transform-react-jsx-self": "^7.18.6",
-        "@babel/plugin-transform-react-jsx-source": "^7.19.6",
-        "magic-string": "^0.27.0",
-        "react-refresh": "^0.14.0"
-      }
-    },
     "@vitest/expect": {
       "version": "0.29.2",
       "resolved": "https://registry.npmjs.org/@vitest/expect/-/expect-0.29.2.tgz",
@@ -11491,15 +11354,6 @@
         "yallist": "^3.0.2"
       }
     },
-    "magic-string": {
-      "version": "0.27.0",
-      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.27.0.tgz",
-      "integrity": "sha512-8UnnX2PeRAPZuN12svgR9j7M1uWMovg/CEnIwIG0LFkXSJJe4PdfUGiTGl8V9bsBHFUtfVINcSyYxd7q+kx9fA==",
-      "dev": true,
-      "requires": {
-        "@jridgewell/sourcemap-codec": "^1.4.13"
-      }
-    },
     "merge2": {
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
@@ -11897,9 +11751,14 @@
       "version": "10.13.0",
       "resolved": "https://registry.npmjs.org/preact/-/preact-10.13.0.tgz",
       "integrity": "sha512-ERdIdUpR6doqdaSIh80hvzebHB7O6JxycOhyzAeLEchqOq/4yueslQbfnPwXaNhAYacFTyCclhwkEbOumT0tHw==",
-      "dev": true,
       "peer": true
     },
+    "preact-router": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/preact-router/-/preact-router-4.1.0.tgz",
+      "integrity": "sha512-y1w2YvVpKAju9FMV+fAVR1NpH4MW5q07BZrziMZeg6F/rGJ9KvLUZtjOqsy2I8fDYiX36AM1AQTXIIK3jigBhA==",
+      "requires": {}
+    },
     "prelude-ls": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz",
@@ -11969,6 +11828,7 @@
       "version": "18.2.0",
       "resolved": "https://registry.npmjs.org/react/-/react-18.2.0.tgz",
       "integrity": "sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==",
+      "peer": true,
       "requires": {
         "loose-envify": "^1.1.0"
       }
@@ -11977,6 +11837,7 @@
       "version": "18.2.0",
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz",
       "integrity": "sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==",
+      "peer": true,
       "requires": {
         "loose-envify": "^1.1.0",
         "scheduler": "^0.23.0"
@@ -12004,12 +11865,6 @@
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
       "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
     },
-    "react-refresh": {
-      "version": "0.14.0",
-      "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.14.0.tgz",
-      "integrity": "sha512-wViHqhAd8OHeLS/IRMJjTSDHF3U9eWi62F/MledQGPdJGDhodXJ9PBLNGr6WWL7qlH12Mt3TyTpbS+hGXMjCzQ==",
-      "dev": true
-    },
     "react-remove-scroll": {
       "version": "2.5.5",
       "resolved": "https://registry.npmjs.org/react-remove-scroll/-/react-remove-scroll-2.5.5.tgz",
@@ -12045,23 +11900,6 @@
         }
       }
     },
-    "react-router": {
-      "version": "6.8.1",
-      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.8.1.tgz",
-      "integrity": "sha512-Jgi8BzAJQ8MkPt8ipXnR73rnD7EmZ0HFFb7jdQU24TynGW1Ooqin2KVDN9voSC+7xhqbbCd2cjGUepb6RObnyg==",
-      "requires": {
-        "@remix-run/router": "1.3.2"
-      }
-    },
-    "react-router-dom": {
-      "version": "6.8.1",
-      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.8.1.tgz",
-      "integrity": "sha512-67EXNfkQgf34P7+PSb6VlBuaacGhkKn3kpE51+P6zYSG2kiRoumXEL6e27zTa9+PGF2MNXbgIUHTVlleLbIcHQ==",
-      "requires": {
-        "@remix-run/router": "1.3.2",
-        "react-router": "6.8.1"
-      }
-    },
     "react-style-singleton": {
       "version": "2.2.1",
       "resolved": "https://registry.npmjs.org/react-style-singleton/-/react-style-singleton-2.2.1.tgz",
@@ -12207,6 +12045,7 @@
       "version": "0.23.0",
       "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.0.tgz",
       "integrity": "sha512-CtuThmgHNg7zIZWAXi3AsyIzA3n4xx7aNyjwC2VJldO2LMVDhFK+63xGqq6CsJH4rTAt6/M+N4GhZiDYPx9eUw==",
+      "peer": true,
       "requires": {
         "loose-envify": "^1.1.0"
       }

package.json

@@ -37,10 +37,8 @@
     "codemirror": "^6.0.1",
     "framer-motion": "^9.0.4",
     "parse-color": "^1.0.0",
-    "react": "^18.2.0",
+    "preact-router": "^4.1.0",
-    "react-dom": "^18.2.0",
+    "react-helmet-async": "^1.3.0"
-    "react-helmet-async": "^1.3.0",
-    "react-router-dom": "^6.8.1"
   },
   "devDependencies": {
     "@preact/preset-vite": "^2.5.0",
@@ -53,7 +51,6 @@
     "@types/react-dom": "^18.0.6",
     "@typescript-eslint/eslint-plugin": "^5.52.0",
     "@typescript-eslint/parser": "^5.52.0",
-    "@vitejs/plugin-react": "^3.0.0",
     "autoprefixer": "^10.4.13",
     "concurrently": "^7.6.0",
     "eslint": "^8.34.0",

src-web/App.tsx

@@ -1,6 +1,5 @@
 import classnames from 'classnames';
 import { useEffect, useState } from 'react';
-import { useParams } from 'react-router-dom';
 import { RequestPane } from './components/RequestPane';
 import { ResponsePane } from './components/ResponsePane';
 import { Sidebar } from './components/Sidebar';
@@ -13,11 +12,10 @@ type Params = {
   requestId?: string;
 };
 
-function App() {
+export function App({ matches }: { path: string; matches?: Params }) {
-  const p = useParams<Params>();
+  const workspaceId = matches?.workspaceId ?? '';
-  const workspaceId = p.workspaceId ?? '';
   const { data: requests } = useRequests(workspaceId);
-  const request = requests?.find((r) => r.id === p.requestId);
+  const request = requests?.find((r) => r.id === matches?.requestId);
 
   const [screenWidth, setScreenWidth] = useState(window.innerWidth);
   useEffect(() => {
@@ -27,7 +25,11 @@ function App() {
 
   return (
     <div className="grid grid-cols-[auto_1fr] h-full text-gray-900 overflow-hidden rounded-[11px]">
-      <Sidebar requests={requests ?? []} workspaceId={workspaceId} activeRequestId={p.requestId} />
+      <Sidebar
+        requests={requests ?? []}
+        workspaceId={workspaceId}
+        activeRequestId={matches?.requestId}
+      />
       {request && (
         <div className="h-full">
           <div className="grid grid-rows-[auto_1fr] h-full overflow-hidden">
@@ -57,5 +59,3 @@ function App() {
     </div>
   );
 }
-
-export default App;

src-web/components/Button.tsx

@@ -1,6 +1,7 @@
 import classnames from 'classnames';
-import type { ButtonHTMLAttributes, ForwardedRef } from 'react';
+import type { ComponentChildren } from 'preact';
-import { forwardRef } from 'react';
+import type { ForwardedRef } from 'preact/compat';
+import { forwardRef } from 'preact/compat';
 import { Icon } from './Icon';
 
 const colorStyles = {
@@ -13,11 +14,17 @@ const colorStyles = {
   danger: 'bg-red-400 text-white hover:bg-red-500',
 };
 
-export type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & {
+export type ButtonProps = {
   color?: keyof typeof colorStyles;
   size?: 'sm' | 'md';
   justify?: 'start' | 'center';
+  type?: 'button' | 'submit';
+  onClick?: (event: MouseEvent) => void;
   forDropdown?: boolean;
+  className?: string;
+  children?: ComponentChildren;
+  disabled?: boolean;
+  title?: string;
 };
 
 export const Button = forwardRef(function Button(

src-web/components/ButtonLink.tsx

@@ -1,22 +1,14 @@
 import classnames from 'classnames';
-import type { LinkProps } from 'react-router-dom';
+import { Link } from 'preact-router';
-import { Link } from 'react-router-dom';
 import type { ButtonProps } from './Button';
 import { Button } from './Button';
 
-type Props = ButtonProps & LinkProps;
+type Props = ButtonProps & {
+  href: string;
+};
 
-export function ButtonLink({
+export function ButtonLink({ href, className, ...buttonProps }: Props) {
-  reloadDocument,
+  const linkProps = { href };
-  replace,
-  state,
-  preventScrollReset,
-  relative,
-  to,
-  className,
-  ...buttonProps
-}: Props) {
-  const linkProps = { reloadDocument, replace, state, preventScrollReset, relative, to };
   return (
     <Link {...linkProps}>
       <Button className={classnames(className, 'w-full')} {...buttonProps} />

src-web/components/Dialog.tsx

@@ -1,12 +1,13 @@
 import * as D from '@radix-ui/react-dialog';
 import classnames from 'classnames';
 import { motion } from 'framer-motion';
+import type { ComponentChildren } from 'preact';
 import React from 'react';
 import { IconButton } from './IconButton';
 import { HStack, VStack } from './Stacks';
 
 interface Props {
-  children: React.ReactNode;
+  children: ComponentChildren;
   open: boolean;
   onOpenChange: (open: boolean) => void;
   title: string;

src-web/components/Dropdown.tsx

@@ -1,13 +1,13 @@
 import * as D from '@radix-ui/react-dropdown-menu';
-import { DropdownMenuRadioGroup } from '@radix-ui/react-dropdown-menu';
 import { CheckIcon } from '@radix-ui/react-icons';
 import classnames from 'classnames';
 import { motion } from 'framer-motion';
-import type { ForwardedRef, HTMLAttributes, ReactNode } from 'react';
+import type { ComponentChildren } from 'preact';
+import type { ForwardedRef } from 'preact/compat';
 import { forwardRef, useImperativeHandle, useLayoutEffect, useState } from 'react';
 
 interface DropdownMenuRadioProps {
-  children: ReactNode;
+  children: ComponentChildren;
   onValueChange: ((v: { label: string; value: string }) => void) | null;
   value: string;
   label?: string;
@@ -37,13 +37,13 @@ export function DropdownMenuRadio({
       <DropdownMenuPortal>
         <DropdownMenuContent>
           {label && <DropdownMenuLabel>{label}</DropdownMenuLabel>}
-          <DropdownMenuRadioGroup onValueChange={handleChange} value={value}>
+          <D.DropdownMenuRadioGroup onValueChange={handleChange} value={value}>
             {items.map((item) => (
               <DropdownMenuRadioItem key={item.value} value={item.value}>
                 {item.label}
               </DropdownMenuRadioItem>
             ))}
-          </DropdownMenuRadioGroup>
+          </D.DropdownMenuRadioGroup>
         </DropdownMenuContent>
       </DropdownMenuPortal>
     </D.Root>
@@ -51,13 +51,13 @@ export function DropdownMenuRadio({
 }
 
 export interface DropdownProps {
-  children: ReactNode;
+  children: ComponentChildren;
   items: (
     | {
         label: string;
         onSelect?: () => void;
         disabled?: boolean;
-        leftSlot?: ReactNode;
+        leftSlot?: ComponentChildren;
       }
     | '-----'
   )[];
@@ -92,12 +92,14 @@ export function Dropdown({ children, items }: DropdownProps) {
 }
 
 interface DropdownMenuPortalProps {
-  children: ReactNode;
+  children: ComponentChildren;
 }
 
 function DropdownMenuPortal({ children }: DropdownMenuPortalProps) {
+  const container = document.querySelector<Element>('#radix-portal');
+  if (container === null) return null;
   return (
-    <D.Portal container={document.querySelector<HTMLElement>('#radix-portal')}>
+    <D.Portal>
       <motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }}>
         {children}
       </motion.div>
@@ -262,7 +264,12 @@ function DropdownMenuSeparator({ className, ...props }: D.DropdownMenuSeparatorP
   );
 }
 
-function DropdownMenuTrigger({ children, className, ...props }: D.DropdownMenuTriggerProps) {
+type DropdownMenuTriggerProps = D.DropdownMenuTriggerProps & {
+  children: ComponentChildren;
+  className?: string;
+};
+
+function DropdownMenuTrigger({ children, className, ...props }: DropdownMenuTriggerProps) {
   return (
     <D.Trigger asChild className={classnames(className)} {...props}>
       {children}
@@ -270,11 +277,12 @@ function DropdownMenuTrigger({ children, className, ...props }: D.DropdownMenuTr
   );
 }
 
-interface ItemInnerProps extends HTMLAttributes<HTMLDivElement> {
+interface ItemInnerProps {
-  leftSlot?: ReactNode;
+  leftSlot?: ComponentChildren;
-  rightSlot?: ReactNode;
+  rightSlot?: ComponentChildren;
-  children: ReactNode;
+  children: ComponentChildren;
   noHover?: boolean;
+  className?: string;
 }
 
 const ItemInner = forwardRef<HTMLDivElement, ItemInnerProps>(function ItemInner(

src-web/components/Editor/Editor.tsx

@@ -1,4 +1,199 @@
-import type { EditorProps } from './_Editor';
+import { defaultKeymap } from '@codemirror/commands';
-const { default: Editor } = await import('./_Editor');
+import { Compartment, EditorState } from '@codemirror/state';
-export { Editor };
+import { keymap, placeholder as placeholderExt, tooltips } from '@codemirror/view';
-export type { EditorProps };
+import classnames from 'classnames';
+import { EditorView } from 'codemirror';
+import { useEffect, useMemo, useRef, useState } from 'react';
+import './Editor.css';
+import { singleLineExt } from './singleLine';
+
+import { baseExtensions, getLanguageExtension, multiLineExtensions } from './extensions';
+// const { baseExtensions, getLanguageExtension, multiLineExtensions } = await import('./extensions');
+
+export interface EditorProps {
+  id?: string;
+  readOnly?: boolean;
+  className?: string;
+  heightMode?: 'auto' | 'full';
+  contentType?: string;
+  autoFocus?: boolean;
+  valueKey?: string | number;
+  defaultValue?: string;
+  placeholder?: string;
+  tooltipContainer?: HTMLElement;
+  useTemplating?: boolean;
+  onChange?: (value: string) => void;
+  singleLine?: boolean;
+}
+
+export function Editor({
+  readOnly,
+  heightMode,
+  contentType,
+  autoFocus,
+  placeholder,
+  valueKey,
+  useTemplating,
+  defaultValue,
+  onChange,
+  className,
+  singleLine,
+  ...props
+}: EditorProps) {
+  const [cm, setCm] = useState<{ view: EditorView; langHolder: Compartment } | null>(null);
+  const ref = useRef<HTMLDivElement>(null);
+  const extensions = useMemo(
+    () =>
+      getExtensions({
+        container: ref.current,
+        readOnly,
+        placeholder,
+        singleLine,
+        onChange,
+        contentType,
+        useTemplating,
+      }),
+    [contentType, ref.current],
+  );
+
+  // Create codemirror instance when ref initializes
+  useEffect(() => {
+    const parent = ref.current;
+    if (parent === null) return;
+
+    // console.log('INIT EDITOR');
+    let view: EditorView | null = null;
+    try {
+      const langHolder = new Compartment();
+      const langExt = getLanguageExtension({ contentType, useTemplating });
+      const state = EditorState.create({
+        doc: `${defaultValue ?? ''}`,
+        extensions: [...extensions, langHolder.of(langExt)],
+      });
+      view = new EditorView({ state, parent });
+      syncGutterBg({ parent, className });
+      setCm({ view, langHolder });
+      if (autoFocus && view) view.focus();
+    } catch (e) {
+      console.log('Failed to initialize Codemirror', e);
+    }
+    return () => view?.destroy();
+  }, [ref.current, valueKey]);
+
+  // Update value when valueKey changes
+  // TODO: This would be more efficient but the onChange handler gets fired on update
+  // useEffect(() => {
+  //   if (cm === null) return;
+  //   console.log('NEW DOC', valueKey, defaultValue);
+  //   cm.view.dispatch({
+  //     changes: { from: 0, to: cm.view.state.doc.length, insert: `${defaultValue ?? ''}` },
+  //   });
+  // }, [valueKey]);
+
+  // Update language extension when contentType changes
+  useEffect(() => {
+    if (cm === null) return;
+    // console.log('UPDATE LANG');
+    const ext = getLanguageExtension({ contentType, useTemplating });
+    cm.view.dispatch({ effects: cm.langHolder.reconfigure(ext) });
+  }, [contentType]);
+
+  return (
+    <div
+      ref={ref}
+      className={classnames(
+        className,
+        'cm-wrapper text-base bg-gray-50',
+        heightMode === 'auto' ? 'cm-auto-height' : 'cm-full-height',
+        singleLine ? 'cm-singleline' : 'cm-multiline',
+        readOnly && 'cm-readonly',
+      )}
+      {...props}
+    />
+  );
+}
+
+function getExtensions({
+  container,
+  readOnly,
+  singleLine,
+  placeholder,
+  onChange,
+  contentType,
+  useTemplating,
+}: Pick<
+  EditorProps,
+  'singleLine' | 'onChange' | 'contentType' | 'useTemplating' | 'placeholder' | 'readOnly'
+> & { container: HTMLDivElement | null }) {
+  const ext = getLanguageExtension({ contentType, useTemplating });
+
+  // TODO: Ensure tooltips render inside the dialog if we are in one.
+  const parent =
+    container?.closest<HTMLDivElement>('[role="dialog"]') ??
+    document.querySelector<HTMLDivElement>('#cm-portal') ??
+    undefined;
+
+  return [
+    ...baseExtensions,
+    tooltips({ parent }),
+    keymap.of(singleLine ? defaultKeymap.filter((k) => k.key !== 'Enter') : defaultKeymap),
+    ...(singleLine ? [singleLineExt()] : []),
+    ...(!singleLine ? [multiLineExtensions] : []),
+    ...(ext ? [ext] : []),
+    ...(readOnly ? [EditorState.readOnly.of(true)] : []),
+    ...(placeholder ? [placeholderExt(placeholder)] : []),
+
+    ...(singleLine
+      ? [
+          EditorView.domEventHandlers({
+            focus: (e, view) => {
+              // select all text on focus, like a regular input does
+              view.dispatch({ selection: { anchor: 0, head: view.state.doc.length } });
+            },
+            keydown: (e) => {
+              // Submit nearest form on enter if there is one
+              if (e.key === 'Enter') {
+                const el = e.currentTarget as HTMLElement;
+                const form = el.closest('form');
+                form?.dispatchEvent(new Event('submit', { cancelable: true, bubbles: true }));
+              }
+            },
+          }),
+        ]
+      : []),
+
+    // Clear selection on blur
+    EditorView.domEventHandlers({
+      blur: (e, view) => {
+        setTimeout(() => {
+          view.dispatch({ selection: { anchor: 0, head: 0 } });
+        }, 100);
+      },
+    }),
+
+    // Handle onChange
+    EditorView.updateListener.of((update) => {
+      if (typeof onChange === 'function' && update.docChanged) {
+        onChange(update.state.doc.toString());
+      }
+    }),
+  ];
+}
+
+const syncGutterBg = ({
+  parent,
+  className = '',
+}: {
+  parent: HTMLDivElement;
+  className?: string;
+}) => {
+  const gutterEl = parent.querySelector<HTMLDivElement>('.cm-gutters');
+  const classList = className?.split(/\s+/) ?? [];
+  const bgClasses = classList
+    .filter((c) => c.match(/(^|:)?bg-.+/)) // Find bg-* classes
+    .map((c) => c.replace(/^bg-/, '!bg-')) // !important
+    .map((c) => c.replace(/^dark:bg-/, 'dark:!bg-')); // !important
+  if (gutterEl) {
+    gutterEl?.classList.add(...bgClasses);
+  }
+};

src-web/components/Editor/_Editor.tsx

@@ -1,196 +0,0 @@
-import { defaultKeymap } from '@codemirror/commands';
-import { Compartment, EditorState } from '@codemirror/state';
-import { keymap, placeholder as placeholderExt, tooltips } from '@codemirror/view';
-import classnames from 'classnames';
-import { EditorView } from 'codemirror';
-import type { HTMLAttributes } from 'react';
-import { useEffect, useMemo, useRef, useState } from 'react';
-const { baseExtensions, getLanguageExtension, multiLineExtensions } = await import('./extensions');
-import { singleLineExt } from './singleLine';
-import './Editor.css';
-
-export interface EditorProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {
-  readOnly?: boolean;
-  heightMode?: 'auto' | 'full';
-  contentType?: string;
-  autoFocus?: boolean;
-  valueKey?: string | number;
-  defaultValue?: string;
-  placeholder?: string;
-  tooltipContainer?: HTMLElement;
-  useTemplating?: boolean;
-  onChange?: (value: string) => void;
-  singleLine?: boolean;
-}
-
-export default function Editor({
-  readOnly,
-  heightMode,
-  contentType,
-  autoFocus,
-  placeholder,
-  valueKey,
-  useTemplating,
-  defaultValue,
-  onChange,
-  className,
-  singleLine,
-  ...props
-}: EditorProps) {
-  const [cm, setCm] = useState<{ view: EditorView; langHolder: Compartment } | null>(null);
-  const ref = useRef<HTMLDivElement>(null);
-  const extensions = useMemo(
-    () =>
-      getExtensions({
-        container: ref.current,
-        readOnly,
-        placeholder,
-        singleLine,
-        onChange,
-        contentType,
-        useTemplating,
-      }),
-    [contentType, ref.current],
-  );
-
-  // Create codemirror instance when ref initializes
-  useEffect(() => {
-    const parent = ref.current;
-    if (parent === null) return;
-
-    // console.log('INIT EDITOR');
-    let view: EditorView | null = null;
-    try {
-      const langHolder = new Compartment();
-      const langExt = getLanguageExtension({ contentType, useTemplating });
-      const state = EditorState.create({
-        doc: `${defaultValue ?? ''}`,
-        extensions: [...extensions, langHolder.of(langExt)],
-      });
-      view = new EditorView({ state, parent });
-      syncGutterBg({ parent, className });
-      setCm({ view, langHolder });
-      if (autoFocus && view) view.focus();
-    } catch (e) {
-      console.log('Failed to initialize Codemirror', e);
-    }
-    return () => view?.destroy();
-  }, [ref.current, valueKey]);
-
-  // Update value when valueKey changes
-  // TODO: This would be more efficient but the onChange handler gets fired on update
-  // useEffect(() => {
-  //   if (cm === null) return;
-  //   console.log('NEW DOC', valueKey, defaultValue);
-  //   cm.view.dispatch({
-  //     changes: { from: 0, to: cm.view.state.doc.length, insert: `${defaultValue ?? ''}` },
-  //   });
-  // }, [valueKey]);
-
-  // Update language extension when contentType changes
-  useEffect(() => {
-    if (cm === null) return;
-    // console.log('UPDATE LANG');
-    const ext = getLanguageExtension({ contentType, useTemplating });
-    cm.view.dispatch({ effects: cm.langHolder.reconfigure(ext) });
-  }, [contentType]);
-
-  return (
-    <div
-      ref={ref}
-      className={classnames(
-        className,
-        'cm-wrapper text-base bg-gray-50',
-        heightMode === 'auto' ? 'cm-auto-height' : 'cm-full-height',
-        singleLine ? 'cm-singleline' : 'cm-multiline',
-        readOnly && 'cm-readonly',
-      )}
-      {...props}
-    />
-  );
-}
-
-function getExtensions({
-  container,
-  readOnly,
-  singleLine,
-  placeholder,
-  onChange,
-  contentType,
-  useTemplating,
-}: Pick<
-  EditorProps,
-  'singleLine' | 'onChange' | 'contentType' | 'useTemplating' | 'placeholder' | 'readOnly'
-> & { container: HTMLDivElement | null }) {
-  const ext = getLanguageExtension({ contentType, useTemplating });
-
-  // TODO: Ensure tooltips render inside the dialog if we are in one.
-  const parent =
-    container?.closest<HTMLDivElement>('[role="dialog"]') ??
-    document.querySelector<HTMLDivElement>('#cm-portal') ??
-    undefined;
-
-  return [
-    ...baseExtensions,
-    tooltips({ parent }),
-    keymap.of(singleLine ? defaultKeymap.filter((k) => k.key !== 'Enter') : defaultKeymap),
-    ...(singleLine ? [singleLineExt()] : []),
-    ...(!singleLine ? [multiLineExtensions] : []),
-    ...(ext ? [ext] : []),
-    ...(readOnly ? [EditorState.readOnly.of(true)] : []),
-    ...(placeholder ? [placeholderExt(placeholder)] : []),
-
-    ...(singleLine
-      ? [
-          EditorView.domEventHandlers({
-            focus: (e, view) => {
-              // select all text on focus, like a regular input does
-              view.dispatch({ selection: { anchor: 0, head: view.state.doc.length } });
-            },
-            keydown: (e) => {
-              // Submit nearest form on enter if there is one
-              if (e.key === 'Enter') {
-                const el = e.currentTarget as HTMLElement;
-                const form = el.closest('form');
-                form?.dispatchEvent(new Event('submit', { cancelable: true, bubbles: true }));
-              }
-            },
-          }),
-        ]
-      : []),
-
-    // Clear selection on blur
-    EditorView.domEventHandlers({
-      blur: (e, view) => {
-        setTimeout(() => {
-          view.dispatch({ selection: { anchor: 0, head: 0 } });
-        }, 100);
-      },
-    }),
-
-    // Handle onChange
-    EditorView.updateListener.of((update) => {
-      if (typeof onChange === 'function' && update.docChanged) {
-        onChange(update.state.doc.toString());
-      }
-    }),
-  ];
-}
-
-const syncGutterBg = ({
-  parent,
-  className = '',
-}: {
-  parent: HTMLDivElement;
-  className?: string;
-}) => {
-  const gutterEl = parent.querySelector<HTMLDivElement>('.cm-gutters');
-  const classList = className?.split(/\s+/) ?? [];
-  const bgClasses = classList
-    .filter((c) => c.match(/(^|:)?bg-.+/)) // Find bg-* classes
-    .map((c) => c.replace(/^bg-/, '!bg-')) // !important
-    .map((c) => c.replace(/^dark:bg-/, 'dark:!bg-')); // !important
-  if (gutterEl) {
-    gutterEl?.classList.add(...bgClasses);
-  }
-};

src-web/components/HeaderEditor.tsx

@@ -1,4 +1,3 @@
-import type { FormEvent } from 'react';
 import React, { useCallback, useState } from 'react';
 import type { HttpHeader } from '../lib/models';
 import { IconButton } from './IconButton';
@@ -10,7 +9,7 @@ export function HeaderEditor() {
   const [newHeaderName, setNewHeaderName] = useState<string>('');
   const [newHeaderValue, setNewHeaderValue] = useState<string>('');
   const handleSubmit = useCallback(
-    (e?: FormEvent) => {
+    (e?: Event) => {
       e?.preventDefault();
       setHeaders([...headers, { name: newHeaderName, value: newHeaderValue }]);
       setNewHeaderName('');

src-web/components/Heading.tsx

@@ -1,7 +1,10 @@
 import classnames from 'classnames';
-import type { HTMLAttributes } from 'react';
+import type { ComponentChildren } from 'preact';
 
-type Props = HTMLAttributes<HTMLHeadingElement>;
+type Props = {
+  className?: string;
+  children?: ComponentChildren;
+};
 
 export function Heading({ className, children, ...props }: Props) {
   return (

src-web/components/HotKey.tsx

@@ -1,5 +1,5 @@
-import { HTMLAttributes } from 'react';
 import classnames from 'classnames';
+import type { HTMLAttributes } from 'react';
 
 export function HotKey({ children }: HTMLAttributes<HTMLSpanElement>) {
   return (

src-web/components/IconButton.tsx

@@ -1,5 +1,5 @@
 import classnames from 'classnames';
-import { forwardRef } from 'react';
+import { forwardRef } from 'preact/compat';
 import type { ButtonProps } from './Button';
 import { Button } from './Button';
 import type { IconProps } from './Icon';

src-web/components/Input.tsx

@@ -1,14 +1,10 @@
 import classnames from 'classnames';
-import type { InputHTMLAttributes, ReactNode } from 'react';
+import type { ComponentChildren } from 'preact';
 import type { EditorProps } from './Editor/Editor';
 import { Editor } from './Editor/Editor';
 import { HStack, VStack } from './Stacks';
 
-interface Props
+interface Props {
-  extends Omit<
-    InputHTMLAttributes<HTMLInputElement>,
-    'size' | 'onChange' | 'onSubmit' | 'defaultValue'
-  > {
   name: string;
   label: string;
   hideLabel?: boolean;
@@ -17,9 +13,12 @@ interface Props
   onChange?: (value: string) => void;
   useEditor?: Pick<EditorProps, 'contentType' | 'useTemplating' | 'valueKey'>;
   defaultValue?: string;
-  leftSlot?: ReactNode;
+  leftSlot?: ComponentChildren;
-  rightSlot?: ReactNode;
+  rightSlot?: ComponentChildren;
   size?: 'sm' | 'md';
+  className?: string;
+  placeholder?: string;
+  autoFocus?: boolean;
 }
 
 export function Input({
@@ -42,8 +41,8 @@ export function Input({
   const inputClassName = classnames(
     className,
     '!bg-transparent pl-3 pr-2 min-w-0 h-full w-full focus:outline-none placeholder:text-placeholder',
-    leftSlot && '!pl-0.5',
+    !!leftSlot && '!pl-0.5',
-    rightSlot && '!pr-0.5',
+    !!rightSlot && '!pr-0.5',
   );
 
   return (
@@ -83,7 +82,7 @@ export function Input({
         ) : (
           <input
             id={id}
-            onChange={(e) => onChange?.(e.target.value)}
+            onChange={(e) => onChange?.(e.currentTarget.value)}
             placeholder={placeholder}
             defaultValue={defaultValue}
             className={inputClassName}

src-web/components/Layout.tsx

@@ -1,10 +0,0 @@
-import {Outlet} from 'react-router-dom';
-
-
-export function Layout() {
-  return (
-    <div className="w-full h-full">
-      <Outlet />
-    </div>
-  );
-}

src-web/components/LayoutPane.tsx

@@ -1,15 +0,0 @@
-import type { ReactNode } from 'react';
-
-export interface LayoutPaneProps {
-  children?: ReactNode;
-  className?: string;
-}
-
-export function LayoutPane({ className, children }: LayoutPaneProps) {
-  return <div className={className}>{children}</div>;
-  // return (
-  //   <div className={classnames(className, 'w-full h-full p-2')} data-tauri-drag-region>
-  //     <div className={classnames('w-full h-full bg-gray-50/50 rounded-lg')}>{children}</div>
-  //   </div>
-  // );
-}

src-web/components/RouterError.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { useRouteError } from 'react-router-dom';
 import { ButtonLink } from './ButtonLink';
 import { Heading } from './Heading';
@@ -15,7 +14,7 @@ export function RouterError() {
         <pre className="text-sm select-auto cursor-text bg-gray-100 p-3 rounded whitespace-normal">
           {message}
         </pre>
-        <ButtonLink to="/" color="primary">
+        <ButtonLink href="/" color="primary">
           Go Home
         </ButtonLink>
       </VStack>

src-web/components/ScrollArea.tsx

@@ -1,9 +1,9 @@
 import * as S from '@radix-ui/react-scroll-area';
 import classnames from 'classnames';
-import type { ReactNode } from 'react';
+import type { ComponentChildren } from 'preact';
 
 interface Props {
-  children: ReactNode;
+  children: ComponentChildren;
   className?: string;
 }
 

src-web/components/Sidebar.tsx

@@ -1,5 +1,4 @@
 import classnames from 'classnames';
-import type { HTMLAttributes } from 'react';
 import React, { useState } from 'react';
 import { useRequestCreate } from '../hooks/useRequest';
 import useTheme from '../hooks/useTheme';
@@ -12,13 +11,14 @@ import { IconButton } from './IconButton';
 import { HStack, VStack } from './Stacks';
 import { WindowDragRegion } from './WindowDragRegion';
 
-interface Props extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
+interface Props {
   workspaceId: string;
   requests: HttpRequest[];
   activeRequestId?: string;
+  className?: string;
 }
 
-export function Sidebar({ className, activeRequestId, workspaceId, requests, ...props }: Props) {
+export function Sidebar({ className, activeRequestId, workspaceId, requests }: Props) {
   const createRequest = useRequestCreate({ workspaceId, navigateAfter: true });
   const { appearance, toggleAppearance } = useTheme();
   const [open, setOpen] = useState<boolean>(false);
@@ -28,7 +28,6 @@ export function Sidebar({ className, activeRequestId, workspaceId, requests, ...
         className,
         'min-w-[10rem] bg-gray-100 h-full border-r border-gray-200 relative',
       )}
-      {...props}
     >
       <HStack as={WindowDragRegion} alignItems="center" justifyContent="end">
         <Dialog wide open={open} onOpenChange={setOpen} title="Edit Headers">
@@ -56,7 +55,6 @@ export function Sidebar({ className, activeRequestId, workspaceId, requests, ...
           alignItems="center"
           justifyContent="end"
         >
-          <IconButton icon="colorWheel" onClick={() => setShowPicker((p) => !p)} />
           <IconButton icon={appearance === 'dark' ? 'moon' : 'sun'} onClick={toggleAppearance} />
           <IconButton icon="rows" onClick={() => setOpen(true)} />
         </HStack>
@@ -70,13 +68,13 @@ function SidebarItem({ request, active }: { request: HttpRequest; active: boolea
     <li key={request.id}>
       <ButtonLink
         color="custom"
-        to={`/workspaces/${request.workspaceId}/requests/${request.id}`}
+        href={`/workspaces/${request.workspaceId}/requests/${request.id}`}
         disabled={active}
         className={classnames(
           'w-full',
           active
             ? 'bg-gray-200/70 text-gray-900'
-            : 'text-gray-600 hover:text-gray-800 active:bg-gray-200/50',
+            : 'text-gray-600 hover:text-gray-800 active:bg-gray-200/30',
         )}
         size="sm"
         justify="start"

src-web/components/Stacks.tsx

@@ -1,6 +1,6 @@
 import classnames from 'classnames';
-import type { ReactNode } from 'react';
+import type { ComponentChildren, ComponentType } from 'preact';
-import React, { Children, Fragment } from 'react';
+import { Children, Fragment } from 'react';
 
 const spaceClassesX = {
   0: 'pr-0',
@@ -24,7 +24,7 @@ const spaceClassesY = {
 
 interface HStackProps extends BaseStackProps {
   space?: keyof typeof spaceClassesX;
-  children?: ReactNode;
+  children?: ComponentChildren;
 }
 
 export function HStack({ className, space, children, ...props }: HStackProps) {
@@ -52,7 +52,7 @@ export function HStack({ className, space, children, ...props }: HStackProps) {
 
 export interface VStackProps extends BaseStackProps {
   space?: keyof typeof spaceClassesY;
-  children: ReactNode;
+  children: ComponentChildren;
 }
 
 export function VStack({ className, space, children, ...props }: VStackProps) {
@@ -79,21 +79,15 @@ export function VStack({ className, space, children, ...props }: VStackProps) {
 }
 
 interface BaseStackProps {
-  as?: React.ElementType;
+  as?: ComponentType | 'ul';
   alignItems?: 'start' | 'center';
   justifyContent?: 'start' | 'center' | 'end';
   className?: string;
-  children?: ReactNode;
+  children?: ComponentChildren;
 }
 
-function BaseStack({
+function BaseStack({ className, alignItems, justifyContent, children, as }: BaseStackProps) {
-  className,
+  const Component = as ?? 'div';
-  alignItems,
-  justifyContent,
-  children,
-  as = 'div',
-}: BaseStackProps) {
-  const Component = as;
   return (
     <Component
       className={classnames(

src-web/components/StatusColor.tsx

@@ -1,9 +1,9 @@
 import classnames from 'classnames';
-import type { ReactNode } from 'react';
+import type { ComponentChildren } from 'preact';
 
 interface Props {
   statusCode: number;
-  children: ReactNode;
+  children: ComponentChildren;
 }
 
 export function StatusColor({ statusCode, children }: Props) {

src-web/components/UrlBar.tsx

@@ -1,4 +1,3 @@
-import type { FormEvent } from 'react';
 import { Button } from './Button';
 import { DropdownMenuRadio } from './Dropdown';
 import { IconButton } from './IconButton';
@@ -14,13 +13,14 @@ interface Props {
 }
 
 export function UrlBar({ sendRequest, loading, onMethodChange, method, onUrlChange, url }: Props) {
-  const handleSendRequest = async (e: FormEvent<HTMLFormElement>) => {
-    e.preventDefault();
-    sendRequest();
-  };
-
   return (
-    <form onSubmit={handleSendRequest} className="w-full flex items-center">
+    <form
+      onSubmit={async (e) => {
+        e.preventDefault();
+        sendRequest();
+      }}
+      className="w-full flex items-center"
+    >
       <Input
         hideLabel
         useEditor={{ useTemplating: true, contentType: 'url' }}

src-web/components/WindowDragRegion.tsx

@@ -1,7 +1,10 @@
 import classnames from 'classnames';
-import type { HTMLAttributes } from 'react';
+import type { ComponentChildren } from 'preact';
 
-type Props = HTMLAttributes<HTMLDivElement>;
+interface Props {
+  className?: string;
+  children?: ComponentChildren;
+}
 
 export function WindowDragRegion({ className, ...props }: Props) {
   return (

src-web/hooks/useRequest.ts

@@ -1,6 +1,6 @@
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
 import { invoke } from '@tauri-apps/api';
-import { useNavigate } from 'react-router-dom';
+import { route } from 'preact-router';
 import type { HttpRequest } from '../lib/models';
 import { convertDates } from '../lib/models';
 import { responsesQueryKey } from './useResponses';
@@ -44,13 +44,12 @@ export function useRequestCreate({
   workspaceId: string;
   navigateAfter: boolean;
 }) {
-  const navigate = useNavigate();
   return useMutation<string, unknown, Pick<HttpRequest, 'name'>>({
     mutationFn: async (patch) => invoke('create_request', { ...patch, workspaceId }),
     onSuccess: async (requestId) => {
       console.log('DONE', { requestId, navigateAfter });
       if (navigateAfter) {
-        navigate(`/workspaces/${workspaceId}/requests/${requestId}`);
+        route(`/workspaces/${workspaceId}/requests/${requestId}`);
       }
     },
   });

src-web/main.tsx

@@ -1,13 +1,10 @@
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { listen } from '@tauri-apps/api/event';
 import { MotionConfig } from 'framer-motion';
-import React from 'react';
+import { render } from 'preact';
-import ReactDOM from 'react-dom/client';
+import { Router } from 'preact-router';
 import { HelmetProvider } from 'react-helmet-async';
-import { createBrowserRouter, RouterProvider } from 'react-router-dom';
+import { App } from './App';
-import App from './App';
-import { Layout } from './components/Layout';
-import { RouterError } from './components/RouterError';
 import { requestsQueryKey } from './hooks/useRequest';
 import { responsesQueryKey } from './hooks/useResponses';
 import { DEFAULT_FONT_SIZE } from './lib/constants';
@@ -90,36 +87,17 @@ await listen('zoom', ({ payload: zoomDelta }: { payload: number }) => {
   document.documentElement.style.fontSize = `${newFontSize}px`;
 });
 
-const router = createBrowserRouter([
+render(
-  {
+  <QueryClientProvider client={queryClient}>
-    path: '/',
+    <MotionConfig transition={{ duration: 0.1 }}>
-    element: <Layout />,
+      <HelmetProvider>
-    errorElement: <RouterError />,
+        <Router>
-    children: [
+          <Workspaces path="/" />
-      {
+          <App path="/workspaces/:workspaceId" />
-        path: '/',
+          <App path="/workspaces/:workspaceId/requests/:requestId" />
-        element: <Workspaces />,
+        </Router>
-      },
+      </HelmetProvider>
-      {
+    </MotionConfig>
-        path: '/workspaces/:workspaceId',
+  </QueryClientProvider>,
-        element: <App />,
+  document.getElementById('root') as HTMLElement,
-      },
-      {
-        path: '/workspaces/:workspaceId/requests/:requestId',
-        element: <App />,
-      },
-    ],
-  },
-]);
-
-ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
-  <React.StrictMode>
-    <QueryClientProvider client={queryClient}>
-      <MotionConfig transition={{ duration: 0.1 }}>
-        <HelmetProvider>
-          <RouterProvider router={router} />
-        </HelmetProvider>
-      </MotionConfig>
-    </QueryClientProvider>
-  </React.StrictMode>,
 );

src-web/pages/Workspaces.tsx

@@ -1,15 +1,15 @@
+import { ButtonLink } from '../components/ButtonLink';
 import { Heading } from '../components/Heading';
 import { VStack } from '../components/Stacks';
 import { useWorkspaces } from '../hooks/useWorkspaces';
-import { ButtonLink } from '../components/ButtonLink';
 
-export function Workspaces() {
+export function Workspaces(props: { path: string }) {
   const workspaces = useWorkspaces();
   return (
     <VStack as="ul" className="p-12">
       <Heading>Workspaces</Heading>
       {workspaces.data?.map((w) => (
-        <ButtonLink key={w.id} color="gray" to={`/workspaces/${w.id}`}>
+        <ButtonLink key={w.id} color="gray" href={`/workspaces/${w.id}`}>
           {w.name}
         </ButtonLink>
       ))}

tsconfig.json

@@ -15,7 +15,12 @@
     "resolveJsonModule": true,
     "isolatedModules": true,
     "noEmit": true,
-    "jsx": "react-jsx"
+    "jsx": "react-jsx",
+    "jsxImportSource": "preact",
+    "paths": {
+      "react": ["./node_modules/preact/compat/"],
+      "react-dom": ["./node_modules/preact/compat/"]
+    },
   },
   "include": [
     "src-web"

vite.config.ts

@@ -1,11 +1,11 @@
+import preact from '@preact/preset-vite';
 import { defineConfig } from 'vite';
-import react from '@vitejs/plugin-react';
 import { ViteRsw } from 'vite-plugin-rsw';
 import topLevelAwait from 'vite-plugin-top-level-await';
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [react(), ViteRsw(), topLevelAwait()],
+  plugins: [preact({ devToolsEnabled: true }), ViteRsw(), topLevelAwait()],
 
   // Vite options tailored for Tauri development and only applied in `tauri dev` or `tauri build`
   // prevent vite from obscuring rust errors
@@ -15,6 +15,7 @@ export default defineConfig({
     port: 1420,
     strictPort: true,
   },
+
   // to make use of `TAURI_DEBUG` and other env variables
   // https://tauri.studio/v1/api/config#buildconfig.beforedevcommand
   envPrefix: ['VITE_', 'TAURI_'],