@microsoft/fast-test-harness 0.2.0 → 0.3.1

package/README.md

@@ -253,7 +253,7 @@ CLI flags take precedence over environment variables.
 
 | Option | Type | Description |
 |--------|------|-------------|
-| `tagPrefix` | `string` | Tag name prefix for custom elements (e.g., `"fluent"`, `"mai"`) |
+| `tagPrefix` | `string` | Tag name prefix for custom elements (e.g., `"fluent"`, `"contoso"`) |
 | `packageName` | `string?` | Monolithic package name — scans subdirectories for component artifacts. Mutually exclusive with `components`. |
 | `components` | `ComponentRegistration[]?` | Explicit list of per-component packages. Mutually exclusive with `packageName`. |
 | `distDir` | `string?` | Artifact directory relative to the package root (default: `"dist/esm"`). Only used with `packageName`. |
@@ -266,7 +266,7 @@ CLI flags take precedence over environment variables.
 | `@microsoft/fast-test-harness` | `test`, `expect`, `CSRFixture`, `SSRFixture`, `toHaveCustomState`, `installDomShim`, `createSSRRenderer` |
 | `@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`, `parseDefaultValue` |
+| `@microsoft/fast-test-harness/ssr/render.js` | `createSSRRenderer`, `renderTemplate`, `buildEntryHtml`, `buildState` |
 | `@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-webui-templates.d.ts

@@ -14,7 +14,7 @@
  * ```ts
  * import { generateWebuiTemplates } from "@microsoft/fast-test-harness/build/generate-webui-templates.js";
  *
