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

package/docs/hydration/api-report.api.md

@@ -0,0 +1,285 @@
+## API Report File for "@microsoft/fast-element"
+
+> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
+
+```ts
+
+// @public
+export interface CaptureType {
+}
+
+// @public
+export interface ContentTemplate {
+    create(): ContentView;
+}
+
+// @public
+export interface ContentView {
+    bind(source: any, context?: ExecutionContext): void;
+    // (undocumented)
+    readonly context: ExecutionContext;
+    insertBefore(node: Node): void;
+    remove(): void;
+    unbind(): void;
+}
+
+// @public
+export class DefaultExecutionContext<TParent> implements ExecutionContext<TParent> {
+    get event(): Event;
+    eventDetail<TDetail>(): TDetail;
+    eventTarget<TTarget extends EventTarget>(): TTarget;
+    index: number;
+    get isEven(): boolean;
+    get isFirst(): boolean;
+    get isInMiddle(): boolean;
+    get isLast(): boolean;
+    get isOdd(): boolean;
+    length: number;
+    readonly parent: TParent;
+    readonly parentContext: ExecutionContext<TParent>;
+}
+
+// @beta
+export const deferHydrationAttribute = "defer-hydration";
+
+// @public
+interface Disposable_2 {
+    dispose(): void;
+}
+export { Disposable_2 as Disposable }
+
+// @public
+export const DOMAspect: Readonly<{
+    readonly none: 0;
+    readonly attribute: 1;
+    readonly booleanAttribute: 2;
+    readonly property: 3;
+    readonly content: 4;
+    readonly tokenList: 5;
+    readonly event: 6;
+}>;
+
+// @public
+export type DOMAspect = (typeof DOMAspect)[Exclude<keyof typeof DOMAspect, "none">];
+
+// @public
+export interface DOMPolicy {
+    createHTML(value: string): string;
+    protect(tagName: string | null, aspect: DOMAspect, aspectName: string, sink: DOMSink): DOMSink;
+}
+
+// @public
+export type DOMSink = (target: Node, aspectName: string, value: any, ...args: any[]) => void;
+
+// @public
+export interface ElementView<TSource = any, TParent = any> extends View<TSource, TParent> {
+    appendTo(node: Node): void;
+    onUnbind(behavior: {
+        unbind(controller: ViewController<TSource, TParent>): any;
+    }): void;
+    readonly sourceLifetime?: SourceLifetime;
+}
+
+// @public
+export interface ElementViewTemplate<TSource = any, TParent = any> {
+    create(hostBindingTarget: Element): ElementView<TSource, TParent>;
+    render(source: TSource, host: Node, hostBindingTarget?: Element): ElementView<TSource, TParent>;
+}
+
+// @public
+export function enableHydration(options?: HydrationOptions): void;
+
+// @public
+export interface ExecutionContext<TParent = any> {
+    readonly event: Event;
+    eventDetail<TDetail>(): TDetail;
+    eventTarget<TTarget extends EventTarget>(): TTarget;
+    index: number;
+    readonly isEven: boolean;
+    readonly isFirst: boolean;
+    readonly isInMiddle: boolean;
+    readonly isLast: boolean;
+    readonly isOdd: boolean;
+    length: number;
+    parent: TParent;
+    parentContext: ExecutionContext<TParent>;
+}
+
+// @public
+export const ExecutionContext: Readonly<{
+    default: ExecutionContext<any>;
+    getEvent(): Event | null;
+    setEvent(event: Event | null): void;
+}>;
+
+// @public
+export interface ExpressionController<TSource = any, TParent = any> {
+    readonly context: ExecutionContext<TParent>;
+    readonly isBound: boolean;
+    onUnbind(behavior: {
+        unbind(controller: ExpressionController<TSource, TParent>): any;
+    }): void;
+    readonly source: TSource;
+    readonly sourceLifetime?: SourceLifetime;
+}
+
+// @beta
+export interface HydratableContentTemplate extends ContentTemplate {
+    hydrate(first: Node, last: Node): ContentView;
+}
+
+// @beta
+export interface HydratableElementViewTemplate<TSource = any, TParent = any> extends ElementViewTemplate<TSource, TParent> {
+    // (undocumented)
+    hydrate(firstChild: Node, lastChild: Node, hostBindingTarget?: Element): ElementView<TSource, TParent>;
+}
+
+// @beta
+export interface HydratableSyntheticViewTemplate<TSource = any, TParent = any> extends SyntheticViewTemplate {
+    // (undocumented)
+    hydrate(firstChild: Node, lastChild: Node): SyntheticView<TSource, TParent>;
+}
+
+// @public (undocumented)
+export interface HydratableView<TSource = any, TParent = any> extends ElementView, SyntheticView, DefaultExecutionContext<TParent> {
+    // (undocumented)
+    [Hydratable]: symbol;
+    // (undocumented)
+    readonly bindingViewBoundaries: Record<string, ViewNodes>;
+    // (undocumented)
+    readonly hydrationStage: keyof typeof HydrationStage;
+}
+
+// @beta
+export type HydratableViewController<TSource = any, TParent = any> = HydratableView<TSource, TParent> & ViewController<TSource, TParent>;
+
+// @public (undocumented)
+export class HydrationBindingError extends Error {
+    constructor(
+    message: string | undefined,
+    factory: ViewBehaviorFactory,
+    fragment: DocumentFragment,
+    templateString: string);
+    readonly factory: ViewBehaviorFactory;
+    readonly fragment: DocumentFragment;
+    readonly templateString: string;
+}
+
+// @public
+export interface HydrationOptions {
+    hydrationComplete?(): void;
+    hydrationStarted?(): void;
+}
+
+// @public (undocumented)
+export const HydrationStage: {
+    readonly unhydrated: "unhydrated";
+    readonly hydrating: "hydrating";
+    readonly hydrated: "hydrated";
+};
+
+// @public
+export class HydrationTracker {
+    constructor(options: HydrationOptions);
+    add(element: HTMLElement): void;
+    mergeOptions(incoming: HydrationOptions): void;
+    remove(element: HTMLElement): void;
+}
+
+// @beta
+export function isHydratable(view: ViewController): view is HydratableViewController;
+
+// @beta (undocumented)
+export function isHydratable<TSource = any, TParent = any>(template: SyntheticViewTemplate<TSource, TParent>): template is HydratableSyntheticViewTemplate<TSource, TParent>;
+
+// @beta (undocumented)
+export function isHydratable<TSource = any, TParent = any>(template: ElementViewTemplate<TSource, TParent>): template is HydratableElementViewTemplate<TSource, TParent>;
+
+// @beta (undocumented)
+export function isHydratable(template: ContentTemplate): template is HydratableContentTemplate;
+
+// @public
+export const SourceLifetime: Readonly<{
+    readonly unknown: undefined;
+    readonly coupled: 1;
+}>;
+
+// @public
+export type SourceLifetime = (typeof SourceLifetime)[keyof typeof SourceLifetime];
+
+// @public
+export interface SyntheticView<TSource = any, TParent = any> extends View<TSource, TParent> {
+    readonly firstChild: Node;
+    insertBefore(node: Node): void;
+    readonly lastChild: Node;
+    remove(): void;
+}
+
+// @public
+export interface SyntheticViewTemplate<TSource = any, TParent = any> {
+    create(): SyntheticView<TSource, TParent>;
+    inline(): CaptureType;
+}
+
+// @public
+export interface View<TSource = any, TParent = any> extends Disposable_2 {
+    bind(source: TSource, context?: ExecutionContext<TParent>): void;
+    readonly context: ExecutionContext<TParent>;
+    readonly isBound: boolean;
+    readonly source: TSource | null;
+    unbind(): void;
+}
+
+// @public
+export interface ViewBehavior<TSource = any, TParent = any> {
+    bind(controller: ViewController<TSource, TParent>): void;
+}
+
+// @public
+export interface ViewBehaviorBoundaries {
+    // (undocumented)
+    [factoryId: string]: ViewBoundaries;
+}
+
+// @public
+export interface ViewBehaviorFactory {
+    createBehavior(): ViewBehavior;
+    id?: string;
+    policy?: DOMPolicy;
+    targetNodeId?: string;
+    targetTagName?: string | null;
+}
+
+// @public
+export type ViewBehaviorTargets = {
+    [id: string]: Node;
+};
+
+// @public
+export interface ViewBoundaries {
+    // (undocumented)
+    first: Node;
+    // (undocumented)
+    last: Node;
+}
+
+// @public
+export interface ViewController<TSource = any, TParent = any> extends ExpressionController<TSource, TParent> {
+    readonly isHydrated?: Promise<boolean>;
+    readonly isPrerendered?: Promise<boolean>;
+    // @internal
+    readonly _skipAttrUpdates?: boolean;
+    readonly targets: ViewBehaviorTargets;
+}
+
+// @public (undocumented)
+export interface ViewNodes {
+    // (undocumented)
+    first: Node;
+    // (undocumented)
+    last: Node;
+}
+
+// (No @packageDocumentation comment for this package)
+
+```

