@microsoft/fast-test-harness 0.1.0

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

@@ -0,0 +1,74 @@
+import assert from "node:assert/strict";
+import { mkdir, mkdtemp, readFile, rm, writeFile } from "node:fs/promises";
+import { tmpdir } from "node:os";
+import { join } from "node:path";
+import { test } from "node:test";
+import { generateStylesheets } from "@microsoft/fast-test-harness/build/generate-stylesheets.js";
+test.describe("generateStylesheets", () => {
+    let tempDir;
+    test.beforeEach(async () => {
+        tempDir = await mkdtemp(join(tmpdir(), "fast-styles-"));
+    });
+    test.afterEach(async () => {
+        await rm(tempDir, { recursive: true, force: true });
+    });
+    test("should extract CSS from a styles module", async () => {
+        const distDir = join(tempDir, "dist");
+        await mkdir(distDir, { recursive: true });
+        // Write a fake styles module that exports an ElementStyles-like object.
+        await writeFile(join(distDir, "button.styles.js"), `export const styles = { styles: [":host { display: block; }", "span { color: red; }"] };`);
+        await generateStylesheets({ cwd: tempDir });
+        const css = await readFile(join(distDir, "button.styles.css"), "utf8");
+        assert.ok(css.includes(":host { display: block; }"));
+        assert.ok(css.includes("span { color: red; }"));
+    });
+    test("should write to outDir when specified", async () => {
+        const distDir = join(tempDir, "dist");
+        const outDir = join(tempDir, "out");
+        await mkdir(distDir, { recursive: true });
+        await writeFile(join(distDir, "card.styles.js"), `export const styles = { styles: [".card { padding: 8px; }"] };`);
+        await generateStylesheets({ cwd: tempDir, outDir: "out" });
+        const css = await readFile(join(outDir, "card.styles.css"), "utf8");
+        assert.ok(css.includes(".card { padding: 8px; }"));
+    });
+    test("should apply a format function", async () => {
+        const distDir = join(tempDir, "dist");
+        await mkdir(distDir, { recursive: true });
+        await writeFile(join(distDir, "link.styles.js"), `export const styles = { styles: ["a { color: blue; }"] };`);
+        await generateStylesheets({
+            cwd: tempDir,
+            format: css => `/* formatted */\n${css}`,
+        });
+        const css = await readFile(join(distDir, "link.styles.css"), "utf8");
+        assert.ok(css.startsWith("/* formatted */"));
+    });
+    test("should flatten nested styles arrays", async () => {
+        const distDir = join(tempDir, "dist");
+        await mkdir(distDir, { recursive: true });
+        await writeFile(join(distDir, "nested.styles.js"), `export const styles = {
+                styles: [
+                    { styles: [":host { display: flex; }", "div { margin: 0; }"] },
+                    "span { font-size: 14px; }"
+                ]
+            };`);
+        await generateStylesheets({ cwd: tempDir });
+        const css = await readFile(join(distDir, "nested.styles.css"), "utf8");
+        assert.ok(css.includes(":host { display: flex; }"));
+        assert.ok(css.includes("div { margin: 0; }"));
+        assert.ok(css.includes("span { font-size: 14px; }"));
+    });
+    test("should skip modules without a styles export", async () => {
+        const distDir = join(tempDir, "dist");
+        await mkdir(distDir, { recursive: true });
+        await writeFile(join(distDir, "empty.styles.js"), `export const template = "<div></div>";`);
+        await generateStylesheets({ cwd: tempDir });
+        // Should not create a CSS file
+        try {
+            await readFile(join(distDir, "empty.styles.css"), "utf8");
+            assert.fail("Should not have created a CSS file");
+        }
+        catch (err) {
+            assert.strictEqual(err.code, "ENOENT");
+        }
+    });
+});

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

