feat: add build utilities and SSR renderer to fast-test-harness by radium-v · Pull Request #7469 · microsoft/fast

radium-v · 2026-04-21T16:30:35Z

Pull Request

📖 Description

Prepares @microsoft/fast-test-harness for publishing by adding comprehensive test coverage, build utilities, and accurate documentation.

Build utilities: Added dom-shim, generate-stylesheets, generate-templates, and generate-webui-templates modules for extracting CSS and converting FAST Element ViewTemplate modules into <f-template> and WebUI-compatible <template shadowrootmode="open"> HTML files.
SSR renderer: Rewrote createSSRRenderer to use the @microsoft/fast-build WASM module for full expression evaluation and nested component support. Supports both monolithic (packageName) and per-component (components) package layouts.
CLI subcommands: fast-test-harness now supports serve (default), generate-templates, generate-stylesheets, and generate-webui-templates subcommands.
Server rewrite: Replaced Express with a plain node:http server, added in-memory fixture caching, concurrent request deduplication, and a Vite plugin for resolving bare CSS specifiers in SSR fixtures.
Test coverage: Added 96 Node.js unit tests and 129 Playwright E2E tests covering all modules — convertTemplate tests use real FAST Element html/ref/slotted/children directives.
Documentation: Updated README and DESIGN.md to reflect actual config values, CLI subcommands, exports, and added Mermaid diagrams for the CSR/SSR routing flow and SSR fixture generation sequence.

📑 Test Plan

All 96 Node.js unit tests and 129 Playwright tests (across Chromium, Firefox, and WebKit) pass:

npm run test         # runs test:node && test:playwright

Key test areas:

convertTemplate — exercises real FAST Element html, ref, slotted, children, event/property/boolean bindings
generateWebuiTemplates — temp directory file I/O, format functions, shadowrootdelegatesfocus propagation
createSSRRenderer — WASM rendering, monolithic vs per-component modes, theme stylesheet injection
CSR/SSR fixtures — setTemplate, updateTemplate, applyTokens, addStyleTag buffering, custom state assertions

✅ Checklist

General

I have included a change request file using $ npm run change
I have added tests for my changes.
I have tested my changes.
I have updated the project documentation to reflect my changes.
I have read the CONTRIBUTING documentation and followed the standards for this project.

⏭ Next Steps

Beachball configuration
Package publish

Copilot

Pull request overview

Prepares @microsoft/fast-test-harness for publishing by adding build-time artifact generators, rewriting SSR rendering around @microsoft/fast-build WASM, and modernizing the dev/test server + shared configs.

Changes:

Added build utilities (dom-shim, template + stylesheet generators, WebUI template generation) and corresponding Node unit tests.
Rewrote SSR rendering via createSSRRenderer() using @microsoft/fast-build WASM, plus updated docs/tests and removed legacy SSR asset helpers.
Replaced Express with a node:http server wrapping Vite middleware, plus updated Playwright/Vite configs and CLI subcommands.

Reviewed changes

Copilot reviewed 34 out of 37 changed files in this pull request and generated 9 comments.

Show a summary per file

