@microsoft/fast-html 1.0.0-alpha.1 → 1.0.0-alpha.2

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

@@ -0,0 +1 @@
+export { TemplateElement } from "./template.js";

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

@@ -0,0 +1,61 @@
+import { FASTElement } from "@microsoft/fast-element";
+/**
+ * The <f-template> custom element that will provide view logic to the element
+ */
+declare class TemplateElement extends FASTElement {
+    /**
+     * The name of the custom element this template will be applied to
+     */
+    name?: string;
+    private partials;
+    connectedCallback(): void;
+    /**
+     * Resolve strings and values from an innerHTML string
+     * @param innerHTML - The innerHTML.
+     * @param self - Indicates that this should refer to itself instead of a property when creating bindings.
+     */
+    private resolveStringsAndValues;
+    /**
+     * Resolve a template or behavior
+     * @param strings - The strings array.
+     * @param values - The interpreted values.
+     */
+    private resolveTemplateOrBehavior;
+    /**
+     * Resolve a template directive
+     * @param behaviorConfig - The directive behavior configuration object.
+     * @param externalValues - The interpreted values from the parent.
+     * @param innerHTML - The innerHTML.
+     */
+    private resolveTemplateDirective;
+    /**
+     * Resolve a template directive
+     * @param name - The name of the directive.
+     * @param propName - The property name to pass to the directive.
+     * @param externalValues - The interpreted values from the parent.
+     */
+    private resolveAttributeDirective;
+    /**
+     * Resolver of a data binding
+     * @param innerHTML - The innerHTML.
+     * @param strings - The strings array.
+     * @param values - The interpreted values.
+     * @param self - Indicates that this should refer to itself instead of a property when creating bindings.
+     * @param behaviorConfig - The binding behavior configuration object.
+     */
+    private resolveDataBinding;
+    /**
+     * Resolver of the innerHTML string
+     * @param innerHTML - The innerHTML.
+     * @param strings - The strings array.
+     * @param values - The interpreted values.
+     * @param self - Indicates that this should refer to itself instead of a property when creating bindings.
+     */
+    private resolveInnerHTML;
+    /**
+     * Resolve all partial templates
+     * @param unresolvedInnerHTML - The innerHTML.
+     */
+    private resolveAllPartials;
+}
+export { TemplateElement };

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

@@ -0,0 +1,75 @@
+type BehaviorType = "dataBinding" | "templateDirective";
+type TemplateDirective = "when" | "repeat" | "apply";
+export type AttributeDirective = "children" | "slotted" | "ref";
+interface BehaviorConfig {
+    type: BehaviorType;
+}
+export interface ContentDataBindingBehaviorConfig extends BaseDataBindingBehaviorConfig {
+    subtype: "content";
+}
+export interface AttributeDataBindingBehaviorConfig extends BaseDataBindingBehaviorConfig {
+    subtype: "attribute";
+    aspect: "@" | ":" | "?" | null;
+}
+export interface AttributeDirectiveBindingBehaviorConfig extends BaseDataBindingBehaviorConfig {
+    subtype: "attributeDirective";
+    name: AttributeDirective;
+}
+export type DataBindingBehaviorConfig = ContentDataBindingBehaviorConfig | AttributeDataBindingBehaviorConfig | AttributeDirectiveBindingBehaviorConfig;
+export interface BaseDataBindingBehaviorConfig extends BehaviorConfig {
+    type: "dataBinding";
+    openingStartIndex: number;
+    openingEndIndex: number;
+    closingStartIndex: number;
+    closingEndIndex: number;
+}
+export interface TemplateDirectiveBehaviorConfig extends BehaviorConfig {
+    type: "templateDirective";
+    name: TemplateDirective;
+    value: string;
+    openingTagStartIndex: number;
+    openingTagEndIndex: number;
+    closingTagStartIndex: number;
+    closingTagEndIndex: number;
+}
+interface PartialTemplateConfig {
+    innerHTML: string;
+    startIndex: number;
+    endIndex: number;
+}
+/**
+ * Get the index of the next matching tag
+ * @param openingTagStartSlice - The slice starting from the opening tag
+ * @param openingTag - The opening tag string
+ * @param closingTag - The closing tag
+ * @param openingTagStartIndex - The opening tag start index derived from the innerHTML
+ * @returns index
+ */
+export declare function getIndexOfNextMatchingTag(openingTagStartSlice: string, openingTag: string, closingTag: string, openingTagStartIndex: number): number;
+/**
+ * Get the next behavior
+ * @param innerHTML - The innerHTML string to evaluate
+ * @returns DataBindingBehaviorConfig | DirectiveBehaviorConfig | null - A configuration object or null
+ */
+export declare function getNextBehavior(innerHTML: string): DataBindingBehaviorConfig | TemplateDirectiveBehaviorConfig | null;
+/**
+ * Gets all the partials with their IDs
+ * @param innerHTML - The innerHTML string to evaluate
+ * @param offset - The index offset from the innerHTML
+ * @param partials - The partials found
+ * @returns {[key: string]: PartialTemplateConfig}
+ */
+export declare function getAllPartials(innerHTML: string, offset?: number, partials?: {
+    [key: string]: PartialTemplateConfig;
+}): {
+    [key: string]: PartialTemplateConfig;
+};
+/**
+ * Create a function to resolve a value from an object using a path with dot syntax.
+ * e.g. "foo.bar"
+ * @param path - The dot syntax path to an objects property.
+ * @param self - Where the first item in the path path refers to the item itself (used by repeat).
+ * @returns A function to access the value from a given path.
+ */
+export declare function pathResolver(path: string, self?: boolean): (accessibleObject: any) => any;
+export {};

