feat: add build utilities and SSR renderer to fast-test-harness#7469
Draft
feat: add build utilities and SSR renderer to fast-test-harness#7469
Conversation
- 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.
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
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
Add build-time utilities and a redesigned SSR renderer to
@microsoft/fast-test-harness.@microsoft/fast-test-harness:build/dom-shim.ts): Minimal DOM shim that allows FAST Element'scssandhtmltagged templates to execute in Node.js, enabling build-time extraction of styles and templates.build/generate-stylesheets.ts): Extracts compiled FASTElementStylesmodules into plain CSS files for SSR.build/generate-templates.ts): Reverse-engineers compiled FASTViewTemplatemodules back into declarative<f-template>HTML files for the WASM renderer.ssr/render.ts): Replaced the simplerenderTemplate/renderFixturehelpers with acreateSSRRenderer()factory that discovers component build artifacts and supports both multi-component packages (Fluent-style) and per-component packages (MAI-style).server.mjs): Replaced Express with a native Node.js HTTP server, removing theexpressdependency. Addedcheeriofor HTML manipulation during SSR fixture rendering.PORT, and updated server command to use thefast-test-harnessCLI.@microsoft/fast-html:./syntax.jsexport map entry.filesglob patterns.👩💻 Reviewer Notes
createSSRRenderer()factory inssr/render.tsis the main entry point for SSR testing. It requires@microsoft/fast-buildWASM and throws if it's not installed. Therender()method falls back to raw entry HTML only if WASM rendering of a specific fixture fails.ElementStyles.toString()andhtmltemplate compilation to work. It is not a general-purpose DOM emulation.@microsoft/fast-buildwas moved frompeerDependenciestodependenciesinfast-test-harnesssince the harness now relies on it directly for build utilities.📑 Test Plan
The test harness is currently a private package (
@microsoft/fast-test-harness) tested locally in downstream component packages. Verification should include running component tests in a consuming package (e.g., Fluent UI Web Components) to confirm the SSR rendering pipeline works end-to-end with the newcreateSSRRenderer()API.✅ Checklist
General
$ npm run change⏭ Next Steps
dom-shim,generate-stylesheets,generate-templates).createSSRRenderer()factory with sample component fixtures.@microsoft/fast-test-harnesspackage to npm.