loop/webui: swtich to web components impl (#1)
* loop/webui: swtich to web components impl
This change reorganizes the original vibe-coded
frontend code into a structure that's much
easier for a human to read and reason about,
while retaining the user-visible functionality
of its vibe-coded predecessor. Perhaps most
importantly, this change makes the code testable.
Some other notable details:
This does not use any of the popular large web
frameworks, but instead follows more of an
"a la carte" approach: leverage features
that already exist in modern web browsers,
like custom elements and shadow DOM.
Templating and basic component lifecycle
management are provided by lit.
State management is nothing fancy. It
doesn't use any library or framework, just
a basic "Events up, properties down"
approach.
* fix bad esbuild.go merge
* loop/webui: don't bundle src/web-components/demo
* loop/webui: don't 'npm ci' dev deps in the container
* rebase to main, undo README.md changes, add webuil.Build() call to LaunchContainer()
diff --git a/loop/webui/src/web-components/demo/readme.md b/loop/webui/src/web-components/demo/readme.md
new file mode 100644
index 0000000..8e3c33c
--- /dev/null
+++ b/loop/webui/src/web-components/demo/readme.md
@@ -0,0 +1,14 @@
+# Stand-alone demo pages for sketch web components
+
+These are handy for iterating on specific component UI issues in isolation from the rest of the sketch application, and without having to start a full backend to serve the full frontend app UI.
+
+# How to use this demo directory to iterate on component development
+
+From the `loop/webui` directory:
+
+1. In one shell, run `npm run watch` to build the web components and watch for changes
+1. In another shell, run `npm run demo` to start a local web server to serve the demo pages
+1. open http://localhost:8000/src/web-components/demo/ in your browser
+1. make edits to the .ts code or to the demo.html files and see how it affects the demo pages in real time
+
+Alternately, use the `webui: watch demo` task in VSCode, which runs all of the above for you.