File	Description
packages/fast-test-harness/vite.config.mjs	Updates default port and adds esbuild/optimizeDeps settings for FAST usage.
packages/fast-test-harness/vite.config.d.ts	Adds TS module declaration for the shared Vite config entrypoint.
packages/fast-test-harness/tsconfig.json	Enables decorators/importHelpers for package TS compilation.
packages/fast-test-harness/test/vite.config.mjs	Re-exports the package’s shared Vite config for self-test harness.
packages/fast-test-harness/test/ssr.html	Adds SSR HTML shell with placeholders for server injection.
packages/fast-test-harness/test/src/main.ts	Adds a self-test FASTElement with attrs/styles/template.
packages/fast-test-harness/test/src/entry-server.ts	Wires `createSSRRenderer()` into the server-side entry contract.
packages/fast-test-harness/test/src/entry-client.ts	Wires SSR client entry + async definition for hydration.
packages/fast-test-harness/test/public/test-theme.css	Adds a test theme stylesheet for SSR preload/link injection.
packages/fast-test-harness/test/index.html	Adds CSR self-test page entry.
packages/fast-test-harness/start.mjs	Expands CLI into subcommands (serve + generators) using `parseArgs`.
packages/fast-test-harness/src/ssr/render.ts	Adds WASM-backed SSR renderer and supporting helpers (state building, template styling).
packages/fast-test-harness/src/ssr/render.test.ts	Adds Node tests for SSR renderer helpers + renderer factory.
packages/fast-test-harness/src/ssr/assets.ts	Removes legacy SSR asset resolution helpers.
packages/fast-test-harness/src/index.ts	Updates public API surface to export new build utilities + SSR renderer types.
packages/fast-test-harness/src/fixtures/ssr-fixture.pw.spec.ts	Adds Playwright E2E coverage for SSR fixture behavior.
packages/fast-test-harness/src/fixtures/index.ts	Exports the `Fixtures` type for downstream typing.
packages/fast-test-harness/src/fixtures/csr-fixture.pw.spec.ts	Adds Playwright E2E coverage for CSR fixture behavior.
packages/fast-test-harness/src/build/generate-webui-templates.ts	Adds WebUI DSD template generation from compiled template modules.
packages/fast-test-harness/src/build/generate-webui-templates.test.ts	Adds Node tests for WebUI template generation behavior.
packages/fast-test-harness/src/build/generate-templates.ts	Adds f-template generation from compiled FAST `ViewTemplate` modules.
packages/fast-test-harness/src/build/generate-templates.test.ts	Adds Node tests for f-template generation + conversion logic.
packages/fast-test-harness/src/build/generate-stylesheets.ts	Adds stylesheet extraction from compiled FAST styles modules.
packages/fast-test-harness/src/build/generate-stylesheets.test.ts	Adds Node tests for stylesheet extraction + formatting behavior.
packages/fast-test-harness/src/build/dom-shim.ts	Adds a minimal DOM shim to enable FAST template/style evaluation in Node.
packages/fast-test-harness/src/build/dom-shim.test.ts	Adds Node tests validating DOM shim behavior and idempotence.
packages/fast-test-harness/server.mjs	Replaces Express with `node:http`, adds SSR fixture caching/dedup + CSS link resolving plugin.
packages/fast-test-harness/playwright.config.mjs	Updates Playwright config (baseURL/port, CI tuning, broader testMatch, webServer command).
packages/fast-test-harness/playwright.config.d.ts	Adds TS module declaration for shared Playwright config entrypoint.
packages/fast-test-harness/package.json	Makes package publishable, updates exports/scripts/files, adds deps/peers/engine constraints.
packages/fast-test-harness/README.md	Updates docs to reflect SSR renderer API, server changes, and CLI usage.
packages/fast-test-harness/DESIGN.md	Updates architecture/design docs and diagrams to match new SSR/server/build flow.
packages/fast-html/package.json	Adjusts published files entries and adds `./syntax.js` export used by harness generators.
package.json	Updates repo TypeScript version.
package-lock.json	Updates lockfile for dependency changes (TypeScript bump, cheerio, etc.).
change/@microsoft-fast-test-harness-c2765407-ced6-420a-b45d-af7f9a31c057.json	Beachball change entry for fast-test-harness feature work.
change/@microsoft-fast-html-3b1a0ebf-21d7-47fb-96ab-cd709b0ee939.json	Beachball change entry for fast-html export/files adjustments.

Copilot

Pull request overview

Copilot reviewed 34 out of 37 changed files in this pull request and generated 7 comments.

Copilot

Pull request overview

Copilot reviewed 34 out of 37 changed files in this pull request and generated 6 comments.

Copilot

Pull request overview

Copilot reviewed 34 out of 37 changed files in this pull request and generated 4 comments.

Comments suppressed due to low confidence (1)

packages/fast-test-harness/playwright.config.mjs:29