- * await generateWebuiTemplates({ cwd: process.cwd(), tagPrefix: "mai" });
+ * await generateWebuiTemplates({ cwd: process.cwd(), tagPrefix: "contoso" });
  * ```
  */
 import { type ShadowOptionsResolver } from "./generate-templates.js";

package/dist/dts/ssr/render.d.ts

@@ -21,10 +21,10 @@
  * flat exports.
  * ```ts
  * const { render } = createSSRRenderer({
- *     tagPrefix: "mai",
+ *     tagPrefix: "contoso",
  *     components: [
- *         { name: "button", packageName: "@mai-ui/button" },
- *         { name: "checkbox", packageName: "@mai-ui/checkbox" },
+ *         { name: "button", packageName: "@contoso/button" },
+ *         { name: "checkbox", packageName: "@contoso/checkbox" },
  *     ],
  * });
  * ```
@@ -37,25 +37,25 @@ export interface ComponentRegistration {
     name: string;
     /**
      * The npm package name for this component
-     * (e.g., "@mai-ui/button").
+     * (e.g., "@contoso/button").
      */
     packageName: string;
 }
 export interface SSRRendererOptions {
     /**
-     * Tag name prefix for custom elements (e.g., "fluent", "mai").
+     * Tag name prefix for custom elements (e.g., "fluent", "contoso").
      */
     tagPrefix: string;
     /**
      * The npm package name used to resolve component build artifacts
      * when all components live in subdirectories of a single package
-     * (Fluent-style). Mutually exclusive with `components`.
+     * (monolithic layout). Mutually exclusive with `components`.
      */
     packageName?: string;
     /**
-     * Explicit list of per-component packages (MAI-style). Each entry
-     * maps a component name to its npm package. Mutually exclusive
-     * with `packageName`.
+     * Explicit list of per-component packages. Each entry maps a
+     * component name to its npm package. Mutually exclusive with
+     * `packageName`.
      */
     components?: ComponentRegistration[];
     /**
@@ -82,11 +82,6 @@ export interface RenderResult {
     /** Preload link tags (empty string when using fast-build). */
     preloadLinks: string;
 }
-/**
- * Parse a JavaScript default value string from CEM into a JSON-safe value.
- * @internal
- */
-export declare function parseDefaultValue(raw: string): unknown;
 /**
  * Replace the `{{styles}}` placeholder in an f-template with a
  * stylesheet `<link>` tag. Falls back to injecting after the opening
@@ -117,9 +112,9 @@ export declare function buildState(queryObj: Record<string, string>): Record<str
  *
  * Supports two modes:
  * - **`packageName`**: Scans a monolithic package's dist directory for
- *   components in subdirectories (Fluent-style).
+ *   components in subdirectories (monolithic layout).
  * - **`components`**: Uses an explicit list of per-component packages
- *   with flat exports (MAI-style).
+ *   with flat exports.
  */
 export declare function createSSRRenderer(options: SSRRendererOptions): {
     render: (queryObj: Record<string, string>) => RenderResult;

package/dist/dts/ssr/render.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"render.d.ts","sourceRoot":"","sources":["../../../src/ssr/render.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AAOH,MAAM,WAAW,qBAAqB;IAClC;;;OAGG;IACH,IAAI,EAAE,MAAM,CAAC;IAEb;;;OAGG;IACH,WAAW,EAAE,MAAM,CAAC;CACvB;AAED,MAAM,WAAW,kBAAkB;IAC/B;;OAEG;IACH,SAAS,EAAE,MAAM,CAAC;IAElB;;;;OAIG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;;;OAIG;IACH,UAAU,CAAC,EAAE,qBAAqB,EAAE,CAAC;IAErC;;;;OAIG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB;;;;;;;OAOG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;CAC5B;AAED,MAAM,WAAW,YAAY;IACzB,qEAAqE;IACrE,QAAQ,EAAE,MAAM,CAAC;IACjB,mDAAmD;IACnD,OAAO,EAAE,MAAM,CAAC;IAChB,8DAA8D;IAC9D,YAAY,EAAE,MAAM,CAAC;CACxB;AA4CD;;;GAGG;AACH,wBAAgB,iBAAiB,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CA6BtD;AA0FD;;;;;GAKG;AACH,wBAAgB,cAAc,CAAC,WAAW,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,GAAG,MAAM,CAa1E;AAED;;;;;GAKG;AACH,wBAAgB,cAAc,CAAC,QAAQ,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,GAAG,MAAM,CAwCvE;AAED;;;;;;GAMG;AACH,wBAAgB,UAAU,CAAC,QAAQ,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAsBpF;AAED;;;;;;;;;;;GAWG;AACH,wBAAgB,iBAAiB,CAAC,OAAO,EAAE,kBAAkB,GAAG;IAC5D,MAAM,EAAE,CAAC,QAAQ,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,KAAK,YAAY,CAAC;CAC9D,CAkMA"}
+{"version":3,"file":"render.d.ts","sourceRoot":"","sources":["../../../src/ssr/render.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AAOH,MAAM,WAAW,qBAAqB;IAClC;;;OAGG;IACH,IAAI,EAAE,MAAM,CAAC;IAEb;;;OAGG;IACH,WAAW,EAAE,MAAM,CAAC;CACvB;AAED,MAAM,WAAW,kBAAkB;IAC/B;;OAEG;IACH,SAAS,EAAE,MAAM,CAAC;IAElB;;;;OAIG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;;;OAIG;IACH,UAAU,CAAC,EAAE,qBAAqB,EAAE,CAAC;IAErC;;;;OAIG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB;;;;;;;OAOG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;CAC5B;AAED,MAAM,WAAW,YAAY;IACzB,qEAAqE;IACrE,QAAQ,EAAE,MAAM,CAAC;IACjB,mDAAmD;IACnD,OAAO,EAAE,MAAM,CAAC;IAChB,8DAA8D;IAC9D,YAAY,EAAE,MAAM,CAAC;CACxB;AAqFD;;;;;GAKG;AACH,wBAAgB,cAAc,CAAC,WAAW,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,GAAG,MAAM,CAa1E;AAED;;;;;GAKG;AACH,wBAAgB,cAAc,CAAC,QAAQ,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,GAAG,MAAM,CAwCvE;AAED;;;;;;GAMG;AACH,wBAAgB,UAAU,CAAC,QAAQ,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAsBpF;AAED;;;;;;;;;;;GAWG;AACH,wBAAgB,iBAAiB,CAAC,OAAO,EAAE,kBAAkB,GAAG;IAC5D,MAAM,EAAE,CAAC,QAAQ,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,KAAK,YAAY,CAAC;CAC9D,CA6KA"}

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

@@ -219,7 +219,7 @@ export function convertTemplate(viewTemplate, componentName) {
     // 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 (see MAI core components).
+    // f-templates.
     fInner = fInner.replace(/(<template[^>]*>)/, `$1${stylesMarker}`);
     return `<f-template name="${componentName}" shadowrootmode="open">\n${fInner}\n</f-template>\n`;
 }

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

@@ -14,7 +14,7 @@
  * ```ts
  * import { generateWebuiTemplates } from "@microsoft/fast-test-harness/build/generate-webui-templates.js";
  *
