feat: node websocket plugin

packages/websocket/README.md

@@ -0,0 +1,16 @@
+# @hiogawa/vite-plugin-websocket
+
+## Example
+
+```js
+// vite.config.ts
+import { defineConfig } from "vite";
+import websocket from "@hiogawa/vite-plugin-websocket"
+
+export default defineConfig({
+  plugins: [
+    websocket({
+    }),
+  ],
+});
+```

packages/websocket/package.json

@@ -0,0 +1,36 @@
+{
+  "name": "@hiogawa/vite-plugin-websocket",
+  "version": "0.0.0",
+  "homepage": "https://github.com/hi-ogawa/vite-plugins/tree/main/packages/websocket",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/hi-ogawa/vite-plugins.git",
+    "directory": "packages/websocket"
+  },
+  "license": "MIT",
+  "type": "module",
+  "exports": {
+    "./package.json": "./package.json",
+    ".": "./dist/index.js",
+    "./*": "./dist/*.js"
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "dev": "tsdown --sourcemap --watch src",
+    "build": "tsdown",
+    "prepack": "tsdown --clean"
+  },
+  "dependencies": {
+    "@remix-run/node-fetch-server": "^0.8.0",
+    "ws": "^8.18.3"
+  },
+  "peerDependencies": {
+    "vite": "*"
+  },
+  "devDependencies": {
+    "@types/node": "^24.3.0",
+    "@types/ws": "^8.18.1"
+  }
+}

packages/websocket/src/index.ts

@@ -0,0 +1,127 @@
+import { isRunnableDevEnvironment, type HttpServer, type Plugin } from "vite";
+import { WebSocketServer } from "ws";
+import { createRequest } from "@remix-run/node-fetch-server"
+import type { IncomingMessage } from "node:http";
+import assert from "node:assert";
+
+// polyfill cloudflare workers style websocket handling pattern?
+// probably that's what miniflare implements?
+// https://github.com/cloudflare/workers-sdk/blob/e15a72cfe774e938dc02690621b17570d46e8dff/packages/vite-plugin-cloudflare/src/websockets.ts#L25-L27
+
+// no, the point is that we want to expose "standard node server websocket" style 
+// experience. for cloudflare style websocket, they should be available through their plugin.
+// in that case, we can even assume `WebSocketServer` is the one provided by server entry?
+
+// import {} from "vite-plugin-websocket/runtime"
+
+// export const websocketServer = new WebSocketServer(...);
+// websocketServer.on("connection", () => ...)
+
+// if (import.meta.hot) {
+//   import.meta.hot.dispose(() => websocketServer.close());
+// }
+
+// probably reverse the concept and it would be something like "vite-plugin-node-server"?
+// - vite-plugin-node-server/runtime
+//   - expose node server  (framework)
+//   - consume node server (framework user code)
+
+export default function websocketPlugin(websocketPluginOpitons?: {
+  handler?: {
+    /** @default "ssr" */
+    environmentName?: string;
+    entryName?: string;
+  };
+}): Plugin[] {
+  websocketPluginOpitons;
+  return [
+    {
+      name: "websocket",
+      configureServer(server) {
+        assert(isRunnableDevEnvironment(server.environments.ssr));
+        const runner = server.environments.ssr.runner;
+        if (server.httpServer) {
+          server.httpServer.on("upgrade", async (req: IncomingMessage, socket, head) => {
+            // Ignore Vite HMR WebSockets
+            if (req.headers["sec-websocket-protocol"]?.startsWith("vite")) {
+              return;
+            }
+
+            try {
+              // const { websocketServer } = await runner.import("/websocket");
+            } catch (e) {
+              // TODO
+            }
+
+            // req.headers;
+            // const request = createRequest(req, { on: () => {} } as any);
+            // request.headers;
+
+            // // TODO: request to handler
+            // // "Upgrade";
+
+            // nodeWebSocket.handleUpgrade(
+            //   req,
+            //   socket,
+            //   head,
+            //   async (clientWebSocket) => {
+            //     coupleWebSocket;
+            //     clientWebSocket;
+            //     nodeWebSocket.emit("connection", clientWebSocket, req);
+            //   },
+            // );
+          });          
+          // server.httpServer.on("")
+          // handleWebsocket(server.httpServer);
+        }
+      },
+      configurePreviewServer(server) {
+        if (server.httpServer) {
+        }
+      },
+    },
+  ];
+}
+
+function handleWebsocket(httpServer: HttpServer) {
+  const nodeWebSocket = new WebSocketServer({ noServer: true });
+  nodeWebSocket.on("connection", (ws, req) => {
+    ws;
+    req;
+  });
+
+  httpServer.on("upgrade", (req: IncomingMessage, socket, head) => {
+    // Ignore Vite HMR WebSockets
+    if (req.headers["sec-websocket-protocol"]?.startsWith("vite")) {
+      return;
+    }
+
+    req.headers;
+    const request = createRequest(req, { on: () => {} } as any);
+    request.headers;
+
+    // TODO: request to handler
+    // "Upgrade";
+
+    nodeWebSocket.handleUpgrade(
+      req,
+      socket,
+      head,
+      async (clientWebSocket) => {
+        coupleWebSocket;
+
+        // clientWebSocket.emit("...")
+        // clientWebSocket.on("message", (data) => {
+        //   console.log("message", data);
+        //   clientWebSocket.send(data);
+        // });
+
+        nodeWebSocket.emit("connection", clientWebSocket, req);
+      },
+    );
+  });
+}
+
+function coupleWebSocket() {}
+
+function getEntrySource() {}

packages/websocket/tsconfig.json

@@ -0,0 +1,12 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "include": ["src", "*.ts"],
+  "compilerOptions": {
+    "noPropertyAccessFromIndexSignature": false,
+    "noImplicitReturns": false,
+    "checkJs": false,
+    "declaration": true,
+    "isolatedDeclarations": true,
+    "jsx": "react-jsx"
+  }
+}

packages/websocket/tsdown.config.ts

@@ -0,0 +1,9 @@
+import { defineConfig } from "tsdown";
+
+export default defineConfig({
+  entry: ["src/index.ts"],
+  format: ["esm"],
+  dts: {
+    sourcemap: process.argv.slice(2).includes("--sourcemap"),
+  },
+}) as any;