Playwright won’t discover tests under src/ unless testDir is set appropriately (FAST’s other Playwright configs typically set testDir: "."). With the current config, playwright test can end up running zero tests depending on Playwright defaults. Add testDir: "." (or testDir: "src") to ensure **/*.pw.spec.ts picks up the co-located specs in src/fixtures/.

Copilot

Pull request overview

Copilot reviewed 37 out of 40 changed files in this pull request and generated 7 comments.

- Introduced a minimal DOM shim in `dom-shim.ts` to support FAST Element's `css` and `html` tagged templates in Node.js. - Added `generate-stylesheets.ts` for converting compiled FAST ElementStyles JS modules into plain CSS files. - Implemented `generate-templates.ts` to convert compiled FAST Element ViewTemplate JS modules into declarative `<f-template>` HTML files. - Updated `index.ts` to export new utilities and types for style and template generation. - Removed unused asset reading functions from `assets.ts` and refactored SSR rendering logic in `render.ts` to utilize the new generation utilities.

…neration

Co-authored-by: Copilot <copilot@github.com>

- Updated ViewTemplate interface to allow HTMLTemplateElement in addition to string for the html property. - Implemented comprehensive tests for generateWebuiTemplates, covering various scenarios including template generation without wrappers, output directory specification, and handling of modules without template exports. - Added CSR and SSR fixture tests to validate template rendering, attribute handling, and state management for custom elements. - Introduced SSR rendering tests to ensure correct HTML output and state extraction from attributes. - Enhanced render functions to support exporting for SSR and improved error handling for invalid JSON attributes. - Created entry client and server scripts for SSR, along with a basic TestWidget implementation for testing purposes. - Added HTML and CSS files for testing SSR functionality, including theme styles. - Updated TypeScript configuration to support experimental decorators and import helpers. Co-authored-by: Copilot <copilot@github.com>

Co-authored-by: Copilot <copilot@github.com>

…e extraction logic Co-authored-by: Copilot <copilot@github.com>

…logic Co-authored-by: Copilot <copilot@github.com>

Co-authored-by: Copilot <copilot@github.com>

# Pull Request ## 📖 Description Brings `releases/fast-element-v3` up to date with `main`. Cherry-picks every commit landed on `main` after PR #7477 was merged (the last v3↔main sync) and adds an adaptation commit so the changes work with the v3 architecture (where `@microsoft/fast-html` was merged into `@microsoft/fast-element` under `src/declarative/`). Cherry-picked (in chronological order): - #7479 — feat: change default attribute-name-strategy from none to camelCase - #7494 — chore(deps): bump liquidjs 10.25.6 → 10.25.7 - #7501 — chore: migrate TypeScript compilation to `typescript/native-preview` (`tsgo`) - #7502 — feat: allow `fast-build` rendering without state - #7503 — docs: per-package documentation reorg (DESIGN.md/README.md and `docs/architecture/*`) - #7504 — feat: propagate shadowroot attributes - #7505 — chore: bump packages after failed publish (`fast-build` → 0.5.0) - #7469 — feat: add build utilities and SSR renderer to `@microsoft/fast-test-harness` - #7506 — chore: prepare `@microsoft/fast-test-harness` package for publishing The "applying package updates" beachball commit (`aad6f5481`) was intentionally skipped — v3 maintains its own versioning track (`fast-element@3.0.0-rc.1`, `fast-test-harness@0.0.1`) and runs its own publish. Adaptation commit highlights: - Adds a new `./declarative-syntax.js` subpath export to `@microsoft/fast-element` so tooling consumers (e.g. `fast-test-harness` build utilities) can access declarative HTML syntax constants from fast-element directly. Mirrors the existing `./declarative-utilities.js` subpath. - Re-points `fast-test-harness/src/build/generate-templates.ts` and `generate-webui-templates.ts` from `@microsoft/fast-html/syntax.js` to the new subpath. - Replaces the removed `RenderableFASTElement(...).defineAsync({ templateOptions })` pattern with v3's `Element.define()` in test fixtures and the README example. - Drops `@microsoft/fast-html` from the harness Vite optimizer exclude list. - Excludes `*.spec.ts` from the fast-element TS build (the declarative `.spec.ts` files import `@playwright/test`, whose `.d.ts` files are incompatible with `tsgo`'s stricter parser; these specs are still type-checked when run via the declarative Playwright config). - Adapted hydration marker handling in `crates/microsoft-fast-build/src/node.rs` for #7502 (kept v3's `inject_count_marker` / `data-fe="N"` style while merging in main's `Option<&mut HydrationScope>` flow). - All `packages/fast-html/*` paths from cherry-picks were dropped (the package no longer exists on v3); related `change/@microsoft-fast-html-*.json` files were either converted to `@microsoft-fast-element-*.json` or dropped where they no longer apply. ## 📑 Test Plan Run from the monorepo root on this branch: - `npm run build` — all 6 packages build successfully (fast-build, fast-element, fast-router, fast-test-harness, fast-site, fast-todo-app-example). - `@microsoft/fast-element` — 1410 chromium playwright tests + 176 declarative chromium tests pass. - `@microsoft/fast-test-harness` — 96 node unit tests + 43 chromium playwright tests pass. - `npm run biome:check` — clean. - `npm run checkchange` — passes. ## ✅ Checklist ### General - [x] I have included a change request file using `$ npm run change` - [ ] I have added tests for my changes. - [x] I have tested my changes. - [x] I have updated the project documentation to reflect my changes. - [x] I have read the [CONTRIBUTING](https://github.com/microsoft/fast/blob/main/CONTRIBUTING.md) documentation and followed the [standards](https://github.com/microsoft/fast/blob/main/CODE_OF_CONDUCT.md#our-standards) for this project.

radium-v force-pushed the users/radium-v/test-harness-initial-features branch from 7e32a5c to 102e0ab Compare April 28, 2026 17:04

github-advanced-security AI found potential problems Apr 28, 2026

View reviewed changes

Comment thread packages/fast-test-harness/src/build/generate-webui-templates.ts Fixed

radium-v force-pushed the users/radium-v/test-harness-initial-features branch from 102e0ab to ad60e32 Compare April 29, 2026 18:02

github-advanced-security AI found potential problems Apr 29, 2026

View reviewed changes

Comment thread packages/fast-test-harness/src/build/generate-webui-templates.ts Fixed

radium-v force-pushed the users/radium-v/test-harness-initial-features branch from 72b507f to faa006d Compare April 29, 2026 21:28

radium-v marked this pull request as ready for review April 29, 2026 21:29

radium-v requested review from chrisdholt and janechu as code owners April 29, 2026 21:29

radium-v requested a review from Copilot April 29, 2026 21:33

Copilot started reviewing on behalf of radium-v April 29, 2026 21:34 View session

Copilot AI reviewed Apr 29, 2026

View reviewed changes

radium-v requested a review from Copilot April 29, 2026 22:05

Copilot started reviewing on behalf of radium-v April 29, 2026 22:05 View session

Copilot AI reviewed Apr 29, 2026

View reviewed changes

radium-v requested a review from Copilot April 29, 2026 23:42

Copilot started reviewing on behalf of radium-v April 29, 2026 23:43 View session

Copilot AI reviewed Apr 29, 2026

View reviewed changes

radium-v requested a review from Copilot April 30, 2026 15:39

Copilot started reviewing on behalf of radium-v April 30, 2026 15:46 View session

Copilot AI reviewed Apr 30, 2026

View reviewed changes

Comment thread packages/fast-test-harness/tsconfig.json Outdated

Comment thread packages/fast-test-harness/src/index.ts Outdated

Comment thread packages/fast-test-harness/src/build/generate-templates.ts Outdated

Comment thread packages/fast-test-harness/src/build/generate-stylesheets.ts Outdated

radium-v requested a review from Copilot April 30, 2026 17:43

Copilot AI reviewed Apr 30, 2026

View reviewed changes

janechu previously approved these changes Apr 30, 2026

View reviewed changes

Copilot started reviewing on behalf of radium-v April 30, 2026 18:29 View session

radium-v added 6 commits April 30, 2026 11:51

update file paths and add syntax export

1a2fe24

Change files

2c06c64

update vite configuration and add type definitions

af614ab

convert playwright config to mjs

8d98278

remove test export conditions

542692f

radium-v and others added 22 commits April 30, 2026 11:51

remove private flag

028d525

fix: escape special characters in styles marker regex for template ge…

03eeafb

…neration

fix webui template generation

e18cd34

Co-authored-by: Copilot <copilot@github.com>

add initial tests for DOM shim functionality

022e279

Co-authored-by: Copilot <copilot@github.com>

fix: enable experimental decorators in TypeScript compiler options

1d0f713

Co-authored-by: Copilot <copilot@github.com>

update typescript 5 to 5.5.4

8266a9c

feat: enhance documentation with detailed SSR flow and CLI commands

6a0c17b

Co-authored-by: Copilot <copilot@github.com>

Change files

9909950

refactor: update test structure to use 'test' API and improve templat…

cf0023c

…e extraction logic Co-authored-by: Copilot <copilot@github.com>

patch

fb4ff4d

rename playwright test command

a2eb4b3

fix: improve test concurrency for node tests in package.json

809a4e1

refactor: enhance test structure and improve path handling in server …

d482ace

…logic Co-authored-by: Copilot <copilot@github.com>

address PR feedback

0c780d5

Co-authored-by: Copilot <copilot@github.com>

address PR feedback

3b2fb33

address PR feedback

ef6696e

fix SSR test widget setup and harness stylesheet

d9430c2

remove importHelpers setting

f95298a

address PR feedback

bb32e17

Co-authored-by: Copilot <copilot@github.com>

update lockfile

18459f0

add verbose flags to lage commands

d9acdd2

radium-v dismissed janechu’s stale review via d9acdd2 April 30, 2026 18:55

radium-v force-pushed the users/radium-v/test-harness-initial-features branch from 6287f83 to d9acdd2 Compare April 30, 2026 18:55

radium-v requested a review from janechu April 30, 2026 18:58

janechu approved these changes Apr 30, 2026

View reviewed changes

radium-v merged commit f076f36 into main Apr 30, 2026
14 checks passed

radium-v deleted the users/radium-v/test-harness-initial-features branch April 30, 2026 20:35

janechu mentioned this pull request May 1, 2026

chore: update v3 release with main #7507

Merged

5 tasks

Conversation

radium-v commented Apr 21, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Pull Request

📖 Description

📑 Test Plan

✅ Checklist

General

⏭ Next Steps

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

radium-v commented Apr 21, 2026 •

edited

Loading