From 356c33cd82af0e16c1d4e1df1a3af6ac0c4195d5 Mon Sep 17 00:00:00 2001 From: Jane Chu <7559015+janechu@users.noreply.github.com> Date: Fri, 10 Apr 2026 11:20:56 -0700 Subject: [PATCH 1/2] feat: add webui-todo-app example with declarative FAST HTML and webui prerendering Adds a new examples/webui-todo-app that demonstrates FAST declarative HTML templates with @microsoft/webui prerendering and client-side hydration: - Declarative HTML templates (.html) with {{}} bindings for server rendering and {} bindings for client-only event handlers and refs - CSS files co-located with component templates - RenderableFASTElement mixin with defineAsync and defer-and-hydrate - TemplateElement configuration with observer maps for reactive tracking - webui CLI for serving with --plugin=fast for FAST-aware template processing - esbuild for client-side bundling - Initial state via data/state.json - Todo functionality: add items, toggle completion, delete, remaining count Based on the webui todo-fast example from microsoft/webui, adapted for the FAST monorepo with @microsoft/webui 0.0.6. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com> --- .github/copilot-instructions.md | 1 + examples/webui-todo-app/README.md | 85 + examples/webui-todo-app/data/state.json | 23 + examples/webui-todo-app/package.json | 35 + examples/webui-todo-app/src/index.html | 29 + examples/webui-todo-app/src/index.ts | 35 + .../webui-todo-app/src/todo-app/todo-app.css | 63 + .../webui-todo-app/src/todo-app/todo-app.html | 29 + .../webui-todo-app/src/todo-app/todo-app.ts | 99 + .../src/todo-item/todo-item.css | 66 + .../src/todo-item/todo-item.html | 11 + .../webui-todo-app/src/todo-item/todo-item.ts | 29 + examples/webui-todo-app/tsconfig.json | 16 + package-lock.json | 2728 +++++++++++------ package.json | 3 +- 15 files changed, 2282 insertions(+), 970 deletions(-) create mode 100644 examples/webui-todo-app/README.md create mode 100644 examples/webui-todo-app/data/state.json create mode 100644 examples/webui-todo-app/package.json create mode 100644 examples/webui-todo-app/src/index.html create mode 100644 examples/webui-todo-app/src/index.ts create mode 100644 examples/webui-todo-app/src/todo-app/todo-app.css create mode 100644 examples/webui-todo-app/src/todo-app/todo-app.html create mode 100644 examples/webui-todo-app/src/todo-app/todo-app.ts create mode 100644 examples/webui-todo-app/src/todo-item/todo-item.css create mode 100644 examples/webui-todo-app/src/todo-item/todo-item.html create mode 100644 examples/webui-todo-app/src/todo-item/todo-item.ts create mode 100644 examples/webui-todo-app/tsconfig.json diff --git a/.github/copilot-instructions.md b/.github/copilot-instructions.md index 7f0567668bf..1516fdbad2e 100644 --- a/.github/copilot-instructions.md +++ b/.github/copilot-instructions.md @@ -38,6 +38,7 @@ Each package includes a DESIGN.md file, read that to gain a general understandin - `examples/design-system/` — Shared semantic design tokens (`@microsoft/fast-examples-design-system`) consumed by all example apps. - `examples/csr/todo-app/` — A simple To-Do app demonstrating FAST usage patterns and using the shared `@microsoft/fast-examples-design-system` tokens. - `examples/csr/todo-mobx-app/` — A To-Do app demonstrating how to integrate MobX state with `@microsoft/fast-element` using a single `autorun` per component (no custom bridge code). +- `examples/webui-todo-app/` — A To-Do app demonstrating FAST declarative HTML with `@microsoft/webui` prerendering and hydration. ## Skills diff --git a/examples/webui-todo-app/README.md b/examples/webui-todo-app/README.md new file mode 100644 index 00000000000..ab31eb0cf56 --- /dev/null +++ b/examples/webui-todo-app/README.md @@ -0,0 +1,85 @@ +# WebUI Todo App + +A Todo app demonstrating FAST declarative HTML templates with [webui](https://github.com/microsoft/webui) prerendering and hydration. + +This example shows how to combine `@microsoft/fast-html` declarative templates with `@microsoft/webui` for server-side prerendering, producing a fast initial render that hydrates into a fully interactive FAST web component application. + +## Features + +- **Declarative templates**: Uses `.html` and `.css` files instead of imperative `html`/`css` tagged template literals +- **Server-side prerendering**: `webui serve` compiles declarative templates and renders initial state into static HTML +- **Client-side hydration**: `@microsoft/fast-html` picks up prerendered DOM and attaches FAST reactive bindings +- **Todo functionality**: Add items, toggle completion, delete items, remaining count + +## Prerequisites + +From the monorepo root, install dependencies and build packages: + +```bash +npm ci +npm run build +``` + +## Running + +```bash +# Build client bundle and start the webui dev server +npm start -w examples/webui-todo-app +``` + +The app will be available at `http://localhost:8081`. + +For development with live reloading, run the client and server in separate terminals: + +```bash +# Terminal 1: Watch and rebuild client bundle +npm run start:client -w examples/webui-todo-app + +# Terminal 2: Start webui dev server with --watch +npm run start:server -w examples/webui-todo-app +``` + +## Architecture + +### Server-side (`webui serve`) + +The `webui` CLI serves the app with the `--plugin=fast` flag, which enables FAST-aware template processing: + +1. Scans `./src` for declarative HTML templates (`.html` files wrapped in `` or containing `