feat: add webui-todo-app example with declarative FAST HTML and webui prerendering#7424
Draft
feat: add webui-todo-app example with declarative FAST HTML and webui prerendering#7424
Conversation
… 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>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Pull Request
📖 Description
Adds a new
examples/webui-todo-appthat demonstrates FAST declarative HTML templates with@microsoft/webuiprerendering and client-side hydration. This replaces and supersedes the approach from #7362.Key features:
.htmland.cssfiles instead of imperativehtml/csstagged template literalswebui serve --plugin=fastcompiles declarative templates and renders initial state into static HTML with Declarative Shadow DOM@microsoft/fast-htmlTemplateElementpicks up prerendered DOM and attaches FAST reactive bindings viaRenderableFASTElementwithdefineAsyncanddefer-and-hydrate@microsoft/webuireleaseArchitecture follows the
todo-fastexample from the webui repo.🎫 Issues
📑 Test Plan
npm run buildsucceeds for all packages including the new examplenpm run biome:checkpasses with no errors✅ Checklist
General
$ npm run change⏭ Next Steps