package/docs/styles/api-report.api.md

@@ -0,0 +1,135 @@
+## API Report File for "@microsoft/fast-element"
+
+> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
+
+```ts
+
+// @public
+export type ComposableStyles = string | ElementStyles | CSSStyleSheet;
+
+// @public
+export type Constructable<T = {}> = {
+    new (...args: any[]): T;
+};
+
+// @public
+export type ConstructibleStyleStrategy = {
+    new (styles: (string | CSSStyleSheet)[]): StyleStrategy;
+};
+
+// @public
+export interface CSSDirective {
+    createCSS(): ComposableStyles;
+}
+
+// @public
+export const CSSDirective: Readonly<{
+    getForInstance: (object: any) => CSSDirectiveDefinition<Constructable<CSSDirective>> | undefined;
+    getByType: (key: Function) => CSSDirectiveDefinition<Constructable<CSSDirective>> | undefined;
+    define<TType extends Constructable<CSSDirective>>(type: any): TType;
+}>;
+
+// @public
+export function cssDirective(): (type: Constructable<CSSDirective>) => void;
+
+// @public
+export interface CSSDirectiveDefinition<TType extends Constructable<CSSDirective> = Constructable<CSSDirective>> {
+    readonly type: TType;
+}
+
+// @public
+export class ElementStyles {
+    constructor(styles: ReadonlyArray<ComposableStyles>);
+    // @internal (undocumented)
+    addStylesTo(target: StyleTarget): void;
+    // @internal (undocumented)
+    isAttachedTo(target: StyleTarget): boolean;
+    static normalize(styles: ComposableStyles | ComposableStyles[] | undefined): ElementStyles | undefined;
+    // @internal (undocumented)
+    removeStylesFrom(target: StyleTarget): void;
+    static setDefaultStrategy(Strategy: ConstructibleStyleStrategy): void;
+    get strategy(): StyleStrategy;
+    // (undocumented)
+    readonly styles: ReadonlyArray<ComposableStyles>;
+    static readonly supportsAdoptedStyleSheets: boolean;
+    withStrategy(Strategy: ConstructibleStyleStrategy): this;
+}
+
+// @public
+export interface ExecutionContext<TParent = any> {
+    readonly event: Event;
+    eventDetail<TDetail>(): TDetail;
+    eventTarget<TTarget extends EventTarget>(): TTarget;
+    index: number;
+    readonly isEven: boolean;
+    readonly isFirst: boolean;
+    readonly isInMiddle: boolean;
+    readonly isLast: boolean;
+    readonly isOdd: boolean;
+    length: number;
+    parent: TParent;
+    parentContext: ExecutionContext<TParent>;
+}
+
+// @public
+export const ExecutionContext: Readonly<{
+    default: ExecutionContext<any>;
+    getEvent(): Event | null;
+    setEvent(event: Event | null): void;
+}>;
+
+// @public
+export interface ExpressionController<TSource = any, TParent = any> {
+    readonly context: ExecutionContext<TParent>;
+    readonly isBound: boolean;
+    onUnbind(behavior: {
+        unbind(controller: ExpressionController<TSource, TParent>): any;
+    }): void;
+    readonly source: TSource;
+    readonly sourceLifetime?: SourceLifetime;
+}
+
+// @public
+export interface HostBehavior<TSource = any> {
+    addedCallback?(controller: HostController<TSource>): void;
+    connectedCallback?(controller: HostController<TSource>): void;
+    disconnectedCallback?(controller: HostController<TSource>): void;
+    removedCallback?(controller: HostController<TSource>): void;
+}
+
+// @public
+export interface HostController<TSource = any> extends ExpressionController<TSource> {
+    addBehavior(behavior: HostBehavior<TSource>): void;
+    addStyles(styles: ElementStyles | HTMLStyleElement | null | undefined): void;
+    readonly isConnected: boolean;
+    mainStyles: ElementStyles | null;
+    removeBehavior(behavior: HostBehavior<TSource>, force?: boolean): void;
+    removeStyles(styles: ElementStyles | HTMLStyleElement | null | undefined): void;
+}
+
+// @public
+export const SourceLifetime: Readonly<{
+    readonly unknown: undefined;
+    readonly coupled: 1;
+}>;
+
+// @public
+export type SourceLifetime = (typeof SourceLifetime)[keyof typeof SourceLifetime];
+
+// @public
+export interface StyleStrategy {
+    addStylesTo(target: StyleTarget): void;
+    removeStylesFrom(target: StyleTarget): void;
+}
+
+// @public
+export interface StyleTarget extends Pick<Node, "getRootNode"> {
+    adoptedStyleSheets?: CSSStyleSheet[];
+    append(styles: HTMLStyleElement): void;
+    querySelectorAll<E extends Element = Element>(selectors: string): NodeListOf<E>;
+    removeChild(styles: HTMLStyleElement): void;
+}
+
+// (No @packageDocumentation comment for this package)
+
+```

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@microsoft/fast-element",
   "description": "A library for constructing Web Components",
