@microsoft/fast-element 2.0.0-beta.19 → 2.0.0-beta.20

package/CHANGELOG.json

@@ -1,6 +1,51 @@
 {
   "name": "@microsoft/fast-element",
   "entries": [
+    {
+      "date": "Wed, 11 Jan 2023 22:07:47 GMT",
+      "tag": "@microsoft/fast-element_v2.0.0-beta.20",
+      "version": "2.0.0-beta.20",
+      "comments": {
+        "prerelease": [
+          {
+            "author": "863023+radium-v@users.noreply.github.com",
+            "package": "@microsoft/fast-element",
+            "commit": "555f1b2cd614a1d5a9bc3985fb892d040c110cb3",
+            "comment": "add nullableBooleanConverter for attributes"
+          },
+          {
+            "author": "chhol@microsoft.com",
+            "package": "@microsoft/fast-element",
+            "commit": "52cd5171c3e9061af8066443023782bca2b0e59b",
+            "comment": "update return type for dangerousHTML to DangerousHTMLDirective"
+          },
+          {
+            "author": "rob@bluespire.com",
+            "package": "@microsoft/fast-element",
+            "commit": "4c58813ec1b770b1f95c1b5993f8e3013a7544e2",
+            "comment": "chore: remove deprecated APIs from fast-element"
+          },
+          {
+            "author": "roeisenb@microsoft.com",
+            "package": "@microsoft/fast-element",
+            "commit": "84fd72febb4dff874db9322a6cb27e698b3ec790",
+            "comment": "chore: cleanup fast-element interfaces"
+          },
+          {
+            "author": "roeisenb@microsoft.com",
+            "package": "@microsoft/fast-element",
+            "commit": "5c3b2f0431ae8f840d3dc778ff93be73b585c6e2",
+            "comment": "refactor(fast-element): replace dangerousHTML with html.partial"
+          },
+          {
+            "author": "roeisenb@microsoft.com",
+            "package": "@microsoft/fast-element",
+            "commit": "d14f697ed3449db50384f5c1304f6bb384f9cfe0",
+            "comment": "feat: add ability to inline templates"
+          }
+        ]
+      }
+    },
     {
       "date": "Fri, 02 Dec 2022 01:18:22 GMT",
       "tag": "@microsoft/fast-element_v2.0.0-beta.19",

package/CHANGELOG.md

@@ -1,9 +1,22 @@
 # Change Log - @microsoft/fast-element
 
-This log was last generated on Fri, 02 Dec 2022 01:18:22 GMT and should not be manually modified.
+This log was last generated on Wed, 11 Jan 2023 22:07:47 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## 2.0.0-beta.20
+
+Wed, 11 Jan 2023 22:07:47 GMT
+
+### Changes
+
+- add nullableBooleanConverter for attributes (863023+radium-v@users.noreply.github.com)
+- update return type for dangerousHTML to DangerousHTMLDirective (chhol@microsoft.com)
+- chore: remove deprecated APIs from fast-element (rob@bluespire.com)
+- chore: cleanup fast-element interfaces (roeisenb@microsoft.com)
+- refactor(fast-element): replace dangerousHTML with html.partial (roeisenb@microsoft.com)
+- feat: add ability to inline templates (roeisenb@microsoft.com)
+
 ## 2.0.0-beta.19
 
 Fri, 02 Dec 2022 01:18:22 GMT

package/dist/dts/components/attributes.d.ts

@@ -62,6 +62,11 @@ export declare type DecoratorAttributeConfiguration = Omit<AttributeConfiguratio
  * @public
  */
 export declare const booleanConverter: ValueConverter;
+/**
+ * A {@link ValueConverter} that converts to and from `boolean` values. `null`, `undefined`, `""`, and `void` values are converted to `null`.
+ * @public
+ */
+export declare const nullableBooleanConverter: ValueConverter;
 /**
  * A {@link ValueConverter} that converts to and from `number` values.
  * @remarks

package/dist/dts/components/element-controller.d.ts

@@ -1,7 +1,7 @@
-import { StyleStrategy, StyleTarget } from "../interfaces.js";
 import { PropertyChangeNotifier } from "../observation/notifier.js";
 import { ElementStyles } from "../styles/element-styles.js";
 import type { HostBehavior, HostController } from "../styles/host.js";
+import type { StyleStrategy, StyleTarget } from "../styles/style-strategy.js";
 import type { ElementViewTemplate } from "../templating/template.js";
 import type { ElementView } from "../templating/view.js";
 import { FASTElementDefinition } from "./fast-definitions.js";

package/dist/dts/di/di.d.ts

@@ -477,11 +477,6 @@ export declare const DI: Readonly<{
      * in addition to its standard use in an inject array or through direct container APIs.
      */
     createContext: typeof createContext;
-    /**
-     * @deprecated
-     * Use DI.createContext instead.
-     */
-    createInterface: typeof createContext;
     /**
      * A decorator that specifies what to inject into its target.
      * @param dependencies - The dependencies to inject.

package/dist/dts/dom.d.ts

@@ -1,4 +1,3 @@
-import { Callable } from "./interfaces.js";
 /**
  * The type of HTML aspect to target.
  * @public
@@ -67,21 +66,6 @@ export interface DOMPolicy {
  * @public
  */
 export declare const DOM: Readonly<{
-    /**
-     * @deprecated
-     * Use Updates.enqueue().
-     */
-    queueUpdate: (callable: Callable) => void;
-    /**
-     * @deprecated
-     * Use Updates.next()
-     */
-    nextUpdate: () => Promise<void>;
-    /**
-     * @deprecated
-     * Use Updates.process()
-     */
-    processUpdates: () => void;
     /**
      * Gets the dom policy used by the templating system.
      */

package/dist/dts/index.d.ts

@@ -1,4 +1,4 @@
-export type { Callable, Constructable, Disposable, FASTGlobal, Mutable, StyleStrategy, StyleTarget, } from "./interfaces.js";
+export type { Callable, Constructable, Class, Disposable, FASTGlobal, TrustedTypesPolicy, } from "./interfaces.js";
 export * from "./platform.js";
 export * from "./dom.js";
 export * from "./observation/observable.js";
@@ -9,6 +9,7 @@ export * from "./styles/element-styles.js";
 export * from "./styles/css.js";
 export * from "./styles/css-directive.js";
 export * from "./styles/host.js";
+export * from "./styles/style-strategy.js";
 export * from "./templating/template.js";
 export * from "./templating/compiler.js";
 export { Markup, Parser } from "./templating/markup.js";
@@ -21,7 +22,6 @@ export * from "./templating/slotted.js";
 export * from "./templating/children.js";
 export * from "./templating/view.js";
 export * from "./templating/node-observation.js";
-export * from "./templating/dangerous-html.js";
 export * from "./components/fast-element.js";
 export * from "./components/fast-definitions.js";
 export * from "./components/attributes.js";

package/dist/dts/interfaces.d.ts

@@ -6,7 +6,7 @@ export declare type Callable = typeof Function.prototype.call | {
     call(): void;
 };
 /**
- * Allows for the creation of Constructable mixin classes.
+ * Represents a type which can be constructed with the new operator.
  *
  * @public
  */
@@ -14,18 +14,14 @@ export declare type Constructable<T = {}> = {
     new (...args: any[]): T;
 };
 /**
- * Represents a class.
+ * Represents a constructable class with a prototype.
  * @public
  */
-export declare type Class<T, C = {}> = C & {
+export declare type Class<T, C = {}> = C & Constructable<T> & {
     /**
      * The class's prototype;
      */
     readonly prototype: T;
-    /**
-     * The class's constructor.
-     */
-    new (...args: any[]): T;
 };
 /**
  * Provides a mechanism for releasing resources.
@@ -37,6 +33,17 @@ export interface Disposable {
      */
     dispose(): void;
 }
+/**
+ * A policy for use with the standard trustedTypes platform API.
+ * @public
+ */
+export declare type TrustedTypesPolicy = {
+    /**
+     * Creates trusted HTML.
+     * @param html - The HTML to clear as trustworthy.
+     */
+    createHTML(html: string): string;
+};
 /**
  * Reverses all readonly members, making them mutable.
  * @internal
@@ -93,48 +100,6 @@ declare type KernelServiceId = {
 };
 declare let KernelServiceId: KernelServiceId;
 export { KernelServiceId };
-/**
- * A node that can be targeted by styles.
- * @public
- */
-export interface StyleTarget extends Pick<Node, "getRootNode"> {
-    /**
-     * Stylesheets to be adopted by the node.
-     */
-    adoptedStyleSheets?: CSSStyleSheet[];
-    /**
-     * Adds styles to the target by appending the styles.
-     * @param styles - The styles element to add.
-     */
-    append(styles: HTMLStyleElement): void;
-    /**
-     * Removes styles from the target.
-     * @param styles - The styles element to remove.
-     */
-    removeChild(styles: HTMLStyleElement): void;
-    /**
-     * Returns all element descendants of node that match selectors.
-     * @param selectors - The CSS selector to use for the query.
-     */
-    querySelectorAll<E extends Element = Element>(selectors: string): NodeListOf<E>;
-}
-/**
- * Implemented to provide specific behavior when adding/removing styles
- * for elements.
- * @public
- */
-export interface StyleStrategy {
-    /**
-     * Adds styles to the target.
-     * @param target - The target to add the styles to.
-     */
-    addStylesTo(target: StyleTarget): void;
-    /**
-     * Removes styles from the target.
-     * @param target - The target to remove the styles from.
-     */
-    removeStylesFrom(target: StyleTarget): void;
-}
 /**
  * Warning and error messages.
  * @internal
@@ -166,25 +131,17 @@ export declare const enum Message {
     connectUpdateRequiresController = 1514
 }
 /**
+ * Determines whether or not an object is a function.
  * @internal
  */
 export declare const isFunction: (object: any) => object is Function;
 /**
+ * Determines whether or not an object is a string.
  * @internal
  */
 export declare const isString: (object: any) => object is string;
 /**
+ * A function which does nothing.
  * @internal
  */
 export declare const noop: () => undefined;
-/**
- * A policy for use with the standard trustedTypes platform API.
- * @public
- */
-export declare type TrustedTypesPolicy = {
-    /**
-     * Creates trusted HTML.
-     * @param html - The HTML to clear as trustworthy.
-     */
-    createHTML(html: string): string;
-};

package/dist/dts/styles/css.d.ts

@@ -27,8 +27,3 @@ export declare type CSSTemplateTag = ((strings: TemplateStringsArray, ...values:
  * @public
  */
 export declare const css: CSSTemplateTag;
-/**
- * @deprecated Use css.partial instead.
- * @public
- */
-export declare const cssPartial: (strings: TemplateStringsArray, ...values: (ComposableStyles | CSSDirective)[]) => CSSDirective;

package/dist/dts/styles/element-styles.d.ts

@@ -1,4 +1,4 @@
-import type { StyleStrategy, StyleTarget } from "../interfaces.js";
+import type { StyleStrategy, StyleTarget } from "./style-strategy.js";
 import type { HostBehavior } from "./host.js";
 /**
  * Represents styles that can be composed into the ShadowDOM of a custom element.

package/dist/dts/styles/style-strategy.d.ts

@@ -0,0 +1,42 @@
+/**
+ * A node that can be targeted by styles.
+ * @public
+ */
+export interface StyleTarget extends Pick<Node, "getRootNode"> {
+    /**
+     * Stylesheets to be adopted by the node.
+     */
+    adoptedStyleSheets?: CSSStyleSheet[];
+    /**
+     * Adds styles to the target by appending the styles.
+     * @param styles - The styles element to add.
+     */
+    append(styles: HTMLStyleElement): void;
+    /**
+     * Removes styles from the target.
+     * @param styles - The styles element to remove.
+     */
+    removeChild(styles: HTMLStyleElement): void;
+    /**
+     * Returns all element descendants of node that match selectors.
+     * @param selectors - The CSS selector to use for the query.
+     */
+    querySelectorAll<E extends Element = Element>(selectors: string): NodeListOf<E>;
+}
+/**
+ * Implemented to provide specific behavior when adding/removing styles
+ * for elements.
+ * @public
+ */
+export interface StyleStrategy {
+    /**
+     * Adds styles to the target.
+     * @param target - The target to add the styles to.
+     */
+    addStylesTo(target: StyleTarget): void;
+    /**
+     * Removes styles from the target.
+     * @param target - The target to remove the styles from.
+     */
+    removeStylesFrom(target: StyleTarget): void;
+}

package/dist/dts/templating/template.d.ts

@@ -1,6 +1,6 @@
 import type { DOMPolicy } from "../dom.js";
 import type { Expression } from "../observation/observable.js";
-import { Binding, HTMLDirective, ViewBehaviorFactory } from "./html-directive.js";
+import { AddViewBehaviorFactory, Binding, HTMLDirective, ViewBehaviorFactory } from "./html-directive.js";
 import type { ElementView, HTMLView, SyntheticView } from "./view.js";
 /**
  * A template capable of creating views specifically for rendering custom elements.
@@ -21,6 +21,13 @@ export interface ElementViewTemplate<TSource = any, TParent = any> {
      */
     render(source: TSource, host: Node, hostBindingTarget?: Element): ElementView<TSource, TParent>;
 }
+/**
+ * A marker interface used to capture types when interpolating Directive helpers
+ * into templates.
+ * @public
+ */
+export interface CaptureType<TSource, TParent> {
+}
 /**
  * A template capable of rendering views not specifically connected to custom elements.
  * @public
@@ -30,6 +37,10 @@ export interface SyntheticViewTemplate<TSource = any, TParent = any> {
      * Creates a SyntheticView instance based on this template definition.
      */
     create(): SyntheticView<TSource, TParent>;
+    /**
+     * Returns a directive that can inline the template.
+     */
+    inline(): CaptureType<TSource, TParent>;
 }
 /**
  * The result of a template compilation operation.
@@ -43,17 +54,32 @@ export interface HTMLTemplateCompilationResult<TSource = any, TParent = any> {
     createView(hostBindingTarget?: Element): HTMLView<TSource, TParent>;
 }
 /**
- * A marker interface used to capture types when interpolating Directive helpers
- * into templates.
+ * Represents the types of values that can be interpolated into a template.
  * @public
  */
-export interface CaptureType<TSource, TParent> {
-}
+export declare type TemplateValue<TSource, TParent = any> = Expression<TSource, any, TParent> | Binding<TSource, any, TParent> | HTMLDirective | CaptureType<TSource, TParent>;
 /**
- * Represents the types of values that can be interpolated into a template.
+ * Inlines a template into another template.
  * @public
  */
-export declare type TemplateValue<TSource, TParent = any> = Expression<TSource, any, TParent> | Binding<TSource, any, TParent> | HTMLDirective | CaptureType<TSource, TParent>;
+export declare class InlineTemplateDirective implements HTMLDirective {
+    private html;
+    private factories;
+    /**
+     * An empty template partial.
+     */
+    static readonly empty: InlineTemplateDirective;
+    /**
+     * Creates an instance of InlineTemplateDirective.
+     * @param template - The template to inline.
+     */
+    constructor(html: string, factories?: Record<string, ViewBehaviorFactory>);
+    /**
+     * Creates HTML to be used within a template.
+     * @param add - Can be used to add  behavior factories to a template.
+     */
+    createHTML(add: AddViewBehaviorFactory): string;
+}
 /**
  * A template capable of creating HTMLView instances or rendering directly to DOM.
  * @public
@@ -82,6 +108,10 @@ export declare class ViewTemplate<TSource = any, TParent = any> implements Eleme
      * @param hostBindingTarget - The element that host behaviors will be bound to.
      */
     create(hostBindingTarget?: Element): HTMLView<TSource, TParent>;
+    /**
+     * Returns a directive that can inline the template.
+     */
+    inline(): CaptureType<TSource, TParent>;
     /**
      * Sets the DOMPolicy for this template.
      * @param policy - The policy to associated with this template.
@@ -128,4 +158,21 @@ export declare class ViewTemplate<TSource = any, TParent = any> implements Eleme
  * other template instances, and Directive instances.
  * @public
  */
-export declare function html<TSource = any, TParent = any>(strings: TemplateStringsArray, ...values: TemplateValue<TSource, TParent>[]): ViewTemplate<TSource, TParent>;
+export declare type HTMLTemplateTag = (<TSource = any, TParent = any>(strings: TemplateStringsArray, ...values: TemplateValue<TSource, TParent>[]) => ViewTemplate<TSource, TParent>) & {
+    /**
+     * Transforms a template literal string into partial HTML.
+     * @param html - The HTML string fragment to interpolate.
+     * @public
+     */
+    partial(html: string): InlineTemplateDirective;
+};
+/**
+ * Transforms a template literal string into a ViewTemplate.
+ * @param strings - The string fragments that are interpolated with the values.
+ * @param values - The values that are interpolated with the string fragments.
+ * @remarks
+ * The html helper supports interpolation of strings, numbers, binding expressions,
+ * other template instances, and Directive instances.
+ * @public
+ */
+export declare const html: HTMLTemplateTag;

package/dist/esm/components/attributes.js

@@ -35,6 +35,20 @@ export const booleanConverter = {
             : true;
     },
 };
+/**
+ * A {@link ValueConverter} that converts to and from `boolean` values. `null`, `undefined`, `""`, and `void` values are converted to `null`.
+ * @public
+ */
+export const nullableBooleanConverter = {
+    toView(value) {
+        return typeof value === "boolean" ? value.toString() : "";
+    },
+    fromView(value) {
+        return [null, undefined, void 0].includes(value)
+            ? null
+            : booleanConverter.fromView(value);
+    },
+};
 function toNumber(value) {
     if (value === null || value === undefined) {
         return null;

package/dist/esm/di/di.js

@@ -414,11 +414,6 @@ export const DI = Object.freeze({
      * in addition to its standard use in an inject array or through direct container APIs.
      */
     createContext,
-    /**
-     * @deprecated
-     * Use DI.createContext instead.
-     */
-    createInterface: createContext,
     /**
      * A decorator that specifies what to inject into its target.
      * @param dependencies - The dependencies to inject.

package/dist/esm/dom.js

@@ -1,4 +1,3 @@
-import { Updates } from "./observation/update-queue.js";
 import "./interfaces.js";
 import { FAST } from "./platform.js";
 /**
@@ -53,21 +52,6 @@ const fastPolicy = defaultPolicy;
  * @public
  */
 export const DOM = Object.freeze({
-    /**
-     * @deprecated
-     * Use Updates.enqueue().
-     */
-    queueUpdate: Updates.enqueue,
-    /**
-     * @deprecated
-     * Use Updates.next()
-     */
-    nextUpdate: Updates.next,
-    /**
-     * @deprecated
-     * Use Updates.process()
-     */
-    processUpdates: Updates.process,
     /**
      * Gets the dom policy used by the templating system.
      */

package/dist/esm/index.js

@@ -10,6 +10,7 @@ export * from "./styles/element-styles.js";
 export * from "./styles/css.js";
 export * from "./styles/css-directive.js";
 export * from "./styles/host.js";
+export * from "./styles/style-strategy.js";
 // Templating
 export * from "./templating/template.js";
 export * from "./templating/compiler.js";
@@ -23,7 +24,6 @@ export * from "./templating/slotted.js";
 export * from "./templating/children.js";
 export * from "./templating/view.js";
 export * from "./templating/node-observation.js";
-export * from "./templating/dangerous-html.js";
 // Components
 export * from "./components/fast-element.js";
 export * from "./components/fast-definitions.js";

package/dist/esm/interfaces.js

@@ -44,14 +44,17 @@ switch (kernelMode) {
 }
 export { KernelServiceId };
 /**
+ * Determines whether or not an object is a function.
  * @internal
  */
 export const isFunction = (object) => typeof object === "function";
 /**
+ * Determines whether or not an object is a string.
  * @internal
  */
 export const isString = (object) => typeof object === "string";
 /**
+ * A function which does nothing.
  * @internal
  */
 export const noop = () => void 0;

package/dist/esm/styles/css.js

@@ -83,8 +83,3 @@ css.partial = (strings, ...values) => {
     const { styles, behaviors } = collectStyles(strings, values);
     return new CSSPartial(styles, behaviors);
 };
-/**
- * @deprecated Use css.partial instead.
- * @public
- */
-export const cssPartial = css.partial;

package/dist/esm/styles/style-strategy.js

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

package/dist/esm/templating/template.js

@@ -1,4 +1,4 @@
-import { isFunction, noop } from "../interfaces.js";
+import { isFunction, isString, noop } from "../interfaces.js";
 import { FAST } from "../platform.js";
 import { bind, HTMLBindingDirective, oneTime } from "./binding.js";
 import { Compiler } from "./compiler.js";
@@ -8,6 +8,37 @@ import { nextId } from "./markup.js";
 const lastAttributeNameRegex = 
 /* eslint-disable-next-line no-control-regex */
 /([ \x09\x0a\x0c\x0d])([^\0-\x1F\x7F-\x9F "'>=/]+)([ \x09\x0a\x0c\x0d]*=[ \x09\x0a\x0c\x0d]*(?:[^ \x09\x0a\x0c\x0d"'`<>=]*|"[^"]*|'[^']*))$/;
+const noFactories = Object.create(null);
+/**
+ * Inlines a template into another template.
+ * @public
+ */
+export class InlineTemplateDirective {
+    /**
+     * Creates an instance of InlineTemplateDirective.
+     * @param template - The template to inline.
+     */
+    constructor(html, factories = noFactories) {
+        this.html = html;
+        this.factories = factories;
+    }
+    /**
+     * Creates HTML to be used within a template.
+     * @param add - Can be used to add  behavior factories to a template.
+     */
+    createHTML(add) {
+        const factories = this.factories;
+        for (const key in factories) {
+            add(factories[key]);
+        }
+        return this.html;
+    }
+}
+/**
+ * An empty template partial.
+ */
+InlineTemplateDirective.empty = new InlineTemplateDirective("");
+HTMLDirective.define(InlineTemplateDirective);
 function createHTML(value, prevString, add, definition = HTMLDirective.getForInstance(value)) {
     if (definition.aspected) {
         const match = lastAttributeNameRegex.exec(prevString);
@@ -49,6 +80,12 @@ export class ViewTemplate {
         }
         return this.result.createView(hostBindingTarget);
     }
+    /**
+     * Returns a directive that can inline the template.
+     */
+    inline() {
+        return new InlineTemplateDirective(isString(this.html) ? this.html : this.html.innerHTML, this.factories);
+    }
     /**
      * Sets the DOMPolicy for this template.
      * @param policy - The policy to associated with this template.
@@ -131,9 +168,12 @@ export class ViewTemplate {
  * other template instances, and Directive instances.
  * @public
  */
-export function html(strings, ...values) {
+export const html = ((strings, ...values) => {
     if (Array.isArray(strings) && Array.isArray(strings.raw)) {
         return ViewTemplate.create(strings, values);
     }
     throw FAST.error(1206 /* Message.directCallToHTMLTagNotAllowed */);
-}
+});
+html.partial = (html) => {
+    return new InlineTemplateDirective(html);
+};