- * await generateWebuiTemplates({ cwd: process.cwd(), tagPrefix: "mai" });
+ * await generateWebuiTemplates({ cwd: process.cwd(), tagPrefix: "contoso" });
  * ```
  */
 import { glob, mkdir, writeFile } from "node:fs/promises";

package/dist/esm/ssr/render.js

@@ -21,10 +21,10 @@
  * flat exports.
  * ```ts
  * const { render } = createSSRRenderer({
- *     tagPrefix: "mai",
+ *     tagPrefix: "contoso",
  *     components: [
- *         { name: "button", packageName: "@mai-ui/button" },
- *         { name: "checkbox", packageName: "@mai-ui/checkbox" },
+ *         { name: "button", packageName: "@contoso/button" },
+ *         { name: "checkbox", packageName: "@contoso/checkbox" },
  *     ],
  * });
  * ```
@@ -71,75 +71,6 @@ function resolvePackageRoot(packageName) {
 function toServerUrl(absolutePath, packageRoot) {
     return `/${relative(packageRoot, absolutePath).replace(/\\/g, "/")}`;
 }
-/**
- * Parse a JavaScript default value string from CEM into a JSON-safe value.
- * @internal
- */
-export function parseDefaultValue(raw) {
-    const trimmed = raw.trim();
-    if (trimmed === "" || trimmed === "undefined" || trimmed === "null") {
-        return "";
-    }
-    if (trimmed === "true") {
-        return true;
-    }
-    if (trimmed === "false") {
-        return false;
-    }
-    if (trimmed.startsWith("'") || trimmed.startsWith('"')) {
-        return trimmed.slice(1, -1);
-    }
-    const num = Number(trimmed);
-    if (!Number.isNaN(num)) {
-        return num;
-    }
-    try {
-        return JSON.parse(trimmed);
-    }
-    catch {
-        return "";
-    }
-}
-/**
- * Load a Custom Elements Manifest and extract default state for
- * each custom element declaration. Returns a map of tag names to
- * their default property values.
- */
-function loadDefaultStateFromCEM(packageName, tagPrefix) {
-    const cemPath = resolveSpecifier(`${packageName}/custom-elements.json`);
-    if (!cemPath) {
-        return new Map();
-    }
-    try {
-        const cem = JSON.parse(readFileSync(cemPath, "utf8"));
-        const result = new Map();
-        for (const mod of cem.modules ?? []) {
-            for (const decl of mod.declarations ?? []) {
-                if (!decl.customElement) {
-                    continue;
-                }
-                const tagName = decl.tagName ?? `${tagPrefix}-${decl.name?.toLowerCase()}`;
-                const state = {};
-                for (const member of decl.members ?? []) {
-                    if (member.kind !== "field" || member.privacy !== "public") {
-                        continue;
-                    }
-                    state[member.name] =
-                        member.default != null
-                            ? parseDefaultValue(String(member.default))
-                            : "";
-                }
-                if (Object.keys(state).length > 0) {
-                    result.set(tagName, state);
-                }
-            }
-        }
-        return result;
-    }
-    catch {
-        return new Map();
-    }
-}
 /**
  * Load artifacts for a component from a monolithic package
  * (e.g., `@fluentui/web-components/button/template.html`).
@@ -155,7 +86,7 @@ function loadMonolithicComponent(packageName, componentDir, packageRoot) {
 }
 /**
  * Load artifacts for a component from a per-component package
- * (e.g., `@mai-ui/button/template.html`).
+ * (e.g., `@contoso/button/template.html`).
  */
 function loadPerPackageComponent(reg) {
     const fTemplatePath = resolveSpecifier(`${reg.packageName}/template.html`);
@@ -263,9 +194,9 @@ export function buildState(queryObj) {
  *
  * Supports two modes:
  * - **`packageName`**: Scans a monolithic package's dist directory for
- *   components in subdirectories (Fluent-style).
+ *   components in subdirectories (monolithic layout).
  * - **`components`**: Uses an explicit list of per-component packages
- *   with flat exports (MAI-style).
+ *   with flat exports.
  */
 export function createSSRRenderer(options) {
     const { tagPrefix } = options;
@@ -284,13 +215,13 @@ export function createSSRRenderer(options) {
     // Collect component artifacts from either mode.
     const artifacts = [];
     if (options.components) {
-        // Per-component packages (MAI-style).
+        // Per-component packages
         for (const reg of options.components) {
             artifacts.push(loadPerPackageComponent(reg));
         }
     }
     else if (options.packageName) {
-        // Monolithic package (Fluent-style).
+        // Monolithic package
         const packageRoot = resolvePackageRoot(options.packageName);
         const distDir = join(packageRoot, options.distDir ?? "dist/esm");
         const pattern = "**/*.template.html";
@@ -306,29 +237,13 @@ export function createSSRRenderer(options) {
             artifacts.push(loadMonolithicComponent(options.packageName, componentDir, packageRoot));
         }
     }
-    // Populate maps and collect default state from CEM.
-    const defaultStateByTag = new Map();
+    // Populate template and style maps from collected artifacts.
     for (const art of artifacts) {
         if (art.fTemplate) {
             fTemplatesByName.set(art.componentName, art.fTemplate);
         }
         styleUrlsByName.set(art.componentName, art.stylesUrl);
     }
-    // Load CEM defaults per-package (each package may contain multiple elements).
-    if (options.components) {
-        for (const reg of options.components) {
-            const cemDefaults = loadDefaultStateFromCEM(reg.packageName, tagPrefix);
-            for (const [tag, state] of cemDefaults) {
-                defaultStateByTag.set(tag, state);
-            }
-        }
-    }
-    else if (options.packageName) {
-        const cemDefaults = loadDefaultStateFromCEM(options.packageName, tagPrefix);
-        for (const [tag, state] of cemDefaults) {
-            defaultStateByTag.set(tag, state);
-        }
-    }
     // Inject styles into f-templates, then parse into the WASM
     // templates map (tag-name → inner template content).
     const templatesMap = {};
@@ -370,11 +285,7 @@ export function createSSRRenderer(options) {
     return {
         render(queryObj = {}) {
             const entryHtml = buildEntryHtml(queryObj);
-            const requestState = buildState(queryObj);
-            // Merge CEM default state (base) with request state (overrides).
-            const tagName = String(queryObj.tagName ?? "");
-            const defaults = defaultStateByTag.get(tagName) ?? {};
-            const state = { ...defaults, ...requestState };
+            const state = buildState(queryObj);
             let fixture = "";
             if (entryHtml) {
                 try {
@@ -391,7 +302,7 @@ export function createSSRRenderer(options) {
                         const openTagRe = new RegExp(`(<${nestedTag}(?=[\\s>/])[^>]*>)(?!\\s*<template[\\s>])`, "g");
                         fixture = fixture.replace(openTagRe, (_, open) => {
                             // Render this element in isolation.
-                            const solo = wasm.render_with_templates(`${open}</${nestedTag}>`, templatesJson, JSON.stringify(defaultStateByTag.get(nestedTag) ?? {}), "camelCase");
+                            const solo = wasm.render_with_templates(`${open}</${nestedTag}>`, templatesJson, "{}", "camelCase");
                             // Extract the DSD that was injected.
                             const dsdStart = solo.indexOf("<template shadowrootmode");
                             const dsdEnd = solo.lastIndexOf("</template>");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@microsoft/fast-test-harness",
-  "version": "0.2.0",
+  "version": "0.3.1",
   "author": {
     "name": "Microsoft",
     "url": "https://discord.gg/FcSNfg4"
@@ -73,7 +73,7 @@
   "devDependencies": {
     "@microsoft/fast-element": "^2.10.4",
     "@microsoft/fast-build": "^0.7.0",
-    "@microsoft/fast-html": "^1.0.0-alpha.53"
+    "@microsoft/fast-html": "^1.0.0-alpha.54"
   },
   "dependencies": {
     "cheerio": "1.2.0"
@@ -81,7 +81,7 @@
   "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-html": ">=1.0.0-alpha.54 <1.0.0",
     "@playwright/test": ">=1.40.0",
     "vite": ">=7.0.0"
   },