webui: Improve dx
For local development, switch to Vite and update web components for improved demo experience. Note that we haven't changed how we bundle when we're actually running in sketch; that's still the go/esbuild in-memory setup. This just changes demo dev setup to get breakpoints working and a functioning full sketch-app-shell.
We still need to add some mock data, but this is a start
- Introduced `vite.config.mts` for Vite setup with hot module reloading.
- Updated `package.json` and `package-lock.json` to include Vite and related plugins.
- Refactored demo scripts to utilize Vite for local development.
- Created `launch.json` for VSCode debugging configuration.
- Enhanced `Makefile` with a new demo task.
- Improved styling and structure in demo HTML and CSS files.
- Implemented `aggregateAgentMessages` function for message handling in web components.
diff --git a/loop/webui/package.json b/loop/webui/package.json
index a06362f..262a4fc 100644
--- a/loop/webui/package.json
+++ b/loop/webui/package.json
@@ -11,7 +11,8 @@
},
"scripts": {
"check": "tsc --noEmit",
- "demo": "web-dev-server -config ./web-dev-server.config.mjs --node-resolve --open /src/web-components/demo/",
+ "demo": "vite --open src/web-components/demo/index.html",
+ "dev": "vite",
"format": "prettier ./src --write",
"gentypes": "go run ../../cmd/go2ts -o src/types.ts",
"build": "go run ../../cmd/go2ts -o src/types.ts && tsc",
@@ -30,18 +31,18 @@
"vega-lite": "^5.23.0"
},
"devDependencies": {
- "@open-wc/dev-server-hmr": "^0.1.2-next.0",
"@sand4rt/experimental-ct-web": "^1.51.1",
"@types/marked": "^5.0.2",
"@types/mocha": "^10.0.7",
"@types/node": "^22.13.14",
- "@web/dev-server": "^0.4.6",
"@web/test-runner": "^0.18.2",
"@web/test-runner-puppeteer": "^0.18.0",
"autoprefixer": "^10.4.21",
"esbuild": "^0.25.1",
"prettier": "3.5.3",
- "typescript": "^5.8.2"
+ "typescript": "^5.8.2",
+ "vite": "^6.3.2",
+ "vite-plugin-web-components-hmr": "^0.1.3"
},
"keywords": []
}