@@ -0,0 +1,243 @@
+/**
+ * F-template generation — converts compiled FAST Element ViewTemplate
+ * JS modules into declarative `<f-template>` HTML files.
+ *
+ * This reverse-engineers FAST Element's internal binding marker format
+ * back into human-readable f-template syntax (`f-ref`, `f-slotted`,
+ * `@event`, `?bool`, `:prop`, `{{expr}}`).
+ *
+ * Usage as a module:
+ * ```ts
+ * import { generateFTemplates } from "@microsoft/fast-test-harness/build/generate-templates.js";
+ *
+ * await generateFTemplates({ cwd: process.cwd(), tagPrefix: "fluent" });
+ * ```
+ */
+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 { installDomShim } from "./dom-shim.js";
+const stylesMarker = `${openExpression}styles${closeExpression}`;
+function wrapClientExpression(expression) {
+    return `${clientSideOpenExpression}${expression}${clientSideCloseExpression}`;
+}
+function wrapDefaultExpression(expression) {
+    return `${openExpression}${expression}${closeExpression}`;
+}
+function attributeDirective(name, value) {
+    return `${attributeDirectivePrefix}${name}="${wrapClientExpression(value)}"`;
+}
+/**
+ * Extract a readable binding expression from a factory's evaluate function.
+ */
+function extractBindingExpression(factory) {
+    if (!factory?.dataBinding?.evaluate) {
+        return "";
+    }
+    const fnStr = factory.dataBinding.evaluate.toString();
+    const arrowMatch = fnStr.match(/=>\s*(.+)$/s);
+    if (arrowMatch) {
+        let expr = arrowMatch[1].trim();
+        expr = expr.replace(/\bx\./g, "").replace(/c\.event\b/g, eventArgAccessor);
+        return expr;
+    }
+    return fnStr;
+}
+/**
+ * Extract the `filter elements(...)` suffix for a slotted or children
+ * directive.
+ */
+function extractSlottedFilter(factory) {
+    const filter = factory.options?.filter;
+    if (!filter) {
+        return "";
+    }
+    if (filter.name === "selectElements") {
+        return " filter elements()";
+    }
+    let selector = null;
+    try {
+        filter({
+            nodeType: 1,
+            matches(s) {
+                selector = s;
+                return true;
+            },
+        });
+    }
+    catch {
+        // If extraction fails, fall back to no-arg elements().
+    }
+    if (selector) {
+        return ` filter elements(${selector})`;
+    }
+    return " filter elements()";
+}
+/**
+ * Check if a factory is a static sub-template interpolation. If so,
+ * evaluate it and return the inlined HTML.
+ */
+function tryInlineStaticTemplate(factory) {
+    if (!factory?.dataBinding?.evaluate) {
+        return null;
+    }
+    const fnStr = factory.dataBinding.evaluate.toString();
+    if (/^\(\)\s*=>/.test(fnStr)) {
+        try {
+            const result = factory.dataBinding.evaluate({}, {});
+            if (result && typeof result === "object" && typeof result.html === "string") {
+                return result.html;
+            }
+            if (typeof result === "string") {
+                return result;
+            }
+        }
+        catch {
+            // Fall through to normal binding handling.
+        }
+    }
+    return null;
+}
+/**
+ * Convert a ViewTemplate's html string and factories into an
+ * f-template HTML string.
+ */
+export function convertTemplate(viewTemplate, componentName) {
+    const { factories } = viewTemplate;
+    const html = typeof viewTemplate.html === "string"
+        ? viewTemplate.html
+        : viewTemplate.html.innerHTML;
+    const factoryEntries = Object.entries(factories);
+    if (factoryEntries.length === 0) {
+        // No factories — pure static template.
+        const content = html.replace(/<\/?template[^>]*>/g, "").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.
+    // Factory IDs follow the pattern `${marker}-${counter}` (e.g. "fast-a1b2c3-1"),
+    // where `marker` is generated once per session in fast-element's markup.ts.
+    const prefix = factoryEntries[0][0].replace(/-\d+$/, "");
+    const factoryMap = new Map();
+    for (const [id, factory] of factoryEntries) {
+        factoryMap.set(id, factory);
+    }
+    let fContent = html;
+    // Attribute-position markers → f-ref / f-slotted / f-children
+    const attrBindingRe = new RegExp(`${prefix}-\\d+="${prefix}\\{(${prefix}-\\d+)\\}${prefix}"`, "g");
+    fContent = fContent.replace(attrBindingRe, (match, factoryId) => {
+        const factory = factoryMap.get(factoryId);
+        if (!factory) {
+            return match;
+        }
+        if (factory.constructor.name === "RefDirective") {
+            const prop = typeof factory.options === "string"
+                ? factory.options
+                : factory.options?.property;
+            return attributeDirective("ref", prop);
+        }
+        if (factory.constructor.name === "SlottedDirective") {
+            const prop = typeof factory.options === "string"
+                ? factory.options
+                : factory.options?.property;
+            const filterStr = extractSlottedFilter(factory);
+            return attributeDirective("slotted", `${prop}${filterStr}`);
+        }
+        if (factory.constructor.name === "ChildrenDirective") {
+            const prop = typeof factory.options === "string"
+                ? factory.options
+                : factory.options?.property;
+            const filterStr = extractSlottedFilter(factory);
+            return attributeDirective("children", `${prop}${filterStr}`);
+        }
+        return match;
+    });
+    // Event bindings → @event="{handler(e)}"
+    const eventBindingRe = new RegExp(`(@[a-z]+)="${prefix}\\{(${prefix}-\\d+)\\}${prefix}"`, "g");
+    fContent = fContent.replace(eventBindingRe, (match, aspect, factoryId) => {
+        const factory = factoryMap.get(factoryId);
+        if (!factory) {
+            return match;
+        }
+        const evalStr = extractBindingExpression(factory);
+        return `${aspect}="${wrapClientExpression(evalStr)}"`;
+    });
+    // Boolean/property bindings → ?attr="{{expr}}"
+    const boolAttrBindingRe = new RegExp(`([?:][a-zA-Z-]+)="${prefix}\\{(${prefix}-\\d+)\\}${prefix}"`, "g");
+    fContent = fContent.replace(boolAttrBindingRe, (match, aspect, factoryId) => {
+        const factory = factoryMap.get(factoryId);
+        if (!factory) {
+            return match;
+        }
+        const evalStr = extractBindingExpression(factory);
+        return `${aspect}="${wrapDefaultExpression(evalStr)}"`;
+    });
+    // Attribute-value and content bindings → attr="{{propName}}" or inline HTML
+    const valBindingRe = new RegExp(`${prefix}\\{(${prefix}-\\d+)\\}${prefix}`, "g");
+    fContent = fContent.replace(valBindingRe, (match, factoryId) => {
+        const factory = factoryMap.get(factoryId);
+        if (!factory) {
+            return match;
+        }
+        const inlined = tryInlineStaticTemplate(factory);
+        if (inlined !== null) {
+            return inlined;
+        }
+        const evalStr = extractBindingExpression(factory);
+        return wrapDefaultExpression(evalStr);
+    });
+    let fInner = fContent.trim();
+    if (!/<template[^>]*>/.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 (see MAI core components).
+    fInner = fInner.replace(/(<template[^>]*>)/, `$1${stylesMarker}`);
+    return `<f-template name="${componentName}" shadowrootmode="open">\n${fInner}\n</f-template>\n`;
+}
+export async function generateFTemplates(options = {}) {
+    installDomShim();
+    const cwd = options.cwd ?? process.cwd();
+    const distDir = path.resolve(cwd, options.distDir ?? "dist");
+    const outDir = options.outDir ? path.resolve(cwd, options.outDir) : null;
+    const pattern = options.pattern ?? "**/*.template.js";
+    const tagPrefix = options.tagPrefix ?? "fast";
+    for await (const jsFile of glob(pattern, { cwd: distDir })) {
+        const jsFilePath = path.resolve(distDir, jsFile);
+        const componentBaseName = path.basename(jsFile, ".template.js");
+        const componentName = `${tagPrefix}-${componentBaseName}`;
+        try {
+            const mod = await import(pathToFileURL(jsFilePath).href);
+            const template = mod.template ?? mod.default;
+            if (!template?.html) {
+                continue;
+            }
+            const fTemplateHtml = convertTemplate(template, componentName);
+            if (!fTemplateHtml) {
+                continue;
+            }
+            let html = fTemplateHtml;
+            if (options.format) {
+                try {
+                    html = await options.format(html, jsFilePath);
+                }
+                catch (formatError) {
+                    console.warn(styleText(["yellow", "bold"], "⚠"), `Format failed for ${componentName}:`, formatError.message);
+                }
+            }
+            const fTemplatePath = outDir
+                ? path.resolve(outDir, `${componentBaseName}.template.html`)
+                : path.resolve(path.dirname(jsFilePath), `${componentBaseName}.template.html`);
+            await mkdir(path.dirname(fTemplatePath), { recursive: true });
+            await writeFile(fTemplatePath, html, "utf8");
+            console.log(styleText(["green", "bold"], "✔"), "f-template:", styleText("dim", path.relative(cwd, jsFilePath)), "→", styleText("bold", path.relative(cwd, fTemplatePath)));
+        }
+        catch (error) {
+            console.error(styleText(["red", "bold"], "✘"), `Failed: ${path.relative(cwd, jsFilePath)}`, error.message);
+        }
+    }
+}

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

@@ -0,0 +1,231 @@
+import assert from "node:assert/strict";
+import { mkdir, mkdtemp, readFile, rm, writeFile } from "node:fs/promises";
+import { tmpdir } from "node:os";
+import { join } from "node:path";
+import { test } from "node:test";
+import { installDomShim } from "@microsoft/fast-test-harness/build/dom-shim.js";
+import { convertTemplate, generateFTemplates, } from "@microsoft/fast-test-harness/build/generate-templates.js";
+import { generateWebuiTemplates } from "@microsoft/fast-test-harness/build/generate-webui-templates.js";
+test.describe("convertTemplate", async () => {
+    // Install the DOM shim before any tests — convertTemplate needs fast-html
+    // syntax constants which require a DOM environment, and FAST Element needs
+    // basic DOM globals to initialize.
+    installDomShim();
+    // Dynamic import after the DOM shim is installed so FAST Element can
+    // access `document`, `CSSStyleSheet`, etc.
+    const { html, ref, slotted, children } = await import("@microsoft/fast-element");
+    test("should wrap a static template in f-template tags", () => {
+        const template = html `<template><div>hello</div></template>`;
+        const result = convertTemplate(template, "fast-test");
+        assert.ok(result);
+        assert.ok(result.includes('<f-template name="fast-test"'));
+        assert.ok(result.includes("shadowrootmode"));
+        assert.ok(result.includes("<div>hello</div>"));
+        assert.ok(result.includes("{{styles}}"));
+    });
+    test("should return null-safe for empty factories", () => {
+        const template = html `<template><span></span></template>`;
+        const result = convertTemplate(template, "fast-empty");
+        assert.ok(result);
+        assert.ok(result.includes("<span></span>"));
+    });
+    test("should inject {{styles}} after the opening template tag", () => {
+        const template = html `<template><p>content</p></template>`;
+        const result = convertTemplate(template, "fast-styles");
+        assert.ok(result);
+        const templateIdx = result.indexOf("<template>");
+        const stylesIdx = result.indexOf("{{styles}}");
+        assert.ok(stylesIdx > templateIdx, "{{styles}} should appear after <template>");
+    });
+    test("should convert RefDirective factories to f-ref attributes", () => {
+        const template = html `<template><div ${ref("myRef")}></div></template>`;
+        const result = convertTemplate(template, "fast-ref");
+        assert.ok(result);
+        assert.ok(result.includes('f-ref="{myRef}"'), `got: ${result}`);
+    });
+    test("should convert SlottedDirective factories to f-slotted attributes", () => {
+        const template = html `<template><slot ${slotted("slottedItems")}></slot></template>`;
+        const result = convertTemplate(template, "fast-slotted");
+        assert.ok(result);
+        assert.ok(result.includes("f-slotted="), `got: ${result}`);
+        assert.ok(result.includes("slottedItems"), `got: ${result}`);
+    });
+    test("should convert value bindings to {{expression}}", () => {
+        const template = html `<template><span>${x => x.label}</span></template>`;
+        const result = convertTemplate(template, "fast-binding");
+        assert.ok(result);
+        assert.ok(result.includes("{{label}}"), `got: ${result}`);
+    });
+    test("should convert boolean bindings to ?attr expressions", () => {
+        const template = html `<template><button ?disabled="${x => x.disabled}"></button></template>`;
+        const result = convertTemplate(template, "fast-bool");
+        assert.ok(result);
+        assert.ok(result.includes('?disabled="{{disabled}}"'), `got: ${result}`);
+    });
+    test("should inline static sub-templates", () => {
+        const template = html `<template><div>${() => "<svg>icon</svg>"}</div></template>`;
+        const result = convertTemplate(template, "fast-inline");
+        assert.ok(result);
+        assert.ok(result.includes("<svg>icon</svg>"), `got: ${result}`);
+    });
+    test("should convert ChildrenDirective factories to f-children attributes", () => {
+        const template = html `<template><div ${children("childItems")}></div></template>`;
+        const result = convertTemplate(template, "fast-children");
+        assert.ok(result);
+        assert.ok(result.includes("f-children="), `got: ${result}`);
+        assert.ok(result.includes("childItems"), `got: ${result}`);
+    });
+    test("should convert event bindings to @event expressions", () => {
+        const template = html `<template><button @click="${(x, c) => x.handleClick(c.event)}"></button></template>`;
+        const result = convertTemplate(template, "fast-event");
+        assert.ok(result);
+        assert.ok(result.includes("@click="), `got: ${result}`);
+        assert.ok(result.includes("handleClick"), `got: ${result}`);
+    });
+    test("should convert property bindings to :prop expressions", () => {
+        const template = html `<template><input :value="${x => x.currentValue}" /></template>`;
+        const result = convertTemplate(template, "fast-prop");
+        assert.ok(result);
+        assert.ok(result.includes(":value="), `got: ${result}`);
+        assert.ok(result.includes("currentValue"), `got: ${result}`);
+    });
+    test("should handle multiple factories in a single template", () => {
+        const template = html `<template><span>${x => x.label}</span><button ?disabled="${x => x.disabled}"></button></template>`;
+        const result = convertTemplate(template, "fast-multi");
+        assert.ok(result);
+        assert.ok(result.includes("{{label}}"), `got: ${result}`);
+        assert.ok(result.includes('?disabled="{{disabled}}"'), `got: ${result}`);
+    });
+    test("should inline a static sub-template ViewTemplate", () => {
+        const icon = html `<svg>icon</svg>`;
+        const template = html `<template><div>${() => icon}</div></template>`;
+        const result = convertTemplate(template, "fast-sub");
+        assert.ok(result);
+        assert.ok(result.includes("<svg>icon</svg>"), `got: ${result}`);
+    });
+});
+test.describe("generateFTemplates", () => {
+    let tempDir;
+    test.beforeEach(async () => {
+        tempDir = await mkdtemp(join(tmpdir(), "fast-ftemplates-"));
+    });
+    test.afterEach(async () => {
+        await rm(tempDir, { recursive: true, force: true });
+    });
+    test("should generate an f-template HTML file from a template module", async () => {
+        const distDir = join(tempDir, "dist");
+        await mkdir(distDir, { recursive: true });
+        await writeFile(join(distDir, "badge.template.js"), `export const template = {
+                html: "<template><slot></slot></template>",
+                factories: {}
+            };`);
+        await generateFTemplates({ cwd: tempDir, tagPrefix: "mai" });
+        const html = await readFile(join(distDir, "badge.template.html"), "utf8");
+        assert.ok(html.includes('<f-template name="mai-badge"'));
+        assert.ok(html.includes("<slot></slot>"));
+        assert.ok(html.includes("{{styles}}"));
+    });
+    test("should write to outDir when specified", async () => {
+        const distDir = join(tempDir, "dist");
+        await mkdir(distDir, { recursive: true });
+        await writeFile(join(distDir, "card.template.js"), `export const template = {
+                html: "<template><div>card</div></template>",
+                factories: {}
+            };`);
+        await generateFTemplates({ cwd: tempDir, outDir: "out", tagPrefix: "fast" });
+        const html = await readFile(join(tempDir, "out", "card.template.html"), "utf8");
+        assert.ok(html.includes('<f-template name="fast-card"'));
+    });
+    test("should skip modules without a template export", async () => {
+        const distDir = join(tempDir, "dist");
+        await mkdir(distDir, { recursive: true });
+        await writeFile(join(distDir, "empty.template.js"), `export const styles = ":host {}";`);
+        await generateFTemplates({ cwd: tempDir, tagPrefix: "fast" });
+        try {
+            await readFile(join(distDir, "empty.template.html"), "utf8");
+            assert.fail("Should not have created an HTML file");
+        }
+        catch (err) {
+            assert.strictEqual(err.code, "ENOENT");
+        }
+    });
+    test("should apply a format function", async () => {
+        const distDir = join(tempDir, "dist");
+        await mkdir(distDir, { recursive: true });
+        await writeFile(join(distDir, "text.template.js"), `export const template = {
+                html: "<template><span>text</span></template>",
+                factories: {}
+            };`);
+        await generateFTemplates({
+            cwd: tempDir,
+            tagPrefix: "fast",
+            format: html => `<!-- formatted -->\n${html}`,
+        });
+        const html = await readFile(join(distDir, "text.template.html"), "utf8");
+        assert.ok(html.startsWith("<!-- formatted -->"));
+    });
+});
+test.describe("generateWebuiTemplates", () => {
+    let tempDir;
+    test.beforeEach(async () => {
+        tempDir = await mkdtemp(join(tmpdir(), "fast-webui-"));
+    });
+    test.afterEach(async () => {
+        await rm(tempDir, { recursive: true, force: true });
+    });
+    test("should generate a webui template without f-template wrapper", async () => {
+        const distDir = join(tempDir, "dist");
+        await mkdir(distDir, { recursive: true });
+        await writeFile(join(distDir, "badge.template.js"), `export const template = {
+                html: "<template><slot></slot></template>",
+                factories: {}
+            };`);
+        await generateWebuiTemplates({ cwd: tempDir, tagPrefix: "mai" });
+        const html = await readFile(join(distDir, "badge.template-webui.html"), "utf8");
+        assert.ok(html.includes('<template shadowrootmode="open">'));
+        assert.ok(html.includes("<slot></slot>"));
+        assert.ok(!html.includes("<f-template"), "should not have f-template wrapper");
+        assert.ok(!html.includes("{{styles}}"), "should not have styles marker");
+    });
+    test("should write to outDir when specified", async () => {
+        const distDir = join(tempDir, "dist");
+        await mkdir(distDir, { recursive: true });
+        await writeFile(join(distDir, "card.template.js"), `export const template = {
+                html: "<template><div>card</div></template>",
+                factories: {}
+            };`);
+        await generateWebuiTemplates({
+            cwd: tempDir,
+            outDir: "out",
+            tagPrefix: "fast",
+        });
+        const html = await readFile(join(tempDir, "out", "card.template-webui.html"), "utf8");
+        assert.ok(html.includes('<template shadowrootmode="open">'));
+    });
+    test("should add shadowrootdelegatesfocus from definition-async", async () => {
+        const distDir = join(tempDir, "dist");
+        await mkdir(distDir, { recursive: true });
+        await writeFile(join(distDir, "input.template.js"), `export const template = {
+                html: "<template><input /></template>",
+                factories: {}
+            };`);
+        await writeFile(join(distDir, "input.definition-async.js"), `export const definition = {
+                name: "fast-input",
+                shadowOptions: { delegatesFocus: true },
+            };`);
+        await generateWebuiTemplates({ cwd: tempDir, tagPrefix: "fast" });
+        const html = await readFile(join(distDir, "input.template-webui.html"), "utf8");
+        assert.ok(html.includes("shadowrootdelegatesfocus"), `should include delegatesFocus, got: ${html}`);
+    });
+    test("should not add shadowrootdelegatesfocus when absent", async () => {
+        const distDir = join(tempDir, "dist");
+        await mkdir(distDir, { recursive: true });
+        await writeFile(join(distDir, "div.template.js"), `export const template = {
+                html: "<template><div>hello</div></template>",
+                factories: {}
+            };`);
+        await generateWebuiTemplates({ cwd: tempDir, tagPrefix: "fast" });
+        const html = await readFile(join(distDir, "div.template-webui.html"), "utf8");
+        assert.ok(!html.includes("shadowrootdelegatesfocus"));
+    });
+});

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

@@ -0,0 +1,121 @@
+/**
+ * WebUI template generation — converts compiled FAST Element ViewTemplate
+ * JS modules into declarative shadow DOM `<template>` HTML files suitable
+ * for WebUI consumers.
+ *
+ * Webui templates preserve all bindings from the f-template but use a
+ * different wrapper:
+ * - `<template shadowrootmode="open">` instead of `<f-template name="...">`
+ * - No `{{styles}}` placeholder (styles are linked externally)
+ * - Shadow options (e.g. `shadowrootdelegatesfocus`) propagated from the
+ *   companion `*.definition-async.js` module
+ *
+ * Usage as a module:
+ * ```ts
+ * import { generateWebuiTemplates } from "@microsoft/fast-test-harness/build/generate-webui-templates.js";
+ *
+ * await generateWebuiTemplates({ cwd: process.cwd(), tagPrefix: "mai" });
+ * ```
+ */
+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 { installDomShim } from "./dom-shim.js";
+import { convertTemplate } from "./generate-templates.js";
+const stylesMarker = `${openExpression}styles${closeExpression}`;
+const escapedStylesMarker = new RegExp(stylesMarker.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"), "g");
+/**
+ * Try to load shadow options from a companion `*.definition-async.js`
+ * module next to the template module. Returns an object with template
+ * attribute strings to add (e.g. `shadowrootdelegatesfocus`).
+ */
+async function loadShadowAttributes(templateJsPath) {
+    const dir = path.dirname(templateJsPath);
+    const base = path.basename(templateJsPath, ".template.js");
+    const defAsyncPath = path.resolve(dir, `${base}.definition-async.js`);
+    const attrs = {};
+    try {
+        const mod = await import(pathToFileURL(defAsyncPath).href);
+        const definition = mod.definition ?? mod.default;
+        if (definition?.shadowOptions?.delegatesFocus) {
+            attrs.shadowrootdelegatesfocus = "";
+        }
+    }
+    catch {
+        // No definition-async module or it failed to load — skip.
+    }
+    return attrs;
+}
+/**
+ * Transform an f-template string into a webui template by replacing the
+ * `<f-template>` wrapper with `<template shadowrootmode="open">` and
+ * removing the `{{styles}}` placeholder.
+ */
+function fTemplateToWebui(fTemplateHtml, shadowAttrs) {
+    // Extract the inner <template>...</template> from within <f-template>
+    // using string operations to avoid polynomial backtracking in regex.
+    const fOpenStart = fTemplateHtml.indexOf("<f-template");
+    const fCloseTag = "</f-template>";
+    const fCloseStart = fTemplateHtml.lastIndexOf(fCloseTag);
+    if (fOpenStart === -1 || fCloseStart === -1) {
+        return fTemplateHtml;
+    }
+    const fOpenEnd = fTemplateHtml.indexOf(">", fOpenStart);
+    if (fOpenEnd === -1) {
+        return fTemplateHtml;
+    }
+    let inner = fTemplateHtml.slice(fOpenEnd + 1, fCloseStart).trim();
+    // Remove {{styles}} placeholder.
+    inner = inner.replace(escapedStylesMarker, "");
+    // Replace the opening <template> tag with one that includes shadow attributes.
+    const extraAttrs = Object.entries(shadowAttrs)
+        .map(([k, v]) => (v ? ` ${k}="${v}"` : ` ${k}`))
+        .join("");
+    inner = inner.replace(/^<template[^>]*>/, `<template shadowrootmode="open"${extraAttrs}>`);
+    return inner;
+}
+export async function generateWebuiTemplates(options = {}) {
+    installDomShim();
+    const cwd = options.cwd ?? process.cwd();
+    const distDir = path.resolve(cwd, options.distDir ?? "dist");
+    const outDir = options.outDir ? path.resolve(cwd, options.outDir) : null;
+    const pattern = options.pattern ?? "**/*.template.js";
+    const tagPrefix = options.tagPrefix ?? "fast";
+    for await (const jsFile of glob(pattern, { cwd: distDir })) {
+        const jsFilePath = path.resolve(distDir, jsFile);
+        const componentBaseName = path.basename(jsFile, ".template.js");
+        const componentName = `${tagPrefix}-${componentBaseName}`;
+        try {
+            const mod = await import(pathToFileURL(jsFilePath).href);
+            const template = mod.template ?? mod.default;
+            if (!template?.html) {
+                continue;
+            }
+            const fTemplateHtml = convertTemplate(template, componentName);
+            if (!fTemplateHtml) {
+                continue;
+            }
+            const shadowAttrs = await loadShadowAttributes(jsFilePath);
+            let html = fTemplateToWebui(fTemplateHtml, shadowAttrs);
+            if (options.format) {
+                try {
+                    html = await options.format(html, jsFilePath);
+                }
+                catch (formatError) {
+                    console.warn(styleText(["yellow", "bold"], "⚠"), `Format failed for ${componentName}:`, formatError.message);
+                }
+            }
+            const webuiPath = outDir
+                ? path.resolve(outDir, `${componentBaseName}.template-webui.html`)
+                : path.resolve(path.dirname(jsFilePath), `${componentBaseName}.template-webui.html`);
+            await mkdir(path.dirname(webuiPath), { recursive: true });
+            await writeFile(webuiPath, html, "utf8");
+            console.log(styleText(["green", "bold"], "✔"), "webui:", styleText("dim", path.relative(cwd, jsFilePath)), "→", styleText("bold", path.relative(cwd, webuiPath)));
+        }
+        catch (error) {
+            console.error(styleText(["red", "bold"], "✘"), `Failed: ${path.relative(cwd, jsFilePath)}`, error.message);
+        }
+    }
+}