package/dist/dts/components/utilities.spec.d.ts

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

package/dist/dts/debug.d.ts

@@ -0,0 +1,3 @@
+export declare const debugMessages: {
+    2000: string;
+};

package/dist/dts/fixtures/attribute/attribute.spec.d.ts

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

package/dist/dts/fixtures/attribute/main.d.ts

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

package/dist/dts/fixtures/binding/binding.spec.d.ts

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

package/dist/dts/fixtures/binding/main.d.ts

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

package/dist/dts/fixtures/children/children.spec.d.ts

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

package/dist/dts/fixtures/children/main.d.ts

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

package/dist/dts/fixtures/dot-syntax/dot-syntax.spec.d.ts

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

package/dist/dts/fixtures/dot-syntax/main.d.ts

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

package/dist/dts/fixtures/event/event.spec.d.ts

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

package/dist/dts/fixtures/event/main.d.ts

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

package/dist/dts/fixtures/partial/main.d.ts

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

package/dist/dts/fixtures/partial/partial.spec.d.ts

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

package/dist/dts/fixtures/ref/main.d.ts

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

package/dist/dts/fixtures/ref/ref.spec.d.ts

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

package/dist/dts/fixtures/repeat/main.d.ts

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

package/dist/dts/fixtures/repeat/repeat.spec.d.ts

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

package/dist/dts/fixtures/slotted/main.d.ts

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

package/dist/dts/fixtures/slotted/slotted.spec.d.ts

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

package/dist/dts/fixtures/when/main.d.ts

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

package/dist/dts/fixtures/when/when.spec.d.ts

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

package/dist/dts/index.d.ts

@@ -0,0 +1 @@
+export { TemplateElement } from "./components/index.js";

package/dist/dts/interfaces.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Warning and error messages.
+ * @internal
+ */
+export declare const enum Message {
+    noTemplateProvided = 2000
+}

package/dist/dts/tsdoc-metadata.json

@@ -0,0 +1,11 @@
+// This file is read by tools that parse documentation comments conforming to the TSDoc standard.
+// It should be published with your NPM package.  It should not be tracked by Git.
+{
+  "tsdocVersion": "0.12",
+  "toolPackages": [
+    {
+      "packageName": "@microsoft/api-extractor",
+      "packageVersion": "7.47.0"
+    }
+  ]
+}

package/dist/esm/components/index.js

@@ -0,0 +1 @@
+export { TemplateElement } from "./template.js";

package/dist/esm/components/template.js

