do NOT put h3 and vite in the same room

aaaaaughhhhh whyy is this happening to meeeee
i just want vite middleware to play nice with h3 but its just so weird ughhh

consume/bento.box.ts

@@ -47,11 +47,7 @@ export default bento.box<State>({
   },
   updateScore(set, payload) {
     set((state) => {
-      const w = state.scoreboard.shift();
-      console.log(state.scoreboard);
-      if (w) {
-        state.scoreboard.push(w);
-      }
+      state.scoreboard[0].score -= 1;
     });
   },
 });

consume/package.json

@@ -1,10 +1,12 @@
 {
   "type": "module",
-  "dependencies": { "bento": "../lib/" },
+  "dependencies": {
+    "bento": "file:../lib/"
+  },
   "devDependencies": {
     "@preact/preset-vite": "^2.8.2",
     "@tailwindcss/vite": "^4.0.0-alpha.14",
     "tailwindcss": "^4.0.0-alpha.14",
-    "vite": "^5.2.10"
+    "vite": "^5.2.11"
   }
 }

lib/package.json

@@ -7,21 +7,18 @@
     "./server": "./src/server/index.ts",
     "./client": "./src/client/index.ts"
   },
-  "bin": "./src/bin.ts",
   "dependencies": {
+    "@types/bun": "latest",
+    "@types/icepick": "^2.3.3",
     "citty": "^0.1.6",
     "defu": "^6.1.4",
     "h3": "^1.11.1",
     "icepick": "^2.4.0",
     "lmdb": "^3.0.8",
-    "msgpackr": "^1.10.1",
-    "vite": "^5.2.11"
-  },
-  "devDependencies": {
-    "@types/bun": "latest",
-    "@types/icepick": "^2.3.3"
+    "msgpackr": "^1.10.1"
   },
   "peerDependencies": {
+    "vite": "^5.2.11",
     "typescript": "^5.0.0"
   }
 }

lib/src/box.ts

@@ -1,10 +1,19 @@
 import type { Actions, ServerConfig } from "./types";
+import {
+  createApp,
+  defineWebSocketHandler,
+  fromNodeMiddleware,
+  toWebHandler,
+} from "h3";
+import wsAdapter from "crossws/adapters/bun";
+import { createServer as createViteServer } from "vite";
+import { Server as BentoServer } from "./server";
 
 export type BentoBoxModel<S> = S | Actions<S>;
 
-export const box = <S extends Record<string, unknown>>(
+export const box = async <S extends Record<string, unknown>>(
   model: BentoBoxModel<S>
-): ServerConfig<S> => {
+) => {
   const config: ServerConfig<S> = {
     state: {} as S,
     actions: {},
@@ -19,5 +28,30 @@ export const box = <S extends Record<string, unknown>>(
     }
   });
 
-  return config;
+  const app = createApp();
+
+  // vite dev server
+  const vite = await createViteServer({
+    server: { middlewareMode: true },
+    build: { target: "chrome95" },
+  });
+  app.use(fromNodeMiddleware(vite.middlewares));
+
+  // websocket server
+  const server = new BentoServer(config);
+  app.use("/_ws", defineWebSocketHandler(server.wss));
+
+  // serve
+  const { handleUpgrade, websocket } = wsAdapter(app.websocket);
+  const handleHttp = toWebHandler(app);
+  return Bun.serve({
+    port: 4400,
+    websocket,
+    async fetch(req, server) {
+      if (await handleUpgrade(req, server)) {
+        return;
+      }
+      return handleHttp(req);
+    },
+  });
 };

lib/src/client/index.ts

@@ -10,14 +10,10 @@ export class Client<S> {
     this.#send({ type: "action", action, payload });
   }
 
-  constructor({
-    scopes,
-    initial,
-    port = 4400,
-  }: { scopes?: string[][]; initial?: S; port?: number } = {}) {
+  constructor({ scopes, initial }: { scopes?: string[][]; initial?: S } = {}) {
     this.#state = icepick.freeze(initial || ({} as S));
 
-    this.#ws = new WebSocket(`ws://localhost:${port}/_ws`);
+    this.#ws = new WebSocket(`ws://${window.location.hostname}:4400/_ws`);
     this.#ws.binaryType = "arraybuffer";
     this.#send({ type: "init", scopes });
     this.#ws.addEventListener("message", (event) => {

lib/src/server/index.ts

@@ -8,7 +8,6 @@ import type {
   Actions,
   ServerConfig,
 } from "../types";
-import defu from "defu";
 import { pack, unpack } from "msgpackr";
 import { State } from "./state";
 import { Persist } from "./persist";
@@ -34,13 +33,6 @@ export class Server<S extends Record<string, unknown>> {
     this.#persist.clear();
     this.#persist.init(this.#state.snap());
 
-    // apply defaults
-    this.#handleActionStream((draft: Record<string, unknown>) => {
-      Object.entries(defu(draft, config.state)).forEach(([key, value]) => {
-        draft[key] = value;
-      });
-    });
-
     this.wss = {
       message: (ws, msg) => {
         const data: Message = unpack(msg.rawData);

lib/tsconfig.json

@@ -10,6 +10,7 @@
     "moduleResolution": "bundler",
     "allowImportingTsExtensions": true,
     "verbatimModuleSyntax": true,
+    "allowJs": true,
     "noEmit": true,
 
     // Best practices