From a86a17eb6ff428b780c83fcd8a33ae967e504668 Mon Sep 17 00:00:00 2001
From: yuzheng14 <422450117@qq.com>
Date: Fri, 6 Mar 2026 11:28:42 +0800
Subject: [PATCH 1/4] feat(pack): add devServer.proxy with pathRewrite and
example
- Add ProxyRule/DevServerProxy/PathRewrite types and proxy in pack-shared config
- Implement proxy in pack: context match (prefix + ^regex), pathRewrite (object + function), changeOrigin/secure
- Add proxyFromObject in pack-shared utils for object-to-array proxy config
- Wire proxy into dev server HTTP and WebSocket in dev.ts
- Add unit tests under __test__ (proxy, proxyFromObject), exclude from tsconfig
- Add examples/with-proxy: React app fetching JSONPlaceholder via /api and /placeholder
Made-with: Cursor
---
.vscode/settings.json | 4 +-
examples/with-proxy/.gitignore | 4 +
examples/with-proxy/README.md | 40 +
examples/with-proxy/index.html | 11 +
examples/with-proxy/package.json | 17 +
examples/with-proxy/src/App.tsx | 84 +
examples/with-proxy/src/index.tsx | 9 +
examples/with-proxy/utoopack.json | 52 +
package-lock.json | 14228 +++++++++-------
package.json | 5 +-
.../pack-shared/src/__test__/utils.test.ts | 95 +
packages/pack-shared/src/config.ts | 45 +
packages/pack-shared/src/utils.ts | 45 +-
packages/pack-shared/tsconfig.json | 3 +-
packages/pack/src/__test__/proxy-hono.test.ts | 185 +
packages/pack/src/commands/dev.ts | 6 +
packages/pack/src/core/proxy-hono.ts | 112 +
packages/pack/tsconfig.json | 2 +-
vitest.config.ts | 8 +
19 files changed, 8427 insertions(+), 6528 deletions(-)
create mode 100644 examples/with-proxy/.gitignore
create mode 100644 examples/with-proxy/README.md
create mode 100644 examples/with-proxy/index.html
create mode 100644 examples/with-proxy/package.json
create mode 100644 examples/with-proxy/src/App.tsx
create mode 100644 examples/with-proxy/src/index.tsx
create mode 100644 examples/with-proxy/utoopack.json
create mode 100644 packages/pack-shared/src/__test__/utils.test.ts
create mode 100644 packages/pack/src/__test__/proxy-hono.test.ts
create mode 100644 packages/pack/src/core/proxy-hono.ts
create mode 100644 vitest.config.ts
diff --git a/.vscode/settings.json b/.vscode/settings.json
index 342fed968..35bc79bdd 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -7,10 +7,10 @@
"editor.defaultFormatter": "vscode.css-language-features"
},
"[javascript]": {
- "editor.defaultFormatter": "vscode.typescript-language-features"
+ "editor.defaultFormatter": "biomejs.biome"
},
"[typescript]": {
- "editor.defaultFormatter": "vscode.typescript-language-features"
+ "editor.defaultFormatter": "biomejs.biome"
},
"[toml]": {
"editor.defaultFormatter": "tombi-toml.tombi"
diff --git a/examples/with-proxy/.gitignore b/examples/with-proxy/.gitignore
new file mode 100644
index 000000000..999729dba
--- /dev/null
+++ b/examples/with-proxy/.gitignore
@@ -0,0 +1,4 @@
+dist
+node_modules
+*.log
+.DS_Store
diff --git a/examples/with-proxy/README.md b/examples/with-proxy/README.md
new file mode 100644
index 000000000..56073b35d
--- /dev/null
+++ b/examples/with-proxy/README.md
@@ -0,0 +1,40 @@
+# with-proxy
+
+Example project demonstrating `devServer.proxy` on the Hono-based dev server.
+
+## Config
+
+See `utoopack.json`: `devServer.proxy` is an array of `ProxyRule`:
+
+- **`/api`** → `https://jsonplaceholder.typicode.com` with `pathRewrite: { "^/api": "" }`
+- **`/placeholder`** and **`/json`** → same target with respective path rewrites
+
+## Run
+
+```bash
+# From repo root
+ut start --workspace with-proxy
+# or
+npx up --workspace with-proxy
+```
+
+Then open the app and use the radio buttons to request `/api/posts/1` or `/placeholder/posts/1`; both are proxied to JSONPlaceholder without CORS.
+
+## proxyFromObject (JS/TS config)
+
+In a JS/TS config file you can use `proxyFromObject` from `@utoo/pack-shared` to build rules from an object:
+
+```ts
+import { proxyFromObject } from "@utoo/pack-shared";
+
+export default {
+ devServer: {
+ proxy: [
+ ...proxyFromObject({
+ "/api": "http://localhost:3000",
+ "/auth": { target: "http://localhost:5000", changeOrigin: true },
+ }),
+ ],
+ },
+};
+```
diff --git a/examples/with-proxy/index.html b/examples/with-proxy/index.html
new file mode 100644
index 000000000..fdf096699
--- /dev/null
+++ b/examples/with-proxy/index.html
@@ -0,0 +1,11 @@
+
+
+
+
+
+ devServer.proxy Example – Utoo Pack
+
+
+
+
+
diff --git a/examples/with-proxy/package.json b/examples/with-proxy/package.json
new file mode 100644
index 000000000..ea1dad9d6
--- /dev/null
+++ b/examples/with-proxy/package.json
@@ -0,0 +1,17 @@
+{
+ "name": "with-proxy",
+ "version": "0.0.1",
+ "scripts": {
+ "build": "up build",
+ "dev": "up dev"
+ },
+ "dependencies": {
+ "react": "^18.2.0",
+ "react-dom": "^18.2.0"
+ },
+ "devDependencies": {
+ "@utoo/pack-cli": "*",
+ "@types/react": "^18.0.25",
+ "@types/react-dom": "^18.0.9"
+ }
+}
diff --git a/examples/with-proxy/src/App.tsx b/examples/with-proxy/src/App.tsx
new file mode 100644
index 000000000..ff399d323
--- /dev/null
+++ b/examples/with-proxy/src/App.tsx
@@ -0,0 +1,84 @@
+import React, { useEffect, useState } from "react";
+
+interface Post {
+ userId: number;
+ id: number;
+ title: string;
+ body: string;
+}
+
+export function App() {
+ const [post, setPost] = useState(null);
+ const [loading, setLoading] = useState(true);
+ const [error, setError] = useState(null);
+ const [endpoint, setEndpoint] = useState<"/api" | "/placeholder">("/api");
+
+ useEffect(() => {
+ setLoading(true);
+ setError(null);
+ fetch(`${endpoint}/posts/1`)
+ .then((r) => (r.ok ? r.json() : Promise.reject(new Error(r.statusText))))
+ .then((data: Post) => {
+ setPost(data);
+ setLoading(false);
+ })
+ .catch((e) => {
+ setError(e instanceof Error ? e.message : String(e));
+ setLoading(false);
+ });
+ }, [endpoint]);
+
+ return (
+
+
devServer.proxy Example
+
+ In dev, requests to /api and /placeholder are
+ proxied to https://jsonplaceholder.typicode.com via{" "}
+ devServer.proxy (Hono), so no CORS is needed.
+