close
Skip to content

chore: add webui-todo-app example with declarative FAST HTML and webui prerendering#7362

Draft
janechu wants to merge 3 commits intomainfrom
users/janechu/integration-with-webui
Draft

chore: add webui-todo-app example with declarative FAST HTML and webui prerendering#7362
janechu wants to merge 3 commits intomainfrom
users/janechu/integration-with-webui

Conversation

@janechu
Copy link
Copy Markdown
Collaborator

@janechu janechu commented Apr 1, 2026

Summary

Adds a new examples/webui-todo-app that fulfills the integration-with-webui requirements:

  • Declarative syntax: Converts the todo-app to use @microsoft/fast-html declarative templates (<f-template>, <f-repeat>, {{}}/{} bindings) instead of imperative html tagged template literals
  • Prerendering via @microsoft/webui: An Express server uses build() at startup to compile the HTML template into a binary protocol, then render() on each request to inject prerendered todo items and component template definitions as raw HTML
  • Same functionality as todo-app: add todos, filter (all/active/completed), mark done, remove items

Architecture

Server-side (server.js)

  • build({ appDir: './src', plugin: 'fast' }) compiles src/index.html at startup
  • Per-request: render(protocol, { prerenderedItems, componentTemplates }) injects:
    • {{{prerenderedItems}}} — raw HTML of todo <li> items, visible before JS loads
    • {{{componentTemplates}}}<f-template> definitions for client-side hydration
  • Injects window.__INITIAL_STATE__ so the client hydrates with the same data

Template (src/index.html)

  • <todo-app defer-hydration> with <template shadowrootmode="open"> DSD — prerendered content shows immediately
  • {{{prerenderedItems}}} placeholder in the shadow DOM <ul> for webui to fill
  • {{{componentTemplates}}} placeholder for <f-template> injection after the element

Client (src/main.ts)

  • RenderableFASTElement mixin with templateOptions: "defer-and-hydrate"
  • TemplateElement.define({ name: 'f-template' }) registers the template processor
  • TodoList.provide(document, new DefaultTodoList(window.__INITIAL_STATE__)) seeds state

Declarative <f-template> bindings (single-brace {}, client-only)

<f-repeat value="{item in todos.filtered}">
  <li class="todo">
    <input type="checkbox" :checked="{item.done}" />
    <span class="description">{item.description}</span>
    <button @click="{$c.parent.todos.remove(item)}" aria-label="Remove item">&times;</button>
  </li>
</f-repeat>

…ndering

Adds a new example in examples/webui-todo-app that:
- Converts the todo-app to use declarative FAST HTML syntax (f-template,
  f-repeat, {{}}/{} bindings) via @microsoft/fast-html
- Prerenders the DOM content using @microsoft/webui (build + render)
- The Express server calls build() at startup to compile the HTML template
  into a binary protocol, then render() on each request to inject
  prerendered todo items and component templates as raw HTML
- Client-side hydration uses RenderableFASTElement and TemplateElement
  from @microsoft/fast-html, seeded with window.__INITIAL_STATE__

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
@janechu janechu changed the title Add webui-todo-app example with declarative FAST HTML and webui prerendering chore: add webui-todo-app example with declarative FAST HTML and webui prerendering Apr 1, 2026
janechu and others added 2 commits April 2, 2026 13:39
Co-authored-by: Copilot Autofix powered by AI <62310815+github-advanced-security[bot]@users.noreply.github.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants