@microsoft/fast-element 3.0.0-rc.1 → 3.0.0-rc.2

package/scripts/measure-sizes.js

@@ -1,219 +0,0 @@
-import { readFileSync, writeFileSync } from "node:fs";
-import path from "node:path";
-import { fileURLToPath } from "node:url";
-import { brotliCompressSync, gzipSync } from "node:zlib";
-import { build } from "esbuild";
-
-const __filename = fileURLToPath(import.meta.url);
-const __dirname = path.dirname(__filename);
-const packageRoot = path.resolve(__dirname, "..");
-const rootImportPath = "@microsoft/fast-element";
-const fastElementImportPath = "@microsoft/fast-element/fast-element.js";
-const updatesImportPath = "@microsoft/fast-element/updates.js";
-const observableImportPath = "@microsoft/fast-element/observable.js";
-const attrImportPath = "@microsoft/fast-element/attr.js";
-const childrenImportPath = "@microsoft/fast-element/children.js";
-const refImportPath = "@microsoft/fast-element/ref.js";
-const slottedImportPath = "@microsoft/fast-element/slotted.js";
-const volatileImportPath = "@microsoft/fast-element/volatile.js";
-const whenImportPath = "@microsoft/fast-element/when.js";
-const htmlImportPath = "@microsoft/fast-element/html.js";
-const repeatImportPath = "@microsoft/fast-element/repeat.js";
-const cssImportPath = "@microsoft/fast-element/css.js";
-const declarativeImportPath = "@microsoft/fast-element/declarative.js";
-const hydrationImportPath = "@microsoft/fast-element/hydration.js";
-const arrayObserverImportPath = "@microsoft/fast-element/array-observer.js";
-const observerMapImportPath = "@microsoft/fast-element/observer-map.js";
-const attributeMapImportPath = "@microsoft/fast-element/attribute-map.js";
-
-const namedExports = [{ name: "FASTElement", importPath: fastElementImportPath }];
-
-const measuredExports = [
-    {
-        name: "Updates",
-        export: "Updates",
-        importPath: updatesImportPath,
-    },
-    {
-        name: "Observable",
-        export: "Observable",
-        importPath: observableImportPath,
-    },
-    {
-        name: "observable",
-        export: "observable",
-        importPath: observableImportPath,
-    },
-    {
-        name: "attr",
-        export: "attr",
-        importPath: attrImportPath,
-    },
-    {
-        name: "children",
-        export: "children",
-        importPath: childrenImportPath,
-    },
-    {
-        name: "ref",
-        export: "ref",
-        importPath: refImportPath,
-    },
-    {
-        name: "slotted",
-        export: "slotted",
-        importPath: slottedImportPath,
-    },
-    {
-        name: "volatile",
-        export: "volatile",
-        importPath: volatileImportPath,
-    },
-    {
-        name: "when",
-        export: "when",
-        importPath: whenImportPath,
-    },
-    {
-        name: "html",
-        export: "html",
-        importPath: htmlImportPath,
-    },
-    {
-        name: "repeat",
-        export: "repeat",
-        importPath: repeatImportPath,
-    },
-    {
-        name: "css",
-        export: "css",
-        importPath: cssImportPath,
-    },
-    {
-        name: "enableHydration",
-        export: "enableHydration",
-        importPath: hydrationImportPath,
-    },
-    {
-        name: "declarativeTemplate",
-        export: "declarativeTemplate",
-        importPath: declarativeImportPath,
-    },
-    {
-        name: "ArrayObserver",
-        export: "ArrayObserver",
-        importPath: arrayObserverImportPath,
-    },
-    {
-        name: "observerMap",
-        export: "observerMap",
-        importPath: observerMapImportPath,
-    },
-    {
-        name: "attributeMap",
-        export: "attributeMap",
-        importPath: attributeMapImportPath,
-    },
-];
-
-function formatExportLabel(name, importPath) {
-    return `${name} (${importPath})`;
-}
-
-function formatBytes(bytes) {
-    if (bytes < 1024) return `${bytes} B`;
-    return `${(bytes / 1024).toFixed(2)} KB`;
-}
-
-function measureBuffer(buffer) {
-    const gzip = gzipSync(buffer);
-    const brotli = brotliCompressSync(buffer);
-    return {
-        minified: buffer.length,
-        gzip: gzip.length,
-        brotli: brotli.length,
-    };
-}
-
-async function measureExport(exportName, importPath = rootImportPath) {
-    const contents = `import { ${exportName} } from "${importPath}";
-export { ${exportName} };
-`;
-
-    const result = await build({
-        stdin: {
-            contents,
-            resolveDir: packageRoot,
-            loader: "ts",
-        },
-        bundle: true,
-        minify: true,
-        format: "esm",
-        write: false,
-        treeShaking: true,
-    });
-
-    const code = Buffer.from(result.outputFiles[0].contents);
-    return measureBuffer(code);
-}
-
-async function measureCore() {
-    const coreBundle = path.resolve(packageRoot, "dist/fast-element.min.js");
-    const buffer = readFileSync(coreBundle);
-    return measureBuffer(buffer);
-}
-
-async function main() {
-    const results = [];
-
-    // Measure CDN rollup bundle
-    const core = await measureCore();
-    results.push({ name: "CDN Rollup Bundle", ...core });
-
-    // Measure each named export in parallel
-    const exportResults = await Promise.all(
-        namedExports.map(async ({ name, importPath }) => {
-            const sizes = await measureExport(name, importPath);
-            return { name: formatExportLabel(name, importPath), ...sizes };
-        }),
-    );
-    results.push(...exportResults);
-
-    // Measure each root export in parallel
-    const measuredResults = await Promise.all(
-        measuredExports.map(
-            async ({ name, export: exportName, importPath = rootImportPath }) => {
-                const sizes = await measureExport(exportName, importPath);
-                return { name: formatExportLabel(name, importPath), ...sizes };
-            },
-        ),
-    );
-    results.push(...measuredResults);
-
-    // Generate markdown table
-    const lines = [
-        "# Export Sizes",
-        "",
-        "Bundle sizes for `@microsoft/fast-element` exports.",
-        "",
-        "| Export | Minified | Gzip | Brotli |",
-        "|--------|----------|------|--------|",
-    ];
-
-    for (const { name, minified, gzip, brotli } of results) {
-        lines.push(
-            `| ${name} | ${formatBytes(minified)} | ${formatBytes(gzip)} | ${formatBytes(brotli)} |`,
-        );
-    }
-
-    lines.push("");
-
-    const outputPath = path.resolve(packageRoot, "SIZES.md");
-    writeFileSync(outputPath, lines.join("\n"));
-    console.log(`Bundle sizes written to ${outputPath}`);
-}
-
-main().catch(err => {
-    console.error(err);
-    process.exit(1);
-});

package/scripts/run-api-extractor.js

@@ -1,70 +0,0 @@
-import fs from "node:fs";
-import path from "node:path";
-import { fileURLToPath } from "node:url";
-import { Extractor, ExtractorConfig } from "@microsoft/api-extractor";
-
-const __filename = fileURLToPath(import.meta.url);
-const __dirname = path.dirname(__filename);
-
-export const exportPaths = [
-    {
-        path: "./context.js",
-        docsFolder: "context",
-        configPath: path.resolve(__dirname, "../api-extractor.context.json"),
-    },
-    {
-        path: "./declarative.js",
-        docsFolder: "declarative",
-        configPath: path.resolve(__dirname, "../api-extractor.declarative.json"),
-    },
-    {
-        path: "./di.js",
-        docsFolder: "di",
-        configPath: path.resolve(__dirname, "../api-extractor.di.json"),
-    },
-    {
-        path: "./hydration.js",
-        docsFolder: "hydration",
-        configPath: path.resolve(__dirname, "../api-extractor.hydration.json"),
-    },
-    {
-        path: "./styles.js",
-        docsFolder: "styles",
-        configPath: path.resolve(__dirname, "../api-extractor.styles.json"),
-    },
-    {
-        path: "./arrays.js",
-        docsFolder: "arrays",
-        configPath: path.resolve(__dirname, "../api-extractor.arrays.json"),
-    },
-];
-
-(function () {
-    exportPaths.forEach(exportPath => {
-        const docsFolder = path.resolve(__dirname, `../docs/${exportPath.docsFolder}`);
-        // Create folders in the docs directory
-        if (!fs.existsSync(docsFolder)) {
-            fs.mkdirSync(docsFolder);
-        }
-
-        // Load and parse the api-extractor.json file
-        const extractorConfig = ExtractorConfig.loadFileAndPrepare(exportPath.configPath);
-
-        // Invoke API Extractor
-        const extractorResult = Extractor.invoke(extractorConfig, {
-            // Equivalent to the "--local" command-line parameter
-            localBuild: process.argv[2] !== "ci",
-        });
-
-        if (extractorResult.succeeded) {
-            console.log(
-                `API Extractor completed successfully for ${exportPath.configPath}`,
-            );
-        } else {
-            console.error(
-                `API Extractor completed with ${extractorResult.errorCount} errors` +
-                    ` and ${extractorResult.warningCount} warnings for ${exportPath.configPath}`,
-            );
-        }
-    });
-})();

