npm - @microsoft/fast-element - Versions diffs - 2.10.4 → 3.0.0-rc.1 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (349) hide show

package/test/declarative/fixtures/scenarios/nested-elements/templates.html ADDED Viewed

@@ -0,0 +1,54 @@
+<f-template name="test-element-repeat-event">
+    <template>
+        <ul>
+            <f-repeat value="{{item in repeatEventItems}}">
+                <li>
+                    <button type="button" @click="{$c.parent.handleItemClick($e)}">{{item.name}}</button>
+                </li>
+            </f-repeat>
+        </ul>
+    </template>
+</f-template>
+<f-template name="test-when-in-repeat">
+    <template>
+        <ul>
+            <f-repeat value="{{item in whenRepeatItems}}">
+                <li>
+                    <f-when value="{{showNames}}">
+                        <button class="name" type="button" @click="{$c.parent.handleItemClick($e)}">{{item.name}}</button>
+                    </f-when>
+                </li>
+            </f-repeat>
+        </ul>
+    </template>
+</f-template>
+<f-template name="grand-child-element">
+    <template>
+        <span class="category">{{category}}</span>
+    </template>
+</f-template>
+<f-template name="child-element">
+    <template>
+        <div class="item">
+            <span class="index">{{idx}}</span>
+            <span class="text">{{text}}</span>
+            <grand-child-element category="{{category}}"></grand-child-element>
+        </div>
+    </template>
+</f-template>
+<f-template name="parent-element">
+    <template>
+        <div class="list-container">
+            <h2>{{title}}</h2>
+            <div class="items">
+                <f-repeat value="{{item in items}}" positioning="true">
+                    <child-element
+                        text="{{item.text}}"
+                        idx="{{$index}}"
+                        category="{{category}}"
+                    ></child-element>
+                </f-repeat>
+            </div>
+        </div>
+    </template>
+</f-template>

package/test/declarative/index.html ADDED Viewed

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <title>FAST HTML Test Suite</title>
+    </head>
+    <body>
+        <h1>FAST HTML Test Suite</h1>
+        <ul><!--TOC--></ul>
+    </body>
+</html>

package/test/declarative/vite.config.ts ADDED Viewed

@@ -0,0 +1,55 @@
+import { readdirSync } from "node:fs";
+import { dirname, join } from "node:path";
+import { fileURLToPath } from "node:url";
+import { defineConfig } from "vite";
+const __dirname = dirname(fileURLToPath(import.meta.url));
+const fixturesDir = join(__dirname, "fixtures");
+function discoverFixtureInputs(): Record<string, string> {
+    const inputs: Record<string, string> = {
+        index: join(__dirname, "index.html"),
+    };
+    for (const category of readdirSync(fixturesDir, { withFileTypes: true })) {
+        if (!category.isDirectory()) {
+            continue;
+        }
+        const categoryDir = join(fixturesDir, category.name);
+        for (const fixture of readdirSync(categoryDir, { withFileTypes: true })) {
+            if (!fixture.isDirectory()) {
+                continue;
+            }
+            const key = `${category.name}/${fixture.name}`;
+            inputs[key] = join(categoryDir, fixture.name, "index.html");
+        }
+    }
+    return inputs;
+}
+export default defineConfig({
+    plugins: [
+        {
+            name: "html-toc",
+            transformIndexHtml(html) {
+                const inputs = discoverFixtureInputs();
+                const toc = Object.keys(inputs)
+                    .filter(key => key !== "index")
+                    .sort()
+                    .map(key => `<li><a href="/fixtures/${key}/">${key}</a></li>`)
+                    .join("");
+                return html.replace("<!--TOC-->", toc);
+            },
+        },
+    ],
+    build: {
+        rollupOptions: {
+            input: discoverFixtureInputs(),
+        },
+    },
+});

package/test/declarative-main.ts ADDED Viewed

@@ -0,0 +1,6 @@
+export {
+    declarativeTemplate,
+    Schema,
+    TemplateParser,
+} from "../src/declarative/index.js";
+export { FASTElement, FASTElementDefinition, uniqueElementName } from "./main.js";

package/test/extension-subpaths-main.ts ADDED Viewed

