fix: edge cases due to koa-connect

Remove the koa-connect dependency in favor of a lightweight custom implementation. The new connectToKoa adapter provides the same functionality for bridging Vite's Connect-style middleware to Koa, with comprehensive documentation and support for Vite 4.x-7.x.

Author: o-alexandrov

packages/ladle/lib/cli/vite-dev.js

@@ -3,7 +3,6 @@ import koa from "koa";
 import http from "http";
 import http2 from "http2";
 import https from "https";
-import c2k from "koa-connect";
 import path from "path";
 import getPort from "get-port";
 import { globby } from "globby";
@@ -14,6 +13,7 @@ import debug from "./debug.js";
 import getBaseViteConfig from "./vite-base.js";
 import { getMetaJsonObject } from "./vite-plugin/generate/get-meta-json.js";
 import { getEntryData } from "./vite-plugin/parse/get-entry-data.js";
+import { connectToKoa } from "./vite-plugin/connect-to-koa.js";
 
 /**
  * @param config {import("../shared/types").Config}
@@ -91,7 +91,7 @@ const bundler = async (config, configFolder) => {
       }
       await next();
     });
-    app.use(c2k(vite.middlewares));
+    app.use(connectToKoa(vite.middlewares));
 
     // activate https if key and cert are provided
     const useHttps =

packages/ladle/lib/cli/vite-plugin/connect-to-koa.js

@@ -0,0 +1,45 @@
+/**
+ * Converts Connect/Express-style middleware to Koa middleware.
+ *
+ * This adapter bridges the gap between Vite's Connect-based middleware system
+ * and Ladle's Koa-based server architecture.
+ *
+ * @param {Function} connectMiddleware - Connect/Express middleware function with signature (req, res, next)
+ * @returns {Function} Koa middleware function with signature (ctx, next)
+ *
+ * @description
+ * Vite uses Connect middleware internally (similar to Express), which expects
+ * (req, res, next) function signatures. Koa uses a different pattern with a context
+ * object (ctx) and async/await. This adapter wraps Connect middleware to work with Koa.
+ *
+ * **Supported Vite Versions:**
+ * - Vite 7.x
+ * - Vite 6.x
+ * - Vite 5.x
+ * - Vite 4.x
+ *
+ * **How it works:**
+ * 1. Receives a Connect middleware that expects Node.js req/res objects
+ * 2. Extracts req and res from the Koa context (ctx.req, ctx.res)
+ * 3. Wraps the Connect middleware call in a Promise
+ * 4. Handles errors from the Connect middleware by rejecting the Promise
+ * 5. Continues the Koa middleware chain by calling next()
+ *
+ * @example
+ * import { connectToKoa } from './connect-to-koa.js';
+ * import vite from 'vite';
+ *
+ * const viteServer = await vite.createServer();
+ * app.use(connectToKoa(viteServer.middlewares));
+ */
+export const connectToKoa = (connectMiddleware) => {
+  return async (ctx, next) => {
+    await new Promise((resolve, reject) => {
+      connectMiddleware(ctx.req, ctx.res, (err) => {
+        if (err) reject(err);
+        else resolve();
+      });
+    });
+    await next();
+  };
+};

packages/ladle/package.json

@@ -59,7 +59,6 @@
     "globby": "^14.0.2",
     "history": "^5.3.0",
     "koa": "^2.15.4",
-    "koa-connect": "^2.1.0",
     "lodash.merge": "^4.6.2",
     "msw": "^2.7.0",
     "open": "^10.1.0",