-  "version": "2.10.4",
+  "version": "3.0.0-rc.1",
   "author": {
     "name": "Microsoft",
     "url": "https://discord.gg/FcSNfg4"
@@ -30,17 +30,55 @@
       "types": "./dist/dts/debug.d.ts",
       "default": "./dist/esm/debug.js"
     },
-    "./binding/two-way.js": {
+    "./fast-element.js": {
+      "types": "./dist/dts/components/fast-element.d.ts",
+      "test": "./src/components/fast-element.ts",
+      "default": "./dist/esm/components/fast-element.js"
+    },
+    "./declarative.js": {
+      "types": "./dist/dts/declarative/index.d.ts",
+      "test": "./src/declarative/index.ts",
+      "default": "./dist/esm/declarative/index.js"
+    },
+    "./declarative-utilities.js": {
+      "types": "./dist/dts/declarative/utilities.d.ts",
+      "test": "./src/declarative/utilities.ts",
+      "default": "./dist/esm/declarative/utilities.js"
+    },
+    "./attribute-map.js": {
+      "types": "./dist/dts/declarative/attribute-map.d.ts",
+      "test": "./src/declarative/attribute-map.ts",
+      "default": "./dist/esm/declarative/attribute-map.js"
+    },
+    "./observer-map.js": {
+      "types": "./dist/dts/declarative/observer-map.d.ts",
+      "test": "./src/declarative/observer-map.ts",
+      "default": "./dist/esm/declarative/observer-map.js"
+    },
+    "./hydration.js": {
+      "types": "./dist/dts/hydration.d.ts",
+      "test": "./src/hydration.ts",
+      "default": "./dist/esm/hydration.js"
+    },
+    "./binding.js": {
+      "types": "./dist/dts/binding.d.ts",
+      "test": "./src/binding.ts",
+      "default": "./dist/esm/binding.js"
+    },
+    "./two-way.js": {
       "types": "./dist/dts/binding/two-way.d.ts",
+      "test": "./src/binding/two-way.ts",
       "default": "./dist/esm/binding/two-way.js"
     },
-    "./binding/signal.js": {
+    "./signal.js": {
       "types": "./dist/dts/binding/signal.d.ts",
+      "test": "./src/binding/signal.ts",
       "default": "./dist/esm/binding/signal.js"
     },
     "./render.js": {
-      "types": "./dist/dts/templating/render.d.ts",
-      "default": "./dist/esm/templating/render.js"
+      "types": "./dist/dts/render.d.ts",
+      "test": "./src/render.ts",
+      "default": "./dist/esm/render.js"
     },
     "./utilities.js": {
       "types": "./dist/dts/utilities.d.ts",
@@ -54,69 +92,139 @@
       "types": "./dist/dts/context.d.ts",
       "default": "./dist/esm/context.js"
     },
-    "./metadata.js": {
-      "types": "./dist/dts/metadata.d.ts",
-      "default": "./dist/esm/metadata.js"
-    },
-    "./testing.js": {
-      "types": "./dist/dts/testing/exports.d.ts",
-      "default": "./dist/esm/testing/exports.js"
-    },
     "./di.js": {
       "types": "./dist/dts/di/di.d.ts",
       "default": "./dist/esm/di/di.js"
     },
-    "./element-hydration.js": {
-      "types": "./dist/dts/components/hydration.d.ts",
-      "default": "./dist/esm/components/hydration.js"
-    },
-    "./install-element-hydration.js": {
-      "types": "./dist/dts/components/install-hydration.d.ts",
-      "default": "./dist/esm/components/install-hydration.js"
-    },
-    "./install-hydratable-view-templates.js": {
-      "types": "./dist/dts/templating/install-hydratable-view-templates.d.ts",
-      "default": "./dist/esm/templating/install-hydratable-view-templates.js"
-    },
-    "./pending-task.js": {
-      "types": "./dist/dts/pending-task.d.ts",
-      "default": "./dist/esm/pending-task.js"
+    "./dom.js": {
+      "types": "./dist/dts/dom.d.ts",
+      "test": "./src/dom.ts",
+      "default": "./dist/esm/dom.js"
     },
     "./dom-policy.js": {
       "types": "./dist/dts/dom-policy.d.ts",
       "default": "./dist/esm/dom-policy.js"
     },
+    "./updates.js": {
+      "types": "./dist/dts/updates.d.ts",
+      "test": "./src/updates.ts",
+      "default": "./dist/esm/updates.js"
+    },
+    "./arrays.js": {
+      "types": "./dist/dts/arrays.d.ts",
+      "test": "./src/arrays.ts",
+      "default": "./dist/esm/arrays.js"
+    },
+    "./array-observer.js": {
+      "types": "./dist/dts/array-observer.d.ts",
+      "test": "./src/array-observer.ts",
+      "default": "./dist/esm/array-observer.js"
+    },
+    "./schema.js": {
+      "types": "./dist/dts/schema.d.ts",
+      "test": "./src/schema.ts",
+      "default": "./dist/esm/schema.js"
+    },
     "./observable.js": {
-      "types": "./dist/dts/observation/observable.d.ts",
-      "default": "./dist/esm/observation/observable.js"
+      "types": "./dist/dts/observable.d.ts",
+      "test": "./src/observable.ts",
+      "default": "./dist/esm/observable.js"
+    },
+    "./volatile.js": {
+      "types": "./dist/dts/volatile.d.ts",
+      "test": "./src/volatile.ts",
+      "default": "./dist/esm/volatile.js"
+    },
+    "./attr.js": {
+      "types": "./dist/dts/attr.d.ts",
+      "test": "./src/attr.ts",
+      "default": "./dist/esm/attr.js"
+    },
+    "./css.js": {
+      "types": "./dist/dts/css.d.ts",
+      "test": "./src/css.ts",
+      "default": "./dist/esm/css.js"
+    },
+    "./html.js": {
+      "types": "./dist/dts/html.d.ts",
+      "test": "./src/html.ts",
+      "default": "./dist/esm/html.js"
+    },
+    "./templating.js": {
+      "types": "./dist/dts/templating.d.ts",
+      "test": "./src/templating.ts",
+      "default": "./dist/esm/templating.js"
+    },
+    "./children.js": {
+      "types": "./dist/dts/directives/children.d.ts",
+      "test": "./src/directives/children.ts",
+      "default": "./dist/esm/directives/children.js"
+    },
+    "./node-observation.js": {
+      "types": "./dist/dts/directives/node-observation.d.ts",
+      "test": "./src/directives/node-observation.ts",
+      "default": "./dist/esm/directives/node-observation.js"
+    },
+    "./ref.js": {
+      "types": "./dist/dts/directives/ref.d.ts",
+      "test": "./src/directives/ref.ts",
+      "default": "./dist/esm/directives/ref.js"
+    },
+    "./slotted.js": {
+      "types": "./dist/dts/directives/slotted.d.ts",
+      "test": "./src/directives/slotted.ts",
+      "default": "./dist/esm/directives/slotted.js"
+    },
+    "./when.js": {
+      "types": "./dist/dts/directives/when.d.ts",
+      "test": "./src/directives/when.ts",
+      "default": "./dist/esm/directives/when.js"
+    },
+    "./repeat.js": {
+      "types": "./dist/dts/directives/repeat.d.ts",
+      "test": "./src/directives/repeat.ts",
+      "default": "./dist/esm/directives/repeat.js"
+    },
+    "./styles.js": {
+      "types": "./dist/dts/styles.d.ts",
+      "test": "./src/styles.ts",
+      "default": "./dist/esm/styles.js"
     },
     "./package.json": "./package.json"
   },
   "unpkg": "dist/fast-element.min.js",
-  "sideEffects": [
-    "./dist/esm/debug.js",
-    "./dist/esm/polyfills.js",
-    "./dist/esm/components/install-hydration.js",
-    "./dist/esm/templating/install-hydratable-view-templates.js",
-    "./dist/esm/interfaces.js"
-  ],
+  "sideEffects": false,
   "scripts": {
     "clean": "clean dist temp test-results",
     "doc": "api-extractor run --local",
     "doc:ci": "api-extractor run",
     "doc:exports": "node ./scripts/run-api-extractor.js",
     "doc:exports:ci": "node ./scripts/run-api-extractor.js ci",
-    "build": "npm run build:tsc && npm run build:rollup && npm run doc && npm run doc:exports",
+    "build": "npm run build:tsc && npm run build:rollup && npm run build:sizes && npm run doc && npm run doc:exports && npm run build:fixtures",
+    "build:fixtures": "node scripts/declarative/build-fixtures.js",
+    "build:fixtures:webui": "node scripts/declarative/build-fixtures-with-webui.js",
     "build:rollup": "rollup -c",
+    "build:sizes": "node scripts/measure-sizes.js",
     "build:tsc": "tsc -p ./tsconfig.json",
     "dev": "tsc -p ./tsconfig.json -w",
+    "dev:declarative": "concurrently -k -n tsc,server \"npm run dev\" \"npm run test-server:declarative\"",
     "prepublishOnly": "npm run clean && npm run build",
     "lint": "biome-changed",
     "lint:fix": "biome-changed -- --fix",
-    "test:playwright": "playwright test",
-    "test:chromium": "playwright test --project=chromium",
+    "test:playwright": "playwright test && npm run test:playwright:declarative",
+    "test:playwright:declarative": "playwright test --config=playwright.declarative.config.ts",
+    "test:chromium": "playwright test --project=chromium && npm run test:chromium:declarative",
+    "test:chromium:declarative": "playwright test --config=playwright.declarative.config.ts --project=chromium",
     "test-server": "npx vite test/ --clearScreen false",
+    "test-server:declarative": "npx vite test/declarative --clearScreen false --port 5174 --strictPort",
+    "test-server:declarative:webui": "npx vite temp/integrations/webui --clearScreen false --port 5174 --strictPort",
     "test": "npm run lint && npm run doc:ci && npm run doc:exports:ci && npm run test:playwright",
-    "test:ci": "npm run doc:ci && npm run doc:exports:ci && npm run test:playwright"
+    "test:ci": "npm run doc:ci && npm run doc:exports:ci && npm run test:playwright",
+    "test:ui:declarative": "concurrently -k -n tsc,playwright \"npm run dev\" \"npx playwright test --config=playwright.declarative.config.ts --ui\"",
+    "test:webui-integration": "npm run build:fixtures:webui && playwright test --config=playwright.declarative.webui.config.ts"
+  },
+  "devDependencies": {
+    "@microsoft/fast-build": "*",
+    "@microsoft/webui": "0.0.10"
   }
 }

package/playwright.declarative.config.ts

@@ -0,0 +1,26 @@
+import { defineConfig, devices } from "@playwright/test";
+
+export default defineConfig({
+    testDir: "./test/declarative/fixtures",
+    testMatch: "**/*.spec.ts",
+    retries: 3,
+    projects: [
+        {
+            name: "chromium",
+            use: { ...devices["Desktop Chrome"] },
+        },
+        {
+            name: "firefox",
+            use: { ...devices["Desktop Firefox"] },
+        },
+        {
+            name: "webkit",
+            use: { ...devices["Desktop Safari"] },
+        },
+    ],
+    webServer: {
+        command: "npm run test-server:declarative",
+        port: 5174,
+        reuseExistingServer: true,
+    },
+});