package/test/declarative/fixtures/README.md

@@ -1,72 +0,0 @@
-# Fixtures
-
-Fixtures are organized into category subdirectories:
-
-| Category | Description |
-|---|---|
-| [`bindings/`](./bindings/README.md) | Various binding types (attribute, content, event, dot-syntax, host). |
-| [`scenarios/`](./scenarios/README.md) | Complex scenarios with edge cases involving multiple features. |
-| [`directives/`](./directives/README.md) | Attribute and element directives (`f-repeat`, `f-when`, `f-ref`, etc.). |
-| [`extensions/`](./extensions/README.md) | Additional functionality that augments the core behavior (attribute maps, observer maps). |
-| [`ecosystem/`](./ecosystem/README.md) | Other ecosystem APIs (errors, lifecycle, performance). |
-
-Each fixture contains the following contents:
-
-```
-<category>/<fixture-name>/
-├── <fixture-name>.spec.ts - Playwright tests
-├── entry.html - Entry template with root custom elements (input to build-fixtures.js)
-├── fast-build.config.json - Build configuration for @microsoft/fast-build
-├── index.html - Pre-rendered HTML page served by Vite (generated by build-fixtures.js)
-├── main.ts - Component definition and setup
-├── state.json - Initial state passed to the server-side renderer
-└── templates.html - Declarative f-template definitions
-```
-
-Fixtures are auto-discovered by the Vite config in `../vite.config.ts`. To add a new fixture, create a new directory within the appropriate category with the files above — no other changes are needed.
-
-## Hydration readiness
-
-Fixtures that exercise prerendered Declarative Shadow DOM should enable
-hydration explicitly and set a global flag in the `hydrationComplete()` callback
-so Playwright tests can wait for the element to be fully interactive before
-asserting. The standard pattern is:
-
-1. **In `main.ts`**, call `enableHydration()` before elements connect:
-
-    ```ts
-    import { enableHydration } from "@microsoft/fast-element/hydration.js";
-
-    enableHydration({
-        hydrationComplete() {
-            (window as any).hydrationCompleted = true;
-        },
-    });
-    ```
-
-    Per-element callbacks belong on `declarativeTemplate(callbacks)`. Map
-    behavior belongs in define extensions such as `attributeMap()` and
-    `observerMap()`.
-
-2. **In the spec file**, create the wait **before** navigation so the listener is registered before the page starts loading:
-
-    ```ts
-    const hydrationCompleted = page.waitForFunction(
-        () => (window as any).hydrationCompleted === true,
-    );
-    await page.goto("/fixtures/<fixture-name>/");
-    await hydrationCompleted;
-    ```
-
-    Place this around every `page.goto()` call — including inside `test.beforeEach` hooks — to prevent assertions from running before hydration finishes.
-
-## Entry HTML attribute guidelines
-
-The `entry.html` file defines the root custom elements that the server-side renderer processes. When writing attribute bindings on root elements, follow these conventions:
-
-- **Same-name complex bindings are unnecessary.** Attributes like `list="{{list}}"` where `list` is an array or object are redundant — non-primitive values are automatically stripped from the rendered opening tag, and state propagation already provides the value to the element's template. Omit these attributes.
-- **Rename bindings should be avoided.** Prefer naming state properties to match the attribute name the element expects. When a rename such as `foo="{{bar}}"` is removed, ensure `state.json` includes a property named `foo` with the contents of `bar` so the value is available via state propagation.
-- **Property bindings (`:attr`) for renames are acceptable** when multiple instances of the same element in a fixture need different values for the same property (e.g., `:items="{{emptyItems}}"` and `:items="{{singleItem}}"` on separate elements).
-- **Primitive same-name bindings are fine.** Attributes like `type="{{type}}"` where the value is a string, number, or boolean are rendered onto the opening tag and may be needed for `@attr`-based element initialization.
-
-For a complete guide on creating fixtures — including how to write each file, component patterns, and spec examples — see [WRITING_FIXTURES.md](./WRITING_FIXTURES.md).