@@ -0,0 +1,223 @@
+import { __awaiter, __decorate, __metadata } from "tslib";
+import { attr, FAST, FASTElement, fastElementRegistry, ViewTemplate, } from "@microsoft/fast-element";
+import { DOMPolicy } from "@microsoft/fast-element/dom-policy.js";
+import { getAllPartials, getNextBehavior, pathResolver, } from "./utilities.js";
+/**
+ * The <f-template> custom element that will provide view logic to the element
+ */
+class TemplateElement extends FASTElement {
+    constructor() {
+        super(...arguments);
+        this.partials = {};
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        if (this.name) {
+            this.$fastController.definition.registry
+                .whenDefined(this.name)
+                .then((value) => __awaiter(this, void 0, void 0, function* () {
+                const registeredFastElement = fastElementRegistry.getByType(value);
+                const template = this.getElementsByTagName("template").item(0);
+                if (template) {
+                    yield this.resolveAllPartials(this.innerHTML);
+                    const { strings, values } = yield this.resolveStringsAndValues(this.innerHTML);
+                    if (registeredFastElement) {
+                        // all new elements will get the updated template
+                        registeredFastElement.template =
+                            this.resolveTemplateOrBehavior(strings, values);
+                    }
+                }
+                else {
+                    throw FAST.error(2000 /* Message.noTemplateProvided */, { name: this.name });
+                }
+            }));
+        }
+    }
+    /**
+     * Resolve strings and values from an innerHTML string
+     * @param innerHTML - The innerHTML.
+     * @param self - Indicates that this should refer to itself instead of a property when creating bindings.
+     */
+    resolveStringsAndValues(innerHTML, self = false) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const strings = [];
+            const values = []; // these can be bindings, directives, etc.
+            yield this.resolveInnerHTML(innerHTML, strings, values, self);
+            strings.raw = strings.map(value => String.raw({ raw: value }));
+            return {
+                strings,
+                values,
+            };
+        });
+    }
+    /**
+     * Resolve a template or behavior
+     * @param strings - The strings array.
+     * @param values - The interpreted values.
+     */
+    resolveTemplateOrBehavior(strings, values) {
+        return ViewTemplate.create(strings, values, DOMPolicy.create());
+    }
+    /**
+     * Resolve a template directive
+     * @param behaviorConfig - The directive behavior configuration object.
+     * @param externalValues - The interpreted values from the parent.
+     * @param innerHTML - The innerHTML.
+     */
+    resolveTemplateDirective(behaviorConfig, externalValues, innerHTML, self = false) {
+        var _a;
+        return __awaiter(this, void 0, void 0, function* () {
+            switch (behaviorConfig.name) {
+                case "when":
+                    {
+                        const { strings, values } = yield this.resolveStringsAndValues(innerHTML.slice(behaviorConfig.openingTagEndIndex, behaviorConfig.closingTagStartIndex));
+                        const { when } = yield import("@microsoft/fast-element");
+                        externalValues.push(when(x => pathResolver(behaviorConfig.value, self)(x), this.resolveTemplateOrBehavior(strings, values)));
+                    }
+                    break;
+                case "repeat":
+                    {
+                        const valueAttr = behaviorConfig.value.split(" "); // syntax {{x in y}}
+                        const { strings, values } = yield this.resolveStringsAndValues(innerHTML.slice(behaviorConfig.openingTagEndIndex, behaviorConfig.closingTagStartIndex), true);
+                        const { repeat } = yield import("@microsoft/fast-element");
+                        externalValues.push(repeat(x => pathResolver(valueAttr[2], self)(x), this.resolveTemplateOrBehavior(strings, values)));
+                    }
+                    break;
+                case "apply": {
+                    const openingTag = innerHTML.slice(behaviorConfig.openingTagStartIndex, behaviorConfig.openingTagEndIndex);
+                    const partial = (_a = openingTag
+                        .split(" ")
+                        .find(tagPart => {
+                        return tagPart.startsWith("partial");
+                    })) === null || _a === void 0 ? void 0 : _a.split('"')[1];
+                    if (partial) {
+                        const { when } = yield import("@microsoft/fast-element");
+                        externalValues.push(when(x => pathResolver(behaviorConfig.value, self)(x), () => this.partials[partial]));
+                    }
+                }
+            }
+        });
+    }
+    /**
+     * Resolve a template directive
+     * @param name - The name of the directive.
+     * @param propName - The property name to pass to the directive.
+     * @param externalValues - The interpreted values from the parent.
+     */
+    resolveAttributeDirective(name, propName, externalValues) {
+        return __awaiter(this, void 0, void 0, function* () {
+            switch (name) {
+                case "children":
+                    {
+                        const { children } = yield import("@microsoft/fast-element");
+                        externalValues.push(children(propName));
+                    }
+                    break;
+                case "slotted":
+                    {
+                        const { slotted } = yield import("@microsoft/fast-element");
+                        externalValues.push(slotted(propName));
+                    }
+                    break;
+                case "ref":
+                    {
+                        const { ref } = yield import("@microsoft/fast-element");
+                        externalValues.push(ref(propName));
+                    }
+                    break;
+            }
+        });
+    }
+    /**
+     * Resolver of a data binding
+     * @param innerHTML - The innerHTML.
+     * @param strings - The strings array.
+     * @param values - The interpreted values.
+     * @param self - Indicates that this should refer to itself instead of a property when creating bindings.
+     * @param behaviorConfig - The binding behavior configuration object.
+     */
+    resolveDataBinding(innerHTML, strings, values, self = false, behaviorConfig) {
+        return __awaiter(this, void 0, void 0, function* () {
+            switch (behaviorConfig.subtype) {
+                case "content":
+                    {
+                        strings.push(innerHTML.slice(0, behaviorConfig.openingStartIndex));
+                        const propName = innerHTML.slice(behaviorConfig.openingEndIndex, behaviorConfig.closingStartIndex);
+                        const binding = (x) => pathResolver(propName, self)(x);
+                        values.push(binding);
+                        yield this.resolveInnerHTML(innerHTML.slice(behaviorConfig.closingEndIndex, innerHTML.length), strings, values, self);
+                    }
+                    break;
+                case "attribute":
+                    strings.push(innerHTML.slice(0, behaviorConfig.openingStartIndex));
+                    if (behaviorConfig.aspect === "@") {
+                        const propName = innerHTML.slice(behaviorConfig.openingEndIndex, behaviorConfig.closingStartIndex - 2);
+                        const binding = (x) => pathResolver(propName, self)(x)();
+                        values.push(binding);
+                    }
+                    else {
+                        const propName = innerHTML.slice(behaviorConfig.openingEndIndex, behaviorConfig.closingStartIndex);
+                        const binding = (x) => pathResolver(propName, self)(x);
+                        values.push(binding);
+                    }
+                    yield this.resolveInnerHTML(innerHTML.slice(behaviorConfig.closingEndIndex, innerHTML.length), strings, values, self);
+                    break;
+                case "attributeDirective":
+                    {
+                        strings.push(innerHTML.slice(0, behaviorConfig.openingStartIndex -
+                            behaviorConfig.name.length -
+                            4));
+                        const propName = innerHTML.slice(behaviorConfig.openingEndIndex, behaviorConfig.closingStartIndex);
+                        yield this.resolveAttributeDirective(behaviorConfig.name, propName, values);
+                        yield this.resolveInnerHTML(innerHTML.slice(behaviorConfig.closingEndIndex + 1, innerHTML.length), strings, values, self);
+                    }
+                    break;
+            }
+        });
+    }
+    /**
+     * Resolver of the innerHTML string
+     * @param innerHTML - The innerHTML.
+     * @param strings - The strings array.
+     * @param values - The interpreted values.
+     * @param self - Indicates that this should refer to itself instead of a property when creating bindings.
+     */
+    resolveInnerHTML(innerHTML, strings, values, self = false) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const behaviorConfig = getNextBehavior(innerHTML);
+            if (behaviorConfig === null) {
+                strings.push(innerHTML);
+            }
+            else {
+                switch (behaviorConfig.type) {
+                    case "dataBinding":
+                        yield this.resolveDataBinding(innerHTML, strings, values, self, behaviorConfig);
+                        break;
+                    case "templateDirective":
+                        strings.push(innerHTML.slice(0, behaviorConfig.openingTagStartIndex));
+                        yield this.resolveTemplateDirective(behaviorConfig, values, innerHTML, self);
+                        yield this.resolveInnerHTML(innerHTML.slice(behaviorConfig.closingTagEndIndex, innerHTML.length), strings, values, self);
+                        break;
+                }
+            }
+        });
+    }
+    /**
+     * Resolve all partial templates
+     * @param unresolvedInnerHTML - The innerHTML.
+     */
+    resolveAllPartials(unresolvedInnerHTML) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const allPartials = Object.entries(getAllPartials(unresolvedInnerHTML));
+            for (let i = 0, partialLength = allPartials.length; i < partialLength; i++) {
+                const { strings, values } = yield this.resolveStringsAndValues(allPartials[i][1].innerHTML);
+                this.partials[allPartials[i][0]] = this.resolveTemplateOrBehavior(strings, values);
+            }
+        });
+    }
+}
+__decorate([
+    attr,
+    __metadata("design:type", String)
+], TemplateElement.prototype, "name", void 0);
+export { TemplateElement };