@@ -0,0 +1,9 @@
+export {
+    AttributeMap,
+    attributeMap,
+} from "@microsoft/fast-element/attribute-map.js";
+export {
+    ObserverMap,
+    observerMap,
+} from "@microsoft/fast-element/observer-map.js";
+export { Schema } from "../src/components/schema.js";

package/test/main.ts CHANGED Viewed

@@ -1,30 +1,37 @@
-import "../src/debug.js";
+import { enableDebug } from "../src/debug.js";
+enableDebug();
-export { customElement, FASTElement } from "../src/components/fast-element.js";
 export {
-    attr,
     AttributeConfiguration,
     AttributeDefinition,
+    attr,
 } from "../src/components/attributes.js";
 export {
-    ElementController,
-    HydratableElementController,
     AdoptedStyleSheetsStrategy,
+    ElementController,
     StyleElementStrategy,
-    needsHydrationAttribute,
-    deferHydrationAttribute,
 } from "../src/components/element-controller.js";
+export type { FASTElementExtension } from "../src/components/fast-definitions.js";
 export { FASTElementDefinition } from "../src/components/fast-definitions.js";
-export { HydrationMarkup } from "../src/components/hydration.js";
+export { customElement, FASTElement } from "../src/components/fast-element.js";
+export {
+    HydrationMarkup,
+    isHydratable,
+} from "../src/components/hydration.js";
+export {
+    deferHydrationAttribute,
+    enableHydration,
+} from "../src/components/enable-hydration.js";
 export { Context } from "../src/context.js";
 export {
+    all,
     Container,
     ContainerConfiguration,
     ContainerImpl,
     DefaultResolver,
     DI,
     FactoryImpl,
-    all,
     inject,
     lazy,
     optional,
@@ -42,13 +49,13 @@ export { css } from "../src/styles/css.js";
 export { ElementStyles } from "../src/styles/element-styles.js";
 export { ref } from "../src/templating/ref.js";
 export { html } from "../src/templating/template.js";
+export { Fake } from "../src/testing/fakes.js";
 export { uniqueElementName } from "../src/testing/fixture.js";
 export { ChildModel, DerivedModel, Model } from "../src/testing/models.js";
-export { Fake } from "../src/testing/fakes.js";
 export { composedContains, composedParent } from "../src/utilities.js";
 export const conditionalTimeout = function (
     condition: boolean,
-    iteration = 0
+    iteration = 0,
 ): Promise<boolean> {
     return new Promise(function (resolve) {
         setTimeout(() => {
@@ -60,41 +67,39 @@ export const conditionalTimeout = function (
         }, 5);
     });
 };
-export { ArrayObserver, lengthOf, Splice } from "../src/observation/arrays.js";
-export { ownedState, reactive, state, watch } from "../src/state/exports.js";
-export { fixture } from "../src/testing/fixture.js";
-export { CSSBindingDirective } from "../src/styles/css-binding-directive.js";
-export { cssDirective, CSSDirective } from "../src/styles/css-directive.js";
-export { ExecutionContext } from "../src/observation/observable.js";
+export { createTrackableDOMPolicy, toHTML } from "../src/__test__/helpers.js";
 export { Binding } from "../src/binding/binding.js";
 export { oneTime } from "../src/binding/one-time.js";
-export { oneWay, listener } from "../src/binding/one-way.js";
+export { listener, oneWay } from "../src/binding/one-way.js";
 export { Signal, signal } from "../src/binding/signal.js";
 export { twoWay } from "../src/binding/two-way.js";
+export { isString } from "../src/interfaces.js";
+export { Metadata } from "../src/metadata.js";
+export { ArrayObserver, lengthOf, Splice } from "../src/observation/arrays.js";
+export { ExecutionContext } from "../src/observation/observable.js";
+export { emptyArray, FAST } from "../src/platform.js";
+export { ownedState, reactive, state, watch } from "../src/state/exports.js";
+export { CSSDirective, cssDirective } from "../src/styles/css-directive.js";
+export { ChildrenDirective, children } from "../src/templating/children.js";
+export { Compiler } from "../src/templating/compiler.js";
 export { HTMLBindingDirective } from "../src/templating/html-binding-directive.js";
-export { ViewTemplate } from "../src/templating/template.js";
-export { HTMLView } from "../src/templating/view.js";
 export { HTMLDirective, htmlDirective } from "../src/templating/html-directive.js";
-export { nextId } from "../src/templating/markup.js";
-export { createTrackableDOMPolicy, toHTML } from "../src/__test__/helpers.js";
-export { children, ChildrenDirective } from "../src/templating/children.js";
+export { Markup, nextId, Parser } from "../src/templating/markup.js";
 export { elements } from "../src/templating/node-observation.js";
-export { Compiler } from "../src/templating/compiler.js";
-export { Markup, Parser } from "../src/templating/markup.js";
-export { when } from "../src/templating/when.js";
 export {
-    render,
+    NodeTemplate,
     RenderBehavior,
     RenderDirective,
     RenderInstruction,
-    NodeTemplate,
+    render,
     renderWith,
 } from "../src/templating/render.js";
-export { repeat, RepeatBehavior, RepeatDirective } from "../src/templating/repeat.js";
-export { slotted, SlottedDirective } from "../src/templating/slotted.js";
-export { isString } from "../src/interfaces.js";
-export { FAST, emptyArray } from "../src/platform.js";
-export { Metadata } from "../src/metadata.js";
+export { RepeatBehavior, RepeatDirective, repeat } from "../src/templating/repeat.js";
+export { SlottedDirective, slotted } from "../src/templating/slotted.js";
+export { ViewTemplate } from "../src/templating/template.js";
+export { HTMLView } from "../src/templating/view.js";
+export { when } from "../src/templating/when.js";
+export { fixture } from "../src/testing/fixture.js";
 export function removeWhitespace(str: string): string {
     return str
         .trim()

package/test/pure-declarative-main.ts ADDED Viewed

	@@ -0,0 +1 @@
1	+ export { Schema, TemplateParser } from "../src/declarative/index.js";

package/dist/dts/components/install-hydration.d.ts DELETED Viewed

	@@ -1 +0,0 @@
1	- import "../templating/install-hydratable-view-templates.js";

package/dist/dts/pending-task.d.ts DELETED Viewed

@@ -1,32 +0,0 @@
-/**
- * An implementation of the https://github.com/webcomponents-cg/community-protocols/blob/main/proposals/pending-task.md proposal.
- * @public
- */
-export interface PendingTask extends Event {
-    /**
-     * A promise that resolves when the pending task is complete.
-     */
-    readonly complete: Promise<void>;
-}
-/**
- * A concrete implementation of {@link PendingTask}
- * @public
- */
-export declare class PendingTaskEvent extends Event implements PendingTask {
-    readonly complete: Promise<void>;
-    /**
-     * The type of the pending task event.
-     */
-    static readonly type = "pending-task";
-    /**
-     * Creates an instance of PendingTaskEvent.
-     * @param complete - A promise that resolves when the pending task is complete.
-     */
-    constructor(complete: Promise<void>);
-    /**
-     * Determines whether a value is a PendingTaskEvent.
-     * @param value - The value to check.
-     * @returns True if the value is a PendingTaskEvent; false otherwise.
-     */
-    static isPendingTask<T extends Event>(value: T | PendingTask): value is PendingTask;
-}

package/dist/dts/polyfills.d.ts DELETED Viewed

File without changes

package/dist/dts/styles/css-binding-directive.d.ts DELETED Viewed

@@ -1,60 +0,0 @@
-import type { Binding, BindingDirective } from "../binding/binding.js";
-import type { Subscriber } from "../observation/notifier.js";
-import type { ExpressionObserver } from "../observation/observable.js";
-import { type AddBehavior, CSSDirective } from "./css-directive.js";
-import type { ComposableStyles } from "./element-styles.js";
-import type { HostBehavior, HostController } from "./host.js";
-type CSSBindingEntry = {
-    observer: ExpressionObserver;
-    controller: HostController;
-};
-/**
- * Enables bindings in CSS.
- *
- * @public
- */
-export declare class CSSBindingDirective implements HostBehavior, Subscriber, CSSDirective, BindingDirective {
-    readonly dataBinding: Binding;
-    readonly targetAspect: string;
-    /**
-     * Creates an instance of CSSBindingDirective.
-     * @param dataBinding - The binding to use in CSS.
-     * @param targetAspect - The CSS property to target.
-     */
-    constructor(dataBinding: Binding, targetAspect: string);
-    /**
-     * Creates a CSS fragment to interpolate into the CSS document.
-     * @returns - the string to interpolate into CSS
-     */
-    createCSS(add: AddBehavior): ComposableStyles;
-    /**
-     * Executed when this behavior is attached to a controller.
-     * @param controller - Controls the behavior lifecycle.
-     */
-    addedCallback(controller: HostController<HTMLElement & {
-        $cssBindings: Map<CSSBindingDirective, CSSBindingEntry>;
-    }>): void;
-    /**
-     * Executed when this behavior's host is connected.
-     * @param controller - Controls the behavior lifecycle.
-     */
-    connectedCallback(controller: HostController<HTMLElement & {
-        $cssBindings: Map<CSSBindingDirective, CSSBindingEntry>;
-    }>): void;
-    /**
-     * Executed when this behavior is detached from a controller.
-     * @param controller - Controls the behavior lifecycle.
-     */
-    removedCallback(controller: HostController<HTMLElement & {
-        $cssBindings: Map<CSSBindingDirective, CSSBindingEntry>;
-    }>): void;
-    /**
-     * Called when a subject this instance has subscribed to changes.
-     * @param subject - The subject of the change.
-     * @param args - The event args detailing the change that occurred.
-     *
-     * @internal
-     */
-    handleChange(_: any, observer: ExpressionObserver): void;
-}
-export {};

package/dist/dts/templating/install-hydratable-view-templates.d.ts DELETED Viewed

	@@ -1 +0,0 @@
1	- export {};

package/dist/esm/components/install-hydration.js DELETED Viewed

@@ -1,3 +0,0 @@
-import "../templating/install-hydratable-view-templates.js";
-import { HydratableElementController } from "./element-controller.js";
-HydratableElementController.install();

package/dist/esm/pending-task.js DELETED Viewed

@@ -1,28 +0,0 @@
-/**
- * A concrete implementation of {@link PendingTask}
- * @public
- */
-export class PendingTaskEvent extends Event {
-    /**
-     * Creates an instance of PendingTaskEvent.
-     * @param complete - A promise that resolves when the pending task is complete.
-     */
-    constructor(complete) {
-        super(PendingTaskEvent.type, { bubbles: true, composed: true });
-        this.complete = complete;
-    }
-    /**
-     * Determines whether a value is a PendingTaskEvent.
-     * @param value - The value to check.
-     * @returns True if the value is a PendingTaskEvent; false otherwise.
-     */
-    static isPendingTask(value) {
-        var _a;
-        return (value.type === PendingTaskEvent.type &&
-            typeof ((_a = value.complete) === null || _a === void 0 ? void 0 : _a.then) === "function");
-    }
-}
-/**
- * The type of the pending task event.
- */
-PendingTaskEvent.type = "pending-task";

package/dist/esm/polyfills.js DELETED Viewed

@@ -1,60 +0,0 @@
-/* eslint-disable @typescript-eslint/ban-ts-comment */
-(function ensureGlobalThis() {
-    if (typeof globalThis !== "undefined") {
-        // We're running in a modern environment.
-        return;
-    }
-    // @ts-ignore
-    if (typeof global !== "undefined") {
-        // We're running in NodeJS
-        // @ts-ignore
-        global.globalThis = global;
-    }
-    else if (typeof self !== "undefined") {
-        self.globalThis = self;
-    }
-    else if (typeof window !== "undefined") {
-        // We're running in the browser's main thread.
-        window.globalThis = window;
-    }
-    else {
-        // Hopefully we never get here...
-        // Not all environments allow eval and Function. Use only as a last resort:
-        // eslint-disable-next-line no-new-func
-        const result = new Function("return this")();
-        result.globalThis = result;
-    }
-})();
-(function requestIdleCallbackPolyfill() {
-    if ("requestIdleCallback" in globalThis) {
-        return;
-    }
-    /**
-     * A polyfill for requestIdleCallback that falls back to setTimeout.
-     *
-     * @param callback - The function to call when the browser is idle.
-     * @param options - Options object that may contain a timeout property.
-     * @returns An ID that can be used to cancel the callback.
-     * @public
-     */
-    globalThis.requestIdleCallback = function requestIdleCallback(callback, options) {
-        const start = Date.now();
-        return setTimeout(() => {
-            callback({
-                didTimeout: (options === null || options === void 0 ? void 0 : options.timeout)
-                    ? Date.now() - start >= options.timeout
-                    : false,
-                timeRemaining: () => 0,
-            });
-        }, 1);
-    };
-    /**
-     * A polyfill for cancelIdleCallback that falls back to clearTimeout.
-     *
-     * @param id - The ID of the callback to cancel.
-     * @public
-     */
-    globalThis.cancelIdleCallback = function cancelIdleCallback(id) {
-        clearTimeout(id);
-    };
-})();

package/dist/esm/styles/css-binding-directive.js DELETED Viewed

@@ -1,76 +0,0 @@
-import { CSSDirective } from "./css-directive.js";
-function handleChange(directive, controller, observer) {
-    controller.source.style.setProperty(directive.targetAspect, observer.bind(controller));
-}
-/**
- * Enables bindings in CSS.
- *
- * @public
- */
-export class CSSBindingDirective {
-    /**
-     * Creates an instance of CSSBindingDirective.
-     * @param dataBinding - The binding to use in CSS.
-     * @param targetAspect - The CSS property to target.
-     */
-    constructor(dataBinding, targetAspect) {
-        this.dataBinding = dataBinding;
-        this.targetAspect = targetAspect;
-    }
-    /**
-     * Creates a CSS fragment to interpolate into the CSS document.
-     * @returns - the string to interpolate into CSS
-     */
-    createCSS(add) {
-        add(this);
-        return `var(${this.targetAspect})`;
-    }
-    /**
-     * Executed when this behavior is attached to a controller.
-     * @param controller - Controls the behavior lifecycle.
-     */
-    addedCallback(controller) {
-        var _a;
-        const element = controller.source;
-        if (!element.$cssBindings) {
-            element.$cssBindings = new Map();
-            const setAttribute = element.setAttribute;
-            element.setAttribute = (attr, value) => {
-                setAttribute.call(element, attr, value);
-                if (attr === "style") {
-                    element.$cssBindings.forEach((v, k) => handleChange(k, v.controller, v.observer));
-                }
-            };
-        }
-        const observer = (_a = controller[this.targetAspect]) !== null && _a !== void 0 ? _a : (controller[this.targetAspect] = this.dataBinding.createObserver(this, this));
-        observer.controller = controller;
-        controller.source.$cssBindings.set(this, { controller, observer });
-    }
-    /**
-     * Executed when this behavior's host is connected.
-     * @param controller - Controls the behavior lifecycle.
-     */
-    connectedCallback(controller) {
-        handleChange(this, controller, controller[this.targetAspect]);
-    }
-    /**
-     * Executed when this behavior is detached from a controller.
-     * @param controller - Controls the behavior lifecycle.
-     */
-    removedCallback(controller) {
-        if (controller.source.$cssBindings) {
-            controller.source.$cssBindings.delete(this);
-        }
-    }
-    /**
-     * Called when a subject this instance has subscribed to changes.
-     * @param subject - The subject of the change.
-     * @param args - The event args detailing the change that occurred.
-     *
-     * @internal
-     */
-    handleChange(_, observer) {
-        handleChange(this, observer.controller, observer);
-    }
-}
-CSSDirective.define(CSSBindingDirective);

package/dist/esm/templating/install-hydratable-view-templates.js DELETED Viewed

@@ -1,23 +0,0 @@
-import { Hydratable } from "../components/hydration.js";
-import { ViewTemplate } from "./template.js";
-import { HydrationView } from "./view.js";
-// Configure ViewTemplate to be hydratable by attaching a symbol identifier
-// and a hydrate method. Augmenting the hydration features is done by
-// property assignment instead of class extension to better allow the
-// hydration feature to be tree-shaken.
-//
-// When hydrate() is called, it creates a HydrationView that wraps the
-// pre-rendered DOM range (firstChild → lastChild) instead of cloning a
-// compiled DocumentFragment. The HydrationView will then use
-// buildViewBindingTargets() to scan for hydration markers and attach
-// reactive bindings to the existing DOM nodes.
-Object.defineProperties(ViewTemplate.prototype, {
-    [Hydratable]: { value: Hydratable, enumerable: false, configurable: false },
-    hydrate: {
-        value: function (firstChild, lastChild, hostBindingTarget) {
-            return new HydrationView(firstChild, lastChild, this, hostBindingTarget);
-        },
-        enumerable: true,
-        configurable: false,
-    },
-});