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/.vscode/launch.json b/.vscode/launch.json
new file mode 100644
index 0000000..475788d
--- /dev/null
+++ b/.vscode/launch.json
@@ -0,0 +1,16 @@
+{
+ // Use IntelliSense to learn about possible attributes.
+ // Hover to view descriptions of existing attributes.
+ // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+ "version": "0.2.0",
+ "configurations": [
+ {
+ "type": "chrome",
+ "request": "launch",
+ "name": "Launch Chrome against localhost",
+ "url": "http://localhost:5173/src/web-components/demo/sketch-app-shell.demo.html",
+ "webRoot": "${workspaceFolder}/loop/webui",
+ "preLaunchTask": "webui: dev"
+ }
+ ]
+}
diff --git a/.vscode/tasks.json b/.vscode/tasks.json
index 195949b..47975e7 100644
--- a/.vscode/tasks.json
+++ b/.vscode/tasks.json
@@ -16,9 +16,8 @@
"script": "demo",
"path": "loop/webui",
"group": "build",
- "label": "webui: watch demo",
+ "label": "webui: demo",
"isBackground": true,
- "dependsOn": ["webui: watch tsc"],
"problemMatcher": [
{
"pattern": [
@@ -30,9 +29,32 @@
}
],
"background": {
- "activeOnStart": true,
- "beginsPattern": "Web Dev Server started...",
- "endsPattern": "Network:"
+ "beginsPattern": "VITE",
+ "endsPattern": "Local:"
+ }
+ }
+ ]
+ },
+ {
+ "type": "npm",
+ "script": "dev",
+ "path": "loop/webui",
+ "group": "build",
+ "label": "webui: dev",
+ "isBackground": true,
+ "problemMatcher": [
+ {
+ "pattern": [
+ {
+ "regexp": ".",
+ "file": 1,
+ "location": 2,
+ "message": 3
+ }
+ ],
+ "background": {
+ "beginsPattern": "VITE",
+ "endsPattern": "Local:"
}
}
]