package/test/declarative/fixtures/WRITING_FIXTURES.md

@@ -1,330 +0,0 @@
-# Writing Fixtures
-
-This guide explains how to create and maintain Playwright test fixtures for the
-declarative runtime in `@microsoft/fast-element`. Each fixture is a
-self-contained test case that exercises a specific feature through a live Vite
-dev server.
-
-## Fixture structure
-
-Every fixture lives in a category subdirectory under
-`test/declarative/fixtures/`:
-
-```
-test/declarative/fixtures/<category>/<feature>/
-├── <feature>.spec.ts        # Playwright test
-├── entry.html               # Entry template — input to the build step
-├── fast-build.config.json   # Build configuration for @microsoft/fast-build
-├── index.html               # Pre-rendered page — GENERATED, do not edit
-├── main.ts                  # Component definitions and setup
-├── state.json               # Initial state for server-side rendering
-└── templates.html           # Declarative <f-template> definitions
-```
-
-Fixtures are organized into five categories:
-
-| Category | Description | Details |
-|---|---|---|
-| `bindings/` | Various binding types (attribute, content, event, etc.) | [README](./bindings/README.md) |
-| `scenarios/` | Complex scenarios with edge cases involving multiple features | [README](./scenarios/README.md) |
-| `directives/` | Attribute and element directives (`f-repeat`, `f-when`, `f-ref`, etc.) | [README](./directives/README.md) |
-| `extensions/` | Additional functionality beyond direct configuration (attribute maps, observer maps) | [README](./extensions/README.md) |
-| `ecosystem/` | Other ecosystem APIs (errors, lifecycle, performance) | [README](./ecosystem/README.md) |
-
-> **Important:** `index.html` is generated by `npm run build:fixtures`. Never edit it by hand — your changes will be overwritten on the next build. If something looks wrong in `index.html`, fix the source files (`entry.html`, `state.json`, `templates.html`) and rebuild.
-
----
-
-## Creating a new fixture
-
-1. Create a new directory under `test/declarative/fixtures/<category>/` with a
-   descriptive kebab-case name (e.g., `bindings/my-feature/`).
-2. Add the required files described below.
-3. Run `npm run build:fixtures -w @microsoft/fast-element` to generate
-   `index.html`.
-4. Write your Playwright tests in `<feature>.spec.ts`.
-5. Run `npm run test:chromium:declarative -w @microsoft/fast-element` to verify
-   everything works.
-
-Fixtures are auto-discovered by scanning category directories for subdirectories that contain `entry.html`, `templates.html`, `state.json`, and `fast-build.config.json`. Both the build script and the Vite config pick up new fixtures automatically — no registration step is needed.
-
----
-
-## fast-build.config.json
-
-Each fixture must include a `fast-build.config.json` file that tells the `@microsoft/fast-build` CLI where to find the fixture's source files and how to build them. The build script passes `--config=<path>` to the CLI for each fixture.
-
-### Standard config
-
-Most fixtures use the same standard configuration:
-
-```json
-{
-    "entry": "entry.html",
-    "state": "state.json",
-    "output": "index.html",
-    "templates": "templates.html"
-}
-```
-
-### Fixture-specific options
-
-If a fixture needs custom build options (e.g., an attribute name strategy), add them to the config:
-
-```json
-{
-    "entry": "entry.html",
-    "state": "state.json",
-    "output": "index.html",
-    "templates": "templates.html",
-    "attribute-name-strategy": "camelCase"
-}
-```
-
-Allowed keys: `entry`, `state`, `output`, `templates`, `attribute-name-strategy`. All values must be strings. File paths are resolved relative to the config file's directory.
-
-> **Note:** Fixture configs must use the standard file names (`entry.html`, `state.json`, `index.html`, `templates.html`) because the build scripts and WebUI integration rely on these conventions for template injection and cross-renderer testing.
-
----
-
-## entry.html
-
-The entry file is a minimal HTML document that places your custom elements on the page. It serves as the input to the server-side renderer.
-
-```html
-<!DOCTYPE html>
-<html lang="en-US">
-    <head>
-        <meta charset="utf-8">
-        <title></title>
-    </head>
-    <body>
-        <my-element greeting="{{greeting}}"></my-element>
-        <script type="module" src="./main.ts"></script>
-    </body>
-</html>
-```
-
-### Attribute binding guidelines
-
-When writing attribute bindings on root elements in `entry.html`:
-
-| Pattern | Guidance |
-|---|---|
-| `type="{{type}}"` (primitive same-name) | ✅ Fine — rendered onto the opening tag for `@attr` initialization. |
-| `list="{{list}}"` (complex same-name) | ❌ Unnecessary — non-primitive values are stripped from the rendered tag; state propagation provides them automatically. |
-| `foo="{{bar}}"` (rename) | ❌ Avoid — rename `bar` to `foo` in `state.json` instead. |
-| `:items="{{emptyItems}}"` (property binding) | ✅ Acceptable when multiple instances of the same element need different values for the same property. |
-
----
-
-## state.json
-
-A JSON object containing the initial state that the server-side renderer uses to evaluate bindings. Property names should match what the templates and entry HTML reference.
-
-```json
-{
-    "greeting": "Hello",
-    "isEnabled": true,
-    "items": ["A", "B", "C"]
-}
-```
-
-Keep `state.json` minimal — only include values that affect the pre-rendered output. Complex objects (arrays, nested data) are supported.
-
----
-
-## templates.html
-
-This file defines the declarative `<f-template>` elements that describe each custom element's shadow DOM. Each `<f-template>` has a `name` attribute matching the custom element tag name and contains a `<template>` child with the component's markup.
-
-```html
-<f-template name="my-element">
-    <template>
-        <span>{{greeting}}</span>
-    </template>
-</f-template>
-```
-
-### Template syntax
-
-For a full reference of binding syntax, event bindings, directives (`f-when`,
-`f-repeat`), and execution context access, see the [Syntax section of the
-declarative docs](../../../DECLARATIVE_HTML.md#syntax).
-
-Multiple `<f-template>` elements can be defined in a single `templates.html` — one per custom element used in the fixture.
-
----
-
-## main.ts
-
-The component definition file registers custom elements and configures the template system. Every fixture must:
-
-1. Define element classes extending `FASTElement`.
-2. Call `define()` on the element class with `template: declarativeTemplate()`.
-3. Use `declarativeTemplate(callbacks)` for per-element lifecycle callbacks,
-   `enableHydration()` for hydration callbacks, and define extensions such as
-   `attributeMap()` / `observerMap()` for schema behavior.
-   `declarativeTemplate()` registers FAST's internal `<f-template>` publisher
-   automatically.
-
-### Import paths
-
-> **Important:** All imports in `main.ts` must use package names (for example
-> `@microsoft/fast-element`), **not** relative paths.
-> Relative imports will break the WebUI integration tests because fixtures are
-> copied to a different directory structure during the integration build. The
-> same applies to any other paths referenced in `main.ts`.
-
-### Basic pattern
-
-```typescript
-import {
-    FASTElement,
-    attr,
-    observable,
-} from "@microsoft/fast-element";
-import { declarativeTemplate } from "@microsoft/fast-element/declarative.js";
-
-class MyElement extends FASTElement {
-    @attr
-    greeting: string = "Hello";
-}
-MyElement.define({
-    name: "my-element",
-    template: declarativeTemplate(),
-});
-```
-
-### When to use `@attr` vs `@observable`
-
-- Use `@attr` for values reflected as HTML attributes (strings, booleans) — these can be set in `entry.html`.
-- Use `@observable` for internal state or complex values (arrays, objects) — these are provided via `state.json`.
-
-### Exporting types
-
-If your spec file needs to reference element types (e.g., for `page.evaluate` calls), export the classes:
-
-```typescript
-export class TestElement extends FASTElement {
-    @observable
-    list: Array<string> = [];
-}
-```
-
-Then import in the spec:
-
-```typescript
-import type { TestElement } from "./main.js";
-
-await customElement.evaluate((node: TestElement) => {
-    node.list = ["A", "B", "C"];
-});
-```
-
-### Using ObserverMap
-
-For fixtures that test deeply nested property reactivity, prefer the
-definition-scoped `observerMap()` extension:
-
-```typescript
-import { declarativeTemplate } from "@microsoft/fast-element/declarative.js";
-import { observerMap } from "@microsoft/fast-element/observer-map.js";
-
-MyElement.define(
-    {
-        name: "my-element",
-        template: declarativeTemplate(),
-    },
-    [observerMap()],
-);
-```
-
-This enables the `ObserverMap` proxy system to track nested property changes without requiring `@observable` decorators on every property.
-
----
-
-## Writing the spec file
-
-Spec files use Playwright's test runner. Each fixture's tests navigate to the fixture page and interact with the rendered components.
-
-### Basic structure
-
-```typescript
-import { expect, test } from "@playwright/test";
-
-test.describe("my-feature", async () => {
-    test("initial render is correct", async ({ page }) => {
-        await page.goto("/fixtures/bindings/my-feature/");
-
-        const element = page.locator("my-element");
-        await expect(element).toHaveText("Hello");
-    });
-
-    test("responds to attribute changes", async ({ page }) => {
-        await page.goto("/fixtures/bindings/my-feature/");
-
-        const element = page.locator("my-element");
-
-        await page.evaluate(() => {
-            document
-                .querySelector("my-element")!
-                .setAttribute("greeting", "World");
-        });
-
-        await expect(element).toHaveText("World");
-    });
-});
-```
-
-### Common patterns
-
-- **Navigate to the fixture:** `await page.goto("/fixtures/<category>/<feature>/");`
-- **Locate elements:** `page.locator("my-element")` or `page.locator("#specific-id")`
-- **Modify attributes:** `await page.evaluate(() => { element.setAttribute(...) })`
-- **Modify properties:** `await element.evaluate((node: MyElement) => { node.prop = value })`
-- **Assert text:** `await expect(element).toHaveText("expected")`
-- **Assert attributes:** `await expect(element).toHaveAttribute("attr", "value")`
-- **Assert child count:** `await expect(element.locator("li")).toHaveCount(3)`
-
----
-
-## Rebuilding fixtures
-
-After editing `entry.html`, `templates.html`, `state.json`, or `fast-build.config.json`, you **must** regenerate `index.html`:
-
-```bash
-npm run build:fixtures -w @microsoft/fast-element
-```
-
-This invokes `@microsoft/fast-build` for each auto-discovered fixture with `--config` pointing to the fixture's `fast-build.config.json`. The CLI reads the config file to locate the entry template, state, template definitions, and output path, then renders the output. The build script then injects the `<f-template>` declarations from `templates.html` before the `<script>` tag in the generated output. Fixtures are discovered automatically by scanning category subdirectories for directories that contain `entry.html`, `templates.html`, `state.json`, and `fast-build.config.json`.
-
-> **Tip:** If you're iterating on a fixture, use
-> `npm run dev:declarative -w @microsoft/fast-element` to start the Vite dev
-> server with file watching. But remember to run `build:fixtures` before
-> committing — the Vite dev server uses the generated `index.html`.
-
-### WebUI integration
-
-The same fixtures are also validated against `@microsoft/webui` to ensure cross-renderer compatibility. To build and test fixtures with webui:
-
-```bash
-# Build fixtures with webui and run Playwright tests
-npm run test:webui-integration -w @microsoft/fast-element
-
-# Or run the steps separately
-npm run build:fixtures:webui -w @microsoft/fast-element
-npm exec -w @microsoft/fast-element -- playwright test --config=playwright.declarative.webui.config.ts
-```
-
-The webui build step (`scripts/build-fixtures-with-webui.js`) extracts `<f-template>` elements, builds each fixture with `webui build --plugin=fast`, renders the output with `state.json`, and writes the result to `temp/integrations/webui/fixtures/`. The existing Playwright specs then run against this output.
-
----
-
-## Checklist for new fixtures
-
-- [ ] Created fixture directory within the appropriate category with all required files (including `fast-build.config.json`)
-- [ ] Ran `npm run build:fixtures -w @microsoft/fast-element` to generate `index.html`
-- [ ] Wrote Playwright tests in `<feature>.spec.ts`
-- [ ] Tests pass locally with `npm run test:chromium:declarative -w @microsoft/fast-element`
-- [ ] Committed all files **including** the generated `index.html`