@microsoft/fast-test-harness 0.3.0 → 0.4.0-fast-element-v3-rc-20260615

package/README.md

@@ -128,17 +128,17 @@ setTheme(lightTheme);
 </html>
 ```
 
-**`entry-client.ts`** imports the harness SSR entry (which defines the `<f-template>` element) and registers components for DSD hydration using `defineAsync`:
+**`entry-client.ts`** imports the harness SSR entry (which enables hydration) and registers components. Component definition modules should use `template: declarativeTemplate()`; this automatically defines FAST's internal `<f-template>` publisher.
 
 ```ts
 import "@microsoft/fast-test-harness/ssr/entry-client.js";
+import { declarativeTemplate } from "@microsoft/fast-element/declarative.js";
 
-import { RenderableFASTElement } from "@microsoft/fast-html";
 import { MyButton, definition } from "../../src/button/index.js";
 
-RenderableFASTElement(MyButton).defineAsync({
+MyButton.define({
     name: definition.name,
-    templateOptions: "defer-and-hydrate",
+    template: declarativeTemplate(),
 });
 ```
 
@@ -240,6 +240,10 @@ Serve options:
 
 CLI flags take precedence over environment variables.
 
+`generate-templates` preserves browser-valid `<template>` wrappers and strips
+static wrappers even when the opening or closing tag includes ASCII whitespace
+before `>`.
+
 | Environment variable | Default | Description |
 | -------------------- | ------- | ----------- |
 | `PORT` | `3278` | Server port (overridden by `--port`) |
@@ -249,7 +253,7 @@ CLI flags take precedence over environment variables.
 
 ## SSR renderer
 
-**`createSSRRenderer(options)`** scans for component build artifacts and returns a `{ render }` object compatible with the server's `entry-server.ts` contract. It uses the `@microsoft/fast-build` WASM module to render f-templates into declarative shadow DOM.
+**`createSSRRenderer(options)`** scans for component build artifacts and returns a `{ render }` object compatible with the server's `entry-server.ts` contract. It uses the `@microsoft/fast-build` WASM module to parse f-templates and render them into declarative shadow DOM, including wrapper tags whose opening or closing `>` is preceded by ASCII whitespace.
 
 | Option | Type | Description |
 |--------|------|-------------|
@@ -267,6 +271,7 @@ CLI flags take precedence over environment variables.
 | `@microsoft/fast-test-harness/build/*.js` | `installDomShim`, `generateStylesheets`, `generateFTemplates`, `generateWebuiTemplates`, `definitionAsyncResolver`, `shadowOptionsToAttributes`, `ShadowOptionsResolver` |
 | `@microsoft/fast-test-harness/fixtures/*.js` | `CSRFixture`, `SSRFixture`, `toHaveCustomState`, extended `test` and `expect` |
 | `@microsoft/fast-test-harness/ssr/render.js` | `createSSRRenderer`, `renderTemplate`, `buildEntryHtml`, `buildState` |
+| `@microsoft/fast-test-harness/ssr/entry-client.js` | Enables FAST Element hydration for SSR pages |
 | `@microsoft/fast-test-harness/server.mjs` | `startServer` |
 | `@microsoft/fast-test-harness/playwright.config.mjs` | Shared Playwright configuration |
 | `@microsoft/fast-test-harness/vite.config.mjs` | Shared Vite configuration |

package/dist/dts/build/generate-stylesheets.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"generate-stylesheets.d.ts","sourceRoot":"","sources":["../../../src/build/generate-stylesheets.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAQH,MAAM,WAAW,0BAA0B;IACvC;;OAEG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IAEb;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB;;;;;OAKG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB;;;;;;;;;;;;;;;OAeG;IACH,MAAM,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,KAAK,MAAM,GAAG,OAAO,CAAC,MAAM,CAAC,CAAC;CACxE;AAiBD,wBAAsB,mBAAmB,CACrC,OAAO,GAAE,0BAA+B,GACzC,OAAO,CAAC,IAAI,CAAC,CAuDf"}
+{"version":3,"file":"generate-stylesheets.d.ts","sourceRoot":"","sources":["../../../src/build/generate-stylesheets.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAQH,MAAM,WAAW,0BAA0B;IACvC;;OAEG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IAEb;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB;;;;;OAKG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB;;;;;;;;;;;;;;;OAeG;IACH,MAAM,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,KAAK,MAAM,GAAG,OAAO,CAAC,MAAM,CAAC,CAAC;CACxE;AAiBD,wBAAsB,mBAAmB,CACrC,OAAO,GAAE,0BAA+B,GACzC,OAAO,CAAC,IAAI,CAAC,CAwDf"}

package/dist/dts/build/generate-templates.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"generate-templates.d.ts","sourceRoot":"","sources":["../../../src/build/generate-templates.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AA8BH,MAAM,WAAW,yBAAyB;IACtC;;OAEG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IAEb;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB;;;;;OAKG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB;;;;OAIG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACH,MAAM,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,KAAK,MAAM,GAAG,OAAO,CAAC,MAAM,CAAC,CAAC;IAEtE;;;;;;;;;;OAUG;IACH,oBAAoB,CAAC,EAAE,qBAAqB,GAAG,IAAI,CAAC;CACvD;AAED;;;;GAIG;AACH,MAAM,MAAM,qBAAqB,GAAG,CAChC,cAAc,EAAE,MAAM,KACrB,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,SAAS,GAAG,OAAO,CAAC,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,SAAS,CAAC,CAAC;AAExF;;;;;;;;;;GAUG;AACH,wBAAsB,uBAAuB,CACzC,cAAc,EAAE,MAAM,GACvB,OAAO,CAAC,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,SAAS,CAAC,CAY9C;AAED,MAAM,WAAW,YAAY;IACzB,IAAI,EAAE,MAAM,GAAG,mBAAmB,CAAC;IACnC,SAAS,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;CACtC;AAED,UAAU,OAAO;IACb,WAAW,EAAE;QAAE,IAAI,EAAE,MAAM,CAAA;KAAE,CAAC;IAC9B,OAAO,CAAC,EAAE,GAAG,CAAC;IACd,WAAW,CAAC,EAAE;QACV,QAAQ,EAAE,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,GAAG,CAAC;KACrC,CAAC;CACL;AAmFD;;;GAGG;AACH,wBAAgB,eAAe,CAC3B,YAAY,EAAE,YAAY,EAC1B,aAAa,EAAE,MAAM,GACtB,MAAM,GAAG,IAAI,CA4Hf;AAED;;;GAGG;AACH,wBAAgB,yBAAyB,CACrC,aAAa,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,SAAS,GACnD,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAmBxB;AAED,wBAAsB,kBAAkB,CACpC,OAAO,GAAE,yBAA8B,GACxC,OAAO,CAAC,IAAI,CAAC,CAgFf"}
+{"version":3,"file":"generate-templates.d.ts","sourceRoot":"","sources":["../../../src/build/generate-templates.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AAgCH,MAAM,WAAW,yBAAyB;IACtC;;OAEG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IAEb;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB;;;;;OAKG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB;;;;OAIG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACH,MAAM,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,KAAK,MAAM,GAAG,OAAO,CAAC,MAAM,CAAC,CAAC;IAEtE;;;;;;;;;;OAUG;IACH,oBAAoB,CAAC,EAAE,qBAAqB,GAAG,IAAI,CAAC;CACvD;AAED;;;;GAIG;AACH,MAAM,MAAM,qBAAqB,GAAG,CAChC,cAAc,EAAE,MAAM,KACrB,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,SAAS,GAAG,OAAO,CAAC,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,SAAS,CAAC,CAAC;AAExF;;;;;;;;;;GAUG;AACH,wBAAsB,uBAAuB,CACzC,cAAc,EAAE,MAAM,GACvB,OAAO,CAAC,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,SAAS,CAAC,CAY9C;AAED,MAAM,WAAW,YAAY;IACzB,IAAI,EAAE,MAAM,GAAG,mBAAmB,CAAC;IACnC,SAAS,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;CACtC;AAED,UAAU,OAAO;IACb,WAAW,EAAE;QAAE,IAAI,EAAE,MAAM,CAAA;KAAE,CAAC;IAC9B,OAAO,CAAC,EAAE,GAAG,CAAC;IACd,WAAW,CAAC,EAAE;QACV,QAAQ,EAAE,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,GAAG,CAAC;KACrC,CAAC;CACL;AAmFD;;;GAGG;AACH,wBAAgB,eAAe,CAC3B,YAAY,EAAE,YAAY,EAC1B,aAAa,EAAE,MAAM,GACtB,MAAM,GAAG,IAAI,CA4Hf;AAED;;;GAGG;AACH,wBAAgB,yBAAyB,CACrC,aAAa,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,SAAS,GACnD,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAmBxB;AAED,wBAAsB,kBAAkB,CACpC,OAAO,GAAE,yBAA8B,GACxC,OAAO,CAAC,IAAI,CAAC,CAgFf"}

package/dist/dts/build/generate-webui-templates.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"generate-webui-templates.d.ts","sourceRoot":"","sources":["../../../src/build/generate-webui-templates.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;GAkBG;AAQH,OAAO,EAGH,KAAK,qBAAqB,EAG7B,MAAM,yBAAyB,CAAC;AAQjC,MAAM,WAAW,6BAA6B;IAC1C;;OAEG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IAEb;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB;;;;;OAKG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB;;;;OAIG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACH,MAAM,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,KAAK,MAAM,GAAG,OAAO,CAAC,MAAM,CAAC,CAAC;IAEtE;;;;;;;;;;OAUG;IACH,oBAAoB,CAAC,EAAE,qBAAqB,GAAG,IAAI,CAAC;CACvD;AA4CD,wBAAsB,sBAAsB,CACxC,OAAO,GAAE,6BAAkC,GAC5C,OAAO,CAAC,IAAI,CAAC,CA6Ef"}
+{"version":3,"file":"generate-webui-templates.d.ts","sourceRoot":"","sources":["../../../src/build/generate-webui-templates.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;GAkBG;AAWH,OAAO,EAGH,KAAK,qBAAqB,EAG7B,MAAM,yBAAyB,CAAC;AAQjC,MAAM,WAAW,6BAA6B;IAC1C;;OAEG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IAEb;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB;;;;;OAKG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB;;;;OAIG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACH,MAAM,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,KAAK,MAAM,GAAG,OAAO,CAAC,MAAM,CAAC,CAAC;IAEtE;;;;;;;;;;OAUG;IACH,oBAAoB,CAAC,EAAE,qBAAqB,GAAG,IAAI,CAAC;CACvD;AA4CD,wBAAsB,sBAAsB,CACxC,OAAO,GAAE,6BAAkC,GAC5C,OAAO,CAAC,IAAI,CAAC,CA6Ef"}

package/dist/esm/build/generate-stylesheets.js

@@ -41,8 +41,9 @@ export async function generateStylesheets(options = {}) {
     for await (const jsFile of glob(pattern, { cwd: distDir })) {
         const jsFilePath = path.resolve(distDir, jsFile);
         const baseName = path.basename(jsFile, ".js") + ".css";
+        const relativeDir = path.relative(distDir, path.dirname(jsFilePath));
         const cssFilePath = outDir
-            ? path.resolve(outDir, baseName)
+            ? path.resolve(outDir, relativeDir, baseName)
             : path.resolve(path.dirname(jsFilePath), baseName);
         try {
             const mod = await import(pathToFileURL(jsFilePath).href);

package/dist/esm/build/generate-templates.js

@@ -17,9 +17,11 @@ import { glob, mkdir, writeFile } from "node:fs/promises";
 import path from "node:path";
 import { pathToFileURL } from "node:url";
 import { styleText } from "node:util";
-import { attributeDirectivePrefix, clientSideCloseExpression, clientSideOpenExpression, closeExpression, eventArgAccessor, openExpression, } from "@microsoft/fast-html/syntax.js";
+import { attributeDirectivePrefix, clientSideCloseExpression, clientSideOpenExpression, closeExpression, eventArgAccessor, openExpression, } from "@microsoft/fast-element/declarative-utilities.js";
 import { installDomShim } from "./dom-shim.js";
 const stylesMarker = `${openExpression}styles${closeExpression}`;
+const templateOpenTagPattern = /<template(?:\s[^>]*)?\s*\/?>/i;
+const templateWrapperTagPattern = /<template(?:\s[^>]*)?\s*\/?>|<\/template\s*>/gi;
 function wrapClientExpression(expression) {
     return `${clientSideOpenExpression}${expression}${clientSideCloseExpression}`;
 }
@@ -136,7 +138,7 @@ export function convertTemplate(viewTemplate, componentName) {
     const factoryEntries = Object.entries(factories);
     if (factoryEntries.length === 0) {
         // No factories — pure static template.
-        const content = html.replace(/<\/?template[^>]*>/g, "").trim();
+        const content = html.replace(templateWrapperTagPattern, "").trim();
         return `<f-template name="${componentName}" shadowrootmode="open"><template>${stylesMarker}${content}</template></f-template>\n`;
     }
     // Derive the binding marker prefix from the first factory key.
@@ -212,15 +214,15 @@ export function convertTemplate(viewTemplate, componentName) {
         return wrapDefaultExpression(evalStr);
     });
     let fInner = fContent.trim();
-    if (!/<template[^>]*>/.test(fInner)) {
+    if (!templateOpenTagPattern.test(fInner)) {
         fInner = `<template>${fInner}</template>`;
     }
     // Inject the {{styles}} marker immediately after the opening <template> tag
     // so the test harness can substitute it with a <link rel="stylesheet"> at
     // render time. Harness fallback auto-injects if the marker is missing, but
     // emitting it explicitly keeps generated output consistent with hand-authored
-    // f-templates.
-    fInner = fInner.replace(/(<template[^>]*>)/, `$1${stylesMarker}`);
+    // f-templates, including browser-valid template tags with whitespace.
+    fInner = fInner.replace(templateOpenTagPattern, match => `${match}${stylesMarker}`);
     return `<f-template name="${componentName}" shadowrootmode="open">\n${fInner}\n</f-template>\n`;
 }
 /**

package/dist/esm/build/generate-webui-templates.js

@@ -21,7 +21,7 @@ import { glob, mkdir, writeFile } from "node:fs/promises";
 import path from "node:path";
 import { pathToFileURL } from "node:url";
 import { styleText } from "node:util";
-import { closeExpression, openExpression } from "@microsoft/fast-html/syntax.js";
+import { closeExpression, openExpression, } from "@microsoft/fast-element/declarative-utilities.js";
 import { installDomShim } from "./dom-shim.js";
 import { convertTemplate, definitionAsyncResolver, shadowOptionsToAttributes, } from "./generate-templates.js";
 const stylesMarker = `${openExpression}styles${closeExpression}`;

package/dist/esm/ssr/entry-client.js

@@ -1,2 +1,2 @@
-import { TemplateElement } from "@microsoft/fast-html";
-TemplateElement.define({ name: "f-template" });
+import { enableHydration } from "@microsoft/fast-element/hydration.js";
+enableHydration();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@microsoft/fast-test-harness",
-  "version": "0.3.0",
+  "version": "0.4.0-fast-element-v3-rc-20260615",
   "author": {
     "name": "Microsoft",
     "url": "https://discord.gg/FcSNfg4"
@@ -71,25 +71,23 @@
     "*.d.ts"
   ],
   "devDependencies": {
-    "@microsoft/fast-element": "^2.10.4",
-    "@microsoft/fast-build": "^0.7.0",
-    "@microsoft/fast-html": "^1.0.0-alpha.53"
+    "@microsoft/fast-build": "0.8.0-fast-element-v3-rc-20260615",
+    "@microsoft/fast-element": "3.0.0-rc.2"
   },
   "dependencies": {
     "cheerio": "1.2.0"
   },
   "peerDependencies": {
-    "@microsoft/fast-element": "^2.10.4 || ^3.0.0",
-    "@microsoft/fast-build": "^0.7.0",
-    "@microsoft/fast-html": ">=1.0.0-alpha.53 <1.0.0",
+    "@microsoft/fast-build": "0.8.0-fast-element-v3-rc-20260615",
+    "@microsoft/fast-element": "3.0.0-rc.2",
     "@playwright/test": ">=1.40.0",
     "vite": ">=7.0.0"
   },
   "peerDependenciesMeta": {
-    "@microsoft/fast-element": {
+    "@microsoft/fast-build": {
       "optional": true
     },
-    "@microsoft/fast-html": {
+    "@microsoft/fast-element": {
       "optional": true
     }
   },

package/vite.config.mjs

@@ -27,7 +27,7 @@ export default defineConfig({
         sourcemap: true,
     },
     optimizeDeps: {
-        exclude: ["@microsoft/fast-element", "@microsoft/fast-html"],
+        exclude: ["@microsoft/fast-element"],
     },
     preview: {
         port: PORT,